@orange-halo/components 1.0.0 → 2.0.0

package/dist/oh-checkbox-group.js

@@ -20,7 +20,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
 let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
     constructor() {
@@ -32,6 +32,12 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
         this.required = false;
         this.error = false;
         this.errorMessage = "";
+        /**
+         * 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.
+         */
+        this._announceError = false;
     }
     static { this.styles = [
         baseStyles,
@@ -58,9 +64,9 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
       }
 
       legend {
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        font-weight: var(--oh-font-weight-semibold);
+        font-family: var(--oh-typography-control-font-family);
+        font-size: var(--oh-typography-control-font-size-sm);
+        font-weight: var(--oh-typography-control-font-weight);
         color: var(--oh-color-text-primary);
         margin-bottom: var(--oh-spacing-2);
         padding: 0;
@@ -103,7 +109,7 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
         height: 24px;
         flex-shrink: 0;
         border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
-        border-radius: var(--oh-radius-sm);
+        border-radius: var(--oh-shape-compact);
         background-color: var(--oh-color-surface-base);
         box-shadow: 3px 3px 0 0 var(--oh-shadow-secondary);
         transition: 
@@ -128,9 +134,9 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
       }
 
       .option-label {
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-lg);
-        line-height: var(--oh-font-line-height-normal);
+        font-family: var(--oh-typography-control-font-family);
+        font-size: var(--oh-typography-control-font-size-md);
+        line-height: var(--oh-typography-body-base-line-height);
         color: var(--oh-color-text-primary);
         user-select: none;
       }
@@ -202,16 +208,16 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
         display: flex;
         align-items: center;
         gap: var(--oh-spacing-2);
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
         color: var(--oh-color-feedback-error);
         margin-bottom: var(--oh-spacing-2);
       }
 
       .error-icon {
         flex-shrink: 0;
-        width: var(--oh-font-size-lg);
-        height: var(--oh-font-size-lg);
+        width: var(--oh-typography-body-lg-font-size);
+        height: var(--oh-typography-body-lg-font-size);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -236,6 +242,11 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
         }
         this.emit("oh-change", { value: this.value });
     }
+    willUpdate(changed) {
+        if (this.hasUpdated && (changed.has("error") || changed.has("errorMessage"))) {
+            this._announceError = !!(this.error && this.errorMessage);
+        }
+    }
     render() {
         return html `
       <fieldset
@@ -252,7 +263,7 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
 
         ${this.error && this.errorMessage
             ? html `
-              <div id="error-msg" class="error-message" role="alert">
+              <div id="error-msg" class="error-message" role=${this._announceError ? "alert" : nothing}>
                 <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                   <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                 </svg>
@@ -302,6 +313,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OhCheckboxGroup.prototype, "errorMessage", void 0);
+__decorate([
+    state()
+], OhCheckboxGroup.prototype, "_announceError", void 0);
 OhCheckboxGroup = __decorate([
     customElement("oh-checkbox-group")
 ], OhCheckboxGroup);

package/dist/oh-checkbox-group.js.map

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

package/dist/oh-checkbox.d.ts

@@ -24,6 +24,7 @@
  *
  * @element oh-checkbox
  */
