@orange-halo/components 2.1.0 → 3.0.0

package/dist/oh-link.js

@@ -1,29 +1,18 @@
 /**
  * oh-link
  *
- * A warm, playful link with retro-inspired styling.
- * Two variants: inline (for body text) and standalone (for CTAs).
- *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. INLINE VARIANT
- *    - Dotted underline (quirky, retro feel)
- *    - Becomes solid on hover
- *    - Warm brand orange
- *    - Subtle but distinctive
- *
- * 2. STANDALONE VARIANT
- *    - Bolder presence for CTAs
- *    - Offset shadow on hover (mini sticker effect)
- *    - Lift animation like other components
- *    - Arrow icon option
- *
- * 3. ACCESSIBILITY
- *    - Underline always visible (not color-only)
- *    - Clear focus state
- *    - Proper contrast ratios
- *
- * @element oh-link
+ * 1. Two variants: `inline` for links inside body text, `standalone` for
+ *    links that stand on their own (CTAs, "View all").
+ * 2. The underline is a pseudo-element so it can transition. Its shape comes
+ *    from the `decoration.underline*` tokens; it retracts on hover.
+ * 3. Keyboard focus swaps in a solid underline (`color.brand.primary`,
+ *    `decoration.underlineFocusThickness`) as the indicator; the
+ *    `focus.glowColor` tint behind it is decoration only.
+ * 4. Links are never colour-only: the underline is visible at rest.
+ * 5. `target="_blank"` adds an icon, a visually hidden "(opens in new tab)"
+ *    and `rel="noopener noreferrer"` (unless `rel` is set).
  */
 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;
