@helixui/library 1.1.2-next.1 → 1.1.2-next.3

package/dist/shared/{hx-action-bar-D4bulGQP.js → hx-action-bar-vGFnNwNY.js}

@@ -1,7 +1,7 @@
 import { css as d, LitElement as b, html as f } from "lit";
-import { property as c, state as u, customElement as p } from "lit/decorators.js";
-import { tokenStyles as v } from "@helixui/tokens/lit";
-import { d as x } from "./dev-warn-YlwPHjtX.js";
+import { property as c, state as p, customElement as u } from "lit/decorators.js";
+import { tokenStyles as x } from "@helixui/tokens/lit";
+import { d as v } from "./dev-warn-YlwPHjtX.js";
 const m = d`
   :host {
     display: block;
@@ -120,27 +120,27 @@ const m = d`
     flex-shrink: 0;
   }
 `;
-var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (t, e, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? y(e, s) : e, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (i = (a ? r(e, s, i) : r(i)) || i);
-  return a && i && g(e, s, i), i;
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? y(e, i) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (a = (s ? r(e, i, a) : r(a)) || a);
+  return s && a && g(e, i, a), a;
 };
 let n = class extends b {
   constructor() {
     super(...arguments), this.size = "md", this.variant = "default", this.position = "top", this._sticky = !1, this.ariaLabel = "Actions", this._focusableCache = null, this._hasOverflow = !1, this._handleKeydown = (t) => {
-      var e, s;
+      var e, i;
       if (t.key === "ArrowRight")
         t.preventDefault(), this._moveFocus("next");
       else if (t.key === "ArrowLeft")
         t.preventDefault(), this._moveFocus("prev");
       else if (t.key === "Home") {
         t.preventDefault();
-        const a = this._getFocusableItems();
-        a.length && (a.forEach((i, o) => i.setAttribute("tabindex", o === 0 ? "0" : "-1")), (e = a[0]) == null || e.focus());
+        const s = this._getFocusableItems();
+        s.length && (s.forEach((a, o) => a.setAttribute("tabindex", o === 0 ? "0" : "-1")), (e = s[0]) == null || e.focus());
       } else if (t.key === "End") {
         t.preventDefault();
-        const a = this._getFocusableItems(), i = a.length - 1;
-        a.length && (a.forEach((o, r) => o.setAttribute("tabindex", r === i ? "0" : "-1")), (s = a[i]) == null || s.focus());
+        const s = this._getFocusableItems(), a = s.length - 1;
+        s.length && (s.forEach((o, r) => o.setAttribute("tabindex", r === a ? "0" : "-1")), (i = s[a]) == null || i.focus());
       }
     };
   }
@@ -154,7 +154,7 @@ let n = class extends b {
   connectedCallback() {
     super.connectedCallback();
     const t = this.getAttribute("size");
-    t !== null && !this.hasAttribute("hx-size") && (this.size = t), this.hasAttribute("role") ? this.getAttribute("role") !== "none" && x(
+    t !== null && !this.hasAttribute("hx-size") && (this.size = t), this.hasAttribute("role") ? this.getAttribute("role") !== "none" && v(
       "hx-action-bar",
       `Setting role="${this.getAttribute("role")}" on the host creates a duplicate toolbar announcement. The shadow DOM already contains role="toolbar". Set role="none" on the host to suppress it.`
     ) : this.setAttribute("role", "none"), this.addEventListener("keydown", this._handleKeydown);
@@ -170,17 +170,17 @@ let n = class extends b {
   _isFocusable(t) {
     if (t.hasAttribute("disabled") || t.disabled === !0) return !1;
     if (t.tabIndex >= 0) return !0;
-    const s = t.tagName.toLowerCase();
-    return s === "button" || s === "input" || s === "select" || s === "textarea";
+    const i = t.tagName.toLowerCase();
+    return i === "button" || i === "input" || i === "select" || i === "textarea";
   }
   /** @internal */
   _getFocusableItems() {
-    var s;
+    var i;
     if (this._focusableCache) return this._focusableCache;
-    const t = ((s = this.shadowRoot) == null ? void 0 : s.querySelectorAll("slot")) ?? [], e = [];
-    for (const a of Array.from(t)) {
-      const i = a.assignedElements({ flatten: !0 });
-      for (const o of i)
+    const t = ((i = this.shadowRoot) == null ? void 0 : i.querySelectorAll("slot")) ?? [], e = [];
+    for (const s of Array.from(t)) {
+      const a = s.assignedElements({ flatten: !0 });
+      for (const o of a)
         if (o instanceof HTMLElement)
           if (this._isFocusable(o))
             e.push(o);
@@ -198,20 +198,19 @@ let n = class extends b {
     this._focusableCache = null;
     const t = this._getFocusableItems();
     if (!t.length) return;
-    t.some((s) => s.getAttribute("tabindex") === "0") ? t.forEach((s) => {
-      s.getAttribute("tabindex") === null && s.setAttribute("tabindex", "-1");
-    }) : t.forEach((s, a) => s.setAttribute("tabindex", a === 0 ? "0" : "-1"));
+    const e = t.findIndex((s) => s.getAttribute("tabindex") === "0"), i = e === -1 ? 0 : e;
+    t.forEach((s, a) => s.setAttribute("tabindex", a === i ? "0" : "-1"));
   }
   /** @internal */
   _moveFocus(t) {
     var o;
     const e = this._getFocusableItems();
     if (!e.length) return;
-    const s = document.activeElement, a = e.indexOf(s);
-    let i;
-    t === "next" ? i = a < e.length - 1 ? a + 1 : 0 : i = a > 0 ? a - 1 : e.length - 1, e.forEach((r, h) => {
-      r.setAttribute("tabindex", h === i ? "0" : "-1");
-    }), (o = e[i]) == null || o.focus();
+    const i = document.activeElement, s = e.indexOf(i);
+    let a;
+    t === "next" ? a = s < e.length - 1 ? s + 1 : 0 : a = s > 0 ? s - 1 : e.length - 1, e.forEach((r, h) => {
+      r.setAttribute("tabindex", h === a ? "0" : "-1");
+    }), (o = e[a]) == null || o.focus();
   }
   // ─── Event Handlers ───
   /** @internal */
@@ -221,14 +220,14 @@ let n = class extends b {
   }
   // ─── Render ───
   render() {
-    const t = this.position === "sticky" || this.sticky, e = this.position === "bottom", s = t ? " base--sticky" : e ? " base--bottom" : "";
+    const t = this.position === "sticky" || this.sticky, e = this.position === "bottom", i = t ? " base--sticky" : e ? " base--bottom" : "";
     return f`
       <div
         part="base"
         role="toolbar"
         aria-label=${this.ariaLabel}
         aria-orientation="horizontal"
