@helixui/library 0.1.3 → 0.2.0

package/dist/shared/{hx-textarea-Bsq5aJf8.js → hx-textarea-BLcReynr.js}

@@ -1,10 +1,10 @@
-import { css as u, LitElement as _, nothing as d, html as o } from "lit";
-import { property as i, query as f, state as c, customElement as v } from "lit/decorators.js";
+import { css as c, LitElement as f, nothing as d, html as o } from "lit";
+import { property as i, query as v, state as u, customElement as _ } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
-import { ifDefined as n } from "lit/directives/if-defined.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
 import { live as b } from "lit/directives/live.js";
 import { tokenStyles as m } from "@helixui/tokens/lit";
-const y = u`
+const y = c`
   :host {
     display: block;
   }
@@ -63,6 +63,9 @@ const y = u`
 
   .field__textarea-wrapper:focus-within {
     border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    /* Solid fallback for browsers without color-mix() (Chrome < 111, Safari < 16.2) — WCAG 1.4.11 */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      rgba(37, 99, 235, var(--hx-focus-ring-opacity, 0.25));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
@@ -80,6 +83,9 @@ const y = u`
 
   .field--error .field__textarea-wrapper:focus-within {
     border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+    /* Solid fallback for browsers without color-mix() — WCAG 1.4.11 */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      rgba(220, 53, 69, var(--hx-focus-ring-opacity, 0.25));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
@@ -119,9 +125,7 @@ const y = u`
     resize: none;
   }
 
-  :host([resize='vertical']) .field__textarea {
-    resize: vertical;
-  }
+  /* resize: vertical is the base default — no override needed for [resize='vertical'] */
 
   :host([resize='both']) .field__textarea {
     resize: both;
@@ -155,12 +159,12 @@ const y = u`
     line-height: var(--hx-line-height-normal, 1.5);
   }
 `;
-var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (e, t, l, h) => {
-  for (var s = h > 1 ? void 0 : h ? w(t, l) : t, p = e.length - 1, x; p >= 0; p--)
-    (x = e[p]) && (s = (h ? x(t, l, s) : x(s)) || s);
-  return h && s && $(t, l, s), s;
+var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (e, t, l, n) => {
+  for (var s = n > 1 ? void 0 : n ? $(t, l) : t, p = e.length - 1, x; p >= 0; p--)
+    (x = e[p]) && (s = (n ? x(t, l, s) : x(s)) || s);
+  return n && s && w(t, l, s), s;
 };
-let S = 0, r = class extends _ {
+let S = 0, r = class extends f {
   constructor() {
     super(), this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.rows = 4, this.resize = "vertical", this.showCount = !1, this.ariaLabel = null, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpTextSlot = !1, this._textareaId = `hx-textarea-${++S}`, this._helpTextId = `${this._textareaId}-help`, this._errorId = `${this._textareaId}-error`, this._counterId = `${this._textareaId}-counter`, this._internals = this.attachInternals();
   }
@@ -184,7 +188,11 @@ let S = 0, r = class extends _ {
   }
   // ─── Lifecycle ───
   updated(e) {
-    super.updated(e), e.has("value") && this._internals.setFormValue(this.value), (e.has("value") || e.has("required") || e.has("maxlength")) && this._updateValidity(), e.has("value") && this.resize === "auto" && this._textarea && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
+    if (super.updated(e), e.has("rows")) {
+      const t = Math.max(1, Math.round(this.rows));
+      t !== this.rows && (this.rows = t);
+    }
+    e.has("value") && this._internals.setFormValue(this.value), (e.has("value") || e.has("required") || e.has("minlength") || e.has("maxlength")) && this._updateValidity(), e.has("value") && this.resize === "auto" && this._textarea && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
   }
   // ─── Form Integration ───
   /** Returns the associated form element, if any. */
@@ -214,6 +222,10 @@ let S = 0, r = class extends _ {
       { valueMissing: !0 },
       this.error || "This field is required.",
       e
+    ) : this.minlength !== void 0 && this.value.length > 0 && this.value.length < this.minlength ? this._internals.setValidity(
+      { tooShort: !0 },
+      this.error || `Value must be at least ${this.minlength} characters.`,
+      e
     ) : this.maxlength !== void 0 && this.value.length > this.maxlength ? this._internals.setValidity(
       { tooLong: !0 },
       this.error || `Value must be ${this.maxlength} characters or fewer.`,
@@ -278,7 +290,7 @@ let S = 0, r = class extends _ {
       "field--error": e,
       "field--disabled": this.disabled,
       "field--required": this.required
-    }, l = (!!this.helpText || this._hasHelpTextSlot) && !e, h = [
+    }, l = (!!this.helpText || this._hasHelpTextSlot) && !e, n = [
       e ? this._errorId : null,
       l ? this._helpTextId : null,
       this.showCount ? this._counterId : null
@@ -302,18 +314,19 @@ let S = 0, r = class extends _ {
             class="field__textarea"
             id=${this._textareaId}
             .value=${b(this.value)}
-            placeholder=${n(this.placeholder || void 0)}
+            placeholder=${h(this.placeholder || void 0)}
             ?required=${this.required}
             ?disabled=${this.disabled}
             rows=${this.rows}
-            maxlength=${n(this.maxlength)}
-            name=${n(this.name || void 0)}
-            aria-label=${n(this.ariaLabel ?? void 0)}
-            aria-labelledby=${n(
+            minlength=${h(this.minlength)}
+            maxlength=${h(this.maxlength)}
+            name=${h(this.name || void 0)}
+            aria-label=${h(this.ariaLabel ?? void 0)}
+            aria-labelledby=${h(
       this._hasLabelSlot ? `${this._textareaId}-slotted-label` : void 0
     )}
             aria-invalid=${e ? "true" : d}
-            aria-describedby=${n(h)}
+            aria-describedby=${h(n)}
             @input=${this._handleInput}
             @change=${this._handleChange}
           ></textarea>
@@ -365,6 +378,9 @@ a([
 a([
   i({ type: Number })
 ], r.prototype, "rows", 2);
+a([
+  i({ type: Number, attribute: "minlength" })
+], r.prototype, "minlength", 2);
 a([
   i({ type: Number, attribute: "maxlength" })
 ], r.prototype, "maxlength", 2);
@@ -378,21 +394,21 @@ a([
   i({ type: String, attribute: "aria-label" })
 ], r.prototype, "ariaLabel", 2);
 a([
-  f(".field__textarea")
+  v(".field__textarea")
 ], r.prototype, "_textarea", 2);
 a([
-  c()
+  u()
 ], r.prototype, "_hasLabelSlot", 2);
 a([
-  c()
+  u()
 ], r.prototype, "_hasErrorSlot", 2);
 a([
-  c()
+  u()
 ], r.prototype, "_hasHelpTextSlot", 2);
 r = a([
-  v("hx-textarea")
+  _("hx-textarea")
 ], r);
 export {
   r as H
 };
-//# sourceMappingURL=hx-textarea-Bsq5aJf8.js.map
+//# sourceMappingURL=hx-textarea-BLcReynr.js.map

package/dist/shared/hx-textarea-BLcReynr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-textarea-BLcReynr.js","sources":["../../src/components/hx-textarea/hx-textarea.styles.ts","../../src/components/hx-textarea/hx-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextareaStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* --- Label --- */\n\n  .field__label-wrapper {\n    display: contents;\n  }\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__required-marker {\n    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* --- Textarea Wrapper --- */\n\n  .field__textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    overflow: hidden;\n  }\n\n  .field__textarea-wrapper:focus-within {\n    border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    /* Solid fallback for browsers without color-mix() (Chrome < 111, Safari < 16.2) — WCAG 1.4.11 */\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      rgba(37, 99, 235, var(--hx-focus-ring-opacity, 0.25));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* --- Error State --- */\n\n  .field--error .field__textarea-wrapper {\n    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  .field--error .field__textarea-wrapper:focus-within {\n    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n    /* Solid fallback for browsers without color-mix() — WCAG 1.4.11 */\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      rgba(220, 53, 69, var(--hx-focus-ring-opacity, 0.25));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* --- Native Textarea --- */\n\n  .field__textarea {\n    border: none;\n    outline: none;\n    background: transparent;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    font-family: inherit;\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));\n    line-height: var(--hx-line-height-normal, 1.5);\n    min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));\n    width: 100%;\n    resize: vertical;\n  }\n\n  .field__textarea::placeholder {\n    color: var(--hx-color-neutral-400, #adb5bd);\n  }\n\n  .field__textarea:disabled {\n    cursor: not-allowed;\n  }\n\n  /* --- Resize Variants --- */\n\n  :host([resize='none']) .field__textarea {\n    resize: none;\n  }\n\n  /* resize: vertical is the base default — no override needed for [resize='vertical'] */\n\n  :host([resize='both']) .field__textarea {\n    resize: both;\n  }\n\n  :host([resize='auto']) .field__textarea {\n    resize: none;\n    overflow: hidden;\n  }\n\n  /* --- Character Counter --- */\n\n  .field__counter {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-neutral-500, #6c757d);\n    line-height: var(--hx-line-height-normal, 1.5);\n    text-align: right;\n  }\n\n  /* --- Help Text & Error Messages --- */\n\n  .field__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-neutral-500, #6c757d);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTextareaStyles } from './hx-textarea.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxTextareaIdCounter = 0;\n\n/**\n * A multi-line text area component with label, validation, and form association.\n *\n * Uses `aria-invalid` to convey error state and `aria-describedby` to link\n * error/help text to the textarea. Label association is handled through\n * `aria-labelledby` (for slotted labels) or the standard `<label for>` pattern.\n * Supports `aria-label` for cases where a visible label is not present.\n * Validation errors are announced via `role=\"alert\"` (assertive live region).\n *\n * @summary Form-associated textarea with built-in label, error, help text, character counter, and auto-resize.\n *\n * @tag hx-textarea\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the textarea loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart textarea-wrapper - The wrapper around the textarea.\n * @csspart textarea - The native textarea element.\n * @csspart counter - The character count display.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-input-font-family=var(--hx-font-family-sans)] - Input font family.\n * @cssprop [--hx-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-textarea-min-height=var(--hx-size-20, 5rem)] - Minimum textarea height.\n */\n@customElement('hx-textarea')\nexport class HelixTextarea extends LitElement {\n  static override styles = [tokenStyles, helixTextareaStyles];\n\n  // ─── Form Association ───\n\n  /** Enables the element to participate in form submission and validation. */\n  static formAssociated = true;\n\n  /** ElementInternals instance for form association, validation, and ARIA. */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The visible label text for the textarea.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Placeholder text shown when the textarea is empty.\n   * @attr placeholder\n   */\n  @property({ type: String })\n  placeholder = '';\n\n  /**\n   * The current value of the textarea.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Whether the textarea is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the textarea is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message to display. When set, the textarea enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the textarea for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * The name of the textarea, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The number of visible text rows. Must be a positive integer (minimum 1).\n   * Invalid values are clamped to the nearest valid value.\n   * @attr rows\n   */\n  @property({ type: Number })\n  rows = 4;\n\n  /**\n   * Minimum number of characters required.\n   * @attr minlength\n   */\n  @property({ type: Number, attribute: 'minlength' })\n  minlength: number | undefined;\n\n  /**\n   * Maximum number of characters allowed.\n   * @attr maxlength\n   */\n  @property({ type: Number, attribute: 'maxlength' })\n  maxlength: number | undefined;\n\n  /**\n   * Controls how the textarea can be resized. Use 'auto' for auto-grow behavior.\n   * @attr resize\n   */\n  @property({ type: String, reflect: true })\n  resize: 'none' | 'vertical' | 'both' | 'auto' = 'vertical';\n\n  /**\n   * Whether to show a character count below the textarea.\n   * @attr show-count\n   */\n  @property({ type: Boolean, attribute: 'show-count' })\n  showCount = false;\n\n  /**\n   * Accessible name for screen readers, if different from the visible label.\n   * @attr aria-label\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  // ─── Internal References ───\n\n  /** @internal */\n  @query('.field__textarea')\n  private _textarea: HTMLTextAreaElement | undefined;\n\n  // ─── Slot Tracking ───\n\n  /** @internal */\n  @state() private _hasLabelSlot = false;\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n  /** @internal */\n  @state() private _hasHelpTextSlot = false;\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n    if (this._hasLabelSlot) {\n      const slottedLabel = slot.assignedElements()[0];\n      if (slottedLabel && !slottedLabel.id) {\n        slottedLabel.id = `${this._textareaId}-slotted-label`;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedElements().length > 0;\n  }\n\n  /** @internal */\n  private _handleHelpTextSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpTextSlot = slot.assignedElements().length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('rows')) {\n      const clamped = Math.max(1, Math.round(this.rows));\n      if (clamped !== this.rows) {\n        this.rows = clamped;\n      }\n    }\n    if (changedProperties.has('value')) {\n      this._internals.setFormValue(this.value);\n    }\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('required') ||\n      changedProperties.has('minlength') ||\n      changedProperties.has('maxlength')\n    ) {\n      this._updateValidity();\n    }\n    // Auto-grow: respond to programmatic value changes\n    if (changedProperties.has('value') && this.resize === 'auto' && this._textarea) {\n      this._textarea.style.height = 'auto';\n      this._textarea.style.height = `${this._textarea.scrollHeight}px`;\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the textarea satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    const anchor = this._textarea ?? undefined;\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'This field is required.',\n        anchor,\n      );\n    } else if (\n      this.minlength !== undefined &&\n      this.value.length > 0 &&\n      this.value.length < this.minlength\n    ) {\n      this._internals.setValidity(\n        { tooShort: true },\n        this.error || `Value must be at least ${this.minlength} characters.`,\n        anchor,\n      );\n    } else if (this.maxlength !== undefined && this.value.length > this.maxlength) {\n      this._internals.setValidity(\n        { tooLong: true },\n        this.error || `Value must be ${this.maxlength} characters or fewer.`,\n        anchor,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Called by the browser when the owning form is reset. */\n  formResetCallback(): void {\n    this.value = '';\n    this._internals.setFormValue('');\n  }\n\n  /** Called by the browser to restore form state (e.g., back/forward navigation). */\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleInput(e: Event): void {\n    const target = e.target as HTMLTextAreaElement;\n    this.value = target.value;\n    // Note: setFormValue is called in updated() via the value change — no double-call here (P1-06 fix)\n\n    // Auto-grow: reset height then set to scrollHeight\n    if (this.resize === 'auto') {\n      target.style.height = 'auto';\n      target.style.height = `${target.scrollHeight}px`;\n    }\n\n    /**\n     * Dispatched on every keystroke as the user types.\n     * @event hx-input\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleChange(e: Event): void {\n    const target = e.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this._internals.setFormValue(this.value);\n    this._updateValidity();\n\n    /**\n     * Dispatched when the textarea loses focus after its value changed.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the textarea element. */\n  override focus(options?: FocusOptions): void {\n    this._textarea?.focus(options);\n  }\n\n  /** Selects all text in the textarea. */\n  select(): void {\n    this._textarea?.select();\n  }\n\n  // ─── Render ───\n\n  /** @internal */\n  private _textareaId = `hx-textarea-${++_hxTextareaIdCounter}`;\n  /** @internal */\n  private _helpTextId = `${this._textareaId}-help`;\n  /** @internal */\n  private _errorId = `${this._textareaId}-error`;\n  /** @internal */\n  private _counterId = `${this._textareaId}-counter`;\n\n  /** @internal */\n  private _renderCounter() {\n    if (!this.showCount) return nothing;\n\n    const count = this.value.length;\n    const display = this.maxlength !== undefined ? `${count} / ${this.maxlength}` : `${count}`;\n\n    return html`\n      <div part=\"counter\" class=\"field__counter\" id=${this._counterId} aria-live=\"polite\">\n        ${display}\n      </div>\n    `;\n  }\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n    };\n\n    // P0-02 fix: help text container renders when slot is used OR property is set\n    const hasHelpText = (!!this.helpText || this._hasHelpTextSlot) && !hasError;\n\n    const describedBy =\n      [\n        hasError ? this._errorId : null,\n        hasHelpText ? this._helpTextId : null,\n        this.showCount ? this._counterId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label\n              ? html`\n                  <label part=\"label\" class=\"field__label\" for=${this._textareaId}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <div part=\"textarea-wrapper\" class=\"field__textarea-wrapper\">\n          <textarea\n            part=\"textarea\"\n            class=\"field__textarea\"\n            id=${this._textareaId}\n            .value=${live(this.value)}\n            placeholder=${ifDefined(this.placeholder || undefined)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            rows=${this.rows}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            name=${ifDefined(this.name || undefined)}\n            aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n            aria-labelledby=${ifDefined(\n              this._hasLabelSlot ? `${this._textareaId}-slotted-label` : undefined,\n            )}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            @input=${this._handleInput}\n            @change=${this._handleChange}\n          ></textarea>\n        </div>\n\n        ${this._renderCounter()}\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>${this.error}</slot>\n              </div>\n            `\n          : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n        ${hasHelpText\n          ? html`\n              <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}>\n                  ${this.helpText}\n                </slot>\n              </div>\n            `\n          : html`<slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}></slot>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-textarea': HelixTextarea;\n  }\n}\n\nexport type WcTextarea = HelixTextarea;\n"],"names":["helixTextareaStyles","css","_hxTextareaIdCounter","HelixTextarea","LitElement","slot","slottedLabel","changedProperties","clamped","anchor","state","target","options","_a","nothing","count","display","html","hasError","fieldClasses","hasHelpText","describedBy","classMap","live","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOnC,IAAIC,IAAuB,GAyCdC,IAAN,cAA4BC,EAAW;AAAA,EAW5C,cAAc;AACZ,UAAA,GAWF,KAAA,QAAQ,IAOR,KAAA,cAAc,IAOd,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,OAAO,IAQP,KAAA,OAAO,GAqBP,KAAA,SAAgD,YAOhD,KAAA,YAAY,IAOZ,KAAS,YAA2B,MAW3B,KAAQ,gBAAgB,IAExB,KAAQ,gBAAgB,IAExB,KAAQ,mBAAmB,IAwLpC,KAAQ,cAAc,eAAe,EAAEF,CAAoB,IAE3D,KAAQ,cAAc,GAAG,KAAK,WAAW,SAEzC,KAAQ,WAAW,GAAG,KAAK,WAAW,UAEtC,KAAQ,aAAa,GAAG,KAAK,WAAW,YAnTtC,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA,EAuHQ,uBAAuB,GAAgB;AAC7C,UAAMG,IAAO,EAAE;AAEf,QADA,KAAK,gBAAgBA,EAAK,iBAAA,EAAmB,SAAS,GAClD,KAAK,eAAe;AACtB,YAAMC,IAAeD,EAAK,iBAAA,EAAmB,CAAC;AAC9C,MAAIC,KAAgB,CAACA,EAAa,OAChCA,EAAa,KAAK,GAAG,KAAK,WAAW;AAAA,IAEzC;AAAA,EACF;AAAA;AAAA,EAGQ,uBAAuB,GAAgB;AAC7C,UAAMD,IAAO,EAAE;AACf,SAAK,gBAAgBA,EAAK,iBAAA,EAAmB,SAAS;AAAA,EACxD;AAAA;AAAA,EAGQ,0BAA0B,GAAgB;AAChD,UAAMA,IAAO,EAAE;AACf,SAAK,mBAAmBA,EAAK,iBAAA,EAAmB,SAAS;AAAA,EAC3D;AAAA;AAAA,EAIS,QAAQE,GAA+C;AAE9D,QADA,MAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,MAAM,GAAG;AACjC,YAAMC,IAAU,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,IAAI,CAAC;AACjD,MAAIA,MAAY,KAAK,SACnB,KAAK,OAAOA;AAAA,IAEhB;AACA,IAAID,EAAkB,IAAI,OAAO,KAC/B,KAAK,WAAW,aAAa,KAAK,KAAK,IAGvCA,EAAkB,IAAI,OAAO,KAC7BA,EAAkB,IAAI,UAAU,KAChCA,EAAkB,IAAI,WAAW,KACjCA,EAAkB,IAAI,WAAW,MAEjC,KAAK,gBAAA,GAGHA,EAAkB,IAAI,OAAO,KAAK,KAAK,WAAW,UAAU,KAAK,cACnE,KAAK,UAAU,MAAM,SAAS,QAC9B,KAAK,UAAU,MAAM,SAAS,GAAG,KAAK,UAAU,YAAY;AAAA,EAEhE;AAAA;AAAA;AAAA,EAKA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,oBAA4B;AAC9B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,WAA0B;AAC5B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,gBAAyB;AACvB,WAAO,KAAK,WAAW,cAAA;AAAA,EACzB;AAAA;AAAA,EAGA,iBAA0B;AACxB,WAAO,KAAK,WAAW,eAAA;AAAA,EACzB;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,UAAME,IAAS,KAAK,aAAa;AACjC,IAAI,KAAK,YAAY,CAAC,KAAK,QACzB,KAAK,WAAW;AAAA,MACd,EAAE,cAAc,GAAA;AAAA,MAChB,KAAK,SAAS;AAAA,MACdA;AAAA,IAAA,IAGF,KAAK,cAAc,UACnB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,KAAK,YAEzB,KAAK,WAAW;AAAA,MACd,EAAE,UAAU,GAAA;AAAA,MACZ,KAAK,SAAS,0BAA0B,KAAK,SAAS;AAAA,MACtDA;AAAA,IAAA,IAEO,KAAK,cAAc,UAAa,KAAK,MAAM,SAAS,KAAK,YAClE,KAAK,WAAW;AAAA,MACd,EAAE,SAAS,GAAA;AAAA,MACX,KAAK,SAAS,iBAAiB,KAAK,SAAS;AAAA,MAC7CA;AAAA,IAAA,IAGF,KAAK,WAAW,YAAY,EAAE;AAAA,EAElC;AAAA;AAAA,EAGA,oBAA0B;AACxB,SAAK,QAAQ,IACb,KAAK,WAAW,aAAa,EAAE;AAAA,EACjC;AAAA;AAAA,EAGA,yBAAyBC,GAAqB;AAC5C,SAAK,QAAQA;AAAAA,EACf;AAAA;AAAA;AAAA,EAKQ,aAAa,GAAgB;AACnC,UAAMC,IAAS,EAAE;AACjB,SAAK,QAAQA,EAAO,OAIhB,KAAK,WAAW,WAClBA,EAAO,MAAM,SAAS,QACtBA,EAAO,MAAM,SAAS,GAAGA,EAAO,YAAY,OAO9C,KAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,cAAc,GAAgB;AACpC,UAAMA,IAAS,EAAE;AACjB,SAAK,QAAQA,EAAO,OACpB,KAAK,WAAW,aAAa,KAAK,KAAK,GACvC,KAAK,gBAAA,GAML,KAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKS,MAAMC,GAA8B;;AAC3C,KAAAC,IAAA,KAAK,cAAL,QAAAA,EAAgB,MAAMD;AAAA,EACxB;AAAA;AAAA,EAGA,SAAe;;AACb,KAAAC,IAAA,KAAK,cAAL,QAAAA,EAAgB;AAAA,EAClB;AAAA;AAAA,EAcQ,iBAAiB;AACvB,QAAI,CAAC,KAAK,UAAW,QAAOC;AAE5B,UAAMC,IAAQ,KAAK,MAAM,QACnBC,IAAU,KAAK,cAAc,SAAY,GAAGD,CAAK,MAAM,KAAK,SAAS,KAAK,GAAGA,CAAK;AAExF,WAAOE;AAAA,sDAC2C,KAAK,UAAU;AAAA,UAC3DD,CAAO;AAAA;AAAA;AAAA,EAGf;AAAA,EAES,SAAS;AAChB,UAAME,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,eAEhCC,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,gBAAgBD;AAAA,MAChB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,IAAA,GAIpBE,KAAe,CAAC,CAAC,KAAK,YAAY,KAAK,qBAAqB,CAACF,GAE7DG,IACJ;AAAA,MACEH,IAAW,KAAK,WAAW;AAAA,MAC3BE,IAAc,KAAK,cAAc;AAAA,MACjC,KAAK,YAAY,KAAK,aAAa;AAAA,IAAA,EAElC,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAElB,WAAOH;AAAA,gCACqBK,EAASH,CAAY,CAAC;AAAA;AAAA,2CAEX,KAAK,sBAAsB;AAAA,cACxD,KAAK,QACHF;AAAA,iEACiD,KAAK,WAAW;AAAA,sBAC3D,KAAK,KAAK;AAAA,sBACV,KAAK,WACHA,sEACAH,CAAO;AAAA;AAAA,oBAGfA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQN,KAAK,WAAW;AAAA,qBACZS,EAAK,KAAK,KAAK,CAAC;AAAA,0BACXC,EAAU,KAAK,eAAe,MAAS,CAAC;AAAA,wBAC1C,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,mBAClB,KAAK,IAAI;AAAA,wBACJA,EAAU,KAAK,SAAS,CAAC;AAAA,wBACzBA,EAAU,KAAK,SAAS,CAAC;AAAA,mBAC9BA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,yBAC3BA,EAAU,KAAK,aAAa,MAAS,CAAC;AAAA,8BACjCA;AAAA,MAChB,KAAK,gBAAgB,GAAG,KAAK,WAAW,mBAAmB;AAAA,IAAA,CAC5D;AAAA,2BACcN,IAAW,SAASJ,CAAO;AAAA,+BACvBU,EAAUH,CAAW,CAAC;AAAA,qBAChC,KAAK,YAAY;AAAA,sBAChB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,UAI9B,KAAK,gBAAgB;AAAA,UACrBH,IACED;AAAA,0DAC8C,KAAK,QAAQ;AAAA,iDACtB,KAAK,sBAAsB,IAAI,KAAK,KAAK;AAAA;AAAA,gBAG9EA,mCAAsC,KAAK,sBAAsB,UAAU;AAAA,UAC7EG,IACEH;AAAA,kEACsD,KAAK,WAAW;AAAA,qDAC7B,KAAK,yBAAyB;AAAA,oBAC/D,KAAK,QAAQ;AAAA;AAAA;AAAA,gBAIrBA,uCAA0C,KAAK,yBAAyB,UAAU;AAAA;AAAA;AAAA,EAG5F;AACF;AAnaad,EACK,SAAS,CAACsB,GAAazB,CAAmB;AAD/CG,EAMJ,iBAAiB;AAiBxBuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBfxB,EAuBX,WAAA,SAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7BfxB,EA8BX,WAAA,eAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfxB,EAqCX,WAAA,SAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3C/BxB,EA4CX,WAAA,YAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlD/BxB,EAmDX,WAAA,YAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzDfxB,EA0DX,WAAA,SAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAhEvCxB,EAiEX,WAAA,YAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvEfxB,EAwEX,WAAA,QAAA,CAAA;AAQAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/EfxB,EAgFX,WAAA,QAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAtFvCxB,EAuFX,WAAA,aAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA7FvCxB,EA8FX,WAAA,aAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApG9BxB,EAqGX,WAAA,UAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc;AAAA,GA3GzCxB,EA4GX,WAAA,aAAA,CAAA;AAOSuB,EAAA;AAAA,EADRC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAlHxCxB,EAmHF,WAAA,aAAA,CAAA;AAMDuB,EAAA;AAAA,EADPE,EAAM,kBAAkB;AAAA,GAxHdzB,EAyHH,WAAA,aAAA,CAAA;AAKSuB,EAAA;AAAA,EAAhBhB,EAAA;AAAM,GA9HIP,EA8HM,WAAA,iBAAA,CAAA;AAEAuB,EAAA;AAAA,EAAhBhB,EAAA;AAAM,GAhIIP,EAgIM,WAAA,iBAAA,CAAA;AAEAuB,EAAA;AAAA,EAAhBhB,EAAA;AAAM,GAlIIP,EAkIM,WAAA,oBAAA,CAAA;AAlINA,IAANuB,EAAA;AAAA,EADNG,EAAc,aAAa;AAAA,GACf1B,CAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helixui/library",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Enterprise Web Component Library built with Lit 3.x",
   "type": "module",
   "sideEffects": [

package/dist/shared/hx-accordion-C84oGPj7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-accordion-C84oGPj7.js","sources":["../../src/components/hx-accordion/hx-accordion.styles.ts","../../src/components/hx-accordion/hx-accordion-item.styles.ts","../../src/components/hx-accordion/hx-accordion-item.ts","../../src/components/hx-accordion/hx-accordion.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAccordionStyles = css`\n  :host {\n    display: block;\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  .accordion {\n    border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));\n    overflow: hidden;\n  }\n`;\n","import { css } from 'lit';\n\nexport const helixAccordionItemStyles = css`\n  :host {\n    display: block;\n  }\n\n  .item {\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #dee2e6));\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  :host(:first-child) .item {\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  /* Remove native details marker */\n  .trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-accordion-trigger-padding, var(--hx-space-4, 1rem));\n    cursor: pointer;\n    list-style: none;\n    font-size: var(--hx-font-size-md, 1rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-accordion-trigger-color, var(--hx-color-neutral-800, #212529));\n    background-color: var(--hx-accordion-trigger-bg, transparent);\n    user-select: none;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* Hide the native details disclosure triangle */\n  .trigger::-webkit-details-marker {\n    display: none;\n  }\n\n  .trigger::marker {\n    display: none;\n  }\n\n  .item--disabled .trigger {\n    cursor: not-allowed;\n  }\n\n  :host(:not([disabled])) .trigger:hover {\n    background-color: var(--hx-accordion-trigger-hover-bg, var(--hx-color-neutral-50, #f8f9fa));\n  }\n\n  .trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n  }\n\n  /* ─── Icon ─── */\n\n  .icon {\n    flex-shrink: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--hx-accordion-icon-color, var(--hx-color-neutral-500, #6c757d));\n    transition: transform var(--hx-transition-normal, 250ms ease);\n  }\n\n  .item--expanded .icon {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Content animation via CSS grid trick ─── */\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--hx-transition-normal, 250ms ease);\n    overflow: hidden;\n  }\n\n  .item--expanded .content-wrapper,\n  details[open]:not(.item--expanded) .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    overflow: hidden;\n  }\n\n  .content {\n    padding: var(--hx-accordion-content-padding, 0 var(--hx-space-4, 1rem) var(--hx-space-4, 1rem));\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    color: var(--hx-accordion-content-color, var(--hx-color-neutral-600, #495057));\n  }\n\n  /* ─── Disabled host ─── */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .trigger {\n      transition: none;\n    }\n\n    .icon {\n      transition: none;\n    }\n\n    .content-wrapper {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, svg, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAccordionItemStyles } from './hx-accordion-item.styles.js';\n\nconst chevronIcon = svg`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <polyline points=\"6 9 12 15 18 9\"></polyline>\n  </svg>\n`;\n\n/**\n * An individual accordion item with collapsible content.\n *\n * @summary Collapsible panel that can be expanded or collapsed.\n *\n * @tag hx-accordion-item\n *\n * @slot trigger - The heading/trigger content for this item.\n * @slot - Default slot for the collapsible body content.\n *\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-expand - Dispatched when the item is expanded.\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-collapse - Dispatched when the item is collapsed.\n *\n * @csspart item - The outer details element container.\n * @csspart trigger - The summary/trigger element.\n * @csspart content - The collapsible content area.\n * @csspart icon - The expand/collapse icon.\n *\n * @cssprop [--hx-accordion-border-color=var(--hx-color-neutral-200)] - Border color between items.\n * @cssprop [--hx-accordion-trigger-padding=var(--hx-space-4)] - Trigger padding.\n * @cssprop [--hx-accordion-trigger-color=var(--hx-color-neutral-800)] - Trigger text color.\n * @cssprop [--hx-accordion-trigger-bg=transparent] - Trigger background color.\n * @cssprop [--hx-accordion-trigger-hover-bg=var(--hx-color-neutral-50)] - Trigger hover background.\n * @cssprop [--hx-accordion-icon-color=var(--hx-color-neutral-500)] - Icon color.\n * @cssprop [--hx-accordion-content-padding=0 var(--hx-space-4) var(--hx-space-4)] - Content padding.\n * @cssprop [--hx-accordion-content-color=var(--hx-color-neutral-600)] - Content text color.\n */\n@customElement('hx-accordion-item')\nexport class HelixAccordionItem extends LitElement {\n  static override styles = [tokenStyles, helixAccordionItemStyles];\n\n  /**\n   * Whether this item is expanded.\n   * @attr expanded\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Whether this item is disabled (cannot be toggled).\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Toggle Logic ───\n\n  private _toggle(): void {\n    if (this.disabled) return;\n\n    const willExpand = !this.expanded;\n    this.expanded = willExpand;\n\n    this._dispatchToggleEvent(willExpand);\n  }\n\n  _dispatchToggleEvent(expanded: boolean): void {\n    const detail = { expanded, itemId: this.id || '' };\n    const eventName = expanded ? 'hx-expand' : 'hx-collapse';\n\n    this.dispatchEvent(\n      new CustomEvent(eventName, {\n        bubbles: true,\n        composed: true,\n        detail,\n      }),\n    );\n  }\n\n  // ─── Event Handlers ───\n\n  private _handleSummaryClick(e: MouseEvent): void {\n    e.preventDefault();\n    this._toggle();\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._toggle();\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const itemClasses = {\n      item: true,\n      'item--expanded': this.expanded,\n      'item--disabled': this.disabled,\n    };\n\n    return html`\n      <details part=\"item\" class=${classMap(itemClasses)} ?open=${this.expanded}>\n        <summary\n          id=\"trigger\"\n          part=\"trigger\"\n          class=\"trigger\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-expanded=${this.expanded ? 'true' : 'false'}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          @click=${this._handleSummaryClick}\n          @keydown=${this._handleKeyDown}\n        >\n          <slot name=\"trigger\"></slot>\n          <span part=\"icon\" class=\"icon\">${chevronIcon}</span>\n        </summary>\n        <div class=\"content-wrapper\">\n          <div class=\"content-inner\">\n            <div\n              part=\"content\"\n              class=\"content\"\n              role=\"region\"\n              aria-labelledby=\"trigger\"\n              aria-hidden=${this.expanded ? nothing : 'true'}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </details>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-accordion-item': HelixAccordionItem;\n  }\n}\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAccordionStyles } from './hx-accordion.styles.js';\nimport './hx-accordion-item.js';\nimport type { HelixAccordionItem } from './hx-accordion-item.js';\n\n/**\n * An accordion container that manages collapsible content sections.\n *\n * @summary Collapsible content sections with single or multi-expand modes.\n *\n * @tag hx-accordion\n *\n * @slot - Default slot for hx-accordion-item elements.\n *\n * @cssprop [--hx-accordion-border-radius=var(--hx-border-radius-md)] - Outer border radius.\n *\n * @example\n * ```html\n * <hx-accordion mode=\"single\">\n *   <hx-accordion-item>\n *     <span slot=\"trigger\">What is this?</span>\n *     <p>Answer content here.</p>\n *   </hx-accordion-item>\n * </hx-accordion>\n * ```\n */\n@customElement('hx-accordion')\nexport class HelixAccordion extends LitElement {\n  static override styles = [tokenStyles, helixAccordionStyles];\n\n  /**\n   * Expansion mode: 'single' collapses all other items when one expands.\n   * 'multi' allows multiple items open simultaneously.\n   * @attr mode\n   */\n  @property({ type: String, reflect: true })\n  mode: 'single' | 'multi' = 'single';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-expand', this._handleChildExpand as EventListener);\n    this.addEventListener('keydown', this._handleKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-expand', this._handleChildExpand as EventListener);\n    this.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  protected override firstUpdated(): void {\n    this._enforceSingleMode();\n  }\n\n  // ─── Single-expand coordination ───\n\n  private _enforceSingleMode(): void {\n    if (this.mode !== 'single') return;\n\n    const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n    let foundExpanded = false;\n\n    items.forEach((item) => {\n      if (item.expanded) {\n        if (foundExpanded) {\n          item.expanded = false;\n        } else {\n          foundExpanded = true;\n        }\n      }\n    });\n  }\n\n  private _handleChildExpand(e: CustomEvent<{ expanded: boolean; itemId: string }>): void {\n    if (this.mode !== 'single') return;\n\n    const expandedItem = e.composedPath()[0] as HelixAccordionItem;\n    const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n\n    items.forEach((item) => {\n      if (item !== expandedItem && item.expanded) {\n        item.expanded = false;\n        item._dispatchToggleEvent(false);\n      }\n    });\n  }\n\n  // ─── Arrow key navigation (ARIA APG Accordion pattern) ───\n\n  private _handleKeyDown = (e: KeyboardEvent): void => {\n    const triggers = this._getTriggers();\n    if (triggers.length === 0) return;\n\n    const activeEl = this.shadowRoot?.activeElement ?? document.activeElement;\n    let currentItem: HelixAccordionItem | null = null;\n\n    const items = Array.from(this.querySelectorAll<HelixAccordionItem>('hx-accordion-item'));\n    for (const item of items) {\n      const summary = item.shadowRoot?.querySelector('summary');\n      if (summary === activeEl || item.shadowRoot?.activeElement === summary) {\n        currentItem = item;\n        break;\n      }\n    }\n\n    if (!currentItem) return;\n\n    const enabledItems = items.filter((item) => !item.disabled);\n    const currentIndex = enabledItems.indexOf(currentItem);\n    if (currentIndex === -1) return;\n\n    let targetIndex = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        targetIndex = (currentIndex + 1) % enabledItems.length;\n        break;\n      case 'ArrowUp':\n        targetIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;\n        break;\n      case 'Home':\n        targetIndex = 0;\n        break;\n      case 'End':\n        targetIndex = enabledItems.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    e.preventDefault();\n    const targetItem = enabledItems[targetIndex];\n    const targetSummary = targetItem?.shadowRoot?.querySelector('summary');\n    targetSummary?.focus();\n  };\n\n  private _getTriggers(): HTMLElement[] {\n    const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n    const triggers: HTMLElement[] = [];\n    items.forEach((item) => {\n      const summary = item.shadowRoot?.querySelector<HTMLElement>('summary');\n      if (summary) triggers.push(summary);\n    });\n    return triggers;\n  }\n\n  // ─── Slot validation ───\n\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target;\n    if (!(slot instanceof HTMLSlotElement)) return;\n    const invalid = slot\n      .assignedElements()\n      .filter((el) => el.tagName.toLowerCase() !== 'hx-accordion-item');\n    if (invalid.length > 0) {\n      console.warn(\n        `[hx-accordion] Default slot expects <hx-accordion-item> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"accordion\" class=\"accordion\">\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-accordion': HelixAccordion;\n  }\n}\n"],"names":["helixAccordionStyles","css","helixAccordionItemStyles","chevronIcon","svg","HelixAccordionItem","LitElement","willExpand","expanded","detail","eventName","itemClasses","html","classMap","nothing","tokenStyles","__decorateClass","property","customElement","HelixAccordion","activeEl","_a","currentItem","items","item","summary","_b","_c","enabledItems","currentIndex","targetIndex","targetItem","targetSummary","_d","foundExpanded","expandedItem","triggers","slot","invalid","el"],"mappings":"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"}

