@orange-halo/components 2.2.0 → 3.0.0

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,4BAqMpB;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,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,UAAU,CAAC,OAAO,EAAE,cAAc;IASlC,MAAM;CA4EP;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"}

package/dist/oh-radio-group.js

@@ -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
  */
 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;
@@ -23,6 +23,44 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * 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 }
+ */
 let OhRadioGroup = class OhRadioGroup extends OhElement {
     constructor() {
         super(...arguments);
@@ -31,8 +69,11 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
         this.options = [];
         this.value = "";
         this.required = false;
-        this.error = false;
-        this.errorMessage = "";
+        /**
+         * Error shown with the control and linked to it. Setting it puts the
+         * control in its error state; clear it to leave that state.
+         */
+        this.errorText = "";
         this._labelId = `radio-group-label-${Math.random().toString(36).substr(2, 9)}`;
         this._focusedValue = null;
         /**
@@ -106,10 +147,10 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
         border-radius: var(--oh-shape-pill);
         background-color: var(--oh-color-surface-base);
         box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
-          0 0 var(--oh-shadow-secondary);
+          0 0 var(--oh-elevation-color-secondary);
         transition:
-          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
-          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
+          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
           background-color var(--oh-motion-quick) ease,
           border-color var(--oh-motion-quick) ease;
       }
@@ -125,7 +166,7 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
         border-radius: var(--oh-shape-pill);
         transform: translate(-50%, -50%) scale(0);
         transition: transform var(--oh-motion-snappy)
-          var(--oh-motion-ease-playful);
+          var(--oh-motion-ease-emphasized);
       }
 
       .option-label {
@@ -140,27 +181,27 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
          STATES
          ═══════════════════════════════════════════════════════════════ */
 
-      /* Hover: lift up-left, shadow grows */
+      /* Hover: moves by lift.hoverSm; shadow offset elevation.offset.lg */
       .radio-option:hover .radio-circle {
         border-color: var(--oh-color-border-hover);
         transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
         box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
-          0 0 var(--oh-shadow-secondary);
+          0 0 var(--oh-elevation-color-secondary);
       }
 
-      /* Active: press down-right, shadow shrinks */
+      /* Active: moves by lift.pressSm; shadow offset elevation.offset.xs */
       .radio-option:active .radio-circle {
         transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
         box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
-          0 0 var(--oh-shadow-secondary);
+          0 0 var(--oh-elevation-color-secondary);
       }
 
-      /* Checked: primary color with warm shadow */
+      /* Checked: color.brand.primary fill, elevation.color.primary shadow */
       .native-radio:checked + .radio-circle {
         background-color: var(--oh-color-brand-primary);
         border-color: var(--oh-color-brand-primary);
         box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
-          0 0 var(--oh-shadow-primary);
+          0 0 var(--oh-elevation-color-primary);
       }
 
       .native-radio:checked + .radio-circle::after {
@@ -173,7 +214,7 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
         border-color: var(--oh-color-brand-primary-hover);
         transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
         box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
-          0 0 var(--oh-shadow-primary);
+          0 0 var(--oh-elevation-color-primary);
       }
 
       /* Checked + Active */
@@ -181,7 +222,7 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
         background-color: var(--oh-color-brand-primary-active);
         transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
         box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
-          0 0 var(--oh-shadow-primary);
+          0 0 var(--oh-elevation-color-primary);
       }
 
       /* Focus: underline the label (accessible indicator) */
@@ -200,16 +241,16 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
          ERROR STATE
          ═══════════════════════════════════════════════════════════════ */
 
-      :host([error]) .radio-circle {
+      :host([data-invalid]) .radio-circle {
         border-color: var(--oh-color-feedback-error);
         box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
-          0 0 var(--oh-shadow-error);
+          0 0 var(--oh-elevation-color-error);
       }
 
-      :host([error]) .radio-option:hover .radio-circle {
+      :host([data-invalid]) .radio-option:hover .radio-circle {
         border-color: var(--oh-color-feedback-error-hover);
         box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
-          0 0 var(--oh-shadow-error);
+          0 0 var(--oh-elevation-color-error);
       }
 
       .error-message {
@@ -251,10 +292,14 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
     _handleBlur() {
         this._focusedValue = null;
     }
+    updated(changed) {
+        // Styling hook for the error state (data-invalid on the host)
+        if (changed.has("errorText"))
+            this.toggleAttribute("data-invalid", !!this.errorText);
+    }
     willUpdate(changed) {
-        if (this.hasUpdated &&
-            (changed.has("error") || changed.has("errorMessage"))) {
-            this._announceError = !!(this.error && this.errorMessage);
+        if (this.hasUpdated && changed.has("errorText")) {
+            this._announceError = !!this.errorText;
         }
     }
     render() {
@@ -272,7 +317,7 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
               </span>
             `
             : nothing}
-        ${this.error && this.errorMessage
+        ${this.errorText
             ? html `
               <div
                 id="error-msg"
@@ -291,7 +336,7 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
                     clip-rule="evenodd"
                   />
                 </svg>
-                ${this.errorMessage}
+                ${this.errorText}
               </div>
             `
             : nothing}
@@ -301,10 +346,8 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
           role="radiogroup"
           aria-labelledby=${this.label ? this._labelId : nothing}
           aria-required=${this.required ? "true" : nothing}
-          aria-invalid=${this.error ? "true" : nothing}
-          aria-describedby=${this.error && this.errorMessage
-            ? "error-msg"
-            : nothing}
+          aria-invalid=${this.errorText ? "true" : nothing}
+          aria-describedby=${this.errorText ? "error-msg" : nothing}
         >
           ${this.options.map((option) => html `
               <label class="radio-option">
@@ -348,11 +391,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], OhRadioGroup.prototype, "required", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], OhRadioGroup.prototype, "error", void 0);
-__decorate([
-    property({ type: String })
-], OhRadioGroup.prototype, "errorMessage", void 0);
+    property({ type: String, attribute: "error-text" })
+], OhRadioGroup.prototype, "errorText", void 0);
 __decorate([
     state()
 ], OhRadioGroup.prototype, "_labelId", void 0);

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

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

package/dist/oh-radio.d.ts

@@ -1,40 +1,77 @@
 /**
  * oh-radio
  *
- * A chunky, playful radio button with hand-crafted feel.
- * Matches the inset/pressed aesthetic of oh-input.
- *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY & TACTILE
- *    - Thick border (stroke.control)
- *    - Inset shadow when unchecked (pressed into page)
- *    - Fully circular (radio = circle)
+ * 1. LOOK FROM TOKENS
+ *    - Border: stroke.control in color.border.emphasis
+ *    - Circular: shape.pill
+ *    - Shadow: offset by elevation.offset.* in elevation.color.secondary; hover and
+ *      press move the circle by lift.hoverSm / lift.pressSm
  *
  * 2. CHECKED STATE
- *    - Filled dot in center
- *    - Primary color ring
- *    - Shadow shifts to feel "activated"
+ *    - Filled with color.brand.primary, a centre dot in color.text.onBrand,
+ *      and the shadow in elevation.color.primary
  *
  * 3. ACCESSIBILITY
- *    - Native radio hidden but accessible
+ *    - A native radio, visually hidden but focusable and announced
  *    - Label always required
- *    - Focus ring matches input
- *    - Works in radio groups via name attribute
- *
- * @element oh-radio
+ *    - Focus underlines the label (a solid indicator)
+ *    - Two oh-radios with the same name don't form a group (each native
+ *      radio is in its own shadow root): use oh-radio-group for a set
  */
 import { type PropertyValues } from "lit";
 import { OhElement } from "./base.js";
 export type RadioState = "default" | "hover" | "focus";
+/**
+ * A single radio button with its label.
+ *
+ * **Use it for** a one-off radio you manage yourself. **For a set of
+ * choices, use `oh-radio-group`.** Each `oh-radio` keeps its native radio
+ * inside its own shadow root, so two of them with the same `name` don't form
+ * a group: checking one doesn't uncheck the other, and arrow keys don't move
+ * between them. `oh-radio-group` renders the whole set in one place, with
+ * arrow-key navigation and one label for the group. For an independent
+ * on/off choice use `oh-checkbox`.
+ *
+ * **States:** unchecked, checked, hover, active, focus, error (set `error-text`).
+ *
+ * **Behaviour:** clicking the circle or label checks it. Checking sets
+ * `checked` and fires `oh-change`. The native radio sits in the shadow
+ * root, so it doesn't submit with a native form.
+ *
+ * **Accessibility:** a real native radio, visually hidden, carries the role
+ * and state; the drawn circle is decoration. Always set `label`: it's the
+ * radio's name. Focus underlines the label. The error message shows under
+ * the radio with an icon, sets `aria-invalid` and is linked with
+ * `aria-describedby`; it's announced (`role="alert"`) only when it appears
+ * after first render.
+ *
+ * **Look:** set by tokens — `stroke.control` in `color.border.emphasis`
+ * (border), `shape.pill` (circle), `typography.control.*` (label),
+ * `elevation.offset.*` and `elevation.color.secondary` (shadow), `lift.hoverSm` /
+ * `lift.pressSm` (movement on hover and press), `color.border.hover`
+ * (hover), `color.brand.primary` (and its hover and active tokens),
+ * `color.text.onBrand` and `elevation.color.primary` (checked),
+ * `color.feedback.error` and `elevation.color.error` (error).
+ *
+ * @element oh-radio
+ * @fires oh-change - The radio was checked. detail: { checked, value }
+ * @csspart circle - The drawn radio circle
+ * @csspart label - The label text
+ * @csspart error - The error message
+ */
 export declare class OhRadio extends OhElement {
     static styles: import("lit").CSSResult[];
     checked: boolean;
     label: string;
     name: string;
     value: string;
-    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;
     /**
      * Force a visual state (for documentation/Figma sync only)
      * Values: 'hover' | 'focus'
@@ -48,6 +85,7 @@ export declare class OhRadio extends OhElement {
      */
     private _announceError;
     private _errorId;
+    updated(changed: PropertyValues): void;
     willUpdate(changed: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"oh-radio.d.ts","sourceRoot":"","sources":["../src/oh-radio.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAmNpB;IAGF,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAEnC,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAA+D;IAE/E,UAAU,CAAC,OAAO,EAAE,cAAc;IASlC,MAAM;CAiDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"oh-radio.d.ts","sourceRoot":"","sources":["../src/oh-radio.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA8MpB;IAGF,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,SAAM;IAEf;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAEnC,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAA+D;IAE/E,OAAO,CAAC,OAAO,EAAE,cAAc;IAM/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CA+CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}