@helixui/library 1.1.2 → 2.0.0

package/dist/shared/hx-dropdown-DP_DNpEb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-dropdown-DP_DNpEb.js","sources":["../../src/components/hx-dropdown/hx-dropdown.styles.ts","../../src/components/hx-dropdown/hx-dropdown.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDropdownStyles = 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  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='panel'] {\n    position: fixed;\n    z-index: var(--hx-dropdown-panel-z-index, 1000);\n    min-width: var(--hx-dropdown-panel-min-width, 160px);\n    background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));\n    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e5e7eb));\n    border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-dropdown-panel-shadow,\n      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))\n    );\n    visibility: hidden;\n    opacity: 0;\n    pointer-events: none;\n    transition:\n      opacity var(--hx-transition-fast, 150ms ease),\n      visibility var(--hx-transition-fast, 150ms ease);\n    outline: none;\n  }\n\n  [part='panel'].panel--visible {\n    visibility: visible;\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='panel'] {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  type Placement as FloatingPlacement,\n} from '@floating-ui/dom';\nimport { helixDropdownStyles } from './hx-dropdown.styles.js';\n\n// P2-03: Export so TypeScript consumers can import this type for prop typing.\nexport type DropdownPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'start'\n  | 'end';\n\n/**\n * A dropdown component — a button that opens a floating panel on click.\n *\n * @summary Button that opens a floating menu panel on click.\n *\n * @tag hx-dropdown\n *\n * @slot trigger - The element that opens the dropdown (e.g. hx-button).\n * @slot - Default slot for dropdown panel content (e.g. menu items).\n *\n * @fires {CustomEvent<void>} hx-show - Dispatched when the dropdown is opened.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the dropdown is closed.\n * @fires {CustomEvent<{value: string | null; label: string}>} hx-select - Dispatched when a menu item is selected.\n *\n * @csspart trigger - The trigger wrapper element.\n * @csspart panel - The floating panel element.\n *\n * @cssprop [--hx-dropdown-panel-bg=var(--hx-color-neutral-0)] - Panel background color.\n * @cssprop [--hx-dropdown-panel-border-color=var(--hx-color-neutral-200)] - Panel border color.\n * @cssprop [--hx-dropdown-panel-border-radius=var(--hx-border-radius-md)] - Panel border radius.\n * @cssprop [--hx-dropdown-panel-shadow=0 4px 16px rgba(0,0,0,0.12)] - Panel box shadow.\n * @cssprop [--hx-dropdown-panel-z-index=1000] - Panel z-index.\n * @cssprop [--hx-dropdown-panel-min-width=160px] - Panel minimum width.\n *\n * @example\n * ```html\n * <hx-dropdown>\n *   <button slot=\"trigger\">Open Menu</button>\n *   <ul>\n *     <li data-value=\"edit\">Edit</li>\n *     <li data-value=\"delete\">Delete</li>\n *   </ul>\n * </hx-dropdown>\n * ```\n */\n@customElement('hx-dropdown')\nexport class HelixDropdown extends LitElement {\n  static override styles = [tokenStyles, helixDropdownStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Whether the dropdown panel is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Preferred placement of the panel relative to the trigger.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'start'\n    | 'end' = 'bottom-start';\n\n  /**\n   * Accessible label for the dropdown menu panel. Override for i18n.\n   * @attr label\n   */\n  @property() label = 'Menu';\n\n  /**\n   * Whether the dropdown is disabled. Prevents opening.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Gap in pixels between the trigger and the panel.\n   * @attr distance\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  // ─── Internal State ───\n\n  /**\n   * Whether the dropdown panel is currently visible.\n   * @internal\n   */\n  @state() private _panelVisible = false;\n\n  /**\n   * Guards against accumulating multiple document click listeners when open state\n   * changes faster than the microtask queue can process removeEventListener calls.\n   * @internal\n   */\n  private _documentListenerAttached = false;\n\n  // P1-02: Unique panel ID for aria-controls.\n  /**\n   * Monotonically incrementing counter used to generate unique panel IDs across instances.\n   * @internal\n   */\n  private static _instanceCounter = 0;\n  /**\n   * Unique ID assigned to the floating panel element, referenced by `aria-controls` on the trigger.\n   * @internal\n   */\n  private _panelId = `hx-dropdown-panel-${++HelixDropdown._instanceCounter}`;\n\n  /**\n   * Reference to the floating panel element inside the shadow DOM.\n   * @internal\n   */\n  @query('[part=\"panel\"]') private _panel: HTMLElement | undefined;\n  /**\n   * Reference to the trigger wrapper element inside the shadow DOM.\n   * @internal\n   */\n  @query('[part=\"trigger\"]') private _triggerWrapper: HTMLElement | undefined;\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    if (this._documentListenerAttached) {\n      document.removeEventListener('click', this._handleOutsideClick, { capture: true });\n      this._documentListenerAttached = false;\n    }\n  }\n\n  // ─── Open/Close ───\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    if (this.open || this.disabled) return;\n    this.open = true;\n    this._panelVisible = true;\n    // Add outside-click listener synchronously before any await so it is registered\n    // by the time the test fires an outside click after a single await el.updateComplete.\n    if (!this._documentListenerAttached) {\n      document.addEventListener('click', this._handleOutsideClick, { capture: true });\n      this._documentListenerAttached = true;\n    }\n    await this.updateComplete;\n    // P0-01: Fix focus management — use slot.assignedElements() to traverse slotted (light DOM) content.\n    // Focus is set after updateComplete (panel is rendered) but before _updatePosition so\n    // it executes in the same microtask as the test's await-continuation.\n    const panel = this._panel;\n    if (panel) {\n      const firstFocusable = this._getFirstFocusableItem();\n      firstFocusable?.focus();\n    }\n    await this._updatePosition();\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n  }\n\n  // P2-02: returnFocus=true only on Escape; Tab should let focus advance naturally.\n  /** @internal */\n  private _hide(returnFocus = true): void {\n    if (!this.open) return;\n    this.open = false;\n    this._panelVisible = false;\n    if (this._documentListenerAttached) {\n      document.removeEventListener('click', this._handleOutsideClick, { capture: true });\n      this._documentListenerAttached = false;\n    }\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n    if (returnFocus) {\n      const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n      const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n      trigger?.focus();\n    }\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const reference = this._triggerWrapper;\n    const panel = this._panel;\n    if (!reference || !panel) return;\n\n    // Map 'start' and 'end' to floating-ui's 'left'/'right'\n    const floatingPlacement = this.placement\n      .replace(/^start$/, 'left')\n      .replace(/^end$/, 'right') as FloatingPlacement;\n\n    const { x, y } = await computePosition(reference, panel, {\n      placement: floatingPlacement,\n      strategy: 'fixed',\n      middleware: [offset(this.distance), flip(), shift({ padding: 8 })],\n    });\n\n    Object.assign(panel.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleTriggerClick(e: MouseEvent): void {\n    e.stopPropagation();\n    if (this.open) {\n      this._hide();\n    } else {\n      void this._show();\n    }\n  }\n\n  /** @internal */\n  private _handleTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      void this._show();\n    }\n  }\n\n  /** @internal */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this._hide(true); // return focus to trigger on Escape\n    } else if (e.key === 'Tab' && this.open) {\n      // P2-02: Do not return focus to trigger on Tab — let focus advance naturally to next page element.\n      this._hide(false);\n    } else if (\n      this.open &&\n      (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End')\n    ) {\n      // P2-01: Arrow key roving within panel per APG Menu Button pattern.\n      e.preventDefault();\n      this._handleMenuNavigation(e.key);\n    }\n  };\n\n  // P2-01: Move focus among menuitem elements using arrow keys.\n  /** @internal */\n  private _handleMenuNavigation(key: string): void {\n    const items = this._getFocusableMenuItems();\n    if (items.length === 0) return;\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    let nextIndex: number;\n    if (key === 'ArrowDown') {\n      nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n    } else if (key === 'ArrowUp') {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n    } else if (key === 'Home') {\n      nextIndex = 0;\n    } else {\n      nextIndex = items.length - 1;\n    }\n    items[nextIndex]?.focus();\n  }\n\n  // P0-01 / P2-01: Get focusable menu items from slotted content.\n  /** @internal */\n  private _getFocusableMenuItems(): HTMLElement[] {\n    const panel = this._panel;\n    if (!panel) return [];\n    const slot = panel.querySelector<HTMLSlotElement>('slot');\n    const assignedNodes = slot?.assignedElements({ flatten: true }) ?? [];\n    const items: HTMLElement[] = [];\n    for (const node of assignedNodes) {\n      if (!(node instanceof HTMLElement)) continue;\n      if (node.matches('[role=\"menuitem\"]')) {\n        items.push(node);\n      } else {\n        node.querySelectorAll<HTMLElement>('[role=\"menuitem\"]').forEach((item) => items.push(item));\n      }\n    }\n    return items;\n  }\n\n  // P0-01: Find the first focusable element in slotted panel content.\n  /** @internal */\n  private _getFirstFocusableItem(): HTMLElement | null {\n    const panel = this._panel;\n    if (!panel) return null;\n    const slot = panel.querySelector<HTMLSlotElement>('slot');\n    const assignedNodes = slot?.assignedElements({ flatten: true }) ?? [];\n    const focusableSelector =\n      '[role=\"menuitem\"], button, [tabindex]:not([tabindex=\"-1\"]), a[href], input, select, textarea';\n    for (const node of assignedNodes) {\n      if (!(node instanceof HTMLElement)) continue;\n      if (node.matches(focusableSelector)) return node;\n      const found = node.querySelector<HTMLElement>(focusableSelector);\n      if (found) return found;\n    }\n    return null;\n  }\n\n  /** @internal */\n  private _handleOutsideClick = (e: MouseEvent): void => {\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._hide();\n    }\n  };\n\n  /** @internal */\n  private _handlePanelClick(e: MouseEvent): void {\n    const target = e.target as HTMLElement;\n    // P2-06: Narrow selector — bare 'li' and 'button' cause spurious hx-select events.\n    const item = target.closest<HTMLElement>('[role=\"menuitem\"], [data-value]');\n    if (!item) return;\n\n    const value = item.dataset['value'] ?? item.getAttribute('value') ?? null;\n    const label = item.textContent?.trim() ?? '';\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: string | null; label: string }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value, label },\n      }),\n    );\n\n    this._hide();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        part=\"trigger\"\n        class=\"trigger-wrapper\"\n        @click=${this._handleTriggerClick}\n        @keydown=${this._handleTriggerKeydown}\n      >\n        <slot name=\"trigger\" @slotchange=${this._onTriggerSlotChange}></slot>\n      </div>\n      <div\n        part=\"panel\"\n        id=${this._panelId}\n        role=\"menu\"\n        aria-hidden=${this._panelVisible ? nothing : 'true'}\n        aria-label=${this.label}\n        class=${this._panelVisible ? 'panel panel--visible' : 'panel'}\n        @click=${this._handlePanelClick}\n      >\n        <slot @slotchange=${this._onPanelSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  // ─── Panel slot validation ───\n\n  /** @internal */\n  private _onPanelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements({ flatten: true });\n    const nonItems = assigned.filter((el) => el.tagName.toLowerCase() !== 'hx-dropdown-item');\n    if (nonItems.length > 0) {\n      devWarn(\n        'hx-dropdown',\n        `Default slot should contain only hx-dropdown-item elements. Found unexpected: ${nonItems.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}. Non-hx-dropdown-item children will be included in keyboard navigation incorrectly.`,\n      );\n    }\n  }\n\n  // ─── ARIA setup for trigger slot ───\n\n  /** @internal */\n  private _onTriggerSlotChange(): void {\n    this._setupTriggerAria();\n  }\n\n  override firstUpdated(): void {\n    this._setupTriggerAria();\n  }\n\n  /** @internal */\n  private _setupTriggerAria(): void {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n    if (!slot) return;\n    const trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n    if (trigger) {\n      // P1-01: Use aria-haspopup=\"menu\" per ARIA 1.1+ / APG Menu Button pattern.\n      trigger.setAttribute('aria-haspopup', 'menu');\n      trigger.setAttribute('aria-expanded', String(this.open));\n      // aria-controls is intentionally omitted: the panel lives in Shadow DOM and\n      // IDREF values cannot be resolved across shadow boundaries by assistive technology.\n      // P2-06: Remove host fallback when a trigger element is present.\n      this.removeAttribute('aria-expanded');\n    } else {\n      // P2-06: Fallback — set aria-expanded on host when trigger slot is empty or unassigned.\n      this.setAttribute('aria-expanded', String(this.open));\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      // Keep aria-expanded in sync\n      const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n      const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n      if (trigger) {\n        trigger.setAttribute('aria-expanded', String(this.open));\n      } else {\n        // P2-06: Fallback — keep host aria-expanded in sync when trigger slot is empty.\n        this.setAttribute('aria-expanded', String(this.open));\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-dropdown': HelixDropdown;\n  }\n}\n"],"names":["helixDropdownStyles","css","HelixDropdown","LitElement","firstFocusable","returnFocus","slot","_a","trigger","reference","panel","floatingPlacement","x","y","computePosition","offset","flip","shift","key","items","currentIndex","nextIndex","assignedNodes","node","item","focusableSelector","found","value","label","html","nothing","nonItems","el","devWarn","changedProperties","tokenStyles","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-field-3MmzJ4kZ.js → hx-field-COM4KvMQ.js}

