@orange-halo/components 2.2.0 → 3.1.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,12 +92,11 @@ 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: "";
         position: absolute;
-        left: 0;
-        right: 0;
+        inset-inline: 0;
         bottom: 0;
         height: var(--oh-decoration-underline-thickness);
         background: repeating-linear-gradient(
@@ -89,14 +106,14 @@ let OhLink = class OhLink extends OhElement {
           transparent var(--oh-decoration-underline-dash),
           transparent var(--oh-decoration-underline-period)
         );
-        transform-origin: right;
+        transform-origin: calc(50% + 50% * var(--_oh-dir)); /* the end side */
         transform: scaleX(1);
         transition: transform var(--oh-motion-slow) ease;
       }
 
       /* ═══════════════════════════════════════════════════════════════
          INLINE VARIANT
-         Dashed underline shrinks right-to-left on hover
+         Underline shrinks right-to-left on hover
          ═══════════════════════════════════════════════════════════════ */
 
       .link--inline {
@@ -148,7 +165,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 {
@@ -214,8 +231,13 @@ let OhLink = class OhLink extends OhElement {
         transition: transform var(--oh-motion-snappy) ease;
       }
 
+      /* The arrow points along the line: mirrored in RTL */
+      .link__arrow {
+        transform: scaleX(var(--_oh-dir));
+      }
+
       .link--standalone:hover .link__arrow {
-        transform: translateX(3px);
+        transform: translateX(calc(3px * var(--_oh-dir))) scaleX(var(--_oh-dir));
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -227,7 +249,7 @@ let OhLink = class OhLink extends OhElement {
       .link__external {
         width: 1em;
         height: 1em;
-        margin-left: 0.25em;
+        margin-inline-start: 0.25em;
         flex-shrink: 0;
       }
 

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;;QA2SL,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;aApXiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoSF;KACF,AAvSqB,CAuSpB;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;AA1TL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAqXlB"}
+{"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;;QA0SL,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;aAnXiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmSF;KACF,AAtSqB,CAsSpB;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;AAzTL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAoXlB"}

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,11 +20,34 @@
  *    - 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;

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,4BAgPpB;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"}
+{"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 {
@@ -63,7 +86,7 @@ let OhModal = class OhModal extends OhElement {
         inset: 0;
         z-index: 1000;
 
-        /* Warm semi-transparent overlay */
+        /* Overlay: modal.overlay */
         background-color: var(--oh-modal-overlay);
 
         /* Flexbox centering */
@@ -101,22 +124,20 @@ let OhModal = class OhModal extends OhElement {
         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 */
+        /* Offset shadow: elevation.offset.2xl */
         box-shadow: var(--oh-elevation-offset-2xl)
-          var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-overlay);
+          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),
+          transform var(--oh-motion-gentle) var(--oh-motion-ease-emphasized),
           opacity var(--oh-motion-gentle) ease;
       }
 
@@ -184,8 +205,8 @@ let OhModal = class OhModal extends OhElement {
         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),
+          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;
       }
 

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 */

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

@@ -1 +1 @@
-{"version":3,"file":"oh-navbar.d.ts","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA2EpB;IAEF,yCAAyC;IAEzC,aAAa,SAAU;IAGvB,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"oh-navbar.d.ts","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA2EpB;IAEF,yCAAyC;IAEzC,aAAa,SAAU;IAGvB,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/oh-navbar.js

@@ -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
  */
 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;
@@ -40,6 +31,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
+ */
 let OhNavbar = class OhNavbar extends OhElement {
     constructor() {
         super(...arguments);
@@ -85,7 +108,7 @@ let OhNavbar = class OhNavbar extends OhElement {
 
       /* Desktop links - pushed to the right */
       .navbar__links {
-        margin-left: auto;
+        margin-inline-start: auto;
         width: auto; /* Override oh-cluster's width: 100% */
       }
 
@@ -160,7 +183,7 @@ let OhNavbar = class OhNavbar extends OhElement {
 
       <!-- Mobile Navigation Drawer -->
       <oh-drawer
-        position="left"
+        position="start"
         heading=${this.drawerHeading}
         ?open=${this._drawerOpen}
         @oh-close=${this._closeDrawer}

package/dist/oh-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-navbar.js","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QA8EL,yCAAyC;QAEzC,kBAAa,GAAG,MAAM,CAAC;QAGf,gBAAW,GAAG,KAAK,CAAC;IAoD9B,CAAC;aAtIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwEF;KACF,AA3EqB,CA2EpB;IASM,WAAW;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;uBAoBQ,IAAI,CAAC,WAAW;;;;;;;;;;;kBAWrB,IAAI,CAAC,aAAa;gBACpB,IAAI,CAAC,WAAW;oBACZ,IAAI,CAAC,YAAY;;;;;;KAMhC,CAAC;IACJ,CAAC;;AAtDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACjC;AAGf;IADP,KAAK,EAAE;6CACoB;AAnFjB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuIpB"}
+{"version":3,"file":"oh-navbar.js","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QA8EL,yCAAyC;QAEzC,kBAAa,GAAG,MAAM,CAAC;QAGf,gBAAW,GAAG,KAAK,CAAC;IAoD9B,CAAC;aAtIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwEF;KACF,AA3EqB,CA2EpB;IASM,WAAW;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;uBAoBQ,IAAI,CAAC,WAAW;;;;;;;;;;;kBAWrB,IAAI,CAAC,aAAa;gBACpB,IAAI,CAAC,WAAW;oBACZ,IAAI,CAAC,YAAY;;;;;;KAMhC,CAAC;IACJ,CAAC;;AAtDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACjC;AAGf;IADP,KAAK,EAAE;6CACoB;AAnFjB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuIpB"}

package/dist/oh-progress.d.ts

@@ -9,23 +9,42 @@
  * 1. FULLY ACCESSIBLE
  *    - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
  *    - aria-label for screen reader context
- *    - Percentage announced to screen readers
+ *    - The visible percentage is aria-hidden; screen readers get the value
+ *      from the progressbar's aria-value* attributes
  *
  * 2. VISUAL + NUMERIC
  *    - Bar shows progress visually
  *    - Percentage text for precise feedback
  *    - Text can be hidden if needed
  *
- * 3. ORANGE HALO STYLING
- *    - Chunky track with soft corners
- *    - Warm fill colors
- *    - Gentle animation on value change
- *
- * @element oh-progress
+ * 3. LOOK FROM TOKENS
+ *    - Track: color.surface.inset, stroke.control, shape.pill and
+ *      progress.track.insetShadow; fill: the variant's role colour
+ *    - Inverse uses progress.inverse.*, one fill for every variant, so the
+ *      fill keeps 3:1 against the track (a pair in contrast-pairs.json)
+ *    - Width change animates over motion.relaxed, off under reduced motion
  */
 import { OhElement } from "./base.js";
 export type ProgressVariant = "brand" | "success" | "info" | "warning" | "error";
 export type ProgressSize = "sm" | "md" | "lg";
+/**
+ * A bar that shows how much of a task is done, with an optional percentage and visible label.
+ *
+ * **Use it for** a task with a known end: an upload, a download, steps completed. **Don't use it for** a wait of unknown length (it has no indeterminate state); or for a measurement that isn't progress, like storage used against a quota (a meter).
+ *
+ * **Variants:** `brand` (default), and `success`, `info`, `warning`, `error` by their feedback role. **Sizes:** `sm`, `md` (default), `lg` set the track height and the value's text size. **`inverse`:** for use on a brand-coloured or dark background.
+ *
+ * **Behaviour:** `value` runs from 0 to `max` (default 100) and is clamped to that range; the bar and the percentage show `value / max`, rounded. `show-value` (on by default) shows the percentage; `show-label` shows `label` above the bar. The fill's width animates when the value changes, except under `prefers-reduced-motion`.
+ *
+ * **Accessibility:** the bar is a `progressbar` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-label` from `label` (default "Progress"). Always set `label` to say what is progressing. The visible percentage is `aria-hidden`, since screen readers read the value from the progressbar.
+ *
+ * **Look:** set by tokens. The track uses `color.surface.inset`, a `stroke.control` border in `color.border.default`, `shape.pill` corners and an inset `elevation.offset.sm` shadow in `progress.track.insetShadow`. The fill is `color.brand.primary` or `color.feedback.<variant>`. Text uses `color.text.primary` and `typography.body.*`. Inverse uses `progress.inverse.trackBackground`, `progress.inverse.trackBorder`, `progress.inverse.fill` and `color.text.onBrand`. Motion uses `motion.relaxed` and `motion.easeGentle`.
+ *
+ * @element oh-progress
+ * @csspart track - The bar's track.
+ * @csspart fill - The filled part of the track.
+ * @csspart value - The percentage text.
+ */
 export declare class OhProgress extends OhElement {
     static styles: import("lit").CSSResult[];
     /** Current progress value (0-100 by default, or 0-max) */

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

@@ -1 +1 @@
-{"version":3,"file":"oh-progress.d.ts","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAgKpB;IAEF,0DAA0D;IAE1D,KAAK,SAAK;IAEV,kCAAkC;IAElC,GAAG,SAAO;IAEV,+DAA+D;IAE/D,KAAK,SAAc;IAEnB,sDAAsD;IAEtD,SAAS,UAAS;IAElB,4CAA4C;IAE5C,SAAS,UAAQ;IAEjB,mBAAmB;IAEnB,IAAI,EAAE,YAAY,CAAQ;IAE1B,oBAAoB;IAEpB,OAAO,EAAE,eAAe,CAAW;IAEnC,0CAA0C;IAE1C,OAAO,UAAS;IAEhB,2CAA2C;IAC3C,OAAO,KAAK,UAAU,GAGrB;IAED,MAAM;CAwCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"oh-progress.d.ts","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAgKpB;IAEF,0DAA0D;IAE1D,KAAK,SAAK;IAEV,kCAAkC;IAElC,GAAG,SAAO;IAEV,+DAA+D;IAE/D,KAAK,SAAc;IAEnB,sDAAsD;IAEtD,SAAS,UAAS;IAElB,4CAA4C;IAE5C,SAAS,UAAQ;IAEjB,mBAAmB;IAEnB,IAAI,EAAE,YAAY,CAAQ;IAE1B,oBAAoB;IAEpB,OAAO,EAAE,eAAe,CAAW;IAEnC,0CAA0C;IAE1C,OAAO,UAAS;IAEhB,2CAA2C;IAC3C,OAAO,KAAK,UAAU,GAGrB;IAED,MAAM;CAwCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}