@helixui/library 1.0.0 → 1.0.1

package/dist/shared/{hx-dropdown-DnjLnkTj.js → hx-dropdown-7cfowTWv.js}

@@ -49,10 +49,10 @@ const w = h`
     }
   }
 `;
-var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? k(t, i) : t, o = e.length - 1, d; o >= 0; o--)
-    (d = e[o]) && (s = (n ? d(t, i, s) : d(s)) || s);
-  return n && s && x(t, i, s), s;
+var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, n, i) => {
+  for (var s = i > 1 ? void 0 : i ? k(t, n) : t, o = e.length - 1, d; o >= 0; o--)
+    (d = e[o]) && (s = (i ? d(t, n, s) : d(s)) || s);
+  return i && s && x(t, n, s), s;
 };
 let r = class extends c {
   constructor() {
@@ -78,21 +78,21 @@ let r = class extends c {
   _hide(e = !0) {
     var t;
     if (this.open && (this.open = !1, this._panelVisible = !1, document.removeEventListener("click", this._handleOutsideClick), this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })), e)) {
-      const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="trigger"]'), n = i == null ? void 0 : i.assignedElements()[0];
-      n == null || n.focus();
+      const n = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="trigger"]'), i = n == null ? void 0 : n.assignedElements()[0];
+      i == null || i.focus();
     }
   }
   // ─── Positioning ───
   async _updatePosition() {
     const e = this._triggerWrapper, t = this._panel;
     if (!e || !t) return;
-    const i = this.placement.replace(/^start$/, "left").replace(/^end$/, "right"), { x: n, y: s } = await b(e, t, {
-      placement: i,
+    const n = this.placement.replace(/^start$/, "left").replace(/^end$/, "right"), { x: i, y: s } = await b(e, t, {
+      placement: n,
       strategy: "fixed",
       middleware: [_(this.distance), v(), y({ padding: 8 })]
     });
     Object.assign(t.style, {
-      left: `${n}px`,
+      left: `${i}px`,
       top: `${s}px`
     });
   }
@@ -111,28 +111,28 @@ let r = class extends c {
     var s;
     const t = this._getFocusableMenuItems();
     if (t.length === 0) return;
-    const i = t.indexOf(document.activeElement);
-    let n;
-    e === "ArrowDown" ? n = i < t.length - 1 ? i + 1 : 0 : e === "ArrowUp" ? n = i > 0 ? i - 1 : t.length - 1 : e === "Home" ? n = 0 : n = t.length - 1, (s = t[n]) == null || s.focus();
+    const n = t.indexOf(document.activeElement);
+    let i;
+    e === "ArrowDown" ? i = n < t.length - 1 ? n + 1 : 0 : e === "ArrowUp" ? i = n > 0 ? n - 1 : t.length - 1 : e === "Home" ? i = 0 : i = t.length - 1, (s = t[i]) == null || s.focus();
   }
   // P0-01 / P2-01: Get focusable menu items from slotted content.
   _getFocusableMenuItems() {
     const e = this._panel;
     if (!e) return [];
-    const t = e.querySelector("slot"), i = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], n = [];
-    for (const s of i)
-      s instanceof HTMLElement && (s.matches('[role="menuitem"]') ? n.push(s) : s.querySelectorAll('[role="menuitem"]').forEach((o) => n.push(o)));
-    return n;
+    const t = e.querySelector("slot"), n = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], i = [];
+    for (const s of n)
+      s instanceof HTMLElement && (s.matches('[role="menuitem"]') ? i.push(s) : s.querySelectorAll('[role="menuitem"]').forEach((o) => i.push(o)));
+    return i;
   }
   // P0-01: Find the first focusable element in slotted panel content.
   _getFirstFocusableItem() {
     const e = this._panel;
     if (!e) return null;
-    const t = e.querySelector("slot"), i = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], n = '[role="menuitem"], button, [tabindex]:not([tabindex="-1"]), a[href], input, select, textarea';
-    for (const s of i) {
+    const t = e.querySelector("slot"), n = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], i = '[role="menuitem"], button, [tabindex]:not([tabindex="-1"]), a[href], input, select, textarea';
+    for (const s of n) {
       if (!(s instanceof HTMLElement)) continue;
-      if (s.matches(n)) return s;
-      const o = s.querySelector(n);
+      if (s.matches(i)) return s;
+      const o = s.querySelector(i);
       if (o) return o;
     }
     return null;
@@ -142,14 +142,14 @@ let r = class extends c {
   }
   _handlePanelClick(e) {
     var o;
-    const i = e.target.closest('[role="menuitem"], [data-value]');
-    if (!i) return;
-    const n = i.dataset.value ?? i.getAttribute("value") ?? null, s = ((o = i.textContent) == null ? void 0 : o.trim()) ?? "";
+    const n = e.target.closest('[role="menuitem"], [data-value]');
+    if (!n) return;
+    const i = n.dataset.value ?? n.getAttribute("value") ?? null, s = ((o = n.textContent) == null ? void 0 : o.trim()) ?? "";
     this.dispatchEvent(
       new CustomEvent("hx-select", {
         bubbles: !0,
         composed: !0,
-        detail: { value: n, label: s }
+        detail: { value: i, label: s }
       })
     ), this._hide();
   }
