@orange-halo/components 2.2.0 → 3.0.0

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;IAaxD,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%;

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;IAkBjE,CAAC;aA5HiB,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,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;AA3GpD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA6HlB"}
+{"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,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"}
+{"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);

package/dist/oh-icon.js.map

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

package/dist/oh-input.d.ts

@@ -1,41 +1,113 @@
 /**
  * oh-input
  *
- * A chunky, inset input field that feels pressed into the page.
- * On focus, it rises to meet you.
- *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY & CONFIDENT
- *    - Thick border (stroke.control) that feels illustrative
- *    - Solid fill, no subtle gradients
- *    - shape.control corners (matches button)
- *
- * 2. INSET SHADOW (PRESSED IN)
- *    - Shadow offset to top-left (inset)
- *    - Feels pressed into the surface
- *    - Opposite of button's outset sticker effect
+ * 1. LOOK FROM TOKENS
+ *    - Border: input.base.borderWidth (stroke.control) in color.border.emphasis
+ *    - Corners: shape.control (same as oh-button)
+ *    - Shadow: an inset shadow offset by elevation.offset.md in elevation.color.field
  *
- * 3. FOCUS THICKENS
- *    - An inset ring in focus.ringColor thickens the border inward
+ * 2. FOCUS IS A SOLID RING
+ *    - An inset ring in focus.ringColor inside the border, so focus doesn't
+ *      shift the layout
  *    - Background switches to color.surface.highlight
- *    - Clear visual hierarchy
  *
- * @element oh-input
+ * 3. A REAL FORM CONTROL
+ *    - Form-associated, like oh-textarea: its value submits with the form
+ *      under its name and shows in form.elements, `required` blocks
+ *      submission, a form reset restores the starting value, and a
+ *      disabled <fieldset> disables it
+ *
+ * 4. SUGGESTIONS ARE NATIVE
+ *    - `suggestions` renders a <datalist> inside the component (a list
+ *      outside it can't reach an input in the shadow root). The browser
+ *      draws the list and handles the keyboard and screen readers, so
+ *      people can still type anything: it suggests, it doesn't restrict
+ *
+ * 5. ERRORS BEFORE THE FIELD
+ *    - Error text sits after the label and before the field, with an icon,
+ *      so it's read before the field is reached. Helper text sits after
  */
 import { type PropertyValues } from "lit";
 import { OhElement } from "./base.js";
 export type InputType = "text" | "email" | "password" | "search" | "tel" | "url";
 export type InputState = "default" | "hover" | "focus";
+/**
+ * A single-line text field that submits with a native form, with optional
+ * typing suggestions.
+ *
+ * **Use it for** short free text: names, email addresses, search terms.
+ * **Don't use it for** several lines (use `oh-textarea`) or a choice from a
+ * fixed list (use `oh-select`, or `oh-radio-group` for a few options).
+ * `suggestions` offers values while still allowing any text.
+ *
+ * **Types:** `text` (default), `email`, `password`, `search`, `tel`, `url`.
+ * One size. **States:** rest, hover, focus, error (set `error-text`),
+ * disabled, required.
+ *
+ * **Behaviour:** form-associated: the value submits under `name`, `required`
+ * blocks submission (validity comes from the inner `<input>`), a form reset
+ * restores the starting value, and a disabled `<fieldset>` disables it.
+ * Fires `oh-input` as the text changes and `oh-change` when it's committed.
+ * `suggestions` renders a native `<datalist>`, so the browser handles its
+ * keyboard and screen reader support. `autocomplete` is passed to the inner
+ * `<input>`.
+ *
+ * **Accessibility:** always set `label`: it's the field's name. The error
+ * shows after the label and before the field, with an icon, and is linked
+ * with `aria-describedby` and `aria-invalid`; it's announced (`role="alert"`)
+ * only when it appears after first render. Helper text is linked the same
+ * way (it's hidden while an error shows). Focus is a solid inset ring.
+ * Set `autocomplete` for personal data (WCAG 1.3.5).
+ *
+ * **Look:** set by tokens — `input.base.borderWidth` (`stroke.control`) in
+ * `color.border.emphasis` (border), `shape.control` (corners),
+ * `typography.control.*` (type), `input.size.md.minHeight` (height),
+ * `elevation.offset.md` and `elevation.color.field` (inset shadow),
+ * `color.border.hover` (hover), `focus.ringColor` and
+ * `color.surface.highlight` (focus), `color.feedback.error`,
+ * `color.feedback.errorSubtle` and `elevation.color.error` (error),
+ * `color.surface.disabled`, `color.border.disabled` and
+ * `color.text.disabled` (disabled).
+ *
+ * @element oh-input
+ * @fires oh-input - Whenever the text changes: typing, or picking a suggestion. detail: { value, originalEvent }
+ * @fires oh-change - When the value is committed (on blur or Enter). detail: { value, originalEvent }
+ * @csspart label - The visible label
+ * @csspart input - The text field
+ * @csspart helper - The helper text, and the error message (which also has the error part)
+ * @csspart error - The error message
+ */
 export declare class OhInput extends OhElement {
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult[];
+    /** The kind of text: text, email, password, search, tel or url */
     type: InputType;
+    /** The text in the field */
     value: string;
+    /** Example text shown while the field is empty. Not a replacement for the label */
     placeholder: string;
+    /** The visible label. Always set one: it names the field */
     label: string;
+    /** Help shown under the field and linked to it */
     helperText: string;
+    /** Error shown before the field and linked to it. Setting it puts the field in its error state */
     errorText: string;
+    /** The name the value is submitted under */
+    name: string;
+    /** Must be filled in before the form submits */
     required: boolean;
+    /** Not editable, and left out of the form's data */
+    disabled: boolean;
+    /**
+     * Values offered while typing, shown by the browser as a list under the
+     * field. They suggest, they don't restrict: any text is still allowed.
+     * Set it as a property (an array of strings) or, in HTML, as a JSON array:
+     * suggestions='["Option one","Option two"]'. Browsers also offer the
+     * field's autofill history, so set autocomplete="off" to show only these.
+     */
+    suggestions: string[];
     /**
      * The input's purpose, for autofill and assistive tech (WCAG 1.3.5):
      * an HTML autocomplete token such as "email", "name" or "tel".
@@ -48,17 +120,29 @@ export declare class OhInput extends OhElement {
      */
     forceState: InputState;
     private _input;
-    private _handleInput;
-    private _handleChange;
-    focus(): void;
-    blur(): void;
+    private _internals;
+    /** The starting value, restored when the form resets */
+    private _defaultValue;
+    /** Set when a disabled <fieldset> around it disables it */
+    private _formDisabled;
     /**
      * Errors that appear after first render (e.g. on submit) are announced via
      * role="alert". Errors present on page load are only linked with
      * aria-describedby, so they aren't read out unprompted.
      */
     private _announceError;
+    connectedCallback(): void;
+    /** The form this field belongs to */
+    get form(): HTMLFormElement | null;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    private _handleInput;
+    private _handleChange;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AACV,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAuKpB;IAGF,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,UAAU,SAAM;IAGhB,SAAS,SAAM;IAGf,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAGnC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIrB,KAAK;IAIL,IAAI;IAIJ;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAqEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AACV,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAiLpB;IAEF,kEAAkE;IAElE,IAAI,EAAE,SAAS,CAAU;IAEzB,4BAA4B;IAE5B,KAAK,SAAM;IAEX,mFAAmF;IAEnF,WAAW,SAAM;IAEjB,4DAA4D;IAE5D,KAAK,SAAM;IAEX,kDAAkD;IAElD,UAAU,SAAM;IAEhB,kGAAkG;IAElG,SAAS,SAAM;IAEf,4CAA4C;IAE5C,IAAI,SAAM;IAEV,gDAAgD;IAEhD,QAAQ,UAAS;IAEjB,oDAAoD;IAEpD,QAAQ,UAAS;IAEjB;;;;;;OAMG;IAEH,WAAW,EAAE,MAAM,EAAE,CAAM;IAE3B;;;;OAIG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAGnC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,UAAU,CAA0B;IAE5C,wDAAwD;IACxD,OAAO,CAAC,aAAa,CAAM;IAE3B,2DAA2D;IAE3D,OAAO,CAAC,aAAa,CAAS;IAE9B;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,iBAAiB;IAKjB,qCAAqC;IACrC,IAAI,IAAI,2BAEP;IAED,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,IAAI;IAIJ,iBAAiB;IAIjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAI/D,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAe/B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAIrB,MAAM;CAkFP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/oh-input.figma.js

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

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

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