@helixui/library 2.0.0-next.30 → 2.0.0-next.31

package/dist/shared/{hx-toggle-button-Ss7Gppx3.js.map → hx-toggle-button-BZUQUULm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-toggle-button-Ss7Gppx3.js","sources":["../../src/components/hx-toggle-button/hx-toggle-button.styles.ts","../../src/components/hx-toggle-button/hx-toggle-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToggleButtonStyles = 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-toggle-button-border-color, transparent);\n    border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-toggle-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(\n        --hx-toggle-button-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\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-toggle-button-bg: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--secondary {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  .button--secondary:hover {\n    --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);\n  }\n\n  .button--tertiary {\n    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--tertiary:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);\n  }\n\n  .button--ghost {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n  }\n\n  .button--outline {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .button--outline:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);\n  }\n\n  /* ─── Pressed State ─── */\n\n  /*\n   * Primary: already uses solid primary bg; pressed deepens to primary-700\n   * to give clear visual feedback without introducing a new color.\n   */\n  .button--primary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1d4ed8));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-0, #ffffff)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /*\n   * Secondary: unpressed is outlined/transparent; pressed fills with primary bg\n   * so the state change is immediately legible.\n   */\n  .button--secondary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-0, #ffffff)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */\n  .button--tertiary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #1d4ed8)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);\n    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);\n  }\n\n  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */\n  .button--ghost.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #1d4ed8)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */\n  .button--outline.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-900, #0f172a)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);\n    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\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  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixToggleButtonStyles } from './hx-toggle-button.styles.js';\n\n/**\n * A two-state toggle button that communicates a pressed/unpressed status to\n * assistive technology via `aria-pressed`. Supports multiple visual variants\n * and sizes, prefix/suffix slots, full ElementInternals form association, and\n * a distinct pressed visual state for every variant.\n *\n * @summary Two-state toggle button with pressed/unpressed ARIA semantics.\n *\n * @tag hx-toggle-button\n *\n * @slot - Default slot for the 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<{pressed: boolean}>} hx-toggle - Dispatched when the\n *   toggle state changes. Not dispatched when the button is disabled.\n *\n * @csspart button - The native `<button>` 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 *\n * @cssprop [--hx-toggle-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-toggle-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-toggle-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-toggle-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-toggle-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-toggle-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-toggle-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-toggle-button-pressed-bg=var(--hx-color-primary-500)] - Background when pressed (variant-specific fallback applies).\n * @cssprop [--hx-toggle-button-pressed-color=var(--hx-color-neutral-0)] - Text color when pressed (variant-specific fallback applies).\n */\n@customElement('hx-toggle-button')\nexport class HelixToggleButton extends LitElement {\n  static override styles = [helixToggleButtonStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  private _internals: ElementInternals;\n\n  /** @internal */\n  @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Public Properties ───\n\n  /**\n   * Whether the toggle button is in the pressed state.\n   * Reflected as an attribute so CSS selectors like `:host([pressed])` work.\n   * @attr pressed\n   */\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' = 'secondary';\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   * Form field name submitted via ElementInternals when the button is pressed.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Form field value submitted via ElementInternals when the button is pressed.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  /**\n   * Accessible label forwarded to the inner `<button>` as `aria-label`.\n   * Required for icon-only toggle buttons where no visible text is present.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  /**\n   * When true, the button must be in the pressed state for the form to be submitted.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\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  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Returns the current validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Checks whether the button 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  // ─── Lifecycle ───\n\n  override firstUpdated(changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(changedProperties);\n\n    if (!this.label) {\n      const slot = this._defaultSlot;\n      const hasSlotText = slot\n        ? slot.assignedNodes({ flatten: true }).some((n) => n.textContent?.trim())\n        : false;\n      if (!hasSlotText) {\n        console.warn(\n          '[hx-toggle-button] No accessible label found. Set the `label` attribute or provide slot text content for WCAG 4.1.2 compliance.',\n        );\n      }\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('pressed') ||\n      changedProperties.has('value') ||\n      changedProperties.has('required')\n    ) {\n      this._syncFormValue();\n    }\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.pressed = false;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    this.pressed = typeof state === 'string' && state === 'pressed';\n  }\n\n  /** @internal */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private _syncFormValue(): void {\n    if (this.pressed && this.value !== undefined) {\n      // Pass explicit state 'pressed' so formStateRestoreCallback can reliably detect it.\n      this._internals.setFormValue(this.value, 'pressed');\n    } else {\n      this._internals.setFormValue(null);\n    }\n    this._updateValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.pressed) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        'Please activate this toggle button.',\n        this.shadowRoot?.querySelector<HTMLElement>('[part=\"button\"]') ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.pressed = !this.pressed;\n    this._syncFormValue();\n\n    /**\n     * Dispatched when the toggle state changes.\n     * @event hx-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ pressed: boolean }>('hx-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { pressed: this.pressed },\n      }),\n    );\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderInner() {\n    return html`\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--pressed': this.pressed,\n    };\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(classes)}\n        ?disabled=${this.disabled}\n        type=\"button\"\n        aria-pressed=${this.pressed ? 'true' : 'false'}\n        aria-label=${this.label ?? nothing}\n        @click=${this._handleClick}\n      >\n        ${this._renderInner()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toggle-button': HelixToggleButton;\n  }\n}\n"],"names":["helixToggleButtonStyles","css","HelixToggleButton","LitElement","changedProperties","slot","_a","state","_mode","disabled","e","html","classes","classMap","nothing","__decorateClass","query","property","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-toggle-button-BZUQUULm.js","sources":["../../src/components/hx-toggle-button/hx-toggle-button.styles.ts","../../src/components/hx-toggle-button/hx-toggle-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToggleButtonStyles = 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-toggle-button-border-color, transparent);\n    border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-toggle-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(\n        --hx-toggle-button-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\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-toggle-button-bg: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--secondary {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  .button--secondary:hover {\n    --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);\n  }\n\n  .button--tertiary {\n    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--tertiary:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);\n  }\n\n  .button--ghost {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n  }\n\n  .button--outline {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .button--outline:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);\n  }\n\n  /* ─── Pressed State ─── */\n\n  /*\n   * Primary: already uses solid primary bg; pressed deepens to primary-700\n   * to give clear visual feedback without introducing a new color.\n   */\n  .button--primary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1d4ed8));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-0, #ffffff)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /*\n   * Secondary: unpressed is outlined/transparent; pressed fills with primary bg\n   * so the state change is immediately legible.\n   */\n  .button--secondary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-0, #ffffff)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */\n  .button--tertiary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #1d4ed8)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);\n    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);\n  }\n\n  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */\n  .button--ghost.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #1d4ed8)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */\n  .button--outline.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-900, #0f172a)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);\n    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\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  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixToggleButtonStyles } from './hx-toggle-button.styles.js';\n\n/**\n * A two-state toggle button that communicates a pressed/unpressed status to\n * assistive technology via `aria-pressed`. Supports multiple visual variants\n * and sizes, prefix/suffix slots, full ElementInternals form association, and\n * a distinct pressed visual state for every variant.\n *\n * @summary Two-state toggle button with pressed/unpressed ARIA semantics.\n *\n * @tag hx-toggle-button\n *\n * @slot - Default slot for the 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<{pressed: boolean}>} hx-toggle - Dispatched when the\n *   toggle state changes. Not dispatched when the button is disabled.\n *\n * @csspart button - The native `<button>` 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 *\n * @cssprop [--hx-toggle-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-toggle-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-toggle-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-toggle-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-toggle-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-toggle-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-toggle-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-toggle-button-pressed-bg=var(--hx-color-primary-500)] - Background when pressed (variant-specific fallback applies).\n * @cssprop [--hx-toggle-button-pressed-color=var(--hx-color-neutral-0)] - Text color when pressed (variant-specific fallback applies).\n */\n@customElement('hx-toggle-button')\nexport class HelixToggleButton extends LitElement {\n  static override styles = [helixToggleButtonStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  private _internals: ElementInternals;\n\n  /** @internal */\n  @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Public Properties ───\n\n  /**\n   * Whether the toggle button is in the pressed state.\n   * Reflected as an attribute so CSS selectors like `:host([pressed])` work.\n   * @attr pressed\n   */\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' = 'secondary';\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   * Form field name submitted via ElementInternals when the button is pressed.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Form field value submitted via ElementInternals when the button is pressed.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  /**\n   * Accessible label forwarded to the inner `<button>` as `aria-label`.\n   * Required for icon-only toggle buttons where no visible text is present.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  /**\n   * When true, the button must be in the pressed state for the form to be submitted.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\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  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Returns the current validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Checks whether the button 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  // ─── Lifecycle ───\n\n  override firstUpdated(changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(changedProperties);\n\n    if (!this.label) {\n      const slot = this._defaultSlot;\n      const hasSlotText = slot\n        ? slot.assignedNodes({ flatten: true }).some((n) => n.textContent?.trim())\n        : false;\n      if (!hasSlotText) {\n        console.warn(\n          '[hx-toggle-button] No accessible label found. Set the `label` attribute or provide slot text content for WCAG 4.1.2 compliance.',\n        );\n      }\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('pressed') ||\n      changedProperties.has('value') ||\n      changedProperties.has('required')\n    ) {\n      this._syncFormValue();\n    }\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.pressed = false;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    this.pressed = typeof state === 'string' && state === 'pressed';\n  }\n\n  /** @internal */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private _syncFormValue(): void {\n    if (this.pressed && this.value !== undefined) {\n      // Pass explicit state 'pressed' so formStateRestoreCallback can reliably detect it.\n      this._internals.setFormValue(this.value, 'pressed');\n    } else {\n      this._internals.setFormValue(null);\n    }\n    this._updateValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.pressed) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        'Please activate this toggle button.',\n        this.shadowRoot?.querySelector<HTMLElement>('[part=\"button\"]') ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.pressed = !this.pressed;\n    this._syncFormValue();\n\n    /**\n     * Dispatched when the toggle state changes.\n     * @event hx-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ pressed: boolean }>('hx-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { pressed: this.pressed },\n      }),\n    );\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderInner() {\n    return html`\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--pressed': this.pressed,\n    };\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(classes)}\n        ?disabled=${this.disabled}\n        type=\"button\"\n        aria-pressed=${this.pressed ? 'true' : 'false'}\n        aria-label=${this.label ?? nothing}\n        @click=${this._handleClick}\n      >\n        ${this._renderInner()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toggle-button': HelixToggleButton;\n  }\n}\n"],"names":["helixToggleButtonStyles","css","HelixToggleButton","LitElement","changedProperties","slot","_a","state","_mode","disabled","e","html","classes","classMap","nothing","__decorateClass","query","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-tooltip-xRNjEX7_.js → hx-tooltip-Ny4i1Idj.js}

@@ -1,5 +1,5 @@
 import { css as u, LitElement as _, html as v } from "lit";