@@ -183,17 +183,17 @@ let r = class extends c {
     this._setupTriggerAria();
   }
   _setupTriggerAria() {
-    var i;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector('slot[name="trigger"]');
+    var n;
+    const e = (n = this.shadowRoot) == null ? void 0 : n.querySelector('slot[name="trigger"]');
     if (!e) return;
     const t = e.assignedElements()[0];
-    t ? (t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", String(this.open)), t.setAttribute("aria-controls", this._panelId), this.removeAttribute("aria-expanded")) : this.setAttribute("aria-expanded", String(this.open));
+    t ? (t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", String(this.open)), this.removeAttribute("aria-expanded")) : this.setAttribute("aria-expanded", String(this.open));
   }
   updated(e) {
     var t;
     if (e.has("open")) {
-      const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="trigger"]'), n = i == null ? void 0 : i.assignedElements()[0];
-      n ? n.setAttribute("aria-expanded", String(this.open)) : this.setAttribute("aria-expanded", String(this.open));
+      const n = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="trigger"]'), i = n == null ? void 0 : n.assignedElements()[0];
+      i ? i.setAttribute("aria-expanded", String(this.open)) : this.setAttribute("aria-expanded", String(this.open));
     }
   }
 };
@@ -226,4 +226,4 @@ r = a([
 export {
   r as H
 };
-//# sourceMappingURL=hx-dropdown-DnjLnkTj.js.map
+//# sourceMappingURL=hx-dropdown-7cfowTWv.js.map

package/dist/shared/hx-dropdown-7cfowTWv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-dropdown-7cfowTWv.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: 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 0.15s ease,\n      visibility 0.15s 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 } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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: DropdownPlacement = 'bottom-start';\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  // 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._handleOutsideClick = this._handleOutsideClick.bind(this);\n    this._handleKeydown = this._handleKeydown.bind(this);\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n    document.removeEventListener('click', this._handleOutsideClick);\n  }\n\n  // ─── Open/Close ───\n\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    document.addEventListener('click', this._handleOutsideClick, { capture: true });\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('hx-show', { bubbles: true, composed: true }));\n  }\n\n  // P2-02: returnFocus=true only on Escape; Tab should let focus advance naturally.\n  private _hide(returnFocus = true): void {\n    if (!this.open) return;\n    this.open = false;\n    this._panelVisible = false;\n    document.removeEventListener('click', this._handleOutsideClick);\n    this.dispatchEvent(new CustomEvent('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  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  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  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  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  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  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  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  private _handleOutsideClick(e: MouseEvent): void {\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._hide();\n    }\n  }\n\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('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        aria-hidden=${this._panelVisible ? 'false' : 'true'}\n        class=${this._panelVisible ? 'panel panel--visible' : 'panel'}\n        @click=${this._handlePanelClick}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  // ─── ARIA setup for trigger slot ───\n\n  private _onTriggerSlotChange(): void {\n    this._setupTriggerAria();\n  }\n\n  override firstUpdated(): void {\n    this._setupTriggerAria();\n  }\n\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: Map<string, unknown>): void {\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","changedProperties","tokenStyles","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-file-upload-CUORgnKc.js → hx-file-upload-9HbONfqt.js}

@@ -1,5 +1,5 @@
 import { css as b, LitElement as g, nothing as p, html as c } from "lit";
-import { property as l, state as x, query as _, customElement as y } from "lit/decorators.js";
+import { property as a, state as x, 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";
@@ -63,14 +63,16 @@ const F = b`
   }
 
   .dropzone:focus-visible {
-    outline: none;
-    border-color: var(--hx-focus-ring-color, #2563eb);
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      color-mix(
-        in srgb,
-        var(--hx-focus-ring-color, #2563eb) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-        transparent
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-file-upload-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
       );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-color: var(
+      --hx-file-upload-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-500))
+    );
   }
 
   .dropzone--drag-over {
@@ -182,8 +184,12 @@ const F = b`
   }
 
   .file-item__remove:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
-    outline-offset: 2px;
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-file-upload-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -238,9 +244,9 @@ const F = b`
     line-height: var(--hx-line-height-normal, 1.5);
   }
 `;
-var k = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (e, r, i, t) => {
-  for (var o = t > 1 ? void 0 : t ? D(r, i) : r, h = e.length - 1, n; h >= 0; h--)
-    (n = e[h]) && (o = (t ? n(r, i, o) : n(o)) || o);
+var k = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (e, r, i, t) => {
+  for (var o = t > 1 ? void 0 : t ? D(r, i) : r, d = e.length - 1, n; d >= 0; d--)
+    (n = e[d]) && (o = (t ? n(r, i, o) : n(o)) || o);
   return t && o && k(r, i, o), o;
 };
 let I = 0, s = class extends g {
@@ -330,9 +336,9 @@ let I = 0, s = class extends g {
   _processFiles(e) {
     if (this.disabled) return;
     const r = this.multiple ? e : e.slice(0, 1), i = [], t = [], o = [];
-    for (const d of r) {
-      const m = this._validateFile(d);
-      m ? (t.push(d), o.push(m)) : i.push(d);
+    for (const h of r) {
+      const m = this._validateFile(h);
+      m ? (t.push(h), o.push(m)) : i.push(h);
     }
     if (t.length > 0 && this.dispatchEvent(
       new CustomEvent("hx-error", {
@@ -341,7 +347,7 @@ let I = 0, s = class extends g {
         detail: { message: o.join(" "), files: t }
       })
     ), i.length === 0) return;
-    const h = this.multiple ? this._files.length : 0, n = this.maxFiles > 0 ? Math.max(0, this.maxFiles - h) : i.length, f = i.slice(0, n);
+    const d = this.multiple ? this._files.length : 0, n = this.maxFiles > 0 ? Math.max(0, this.maxFiles - d) : i.length, f = i.slice(0, n);
     if (f.length === 0 && this.maxFiles > 0) {
       this.dispatchEvent(
         new CustomEvent("hx-error", {
@@ -356,8 +362,8 @@ let I = 0, s = class extends g {
       return;
     }
     if (f.length > 0) {
-      const d = f.map((m) => ({ file: m, progress: 0 }));
-      this.multiple ? this._files = [...this._files, ...d] : this._files = d, this.dispatchEvent(
+      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,
@@ -569,49 +575,49 @@ let I = 0, s = class extends g {
 };
 s.styles = [z, F];
 s.formAssociated = !0;
-a([
-  l({ type: String })
+l([
+  a({ type: String })
 ], s.prototype, "name", 2);
-a([
-  l({ type: String })
+l([
+  a({ type: String })
 ], s.prototype, "accept", 2);
-a([
-  l({ type: Number, attribute: "max-size" })
+l([
+  a({ type: Number, attribute: "max-size" })
 ], s.prototype, "maxSize", 2);
-a([
-  l({ type: Number, attribute: "max-files" })
+l([
+  a({ type: Number, attribute: "max-files" })
 ], s.prototype, "maxFiles", 2);
-a([
-  l({ type: Boolean })
+l([
+  a({ type: Boolean })
 ], s.prototype, "multiple", 2);
-a([
-  l({ type: String })
+l([
+  a({ type: String })
 ], s.prototype, "label", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
+l([
+  a({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
-a([
-  l({ type: String })
+l([
+  a({ type: String })
 ], s.prototype, "error", 2);
-a([
-  l({ type: String, attribute: "label-dropzone" })
+l([
+  a({ type: String, attribute: "label-dropzone" })
 ], s.prototype, "labelDropzone", 2);
-a([
+l([
   x()
 ], s.prototype, "_files", 2);
-a([
+l([
   x()
 ], s.prototype, "_dragOver", 2);
-a([
+l([
   x()
 ], s.prototype, "_hasFileListSlot", 2);
-a([
+l([
   _(".file-input")
 ], s.prototype, "_fileInput", 2);
-s = a([
+s = l([
   y("hx-file-upload")
 ], s);
 export {
   s as H
 };
-//# sourceMappingURL=hx-file-upload-CUORgnKc.js.map
+//# sourceMappingURL=hx-file-upload-9HbONfqt.js.map

package/dist/shared/hx-file-upload-9HbONfqt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-file-upload-9HbONfqt.js","sources":["../../src/components/hx-file-upload/hx-file-upload.styles.ts","../../src/components/hx-file-upload/hx-file-upload.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFileUploadStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Label ─── */\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-color-neutral-700, #343a40);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Dropzone ─── */\n\n  .dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-size-32, 8rem);\n    padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);\n    border: var(--hx-border-width-thin, 1px) dashed\n      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8f9fa));\n    cursor: pointer;\n    text-align: center;\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    color: var(--hx-color-neutral-600, #495057);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .dropzone:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-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    border-color: var(\n      --hx-file-upload-focus-ring-color,\n      var(--hx-focus-ring-color, var(--hx-color-primary-500))\n    );\n  }\n\n  .dropzone--drag-over {\n    border-color: var(--hx-color-primary-500, #2563eb);\n    background-color: var(\n      --hx-file-upload-dropzone-active-bg,\n      color-mix(\n        in srgb,\n        var(--hx-color-primary-500, #2563eb) 8%,\n        var(--hx-color-neutral-0, #ffffff)\n      )\n    );\n    border-style: solid;\n  }\n\n  .dropzone--error {\n    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dropzone {\n      transition: none;\n    }\n  }\n\n  /* ─── Hidden file input ─── */\n\n  .file-input {\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-width: 0;\n  }\n\n  /* ─── File list ─── */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .file-list:empty {\n    display: none;\n  }\n\n  /* ─── File item ─── */\n\n  .file-item {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e9ecef);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .file-item__row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .file-item__name {\n    flex: 1;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-neutral-800, #212529);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .file-item__size {\n    flex-shrink: 0;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-neutral-500, #6c757d);\n  }\n\n  .file-item__remove {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--hx-space-1, 0.25rem);\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-color-neutral-500, #6c757d);\n    cursor: pointer;\n    line-height: 1;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .file-item__remove:hover {\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));\n    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc3545) 8%, transparent);\n  }\n\n  .file-item__remove:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-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    .file-item__remove {\n      transition: none;\n    }\n  }\n\n  /* ─── Progress bar ─── */\n\n  .progress-track {\n    width: 100%;\n    height: 4px;\n    background-color: var(--hx-color-neutral-200, #e9ecef);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    overflow: hidden;\n  }\n\n  .progress-bar {\n    height: 100%;\n    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));\n    border-radius: inherit;\n    transition: width var(--hx-transition-fast, 150ms ease);\n    width: 0%;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar {\n      transition: none;\n    }\n  }\n\n  /* ─── Screen-reader only utility ─── */\n\n  .sr-only {\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-width: 0;\n  }\n\n  /* ─── Error message ─── */\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixFileUploadStyles } from './hx-file-upload.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxFileUploadIdCounter = 0;\n\ninterface FileEntry {\n  file: File;\n  progress: number;\n}\n\n/**\n * A drag-and-drop file upload component with client-side validation,\n * file list management, per-file progress, and native form association.\n *\n * @summary Form-associated file upload dropzone with drag-and-drop, validation, and progress tracking.\n *\n * @tag hx-file-upload\n *\n * @slot - Default dropzone content. Replaces the built-in \"Drag files here or click to browse\" prompt.\n * @slot file-list - Custom file list display. When provided, the built-in file list is hidden.\n *\n * @fires {CustomEvent<{files: File[]}>} hx-upload - Dispatched when valid files are selected via drag-and-drop or the file picker.\n * @fires {CustomEvent<{file: File, index: number}>} hx-remove - Dispatched when a file is removed from the list.\n * @fires {CustomEvent<{message: string, files: File[]}>} hx-error - Dispatched when file validation fails (type or size constraint).\n *\n * @csspart dropzone - The drag-and-drop target area.\n * @csspart file-list - The container wrapping the list of selected files.\n * @csspart file-item - An individual file entry in the list.\n * @csspart progress - The progress bar track for a file item.\n * @csspart label - The visible label element.\n * @csspart error - The error message container below the dropzone.\n *\n * @cssprop [--hx-file-upload-dropzone-bg=var(--hx-color-neutral-50)] - Dropzone background color.\n * @cssprop [--hx-file-upload-dropzone-border-color=var(--hx-color-neutral-300)] - Dropzone border color.\n * @cssprop [--hx-file-upload-dropzone-border-radius=var(--hx-border-radius-lg)] - Dropzone border radius.\n * @cssprop [--hx-file-upload-dropzone-active-bg] - Dropzone background when a file is dragged over.\n * @cssprop [--hx-file-upload-progress-color=var(--hx-color-primary-500)] - Progress bar fill color.\n * @cssprop [--hx-file-upload-error-color=var(--hx-color-error-500)] - Error state and remove-button hover color.\n */\n@customElement('hx-file-upload')\nexport class HelixFileUpload extends LitElement {\n  static override styles = [tokenStyles, helixFileUploadStyles];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static formAssociated = true;\n\n  /** Holds the ElementInternals instance used for form value and validity management. @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The form field name used during form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Accepted file types as a comma-separated list of MIME types or extensions.\n   * Mirrors the native `<input type=\"file\" accept>` attribute.\n   * @attr accept\n   */\n  @property({ type: String })\n  accept = '';\n\n  /**\n   * Maximum allowed file size in bytes. 0 means unlimited.\n   * @attr max-size\n   */\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize = 0;\n\n  /**\n   * Maximum number of files that can be selected. 0 means unlimited.\n   * @attr max-files\n   */\n  @property({ type: Number, attribute: 'max-files' })\n  maxFiles = 0;\n\n  /**\n   * Whether multiple files may be selected at once.\n   * @attr multiple\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Visible label text for the dropzone.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the component is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message displayed below the dropzone. Also puts the dropzone in an error visual state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Instructional text shown in the dropzone when no custom slot content is provided.\n   * Also used as the accessible label for the dropzone.\n   * @attr label-dropzone\n   */\n  @property({ type: String, attribute: 'label-dropzone' })\n  labelDropzone = 'Drag files here or click to browse';\n\n  // ─── Internal State ───\n\n  /** The list of currently selected file entries, each with a file reference and upload progress. @internal */\n  @state() private _files: FileEntry[] = [];\n  /** Whether a file is currently being dragged over the dropzone. @internal */\n  @state() private _dragOver = false;\n  /** Whether the named file-list slot contains projected content. @internal */\n  @state() private _hasFileListSlot = false;\n\n  // ─── Internal References ───\n\n  /** Reference to the hidden native file input element used to open the OS file picker. @internal */\n  @query('.file-input')\n  private _fileInput: HTMLInputElement | null | undefined;\n\n  // ─── Stable IDs ───\n\n  private readonly _baseId = `hx-file-upload-${++_hxFileUploadIdCounter}`;\n  private readonly _labelId = `${this._baseId}-label`;\n  private readonly _errorId = `${this._baseId}-error`;\n  private readonly _dropzoneId = `${this._baseId}-dropzone`;\n  private readonly _liveId = `${this._baseId}-live`;\n\n  // ─── Slot Handling ───\n\n  private _handleFileListSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFileListSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_files') || changedProperties.has('name')) {\n      this._syncFormValue();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the component satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** Called by the form when it resets. */\n  formResetCallback(): void {\n    this._files = [];\n    this._internals.setFormValue(null);\n  }\n\n  private _syncFormValue(): void {\n    if (this._files.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n\n    if (this._files.length === 1) {\n      // Single file — pass directly as File (accepted by setFormValue)\n      const firstEntry = this._files[0];\n      if (firstEntry) {\n        this._internals.setFormValue(firstEntry.file);\n      }\n      return;\n    }\n\n    // Multiple files — use FormData so all files are submitted under the same name\n    const formData = new FormData();\n    for (const entry of this._files) {\n      formData.append(this.name, entry.file, entry.file.name);\n    }\n    this._internals.setFormValue(formData);\n  }\n\n  // ─── Validation ───\n\n  /**\n   * Validates a file against `accept` and `maxSize` constraints.\n   * Returns null on success, or an error message string on failure.\n   */\n  private _validateFile(file: File): string | null {\n    if (this.accept) {\n      const accepted = this._isAccepted(file);\n      if (!accepted) {\n        return `\"${file.name}\" has an unsupported file type. Accepted types: ${this.accept}`;\n      }\n    }\n\n    if (this.maxSize > 0 && file.size > this.maxSize) {\n      const maxMb = (this.maxSize / (1024 * 1024)).toFixed(1);\n      return `\"${file.name}\" exceeds the maximum size of ${maxMb} MB.`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Checks whether a file is accepted given the `accept` attribute value.\n   * Handles MIME types (e.g. \"image/png\"), wildcard MIME types (e.g. \"image/*\"),\n   * and extensions (e.g. \".pdf\").\n   */\n  private _isAccepted(file: File): boolean {\n    const tokens = this.accept.split(',').map((t) => t.trim().toLowerCase());\n\n    for (const token of tokens) {\n      if (token.startsWith('.')) {\n        // Extension match\n        if (file.name.toLowerCase().endsWith(token)) return true;\n      } else if (token.endsWith('/*')) {\n        // Wildcard MIME type e.g. \"image/*\"\n        const baseType = token.slice(0, -2);\n        if (file.type.toLowerCase().startsWith(baseType)) return true;\n      } else {\n        // Exact MIME type\n        if (file.type.toLowerCase() === token) return true;\n      }\n    }\n\n    return false;\n  }\n\n  // ─── File Processing ───\n\n  private _processFiles(rawFiles: File[]): void {\n    if (this.disabled) return;\n\n    const candidateFiles = this.multiple ? rawFiles : rawFiles.slice(0, 1);\n    const validFiles: File[] = [];\n    const invalidFiles: File[] = [];\n    const errorMessages: string[] = [];\n\n    for (const file of candidateFiles) {\n      const validationError = this._validateFile(file);\n      if (validationError) {\n        invalidFiles.push(file);\n        errorMessages.push(validationError);\n      } else {\n        validFiles.push(file);\n      }\n    }\n\n    if (invalidFiles.length > 0) {\n      this.dispatchEvent(\n        new CustomEvent('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: { message: errorMessages.join(' '), files: invalidFiles },\n        }),\n      );\n    }\n\n    if (validFiles.length === 0) return;\n\n    // Enforce maxFiles limit (only in multiple mode — single-file mode always replaces)\n    const currentCount = this.multiple ? this._files.length : 0;\n    const capacity =\n      this.maxFiles > 0 ? Math.max(0, this.maxFiles - currentCount) : validFiles.length;\n    const allowedFiles = validFiles.slice(0, capacity);\n\n    if (allowedFiles.length === 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed.`,\n            files: validFiles,\n          },\n        }),\n      );\n      return;\n    }\n\n    if (allowedFiles.length > 0) {\n      const newEntries: FileEntry[] = allowedFiles.map((file) => ({ file, progress: 0 }));\n\n      if (this.multiple) {\n        this._files = [...this._files, ...newEntries];\n      } else {\n        this._files = newEntries;\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('hx-upload', {\n          bubbles: true,\n          composed: true,\n          detail: { files: allowedFiles },\n        }),\n      );\n    }\n\n    // If remaining valid files were cut by maxFiles, report that too\n    const overflow = validFiles.slice(capacity);\n    if (overflow.length > 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed. ${overflow.length} file${overflow.length === 1 ? ' was' : 's were'} not added.`,\n            files: overflow,\n          },\n        }),\n      );\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /**\n   * Sets the upload progress for a file at the given index.\n   * @param index - Zero-based index into the current file list.\n   * @param percent - Progress percentage from 0 to 100.\n   */\n  setProgress(index: number, percent: number): void {\n    if (index < 0 || index >= this._files.length) return;\n    const clamped = Math.max(0, Math.min(100, percent));\n    this._files = this._files.map((entry, i) =>\n      i === index ? { ...entry, progress: clamped } : entry,\n    );\n  }\n\n  /**\n   * Returns a read-only copy of the currently selected files.\n   */\n  get files(): File[] {\n    return this._files.map((e) => e.file);\n  }\n\n  // ─── Drag and Drop Handlers ───\n\n  private _handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n    this._dragOver = true;\n  }\n\n  private _handleDragLeave(e: DragEvent): void {\n    // Only clear drag state when leaving the dropzone entirely\n    const target = e.relatedTarget as Node | null;\n    if (target && this.contains(target)) return;\n    const dropzone = this.shadowRoot?.querySelector('.dropzone');\n    if (dropzone && dropzone.contains(target)) return;\n    this._dragOver = false;\n  }\n\n  private _handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    this._dragOver = false;\n    if (this.disabled) return;\n\n    const dt = e.dataTransfer;\n    if (!dt) return;\n\n    const rawFiles = Array.from(dt.files);\n    if (rawFiles.length === 0) return;\n\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Click / Keyboard Handlers ───\n\n  private _handleDropzoneClick(): void {\n    if (this.disabled) return;\n    this._fileInput?.click();\n  }\n\n  private _handleDropzoneKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._fileInput?.click();\n    }\n  }\n\n  private _handleFileInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    if (!input.files || input.files.length === 0) return;\n\n    const rawFiles = Array.from(input.files);\n    // Reset the input so the same file can be re-selected after removal\n    input.value = '';\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Remove Handler ───\n\n  private _handleRemove(index: number): void {\n    if (this.disabled) return;\n    const entry = this._files[index];\n    if (!entry) return;\n\n    const removedFile = entry.file;\n    this._files = this._files.filter((_, i) => i !== index);\n\n    this.dispatchEvent(\n      new CustomEvent('hx-remove', {\n        bubbles: true,\n        composed: true,\n        detail: { file: removedFile, index },\n      }),\n    );\n  }\n\n  // ─── Formatters ───\n\n  private _formatSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  }\n\n  // ─── Render Helpers ───\n\n  private _renderFileList() {\n    if (this._hasFileListSlot) return nothing;\n    if (this._files.length === 0) return nothing;\n\n    return html`\n      <ul part=\"file-list\" class=\"file-list\" aria-label=\"Selected files\">\n        ${repeat(\n          this._files,\n          (entry) => entry.file.name + entry.file.size,\n          (entry, index) => html`\n            <li part=\"file-item\" class=\"file-item\">\n              <div class=\"file-item__row\">\n                <span class=\"file-item__name\" title=${entry.file.name}> ${entry.file.name} </span>\n                <span class=\"file-item__size\">${this._formatSize(entry.file.size)}</span>\n                <button\n                  type=\"button\"\n                  class=\"file-item__remove\"\n                  aria-label=${`Remove ${entry.file.name}`}\n                  @click=${() => this._handleRemove(index)}\n                >\n                  <svg\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                  >\n                    <path\n                      d=\"M1 1L13 13M13 1L1 13\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.75\"\n                      stroke-linecap=\"round\"\n                    />\n                  </svg>\n                </button>\n              </div>\n              <div\n                part=\"progress\"\n                class=\"progress-track\"\n                role=\"progressbar\"\n                aria-valuenow=${entry.progress}\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-label=${`Upload progress for ${entry.file.name}: ${entry.progress}%`}\n              >\n                <div class=\"progress-bar\" style=\"width: ${entry.progress}%\"></div>\n              </div>\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error;\n\n    const dropzoneClasses = {\n      dropzone: true,\n      'dropzone--drag-over': this._dragOver,\n      'dropzone--error': hasError,\n    };\n\n    const dropzoneLabel = this.label ? `${this.label} — ${this.labelDropzone}` : this.labelDropzone;\n\n    return html`\n      <div class=\"field\">\n        ${this.label\n          ? html`\n              <label part=\"label\" class=\"field__label\" id=${this._labelId} for=${this._dropzoneId}>\n                ${this.label}\n              </label>\n            `\n          : nothing}\n\n        <div\n          part=\"dropzone\"\n          class=${classMap(dropzoneClasses)}\n          id=${this._dropzoneId}\n          role=\"button\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-label=${ifDefined(!this.label ? dropzoneLabel : undefined)}\n          aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-describedby=${ifDefined(hasError ? this._errorId : undefined)}\n          @click=${this._handleDropzoneClick}\n          @keydown=${this._handleDropzoneKeyDown}\n          @dragover=${this._handleDragOver}\n          @dragleave=${this._handleDragLeave}\n          @drop=${this._handleDrop}\n        >\n          <slot>${this.labelDropzone}</slot>\n        </div>\n\n        <input\n          class=\"file-input\"\n          type=\"file\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          accept=${ifDefined(this.accept || undefined)}\n          ?multiple=${this.multiple}\n          ?disabled=${this.disabled}\n          @change=${this._handleFileInputChange}\n        />\n\n        <slot name=\"file-list\" @slotchange=${this._handleFileListSlotChange}></slot>\n\n        ${this._renderFileList()}\n        ${hasError\n          ? html`\n              <div\n                part=\"error\"\n                class=\"field__error\"\n                id=${this._errorId}\n                role=\"alert\"\n                aria-live=\"polite\"\n              >\n                ${this.error}\n              </div>\n            `\n          : nothing}\n\n        <div id=${this._liveId} class=\"sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\n          ${this._dragOver ? 'File detected. Release to upload.' : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-file-upload': HelixFileUpload;\n  }\n}\n"],"names":["helixFileUploadStyles","css","_hxFileUploadIdCounter","HelixFileUpload","LitElement","slot","changedProperties","firstEntry","formData","entry","file","maxMb","tokens","t","token","baseType","rawFiles","candidateFiles","validFiles","invalidFiles","errorMessages","validationError","currentCount","capacity","allowedFiles","newEntries","overflow","index","percent","clamped","i","target","dropzone","_a","dt","input","removedFile","_","bytes","nothing","html","repeat","hasError","dropzoneClasses","dropzoneLabel","classMap","ifDefined","tokenStyles","__decorateClass","property","state","query","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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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"}

package/dist/shared/{hx-icon-button-C83bCR0K.js → hx-icon-button-iu0i_faq.js}

@@ -1,9 +1,9 @@
-import { css as p, LitElement as v, html as c, nothing as u } from "lit";
+import { css as v, LitElement as p, html as c, nothing as u } from "lit";
 import { property as e, customElement as x } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { ifDefined as b } from "lit/directives/if-defined.js";
-import { tokenStyles as f } from "@helixui/tokens/lit";
-const m = p`
+import { tokenStyles as m } from "@helixui/tokens/lit";
+const f = v`
   :host {
     display: inline-block;
   }
@@ -45,10 +45,16 @@ const m = p`
 
   /* ─── Size Variants ─── */
 
+  /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.
+     min-width/min-height override the explicit size tokens when they fall below
+     the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */
+
   .button--sm {
     padding: var(--hx-space-1);
     width: var(--hx-icon-button-size, var(--hx-size-8));
     height: var(--hx-icon-button-size, var(--hx-size-8));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     font-size: var(--hx-font-size-sm);
   }
 
@@ -56,6 +62,8 @@ const m = p`
     padding: var(--hx-space-2);
     width: var(--hx-icon-button-size, var(--hx-size-10));
     height: var(--hx-icon-button-size, var(--hx-size-10));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     font-size: var(--hx-font-size-md);
   }
 
@@ -63,6 +71,8 @@ const m = p`
     padding: var(--hx-space-3);
     width: var(--hx-icon-button-size, var(--hx-size-12));
     height: var(--hx-icon-button-size, var(--hx-size-12));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     font-size: var(--hx-font-size-lg);
   }
 
@@ -146,12 +156,12 @@ const m = p`
     }
   }
 `;
-var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, n, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? g(n, s) : n, h = t.length - 1, l; h >= 0; h--)
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, n, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? y(n, s) : n, h = t.length - 1, l; h >= 0; h--)
     (l = t[h]) && (i = (a ? l(n, s, i) : l(i)) || i);
-  return a && i && y(n, s, i), i;
+  return a && i && g(n, s, i), i;
 };
-let o = class extends v {
+let r = class extends p {
   constructor() {
     super(), this.label = "", this.variant = "ghost", this.size = "md", this.type = "button", this.disabled = !1, this.href = void 0, this.name = void 0, this.value = void 0, this._internals = this.attachInternals();
   }
@@ -220,36 +230,36 @@ let o = class extends v {
     ` : u;
   }
 };
-o.styles = [f, m];
-o.formAssociated = !0;
-r([
+r.styles = [m, f];
+r.formAssociated = !0;
+o([
   e({ type: String })
-], o.prototype, "label", 2);
-r([
+], r.prototype, "label", 2);
+o([
   e({ type: String, reflect: !0 })
-], o.prototype, "variant", 2);
-r([
+], r.prototype, "variant", 2);
+o([
   e({ type: String, reflect: !0, attribute: "hx-size" })
-], o.prototype, "size", 2);
-r([
+], r.prototype, "size", 2);
+o([
   e({ type: String })
-], o.prototype, "type", 2);
-r([
+], r.prototype, "type", 2);
+o([
   e({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-r([
+], r.prototype, "disabled", 2);
+o([
   e({ type: String })
-], o.prototype, "href", 2);
-r([
+], r.prototype, "href", 2);
+o([
   e({ type: String })
-], o.prototype, "name", 2);
-r([
+], r.prototype, "name", 2);
+o([
   e({ type: String })
-], o.prototype, "value", 2);
-o = r([
+], r.prototype, "value", 2);
+r = o([
   x("hx-icon-button")
-], o);
+], r);
 export {
-  o as H
+  r as H
 };
-//# sourceMappingURL=hx-icon-button-C83bCR0K.js.map
+//# sourceMappingURL=hx-icon-button-iu0i_faq.js.map

package/dist/shared/hx-icon-button-iu0i_faq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-icon-button-iu0i_faq.js","sources":["../../src/components/hx-icon-button/hx-icon-button.styles.ts","../../src/components/hx-icon-button/hx-icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled);\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);\n    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-icon-button-bg);\n    color: var(--hx-icon-button-color, var(--hx-color-primary-500));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast),\n      color var(--hx-transition-fast),\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: var(--hx-focus-ring-offset);\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.\n     min-width/min-height override the explicit size tokens when they fall below\n     the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */\n\n  .button--sm {\n    padding: var(--hx-space-1);\n    width: var(--hx-icon-button-size, var(--hx-size-8));\n    height: var(--hx-icon-button-size, var(--hx-size-8));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-sm);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2);\n    width: var(--hx-icon-button-size, var(--hx-size-10));\n    height: var(--hx-icon-button-size, var(--hx-size-10));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-md);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3);\n    width: var(--hx-icon-button-size, var(--hx-size-12));\n    height: var(--hx-icon-button-size, var(--hx-size-12));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-lg);\n  }\n\n  /* ─── Style Variants ─── */\n\n  .button--primary {\n    --hx-icon-button-bg: var(--hx-color-primary-500);\n    --hx-icon-button-color: var(--hx-color-neutral-0);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--primary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-600);\n  }\n\n  .button--secondary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500);\n    --hx-icon-button-border-color: var(--hx-color-primary-500);\n  }\n\n  .button--secondary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-50);\n  }\n\n  .button--tertiary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-neutral-700);\n    --hx-icon-button-border-color: var(--hx-color-neutral-300);\n  }\n\n  .button--tertiary:hover {\n    --hx-icon-button-bg: var(--hx-color-neutral-100);\n  }\n\n  .button--danger {\n    --hx-icon-button-bg: var(--hx-color-error-500);\n    --hx-icon-button-color: var(--hx-color-neutral-0);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--danger:hover {\n    --hx-icon-button-bg: var(--hx-color-error-600);\n  }\n\n  .button--ghost {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-icon-button-bg: var(--hx-color-neutral-100);\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent\n       multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An icon-only button component for compact, accessible actions.\n * Renders a square button or anchor element containing a single icon.\n * The `label` property is required and provides the accessible name\n * via `aria-label` and a native tooltip via the `title` attribute.\n *\n * @summary Icon-only action button with full accessibility support.\n *\n * @tag hx-icon-button\n *\n * @slot - Icon element to display (hx-icon, svg, or img).\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when the button is clicked (not disabled).\n *\n * @csspart button - The native button or anchor element.\n * @csspart icon - The icon container span wrapping the default slot.\n *\n * @cssprop [--hx-icon-button-bg=transparent] - Button background color.\n * @cssprop [--hx-icon-button-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-icon-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-icon-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-icon-button-size] - Explicit width and height override for the button.\n * @cssprop [--hx-icon-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-icon-button')\nexport class HelixIconButton extends LitElement {\n  static override styles = [tokenStyles, helixIconButtonStyles];\n\n  /**\n   * Accessible name for the button. Required. Rendered as `aria-label` and\n   * `title` on the underlying element. The component renders nothing when absent,\n   * and a console warning is emitted to alert developers during authoring.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' = 'ghost';\n\n  /**\n   * Size of the button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * The type attribute for the underlying button element.\n   * Has no effect when `href` is set.\n   * @attr type\n   */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Whether the button is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * When set, renders an `<a>` element instead of a `<button>`.\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * Name submitted with form data. Only applicable when rendering as a button.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Value submitted with form data. Only applicable when rendering as a button.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  // ─── Form Association via ElementInternals ───\n\n  static formAssociated = true;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  // ─── Event Handling ───\n\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    /**\n     * Dispatched when the button is clicked.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n\n    // Handle form submission/reset if form-associated and not in href/link mode\n    if (!this.href) {\n      if (this.type === 'submit' && this._internals.form) {\n        this._internals.form.requestSubmit();\n      } else if (this.type === 'reset' && this._internals.form) {\n        this._internals.form.reset();\n      }\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  private _normalizedLabel(): string {\n    return this.label.trim();\n  }\n\n  private _classes() {\n    return {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n    };\n  }\n\n  private _iconSlot() {\n    return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const normalizedLabel = this._normalizedLabel();\n    if (!normalizedLabel) {\n      devWarn(\n        'hx-icon-button',\n        'The `label` property is required for accessibility. Render suppressed.',\n      );\n      return nothing;\n    }\n\n    if (this.href !== undefined) {\n      // P1-03 fix: disabled anchor must set tabindex=\"-1\" explicitly — an <a>\n      // without href is non-focusable by default in most browsers, but this is\n      // browser-dependent. Explicit tabindex=\"-1\" guarantees keyboard exclusion\n      // across all conforming browsers.\n      // P1-07 note: aria-disabled IS required on the anchor branch because\n      // <a> elements have no native disabled attribute; aria-disabled is the\n      // only AT signal available.\n      return html`\n        <a\n          part=\"button\"\n          class=${classMap(this._classes())}\n          href=${ifDefined(this.disabled ? undefined : this.href)}\n          aria-label=${normalizedLabel}\n          title=${normalizedLabel}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : nothing}\n          @click=${this._handleClick}\n        >\n          ${this._iconSlot()}\n        </a>\n      `;\n    }\n\n    // P1-07 fix: aria-disabled is redundant on a natively disabled <button>.\n    // The native disabled attribute already exposes aria-disabled=\"true\"\n    // implicitly in the accessibility tree. Duplicate explicit aria-disabled\n    // creates ambiguity about design intent. Keep only native ?disabled.\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._classes())}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        aria-label=${normalizedLabel}\n        title=${normalizedLabel}\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        @click=${this._handleClick}\n      >\n        ${this._iconSlot()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-icon-button': HelixIconButton;\n  }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","LitElement","e","html","normalizedLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}