-        class="base base--${this.size} base--${this.variant}${s}"
+        class="base base--${this.size} base--${this.variant}${i}"
       >
         <div part="start" class="section section--start">
           <slot name="start" @slotchange=${this._handleSlotChange}></slot>
@@ -246,7 +245,7 @@ let n = class extends b {
     `;
   }
 };
-n.styles = [v, m];
+n.styles = [x, m];
 l([
   c({ type: String, reflect: !0, attribute: "hx-size" })
 ], n.prototype, "size", 2);
@@ -263,12 +262,12 @@ l([
   c({ attribute: "aria-label" })
 ], n.prototype, "ariaLabel", 2);
 l([
-  u()
+  p()
 ], n.prototype, "_hasOverflow", 2);
 n = l([
-  p("hx-action-bar")
+  u("hx-action-bar")
 ], n);
 export {
   n as H
 };
-//# sourceMappingURL=hx-action-bar-D4bulGQP.js.map
+//# sourceMappingURL=hx-action-bar-vGFnNwNY.js.map

package/dist/shared/{hx-action-bar-D4bulGQP.js.map → hx-action-bar-vGFnNwNY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-action-bar-D4bulGQP.js","sources":["../../src/components/hx-action-bar/hx-action-bar.styles.ts","../../src/components/hx-action-bar/hx-action-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixActionBarStyles = css`\n  :host {\n    display: block;\n  }\n\n  /* ─── Base ─── */\n\n  .base {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));\n    padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n    background: var(--hx-action-bar-bg, transparent);\n    border: var(--hx-action-bar-border, none);\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Sticky (top) ─── */\n\n  .base--sticky {\n    position: sticky;\n    top: 0;\n    padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));\n    z-index: var(--hx-action-bar-z-index, 10);\n    /*\n     * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container\n     * equal to the bar's rendered height so anchor targets are not hidden behind the bar.\n     * Example: .scroll-container { scroll-padding-top: 2.5rem; }\n     */\n  }\n\n  /* ─── Bottom sticky ─── */\n\n  .base--bottom {\n    position: sticky;\n    bottom: 0;\n    /*\n     * Respect iOS home-indicator safe area on devices with notch/home bar.\n     * Falls back to 0px on devices that do not support env().\n     */\n    padding-bottom: max(\n      var(--hx-action-bar-padding-block-end, 0px),\n      env(safe-area-inset-bottom, 0px)\n    );\n    z-index: var(--hx-action-bar-z-index, 10);\n  }\n\n  /* ─── Variant: outlined ─── */\n\n  .base--outlined {\n    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #fff));\n    border: var(\n      --hx-action-bar-border,\n      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb)\n    );\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Variant: filled ─── */\n\n  .base--filled {\n    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f9fafb));\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Size modifiers ─── */\n\n  .base--sm {\n    padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  .base--md {\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .base--lg {\n    padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Sections ─── */\n\n  .section {\n    display: flex;\n    align-items: center;\n    gap: inherit;\n  }\n\n  /*\n   * Equal flex-basis on start and end guarantees the center section is visually centered\n   * within the full bar width, regardless of how wide start and end content are.\n   */\n  .section--start {\n    flex: 1 1 0;\n    justify-content: flex-start;\n  }\n\n  .section--center {\n    flex: 0 0 auto;\n    justify-content: center;\n  }\n\n  .section--end {\n    flex: 1 1 0;\n    justify-content: flex-end;\n  }\n\n  /* ─── Slotted content ─── */\n\n  ::slotted(*) {\n    flex-shrink: 0;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixActionBarStyles } from './hx-action-bar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Re-export size type for external consumers.\nexport type ActionBarSize = 'sm' | 'md' | 'lg';\n\n/**\n * A horizontal toolbar container for grouping related action buttons and controls.\n * Implements the ARIA toolbar pattern with roving tabindex keyboard navigation.\n *\n * @summary Horizontal action bar for grouping related controls.\n *\n * @tag hx-action-bar\n *\n * @slot start - Left-aligned actions.\n * @slot - Center content (default slot).\n * @slot end - Right-aligned actions.\n * @slot overflow - Actions revealed when the bar is constrained for space.\n *\n * @csspart base - The root toolbar container element.\n * @csspart start - The start (left) slot wrapper.\n * @csspart center - The center (default) slot wrapper.\n * @csspart end - The end (right) slot wrapper.\n * @csspart overflow - The overflow slot wrapper (hidden when no overflow content).\n *\n * @cssprop [--hx-action-bar-bg=transparent] - Bar background color (default variant).\n * @cssprop [--hx-action-bar-border=none] - Bar border (default variant).\n * @cssprop [--hx-action-bar-padding=var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)] - Inner padding.\n * @cssprop [--hx-action-bar-gap=var(--hx-space-2,0.5rem)] - Gap between slotted items.\n * @cssprop [--hx-action-bar-z-index=10] - Z-index when sticky or bottom position.\n *\n * @attr {string} aria-label - Required. Identifies the toolbar to assistive technology.\n *   When multiple toolbars appear on the same page, each must have a unique, descriptive label.\n *\n * @example\n * ```html\n * <hx-action-bar aria-label=\"Patient actions\">\n *   <hx-button slot=\"start\">Save</hx-button>\n *   <hx-button slot=\"end\" variant=\"ghost\">Cancel</hx-button>\n * </hx-action-bar>\n * ```\n */\n@customElement('hx-action-bar')\nexport class HelixActionBar extends LitElement {\n  static override styles = [tokenStyles, helixActionBarStyles];\n\n  /**\n   * Size of the action bar — propagated as a data attribute to slotted children.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant controlling the bar background.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'outlined' | 'filled' = 'default';\n\n  /**\n   * Position and sticky behavior of the action bar.\n   * - `top` — normal flow (default)\n   * - `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n   *   scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n   * - `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support\n   * @attr position\n   */\n  @property({ type: String, reflect: true })\n  position: 'top' | 'bottom' | 'sticky' = 'top';\n\n  /**\n   * @deprecated Use `position=\"sticky\"` instead.\n   * When true, the bar sticks to the top of its scroll container.\n   * @attr sticky\n   */\n  @property({ type: Boolean, reflect: true })\n  get sticky(): boolean {\n    return this._sticky;\n  }\n  set sticky(value: boolean) {\n    if (value) {\n      devWarn(\n        'hx-action-bar',\n        'The `sticky` property is deprecated. Use `position=\"sticky\"` instead.',\n      );\n    }\n    const old = this._sticky;\n    this._sticky = value;\n    this.requestUpdate('sticky', old);\n  }\n  /** @internal */\n  private _sticky = false;\n\n  /**\n   * Accessible label for the toolbar.\n   * Required when multiple toolbars appear on the same page.\n   * @attr aria-label\n   */\n  @property({ attribute: 'aria-label' })\n  ariaLabel: string = 'Actions';\n\n  /** Cached list of focusable items — invalidated on slot change. */\n  /** @internal */\n  private _focusableCache: HTMLElement[] | null = null;\n\n  /** Whether the overflow slot has assigned content.  * @internal\n   */\n  @state()\n  private _hasOverflow = false;\n\n  // ─── Lifecycle ───\n\n  /** Arrow function field — stable reference for add/removeEventListener. */\n  /** @internal */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      this._moveFocus('next');\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      this._moveFocus('prev');\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      // Move directly to first item — do NOT call _moveFocus which would visit other items first.\n      const items = this._getFocusableItems();\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n        items[0]?.focus();\n      }\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      const items = this._getFocusableItems();\n      const last = items.length - 1;\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n        items[last]?.focus();\n      }\n    }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-action-bar', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as ActionBarSize;\n    }\n    // Prevent dual aria-label announcement: the host carries the consumer's\n    // aria-label attribute while the inner div[role=\"toolbar\"] receives the\n    // same value. Setting role=\"none\" on the host hides it from the\n    // accessibility tree so only the toolbar is announced.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'none');\n    } else if (this.getAttribute('role') !== 'none') {\n      devWarn(\n        'hx-action-bar',\n        `Setting role=\"${this.getAttribute('role')}\" on the host creates a duplicate toolbar announcement. ` +\n          'The shadow DOM already contains role=\"toolbar\". Set role=\"none\" on the host to suppress it.',\n      );\n    }\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override firstUpdated(): void {\n    // Slot assignments are complete by firstUpdated; initialize roving tabindex\n    // immediately rather than waiting for the async slotchange event.\n    this._initRovingTabindex();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Focusable item discovery ───\n\n  /** @internal */\n  private _isFocusable(el: HTMLElement): boolean {\n    // Check disabled via DOM attribute (native elements) or property (custom elements)\n    if (el.hasAttribute('disabled')) return false;\n    const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n    if (elWithDisabled.disabled === true) return false;\n\n    // Use the IDL tabIndex property — covers both DOM attribute and ElementInternals settings.\n    // Custom elements (e.g. hx-button) that set tabIndex via ElementInternals are discoverable.\n    if (el.tabIndex >= 0) return true;\n\n    const tag = el.tagName.toLowerCase();\n    return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n  }\n\n  /** @internal */\n  private _getFocusableItems(): HTMLElement[] {\n    if (this._focusableCache) return this._focusableCache;\n\n    const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];\n    const items: HTMLElement[] = [];\n\n    for (const slot of Array.from(slots)) {\n      const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n      for (const el of assigned) {\n        if (!(el instanceof HTMLElement)) continue;\n        if (this._isFocusable(el)) {\n          // Element is itself focusable — include it and do NOT also recurse into its children\n          // to prevent double-counting compound components (e.g. <a><button>).\n          items.push(el);\n        } else {\n          // Element is a non-focusable wrapper (e.g. <div>, <span>) — find focusable children.\n          const descendants = el.querySelectorAll<HTMLElement>('*');\n          for (const d of Array.from(descendants)) {\n            if (this._isFocusable(d)) {\n              items.push(d);\n            }\n          }\n        }\n      }\n    }\n\n    this._focusableCache = items;\n    return items;\n  }\n\n  // ─── Roving tabindex helpers ───\n\n  /** @internal */\n  private _initRovingTabindex(): void {\n    this._focusableCache = null; // invalidate cache on slot change\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n    const hasActive = items.some((el) => el.getAttribute('tabindex') === '0');\n    if (!hasActive) {\n      // No item is active yet — make the first item tabbable.\n      items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n    } else {\n      // An item is already active — ensure new items get tabindex=\"-1\"\n      // without disturbing the currently active item.\n      items.forEach((el) => {\n        if (el.getAttribute('tabindex') === null) el.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  /** @internal */\n  private _moveFocus(direction: 'next' | 'prev'): void {\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n\n    const focused = document.activeElement as HTMLElement | null;\n    const currentIndex = items.indexOf(focused as HTMLElement);\n\n    let nextIndex: number;\n    if (direction === 'next') {\n      nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n    } else {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n    }\n\n    items.forEach((el, i) => {\n      el.setAttribute('tabindex', i === nextIndex ? '0' : '-1');\n    });\n\n    items[nextIndex]?.focus();\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    if (slot.name === 'overflow') {\n      this._hasOverflow = slot.assignedElements({ flatten: true }).length > 0;\n    }\n    this._initRovingTabindex();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isSticky = this.position === 'sticky' || this.sticky;\n    const isBottom = this.position === 'bottom';\n    const positionClass = isSticky ? ' base--sticky' : isBottom ? ' base--bottom' : '';\n\n    return html`\n      <div\n        part=\"base\"\n        role=\"toolbar\"\n        aria-label=${this.ariaLabel}\n        aria-orientation=\"horizontal\"\n        class=\"base base--${this.size} base--${this.variant}${positionClass}\"\n      >\n        <div part=\"start\" class=\"section section--start\">\n          <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"center\" class=\"section section--center\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"end\" class=\"section section--end\">\n          <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"overflow\" class=\"section section--overflow\" ?hidden=${!this._hasOverflow}>\n          <slot name=\"overflow\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-action-bar': HelixActionBar;\n  }\n}\n"],"names":["helixActionBarStyles","css","HelixActionBar","LitElement","e","items","el","i","_a","last","_b","value","old","legacySize","devWarn","tag","slots","slot","assigned","descendants","d","direction","focused","currentIndex","nextIndex","isSticky","isBottom","positionClass","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-action-bar-vGFnNwNY.js","sources":["../../src/components/hx-action-bar/hx-action-bar.styles.ts","../../src/components/hx-action-bar/hx-action-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixActionBarStyles = css`\n  :host {\n    display: block;\n  }\n\n  /* ─── Base ─── */\n\n  .base {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));\n    padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n    background: var(--hx-action-bar-bg, transparent);\n    border: var(--hx-action-bar-border, none);\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Sticky (top) ─── */\n\n  .base--sticky {\n    position: sticky;\n    top: 0;\n    padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));\n    z-index: var(--hx-action-bar-z-index, 10);\n    /*\n     * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container\n     * equal to the bar's rendered height so anchor targets are not hidden behind the bar.\n     * Example: .scroll-container { scroll-padding-top: 2.5rem; }\n     */\n  }\n\n  /* ─── Bottom sticky ─── */\n\n  .base--bottom {\n    position: sticky;\n    bottom: 0;\n    /*\n     * Respect iOS home-indicator safe area on devices with notch/home bar.\n     * Falls back to 0px on devices that do not support env().\n     */\n    padding-bottom: max(\n      var(--hx-action-bar-padding-block-end, 0px),\n      env(safe-area-inset-bottom, 0px)\n    );\n    z-index: var(--hx-action-bar-z-index, 10);\n  }\n\n  /* ─── Variant: outlined ─── */\n\n  .base--outlined {\n    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #fff));\n    border: var(\n      --hx-action-bar-border,\n      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb)\n    );\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Variant: filled ─── */\n\n  .base--filled {\n    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f9fafb));\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Size modifiers ─── */\n\n  .base--sm {\n    padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  .base--md {\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .base--lg {\n    padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Sections ─── */\n\n  .section {\n    display: flex;\n    align-items: center;\n    gap: inherit;\n  }\n\n  /*\n   * Equal flex-basis on start and end guarantees the center section is visually centered\n   * within the full bar width, regardless of how wide start and end content are.\n   */\n  .section--start {\n    flex: 1 1 0;\n    justify-content: flex-start;\n  }\n\n  .section--center {\n    flex: 0 0 auto;\n    justify-content: center;\n  }\n\n  .section--end {\n    flex: 1 1 0;\n    justify-content: flex-end;\n  }\n\n  /* ─── Slotted content ─── */\n\n  ::slotted(*) {\n    flex-shrink: 0;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixActionBarStyles } from './hx-action-bar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Re-export size type for external consumers.\nexport type ActionBarSize = 'sm' | 'md' | 'lg';\n\n/**\n * A horizontal toolbar container for grouping related action buttons and controls.\n * Implements the ARIA toolbar pattern with roving tabindex keyboard navigation.\n *\n * @summary Horizontal action bar for grouping related controls.\n *\n * @tag hx-action-bar\n *\n * @slot start - Left-aligned actions.\n * @slot - Center content (default slot).\n * @slot end - Right-aligned actions.\n * @slot overflow - Actions revealed when the bar is constrained for space.\n *\n * @csspart base - The root toolbar container element.\n * @csspart start - The start (left) slot wrapper.\n * @csspart center - The center (default) slot wrapper.\n * @csspart end - The end (right) slot wrapper.\n * @csspart overflow - The overflow slot wrapper (hidden when no overflow content).\n *\n * @cssprop [--hx-action-bar-bg=transparent] - Bar background color (default variant).\n * @cssprop [--hx-action-bar-border=none] - Bar border (default variant).\n * @cssprop [--hx-action-bar-padding=var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)] - Inner padding.\n * @cssprop [--hx-action-bar-gap=var(--hx-space-2,0.5rem)] - Gap between slotted items.\n * @cssprop [--hx-action-bar-z-index=10] - Z-index when sticky or bottom position.\n *\n * @attr {string} aria-label - Required. Identifies the toolbar to assistive technology.\n *   When multiple toolbars appear on the same page, each must have a unique, descriptive label.\n *\n * @example\n * ```html\n * <hx-action-bar aria-label=\"Patient actions\">\n *   <hx-button slot=\"start\">Save</hx-button>\n *   <hx-button slot=\"end\" variant=\"ghost\">Cancel</hx-button>\n * </hx-action-bar>\n * ```\n */\n@customElement('hx-action-bar')\nexport class HelixActionBar extends LitElement {\n  static override styles = [tokenStyles, helixActionBarStyles];\n\n  /**\n   * Size of the action bar — propagated as a data attribute to slotted children.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant controlling the bar background.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'outlined' | 'filled' = 'default';\n\n  /**\n   * Position and sticky behavior of the action bar.\n   * - `top` — normal flow (default)\n   * - `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n   *   scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n   * - `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support\n   * @attr position\n   */\n  @property({ type: String, reflect: true })\n  position: 'top' | 'bottom' | 'sticky' = 'top';\n\n  /**\n   * @deprecated Use `position=\"sticky\"` instead.\n   * When true, the bar sticks to the top of its scroll container.\n   * @attr sticky\n   */\n  @property({ type: Boolean, reflect: true })\n  get sticky(): boolean {\n    return this._sticky;\n  }\n  set sticky(value: boolean) {\n    if (value) {\n      devWarn(\n        'hx-action-bar',\n        'The `sticky` property is deprecated. Use `position=\"sticky\"` instead.',\n      );\n    }\n    const old = this._sticky;\n    this._sticky = value;\n    this.requestUpdate('sticky', old);\n  }\n  /** @internal */\n  private _sticky = false;\n\n  /**\n   * Accessible label for the toolbar.\n   * Required when multiple toolbars appear on the same page.\n   * @attr aria-label\n   */\n  @property({ attribute: 'aria-label' })\n  ariaLabel: string = 'Actions';\n\n  /** Cached list of focusable items — invalidated on slot change. */\n  /** @internal */\n  private _focusableCache: HTMLElement[] | null = null;\n\n  /** Whether the overflow slot has assigned content.  * @internal\n   */\n  @state()\n  private _hasOverflow = false;\n\n  // ─── Lifecycle ───\n\n  /** Arrow function field — stable reference for add/removeEventListener. */\n  /** @internal */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      this._moveFocus('next');\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      this._moveFocus('prev');\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      // Move directly to first item — do NOT call _moveFocus which would visit other items first.\n      const items = this._getFocusableItems();\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n        items[0]?.focus();\n      }\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      const items = this._getFocusableItems();\n      const last = items.length - 1;\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n        items[last]?.focus();\n      }\n    }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-action-bar', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as ActionBarSize;\n    }\n    // Prevent dual aria-label announcement: the host carries the consumer's\n    // aria-label attribute while the inner div[role=\"toolbar\"] receives the\n    // same value. Setting role=\"none\" on the host hides it from the\n    // accessibility tree so only the toolbar is announced.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'none');\n    } else if (this.getAttribute('role') !== 'none') {\n      devWarn(\n        'hx-action-bar',\n        `Setting role=\"${this.getAttribute('role')}\" on the host creates a duplicate toolbar announcement. ` +\n          'The shadow DOM already contains role=\"toolbar\". Set role=\"none\" on the host to suppress it.',\n      );\n    }\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override firstUpdated(): void {\n    // Slot assignments are complete by firstUpdated; initialize roving tabindex\n    // immediately rather than waiting for the async slotchange event.\n    this._initRovingTabindex();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Focusable item discovery ───\n\n  /** @internal */\n  private _isFocusable(el: HTMLElement): boolean {\n    // Check disabled via DOM attribute (native elements) or property (custom elements)\n    if (el.hasAttribute('disabled')) return false;\n    const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n    if (elWithDisabled.disabled === true) return false;\n\n    // Use the IDL tabIndex property — covers both DOM attribute and ElementInternals settings.\n    // Custom elements (e.g. hx-button) that set tabIndex via ElementInternals are discoverable.\n    if (el.tabIndex >= 0) return true;\n\n    const tag = el.tagName.toLowerCase();\n    return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n  }\n\n  /** @internal */\n  private _getFocusableItems(): HTMLElement[] {\n    if (this._focusableCache) return this._focusableCache;\n\n    const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];\n    const items: HTMLElement[] = [];\n\n    for (const slot of Array.from(slots)) {\n      const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n      for (const el of assigned) {\n        if (!(el instanceof HTMLElement)) continue;\n        if (this._isFocusable(el)) {\n          // Element is itself focusable — include it and do NOT also recurse into its children\n          // to prevent double-counting compound components (e.g. <a><button>).\n          items.push(el);\n        } else {\n          // Element is a non-focusable wrapper (e.g. <div>, <span>) — find focusable children.\n          const descendants = el.querySelectorAll<HTMLElement>('*');\n          for (const d of Array.from(descendants)) {\n            if (this._isFocusable(d)) {\n              items.push(d);\n            }\n          }\n        }\n      }\n    }\n\n    this._focusableCache = items;\n    return items;\n  }\n\n  // ─── Roving tabindex helpers ───\n\n  /** @internal */\n  private _initRovingTabindex(): void {\n    this._focusableCache = null; // invalidate cache on slot change\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n    // Find the currently active item. If none exists (e.g. first render or active item was\n    // removed), fall back to index 0. Then set ALL items explicitly so newly added items and\n    // items whose tabindex changed externally are always in a correct state.\n    const activeIndex = items.findIndex((el) => el.getAttribute('tabindex') === '0');\n    const targetIndex = activeIndex === -1 ? 0 : activeIndex;\n    items.forEach((el, i) => el.setAttribute('tabindex', i === targetIndex ? '0' : '-1'));\n  }\n\n  /** @internal */\n  private _moveFocus(direction: 'next' | 'prev'): void {\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n\n    const focused = document.activeElement as HTMLElement | null;\n    const currentIndex = items.indexOf(focused as HTMLElement);\n\n    let nextIndex: number;\n    if (direction === 'next') {\n      nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n    } else {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n    }\n\n    items.forEach((el, i) => {\n      el.setAttribute('tabindex', i === nextIndex ? '0' : '-1');\n    });\n\n    items[nextIndex]?.focus();\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    if (slot.name === 'overflow') {\n      this._hasOverflow = slot.assignedElements({ flatten: true }).length > 0;\n    }\n    this._initRovingTabindex();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isSticky = this.position === 'sticky' || this.sticky;\n    const isBottom = this.position === 'bottom';\n    const positionClass = isSticky ? ' base--sticky' : isBottom ? ' base--bottom' : '';\n\n    return html`\n      <div\n        part=\"base\"\n        role=\"toolbar\"\n        aria-label=${this.ariaLabel}\n        aria-orientation=\"horizontal\"\n        class=\"base base--${this.size} base--${this.variant}${positionClass}\"\n      >\n        <div part=\"start\" class=\"section section--start\">\n          <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"center\" class=\"section section--center\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"end\" class=\"section section--end\">\n          <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"overflow\" class=\"section section--overflow\" ?hidden=${!this._hasOverflow}>\n          <slot name=\"overflow\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-action-bar': HelixActionBar;\n  }\n}\n"],"names":["helixActionBarStyles","css","HelixActionBar","LitElement","e","items","el","i","_a","last","_b","value","old","legacySize","devWarn","tag","slots","slot","assigned","descendants","d","activeIndex","targetIndex","direction","focused","currentIndex","nextIndex","isSticky","isBottom","positionClass","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-avatar-7p1cj3lG.js → hx-avatar-CZfA9KEl.js}

@@ -2,7 +2,7 @@ import { css as _, LitElement as y, html as v, nothing as d } from "lit";
 import { property as l, state as c, customElement as z } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { tokenStyles as S } from "@helixui/tokens/lit";
-import { d as m } from "./dev-warn-YlwPHjtX.js";
+import { d as g } from "./dev-warn-YlwPHjtX.js";
 const w = _`
   :host {
     display: inline-block;
@@ -113,16 +113,33 @@ const w = _`
   }
 
   /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,
