docs(foundations): add motion, RTL, status, and Code Connect coverage docs

libs/core/.storybook/preview.js

@@ -138,10 +138,29 @@ const withTheme = (StoryFn, context) => {
   return StoryFn();
 };
 
+// Direction decorator that applies `dir` on the preview iframe only.
+// Unlike data-theme, `dir` is interpreted by the browser and must not be set on
+// window.parent (that would flip Storybook manager/docs chrome).
+// See Guides/RTL and localization for usage.
+const withDirection = (StoryFn, context) => {
+  const direction = context.globals.direction || 'ltr';
+
+  document.documentElement.setAttribute('dir', direction);
+  document.body.setAttribute('dir', direction);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('dir', direction);
+    document.body.setAttribute('dir', direction);
+  }, [direction]);
+
+  return StoryFn();
+};
+
 const preview = {
   decorators: [
     withCustomEventActions,
     withTheme,
+    withDirection,
   ],
 
   globalTypes: {
@@ -157,10 +176,23 @@ const preview = {
         dynamicTitle: true,
       },
     },
+    direction: {
+      description: 'Document direction (LTR or RTL)',
+      toolbar: {
+        title: 'Direction',
+        icon: 'transfer',
+        items: [
+          { value: 'ltr', title: 'LTR', right: 'Left-to-right' },
+          { value: 'rtl', title: 'RTL', right: 'Right-to-left' },
+        ],
+        dynamicTitle: true,
+      },
+    },
   },
 
   initialGlobals: {
     theme: 'light',
+    direction: 'ltr',
   },
 
   parameters: {

libs/core/src/components/pds-checkbox/pds-checkbox.scss

@@ -47,10 +47,10 @@
       content: "";
       display: block;
       height: 7px;
-      left: 50%;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
       position: absolute;
-      top: 50%;
-      transform: rotate(90deg) translate3d(-103%, 32%, 0);
+      transform: translate(-50%, -50%) rotate(90deg);
       width: 4px;
     }
   }
@@ -90,10 +90,10 @@ input {
       content: "";
       display: block;
       height: 7px;
-      left: 50%;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
       position: absolute;
-      top: 50%;
-      transform: rotate(43deg) translate3d(-110%, -30%, 0);
+      transform: translate(-50%, -60%) rotate(43deg);
       width: 4px;
     }
   }
@@ -126,6 +126,12 @@ input {
   }
 }
 
+:host-context([dir='rtl']) {
+  input:checked::after {
+    transform: translate(-50%, -60%) rotate(-43deg);
+  }
+}
+
 label {
   display: flex;
   gap: var(--pine-dimension-xs);

libs/core/src/components/pds-combobox/pds-combobox.scss

@@ -70,9 +70,9 @@
 
 .pds-combobox__input-icon {
   color: var(--pine-color-text-secondary);
+  inset-inline-end: var(--pine-dimension-150);
   pointer-events: none;
   position: absolute;
-  right: var(--pine-dimension-150);
   z-index: var(--pine-z-index-raised);
 }
 

libs/core/src/components/pds-filters/pds-filter/pds-filter.scss

@@ -179,7 +179,7 @@
   /* Modern browsers: CSS anchor positioning with JavaScript-controlled flipping */
   @supports (anchor-name: --test) {
     inset-block-start: calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));
-    inset-inline-start: anchor(--filter-trigger left);
+    inset-inline-start: anchor(--filter-trigger start);
     position: fixed; /* Anchor positioning requires fixed positioning */
     /* stylelint-disable-next-line property-no-unknown */
     position-anchor: --filter-trigger;
@@ -188,8 +188,8 @@
 
     /* Flipping classes applied by JavaScript for precise control */
     &.popover-flip-horizontal {
-      inset-inline-start: anchor(--filter-trigger right);
-      transform: translateX(-100%);
+      inset-inline-end: anchor(--filter-trigger end);
+      inset-inline-start: auto;
     }
 
     &.popover-flip-vertical {
@@ -199,14 +199,15 @@
 
     &.popover-flip-horizontal.popover-flip-vertical {
       inset-block-start: anchor(--filter-trigger top);
-      inset-inline-start: anchor(--filter-trigger right);
-      transform: translate(-100%, calc(-100% - var(--pine-dimension-100)));
+      inset-inline-end: anchor(--filter-trigger end);
+      inset-inline-start: auto;
+      transform: translateY(calc(-100% - var(--pine-dimension-100)));
     }
 
     /* Ensure fallback class works with flipping in modern browsers */
     &.is-open.popover-flip-horizontal {
-      inset-inline-start: anchor(--filter-trigger right);
-      transform: translateX(-100%);
+      inset-inline-end: anchor(--filter-trigger end);
+      inset-inline-start: auto;
     }
 
     &.is-open.popover-flip-vertical {
@@ -216,8 +217,9 @@
 
     &.is-open.popover-flip-horizontal.popover-flip-vertical {
       inset-block-start: anchor(--filter-trigger top);
-      inset-inline-start: anchor(--filter-trigger right);
-      transform: translate(-100%, calc(-100% - var(--pine-dimension-100)));
+      inset-inline-end: anchor(--filter-trigger end);
+      inset-inline-start: auto;
+      transform: translateY(calc(-100% - var(--pine-dimension-100)));
     }
 
   }

libs/core/src/components/pds-filters/pds-filter/pds-filter.tsx

@@ -1,5 +1,6 @@
 import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Method, Listen } from '@stencil/core';
 import type { BasePdsProps } from '@utils/interfaces';
