@orange-halo/components 3.0.0 → 3.1.0

package/custom-elements.json

@@ -461,7 +461,7 @@
                 "text": "ButtonState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'active' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'active' | 'focus'",
               "attribute": "force-state",
               "reflects": true
             },
@@ -556,7 +556,7 @@
                 "text": "ButtonState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'active' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'active' | 'focus'",
               "fieldName": "forceState"
             },
             {
@@ -963,7 +963,7 @@
                 "text": "CheckboxState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "attribute": "force-state",
               "reflects": true
             }
@@ -1022,7 +1022,7 @@
                 "text": "CheckboxState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "fieldName": "forceState"
             }
           ],
@@ -1257,7 +1257,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A panel that slides in from the side of the viewport, over the page, for navigation or supplementary content.\n\n**Use it for** a site's navigation on small screens, filters, or settings that relate to the page behind. **Don't use it for** a decision the user must make before going on (use `oh-modal`); or for content that should always be visible (put it in the page).\n\n**Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.\n\n**Positions:** `left` (default) or `right`.\n\n**Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.\n\n**Accessibility:** the panel is `role=\"dialog\"` with `aria-modal=\"true\"`, labelled by `heading`, or \"Navigation menu\" when there's no heading, so set `heading` for any other use. The Close button's accessible name is \"Close menu\".\n\n**Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A left drawer's shadow is `elevation.strong`; a right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.",
+          "description": "A panel that slides in from the side of the viewport, over the page, for navigation or supplementary content.\n\n**Use it for** a site's navigation on small screens, filters, or settings that relate to the page behind. **Don't use it for** a decision the user must make before going on (use `oh-modal`); or for content that should always be visible (put it in the page).\n\n**Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.\n\n**Positions:** `start` (the default) or `end` follow the text direction, so in right-to-left text a `start` drawer opens from the right. `left` and `right` are the same physical side in either direction.\n\n**Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.\n\n**Accessibility:** the panel is `role=\"dialog\"` with `aria-modal=\"true\"`, labelled by `heading`, or \"Navigation menu\" when there's no heading, so set `heading` for any other use. The Close button's accessible name is \"Close menu\".\n\n**Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A start or left drawer's shadow is `elevation.strong`; an end or right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.",
           "name": "OhDrawer",
           "cssProperties": [
             {
@@ -1287,10 +1287,10 @@
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"left\" | \"right\""
+                "text": "DrawerPosition"
               },
-              "default": "\"left\"",
-              "description": "Position of the drawer",
+              "default": "\"start\"",
+              "description": "The side the drawer opens from. `start` (the default) and `end` follow the\ntext direction: `start` is the left in left-to-right text and the right in\nright-to-left. `left` and `right` are the same physical side either way.",
               "attribute": "position"
             },
             {
@@ -1335,10 +1335,10 @@
             {
               "name": "position",
               "type": {
-                "text": "\"left\" | \"right\""
+                "text": "DrawerPosition"
               },
-              "default": "\"left\"",
-              "description": "Position of the drawer",
+              "default": "\"start\"",
+              "description": "The side the drawer opens from. `start` (the default) and `end` follow the\ntext direction: `start` is the left in left-to-right text and the right in\nright-to-left. `left` and `right` are the same physical side either way.",
               "fieldName": "position"
             },
             {
@@ -1571,7 +1571,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "An icon from the system's built-in set, shown on its own, with a label, or as an icon-only link.\n\n**Use it for** an icon next to text, an icon that carries meaning on its own (with `label`), or a compact link such as a social profile (`href` + `label`). **Don't use it for** an icon-only button (use `oh-button` with `icon-only`); or for an image or logo (use `<img>`).\n\n**Names:** `name` picks the icon: social (`twitter`, `github`, `linkedin`, `instagram`, `youtube`, `facebook`, `email`, `substack`), navigation (`arrow-*`, `chevron-*`, `external-link`), actions (`close`, `plus`, `minus`, `check`, `search`, `menu`, `settings`, `heart`, `sparkle`) and feedback (`info`, `warning`, `error`, `success`). An unknown name renders nothing and logs a warning.\n\n**Sizes:** with no `size` the icon is 1em and follows the text; `sm`, `md`, `lg`, `xl` set fixed sizes. **`inverse`:** for icons on an accent-coloured or dark background.\n\n**Behaviour:** the icon takes the current text colour. With `href` it renders as a link, with hover, active and focus-visible states; `target=\"_blank\"` adds `rel=\"noopener noreferrer\"`.\n\n**Accessibility:** without `label` the icon is decorative (`aria-hidden=\"true\"`). With `label` it's `role=\"img\"` with that name. As a link, `label` is required (it logs a warning without one) and becomes the link's `aria-label`. Focus-visible shows a solid ring in `focus.ringColor` (`color.text.onAccent` when `inverse`).\n\n**Look:** set by tokens. The icon is `currentColor`; `inverse` sets `color.text.onAccent`. As a link: `shape.compact` corners, hover moves by `lift.hoverMd` with an `elevation.offset.lg` shadow in `color.border.default` (`color.text.onAccent` when `inverse`); motion uses `motion.snappy` and `motion.easeGentle`, off under `prefers-reduced-motion`.",
+          "description": "An icon from the system's built-in set, shown on its own, with a label, or as an icon-only link.\n\n**Use it for** an icon next to text, an icon that carries meaning on its own (with `label`), or a compact link such as a social profile (`href` + `label`). **Don't use it for** an icon-only button (use `oh-button` with `icon-only`); or for an image or logo (use `<img>`).\n\n**Names:** `name` picks the icon: social (`twitter`, `github`, `linkedin`, `instagram`, `youtube`, `facebook`, `email`, `substack`), navigation (`arrow-*`, `chevron-*`, `external-link`), actions (`close`, `plus`, `minus`, `check`, `search`, `menu`, `settings`, `heart`, `sparkle`) and feedback (`info`, `warning`, `error`, `success`). An unknown name renders nothing and logs a warning.\n\n**Sizes:** with no `size` the icon is 1em and follows the text; `sm`, `md`, `lg`, `xl` set fixed sizes. **`inverse`:** for icons on an accent-coloured or dark background.\n\n**Behaviour:** the icon takes the current text colour. `arrow-left`, `arrow-right`, `chevron-left` and `chevron-right` mirror in right-to-left text, so they keep pointing back and forward along the line. With `href` it renders as a link, with hover, active and focus-visible states; `target=\"_blank\"` adds `rel=\"noopener noreferrer\"`.\n\n**Accessibility:** without `label` the icon is decorative (`aria-hidden=\"true\"`). With `label` it's `role=\"img\"` with that name. As a link, `label` is required (it logs a warning without one) and becomes the link's `aria-label`. Focus-visible shows a solid ring in `focus.ringColor` (`color.text.onAccent` when `inverse`).\n\n**Look:** set by tokens. The icon is `currentColor`; `inverse` sets `color.text.onAccent`. As a link: `shape.compact` corners, hover moves by `lift.hoverMd` with an `elevation.offset.lg` shadow in `color.border.default` (`color.text.onAccent` when `inverse`); motion uses `motion.snappy` and `motion.easeGentle`, off under `prefers-reduced-motion`.",
           "name": "OhIcon",
           "members": [
             {
@@ -1855,7 +1855,7 @@
                 "text": "InputState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "attribute": "force-state",
               "reflects": true
             },
@@ -2026,7 +2026,7 @@
                 "text": "InputState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "fieldName": "forceState"
             }
           ],
@@ -2895,7 +2895,7 @@
                 "text": "RadioState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "attribute": "force-state",
               "reflects": true
             }