+import { type PropertyValues } from "lit";
 import { OhElement } from "./base.js";
 export type CheckboxState = "default" | "hover" | "focus";
 export declare class OhCheckbox extends OhElement {
@@ -40,6 +41,14 @@ export declare class OhCheckbox extends OhElement {
      */
     forceState: CheckboxState;
     private _handleChange;
+    /**
+     * 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;
+    private _errorId;
+    willUpdate(changed: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAyMpB;IAGF,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB;;;OAGG;IAEH,UAAU,EAAE,aAAa,CAAa;IAEtC,OAAO,CAAC,aAAa;IAMrB,MAAM;CAgCP;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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAyMpB;IAGF,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB;;;OAGG;IAEH,UAAU,EAAE,aAAa,CAAa;IAEtC,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAAkE;IAElF,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/oh-checkbox.js

@@ -30,8 +30,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
 let OhCheckbox = class OhCheckbox extends OhElement {
     constructor() {
@@ -47,6 +47,13 @@ let OhCheckbox = class OhCheckbox extends OhElement {
          * Values: 'hover' | 'focus'
          */
         this.forceState = "default";
+        /**
+         * 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.
+         */
+        this._announceError = false;
+        this._errorId = `oh-checkbox-error-${Math.random().toString(36).slice(2, 11)}`;
     }
     static { this.styles = [
         baseStyles,
@@ -92,7 +99,7 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         
         /* Chunky border */
         border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
-        border-radius: var(--oh-radius-sm);
+        border-radius: var(--oh-shape-compact);
         
         /* Offset shadow like primary button */
         background-color: var(--oh-color-surface-base);
@@ -174,9 +181,9 @@ let OhCheckbox = class OhCheckbox extends OhElement {
          ═══════════════════════════════════════════════════════════════ */
 
       .label {
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-lg);
-        line-height: var(--oh-font-line-height-normal);
+        font-family: var(--oh-typography-control-font-family);
+        font-size: var(--oh-typography-control-font-size-md);
+        line-height: var(--oh-typography-body-base-line-height);
         color: var(--oh-color-text-primary);
         user-select: none;
         padding-top: 0; /* Align with checkbox */
@@ -200,8 +207,8 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         display: flex;
         align-items: center;
         gap: var(--oh-spacing-2);
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
+        font-family: var(--oh-typography-body-font-family);
+        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 */
@@ -255,6 +262,11 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         this.checked = target.checked;
         this.emit("oh-change", { checked: this.checked, value: this.value });
     }
+    willUpdate(changed) {
+        if (this.hasUpdated && (changed.has("error") || changed.has("errorMessage"))) {
+            this._announceError = !!(this.error && this.errorMessage);
+        }
+    }
     render() {
         const inputId = this.name || `oh-checkbox-${Math.random().toString(36).substr(2, 9)}`;
         return html `
@@ -268,6 +280,7 @@ let OhCheckbox = class OhCheckbox extends OhElement {
             .value=${this.value}
             .checked=${this.checked}
             aria-invalid=${this.error ? "true" : "false"}
+            aria-describedby=${this.error && this.errorMessage ? this._errorId : nothing}
             @change=${this._handleChange}
           />
           <span class="checkbox-box" part="box"></span>
@@ -275,7 +288,7 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         </label>
         ${this.error && this.errorMessage
             ? html `
-              <div class="error-message" part="error" role="alert">
+              <div id=${this._errorId} class="error-message" part="error" role=${this._announceError ? "alert" : nothing}>
                 <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                   <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                 </svg>
@@ -308,6 +321,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true, attribute: "force-state" })
 ], OhCheckbox.prototype, "forceState", void 0);
+__decorate([
+    state()
+], OhCheckbox.prototype, "_announceError", void 0);
 OhCheckbox = __decorate([
     customElement("oh-checkbox")
 ], OhCheckbox);

