@orange-halo/components 2.1.0 → 3.0.0

package/dist/oh-card.js

@@ -1,28 +1,25 @@
 /**
  * oh-card
  *
- * A tactile, raised surface with visible frame.
- * Designed with the same layered construction as oh-button.
+ * A surface that groups related content, with optional header and footer.
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. LAYERED CONSTRUCTION
- *    - Surface: subtle gradient for depth
- *    - Border: visible warm edge
- *    - Inner highlight: sunlit top edge
- *    - Outer shadow: soft, slightly offset
+ * 1. THREE PARTS: header, content and footer are separate parts so each can
+ *    be styled.
  *
- * 2. RETRO-MODERN DETAILS
- *    - Warm, tactile shadows (never harsh)
- *    - Visible border that warms on hover
- *    - Subtle gradient background
+ * 2. VARIANTS BY ROLE, LOOK FROM TOKENS
+ *    - default, featured (the one card that should stand out), subtle (quieter)
+ *    - Each variant's surface, border and shadow come from its own
+ *      card.variant.<variant>.* tokens and an elevation.surface.* token, so a brand
+ *      changes the look without touching this file.
  *
- * 3. VARIANTS
- *    - Raised: default with layered depth
- *    - Sunlit: featured with warm gradient
- *    - Flat: border-only, minimal shadow
+ * 3. INTERACTIVE MODE: role="button" on the inner card, Enter/Space and
+ *    click fire oh-click. Focus is a solid focus.ring* outline; any
+ *    focus.glowColor shadow is decoration only.
  *
- * @element oh-card
+ * 4. CONTRAST: card surfaces remap color.text.link to color.text.linkRaised
+ *    so links inside keep 4.5:1.
  */
 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;