@@ -34,6 +23,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A text link, for use inside body copy or on its own as a call to action.
+ *
+ * **Use it for** navigating to another page or place. **Don't use it for**
+ * actions that don't navigate (use `oh-button` instead).
+ *
+ * **Variants:** `inline` (default) sits in running text; `standalone` is
+ * larger and bolder for links on their own, and can show a trailing arrow
+ * (`arrow`). `inverse` is for links on accent surfaces.
+ *
+ * **Behaviour:** renders a native `<a>`, so Enter follows it and it takes
+ * focus in tab order. On hover the underline retracts and the arrow nudges
+ * forward. Keyboard focus (`:focus-visible`) shows a solid underline and a
+ * tint; mouse focus doesn't. Transitions are cut short under
+ * `prefers-reduced-motion`. With `target="_blank"` it adds an external icon,
+ * screen-reader text "(opens in new tab)" and `rel="noopener noreferrer"`
+ * when `rel` isn't set; the arrow is not shown on external links.
+ *
+ * **Accessibility:** the underline shows at rest and on focus, so links
+ * don't rely on colour. Write link text that makes sense out of context.
+ *
+ * **Look:** set by tokens — `color.text.link` the colour (`color.text.onAccent`
+ * when `inverse`); `decoration.underlineThickness`, `decoration.underlineDash`
+ * and `decoration.underlinePeriod` the underline; `color.brand.primary`
+ * (`color.text.onAccent` when `inverse`) and
+ * `decoration.underlineFocusThickness` the focus underline; `focus.glowColor`
+ * (`link.inverse.focusBackground` when `inverse`) the focus tint;
+ * `typography.body.fontFamily`, plus `typography.body.lg.fontSize` and
+ * `typography.emphasis.fontWeight` for `standalone`; `motion.slow` and
+ * `motion.snappy` the transitions.
+ *
+ * @element oh-link
+ * @slot - The link text.
+ */
 let OhLink = class OhLink extends OhElement {
     constructor() {
         super(...arguments);
@@ -47,11 +70,6 @@ let OhLink = class OhLink extends OhElement {
     static { this.styles = [
         baseStyles,
         css `
-      /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO LINK
-         Warm • Playful • Retro-inspired
-         ═══════════════════════════════════════════════════════════════ */
-
       :host {
         display: inline;
       }
@@ -74,9 +92,9 @@ let OhLink = class OhLink extends OhElement {
         text-decoration: none;
       }
 
-      /* Dashed underline via pseudo-element (animatable) */
+      /* Underline via pseudo-element (animatable), shaped by decoration tokens */
       .link__text::after {
-        content: '';
+        content: "";
         position: absolute;
         left: 0;
         right: 0;
@@ -96,7 +114,7 @@ let OhLink = class OhLink extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          INLINE VARIANT
-         Dashed underline shrinks right-to-left on hover
+         Underline shrinks right-to-left on hover
          ═══════════════════════════════════════════════════════════════ */
 
       .link--inline {
@@ -148,7 +166,7 @@ let OhLink = class OhLink extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          STANDALONE VARIANT
-         CTA-style with hover lift, dashed underline shrinks on hover
+         CTA-style; underline shrinks on hover
          ═══════════════════════════════════════════════════════════════ */
 
       .link--standalone {
@@ -291,7 +309,9 @@ let OhLink = class OhLink extends OhElement {
         background-color: transparent;
       }
 
-      :host([inverse]) .link--inline:focus:not(:focus-visible) .link__text::after {
+      :host([inverse])
+        .link--inline:focus:not(:focus-visible)
+        .link__text::after {
         background: repeating-linear-gradient(
           to right,
           var(--oh-color-text-on-accent) 0,
@@ -313,7 +333,9 @@ let OhLink = class OhLink extends OhElement {
         background-color: transparent;
       }
 
-      :host([inverse]) .link--standalone:focus:not(:focus-visible) .link__text::after {
+      :host([inverse])
+        .link--standalone:focus:not(:focus-visible)
+        .link__text::after {
         background: repeating-linear-gradient(
           to right,
           var(--oh-color-text-on-accent) 0,
@@ -343,9 +365,7 @@ let OhLink = class OhLink extends OhElement {
             "link--standalone": this.variant === "standalone",
         });
         // Auto-add rel="noopener noreferrer" for external links
-        const computedRel = this.target === "_blank" && !this.rel
-            ? "noopener noreferrer"
-            : this.rel;
+        const computedRel = this.target === "_blank" && !this.rel ? "noopener noreferrer" : this.rel;
         const isExternal = this.target === "_blank";
         return html `
       <a
@@ -355,11 +375,36 @@ let OhLink = class OhLink extends OhElement {
         rel=${computedRel || nothing}
       >
         <span class="link__text"><slot></slot></span>${isExternal
-            ? html `<svg class="link__external" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z" clip-rule="evenodd" /></svg><span class="visually-hidden">(opens in new tab)</span>`
+            ? html `<svg
+                class="link__external"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
+                  clip-rule="evenodd"
+                />
+                <path
+                  fill-rule="evenodd"
+                  d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
+                  clip-rule="evenodd"
+                /></svg
+              ><span class="visually-hidden">(opens in new tab)</span>`
             : nothing}${this.variant === "standalone" && this.arrow && !isExternal
             ? html `
-              <svg class="link__arrow" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              <svg
+                class="link__arrow"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
+                  clip-rule="evenodd"
+                />
               </svg>
             `
             : nothing}

package/dist/oh-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-link.js","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAK3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAuSL,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,EAAE,CAAC;QAGZ,QAAG,GAAG,EAAE,CAAC;QAGT,YAAO,GAAgB,QAAQ,CAAC;QAGhC,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAAG,KAAK,CAAC;IAmClB,CAAC;aAxViB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgSF;KACF,AAnSqB,CAmSpB;IAoBF,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,IAAI;YACV,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACzC,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;SAClD,CAAC,CAAC;QAEH,wDAAwD;QACxD,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG;YACvD,CAAC,CAAC,qBAAqB;YACvB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAEb,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QAE5C,OAAO,IAAI,CAAA;;gBAEC,WAAW;eACZ,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,MAAM,IAAI,OAAO;cACzB,WAAW,IAAI,OAAO;;uDAEmB,UAAU;YACvD,CAAC,CAAC,IAAI,CAAA,8lBAA8lB;YACpmB,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU;YACtE,CAAC,CAAC,IAAI,CAAA;;;;aAIH;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAjDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACK;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AAtTL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAyVlB"}
+{"version":3,"file":"oh-link.js","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAsSL,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,EAAE,CAAC;QAGZ,QAAG,GAAG,EAAE,CAAC;QAGT,YAAO,GAAgB,QAAQ,CAAC;QAGhC,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAAG,KAAK,CAAC;IA2DlB,CAAC;aA/WiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+RF;KACF,AAlSqB,CAkSpB;IAoBF,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,IAAI;YACV,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACzC,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;SAClD,CAAC,CAAC;QAEH,wDAAwD;QACxD,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAE3E,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QAE5C,OAAO,IAAI,CAAA;;gBAEC,WAAW;eACZ,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,MAAM,IAAI,OAAO;cACzB,WAAW,IAAI,OAAO;;uDAEmB,UAAU;YACvD,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;uEAgBuD;YAC7D,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU;YACtE,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;aAaH;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAzED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACK;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AArTL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgXlB"}

package/dist/oh-modal.d.ts

@@ -1,14 +1,14 @@
 /**
  * oh-modal
  *
- * A chunky, accessible modal dialog with focus trapping.
+ * An accessible modal dialog with focus trapping.
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY & LIFTED
+ * 1. LOOK FROM TOKENS
  *    - stroke.control border like other components
- *    - Offset shadow (elevation.offset.2xl) — feels like a lifted surface
- *    - Warm backdrop, not pure black
+ *    - Offset shadow: elevation.offset.2xl in elevation.color.overlay
+ *    - Backdrop: modal.overlay
  *
  * 2. ACCESSIBLE
  *    - Focus trap when open (focus guards at each end of the dialog)
@@ -20,15 +20,44 @@
  *    - Optional heading
  *    - Scrollable body content
  *    - Optional footer slot for actions
- *
- * @element oh-modal
  */
 import { OhElement } from "./base.js";
 export type ModalSize = "sm" | "md" | "lg";
+/**
+ * A dialog that opens over the page and holds the user's attention until they close it or act on it.
+ *
+ * **Use it for** a short task or decision that must be done before going on: a confirmation, a small form. **Don't use it for** content the user may want alongside the page (use `oh-drawer`); for a message that doesn't need an answer (use `oh-alert`); or for long, multi-step flows (use a page).
+ *
+ * **Parts:** `heading` (a visible `h2`); the default slot for the body, which scrolls when it's taller than the viewport; the `footer` slot for actions.
+ *
+ * **Sizes:** `sm`, `md` (default) and `lg` set the dialog's width (never wider than the viewport).
+ *
+ * **Behaviour:** set `open` to show it. On open, focus moves to the Close button (or the first focusable element when there's none), Tab and Shift+Tab wrap inside the dialog, and the page behind stops scrolling. On close, focus returns to the element that had it. With `dismissible` (the default), the Close button, Escape and a click on the backdrop each fire `oh-close` and set `open` to false; without it, only your own buttons close it. Motion is reduced under `prefers-reduced-motion`.
+ *
+ * **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, named by `heading`. Without a visible heading, set `accessible-label` (not `aria-label` on the host, which isn't forwarded). The close button has a visible "Close" label.
+ *
+ * **Look:** set by tokens. `modal.overlay` sets the backdrop; the panel uses `color.surface.base`, a `stroke.control` border in `color.border.emphasis`, `shape.container` corners and an `elevation.offset.2xl` shadow in `elevation.color.overlay`. Header and footer dividers use `stroke.control` in `color.border.subtle`; the title uses `typography.heading.h4.*`, the body `typography.body.*`. The close button uses `closeButton.*`, `lift.*` and `shape.compact`. Motion uses `motion.gentle` and `motion.easeEmphasized`.
+ *
+ * @element oh-modal
+ * @slot - The dialog body.
+ * @slot footer - Actions, below the body.
+ * @csspart modal - The dialog panel.
+ * @csspart header - The header (heading and close button).
+ * @csspart close - The close button (only when `dismissible`).
+ * @csspart body - The scrolling body.
+ * @csspart footer - The footer.
+ * @fires oh-close - When the user closes the dialog with the Close button, Escape or the backdrop. Not fired when you set `open` to false yourself.
+ */
 export declare class OhModal extends OhElement {
     static styles: import("lit").CSSResult[];
     open: boolean;
     heading: string;
+    /**
+     * Names the dialog when it has no visible heading. Use this rather than
+     * aria-label on the host, which isn't forwarded into the shadow root.
+     * A visible heading always wins.
+     */
+    accessibleLabel?: string;
     dismissible: boolean;
     size: ModalSize;
     private _previousActiveElement;

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

@@ -1 +1 @@
-{"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA4OpB;IAGF,IAAI,UAAS;IAGb,OAAO,SAAM;IAGb,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAQ;IAGvB,OAAO,CAAC,sBAAsB,CAA4B;IAI1D,OAAO,CAAC,YAAY,CAAqB;IAEzC,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAwBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,cAAc;IAOtB,4EAA4E;IAC5E,OAAO,CAAC,qBAAqB;IAK7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAKrB,oBAAoB;IAMpB,MAAM;CAgEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA8OpB;IAGF,IAAI,UAAS;IAGb,OAAO,SAAM;IAEb;;;;OAIG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAQ;IAGvB,OAAO,CAAC,sBAAsB,CAA4B;IAG1D,OAAO,CAAC,YAAY,CAAqB;IAEzC,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAyBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,cAAc;IAOtB,4EAA4E;IAC5E,OAAO,CAAC,qBAAqB;IAS7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAKrB,oBAAoB;IAMpB,MAAM;CAqFP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/oh-modal.js

@@ -1,14 +1,14 @@
 /**
  * oh-modal
  *
- * A chunky, accessible modal dialog with focus trapping.
+ * An accessible modal dialog with focus trapping.
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY & LIFTED
+ * 1. LOOK FROM TOKENS
  *    - stroke.control border like other components
- *    - Offset shadow (elevation.offset.2xl) — feels like a lifted surface
- *    - Warm backdrop, not pure black
+ *    - Offset shadow: elevation.offset.2xl in elevation.color.overlay
+ *    - Backdrop: modal.overlay
  *
  * 2. ACCESSIBLE
  *    - Focus trap when open (focus guards at each end of the dialog)
@@ -20,8 +20,6 @@
  *    - Optional heading
  *    - Scrollable body content
  *    - Optional footer slot for actions
- *
- * @element oh-modal
  */
 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,6 +31,31 @@ import { html, css, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
 import { getFocusableElementsDeep } from "@orange-halo/utils";
+/**
+ * A dialog that opens over the page and holds the user's attention until they close it or act on it.
+ *
+ * **Use it for** a short task or decision that must be done before going on: a confirmation, a small form. **Don't use it for** content the user may want alongside the page (use `oh-drawer`); for a message that doesn't need an answer (use `oh-alert`); or for long, multi-step flows (use a page).
+ *
+ * **Parts:** `heading` (a visible `h2`); the default slot for the body, which scrolls when it's taller than the viewport; the `footer` slot for actions.
+ *
+ * **Sizes:** `sm`, `md` (default) and `lg` set the dialog's width (never wider than the viewport).
+ *
+ * **Behaviour:** set `open` to show it. On open, focus moves to the Close button (or the first focusable element when there's none), Tab and Shift+Tab wrap inside the dialog, and the page behind stops scrolling. On close, focus returns to the element that had it. With `dismissible` (the default), the Close button, Escape and a click on the backdrop each fire `oh-close` and set `open` to false; without it, only your own buttons close it. Motion is reduced under `prefers-reduced-motion`.
+ *
+ * **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, named by `heading`. Without a visible heading, set `accessible-label` (not `aria-label` on the host, which isn't forwarded). The close button has a visible "Close" label.
+ *
+ * **Look:** set by tokens. `modal.overlay` sets the backdrop; the panel uses `color.surface.base`, a `stroke.control` border in `color.border.emphasis`, `shape.container` corners and an `elevation.offset.2xl` shadow in `elevation.color.overlay`. Header and footer dividers use `stroke.control` in `color.border.subtle`; the title uses `typography.heading.h4.*`, the body `typography.body.*`. The close button uses `closeButton.*`, `lift.*` and `shape.compact`. Motion uses `motion.gentle` and `motion.easeEmphasized`.
+ *
+ * @element oh-modal
+ * @slot - The dialog body.
+ * @slot footer - Actions, below the body.
+ * @csspart modal - The dialog panel.
+ * @csspart header - The header (heading and close button).
+ * @csspart close - The close button (only when `dismissible`).
+ * @csspart body - The scrolling body.
+ * @csspart footer - The footer.
+ * @fires oh-close - When the user closes the dialog with the Close button, Escape or the backdrop. Not fired when you set `open` to false yourself.
+ */
 let OhModal = class OhModal extends OhElement {
     constructor() {
         super(...arguments);
@@ -46,8 +69,8 @@ let OhModal = class OhModal extends OhElement {
         baseStyles,
         css `
       /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO MODAL
-         Chunky • Lifted • Accessible
+         MODAL
+         Focus-trapped • Accessible
          ═══════════════════════════════════════════════════════════════ */
 
       :host {
@@ -62,16 +85,16 @@ let OhModal = class OhModal extends OhElement {
         position: fixed;
         inset: 0;
         z-index: 1000;
-        
-        /* Warm semi-transparent overlay */
+
+        /* Overlay: modal.overlay */
         background-color: var(--oh-modal-overlay);
-        
+
         /* Flexbox centering */
         display: flex;
         align-items: center;
         justify-content: center;
         padding: var(--oh-spacing-4);
-        
+
         /* Animation. Closing: fade, then hide once the fade ends. */
         opacity: 0;
         visibility: hidden;
@@ -100,22 +123,21 @@ let OhModal = class OhModal extends OhElement {
         flex-direction: column;
         max-height: calc(100vh - var(--oh-spacing-8));
         max-width: 100%;
-        
-        /* Warm surface */
+
         background-color: var(--oh-color-surface-base);
-        
-        /* Chunky border */
+
         border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: var(--oh-shape-container);
-        
-        /* Offset shadow — lifted surface */
-        box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-overlay);
-        
+
+        /* Offset shadow: elevation.offset.2xl */
+        box-shadow: var(--oh-elevation-offset-2xl)
+          var(--oh-elevation-offset-2xl) 0 0 var(--oh-elevation-color-overlay);
+
         /* Animation */
         transform: scale(0.95) translateY(10px);
         opacity: 0;
-        transition: 
-          transform var(--oh-motion-gentle) var(--oh-motion-ease-playful),
+        transition:
+          transform var(--oh-motion-gentle) var(--oh-motion-ease-emphasized),
           opacity var(--oh-motion-gentle) ease;
       }
 
@@ -147,7 +169,8 @@ let OhModal = class OhModal extends OhElement {
         justify-content: space-between;
         gap: var(--oh-spacing-4);
         padding: var(--oh-spacing-4) var(--oh-spacing-5);
-        border-bottom: var(--oh-stroke-control) solid var(--oh-color-border-subtle);
+        border-bottom: var(--oh-stroke-control) solid
+          var(--oh-color-border-subtle);
       }
 
       .modal-title {
@@ -168,34 +191,36 @@ let OhModal = class OhModal extends OhElement {
         display: flex;
         align-items: center;
         gap: var(--oh-spacing-1);
-        
+
         padding: var(--oh-spacing-1) var(--oh-spacing-2);
-        
+
         font-family: var(--oh-typography-body-font-family);
         font-size: var(--oh-typography-body-base-font-size);
         font-weight: var(--oh-typography-label-base-font-weight);
-        
+
         background: transparent;
         border: none;
         border-radius: var(--oh-shape-compact);
         cursor: pointer;
         color: var(--oh-color-text-primary);
-        
-        transition: 
-          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
-          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+
+        transition:
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
+          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
           background-color var(--oh-motion-quick) ease;
       }
 
       .modal-close:hover {
         background-color: var(--oh-close-button-background-hover);
         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-close-button-shadow-hover);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-close-button-shadow-hover);
       }
 
       .modal-close:active {
         transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
-        box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-close-button-shadow-hover);
+        box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
+          0 0 var(--oh-close-button-shadow-hover);
       }
 
       .modal-close:focus-visible {
@@ -217,7 +242,7 @@ let OhModal = class OhModal extends OhElement {
         flex: 1;
         overflow-y: auto;
         padding: var(--oh-spacing-5);
-        
+
         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);
@@ -335,7 +360,9 @@ let OhModal = class OhModal extends OhElement {
     /** Focusable elements in the dialog, in tab order, excluding the guards. */
     _getFocusableElements() {
         const dialog = this.renderRoot.querySelector(".modal");
-        return dialog ? getFocusableElementsDeep(dialog).filter((el) => !el.classList.contains("focus-guard")) : [];
+        return dialog
+            ? getFocusableElementsDeep(dialog).filter((el) => !el.classList.contains("focus-guard"))
+            : [];
     }
     /**
      * Focus guards: Tab past the last control lands on the end guard, which
@@ -387,14 +414,23 @@ let OhModal = class OhModal extends OhElement {
           role="dialog"
           aria-modal="true"
           aria-labelledby=${labelId || nothing}
+          aria-label=${!labelId && this.accessibleLabel
+            ? this.accessibleLabel
+            : nothing}
           part="modal"
         >
-          <span class="focus-guard" tabindex="0" @focus=${() => this._focusEdge("last")}></span>
+          <span
+            class="focus-guard"
+            tabindex="0"
+            @focus=${() => this._focusEdge("last")}
+          ></span>
           ${this.heading || this.dismissible
             ? html `
                 <header class="modal-header" part="header">
                   ${this.heading
-                ? html `<h2 id="modal-title" class="modal-title">${this.heading}</h2>`
+                ? html `<h2 id="modal-title" class="modal-title">
+                        ${this.heading}
+                      </h2>`
                 : html `<span></span>`}
                   ${this.dismissible
                 ? html `
@@ -405,8 +441,16 @@ let OhModal = class OhModal extends OhElement {
                           part="close"
                         >
                           <span>Close</span>
-                          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                          <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                              clip-rule="evenodd"
+                            />
                           </svg>
                         </button>
                       `
@@ -422,7 +466,11 @@ let OhModal = class OhModal extends OhElement {
           <footer class="modal-footer" part="footer">
             <slot name="footer"></slot>
           </footer>
-          <span class="focus-guard" tabindex="0" @focus=${() => this._focusEdge("first")}></span>
+          <span
+            class="focus-guard"
+            tabindex="0"
+            @focus=${() => this._focusEdge("first")}
+          ></span>
         </div>
       </div>
     `;
@@ -434,6 +482,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OhModal.prototype, "heading", void 0);
+__decorate([
+    property({ type: String, attribute: "accessible-label" })
+], OhModal.prototype, "accessibleLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], OhModal.prototype, "dismissible", void 0);

package/dist/oh-modal.js.map

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

package/dist/oh-navbar.d.ts

@@ -1,30 +1,21 @@
 /**
  * oh-navbar
  *
- * A responsive navigation bar component with logo, links, and mobile drawer.
- *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. LAYOUT
- *    - Logo on the left
- *    - Navigation links on the right (desktop)
- *    - Hamburger menu on mobile triggers drawer
- *
- * 2. STYLING
- *    - Surface base background
- *    - Chunky bottom border
- *    - Links use oh-link styling
- *
- * 3. RESPONSIVE
- *    - Desktop: horizontal links
- *    - Mobile (< 768px): hamburger + drawer
- *
- * @element oh-navbar
+ *    - Logo on the left, links pushed to the right, inside an
+ *      oh-container (size lg)
+ *    - At and below `size.breakpoint.md` the links hide and a menu button
+ *      opens an oh-drawer from the left
  *
- * @slot logo - Slot for logo/brand element
- * @slot - Default slot for navigation links
+ * 2. DRAWER LINKS ARE A SEPARATE SLOT
+ *    - The drawer lives outside the bar, so links for it are passed again
+ *      in the `mobile` slot
  *
- * @cssprop --oh-navbar-breakpoint - Mobile breakpoint (default: 768px)
+ * 3. LOOK FROM TOKENS
+ *    - `color.surface.base` background, a shadow in `focus.glowColor`,
+ *      `stroke.divider` / `color.border.subtle` between drawer links
  */
 import { OhElement } from "./base.js";
 import "./oh-container.js";
@@ -32,6 +23,38 @@ import "./oh-cluster.js";
 import "./oh-drawer.js";
 import "./oh-button.js";
 import "./oh-icon.js";
+/**
+ * A site header bar with a logo and the site's main navigation links, which move into a drawer on narrow viewports.
+ *
+ * **Use it for** the main navigation at the top of every page. **Don't use
+ * it for** in-page sections (use `oh-tabs`) or a trail through the hierarchy
+ * (use `oh-breadcrumb`).
+ *
+ * **Parts:** the `logo` slot (a link to the home page), the default slot for
+ * the bar's links (`oh-link`), and the `mobile` slot for the same links in the
+ * drawer. `drawer-heading` names the drawer (defaults to "Menu").
+ *
+ * **Behaviour:** at and below the `size.breakpoint.md` width the links hide
+ * and an icon-only menu button ("Open navigation menu") opens an `oh-drawer`
+ * from the left, which traps focus and closes on Escape or its close button.
+ *
+ * **Accessibility:** the bar and the drawer each wrap their links in a
+ * `<nav>`; the drawer is a modal dialog. Give the logo link an accessible
+ * name (`alt` on its image, or text).
+ *
+ * **Look:** set by tokens — `color.surface.base` the background,
+ * `focus.glowColor` the shadow, `typography.body.*` the text, `spacing.*` the
+ * padding and gaps, `stroke.divider` and `color.border.subtle` the dividers
+ * between drawer links. `--oh-navbar-logo-height` sets the logo height.
+ *
+ * @element oh-navbar
+ *
+ * @slot logo - Slot for logo/brand element
+ * @slot - Default slot for navigation links
+ * @slot mobile - The navigation links again, shown in the drawer
+ *
+ * @cssprop --oh-navbar-logo-height - Height of the slotted logo link or image
+ */
 export declare class OhNavbar extends OhElement {
     static styles: import("lit").CSSResult[];
     /** Heading shown in the mobile drawer */