@@ -2954,7 +2954,7 @@
                 "text": "RadioState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "fieldName": "forceState"
             }
           ],
@@ -3327,7 +3327,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A set of tabs that switches between panels of related content in the same place.\n\n**Use it for** a few peer sections of content where only one needs to be\nseen at a time. **Don't use it for** navigating between pages (use links\nor `oh-navbar`), or for content people need to compare side by side.\n\n**Parts:** pass `items`, an array of `{ id, label, content? }`. A panel\nshows `content` as text, or else the light-DOM element with\n`slot=\"<id>\"`. `value` is the selected tab's `id` (defaults to the first).\n\n**States:** each tab is selected or not; unselected tabs show an underline\non hover.\n\n**Behaviour:** click selects a tab. Arrow keys move focus between tabs and\nwrap (Left/Right, or Up/Down when `orientation=\"vertical\"`; orientation\nchanges the keys only, not the layout); Home/End jump to the first/last.\nEnter or Space selects the focused tab and moves focus to its panel.\nSelecting a different tab fires `oh-change`. Transitions are cut short\nunder `prefers-reduced-motion`.\n\n**Accessibility:** tablist/tab/tabpanel roles with `aria-selected`,\n`aria-controls` and `aria-labelledby`; one tab is in the tab order at a\ntime; inactive panels are `hidden`; the active panel is focusable. Keyboard\nfocus shows a solid underline on the tab label and an outline on the panel.\nKeep labels short.\n\n**Look:** set by tokens — `color.brand.primary` the unselected tabs and\ntheir hover underline (`decoration.underlineThickness`,\n`decoration.underlineDash`, `decoration.underlinePeriod`);\n`color.text.primary`, `color.surface.base` and `color.border.emphasis` the\nselected tab and panel; `stroke.control` the borders; `shape.control` the\ntab corners and `shape.container` the panel corners;\n`typography.body.*` and `typography.label.base.fontWeight` the text;\n`spacing.*` the padding; `motion.snappy` and `motion.relaxed` the\ntransitions.",
+          "description": "A set of tabs that switches between panels of related content in the same place.\n\n**Use it for** a few peer sections of content where only one needs to be\nseen at a time. **Don't use it for** navigating between pages (use links\nor `oh-navbar`), or for content people need to compare side by side.\n\n**Parts:** pass `items`, an array of `{ id, label, content? }`. A panel\nshows `content` as text, or else the light-DOM element with\n`slot=\"<id>\"`. `value` is the selected tab's `id` (defaults to the first).\n\n**States:** each tab is selected or not; unselected tabs show an underline\non hover.\n\n**Behaviour:** click selects a tab. Arrow keys move focus between tabs and\nwrap (Left/Right, swapped in right-to-left text, or Up/Down when\n`orientation=\"vertical\"`; orientation changes the keys only, not the\nlayout); Home/End jump to the first/last.\nEnter or Space selects the focused tab and moves focus to its panel.\nSelecting a different tab fires `oh-change`. Transitions are cut short\nunder `prefers-reduced-motion`.\n\n**Accessibility:** tablist/tab/tabpanel roles with `aria-selected`,\n`aria-controls` and `aria-labelledby`; one tab is in the tab order at a\ntime; inactive panels are `hidden`; the active panel is focusable. Keyboard\nfocus shows a solid underline on the tab label and an outline on the panel.\nKeep labels short.\n\n**Look:** set by tokens — `color.brand.primary` the unselected tabs and\ntheir hover underline (`decoration.underlineThickness`,\n`decoration.underlineDash`, `decoration.underlinePeriod`);\n`color.text.primary`, `color.surface.base` and `color.border.emphasis` the\nselected tab and panel; `stroke.control` the borders; `shape.control` the\ntab corners and `shape.container` the panel corners;\n`typography.body.*` and `typography.label.base.fontWeight` the text;\n`spacing.*` the padding; `motion.snappy` and `motion.relaxed` the\ntransitions.",
           "name": "OhTabs",
           "members": [
             {

package/dist/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAO,SAAS,EAAE,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAiCxB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC;;OAEG;IACH,MAAM,CAAC,MAAM,cAAgB;IAE7B;;OAEG;IACH,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,OAAO,EACxB,SAAS,EAAE,MAAM,EACjB,MAAM,CAAC,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,GAC3C,OAAO;IAWV;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM;CAM7D"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAO,SAAS,EAAE,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAwCxB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC;;OAEG;IACH,MAAM,CAAC,MAAM,cAAgB;IAE7B;;OAEG;IACH,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,OAAO,EACxB,SAAS,EAAE,MAAM,EACjB,MAAM,CAAC,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,GAC3C,OAAO;IAWV;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM;CAM7D"}

package/dist/base.js

@@ -12,6 +12,13 @@ import { LitElement, css } from "lit";
 export const baseStyles = css `
   :host {
     box-sizing: border-box;
+    /* Text direction as a number, for motion and placement that CSS has no
+       logical form of (translateX, transform-origin): 1 in LTR, -1 in RTL */
+    --_oh-dir: 1;
+  }
+
+  :host(:dir(rtl)) {
+    --_oh-dir: -1;
   }
 
   :host *,

package/dist/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCvC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IACvC;;OAEG;aACI,WAAM,GAAG,CAAC,UAAU,CAAC,CAAC;IAE7B;;OAEG;IACO,IAAI,CACZ,SAAiB,EACjB,MAAU,EACV,OAA4C;QAE5C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,EAAE,8BAA8B;YAC9C,UAAU,EAAE,IAAI;YAChB,GAAG,OAAO;YACV,MAAM;SACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED;;OAEG;IACO,QAAQ,CAAC,OAAgC;QACjD,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;aAC3B,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC;aAC5B,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC;aACnB,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC"}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCvC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IACvC;;OAEG;aACI,WAAM,GAAG,CAAC,UAAU,CAAC,CAAC;IAE7B;;OAEG;IACO,IAAI,CACZ,SAAiB,EACjB,MAAU,EACV,OAA4C;QAE5C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,EAAE,8BAA8B;YAC9C,UAAU,EAAE,IAAI;YAChB,GAAG,OAAO;YACV,MAAM;SACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED;;OAEG;IACO,QAAQ,CAAC,OAAgC;QACjD,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;aAC3B,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC;aAC5B,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC;aACnB,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC"}

package/dist/index.d.ts

@@ -54,6 +54,7 @@ export type { ClusterGap, ClusterJustify, ClusterAlign } from "./oh-cluster.js";
 export { OhContainer } from "./oh-container.js";
 export type { ContainerSize } from "./oh-container.js";
 export { OhDrawer } from "./oh-drawer.js";
+export type { DrawerPosition } from "./oh-drawer.js";
 export { OhFooter } from "./oh-footer.js";
 export { OhGrid } from "./oh-grid.js";
 export type { GridColumns, GridGap } from "./oh-grid.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAOxB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGlD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,YAAY,GACb,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,gFAAgF;AAChF,kEAAkE;AAClE,gFAAgF;AAChF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAExB,gFAAgF;AAChF,uEAAuE;AACvE,gFAAgF;AAEhF,OAAO;AACP,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,SAAS;AACT,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,gFAAgF;AAChF,kEAAkE;AAClE,gFAAgF;AAChF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAExB,gFAAgF;AAChF,uEAAuE;AACvE,gFAAgF;AAEhF,OAAO;AACP,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,SAAS;AACT,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/oh-accordion.js

@@ -130,7 +130,7 @@ let OhAccordion = class OhAccordion extends OhElement {
         background: transparent;
         border: none;
         cursor: pointer;
-        text-align: left;
+        text-align: start;
 
         font-family: var(--oh-typography-body-font-family);
         font-size: var(--oh-typography-body-base-font-size);
@@ -151,7 +151,7 @@ let OhAccordion = class OhAccordion extends OhElement {
       .accordion--subtle .accordion-text::after {
         content: "";
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 100%;
         height: var(--oh-decoration-underline-thickness);
@@ -164,7 +164,7 @@ let OhAccordion = class OhAccordion extends OhElement {
         );
         background-size: 100% 100%;
         background-repeat: no-repeat;
-        transform-origin: right;
+        transform-origin: calc(50% + 50% * var(--_oh-dir)); /* the end side */
         transition: transform var(--oh-motion-relaxed)
           var(--oh-motion-ease-gentle);
       }
@@ -230,7 +230,7 @@ let OhAccordion = class OhAccordion extends OhElement {
         background: transparent;
         border: none;
         cursor: pointer;
-        text-align: left;
+        text-align: start;
 
         font-family: var(--oh-typography-body-font-family);
         font-size: var(--oh-typography-body-base-font-size);
@@ -256,7 +256,7 @@ let OhAccordion = class OhAccordion extends OhElement {
       .accordion--standout .accordion-text::after {
         content: "";
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 100%;
         height: var(--oh-decoration-underline-thickness);
@@ -269,7 +269,7 @@ let OhAccordion = class OhAccordion extends OhElement {
         );
         background-size: 100% 100%;
         background-repeat: no-repeat;
-        transform-origin: left;
+        transform-origin: calc(50% - 50% * var(--_oh-dir)); /* the start side */
         transform: scaleX(0);
         transition: transform var(--oh-motion-relaxed)
           var(--oh-motion-ease-gentle);

package/dist/oh-breadcrumb.js

@@ -115,7 +115,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
       .breadcrumb-link::after {
         content: "";
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 100%;
         height: var(--oh-decoration-underline-thickness);
@@ -128,7 +128,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
         );
         background-size: 100% 100%;
         background-repeat: no-repeat;
-        transform-origin: right;
+        transform-origin: calc(50% + 50% * var(--_oh-dir)); /* the end side */
         transition: transform var(--oh-motion-relaxed)
           var(--oh-motion-ease-gentle);
       }
@@ -182,7 +182,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
       .back-link::after {
         content: "";
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 100%;
         height: var(--oh-decoration-underline-thickness);
@@ -195,7 +195,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
         );
         background-size: 100% 100%;
         background-repeat: no-repeat;
-        transform-origin: right;
+        transform-origin: calc(50% + 50% * var(--_oh-dir)); /* the end side */
         transition: transform var(--oh-motion-relaxed)
           var(--oh-motion-ease-gentle);
       }

package/dist/oh-button.d.ts

@@ -71,7 +71,7 @@ export declare class OhButton extends OhElement {
      */
     accessibleLabel?: string;
     /**
-     * Force a visual state (for documentation/Figma sync only)
+     * Force a visual state (for documentation only)
      * Values: 'hover' | 'active' | 'focus'
      */
     forceState: ButtonState;

package/dist/oh-button.js

@@ -71,7 +71,7 @@ let OhButton = class OhButton extends OhElement {
         this.loading = false;
         this.iconOnly = false;
         /**
-         * Force a visual state (for documentation/Figma sync only)
+         * Force a visual state (for documentation only)
          * Values: 'hover' | 'active' | 'focus'
          */
         this.forceState = "default";
@@ -308,7 +308,7 @@ let OhButton = class OhButton extends OhElement {
         content: "";
         position: absolute;
         bottom: 4px;
-        left: 50%;
+        left: 50%; /* physical: centred, with the translate below */
         transform: translateX(-50%);
         width: 60%;
         height: 2px;
@@ -382,7 +382,7 @@ let OhButton = class OhButton extends OhElement {
       }
 
       /* ═══════════════════════════════════════════════════════════════
-         FORCED STATES (for Figma Sync / documentation)
+         FORCED STATES (for documentation)
          ═══════════════════════════════════════════════════════════════ */
 
       /* Primary - Forced Hover */

package/dist/oh-checkbox-group.js

@@ -167,7 +167,7 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
         content: "";
         position: absolute;
         top: 3px;
-        left: 7px;
+        left: 7px; /* physical: a checkmark isn't mirrored in RTL */
         width: 6px;
         height: 12px;
         border: solid var(--oh-color-text-on-brand);

package/dist/oh-checkbox.d.ts

@@ -72,7 +72,7 @@ export declare class OhCheckbox extends OhElement {
      */
     errorText: string;
     /**
-     * Force a visual state (for documentation/Figma sync only)
+     * Force a visual state (for documentation only)
      * Values: 'hover' | 'focus'
      */
     forceState: CheckboxState;

package/dist/oh-checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox.d.ts","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BA8MpB;IAGF,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,SAAM;IAEf;;;OAGG;IAEH,UAAU,EAAE,aAAa,CAAa;IAEtC,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAAkE;IAElF,OAAO,CAAC,OAAO,EAAE,cAAc;IAM/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAgDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"oh-checkbox.d.ts","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAgNpB;IAGF,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,SAAM;IAEf;;;OAGG;IAEH,UAAU,EAAE,aAAa,CAAa;IAEtC,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAAkE;IAElF,OAAO,CAAC,OAAO,EAAE,cAAc;IAM/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAgDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/oh-checkbox.js

@@ -79,7 +79,7 @@ let OhCheckbox = class OhCheckbox extends OhElement {
          */
         this.errorText = "";
         /**
-         * Force a visual state (for documentation/Figma sync only)
+         * Force a visual state (for documentation only)
          * Values: 'hover' | 'focus'
          */
         this.forceState = "default";
@@ -149,7 +149,7 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         content: "";
         position: absolute;
         top: 3px;
-        left: 7px;
+        left: 7px; /* physical: a checkmark isn't mirrored in RTL */
         width: 6px;
         height: 12px;
         border: solid var(--oh-color-text-on-brand);
@@ -250,7 +250,9 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         font-size: var(--oh-typography-body-base-font-size);
         color: var(--oh-color-feedback-error);
         margin-top: var(--oh-spacing-1);
-        margin-left: calc(24px + var(--oh-spacing-3)); /* Align with label */
+        margin-inline-start: calc(
+          24px + var(--oh-spacing-3)
+        ); /* Align with label */
       }
 
       .error-icon {
@@ -271,7 +273,7 @@ let OhCheckbox = class OhCheckbox extends OhElement {
       }
 
       /* ═══════════════════════════════════════════════════════════════
-         FORCED STATES (for Figma Sync / documentation)
+         FORCED STATES (for documentation)
          ═══════════════════════════════════════════════════════════════ */
 
       /* Forced Hover - Unchecked */

package/dist/oh-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"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"}

package/dist/oh-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-container.d.ts","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,4BAwDpB;IAGF,IAAI,EAAE,aAAa,CAAQ;IAG3B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"oh-container.d.ts","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,4BAmDpB;IAGF,IAAI,EAAE,aAAa,CAAQ;IAG3B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/oh-container.js

@@ -46,10 +46,8 @@ let OhContainer = class OhContainer extends OhElement {
       :host {
         display: block;
         width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-        padding-left: var(--oh-spacing-4);
-        padding-right: var(--oh-spacing-4);
+        margin-inline: auto;
+        padding-inline: var(--oh-spacing-4);
         box-sizing: border-box;
       }
 
@@ -72,22 +70,19 @@ let OhContainer = class OhContainer extends OhElement {
 
       :host([size="full"]) {
         max-width: 100%;
-        padding-left: 0;
-        padding-right: 0;
+        padding-inline: 0;
       }
 
       /* Responsive padding */
       @media (min-width: 640px) {
         :host {
-          padding-left: var(--oh-spacing-6);
-          padding-right: var(--oh-spacing-6);
+          padding-inline: var(--oh-spacing-6);
         }
       }
 
       @media (min-width: 1024px) {
         :host {
-          padding-left: var(--oh-spacing-8);
-          padding-right: var(--oh-spacing-8);
+          padding-inline: var(--oh-spacing-8);
         }
       }
 

package/dist/oh-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-container.js","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIlD;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;IAAnC;;QA4DL,SAAI,GAAkB,IAAI,CAAC;QAG3B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aAnEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;KACF,AAxDqB,CAwDpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAPD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACf;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AA/DJ,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoEvB"}
+{"version":3,"file":"oh-container.js","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIlD;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;IAAnC;;QAuDL,SAAI,GAAkB,IAAI,CAAC;QAG3B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aA9DiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDF;KACF,AAnDqB,CAmDpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAPD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACf;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AA1DJ,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA+DvB"}

package/dist/oh-drawer.d.ts

@@ -6,7 +6,7 @@
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. POSITIONING
- *    - Slides in from left or right
+ *    - Slides in from the start or end side (left or right in RTL), or a fixed left or right
  *    - Full height, width set by --oh-drawer-width
  *    - Overlays content with a color.surface.overlay backdrop
  *
@@ -26,6 +26,7 @@
 import { OhElement } from "./base.js";
 import "./oh-button.js";
 import "./oh-icon.js";
+export type DrawerPosition = "start" | "end" | "left" | "right";
 /**
  * A panel that slides in from the side of the viewport, over the page, for navigation or supplementary content.
  *
@@ -33,13 +34,13 @@ import "./oh-icon.js";
  *
  * **Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.
  *
- * **Positions:** `left` (default) or `right`.
+ * **Positions:** `start` (the default) or `end` follow the text direction, so in right-to-left text a `start` drawer opens from the right. `left` and `right` are the same physical side in either direction.
  *
  * **Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.
  *
  * **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, labelled by `heading`, or "Navigation menu" when there's no heading, so set `heading` for any other use. The Close button's accessible name is "Close menu".
  *
- * **Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A left drawer's shadow is `elevation.strong`; a right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.
+ * **Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A start or left drawer's shadow is `elevation.strong`; an end or right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.
  *
  * @element oh-drawer
  *
@@ -53,8 +54,12 @@ export declare class OhDrawer extends OhElement {
     static styles: import("lit").CSSResult[];
     /** Whether the drawer is open */
     open: boolean;
-    /** Position of the drawer */
-    position: "left" | "right";
+    /**
+     * The side the drawer opens from. `start` (the default) and `end` follow the
+     * text direction: `start` is the left in left-to-right text and the right in
+     * right-to-left. `left` and `right` are the same physical side either way.
+     */
+    position: DrawerPosition;
     /** Title shown in the drawer header */
     heading?: string;
     /** Element that triggered the drawer (for focus return) */

package/dist/oh-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-drawer.d.ts","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAqHpB;IAEF,iCAAiC;IAEjC,IAAI,UAAS;IAEb,6BAA6B;IAE7B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAU;IAEpC,uCAAuC;IAEvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2DAA2D;IAE3D,OAAO,CAAC,eAAe,CAA4B;IAGnD,OAAO,CAAC,OAAO,CAAe;IAE9B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,oBAAoB;IAI5B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAOlB,uCAAuC;IACvC,IAAI;IAIJ,wCAAwC;IACxC,IAAI;IAIJ,MAAM;CA0DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"oh-drawer.d.ts","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA+HpB;IAEF,iCAAiC;IAEjC,IAAI,UAAS;IAEb;;;;OAIG;IAEH,QAAQ,EAAE,cAAc,CAAW;IAEnC,uCAAuC;IAEvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2DAA2D;IAE3D,OAAO,CAAC,eAAe,CAA4B;IAGnD,OAAO,CAAC,OAAO,CAAe;IAE9B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,oBAAoB;IAI5B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAOlB,uCAAuC;IACvC,IAAI;IAIJ,wCAAwC;IACxC,IAAI;IAIJ,MAAM;CA0DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/oh-drawer.js

@@ -6,7 +6,7 @@
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. POSITIONING
- *    - Slides in from left or right
+ *    - Slides in from the start or end side (left or right in RTL), or a fixed left or right
  *    - Full height, width set by --oh-drawer-width
  *    - Overlays content with a color.surface.overlay backdrop
  *
@@ -42,13 +42,13 @@ import "./oh-icon.js";
  *
  * **Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.
  *
- * **Positions:** `left` (default) or `right`.
+ * **Positions:** `start` (the default) or `end` follow the text direction, so in right-to-left text a `start` drawer opens from the right. `left` and `right` are the same physical side in either direction.
  *
  * **Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.
  *
  * **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, labelled by `heading`, or "Navigation menu" when there's no heading, so set `heading` for any other use. The Close button's accessible name is "Close menu".
  *
- * **Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A left drawer's shadow is `elevation.strong`; a right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.
+ * **Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A start or left drawer's shadow is `elevation.strong`; an end or right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.
  *
  * @element oh-drawer
  *
@@ -63,8 +63,12 @@ let OhDrawer = class OhDrawer extends OhElement {
         super(...arguments);
         /** Whether the drawer is open */
         this.open = false;
-        /** Position of the drawer */
-        this.position = "left";
+        /**
+         * The side the drawer opens from. `start` (the default) and `end` follow the
+         * text direction: `start` is the left in left-to-right text and the right in
+         * right-to-left. `left` and `right` are the same physical side either way.
+         */
+        this.position = "start";
         /** Element that triggered the drawer (for focus return) */
         this._triggerElement = null;
     }
@@ -121,26 +125,36 @@ let OhDrawer = class OhDrawer extends OhElement {
           visibility 0s;
       }
 
-      /* Left position (default) */
-      .drawer--left {
-        left: 0;
+      /* Start side (default): left in LTR, right in RTL */
+      .drawer--start {
+        inset-inline-start: 0;
         box-shadow: var(--oh-elevation-strong);
-        transform: translateX(-100%);
+        transform: translateX(calc(-100% * var(--_oh-dir)));
       }
 
-      .drawer--left.is-open {
-        transform: translateX(0);
+      /* End side: right in LTR, left in RTL */
+      .drawer--end {
+        inset-inline-end: 0;
+        box-shadow: calc(-1 * var(--oh-elevation-offset-lg))
+          var(--oh-elevation-offset-lg) 0 0 var(--oh-color-border-strong);
+        transform: translateX(calc(100% * var(--_oh-dir)));
+      }
+
+      /* The left and right positions stay on that side in either direction */
+      .drawer--left {
+        left: 0; /* physical: position="left" means the left */
+        box-shadow: var(--oh-elevation-strong);
+        transform: translateX(-100%);
       }
 
-      /* Right position */
       .drawer--right {
-        right: 0;
+        right: 0; /* physical: position="right" means the right */
         box-shadow: calc(-1 * var(--oh-elevation-offset-lg))
           var(--oh-elevation-offset-lg) 0 0 var(--oh-color-border-strong);
         transform: translateX(100%);
       }
 
-      .drawer--right.is-open {
+      .drawer.is-open {
         transform: translateX(0);
       }