-     leaving no visual boundary. Add a border so the avatar remains perceivable.
+     leaving no visual boundary. Restore a visible border, explicit foreground, and
+     background so the avatar container, initials, and fallback icon all remain
+     perceivable at any contrast level.
      WCAG 1.4.11 Non-text Contrast (Level AA). */
   @media (forced-colors: active) {
     .avatar {
+      forced-color-adjust: none;
       border: 2px solid ButtonText;
+      background-color: Canvas;
+      color: CanvasText;
+    }
+
+    .avatar__initials {
+      color: CanvasText;
+    }
+
+    .avatar__fallback-icon {
+      color: CanvasText;
+    }
+
+    .avatar__image {
+      forced-color-adjust: auto;
     }
   }
 `;
-var E = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (t, r, e, a) => {
-  for (var s = a > 1 ? void 0 : a ? $(r, e) : r, n = t.length - 1, h; n >= 0; n--)
+var E = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (t, r, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? C(r, e) : r, n = t.length - 1, h; n >= 0; n--)
     (h = t[n]) && (s = (a ? h(r, e, s) : h(s)) || s);
   return a && s && E(r, e, s), s;
 };
@@ -137,12 +154,12 @@ let i = class extends y {
   willUpdate(t) {
     t.has("src") && (this._imgError = !1), (t.has("src") || t.has("alt")) && this.src && this.alt, (t.has("initials") || t.has("label")) && this.initials && this.label;
     const r = ["xs", "sm", "md", "lg", "xl"];
-    t.has("size") && !r.includes(this.size) && m(
+    t.has("size") && !r.includes(this.size) && g(
       "hx-avatar",
       `Invalid hx-size="${String(this.size)}". Valid values: xs, sm, md, lg, xl. Rendering with "md".`
     );
     const e = ["circle", "square"];
-    t.has("shape") && !e.includes(this.shape) && m(
+    t.has("shape") && !e.includes(this.shape) && g(
       "hx-avatar",
       `Invalid shape="${String(this.shape)}". Valid values: circle, square. Rendering with "circle".`
     );
@@ -188,10 +205,10 @@ let i = class extends y {
   }
   // ─── Render ───
   render() {
-    const t = this.src, r = this._hasDefaultSlot, e = !r && !!t && !this._imgError, a = !r && !e && !!this.initials.trim(), s = !r && !e && !a, n = e ? this.alt || this.label || "Avatar" : a ? this.label || this.initials : this.label || "Avatar", h = ["xs", "sm", "md", "lg", "xl"], g = ["circle", "square"], f = h.includes(this.size) ? this.size : "md", x = g.includes(this.shape) ? this.shape : "circle", u = {
+    const t = this.src, r = this._hasDefaultSlot, e = !r && !!t && !this._imgError, a = !r && !e && !!this.initials.trim(), s = !r && !e && !a, n = e ? this.alt || this.label || "Avatar" : a ? this.label || this.initials : this.label || "Avatar", h = ["xs", "sm", "md", "lg", "xl"], m = ["circle", "square"], f = h.includes(this.size) ? this.size : "md", u = m.includes(this.shape) ? this.shape : "circle", x = {
       avatar: !0,
       [`avatar--${f}`]: !0,
-      [`avatar--${x}`]: !0
+      [`avatar--${u}`]: !0
     }, b = {
       avatar__badge: !0,
       "avatar__badge--hidden": !this._hasBadgeSlot
@@ -200,7 +217,7 @@ let i = class extends y {
       <div class="avatar-wrapper">
         <div
           part="avatar"
-          class=${p(u)}
+          class=${p(x)}
           role=${r ? d : "img"}
           aria-label=${r ? d : n}
         >
@@ -258,4 +275,4 @@ i = o([
 export {
   i as H
 };
-//# sourceMappingURL=hx-avatar-7p1cj3lG.js.map
+//# sourceMappingURL=hx-avatar-CZfA9KEl.js.map

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

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

package/dist/shared/{hx-badge-DCxvskdw.js → hx-badge-Xg7zoh4Q.js}

@@ -123,17 +123,21 @@ const f = c`
     display: none;
   }
 