package/dist/shared/hx-action-bar-DxpGLABm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-action-bar-DxpGLABm.js","sources":["../../src/components/hx-action-bar/hx-action-bar.styles.ts","../../src/components/hx-action-bar/hx-action-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixActionBarStyles = css`\n  :host {\n    display: block;\n  }\n\n  /* ─── Base ─── */\n\n  .base {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));\n    padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n    background: var(--hx-action-bar-bg, transparent);\n    border: var(--hx-action-bar-border, none);\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Sticky (top) ─── */\n\n  .base--sticky {\n    position: sticky;\n    top: 0;\n    padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));\n    z-index: var(--hx-action-bar-z-index, 10);\n    /*\n     * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container\n     * equal to the bar's rendered height so anchor targets are not hidden behind the bar.\n     * Example: .scroll-container { scroll-padding-top: 2.5rem; }\n     */\n  }\n\n  /* ─── Bottom sticky ─── */\n\n  .base--bottom {\n    position: sticky;\n    bottom: 0;\n    /*\n     * Respect iOS home-indicator safe area on devices with notch/home bar.\n     * Falls back to 0px on devices that do not support env().\n     */\n    padding-bottom: max(\n      var(--hx-action-bar-padding-block-end, 0px),\n      env(safe-area-inset-bottom, 0px)\n    );\n    z-index: var(--hx-action-bar-z-index, 10);\n  }\n\n  /* ─── Variant: outlined ─── */\n\n  .base--outlined {\n    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #fff));\n    border: var(\n      --hx-action-bar-border,\n      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb)\n    );\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Variant: filled ─── */\n\n  .base--filled {\n    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f9fafb));\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Size modifiers ─── */\n\n  .base--sm {\n    padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  .base--md {\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .base--lg {\n    padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Sections ─── */\n\n  .section {\n    display: flex;\n    align-items: center;\n    gap: inherit;\n  }\n\n  /*\n   * Equal flex-basis on start and end guarantees the center section is visually centered\n   * within the full bar width, regardless of how wide start and end content are.\n   */\n  .section--start {\n    flex: 1 1 0;\n    justify-content: flex-start;\n  }\n\n  .section--center {\n    flex: 0 0 auto;\n    justify-content: center;\n  }\n\n  .section--end {\n    flex: 1 1 0;\n    justify-content: flex-end;\n  }\n\n  /* ─── Slotted content ─── */\n\n  ::slotted(*) {\n    flex-shrink: 0;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixActionBarStyles } from './hx-action-bar.styles.js';\n\n/**\n * A horizontal toolbar container for grouping related action buttons and controls.\n * Implements the ARIA toolbar pattern with roving tabindex keyboard navigation.\n *\n * @summary Horizontal action bar for grouping related controls.\n *\n * @tag hx-action-bar\n *\n * @slot start - Left-aligned actions.\n * @slot - Center content (default slot).\n * @slot end - Right-aligned actions.\n * @slot overflow - Actions revealed when the bar is constrained for space.\n *\n * @csspart base - The root toolbar container element.\n * @csspart start - The start (left) slot wrapper.\n * @csspart center - The center (default) slot wrapper.\n * @csspart end - The end (right) slot wrapper.\n *\n * @cssprop [--hx-action-bar-bg=transparent] - Bar background color (default variant).\n * @cssprop [--hx-action-bar-border=none] - Bar border (default variant).\n * @cssprop [--hx-action-bar-padding=var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)] - Inner padding.\n * @cssprop [--hx-action-bar-gap=var(--hx-space-2,0.5rem)] - Gap between slotted items.\n * @cssprop [--hx-action-bar-z-index=10] - Z-index when sticky or bottom position.\n *\n * @attr {string} aria-label - Required. Identifies the toolbar to assistive technology.\n *   When multiple toolbars appear on the same page, each must have a unique, descriptive label.\n *\n * @example\n * ```html\n * <hx-action-bar aria-label=\"Patient actions\">\n *   <hx-button slot=\"start\">Save</hx-button>\n *   <hx-button slot=\"end\" variant=\"ghost\">Cancel</hx-button>\n * </hx-action-bar>\n * ```\n */\n@customElement('hx-action-bar')\nexport class HelixActionBar extends LitElement {\n  static override styles = [tokenStyles, helixActionBarStyles];\n\n  /**\n   * Size of the action bar — propagated as a data attribute to slotted children.\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant controlling the bar background.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'outlined' | 'filled' = 'default';\n\n  /**\n   * Position and sticky behavior of the action bar.\n   * - `top` — normal flow (default)\n   * - `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n   *   scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n   * - `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support\n   * @attr position\n   */\n  @property({ type: String, reflect: true })\n  position: 'top' | 'bottom' | 'sticky' = 'top';\n\n  /**\n   * @deprecated Use `position=\"sticky\"` instead.\n   * When true, the bar sticks to the top of its scroll container.\n   * @attr sticky\n   */\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /**\n   * Accessible label for the toolbar.\n   * Required when multiple toolbars appear on the same page.\n   * @attr aria-label\n   */\n  @property({ attribute: 'aria-label' })\n  ariaLabel: string = 'Actions';\n\n  /** Cached list of focusable items — invalidated on slot change. */\n  private _focusableCache: HTMLElement[] | null = null;\n\n  /** Whether the overflow slot has assigned content. */\n  @state()\n  private _hasOverflow = false;\n\n  // ─── Lifecycle ───\n\n  /** Arrow function field — stable reference for add/removeEventListener. */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      this._moveFocus('next');\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      this._moveFocus('prev');\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      // Move directly to first item — do NOT call _moveFocus which would visit other items first.\n      const items = this._getFocusableItems();\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n        items[0]?.focus();\n      }\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      const items = this._getFocusableItems();\n      const last = items.length - 1;\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n        items[last]?.focus();\n      }\n    }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override firstUpdated(): void {\n    // Slot assignments are complete by firstUpdated; initialize roving tabindex\n    // immediately rather than waiting for the async slotchange event.\n    this._initRovingTabindex();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Focusable item discovery ───\n\n  private _isFocusable(el: HTMLElement): boolean {\n    // Check disabled via DOM attribute (native elements) or property (custom elements)\n    if (el.hasAttribute('disabled')) return false;\n    const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n    if (elWithDisabled.disabled === true) return false;\n\n    // Use the IDL tabIndex property — covers both DOM attribute and ElementInternals settings.\n    // Custom elements (e.g. hx-button) that set tabIndex via ElementInternals are discoverable.\n    if (el.tabIndex >= 0) return true;\n\n    const tag = el.tagName.toLowerCase();\n    return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n  }\n\n  private _getFocusableItems(): HTMLElement[] {\n    if (this._focusableCache) return this._focusableCache;\n\n    const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];\n    const items: HTMLElement[] = [];\n\n    for (const slot of Array.from(slots)) {\n      const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n      for (const el of assigned) {\n        if (!(el instanceof HTMLElement)) continue;\n        if (this._isFocusable(el)) {\n          // Element is itself focusable — include it and do NOT also recurse into its children\n          // to prevent double-counting compound components (e.g. <a><button>).\n          items.push(el);\n        } else {\n          // Element is a non-focusable wrapper (e.g. <div>, <span>) — find focusable children.\n          const descendants = el.querySelectorAll<HTMLElement>('*');\n          for (const d of Array.from(descendants)) {\n            if (this._isFocusable(d)) {\n              items.push(d);\n            }\n          }\n        }\n      }\n    }\n\n    this._focusableCache = items;\n    return items;\n  }\n\n  // ─── Roving tabindex helpers ───\n\n  private _initRovingTabindex(): void {\n    this._focusableCache = null; // invalidate cache on slot change\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n    const hasActive = items.some((el) => el.getAttribute('tabindex') === '0');\n    items.forEach((el, i) => {\n      el.setAttribute('tabindex', !hasActive && i === 0 ? '0' : '-1');\n    });\n  }\n\n  private _moveFocus(direction: 'next' | 'prev'): void {\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n\n    const focused = document.activeElement as HTMLElement | null;\n    const currentIndex = items.indexOf(focused as HTMLElement);\n\n    let nextIndex: number;\n    if (direction === 'next') {\n      nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n    } else {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n    }\n\n    items.forEach((el, i) => {\n      el.setAttribute('tabindex', i === nextIndex ? '0' : '-1');\n    });\n\n    items[nextIndex]?.focus();\n  }\n\n  // ─── Event Handlers ───\n\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    if (slot.name === 'overflow') {\n      this._hasOverflow = slot.assignedElements({ flatten: true }).length > 0;\n    }\n    this._initRovingTabindex();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isSticky = this.position === 'sticky' || this.sticky;\n    const isBottom = this.position === 'bottom';\n    const positionClass = isSticky ? ' base--sticky' : isBottom ? ' base--bottom' : '';\n\n    return html`\n      <div\n        part=\"base\"\n        role=\"toolbar\"\n        aria-label=${this.ariaLabel}\n        class=\"base base--${this.size} base--${this.variant}${positionClass}\"\n      >\n        <div part=\"start\" class=\"section section--start\">\n          <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"center\" class=\"section section--center\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"end\" class=\"section section--end\">\n          <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div class=\"section section--overflow\" ?hidden=${!this._hasOverflow}>\n          <slot name=\"overflow\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-action-bar': HelixActionBar;\n  }\n}\n"],"names":["helixActionBarStyles","css","HelixActionBar","LitElement","items","el","i","_a","last","_b","tag","slots","slot","assigned","descendants","d","hasActive","direction","focused","currentIndex","nextIndex","isSticky","isBottom","positionClass","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACuC7B,IAAMC,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,OAA2B,MAO3B,KAAA,UAA6C,WAW7C,KAAA,WAAwC,OAQxC,KAAA,SAAS,IAQT,KAAA,YAAoB,WAGpB,KAAQ,kBAAwC,MAIhD,KAAQ,eAAe,IAKvB,KAAQ,iBAAiB,CAAC,MAA2B;;AACnD,UAAI,EAAE,QAAQ;AACZ,UAAE,eAAA,GACF,KAAK,WAAW,MAAM;AAAA,eACb,EAAE,QAAQ;AACnB,UAAE,eAAA,GACF,KAAK,WAAW,MAAM;AAAA,eACb,EAAE,QAAQ,QAAQ;AAC3B,UAAE,eAAA;AAEF,cAAMC,IAAQ,KAAK,mBAAA;AACnB,QAAIA,EAAM,WACRA,EAAM,QAAQ,CAACC,GAAIC,MAAMD,EAAG,aAAa,YAAYC,MAAM,IAAI,MAAM,IAAI,CAAC,IAC1EC,IAAAH,EAAM,CAAC,MAAP,QAAAG,EAAU;AAAA,MAEd,WAAW,EAAE,QAAQ,OAAO;AAC1B,UAAE,eAAA;AACF,cAAMH,IAAQ,KAAK,mBAAA,GACbI,IAAOJ,EAAM,SAAS;AAC5B,QAAIA,EAAM,WACRA,EAAM,QAAQ,CAACC,GAAIC,MAAMD,EAAG,aAAa,YAAYC,MAAME,IAAO,MAAM,IAAI,CAAC,IAC7EC,IAAAL,EAAMI,CAAI,MAAV,QAAAC,EAAa;AAAA,MAEjB;AAAA,IACF;AAAA,EAAA;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,eAAqB;AAG5B,SAAK,oBAAA;AAAA,EACP;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA;AAAA,EAIQ,aAAaJ,GAA0B;AAI7C,QAFIA,EAAG,aAAa,UAAU,KACPA,EACJ,aAAa,GAAM,QAAO;AAI7C,QAAIA,EAAG,YAAY,EAAG,QAAO;AAE7B,UAAMK,IAAML,EAAG,QAAQ,YAAA;AACvB,WAAOK,MAAQ,YAAYA,MAAQ,WAAWA,MAAQ,YAAYA,MAAQ;AAAA,EAC5E;AAAA,EAEQ,qBAAoC;;AAC1C,QAAI,KAAK,gBAAiB,QAAO,KAAK;AAEtC,UAAMC,MAAQJ,IAAA,KAAK,eAAL,gBAAAA,EAAiB,iBAAiB,YAAW,CAAA,GACrDH,IAAuB,CAAA;AAE7B,eAAWQ,KAAQ,MAAM,KAAKD,CAAK,GAAG;AACpC,YAAME,IAAYD,EAAyB,iBAAiB,EAAE,SAAS,IAAM;AAC7E,iBAAWP,KAAMQ;AACf,YAAMR,aAAc;AACpB,cAAI,KAAK,aAAaA,CAAE;AAGtB,YAAAD,EAAM,KAAKC,CAAE;AAAA,eACR;AAEL,kBAAMS,IAAcT,EAAG,iBAA8B,GAAG;AACxD,uBAAWU,KAAK,MAAM,KAAKD,CAAW;AACpC,cAAI,KAAK,aAAaC,CAAC,KACrBX,EAAM,KAAKW,CAAC;AAAA,UAGlB;AAAA,IAEJ;AAEA,gBAAK,kBAAkBX,GAChBA;AAAA,EACT;AAAA;AAAA,EAIQ,sBAA4B;AAClC,SAAK,kBAAkB;AACvB,UAAMA,IAAQ,KAAK,mBAAA;AACnB,QAAI,CAACA,EAAM,OAAQ;AACnB,UAAMY,IAAYZ,EAAM,KAAK,CAACC,MAAOA,EAAG,aAAa,UAAU,MAAM,GAAG;AACxE,IAAAD,EAAM,QAAQ,CAACC,GAAIC,MAAM;AACvB,MAAAD,EAAG,aAAa,YAAY,CAACW,KAAaV,MAAM,IAAI,MAAM,IAAI;AAAA,IAChE,CAAC;AAAA,EACH;AAAA,EAEQ,WAAWW,GAAkC;;AACnD,UAAMb,IAAQ,KAAK,mBAAA;AACnB,QAAI,CAACA,EAAM,OAAQ;AAEnB,UAAMc,IAAU,SAAS,eACnBC,IAAef,EAAM,QAAQc,CAAsB;AAEzD,QAAIE;AACJ,IAAIH,MAAc,SAChBG,IAAYD,IAAef,EAAM,SAAS,IAAIe,IAAe,IAAI,IAEjEC,IAAYD,IAAe,IAAIA,IAAe,IAAIf,EAAM,SAAS,GAGnEA,EAAM,QAAQ,CAACC,GAAIC,MAAM;AACvB,MAAAD,EAAG,aAAa,YAAYC,MAAMc,IAAY,MAAM,IAAI;AAAA,IAC1D,CAAC,IAEDb,IAAAH,EAAMgB,CAAS,MAAf,QAAAb,EAAkB;AAAA,EACpB;AAAA;AAAA,EAIQ,kBAAkB,GAAgB;AACxC,UAAMK,IAAO,EAAE;AACf,IAAIA,EAAK,SAAS,eAChB,KAAK,eAAeA,EAAK,iBAAiB,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS,IAExE,KAAK,oBAAA;AAAA,EACP;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMS,IAAW,KAAK,aAAa,YAAY,KAAK,QAC9CC,IAAW,KAAK,aAAa,UAC7BC,IAAgBF,IAAW,kBAAkBC,IAAW,kBAAkB;AAEhF,WAAOE;AAAA;AAAA;AAAA;AAAA,qBAIU,KAAK,SAAS;AAAA,4BACP,KAAK,IAAI,UAAU,KAAK,OAAO,GAAGD,CAAa;AAAA;AAAA;AAAA,2CAGhC,KAAK,iBAAiB;AAAA;AAAA;AAAA,8BAGnC,KAAK,iBAAiB;AAAA;AAAA;AAAA,yCAGX,KAAK,iBAAiB;AAAA;AAAA,yDAEN,CAAC,KAAK,YAAY;AAAA,8CAC7B,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAIlE;AACF;AAtNarB,EACK,SAAS,CAACuB,GAAazB,CAAoB;AAO3D0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BzB,EAQX,WAAA,QAAA,CAAA;AAOAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BzB,EAeX,WAAA,WAAA,CAAA;AAWAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzB9BzB,EA0BX,WAAA,YAAA,CAAA;AAQAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjC/BzB,EAkCX,WAAA,UAAA,CAAA;AAQAwB,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,aAAA,CAAc;AAAA,GAzC1BzB,EA0CX,WAAA,aAAA,CAAA;AAOQwB,EAAA;AAAA,EADPE,EAAA;AAAM,GAhDI1B,EAiDH,WAAA,gBAAA,CAAA;AAjDGA,IAANwB,EAAA;AAAA,EADNG,EAAc,eAAe;AAAA,GACjB3B,CAAA;"}