-import "./document-token-adoption-Dym9ALA4.js";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as d, state as g, query as p, customElement as f } from "lit/decorators.js";
 import { computePosition as x, offset as y, flip as b, shift as w, arrow as T } from "@floating-ui/dom";
 const D = u`
@@ -209,4 +209,4 @@ o = r([
 export {
   o as H
 };
-//# sourceMappingURL=hx-tooltip-xRNjEX7_.js.map
+//# sourceMappingURL=hx-tooltip-Ny4i1Idj.js.map

package/dist/shared/{hx-tooltip-xRNjEX7_.js.map → hx-tooltip-Ny4i1Idj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-tooltip-xRNjEX7_.js","sources":["../../src/components/hx-tooltip/hx-tooltip.styles.ts","../../src/components/hx-tooltip/hx-tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTooltipStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='tooltip'] {\n    position: fixed;\n    z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));\n    max-width: var(--hx-tooltip-max-width, 280px);\n    padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));\n    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f9fafb));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    box-shadow: var(\n      --hx-tooltip-shadow,\n      var(--hx-shadow-sm, 0 2px 8px var(--hx-overlay-black-20, rgba(0, 0, 0, 0.2)))\n    );\n    visibility: hidden;\n    opacity: 0;\n    transition:\n      opacity var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease)),\n      visibility var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease));\n    overflow-wrap: break-word;\n  }\n\n  [part='tooltip'].visible {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-tooltip-arrow-size, 8px);\n    height: var(--hx-tooltip-arrow-size, 8px);\n    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='tooltip'] {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';\nimport { helixTooltipStyles } from './hx-tooltip.styles.js';\n\nlet _tooltipCounter = 0;\n\n/**\n * A tooltip that displays contextual help text on hover or focus.\n *\n * @summary Contextual help text and abbreviations with smart positioning.\n *\n * @tag hx-tooltip\n *\n * @slot - Default slot for the trigger element.\n * @slot content - Tooltip content to display.\n *\n * @csspart tooltip - The tooltip container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-tooltip-bg=var(--hx-color-neutral-900)] - Tooltip background color.\n * @cssprop [--hx-tooltip-color=var(--hx-color-neutral-50)] - Tooltip text color.\n * @cssprop [--hx-tooltip-font-size=var(--hx-font-size-xs)] - Tooltip font size.\n * @cssprop [--hx-tooltip-max-width=280px] - Maximum tooltip width.\n * @cssprop [--hx-tooltip-padding] - Tooltip padding.\n * @cssprop [--hx-tooltip-border-radius=var(--hx-border-radius-sm)] - Tooltip border radius.\n * @cssprop [--hx-tooltip-shadow] - Tooltip box shadow.\n * @cssprop [--hx-tooltip-z-index=9999] - Tooltip z-index.\n * @cssprop [--hx-tooltip-transition-duration=0.15s] - Show/hide transition duration.\n * @cssprop [--hx-tooltip-arrow-size=8px] - Size of the arrow indicator.\n *\n * @example\n * ```html\n * <hx-tooltip>\n *   <button>Hover me</button>\n *   <span slot=\"content\">Helpful context here</span>\n * </hx-tooltip>\n * ```\n *\n * @example Drupal/Twig usage\n * ```twig\n * <hx-tooltip>\n *   <button type=\"button\">{{ trigger_label }}</button>\n *   <span slot=\"content\">{{ tooltip_text }}</span>\n * </hx-tooltip>\n * ```\n */\n\n@customElement('hx-tooltip')\nexport class HelixTooltip extends LitElement {\n  static override styles = [helixTooltipStyles];\n\n  /**\n   * Preferred placement of the tooltip relative to the trigger.\n   * Supports all Floating UI placement values including alignment variants\n   * (e.g. 'top-start', 'bottom-end') and 'auto'.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /**\n   * Delay in milliseconds before the tooltip is shown.\n   * @attr show-delay\n   */\n  @property({ type: Number, attribute: 'show-delay' })\n  showDelay = 300;\n\n  /**\n   * Delay in milliseconds before the tooltip is hidden.\n   * @attr hide-delay\n   */\n  @property({ type: Number, attribute: 'hide-delay' })\n  hideDelay = 100;\n\n  /** @internal */\n  @state() private _visible = false;\n\n  /** @internal */\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n  /** @internal */\n  private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** @internal */\n  private readonly _tooltipId = `hx-tooltip-${++_tooltipCounter}`;\n\n  /** @internal */\n  @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('slot[name=\"content\"]') private _contentSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('.trigger-wrapper') private _triggerWrapper!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"tooltip\"]') private _tooltipEl!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"arrow\"]') private _arrowEl!: HTMLElement | null;\n\n  /**\n   * Visually-hidden description element in light DOM.\n   * Necessary because aria-describedby cannot cross Shadow DOM boundaries —\n   * ARIA ID references are scoped to the element's root node. This element\n   * lives in the document scope so the trigger's aria-describedby resolves correctly.\n   * @internal\n   */\n  private _lightDomDescription: HTMLSpanElement | null = null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n    // Re-run ARIA setup on reconnection (firstUpdated does not re-run).\n    // hasUpdated is true after the first update cycle completes.\n    if (this.hasUpdated) {\n      this._setupTriggerAria();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n    this._clearTimers();\n    this._lightDomDescription?.remove();\n    this._lightDomDescription = null;\n  }\n\n  override firstUpdated(): void {\n    this._setupTriggerAria();\n  }\n\n  // ─── ARIA setup ───\n\n  /** @internal */\n  private _setupTriggerAria(): void {\n    const slot = this._defaultSlot;\n    if (!slot) return;\n    const trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n\n    // Sync content from the content slot into a visually-hidden light DOM element.\n    // aria-describedby cannot cross Shadow DOM boundaries, so the referenced element\n    // must live in the document scope (light DOM), not inside the shadow root.\n    const contentSlot = this._contentSlot;\n    const contentText =\n      contentSlot\n        ?.assignedElements()\n        .map((el) => el.textContent)\n        .join(' ')\n        .trim() ?? '';\n\n    // Guard for SSR — document is unavailable server-side\n    if (!this._lightDomDescription && typeof document !== 'undefined') {\n      this._lightDomDescription = document.createElement('span');\n      this._lightDomDescription.id = this._tooltipId;\n      // Visually hidden but accessible to screen readers via aria-describedby\n      this._lightDomDescription.style.cssText =\n        'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n      this.appendChild(this._lightDomDescription);\n    }\n    if (this._lightDomDescription) {\n      this._lightDomDescription.textContent = contentText;\n    }\n\n    if (trigger) {\n      trigger.setAttribute('aria-describedby', this._tooltipId);\n    }\n  }\n\n  // ─── Show/Hide ───\n\n  /** @internal */\n  private _scheduleShow(): void {\n    this._clearTimers();\n    this._showTimer = setTimeout(() => {\n      void this._show();\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  private _scheduleHide(): void {\n    this._clearTimers();\n    this._hideTimer = setTimeout(() => {\n      this._hide();\n    }, this.hideDelay);\n  }\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    this._visible = true;\n    await this.updateComplete;\n    await this._updatePosition();\n  }\n\n  /** @internal */\n  private _hide(): void {\n    this._visible = false;\n  }\n\n  /** @internal */\n  private _clearTimers(): void {\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hideTimer !== null) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = null;\n    }\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const reference = this._triggerWrapper;\n    const tooltipEl = this._tooltipEl;\n    const arrowEl = this._arrowEl;\n\n    if (!reference || !tooltipEl || !arrowEl) return;\n\n    const { x, y, placement, middlewareData } = await computePosition(reference, tooltipEl, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware: [offset(8), flip(), shift({ padding: 8 }), arrow({ element: arrowEl })],\n    });\n\n    Object.assign(tooltipEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const arrowData = middlewareData.arrow;\n    const basePlacement = placement.split('-')[0] ?? 'top';\n    const oppositeSide: Record<string, string> = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    };\n    const staticSide = oppositeSide[basePlacement] ?? 'bottom';\n\n    // Offset is derived from the arrow element's actual size so that custom\n    // --hx-tooltip-arrow-size values position the arrow correctly.\n    Object.assign(arrowEl.style, {\n      left: arrowData?.x != null ? `${arrowData.x}px` : '',\n      top: arrowData?.y != null ? `${arrowData.y}px` : '',\n      right: '',\n      bottom: '',\n      [staticSide]: `${-(arrowEl.offsetWidth / 2)}px`,\n    });\n  }\n\n  // ─── Events ───\n\n  /** @internal */\n  private _handleKeydown = (e: Event): void => {\n    if (!(e instanceof KeyboardEvent)) return;\n    if (e.key === 'Escape' && this._visible) {\n      this._clearTimers();\n      this._hide();\n    }\n  };\n\n  /**\n   * Handle mouseleave on the trigger wrapper.\n   * Does not schedule hide if keyboard focus is still on the trigger element,\n   * preventing mixed keyboard+mouse interactions from dismissing the tooltip\n   * while the user is still navigating by keyboard.\n   * @internal\n   */\n  private _handleTriggerMouseleave(): void {\n    const slot = this._defaultSlot;\n    const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n    // Guard for SSR — document is unavailable server-side\n    const active = typeof document !== 'undefined' ? document.activeElement : null;\n    if (trigger && (trigger === active || trigger.contains(active))) {\n      return;\n    }\n    this._scheduleHide();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrapper\"\n        @mouseenter=${this._scheduleShow}\n        @mouseleave=${this._handleTriggerMouseleave}\n        @focusin=${this._scheduleShow}\n        @focusout=${this._scheduleHide}\n      >\n        <slot @slotchange=${this._setupTriggerAria}></slot>\n      </div>\n      <div\n        part=\"tooltip\"\n        id=${this._tooltipId}\n        role=\"tooltip\"\n        aria-hidden=${String(!this._visible)}\n        class=${this._visible ? 'visible' : ''}\n        @mouseenter=${this._clearTimers}\n        @mouseleave=${this._scheduleHide}\n      >\n        <slot name=\"content\" @slotchange=${this._setupTriggerAria}></slot>\n        <div part=\"arrow\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tooltip': HelixTooltip;\n  }\n}\n"],"names":["helixTooltipStyles","css","_tooltipCounter","HelixTooltip","LitElement","e","_a","slot","trigger","contentSlot","contentText","el","reference","tooltipEl","arrowEl","x","y","placement","middlewareData","computePosition","offset","flip","shift","arrow","arrowData","basePlacement","staticSide","active","html","__decorateClass","property","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-tooltip-Ny4i1Idj.js","sources":["../../src/components/hx-tooltip/hx-tooltip.styles.ts","../../src/components/hx-tooltip/hx-tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTooltipStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='tooltip'] {\n    position: fixed;\n    z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));\n    max-width: var(--hx-tooltip-max-width, 280px);\n    padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));\n    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f9fafb));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    box-shadow: var(\n      --hx-tooltip-shadow,\n      var(--hx-shadow-sm, 0 2px 8px var(--hx-overlay-black-20, rgba(0, 0, 0, 0.2)))\n    );\n    visibility: hidden;\n    opacity: 0;\n    transition:\n      opacity var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease)),\n      visibility var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease));\n    overflow-wrap: break-word;\n  }\n\n  [part='tooltip'].visible {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-tooltip-arrow-size, 8px);\n    height: var(--hx-tooltip-arrow-size, 8px);\n    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='tooltip'] {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';\nimport { helixTooltipStyles } from './hx-tooltip.styles.js';\n\nlet _tooltipCounter = 0;\n\n/**\n * A tooltip that displays contextual help text on hover or focus.\n *\n * @summary Contextual help text and abbreviations with smart positioning.\n *\n * @tag hx-tooltip\n *\n * @slot - Default slot for the trigger element.\n * @slot content - Tooltip content to display.\n *\n * @csspart tooltip - The tooltip container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-tooltip-bg=var(--hx-color-neutral-900)] - Tooltip background color.\n * @cssprop [--hx-tooltip-color=var(--hx-color-neutral-50)] - Tooltip text color.\n * @cssprop [--hx-tooltip-font-size=var(--hx-font-size-xs)] - Tooltip font size.\n * @cssprop [--hx-tooltip-max-width=280px] - Maximum tooltip width.\n * @cssprop [--hx-tooltip-padding] - Tooltip padding.\n * @cssprop [--hx-tooltip-border-radius=var(--hx-border-radius-sm)] - Tooltip border radius.\n * @cssprop [--hx-tooltip-shadow] - Tooltip box shadow.\n * @cssprop [--hx-tooltip-z-index=9999] - Tooltip z-index.\n * @cssprop [--hx-tooltip-transition-duration=0.15s] - Show/hide transition duration.\n * @cssprop [--hx-tooltip-arrow-size=8px] - Size of the arrow indicator.\n *\n * @example\n * ```html\n * <hx-tooltip>\n *   <button>Hover me</button>\n *   <span slot=\"content\">Helpful context here</span>\n * </hx-tooltip>\n * ```\n *\n * @example Drupal/Twig usage\n * ```twig\n * <hx-tooltip>\n *   <button type=\"button\">{{ trigger_label }}</button>\n *   <span slot=\"content\">{{ tooltip_text }}</span>\n * </hx-tooltip>\n * ```\n */\n\n@customElement('hx-tooltip')\nexport class HelixTooltip extends LitElement {\n  static override styles = [helixTooltipStyles];\n\n  /**\n   * Preferred placement of the tooltip relative to the trigger.\n   * Supports all Floating UI placement values including alignment variants\n   * (e.g. 'top-start', 'bottom-end') and 'auto'.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /**\n   * Delay in milliseconds before the tooltip is shown.\n   * @attr show-delay\n   */\n  @property({ type: Number, attribute: 'show-delay' })\n  showDelay = 300;\n\n  /**\n   * Delay in milliseconds before the tooltip is hidden.\n   * @attr hide-delay\n   */\n  @property({ type: Number, attribute: 'hide-delay' })\n  hideDelay = 100;\n\n  /** @internal */\n  @state() private _visible = false;\n\n  /** @internal */\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n  /** @internal */\n  private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** @internal */\n  private readonly _tooltipId = `hx-tooltip-${++_tooltipCounter}`;\n\n  /** @internal */\n  @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('slot[name=\"content\"]') private _contentSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('.trigger-wrapper') private _triggerWrapper!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"tooltip\"]') private _tooltipEl!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"arrow\"]') private _arrowEl!: HTMLElement | null;\n\n  /**\n   * Visually-hidden description element in light DOM.\n   * Necessary because aria-describedby cannot cross Shadow DOM boundaries —\n   * ARIA ID references are scoped to the element's root node. This element\n   * lives in the document scope so the trigger's aria-describedby resolves correctly.\n   * @internal\n   */\n  private _lightDomDescription: HTMLSpanElement | null = null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n    // Re-run ARIA setup on reconnection (firstUpdated does not re-run).\n    // hasUpdated is true after the first update cycle completes.\n    if (this.hasUpdated) {\n      this._setupTriggerAria();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n    this._clearTimers();\n    this._lightDomDescription?.remove();\n    this._lightDomDescription = null;\n  }\n\n  override firstUpdated(): void {\n    this._setupTriggerAria();\n  }\n\n  // ─── ARIA setup ───\n\n  /** @internal */\n  private _setupTriggerAria(): void {\n    const slot = this._defaultSlot;\n    if (!slot) return;\n    const trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n\n    // Sync content from the content slot into a visually-hidden light DOM element.\n    // aria-describedby cannot cross Shadow DOM boundaries, so the referenced element\n    // must live in the document scope (light DOM), not inside the shadow root.\n    const contentSlot = this._contentSlot;\n    const contentText =\n      contentSlot\n        ?.assignedElements()\n        .map((el) => el.textContent)\n        .join(' ')\n        .trim() ?? '';\n\n    // Guard for SSR — document is unavailable server-side\n    if (!this._lightDomDescription && typeof document !== 'undefined') {\n      this._lightDomDescription = document.createElement('span');\n      this._lightDomDescription.id = this._tooltipId;\n      // Visually hidden but accessible to screen readers via aria-describedby\n      this._lightDomDescription.style.cssText =\n        'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n      this.appendChild(this._lightDomDescription);\n    }\n    if (this._lightDomDescription) {\n      this._lightDomDescription.textContent = contentText;\n    }\n\n    if (trigger) {\n      trigger.setAttribute('aria-describedby', this._tooltipId);\n    }\n  }\n\n  // ─── Show/Hide ───\n\n  /** @internal */\n  private _scheduleShow(): void {\n    this._clearTimers();\n    this._showTimer = setTimeout(() => {\n      void this._show();\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  private _scheduleHide(): void {\n    this._clearTimers();\n    this._hideTimer = setTimeout(() => {\n      this._hide();\n    }, this.hideDelay);\n  }\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    this._visible = true;\n    await this.updateComplete;\n    await this._updatePosition();\n  }\n\n  /** @internal */\n  private _hide(): void {\n    this._visible = false;\n  }\n\n  /** @internal */\n  private _clearTimers(): void {\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hideTimer !== null) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = null;\n    }\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const reference = this._triggerWrapper;\n    const tooltipEl = this._tooltipEl;\n    const arrowEl = this._arrowEl;\n\n    if (!reference || !tooltipEl || !arrowEl) return;\n\n    const { x, y, placement, middlewareData } = await computePosition(reference, tooltipEl, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware: [offset(8), flip(), shift({ padding: 8 }), arrow({ element: arrowEl })],\n    });\n\n    Object.assign(tooltipEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const arrowData = middlewareData.arrow;\n    const basePlacement = placement.split('-')[0] ?? 'top';\n    const oppositeSide: Record<string, string> = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    };\n    const staticSide = oppositeSide[basePlacement] ?? 'bottom';\n\n    // Offset is derived from the arrow element's actual size so that custom\n    // --hx-tooltip-arrow-size values position the arrow correctly.\n    Object.assign(arrowEl.style, {\n      left: arrowData?.x != null ? `${arrowData.x}px` : '',\n      top: arrowData?.y != null ? `${arrowData.y}px` : '',\n      right: '',\n      bottom: '',\n      [staticSide]: `${-(arrowEl.offsetWidth / 2)}px`,\n    });\n  }\n\n  // ─── Events ───\n\n  /** @internal */\n  private _handleKeydown = (e: Event): void => {\n    if (!(e instanceof KeyboardEvent)) return;\n    if (e.key === 'Escape' && this._visible) {\n      this._clearTimers();\n      this._hide();\n    }\n  };\n\n  /**\n   * Handle mouseleave on the trigger wrapper.\n   * Does not schedule hide if keyboard focus is still on the trigger element,\n   * preventing mixed keyboard+mouse interactions from dismissing the tooltip\n   * while the user is still navigating by keyboard.\n   * @internal\n   */\n  private _handleTriggerMouseleave(): void {\n    const slot = this._defaultSlot;\n    const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n    // Guard for SSR — document is unavailable server-side\n    const active = typeof document !== 'undefined' ? document.activeElement : null;\n    if (trigger && (trigger === active || trigger.contains(active))) {\n      return;\n    }\n    this._scheduleHide();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrapper\"\n        @mouseenter=${this._scheduleShow}\n        @mouseleave=${this._handleTriggerMouseleave}\n        @focusin=${this._scheduleShow}\n        @focusout=${this._scheduleHide}\n      >\n        <slot @slotchange=${this._setupTriggerAria}></slot>\n      </div>\n      <div\n        part=\"tooltip\"\n        id=${this._tooltipId}\n        role=\"tooltip\"\n        aria-hidden=${String(!this._visible)}\n        class=${this._visible ? 'visible' : ''}\n        @mouseenter=${this._clearTimers}\n        @mouseleave=${this._scheduleHide}\n      >\n        <slot name=\"content\" @slotchange=${this._setupTriggerAria}></slot>\n        <div part=\"arrow\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tooltip': HelixTooltip;\n  }\n}\n"],"names":["helixTooltipStyles","css","_tooltipCounter","HelixTooltip","LitElement","e","_a","slot","trigger","contentSlot","contentText","el","reference","tooltipEl","arrowEl","x","y","placement","middlewareData","computePosition","offset","flip","shift","arrow","arrowData","basePlacement","staticSide","active","html","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-top-nav-28mxYGuj.js → hx-top-nav-CC4FW2Hp.js}

@@ -1,5 +1,5 @@
 import { css as h, LitElement as v, svg as p, html as d } from "lit";
-import "./document-token-adoption-Dym9ALA4.js";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as c, state as m, customElement as b } from "lit/decorators.js";
 import { classMap as x } from "lit/directives/class-map.js";
 const g = h`
@@ -341,4 +341,4 @@ l = s([
 export {
   l as H
 };
-//# sourceMappingURL=hx-top-nav-28mxYGuj.js.map
+//# sourceMappingURL=hx-top-nav-CC4FW2Hp.js.map

package/dist/shared/{hx-top-nav-28mxYGuj.js.map → hx-top-nav-CC4FW2Hp.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-top-nav-28mxYGuj.js","sources":["../../src/components/hx-top-nav/hx-top-nav.styles.ts","../../src/components/hx-top-nav/hx-top-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTopNavStyles = css`\n  /* ─── Host ─── */\n\n  :host {\n    display: block;\n  }\n\n  /* ─── Header wrapper (landmark) ─── */\n\n  header {\n    display: block;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Sticky mode ─── */\n\n  :host([sticky]) .nav {\n    position: sticky;\n    top: 0;\n    /* Fallback 1000 is appropriate for sticky navbars (below modals ~1300, above content) */\n    z-index: var(--hx-top-nav-z-index, var(--hx-z-index-sticky, 1000));\n  }\n\n  /* ─── Nav container ─── */\n\n  .nav {\n    background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Bar row (always visible) ─── */\n\n  .nav__bar {\n    display: flex;\n    align-items: center;\n    min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Logo ─── */\n\n  .nav__logo {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  /* ─── Mobile toggle (hamburger) ─── */\n\n  .mobile-toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-inline-start: auto;\n    /* var(--hx-space-3, 0.75rem) padding + 24px icon = 48×48px touch target (exceeds WCAG 2.5.5 44×44px) */\n    padding: var(--hx-space-3, 0.75rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));\n    cursor: pointer;\n    line-height: 0;\n  }\n\n  .mobile-toggle:hover {\n    background: var(--hx-color-neutral-100, #f1f3f5);\n  }\n\n  .mobile-toggle: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  .mobile-toggle__icon {\n    width: var(--hx-space-6, 1.5rem);\n    height: var(--hx-space-6, 1.5rem);\n  }\n\n  /* ─── Collapsible panel (mobile) ─── */\n\n  .nav__collapsible {\n    display: none;\n    flex-direction: column;\n    width: 100%;\n    padding-block: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  .nav__collapsible--open {\n    display: flex;\n    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;\n  }\n\n  /* ─── Menu and actions in collapsible (mobile) ─── */\n\n  .nav__menu,\n  .nav__actions {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n  }\n\n  .nav__actions {\n    margin-top: var(--hx-space-3, 0.75rem);\n    padding-top: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  /* ─── Desktop breakpoint ─── */\n\n  /* NOTE: CSS @media queries do not support custom properties.\n     This value corresponds to --hx-breakpoint-md (768px). */\n  @media (min-width: 768px) {\n    /* Make nav a flex row so bar and collapsible sit side-by-side */\n    .nav {\n      display: flex;\n      align-items: center;\n      padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n    }\n\n    .nav__bar {\n      flex-shrink: 0;\n      padding-inline: 0;\n      min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n    }\n\n    /* Hide hamburger on desktop */\n    .mobile-toggle {\n      display: none;\n    }\n\n    /* Collapsible becomes a standard inline flex row */\n    .nav__collapsible {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      flex: 1;\n      padding-block: 0;\n      border-top: none;\n      margin-inline-start: auto;\n      gap: var(--hx-space-4, 1rem);\n      animation: none;\n    }\n\n    /* Override open modifier — always visible on desktop regardless of state */\n    .nav__collapsible--open {\n      display: flex;\n      animation: none;\n    }\n\n    /* Menu grows to fill available space */\n    .nav__menu {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-1, 0.25rem);\n      flex: 1;\n      padding-inline: 0;\n    }\n\n    /* Actions sit at the far right */\n    .nav__actions {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-2, 0.5rem);\n      margin-top: 0;\n      padding-top: 0;\n      padding-inline: 0;\n      border-top: none;\n      flex-shrink: 0;\n    }\n  }\n\n  /* ─── Mobile menu open animation ─── */\n\n  @keyframes hx-mobile-nav-open {\n    from {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav__collapsible--open {\n      animation: none;\n    }\n  }\n`;\n","import { LitElement, html, svg } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixTopNavStyles } from './hx-top-nav.styles.js';\n\n/**\n * Top-of-page site navigation bar with logo, menu items, and utility area.\n * Supports sticky positioning, responsive hamburger menu, and full slot-driven\n * content composition for Drupal and other CMS consumers.\n *\n * @summary Site-level navigation bar with logo, nav items, and action slots.\n *\n * @tag hx-top-nav\n *\n * @slot logo - Brand area rendered on the left side.\n * @slot - Default slot for primary navigation items rendered in the center.\n *   IMPORTANT: Do NOT place a `<nav>` element in this slot — the component\n *   already renders a `<nav>` landmark internally. Use a `<div>` or bare links.\n * @slot actions - Utility area rendered on the right side (search, user menu, etc.).\n *\n * @fires {CustomEvent<{open: boolean}>} hx-mobile-toggle - Dispatched when the\n *   hamburger button is toggled. Detail contains the new open state.\n *\n * @csspart header - The outer `<header>` landmark element.\n * @csspart nav - The `<nav>` element inside the header.\n * @csspart logo - The logo slot container.\n * @csspart menu - The primary navigation slot container.\n * @csspart actions - The actions slot container.\n * @csspart mobile-toggle - The hamburger toggle button.\n *\n * @cssprop [--hx-top-nav-bg=var(--hx-color-neutral-0)] - Navigation bar background color.\n * @cssprop [--hx-top-nav-color=var(--hx-color-neutral-800)] - Navigation bar text color.\n * @cssprop [--hx-top-nav-border-color=var(--hx-color-neutral-200)] - Bottom border color.\n * @cssprop [--hx-top-nav-height=var(--hx-space-16)] - Navigation bar height.\n * @cssprop [--hx-top-nav-padding-x=var(--hx-space-6)] - Horizontal padding.\n * @cssprop [--hx-top-nav-z-index=var(--hx-z-index-sticky)] - Z-index for sticky mode.\n * @cssprop [--hx-top-nav-toggle-color=var(--hx-color-neutral-700)] - Hamburger icon color.\n */\n@customElement('hx-top-nav')\nexport class HelixTopNav extends LitElement {\n  static override styles = [helixTopNavStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * When true, the navigation bar sticks to the top of the viewport during scroll.\n   * @attr sticky\n   */\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /**\n   * Accessible label applied to the `<nav>` element via `aria-label`.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Site Navigation';\n\n  // ─── Private State ───\n\n  /** Whether the mobile collapsible menu is currently open. */\n  /** @internal */\n  @state() private _mobileOpen = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleMobileToggle(): void {\n    this._mobileOpen = !this._mobileOpen;\n\n    /**\n     * Dispatched when the hamburger button is toggled.\n     * @event hx-mobile-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this._mobileOpen },\n      }),\n    );\n\n    if (this._mobileOpen) {\n      // Move focus to first truly interactive element in the default slot (WCAG 2.4.3).\n      // A plain HTMLElement (e.g. <div>) is not keyboard-reachable; we must find a\n      // focusable descendant to avoid trapping focus on a non-interactive node.\n      void this.updateComplete.then(() => {\n        const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex=\"0\"]';\n        const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n        const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n        let firstFocusable: HTMLElement | null = null;\n        for (const el of assigned) {\n          if (!(el instanceof HTMLElement)) continue;\n          if (el.matches(FOCUSABLE_SELECTOR)) {\n            firstFocusable = el;\n            break;\n          }\n          const found = el.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n          if (found) {\n            firstFocusable = found;\n            break;\n          }\n        }\n        firstFocusable?.focus();\n      });\n    }\n  }\n\n  /** @internal */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this._mobileOpen) {\n      this._mobileOpen = false;\n      this.dispatchEvent(\n        new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n          bubbles: true,\n          composed: true,\n          detail: { open: false },\n        }),\n      );\n      // Return focus to the toggle button\n      this.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"mobile-toggle\"]')?.focus();\n    }\n  };\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderHamburgerIcon() {\n    return html`\n      <svg\n        class=\"mobile-toggle__icon\"\n        aria-hidden=\"true\"\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      >\n        ${this._mobileOpen\n          ? svg`\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            `\n          : svg`\n              <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n              <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n              <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>\n            `}\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const menuClasses = {\n      nav__collapsible: true,\n      'nav__collapsible--open': this._mobileOpen,\n    };\n\n    return html`\n      <header part=\"header\">\n        <nav part=\"nav\" class=\"nav\" aria-label=${this.label}>\n          <div class=\"nav__bar\">\n            <div part=\"logo\" class=\"nav__logo\">\n              <slot name=\"logo\"></slot>\n            </div>\n\n            <button\n              part=\"mobile-toggle\"\n              class=\"mobile-toggle\"\n              type=\"button\"\n              aria-expanded=${String(this._mobileOpen)}\n              aria-controls=\"nav-menu\"\n              aria-label=${this._mobileOpen ? 'Close navigation' : 'Open navigation'}\n              @click=${this._handleMobileToggle}\n            >\n              ${this._renderHamburgerIcon()}\n            </button>\n          </div>\n\n          <div id=\"nav-menu\" class=${classMap(menuClasses)}>\n            <div part=\"menu\" class=\"nav__menu\">\n              <slot></slot>\n            </div>\n\n            <div part=\"actions\" class=\"nav__actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n        </nav>\n      </header>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-top-nav': HelixTopNav;\n  }\n}\n"],"names":["helixTopNavStyles","css","HelixTopNav","LitElement","e","_b","_a","FOCUSABLE_SELECTOR","slot","assigned","firstFocusable","el","found","html","svg","menuClasses","classMap","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-top-nav-CC4FW2Hp.js","sources":["../../src/components/hx-top-nav/hx-top-nav.styles.ts","../../src/components/hx-top-nav/hx-top-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTopNavStyles = css`\n  /* ─── Host ─── */\n\n  :host {\n    display: block;\n  }\n\n  /* ─── Header wrapper (landmark) ─── */\n\n  header {\n    display: block;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Sticky mode ─── */\n\n  :host([sticky]) .nav {\n    position: sticky;\n    top: 0;\n    /* Fallback 1000 is appropriate for sticky navbars (below modals ~1300, above content) */\n    z-index: var(--hx-top-nav-z-index, var(--hx-z-index-sticky, 1000));\n  }\n\n  /* ─── Nav container ─── */\n\n  .nav {\n    background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Bar row (always visible) ─── */\n\n  .nav__bar {\n    display: flex;\n    align-items: center;\n    min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Logo ─── */\n\n  .nav__logo {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  /* ─── Mobile toggle (hamburger) ─── */\n\n  .mobile-toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-inline-start: auto;\n    /* var(--hx-space-3, 0.75rem) padding + 24px icon = 48×48px touch target (exceeds WCAG 2.5.5 44×44px) */\n    padding: var(--hx-space-3, 0.75rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));\n    cursor: pointer;\n    line-height: 0;\n  }\n\n  .mobile-toggle:hover {\n    background: var(--hx-color-neutral-100, #f1f3f5);\n  }\n\n  .mobile-toggle: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  .mobile-toggle__icon {\n    width: var(--hx-space-6, 1.5rem);\n    height: var(--hx-space-6, 1.5rem);\n  }\n\n  /* ─── Collapsible panel (mobile) ─── */\n\n  .nav__collapsible {\n    display: none;\n    flex-direction: column;\n    width: 100%;\n    padding-block: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  .nav__collapsible--open {\n    display: flex;\n    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;\n  }\n\n  /* ─── Menu and actions in collapsible (mobile) ─── */\n\n  .nav__menu,\n  .nav__actions {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n  }\n\n  .nav__actions {\n    margin-top: var(--hx-space-3, 0.75rem);\n    padding-top: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  /* ─── Desktop breakpoint ─── */\n\n  /* NOTE: CSS @media queries do not support custom properties.\n     This value corresponds to --hx-breakpoint-md (768px). */\n  @media (min-width: 768px) {\n    /* Make nav a flex row so bar and collapsible sit side-by-side */\n    .nav {\n      display: flex;\n      align-items: center;\n      padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n    }\n\n    .nav__bar {\n      flex-shrink: 0;\n      padding-inline: 0;\n      min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n    }\n\n    /* Hide hamburger on desktop */\n    .mobile-toggle {\n      display: none;\n    }\n\n    /* Collapsible becomes a standard inline flex row */\n    .nav__collapsible {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      flex: 1;\n      padding-block: 0;\n      border-top: none;\n      margin-inline-start: auto;\n      gap: var(--hx-space-4, 1rem);\n      animation: none;\n    }\n\n    /* Override open modifier — always visible on desktop regardless of state */\n    .nav__collapsible--open {\n      display: flex;\n      animation: none;\n    }\n\n    /* Menu grows to fill available space */\n    .nav__menu {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-1, 0.25rem);\n      flex: 1;\n      padding-inline: 0;\n    }\n\n    /* Actions sit at the far right */\n    .nav__actions {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-2, 0.5rem);\n      margin-top: 0;\n      padding-top: 0;\n      padding-inline: 0;\n      border-top: none;\n      flex-shrink: 0;\n    }\n  }\n\n  /* ─── Mobile menu open animation ─── */\n\n  @keyframes hx-mobile-nav-open {\n    from {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav__collapsible--open {\n      animation: none;\n    }\n  }\n`;\n","import { LitElement, html, svg } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixTopNavStyles } from './hx-top-nav.styles.js';\n\n/**\n * Top-of-page site navigation bar with logo, menu items, and utility area.\n * Supports sticky positioning, responsive hamburger menu, and full slot-driven\n * content composition for Drupal and other CMS consumers.\n *\n * @summary Site-level navigation bar with logo, nav items, and action slots.\n *\n * @tag hx-top-nav\n *\n * @slot logo - Brand area rendered on the left side.\n * @slot - Default slot for primary navigation items rendered in the center.\n *   IMPORTANT: Do NOT place a `<nav>` element in this slot — the component\n *   already renders a `<nav>` landmark internally. Use a `<div>` or bare links.\n * @slot actions - Utility area rendered on the right side (search, user menu, etc.).\n *\n * @fires {CustomEvent<{open: boolean}>} hx-mobile-toggle - Dispatched when the\n *   hamburger button is toggled. Detail contains the new open state.\n *\n * @csspart header - The outer `<header>` landmark element.\n * @csspart nav - The `<nav>` element inside the header.\n * @csspart logo - The logo slot container.\n * @csspart menu - The primary navigation slot container.\n * @csspart actions - The actions slot container.\n * @csspart mobile-toggle - The hamburger toggle button.\n *\n * @cssprop [--hx-top-nav-bg=var(--hx-color-neutral-0)] - Navigation bar background color.\n * @cssprop [--hx-top-nav-color=var(--hx-color-neutral-800)] - Navigation bar text color.\n * @cssprop [--hx-top-nav-border-color=var(--hx-color-neutral-200)] - Bottom border color.\n * @cssprop [--hx-top-nav-height=var(--hx-space-16)] - Navigation bar height.\n * @cssprop [--hx-top-nav-padding-x=var(--hx-space-6)] - Horizontal padding.\n * @cssprop [--hx-top-nav-z-index=var(--hx-z-index-sticky)] - Z-index for sticky mode.\n * @cssprop [--hx-top-nav-toggle-color=var(--hx-color-neutral-700)] - Hamburger icon color.\n */\n@customElement('hx-top-nav')\nexport class HelixTopNav extends LitElement {\n  static override styles = [helixTopNavStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * When true, the navigation bar sticks to the top of the viewport during scroll.\n   * @attr sticky\n   */\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /**\n   * Accessible label applied to the `<nav>` element via `aria-label`.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Site Navigation';\n\n  // ─── Private State ───\n\n  /** Whether the mobile collapsible menu is currently open. */\n  /** @internal */\n  @state() private _mobileOpen = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleMobileToggle(): void {\n    this._mobileOpen = !this._mobileOpen;\n\n    /**\n     * Dispatched when the hamburger button is toggled.\n     * @event hx-mobile-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this._mobileOpen },\n      }),\n    );\n\n    if (this._mobileOpen) {\n      // Move focus to first truly interactive element in the default slot (WCAG 2.4.3).\n      // A plain HTMLElement (e.g. <div>) is not keyboard-reachable; we must find a\n      // focusable descendant to avoid trapping focus on a non-interactive node.\n      void this.updateComplete.then(() => {\n        const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex=\"0\"]';\n        const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n        const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n        let firstFocusable: HTMLElement | null = null;\n        for (const el of assigned) {\n          if (!(el instanceof HTMLElement)) continue;\n          if (el.matches(FOCUSABLE_SELECTOR)) {\n            firstFocusable = el;\n            break;\n          }\n          const found = el.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n          if (found) {\n            firstFocusable = found;\n            break;\n          }\n        }\n        firstFocusable?.focus();\n      });\n    }\n  }\n\n  /** @internal */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this._mobileOpen) {\n      this._mobileOpen = false;\n      this.dispatchEvent(\n        new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n          bubbles: true,\n          composed: true,\n          detail: { open: false },\n        }),\n      );\n      // Return focus to the toggle button\n      this.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"mobile-toggle\"]')?.focus();\n    }\n  };\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderHamburgerIcon() {\n    return html`\n      <svg\n        class=\"mobile-toggle__icon\"\n        aria-hidden=\"true\"\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      >\n        ${this._mobileOpen\n          ? svg`\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            `\n          : svg`\n              <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n              <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n              <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>\n            `}\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const menuClasses = {\n      nav__collapsible: true,\n      'nav__collapsible--open': this._mobileOpen,\n    };\n\n    return html`\n      <header part=\"header\">\n        <nav part=\"nav\" class=\"nav\" aria-label=${this.label}>\n          <div class=\"nav__bar\">\n            <div part=\"logo\" class=\"nav__logo\">\n              <slot name=\"logo\"></slot>\n            </div>\n\n            <button\n              part=\"mobile-toggle\"\n              class=\"mobile-toggle\"\n              type=\"button\"\n              aria-expanded=${String(this._mobileOpen)}\n              aria-controls=\"nav-menu\"\n              aria-label=${this._mobileOpen ? 'Close navigation' : 'Open navigation'}\n              @click=${this._handleMobileToggle}\n            >\n              ${this._renderHamburgerIcon()}\n            </button>\n          </div>\n\n          <div id=\"nav-menu\" class=${classMap(menuClasses)}>\n            <div part=\"menu\" class=\"nav__menu\">\n              <slot></slot>\n            </div>\n\n            <div part=\"actions\" class=\"nav__actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n        </nav>\n      </header>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-top-nav': HelixTopNav;\n  }\n}\n"],"names":["helixTopNavStyles","css","HelixTopNav","LitElement","e","_b","_a","FOCUSABLE_SELECTOR","slot","assigned","firstFocusable","el","found","html","svg","menuClasses","classMap","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-tree-item-C-cRw_ZA.js → hx-tree-item-CPQ9dJiK.js}

@@ -1,5 +1,5 @@
 import { css as b, LitElement as _, nothing as p, html as x } from "lit";
-import "./document-token-adoption-Dym9ALA4.js";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as m, state as c, customElement as g, query as y } from "lit/decorators.js";
 import { classMap as w } from "lit/directives/class-map.js";
 const I = b`
@@ -672,4 +672,4 @@ export {
   l as H,
   d as a
 };
-//# sourceMappingURL=hx-tree-item-C-cRw_ZA.js.map
+//# sourceMappingURL=hx-tree-item-CPQ9dJiK.js.map

package/dist/shared/{hx-tree-item-C-cRw_ZA.js.map → hx-tree-item-CPQ9dJiK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-tree-item-C-cRw_ZA.js","sources":["../../src/components/hx-tree-view/hx-tree-view.styles.ts","../../src/components/hx-tree-view/hx-tree-view.ts","../../src/components/hx-tree-view/hx-tree-item.styles.ts","../../src/components/hx-tree-view/hx-tree-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTreeViewStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n    font-family: var(--hx-tree-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .tree {\n    display: block;\n    outline: none;\n  }\n\n  .tree:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { helixTreeViewStyles } from './hx-tree-view.styles.js';\nimport type { HelixTreeItem, HxTreeItemSelectDetail } from './hx-tree-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Selection mode for the tree. */\nexport type TreeSelection = 'none' | 'single' | 'multiple';\n\n/** Detail type for the `hx-select` event. */\nexport interface HxSelectDetail {\n  /** The tree item that was selected or deselected. */\n  item: HelixTreeItem;\n  /** Whether the item is now selected. */\n  selected: boolean;\n}\n\n/**\n * A hierarchical tree component for navigating nested data structures.\n * Used in healthcare applications for org charts, ICD-10 code hierarchies, and department navigation.\n *\n * Implements WAI-ARIA tree view pattern with `role=\"tree\"` on the container\n * and `role=\"treeitem\"` on each item. Supports `aria-label` via the `label` property\n * for screen reader identification. Full keyboard navigation: Arrow keys for movement,\n * Enter/Space for selection, Home/End for first/last item.\n *\n * ## Scale Limits\n *\n * This component renders all tree items simultaneously in the DOM. It is suitable for\n * trees with up to ~500 visible items. For large taxonomies (e.g., ICD-10 with 70,000+\n * codes), use async/lazy loading: only render top-level nodes initially and populate\n * child nodes on `hx-select` or expand events. The component exposes the `expanded`\n * property on `hx-tree-item` for programmatic control of subtrees, enabling consumer-level\n * virtualization strategies without requiring changes to this component.\n *\n * @summary Hierarchical tree view with expand/collapse and keyboard navigation.\n *\n * @tag hx-tree-view\n *\n * @slot - Default slot for hx-tree-item elements.\n *\n * @fires {CustomEvent<HxSelectDetail>} hx-select - Dispatched when a tree item is selected or deselected.\n *\n * @csspart tree - The tree container element with role=\"tree\".\n *\n * @cssprop [--hx-tree-font-family=var(--hx-font-family-sans)] - Tree font family.\n */\n@customElement('hx-tree-view')\nexport class HelixTreeView extends LitElement {\n  static override styles = [helixTreeViewStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Accessible label for the tree. Applied as `aria-label` on the tree container.\n   * Provides context to screen readers about the tree's purpose.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Selection mode for the tree.\n   * - `none` — items cannot be selected\n   * - `single` — only one item can be selected at a time\n   * - `multiple` — multiple items can be selected\n   * @attr selection\n   */\n  @property({ type: String, reflect: true })\n  selection: 'none' | 'single' | 'multiple' = 'none';\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _currentIndex = 0;\n\n  /** Tracks whether the tree has any visible items, to decide the container tabindex. */\n  /** @internal */\n  @state() private _hasVisibleItems = false;\n\n  // ─── Visible items cache ───\n\n  /**\n   * Cached flat list of visible items (depth-first, respects collapsed nodes).\n   * Set to null to invalidate; rebuilt on next access.\n   * @internal\n   */\n  private _cachedVisibleItems: HelixTreeItem[] | null = null;\n\n  /**\n   * Invalidate the visible-items cache. Call after any expand/collapse or structural change.\n   * @internal\n   */\n  private _invalidateVisibleItemsCache(): void {\n    this._cachedVisibleItems = null;\n  }\n\n  // ─── Internal Helpers ───\n\n  /**\n   * Returns a flat ordered list of all visible (not inside a collapsed item) hx-tree-items\n   * in depth-first order. Result is cached; invalidated on expand/collapse/slotchange.\n   */\n  /** @internal */\n  private _getVisibleItems(): HelixTreeItem[] {\n    if (!this._cachedVisibleItems) {\n      this._cachedVisibleItems = this._collectVisibleItems(this);\n    }\n    return this._cachedVisibleItems;\n  }\n\n  /** @internal */\n  private _collectVisibleItems(container: Element): HelixTreeItem[] {\n    const items: HelixTreeItem[] = [];\n    for (const child of Array.from(container.children)) {\n      if (child.tagName.toLowerCase() === 'hx-tree-item') {\n        const item = child as HelixTreeItem;\n        items.push(item);\n        if (item.expanded) {\n          items.push(...this._collectVisibleItems(item));\n        }\n      } else {\n        items.push(...this._collectVisibleItems(child));\n      }\n    }\n    return items;\n  }\n\n  /** @internal */\n  private _getSelectedItems(): HelixTreeItem[] {\n    return Array.from(this.querySelectorAll<HelixTreeItem>('hx-tree-item[selected]'));\n  }\n\n  /**\n   * Updates the roving tabindex across all visible items so that only the\n   * item at `activeIndex` has `tabindex=\"0\"`. All others receive `tabindex=\"-1\"`.\n   * This is called whenever the active item changes (navigation, initial render).\n   */\n  /** @internal */\n  private _updateRovingTabindex(items: HelixTreeItem[], activeIndex: number): void {\n    items.forEach((item, i) => {\n      item.setRovingActive(i === activeIndex);\n    });\n  }\n\n  /** @internal */\n  private _focusItem(index: number): void {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return;\n    const clamped = Math.max(0, Math.min(index, items.length - 1));\n    this._currentIndex = clamped;\n    this._updateRovingTabindex(items, clamped);\n    items[clamped]?.focus();\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleTreeItemSelect(e: Event): void {\n    if (!(e instanceof CustomEvent)) return;\n    const event = e as CustomEvent<HxTreeItemSelectDetail>;\n    const item = event.detail.item;\n\n    if (this.selection === 'none') return;\n\n    if (this.selection === 'single') {\n      const wasSelected = item.selected;\n      this._getSelectedItems().forEach((i) => {\n        i.selected = false;\n      });\n      item.selected = !wasSelected;\n    } else if (this.selection === 'multiple') {\n      item.selected = !item.selected;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<HxSelectDetail>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item, selected: item.selected },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return;\n\n    let currentIndex = this._currentIndex;\n    const focused = document.activeElement;\n\n    for (let i = 0; i < items.length; i++) {\n      if (items[i] === focused || items[i]?.shadowRoot?.activeElement) {\n        currentIndex = i;\n        break;\n      }\n    }\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        // Intentional design: wrap-around from last to first item provides\n        // a continuous navigation loop, consistent with the component's\n        // circular keyboard navigation model.\n        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        this._focusItem(next);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        // Intentional design: wrap-around from first to last item (see ArrowDown note).\n        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        this._focusItem(prev);\n        break;\n      }\n      case 'ArrowLeft': {\n        e.preventDefault();\n        const currentItem = items[currentIndex];\n        if (!currentItem) break;\n        if (currentItem.expanded && currentItem.hasChildItems) {\n          currentItem.expanded = false;\n          this._invalidateVisibleItemsCache();\n        } else {\n          const parentItem = currentItem.parentElement?.closest('hx-tree-item') as\n            | HelixTreeItem\n            | undefined;\n          if (parentItem) {\n            const parentIndex = items.indexOf(parentItem);\n            if (parentIndex >= 0) {\n              this._focusItem(parentIndex);\n            }\n          }\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        e.preventDefault();\n        const currentItem = items[currentIndex];\n        if (!currentItem) break;\n        if (currentItem.hasChildItems) {\n          if (!currentItem.expanded) {\n            currentItem.expanded = true;\n            this._invalidateVisibleItemsCache();\n          } else {\n            this._focusItem(currentIndex + 1);\n          }\n        }\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        this._focusItem(0);\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        this._focusItem(items.length - 1);\n        break;\n      }\n      default: {\n        // WAI-ARIA APG typeahead: a printable character moves focus to the next visible\n        // item whose label starts with that character (case-insensitive).\n        if (e.key.length === 1) {\n          e.preventDefault();\n          const matchIndex = this._findTypeaheadMatch(e.key.toLowerCase(), currentIndex);\n          if (matchIndex !== -1) {\n            this._focusItem(matchIndex);\n          }\n        }\n        break;\n      }\n    }\n  }\n\n  /**\n   * Finds the next visible item (starting after `currentIndex`, wrapping around) whose\n   * label text begins with the given lowercase character. Returns -1 if no match.\n   * @internal\n   */\n  private _findTypeaheadMatch(char: string, currentIndex: number): number {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return -1;\n    for (let i = 1; i <= items.length; i++) {\n      const index = (currentIndex + i) % items.length;\n      const item = items[index];\n      if (item && item.labelText.toLowerCase().startsWith(char)) {\n        return index;\n      }\n    }\n    return -1;\n  }\n\n  /** @internal */\n  private _handleFocusIn(e: FocusEvent): void {\n    // With roving tabindex, the tree container (tabindex=\"-1\") should only receive\n    // focus when the tree is empty. If focus does land on the container (e.g. the\n    // tree is empty or programmatic focus), redirect to the active item if present.\n    if (e.target === e.currentTarget) {\n      const items = this._getVisibleItems();\n      if (items.length > 0) {\n        this._focusItem(this._currentIndex);\n      }\n    }\n  }\n\n  /**\n   * Compute and push ARIA position metadata (level, posInSet, setSize, selectable) to all\n   * direct hx-tree-item children of a container in a single O(n) pass.\n   * Each item also recurses for its own children, building the full tree in O(total-items) total.\n   * @internal\n   */\n  private _updateAriaMetadataForContainer(container: Element, level: number): void {\n    const selectable = this.selection === 'single' || this.selection === 'multiple';\n    const children = Array.from(container.children).filter(\n      (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n    ) as HelixTreeItem[];\n    const setSize = children.length;\n    children.forEach((item, index) => {\n      item.setAriaMetadata(level, index + 1, setSize, selectable);\n      // Recurse into child items so the full tree is updated in one traversal\n      this._updateAriaMetadataForContainer(item, level + 1);\n    });\n  }\n\n  /**\n   * Initializes the roving tabindex after items are first slotted in.\n   * Ensures the active item (index 0 by default) has tabindex=\"0\" from the start,\n   * so a Tab into the tree lands directly on the first item without a redirect.\n   * Also updates `_hasVisibleItems` so the container tabindex re-renders correctly.\n   * Pushes O(n) ARIA metadata to all items to replace the O(n^2) per-item ancestor walk.\n   */\n  /** @internal */\n  private _handleSlotChange(): void {\n    this._invalidateVisibleItemsCache();\n    // Push ARIA metadata from parent in a single O(n) traversal\n    this._updateAriaMetadataForContainer(this, 1);\n    const items = this._getVisibleItems();\n    this._hasVisibleItems = items.length > 0;\n    if (items.length === 0) return;\n    // Clamp _currentIndex in case items were removed.\n    const clamped = Math.min(this._currentIndex, items.length - 1);\n    this._currentIndex = clamped;\n    this._updateRovingTabindex(items, clamped);\n  }\n\n  // ─── Lifecycle ───\n\n  override firstUpdated(): void {\n    if (!this.label) {\n      devWarn(\n        'hx-tree-view',\n        'No accessible label provided. Set the `label` attribute on hx-tree-view so screen readers can identify this tree (WCAG 4.1.2).',\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Roving tabindex pattern (WCAG 2.4.3 Fix):\n    // The tree container is NOT a Tab stop (tabindex=\"-1\"). Tab focus goes\n    // directly to the active item, which carries tabindex=\"0\". The container\n    // is only a landing target (tabindex=\"0\") when the tree is empty.\n    const containerTabindex = this._hasVisibleItems ? '-1' : '0';\n\n    return html`\n      <div\n        part=\"tree\"\n        class=\"tree\"\n        role=\"tree\"\n        tabindex=${containerTabindex}\n        aria-label=${this.label || 'Tree'}\n        aria-multiselectable=${this.selection === 'none'\n          ? nothing\n          : this.selection === 'multiple'\n            ? 'true'\n            : 'false'}\n        @hx-tree-item-select=${this._handleTreeItemSelect}\n        @keydown=${this._handleKeyDown}\n        @focusin=${this._handleFocusIn}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tree-view': HelixTreeView;\n  }\n}\n\n/** Canonical type alias for HelixTreeView. Use this when typing hx-tree-view element references. */\nexport type HxTreeView = HelixTreeView;\n\n/** @deprecated Use {@link HxTreeView} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeView = HelixTreeView;\n","import { css } from 'lit';\n\nexport const helixTreeItemStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Item Container ─── */\n\n  .item {\n    display: block;\n  }\n\n  /* ─── Item Row ─── */\n\n  .item-row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-tree-item-gap, var(--hx-space-2, 0.5rem));\n    padding: var(--hx-tree-item-padding-y, var(--hx-space-1, 0.25rem))\n      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem));\n    padding-inline-start: calc(\n      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem)) + var(--_indent-level, 0) *\n        var(--hx-tree-indent-size, 1.5rem)\n    );\n    border-radius: var(--hx-tree-item-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    cursor: pointer;\n    outline: none;\n    color: var(--hx-tree-item-color, var(--hx-color-neutral-900, #111827));\n    font-family: var(--hx-tree-item-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-tree-item-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n  }\n\n  .item-row:hover {\n    background-color: var(--hx-tree-item-hover-bg, var(--hx-color-neutral-100, #f3f4f6));\n  }\n\n  .item-row:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n  }\n\n  /* ─── Selected State ─── */\n\n  :host([selected]) .item-row {\n    background-color: var(--hx-tree-item-selected-bg, var(--hx-color-primary-100, #dbeafe));\n    color: var(--hx-tree-item-selected-color, var(--hx-color-primary-800, #1e40af));\n  }\n\n  :host([selected]) .item-row:hover {\n    background-color: var(--hx-tree-item-selected-hover-bg, var(--hx-color-primary-200, #bfdbfe));\n  }\n\n  /* ─── Disabled State ─── */\n\n  :host([disabled]) .item-row {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ─── Expand Icon ─── */\n\n  .expand-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n  }\n\n  .expand-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--hx-tree-item-expand-icon-color, var(--hx-color-neutral-500, #6b7280));\n    cursor: pointer;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    transition: transform var(--hx-transition-fast, 150ms ease);\n    pointer-events: auto;\n  }\n\n  .expand-btn:hover {\n    background-color: var(\n      --hx-tree-item-expand-hover-bg,\n      var(--hx-overlay-black-6, rgba(0, 0, 0, 0.06))\n    );\n  }\n\n  .expand-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .expand-btn svg {\n    width: var(--hx-space-3, 0.75rem);\n    height: var(--hx-space-3, 0.75rem);\n    stroke: currentColor;\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  :host([expanded]) .expand-btn svg {\n    transform: rotate(90deg);\n  }\n\n  .expand-placeholder {\n    display: block;\n    width: var(--hx-space-4, 1rem);\n    flex-shrink: 0;\n  }\n\n  /* ─── Icon Slot ─── */\n\n  .item-icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-tree-item-icon-color, var(--hx-color-neutral-500, #6b7280));\n  }\n\n  .item-icon:empty {\n    display: none;\n  }\n\n  /* ─── Label ─── */\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ─── Children (animated) ─── */\n\n  .children {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--hx-transition-base, 200ms ease);\n    --_indent-level: calc(var(--_indent-level, 0) + 1);\n  }\n\n  .children--expanded {\n    grid-template-rows: 1fr;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .item-row,\n    .expand-btn,\n    .expand-btn svg,\n    .children {\n      transition: none;\n    }\n  }\n\n  .children-inner {\n    overflow: hidden;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixTreeItemStyles } from './hx-tree-item.styles.js';\n\n/** Detail type for the `hx-tree-item-select` event. */\nexport interface HxTreeItemSelectDetail {\n  /** The tree item that was selected or activated. */\n  item: HelixTreeItem;\n}\n\n/**\n * A tree item used within an hx-tree-view component.\n * Supports expand/collapse, selection, keyboard navigation, and icon/children slots.\n *\n * @summary Individual item within an hx-tree-view hierarchical tree.\n *\n * @tag hx-tree-item\n *\n * @slot - Default slot for the item label content. This text is also used to label the children group.\n * @slot icon - Custom icon shown before the label.\n * @slot children - Nested hx-tree-item elements for sub-tree.\n *\n * @csspart item - The outer item container.\n * @csspart row - The interactive item row (contains expand icon, icon slot, and label).\n * @csspart expand-icon - The expand/collapse toggle button.\n * @csspart label - The label text content area.\n * @csspart children - The children container.\n *\n * @cssprop [--hx-tree-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-tree-item-hover-bg=var(--hx-color-neutral-100)] - Hover background color.\n * @cssprop [--hx-tree-item-selected-bg=var(--hx-color-primary-100)] - Selected background color.\n * @cssprop [--hx-tree-item-selected-color=var(--hx-color-primary-800)] - Selected text color.\n * @cssprop [--hx-tree-item-padding-x=var(--hx-space-2)] - Horizontal padding.\n * @cssprop [--hx-tree-item-padding-y=var(--hx-space-1)] - Vertical padding.\n * @cssprop [--hx-tree-indent-size=1.5rem] - Indentation size per level.\n *\n * @fires {CustomEvent<HxTreeItemSelectDetail>} hx-tree-item-select - Dispatched when this item is clicked or activated via keyboard.\n */\n@customElement('hx-tree-item')\nexport class HelixTreeItem extends LitElement {\n  static override styles = [helixTreeItemStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Whether the item is expanded (showing children).\n   * @attr expanded\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Whether the item is selected.\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Whether the item is disabled (non-interactive).\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Internal State ───\n\n  /**\n   * Tracks whether any elements are assigned to the children slot, controlling expand icon visibility.\n   * @internal\n   */\n  @state() private _hasChildren = false;\n\n  /**\n   * Whether this item is the roving-tabindex active item in the tree.\n   * @internal\n   */\n  @state() private _rovingActive = false;\n\n  /**\n   * Text content from the default slot, used to label the children group for screen readers.\n   * @internal\n   */\n  @state() private _labelText = '';\n\n  /**\n   * Cached ARIA position metadata. Computed once on connect and on slotchange\n   * of the parent container, avoiding repeated DOM traversal on every render.\n   * @internal\n   */\n  @state() private _level = 1;\n  /**\n   * One-based position of this item within its sibling set, set as aria-posinset.\n   * @internal\n   */\n  @state() private _posInSet = 1;\n  /**\n   * Total count of sibling hx-tree-item elements at the same level, set as aria-setsize.\n   * @internal\n   */\n  @state() private _setSize = 1;\n  /**\n   * Whether the owning hx-tree-view supports item selection (single or multiple mode).\n   * @internal\n   */\n  @state() private _selectable = false;\n\n  /** @internal */\n  @query('.item-row') private _itemRowEl!: HTMLElement | null;\n\n  // ─── Computed ARIA ───\n\n  /**\n   * Whether this item has slotted children.\n   * @returns True if one or more elements are assigned to the children slot.\n   */\n  get hasChildItems(): boolean {\n    return this._hasChildren;\n  }\n\n  /**\n   * The text content of the item's label slot, used for typeahead keyboard navigation.\n   * Returns an empty string until the label slot has been assigned.\n   */\n  get labelText(): string {\n    return this._labelText;\n  }\n\n  /**\n   * Recompute all cached ARIA metadata in a single DOM pass.\n   * Called on connect, slotchange, and whenever structural context may change.\n   * @internal\n   */\n  private _updateAriaMetadata(): void {\n    // Compute nesting level by counting ancestor hx-tree-item elements.\n    let level = 1;\n    let el: Element | null = this.parentElement;\n    while (el) {\n      if (el.tagName.toLowerCase() === 'hx-tree-item') level++;\n      el = el.parentElement;\n    }\n    this._level = level;\n\n    // Compute position-in-set and set-size from sibling hx-tree-item elements.\n    const parent = this.parentElement;\n    if (parent) {\n      const siblings = Array.from(parent.children).filter(\n        (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n      );\n      this._posInSet = siblings.indexOf(this) + 1;\n      this._setSize = siblings.length;\n    } else {\n      this._posInSet = 1;\n      this._setSize = 1;\n    }\n\n    // Determine if the owning tree supports selection.\n    const tree = this.closest('hx-tree-view');\n    if (tree) {\n      const selection = tree.getAttribute('selection');\n      this._selectable = selection === 'single' || selection === 'multiple';\n    } else {\n      this._selectable = false;\n    }\n  }\n\n  /**\n   * Set ARIA position metadata from the parent hx-tree-view in a single O(n) pass.\n   * Calling this avoids the O(n^2) ancestor-walk + sibling-iteration in _updateAriaMetadata\n   * when the parent already knows the layout.\n   * @internal\n   */\n  setAriaMetadata(level: number, posInSet: number, setSize: number, selectable: boolean): void {\n    this._level = level;\n    this._posInSet = posInSet;\n    this._setSize = setSize;\n    this._selectable = selectable;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._updateAriaMetadata();\n  }\n\n  // ─── Children Detection ───\n\n  /**\n   * Updates _hasChildren and recomputes ARIA metadata when the children slot assignment changes.\n   * @internal\n   */\n  private _handleChildrenSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasChildren = slot.assignedElements().length > 0;\n    this._updateAriaMetadata();\n  }\n\n  /**\n   * Captures the text content from the default (label) slot for use on the children group label.\n   * @internal\n   */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._labelText = nodes\n      .map((n) => n.textContent ?? '')\n      .join('')\n      .trim();\n  }\n\n  // ─── Event Handlers ───\n\n  /**\n   * Toggles the expanded state when the expand/collapse button is clicked, stopping event propagation.\n   * @internal\n   */\n  private _handleExpandClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  /**\n   * Dispatches the hx-tree-item-select event when the item is activated via click or keyboard.\n   * @internal\n   */\n  private _handleRowClick(): void {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent<HxTreeItemSelectDetail>('hx-tree-item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item: this },\n      }),\n    );\n  }\n\n  /**\n   * Handles keyboard interaction for the tree item, including expand/collapse, activation, and delegation of list-navigation keys to the parent tree.\n   * @internal\n   */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'ArrowRight':\n        e.preventDefault();\n        if (this._hasChildren && !this.expanded) {\n          this.expanded = true;\n        }\n        break;\n      case 'ArrowLeft':\n        e.preventDefault();\n        if (this._hasChildren && this.expanded) {\n          this.expanded = false;\n        }\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this._handleRowClick();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n        // Bubble up to hx-tree-view for navigation\n        break;\n    }\n  }\n\n  // ─── Public API ───\n\n  /**\n   * Sets the roving tabindex state for this item.\n   * When `active` is true, the item row gets `tabindex=\"0\"` making it the\n   * Tab-reachable item in the tree. All other items should be set to false.\n   * Called by the parent hx-tree-view to manage the roving tabindex pattern.\n   */\n  setRovingActive(active: boolean): void {\n    this._rovingActive = active;\n  }\n\n  /** Focus this item's interactive row element. */\n  override focus(): void {\n    this._itemRowEl?.focus();\n  }\n\n  // ─── Render ───\n\n  /**\n   * Renders the expand/collapse chevron button, or a placeholder span when the item has no children.\n   * @internal\n   */\n  private _renderExpandIcon() {\n    if (!this._hasChildren) {\n      return html`<span class=\"expand-placeholder\" aria-hidden=\"true\"></span>`;\n    }\n    return html`\n      <button\n        part=\"expand-icon\"\n        class=\"expand-btn\"\n        tabindex=\"-1\"\n        aria-label=\"${this.expanded ? 'Collapse' : 'Expand'}\"\n        @click=${this._handleExpandClick}\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <polyline points=\"6 4 10 8 6 12\" />\n        </svg>\n      </button>\n    `;\n  }\n\n  override render() {\n    const ariaExpanded = this._hasChildren ? String(this.expanded) : nothing;\n    const ariaSelected = this._selectable ? String(this.selected) : nothing;\n\n    return html`\n      <div part=\"item\" class=\"item\">\n        <div\n          part=\"row\"\n          class=\"item-row\"\n          role=\"treeitem\"\n          tabindex=${this._rovingActive ? '0' : '-1'}\n          aria-expanded=${ariaExpanded}\n          aria-selected=${ariaSelected}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-level=${this._level}\n          aria-posinset=${this._posInSet}\n          aria-setsize=${this._setSize}\n          @click=${this._handleRowClick}\n          @keydown=${this._handleKeyDown}\n        >\n          ${this._renderExpandIcon()}\n          <span class=\"item-icon\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span part=\"label\" class=\"item-label\">\n            <slot @slotchange=${this._handleLabelSlotChange}></slot>\n          </span>\n        </div>\n        <div\n          part=\"children\"\n          class=${classMap({ children: true, 'children--expanded': this.expanded })}\n          role=\"group\"\n          aria-label=${this._labelText ? `${this._labelText} children` : 'children'}\n          aria-hidden=${!this.expanded || nothing}\n        >\n          <div class=\"children-inner\">\n            <slot name=\"children\" @slotchange=${this._handleChildrenSlotChange}></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tree-item': HelixTreeItem;\n  }\n}\n\n/** Canonical type alias for HelixTreeItem. Use this when typing hx-tree-item element references. */\nexport type HxTreeItem = HelixTreeItem;\n\n/** @deprecated Use {@link HxTreeItem} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeItem = HelixTreeItem;\n"],"names":["helixTreeViewStyles","css","HelixTreeView","LitElement","container","items","child","item","activeIndex","i","index","clamped","_a","wasSelected","currentIndex","focused","_b","next","prev","currentItem","parentItem","_c","parentIndex","matchIndex","char","level","selectable","children","c","setSize","containerTabindex","html","nothing","__decorateClass","property","state","customElement","helixTreeItemStyles","HelixTreeItem","el","parent","siblings","tree","selection","posInSet","slot","nodes","n","active","ariaExpanded","ariaSelected","classMap","query"],"mappings":"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"}
+{"version":3,"file":"hx-tree-item-CPQ9dJiK.js","sources":["../../src/components/hx-tree-view/hx-tree-view.styles.ts","../../src/components/hx-tree-view/hx-tree-view.ts","../../src/components/hx-tree-view/hx-tree-item.styles.ts","../../src/components/hx-tree-view/hx-tree-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTreeViewStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n    font-family: var(--hx-tree-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .tree {\n    display: block;\n    outline: none;\n  }\n\n  .tree:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { helixTreeViewStyles } from './hx-tree-view.styles.js';\nimport type { HelixTreeItem, HxTreeItemSelectDetail } from './hx-tree-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Selection mode for the tree. */\nexport type TreeSelection = 'none' | 'single' | 'multiple';\n\n/** Detail type for the `hx-select` event. */\nexport interface HxSelectDetail {\n  /** The tree item that was selected or deselected. */\n  item: HelixTreeItem;\n  /** Whether the item is now selected. */\n  selected: boolean;\n}\n\n/**\n * A hierarchical tree component for navigating nested data structures.\n * Used in healthcare applications for org charts, ICD-10 code hierarchies, and department navigation.\n *\n * Implements WAI-ARIA tree view pattern with `role=\"tree\"` on the container\n * and `role=\"treeitem\"` on each item. Supports `aria-label` via the `label` property\n * for screen reader identification. Full keyboard navigation: Arrow keys for movement,\n * Enter/Space for selection, Home/End for first/last item.\n *\n * ## Scale Limits\n *\n * This component renders all tree items simultaneously in the DOM. It is suitable for\n * trees with up to ~500 visible items. For large taxonomies (e.g., ICD-10 with 70,000+\n * codes), use async/lazy loading: only render top-level nodes initially and populate\n * child nodes on `hx-select` or expand events. The component exposes the `expanded`\n * property on `hx-tree-item` for programmatic control of subtrees, enabling consumer-level\n * virtualization strategies without requiring changes to this component.\n *\n * @summary Hierarchical tree view with expand/collapse and keyboard navigation.\n *\n * @tag hx-tree-view\n *\n * @slot - Default slot for hx-tree-item elements.\n *\n * @fires {CustomEvent<HxSelectDetail>} hx-select - Dispatched when a tree item is selected or deselected.\n *\n * @csspart tree - The tree container element with role=\"tree\".\n *\n * @cssprop [--hx-tree-font-family=var(--hx-font-family-sans)] - Tree font family.\n */\n@customElement('hx-tree-view')\nexport class HelixTreeView extends LitElement {\n  static override styles = [helixTreeViewStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Accessible label for the tree. Applied as `aria-label` on the tree container.\n   * Provides context to screen readers about the tree's purpose.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Selection mode for the tree.\n   * - `none` — items cannot be selected\n   * - `single` — only one item can be selected at a time\n   * - `multiple` — multiple items can be selected\n   * @attr selection\n   */\n  @property({ type: String, reflect: true })\n  selection: 'none' | 'single' | 'multiple' = 'none';\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _currentIndex = 0;\n\n  /** Tracks whether the tree has any visible items, to decide the container tabindex. */\n  /** @internal */\n  @state() private _hasVisibleItems = false;\n\n  // ─── Visible items cache ───\n\n  /**\n   * Cached flat list of visible items (depth-first, respects collapsed nodes).\n   * Set to null to invalidate; rebuilt on next access.\n   * @internal\n   */\n  private _cachedVisibleItems: HelixTreeItem[] | null = null;\n\n  /**\n   * Invalidate the visible-items cache. Call after any expand/collapse or structural change.\n   * @internal\n   */\n  private _invalidateVisibleItemsCache(): void {\n    this._cachedVisibleItems = null;\n  }\n\n  // ─── Internal Helpers ───\n\n  /**\n   * Returns a flat ordered list of all visible (not inside a collapsed item) hx-tree-items\n   * in depth-first order. Result is cached; invalidated on expand/collapse/slotchange.\n   */\n  /** @internal */\n  private _getVisibleItems(): HelixTreeItem[] {\n    if (!this._cachedVisibleItems) {\n      this._cachedVisibleItems = this._collectVisibleItems(this);\n    }\n    return this._cachedVisibleItems;\n  }\n\n  /** @internal */\n  private _collectVisibleItems(container: Element): HelixTreeItem[] {\n    const items: HelixTreeItem[] = [];\n    for (const child of Array.from(container.children)) {\n      if (child.tagName.toLowerCase() === 'hx-tree-item') {\n        const item = child as HelixTreeItem;\n        items.push(item);\n        if (item.expanded) {\n          items.push(...this._collectVisibleItems(item));\n        }\n      } else {\n        items.push(...this._collectVisibleItems(child));\n      }\n    }\n    return items;\n  }\n\n  /** @internal */\n  private _getSelectedItems(): HelixTreeItem[] {\n    return Array.from(this.querySelectorAll<HelixTreeItem>('hx-tree-item[selected]'));\n  }\n\n  /**\n   * Updates the roving tabindex across all visible items so that only the\n   * item at `activeIndex` has `tabindex=\"0\"`. All others receive `tabindex=\"-1\"`.\n   * This is called whenever the active item changes (navigation, initial render).\n   */\n  /** @internal */\n  private _updateRovingTabindex(items: HelixTreeItem[], activeIndex: number): void {\n    items.forEach((item, i) => {\n      item.setRovingActive(i === activeIndex);\n    });\n  }\n\n  /** @internal */\n  private _focusItem(index: number): void {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return;\n    const clamped = Math.max(0, Math.min(index, items.length - 1));\n    this._currentIndex = clamped;\n    this._updateRovingTabindex(items, clamped);\n    items[clamped]?.focus();\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleTreeItemSelect(e: Event): void {\n    if (!(e instanceof CustomEvent)) return;\n    const event = e as CustomEvent<HxTreeItemSelectDetail>;\n    const item = event.detail.item;\n\n    if (this.selection === 'none') return;\n\n    if (this.selection === 'single') {\n      const wasSelected = item.selected;\n      this._getSelectedItems().forEach((i) => {\n        i.selected = false;\n      });\n      item.selected = !wasSelected;\n    } else if (this.selection === 'multiple') {\n      item.selected = !item.selected;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<HxSelectDetail>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item, selected: item.selected },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return;\n\n    let currentIndex = this._currentIndex;\n    const focused = document.activeElement;\n\n    for (let i = 0; i < items.length; i++) {\n      if (items[i] === focused || items[i]?.shadowRoot?.activeElement) {\n        currentIndex = i;\n        break;\n      }\n    }\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        // Intentional design: wrap-around from last to first item provides\n        // a continuous navigation loop, consistent with the component's\n        // circular keyboard navigation model.\n        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        this._focusItem(next);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        // Intentional design: wrap-around from first to last item (see ArrowDown note).\n        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        this._focusItem(prev);\n        break;\n      }\n      case 'ArrowLeft': {\n        e.preventDefault();\n        const currentItem = items[currentIndex];\n        if (!currentItem) break;\n        if (currentItem.expanded && currentItem.hasChildItems) {\n          currentItem.expanded = false;\n          this._invalidateVisibleItemsCache();\n        } else {\n          const parentItem = currentItem.parentElement?.closest('hx-tree-item') as\n            | HelixTreeItem\n            | undefined;\n          if (parentItem) {\n            const parentIndex = items.indexOf(parentItem);\n            if (parentIndex >= 0) {\n              this._focusItem(parentIndex);\n            }\n          }\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        e.preventDefault();\n        const currentItem = items[currentIndex];\n        if (!currentItem) break;\n        if (currentItem.hasChildItems) {\n          if (!currentItem.expanded) {\n            currentItem.expanded = true;\n            this._invalidateVisibleItemsCache();\n          } else {\n            this._focusItem(currentIndex + 1);\n          }\n        }\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        this._focusItem(0);\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        this._focusItem(items.length - 1);\n        break;\n      }\n      default: {\n        // WAI-ARIA APG typeahead: a printable character moves focus to the next visible\n        // item whose label starts with that character (case-insensitive).\n        if (e.key.length === 1) {\n          e.preventDefault();\n          const matchIndex = this._findTypeaheadMatch(e.key.toLowerCase(), currentIndex);\n          if (matchIndex !== -1) {\n            this._focusItem(matchIndex);\n          }\n        }\n        break;\n      }\n    }\n  }\n\n  /**\n   * Finds the next visible item (starting after `currentIndex`, wrapping around) whose\n   * label text begins with the given lowercase character. Returns -1 if no match.\n   * @internal\n   */\n  private _findTypeaheadMatch(char: string, currentIndex: number): number {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return -1;\n    for (let i = 1; i <= items.length; i++) {\n      const index = (currentIndex + i) % items.length;\n      const item = items[index];\n      if (item && item.labelText.toLowerCase().startsWith(char)) {\n        return index;\n      }\n    }\n    return -1;\n  }\n\n  /** @internal */\n  private _handleFocusIn(e: FocusEvent): void {\n    // With roving tabindex, the tree container (tabindex=\"-1\") should only receive\n    // focus when the tree is empty. If focus does land on the container (e.g. the\n    // tree is empty or programmatic focus), redirect to the active item if present.\n    if (e.target === e.currentTarget) {\n      const items = this._getVisibleItems();\n      if (items.length > 0) {\n        this._focusItem(this._currentIndex);\n      }\n    }\n  }\n\n  /**\n   * Compute and push ARIA position metadata (level, posInSet, setSize, selectable) to all\n   * direct hx-tree-item children of a container in a single O(n) pass.\n   * Each item also recurses for its own children, building the full tree in O(total-items) total.\n   * @internal\n   */\n  private _updateAriaMetadataForContainer(container: Element, level: number): void {\n    const selectable = this.selection === 'single' || this.selection === 'multiple';\n    const children = Array.from(container.children).filter(\n      (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n    ) as HelixTreeItem[];\n    const setSize = children.length;\n    children.forEach((item, index) => {\n      item.setAriaMetadata(level, index + 1, setSize, selectable);\n      // Recurse into child items so the full tree is updated in one traversal\n      this._updateAriaMetadataForContainer(item, level + 1);\n    });\n  }\n\n  /**\n   * Initializes the roving tabindex after items are first slotted in.\n   * Ensures the active item (index 0 by default) has tabindex=\"0\" from the start,\n   * so a Tab into the tree lands directly on the first item without a redirect.\n   * Also updates `_hasVisibleItems` so the container tabindex re-renders correctly.\n   * Pushes O(n) ARIA metadata to all items to replace the O(n^2) per-item ancestor walk.\n   */\n  /** @internal */\n  private _handleSlotChange(): void {\n    this._invalidateVisibleItemsCache();\n    // Push ARIA metadata from parent in a single O(n) traversal\n    this._updateAriaMetadataForContainer(this, 1);\n    const items = this._getVisibleItems();\n    this._hasVisibleItems = items.length > 0;\n    if (items.length === 0) return;\n    // Clamp _currentIndex in case items were removed.\n    const clamped = Math.min(this._currentIndex, items.length - 1);\n    this._currentIndex = clamped;\n    this._updateRovingTabindex(items, clamped);\n  }\n\n  // ─── Lifecycle ───\n\n  override firstUpdated(): void {\n    if (!this.label) {\n      devWarn(\n        'hx-tree-view',\n        'No accessible label provided. Set the `label` attribute on hx-tree-view so screen readers can identify this tree (WCAG 4.1.2).',\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Roving tabindex pattern (WCAG 2.4.3 Fix):\n    // The tree container is NOT a Tab stop (tabindex=\"-1\"). Tab focus goes\n    // directly to the active item, which carries tabindex=\"0\". The container\n    // is only a landing target (tabindex=\"0\") when the tree is empty.\n    const containerTabindex = this._hasVisibleItems ? '-1' : '0';\n\n    return html`\n      <div\n        part=\"tree\"\n        class=\"tree\"\n        role=\"tree\"\n        tabindex=${containerTabindex}\n        aria-label=${this.label || 'Tree'}\n        aria-multiselectable=${this.selection === 'none'\n          ? nothing\n          : this.selection === 'multiple'\n            ? 'true'\n            : 'false'}\n        @hx-tree-item-select=${this._handleTreeItemSelect}\n        @keydown=${this._handleKeyDown}\n        @focusin=${this._handleFocusIn}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tree-view': HelixTreeView;\n  }\n}\n\n/** Canonical type alias for HelixTreeView. Use this when typing hx-tree-view element references. */\nexport type HxTreeView = HelixTreeView;\n\n/** @deprecated Use {@link HxTreeView} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeView = HelixTreeView;\n","import { css } from 'lit';\n\nexport const helixTreeItemStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Item Container ─── */\n\n  .item {\n    display: block;\n  }\n\n  /* ─── Item Row ─── */\n\n  .item-row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-tree-item-gap, var(--hx-space-2, 0.5rem));\n    padding: var(--hx-tree-item-padding-y, var(--hx-space-1, 0.25rem))\n      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem));\n    padding-inline-start: calc(\n      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem)) + var(--_indent-level, 0) *\n        var(--hx-tree-indent-size, 1.5rem)\n    );\n    border-radius: var(--hx-tree-item-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    cursor: pointer;\n    outline: none;\n    color: var(--hx-tree-item-color, var(--hx-color-neutral-900, #111827));\n    font-family: var(--hx-tree-item-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-tree-item-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n  }\n\n  .item-row:hover {\n    background-color: var(--hx-tree-item-hover-bg, var(--hx-color-neutral-100, #f3f4f6));\n  }\n\n  .item-row:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n  }\n\n  /* ─── Selected State ─── */\n\n  :host([selected]) .item-row {\n    background-color: var(--hx-tree-item-selected-bg, var(--hx-color-primary-100, #dbeafe));\n    color: var(--hx-tree-item-selected-color, var(--hx-color-primary-800, #1e40af));\n  }\n\n  :host([selected]) .item-row:hover {\n    background-color: var(--hx-tree-item-selected-hover-bg, var(--hx-color-primary-200, #bfdbfe));\n  }\n\n  /* ─── Disabled State ─── */\n\n  :host([disabled]) .item-row {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ─── Expand Icon ─── */\n\n  .expand-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n  }\n\n  .expand-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--hx-tree-item-expand-icon-color, var(--hx-color-neutral-500, #6b7280));\n    cursor: pointer;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    transition: transform var(--hx-transition-fast, 150ms ease);\n    pointer-events: auto;\n  }\n\n  .expand-btn:hover {\n    background-color: var(\n      --hx-tree-item-expand-hover-bg,\n      var(--hx-overlay-black-6, rgba(0, 0, 0, 0.06))\n    );\n  }\n\n  .expand-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .expand-btn svg {\n    width: var(--hx-space-3, 0.75rem);\n    height: var(--hx-space-3, 0.75rem);\n    stroke: currentColor;\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  :host([expanded]) .expand-btn svg {\n    transform: rotate(90deg);\n  }\n\n  .expand-placeholder {\n    display: block;\n    width: var(--hx-space-4, 1rem);\n    flex-shrink: 0;\n  }\n\n  /* ─── Icon Slot ─── */\n\n  .item-icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-tree-item-icon-color, var(--hx-color-neutral-500, #6b7280));\n  }\n\n  .item-icon:empty {\n    display: none;\n  }\n\n  /* ─── Label ─── */\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ─── Children (animated) ─── */\n\n  .children {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--hx-transition-base, 200ms ease);\n    --_indent-level: calc(var(--_indent-level, 0) + 1);\n  }\n\n  .children--expanded {\n    grid-template-rows: 1fr;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .item-row,\n    .expand-btn,\n    .expand-btn svg,\n    .children {\n      transition: none;\n    }\n  }\n\n  .children-inner {\n    overflow: hidden;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixTreeItemStyles } from './hx-tree-item.styles.js';\n\n/** Detail type for the `hx-tree-item-select` event. */\nexport interface HxTreeItemSelectDetail {\n  /** The tree item that was selected or activated. */\n  item: HelixTreeItem;\n}\n\n/**\n * A tree item used within an hx-tree-view component.\n * Supports expand/collapse, selection, keyboard navigation, and icon/children slots.\n *\n * @summary Individual item within an hx-tree-view hierarchical tree.\n *\n * @tag hx-tree-item\n *\n * @slot - Default slot for the item label content. This text is also used to label the children group.\n * @slot icon - Custom icon shown before the label.\n * @slot children - Nested hx-tree-item elements for sub-tree.\n *\n * @csspart item - The outer item container.\n * @csspart row - The interactive item row (contains expand icon, icon slot, and label).\n * @csspart expand-icon - The expand/collapse toggle button.\n * @csspart label - The label text content area.\n * @csspart children - The children container.\n *\n * @cssprop [--hx-tree-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-tree-item-hover-bg=var(--hx-color-neutral-100)] - Hover background color.\n * @cssprop [--hx-tree-item-selected-bg=var(--hx-color-primary-100)] - Selected background color.\n * @cssprop [--hx-tree-item-selected-color=var(--hx-color-primary-800)] - Selected text color.\n * @cssprop [--hx-tree-item-padding-x=var(--hx-space-2)] - Horizontal padding.\n * @cssprop [--hx-tree-item-padding-y=var(--hx-space-1)] - Vertical padding.\n * @cssprop [--hx-tree-indent-size=1.5rem] - Indentation size per level.\n *\n * @fires {CustomEvent<HxTreeItemSelectDetail>} hx-tree-item-select - Dispatched when this item is clicked or activated via keyboard.\n */\n@customElement('hx-tree-item')\nexport class HelixTreeItem extends LitElement {\n  static override styles = [helixTreeItemStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Whether the item is expanded (showing children).\n   * @attr expanded\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Whether the item is selected.\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Whether the item is disabled (non-interactive).\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Internal State ───\n\n  /**\n   * Tracks whether any elements are assigned to the children slot, controlling expand icon visibility.\n   * @internal\n   */\n  @state() private _hasChildren = false;\n\n  /**\n   * Whether this item is the roving-tabindex active item in the tree.\n   * @internal\n   */\n  @state() private _rovingActive = false;\n\n  /**\n   * Text content from the default slot, used to label the children group for screen readers.\n   * @internal\n   */\n  @state() private _labelText = '';\n\n  /**\n   * Cached ARIA position metadata. Computed once on connect and on slotchange\n   * of the parent container, avoiding repeated DOM traversal on every render.\n   * @internal\n   */\n  @state() private _level = 1;\n  /**\n   * One-based position of this item within its sibling set, set as aria-posinset.\n   * @internal\n   */\n  @state() private _posInSet = 1;\n  /**\n   * Total count of sibling hx-tree-item elements at the same level, set as aria-setsize.\n   * @internal\n   */\n  @state() private _setSize = 1;\n  /**\n   * Whether the owning hx-tree-view supports item selection (single or multiple mode).\n   * @internal\n   */\n  @state() private _selectable = false;\n\n  /** @internal */\n  @query('.item-row') private _itemRowEl!: HTMLElement | null;\n\n  // ─── Computed ARIA ───\n\n  /**\n   * Whether this item has slotted children.\n   * @returns True if one or more elements are assigned to the children slot.\n   */\n  get hasChildItems(): boolean {\n    return this._hasChildren;\n  }\n\n  /**\n   * The text content of the item's label slot, used for typeahead keyboard navigation.\n   * Returns an empty string until the label slot has been assigned.\n   */\n  get labelText(): string {\n    return this._labelText;\n  }\n\n  /**\n   * Recompute all cached ARIA metadata in a single DOM pass.\n   * Called on connect, slotchange, and whenever structural context may change.\n   * @internal\n   */\n  private _updateAriaMetadata(): void {\n    // Compute nesting level by counting ancestor hx-tree-item elements.\n    let level = 1;\n    let el: Element | null = this.parentElement;\n    while (el) {\n      if (el.tagName.toLowerCase() === 'hx-tree-item') level++;\n      el = el.parentElement;\n    }\n    this._level = level;\n\n    // Compute position-in-set and set-size from sibling hx-tree-item elements.\n    const parent = this.parentElement;\n    if (parent) {\n      const siblings = Array.from(parent.children).filter(\n        (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n      );\n      this._posInSet = siblings.indexOf(this) + 1;\n      this._setSize = siblings.length;\n    } else {\n      this._posInSet = 1;\n      this._setSize = 1;\n    }\n\n    // Determine if the owning tree supports selection.\n    const tree = this.closest('hx-tree-view');\n    if (tree) {\n      const selection = tree.getAttribute('selection');\n      this._selectable = selection === 'single' || selection === 'multiple';\n    } else {\n      this._selectable = false;\n    }\n  }\n\n  /**\n   * Set ARIA position metadata from the parent hx-tree-view in a single O(n) pass.\n   * Calling this avoids the O(n^2) ancestor-walk + sibling-iteration in _updateAriaMetadata\n   * when the parent already knows the layout.\n   * @internal\n   */\n  setAriaMetadata(level: number, posInSet: number, setSize: number, selectable: boolean): void {\n    this._level = level;\n    this._posInSet = posInSet;\n    this._setSize = setSize;\n    this._selectable = selectable;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._updateAriaMetadata();\n  }\n\n  // ─── Children Detection ───\n\n  /**\n   * Updates _hasChildren and recomputes ARIA metadata when the children slot assignment changes.\n   * @internal\n   */\n  private _handleChildrenSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasChildren = slot.assignedElements().length > 0;\n    this._updateAriaMetadata();\n  }\n\n  /**\n   * Captures the text content from the default (label) slot for use on the children group label.\n   * @internal\n   */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._labelText = nodes\n      .map((n) => n.textContent ?? '')\n      .join('')\n      .trim();\n  }\n\n  // ─── Event Handlers ───\n\n  /**\n   * Toggles the expanded state when the expand/collapse button is clicked, stopping event propagation.\n   * @internal\n   */\n  private _handleExpandClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  /**\n   * Dispatches the hx-tree-item-select event when the item is activated via click or keyboard.\n   * @internal\n   */\n  private _handleRowClick(): void {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent<HxTreeItemSelectDetail>('hx-tree-item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item: this },\n      }),\n    );\n  }\n\n  /**\n   * Handles keyboard interaction for the tree item, including expand/collapse, activation, and delegation of list-navigation keys to the parent tree.\n   * @internal\n   */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'ArrowRight':\n        e.preventDefault();\n        if (this._hasChildren && !this.expanded) {\n          this.expanded = true;\n        }\n        break;\n      case 'ArrowLeft':\n        e.preventDefault();\n        if (this._hasChildren && this.expanded) {\n          this.expanded = false;\n        }\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this._handleRowClick();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n        // Bubble up to hx-tree-view for navigation\n        break;\n    }\n  }\n\n  // ─── Public API ───\n\n  /**\n   * Sets the roving tabindex state for this item.\n   * When `active` is true, the item row gets `tabindex=\"0\"` making it the\n   * Tab-reachable item in the tree. All other items should be set to false.\n   * Called by the parent hx-tree-view to manage the roving tabindex pattern.\n   */\n  setRovingActive(active: boolean): void {\n    this._rovingActive = active;\n  }\n\n  /** Focus this item's interactive row element. */\n  override focus(): void {\n    this._itemRowEl?.focus();\n  }\n\n  // ─── Render ───\n\n  /**\n   * Renders the expand/collapse chevron button, or a placeholder span when the item has no children.\n   * @internal\n   */\n  private _renderExpandIcon() {\n    if (!this._hasChildren) {\n      return html`<span class=\"expand-placeholder\" aria-hidden=\"true\"></span>`;\n    }\n    return html`\n      <button\n        part=\"expand-icon\"\n        class=\"expand-btn\"\n        tabindex=\"-1\"\n        aria-label=\"${this.expanded ? 'Collapse' : 'Expand'}\"\n        @click=${this._handleExpandClick}\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <polyline points=\"6 4 10 8 6 12\" />\n        </svg>\n      </button>\n    `;\n  }\n\n  override render() {\n    const ariaExpanded = this._hasChildren ? String(this.expanded) : nothing;\n    const ariaSelected = this._selectable ? String(this.selected) : nothing;\n\n    return html`\n      <div part=\"item\" class=\"item\">\n        <div\n          part=\"row\"\n          class=\"item-row\"\n          role=\"treeitem\"\n          tabindex=${this._rovingActive ? '0' : '-1'}\n          aria-expanded=${ariaExpanded}\n          aria-selected=${ariaSelected}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-level=${this._level}\n          aria-posinset=${this._posInSet}\n          aria-setsize=${this._setSize}\n          @click=${this._handleRowClick}\n          @keydown=${this._handleKeyDown}\n        >\n          ${this._renderExpandIcon()}\n          <span class=\"item-icon\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span part=\"label\" class=\"item-label\">\n            <slot @slotchange=${this._handleLabelSlotChange}></slot>\n          </span>\n        </div>\n        <div\n          part=\"children\"\n          class=${classMap({ children: true, 'children--expanded': this.expanded })}\n          role=\"group\"\n          aria-label=${this._labelText ? `${this._labelText} children` : 'children'}\n          aria-hidden=${!this.expanded || nothing}\n        >\n          <div class=\"children-inner\">\n            <slot name=\"children\" @slotchange=${this._handleChildrenSlotChange}></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tree-item': HelixTreeItem;\n  }\n}\n\n/** Canonical type alias for HelixTreeItem. Use this when typing hx-tree-item element references. */\nexport type HxTreeItem = HelixTreeItem;\n\n/** @deprecated Use {@link HxTreeItem} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeItem = HelixTreeItem;\n"],"names":["helixTreeViewStyles","css","HelixTreeView","LitElement","container","items","child","item","activeIndex","i","index","clamped","_a","wasSelected","currentIndex","focused","_b","next","prev","currentItem","parentItem","_c","parentIndex","matchIndex","char","level","selectable","children","c","setSize","containerTabindex","html","nothing","__decorateClass","property","state","customElement","helixTreeItemStyles","HelixTreeItem","el","parent","siblings","tree","selection","posInSet","slot","nodes","n","active","ariaExpanded","ariaSelected","classMap","query"],"mappings":"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"}

package/dist/shared/{hx-visually-hidden-D6Dv2l8l.js → hx-visually-hidden-vKX8QjeX.js}

@@ -1,5 +1,5 @@
 import { css as l, LitElement as m, html as c } from "lit";
-import "./document-token-adoption-Dym9ALA4.js";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as h, customElement as u } from "lit/decorators.js";
 const d = l`
   :host {
@@ -51,4 +51,4 @@ i = s([
 export {
   i as H
 };
-//# sourceMappingURL=hx-visually-hidden-D6Dv2l8l.js.map
+//# sourceMappingURL=hx-visually-hidden-vKX8QjeX.js.map

package/dist/shared/{hx-visually-hidden-D6Dv2l8l.js.map → hx-visually-hidden-vKX8QjeX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-visually-hidden-D6Dv2l8l.js","sources":["../../src/components/hx-visually-hidden/hx-visually-hidden.styles.ts","../../src/components/hx-visually-hidden/hx-visually-hidden.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixVisuallyHiddenStyles = css`\n  :host {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0, 0, 0, 0) !important;\n    clip-path: inset(50%) !important;\n    white-space: nowrap !important;\n    border: 0 !important;\n  }\n\n  :host([focusable]:focus-within) {\n    position: static !important;\n    width: auto !important;\n    height: auto !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    overflow: visible !important;\n    clip: auto !important;\n    clip-path: none !important;\n    white-space: normal !important;\n    border: 0 !important;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { helixVisuallyHiddenStyles } from './hx-visually-hidden.styles.js';\n\n/**\n * A utility component that hides content visually while keeping it\n * accessible to screen readers. Uses the standard visually-hidden CSS\n * technique — does NOT use `visibility: hidden` or `display: none`,\n * which would also hide content from assistive technologies.\n *\n * @summary Hides content visually while keeping it accessible to screen readers.\n *\n * @tag hx-visually-hidden\n *\n * @slot - The content to hide visually but expose to screen readers.\n *\n * @csspart base - The inner wrapper element containing the slotted content.\n *\n * @example Basic usage — accessible label for an icon button\n * ```html\n * <button>\n *   <hx-icon name=\"close\"></hx-icon>\n *   <hx-visually-hidden>Close dialog</hx-visually-hidden>\n * </button>\n * ```\n *\n * @example Skip link — becomes visible when focused\n * ```html\n * <hx-visually-hidden focusable>\n *   <a href=\"#main-content\">Skip to main content</a>\n * </hx-visually-hidden>\n * ```\n */\n@customElement('hx-visually-hidden')\nexport class HelixVisuallyHidden extends LitElement {\n  static override styles = [helixVisuallyHiddenStyles];\n\n  /**\n   * When true, the component becomes visible when a focusable child\n   * (such as a skip link) receives focus. This enables the standard\n   * \"skip to content\" accessibility pattern.\n   */\n  @property({ type: Boolean, reflect: true })\n  focusable = false;\n\n  override render() {\n    return html`<span part=\"base\"><slot></slot></span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-visually-hidden': HelixVisuallyHidden;\n  }\n}\n"],"names":["helixVisuallyHiddenStyles","css","HelixVisuallyHidden","LitElement","html","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACiClC,IAAMC,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,YAAY;AAAA,EAAA;AAAA,EAEH,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAdaF,EACK,SAAS,CAACF,CAAyB;AAQnDK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAR/BJ,EASX,WAAA,aAAA,CAAA;AATWA,IAANG,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBL,CAAA;"}
+{"version":3,"file":"hx-visually-hidden-vKX8QjeX.js","sources":["../../src/components/hx-visually-hidden/hx-visually-hidden.styles.ts","../../src/components/hx-visually-hidden/hx-visually-hidden.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixVisuallyHiddenStyles = css`\n  :host {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0, 0, 0, 0) !important;\n    clip-path: inset(50%) !important;\n    white-space: nowrap !important;\n    border: 0 !important;\n  }\n\n  :host([focusable]:focus-within) {\n    position: static !important;\n    width: auto !important;\n    height: auto !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    overflow: visible !important;\n    clip: auto !important;\n    clip-path: none !important;\n    white-space: normal !important;\n    border: 0 !important;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { helixVisuallyHiddenStyles } from './hx-visually-hidden.styles.js';\n\n/**\n * A utility component that hides content visually while keeping it\n * accessible to screen readers. Uses the standard visually-hidden CSS\n * technique — does NOT use `visibility: hidden` or `display: none`,\n * which would also hide content from assistive technologies.\n *\n * @summary Hides content visually while keeping it accessible to screen readers.\n *\n * @tag hx-visually-hidden\n *\n * @slot - The content to hide visually but expose to screen readers.\n *\n * @csspart base - The inner wrapper element containing the slotted content.\n *\n * @example Basic usage — accessible label for an icon button\n * ```html\n * <button>\n *   <hx-icon name=\"close\"></hx-icon>\n *   <hx-visually-hidden>Close dialog</hx-visually-hidden>\n * </button>\n * ```\n *\n * @example Skip link — becomes visible when focused\n * ```html\n * <hx-visually-hidden focusable>\n *   <a href=\"#main-content\">Skip to main content</a>\n * </hx-visually-hidden>\n * ```\n */\n@customElement('hx-visually-hidden')\nexport class HelixVisuallyHidden extends LitElement {\n  static override styles = [helixVisuallyHiddenStyles];\n\n  /**\n   * When true, the component becomes visible when a focusable child\n   * (such as a skip link) receives focus. This enables the standard\n   * \"skip to content\" accessibility pattern.\n   */\n  @property({ type: Boolean, reflect: true })\n  focusable = false;\n\n  override render() {\n    return html`<span part=\"base\"><slot></slot></span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-visually-hidden': HelixVisuallyHidden;\n  }\n}\n"],"names":["helixVisuallyHiddenStyles","css","HelixVisuallyHidden","LitElement","html","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACiClC,IAAMC,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,YAAY;AAAA,EAAA;AAAA,EAEH,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAdaF,EACK,SAAS,CAACF,CAAyB;AAQnDK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAR/BJ,EASX,WAAA,aAAA,CAAA;AATWA,IAANG,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBL,CAAA;"}

package/dist/shared/{toast-factory-oPHbhMZI.js → toast-factory-CEMNOt1T.js}

@@ -1,5 +1,5 @@
 import { css as p, LitElement as f, html as l, nothing as u } from "lit";
-import "./document-token-adoption-Dym9ALA4.js";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as c, query as g, state as b, customElement as v } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 const y = p`
@@ -530,4 +530,4 @@ export {
   d as a,
   I as t
 };
-//# sourceMappingURL=toast-factory-oPHbhMZI.js.map
+//# sourceMappingURL=toast-factory-CEMNOt1T.js.map