@orange-halo/components 1.0.0 → 2.1.0

package/dist/oh-drawer.js

@@ -16,7 +16,7 @@
  *    - Smooth slide animation
  *
  * 3. ACCESSIBILITY
- *    - Focus trap when open
+ *    - Focus trap when open (focus guards at each end of the panel)
  *    - Escape key closes
  *    - aria-modal and role="dialog"
  *    - Returns focus to trigger on close
@@ -38,7 +38,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
-import { trapFocus } from "@orange-halo/utils";
+import { getFocusableElementsDeep } from "@orange-halo/utils";
 import "./oh-button.js";
 import "./oh-icon.js";
 let OhDrawer = class OhDrawer extends OhElement {
@@ -86,14 +86,27 @@ let OhDrawer = class OhDrawer extends OhElement {
         z-index: 1000;
         display: flex;
         flex-direction: column;
-        transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
+        /* Hidden once it has slid away, so its shadow can't show at the
+           viewport edge while closed */
+        visibility: hidden;
+        transition:
+          transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle),
+          visibility 0s linear var(--oh-motion-relaxed);
+      }
+
+      /* Opening: visible at once, so focus can move into the panel on the
+         next frame (see ACCESSIBILITY_LESSONS.md 21) */
+      .drawer.is-open {
+        visibility: visible;
+        transition:
+          transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle),
+          visibility 0s;
       }
 
       /* Left position (default) */
       .drawer--left {
         left: 0;
-        border-right: var(--oh-border-width-lg) solid var(--oh-color-border-default);
-        box-shadow: var(--oh-shadow-lg);
+        box-shadow: var(--oh-elevation-strong);
         transform: translateX(-100%);
       }
 
@@ -104,8 +117,7 @@ let OhDrawer = class OhDrawer extends OhElement {
       /* Right position */
       .drawer--right {
         right: 0;
-        border-left: var(--oh-border-width-lg) solid var(--oh-color-border-default);
-        box-shadow: calc(-1 * var(--oh-shadow-offset-x, 4px)) var(--oh-shadow-offset-y, 4px) 0 0 var(--oh-color-warm-dune);
+        box-shadow: calc(-1 * var(--oh-elevation-offset-lg)) var(--oh-elevation-offset-lg) 0 0 var(--oh-color-border-strong);
         transform: translateX(100%);
       }
 
@@ -119,14 +131,13 @@ let OhDrawer = class OhDrawer extends OhElement {
         align-items: center;
         justify-content: space-between;
         padding: var(--oh-spacing-4);
-        border-bottom: var(--oh-border-width-md) solid var(--oh-color-border-default);
         flex-shrink: 0;
       }
 
       .drawer__title {
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-lg);
-        font-weight: var(--oh-font-weight-semibold);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-heading-h5-font-size);
+        font-weight: var(--oh-typography-emphasis-font-weight);
         color: var(--oh-color-text-primary);
         margin: 0;
       }
@@ -138,6 +149,15 @@ let OhDrawer = class OhDrawer extends OhElement {
         padding: var(--oh-spacing-4);
       }
 