package/dist/shared/hx-avatar-ekyZvOCm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-avatar-ekyZvOCm.js","sources":["../../src/components/hx-avatar/hx-avatar.styles.ts","../../src/components/hx-avatar/hx-avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAvatarStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */\n  .avatar-wrapper {\n    position: relative;\n    display: inline-flex;\n  }\n\n  .avatar {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    width: var(--hx-avatar-size);\n    height: var(--hx-avatar-size);\n    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));\n    color: var(--hx-avatar-color, var(--hx-color-primary-700));\n    border-radius: var(--hx-avatar-border-radius);\n    flex-shrink: 0;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .avatar--xs {\n    --hx-avatar-size: var(--hx-size-6, 1.5rem);\n    --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);\n  }\n\n  .avatar--sm {\n    --hx-avatar-size: var(--hx-size-8, 2rem);\n    --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  .avatar--md {\n    --hx-avatar-size: var(--hx-size-10, 2.5rem);\n    --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .avatar--lg {\n    --hx-avatar-size: var(--hx-size-12, 3rem);\n    --hx-avatar-font-size: var(--hx-font-size-base, 1rem);\n  }\n\n  .avatar--xl {\n    --hx-avatar-size: var(--hx-size-16, 4rem);\n    --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);\n  }\n\n  /* ─── Shape Variants ─── */\n\n  .avatar--circle {\n    --hx-avatar-border-radius: 50%;\n  }\n\n  .avatar--square {\n    --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Image ─── */\n\n  .avatar__image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  /* ─── Initials ─── */\n\n  .avatar__initials {\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-avatar-font-size);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    line-height: 1;\n    text-transform: uppercase;\n    letter-spacing: var(--hx-letter-spacing-wide, 0.025em);\n    user-select: none;\n  }\n\n  /* ─── Fallback Icon ─── */\n\n  .avatar__fallback-icon {\n    width: 60%;\n    height: 60%;\n    color: var(--hx-avatar-color, var(--hx-color-primary-700));\n  }\n\n  /* ─── Badge Slot ─── */\n\n  /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */\n  .avatar__badge {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n  }\n\n  /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */\n  .avatar__badge--hidden {\n    display: none;\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAvatarStyles } from './hx-avatar.styles.js';\n\n/**\n * A user avatar component that displays an image, initials, or a fallback icon.\n * Supports a badge slot for status indicator overlays.\n *\n * @summary User avatar with image, initials, and fallback icon support for healthcare applications.\n *\n * @tag hx-avatar\n *\n * @slot - Default slot for custom avatar content. Overrides src and initials when slotted content is present.\n * @slot badge - Status indicator overlay, positioned at the bottom-right of the avatar container.\n *\n * @csspart avatar - The outer container element.\n * @csspart image - The img element shown when src is provided.\n * @csspart initials - The initials text span shown as a fallback.\n * @csspart fallback-icon - The SVG person silhouette shown when no src or initials are available.\n * @csspart badge - The badge slot container.\n *\n * @cssprop [--hx-avatar-size] - Computed width and height from the size variant.\n * @cssprop [--hx-avatar-border-radius] - Circle = 50%, Square = var(--hx-border-radius-md).\n * @cssprop [--hx-avatar-bg=var(--hx-color-primary-100)] - Background color of the avatar container.\n * @cssprop [--hx-avatar-color=var(--hx-color-primary-700)] - Text and icon color inside the avatar.\n * @cssprop [--hx-avatar-font-size] - Font size for the initials text, set per size variant.\n */\n@customElement('hx-avatar')\nexport class HelixAvatar extends LitElement {\n  static override styles = [tokenStyles, helixAvatarStyles];\n\n  /**\n   * Image URL. When provided and successfully loaded, displays the image.\n   * @attr src\n   */\n  @property({ type: String })\n  src: string | undefined = undefined;\n\n  /**\n   * Accessible label for the image. Required when `src` is provided.\n   * Used as the container's aria-label in image mode.\n   * @attr alt\n   */\n  @property({ type: String })\n  alt = '';\n\n  /**\n   * Human-readable accessible name for non-image states (initials, fallback icon).\n   * In healthcare contexts, provide the full person name (e.g., \"Dr. Jane Doe\") rather than\n   * relying on raw initials, which screen readers announce as individual letters.\n   * When set, takes precedence over raw initials and the generic \"Avatar\" fallback.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Fallback initials text displayed when no image is available.\n   * @attr initials\n   */\n  @property({ type: String })\n  initials = '';\n\n  /**\n   * Size variant of the avatar.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /**\n   * Shape variant of the avatar.\n   * @attr shape\n   */\n  @property({ type: String, reflect: true })\n  shape: 'circle' | 'square' = 'circle';\n\n  /**\n   * Tracks whether the image failed to load, triggering the fallback chain.\n   */\n  @state()\n  private _imgError = false;\n\n  /**\n   * Tracks whether the default slot has assigned content.\n   */\n  @state()\n  private _hasDefaultSlot = false;\n\n  /**\n   * Tracks whether the badge slot has assigned content.\n   */\n  @state()\n  private _hasBadgeSlot = false;\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues): void {\n    // P0-1: Reset image error state when src changes so a new valid src renders correctly.\n    if (changedProperties.has('src')) {\n      this._imgError = false;\n    }\n\n    // P1-2: Warn when src is provided without alt — silent accessibility failure in healthcare UIs.\n    if (changedProperties.has('src') || changedProperties.has('alt')) {\n      if (this.src && !this.alt) {\n        console.warn(\n          '[hx-avatar] Accessibility: \"alt\" attribute is required when \"src\" is provided. ' +\n            'Without alt text, screen readers announce a non-descriptive label. ' +\n            'Add alt=\"Full name or description\" to your hx-avatar element.',\n        );\n      }\n    }\n\n    // P2-1: Warn when invalid size or shape attribute values are used (e.g., from Twig templates).\n    const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n    if (changedProperties.has('size') && !validSizes.includes(this.size)) {\n      console.warn(\n        `[hx-avatar] Invalid hx-size=\"${String(this.size)}\". Valid values: xs, sm, md, lg, xl. Rendering with \"md\".`,\n      );\n    }\n    const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n    if (changedProperties.has('shape') && !validShapes.includes(this.shape)) {\n      console.warn(\n        `[hx-avatar] Invalid shape=\"${String(this.shape)}\". Valid values: circle, square. Rendering with \"circle\".`,\n      );\n    }\n  }\n\n  // ─── Slot Change Handling ───\n\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasDefaultSlot = nodes.some((node) => {\n      if (node.nodeType === Node.ELEMENT_NODE) return true;\n      if (node.nodeType === Node.TEXT_NODE) {\n        return (node.textContent ?? '').trim().length > 0;\n      }\n      return false;\n    });\n  }\n\n  private _handleBadgeSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasBadgeSlot = nodes.some((node) => {\n      if (node.nodeType === Node.ELEMENT_NODE) return true;\n      if (node.nodeType === Node.TEXT_NODE) {\n        return (node.textContent ?? '').trim().length > 0;\n      }\n      return false;\n    });\n  }\n\n  // ─── Image Error Handling ───\n\n  private _handleImgError(): void {\n    this._imgError = true;\n  }\n\n  // ─── Fallback Icon ───\n\n  private _renderFallbackIcon() {\n    return html`\n      <svg\n        part=\"fallback-icon\"\n        class=\"avatar__fallback-icon\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n        fill=\"currentColor\"\n      >\n        <path\n          d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\"\n        />\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const src = this.src;\n    const showSlot = this._hasDefaultSlot;\n    const showImage = !showSlot && !!src && !this._imgError;\n    const showInitials = !showSlot && !showImage && !!this.initials.trim();\n    const showFallback = !showSlot && !showImage && !showInitials;\n\n    // P1-1 / P1-7: Use label property for human-readable accessible name in non-image states.\n    const ariaLabel = showImage\n      ? this.alt || this.label || 'Avatar'\n      : showInitials\n        ? this.label || this.initials\n        : this.label || 'Avatar';\n\n    // P2-1: Safe class fallback for invalid attribute values supplied via HTML/Twig.\n    const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n    const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n    const sizeClass = validSizes.includes(this.size) ? this.size : 'md';\n    const shapeClass = validShapes.includes(this.shape) ? this.shape : 'circle';\n\n    const classes = {\n      avatar: true,\n      [`avatar--${sizeClass}`]: true,\n      [`avatar--${shapeClass}`]: true,\n    };\n\n    // P2-2: Badge wrapper is hidden (not removed) when empty so slotchange detection still works.\n    const badgeClasses = {\n      avatar__badge: true,\n      'avatar__badge--hidden': !this._hasBadgeSlot,\n    };\n\n    return html`\n      <div class=\"avatar-wrapper\">\n        <div\n          part=\"avatar\"\n          class=${classMap(classes)}\n          role=${showSlot ? nothing : 'img'}\n          aria-label=${showSlot ? nothing : ariaLabel}\n        >\n          <slot @slotchange=${this._handleSlotChange}></slot>\n          ${showImage && src\n            ? html`<img\n                part=\"image\"\n                class=\"avatar__image\"\n                src=${src}\n                alt=${this.alt}\n                aria-hidden=\"true\"\n                loading=\"lazy\"\n                @error=${this._handleImgError}\n              />`\n            : nothing}\n          ${showInitials\n            ? html`<span part=\"initials\" class=\"avatar__initials\">${this.initials.trim()}</span>`\n            : nothing}\n          ${showFallback ? this._renderFallbackIcon() : nothing}\n        </div>\n        <span part=\"badge\" class=${classMap(badgeClasses)}>\n          <slot name=\"badge\" @slotchange=${this._handleBadgeSlotChange}></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-avatar': HelixAvatar;\n  }\n}\n"],"names":["helixAvatarStyles","css","HelixAvatar","LitElement","changedProperties","validSizes","validShapes","e","nodes","node","html","src","showSlot","showImage","showInitials","showFallback","ariaLabel","sizeClass","shapeClass","classes","badgeClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-button-DpFW7PO3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-button-DpFW7PO3.js","sources":["../../src/components/hx-button/hx-button.styles.ts","../../src/components/hx-button/hx-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Base Button ─── */\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);\n    border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));\n    line-height: var(--hx-line-height-tight, 1.25);\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    text-decoration: none;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .button:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .button--sm {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    font-size: var(--hx-font-size-md, 1rem);\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Style Variants ─── */\n\n  .button--primary {\n    --hx-button-bg: var(--hx-color-primary-500, #2563eb);\n    --hx-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--secondary {\n    --hx-button-bg: transparent;\n    --hx-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-button-border-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  .button--secondary:hover {\n    --hx-button-bg: var(--hx-color-primary-50, #eff6ff);\n  }\n\n  .button--tertiary {\n    --hx-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    --hx-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--tertiary:hover {\n    --hx-button-bg: var(--hx-color-neutral-200, #e2e8f0);\n  }\n\n  .button--danger {\n    --hx-button-bg: var(--hx-color-error-500, #dc2626);\n    --hx-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--danger:hover {\n    --hx-button-bg: var(--hx-color-error-600, #b91c1c);\n  }\n\n  .button--ghost {\n    --hx-button-bg: transparent;\n    --hx-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n  }\n\n  .button--outline {\n    --hx-button-bg: transparent;\n    --hx-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-button-border-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .button--outline:hover {\n    --hx-button-bg: var(--hx-color-neutral-50, #f8fafc);\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Loading State ─── */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button__spinner {\n    width: 1em;\n    height: 1em;\n    flex-shrink: 0;\n    animation: hx-spin var(--hx-duration-spinner, 750ms) linear infinite;\n  }\n\n  @keyframes hx-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .button__spinner {\n      animation: none;\n      opacity: var(--hx-opacity-muted, 0.6);\n    }\n  }\n\n  /* ─── Prefix / Suffix / Label ─── */\n\n  .button__prefix,\n  .button__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .button__label {\n    flex: 1 1 auto;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixButtonStyles } from './hx-button.styles.js';\n\n/**\n * A production-grade button component for user interaction. Supports multiple\n * visual variants, sizes, loading state, prefix/suffix slots, anchor rendering,\n * and full ElementInternals form association.\n *\n * @summary Primary interactive element for triggering actions and form submission.\n *\n * @tag hx-button\n *\n * @slot - Default slot for button label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n *   the button is clicked and is neither disabled nor loading.\n *\n * @csspart button - The native button or anchor element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n * @csspart spinner - The loading spinner SVG element.\n *\n * @cssprop [--hx-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-button')\nexport class HelixButton extends LitElement {\n  static override styles = [tokenStyles, helixButtonStyles];\n\n  // ─── Form Association ───\n\n  static formAssociated = true;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Public Properties ───\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n  /**\n   * Size of the button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the button is disabled. Prevents all interaction and form actions.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the button is in a loading state. Shows spinner, prevents interaction,\n   * and sets aria-busy. Does not set the disabled attribute.\n   * @attr loading\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /**\n   * The type attribute for the underlying button element. Ignored when href is set.\n   * @attr type\n   */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * When set, renders an anchor element instead of a button.\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * Anchor target attribute. Only used when href is set.\n   * @attr target\n   */\n  @property({ type: String })\n  target: string | undefined = undefined;\n\n  /**\n   * Form field name submitted via ElementInternals.setFormValue on submit.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Form field value submitted via ElementInternals.setFormValue on submit.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  // ─── Form API ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  // ─── Event Handling ───\n\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled || this.loading) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    /**\n     * Dispatched when the button is clicked.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n\n    // Handle form submission/reset if form-associated and not in anchor mode\n    if (this.href === undefined && this.type === 'submit' && this._internals.form) {\n      if (this.name !== undefined && this.value !== undefined) {\n        this._internals.setFormValue(this.value);\n      }\n      this._internals.form.requestSubmit();\n    } else if (this.href === undefined && this.type === 'reset' && this._internals.form) {\n      this._internals.form.reset();\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  private _renderSpinner() {\n    return html`\n      <svg\n        class=\"button__spinner\"\n        part=\"spinner\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n      >\n        <circle\n          class=\"button__spinner-track\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          opacity=\"0.3\"\n        />\n        <path\n          class=\"button__spinner-arc\"\n          d=\"M12 2a10 10 0 0 1 10 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    `;\n  }\n\n  private _renderInner() {\n    return html`\n      ${this.loading ? this._renderSpinner() : nothing}\n      <span part=\"prefix\" class=\"button__prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span part=\"label\" class=\"button__label\">\n        <slot></slot>\n      </span>\n      <span part=\"suffix\" class=\"button__suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n      'button--loading': this.loading,\n    };\n\n    if (this.href !== undefined) {\n      return html`\n        <a\n          part=\"button\"\n          class=${classMap(classes)}\n          href=${this.disabled ? nothing : ifDefined(this.href)}\n          target=${ifDefined(this.target)}\n          rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-busy=${this.loading ? 'true' : nothing}\n          @click=${this._handleClick}\n        >\n          ${this._renderInner()}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(classes)}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        aria-busy=${this.loading ? 'true' : nothing}\n        @click=${this._handleClick}\n      >\n        ${this._renderInner()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-button': HelixButton;\n  }\n}\n\n/** @deprecated Use HelixButton */\nexport type WcButton = HelixButton;\n"],"names":["helixButtonStyles","css","HelixButton","LitElement","html","nothing","classes","classMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-button-group-DxCwaWnu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-button-group-DxCwaWnu.js","sources":["../../src/components/hx-button-group/hx-button-group.styles.ts","../../src/components/hx-button-group/hx-button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonGroupStyles = css`\n  :host {\n    display: inline-flex;\n  }\n\n  .group {\n    display: inline-flex;\n    align-items: stretch;\n  }\n\n  /* ─── Orientation Variants ─── */\n\n  .group--horizontal {\n    flex-direction: row;\n  }\n\n  .group--vertical {\n    flex-direction: column;\n  }\n\n  /* ─── No Double Borders: Horizontal ─── */\n\n  .group--horizontal ::slotted(*:not(:first-child)) {\n    margin-left: calc(-1 * var(--hx-border-width-thin, 1px));\n  }\n\n  /* ─── No Double Borders: Vertical ─── */\n\n  .group--vertical ::slotted(*:not(:first-child)) {\n    margin-top: calc(-1 * var(--hx-border-width-thin, 1px));\n  }\n\n  /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */\n\n  .group--horizontal ::slotted(:only-child) {\n    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Border Radius: Horizontal — First child keeps left corners ─── */\n\n  .group--horizontal ::slotted(:first-child:not(:only-child)) {\n    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem) 0 0\n      var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */\n\n  .group--horizontal ::slotted(:last-child:not(:only-child)) {\n    --hx-button-border-radius: 0 var(--hx-border-radius-md, 0.375rem)\n      var(--hx-border-radius-md, 0.375rem) 0;\n  }\n\n  /* ─── Border Radius: Horizontal — Middle children have no radius ─── */\n\n  .group--horizontal ::slotted(:not(:first-child):not(:last-child)) {\n    --hx-button-border-radius: 0;\n  }\n\n  /* ─── Border Radius: Vertical — Single child keeps all corners ─── */\n\n  .group--vertical ::slotted(:only-child) {\n    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Border Radius: Vertical — First child keeps top corners ─── */\n\n  .group--vertical ::slotted(:first-child:not(:only-child)) {\n    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem)\n      var(--hx-border-radius-md, 0.375rem) 0 0;\n  }\n\n  /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */\n\n  .group--vertical ::slotted(:last-child:not(:only-child)) {\n    --hx-button-border-radius: 0 0 var(--hx-border-radius-md, 0.375rem)\n      var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Border Radius: Vertical — Middle children have no radius ─── */\n\n  .group--vertical ::slotted(:not(:first-child):not(:last-child)) {\n    --hx-button-border-radius: 0;\n  }\n\n  /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */\n\n  .group ::slotted(:focus-within) {\n    z-index: 1;\n    position: relative;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .group ::slotted(*) {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixButtonGroupStyles } from './hx-button-group.styles.js';\n\n/**\n * A container component that groups related hx-button elements into a cohesive\n * horizontal or vertical action set. Eliminates double borders between adjacent\n * buttons and squares off inner border-radius for a unified visual appearance.\n *\n * @summary Groups hx-button elements into a horizontal or vertical action set with shared borders.\n *\n * @tag hx-button-group\n *\n * @slot - Default slot accepting hx-button children.\n *\n * @csspart group - The container div element wrapping all slotted buttons.\n *\n * @cssprop [--hx-button-group-size=md] - Size token forwarded to child buttons. Accepts 'sm', 'md', or 'lg'.\n */\n@customElement('hx-button-group')\nexport class HelixButtonGroup extends LitElement {\n  static override styles = [tokenStyles, helixButtonGroupStyles];\n\n  private internals: ElementInternals;\n\n  /**\n   * Layout orientation of the button group.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size applied to the button group and cascaded to child buttons via\n   * the --hx-button-group-size CSS custom property.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Accessible label for the button group. Sets aria-label via ElementInternals.\n   * Required for WCAG 2.1 AA compliance when the group purpose is not clear from context.\n   * Alternatively, consumers may apply aria-label directly as an HTML attribute.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string = '';\n\n  // ─── Constructor ───\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n    this.internals.role = 'group';\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('size')) {\n      this.style.setProperty('--hx-button-group-size', this.size);\n    }\n\n    if (changedProperties.has('label')) {\n      this.internals.ariaLabel = this.label || null;\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.setProperty('--hx-button-group-size', this.size);\n    if (this.label) {\n      this.internals.ariaLabel = this.label;\n    }\n  }\n\n  // ─── Event Handling ───\n\n  private _handleSlotChange(): void {\n    // Notify the component that the slot content has changed so Lit can\n    // re-evaluate slot-dependent CSS selectors (::slotted pseudo-elements).\n    this.requestUpdate();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        part=\"group\"\n        class=${classMap({\n          group: true,\n          'group--horizontal': this.orientation === 'horizontal',\n          'group--vertical': this.orientation === 'vertical',\n        })}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-button-group': HelixButtonGroup;\n  }\n}\n"],"names":["helixButtonGroupStyles","css","HelixButtonGroup","LitElement","changedProperties","html","classMap","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACoB/B,IAAMC,IAAN,cAA+BC,EAAW;AAAA;AAAA,EA+B/C,cAAc;AACZ,UAAA,GAtBF,KAAA,cAAyC,cAQzC,KAAA,OAA2B,MAS3B,KAAA,QAAgB,IAMd,KAAK,YAAY,KAAK,gBAAA,GACtB,KAAK,UAAU,OAAO;AAAA,EACxB;AAAA;AAAA,EAIS,QAAQC,GAAoD;AACnE,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,KAC9B,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GAGxDA,EAAkB,IAAI,OAAO,MAC/B,KAAK,UAAU,YAAY,KAAK,SAAS;AAAA,EAE7C;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GACtD,KAAK,UACP,KAAK,UAAU,YAAY,KAAK;AAAA,EAEpC;AAAA;AAAA,EAIQ,oBAA0B;AAGhC,SAAK,cAAA;AAAA,EACP;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,gBAGKC,EAAS;AAAA,MACf,OAAO;AAAA,MACP,qBAAqB,KAAK,gBAAgB;AAAA,MAC1C,mBAAmB,KAAK,gBAAgB;AAAA,IAAA,CACzC,CAAC;AAAA;AAAA,4BAEkB,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAGhD;AACF;AAnFaJ,EACK,SAAS,CAACK,GAAaP,CAAsB;AAS7DQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAT9BP,EAUX,WAAA,eAAA,CAAA;AAQAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAjBpDP,EAkBX,WAAA,QAAA,CAAA;AASAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfP,EA2BX,WAAA,SAAA,CAAA;AA3BWA,IAANM,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBR,CAAA;"}

package/dist/shared/hx-card-VdiB2Pc4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-card-VdiB2Pc4.js","sources":["../../src/components/hx-card/hx-card.styles.ts","../../src/components/hx-card/hx-card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCardStyles = css`\n  :host {\n    display: block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-card-gap, var(--hx-space-4, 1rem));\n    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n    border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    overflow: hidden;\n    font-family: var(--hx-font-family-sans, sans-serif);\n    transition:\n      box-shadow var(--hx-transition-normal, 250ms ease),\n      transform var(--hx-transition-normal, 250ms ease);\n  }\n\n  /* ─── Elevation Variants ─── */\n\n  .card--flat {\n    box-shadow: none;\n  }\n\n  .card--raised {\n    box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n  }\n\n  .card--floating {\n    box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));\n  }\n\n  /* ─── Style Variants ─── */\n\n  .card--default {\n    /* Default styling — uses base styles */\n  }\n\n  .card--featured {\n    border-color: var(--hx-color-primary-500, #2563eb);\n    border-width: var(--hx-border-width-medium, 2px);\n  }\n\n  .card--compact .card__body {\n    padding: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__heading {\n    padding-top: var(--hx-space-3, 0.75rem);\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__footer {\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__actions {\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Interactive ─── */\n\n  .card--interactive {\n    cursor: pointer;\n  }\n\n  .card--interactive:hover {\n    box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));\n    transform: translateY(var(--hx-lift-md, -2px));\n  }\n\n  .card--interactive:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .card--interactive:active {\n    transform: translateY(0);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .card {\n      transition: none;\n    }\n\n    .card--interactive:hover {\n      transform: none;\n    }\n\n    .card--interactive:active {\n      transform: none;\n    }\n  }\n\n  /* ─── Hidden empty slot wrappers ─── */\n\n  [hidden] {\n    display: none !important;\n  }\n\n  /* ─── Sections ─── */\n\n  .card__image {\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .card__image ::slotted(img) {\n    width: 100%;\n    aspect-ratio: var(--hx-card-image-aspect-ratio, 16 / 9);\n    display: block;\n    object-fit: cover;\n  }\n\n  .card__heading {\n    padding-top: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: 0;\n    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    font-size: var(--hx-font-size-xl, 1.25rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    line-height: var(--hx-line-height-tight, 1.25);\n  }\n\n  .card__body {\n    padding: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    flex: 1;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    color: var(--hx-color-neutral-600, #495057);\n  }\n\n  .card__footer {\n    padding-top: 0;\n    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n  }\n\n  .card__actions {\n    display: flex;\n    gap: var(--hx-space-2, 0.5rem);\n    padding-top: var(--hx-space-4, 1rem);\n    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n    margin-top: auto;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCardStyles } from './hx-card.styles.js';\n\n/**\n * A flexible card component for displaying grouped content.\n *\n * @summary Content container with image, heading, body, footer, and action slots.\n *\n * @tag hx-card\n *\n * @slot image - Optional image or media content at the top of the card.\n * @slot heading - The card heading/title content. Use a semantic heading element (h2, h3, etc.) for proper accessibility.\n * @slot - Default slot for the card body content.\n * @slot footer - Optional footer content below the body.\n * @slot actions - Optional action buttons, rendered with a top border separator. Do NOT use together with hx-href (interactive card + focusable actions is an ARIA anti-pattern).\n *\n * @fires {CustomEvent<{href: string, originalEvent: MouseEvent | KeyboardEvent}>} hx-click - Dispatched when an interactive card (with hx-href) is clicked.\n *\n * @csspart card - The outer card container element.\n * @csspart image - The image slot container.\n * @csspart heading - The heading slot container.\n * @csspart body - The body slot container.\n * @csspart footer - The footer slot container.\n * @csspart actions - The actions slot container.\n *\n * @cssprop [--hx-card-bg=var(--hx-color-neutral-0)] - Card background color.\n * @cssprop [--hx-card-color=var(--hx-color-neutral-800)] - Card text color.\n * @cssprop [--hx-card-border-color=var(--hx-color-neutral-200)] - Card border color.\n * @cssprop [--hx-card-border-radius=var(--hx-border-radius-lg)] - Card border radius.\n * @cssprop [--hx-card-padding=var(--hx-space-6)] - Internal padding for card sections.\n * @cssprop [--hx-card-gap=var(--hx-space-4)] - Gap between card sections.\n * @cssprop [--hx-card-image-aspect-ratio=16/9] - Aspect ratio for the image slot.\n */\n@customElement('hx-card')\nexport class HelixCard extends LitElement {\n  static override styles = [tokenStyles, helixCardStyles];\n\n  /**\n   * Visual style variant of the card.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'featured' | 'compact' = 'default';\n\n  /**\n   * Elevation (shadow depth) of the card.\n   * @attr elevation\n   */\n  @property({ type: String, reflect: true })\n  elevation: 'flat' | 'raised' | 'floating' = 'flat';\n\n  /**\n   * Optional URL. When set, the card becomes interactive (clickable)\n   * and navigates to this URL on click.\n   * Uses hx-href to avoid conflicting with the native HTML href attribute.\n   * @attr hx-href\n   */\n  @property({ type: String, attribute: 'hx-href' })\n  hxHref: string | undefined = undefined;\n\n  /**\n   * Accessible label for interactive cards. Use this to provide a meaningful\n   * description of the card's purpose rather than exposing the raw URL.\n   * Only applies when hx-href is set.\n   * @attr hx-aria-label\n   */\n  @property({ type: String, attribute: 'hx-aria-label' })\n  hxAriaLabel: string | undefined = undefined;\n\n  // ─── Slot Detection ───\n\n  @state() private _hasImage = false;\n  @state() private _hasHeading = false;\n  @state() private _hasFooter = false;\n  @state() private _hasActions = false;\n\n  private _onImageSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasImage = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onHeadingSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeading = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onFooterSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onActionsSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasActions = slot.assignedNodes({ flatten: true }).length > 0;\n    if (this._hasActions && this.hxHref) {\n      console.warn(\n        '[hx-card] Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: ' +\n          'interactive controls cannot be nested inside role=\"link\". ' +\n          'Use either hx-href or the actions slot, not both.',\n      );\n    }\n  }\n\n  // ─── Event Handling ───\n\n  private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n    if (!this.hxHref) return;\n\n    /**\n     * Dispatched when an interactive card is clicked.\n     * Includes the target href in the detail.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ href: string; originalEvent: MouseEvent | KeyboardEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { href: this.hxHref, originalEvent },\n      }),\n    );\n  }\n\n  private _handleClick(e: MouseEvent): void {\n    this._dispatchCardClick(e);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (!this.hxHref) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._dispatchCardClick(e);\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isInteractive = !!this.hxHref;\n\n    const classes = {\n      card: true,\n      [`card--${this.variant}`]: true,\n      [`card--${this.elevation}`]: true,\n      'card--interactive': isInteractive,\n    };\n\n    return html`\n      <div\n        part=\"card\"\n        class=${classMap(classes)}\n        role=${isInteractive ? 'link' : nothing}\n        tabindex=${isInteractive ? '0' : nothing}\n        aria-label=${isInteractive && this.hxAriaLabel ? this.hxAriaLabel : nothing}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeyDown}\n      >\n        <div class=\"card__image\" part=\"image\" ?hidden=${!this._hasImage}>\n          <slot name=\"image\" @slotchange=${this._onImageSlotChange}></slot>\n        </div>\n\n        <div class=\"card__heading\" part=\"heading\" ?hidden=${!this._hasHeading}>\n          <slot name=\"heading\" @slotchange=${this._onHeadingSlotChange}></slot>\n        </div>\n\n        <div class=\"card__body\" part=\"body\">\n          <slot></slot>\n        </div>\n\n        <div class=\"card__footer\" part=\"footer\" ?hidden=${!this._hasFooter}>\n          <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n        </div>\n\n        <div class=\"card__actions\" part=\"actions\" ?hidden=${!this._hasActions}>\n          <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-card': HelixCard;\n  }\n}\n"],"names":["helixCardStyles","css","HelixCard","LitElement","e","slot","originalEvent","isInteractive","classes","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-checkbox-Dq2xXIvl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-checkbox-Dq2xXIvl.js","sources":["../../src/components/hx-checkbox/hx-checkbox.styles.ts","../../src/components/hx-checkbox/hx-checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .checkbox {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Control (checkbox + label row) ─── */\n\n  .checkbox__control {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--hx-space-2, 0.5rem);\n    cursor: pointer;\n  }\n\n  :host([disabled]) .checkbox__control {\n    cursor: not-allowed;\n  }\n\n  /* ─── Hidden Native Input ─── */\n\n  .checkbox__input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Visual Checkbox ─── */\n\n  .checkbox__box {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    border: var(--hx-border-width-medium, 2px) solid\n      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    margin-top: var(--hx-space-px, 1px);\n  }\n\n  /* ─── Focus Ring ─── */\n\n  .checkbox__input:focus-visible ~ .checkbox__box {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Checked State ─── */\n\n  .checkbox--checked .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* ─── Indeterminate State ─── */\n\n  .checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* ─── Error State ─── */\n\n  .checkbox--error .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  .checkbox--error.checkbox--checked .checkbox__box,\n  .checkbox--error.checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  /* ─── Hover ─── */\n\n  /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */\n  .checkbox__control:hover .checkbox__box {\n    border-color: var(\n      --hx-checkbox-hover-border-color,\n      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))\n    );\n  }\n\n  .checkbox--checked .checkbox__control:hover .checkbox__box {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .checkbox--error .checkbox__control:hover .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  /* ─── Checkmark Icon ─── */\n\n  .checkbox__icon {\n    display: none;\n    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    fill: none;\n    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .checkbox--checked .checkbox__icon--check {\n    display: block;\n  }\n\n  .checkbox--indeterminate .checkbox__icon--indeterminate {\n    display: block;\n  }\n\n  /* ─── Label ─── */\n\n  .checkbox__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .checkbox__required-marker {\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .checkbox__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #6c757d));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-left: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-left: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) {\n    --hx-checkbox-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__help-text,\n  :host([hx-size='sm']) .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    padding-left: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));\n  }\n\n  :host([hx-size='lg']) {\n    --hx-checkbox-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__label {\n    font-size: var(--hx-font-size-base, 1rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__help-text,\n  :host([hx-size='lg']) .checkbox__error {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    padding-left: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCheckboxStyles } from './hx-checkbox.styles.js';\n\n// P2-05: monotonic counter — collision-free, deterministic, SSR-safe\nlet _checkboxCounter = 0;\n\n/**\n * A checkbox component with label, validation, and form association.\n *\n * @summary Form-associated checkbox with built-in label, error, and help text.\n *\n * @tag hx-checkbox\n *\n * @slot - Custom label content (overrides the label property). Rich HTML allowed — Drupal can include links in consent labels.\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the checkbox is toggled.\n *\n * @csspart checkbox - The visual checkbox element.\n * @csspart checkmark - The SVG checkmark icon inside the checkbox.\n * @csspart label - The label element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n * @csspart control - The wrapper around checkbox and label.\n *\n * @cssprop [--hx-checkbox-size=var(--hx-size-5, 1.25rem)] - Checkbox dimensions.\n * @cssprop [--hx-checkbox-bg=var(--hx-color-neutral-0, #ffffff)] - Unchecked background color.\n * @cssprop [--hx-checkbox-border-color=var(--hx-color-neutral-300, #ced4da)] - Checkbox border color.\n * @cssprop [--hx-checkbox-border-radius=var(--hx-border-radius-sm, 0.25rem)] - Checkbox border radius.\n * @cssprop [--hx-checkbox-checked-bg=var(--hx-color-primary-500, #2563EB)] - Checked background color.\n * @cssprop [--hx-checkbox-checked-border-color=var(--hx-color-primary-500, #2563EB)] - Checked border color.\n * @cssprop [--hx-checkbox-checkmark-color=var(--hx-color-neutral-0, #ffffff)] - Checkmark color.\n * @cssprop [--hx-checkbox-focus-ring-color=var(--hx-focus-ring-color, #2563EB)] - Focus ring color.\n * @cssprop [--hx-checkbox-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-checkbox-help-text-color=var(--hx-color-neutral-500, #6c757d)] - Help text color.\n * @cssprop [--hx-checkbox-error-color=var(--hx-color-error-500, #dc3545)] - Error state color.\n */\n@customElement('hx-checkbox')\nexport class HelixCheckbox extends LitElement {\n  static override styles = [tokenStyles, helixCheckboxStyles];\n\n  // P0-02: observe aria-label on host to forward to inner input\n  static override get observedAttributes(): string[] {\n    return [...(super.observedAttributes ?? []), 'aria-label'];\n  }\n\n  override attributeChangedCallback(name: string, old: string | null, next: string | null): void {\n    super.attributeChangedCallback(name, old, next);\n    if (name === 'aria-label') this.requestUpdate();\n  }\n\n  // ─── Form Association ───\n\n  static formAssociated = true;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * Whether the checkbox is checked.\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state (e.g., for \"select all\" patterns).\n   * @attr indeterminate\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Whether the checkbox is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the checkbox is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The name of the checkbox, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The value submitted when the checkbox is checked.\n   * @attr value\n   */\n  @property({ type: String })\n  value = 'on';\n\n  /**\n   * The visible label text for the checkbox.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Error message to display. When set, the checkbox enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the checkbox for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * The size of the checkbox.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @query('.checkbox__input')\n  private _inputEl!: HTMLInputElement;\n\n  @state() private _hasErrorSlot = false;\n\n  // ─── Slot Handlers ───\n\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('value')) {\n      this._internals.setFormValue(this.checked ? this.value : null);\n      this._updateValidity();\n    }\n    if (changedProperties.has('required')) {\n      this._updateValidity();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the checkbox satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  private _updateValidity(): void {\n    if (this.required && !this.checked) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'This field is required.',\n        this._inputEl ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Called by the form when it resets. */\n  formResetCallback(): void {\n    this.checked = false;\n    this.indeterminate = false;\n    this._internals.setFormValue(null);\n  }\n\n  /** Called when the form restores state (e.g., back/forward navigation). */\n  formStateRestoreCallback(state: string | File | FormData | null, _reason: string): void {\n    this.checked = typeof state === 'string' && state === this.value;\n  }\n\n  // ─── Event Handling ───\n\n  private _handleChange(): void {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n\n    this._internals.setFormValue(this.checked ? this.value : null);\n    this._updateValidity();\n\n    /**\n     * Dispatched when the checkbox is toggled.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.value },\n      }),\n    );\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      this._handleChange();\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the checkbox input element. */\n  override focus(options?: FocusOptions): void {\n    this._inputEl?.focus(options);\n  }\n\n  // ─── Render ───\n\n  // P2-05: monotonic counter — collision-free and deterministic\n  private _id = `hx-checkbox-${++_checkboxCounter}`;\n  private _helpTextId = `${this._id}-help`;\n  private _errorId = `${this._id}-error`;\n  private _labelId = `${this._id}-label`;\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const containerClasses = {\n      checkbox: true,\n      'checkbox--checked': this.checked,\n      'checkbox--indeterminate': this.indeterminate,\n      'checkbox--error': hasError,\n      'checkbox--disabled': this.disabled,\n      'checkbox--required': this.required,\n      'checkbox--sm': this.size === 'sm',\n      'checkbox--md': this.size === 'md',\n      'checkbox--lg': this.size === 'lg',\n    };\n\n    // P2-06: simplified — hasError already includes _hasErrorSlot\n    const describedBy =\n      [hasError ? this._errorId : null, this.helpText && !hasError ? this._helpTextId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    // P0-02: forward aria-label from host to inner input\n    const hostAriaLabel = this.getAttribute('aria-label') ?? undefined;\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <label part=\"control\" class=\"checkbox__control\" @click=${this._handleChange}>\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            id=${this._id}\n            .checked=${live(this.checked)}\n            .indeterminate=${live(this.indeterminate)}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            name=${ifDefined(this.name || undefined)}\n            .value=${this.value}\n            aria-checked=${this.indeterminate ? 'mixed' : nothing}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-label=${ifDefined(hostAriaLabel)}\n            aria-labelledby=${ifDefined(!hostAriaLabel ? this._labelId : undefined)}\n            @keydown=${this._handleKeyDown}\n            @click=${(e: Event) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            @change=${(e: Event) => e.stopPropagation()}\n          />\n\n          <span part=\"checkbox\" class=\"checkbox__box\">\n            <svg\n              part=\"checkmark\"\n              class=\"checkbox__icon checkbox__icon--check\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"3.5 8 6.5 11 12.5 5\"></polyline>\n            </svg>\n            <svg\n              class=\"checkbox__icon checkbox__icon--indeterminate\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <line x1=\"4\" y1=\"8\" x2=\"12\" y2=\"8\"></line>\n            </svg>\n          </span>\n\n          <span part=\"label\" class=\"checkbox__label\" id=${this._labelId}>\n            <slot>${this.label}</slot>\n            ${this.required\n              ? html`<span class=\"checkbox__required-marker\" aria-hidden=\"true\">*</span>`\n              : nothing}\n          </span>\n        </label>\n\n        <!--\n          P0-01: wrapper div always owns _errorId so aria-describedby works regardless\n          of whether error content comes from the .error property or the named slot.\n          P1-02: role=\"status\" (implicit aria-live=\"polite\") replaces role=\"alert\" +\n          aria-live=\"polite\" which was semantically contradictory.\n        -->\n        <div\n          part=\"error\"\n          class=\"checkbox__error\"\n          id=${this._errorId}\n          role=\"status\"\n          ?hidden=${!hasError}\n        >\n          <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n        </div>\n\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"checkbox__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n/** @deprecated Use HelixCheckbox instead. */\nexport type WcCheckbox = HelixCheckbox;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-checkbox': HelixCheckbox;\n  }\n}\n"],"names":["helixCheckboxStyles","css","_checkboxCounter","HelixCheckbox","LitElement","name","old","next","slot","changedProperties","state","_reason","options","_a","hasError","containerClasses","describedBy","hostAriaLabel","html","classMap","live","ifDefined","nothing","e","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/hx-checkbox-group-BLePVahw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-checkbox-group-BLePVahw.js","sources":["../../src/components/hx-checkbox-group/hx-checkbox-group.styles.ts","../../src/components/hx-checkbox-group/hx-checkbox-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxGroupStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Fieldset ─── */\n\n  .fieldset {\n    border: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2);\n    font-family: var(--hx-font-family-sans);\n  }\n\n  /* ─── Legend ─── */\n\n  .fieldset__legend {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1);\n    font-size: var(--hx-font-size-sm);\n    font-weight: var(--hx-font-weight-medium);\n    color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));\n    line-height: var(--hx-line-height-normal);\n    padding: 0;\n    margin-bottom: var(--hx-space-1);\n  }\n\n  .fieldset__required-marker {\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold);\n  }\n\n  /* ─── Items Container ─── */\n\n  .fieldset__items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-checkbox-group-gap, var(--hx-space-3));\n  }\n\n  :host([orientation='horizontal']) .fieldset__items {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* ─── Error State ─── */\n\n  .fieldset--error .fieldset__legend {\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .fieldset__help-text {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-color-neutral-500);\n    line-height: var(--hx-line-height-normal);\n  }\n\n  .fieldset__error {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCheckboxGroupStyles } from './hx-checkbox-group.styles.js';\nimport type { HelixCheckbox } from '../hx-checkbox/hx-checkbox.js';\n\n/** Monotonic counter for stable, SSR-safe IDs. */\nlet _uid = 0;\n\n/**\n * A form-associated checkbox group that manages a set of `<hx-checkbox>` children.\n *\n * @summary Form-associated checkbox group with label, validation, help text, and multi-value form submission.\n *\n * @tag hx-checkbox-group\n *\n * @slot - `<hx-checkbox>` elements.\n * @slot label - Rich HTML group label (overrides the label property when used).\n * @slot error - Custom error content (overrides the error property).\n * @slot help - Group-level help text.\n *\n * @fires {CustomEvent<{values: string[]}>} hx-change - Dispatched when any child checkbox changes.\n *\n * @csspart group - The fieldset wrapper.\n * @csspart label - The legend/label.\n * @csspart help-text - The help text container.\n * @csspart error-message - The error message container.\n *\n * @cssprop [--hx-checkbox-group-gap=var(--hx-space-3, 0.75rem)] - Gap between checkbox items.\n * @cssprop [--hx-checkbox-group-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-checkbox-group-error-color=var(--hx-color-error-500, #dc3545)] - Error message color.\n *\n * @drupal\n * Form-associated; render via Twig:\n * ```twig\n * <hx-checkbox-group name=\"{{ field_name }}\" label=\"{{ label }}\"{{ required ? ' required' : '' }}>\n *   {% for option in options %}\n *     <hx-checkbox value=\"{{ option.value }}\" label=\"{{ option.label }}\"></hx-checkbox>\n *   {% endfor %}\n * </hx-checkbox-group>\n * ```\n * The `name` attribute propagates automatically to child checkboxes — no Drupal behavior required.\n */\n@customElement('hx-checkbox-group')\nexport class HelixCheckboxGroup extends LitElement {\n  static override styles = [tokenStyles, helixCheckboxGroupStyles];\n\n  // ─── Form Association ───\n\n  static formAssociated = true;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The name used for form submission. Passed to child `hx-checkbox` elements.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The fieldset legend/label text.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether at least one checkbox must be checked for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the entire group is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message to display. When set, the group enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Layout orientation of the checkbox items.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  @state() private _hasErrorSlot = false;\n  @state() private _hasHelpSlot = false;\n\n  // ─── Internal IDs ───\n\n  private _groupId = `hx-checkbox-group-${++_uid}`;\n  private _helpTextId = `${this._groupId}-help`;\n  private _errorId = `${this._groupId}-error`;\n\n  // ─── Slot Handlers ───\n\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-change', this._handleCheckboxChange as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-change', this._handleCheckboxChange as EventListener);\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this._syncCheckboxes();\n    }\n    if (changedProperties.has('name')) {\n      this._syncCheckboxNames();\n    }\n    if (changedProperties.has('required')) {\n      this._updateValidity();\n    }\n  }\n\n  override firstUpdated(changedProperties: Map<string, unknown>): void {\n    super.firstUpdated(changedProperties);\n    this._syncCheckboxes();\n    this._syncCheckboxNames();\n    const checkedValues = this._getCheckedValues();\n    this._updateFormValue(checkedValues);\n    this._updateValidity(checkedValues);\n  }\n\n  // ─── Checkbox Management ───\n\n  private _getCheckboxes(): HelixCheckbox[] {\n    return Array.from(this.children).filter((c): c is HelixCheckbox => c.tagName === 'HX-CHECKBOX');\n  }\n\n  private _getCheckedValues(): string[] {\n    return this._getCheckboxes()\n      .filter((cb) => cb.checked)\n      .map((cb) => cb.value);\n  }\n\n  private _syncCheckboxes(): void {\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.disabled = this.disabled;\n    });\n  }\n\n  private _syncCheckboxNames(): void {\n    if (!this.name) return;\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.name = this.name;\n    });\n  }\n\n  // ─── Event Handling ───\n\n  private _handleCheckboxChange = (e: CustomEvent<{ checked: boolean; value: string }>): void => {\n    // Only intercept events from direct hx-checkbox children — do not re-intercept\n    // the hx-change we dispatch ourselves from this element.\n    if (e.target === this) return;\n\n    e.stopImmediatePropagation();\n\n    const values = this._getCheckedValues();\n    this._updateFormValue(values);\n    this._updateValidity(values);\n\n    /**\n     * Dispatched when any child checkbox changes.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { values },\n      }),\n    );\n  };\n\n  private _handleSlotChange(): void {\n    this._syncCheckboxes();\n    this._syncCheckboxNames();\n    const checkedValues = this._getCheckedValues();\n    this._updateFormValue(checkedValues);\n    this._updateValidity(checkedValues);\n  }\n\n  // ─── Form Integration ───\n\n  private _updateFormValue(values: string[]): void {\n    if (values.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n    const formData = new FormData();\n    values.forEach((v) => formData.append(this.name, v));\n    this._internals.setFormValue(formData);\n  }\n\n  private _updateValidity(values?: string[]): void {\n    const checkedValues = values ?? this._getCheckedValues();\n    if (this.required && checkedValues.length === 0) {\n      const firstCheckbox = this._getCheckboxes()[0];\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'Please select at least one option.',\n        firstCheckbox,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the group satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** Called by the form when it resets. */\n  formResetCallback(): void {\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.checked = false;\n    });\n    this._internals.setFormValue(null);\n    this._updateValidity([]);\n  }\n\n  /** Called when the form restores state (e.g., back/forward navigation). */\n  formStateRestoreCallback(state: string | File | FormData): void {\n    if (!(state instanceof FormData)) return;\n    const restoredValues = state.getAll(this.name).map((v) => String(v));\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.checked = restoredValues.includes(cb.value);\n    });\n    this._updateFormValue(restoredValues);\n    this._updateValidity(restoredValues);\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldsetClasses = {\n      fieldset: true,\n      'fieldset--error': hasError,\n      'fieldset--disabled': this.disabled,\n      'fieldset--required': this.required,\n    };\n\n    const describedBy =\n      [hasError ? this._errorId : null, this._hasHelpSlot ? this._helpTextId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <fieldset\n        part=\"group\"\n        class=${classMap(fieldsetClasses)}\n        aria-describedby=${describedBy ?? nothing}\n      >\n        <legend part=\"label\" class=\"fieldset__legend\">\n          <slot name=\"label\">${this.label}</slot>\n          ${this.required\n            ? html`<span class=\"fieldset__required-marker\" aria-hidden=\"true\">*</span>`\n            : nothing}\n        </legend>\n\n        <div class=\"fieldset__items\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n\n        ${hasError\n          ? html`<div part=\"error-message\" class=\"fieldset__error\" id=${this._errorId} role=\"alert\">\n              <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n            </div>`\n          : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n\n        <div part=\"help-text\" class=\"fieldset__help-text\" id=${this._helpTextId}>\n          <slot name=\"help\" @slotchange=${this._handleHelpSlotChange}></slot>\n        </div>\n      </fieldset>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-checkbox-group': HelixCheckboxGroup;\n  }\n}\n"],"names":["helixCheckboxGroupStyles","css","_uid","HelixCheckboxGroup","LitElement","values","slot","changedProperties","checkedValues","c","cb","formData","v","firstCheckbox","state","restoredValues","hasError","fieldsetClasses","describedBy","html","classMap","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}