@orange-halo/components 1.0.0 → 2.0.0

package/dist/oh-button.js

@@ -64,9 +64,9 @@ let OhButton = class OhButton extends OhElement {
 
       .button {
         /* Typography: friendly, not shouty */
-        font-family: var(--oh-font-family-sans);
-        font-weight: var(--oh-font-weight-semibold);
-        letter-spacing: var(--oh-font-letter-spacing-wide);
+        font-family: var(--oh-button-base-font-family);
+        font-weight: var(--oh-button-base-font-weight);
+        letter-spacing: var(--oh-button-base-letter-spacing);
         text-decoration: none;
         
         /* Layout */
@@ -76,7 +76,7 @@ let OhButton = class OhButton extends OhElement {
         gap: var(--oh-spacing-2);
         
         /* Shape: chunky rounded corners, not pills */
-        border-radius: var(--oh-radius-md);
+        border-radius: var(--oh-button-base-border-radius);
         
         /* Thick illustrative border */
         border: var(--oh-button-base-border-width) solid;
@@ -98,30 +98,30 @@ let OhButton = class OhButton extends OhElement {
          PRIMARY VARIANT
          Signature orange — bold and warm
          Filled button: color + shadow define shape (no visible border)
-         Contrast: #FFFFFF on #C54300 = 5.0:1 ✓ (WCAG AA)
+         Contrast: white on brand primary = 5.0:1 ✓ (WCAG AA)
          ═══════════════════════════════════════════════════════════════ */
 
       .button--primary {
-        background-color: var(--oh-color-brand-primary);
-        border-color: var(--oh-color-brand-primary);
-        color: var(--oh-color-text-on-brand);
+        background-color: var(--oh-button-variant-primary-background);
+        border-color: var(--oh-button-variant-primary-border-color);
+        color: var(--oh-button-variant-primary-color);
         
         /* Light offset shadow: makes button pop forward */
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+        box-shadow: 4px 4px 0 0 var(--oh-button-variant-primary-shadow-color);
       }
 
       .button--primary:hover {
-        background-color: var(--oh-color-brand-primary-hover);
-        border-color: var(--oh-color-brand-primary-hover);
+        background-color: var(--oh-button-variant-primary-background-hover);
+        border-color: var(--oh-button-variant-primary-background-hover);
         transform: translate(-2px, -2px);
-        box-shadow: 6px 6px 0 0 var(--oh-shadow-primary);
+        box-shadow: 6px 6px 0 0 var(--oh-button-variant-primary-shadow-color);
       }
 
       .button--primary:active {
-        background-color: var(--oh-color-brand-primary-active);
-        border-color: var(--oh-color-brand-primary-active);
+        background-color: var(--oh-button-variant-primary-background-active);
+        border-color: var(--oh-button-variant-primary-background-active);
         transform: translate(2px, 2px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-primary);
+        box-shadow: 1px 1px 0 0 var(--oh-button-variant-primary-shadow-color);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -130,23 +130,23 @@ let OhButton = class OhButton extends OhElement {
          ═══════════════════════════════════════════════════════════════ */
 
       .button--secondary {
-        background-color: var(--oh-color-surface-base);
-        border-color: var(--oh-color-border-emphasis);
-        color: var(--oh-color-text-primary);
+        background-color: var(--oh-button-variant-secondary-background);
+        border-color: var(--oh-button-variant-secondary-border-color);
+        color: var(--oh-button-variant-secondary-color);
         
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+        box-shadow: 4px 4px 0 0 var(--oh-button-variant-secondary-shadow-color);
       }
 
       .button--secondary:hover {
-        background-color: var(--oh-color-surface-hover);
+        background-color: var(--oh-button-variant-secondary-background-hover);
         transform: translate(-2px, -2px);
-        box-shadow: 6px 6px 0 0 var(--oh-shadow-secondary);
+        box-shadow: 6px 6px 0 0 var(--oh-button-variant-secondary-shadow-color);
       }
 
       .button--secondary:active {
-        background-color: var(--oh-color-surface-active-pressed);
+        background-color: var(--oh-button-variant-secondary-background-active);
         transform: translate(2px, 2px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-secondary);
+        box-shadow: 1px 1px 0 0 var(--oh-button-variant-secondary-shadow-color);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -156,25 +156,25 @@ let OhButton = class OhButton extends OhElement {
          ═══════════════════════════════════════════════════════════════ */
 
       .button--accent {
-        background-color: var(--oh-color-accent-default);
-        border-color: var(--oh-color-accent-default);
-        color: var(--oh-color-text-on-accent);
+        background-color: var(--oh-button-variant-accent-background);
+        border-color: var(--oh-button-variant-accent-border-color);
+        color: var(--oh-button-variant-accent-color);
         
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-accent);
+        box-shadow: 4px 4px 0 0 var(--oh-button-variant-accent-shadow-color);
       }
 
       .button--accent:hover {
-        background-color: var(--oh-color-accent-hover);
-        border-color: var(--oh-color-accent-hover);
+        background-color: var(--oh-button-variant-accent-background-hover);
+        border-color: var(--oh-button-variant-accent-background-hover);
         transform: translate(-2px, -2px);
-        box-shadow: 6px 6px 0 0 var(--oh-shadow-accent);
+        box-shadow: 6px 6px 0 0 var(--oh-button-variant-accent-shadow-color);
       }
 
       .button--accent:active {
-        background-color: var(--oh-color-accent-active);
-        border-color: var(--oh-color-accent-active);
+        background-color: var(--oh-button-variant-accent-background-active);
+        border-color: var(--oh-button-variant-accent-background-active);
         transform: translate(2px, 2px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-accent);
+        box-shadow: 1px 1px 0 0 var(--oh-button-variant-accent-shadow-color);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -189,42 +189,42 @@ let OhButton = class OhButton extends OhElement {
       }
 
       .button--primary:focus-visible {
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+        box-shadow: 4px 4px 0 0 var(--oh-button-variant-primary-shadow-color);
       }
 
       .button--secondary:focus-visible {
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+        box-shadow: 4px 4px 0 0 var(--oh-button-variant-secondary-shadow-color);
       }
 
       .button--accent:focus-visible {
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-accent);
+        box-shadow: 4px 4px 0 0 var(--oh-button-variant-accent-shadow-color);
       }
 
       /* ═══════════════════════════════════════════════════════════════
          SIZE VARIANTS
          Minimum 16px (1rem) for WCAG readability
-         Scale: sm=16px, md=18px, lg=20px
+         Values: button.size.* tokens
          ═══════════════════════════════════════════════════════════════ */
 
       .button--sm {
-        font-size: var(--oh-font-size-base);
-        padding: var(--oh-spacing-2) var(--oh-spacing-4);
-        min-height: 40px;
-        gap: var(--oh-spacing-2);
+        font-size: var(--oh-button-size-sm-font-size);
+        padding: var(--oh-button-size-sm-padding-y) var(--oh-button-size-sm-padding-x);
+        min-height: var(--oh-button-size-sm-min-height);
+        gap: var(--oh-button-size-sm-gap);
       }
 
       .button--md {
-        font-size: var(--oh-font-size-lg);
-        padding: var(--oh-spacing-3) var(--oh-spacing-6);
-        min-height: 48px;
-        gap: var(--oh-spacing-2);
+        font-size: var(--oh-button-size-md-font-size);
+        padding: var(--oh-button-size-md-padding-y) var(--oh-button-size-md-padding-x);
+        min-height: var(--oh-button-size-md-min-height);
+        gap: var(--oh-button-size-md-gap);
       }
 
       .button--lg {
-        font-size: var(--oh-font-size-xl);
-        padding: var(--oh-spacing-4) var(--oh-spacing-8);
-        min-height: 56px;
-        gap: var(--oh-spacing-2-5);
+        font-size: var(--oh-button-size-lg-font-size);
+        padding: var(--oh-button-size-lg-padding-y) var(--oh-button-size-lg-padding-x);
+        min-height: var(--oh-button-size-lg-min-height);
+        gap: var(--oh-button-size-lg-gap);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -259,12 +259,15 @@ let OhButton = class OhButton extends OhElement {
         min-width: 56px;
       }
 
-      /* Icon-only focus underline */
-      :host([icon-only]) .button {
+      /* Focus underline drawn by the button itself, for icon-only buttons and
+         loading buttons, whose text is hidden so text-decoration shows nothing */
+      :host([icon-only]) .button,
+      .button--loading {
         position: relative;
       }
 
-      :host([icon-only]) .button::after {
+      :host([icon-only]) .button::after,
+      .button--loading::after {
         content: '';
         position: absolute;
         bottom: 4px;
@@ -274,14 +277,15 @@ let OhButton = class OhButton extends OhElement {
         height: 2px;
         background-color: currentColor;
         opacity: 0;
-        transition: opacity var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-gentle, ease);
+        transition: opacity var(--oh-motion-snappy) var(--oh-motion-ease-gentle);
       }
 
       :host([icon-only]) .button:focus-visible {
         text-decoration: none;
       }
 
-      :host([icon-only]) .button:focus-visible::after {
+      :host([icon-only]) .button:focus-visible::after,
+      .button--loading:focus-visible::after {
         opacity: 1;
       }
 
@@ -307,6 +311,18 @@ let OhButton = class OhButton extends OhElement {
         to { transform: rotate(360deg); }
       }
 
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
       /* ═══════════════════════════════════════════════════════════════
          REDUCED MOTION
          ═══════════════════════════════════════════════════════════════ */
@@ -332,18 +348,18 @@ let OhButton = class OhButton extends OhElement {
 
       /* Primary - Forced Hover */
       :host([force-state="hover"]) .button--primary {
-        background-color: var(--oh-color-brand-primary-hover);
-        border-color: var(--oh-color-brand-primary-hover);
+        background-color: var(--oh-button-variant-primary-background-hover);
+        border-color: var(--oh-button-variant-primary-background-hover);
         transform: translate(-2px, -2px);
-        box-shadow: 6px 6px 0 0 var(--oh-shadow-primary);
+        box-shadow: 6px 6px 0 0 var(--oh-button-variant-primary-shadow-color);
       }
 
       /* Primary - Forced Active */
       :host([force-state="active"]) .button--primary {
-        background-color: var(--oh-color-brand-primary-active);
-        border-color: var(--oh-color-brand-primary-active);
+        background-color: var(--oh-button-variant-primary-background-active);
+        border-color: var(--oh-button-variant-primary-background-active);
         transform: translate(2px, 2px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-primary);
+        box-shadow: 1px 1px 0 0 var(--oh-button-variant-primary-shadow-color);
       }
 
       /* Primary - Forced Focus */
@@ -351,21 +367,21 @@ let OhButton = class OhButton extends OhElement {
         outline: none;
         text-decoration: underline;
         text-underline-offset: var(--oh-spacing-1);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+        box-shadow: 4px 4px 0 0 var(--oh-button-variant-primary-shadow-color);
       }
 
       /* Secondary - Forced Hover */
       :host([force-state="hover"]) .button--secondary {
-        background-color: var(--oh-color-surface-hover);
+        background-color: var(--oh-button-variant-secondary-background-hover);
         transform: translate(-2px, -2px);
-        box-shadow: 6px 6px 0 0 var(--oh-shadow-secondary);
+        box-shadow: 6px 6px 0 0 var(--oh-button-variant-secondary-shadow-color);
       }
 
       /* Secondary - Forced Active */
       :host([force-state="active"]) .button--secondary {
-        background-color: var(--oh-color-surface-active-pressed);
+        background-color: var(--oh-button-variant-secondary-background-active);
         transform: translate(2px, 2px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-secondary);
+        box-shadow: 1px 1px 0 0 var(--oh-button-variant-secondary-shadow-color);
       }
 
       /* Secondary - Forced Focus */
@@ -373,23 +389,23 @@ let OhButton = class OhButton extends OhElement {
         outline: none;
         text-decoration: underline;
         text-underline-offset: var(--oh-spacing-1);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+        box-shadow: 4px 4px 0 0 var(--oh-button-variant-secondary-shadow-color);
       }
 
       /* Accent - Forced Hover */
       :host([force-state="hover"]) .button--accent {
-        background-color: var(--oh-color-accent-hover);
-        border-color: var(--oh-color-accent-hover);
+        background-color: var(--oh-button-variant-accent-background-hover);
+        border-color: var(--oh-button-variant-accent-background-hover);
         transform: translate(-2px, -2px);
-        box-shadow: 6px 6px 0 0 var(--oh-shadow-accent);
+        box-shadow: 6px 6px 0 0 var(--oh-button-variant-accent-shadow-color);
       }
 
       /* Accent - Forced Active */
       :host([force-state="active"]) .button--accent {
-        background-color: var(--oh-color-accent-active);
-        border-color: var(--oh-color-accent-active);
+        background-color: var(--oh-button-variant-accent-background-active);
+        border-color: var(--oh-button-variant-accent-background-active);
         transform: translate(2px, 2px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-accent);
+        box-shadow: 1px 1px 0 0 var(--oh-button-variant-accent-shadow-color);
       }
 
       /* Accent - Forced Focus */
@@ -397,7 +413,7 @@ let OhButton = class OhButton extends OhElement {
         outline: none;
         text-decoration: underline;
         text-underline-offset: var(--oh-spacing-1);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-accent);
+        box-shadow: 4px 4px 0 0 var(--oh-button-variant-accent-shadow-color);
       }
     `,
     ]; }
@@ -426,8 +442,13 @@ let OhButton = class OhButton extends OhElement {
             [`button--${this.size}`]: true,
             "button--loading": this.loading,
         });
+        // While loading, the label stays in the DOM (visually hidden) so the
+        // button keeps its accessible name.
         const content = this.loading
-            ? html `<span class="spinner" aria-hidden="true"></span>`
+            ? html `
+          <span class="spinner" aria-hidden="true"></span>
+          <span class="visually-hidden"><slot></slot></span>
+        `
             : html `
           <slot name="icon-left"></slot>
           <slot></slot>
@@ -443,18 +464,23 @@ let OhButton = class OhButton extends OhElement {
           href=${this.href}
           target=${this.target || nothing}
           rel=${rel || nothing}
+          aria-label=${this.accessibleLabel || nothing}
         >
           ${content}
         </a>
       `;
         }
-        // Render as button
+        // Render as button. Loading uses aria-disabled, not disabled: a disabled
+        // button drops out of the tab order, so pressing a button that starts
+        // loading would throw keyboard focus back to the page. _handleClick
+        // ignores clicks while loading.
         return html `
       <button
         part="button"
         class=${classes}
-        ?disabled=${this.loading}
+        aria-disabled=${this.loading ? "true" : nothing}
         aria-busy=${this.loading ? "true" : nothing}
+        aria-label=${this.accessibleLabel || nothing}
         @click=${this._handleClick}
       >
         ${content}
@@ -474,6 +500,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "icon-only" })
 ], OhButton.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: String, attribute: "accessible-label" })
+], OhButton.prototype, "accessibleLabel", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: "force-state" })
 ], OhButton.prototype, "forceState", void 0);

package/dist/oh-button.js.map

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

package/dist/oh-card.js

@@ -50,6 +50,8 @@ let OhCard = class OhCard extends OhElement {
 
       :host {
         display: block;
+        /* Card surfaces fade to linen, where text.link falls below 4.5:1 */
+        --oh-color-text-link: var(--oh-color-text-link-raised);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -59,7 +61,7 @@ let OhCard = class OhCard extends OhElement {
 
       .card {
         /* Shape: friendly rounded corners */
-        border-radius: var(--oh-radius-lg);
+        border-radius: var(--oh-shape-large);
         overflow: hidden;
         
         transition: 
@@ -77,13 +79,13 @@ let OhCard = class OhCard extends OhElement {
         /* Surface: subtle gradient for depth */
         background: linear-gradient(
           180deg,
-          #FFFFFF 0%,
-          #FAF7F2 40%,
-          #F5F0E8 100%
+          var(--oh-card-raised-gradient-start) 0%,
+          var(--oh-card-raised-gradient-mid) 40%,
+          var(--oh-card-raised-gradient-end) 100%
         );
         
         /* Border: visible warm edge */
-        border: 1px solid #E2D5C8;
+        border: 1px solid var(--oh-card-raised-border-color);
         
         /* Layered shadows:
            1. Outer: soft, offset shadow (tactile)
@@ -104,13 +106,13 @@ let OhCard = class OhCard extends OhElement {
         /* Surface: warm sunlit gradient */
         background: linear-gradient(
           180deg,
-          #FFFBF5 0%,
-          #FDF6EE 30%,
-          #F8EFE4 100%
+          var(--oh-card-sunlit-gradient-start) 0%,
+          var(--oh-card-sunlit-gradient-mid) 30%,
+          var(--oh-card-sunlit-gradient-end) 100%
         );
         
         /* Border: warm tinted edge */
-        border: 1px solid rgba(197, 67, 0, 0.2);
+        border: 1px solid var(--oh-card-sunlit-border-color);
         
         /* Layered shadows with warm glow */
         box-shadow:
@@ -129,12 +131,12 @@ let OhCard = class OhCard extends OhElement {
         /* Surface: subtle gradient */
         background: linear-gradient(
           180deg,
-          #FAFAF8 0%,
-          #F5F2EE 100%
+          var(--oh-card-flat-gradient-start) 0%,
+          var(--oh-card-flat-gradient-end) 100%
         );
         
         /* Border: visible edge */
-        border: 1px solid #E2DCD2;
+        border: 1px solid var(--oh-card-flat-border-color);
         
         /* Minimal shadow */
         box-shadow:
@@ -144,7 +146,7 @@ let OhCard = class OhCard extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          INTERACTIVE STATES
-         Hover lifts, focus shows warm glow
+         Hover lifts; focus is a solid outline, with a warm glow as decoration
          ═══════════════════════════════════════════════════════════════ */
 
       .card--interactive {
@@ -153,7 +155,7 @@ let OhCard = class OhCard extends OhElement {
 
       /* Hover: warm light, lifted */
       .card--interactive.card--raised:hover {
-        border-color: var(--oh-color-warm-dune);
+        border-color: var(--oh-color-border-strong);
         box-shadow:
           0 4px 12px rgba(61, 50, 41, 0.1),
           0 12px 28px rgba(61, 50, 41, 0.08),
@@ -162,7 +164,7 @@ let OhCard = class OhCard extends OhElement {
       }
 
       .card--interactive.card--sunlit:hover {
-        border-color: rgba(197, 67, 0, 0.35);
+        border-color: var(--oh-card-sunlit-border-color-hover);
         box-shadow:
           0 4px 12px rgba(139, 69, 19, 0.12),
           0 12px 32px rgba(139, 69, 19, 0.08),
@@ -172,7 +174,7 @@ let OhCard = class OhCard extends OhElement {
       }
 
       .card--interactive.card--flat:hover {
-        border-color: var(--oh-color-warm-dune);
+        border-color: var(--oh-color-border-strong);
         box-shadow:
           0 2px 6px rgba(61, 50, 41, 0.08),
           0 6px 16px rgba(61, 50, 41, 0.05),
@@ -192,26 +194,24 @@ let OhCard = class OhCard extends OhElement {
           inset 0 1px 2px rgba(61, 50, 41, 0.04);
       }
 
-      /* Focus: warm glow ring */
+      /* Focus: solid outline is the indicator; the glow is decoration only */
       .card--interactive:focus-visible {
-        outline: none;
+        outline: var(--oh-focus-ring-width) solid var(--oh-focus-ring-color);
+        outline-offset: var(--oh-focus-ring-offset);
+        border-color: var(--oh-color-brand-primary);
       }
 
       .card--interactive.card--raised:focus-visible,
       .card--interactive.card--flat:focus-visible {
-        border-color: var(--oh-color-brand-primary);
         box-shadow:
-          0 0 0 3px rgba(197, 67, 0, 0.25),
-          0 0 16px rgba(197, 67, 0, 0.1),
+          0 0 16px var(--oh-focus-glow-color),
           0 2px 6px rgba(61, 50, 41, 0.08),
           inset 0 1px 0 rgba(255, 255, 255, 0.8);
       }
 
       .card--interactive.card--sunlit:focus-visible {
-        border-color: rgba(197, 67, 0, 0.5);
         box-shadow:
-          0 0 0 3px rgba(197, 67, 0, 0.3),
-          0 0 20px rgba(197, 67, 0, 0.15),
+          0 0 20px var(--oh-focus-glow-color),
           0 2px 8px rgba(139, 69, 19, 0.08),
           inset 0 1px 0 rgba(255, 255, 255, 0.9);
       }
@@ -230,11 +230,11 @@ let OhCard = class OhCard extends OhElement {
 
       .header {
         padding: var(--oh-spacing-4) var(--oh-spacing-5);
-        border-bottom: 1px solid rgba(226, 213, 200, 0.6);
+        border-bottom: 1px solid var(--oh-card-section-divider-color);
         background: linear-gradient(
           180deg,
-          rgba(255, 255, 255, 0.5) 0%,
-          rgba(255, 255, 255, 0) 100%
+          var(--oh-card-section-header-gradient-start) 0%,
+          var(--oh-card-section-header-gradient-end) 100%
         );
       }
 
@@ -246,7 +246,7 @@ let OhCard = class OhCard extends OhElement {
 
       .footer {
         padding: var(--oh-spacing-4) var(--oh-spacing-5);
-        border-top: 1px solid rgba(226, 213, 200, 0.6);
+        border-top: 1px solid var(--oh-card-section-divider-color);
         background: linear-gradient(
           180deg,
           var(--oh-color-surface-raised) 0%,

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

@@ -13,6 +13,7 @@
  *
  * @element oh-checkbox-group
  */
+import { type PropertyValues } from "lit";
 import { OhElement } from "./base.js";
 export interface CheckboxOption {
     label: string;
@@ -29,6 +30,13 @@ export declare class OhCheckboxGroup extends OhElement {
     error: boolean;
     errorMessage: string;
     private _handleChange;
+    /**
+     * Errors that appear after first render (e.g. on submit) are announced via
+     * role="alert". Errors present on page load are only linked with
+     * aria-describedby, so they aren't read out unprompted.
+     */
+    private _announceError;
+    willUpdate(changed: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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;AAIH,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,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,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"}