+import { isRtlDirection } from '@utils/scroll';
 import type { PdsFilterOpenEventDetail, PdsFilterCloseEventDetail, PdsFilterClearEventDetail, PdsFilterVariant } from './filter-interface';
 
 import { enlarge, trash } from '@pine-ds/icons/icons';
@@ -254,16 +255,19 @@ export class PdsFilter implements BasePdsProps {
     const popoverWidth = 228;
     const popoverHeight = this.popoverEl.getBoundingClientRect().height || 200;
 
-    // Boundary detection for flipping
+    // Boundary detection for flipping (inline-end overflow respects document direction)
     const bufferSpace = 20;
-    const wouldOverflowRight = (triggerRect.left + popoverWidth + bufferSpace) > viewportWidth;
+    const isRtl = isRtlDirection(this.el);
+    const wouldOverflowInlineEnd = isRtl
+      ? (triggerRect.right - popoverWidth - bufferSpace) < 0
+      : (triggerRect.left + popoverWidth + bufferSpace) > viewportWidth;
     const wouldOverflowBottom = (triggerRect.bottom + 8 + popoverHeight + bufferSpace) > viewportHeight;
 
     if (supportsAnchorPositioning) {
       // Modern browsers: CSS anchor positioning + JavaScript-controlled flipping
       this.popoverEl.classList.remove('popover-flip-horizontal', 'popover-flip-vertical');
 
-      if (wouldOverflowRight) {
+      if (wouldOverflowInlineEnd) {
         this.popoverEl.classList.add('popover-flip-horizontal');
       }
 
@@ -273,15 +277,15 @@ export class PdsFilter implements BasePdsProps {
 
     } else {
       // Fallback browsers: JavaScript positioning with boundary detection
-      let left = triggerRect.left;
+      let left = isRtl ? triggerRect.right - popoverWidth : triggerRect.left;
       let top = triggerRect.bottom + 8;
-      let transformOrigin = 'top left';
+      let transformOrigin = isRtl ? 'top right' : 'top left';
 
       // Apply horizontal flipping if needed
-      if (wouldOverflowRight) {
+      if (wouldOverflowInlineEnd) {
         const actualPopoverWidth = this.popoverEl.getBoundingClientRect().width || popoverWidth;
-        left = triggerRect.right - actualPopoverWidth;
-        transformOrigin = 'top right';
+        left = isRtl ? triggerRect.left : triggerRect.right - actualPopoverWidth;
+        transformOrigin = isRtl ? 'top left' : 'top right';
       }
 
       // Apply vertical flipping if needed

libs/core/src/components/pds-input/pds-input.scss

@@ -48,14 +48,14 @@
     border-end-start-radius: var(--pds-input-border-radius);
     border-inline-end: var(--pine-border-width-none);
     border-start-start-radius: var(--pds-input-border-radius);
-    left: var(--pds-input-padding-x);
+    inset-inline-start: var(--pds-input-padding-x);
   }
 
   &::part(suffix) {
     border-end-end-radius: var(--pds-input-border-radius);
     border-inline-start: var(--pine-border-width-none);
     border-start-end-radius: var(--pds-input-border-radius);
-    right: var(--pds-input-padding-x);
+    inset-inline-end: var(--pds-input-padding-x);
   }
 
   &::part(prepend),
@@ -114,15 +114,19 @@
   --pds-select-background: var(--pds-input-addon-background);
   --pds-select-border: var(--pine-border-width-none);
   --pds-select-border-radius-end-end: var(--pine-dimension-none);
+  --pds-select-border-radius-end-start: var(--pds-input-border-radius);
   --pds-select-border-radius-start-end: var(--pine-dimension-none);
+  --pds-select-border-radius-start-start: var(--pds-input-border-radius);
   --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
 }
 
 /* stylelint-disable-next-line */
 :host([has-append]) ::slotted(pds-select[slot="append"]) {
   --pds-select-background: var(--pds-input-addon-background);
   --pds-select-border: var(--pine-border-width-none);
+  --pds-select-border-radius-end-end: var(--pds-input-border-radius);
   --pds-select-border-radius-end-start: var(--pine-dimension-none);
+  --pds-select-border-radius-start-end: var(--pds-input-border-radius);
   --pds-select-border-radius-start-start: var(--pine-dimension-none);
   --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
 }

libs/core/src/components/pds-modal/pds-modal.scss

@@ -13,7 +13,7 @@
   opacity: 0;
   padding: 0;
   position: fixed;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
+  transition: opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);
   visibility: hidden;
   width: 100%;
   z-index: var(--pine-z-index-modal);
@@ -33,6 +33,7 @@
 
   &.open {
     opacity: 1;
+    transition-timing-function: var(--pine-motion-easing-out);
     visibility: visible;
   }
 }

libs/core/src/components/pds-select/pds-select.scss

@@ -58,11 +58,10 @@ select {
   appearance: none;
   background-color: var(--pds-select-background);
   border: var(--pds-select-border);
-  border-radius: var(--pds-select-border-radius);
-  border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));
-  border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));
-  border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));
-  border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));
+  border-end-end-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));
+  border-end-start-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));
+  border-start-end-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));
+  border-start-start-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));
   color: var(--pine-color-text);
   font: var(--pine-typography-body);
   grid-area: field;