+  .badge--dot slot[name='prefix'] {
+    display: none;
+  }
+
   /* ─── Pulse Animation ─── */
 
   @keyframes hx-badge-pulse {
     0%,
     100% {
       opacity: 1;
-      box-shadow: 0 0 0 0 var(--hx-badge-pulse-color, currentColor);
+      box-shadow: 0 0 0 2px var(--hx-badge-pulse-color, currentColor);
     }
     50% {
       opacity: var(--hx-opacity-75, 0.75);
-      box-shadow: 0 0 0 4px transparent;
+      box-shadow: 0 0 0 6px transparent;
     }
   }
 
@@ -177,10 +181,10 @@ const f = c`
     outline-offset: var(--hx-focus-ring-offset, 1px);
   }
 `;
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (a, o, n, r) => {
-  for (var s = r > 1 ? void 0 : r ? y(o, n) : o, h = a.length - 1, b; h >= 0; h--)
-    (b = a[h]) && (s = (r ? b(o, n, s) : b(s)) || s);
-  return r && s && m(o, n, s), s;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (a, r, n, t) => {
+  for (var s = t > 1 ? void 0 : t ? y(r, n) : r, h = a.length - 1, b; h >= 0; h--)
+    (b = a[h]) && (s = (t ? b(r, n, s) : b(s)) || s);
+  return t && s && m(r, n, s), s;
 };
 let e = class extends g {
   constructor() {
@@ -196,7 +200,7 @@ let e = class extends g {
   /** @internal */
   _handleSlotChange(a) {
     const n = a.target.assignedNodes({ flatten: !0 });
-    this._hasSlotContent = n.some((r) => r.nodeType === Node.ELEMENT_NODE ? !0 : r.nodeType === Node.TEXT_NODE ? (r.textContent ?? "").trim().length > 0 : !1);
+    this._hasSlotContent = n.some((t) => t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1);
   }
   // ─── Event Handling ───
   /** @internal */
@@ -219,26 +223,26 @@ let e = class extends g {
   }
   // ─── Render ───
   render() {
-    const a = this.count !== void 0, o = !this._hasSlotContent && !a && this.pulse;
-    o && this.dotLabel;
+    const a = this.count !== void 0, r = !this._hasSlotContent && !a && this.pulse;
+    r && this.dotLabel;
     const n = {
       badge: !0,
       [`badge--${this.variant}`]: !0,
       [`badge--${this.size}`]: !0,
       "badge--pill": this.pill,
       "badge--pulse": this.pulse,
-      "badge--dot": o
-    }, r = this._semanticVariantLabel;
+      "badge--dot": r
+    }, t = this._semanticVariantLabel;
     return d`
       <span
         part="badge"
         class=${u(n)}
-        role=${o && this.dotLabel ? "img" : l}
-        aria-label=${o && this.dotLabel ? this.dotLabel : l}
+        role=${r && this.dotLabel ? "img" : l}
+        aria-label=${r && this.dotLabel ? this.dotLabel : l}
         aria-live=${a ? "polite" : l}
       >
-        ${r ? d`<span class="badge__variant-label">${r}: </span>` : l}
-        <slot name="prefix"></slot>
+        ${t ? d`<span class="badge__variant-label">${t}: </span>` : l}
+        ${r ? l : d`<slot name="prefix"></slot>`}
         ${a ? this._countDisplay : d`<slot @slotchange=${this._handleSlotChange}></slot>`}
         ${this.removable ? d`<button
               part="remove-button"
@@ -264,40 +268,40 @@ e._SEMANTIC_VARIANT_LABELS = {
   error: "Error",
   info: "Info"
 };
-t([
+o([
   i({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
-t([
+o([
   i({ type: String, reflect: !0, attribute: "hx-size" })
 ], e.prototype, "size", 2);
-t([
+o([
   i({ type: Boolean, reflect: !0 })
 ], e.prototype, "pill", 2);
-t([
+o([
   i({ type: Boolean, reflect: !0 })
 ], e.prototype, "pulse", 2);
-t([
+o([
   i({ type: Boolean, reflect: !0 })
 ], e.prototype, "removable", 2);
-t([
+o([
   i({ type: Number, reflect: !0 })
 ], e.prototype, "count", 2);
-t([
+o([
   i({ type: Number, reflect: !0 })
 ], e.prototype, "max", 2);
-t([
+o([
   i({ type: String, attribute: "dot-label" })
 ], e.prototype, "dotLabel", 2);
-t([
+o([
   i({ type: String, attribute: "remove-label" })
 ], e.prototype, "removeLabel", 2);
-t([
+o([
   p()
 ], e.prototype, "_hasSlotContent", 2);
-e = t([
+e = o([
   x("hx-badge")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-badge-DCxvskdw.js.map
+//# sourceMappingURL=hx-badge-Xg7zoh4Q.js.map

package/dist/shared/hx-badge-Xg7zoh4Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-badge-Xg7zoh4Q.js","sources":["../../src/components/hx-badge/hx-badge.styles.ts","../../src/components/hx-badge/hx-badge.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBadgeStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-1, 0.25rem);\n    border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));\n    line-height: var(--hx-line-height-tight, 1.25);\n    white-space: nowrap;\n    vertical-align: middle;\n    position: relative;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .badge--sm {\n    font-size: var(--hx-badge-font-size, var(--hx-font-size-2xs, 0.625rem));\n    padding: var(--hx-badge-padding-y, var(--hx-space-0-5, 0.125rem))\n      var(--hx-badge-padding-x, var(--hx-space-1-5, 0.375rem));\n  }\n\n  .badge--md {\n    font-size: var(--hx-badge-font-size, var(--hx-font-size-xs, 0.75rem));\n    padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n      var(--hx-badge-padding-x, var(--hx-space-2, 0.5rem));\n  }\n\n  .badge--lg {\n    font-size: var(--hx-badge-font-size, var(--hx-font-size-sm, 0.875rem));\n    padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n      var(--hx-badge-padding-x, var(--hx-space-3, 0.75rem));\n  }\n\n  /* ─── Style Variants ─── */\n\n  .badge--primary {\n    --hx-badge-bg: var(--hx-color-primary-500, #2563eb);\n    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-badge-pulse-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  .badge--secondary {\n    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));\n    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #374151));\n    --hx-badge-pulse-color: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));\n  }\n\n  .badge--success {\n    --hx-badge-bg: var(--hx-color-success-700, #15803d);\n    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-badge-pulse-color: var(--hx-color-success-700, #15803d);\n  }\n\n  .badge--warning {\n    --hx-badge-bg: var(--hx-color-warning-500, #eab308);\n    --hx-badge-color: var(--hx-color-neutral-900, #1a1a1a);\n    --hx-badge-pulse-color: var(--hx-color-warning-500, #eab308);\n  }\n\n  .badge--error {\n    --hx-badge-bg: var(--hx-color-error-500, #dc2626);\n    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-badge-pulse-color: var(--hx-color-error-500, #dc2626);\n  }\n\n  .badge--neutral {\n    --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);\n    --hx-badge-color: var(--hx-color-neutral-700, #374151);\n    --hx-badge-pulse-color: var(--hx-color-neutral-200, #e5e7eb);\n  }\n\n  .badge--info {\n    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));\n    --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));\n    --hx-badge-pulse-color: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));\n  }\n\n  /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */\n  /* Visually hidden text prefix for semantic variants (success/warning/error/info). */\n  /* Ensures the variant is not conveyed by color alone.                             */\n\n  .badge__variant-label {\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  /* ─── Pill Mode ─── */\n\n  .badge--pill {\n    border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-full, 9999px));\n  }\n\n  /* ─── Dot Indicator (empty + pulse) ─── */\n\n  .badge--dot {\n    width: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));\n    height: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));\n    padding: 0;\n    border-radius: var(--hx-border-radius-full, 9999px);\n  }\n\n  /* Guard: hide prefix slot and slotted content in dot mode to prevent overflow */\n  .badge--dot ::slotted(*) {\n    display: none;\n  }\n\n  .badge--dot slot[name='prefix'] {\n    display: none;\n  }\n\n  /* ─── Pulse Animation ─── */\n\n  @keyframes hx-badge-pulse {\n    0%,\n    100% {\n      opacity: 1;\n      box-shadow: 0 0 0 2px var(--hx-badge-pulse-color, currentColor);\n    }\n    50% {\n      opacity: var(--hx-opacity-75, 0.75);\n      box-shadow: 0 0 0 6px transparent;\n    }\n  }\n\n  .badge--pulse {\n    animation: hx-badge-pulse var(--hx-badge-pulse-duration, var(--hx-duration-slow, 2s))\n      var(--hx-badge-pulse-easing, var(--hx-easing-in-out, ease-in-out)) infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .badge--pulse {\n      animation: none;\n    }\n  }\n\n  /* ─── Remove Button ─── */\n\n  .badge__remove-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: none;\n    padding: 0;\n    margin-inline-start: var(--hx-space-1, 0.25rem);\n    cursor: pointer;\n    color: inherit;\n    opacity: var(--hx-opacity-75, 0.75);\n    border-radius: var(--hx-border-radius-sm, 0.125rem);\n    line-height: 0;\n    /* WCAG 2.5.5: minimum 44×44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n  }\n\n  .badge__remove-button:hover {\n    opacity: var(--hx-opacity-100, 1);\n  }\n\n  .badge__remove-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);\n    outline-offset: var(--hx-focus-ring-offset, 1px);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixBadgeStyles } from './hx-badge.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A small status indicator for notifications, counts, and labels.\n *\n * @summary Presentational badge for status indicators, notification counts, and labels.\n *\n * @tag hx-badge\n *\n * @slot - Default slot for badge content (text, number). When empty with pulse enabled, renders as a dot indicator.\n * @slot prefix - Icon or content rendered before the badge text.\n *\n * @fires {CustomEvent<void>} hx-remove - Dispatched when the user clicks the remove button.\n *\n * @csspart badge - The badge element.\n * @csspart remove-button - The remove/dismiss button.\n *\n * @cssprop [--hx-badge-bg=var(--hx-color-primary-500)] - Badge background color. The primary override point.\n * @cssprop [--hx-badge-color=var(--hx-color-neutral-0)] - Badge text color. The primary override point.\n * @cssprop [--hx-badge-font-size] - Badge font size (set per size variant).\n * @cssprop [--hx-badge-font-weight=var(--hx-font-weight-semibold)] - Badge font weight.\n * @cssprop [--hx-badge-font-family=var(--hx-font-family-sans)] - Badge font family.\n * @cssprop [--hx-badge-border-radius=var(--hx-border-radius-md)] - Badge border radius.\n * @cssprop [--hx-badge-padding-x] - Badge horizontal padding (set per size variant).\n * @cssprop [--hx-badge-padding-y] - Badge vertical padding (set per size variant).\n * @cssprop [--hx-badge-pulse-color] - Pulse color matching variant background with reduced opacity.\n * @cssprop [--hx-badge-dot-size=var(--hx-size-2)] - Dot indicator size when rendered without content.\n * @cssprop [--hx-badge-secondary-bg=var(--hx-color-neutral-100)] - Background for the secondary variant.\n * @cssprop [--hx-badge-secondary-color=var(--hx-color-neutral-700)] - Text color for the secondary variant.\n * @cssprop [--hx-badge-info-bg=var(--hx-color-info-700)] - Background for the info variant.\n * @cssprop [--hx-badge-info-color=var(--hx-color-neutral-0)] - Text color for the info variant.\n */\n@customElement('hx-badge')\nexport class HelixBadge extends LitElement {\n  static override styles = [tokenStyles, helixBadgeStyles];\n\n  /**\n   * Visual style variant of the badge.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral' | 'info' =\n    'primary';\n\n  /**\n   * Size of the badge.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the badge uses fully rounded (pill) styling.\n   * @attr pill\n   */\n  @property({ type: Boolean, reflect: true })\n  pill = false;\n\n  /**\n   * Whether the badge displays an animated pulse for attention.\n   * @attr pulse\n   */\n  @property({ type: Boolean, reflect: true })\n  pulse = false;\n\n  /**\n   * Whether the badge renders a dismiss button.\n   * @attr removable\n   */\n  @property({ type: Boolean, reflect: true })\n  removable = false;\n\n  /**\n   * Numeric count to display. When set, renders the count as badge content.\n   * When count exceeds `max`, displays `${max}+` (e.g. `99+`).\n   * @attr count\n   */\n  @property({ type: Number, reflect: true })\n  count: number | undefined = undefined;\n\n  /**\n   * Maximum count value before truncation to `${max}+`. Defaults to 99.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 99;\n\n  /**\n   * Accessible label for the dot indicator mode (pulse + empty slot).\n   * Required for WCAG 4.1.2 compliance when using the dot indicator pattern.\n   * Example: `dot-label=\"3 new messages\"`.\n   * @attr dot-label\n   */\n  @property({ type: String, attribute: 'dot-label' })\n  dotLabel = '';\n\n  /**\n   * Accessible label for the remove button. Should describe what is being removed.\n   * Defaults to \"Remove\". For better accessibility, include context: e.g. \"Remove Critical badge\".\n   * @attr remove-label\n   */\n  @property({ type: String, attribute: 'remove-label' })\n  removeLabel = 'Remove';\n\n  /**\n   * Tracks whether the default slot has assigned content.\n   * @internal\n   */\n  @state()\n  private _hasSlotContent = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-badge', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as 'sm' | 'md' | 'lg';\n    }\n  }\n\n  // ─── Slot Change Handling ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    // Check if any assigned node has non-whitespace content\n    this._hasSlotContent = nodes.some((node) => {\n      if (node.nodeType === Node.ELEMENT_NODE) return true;\n      if (node.nodeType === Node.TEXT_NODE) {\n        return (node.textContent ?? '').trim().length > 0;\n      }\n      return false;\n    });\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleRemove(): void {\n    this.dispatchEvent(\n      new CustomEvent<void>('hx-remove', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  // ─── Count Display ───\n\n  /** @internal */\n  private get _countDisplay(): string {\n    if (this.count === undefined) return '';\n    return this.count > this.max ? `${this.max}+` : String(this.count);\n  }\n\n  // ─── WCAG 1.4.1: Semantic variant label map ───\n  // Variants that carry semantic meaning beyond decoration need a non-color cue.\n  // Visually-hidden text is prepended so screen reader users and color-blind\n  // users get the variant context even when no icon is slotted.\n\n  /** @internal */\n  private static readonly _SEMANTIC_VARIANT_LABELS: Partial<Record<HelixBadge['variant'], string>> =\n    {\n      success: 'Success',\n      warning: 'Warning',\n      error: 'Error',\n      info: 'Info',\n    };\n\n  /** @internal */\n  private get _semanticVariantLabel(): string {\n    return HelixBadge._SEMANTIC_VARIANT_LABELS[this.variant] ?? '';\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasCount = this.count !== undefined;\n    const isDot = !this._hasSlotContent && !hasCount && this.pulse;\n\n    if (isDot && !this.dotLabel) {\n      devWarn(\n        'hx-badge',\n        'Dot badge is missing an accessible label. Set `dotLabel` so screen readers can announce the badge purpose (WCAG 4.1.2).',\n      );\n    }\n\n    const classes = {\n      badge: true,\n      [`badge--${this.variant}`]: true,\n      [`badge--${this.size}`]: true,\n      'badge--pill': this.pill,\n      'badge--pulse': this.pulse,\n      'badge--dot': isDot,\n    };\n\n    const variantLabel = this._semanticVariantLabel;\n\n    return html`\n      <span\n        part=\"badge\"\n        class=${classMap(classes)}\n        role=${isDot && this.dotLabel ? 'img' : nothing}\n        aria-label=${isDot && this.dotLabel ? this.dotLabel : nothing}\n        aria-live=${hasCount ? 'polite' : nothing}\n      >\n        ${variantLabel\n          ? html`<span class=\"badge__variant-label\">${variantLabel}: </span>`\n          : nothing}\n        ${isDot ? nothing : html`<slot name=\"prefix\"></slot>`}\n        ${hasCount ? this._countDisplay : html`<slot @slotchange=${this._handleSlotChange}></slot>`}\n        ${this.removable\n          ? html`<button\n              part=\"remove-button\"\n              class=\"badge__remove-button\"\n              aria-label=${this.removeLabel}\n              @click=${this._handleRemove}\n            >\n              <svg viewBox=\"0 0 12 12\" aria-hidden=\"true\" width=\"10\" height=\"10\">\n                <path\n                  d=\"M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </button>`\n          : nothing}\n      </span>\n    `;\n  }\n}\n\n/**\n * @deprecated Use `HelixBadge` instead. This alias will be removed in a future\n * major version as part of the project-wide migration from `Wc` to `Hx` prefixes.\n * @since 0.1.0\n * @removal-target 1.0.0\n */\nexport type WcBadge = HelixBadge;\n\n/** Canonical type alias for the hx-badge component. */\nexport type HxBadge = HelixBadge;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-badge': HelixBadge;\n  }\n}\n"],"names":["helixBadgeStyles","css","HelixBadge","LitElement","legacySize","e","nodes","node","hasCount","isDot","classes","variantLabel","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}