@orange-halo/components 2.2.0 → 3.1.0

package/dist/oh-tabs.js

@@ -1,28 +1,17 @@
 /**
  * oh-tabs
  *
- * Accessible tabbed interface with full keyboard support.
- *
- * ACCESSIBILITY FEATURES:
- * ───────────────────────
- * - Full ARIA support (tablist, tab, tabpanel roles)
- * - Roving tabindex for keyboard navigation
- * - Manual activation (arrow keys move focus, Enter/Space activates)
- * - Home/End jump to first/last tab
- * - Focus moves to panel content after activation
- * - Focus indicators meet WCAG requirements
- * - Panels properly hidden from assistive tech when inactive
- *
- * KEYBOARD INTERACTIONS:
- * ──────────────────────
- * - Left Arrow: Move focus to previous tab (wraps to last)
- * - Right Arrow: Move focus to next tab (wraps to first)
- * - Home: Move focus to first tab
- * - End: Move focus to last tab
- * - Enter/Space: Activate focused tab and move focus to panel
- * - Tab: Move focus out of tablist
- *
- * @element oh-tabs
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. WAI-ARIA tabs pattern: tablist / tab / tabpanel roles, roving tabindex,
+ *    inactive panels `hidden`.
+ * 2. Manual activation: arrow keys and Home/End move focus only;
+ *    Enter/Space selects and moves focus into the panel. Tab leaves the
+ *    tablist.
+ * 3. The selected tab joins the panel: it shares the panel's surface and
+ *    border, and covers the panel's top border beneath it.
+ * 4. Focus is a solid underline on the tab label (and an outline on the
+ *    panel), never colour alone.
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -33,17 +22,54 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A set of tabs that switches between panels of related content in the same place.
+ *
+ * **Use it for** a few peer sections of content where only one needs to be
+ * seen at a time. **Don't use it for** navigating between pages (use links
+ * or `oh-navbar`), or for content people need to compare side by side.
+ *
+ * **Parts:** pass `items`, an array of `{ id, label, content? }`. A panel
+ * shows `content` as text, or else the light-DOM element with
+ * `slot="<id>"`. `value` is the selected tab's `id` (defaults to the first).
+ *
+ * **States:** each tab is selected or not; unselected tabs show an underline
+ * on hover.
+ *
+ * **Behaviour:** click selects a tab. Arrow keys move focus between tabs and
+ * wrap (Left/Right, swapped in right-to-left text, or Up/Down when
+ * `orientation="vertical"`; orientation changes the keys only, not the
+ * layout); Home/End jump to the first/last.
+ * Enter or Space selects the focused tab and moves focus to its panel.
+ * Selecting a different tab fires `oh-change`. Transitions are cut short
+ * under `prefers-reduced-motion`.
+ *
+ * **Accessibility:** tablist/tab/tabpanel roles with `aria-selected`,
+ * `aria-controls` and `aria-labelledby`; one tab is in the tab order at a
+ * time; inactive panels are `hidden`; the active panel is focusable. Keyboard
+ * focus shows a solid underline on the tab label and an outline on the panel.
+ * Keep labels short.
+ *
+ * **Look:** set by tokens — `color.brand.primary` the unselected tabs and
+ * their hover underline (`decoration.underlineThickness`,
+ * `decoration.underlineDash`, `decoration.underlinePeriod`);
+ * `color.text.primary`, `color.surface.base` and `color.border.emphasis` the
+ * selected tab and panel; `stroke.control` the borders; `shape.control` the
+ * tab corners and `shape.container` the panel corners;
+ * `typography.body.*` and `typography.label.base.fontWeight` the text;
+ * `spacing.*` the padding; `motion.snappy` and `motion.relaxed` the
+ * transitions.
+ *
+ * @element oh-tabs
+ * @fires oh-change - When a different tab is selected. `detail: { value }`, the tab's `id`.
+ */
 let OhTabs = class OhTabs extends OhElement {
     constructor() {
         super(...arguments);
-        /**
-         * Array of tab items with id, label, and optional content
-         */
-        this.tabs = [];
-        /**
-         * ID of the currently selected tab
-         */
-        this.selected = "";
+        /** The tabs: `{ id, label, content? }`. In HTML, a JSON array */
+        this.items = [];
+        /** The selected tab's `id`. Defaults to the first tab */
+        this.value = "";
         /**
          * Orientation of the tabs (affects arrow key behavior)
          */
@@ -60,11 +86,6 @@ let OhTabs = class OhTabs extends OhElement {
     static { this.styles = [
         baseStyles,
         css `
-      /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO TABS
-         Chunky • Playful • Accessible
-         ═══════════════════════════════════════════════════════════════ */
-
       :host {
         display: block;
         font-family: var(--oh-typography-body-font-family);
@@ -83,7 +104,7 @@ let OhTabs = class OhTabs extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          INDIVIDUAL TAB BUTTONS
-         Clean inactive state, chunky selected state
+         Transparent unselected state; selected state joins the panel
          ═══════════════════════════════════════════════════════════════ */
 
       .tab {
@@ -112,7 +133,7 @@ let OhTabs = class OhTabs extends OhElement {
           box-shadow var(--oh-motion-snappy) ease;
       }
 
-      /* Dashed underline pseudo-element for animation */
+      /* Hover underline pseudo-element (animatable), shaped by decoration tokens */
       .tab__label {
         position: relative;
       }
@@ -120,8 +141,7 @@ let OhTabs = class OhTabs extends OhElement {
       .tab:not([aria-selected="true"]) .tab__label::after {
         content: "";
         position: absolute;
-        left: 0;
-        right: 0;
+        inset-inline: 0;
         bottom: -3px;
         height: var(--oh-decoration-underline-thickness);
         background: repeating-linear-gradient(
@@ -131,7 +151,7 @@ let OhTabs = class OhTabs extends OhElement {
           transparent var(--oh-decoration-underline-dash),
           transparent var(--oh-decoration-underline-period)
         );
-        transform-origin: left;
+        transform-origin: calc(50% - 50% * var(--_oh-dir)); /* the start side */
         transform: scaleX(0);
         transition: transform var(--oh-motion-relaxed) ease;
       }
@@ -146,7 +166,7 @@ let OhTabs = class OhTabs extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          SELECTED TAB STATE
-         Uses grey for a softer look (4.3:1 contrast against cream bg)
+         color.text.primary on color.surface.base, bordered like the panel
          ═══════════════════════════════════════════════════════════════ */
 
       .tab[aria-selected="true"] {
@@ -185,7 +205,8 @@ let OhTabs = class OhTabs extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          TAB PANEL
-         Content area with warm styling, rounded top-right corner
+         Shares the selected tab's surface and border; square top-left
+         corner while the first tab is selected
          ═══════════════════════════════════════════════════════════════ */
 
       .tabpanel {
@@ -230,17 +251,15 @@ let OhTabs = class OhTabs extends OhElement {
     connectedCallback() {
         super.connectedCallback();
         // Set initial selected tab if not specified
-        if (!this.selected && this.tabs.length > 0) {
-            this.selected = this.tabs[0].id;
+        if (!this.value && this.items.length > 0) {
+            this.value = this.items[0].id;
         }
         // Set initial focused index to match selected
-        this._focusedIndex = Math.max(0, this.tabs.findIndex((t) => t.id === this.selected));
+        this._focusedIndex = Math.max(0, this.items.findIndex((t) => t.id === this.value));
     }
     updated(changedProperties) {
-        if (changedProperties.has("tabs") &&
-            this.tabs.length > 0 &&
-            !this.selected) {
-            this.selected = this.tabs[0].id;
+        if (changedProperties.has("tabs") && this.items.length > 0 && !this.value) {
+            this.value = this.items[0].id;
         }
     }
     /**
@@ -249,21 +268,25 @@ let OhTabs = class OhTabs extends OhElement {
      */
     async _handleKeyDown(e) {
         const { key } = e;
-        const tabCount = this.tabs.length;
+        const tabCount = this.items.length;
         if (tabCount === 0)
             return;
         let newIndex = this._focusedIndex;
         let handled = false;
         let shouldActivate = false;
+        // In right-to-left text the tabs run right to left, so the arrow keys swap
+        const rtl = this.matches(":dir(rtl)");
+        const previousKey = rtl ? "ArrowRight" : "ArrowLeft";
+        const nextKey = rtl ? "ArrowLeft" : "ArrowRight";
         switch (key) {
-            case "ArrowLeft":
+            case previousKey:
                 if (this.orientation === "horizontal") {
                     newIndex =
                         this._focusedIndex === 0 ? tabCount - 1 : this._focusedIndex - 1;
                     handled = true;
                 }
                 break;
-            case "ArrowRight":
+            case nextKey:
                 if (this.orientation === "horizontal") {
                     newIndex =
                         this._focusedIndex === tabCount - 1 ? 0 : this._focusedIndex + 1;
@@ -302,10 +325,10 @@ let OhTabs = class OhTabs extends OhElement {
             e.preventDefault();
             if (shouldActivate) {
                 // Activate the currently focused tab
-                this._selectTab(this.tabs[this._focusedIndex].id);
+                this._selectTab(this.items[this._focusedIndex].id);
                 // Wait for render to complete, then move focus to panel
                 await this.updateComplete;
-                this._focusPanel(this.tabs[this._focusedIndex].id);
+                this._focusPanel(this.items[this._focusedIndex].id);
             }
             else if (newIndex !== this._focusedIndex) {
                 // Just move focus to the new tab (don't activate)
@@ -333,14 +356,10 @@ let OhTabs = class OhTabs extends OhElement {
      * Select a tab and dispatch change event
      */
     _selectTab(tabId) {
-        if (this.selected !== tabId) {
-            this.selected = tabId;
-            this._focusedIndex = this.tabs.findIndex((t) => t.id === tabId);
-            this.dispatchEvent(new CustomEvent("tab-change", {
-                detail: { tabId },
-                bubbles: true,
-                composed: true,
-            }));
+        if (this.value !== tabId) {
+            this.value = tabId;
+            this._focusedIndex = this.items.findIndex((t) => t.id === tabId);
+            this.emit("oh-change", { value: tabId });
         }
     }
     /**
@@ -360,8 +379,8 @@ let OhTabs = class OhTabs extends OhElement {
           aria-orientation=${this.orientation}
           @keydown=${this._handleKeyDown}
         >
-          ${this.tabs.map((tab, index) => {
-            const isSelected = tab.id === this.selected;
+          ${this.items.map((tab, index) => {
+            const isSelected = tab.id === this.value;
             const tabId = `${this._idPrefix}-tab-${tab.id}`;
             const panelId = `${this._idPrefix}-panel-${tab.id}`;
             return html `
@@ -381,11 +400,11 @@ let OhTabs = class OhTabs extends OhElement {
         </div>
 
         <!-- Tab Panels -->
-        ${this.tabs.map((tab) => {
-            const isSelected = tab.id === this.selected;
+        ${this.items.map((tab) => {
+            const isSelected = tab.id === this.value;
             const tabId = `${this._idPrefix}-tab-${tab.id}`;
             const panelId = `${this._idPrefix}-panel-${tab.id}`;
-            const isFirstTabSelected = this.tabs.length > 0 && this.selected === this.tabs[0].id;
+            const isFirstTabSelected = this.items.length > 0 && this.value === this.items[0].id;
             return html `
             <div
               class="tabpanel ${!isFirstTabSelected
@@ -409,10 +428,10 @@ let OhTabs = class OhTabs extends OhElement {
 };
 __decorate([
     property({ type: Array })
-], OhTabs.prototype, "tabs", void 0);
+], OhTabs.prototype, "items", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: "selected" })
-], OhTabs.prototype, "selected", void 0);
+    property({ type: String, reflect: true })
+], OhTabs.prototype, "value", void 0);
 __decorate([
     property({ type: String })
 ], OhTabs.prototype, "orientation", void 0);

package/dist/oh-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-tabs.js","sourceRoot":"","sources":["../src/oh-tabs.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"oh-tabs.js","sourceRoot":"","sources":["../src/oh-tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAQlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAuKL,iEAAiE;QAEjE,UAAK,GAAc,EAAE,CAAC;QAEtB,yDAAyD;QAEzD,UAAK,GAAG,EAAE,CAAC;QAEX;;WAEG;QAEH,gBAAW,GAA8B,YAAY,CAAC;QAEtD;;WAEG;QAEK,kBAAa,GAAG,CAAC,CAAC;QAE1B;;WAEG;QACK,cAAS,GAAG,WAAW,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAsM3E,CAAC;aAnYiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiKF;KACF,AApKqB,CAoKpB;IA2BO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,4CAA4C;QAC5C,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChC,CAAC;QACD,8CAA8C;QAC9C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAC3B,CAAC,EACD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,CACjD,CAAC;IACJ,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACtD,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAC1E,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,KAAK,CAAC,cAAc,CAAC,CAAgB;QAC3C,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAEnC,IAAI,QAAQ,KAAK,CAAC;YAAE,OAAO;QAE3B,IAAI,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;QAClC,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,IAAI,cAAc,GAAG,KAAK,CAAC;QAE3B,2EAA2E;QAC3E,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACtC,MAAM,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC;QACrD,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC;QAEjD,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,WAAW;gBACd,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE,CAAC;oBACtC,QAAQ;wBACN,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;oBACnE,OAAO,GAAG,IAAI,CAAC;gBACjB,CAAC;gBACD,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE,CAAC;oBACtC,QAAQ;wBACN,IAAI,CAAC,aAAa,KAAK,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;oBACnE,OAAO,GAAG,IAAI,CAAC;gBACjB,CAAC;gBACD,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;oBACpC,QAAQ;wBACN,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;oBACnE,OAAO,GAAG,IAAI,CAAC;gBACjB,CAAC;gBACD,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;oBACpC,QAAQ;wBACN,IAAI,CAAC,aAAa,KAAK,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;oBACnE,OAAO,GAAG,IAAI,CAAC;gBACjB,CAAC;gBACD,MAAM;YACR,KAAK,MAAM;gBACT,QAAQ,GAAG,CAAC,CAAC;gBACb,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;YACR,KAAK,KAAK;gBACR,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC;gBACxB,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;YACR,KAAK,OAAO,CAAC;YACb,KAAK,GAAG,EAAE,QAAQ;gBAChB,cAAc,GAAG,IAAI,CAAC;gBACtB,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;QACV,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,cAAc,EAAE,CAAC;gBACnB,qCAAqC;gBACrC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;gBACnD,wDAAwD;gBACxD,MAAM,IAAI,CAAC,cAAc,CAAC;gBAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;YACtD,CAAC;iBAAM,IAAI,QAAQ,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC3C,kDAAkD;gBAClD,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;gBAC9B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IACK,WAAW,CAAC,KAAa;QAC/B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,SAAS,UAAU,KAAK,EAAE,CAAC;QACnD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACvD,KAAK,EAAE,KAAK,EAAE,CAAC;IACjB,CAAC;IAED;;OAEG;IACK,SAAS,CAAC,KAAa;QAC7B,MAAM,UAAU,GACd,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAoB,MAAM,CAAC,CAAC;QAC/D,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;IAC/B,CAAC;IAED;;OAEG;IACK,UAAU,CAAC,KAAa;QAC9B,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;YAEjE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAED;;OAEG;IACK,eAAe,CAAC,KAAa,EAAE,KAAa;QAClD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;6BAMc,IAAI,CAAC,WAAW;qBACxB,IAAI,CAAC,cAAc;;YAE5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC9B,MAAM,UAAU,GAAG,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC;YACzC,MAAM,KAAK,GAAG,GAAG,IAAI,CAAC,SAAS,QAAQ,GAAG,CAAC,EAAE,EAAE,CAAC;YAChD,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,SAAS,UAAU,GAAG,CAAC,EAAE,EAAE,CAAC;YAEpD,OAAO,IAAI,CAAA;;;;qBAIF,KAAK;gCACM,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gCAC7B,OAAO;2BACZ,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;yBAC3C,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC;;2CAEvB,GAAG,CAAC,KAAK;;aAEvC,CAAC;QACJ,CAAC,CAAC;;;;UAIF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACvB,MAAM,UAAU,GAAG,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC;YACzC,MAAM,KAAK,GAAG,GAAG,IAAI,CAAC,SAAS,QAAQ,GAAG,CAAC,EAAE,EAAE,CAAC;YAChD,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,SAAS,UAAU,GAAG,CAAC,EAAE,EAAE,CAAC;YACpD,MAAM,kBAAkB,GACtB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAE3D,OAAO,IAAI,CAAA;;gCAEW,CAAC,kBAAkB;gBACnC,CAAC,CAAC,4BAA4B;gBAC9B,CAAC,CAAC,EAAE;;mBAED,OAAO;gCACM,KAAK;wBACb,CAAC,UAAU;yBACV,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;;gBAEhC,GAAG,CAAC,OAAO;gBACX,CAAC,CAAC,IAAI,CAAA,GAAG,GAAG,CAAC,OAAO,EAAE;gBACtB,CAAC,CAAC,IAAI,CAAA,cAAc,GAAG,CAAC,EAAE,UAAU;;WAEzC,CAAC;QACJ,CAAC,CAAC;;KAEL,CAAC;IACJ,CAAC;;AA1ND;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qCACJ;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAC/B;AAMX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAC2B;AAM9C;IADP,KAAK,EAAE;6CACkB;AAzLf,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAoYlB"}

package/dist/oh-textarea.d.ts

@@ -1,16 +1,16 @@
 /**
  * oh-textarea
  *
- * A multi-line text field for messages, comments and feedback. The same
- * chunky, inset field as oh-input, and the first OHDS control that takes
- * part in a native <form>.
+ * A multi-line text field for messages, comments and feedback.
  *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. SAME FAMILY AS oh-input
- *    - Thick border (stroke.control), inset shadow, shape.control corners
- *    - Focus thickens the border inward with an inset ring in
- *      focus.ringColor; background switches to color.surface.highlight
+ *    - Same tokens: stroke.control border in color.border.emphasis,
+ *      shape.control corners, an inset shadow offset by elevation.offset.md
+ *      in elevation.color.field
+ *    - Focus is a solid inset ring in focus.ringColor inside the border;
+ *      background switches to color.surface.highlight
  *
  * 2. ON THE GRID
  *    - Line height is 1.5 times the text size, rounded up to the brand's
@@ -31,6 +31,37 @@ import { OhElement } from "./base.js";
 /**
  * A multi-line text field that submits with a native form.
  *
+ * **Use it for** messages, comments, feedback: text that may run to several
+ * lines. **Don't use it for** a single line of text (use `oh-input`).
+ *
+ * **States:** rest, hover, focus, error (set `error-text`), disabled,
+ * required. `rows` sets the visible lines (default 4); people can drag it
+ * taller. `maxlength` limits the length.
+ *
+ * **Behaviour:** form-associated. Give it a `name` and it submits with the
+ * form. `required` stops the form submitting while it's empty, with the
+ * browser's own message. A form reset restores its starting text, and a
+ * disabled `<fieldset>` disables it. Fires `oh-input` on every keystroke and
+ * `oh-change` when the value is committed. Its line height is 1.5 times the
+ * text size, rounded up to `grid.unit`, so long messages stay on the grid.
+ *
+ * **Accessibility:** always set `label`: it names the field. A placeholder
+ * isn't a label. Helper and error text are linked to the field with
+ * `aria-describedby`, so screen readers read them. Errors come before the
+ * field, with an icon, set `aria-invalid`, and are announced only when they
+ * appear after the page has loaded. Focus is a solid inset ring. Use
+ * `autocomplete` when the field asks for something a browser can fill in,
+ * such as an address (WCAG 1.3.5).
+ *
+ * **Look:** set by tokens — `stroke.control` in `color.border.emphasis`
+ * (border), `shape.control` (corners), `typography.control.*` (type),
+ * `elevation.offset.md` and `elevation.color.field` (inset shadow),
+ * `color.border.hover` (hover), `focus.ringColor` and
+ * `color.surface.highlight` (focus), `color.feedback.error`,
+ * `color.feedback.errorSubtle` and `elevation.color.error` (error),
+ * `color.surface.disabled`, `color.border.disabled` and
+ * `color.text.disabled` (disabled).
+ *
  * @element oh-textarea
  * @fires oh-input - On every keystroke. detail: { value, originalEvent }
  * @fires oh-change - When the value is committed (on blur). detail: { value, originalEvent }

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

@@ -1 +1 @@
-{"version":3,"file":"oh-textarea.d.ts","sourceRoot":"","sources":["../src/oh-textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BA4HpB;IAEF,6DAA6D;IAE7D,KAAK,SAAM;IAEX,4BAA4B;IAE5B,KAAK,SAAM;IAEX,mFAAmF;IAEnF,WAAW,SAAM;IAEjB,kDAAkD;IAElD,UAAU,SAAM;IAEhB,kGAAkG;IAElG,SAAS,SAAM;IAEf,4CAA4C;IAE5C,IAAI,SAAM;IAEV,gDAAgD;IAEhD,QAAQ,UAAS;IAEjB,oDAAoD;IAEpD,QAAQ,UAAS;IAEjB,iFAAiF;IAEjF,IAAI,SAAK;IAET,0CAA0C;IAE1C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8FAA8F;IAE9F,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,OAAO,CAAC,SAAS,CAAuB;IAExC,OAAO,CAAC,UAAU,CAA0B;IAE5C,uDAAuD;IACvD,OAAO,CAAC,aAAa,CAAM;IAE3B,2DAA2D;IAE3D,OAAO,CAAC,aAAa,CAAS;IAE9B;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,iBAAiB;IAKjB,qCAAqC;IACrC,IAAI,IAAI,2BAEP;IAED,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,IAAI;IAIJ,iBAAiB;IAIjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAI/D,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAe/B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAIrB,MAAM;CAsEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"oh-textarea.d.ts","sourceRoot":"","sources":["../src/oh-textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BA4HpB;IAEF,6DAA6D;IAE7D,KAAK,SAAM;IAEX,4BAA4B;IAE5B,KAAK,SAAM;IAEX,mFAAmF;IAEnF,WAAW,SAAM;IAEjB,kDAAkD;IAElD,UAAU,SAAM;IAEhB,kGAAkG;IAElG,SAAS,SAAM;IAEf,4CAA4C;IAE5C,IAAI,SAAM;IAEV,gDAAgD;IAEhD,QAAQ,UAAS;IAEjB,oDAAoD;IAEpD,QAAQ,UAAS;IAEjB,iFAAiF;IAEjF,IAAI,SAAK;IAET,0CAA0C;IAE1C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8FAA8F;IAE9F,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,OAAO,CAAC,SAAS,CAAuB;IAExC,OAAO,CAAC,UAAU,CAA0B;IAE5C,uDAAuD;IACvD,OAAO,CAAC,aAAa,CAAM;IAE3B,2DAA2D;IAE3D,OAAO,CAAC,aAAa,CAAS;IAE9B;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,iBAAiB;IAKjB,qCAAqC;IACrC,IAAI,IAAI,2BAEP;IAED,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,IAAI;IAIJ,iBAAiB;IAIjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAI/D,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAe/B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAIrB,MAAM;CAsEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/oh-textarea.js

@@ -1,16 +1,16 @@
 /**
  * oh-textarea
  *
- * A multi-line text field for messages, comments and feedback. The same
- * chunky, inset field as oh-input, and the first OHDS control that takes
- * part in a native <form>.
+ * A multi-line text field for messages, comments and feedback.
  *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. SAME FAMILY AS oh-input
- *    - Thick border (stroke.control), inset shadow, shape.control corners
- *    - Focus thickens the border inward with an inset ring in
- *      focus.ringColor; background switches to color.surface.highlight
+ *    - Same tokens: stroke.control border in color.border.emphasis,
+ *      shape.control corners, an inset shadow offset by elevation.offset.md
+ *      in elevation.color.field
+ *    - Focus is a solid inset ring in focus.ringColor inside the border;
+ *      background switches to color.surface.highlight
  *
  * 2. ON THE GRID
  *    - Line height is 1.5 times the text size, rounded up to the brand's
@@ -38,6 +38,37 @@ import { OhElement, baseStyles } from "./base.js";
 /**
  * A multi-line text field that submits with a native form.
  *
+ * **Use it for** messages, comments, feedback: text that may run to several
+ * lines. **Don't use it for** a single line of text (use `oh-input`).
+ *
+ * **States:** rest, hover, focus, error (set `error-text`), disabled,
+ * required. `rows` sets the visible lines (default 4); people can drag it
+ * taller. `maxlength` limits the length.
+ *
+ * **Behaviour:** form-associated. Give it a `name` and it submits with the
+ * form. `required` stops the form submitting while it's empty, with the
+ * browser's own message. A form reset restores its starting text, and a
+ * disabled `<fieldset>` disables it. Fires `oh-input` on every keystroke and
+ * `oh-change` when the value is committed. Its line height is 1.5 times the
+ * text size, rounded up to `grid.unit`, so long messages stay on the grid.
+ *
+ * **Accessibility:** always set `label`: it names the field. A placeholder
+ * isn't a label. Helper and error text are linked to the field with
+ * `aria-describedby`, so screen readers read them. Errors come before the
+ * field, with an icon, set `aria-invalid`, and are announced only when they
+ * appear after the page has loaded. Focus is a solid inset ring. Use
+ * `autocomplete` when the field asks for something a browser can fill in,
+ * such as an address (WCAG 1.3.5).
+ *
+ * **Look:** set by tokens — `stroke.control` in `color.border.emphasis`
+ * (border), `shape.control` (corners), `typography.control.*` (type),
+ * `elevation.offset.md` and `elevation.color.field` (inset shadow),
+ * `color.border.hover` (hover), `focus.ringColor` and
+ * `color.surface.highlight` (focus), `color.feedback.error`,
+ * `color.feedback.errorSubtle` and `elevation.color.error` (error),
+ * `color.surface.disabled`, `color.border.disabled` and
+ * `color.text.disabled` (disabled).
+ *
  * @element oh-textarea
  * @fires oh-input - On every keystroke. detail: { value, originalEvent }
  * @fires oh-change - When the value is committed (on blur). detail: { value, originalEvent }
@@ -126,7 +157,7 @@ let OhTextarea = class OhTextarea extends OhElement {
         border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: var(--oh-shape-control);
         box-shadow: inset var(--oh-elevation-offset-md)
-          var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-field);
+          var(--oh-elevation-offset-md) 0 0 var(--oh-elevation-color-field);
         transition:
           border-color var(--oh-motion-snappy) ease,
           box-shadow var(--oh-motion-snappy) ease,
@@ -152,7 +183,7 @@ let OhTextarea = class OhTextarea extends OhElement {
         border-color: var(--oh-color-feedback-error);
         background-color: var(--oh-color-feedback-error-subtle);
         box-shadow: inset var(--oh-elevation-offset-md)
-          var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-error);
+          var(--oh-elevation-offset-md) 0 0 var(--oh-elevation-color-error);
       }
 
       .textarea--error:focus {
@@ -160,7 +191,7 @@ let OhTextarea = class OhTextarea extends OhElement {
         box-shadow: inset 0 0 0 2px var(--oh-color-feedback-error);
       }
 
-      /* Disabled: quiet, not broken */
+      /* Disabled: color.*.disabled tokens, no shadow, no resizing */
       .textarea:disabled {
         cursor: not-allowed;
         resize: none;

package/dist/oh-textarea.js.map

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

package/dist/oh-toggle.d.ts

@@ -1,30 +1,63 @@
 /**
  * oh-toggle
  *
- * A toggle/switch component for binary on/off states.
+ * A switch for binary on/off settings.
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY 3D FEEL
- *    - Thumb offset up-left from center to appear "popping out"
- *    - Shadow flips horizontally when checked (light source stays consistent)
- *    - Smooth slide animation
+ * 1. LOOK FROM TOKENS
+ *    - Track: shape.pill, color.surface.raised off, color.brand.primary on
+ *    - Thumb: color.surface.base with a stroke.control border in
+ *      color.border.emphasis, and a shadow offset by elevation.offset.*
+ *      (elevation.color.secondary off, elevation.color.primary on). The shadow's horizontal
+ *      offset flips when checked; hover and press move the thumb by
+ *      lift.hoverSm / lift.pressSm
  *
  * 2. VISUAL STATES
- *    - Off: Neutral track, thumb on left, shadow bottom-right
- *    - On: Brand primary track, thumb on right, shadow bottom-left (flipped)
+ *    - Off: thumb at the start of the track; on: thumb at the end
  *
  * 3. ACCESSIBILITY
- *    - Uses role="switch" with aria-checked
+ *    - role="switch" with aria-checked on a focusable track
  *    - Keyboard: Space/Enter to toggle
- *    - Focus ring matches design system
- *    - Label association via aria-labelledby
+ *    - Focus: a solid outline in focus.ringColor (focus.glowColor adds a
+ *      glow around it, as decoration)
+ *    - Named by its visible label (aria-labelledby) or accessible-label
+ */
+import { OhElement } from "./base.js";
+/**
+ * A switch that turns a setting on or off.
+ *
+ * **Use it for** a setting that takes effect straight away, such as turning
+ * notifications on. **Don't use it for** a choice that's only applied when a
+ * form is submitted, or one that must be agreed to (use `oh-checkbox`), or
+ * a choice between more than two options (use `oh-radio-group`).
+ *
+ * **States:** off, on, hover, active, focus.
+ *
+ * **Behaviour:** clicking the switch or its label, or pressing Space or
+ * Enter while it's focused, flips `checked` and fires `oh-change` with
+ * `{ checked }`. `name` and `value` are stored but it isn't form-associated,
+ * so it doesn't submit with a native form: listen for `oh-change`. It has no
+ * `disabled` property. Under `prefers-reduced-motion` it doesn't animate.
+ *
+ * **Accessibility:** `role="switch"` with `aria-checked`, in the tab order.
+ * Set `label` (a visible label, linked with `aria-labelledby`), or
+ * `accessible-label` when there's no visible label (not `aria-label`, which
+ * isn't forwarded into the shadow root). Focus is a solid outline in
+ * `focus.ringColor`.
+ *
+ * **Look:** set by tokens — `shape.pill` (track), `color.surface.raised` /
+ * `color.brand.primary` (track off / on), `color.surface.base`,
+ * `stroke.control` and `color.border.emphasis` (thumb),
+ * `elevation.offset.*` with `elevation.color.secondary` / `elevation.color.primary` (thumb
+ * shadow off / on), `lift.hoverSm` / `lift.pressSm` (movement on hover and
+ * press), `focus.ringColor` and `focus.glowColor` (focus),
+ * `typography.body.*` (label).
  *
  * @element oh-toggle
  *
- * @fires oh-change - Fired when the toggle state changes
+ * @fires oh-change - Fired when the toggle state changes. detail: { checked }
  */
-import { OhElement } from "./base.js";
 export declare class OhToggle extends OhElement {
     static styles: import("lit").CSSResult[];
     /** Whether the toggle is checked/on */

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

@@ -1 +1 @@
-{"version":3,"file":"oh-toggle.d.ts","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA0HpB;IAEF,uCAAuC;IAEvC,OAAO,UAAS;IAEhB,8CAA8C;IAE9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+BAA+B;IAE/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAEhC,KAAK,SAAQ;IAEb,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA+D;IAExF,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"oh-toggle.d.ts","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA4HpB;IAEF,uCAAuC;IAEvC,OAAO,UAAS;IAEhB,8CAA8C;IAE9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+BAA+B;IAE/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAEhC,KAAK,SAAQ;IAEb,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA+D;IAExF,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}