@@ -104,6 +103,12 @@ select {
   }
 }
 
+:host(.is-disabled) {
+  .pds-select__select-icon {
+    color: var(--pine-color-text-disabled);
+  }
+}
+
 :host(.is-invalid) {
   select {
     background-color: var(--pine-select-color-background-danger);

libs/core/src/components/pds-switch/pds-switch.scss

@@ -56,10 +56,10 @@ input {
     display: block;
     height: var(--sizing-input-toggle-size);
     inset-block-start: 50%;
-    inset-inline-start: 50%;
+    inset-inline-start: var(--pine-dimension-025);
     position: absolute;
-    transform: translate3d(-100%, -50%, 0);
-    transition: transform var(--number-transition-timing);
+    transform: translateY(-50%);
+    transition: inset-inline-start var(--number-transition-timing);
     width: var(--sizing-input-toggle-size);
   }
 }
@@ -141,7 +141,7 @@ input:focus-visible:not(:disabled) {
 // 'Checked' state
 // switch toggle
 input:checked::after {
-  transform: translate3d(0, -50%, 0);
+  inset-inline-start: calc(100% - var(--sizing-input-toggle-size) - var(--pine-dimension-025));
 }
 
 // switch container

libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.scss

@@ -20,11 +20,17 @@
 
 :host(.is-fixed) {
   background: var(--pine-color-background-container);
-  left: 0;
+  inset-inline-start: 0;
   position: sticky;
   z-index: var(--pine-z-index-raised);
 }
 
+// Flip shadow toward scrollable content when fixed column is on the inline-end edge.
+:host-context([dir='rtl']) {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  --box-shadow-fixed: -3px 3px 6px -2px rgba(0, 0, 0, 0.2);
+}
+
 // box shadow when table has scrolled and cell is fixed
 :host(.has-scrolled.is-fixed) {
   box-shadow: var(--box-shadow-fixed);

libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.tsx

@@ -1,4 +1,5 @@
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import { isScrolledFromInlineStart } from '../../../utils/scroll';
 import { setupTruncationTooltip } from '../../../utils/truncation-tooltip';
 
 @Component({
@@ -152,7 +153,7 @@ export class PdsTableCell {
     }
 
     try {
-      this.tableScrolling = this.scrollContainer.scrollLeft > 0;
+      this.tableScrolling = isScrolledFromInlineStart(this.scrollContainer);
     } catch (error) {
       console.warn('Scroll handler error:', error);
     }

libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss

@@ -24,7 +24,7 @@
 
 :host(.is-fixed) {
   background: var(--pine-color-background-container);
-  left: var(--pine-dimension-none);
+  inset-inline-start: var(--pine-dimension-none);
   position: sticky;
   z-index: var(--pine-z-index-raised);
 }
@@ -39,6 +39,12 @@
   border-block-start: var(--border-head-cell-default);
 }
 
+// Flip shadow toward scrollable content when fixed column is on the inline-end edge.
+:host-context([dir='rtl']) {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  --box-shadow-default: -3px 3px 6px -2px rgba(0, 0, 0, 0.1);
+}
+
 // box shadow when table has scrolled and cell is fixed
 :host(.has-scrolled.is-fixed) {
   box-shadow: var(--box-shadow-default);

libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx

@@ -1,6 +1,7 @@
 import { Component, Element, Host, Prop, h, Event, EventEmitter, State, Method } from '@stencil/core';
 
 import { downSmall, upSmall } from '@pine-ds/icons/icons';
+import { isScrolledFromInlineStart } from '../../../utils/scroll';
 
 @Component({
   tag: 'pds-table-head-cell',
@@ -188,7 +189,7 @@ export class PdsTableHeadCell {
     }
 
     try {
-      this.tableScrolling = this.scrollContainer.scrollLeft > 0;
+      this.tableScrolling = isScrolledFromInlineStart(this.scrollContainer);
     } catch (error) {
       console.warn('Scroll handler error:', error);
     }