@orange-halo/components 2.1.0 → 3.0.0

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,4BA0EpB;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);
@@ -103,7 +126,8 @@ let OhNavbar = class OhNavbar extends OhElement {
 
       .drawer-nav ::slotted(oh-link) {
         padding: var(--oh-spacing-3) 0;
-        border-bottom: var(--oh-stroke-divider) solid var(--oh-color-border-subtle);
+        border-bottom: var(--oh-stroke-divider) solid
+          var(--oh-color-border-subtle);
       }
 
       .drawer-nav ::slotted(oh-link:last-child) {

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;;QA6EL,yCAAyC;QAEzC,kBAAa,GAAG,MAAM,CAAC;QAGf,gBAAW,GAAG,KAAK,CAAC;IAoD9B,CAAC;aArIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;KACF,AA1EqB,CA0EpB;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;AAlFjB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsIpB"}
+{"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,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AACjF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BA8JpB;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"}

package/dist/oh-progress.js

@@ -9,19 +9,20 @@
  * 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
  */
 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;
@@ -32,6 +33,24 @@ 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 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.
+ */
 let OhProgress = class OhProgress extends OhElement {
     constructor() {
         super(...arguments);
@@ -56,8 +75,8 @@ let OhProgress = class OhProgress extends OhElement {
         baseStyles,
         css `
       /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO PROGRESS BAR
-         Accessible • Visual + Numeric • Warm styling
+         PROGRESS BAR
+         Accessible • Visual + Numeric
          ═══════════════════════════════════════════════════════════════ */
 
       :host {
@@ -82,7 +101,9 @@ let OhProgress = class OhProgress extends OhElement {
         border: var(--oh-stroke-control) solid var(--oh-color-border-default);
         border-radius: var(--oh-shape-pill);
         overflow: hidden;
-        box-shadow: inset var(--oh-elevation-offset-sm) var(--oh-elevation-offset-sm) 0 0 var(--oh-progress-track-inset-shadow);
+        box-shadow: inset var(--oh-elevation-offset-sm)
+          var(--oh-elevation-offset-sm) 0 0
+          var(--oh-progress-track-inset-shadow);
       }
 
       /* Size variants for track height */
@@ -193,9 +214,9 @@ let OhProgress = class OhProgress extends OhElement {
         color: var(--oh-color-text-on-brand);
       }
 
-      /* Inverse fill — one solid cream fill for every variant, so the bar
-         keeps 3:1+ contrast against the track on brand/accent backgrounds
-         (the old honey/pastel fills were 1.6–1.9:1). */
+      /* Inverse fill — one progress.inverse.fill for every variant, so the
+         bar keeps 3:1 contrast against the track on brand/accent backgrounds
+         (per-variant fills failed; the pair is in contrast-pairs.json). */
       :host([inverse]) .progress__fill {
         background-color: var(--oh-progress-inverse-fill);
       }
@@ -231,7 +252,7 @@ let OhProgress = class OhProgress extends OhElement {
       ${this.showLabel
             ? html `<div class="progress__label">${this.label}</div>`
             : null}
-      
+
       <div
         class=${classes}
         role="progressbar"

package/dist/oh-progress.js.map

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

package/dist/oh-radio-group.d.ts

@@ -1,18 +1,18 @@
 /**
  * oh-radio-group
  *
- * A radio group with proper ARIA semantics and group-level error handling.
- * Individual radios cannot be used standalone.
+ * A radio group with ARIA group semantics and group-level error handling.
+ * Use it for every set of radios: separate oh-radio elements can't form a
+ * group, because each native radio is in its own shadow root.
  *
- * ACCESSIBILITY:
- * ─────────────
- * - role="radiogroup" with aria-labelledby
- * - Arrow key navigation between options
- * - Group-level error messaging
- * - Visible focus ring (outline, not inset)
- * - aria-required and aria-invalid
- *
- * @element oh-radio-group
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * - role="radiogroup" with aria-labelledby, aria-required and aria-invalid
+ * - Native radios sharing one name in one shadow root, so the browser
+ *   handles arrow-key navigation between options
+ * - One error for the group, after the label and before the options
+ * - Focus underlines the option's label (a solid indicator)
+ * - The drawn circles use the same tokens as oh-radio
  */
 import { type PropertyValues } from "lit";
 import { OhElement } from "./base.js";
@@ -20,6 +20,44 @@ export interface RadioOption {
     label: string;
     value: string;
 }
+/**
+ * A set of radio buttons under one label, where exactly one can be chosen.
+ *
+ * **Use it for** one choice from a few options that should all be visible,
+ * such as a plan or a delivery speed. **Don't use it for** a long list (use
+ * `oh-select`), several choices (use `oh-checkbox-group`) or an on/off
+ * setting (use `oh-toggle` or `oh-checkbox`). Use it rather than separate
+ * `oh-radio` elements, which can't form a group.
+ *
+ * **Parts:** a `label` for the group and a list of `options`
+ * (`{ label, value }`). `value` is the chosen option's value. **States:**
+ * each option unchecked, checked, hover, active and focus; the group can be
+ * `required` and in error (set `error-text`).
+ *
+ * **Behaviour:** Tab moves into and out of the group; arrow keys move
+ * between options and choose them (the browser's native radio behaviour).
+ * Each change sets `value` and fires `oh-change`. The native radios sit in
+ * the shadow root, so they don't submit with a native form: read `value` or
+ * listen for `oh-change`. `required` sets `aria-required` and a marker on
+ * the label but doesn't validate; set the error yourself.
+ *
+ * **Accessibility:** `role="radiogroup"` labelled by `label`, so always set
+ * one. The error shows after the label and before the options, with an
+ * icon; the group gets `aria-invalid` and `aria-describedby`, and the error
+ * is announced (`role="alert"`) only when it appears after first render.
+ * Focus underlines the option's label.
+ *
+ * **Look:** set by tokens — the same as `oh-radio`: `stroke.control` in
+ * `color.border.emphasis` (border), `shape.pill` (circle),
+ * `elevation.offset.*` with `elevation.color.secondary` / `elevation.color.primary` (shadow),
+ * `lift.hoverSm` / `lift.pressSm` (movement on hover and press),
+ * `color.brand.primary` and `color.text.onBrand` (checked),
+ * `color.feedback.error` and `elevation.color.error` (error); `typography.control.*`
+ * for the group label and option labels.
+ *
+ * @element oh-radio-group
+ * @fires oh-change - An option was chosen. detail: { value }
+ */
 export declare class OhRadioGroup extends OhElement {
     static styles: import("lit").CSSResult[];
     label: string;
@@ -27,8 +65,11 @@ export declare class OhRadioGroup extends OhElement {
     options: RadioOption[];
     value: string;
     required: boolean;
-    error: boolean;
-    errorMessage: string;
+    /**
+     * Error shown with the control and linked to it. Setting it puts the
+     * control in its error state; clear it to leave that state.
+     */
+    errorText: string;
     private _labelId;
     private _focusedValue;
     private _handleChange;
@@ -40,6 +81,7 @@ export declare class OhRadioGroup extends OhElement {
      * aria-describedby, so they aren't read out unprompted.
      */
     private _announceError;
+    updated(changed: PropertyValues): void;
     willUpdate(changed: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/oh-radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-radio-group.d.ts","sourceRoot":"","sources":["../src/oh-radio-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,4BA4LpB;IAGF,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,OAAO,EAAE,WAAW,EAAE,CAAM;IAG5B,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAGlB,OAAO,CAAC,QAAQ,CAAkE;IAGlF,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAuDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"oh-radio-group.d.ts","sourceRoot":"","sources":["../src/oh-radio-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,4BAqMpB;IAGF,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,OAAO,EAAE,WAAW,EAAE,CAAM;IAG5B,KAAK,SAAM;IAGX,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,SAAS,SAAM;IAGf,OAAO,CAAC,QAAQ,CACiD;IAGjE,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,OAAO,EAAE,cAAc;IAM/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CA0EP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/oh-radio-group.figma.js

@@ -8,13 +8,13 @@ figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=
     props: {
         label: figma.string("Label"),
         required: figma.boolean("Required"),
-        error: figma.boolean("Error"),
+        errorText: figma.string("Error Message"),
     },
     example: (props) => html `
       <oh-radio-group
         label="${props.label}"
         ?required="${props.required}"
-        ?error="${props.error}"
+        error-text="${props.errorText}"
         .options="\${options}"
       ></oh-radio-group>
     `,

package/dist/oh-radio-group.figma.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-radio-group.figma.js","sourceRoot":"","sources":["../src/oh-radio-group.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;GAIG;AAEH,KAAK,CAAC,OAAO,CACX,wEAAwE,EACxE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;KAC9B;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;qBACP,KAAK,CAAC,QAAQ;kBACjB,KAAK,CAAC,KAAK;;;KAGxB;CACF,CACF,CAAC"}
+{"version":3,"file":"oh-radio-group.figma.js","sourceRoot":"","sources":["../src/oh-radio-group.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;GAIG;AAEH,KAAK,CAAC,OAAO,CACX,wEAAwE,EACxE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;KACzC;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;qBACP,KAAK,CAAC,QAAQ;sBACb,KAAK,CAAC,SAAS;;;KAGhC;CACF,CACF,CAAC"}