@orange-halo/components 2.2.0 → 3.0.0

package/dist/oh-checkbox-group.js

@@ -1,17 +1,17 @@
 /**
  * oh-checkbox-group
  *
- * A checkbox group with proper semantics and group-level error handling.
+ * A checkbox group with fieldset semantics and group-level error handling.
  * For single checkboxes, use oh-checkbox directly.
  *
- * ACCESSIBILITY:
- * ─────────────
- * - Uses <fieldset> and <legend> for proper semantics
- * - Group-level error messaging with aria-describedby
- * - Visible focus ring (outline, not inset)
- * - aria-invalid for error state
- *
- * @element oh-checkbox-group
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * - Uses <fieldset> and <legend>, so the legend names the group
+ * - One error for the group, after the legend and before the options,
+ *   linked with aria-describedby; aria-invalid on the fieldset
+ * - Each option is a visually hidden native checkbox; focus underlines its
+ *   label (a solid indicator)
+ * - The drawn boxes use the same tokens as oh-checkbox
  */
 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;
@@ -22,16 +22,59 @@ 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 related checkboxes under one legend, where any number can be
+ * chosen.
+ *
+ * **Use it for** choosing any number of options from a short list, such as
+ * interests or notification types. **Don't use it for** one standalone
+ * yes/no option (use `oh-checkbox`), exactly one choice (use
+ * `oh-radio-group`, or `oh-select` for a long list), or settings that apply
+ * straight away (use `oh-toggle`).
+ *
+ * **Parts:** a `label` (rendered as the fieldset's `<legend>`) and a list of `options` (`{ label, value }`).
+ * `value` is the array of checked option values. **States:** each option
+ * unchecked, checked, hover, active and focus; the group can be `required`
+ * (a marker on the label) and in error (set `error-text`).
+ *
+ * **Behaviour:** Tab moves through the options and Space toggles one. Each
+ * change updates `value` and fires `oh-change` with the new array. The
+ * native checkboxes sit in the shadow root, so they don't submit with a
+ * native form: read `value` or listen for `oh-change`. `required` doesn't
+ * validate; set the error yourself.
+ *
+ * **Accessibility:** a `<fieldset>` with a `<legend>`, so screen readers
+ * read the label with each option. Always set `label`. The error shows
+ * after the legend and before the options, with an icon; the fieldset 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-checkbox`: `stroke.control` in
+ * `color.border.emphasis` (border), `shape.compact` (corners),
+ * `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 legend and labels.
+ *
+ * @element oh-checkbox-group
+ * @fires oh-change - An option was toggled. detail: { value } (the checked values)
+ */
 let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
     constructor() {
         super(...arguments);
-        this.legend = "";
+        /** The group's label, rendered as the fieldset's <legend>. Always set one */
+        this.label = "";
         this.name = "";
         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 = "";
         /**
          * Errors that appear after first render (e.g. on submit) are announced via
          * role="alert". Errors present on page load are only linked with
@@ -112,10 +155,10 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
         border-radius: var(--oh-shape-compact);
         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;
       }
@@ -146,27 +189,27 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
          STATES
          ═══════════════════════════════════════════════════════════════ */
 
-      /* Hover: lift up-left, shadow grows */
+      /* Hover: moves by lift.hoverSm; shadow offset elevation.offset.lg */
       .checkbox-option:hover .checkbox-box {
         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 */
       .checkbox-option:active .checkbox-box {
         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-checkbox:checked + .checkbox-box {
         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-checkbox:checked + .checkbox-box::after {
@@ -179,7 +222,7 @@ let OhCheckboxGroup = class OhCheckboxGroup 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 */
@@ -187,7 +230,7 @@ let OhCheckboxGroup = class OhCheckboxGroup 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 +243,16 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
          ERROR STATE
          ═══════════════════════════════════════════════════════════════ */
 
-      :host([error]) .checkbox-box {
+      :host([data-invalid]) .checkbox-box {
         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]) .checkbox-option:hover .checkbox-box {
+      :host([data-invalid]) .checkbox-option:hover .checkbox-box {
         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 {
@@ -250,28 +293,30 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
         }
         this.emit("oh-change", { value: this.value });
     }
+    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() {
         return html `
       <fieldset
-        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.legend
+        ${this.label
             ? html `
               <legend class="${this.required ? "legend--required" : ""}">
-                ${this.legend}
+                ${this.label}
               </legend>
             `
             : nothing}
-        ${this.error && this.errorMessage
+        ${this.errorText
             ? html `
               <div
                 id="error-msg"
@@ -290,7 +335,7 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
                     clip-rule="evenodd"
                   />
                 </svg>
-                ${this.errorMessage}
+                ${this.errorText}
               </div>
             `
             : nothing}
@@ -317,7 +362,7 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
 };
 __decorate([
     property({ type: String })
-], OhCheckboxGroup.prototype, "legend", void 0);
+], OhCheckboxGroup.prototype, "label", void 0);
 __decorate([
     property({ type: String })
 ], OhCheckboxGroup.prototype, "name", void 0);
@@ -331,11 +376,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], OhCheckboxGroup.prototype, "required", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], OhCheckboxGroup.prototype, "error", void 0);
-__decorate([
-    property({ type: String })
-], OhCheckboxGroup.prototype, "errorMessage", void 0);
+    property({ type: String, attribute: "error-text" })
+], OhCheckboxGroup.prototype, "errorText", void 0);
 __decorate([
     state()
 ], OhCheckboxGroup.prototype, "_announceError", void 0);

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

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

package/dist/oh-checkbox.d.ts

@@ -1,40 +1,76 @@
 /**
  * oh-checkbox
  *
- * A chunky, playful checkbox 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)
- *    - shape.compact corners (smaller than buttons)
+ * 1. LOOK FROM TOKENS
+ *    - Border: stroke.control in color.border.emphasis
+ *    - Corners: shape.compact (smaller than the other controls' shape.control)
+ *    - Shadow: offset by elevation.offset.* in elevation.color.secondary; hover and
+ *      press move the box by lift.hoverSm / lift.pressSm
  *
  * 2. CHECKED STATE
- *    - Filled with primary color
- *    - Custom chunky checkmark
- *    - Shadow shifts to feel "activated"
+ *    - Filled with color.brand.primary, a checkmark in color.text.onBrand,
+ *      and the shadow in elevation.color.primary
  *
  * 3. ACCESSIBILITY
- *    - Native checkbox hidden but accessible
+ *    - A native checkbox, visually hidden but focusable and announced; the
+ *      drawn box is decoration
  *    - Label always required
- *    - Focus ring matches input (even inner ring)
- *    - Minimum touch target 44px
- *
- * @element oh-checkbox
+ *    - Focus underlines the label (a solid indicator)
  */
 import { type PropertyValues } from "lit";
 import { OhElement } from "./base.js";
 export type CheckboxState = "default" | "hover" | "focus";
+/**
+ * A single checkbox with its label, for turning one option on or off.
+ *
+ * **Use it for** one yes/no choice, such as agreeing to terms, or as part of
+ * a set where any number can be chosen. **Don't use it for** a set of
+ * related options on its own (use `oh-checkbox-group`, which adds the
+ * fieldset and legend), one choice from several (use `oh-radio-group`), or a
+ * setting that applies straight away (use `oh-toggle`).
+ *
+ * **States:** unchecked, checked, hover, active, focus, error (set `error-text`).
+ *
+ * **Behaviour:** clicking the box or the label toggles it, as does Space
+ * when it's focused. Each change sets `checked` and fires `oh-change`. The
+ * native `<input type="checkbox">` sits in the shadow root, so it doesn't
+ * submit with a native form: read `checked` or listen for `oh-change`. It
+ * has no `disabled` property.
+ *
+ * **Accessibility:** a real native checkbox, visually hidden, carries the
+ * role, state and keyboard behaviour; the drawn box is decoration. Always
+ * set `label`: it's the checkbox's name. Focus underlines the label. The
+ * error message shows under the checkbox 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.compact` (corners), `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-checkbox
+ * @fires oh-change - The checkbox was toggled. detail: { checked, value }
+ * @csspart box - The drawn checkbox
+ * @csspart label - The label text
+ * @csspart error - The error message
+ */
 export declare class OhCheckbox 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 +84,7 @@ export declare class OhCheckbox extends OhElement {
      */
     private _announceError;
     private _errorId;
+    updated(changed: PropertyValues): void;
     willUpdate(changed: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox.d.ts","sourceRoot":"","sources":["../src/oh-checkbox.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,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D,qBACa,UAAW,SAAQ,SAAS;IACvC,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,aAAa,CAAa;IAEtC,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAAkE;IAElF,UAAU,CAAC,OAAO,EAAE,cAAc;IASlC,MAAM;CAkDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"oh-checkbox.d.ts","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,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,aAAa,CAAa;IAEtC,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAAkE;IAElF,OAAO,CAAC,OAAO,EAAE,cAAc;IAM/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAgDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/oh-checkbox.js

@@ -1,28 +1,23 @@
 /**
  * oh-checkbox
  *
- * A chunky, playful checkbox 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)
- *    - shape.compact corners (smaller than buttons)
+ * 1. LOOK FROM TOKENS
+ *    - Border: stroke.control in color.border.emphasis
+ *    - Corners: shape.compact (smaller than the other controls' shape.control)
+ *    - Shadow: offset by elevation.offset.* in elevation.color.secondary; hover and
+ *      press move the box by lift.hoverSm / lift.pressSm
  *
  * 2. CHECKED STATE
- *    - Filled with primary color
- *    - Custom chunky checkmark
- *    - Shadow shifts to feel "activated"
+ *    - Filled with color.brand.primary, a checkmark in color.text.onBrand,
+ *      and the shadow in elevation.color.primary
  *
  * 3. ACCESSIBILITY
- *    - Native checkbox hidden but accessible
+ *    - A native checkbox, visually hidden but focusable and announced; the
+ *      drawn box is decoration
  *    - Label always required
- *    - Focus ring matches input (even inner ring)
- *    - Minimum touch target 44px
- *
- * @element oh-checkbox
+ *    - Focus underlines the label (a solid indicator)
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -33,6 +28,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 single checkbox with its label, for turning one option on or off.
+ *
+ * **Use it for** one yes/no choice, such as agreeing to terms, or as part of
+ * a set where any number can be chosen. **Don't use it for** a set of
+ * related options on its own (use `oh-checkbox-group`, which adds the
+ * fieldset and legend), one choice from several (use `oh-radio-group`), or a
+ * setting that applies straight away (use `oh-toggle`).
+ *
+ * **States:** unchecked, checked, hover, active, focus, error (set `error-text`).
+ *
+ * **Behaviour:** clicking the box or the label toggles it, as does Space
+ * when it's focused. Each change sets `checked` and fires `oh-change`. The
+ * native `<input type="checkbox">` sits in the shadow root, so it doesn't
+ * submit with a native form: read `checked` or listen for `oh-change`. It
+ * has no `disabled` property.
+ *
+ * **Accessibility:** a real native checkbox, visually hidden, carries the
+ * role, state and keyboard behaviour; the drawn box is decoration. Always
+ * set `label`: it's the checkbox's name. Focus underlines the label. The
+ * error message shows under the checkbox 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.compact` (corners), `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-checkbox
+ * @fires oh-change - The checkbox was toggled. detail: { checked, value }
+ * @csspart box - The drawn checkbox
+ * @csspart label - The label text
+ * @csspart error - The error message
+ */
 let OhCheckbox = class OhCheckbox extends OhElement {
     constructor() {
         super(...arguments);
@@ -40,8 +73,11 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         this.label = "";
         this.name = "";
         this.value = "";
-        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 = "";
         /**
          * Force a visual state (for documentation/Figma sync only)
          * Values: 'hover' | 'focus'
@@ -58,11 +94,6 @@ let OhCheckbox = class OhCheckbox extends OhElement {
     static { this.styles = [
         baseStyles,
         css `
-      /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO CHECKBOX
-         Chunky • Tactile • Playful
-         ═══════════════════════════════════════════════════════════════ */
-
       :host {
         display: inline-block;
       }
@@ -97,18 +128,18 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         height: 24px;
         flex-shrink: 0;
 
-        /* Chunky border */
+        /* Border: stroke.control in color.border.emphasis */
         border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: var(--oh-shape-compact);
 
-        /* Offset shadow like primary button */
+        /* Offset shadow: elevation.offset.md in elevation.color.secondary */
         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;
       }
@@ -132,27 +163,27 @@ let OhCheckbox = class OhCheckbox extends OhElement {
          STATES
          ═══════════════════════════════════════════════════════════════ */
 
-      /* Hover: lift up-left, shadow grows */
+      /* Hover: moves by lift.hoverSm; shadow offset elevation.offset.lg */
       .checkbox-wrapper:hover .checkbox-box {
         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 */
       .checkbox-wrapper:active .checkbox-box {
         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-checkbox:checked + .checkbox-box {
         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-checkbox:checked + .checkbox-box::after {
@@ -165,7 +196,7 @@ let OhCheckbox = class OhCheckbox 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 */
@@ -173,7 +204,7 @@ let OhCheckbox = class OhCheckbox 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) */
@@ -199,16 +230,16 @@ let OhCheckbox = class OhCheckbox extends OhElement {
          ERROR STATE
          ═══════════════════════════════════════════════════════════════ */
 
-      :host([error]) .checkbox-box {
+      :host([data-invalid]) .checkbox-box {
         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]) .checkbox-wrapper:hover .checkbox-box {
+      :host([data-invalid]) .checkbox-wrapper:hover .checkbox-box {
         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 {
@@ -248,7 +279,7 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         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);
       }
 
       /* Forced Focus - Unchecked */
@@ -263,7 +294,7 @@ let OhCheckbox = class OhCheckbox 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);
       }
     `,
     ]; }
@@ -272,10 +303,14 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         this.checked = target.checked;
         this.emit("oh-change", { checked: this.checked, value: this.value });
     }
+    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() {
@@ -290,16 +325,14 @@ let OhCheckbox = class OhCheckbox extends OhElement {
             name=${this.name}
             .value=${this.value}
             .checked=${this.checked}
-            aria-invalid=${this.error ? "true" : "false"}
-            aria-describedby=${this.error && this.errorMessage
-            ? this._errorId
-            : nothing}
+            aria-invalid=${this.errorText ? "true" : "false"}
+            aria-describedby=${this.errorText ? this._errorId : nothing}
             @change=${this._handleChange}
           />
           <span class="checkbox-box" part="box"></span>
           <span class="label" part="label">${this.label}</span>
         </label>
-        ${this.error && this.errorMessage
+        ${this.errorText
             ? html `
               <div
                 id=${this._errorId}
@@ -319,7 +352,7 @@ let OhCheckbox = class OhCheckbox extends OhElement {
                     clip-rule="evenodd"
                   />
                 </svg>
-                ${this.errorMessage}
+                ${this.errorText}
               </div>
             `
             : ""}
@@ -340,11 +373,8 @@ __decorate([
     property({ type: String })
 ], OhCheckbox.prototype, "value", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], OhCheckbox.prototype, "error", void 0);
-__decorate([
-    property({ type: String })
-], OhCheckbox.prototype, "errorMessage", void 0);
+    property({ type: String, attribute: "error-text" })
+], OhCheckbox.prototype, "errorText", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: "force-state" })
 ], OhCheckbox.prototype, "forceState", void 0);