@@ -31,135 +28,151 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A surface that groups related content (a summary, a teaser, a settings group), with optional header and footer.
+ *
+ * **Use it for** a self-contained block of content among others, or a whole-card link to more detail (`interactive`). **Don't use it for** page layout or spacing alone (use `oh-stack`, `oh-grid`); for a message that needs attention (use `oh-alert`); or for a single action (use `oh-button`).
+ *
+ * **Variants:** `default`, the standard card; `featured`, for the one card that should stand out; `subtle`, a quieter card, for dense layouts. **Padding:** `none`, `sm`, `md` (default), `lg` set the content padding (and the header and footer padding to match). With `none`, the content sets its own padding.
+ *
+ * **States (interactive only):** rest, hover, active (pressed) and focus-visible.
+ *
+ * **Behaviour:** with `interactive`, the card is focusable (`tabindex="0"`), has `role="button"`, and fires `oh-click` on click, Enter or Space. Hover movement is turned off under `prefers-reduced-motion`.
+ *
+ * **Accessibility:** focus shows a solid outline (`focus.ringWidth`, `focus.ringColor`, `focus.ringOffset`). Links inside use `color.text.linkRaised`, which keeps contrast on card surfaces. An interactive card is one button: give it a short heading so its accessible name makes sense, and don't put other buttons or links inside it.
+ *
+ * **Look:** set by tokens. `card.variant.<variant>.gradientStart`/`gradientMid`/`gradientEnd` set each variant's surface, `card.variant.<variant>.borderColor` and `card.base.borderWidth` its border, `shape.large` the corners, and `elevation.surface.default`/`subtle`/`featured` its shadow. Hover uses `color.border.strong` (or `card.variant.featured.borderColorHover`), `elevation.surface.hover`/`featuredHover` and `lift.hoverMd`/`lift.hoverSm`; active uses `elevation.surface.active`; focus sets the border to `color.brand.primary` and adds `focus.glowColor` with `elevation.surface.focus`/`featuredFocus`. Header and footer dividers use `card.section.dividerColor` and `stroke.divider`; the header surface uses `card.section.headerGradientStart`/`End`, the footer `color.surface.raised` to `color.surface.inset`; motion uses `motion.gentle` and `motion.easeGentle`.
+ *
+ * @element oh-card
+ * @slot - The card's main content.
+ * @slot header - Optional header, above the content, with a divider below. Not drawn when nothing is slotted.
+ * @slot footer - Optional footer, below the content, with a divider above (e.g. actions). Not drawn when nothing is slotted.
+ * @csspart card - The card surface (the button when `interactive`).
+ * @csspart header - The header wrapper.
+ * @csspart content - The content wrapper.
+ * @csspart footer - The footer wrapper.
+ * @fires oh-click - When an `interactive` card is clicked or activated with Enter or Space. `detail.originalEvent` holds the source event.
+ */
 let OhCard = class OhCard extends OhElement {
     constructor() {
         super(...arguments);
-        this.variant = "raised";
+        this.variant = "default";
         this.interactive = false;
         this.padding = "md";
+        this._hasHeader = false;
+        this._hasFooter = false;
     }
     static { this.styles = [
         baseStyles,
         css `
       /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO CARD
-         Tactile • Layered • Warm • Personal
+         CARD
+         The look comes from card.*, elevation.*, shape.* and lift.* tokens
          ═══════════════════════════════════════════════════════════════ */
 
       :host {
         display: block;
-        /* Card surfaces fade to linen, where text.link falls below 4.5:1 */
+        /* On card surfaces text.link can fall below 4.5:1; linkRaised keeps it */
         --oh-color-text-link: var(--oh-color-text-link-raised);
       }
 
       /* ═══════════════════════════════════════════════════════════════
          BASE CARD
-         Layered construction — feels like a physical object
          ═══════════════════════════════════════════════════════════════ */
 
       .card {
-        /* Shape: friendly rounded corners */
         border-radius: var(--oh-shape-large);
         overflow: hidden;
-        
-        transition: 
+
+        transition:
           transform var(--oh-motion-gentle) var(--oh-motion-ease-gentle),
           box-shadow var(--oh-motion-gentle) var(--oh-motion-ease-gentle),
           border-color var(--oh-motion-gentle) var(--oh-motion-ease-gentle);
       }
 
       /* ═══════════════════════════════════════════════════════════════
-         RAISED VARIANT (Default)
-         Subtle gradient surface with layered shadows
+         DEFAULT VARIANT
          ═══════════════════════════════════════════════════════════════ */
 
-      .card--raised {
-        /* Surface: subtle gradient for depth */
+      .card--default {
+        /* Surface: card.default gradient tokens */
         background: linear-gradient(
           180deg,
-          var(--oh-card-raised-gradient-start) 0%,
-          var(--oh-card-raised-gradient-mid) 40%,
-          var(--oh-card-raised-gradient-end) 100%
+          var(--oh-card-variant-default-gradient-start) 0%,
+          var(--oh-card-variant-default-gradient-mid) 40%,
+          var(--oh-card-variant-default-gradient-end) 100%
         );
-        
-        /* Border: visible warm edge */
-        border: var(--oh-card-base-border-width) solid var(--oh-card-raised-border-color);
-        
-        /* Layered shadows:
-           1. Outer: soft, offset shadow (tactile)
-           2. Deeper: ambient depth
-           3. Inner top: sunlit highlight */
-        box-shadow: var(--oh-elevation-surface-raised);
+
+        border: var(--oh-card-base-border-width) solid
+          var(--oh-card-variant-default-border-color);
+
+        box-shadow: var(--oh-elevation-surface-default);
       }
 
       /* ═══════════════════════════════════════════════════════════════
-         SUNLIT VARIANT
-         Featured content with warm gradient and glow
+         FEATURED VARIANT
+         The one card that should stand out
          ═══════════════════════════════════════════════════════════════ */
 
-      .card--sunlit {
-        /* Surface: warm sunlit gradient */
+      .card--featured {
         background: linear-gradient(
           180deg,
-          var(--oh-card-sunlit-gradient-start) 0%,
-          var(--oh-card-sunlit-gradient-mid) 30%,
-          var(--oh-card-sunlit-gradient-end) 100%
+          var(--oh-card-variant-featured-gradient-start) 0%,
+          var(--oh-card-variant-featured-gradient-mid) 30%,
+          var(--oh-card-variant-featured-gradient-end) 100%
         );
-        
-        /* Border: warm tinted edge */
-        border: var(--oh-card-base-border-width) solid var(--oh-card-sunlit-border-color);
-        
-        /* Layered shadows with warm glow */
+
+        border: var(--oh-card-base-border-width) solid
+          var(--oh-card-variant-featured-border-color);
+
         box-shadow: var(--oh-elevation-surface-featured);
       }
 
       /* ═══════════════════════════════════════════════════════════════
-         FLAT VARIANT
-         Border-only, minimal shadow — still layered
+         SUBTLE VARIANT
+         Quieter card: elevation.surface.subtle
          ═══════════════════════════════════════════════════════════════ */
 
-      .card--flat {
-        /* Surface: subtle gradient */
+      .card--subtle {
         background: linear-gradient(
           180deg,
-          var(--oh-card-flat-gradient-start) 0%,
-          var(--oh-card-flat-gradient-end) 100%
+          var(--oh-card-variant-subtle-gradient-start) 0%,
+          var(--oh-card-variant-subtle-gradient-end) 100%
         );
-        
-        /* Border: visible edge */
-        border: var(--oh-card-base-border-width) solid var(--oh-card-flat-border-color);
-        
-        /* Minimal shadow */
-        box-shadow: var(--oh-elevation-surface-flat);
+
+        border: var(--oh-card-base-border-width) solid
+          var(--oh-card-variant-subtle-border-color);
+
+        box-shadow: var(--oh-elevation-surface-subtle);
       }
 
       /* ═══════════════════════════════════════════════════════════════
          INTERACTIVE STATES
-         Hover lifts; focus is a solid outline, with a warm glow as decoration
+         Focus is a solid outline; focus.glowColor is decoration only
          ═══════════════════════════════════════════════════════════════ */
 
       .card--interactive {
         cursor: pointer;
       }
 
-      /* Hover: warm light, lifted */
-      .card--interactive.card--raised:hover {
+      /* Hover: lift.hover* and elevation.surface.hover */
+      .card--interactive.card--default:hover {
         border-color: var(--oh-color-border-strong);
-        box-shadow: var(--oh-elevation-surface-lifted);
+        box-shadow: var(--oh-elevation-surface-hover);
         transform: translateY(var(--oh-lift-hover-md));
       }
 
-      .card--interactive.card--sunlit:hover {
-        border-color: var(--oh-card-sunlit-border-color-hover);
-        box-shadow: var(--oh-elevation-surface-featured-lifted);
+      .card--interactive.card--featured:hover {
+        border-color: var(--oh-card-variant-featured-border-color-hover);
+        box-shadow: var(--oh-elevation-surface-featured-hover);
         transform: translateY(var(--oh-lift-hover-md));
       }
 
-      .card--interactive.card--flat:hover {
+      .card--interactive.card--subtle:hover {
         border-color: var(--oh-color-border-strong);
-        box-shadow: var(--oh-elevation-surface-raised);
+        box-shadow: var(--oh-elevation-surface-default);
         transform: translateY(var(--oh-lift-hover-sm));
       }
 
@@ -168,8 +181,8 @@ let OhCard = class OhCard extends OhElement {
         transform: translateY(0) !important;
       }
 
-      .card--interactive.card--raised:active {
-        box-shadow: var(--oh-elevation-surface-pressed);
+      .card--interactive.card--default:active {
+        box-shadow: var(--oh-elevation-surface-active);
       }
 
       /* Focus: solid outline is the indicator; the glow is decoration only */
@@ -179,22 +192,32 @@ let OhCard = class OhCard extends OhElement {
         border-color: var(--oh-color-brand-primary);
       }
 
-      .card--interactive.card--raised:focus-visible,
-      .card--interactive.card--flat:focus-visible {
-        box-shadow: 0 0 16px var(--oh-focus-glow-color), var(--oh-elevation-surface-focused);
+      .card--interactive.card--default:focus-visible,
+      .card--interactive.card--subtle:focus-visible {
+        box-shadow:
+          0 0 16px var(--oh-focus-glow-color),
+          var(--oh-elevation-surface-focus);
       }
 
-      .card--interactive.card--sunlit:focus-visible {
-        box-shadow: 0 0 20px var(--oh-focus-glow-color), var(--oh-elevation-surface-featured-focused);
+      .card--interactive.card--featured:focus-visible {
+        box-shadow:
+          0 0 20px var(--oh-focus-glow-color),
+          var(--oh-elevation-surface-featured-focus);
       }
 
       /* ═══════════════════════════════════════════════════════════════
          PADDING VARIANTS
          ═══════════════════════════════════════════════════════════════ */
 
-      .card--padding-sm .content { padding: var(--oh-spacing-3-5); }
-      .card--padding-md .content { padding: var(--oh-spacing-5); }
-      .card--padding-lg .content { padding: var(--oh-spacing-7); }
+      .card--padding-sm .content {
+        padding: var(--oh-spacing-3-5);
+      }
+      .card--padding-md .content {
+        padding: var(--oh-spacing-5);
+      }
+      .card--padding-lg .content {
+        padding: var(--oh-spacing-7);
+      }
 
       /* ═══════════════════════════════════════════════════════════════
          SLOTS: Header, Content, Footer
@@ -202,7 +225,8 @@ let OhCard = class OhCard extends OhElement {
 
       .header {
         padding: var(--oh-spacing-4) var(--oh-spacing-5);
-        border-bottom: var(--oh-stroke-divider) solid var(--oh-card-section-divider-color);
+        border-bottom: var(--oh-stroke-divider) solid
+          var(--oh-card-section-divider-color);
         background: linear-gradient(
           180deg,
           var(--oh-card-section-header-gradient-start) 0%,
@@ -210,15 +234,14 @@ let OhCard = class OhCard extends OhElement {
         );
       }
 
-      .header:empty { display: none; }
-
       .content {
         /* Padding handled by variant */
       }
 
       .footer {
         padding: var(--oh-spacing-4) var(--oh-spacing-5);
-        border-top: var(--oh-stroke-divider) solid var(--oh-card-section-divider-color);
+        border-top: var(--oh-stroke-divider) solid
+          var(--oh-card-section-divider-color);
         background: linear-gradient(
           180deg,
           var(--oh-color-surface-raised) 0%,
@@ -226,7 +249,12 @@ let OhCard = class OhCard extends OhElement {
         );
       }
 
-      .footer:empty { display: none; }
+      /* A header or footer with nothing slotted isn't drawn (:empty can't
+         see slotted content, so the element tracks it) */
+      .header[hidden],
+      .footer[hidden] {
+        display: none;
+      }
 
       /* Padding adjustments for slots */
       .card--padding-sm .header,
@@ -247,13 +275,26 @@ let OhCard = class OhCard extends OhElement {
         .card {
           transition-duration: 0.01ms !important;
         }
-        
+
         .card--interactive:hover {
           transform: none !important;
         }
       }
     `,
     ]; }
+    /** True when the slot holds an element or non-whitespace text */
+    _slotHasContent(slot) {
+        return slot
+            .assignedNodes({ flatten: true })
+            .some((node) => node.nodeType === Node.ELEMENT_NODE ||
+            (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+    }
+    _onHeaderSlotChange(event) {
+        this._hasHeader = this._slotHasContent(event.target);
+    }
+    _onFooterSlotChange(event) {
+        this._hasFooter = this._slotHasContent(event.target);
+    }
     _handleClick(event) {
         if (this.interactive) {
             this.emit("oh-click", { originalEvent: event });
@@ -281,16 +322,16 @@ let OhCard = class OhCard extends OhElement {
         @click=${this._handleClick}
         @keydown=${this._handleKeyDown}
       >
-        <div class="header" part="header">
-          <slot name="header"></slot>
+        <div class="header" part="header" ?hidden=${!this._hasHeader}>
+          <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
         </div>
-        
+
         <div class="content" part="content">
           <slot></slot>
         </div>
-        
-        <div class="footer" part="footer">
-          <slot name="footer"></slot>
+
+        <div class="footer" part="footer" ?hidden=${!this._hasFooter}>
+          <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
         </div>
       </div>
     `;
@@ -305,6 +346,12 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], OhCard.prototype, "padding", void 0);
+__decorate([
+    state()
+], OhCard.prototype, "_hasHeader", void 0);
+__decorate([
+    state()
+], OhCard.prototype, "_hasFooter", void 0);
 OhCard = __decorate([
     customElement("oh-card")
 ], OhCard);

package/dist/oh-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-card.js","sourceRoot":"","sources":["../src/oh-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,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;;QAyNL,YAAO,GAAgB,QAAQ,CAAC;QAGhC,gBAAW,GAAG,KAAK,CAAC;QAGpB,YAAO,GAAgB,IAAI,CAAC;IA8C9B,CAAC;aA5QiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkNF;KACF,AArNqB,CAqNpB;IAWM,YAAY,CAAC,KAAiB;QACpC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;QAClD,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,KAAoB;QACzC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YACrE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,KAA8B,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,IAAI,EAAE,IAAI;YACV,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAC/B,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACvC,mBAAmB,EAAE,IAAI,CAAC,WAAW;SACtC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;gBAGC,OAAO;eACR,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;mBACjC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;iBAClC,IAAI,CAAC,YAAY;mBACf,IAAI,CAAC,cAAc;;;;;;;;;;;;;;KAcjC,CAAC;IACJ,CAAC;;AAnDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACd;AA/NjB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA6QlB"}
+{"version":3,"file":"oh-card.js","sourceRoot":"","sources":["../src/oh-card.ts"],"names":[],"mappings":"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"}

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

@@ -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
  */
 import { type PropertyValues } from "lit";
 import { OhElement } from "./base.js";
@@ -20,15 +20,58 @@ export interface CheckboxOption {
     value: string;
     checked?: boolean;
 }
+/**
+ * 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)
+ */
 export declare class OhCheckboxGroup extends OhElement {
     static styles: import("lit").CSSResult[];
-    legend: string;
+    /** The group's label, rendered as the fieldset's <legend>. Always set one */
+    label: string;
     name: string;
     options: CheckboxOption[];
     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 _handleChange;
     /**
      * Errors that appear after first render (e.g. on submit) are announced via
@@ -36,6 +79,7 @@ export declare class OhCheckboxGroup 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-checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox-group.d.ts","sourceRoot":"","sources":["../src/oh-checkbox-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBACa,eAAgB,SAAQ,SAAS;IAC5C,OAAgB,MAAM,4BAgMpB;IAGF,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,KAAK,EAAE,MAAM,EAAE,CAAM;IAGrB,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB,OAAO,CAAC,aAAa;IAYrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CA8CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"oh-checkbox-group.d.ts","sourceRoot":"","sources":["../src/oh-checkbox-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,eAAgB,SAAQ,SAAS;IAC5C,OAAgB,MAAM,4BAwMpB;IAEF,6EAA6E;IAE7E,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,KAAK,EAAE,MAAM,EAAE,CAAM;IAGrB,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,SAAS,SAAM;IAEf,OAAO,CAAC,aAAa;IAYrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,OAAO,EAAE,cAAc;IAM/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CA0DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

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

@@ -6,17 +6,15 @@ import figma, { html } from "@figma/code-connect/html";
  */
 figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=1-77", {
     props: {
-        legend: figma.string("Legend"),
+        label: figma.string("Legend"),
         required: figma.boolean("Required"),
-        error: figma.boolean("Error"),
-        errorMessage: figma.string("Error Message"),
+        errorText: figma.string("Error Message"),
     },
     example: (props) => html `
       <oh-checkbox-group
-        legend="${props.legend}"
+        label="${props.label}"
         ?required="${props.required}"
-        ?error="${props.error}"
-        errormessage="${props.errorMessage}"
+        error-text="${props.errorText}"
         .options="\${options}"
       ></oh-checkbox-group>
     `,

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

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox-group.figma.js","sourceRoot":"","sources":["../src/oh-checkbox-group.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;GAIG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC9B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QAC7B,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;KAC5C;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;kBAEV,KAAK,CAAC,MAAM;qBACT,KAAK,CAAC,QAAQ;kBACjB,KAAK,CAAC,KAAK;wBACL,KAAK,CAAC,YAAY;;;KAGrC;CACF,CACF,CAAC"}
+{"version":3,"file":"oh-checkbox-group.figma.js","sourceRoot":"","sources":["../src/oh-checkbox-group.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;GAIG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC7B,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"}