@orange-halo/components 2.1.0 → 3.0.0

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,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"}
+{"version":3,"file":"oh-drawer.d.ts","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAqHpB;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;IAqBf,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,oBAAoB;IAI5B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAOlB,uCAAuC;IACvC,IAAI;IAIJ,wCAAwC;IACxC,IAAI;IAIJ,MAAM;CA0DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/oh-drawer.js

@@ -7,27 +7,21 @@
  * ─────────────────
  * 1. POSITIONING
  *    - Slides in from left or right
- *    - Full height, configurable width
- *    - Overlays content with warm backdrop
+ *    - Full height, width set by --oh-drawer-width
+ *    - Overlays content with a color.surface.overlay backdrop
  *
- * 2. STYLING
- *    - Chunky border on the edge
- *    - Warm surface background
- *    - Smooth slide animation
+ * 2. LOOK FROM TOKENS
+ *    - Panel: color.surface.base
+ *    - Shadow: elevation.strong (left); an elevation.offset.lg offset in
+ *      color.border.strong (right)
+ *    - Slide: motion.relaxed with motion.easeGentle, off under reduced motion
  *
  * 3. ACCESSIBILITY
  *    - 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
- *
- * @element oh-drawer
- *
- * @slot - Default slot for drawer content
- *
- * @fires oh-close - When the drawer is closed
- *
- * @cssprop --oh-drawer-width - Width of the drawer (default: 280px)
+ *    - inert while closed, and hidden once it has slid away
  */
 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;
@@ -41,6 +35,29 @@ import { OhElement, baseStyles } from "./base.js";
 import { getFocusableElementsDeep } from "@orange-halo/utils";
 import "./oh-button.js";
 import "./oh-icon.js";
+/**
+ * A panel that slides in from the side of the viewport, over the page, for navigation or supplementary content.
+ *
+ * **Use it for** a site's navigation on small screens, filters, or settings that relate to the page behind. **Don't use it for** a decision the user must make before going on (use `oh-modal`); or for content that should always be visible (put it in the page).
+ *
+ * **Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.
+ *
+ * **Positions:** `left` (default) or `right`.
+ *
+ * **Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.
+ *
+ * **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, labelled by `heading`, or "Navigation menu" when there's no heading, so set `heading` for any other use. The Close button's accessible name is "Close menu".
+ *
+ * **Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A left drawer's shadow is `elevation.strong`; a right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.
+ *
+ * @element oh-drawer
+ *
+ * @slot - Default slot for drawer content
+ *
+ * @fires oh-close - When the drawer is closed by the Close button, Escape, the backdrop or `hide()`. Not fired when you set `open` to false yourself.
+ *
+ * @cssprop --oh-drawer-width - Width of the drawer. It never fills the whole viewport width.
+ */
 let OhDrawer = class OhDrawer extends OhElement {
     constructor() {
         super(...arguments);
@@ -66,8 +83,9 @@ let OhDrawer = class OhDrawer extends OhElement {
         z-index: 999;
         opacity: 0;
         visibility: hidden;
-        transition: opacity var(--oh-motion-relaxed) var(--oh-motion-ease-gentle),
-                    visibility var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
+        transition:
+          opacity var(--oh-motion-relaxed) var(--oh-motion-ease-gentle),
+          visibility var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
       }
 
       .drawer-backdrop.is-open {
@@ -117,7 +135,8 @@ let OhDrawer = class OhDrawer extends OhElement {
       /* Right position */
       .drawer--right {
         right: 0;
-        box-shadow: calc(-1 * var(--oh-elevation-offset-lg)) var(--oh-elevation-offset-lg) 0 0 var(--oh-color-border-strong);
+        box-shadow: calc(-1 * var(--oh-elevation-offset-lg))
+          var(--oh-elevation-offset-lg) 0 0 var(--oh-color-border-strong);
         transform: translateX(100%);
       }
 
@@ -246,11 +265,12 @@ let OhDrawer = class OhDrawer extends OhElement {
             "drawer",
             `drawer--${this.position}`,
             this.open ? "is-open" : "",
-        ].filter(Boolean).join(" ");
-        const backdropClasses = [
-            "drawer-backdrop",
-            this.open ? "is-open" : "",
-        ].filter(Boolean).join(" ");
+        ]
+            .filter(Boolean)
+            .join(" ");
+        const backdropClasses = ["drawer-backdrop", this.open ? "is-open" : ""]
+            .filter(Boolean)
+            .join(" ");
         return html `
       <div
         class=${backdropClasses}
@@ -265,7 +285,11 @@ 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>
+        <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>`
@@ -284,7 +308,11 @@ let OhDrawer = class OhDrawer extends OhElement {
         <div class="drawer__content">
           <slot></slot>
         </div>
-        <span class="focus-guard" tabindex="0" @focus=${() => this._focusEdge("first")}></span>
+        <span
+          class="focus-guard"
+          tabindex="0"
+          @focus=${() => this._focusEdge("first")}
+        ></span>
       </div>
     `;
     }

package/dist/oh-drawer.js.map

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

package/dist/oh-footer.d.ts

@@ -1,24 +1,48 @@
 /**
  * oh-footer
  *
- * A footer component with logo, multi-column links, and social icons.
- *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. LAYOUT
- *    - Multi-column grid layout
- *    - Logo and social on left
- *    - Link columns on right
+ *    - A four-column oh-grid inside an oh-container (size lg): the logo,
+ *      copyright and social icons first, then a column per slotted oh-stack
+ *    - At and below `size.breakpoint.md` the first column spans the full width
+ *
+ * 2. LOOK FROM TOKENS
+ *    - `color.accent.default` background, `color.text.onAccent` text; use
+ *      `inverse` links and icons inside it
+ *
+ * 3. CORE, NOT A BRAND PATTERN
+ *    - Every site needs a footer, and its shape (logo, copyright, social,
+ *      link columns) isn't specific to one brand, so it stays in the core
+ */
+import { OhElement } from "./base.js";
+import "./oh-container.js";
+import "./oh-grid.js";
+import "./oh-stack.js";
+import "./oh-cluster.js";
+/**
+ * A site footer with a logo, copyright line, social links and columns of links.
+ *
+ * **Use it for** the footer at the bottom of every page. **Don't use it for**
+ * the main navigation (use `oh-navbar`).
+ *
+ * **Parts:** the `logo` slot; `copyright`, a line of text under the logo;
+ * the `social` slot for `oh-icon` links (with `inverse`); and the default
+ * slot, where each `oh-stack` becomes a column (start it with a heading, then
+ * `oh-link`s with `inverse`).
  *
- * 2. STYLING
- *    - Accent blue background (dark)
- *    - White/inverse text and links
- *    - Generous padding
+ * **Behaviour:** the columns follow `oh-grid`'s four-column steps at the
+ * `size.breakpoint.*` widths; at and below `size.breakpoint.md` the logo
+ * column spans the full width.
  *
- * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
- * it from @orange-halo/brand-orange-halo; importing it from components is
- * deprecated and stops working in components 3.0, when this file moves to
- * the brand package (brand plan phase 8).
+ * **Accessibility:** renders a `<footer>`. Give the logo an accessible name,
+ * each social icon a `label`, and the column headings a level that fits the
+ * page's outline.
+ *
+ * **Look:** set by tokens — `color.accent.default` the background,
+ * `color.text.onAccent` the text, `typography.body.*` the type, `spacing.8`
+ * the vertical padding.
  *
  * @element oh-footer
  *
@@ -26,11 +50,6 @@
  * @slot social - Slot for social media icons
  * @slot - Default slot for link columns (use oh-stack for each column)
  */
-import { OhElement } from "./base.js";
-import "./oh-container.js";
-import "./oh-grid.js";
-import "./oh-stack.js";
-import "./oh-cluster.js";
 export declare class OhFooter extends OhElement {
     static styles: import("lit").CSSResult[];
     /** Copyright text */

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

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

package/dist/oh-footer.js

@@ -1,30 +1,20 @@
 /**
  * oh-footer
  *
- * A footer component with logo, multi-column links, and social icons.
- *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. LAYOUT
- *    - Multi-column grid layout
- *    - Logo and social on left
- *    - Link columns on right
- *
- * 2. STYLING
- *    - Accent blue background (dark)
- *    - White/inverse text and links
- *    - Generous padding
+ *    - A four-column oh-grid inside an oh-container (size lg): the logo,
+ *      copyright and social icons first, then a column per slotted oh-stack
+ *    - At and below `size.breakpoint.md` the first column spans the full width
  *
- * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
- * it from @orange-halo/brand-orange-halo; importing it from components is
- * deprecated and stops working in components 3.0, when this file moves to
- * the brand package (brand plan phase 8).
+ * 2. LOOK FROM TOKENS
+ *    - `color.accent.default` background, `color.text.onAccent` text; use
+ *      `inverse` links and icons inside it
  *
- * @element oh-footer
- *
- * @slot logo - Slot for logo element
- * @slot social - Slot for social media icons
- * @slot - Default slot for link columns (use oh-stack for each column)
+ * 3. CORE, NOT A BRAND PATTERN
+ *    - Every site needs a footer, and its shape (logo, copyright, social,
+ *      link columns) isn't specific to one brand, so it stays in the core
  */
 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;
@@ -39,6 +29,35 @@ import "./oh-container.js";
 import "./oh-grid.js";
 import "./oh-stack.js";
 import "./oh-cluster.js";
+/**
+ * A site footer with a logo, copyright line, social links and columns of links.
+ *
+ * **Use it for** the footer at the bottom of every page. **Don't use it for**
+ * the main navigation (use `oh-navbar`).
+ *
+ * **Parts:** the `logo` slot; `copyright`, a line of text under the logo;
+ * the `social` slot for `oh-icon` links (with `inverse`); and the default
+ * slot, where each `oh-stack` becomes a column (start it with a heading, then
+ * `oh-link`s with `inverse`).
+ *
+ * **Behaviour:** the columns follow `oh-grid`'s four-column steps at the
+ * `size.breakpoint.*` widths; at and below `size.breakpoint.md` the logo
+ * column spans the full width.
+ *
+ * **Accessibility:** renders a `<footer>`. Give the logo an accessible name,
+ * each social icon a `label`, and the column headings a level that fits the
+ * page's outline.
+ *
+ * **Look:** set by tokens — `color.accent.default` the background,
+ * `color.text.onAccent` the text, `typography.body.*` the type, `spacing.8`
+ * the vertical padding.
+ *
+ * @element oh-footer
+ *
+ * @slot logo - Slot for logo element
+ * @slot social - Slot for social media icons
+ * @slot - Default slot for link columns (use oh-stack for each column)
+ */
 let OhFooter = class OhFooter extends OhElement {
     constructor() {
         super(...arguments);

package/dist/oh-footer.js.map

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

package/dist/oh-grid.d.ts

@@ -1,28 +1,41 @@
 /**
  * oh-grid
  *
- * CSS Grid layout with configurable columns.
- * Flexible grid system for cards, galleries, and layouts.
- *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. COLUMN PRESETS
- *    - 1-4 fixed columns
- *    - auto-fit: responsive columns with min-width
- *    - auto-fill: fills available space
- *
- * 2. MIN-WIDTH FOR AUTO COLUMNS
- *    - Configurable minimum column width
- *    - Defaults to 280px for card-friendly layouts
- *
- * 3. GAP SCALE
- *    - Uses design token spacing values
+ *    - 1–4 fixed columns, which step down on narrower viewports at the
+ *      `size.breakpoint.*` widths
+ *    - auto-fit / auto-fill: as many columns as fit, each at least
+ *      `min-width` wide
  *
- * @element oh-grid
+ * 2. GAP SCALE
+ *    - Named steps mapped to `spacing.*` tokens
  */
 import { OhElement } from "./base.js";
 export type GridColumns = "1" | "2" | "3" | "4" | "auto-fit" | "auto-fill";
 export type GridGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * A CSS grid of equal-width columns, fixed or as many as fit.
+ *
+ * **Use it for** cards, galleries and other sets of similar items. **Don't
+ * use it for** a single column (use `oh-stack`) or items of varying width in
+ * a row (use `oh-cluster`).
+ *
+ * **Columns:** `columns` is `1`–`4`, `auto-fit` (default) or `auto-fill`.
+ * Auto columns are at least `min-width` wide (any CSS length); `auto-fit`
+ * stretches the items to fill the row, `auto-fill` keeps empty tracks.
+ * **Gaps:** `gap` is `none`, `xs` (`spacing.1`), `sm` (`spacing.2`), `md`
+ * (default, `spacing.4`), `lg` (`spacing.6`) or `xl` (`spacing.8`).
+ * `align-items` is `start`, `center`, `end` or `stretch` (default).
+ *
+ * **Behaviour:** fixed columns respond to the viewport: up to
+ * `size.breakpoint.sm` they become one column; up to `size.breakpoint.md`,
+ * 3 and 4 become 2; up to `size.breakpoint.lg`, 4 becomes 3.
+ *
+ * @element oh-grid
+ * @slot - The grid items.
+ */
 export declare class OhGrid extends OhElement {
     static styles: import("lit").CSSResult[];
     columns: GridColumns;

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

@@ -1 +1 @@
-{"version":3,"file":"oh-grid.d.ts","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,UAAU,GAAG,WAAW,CAAC;AAC3E,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BA8FpB;IAGF,OAAO,EAAE,WAAW,CAAc;IAGlC,GAAG,EAAE,OAAO,CAAQ;IAGpB,QAAQ,SAAW;IAGnB,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAa;IAEtD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAgBxD,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"oh-grid.d.ts","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,UAAU,GAAG,WAAW,CAAC;AAC3E,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BAyFpB;IAGF,OAAO,EAAE,WAAW,CAAc;IAGlC,GAAG,EAAE,OAAO,CAAQ;IAGpB,QAAQ,SAAW;IAGnB,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAa;IAEtD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAaxD,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/oh-grid.js

@@ -1,24 +1,16 @@
 /**
  * oh-grid
  *
- * CSS Grid layout with configurable columns.
- * Flexible grid system for cards, galleries, and layouts.
- *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. COLUMN PRESETS
- *    - 1-4 fixed columns
- *    - auto-fit: responsive columns with min-width
- *    - auto-fill: fills available space
- *
- * 2. MIN-WIDTH FOR AUTO COLUMNS
- *    - Configurable minimum column width
- *    - Defaults to 280px for card-friendly layouts
- *
- * 3. GAP SCALE
- *    - Uses design token spacing values
+ *    - 1–4 fixed columns, which step down on narrower viewports at the
+ *      `size.breakpoint.*` widths
+ *    - auto-fit / auto-fill: as many columns as fit, each at least
+ *      `min-width` wide
  *
- * @element oh-grid
+ * 2. GAP SCALE
+ *    - Named steps mapped to `spacing.*` tokens
  */
 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;
@@ -29,6 +21,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A CSS grid of equal-width columns, fixed or as many as fit.
+ *
+ * **Use it for** cards, galleries and other sets of similar items. **Don't
+ * use it for** a single column (use `oh-stack`) or items of varying width in
+ * a row (use `oh-cluster`).
+ *
+ * **Columns:** `columns` is `1`–`4`, `auto-fit` (default) or `auto-fill`.
+ * Auto columns are at least `min-width` wide (any CSS length); `auto-fit`
+ * stretches the items to fill the row, `auto-fill` keeps empty tracks.
+ * **Gaps:** `gap` is `none`, `xs` (`spacing.1`), `sm` (`spacing.2`), `md`
+ * (default, `spacing.4`), `lg` (`spacing.6`) or `xl` (`spacing.8`).
+ * `align-items` is `start`, `center`, `end` or `stretch` (default).
+ *
+ * **Behaviour:** fixed columns respond to the viewport: up to
+ * `size.breakpoint.sm` they become one column; up to `size.breakpoint.md`,
+ * 3 and 4 become 2; up to `size.breakpoint.lg`, 4 becomes 3.
+ *
+ * @element oh-grid
+ * @slot - The grid items.
+ */
 let OhGrid = class OhGrid extends OhElement {
     constructor() {
         super(...arguments);
@@ -40,11 +53,6 @@ let OhGrid = class OhGrid extends OhElement {
     static { this.styles = [
         baseStyles,
         css `
-      /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO GRID
-         CSS Grid layout • Responsive columns • Flexible gaps
-         ═══════════════════════════════════════════════════════════════ */
-
       :host {
         display: grid;
         width: 100%;
@@ -135,8 +143,7 @@ let OhGrid = class OhGrid extends OhElement {
     updated(changedProperties) {
         super.updated(changedProperties);
         // Handle auto-fit and auto-fill with dynamic min-width
-        if (changedProperties.has("columns") ||
-            changedProperties.has("minWidth")) {
+        if (changedProperties.has("columns") || changedProperties.has("minWidth")) {
             if (this.columns === "auto-fit" || this.columns === "auto-fill") {
                 this.style.gridTemplateColumns = `repeat(${this.columns}, minmax(${this.minWidth}, 1fr))`;
             }

package/dist/oh-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-grid.js","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;;;;;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;AAM3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAkGL,YAAO,GAAgB,UAAU,CAAC;QAGlC,QAAG,GAAY,IAAI,CAAC;QAGpB,aAAQ,GAAG,OAAO,CAAC;QAGnB,eAAU,GAA2C,SAAS,CAAC;IAqBjE,CAAC;aA/HiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2FF;KACF,AA9FqB,CA8FpB;IAcO,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,uDAAuD;QACvD,IACE,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC;YAChC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EACjC,CAAC;YACD,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;gBAChE,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,UAAU,IAAI,CAAC,OAAO,YAAY,IAAI,CAAC,QAAQ,SAAS,CAAC;YAC5F,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,EAAE,CAAC;YACtC,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA7BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACR;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCACtB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;wCAChC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACL;AA3GpD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgIlB"}
+{"version":3,"file":"oh-grid.js","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;;;;;;;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;AAKlD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QA6FL,YAAO,GAAgB,UAAU,CAAC;QAGlC,QAAG,GAAY,IAAI,CAAC;QAGpB,aAAQ,GAAG,OAAO,CAAC;QAGnB,eAAU,GAA2C,SAAS,CAAC;IAkBjE,CAAC;aAvHiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsFF;KACF,AAzFqB,CAyFpB;IAcO,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,uDAAuD;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC1E,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;gBAChE,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,UAAU,IAAI,CAAC,OAAO,YAAY,IAAI,CAAC,QAAQ,SAAS,CAAC;YAC5F,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,EAAE,CAAC;YACtC,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACR;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCACtB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;wCAChC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACL;AAtGpD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAwHlB"}

package/dist/oh-icon.d.ts

@@ -1,14 +1,15 @@
 /**
  * oh-icon
  *
- * A flexible icon component for the Orange Halo design system.
+ * A flexible icon component for the design system.
  * Can render as a standalone icon or as an interactive link.
  *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. SIZE
- *    - Default size matches line-height (1em)
- *    - Size variants: sm (16px), md (20px), lg (24px), xl (32px)
+ *    - With no size, the icon is 1em, so it follows the text around it
+ *    - Size variants: sm, md, lg, xl (fixed sizes, set in this file; there
+ *      are no icon size tokens yet)
  *
  * 2. LINK MODE
  *    - When `href` is provided, renders as an <a> tag
@@ -19,13 +20,28 @@
  *    - Decorative by default (aria-hidden="true")
  *    - Provide `label` for meaningful icons
  *    - When used as link, label becomes aria-label
- *
- * @element oh-icon
  */
 import { nothing } from "lit";
 import { OhElement } from "./base.js";
 export type IconName = "twitter" | "github" | "linkedin" | "instagram" | "youtube" | "facebook" | "email" | "substack" | "arrow-right" | "arrow-left" | "arrow-up" | "arrow-down" | "chevron-right" | "chevron-left" | "chevron-up" | "chevron-down" | "external-link" | "close" | "plus" | "minus" | "check" | "search" | "menu" | "settings" | "heart" | "sparkle" | "info" | "warning" | "error" | "success";
 export type IconSize = "sm" | "md" | "lg" | "xl";
+/**
+ * An icon from the system's built-in set, shown on its own, with a label, or as an icon-only link.
+ *
+ * **Use it for** an icon next to text, an icon that carries meaning on its own (with `label`), or a compact link such as a social profile (`href` + `label`). **Don't use it for** an icon-only button (use `oh-button` with `icon-only`); or for an image or logo (use `<img>`).
+ *
+ * **Names:** `name` picks the icon: social (`twitter`, `github`, `linkedin`, `instagram`, `youtube`, `facebook`, `email`, `substack`), navigation (`arrow-*`, `chevron-*`, `external-link`), actions (`close`, `plus`, `minus`, `check`, `search`, `menu`, `settings`, `heart`, `sparkle`) and feedback (`info`, `warning`, `error`, `success`). An unknown name renders nothing and logs a warning.
+ *
+ * **Sizes:** with no `size` the icon is 1em and follows the text; `sm`, `md`, `lg`, `xl` set fixed sizes. **`inverse`:** for icons on an accent-coloured or dark background.
+ *
+ * **Behaviour:** the icon takes the current text colour. With `href` it renders as a link, with hover, active and focus-visible states; `target="_blank"` adds `rel="noopener noreferrer"`.
+ *
+ * **Accessibility:** without `label` the icon is decorative (`aria-hidden="true"`). With `label` it's `role="img"` with that name. As a link, `label` is required (it logs a warning without one) and becomes the link's `aria-label`. Focus-visible shows a solid ring in `focus.ringColor` (`color.text.onAccent` when `inverse`).
+ *
+ * **Look:** set by tokens. The icon is `currentColor`; `inverse` sets `color.text.onAccent`. As a link: `shape.compact` corners, hover moves by `lift.hoverMd` with an `elevation.offset.lg` shadow in `color.border.default` (`color.text.onAccent` when `inverse`); motion uses `motion.snappy` and `motion.easeGentle`, off under `prefers-reduced-motion`.
+ *
+ * @element oh-icon
+ */
 export declare class OhIcon extends OhElement {
     static styles: import("lit").CSSResult[];
     name: IconName;

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

@@ -1 +1 @@
-{"version":3,"file":"oh-icon.d.ts","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,QAAQ,GAEhB,SAAS,GACT,QAAQ,GACR,UAAU,GACV,WAAW,GACX,SAAS,GACT,UAAU,GACV,OAAO,GACP,UAAU,GAEV,aAAa,GACb,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,cAAc,GACd,eAAe,GAEf,OAAO,GACP,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,OAAO,GACP,SAAS,GAET,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqIjD,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BA6FpB;IAGF,IAAI,EAAE,QAAQ,CAAU;IAGxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,OAAO,UAAS;IAGhB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,MAAM;CA2CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"oh-icon.d.ts","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,QAAQ,GAEhB,SAAS,GACT,QAAQ,GACR,UAAU,GACV,WAAW,GACX,SAAS,GACT,UAAU,GACV,OAAO,GACP,UAAU,GAEV,aAAa,GACb,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,cAAc,GACd,eAAe,GAEf,OAAO,GACP,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,OAAO,GACP,SAAS,GAET,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqIjD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BA+FpB;IAGF,IAAI,EAAE,QAAQ,CAAU;IAGxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,OAAO,UAAS;IAGhB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,MAAM;CA6CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/oh-icon.js

@@ -1,14 +1,15 @@
 /**
  * oh-icon
  *
- * A flexible icon component for the Orange Halo design system.
+ * A flexible icon component for the design system.
  * Can render as a standalone icon or as an interactive link.
  *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. SIZE
- *    - Default size matches line-height (1em)
- *    - Size variants: sm (16px), md (20px), lg (24px), xl (32px)
+ *    - With no size, the icon is 1em, so it follows the text around it
+ *    - Size variants: sm, md, lg, xl (fixed sizes, set in this file; there
+ *      are no icon size tokens yet)
  *
  * 2. LINK MODE
  *    - When `href` is provided, renders as an <a> tag
@@ -19,8 +20,6 @@
  *    - Decorative by default (aria-hidden="true")
  *    - Provide `label` for meaningful icons
  *    - When used as link, label becomes aria-label
- *
- * @element oh-icon
  */
 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;
@@ -158,6 +157,23 @@ const icons = {
         path: `M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z`,
     },
 };
+/**
+ * An icon from the system's built-in set, shown on its own, with a label, or as an icon-only link.
+ *
+ * **Use it for** an icon next to text, an icon that carries meaning on its own (with `label`), or a compact link such as a social profile (`href` + `label`). **Don't use it for** an icon-only button (use `oh-button` with `icon-only`); or for an image or logo (use `<img>`).
+ *
+ * **Names:** `name` picks the icon: social (`twitter`, `github`, `linkedin`, `instagram`, `youtube`, `facebook`, `email`, `substack`), navigation (`arrow-*`, `chevron-*`, `external-link`), actions (`close`, `plus`, `minus`, `check`, `search`, `menu`, `settings`, `heart`, `sparkle`) and feedback (`info`, `warning`, `error`, `success`). An unknown name renders nothing and logs a warning.
+ *
+ * **Sizes:** with no `size` the icon is 1em and follows the text; `sm`, `md`, `lg`, `xl` set fixed sizes. **`inverse`:** for icons on an accent-coloured or dark background.
+ *
+ * **Behaviour:** the icon takes the current text colour. With `href` it renders as a link, with hover, active and focus-visible states; `target="_blank"` adds `rel="noopener noreferrer"`.
+ *
+ * **Accessibility:** without `label` the icon is decorative (`aria-hidden="true"`). With `label` it's `role="img"` with that name. As a link, `label` is required (it logs a warning without one) and becomes the link's `aria-label`. Focus-visible shows a solid ring in `focus.ringColor` (`color.text.onAccent` when `inverse`).
+ *
+ * **Look:** set by tokens. The icon is `currentColor`; `inverse` sets `color.text.onAccent`. As a link: `shape.compact` corners, hover moves by `lift.hoverMd` with an `elevation.offset.lg` shadow in `color.border.default` (`color.text.onAccent` when `inverse`); motion uses `motion.snappy` and `motion.easeGentle`, off under `prefers-reduced-motion`.
+ *
+ * @element oh-icon
+ */
 let OhIcon = class OhIcon extends OhElement {
     constructor() {
         super(...arguments);
@@ -218,14 +234,15 @@ let OhIcon = class OhIcon extends OhElement {
         border-radius: var(--oh-shape-compact);
         padding: var(--oh-spacing-2);
         margin: calc(-1 * var(--oh-spacing-2));
-        transition: 
+        transition:
           transform var(--oh-motion-snappy) var(--oh-motion-ease-gentle),
           box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-gentle);
       }
 
       .icon-link:hover {
         transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
-        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-color-border-default);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-color-border-default);
       }
 
       .icon-link:active {
@@ -243,7 +260,8 @@ let OhIcon = class OhIcon extends OhElement {
 
       /* Inverse link styles (for dark/colored backgrounds) */
       :host([inverse]) .icon-link:hover {
-        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-color-text-on-accent);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-color-text-on-accent);
       }
 
       :host([inverse]) .icon-link:focus-visible {
@@ -268,7 +286,7 @@ let OhIcon = class OhIcon extends OhElement {
       <svg
         viewBox=${iconData.viewBox}
         fill="currentColor"
-        aria-hidden=${this.href ? "true" : (this.label ? "false" : "true")}
+        aria-hidden=${this.href ? "true" : this.label ? "false" : "true"}
         role=${!this.href && this.label ? "img" : nothing}
         aria-label=${!this.href && this.label ? this.label : nothing}
       >