@helixui/library 1.0.1 → 1.1.2

package/dist/shared/{hx-split-button-CHGy4FUc.js.map → hx-split-button-CypgLXw1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-split-button-CHGy4FUc.js","sources":["../../src/components/hx-split-button/hx-split-button.styles.ts","../../src/components/hx-split-button/hx-split-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitButtonStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Container ─── */\n\n  .split-button {\n    display: inline-flex;\n    align-items: stretch;\n    position: relative;\n  }\n\n  /* ─── Primary Button ─── */\n\n  .split-button__primary {\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-split-button-border-color, transparent);\n    border-right: none;\n    border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0\n      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-split-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    flex: 1 1 auto;\n  }\n\n  .split-button__primary:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    z-index: 1;\n    position: relative;\n  }\n\n  .split-button__primary:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .split-button__primary:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  .split-button__primary[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Trigger Button ─── */\n\n  .split-button__trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);\n    border-left: var(--hx-border-width-thin, 1px) solid\n      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #3b82f6));\n    border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))\n      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;\n    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .split-button__trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    z-index: 1;\n    position: relative;\n  }\n\n  .split-button__trigger:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .split-button__trigger:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  .split-button__trigger[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Trigger Icon ─── */\n\n  .split-button__chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .split-button__chevron--open {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Size Variants ─── */\n\n  /* sm */\n  .split-button--sm .split-button__primary {\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  .split-button--sm .split-button__trigger {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  /* md */\n  .split-button--md .split-button__primary {\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  .split-button--md .split-button__trigger {\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  /* lg */\n  .split-button--lg .split-button__primary {\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  .split-button--lg .split-button__trigger {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Variant: primary ─── */\n\n  .split-button--primary .split-button__primary,\n  .split-button--primary .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-primary-400, #3b82f6);\n  }\n\n  /* ─── Variant: secondary ─── */\n\n  .split-button--secondary .split-button__primary,\n  .split-button--secondary .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);\n  }\n\n  .split-button--secondary .split-button__primary:hover,\n  .split-button--secondary .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);\n    filter: none;\n  }\n\n  /* ─── Variant: tertiary ─── */\n\n  .split-button--tertiary .split-button__primary,\n  .split-button--tertiary .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .split-button--tertiary .split-button__primary:hover,\n  .split-button--tertiary .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);\n    filter: none;\n  }\n\n  /* ─── Variant: danger ─── */\n\n  .split-button--danger .split-button__primary,\n  .split-button--danger .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-error-500, #dc2626);\n    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);\n  }\n\n  .split-button--danger .split-button__primary:hover,\n  .split-button--danger .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);\n    filter: none;\n  }\n\n  /* ─── Variant: ghost ─── */\n\n  .split-button--ghost .split-button__primary,\n  .split-button--ghost .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);\n  }\n\n  .split-button--ghost .split-button__primary:hover,\n  .split-button--ghost .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    filter: none;\n  }\n\n  /* ─── Variant: outline ─── */\n\n  .split-button--outline .split-button__primary,\n  .split-button--outline .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);\n    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .split-button--outline .split-button__primary:hover,\n  .split-button--outline .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);\n    filter: none;\n  }\n\n  /* ─── Dropdown Menu Panel ─── */\n\n  @keyframes hx-split-button-menu-open {\n    from {\n      opacity: 0;\n      transform: translateY(-4px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .split-button__menu {\n    display: none;\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    inset-inline-end: 0;\n    min-width: 100%;\n    max-height: var(--hx-split-button-menu-max-height, 18rem);\n    overflow-y: auto;\n    background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-split-button-menu-shadow,\n      0 4px 6px -1px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)),\n      0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))\n    );\n    padding: var(--hx-space-1, 0.25rem);\n    z-index: var(--hx-z-index-dropdown, 200);\n  }\n\n  .split-button__menu--open {\n    display: block;\n    animation: hx-split-button-menu-open var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .split-button__primary,\n    .split-button__trigger,\n    .split-button__chevron {\n      transition: none;\n    }\n\n    .split-button__menu--open {\n      animation: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSplitButtonStyles } from './hx-split-button.styles.js';\nimport type { HelixMenuItem } from '../hx-menu/hx-menu-item.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxSplitButtonIdCounter = 0;\n\n/**\n * A split button combining a primary action button with an attached dropdown\n * menu for secondary actions. Implements the ARIA menu button pattern for\n * full keyboard and screen reader support.\n *\n * @summary Primary action button with attached dropdown menu for secondary actions.\n *\n * @tag hx-split-button\n *\n * @slot - Primary button label text.\n * @slot menu - `hx-menu-item` children rendered in the dropdown panel.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n *   the primary button is clicked and is not disabled.\n * @fires {CustomEvent<{value: string; label: string}>} hx-select - Dispatched when\n *   a menu item is selected from the dropdown.\n *\n * @csspart button - The primary action button element.\n * @csspart trigger - The dropdown trigger button element.\n * @csspart menu - The dropdown menu panel.\n *\n * @cssprop [--hx-split-button-menu-max-height=18rem] - Maximum height of the dropdown menu panel before scrolling.\n * @cssprop [--hx-split-button-bg=var(--hx-color-primary-500)] - Background color for both buttons.\n * @cssprop [--hx-split-button-color=var(--hx-color-neutral-0)] - Text/icon color for both buttons.\n * @cssprop [--hx-split-button-border-color=transparent] - Border color.\n * @cssprop [--hx-split-button-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-split-button-divider-color=var(--hx-color-primary-400)] - Color of the divider between primary and trigger.\n * @cssprop [--hx-split-button-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-split-button-font-weight=var(--hx-font-weight-semibold)] - Font weight.\n * @cssprop [--hx-split-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-split-button-menu-bg=var(--hx-color-neutral-0)] - Dropdown menu background.\n * @cssprop [--hx-split-button-menu-border-color=var(--hx-color-neutral-200)] - Dropdown menu border color.\n * @cssprop [--hx-split-button-menu-border-radius=var(--hx-border-radius-md)] - Dropdown menu border radius.\n * @cssprop [--hx-split-button-menu-shadow] - Dropdown menu box shadow.\n */\n@customElement('hx-split-button')\nexport class HelixSplitButton extends LitElement {\n  static override styles = [tokenStyles, helixSplitButtonStyles];\n\n  // ─── Internal References ───\n\n  /**\n   * Reference to the dropdown menu panel element, used for positioning and focus management.\n   * @internal\n   */\n  @query('.split-button__menu')\n  private _menuPanel: HTMLElement | undefined;\n\n  /**\n   * Reference to the dropdown trigger button element, used to return focus after menu closes.\n   * @internal\n   */\n  @query('.split-button__trigger')\n  private _triggerButton: HTMLButtonElement | undefined;\n\n  // ─── Internal State ───\n\n  /**\n   * Tracks whether the dropdown menu is currently open.\n   * @internal\n   */\n  @state() private _open = false;\n\n  // ─── Public Properties ───\n\n  /**\n   * Visual style variant of the split button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n  /**\n   * Size of the split 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 split button is disabled. Both the primary button and the\n   * trigger are disabled when this is true.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Primary button label text. When set, overrides the default slot content.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  /**\n   * Accessible label for the dropdown trigger button. Override for localization.\n   * @attr trigger-label\n   */\n  @property({ type: String, attribute: 'trigger-label' })\n  triggerLabel = 'More actions';\n\n  /**\n   * Accessible label for the dropdown menu panel. Override for localization.\n   * @attr menu-label\n   */\n  @property({ type: String, attribute: 'menu-label' })\n  menuLabel = 'Secondary actions';\n\n  // ─── Unique IDs ───\n\n  /**\n   * Stable unique ID for the dropdown menu panel element, used to wire aria-controls on the trigger button.\n   * @internal\n   */\n  private readonly _menuId = `hx-split-button-menu-${++_hxSplitButtonIdCounter}`;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    document.addEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  // ─── Outside-click / document keydown ───\n\n  private readonly _handleOutsideClick = (e: MouseEvent): void => {\n    if (!this._open) return;\n    const target = e.target as Node;\n    if (!this.contains(target) && target !== this) {\n      this._closeMenu();\n    }\n  };\n\n  private readonly _handleDocumentKeydown = (e: KeyboardEvent): void => {\n    if (!this._open) return;\n    if (e.key === 'Tab') {\n      this._closeMenu();\n    }\n  };\n\n  // ─── Primary Button Handlers ───\n\n  private _handlePrimaryClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    /**\n     * Dispatched when the primary button is clicked.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n  }\n\n  private _handlePrimaryKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  // ─── Trigger Button Handlers ───\n\n  private _handleTriggerClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    // Stop propagation so _handleOutsideClick does not immediately close.\n    e.stopPropagation();\n    this._toggleMenu();\n  }\n\n  private _handleTriggerKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  // ─── Menu Key Navigation ───\n\n  private _handleMenuKeydown(e: KeyboardEvent): void {\n    const items = this._getMenuItems();\n    if (items.length === 0) return;\n\n    // document.activeElement returns the hx-menu-item host element when its\n    // inner shadow DOM element has focus, which matches items[] directly.\n    const currentIndex = items.findIndex((item) => item === document.activeElement);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        items[next]?.focus();\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        items[prev]?.focus();\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this._closeMenu();\n        this._triggerButton?.focus();\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        items[0]?.focus();\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        items[items.length - 1]?.focus();\n        break;\n      }\n    }\n  }\n\n  // ─── Menu Item Selection ───\n\n  private _handleMenuItemSelect(e: Event): void {\n    const custom = e as CustomEvent<{ item: HelixMenuItem; value: string }>;\n    this._closeMenu();\n    this._triggerButton?.focus();\n\n    const item = custom.detail.item;\n    const label = item?.textContent?.trim() ?? '';\n\n    /**\n     * Dispatched when a menu item is selected.\n     * @event hx-select\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string; label: string }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value: custom.detail.value, label },\n      }),\n    );\n  }\n\n  // ─── Menu Helpers ───\n\n  private _openMenu(): void {\n    if (this._open) return;\n    this._open = true;\n    // Focus the first enabled menu item after the panel renders\n    this.updateComplete\n      .then(() => {\n        const items = this._getMenuItems();\n        items[0]?.focus();\n      })\n      .catch(() => undefined);\n  }\n\n  private _closeMenu(): void {\n    this._open = false;\n  }\n\n  private _toggleMenu(): void {\n    if (this._open) {\n      this._closeMenu();\n    } else {\n      this._openMenu();\n    }\n  }\n\n  /**\n   * Returns the enabled hx-menu-item host elements assigned to the `menu` slot.\n   * HelixMenuItem overrides focus() to delegate to its inner element, so calling\n   * .focus() on hosts works correctly. document.activeElement returns the host\n   * element when the inner shadow element has focus, enabling correct index tracking.\n   */\n  private _getMenuItems(): HelixMenuItem[] {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\n    if (!slot) return [];\n\n    return slot\n      .assignedElements({ flatten: true })\n      .filter(\n        (el): el is HelixMenuItem =>\n          el.tagName.toLowerCase() === 'hx-menu-item' && !(el as HelixMenuItem).disabled,\n      );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const containerClasses = {\n      'split-button': true,\n      [`split-button--${this.variant}`]: true,\n      [`split-button--${this.size}`]: true,\n    };\n\n    const menuClasses = {\n      'split-button__menu': true,\n      'split-button__menu--open': this._open,\n    };\n\n    const chevronClasses = {\n      'split-button__chevron': true,\n      'split-button__chevron--open': this._open,\n    };\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <!-- Primary action button -->\n        <button\n          part=\"button\"\n          class=\"split-button__primary\"\n          ?disabled=${this.disabled}\n          type=\"button\"\n          aria-label=${this.ariaLabel ?? (this.label || nothing)}\n          @click=${this._handlePrimaryClick}\n          @keydown=${this._handlePrimaryKeydown}\n        >\n          ${this.label !== undefined ? this.label : html`<slot></slot>`}\n        </button>\n\n        <!-- Dropdown trigger button -->\n        <button\n          part=\"trigger\"\n          class=\"split-button__trigger\"\n          ?disabled=${this.disabled}\n          aria-haspopup=\"menu\"\n          aria-expanded=${this._open ? 'true' : nothing}\n          aria-controls=${this._menuId}\n          aria-label=${this.triggerLabel}\n          type=\"button\"\n          @click=${this._handleTriggerClick}\n          @keydown=${this._handleTriggerKeydown}\n        >\n          <span class=${classMap(chevronClasses)} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"8\"\n              viewBox=\"0 0 12 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 1.5L6 6.5L11 1.5\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        </button>\n\n        <!-- Dropdown menu panel -->\n        <div\n          part=\"menu\"\n          id=${this._menuId}\n          class=${classMap(menuClasses)}\n          role=\"menu\"\n          aria-label=${this.menuLabel}\n          @keydown=${this._handleMenuKeydown}\n          @hx-item-select=${this._handleMenuItemSelect}\n        >\n          <slot name=\"menu\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-split-button': HelixSplitButton;\n  }\n}\n"],"names":["helixSplitButtonStyles","css","_hxSplitButtonIdCounter","HelixSplitButton","LitElement","e","target","items","currentIndex","item","next","_a","prev","_b","_c","_d","_e","custom","label","slot","el","containerClasses","menuClasses","chevronClasses","html","classMap","nothing","tokenStyles","__decorateClass","query","state","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}
+{"version":3,"file":"hx-split-button-CypgLXw1.js","sources":["../../src/components/hx-split-button/hx-split-button.styles.ts","../../src/components/hx-split-button/hx-split-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitButtonStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Container ─── */\n\n  .split-button {\n    display: inline-flex;\n    align-items: stretch;\n    position: relative;\n  }\n\n  /* ─── Primary Button ─── */\n\n  .split-button__primary {\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-split-button-border-color, transparent);\n    border-right: none;\n    border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0\n      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-split-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    flex: 1 1 auto;\n  }\n\n  .split-button__primary:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    z-index: 1;\n    position: relative;\n  }\n\n  .split-button__primary:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .split-button__primary:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  .split-button__primary[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Trigger Button ─── */\n\n  .split-button__trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);\n    border-left: var(--hx-border-width-thin, 1px) solid\n      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #3b82f6));\n    border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))\n      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;\n    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .split-button__trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    z-index: 1;\n    position: relative;\n  }\n\n  .split-button__trigger:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .split-button__trigger:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  .split-button__trigger[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Trigger Icon ─── */\n\n  .split-button__chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .split-button__chevron--open {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Size Variants ─── */\n\n  /* sm */\n  .split-button--sm .split-button__primary {\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  .split-button--sm .split-button__trigger {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  /* md */\n  .split-button--md .split-button__primary {\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  .split-button--md .split-button__trigger {\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  /* lg */\n  .split-button--lg .split-button__primary {\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  .split-button--lg .split-button__trigger {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Variant: primary ─── */\n\n  .split-button--primary .split-button__primary,\n  .split-button--primary .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-primary-400, #3b82f6);\n  }\n\n  /* ─── Variant: secondary ─── */\n\n  .split-button--secondary .split-button__primary,\n  .split-button--secondary .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);\n  }\n\n  .split-button--secondary .split-button__primary:hover,\n  .split-button--secondary .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);\n    filter: none;\n  }\n\n  /* ─── Variant: tertiary ─── */\n\n  .split-button--tertiary .split-button__primary,\n  .split-button--tertiary .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .split-button--tertiary .split-button__primary:hover,\n  .split-button--tertiary .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);\n    filter: none;\n  }\n\n  /* ─── Variant: danger ─── */\n\n  .split-button--danger .split-button__primary,\n  .split-button--danger .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-error-500, #dc2626);\n    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);\n  }\n\n  .split-button--danger .split-button__primary:hover,\n  .split-button--danger .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);\n    filter: none;\n  }\n\n  /* ─── Variant: ghost ─── */\n\n  .split-button--ghost .split-button__primary,\n  .split-button--ghost .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);\n  }\n\n  .split-button--ghost .split-button__primary:hover,\n  .split-button--ghost .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    filter: none;\n  }\n\n  /* ─── Variant: outline ─── */\n\n  .split-button--outline .split-button__primary,\n  .split-button--outline .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);\n    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .split-button--outline .split-button__primary:hover,\n  .split-button--outline .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);\n    filter: none;\n  }\n\n  /* ─── Dropdown Menu Panel ─── */\n\n  @keyframes hx-split-button-menu-open {\n    from {\n      opacity: 0;\n      transform: translateY(-4px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .split-button__menu {\n    display: none;\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    inset-inline-end: 0;\n    min-width: 100%;\n    max-height: var(--hx-split-button-menu-max-height, 18rem);\n    overflow-y: auto;\n    background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-split-button-menu-shadow,\n      0 4px 6px -1px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)),\n      0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))\n    );\n    padding: var(--hx-space-1, 0.25rem);\n    z-index: var(--hx-z-index-dropdown, 200);\n  }\n\n  .split-button__menu--open {\n    display: block;\n    animation: hx-split-button-menu-open var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .split-button__primary,\n    .split-button__trigger,\n    .split-button__chevron {\n      transition: none;\n    }\n\n    .split-button__menu--open {\n      animation: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSplitButtonStyles } from './hx-split-button.styles.js';\nimport type { HelixMenuItem } from '../hx-menu/hx-menu-item.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxSplitButtonIdCounter = 0;\n\n/**\n * A split button combining a primary action button with an attached dropdown\n * menu for secondary actions. Implements the ARIA menu button pattern for\n * full keyboard and screen reader support.\n *\n * @summary Primary action button with attached dropdown menu for secondary actions.\n *\n * @tag hx-split-button\n *\n * @slot - Primary button label text.\n * @slot menu - `hx-menu-item` children rendered in the dropdown panel.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n *   the primary button is clicked and is not disabled.\n * @fires {CustomEvent<{value: string; label: string}>} hx-select - Dispatched when\n *   a menu item is selected from the dropdown.\n *\n * @csspart button - The primary action button element.\n * @csspart trigger - The dropdown trigger button element.\n * @csspart menu - The dropdown menu panel.\n *\n * @cssprop [--hx-split-button-menu-max-height=18rem] - Maximum height of the dropdown menu panel before scrolling.\n * @cssprop [--hx-split-button-bg=var(--hx-color-primary-500)] - Background color for both buttons.\n * @cssprop [--hx-split-button-color=var(--hx-color-neutral-0)] - Text/icon color for both buttons.\n * @cssprop [--hx-split-button-border-color=transparent] - Border color.\n * @cssprop [--hx-split-button-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-split-button-divider-color=var(--hx-color-primary-400)] - Color of the divider between primary and trigger.\n * @cssprop [--hx-split-button-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-split-button-font-weight=var(--hx-font-weight-semibold)] - Font weight.\n * @cssprop [--hx-split-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-split-button-menu-bg=var(--hx-color-neutral-0)] - Dropdown menu background.\n * @cssprop [--hx-split-button-menu-border-color=var(--hx-color-neutral-200)] - Dropdown menu border color.\n * @cssprop [--hx-split-button-menu-border-radius=var(--hx-border-radius-md)] - Dropdown menu border radius.\n * @cssprop [--hx-split-button-menu-shadow] - Dropdown menu box shadow.\n */\n@customElement('hx-split-button')\nexport class HelixSplitButton extends LitElement {\n  static override styles = [tokenStyles, helixSplitButtonStyles];\n\n  // ─── Internal References ───\n\n  /**\n   * Reference to the dropdown menu panel element, used for positioning and focus management.\n   * @internal\n   */\n  @query('.split-button__menu')\n  private _menuPanel: HTMLElement | undefined;\n\n  /**\n   * Reference to the dropdown trigger button element, used to return focus after menu closes.\n   * @internal\n   */\n  @query('.split-button__trigger')\n  private _triggerButton: HTMLButtonElement | undefined;\n\n  // ─── Internal State ───\n\n  /**\n   * Tracks whether the dropdown menu is currently open.\n   * @internal\n   */\n  @state() private _open = false;\n\n  // ─── Public Properties ───\n\n  /**\n   * Visual style variant of the split button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n  /**\n   * Size of the split 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 split button is disabled. Both the primary button and the\n   * trigger are disabled when this is true.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Primary button label text. When set, overrides the default slot content.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  /**\n   * Accessible label for the dropdown trigger button. Override for localization.\n   * @attr trigger-label\n   */\n  @property({ type: String, attribute: 'trigger-label' })\n  triggerLabel = 'More actions';\n\n  /**\n   * Accessible label for the dropdown menu panel. Override for localization.\n   * @attr menu-label\n   */\n  @property({ type: String, attribute: 'menu-label' })\n  menuLabel = 'Secondary actions';\n\n  // ─── Unique IDs ───\n\n  /**\n   * Stable unique ID for the dropdown menu panel element, used to wire aria-controls on the trigger button.\n   * @internal\n   */\n  private readonly _menuId = `hx-split-button-menu-${++_hxSplitButtonIdCounter}`;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    document.addEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  // ─── Outside-click / document keydown ───\n\n  /** @internal */\n  private readonly _handleOutsideClick = (e: MouseEvent): void => {\n    if (!this._open) return;\n    const target = e.target as Node;\n    if (!this.contains(target) && target !== this) {\n      this._closeMenu();\n    }\n  };\n\n  /** @internal */\n  private readonly _handleDocumentKeydown = (e: KeyboardEvent): void => {\n    if (!this._open) return;\n    if (e.key === 'Tab') {\n      this._closeMenu();\n    }\n  };\n\n  // ─── Primary Button Handlers ───\n\n  /** @internal */\n  private _handlePrimaryClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    /**\n     * Dispatched when the primary button is clicked.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handlePrimaryKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  // ─── Trigger Button Handlers ───\n\n  /** @internal */\n  private _handleTriggerClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    // Stop propagation so _handleOutsideClick does not immediately close.\n    e.stopPropagation();\n    this._toggleMenu();\n  }\n\n  /** @internal */\n  private _handleTriggerKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  // ─── Menu Key Navigation ───\n\n  /** @internal */\n  private _handleMenuKeydown(e: KeyboardEvent): void {\n    const items = this._getMenuItems();\n    if (items.length === 0) return;\n\n    // document.activeElement returns the hx-menu-item host element when its\n    // inner shadow DOM element has focus, which matches items[] directly.\n    const currentIndex = items.findIndex((item) => item === document.activeElement);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        items[next]?.focus();\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        items[prev]?.focus();\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this._closeMenu();\n        this._triggerButton?.focus();\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        items[0]?.focus();\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        items[items.length - 1]?.focus();\n        break;\n      }\n    }\n  }\n\n  // ─── Menu Item Selection ───\n\n  /** @internal */\n  private _handleMenuItemSelect(e: Event): void {\n    if (!(e instanceof CustomEvent)) return;\n    const custom = e as CustomEvent<{ item: HelixMenuItem; value: string }>;\n    this._closeMenu();\n    this._triggerButton?.focus();\n\n    const item = custom.detail.item;\n    const label = item?.textContent?.trim() ?? '';\n\n    /**\n     * Dispatched when a menu item is selected.\n     * @event hx-select\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string; label: string }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value: custom.detail.value, label },\n      }),\n    );\n  }\n\n  // ─── Menu Helpers ───\n\n  /** @internal */\n  private _openMenu(): void {\n    if (this._open) return;\n    this._open = true;\n    // Focus the first enabled menu item after the panel renders\n    void this.updateComplete\n      .then(() => {\n        const items = this._getMenuItems();\n        items[0]?.focus();\n      })\n      .catch(() => undefined);\n  }\n\n  /** @internal */\n  private _closeMenu(): void {\n    this._open = false;\n  }\n\n  /** @internal */\n  private _toggleMenu(): void {\n    if (this._open) {\n      this._closeMenu();\n    } else {\n      this._openMenu();\n    }\n  }\n\n  /**\n   * Returns the enabled hx-menu-item host elements assigned to the `menu` slot.\n   * HelixMenuItem overrides focus() to delegate to its inner element, so calling\n   * .focus() on hosts works correctly. document.activeElement returns the host\n   * element when the inner shadow element has focus, enabling correct index tracking.\n   */\n  /** @internal */\n  private _getMenuItems(): HelixMenuItem[] {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\n    if (!slot) return [];\n\n    return slot\n      .assignedElements({ flatten: true })\n      .filter(\n        (el): el is HelixMenuItem =>\n          el.tagName.toLowerCase() === 'hx-menu-item' && !(el as HelixMenuItem).disabled,\n      );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const containerClasses = {\n      'split-button': true,\n      [`split-button--${this.variant}`]: true,\n      [`split-button--${this.size}`]: true,\n    };\n\n    const menuClasses = {\n      'split-button__menu': true,\n      'split-button__menu--open': this._open,\n    };\n\n    const chevronClasses = {\n      'split-button__chevron': true,\n      'split-button__chevron--open': this._open,\n    };\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <!-- Primary action button -->\n        <button\n          part=\"button\"\n          class=\"split-button__primary\"\n          ?disabled=${this.disabled}\n          type=\"button\"\n          aria-label=${this.ariaLabel ?? (this.label || nothing)}\n          @click=${this._handlePrimaryClick}\n          @keydown=${this._handlePrimaryKeydown}\n        >\n          ${this.label !== undefined ? this.label : html`<slot></slot>`}\n        </button>\n\n        <!-- Dropdown trigger button -->\n        <button\n          part=\"trigger\"\n          class=\"split-button__trigger\"\n          ?disabled=${this.disabled}\n          aria-haspopup=\"menu\"\n          aria-expanded=${this._open ? 'true' : nothing}\n          aria-controls=${this._menuId}\n          aria-label=${this.triggerLabel}\n          type=\"button\"\n          @click=${this._handleTriggerClick}\n          @keydown=${this._handleTriggerKeydown}\n        >\n          <span class=${classMap(chevronClasses)} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"8\"\n              viewBox=\"0 0 12 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 1.5L6 6.5L11 1.5\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        </button>\n\n        <!-- Dropdown menu panel -->\n        <div\n          part=\"menu\"\n          id=${this._menuId}\n          class=${classMap(menuClasses)}\n          role=\"menu\"\n          aria-label=${this.menuLabel}\n          @keydown=${this._handleMenuKeydown}\n          @hx-item-select=${this._handleMenuItemSelect}\n        >\n          <slot name=\"menu\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-split-button': HelixSplitButton;\n  }\n}\n"],"names":["helixSplitButtonStyles","css","_hxSplitButtonIdCounter","HelixSplitButton","LitElement","e","target","items","currentIndex","item","next","_a","prev","_b","_c","_d","_e","custom","label","slot","el","containerClasses","menuClasses","chevronClasses","html","classMap","nothing","tokenStyles","__decorateClass","query","state","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/shared/{hx-split-panel-DYtB45Tr.js → hx-split-panel-CV_Kr4EK.js}

@@ -1,7 +1,8 @@
-import { css as c, LitElement as u, nothing as d, html as h } from "lit";
-import { property as s, customElement as v } from "lit/decorators.js";
-import { tokenStyles as f } from "@helixui/tokens/lit";
-const b = c`
+import { css as c, LitElement as u, nothing as d, html as p } from "lit";
+import { property as r, customElement as v } from "lit/decorators.js";
+import { styleMap as f } from "lit/directives/style-map.js";
+import { tokenStyles as b } from "@helixui/tokens/lit";
+const _ = c`
   :host {
     display: flex;
     --_divider-size: var(--hx-split-panel-divider-size, 4px);
@@ -70,7 +71,7 @@ const b = c`
     flex: 1;
     background-color: var(--_divider-color);
     cursor: col-resize;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
     touch-action: none;
     user-select: none;
     -webkit-user-select: none;
@@ -117,7 +118,7 @@ const b = c`
   .collapse-controls {
     position: absolute;
     top: 50%;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
@@ -160,25 +161,31 @@ const b = c`
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .divider {
+      transition: none;
+    }
+  }
 `;
-var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, i, n, l) => {
-  for (var r = l > 1 ? void 0 : l ? _(i, n) : i, a = t.length - 1, p; a >= 0; a--)
-    (p = t[a]) && (r = (l ? p(i, n, r) : p(r)) || r);
-  return l && r && x(i, n, r), r;
+var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (t, i, n, a) => {
+  for (var s = a > 1 ? void 0 : a ? g(i, n) : i, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (s = (a ? h(i, n, s) : h(s)) || s);
+  return a && s && x(i, n, s), s;
 };
 let e = class extends u {
   constructor() {
-    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._onPointerDown = (t) => {
+    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this.resizeLabel = "Resize panels", this.collapseStartLabel = "Collapse start panel", this.collapseEndLabel = "Collapse end panel", this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0, this._onPointerDown = (t) => {
       if (this.disabled) return;
-      t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this.position, t.preventDefault();
+      t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this.position, this._cachedContainerWidth = this.offsetWidth, this._cachedContainerHeight = this.offsetHeight, t.preventDefault();
     }, this._onPointerMove = (t) => {
       if (!this._dragging) return;
-      const n = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStart, l = this._getHostSize();
-      if (l === 0) return;
-      const r = n / l * 100;
-      this._setPosition(this._positionAtDragStart + r);
+      const n = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStart, a = this.orientation === "horizontal" ? this._cachedContainerWidth : this._cachedContainerHeight;
+      if (a === 0) return;
+      const s = n / a * 100;
+      this._setPosition(this._positionAtDragStart + s);
     }, this._onPointerUp = () => {
-      this._dragging = !1;
+      this._dragging = !1, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0;
     }, this._onKeyDown = (t) => {
       if (!this.disabled)
         switch (t.key) {
@@ -211,9 +218,11 @@ let e = class extends u {
       this.collapsed = null;
     };
   }
+  /** @internal */
   _clamp(t) {
     return Math.min(this.max, Math.max(this.min, t));
   }
+  /** @internal */
   _snapToPoint(t) {
     if (!this.snap.length) return t;
     const i = 5;
@@ -221,6 +230,7 @@ let e = class extends u {
       if (Math.abs(t - n) <= i) return n;
     return t;
   }
+  /** @internal */
   _setPosition(t) {
     const i = this._clamp(this._snapToPoint(t));
     i !== this.position && (this.position = i, this.dispatchEvent(
@@ -231,6 +241,7 @@ let e = class extends u {
       })
     ));
   }
+  /** @internal */
   _getHostSize() {
     return this.orientation === "horizontal" ? this.offsetWidth : this.offsetHeight;
   }
@@ -247,12 +258,13 @@ let e = class extends u {
       }
     });
   }
-  _startPanelStyle() {
-    return this.orientation === "horizontal" ? `width: ${this.position}%;` : `height: ${this.position}%;`;
+  /** @internal */
+  _startPanelStyleMap() {
+    return this.orientation === "horizontal" ? { width: `${this.position}%` } : { height: `${this.position}%` };
   }
   render() {
-    return h`
-      <div part="start" class="panel panel--start" style=${this._startPanelStyle()}>
+    return p`
+      <div part="start" class="panel panel--start" style=${f(this._startPanelStyleMap())}>
         <slot name="start"></slot>
       </div>
       <div class="divider-track">
@@ -260,7 +272,7 @@ let e = class extends u {
           part="divider"
           class="divider"
           role="separator"
-          aria-label="Resize panels"
+          aria-label=${this.resizeLabel}
           aria-orientation=${this.orientation === "horizontal" ? "vertical" : "horizontal"}
           aria-valuenow=${this.position}
           aria-valuemin=${this.min}
@@ -272,7 +284,7 @@ let e = class extends u {
           @pointerup=${this._onPointerUp}
           @keydown=${this._onKeyDown}
         ></div>
-        ${this.collapsible ? this.collapsed ? h`<div class="collapse-controls">
+        ${this.collapsible ? this.collapsed ? p`<div class="collapse-controls">
                 <button
                   type="button"
                   class="collapse-btn"
@@ -281,11 +293,11 @@ let e = class extends u {
                 >
                   ${this.collapsed === "start" ? "▶" : "◀"}
                 </button>
-              </div>` : h`<div class="collapse-controls">
+              </div>` : p`<div class="collapse-controls">
                 <button
                   type="button"
                   class="collapse-btn"
-                  aria-label="Collapse start panel"
+                  aria-label=${this.collapseStartLabel}
                   @click=${this._collapseStart}
                 >
                   ◀
@@ -293,7 +305,7 @@ let e = class extends u {
                 <button
                   type="button"
                   class="collapse-btn"
-                  aria-label="Collapse end panel"
+                  aria-label=${this.collapseEndLabel}
                   @click=${this._collapseEnd}
                 >
                   ▶
@@ -306,24 +318,24 @@ let e = class extends u {
     `;
   }
 };
-e.styles = [f, b];
+e.styles = [b, _];
 o([
-  s({ type: Number, reflect: !0 })
+  r({ type: Number, reflect: !0 })
 ], e.prototype, "position", 2);
 o([
-  s({ type: Number, attribute: "position-in-pixels" })
+  r({ type: Number, attribute: "position-in-pixels" })
 ], e.prototype, "positionInPixels", 2);
 o([
-  s({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], e.prototype, "orientation", 2);
 o([
-  s({ type: Number, reflect: !0 })
+  r({ type: Number, reflect: !0 })
 ], e.prototype, "min", 2);
 o([
-  s({ type: Number, reflect: !0 })
+  r({ type: Number, reflect: !0 })
 ], e.prototype, "max", 2);
 o([
-  s({
+  r({
     attribute: "snap",
     converter: {
       fromAttribute(t) {
@@ -342,18 +354,27 @@ o([
   })
 ], e.prototype, "snap", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "collapsible", 2);
 o([
-  s({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], e.prototype, "collapsed", 2);
+o([
+  r({ attribute: "resize-label" })
+], e.prototype, "resizeLabel", 2);
+o([
+  r({ attribute: "collapse-start-label" })
+], e.prototype, "collapseStartLabel", 2);
+o([
+  r({ attribute: "collapse-end-label" })
+], e.prototype, "collapseEndLabel", 2);
 e = o([
   v("hx-split-panel")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-split-panel-DYtB45Tr.js.map
+//# sourceMappingURL=hx-split-panel-CV_Kr4EK.js.map

package/dist/shared/hx-split-panel-CV_Kr4EK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-split-panel-CV_Kr4EK.js","sources":["../../src/components/hx-split-panel/hx-split-panel.styles.ts","../../src/components/hx-split-panel/hx-split-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitPanelStyles = css`\n  :host {\n    display: flex;\n    --_divider-size: var(--hx-split-panel-divider-size, 4px);\n    --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));\n    --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));\n    overflow: hidden;\n  }\n\n  :host([orientation='horizontal']) {\n    flex-direction: row;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) {\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n  }\n\n  .panel {\n    overflow: auto;\n    min-width: 0;\n    min-height: 0;\n  }\n\n  .panel--start {\n    flex-shrink: 0;\n  }\n\n  .panel--end {\n    flex: 1;\n  }\n\n  :host([orientation='horizontal']) .panel--start {\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) .panel--start {\n    width: 100%;\n  }\n\n  /* ─── Divider Track (flex child wrapper) ─── */\n\n  .divider-track {\n    flex-shrink: 0;\n    position: relative;\n    overflow: visible;\n    display: flex;\n    align-items: stretch;\n  }\n\n  :host([orientation='horizontal']) .divider-track {\n    width: var(--_divider-size);\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) .divider-track {\n    width: 100%;\n    height: var(--_divider-size);\n  }\n\n  /* ─── Divider (separator role — no interactive children) ─── */\n\n  .divider {\n    flex: 1;\n    background-color: var(--_divider-color);\n    cursor: col-resize;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n    touch-action: none;\n    user-select: none;\n    -webkit-user-select: none;\n    outline: none;\n  }\n\n  :host([orientation='horizontal']) .divider {\n    cursor: col-resize;\n  }\n\n  :host([orientation='vertical']) .divider {\n    cursor: row-resize;\n  }\n\n  .divider:hover,\n  .divider:focus-visible {\n    background-color: var(--_divider-hover-color);\n  }\n\n  .divider:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-split-panel-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);\n  }\n\n  :host([disabled]) .divider {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .divider:hover,\n  :host([disabled]) .divider:focus-visible {\n    background-color: var(--_divider-color);\n    outline: none;\n    box-shadow: none;\n  }\n\n  /* ─── Collapse Controls (siblings of separator, not children) ─── */\n\n  .collapse-controls {\n    position: absolute;\n    top: 50%;\n    inset-inline-start: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    z-index: 2;\n    pointer-events: auto;\n  }\n\n  :host([orientation='vertical']) .collapse-controls {\n    flex-direction: row;\n  }\n\n  .collapse-btn {\n    background: var(--_divider-hover-color);\n    border: 2px solid var(--hx-color-neutral-0);\n    color: var(--hx-color-neutral-0);\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 8px;\n    padding: 0;\n    line-height: 1;\n    flex-shrink: 0;\n  }\n\n  .collapse-btn:hover {\n    filter: brightness(1.1);\n  }\n\n  .collapse-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-split-panel-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .divider {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSplitPanelStyles } from './hx-split-panel.styles.js';\n\n/**\n * A resizable two-pane layout with a draggable divider.\n *\n * @summary Resizable split panel with start and end panes.\n *\n * @tag hx-split-panel\n *\n * @slot start - The first (start) panel content.\n * @slot end - The second (end) panel content.\n *\n * @csspart start - The start panel container.\n * @csspart divider - The draggable divider element.\n * @csspart end - The end panel container.\n *\n * @fires hx-reposition - Fired when the divider is moved. Detail: `{ position: number }`.\n *\n * @cssprop [--hx-split-panel-divider-size=4px] - Width (horizontal) or height (vertical) of the divider.\n * @cssprop [--hx-split-panel-divider-color=var(--hx-color-neutral-200)] - Default divider color.\n * @cssprop [--hx-split-panel-divider-hover-color=var(--hx-color-primary-500)] - Divider color on hover/focus.\n *\n * @example Drupal Twig usage:\n * ```twig\n * <hx-split-panel\n *   position=\"50\"\n *   orientation=\"horizontal\"\n *   min=\"10\"\n *   max=\"90\"\n *   collapsible\n * >\n *   <div slot=\"start\">{{ start_content }}</div>\n *   <div slot=\"end\">{{ end_content }}</div>\n * </hx-split-panel>\n *\n * Attribute-settable: position, position-in-pixels, orientation, disabled, min, max, collapsible, collapsed\n * JS-only (complex types): snap (use .snap=${[25, 50, 75]} in Lit templates,\n *   or snap=\"[25,50,75]\" as JSON string in Twig)\n * ```\n */\n@customElement('hx-split-panel')\nexport class HelixSplitPanel extends LitElement {\n  static override styles = [tokenStyles, helixSplitPanelStyles];\n\n  /**\n   * Position of the divider as a percentage (0–100) of the start panel.\n   * @attr position\n   */\n  @property({ type: Number, reflect: true })\n  position = 50;\n\n  /**\n   * Position of the divider in pixels (alternative to `position`).\n   * When set, takes precedence over `position` until the host is measured.\n   * @attr position-in-pixels\n   */\n  @property({ type: Number, attribute: 'position-in-pixels' })\n  positionInPixels: number | undefined;\n\n  /**\n   * Orientation of the split.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Minimum position as a percentage (0–100). Prevents full collapse of start panel.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum position as a percentage (0–100). Prevents full expansion of start panel.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Snap points as an array of percentages. The divider snaps to the\n   * nearest point within a 5% threshold.\n   * Accepts JSON array string in HTML: snap=\"[25, 50, 75]\"\n   * @attr snap\n   */\n  @property({\n    attribute: 'snap',\n    converter: {\n      fromAttribute(value: string | null): number[] {\n        if (!value) return [];\n        try {\n          const parsed = JSON.parse(value) as unknown;\n          if (Array.isArray(parsed)) return (parsed as unknown[]).map(Number);\n          return [];\n        } catch {\n          return value\n            .split(',')\n            .map((s) => Number(s.trim()))\n            .filter((n) => !isNaN(n));\n        }\n      },\n      toAttribute(value: number[]): string {\n        return JSON.stringify(value);\n      },\n    },\n  })\n  snap: number[] = [];\n\n  /**\n   * When true, the divider cannot be dragged.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * When true, collapse/expand buttons appear on the divider.\n   * @attr collapsible\n   */\n  @property({ type: Boolean, reflect: true })\n  collapsible = false;\n\n  /**\n   * Which panel is collapsed: 'start', 'end', or null (not collapsed).\n   * @attr collapsed\n   */\n  @property({ type: String, reflect: true })\n  collapsed: 'start' | 'end' | null = null;\n\n  /**\n   * Accessible label for the divider separator element.\n   * @attr resize-label\n   */\n  @property({ attribute: 'resize-label' })\n  resizeLabel = 'Resize panels';\n\n  /**\n   * Accessible label for the button that collapses the start panel.\n   * @attr collapse-start-label\n   */\n  @property({ attribute: 'collapse-start-label' })\n  collapseStartLabel = 'Collapse start panel';\n\n  /**\n   * Accessible label for the button that collapses the end panel.\n   * @attr collapse-end-label\n   */\n  @property({ attribute: 'collapse-end-label' })\n  collapseEndLabel = 'Collapse end panel';\n\n  /**\n   * Whether the user is currently dragging the divider.\n   * @internal\n   */\n  private _dragging = false;\n  /**\n   * The pointer coordinate (clientX or clientY) at the start of a drag gesture.\n   * @internal\n   */\n  private _dragStart = 0;\n  /**\n   * The divider position percentage at the moment a drag gesture begins, used to compute deltas.\n   * @internal\n   */\n  private _positionAtDragStart = 0;\n  /**\n   * The position saved before a collapse occurs, restored when the panel is expanded.\n   * @internal\n   */\n  private _positionBeforeCollapse = 50;\n  /**\n   * Cached container width measured once at drag start to avoid layout thrash on every pointermove.\n   * @internal\n   */\n  private _cachedContainerWidth = 0;\n  /**\n   * Cached container height measured once at drag start to avoid layout thrash on every pointermove.\n   * @internal\n   */\n  private _cachedContainerHeight = 0;\n\n  /** @internal */\n  private _clamp(value: number): number {\n    return Math.min(this.max, Math.max(this.min, value));\n  }\n\n  /** @internal */\n  private _snapToPoint(value: number): number {\n    if (!this.snap.length) return value;\n    const threshold = 5;\n    for (const point of this.snap) {\n      if (Math.abs(value - point) <= threshold) return point;\n    }\n    return value;\n  }\n\n  /** @internal */\n  private _setPosition(percent: number): void {\n    const clamped = this._clamp(this._snapToPoint(percent));\n    if (clamped === this.position) return;\n    this.position = clamped;\n    this.dispatchEvent(\n      new CustomEvent<{ position: number }>('hx-reposition', {\n        detail: { position: this.position },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** @internal */\n  private _getHostSize(): number {\n    if (this.orientation === 'horizontal') {\n      return this.offsetWidth;\n    }\n    return this.offsetHeight;\n  }\n\n  /**\n   * Initiates a drag gesture when the divider receives a pointerdown event.\n   * @internal\n   */\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (this.disabled) return;\n    const divider = e.currentTarget as HTMLElement;\n    divider.setPointerCapture(e.pointerId);\n    this._dragging = true;\n    this._dragStart = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n    this._positionAtDragStart = this.position;\n    // Cache container dimensions once at drag start to avoid forced layout on every pointermove\n    this._cachedContainerWidth = this.offsetWidth;\n    this._cachedContainerHeight = this.offsetHeight;\n    e.preventDefault();\n  };\n\n  /**\n   * Updates the divider position during an active drag gesture.\n   * @internal\n   */\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._dragging) return;\n    const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n    const delta = current - this._dragStart;\n    const hostSize =\n      this.orientation === 'horizontal' ? this._cachedContainerWidth : this._cachedContainerHeight;\n    if (hostSize === 0) return;\n    const deltaPercent = (delta / hostSize) * 100;\n    this._setPosition(this._positionAtDragStart + deltaPercent);\n  };\n\n  /**\n   * Ends the drag gesture when the pointer is released.\n   * @internal\n   */\n  private _onPointerUp = (): void => {\n    this._dragging = false;\n    this._cachedContainerWidth = 0;\n    this._cachedContainerHeight = 0;\n  };\n\n  /**\n   * Handles keyboard navigation on the divider — arrow keys adjust position, Home/End jump to min/max.\n   * @internal\n   */\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled) return;\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        e.preventDefault();\n        this._setPosition(this.position - 1);\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        e.preventDefault();\n        this._setPosition(this.position + 1);\n        break;\n      case 'PageUp':\n        e.preventDefault();\n        this._setPosition(this.position + 10);\n        break;\n      case 'PageDown':\n        e.preventDefault();\n        this._setPosition(this.position - 10);\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._setPosition(this.min);\n        break;\n      case 'End':\n        e.preventDefault();\n        this._setPosition(this.max);\n        break;\n    }\n  };\n\n  /**\n   * Collapses the start panel by setting `collapsed` to `'start'`.\n   * @internal\n   */\n  private _collapseStart = (): void => {\n    this.collapsed = 'start';\n  };\n\n  /**\n   * Collapses the end panel by setting `collapsed` to `'end'`.\n   * @internal\n   */\n  private _collapseEnd = (): void => {\n    this.collapsed = 'end';\n  };\n\n  /**\n   * Expands a collapsed panel by resetting `collapsed` to null.\n   * @internal\n   */\n  private _expand = (): void => {\n    this.collapsed = null;\n  };\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties);\n    if (!changedProperties.has('collapsed')) return;\n\n    const prev = changedProperties.get('collapsed');\n\n    if (this.collapsed === 'start') {\n      // Save restore point when transitioning from non-collapsed state (or initial render)\n      if (prev === null || prev === undefined) this._positionBeforeCollapse = this.position;\n      this._setPosition(this.min);\n    } else if (this.collapsed === 'end') {\n      if (prev === null || prev === undefined) this._positionBeforeCollapse = this.position;\n      this._setPosition(this.max);\n    } else if (this.collapsed === null && prev !== null && prev !== undefined) {\n      // Only expand when transitioning from an explicitly collapsed state (not first render)\n      this._setPosition(this._positionBeforeCollapse);\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.positionInPixels !== undefined) {\n      // Convert pixel position to percentage after first paint\n      requestAnimationFrame(() => {\n        if (this.positionInPixels !== undefined) {\n          const hostSize = this._getHostSize();\n          if (hostSize > 0) {\n            this._setPosition((this.positionInPixels / hostSize) * 100);\n          }\n        }\n      });\n    }\n  }\n\n  /** @internal */\n  private _startPanelStyleMap(): Record<string, string> {\n    if (this.orientation === 'horizontal') {\n      return { width: `${this.position}%` };\n    }\n    return { height: `${this.position}%` };\n  }\n\n  override render() {\n    return html`\n      <div part=\"start\" class=\"panel panel--start\" style=${styleMap(this._startPanelStyleMap())}>\n        <slot name=\"start\"></slot>\n      </div>\n      <div class=\"divider-track\">\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          role=\"separator\"\n          aria-label=${this.resizeLabel}\n          aria-orientation=${this.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n          aria-valuenow=${this.position}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @pointerdown=${this._onPointerDown}\n          @pointermove=${this._onPointerMove}\n          @pointerup=${this._onPointerUp}\n          @keydown=${this._onKeyDown}\n        ></div>\n        ${this.collapsible\n          ? this.collapsed\n            ? html`<div class=\"collapse-controls\">\n                <button\n                  type=\"button\"\n                  class=\"collapse-btn\"\n                  aria-label=${`Expand ${this.collapsed} panel`}\n                  @click=${this._expand}\n                >\n                  ${this.collapsed === 'start' ? '▶' : '◀'}\n                </button>\n              </div>`\n            : html`<div class=\"collapse-controls\">\n                <button\n                  type=\"button\"\n                  class=\"collapse-btn\"\n                  aria-label=${this.collapseStartLabel}\n                  @click=${this._collapseStart}\n                >\n                  ◀\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"collapse-btn\"\n                  aria-label=${this.collapseEndLabel}\n                  @click=${this._collapseEnd}\n                >\n                  ▶\n                </button>\n              </div>`\n          : nothing}\n      </div>\n      <div part=\"end\" class=\"panel panel--end\">\n        <slot name=\"end\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-split-panel': HelixSplitPanel;\n  }\n}\n"],"names":["helixSplitPanelStyles","css","HelixSplitPanel","LitElement","e","delta","hostSize","deltaPercent","value","threshold","point","percent","clamped","changedProperties","prev","html","styleMap","nothing","tokenStyles","__decorateClass","property","parsed","s","n","customElement"],"mappings":"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"}

package/dist/shared/{hx-stack-CfoW7jU7.js → hx-stack-BStY1RmV.js}

@@ -1,7 +1,7 @@
 import { css as c, LitElement as h, html as f } from "lit";
-import { property as a, customElement as g } from "lit/decorators.js";
-import { tokenStyles as y } from "@helixui/tokens/lit";
-const u = c`
+import { property as s, customElement as y } from "lit/decorators.js";
+import { tokenStyles as u } from "@helixui/tokens/lit";
+const b = c`
   :host {
     display: block;
   }
@@ -13,7 +13,7 @@ const u = c`
   [part='base'] {
     display: flex;
     flex-direction: column;
-    gap: var(--hx-spacing-md, 1rem);
+    gap: var(--hx-space-4, 1rem);
   }
 
   /* ─── Direction ─── */
@@ -87,29 +87,29 @@ const u = c`
   }
 
   :host([gap='xs']) [part='base'] {
-    gap: var(--hx-spacing-xs, 0.25rem);
+    gap: var(--hx-space-1, 0.25rem);
   }
 
   :host([gap='sm']) [part='base'] {
-    gap: var(--hx-spacing-sm, 0.5rem);
+    gap: var(--hx-space-2, 0.5rem);
   }
 
   :host([gap='md']) [part='base'] {
-    gap: var(--hx-spacing-md, 1rem);
+    gap: var(--hx-space-4, 1rem);
   }
 
   :host([gap='lg']) [part='base'] {
-    gap: var(--hx-spacing-lg, 1.5rem);
+    gap: var(--hx-space-6, 1.5rem);
   }
 
   :host([gap='xl']) [part='base'] {
-    gap: var(--hx-spacing-xl, 2rem);
+    gap: var(--hx-space-8, 2rem);
   }
 `;
-var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (l, r, n, i) => {
-  for (var e = i > 1 ? void 0 : i ? m(r, n) : r, p = l.length - 1, o; p >= 0; p--)
-    (o = l[p]) && (e = (i ? o(r, n, e) : o(e)) || e);
-  return i && e && b(r, n, e), e;
+var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (l, r, p, i) => {
+  for (var e = i > 1 ? void 0 : i ? m(r, p) : r, n = l.length - 1, o; n >= 0; n--)
+    (o = l[n]) && (e = (i ? o(r, p, e) : o(e)) || e);
+  return i && e && g(r, p, e), e;
 };
 let t = class extends h {
   constructor() {
@@ -146,29 +146,29 @@ let t = class extends h {
     `;
   }
 };
-t.styles = [y, u];
-s([
-  a({ type: String, reflect: !0 })
+t.styles = [u, b];
+a([
+  s({ type: String, reflect: !0 })
 ], t.prototype, "direction", 2);
-s([
-  a({ type: String, reflect: !0 })
+a([
+  s({ type: String, reflect: !0 })
 ], t.prototype, "gap", 2);
-s([
-  a({ type: String, reflect: !0 })
+a([
+  s({ type: String, reflect: !0 })
 ], t.prototype, "align", 2);
-s([
-  a({ type: String, reflect: !0 })
+a([
+  s({ type: String, reflect: !0 })
 ], t.prototype, "justify", 2);
-s([
-  a({ type: Boolean, reflect: !0 })
+a([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "wrap", 2);
-s([
-  a({ type: Boolean, reflect: !0 })
+a([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "inline", 2);
-t = s([
-  g("hx-stack")
+t = a([
+  y("hx-stack")
 ], t);
 export {
   t as H
 };
-//# sourceMappingURL=hx-stack-CfoW7jU7.js.map
+//# sourceMappingURL=hx-stack-BStY1RmV.js.map

package/dist/shared/hx-stack-BStY1RmV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-stack-BStY1RmV.js","sources":["../../src/components/hx-stack/hx-stack.styles.ts","../../src/components/hx-stack/hx-stack.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStackStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([inline]) {\n    display: inline-block;\n  }\n\n  [part='base'] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Direction ─── */\n\n  :host([direction='horizontal']) [part='base'] {\n    flex-direction: row;\n  }\n\n  :host([direction='vertical']) [part='base'] {\n    flex-direction: column;\n  }\n\n  /* ─── Wrap ─── */\n\n  :host([wrap]) [part='base'] {\n    flex-wrap: wrap;\n  }\n\n  /* ─── Alignment ─── */\n\n  :host([align='start']) [part='base'] {\n    align-items: flex-start;\n  }\n\n  :host([align='center']) [part='base'] {\n    align-items: center;\n  }\n\n  :host([align='end']) [part='base'] {\n    align-items: flex-end;\n  }\n\n  :host([align='stretch']) [part='base'] {\n    align-items: stretch;\n  }\n\n  :host([align='baseline']) [part='base'] {\n    align-items: baseline;\n  }\n\n  /* ─── Justify ─── */\n\n  :host([justify='start']) [part='base'] {\n    justify-content: flex-start;\n  }\n\n  :host([justify='center']) [part='base'] {\n    justify-content: center;\n  }\n\n  :host([justify='end']) [part='base'] {\n    justify-content: flex-end;\n  }\n\n  :host([justify='between']) [part='base'] {\n    justify-content: space-between;\n  }\n\n  :host([justify='around']) [part='base'] {\n    justify-content: space-around;\n  }\n\n  :host([justify='evenly']) [part='base'] {\n    justify-content: space-evenly;\n  }\n\n  /* ─── Gap ─── */\n\n  :host([gap='none']) [part='base'] {\n    gap: 0;\n  }\n\n  :host([gap='xs']) [part='base'] {\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  :host([gap='sm']) [part='base'] {\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  :host([gap='md']) [part='base'] {\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  :host([gap='lg']) [part='base'] {\n    gap: var(--hx-space-6, 1.5rem);\n  }\n\n  :host([gap='xl']) [part='base'] {\n    gap: var(--hx-space-8, 2rem);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixStackStyles } from './hx-stack.styles.js';\n\n/**\n * A flexbox layout wrapper for consistent vertical/horizontal spacing between children.\n *\n * @summary Flexbox stack layout utility for arranging children with consistent spacing.\n *\n * @tag hx-stack\n *\n * @slot - Default slot for any child content.\n *\n * @csspart base - The inner flex container.\n */\n@customElement('hx-stack')\nexport class HelixStack extends LitElement {\n  static override styles = [tokenStyles, helixStackStyles];\n\n  /**\n   * Direction of the stack layout.\n   * @attr direction\n   */\n  @property({ type: String, reflect: true })\n  direction: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Gap between children using design tokens.\n   * @attr gap\n   */\n  @property({ type: String, reflect: true })\n  gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /**\n   * Align-items value for cross-axis alignment.\n   * @attr align\n   */\n  @property({ type: String, reflect: true })\n  align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n  /**\n   * Justify-content value for main-axis distribution.\n   * @attr justify\n   */\n  @property({ type: String, reflect: true })\n  justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' = 'start';\n\n  /**\n   * When true, children wrap onto multiple lines.\n   * @attr wrap\n   */\n  @property({ type: Boolean, reflect: true })\n  wrap = false;\n\n  /**\n   * When true, the component renders as `display: inline-flex`.\n   * @attr inline\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * Sets `role=\"presentation\"` on connect so assistive technologies treat this\n   * element as a purely visual layout wrapper with no semantic meaning. This\n   * suppresses any implicit ARIA role that a custom element might otherwise\n   * inherit, preventing screen readers from announcing \"group\" or \"region\"\n   * for what is purely a spacing/alignment container.\n   *\n   * **Consumer override:** If you need a semantic grouping role (e.g. for a\n   * form fieldset equivalent), set `role=\"group\"` or any other ARIA role\n   * directly on the element — the guard `!this.hasAttribute('role')` ensures\n   * the component will not overwrite it.\n   *\n   * @example\n   * <!-- Layout stack — role=\"presentation\" applied automatically -->\n   * <hx-stack gap=\"md\">...</hx-stack>\n   *\n   * @example\n   * <!-- Semantic group — consumer role preserved -->\n   * <hx-stack role=\"group\" aria-labelledby=\"form-heading\" gap=\"md\">...</hx-stack>\n   */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'presentation');\n    }\n  }\n\n  override render() {\n    return html`\n      <div part=\"base\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-stack': HelixStack;\n  }\n}\n"],"names":["helixStackStyles","css","HelixStack","LitElement","html","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACezB,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,YAAuC,YAOvC,KAAA,MAAiD,MAOjD,KAAA,QAA6D,WAO7D,KAAA,UAAwE,SAOxE,KAAA,OAAO,IAOP,KAAA,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,oBAA0B;AACjC,UAAM,kBAAA,GACD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,cAAc;AAAA,EAE5C;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA/EaF,EACK,SAAS,CAACG,GAAaL,CAAgB;AAOvDM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BL,EAQX,WAAA,aAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BL,EAeX,WAAA,OAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArB9BL,EAsBX,WAAA,SAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5B9BL,EA6BX,WAAA,WAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnC/BL,EAoCX,WAAA,QAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1C/BL,EA2CX,WAAA,UAAA,CAAA;AA3CWA,IAANI,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZN,CAAA;"}

package/dist/shared/{hx-stat-C2wfph8W.js → hx-stat-CHntLHJM.js}

@@ -1,8 +1,8 @@
-import { css as c, LitElement as v, html as n, nothing as p } from "lit";
+import { css as d, LitElement as v, html as n, nothing as p } from "lit";
 import { property as l, state as f, customElement as x } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
-import { tokenStyles as _ } from "@helixui/tokens/lit";
-const m = c`
+import { tokenStyles as u } from "@helixui/tokens/lit";
+const _ = d`
   :host {
     display: block;
   }
@@ -109,20 +109,28 @@ const m = c`
     display: none !important;
   }
 `;
-var u = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, e, i, o) => {
-  for (var a = o > 1 ? void 0 : o ? w(e, i) : e, h = t.length - 1, d; h >= 0; h--)
-    (d = t[h]) && (a = (o ? d(e, i, a) : d(a)) || a);
-  return o && a && u(e, i, a), a;
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, e, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? w(e, i) : e, h = t.length - 1, c; h >= 0; h--)
+    (c = t[h]) && (a = (o ? c(e, i, a) : c(a)) || a);
+  return o && a && m(e, i, a), a;
 };
 let r = class extends v {
   constructor() {
     super(...arguments), this.label = "", this.value = "", this.trend = "neutral", this.size = "md", this._hasIcon = !1;
   }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.getAttribute("size");
+    t !== null && !this.hasAttribute("hx-size") && (this.size = t);
+  }
+  /** @internal */
   _onIconSlotChange(t) {
     const e = t.target;
     this._hasIcon = e.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Render Helpers ───
+  /** @internal */
   _renderTrendArrow(t) {
     return t === "up" ? n`
         <svg
@@ -187,7 +195,7 @@ let r = class extends v {
     `;
   }
 };
-r.styles = [_, m];
+r.styles = [u, _];
 s([
   l({ type: String, reflect: !0 })
 ], r.prototype, "label", 2);
@@ -198,7 +206,7 @@ s([
   l({ type: String, reflect: !0 })
 ], r.prototype, "trend", 2);
 s([
-  l({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0, attribute: "hx-size" })
 ], r.prototype, "size", 2);
 s([
   f()
@@ -209,4 +217,4 @@ r = s([
 export {
   r as H
 };
-//# sourceMappingURL=hx-stat-C2wfph8W.js.map
+//# sourceMappingURL=hx-stat-CHntLHJM.js.map