+      /* Focus guards: focusable but never seen; focus moves on at once. */
+      .focus-guard {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+      }
+
       /* Reduced motion */
       @media (prefers-reduced-motion: reduce) {
         .drawer-backdrop,
@@ -154,7 +174,6 @@ let OhDrawer = class OhDrawer extends OhElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener("keydown", this._handleKeydown);
-        this._cleanupFocusTrap?.();
     }
     updated(changedProperties) {
         if (changedProperties.has("open")) {
@@ -167,20 +186,20 @@ let OhDrawer = class OhDrawer extends OhElement {
         }
     }
     _onOpen() {
-        // Store the trigger element for focus return
-        this._triggerElement = document.activeElement;
+        // Store the trigger element for focus return. Follow focus into shadow
+        // roots: a trigger inside another component (the navbar's menu button)
+        // is reported as that component's host, which can't take focus.
+        let active = document.activeElement;
+        while (active?.shadowRoot?.activeElement)
+            active = active.shadowRoot.activeElement;
+        this._triggerElement = active;
         // Prevent body scroll
         document.body.style.overflow = "hidden";
         // Add keydown listener
         document.addEventListener("keydown", this._handleKeydown);
-        // Set up focus trap after render
+        // Focus the close button after render. The focus guards keep focus inside.
         requestAnimationFrame(() => {
-            if (this._drawer) {
-                this._cleanupFocusTrap = trapFocus(this._drawer);
-                // Focus the close button
-                const closeBtn = this._drawer.querySelector("oh-button");
-                closeBtn?.focus();
-            }
+            this._drawer?.querySelector("oh-button")?.focus();
         });
     }
     _onClose() {
@@ -188,9 +207,6 @@ let OhDrawer = class OhDrawer extends OhElement {
         document.body.style.overflow = "";
         // Remove keydown listener
         document.removeEventListener("keydown", this._handleKeydown);
-        // Clean up focus trap
-        this._cleanupFocusTrap?.();
-        this._cleanupFocusTrap = undefined;
         // Return focus to trigger
         this._triggerElement?.focus();
         this._triggerElement = null;
@@ -208,6 +224,15 @@ let OhDrawer = class OhDrawer extends OhElement {
     _handleBackdropClick() {
         this._close();
     }
+    /**
+     * Focus guards: Tab past the last control lands on the end guard, which
+     * wraps to the first; Shift+Tab before the first wraps to the last. This
+     * holds however the browser orders Tab (Safari skips links by default).
+     */
+    _focusEdge(edge) {
+        const items = getFocusableElementsDeep(this._drawer).filter((el) => !el.classList.contains("focus-guard"));
+        (edge === "first" ? items[0] : items[items.length - 1])?.focus();
+    }
     /** Public method to open the drawer */
     show() {
         this.open = true;
@@ -240,6 +265,7 @@ let OhDrawer = class OhDrawer extends OhElement {
         aria-label=${this.heading || "Navigation menu"}
         ?inert=${!this.open}
       >
+        <span class="focus-guard" tabindex="0" @focus=${() => this._focusEdge("last")}></span>
         <div class="drawer__header">
           ${this.heading
             ? html `<h2 class="drawer__title">${this.heading}</h2>`
@@ -248,7 +274,7 @@ let OhDrawer = class OhDrawer extends OhElement {
             variant="secondary"
             size="sm"
             icon-only
-            aria-label="Close menu"
+            accessible-label="Close menu"
             @click=${this._close}
           >
             <oh-icon name="close"></oh-icon>
@@ -258,6 +284,7 @@ let OhDrawer = class OhDrawer extends OhElement {
         <div class="drawer__content">
           <slot></slot>
         </div>
+        <span class="focus-guard" tabindex="0" @focus=${() => this._focusEdge("first")}></span>
       </div>
     `;
     }

package/dist/oh-drawer.js.map

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

package/dist/oh-footer.d.ts

@@ -15,6 +15,11 @@
  *    - White/inverse text and links
  *    - Generous padding
  *
+ * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
+ * it from @orange-halo/brand-orange-halo; importing it from components is
+ * deprecated and stops working in components 3.0, when this file moves to
+ * the brand package (brand plan phase 8).
+ *
  * @element oh-footer
  *
  * @slot logo - Slot for logo element

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

@@ -1 +1 @@
-{"version":3,"file":"oh-footer.d.ts","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAmCpB;IAEF,qBAAqB;IAErB,SAAS,SAAM;IAEf,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"oh-footer.d.ts","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAmCpB;IAEF,qBAAqB;IAErB,SAAS,SAAM;IAEf,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/oh-footer.js

@@ -15,6 +15,11 @@
  *    - White/inverse text and links
  *    - Generous padding
  *
+ * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
+ * it from @orange-halo/brand-orange-halo; importing it from components is
+ * deprecated and stops working in components 3.0, when this file moves to
+ * the brand package (brand plan phase 8).
+ *
  * @element oh-footer
  *
  * @slot logo - Slot for logo element
@@ -47,9 +52,9 @@ let OhFooter = class OhFooter extends OhElement {
         display: block;
         background-color: var(--oh-color-accent-default);
         color: var(--oh-color-text-on-accent);
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        line-height: var(--oh-line-height-md);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        line-height: var(--oh-typography-body-base-line-height);
         padding: var(--oh-spacing-8) 0;
       }
 
@@ -69,7 +74,7 @@ let OhFooter = class OhFooter extends OhElement {
       }
 
       /* Responsive - tablet: brand section spans full width */
-      @media (max-width: 900px) {
+      @media (max-width: 768px) {
         .footer__brand {
           grid-column: 1 / -1;
         }

package/dist/oh-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-footer.js","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;;;;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;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAGlB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAsCL,qBAAqB;QAErB,cAAS,GAAG,EAAE,CAAC;IA2BjB,CAAC;aAlEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAMF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;gBASC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,SAAS,MAAM;YAC1D,CAAC,CAAC,IAAI;;;;;;;;;;;KAWjB,CAAC;IACJ,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAxCJ,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmEpB"}
+{"version":3,"file":"oh-footer.js","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;;;;;;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;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAGlB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAsCL,qBAAqB;QAErB,cAAS,GAAG,EAAE,CAAC;IA2BjB,CAAC;aAlEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAMF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;gBASC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,SAAS,MAAM;YAC1D,CAAC,CAAC,IAAI;;;;;;;;;;;KAWjB,CAAC;IACJ,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAxCJ,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmEpB"}

package/dist/oh-hero.d.ts

@@ -3,6 +3,11 @@
  *
  * A prominent hero section for page headers.
  *
+ * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
+ * it from @orange-halo/brand-orange-halo; importing it from components is
+ * deprecated and stops working in components 3.0, when this file moves to
+ * the brand package (brand plan phase 8).
+ *
  * @element oh-hero
  */
 import { LitElement } from "lit";

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

@@ -1 +1 @@
-{"version":3,"file":"oh-hero.d.ts","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAgJpB;IAGF,OAAO,EAAE,WAAW,CAAa;IAGjC,IAAI,EAAE,QAAQ,CAAQ;IAGtB,OAAO,SAAM;IAGb,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,WAAW,SAAK;IAGhB,UAAU,SAAK;IAEN,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"oh-hero.d.ts","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA+IpB;IAGF,OAAO,EAAE,WAAW,CAAa;IAGjC,IAAI,EAAE,QAAQ,CAAQ;IAGtB,OAAO,SAAM;IAGb,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,WAAW,SAAK;IAGhB,UAAU,SAAK;IAEN,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/oh-hero.js

@@ -3,6 +3,11 @@
  *
  * A prominent hero section for page headers.
  *
+ * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
+ * it from @orange-halo/brand-orange-halo; importing it from components is
+ * deprecated and stops working in components 3.0, when this file moves to
+ * the brand package (brand plan phase 8).
+ *
  * @element oh-hero
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -28,89 +33,88 @@ let OhHero = class OhHero extends LitElement {
     static { this.styles = css `
     :host {
       display: block;
-      background-color: var(--oh-color-brand-primary, #C54300);
-      color: var(--oh-color-text-on-brand, #FFFFFF);
-      font-family: var(--oh-font-family-sans, system-ui, sans-serif);
+      background-color: var(--oh-color-brand-primary);
+      color: var(--oh-color-text-on-brand);
+      font-family: var(--oh-typography-body-font-family);
     }
 
     .hero {
-      padding: 48px 0;
+      padding: var(--oh-spacing-12) 0;
     }
 
     .hero--journey {
-      padding: 32px 0;
+      padding: var(--oh-spacing-8) 0;
     }
 
     /* Container styles - matches oh-container */
     .hero__container {
       width: 100%;
-      max-width: var(--hero-max-width, 1024px);
+      max-width: var(--hero-max-width, var(--oh-layout-container-lg));
       margin-left: auto;
       margin-right: auto;
-      padding-left: var(--oh-spacing-4, 16px);
-      padding-right: var(--oh-spacing-4, 16px);
+      padding-left: var(--oh-spacing-4);
+      padding-right: var(--oh-spacing-4);
       box-sizing: border-box;
     }
 
     /* Size variants */
     :host([size="sm"]) {
-      --hero-max-width: 640px;
+      --hero-max-width: var(--oh-layout-container-sm);
     }
 
     :host([size="md"]) {
-      --hero-max-width: 768px;
+      --hero-max-width: var(--oh-layout-container-md);
     }
 
     :host([size="lg"]) {
-      --hero-max-width: 1024px;
+      --hero-max-width: var(--oh-layout-container-lg);
     }
 
     :host([size="xl"]) {
-      --hero-max-width: 1280px;
+      --hero-max-width: var(--oh-layout-container-xl);
     }
 
     .hero__heading {
-      font-size: 42px;
-      font-weight: 700;
-      line-height: 1.2;
-      margin: 0 0 16px 0;
-      color: var(--oh-color-text-on-brand, #FFFFFF);
+      font-size: var(--oh-typography-heading-h1-font-size);
+      font-weight: var(--oh-typography-heading-h1-font-weight);
+      line-height: var(--oh-typography-heading-h1-line-height);
+      margin: 0 0 var(--oh-spacing-4) 0;
+      color: var(--oh-color-text-on-brand);
     }
 
     .hero__subtitle {
-      font-size: 20px;
-      font-weight: 400;
-      line-height: 1.5;
-      margin: 0 0 24px 0;
-      color: var(--oh-color-text-on-brand, #FFFFFF);
-      opacity: 0.85;
+      font-size: var(--oh-typography-body-xl-font-size);
+      font-weight: var(--oh-typography-body-xl-font-weight);
+      line-height: var(--oh-typography-body-xl-line-height);
+      margin: 0 0 var(--oh-spacing-6) 0;
+      color: var(--oh-color-text-on-brand);
       max-width: 65ch;
     }
 
     .hero__actions {
       display: flex;
       flex-wrap: wrap;
-      gap: 16px;
-      margin-top: 24px;
+      gap: var(--oh-spacing-4);
+      margin-top: var(--oh-spacing-6);
     }
 
     .hero__journey-heading {
-      font-size: 32px;
-      font-weight: 700;
-      line-height: 1.2;
-      margin: 0 0 24px 0;
-      color: var(--oh-color-text-on-brand, #FFFFFF);
+      font-size: var(--oh-typography-heading-h2-font-size);
+      font-weight: var(--oh-typography-heading-h2-font-weight);
+      line-height: var(--oh-typography-heading-h2-line-height);
+      margin: 0 0 var(--oh-spacing-6) 0;
+      color: var(--oh-color-text-on-brand);
     }
 
     .hero__journey-name {
       display: block;
-      font-size: 16px;
-      font-weight: 500;
+      font-family: var(--oh-typography-eyebrow-font-family);
+      font-size: var(--oh-typography-eyebrow-font-size);
+      font-weight: var(--oh-typography-eyebrow-font-weight);
       text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--oh-color-text-on-brand, #FFFFFF);
-      opacity: 0.9;
-      margin-bottom: 8px;
+      letter-spacing: var(--oh-typography-eyebrow-letter-spacing);
+      color: var(--oh-color-text-on-brand);
+      margin-bottom: var(--oh-spacing-2);
     }
 
     .hero__page-name {
@@ -118,40 +122,40 @@ let OhHero = class OhHero extends LitElement {
     }
 
     .hero__progress-wrapper {
-      margin-top: 16px;
-      max-width: 400px;
+      margin-top: var(--oh-spacing-4);
+      max-width: var(--oh-layout-container-sm);
     }
 
     /* Responsive container padding - matches oh-container */
     @media (min-width: 640px) {
       .hero__container {
-        padding-left: var(--oh-spacing-6, 24px);
-        padding-right: var(--oh-spacing-6, 24px);
+        padding-left: var(--oh-spacing-6);
+        padding-right: var(--oh-spacing-6);
       }
     }
 
     @media (min-width: 1024px) {
       .hero__container {
-        padding-left: var(--oh-spacing-8, 32px);
-        padding-right: var(--oh-spacing-8, 32px);
+        padding-left: var(--oh-spacing-8);
+        padding-right: var(--oh-spacing-8);
       }
     }
 
     @media (max-width: 768px) {
       .hero {
-        padding: 32px 0;
+        padding: var(--oh-spacing-8) 0;
       }
       .hero__heading {
-        font-size: 32px;
+        font-size: var(--oh-typography-heading-h2-font-size);
       }
       .hero__subtitle {
-        font-size: 18px;
+        font-size: var(--oh-typography-body-lg-font-size);
       }
       .hero--journey {
-        padding: 24px 0;
+        padding: var(--oh-spacing-6) 0;
       }
       .hero__journey-heading {
-        font-size: 26px;
+        font-size: var(--oh-typography-heading-h3-font-size);
       }
       .hero__progress-wrapper {
         max-width: 100%;
@@ -160,10 +164,10 @@ let OhHero = class OhHero extends LitElement {
 
     @media (max-width: 480px) {
       .hero__heading {
-        font-size: 26px;
+        font-size: var(--oh-typography-heading-h3-font-size);
       }
       .hero__journey-heading {
-        font-size: 20px;
+        font-size: var(--oh-typography-heading-h4-font-size);
       }
       .hero__actions {
         flex-direction: column;
@@ -174,7 +178,7 @@ let OhHero = class OhHero extends LitElement {
         if (this.variant === "journey") {
             const progressLabel = `Step ${this.currentStep} of ${this.totalSteps}`;
             return html `
-        <div class="hero hero--journey" role="banner">
+        <div class="hero hero--journey">
           <div class="hero__container">
             <h1 class="hero__journey-heading">
               ${this.journeyName
@@ -198,7 +202,7 @@ let OhHero = class OhHero extends LitElement {
       `;
         }
         return html `
-      <div class="hero" role="banner">
+      <div class="hero">
         <div class="hero__container">
           ${this.heading
             ? html `<h1 class="hero__heading">${this.heading}</h1>`

package/dist/oh-hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-hero.js","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,kBAAkB,CAAC;AAMnB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAoJL,YAAO,GAAgB,SAAS,CAAC;QAGjC,SAAI,GAAa,IAAI,CAAC;QAGtB,YAAO,GAAG,EAAE,CAAC;QAGb,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,CAAC,CAAC;QAGhB,eAAU,GAAG,CAAC,CAAC;IA8CjB,CAAC;aAnNiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgJ3B,AAhJqB,CAgJpB;IAuBO,MAAM;QACb,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,aAAa,GAAG,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;YACvE,OAAO,IAAI,CAAA;;;;gBAID,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,WAAW,SAAS;gBACnE,CAAC,CAAC,OAAO;8CACqB,IAAI,CAAC,OAAO;;;;yBAIjC,IAAI,CAAC,WAAW;uBAClB,IAAI,CAAC,UAAU;wBACd,aAAa;;;;;;;;;OAS9B,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,OAAO;YACtD,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,QAAQ,MAAM;YACtD,CAAC,CAAC,OAAO;;;;;;KAMhB,CAAC;IACJ,CAAC;;AA/DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACT;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACpB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACtC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CACtC;AAtKJ,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAoNlB"}
+{"version":3,"file":"oh-hero.js","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,kBAAkB,CAAC;AAMnB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmJL,YAAO,GAAgB,SAAS,CAAC;QAGjC,SAAI,GAAa,IAAI,CAAC;QAGtB,YAAO,GAAG,EAAE,CAAC;QAGb,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,CAAC,CAAC;QAGhB,eAAU,GAAG,CAAC,CAAC;IA8CjB,CAAC;aAlNiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+I3B,AA/IqB,CA+IpB;IAuBO,MAAM;QACb,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,aAAa,GAAG,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;YACvE,OAAO,IAAI,CAAA;;;;gBAID,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,WAAW,SAAS;gBACnE,CAAC,CAAC,OAAO;8CACqB,IAAI,CAAC,OAAO;;;;yBAIjC,IAAI,CAAC,WAAW;uBAClB,IAAI,CAAC,UAAU;wBACd,aAAa;;;;;;;;;OAS9B,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,OAAO;YACtD,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,QAAQ,MAAM;YACtD,CAAC,CAAC,OAAO;;;;;;KAMhB,CAAC;IACJ,CAAC;;AA/DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACT;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACpB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACtC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CACtC;AArKJ,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAmNlB"}

package/dist/oh-icon.js

@@ -215,17 +215,17 @@ let OhIcon = class OhIcon extends OhElement {
         justify-content: center;
         color: inherit;
         text-decoration: none;
-        border-radius: var(--oh-shape-radius-sm, 6px);
-        padding: var(--oh-spacing-2, 8px);
-        margin: calc(-1 * var(--oh-spacing-2, 8px));
+        border-radius: var(--oh-shape-compact);
+        padding: var(--oh-spacing-2);
+        margin: calc(-1 * var(--oh-spacing-2));
         transition: 
-          transform var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-gentle, ease),
-          box-shadow var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-gentle, ease);
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-gentle),
+          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-gentle);
       }
 
       .icon-link:hover {
-        transform: translate(-2px, -2px);
-        box-shadow: 4px 4px 0 0 var(--oh-color-border-default);
+        transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-color-border-default);
       }
 
       .icon-link:active {
@@ -238,12 +238,12 @@ let OhIcon = class OhIcon extends OhElement {
       }
 
       .icon-link:focus-visible {
-        box-shadow: 0 0 0 2px var(--oh-color-border-focus);
+        box-shadow: 0 0 0 2px var(--oh-focus-ring-color);
       }
 
       /* Inverse link styles (for dark/colored backgrounds) */
       :host([inverse]) .icon-link:hover {
-        box-shadow: 4px 4px 0 0 var(--oh-color-text-on-accent);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-color-text-on-accent);
       }
 
       :host([inverse]) .icon-link:focus-visible {

package/dist/oh-input.d.ts

@@ -7,9 +7,9 @@
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. CHUNKY & CONFIDENT
- *    - Thick border (2.5px) that feels illustrative
+ *    - Thick border (stroke.control) that feels illustrative
  *    - Solid fill, no subtle gradients
- *    - 10px rounded corners (matches button)
+ *    - shape.control corners (matches button)
  *
  * 2. INSET SHADOW (PRESSED IN)
  *    - Shadow offset to top-left (inset)
@@ -19,11 +19,12 @@
  * 3. FOCUS RISES UP
  *    - Inset shadow disappears
  *    - Outset shadow appears (field lifts)
- *    - Border turns marmalade
+ *    - Border turns brand orange
  *    - Clear visual hierarchy
  *
  * @element oh-input
  */
+import { type PropertyValues } from "lit";
 import { OhElement } from "./base.js";
 export type InputType = "text" | "email" | "password" | "search" | "tel" | "url";
 export type InputState = "default" | "hover" | "focus";
@@ -46,6 +47,13 @@ export declare class OhInput extends OhElement {
     private _handleChange;
     focus(): void;
     blur(): void;
+    /**
+     * Errors that appear after first render (e.g. on submit) are announced via
+     * role="alert". Errors present on page load are only linked with
+     * aria-describedby, so they aren't read out unprompted.
+     */
+    private _announceError;
+    willUpdate(changed: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AACjF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAoKpB;IAGF,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,UAAU,SAAM;IAGhB,SAAS,SAAM;IAGf,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAGnC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIrB,KAAK;IAIL,IAAI;IAIJ,MAAM;CA2DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AACjF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAoKpB;IAGF,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,UAAU,SAAM;IAGhB,SAAS,SAAM;IAGf,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAGnC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIrB,KAAK;IAIL,IAAI;IAIJ;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAyDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/oh-input.figma.js

@@ -28,8 +28,8 @@ figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=
         value="${props.value}"
         placeholder="${props.showPlaceholder ? props.placeholder : ""}"
         ?required="${props.required}"
-        helper-text="${props.helperText}"
-        error-text="${props.errorText}"
+        helpertext="${props.helperText}"
+        errortext="${props.errorText}"
       ></oh-input>
     `,
 });

package/dist/oh-input.figma.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-input.figma.js","sourceRoot":"","sources":["../src/oh-input.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;;;;;;;;;GAYG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;QAClD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACxC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACvC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACtC;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;iBACX,KAAK,CAAC,KAAK;uBACL,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBAChD,KAAK,CAAC,QAAQ;uBACZ,KAAK,CAAC,UAAU;sBACjB,KAAK,CAAC,SAAS;;KAEhC;CACF,CACF,CAAC"}
+{"version":3,"file":"oh-input.figma.js","sourceRoot":"","sources":["../src/oh-input.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;;;;;;;;;GAYG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;QAClD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACxC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACvC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACtC;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;iBACX,KAAK,CAAC,KAAK;uBACL,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBAChD,KAAK,CAAC,QAAQ;sBACb,KAAK,CAAC,UAAU;qBACjB,KAAK,CAAC,SAAS;;KAE/B;CACF,CACF,CAAC"}