@@ -119,7 +119,7 @@ const v = p`
 
   .field--error .field__control {
     outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #ef4444));
-    outline-offset: 2px;
+    outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 `;
@@ -135,7 +135,7 @@ function C(e) {
 }
 let r = class extends _ {
   constructor() {
-    super(...arguments), this.label = "", this.required = !1, this.error = "", this.helpText = "", this.disabled = !1, this.hxSize = "md", this.layout = "column", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._fieldId = `hx-field-${++E}`, this._helpTextId = `${this._fieldId}-help`, this._errorId = `${this._fieldId}-error`, this._a11yDescId = `${this._fieldId}-desc`, this._slottedControl = null, this._a11yDescEl = null;
+    super(...arguments), this.label = "", this.required = !1, this.error = "", this.helpText = "", this.disabled = !1, this.size = "md", this.layout = "column", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._fieldId = `hx-field-${++E}`, this._helpTextId = `${this._fieldId}-help`, this._errorId = `${this._fieldId}-error`, this._a11yDescId = `${this._fieldId}-desc`, this._slottedControl = null, this._a11yDescEl = null;
   }
   /** @internal */
   _handleLabelSlotChange(e) {
@@ -160,9 +160,9 @@ let r = class extends _ {
     super.disconnectedCallback(), (e = this._a11yDescEl) == null || e.remove(), this._a11yDescEl = null, this._slottedControl && (this._slottedControl.removeAttribute("aria-label"), this._slottedControl.removeAttribute("aria-required"), this._slottedControl.removeAttribute("aria-invalid"), this._slottedControl.removeAttribute("aria-describedby"), this._slottedControl = null);
   }
   updated(e) {
-    super.updated(e), e.has("hxSize") && (["sm", "md", "lg"].includes(this.hxSize) || m(
+    super.updated(e), e.has("size") && (["sm", "md", "lg"].includes(this.size) || m(
       "hx-field",
-      `Invalid hx-size value: "${this.hxSize}". Expected "sm" | "md" | "lg". Defaulting to "md".`
+      `Invalid hx-size value: "${this.size}". Expected "sm" | "md" | "lg". Defaulting to "md".`
     )), this._syncA11yDescEl(), this._syncSlottedControl();
   }
   /** Creates a visually-hidden span in light DOM used as the ARIA description anchor. */
@@ -222,9 +222,9 @@ let r = class extends _ {
       "field--error": e,
       "field--disabled": this.disabled,
       "field--required": this.required,
-      "field--size-sm": this.hxSize === "sm",
-      "field--size-md": this.hxSize === "md",
-      "field--size-lg": this.hxSize === "lg",
+      "field--size-sm": this.size === "sm",
+      "field--size-md": this.size === "md",
+      "field--size-lg": this.size === "lg",
       "field--layout-inline": this.layout === "inline"
     };
     return n`
@@ -297,7 +297,7 @@ l([
 ], r.prototype, "disabled", 2);
 l([
   o({ type: String, attribute: "hx-size", reflect: !0 })
-], r.prototype, "hxSize", 2);
+], r.prototype, "size", 2);
 l([
   o({ type: String, reflect: !0 })
 ], r.prototype, "layout", 2);
@@ -316,4 +316,4 @@ r = l([
 export {
   r as H
 };
-//# sourceMappingURL=hx-field-3MmzJ4kZ.js.map
+//# sourceMappingURL=hx-field-COM4KvMQ.js.map

package/dist/shared/hx-field-COM4KvMQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-field-COM4KvMQ.js","sources":["../../src/components/hx-field/hx-field.styles.ts","../../src/components/hx-field/hx-field.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFieldStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-field-gap, var(--hx-space-1, 0.25rem));\n    font-family: var(--hx-field-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* ─── Inline Layout ─── */\n\n  .field--layout-inline {\n    flex-direction: row;\n    align-items: baseline;\n    flex-wrap: wrap;\n  }\n\n  .field--layout-inline .field__label-wrapper {\n    display: flex;\n    align-items: baseline;\n    flex-shrink: 0;\n    min-width: 8rem;\n  }\n\n  /* ─── Label ─── */\n\n  .field__label-wrapper {\n    display: contents;\n  }\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #374151));\n    line-height: var(--hx-line-height-normal, 1.5);\n    cursor: pointer;\n  }\n\n  .field__required-marker {\n    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Control Wrapper ─── */\n\n  .field__control {\n    display: block;\n  }\n\n  /* ─── Error Slot Announcer (visually hidden live region) ─── */\n\n  .field__error-slot-announcer {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) .field__label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='lg']) .field__label {\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  :host([hx-size='sm']) .field__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='lg']) .field__help-text {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .field__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #6b7280));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Error State ─── */\n\n  .field--error .field__label {\n    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));\n  }\n\n  .field--error .field__control {\n    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #ef4444));\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, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixFieldStyles } from './hx-field.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Native form control tag names that can receive ARIA attributes. */\nconst FORM_CONTROL_TAGS = new Set(['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON']);\n\nlet _fieldCounter = 0;\n\n/** Returns true if the element is a native form control or a custom element. */\nfunction isFormControl(el: Element): el is HTMLElement {\n  return FORM_CONTROL_TAGS.has(el.tagName) || el.tagName.includes('-');\n}\n\n/**\n * Layout wrapper providing consistent label + input + help text + validation\n * message structure for any form control. Use this when wrapping non-HELiX\n * form controls or native HTML elements in the HELiX form field pattern.\n *\n * This component is NOT form-associated — it is a pure visual layout wrapper.\n *\n * **Light DOM side effect:** This component injects a visually-hidden `<span>`\n * into its light DOM children for ARIA describedby linkage across the shadow\n * DOM boundary. This span has `id=\"${fieldId}-desc\"` and is removed on\n * `disconnectedCallback`. This is an intentional, documented accessibility\n * mechanism.\n *\n * @summary Layout wrapper for label, control, help text, and error message.\n *\n * @tag hx-field\n *\n * @slot - The form control element (native or custom).\n * @slot label - Custom label content (overrides the label property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property).\n * @slot description - Additional descriptive content above the control.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart control - The wrapper around slotted content.\n * @csspart help-text - The help text container.\n * @csspart error-message - The error message container.\n * @csspart required-indicator - The required asterisk span.\n *\n * @cssprop [--hx-field-label-color=var(--hx-color-neutral-700)] - Label color.\n * @cssprop [--hx-field-error-color=var(--hx-color-error-500)] - Error color.\n * @cssprop [--hx-field-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-field-gap=var(--hx-space-1, 0.25rem)] - Gap between field segments.\n * @cssprop [--hx-field-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n */\n@customElement('hx-field')\nexport class HelixField extends LitElement {\n  static override styles = [tokenStyles, helixFieldStyles];\n\n  // ─── Properties ───\n\n  /**\n   * The visible label text for the field.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the field is required. Shows a required indicator on the label.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Error message to display. When set, the field enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the control for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Visual disabled state applied via opacity. Does not affect slotted control\n   * interactivity — set disabled on the slotted control directly.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Size variant controlling label and help text font sizes.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Layout variant. 'column' stacks label above control; 'inline' places them side-by-side.\n   * @attr layout\n   */\n  @property({ type: String, reflect: true })\n  layout: 'column' | 'inline' = 'column';\n\n  // ─── Slot Tracking ───\n\n  /**\n   * Tracks whether any content is assigned to the label slot, used to conditionally render the label property.\n   * @internal\n   */\n  @state() private _hasLabelSlot = false;\n\n  /**\n   * Tracks whether any content is assigned to the error slot, used to toggle error state rendering.\n   * @internal\n   */\n  @state() private _hasErrorSlot = false;\n\n  /**\n   * Tracks whether any content is assigned to the help-text slot, used to toggle help text rendering.\n   * @internal\n   */\n  @state() private _hasHelpSlot = false;\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n  }\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedElements().length > 0;\n  }\n\n  /** @internal */\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedElements().length > 0;\n  }\n\n  // ─── Unique IDs for Accessibility ───\n\n  /**\n   * Unique ID for this field instance, used as a base for all derived accessibility IDs.\n   * @internal\n   */\n  private _fieldId = `hx-field-${++_fieldCounter}`;\n\n  /**\n   * ID for the help text element, allowing aria-describedby to reference it.\n   * @internal\n   */\n  private _helpTextId = `${this._fieldId}-help`;\n\n  /**\n   * ID for the error message element, allowing aria-describedby to reference it.\n   * @internal\n   */\n  private _errorId = `${this._fieldId}-error`;\n\n  /**\n   * ID for the light-DOM description span injected for cross-shadow-root aria-describedby linkage.\n   * @internal\n   */\n  private _a11yDescId = `${this._fieldId}-desc`;\n\n  // ─── A11y: Slotted control tracking + light-DOM description element ───\n\n  /**\n   * The first form control in the default slot. We set aria attributes on this\n   * element to bridge the shadow DOM accessibility boundary.\n   * @internal\n   */\n  private _slottedControl: HTMLElement | null = null;\n\n  /**\n   * A visually-hidden span injected into the host's light DOM (assigned to the\n   * default slot). Because it lives in the same document as the slotted input,\n   * `aria-describedby` can reference its ID without cross-shadow-root IDREF\n   * limitations.\n   *\n   * **Documented side effect:** This element is intentionally injected into the\n   * component's light DOM children. It is invisible to users but present in the\n   * accessibility tree. It is removed in `disconnectedCallback`. Consumers\n   * should not remove or modify this span (identifiable by its `id` ending in\n   * `-desc`).\n   * @internal\n   */\n  private _a11yDescEl: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._ensureA11yDescEl();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._a11yDescEl?.remove();\n    this._a11yDescEl = null;\n    // Remove aria attributes we set on the slotted control\n    if (this._slottedControl) {\n      this._slottedControl.removeAttribute('aria-label');\n      this._slottedControl.removeAttribute('aria-required');\n      this._slottedControl.removeAttribute('aria-invalid');\n      this._slottedControl.removeAttribute('aria-describedby');\n      this._slottedControl = null;\n    }\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n\n    // P2-01: Warn on invalid size values\n    if (changedProps.has('size')) {\n      const validSizes = ['sm', 'md', 'lg'];\n      if (!validSizes.includes(this.size)) {\n        devWarn(\n          'hx-field',\n          `Invalid hx-size value: \"${this.size}\". Expected \"sm\" | \"md\" | \"lg\". Defaulting to \"md\".`,\n        );\n      }\n    }\n\n    this._syncA11yDescEl();\n    this._syncSlottedControl();\n  }\n\n  /** Creates a visually-hidden span in light DOM used as the ARIA description anchor. */\n  /** @internal */\n  private _ensureA11yDescEl(): void {\n    if (this._a11yDescEl) return;\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document === 'undefined') return;\n    const span = document.createElement('span');\n    span.id = this._a11yDescId;\n    // Visually hidden but present in the accessibility tree\n    span.style.cssText =\n      'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n    this.appendChild(span);\n    this._a11yDescEl = span;\n  }\n\n  /** Keeps the light-DOM description span in sync with the current error/help text. */\n  /** @internal */\n  private _syncA11yDescEl(): void {\n    if (!this._a11yDescEl) return;\n    const hasError = !!this.error || this._hasErrorSlot;\n    if (hasError && this.error) {\n      this._a11yDescEl.textContent = this.error;\n    } else if (this.helpText) {\n      this._a11yDescEl.textContent = this.helpText;\n    } else {\n      this._a11yDescEl.textContent = '';\n    }\n  }\n\n  /** Tracks the first form control assigned to the default slot. */\n  /** @internal */\n  private _handleDefaultSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements();\n    this._slottedControl = assigned.find(isFormControl) ?? null;\n    this._syncSlottedControl();\n  }\n\n  /**\n   * Focuses the slotted form control when the shadow DOM label is clicked.\n   * The shadow `<label>` cannot use `for`/`id` to link to a slotted input\n   * across the shadow boundary, so we handle focus programmatically.\n   */\n  /** @internal */\n  private _handleLabelClick(_e: Event): void {\n    this._slottedControl?.focus();\n  }\n\n  /**\n   * Applies ARIA attributes to the slotted form control, bridging the\n   * shadow DOM accessibility boundary.\n   *\n   * - aria-label: associates the field label with the control\n   * - aria-required: communicates required state to AT\n   * - aria-invalid: communicates error state to AT\n   * - aria-describedby: points to the light-DOM description span\n   *\n   * **Skip conditions:**\n   * - `HX-*` elements manage their own ARIA attributes; bridging is skipped.\n   * - Elements with `data-aria-managed` attribute opt out of ARIA mutation;\n   *   bridging is skipped entirely for those elements.\n   */\n  /** @internal */\n  private _syncSlottedControl(): void {\n    const control = this._slottedControl;\n    if (!control) return;\n\n    // hx-* elements manage their own ARIA attributes; skip bridging for them\n    if (control.tagName.startsWith('HX-')) return;\n\n    // Elements that declare data-aria-managed opt out of ARIA mutation\n    if (control.hasAttribute('data-aria-managed')) return;\n\n    const hasError = !!this.error || this._hasErrorSlot;\n    const hasDesc = !!(this.error || this.helpText || this._hasErrorSlot || this._hasHelpSlot);\n\n    // Label association: aria-label bridges the shadow DOM boundary\n    if (this.label && !this._hasLabelSlot) {\n      control.setAttribute('aria-label', this.label);\n    } else {\n      control.removeAttribute('aria-label');\n    }\n\n    // Required state\n    if (this.required) {\n      control.setAttribute('aria-required', 'true');\n    } else {\n      control.removeAttribute('aria-required');\n    }\n\n    // Invalid state\n    if (hasError) {\n      control.setAttribute('aria-invalid', 'true');\n    } else {\n      control.removeAttribute('aria-invalid');\n    }\n\n    // Description (error or help text) via light-DOM span\n    if (hasDesc) {\n      control.setAttribute('aria-describedby', this._a11yDescId);\n    } else {\n      control.removeAttribute('aria-describedby');\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n    const hasHelp = !!this.helpText || this._hasHelpSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      'field--size-sm': this.size === 'sm',\n      'field--size-md': this.size === 'md',\n      'field--size-lg': this.size === 'lg',\n      'field--layout-inline': this.layout === 'inline',\n    };\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <!-- Label -->\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label && !this._hasLabelSlot\n              ? html`\n                  <label part=\"label\" class=\"field__label\" @click=${this._handleLabelClick}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span\n                          part=\"required-indicator\"\n                          class=\"field__required-marker\"\n                          aria-hidden=\"true\"\n                          >*</span\n                        >`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <!-- Description -->\n        <slot name=\"description\"></slot>\n\n        <!-- Control (default slot) -->\n        <div part=\"control\" class=\"field__control\">\n          <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n        </div>\n\n        <!-- Error -->\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${this.error\n            ? html`\n                <div part=\"error-message\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                  ${this.error}\n                </div>\n              `\n            : nothing}\n        </slot>\n\n        <!-- Slotted error live region — ensures slotted error content is announced -->\n        <div aria-live=\"assertive\" class=\"field__error-slot-announcer\"></div>\n\n        <!-- Help text (always in DOM so slot detection works; hidden when no help or error is shown) -->\n        <div\n          part=\"help-text\"\n          class=\"field__help-text\"\n          id=${this._helpTextId}\n          ?hidden=${!hasHelp || hasError}\n        >\n          <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-field': HelixField;\n  }\n}\n"],"names":["helixFieldStyles","css","FORM_CONTROL_TAGS","_fieldCounter","isFormControl","el","HelixField","LitElement","slot","_a","changedProps","devWarn","span","assigned","_e","control","hasError","hasDesc","hasHelp","fieldClasses","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-field-label-Bg-EWvqF.js → hx-field-label-BtZ9H9Yy.js}

@@ -18,10 +18,7 @@ const v = f`
   }
 
   .required-indicator {
-    color: var(
-      --hx-field-label-required-color,
-      var(--hx-color-danger, var(--hx-color-error-text, #b91c1c))
-    );
+    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #b91c1c));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -43,20 +40,20 @@ const v = f`
     border: 0;
   }
 `;
-var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (l, r, t, i) => {
-  for (var e = i > 1 ? void 0 : i ? m(r, t) : r, s = l.length - 1, p; s >= 0; s--)
-    (p = l[s]) && (e = (i ? p(r, t, e) : p(e)) || e);
-  return i && e && b(r, t, e), e;
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (i, r, t, l) => {
+  for (var e = l > 1 ? void 0 : l ? m(r, t) : r, s = i.length - 1, p; s >= 0; s--)
+    (p = i[s]) && (e = (l ? p(r, t, e) : p(e)) || e);
+  return l && e && b(r, t, e), e;
 };
 let o = class extends d {
   constructor() {
     super(...arguments), this.for = "", this.required = !1, this.optional = !1;
   }
   render() {
-    const l = this.required ? a`<span part="required-indicator" class="required-indicator"
+    const i = this.required ? a`<span part="required-indicator" class="required-indicator"
           ><span aria-hidden="true"><slot name="required-indicator">*</slot></span
           ><span class="visually-hidden">required</span></span
-        >` : c, r = this.optional ? a`<span part="optional-indicator" class="optional-indicator">(optional)</span>` : c, t = a`<slot></slot>${l}${r}`;
+        >` : c, r = this.optional ? a`<span part="optional-indicator" class="optional-indicator">(optional)</span>` : c, t = a`<slot></slot>${i}${r}`;
     return this.for ? a`<label part="base" class="label" for=${this.for}>${t}</label>` : a`<span part="base" class="label">${t}</span>`;
   }
 };
@@ -76,4 +73,4 @@ o = n([
 export {
   o as H
 };
-//# sourceMappingURL=hx-field-label-Bg-EWvqF.js.map
+//# sourceMappingURL=hx-field-label-BtZ9H9Yy.js.map

package/dist/shared/hx-field-label-BtZ9H9Yy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-field-label-BtZ9H9Yy.js","sources":["../../src/components/hx-field-label/hx-field-label.styles.ts","../../src/components/hx-field-label/hx-field-label.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFieldLabelStyles = css`\n  :host {\n    display: block;\n  }\n\n  .label {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));\n    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #374151));\n    line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));\n    font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  .required-indicator {\n    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  .optional-indicator {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-normal, 400);\n    color: var(--hx-color-neutral-500, #6b7280);\n  }\n\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixFieldLabelStyles } from './hx-field-label.styles.js';\n\n/**\n * Standardized label for form fields. Used as a consistent sub-component\n * for hx-field and other form field components.\n *\n * ## Label Association\n *\n * **For inputs in light DOM (the typical consumer deployment):** Use\n * `aria-labelledby` pointing to the host element's `id`. The `for` attribute\n * renders a native `<label for=\"...\">` inside shadow DOM, but the HTML spec\n * scopes `for`/`id` lookup to the same tree — a shadow-DOM label cannot\n * associate with a light-DOM input. Example:\n *\n * ```html\n * <hx-field-label id=\"label-email\">Email</hx-field-label>\n * <input id=\"email\" aria-labelledby=\"label-email\" />\n * ```\n *\n * **For inputs in the same shadow root:** The `for` attribute works as\n * expected for direct label association.\n *\n * When `for` is unset, renders a `<span>` that can be referenced via\n * `aria-labelledby` for labeling controls across the shadow DOM boundary.\n *\n * @summary Standardized label for form fields.\n *\n * @tag hx-field-label\n *\n * @slot - Label text content.\n * @slot required-indicator - Custom required marker (defaults to \"*\").\n *\n * @csspart base - The label or span element.\n * @csspart required-indicator - The required indicator wrapper.\n * @csspart optional-indicator - The optional text indicator.\n *\n * @cssprop [--hx-field-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-field-label-required-color=var(--hx-color-danger, var(--hx-color-error-text, #b91c1c))] - Required indicator color.\n * @cssprop [--hx-font-label-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-font-label-weight=var(--hx-font-weight-medium)] - Label font weight.\n * @cssprop [--hx-font-label-line-height=var(--hx-line-height-normal)] - Label line height.\n * @cssprop [--hx-font-label-family=var(--hx-font-family-sans)] - Label font family.\n */\n@customElement('hx-field-label')\nexport class HelixFieldLabel extends LitElement {\n  static override styles = [tokenStyles, helixFieldLabelStyles];\n\n  /**\n   * The ID of the associated form control. When set, renders a native\n   * `<label for=\"...\">` element for direct label association.\n   * @attr for\n   */\n  @property({ type: String })\n  for = '';\n\n  /**\n   * Whether the associated field is required. Shows a required indicator (*).\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the associated field is optional. Shows \"(optional)\" text.\n   * @attr optional\n   */\n  @property({ type: Boolean, reflect: true })\n  optional = false;\n\n  override render() {\n    const requiredIndicator = this.required\n      ? html`<span part=\"required-indicator\" class=\"required-indicator\"\n          ><span aria-hidden=\"true\"><slot name=\"required-indicator\">*</slot></span\n          ><span class=\"visually-hidden\">required</span></span\n        >`\n      : nothing;\n\n    const optionalIndicator = this.optional\n      ? html`<span part=\"optional-indicator\" class=\"optional-indicator\">(optional)</span>`\n      : nothing;\n\n    const content = html`<slot></slot>${requiredIndicator}${optionalIndicator}`;\n\n    if (this.for) {\n      return html`<label part=\"base\" class=\"label\" for=${this.for}>${content}</label>`;\n    }\n\n    return html`<span part=\"base\" class=\"label\">${content}</span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-field-label': HelixFieldLabel;\n  }\n}\n"],"names":["helixFieldLabelStyles","css","HelixFieldLabel","LitElement","requiredIndicator","html","nothing","optionalIndicator","content","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC6C9B,IAAMC,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,MAAM,IAON,KAAA,WAAW,IAOX,KAAA,WAAW;AAAA,EAAA;AAAA,EAEF,SAAS;AAChB,UAAMC,IAAoB,KAAK,WAC3BC;AAAA;AAAA;AAAA,aAIAC,GAEEC,IAAoB,KAAK,WAC3BF,kFACAC,GAEEE,IAAUH,iBAAoBD,CAAiB,GAAGG,CAAiB;AAEzE,WAAI,KAAK,MACAF,yCAA4C,KAAK,GAAG,IAAIG,CAAO,aAGjEH,oCAAuCG,CAAO;AAAA,EACvD;AACF;AA7CaN,EACK,SAAS,CAACO,GAAaT,CAAqB;AAQ5DU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARfT,EASX,WAAA,OAAA,CAAA;AAOAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAf/BT,EAgBX,WAAA,YAAA,CAAA;AAOAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/BT,EAuBX,WAAA,YAAA,CAAA;AAvBWA,IAANQ,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBV,CAAA;"}

package/dist/shared/{hx-file-upload-ByjAgfNy.js → hx-file-upload-DbECypLe.js}

@@ -1,10 +1,10 @@
-import { css as b, LitElement as g, nothing as p, html as f } from "lit";
-import { property as a, state as x, query as _, customElement as y } from "lit/decorators.js";
+import { css as x, LitElement as g, nothing as p, html as c } from "lit";
+import { property as a, state as b, query as _, customElement as y } from "lit/decorators.js";
 import { classMap as w } from "lit/directives/class-map.js";
 import { ifDefined as v } from "lit/directives/if-defined.js";
 import { repeat as $ } from "lit/directives/repeat.js";
 import { tokenStyles as z } from "@helixui/tokens/lit";
-const F = b`
+const F = x`
   :host {
     display: block;
   }
@@ -45,7 +45,7 @@ const F = b`
     align-items: center;
     justify-content: center;
     gap: var(--hx-space-2, 0.5rem);
-    min-height: var(--hx-size-32, 8rem);
+    min-height: var(--hx-space-32, 8rem);
     padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
     border: var(--hx-border-width-thin, 1px) dashed
       var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #ced4da));
@@ -202,7 +202,7 @@ const F = b`
 
   .progress-track {
     width: 100%;
-    height: 4px;
+    height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
     background-color: var(--hx-color-neutral-200, #e9ecef);
     border-radius: var(--hx-border-radius-full, 9999px);
     overflow: hidden;
@@ -246,14 +246,14 @@ const F = b`
     line-height: var(--hx-line-height-normal, 1.5);
   }
 `;
-var k = Object.defineProperty, D = Object.getOwnPropertyDescriptor, o = (e, r, i, s) => {
-  for (var l = s > 1 ? void 0 : s ? D(r, i) : r, d = e.length - 1, n; d >= 0; d--)
-    (n = e[d]) && (l = (s ? n(r, i, l) : n(l)) || l);
-  return s && l && k(r, i, l), l;
+var D = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (e, r, t, s) => {
+  for (var l = s > 1 ? void 0 : s ? k(r, t) : r, d = e.length - 1, n; d >= 0; d--)
+    (n = e[d]) && (l = (s ? n(r, t, l) : n(l)) || l);
+  return s && l && D(r, t, l), l;
 };
-let S = 0, t = class extends g {
+let S = 0, i = class extends g {
   constructor() {
-    super(), this.name = "", this.accept = "", this.maxSize = 0, this.maxFiles = 0, this.multiple = !1, this.label = "", this.disabled = !1, this.error = "", this.labelDropzone = "Drag files here or click to browse", this.labelFileList = "Selected files", this.labelUploadProgress = (e, r) => `Upload progress for ${e}: ${r}%`, this._files = [], this._dragOver = !1, this._hasFileListSlot = !1, this._baseId = `hx-file-upload-${++S}`, this._labelId = `${this._baseId}-label`, this._errorId = `${this._baseId}-error`, this._dropzoneId = `${this._baseId}-dropzone`, this._liveId = `${this._baseId}-live`, this._internals = this.attachInternals();
+    super(), this.name = "", this.accept = "", this.maxSize = 0, this.maxFiles = 0, this.multiple = !1, this.label = "", this.disabled = !1, this.error = "", this.labelDropzone = "Drag files here or click to browse", this.labelFileList = "Selected files", this.labelUploadProgress = (e, r) => `Upload progress for ${e}: ${r}%`, this.labelDragDetected = "File detected. Release to upload.", this._files = [], this._dragOver = !1, this._hasFileListSlot = !1, this._baseId = `hx-file-upload-${++S}`, this._labelId = `${this._baseId}-label`, this._errorId = `${this._baseId}-error`, this._dropzoneId = `${this._baseId}-dropzone`, this._liveId = `${this._baseId}-live`, this._internals = this.attachInternals();
   }
   // ─── Slot Handling ───
   /** @internal */
@@ -286,21 +286,15 @@ let S = 0, t = class extends g {
   reportValidity() {
     return this._internals.reportValidity();
   }
-  /** Called by the form when it resets. */
+  /** @internal */
   formResetCallback() {
     this._files = [], this._internals.setFormValue(null);
   }
-  /** Called when a parent fieldset is disabled/enabled. */
+  /** @internal */
   formDisabledCallback(e) {
     this.disabled = e;
   }
-  /**
-   * Called by the browser to restore form state during back/forward navigation
-   * or autocomplete. File objects cannot be persisted across navigation sessions,
-   * so this callback clears the selection to avoid stale UI state.
-   * @param _state - Previously saved form state (not usable for File restoration).
-   * @param mode - 'restore' for back/forward navigation, 'autocomplete' for autofill.
-   */
+  /** @internal */
   formStateRestoreCallback(e, r) {
     (r === "restore" || r === "autocomplete") && (this._files = [], this._internals.setFormValue(null));
   }
@@ -342,24 +336,24 @@ let S = 0, t = class extends g {
    */
   /** @internal */
   _isAccepted(e) {
-    const r = this.accept.split(",").map((i) => i.trim().toLowerCase());
-    for (const i of r)
-      if (i.startsWith(".")) {
-        if (e.name.toLowerCase().endsWith(i)) return !0;
-      } else if (i.endsWith("/*")) {
-        const s = i.slice(0, -2);
+    const r = this.accept.split(",").map((t) => t.trim().toLowerCase());
+    for (const t of r)
+      if (t.startsWith(".")) {
+        if (e.name.toLowerCase().endsWith(t)) return !0;
+      } else if (t.endsWith("/*")) {
+        const s = t.slice(0, -2);
         if (e.type.toLowerCase().startsWith(s)) return !0;
-      } else if (e.type.toLowerCase() === i) return !0;
+      } else if (e.type.toLowerCase() === t) return !0;
     return !1;
   }
   // ─── File Processing ───
   /** @internal */
   _processFiles(e) {
     if (this.disabled) return;
-    const r = this.multiple ? e : e.slice(0, 1), i = [], s = [], l = [];
+    const r = this.multiple ? e : e.slice(0, 1), t = [], s = [], l = [];
     for (const h of r) {
       const m = this._validateFile(h);
-      m ? (s.push(h), l.push(m)) : i.push(h);
+      m ? (s.push(h), l.push(m)) : t.push(h);
     }
     if (s.length > 0 && this.dispatchEvent(
       new CustomEvent("hx-error", {
@@ -367,32 +361,32 @@ let S = 0, t = class extends g {
         composed: !0,
         detail: { message: l.join(" "), files: s }
       })
-    ), i.length === 0) return;
-    const d = this.multiple ? this._files.length : 0, n = this.maxFiles > 0 ? Math.max(0, this.maxFiles - d) : i.length, c = i.slice(0, n);
-    if (c.length === 0 && this.maxFiles > 0) {
+    ), t.length === 0) return;
+    const d = this.multiple ? this._files.length : 0, n = this.maxFiles > 0 ? Math.max(0, this.maxFiles - d) : t.length, f = t.slice(0, n);
+    if (f.length === 0 && this.maxFiles > 0) {
       this.dispatchEvent(
         new CustomEvent("hx-error", {
           bubbles: !0,
           composed: !0,
           detail: {
             message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? "" : "s"} allowed.`,
-            files: i
+            files: t
           }
         })
       );
       return;
     }
-    if (c.length > 0) {
-      const h = c.map((m) => ({ file: m, progress: 0 }));
+    if (f.length > 0) {
+      const h = f.map((m) => ({ file: m, progress: 0 }));
       this.multiple ? this._files = [...this._files, ...h] : this._files = h, this.dispatchEvent(
         new CustomEvent("hx-upload", {
           bubbles: !0,
           composed: !0,
-          detail: { files: c }
+          detail: { files: f }
         })
       );
     }
-    const u = i.slice(n);
+    const u = t.slice(n);
     u.length > 0 && this.maxFiles > 0 && this.dispatchEvent(
       new CustomEvent("hx-error", {
         bubbles: !0,
@@ -412,9 +406,9 @@ let S = 0, t = class extends g {
    */
   setProgress(e, r) {
     if (e < 0 || e >= this._files.length) return;
-    const i = Math.max(0, Math.min(100, r));
+    const t = Math.max(0, Math.min(100, r));
     this._files = this._files.map(
-      (s, l) => l === e ? { ...s, progress: i } : s
+      (s, l) => l === e ? { ...s, progress: t } : s
     );
   }
   /**
@@ -433,16 +427,16 @@ let S = 0, t = class extends g {
     var s;
     const r = e.relatedTarget;
     if (r && this.contains(r)) return;
-    const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".dropzone");
-    i && i.contains(r) || (this._dragOver = !1);
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".dropzone");
+    t && t.contains(r) || (this._dragOver = !1);
   }
   /** @internal */
   _handleDrop(e) {
     if (e.preventDefault(), this._dragOver = !1, this.disabled) return;
     const r = e.dataTransfer;
     if (!r) return;
-    const i = Array.from(r.files);
-    i.length !== 0 && this._processFiles(i);
+    const t = Array.from(r.files);
+    t.length !== 0 && this._processFiles(t);
   }
   // ─── Click / Keyboard Handlers ───
   /** @internal */
@@ -459,8 +453,8 @@ let S = 0, t = class extends g {
   _handleFileInputChange(e) {
     const r = e.target;
     if (!r.files || r.files.length === 0) return;
-    const i = Array.from(r.files);
-    r.value = "", this._processFiles(i);
+    const t = Array.from(r.files);
+    r.value = "", this._processFiles(t);
   }
   // ─── Remove Handler ───
   /** @internal */
@@ -468,12 +462,12 @@ let S = 0, t = class extends g {
     if (this.disabled) return;
     const r = this._files[e];
     if (!r) return;
-    const i = r.file;
+    const t = r.file;
     this._files = this._files.filter((s, l) => l !== e), this.dispatchEvent(
       new CustomEvent("hx-remove", {
         bubbles: !0,
         composed: !0,
-        detail: { file: i, index: e }
+        detail: { file: t, index: e }
       })
     );
   }
@@ -485,12 +479,12 @@ let S = 0, t = class extends g {
   // ─── Render Helpers ───
   /** @internal */
   _renderFileList() {
-    return this._hasFileListSlot ? p : this._files.length === 0 ? p : f`
+    return this._hasFileListSlot ? p : this._files.length === 0 ? p : c`
       <ul part="file-list" class="file-list" aria-label=${this.labelFileList}>
         ${$(
       this._files,
       (e) => e.file.name + e.file.size,
-      (e, r) => f`
+      (e, r) => c`
             <li part="file-item" class="file-item">
               <div class="file-item__row">
                 <span class="file-item__name" title=${e.file.name}> ${e.file.name} </span>
@@ -545,10 +539,10 @@ let S = 0, t = class extends g {
       dropzone: !0,
       "dropzone--drag-over": this._dragOver,
       "dropzone--error": e
-    }, i = this.label ? `${this.label} — ${this.labelDropzone}` : this.labelDropzone;
-    return f`
+    }, t = this.label ? `${this.label} — ${this.labelDropzone}` : this.labelDropzone;
+    return c`
       <div class="field">
-        ${this.label ? f`
+        ${this.label ? c`
               <label part="label" class="field__label" id=${this._labelId} for=${this._dropzoneId}>
                 ${this.label}
               </label>
@@ -560,7 +554,7 @@ let S = 0, t = class extends g {
           id=${this._dropzoneId}
           role="button"
           tabindex=${this.disabled ? "-1" : "0"}
-          aria-label=${v(this.label ? void 0 : i)}
+          aria-label=${v(this.label ? void 0 : t)}
           aria-labelledby=${v(this.label ? this._labelId : void 0)}
           aria-disabled=${this.disabled ? "true" : p}
           aria-describedby=${v(e ? this._errorId : void 0)}
@@ -587,76 +581,73 @@ let S = 0, t = class extends g {
         <slot name="file-list" @slotchange=${this._handleFileListSlotChange}></slot>
 
         ${this._renderFileList()}
-        ${e ? f`
-              <div
-                part="error"
-                class="field__error"
-                id=${this._errorId}
-                role="alert"
-                aria-live="polite"
-              >
+        ${e ? c`
+              <div part="error" class="field__error" id=${this._errorId} role="alert">
                 ${this.error}
               </div>
             ` : p}
 
-        <div id=${this._liveId} class="sr-only" aria-live="assertive" aria-atomic="true">
-          ${this._dragOver ? "File detected. Release to upload." : ""}
+        <div id=${this._liveId} class="sr-only" aria-live="polite" aria-atomic="true">
+          ${this._dragOver ? this.labelDragDetected : ""}
         </div>
       </div>
     `;
   }
 };
-t.styles = [z, F];
-t.formAssociated = !0;
+i.styles = [z, F];
+i.formAssociated = !0;
 o([
   a({ type: String })
-], t.prototype, "name", 2);
+], i.prototype, "name", 2);
 o([
   a({ type: String })
-], t.prototype, "accept", 2);
+], i.prototype, "accept", 2);
 o([
   a({ type: Number, attribute: "max-size" })
-], t.prototype, "maxSize", 2);
+], i.prototype, "maxSize", 2);
 o([
   a({ type: Number, attribute: "max-files" })
-], t.prototype, "maxFiles", 2);
+], i.prototype, "maxFiles", 2);
 o([
   a({ type: Boolean })
-], t.prototype, "multiple", 2);
+], i.prototype, "multiple", 2);
 o([
   a({ type: String })
-], t.prototype, "label", 2);
+], i.prototype, "label", 2);
 o([
   a({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
+], i.prototype, "disabled", 2);
 o([
   a({ type: String })
-], t.prototype, "error", 2);
+], i.prototype, "error", 2);
 o([
   a({ type: String, attribute: "label-dropzone" })
-], t.prototype, "labelDropzone", 2);
+], i.prototype, "labelDropzone", 2);
 o([
   a({ type: String, attribute: "label-file-list" })
-], t.prototype, "labelFileList", 2);
+], i.prototype, "labelFileList", 2);
 o([
   a({ attribute: !1 })
-], t.prototype, "labelUploadProgress", 2);
+], i.prototype, "labelUploadProgress", 2);
+o([
+  a({ attribute: "label-drag-detected" })
+], i.prototype, "labelDragDetected", 2);
 o([
-  x()
-], t.prototype, "_files", 2);
+  b()
+], i.prototype, "_files", 2);
 o([
-  x()
-], t.prototype, "_dragOver", 2);
+  b()
+], i.prototype, "_dragOver", 2);
 o([
-  x()
-], t.prototype, "_hasFileListSlot", 2);
+  b()
+], i.prototype, "_hasFileListSlot", 2);
 o([
   _(".file-input")
-], t.prototype, "_fileInput", 2);
-t = o([
+], i.prototype, "_fileInput", 2);
+i = o([
   y("hx-file-upload")
-], t);
+], i);
 export {
-  t as H
+  i as H
 };
-//# sourceMappingURL=hx-file-upload-ByjAgfNy.js.map
+//# sourceMappingURL=hx-file-upload-DbECypLe.js.map