package/dist/oh-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;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;AAK3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,SAAS;IAAlC;;QA6ML,YAAO,GAAG,KAAK,CAAC;QAGhB,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAGX,UAAK,GAAG,KAAK,CAAC;QAGd,iBAAY,GAAG,EAAE,CAAC;QAElB;;;WAGG;QAEH,eAAU,GAAkB,SAAS,CAAC;IAwCxC,CAAC;aA1QiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsMF;KACF,AAzMqB,CAyMpB;IA2BM,aAAa,CAAC,KAAY;QAChC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACvE,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAEtF,OAAO,IAAI,CAAA;;8CAE+B,OAAO;;;;iBAIpC,OAAO;mBACL,IAAI,CAAC,IAAI;qBACP,IAAI,CAAC,KAAK;uBACR,IAAI,CAAC,OAAO;2BACR,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;sBAClC,IAAI,CAAC,aAAa;;;6CAGK,IAAI,CAAC,KAAK;;UAE7C,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY;YAC/B,CAAC,CAAC,IAAI,CAAA;;;;;kBAKE,IAAI,CAAC,YAAY;;aAEtB;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AA7DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC7B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACT;AAOlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;8CAC9B;AAnO3B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA2QtB"}
+{"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"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"}

package/dist/oh-container.d.ts

@@ -6,11 +6,11 @@
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. RESPONSIVE MAX-WIDTHS
- *    - sm: 640px (tight, focused content)
- *    - md: 768px (articles, forms)
- *    - lg: 1024px (standard pages)
- *    - xl: 1280px (wide layouts)
+ * 1. RESPONSIVE MAX-WIDTHS (layout.container.*)
+ *    - sm: tight, focused content
+ *    - md: articles, forms
+ *    - lg: standard pages
+ *    - xl: wide layouts
  *    - full: 100% (edge-to-edge)
  *
  * 2. CONSISTENT PADDING

package/dist/oh-container.js

@@ -6,11 +6,11 @@
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. RESPONSIVE MAX-WIDTHS
- *    - sm: 640px (tight, focused content)
- *    - md: 768px (articles, forms)
- *    - lg: 1024px (standard pages)
- *    - xl: 1280px (wide layouts)
+ * 1. RESPONSIVE MAX-WIDTHS (layout.container.*)
+ *    - sm: tight, focused content
+ *    - md: articles, forms
+ *    - lg: standard pages
+ *    - xl: wide layouts
  *    - full: 100% (edge-to-edge)
  *
  * 2. CONSISTENT PADDING
@@ -50,26 +50,26 @@ let OhContainer = class OhContainer extends OhElement {
         width: 100%;
         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"]) {
-        max-width: 640px;
+        max-width: var(--oh-layout-container-sm);
       }
 
       :host([size="md"]) {
-        max-width: 768px;
+        max-width: var(--oh-layout-container-md);
       }
 
       :host([size="lg"]) {
-        max-width: 1024px;
+        max-width: var(--oh-layout-container-lg);
       }
 
       :host([size="xl"]) {
-        max-width: 1280px;
+        max-width: var(--oh-layout-container-xl);
       }
 
       :host([size="full"]) {
@@ -81,15 +81,15 @@ let OhContainer = class OhContainer extends OhElement {
       /* Responsive padding */
       @media (min-width: 640px) {
         :host {
-          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) {
         :host {
-          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);
         }
       }
 

package/dist/oh-drawer.d.ts

@@ -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
@@ -43,7 +43,6 @@ export declare class OhDrawer extends OhElement {
     /** Element that triggered the drawer (for focus return) */
     private _triggerElement;
     private _drawer;
-    private _cleanupFocusTrap?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: Map<string, unknown>): void;
@@ -52,6 +51,12 @@ export declare class OhDrawer extends OhElement {
     private _handleKeydown;
     private _close;
     private _handleBackdropClick;
+    /**
+     * 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).
+     */
+    private _focusEdge;
     /** Public method to open the drawer */
     show(): void;
     /** Public method to close the drawer */

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA+FpB;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,OAAO,CAAC,iBAAiB,CAAC,CAAa;IAEvC,iBAAiB;IAKjB,oBAAoB;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,QAAQ;IAgBhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,oBAAoB;IAI5B,uCAAuC;IACvC,IAAI;IAIJ,wCAAwC;IACxC,IAAI;IAIJ,MAAM;CA+CP;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAmHpB;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;IAoBf,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,oBAAoB;IAI5B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAKlB,uCAAuC;IACvC,IAAI;IAIJ,wCAAwC;IACxC,IAAI;IAIJ,MAAM;CAiDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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: -4px 4px 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.js

@@ -47,9 +47,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 +69,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-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;;;;;;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,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"}