npm - @helixui/library - Versions diffs - 1.1.2-next.1 → 1.1.2-next.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

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

@@ -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} RENAMED Viewed

	@@ -1 +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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"}
1	+ {"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-badge-DCxvskdw.js → hx-badge-Xg7zoh4Q.js} RENAMED Viewed

@@ -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 ADDED Viewed

@@ -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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"}

package/dist/shared/hx-breadcrumb-item-B2rjepqy.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-breadcrumb-item-B2rjepqy.js","sources":["../../src/components/hx-breadcrumb/hx-breadcrumb.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBreadcrumbStyles = css`\n :host {\n display: block;\n font-family: var(\n --hx-breadcrumb-font-family,\n var(--hx-font-family-sans, system-ui, sans-serif)\n );\n font-size: var(--hx-breadcrumb-font-size, var(--hx-font-size-sm, 0.875rem));\n }\n\n [part='nav'] {\n /* nav landmark — no additional styling needed /\n }\n\n [part='list'] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: 0;\n }\n\n / Hide middle items when collapsed via maxItems /\n ::slotted([data-bc-hidden]) {\n display: none;\n }\n\n / Visually hide the separator slot — used only to read text content.\n * display:none is intentional: the slot contains no interactive or focusable\n * content. If a future change adds focusable elements to this slot, switch to\n * visibility:hidden + position:absolute to preserve focus reachability. /\n .separator-slot {\n display: none;\n }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixBreadcrumbStyles } from './hx-breadcrumb.styles.js';\n\n/\n Hierarchical page path navigation showing current location in site structure.\n \n @summary Navigation breadcrumb showing the page hierarchy. Works with Drupal's breadcrumb system.\n \n @tag hx-breadcrumb\n \n @slot - Default slot for hx-breadcrumb-item children.\n * @slot separator - Optional separator element. Its text content overrides the `separator` property.\n \n @csspart nav - The nav landmark element.\n * @csspart list - The ordered list containing items.\n \n @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character between items.\n * NOTE: If overriding this custom property directly in CSS (rather than via the `separator`\n * attribute), the value MUST be quoted: `--hx-breadcrumb-separator-content: \">\"`. An unquoted\n * value is invalid for the CSS `content` property and will silently render nothing.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal gap around separators.\n * @cssprop [--hx-breadcrumb-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-item-max-width] - Max-width for item text truncation (e.g. `12rem`).\n /\n/* Typed schema.org ListItem entry for JSON-LD BreadcrumbList structured data. /\ninterface JsonLdListItem {\n '@type': string;\n position: number;\n name: string;\n item?: string;\n}\n\n/* Breadcrumb navigation component with automatic truncation and JSON-LD structured data. @tag hx-breadcrumb /\n@customElement('hx-breadcrumb')\nexport class HelixBreadcrumb extends LitElement {\n static override styles = [tokenStyles, helixBreadcrumbStyles];\n\n /\n Per-instance counter used to generate stable, deterministic IDs for the\n * injected JSON-LD script tags. Deterministic IDs (vs Math.random()) allow\n * SSR frameworks to match server-rendered script tags during hydration.\n /\n /* @internal /\n private static _instanceCounter = 0;\n\n /\n The separator character displayed between breadcrumb items.\n * @attr separator\n /\n @property({ type: String })\n separator = '/';\n\n /\n The accessible label for the nav landmark.\n * @attr label\n /\n @property({ type: String })\n label = 'Breadcrumb';\n\n /\n Maximum number of items to show before collapsing middle items with an ellipsis.\n * Set to 0 (default) to show all items. The ellipsis is a keyboard-accessible\n * button; activating it expands the full breadcrumb by setting maxItems to 0.\n * @attr max-items\n /\n @property({ type: Number, attribute: 'max-items' })\n maxItems = 0;\n\n /\n Accessible label for the expand ellipsis button. Override for i18n.\n * @attr label-ellipsis\n /\n @property({ attribute: 'label-ellipsis' }) labelEllipsis = 'Show all breadcrumb items';\n\n /\n When true, injects a JSON-LD BreadcrumbList structured data script into the document head.\n \n NOTE: Drupal manages `<head>` content via its own render pipeline. Injecting a\n * `<script>` directly via `document.head.appendChild()` in a Drupal context:\n * 1. Bypasses Drupal's deduplication and `hook_html_head_alter()` hook.\n * 2. Is not cacheable by Drupal's page cache.\n * 3. Will be wiped on BigPipe partial page replacements.\n \n For Drupal integrations, leave `json-ld` false and use the structured data\n * Twig template instead (see `hx-breadcrumb.twig` in the component directory).\n \n @attr json-ld\n /\n @property({ type: Boolean, attribute: 'json-ld' })\n jsonLd = false;\n\n /* @internal /\n private _ellipsisItem: Element \| null = null;\n /* @internal /\n private _jsonLdScript: HTMLScriptElement \| null = null;\n /* @internal /\n private readonly _boundEllipsisClick = (e: Event) => this._handleEllipsisClick(e);\n /* @internal /\n private readonly _boundEllipsisKeydown = (e: Event) => this._handleEllipsisKeydown(e);\n\n /\n Tracks which items had their `current` attribute set by this component\n * (as opposed to set by a consumer/Drupal template). This lets us re-evaluate\n * positional current-page detection on each slotchange without incorrectly\n * treating a previously component-set `current` attribute as a consumer-set\n * explicit override.\n /\n /* @internal /\n private readonly _managedCurrentItems = new WeakSet<Element>();\n\n /\n Stable per-instance ID used to tag the injected script element so that\n * multiple hx-breadcrumb instances on the same page don't produce conflicting\n * or duplicate structured-data blocks. Each instance owns exactly one script\n * tag identified by this ID; any stale tag from a previous render cycle is\n * removed before a new one is inserted.\n \n Uses a static counter (not Math.random()) so IDs are deterministic across\n * server and client renders, enabling SSR hydration matching.\n /\n /* @internal /\n private readonly _jsonLdId = `hx-breadcrumb-ld-${++HelixBreadcrumb._instanceCounter}`;\n\n // ─── Item Helpers ───\n\n /* Returns only real breadcrumb items, excluding the managed ellipsis element. /\n /* @internal /\n private _getBreadcrumbItems(slot: HTMLSlotElement): Element[] {\n return slot\n .assignedElements({ flatten: true })\n .filter(\n (el) =>\n el.tagName.toLowerCase() === 'hx-breadcrumb-item' &&\n !el.classList.contains('hx-bc-ellipsis'),\n );\n }\n\n /\n Applies aria/state attributes to the item list.\n \n Current-page detection: if any item has an explicit `current` attribute\n * (e.g. set by a Drupal Twig template), that item is treated as the current\n * page. Otherwise the last item is the current page (default behaviour).\n \n This separation allows Drupal to control current-page marking without\n * relying on item order.\n /\n /* @internal /\n private _applyItemAttributes(items: Element[]): void {\n // Detect consumer-set 'current' attributes. An item has an explicit consumer\n // current if it has the 'current' attribute AND the component did not set it\n // (tracked via _managedCurrentItems). This prevents component-managed state\n // from being misread as a consumer override on subsequent slotchange events.\n const hasExplicitCurrent = items.some(\n (el) => el.hasAttribute('current') && !this._managedCurrentItems.has(el),\n );\n\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n const isLast = i === items.length - 1;\n\n // Separator hiding: always positional — last item has no trailing separator.\n if (isLast) {\n el.setAttribute('data-bc-last', '');\n } else {\n el.removeAttribute('data-bc-last');\n }\n\n // Current-page marker: explicit consumer attribute wins over positional last.\n // The item component renders aria-current=\"page\" on its inner element\n // based on this attribute (see hx-breadcrumb-item.ts).\n if (!hasExplicitCurrent) {\n if (isLast) {\n el.setAttribute('current', '');\n this._managedCurrentItems.add(el);\n } else {\n el.removeAttribute('current');\n this._managedCurrentItems.delete(el);\n }\n }\n // When hasExplicitCurrent is true, leave 'current' attributes as-is so\n // consumer or Drupal template markup is not overridden.\n });\n }\n\n // ─── Slot Handling ───\n\n /* @internal /\n private _handleSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const items = this._getBreadcrumbItems(e.target);\n\n // Handle collapse behaviour\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n\n this._applyItemAttributes(items);\n\n if (this.jsonLd) {\n this._updateJsonLd(items);\n }\n }\n\n /* @internal /\n private _handleSeparatorSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const assigned = e.target.assignedElements({ flatten: true });\n if (assigned.length > 0) {\n const text = (assigned[0] as HTMLElement).textContent?.trim() ?? '';\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(text));\n }\n }\n\n // ─── Collapse ───\n\n /* @internal /\n private _applyCollapse(items: Element[]): void {\n // Show only first and last; hide all middle items\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n if (i === 0 \|\| i === items.length - 1) {\n el.removeAttribute('data-bc-hidden');\n } else {\n el.setAttribute('data-bc-hidden', '');\n }\n });\n\n // Create the ellipsis element once (guard for SSR — document is unavailable server-side)\n if (!this._ellipsisItem && typeof document !== 'undefined') {\n const ellipsis = document.createElement('hx-breadcrumb-item');\n ellipsis.classList.add('hx-bc-ellipsis');\n\n // Keyboard-accessible expand button. Events handled via host-level delegation\n // in _handleEllipsisClick / _handleEllipsisKeydown.\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.textContent = '…';\n btn.setAttribute('aria-label', this.labelEllipsis);\n ellipsis.appendChild(btn);\n\n this._ellipsisItem = ellipsis;\n }\n\n // Insert ellipsis after first item only if not already correctly placed\n const firstItem = items[0];\n if (!firstItem \|\| !this._ellipsisItem) return;\n if (this._ellipsisItem.previousElementSibling !== firstItem) {\n firstItem.after(this._ellipsisItem);\n }\n }\n\n /* @internal /\n private _removeCollapse(items: Element[]): void {\n items.forEach((item) => {\n (item as HTMLElement).removeAttribute('data-bc-hidden');\n });\n\n if (this._ellipsisItem?.isConnected) {\n this._ellipsisItem.remove();\n }\n }\n\n /* @internal /\n private _handleEllipsisClick(e: Event): void {\n if ((e.target as Element)?.closest?.('.hx-bc-ellipsis')) {\n this._expandBreadcrumb();\n }\n }\n\n /* @internal /\n private _handleEllipsisKeydown(e: Event): void {\n if (!(e instanceof KeyboardEvent)) return;\n if (e.key === 'Enter' \|\| e.key === ' ') {\n if ((e.target as Element)?.closest?.('.hx-bc-ellipsis')) {\n e.preventDefault();\n this._expandBreadcrumb();\n }\n }\n }\n\n /\n Expands a collapsed breadcrumb by resetting maxItems to 0.\n * Called by the ellipsis expand button (click or Enter/Space).\n /\n /* @internal /\n private _expandBreadcrumb(): void {\n this.maxItems = 0;\n // updated() will detect the maxItems change and call _removeCollapse.\n }\n\n // ─── JSON-LD ───\n\n /\n JSON-LD ListItem entry with typed fields to avoid Record<string, unknown>.\n /\n /* @internal /\n private _buildListItem(item: Element, position: number): JsonLdListItem {\n const href = (item as HTMLElement).getAttribute('href');\n const name = (item as HTMLElement).textContent?.trim() ?? '';\n const entry: JsonLdListItem = {\n '@type': 'ListItem',\n position,\n name,\n };\n if (href) entry.item = href;\n return entry;\n }\n\n /* @internal /\n private _updateJsonLd(items: Element[]): void {\n const schema = {\n '@context': 'https://schema.org',\n '@type': 'BreadcrumbList',\n itemListElement: items.map((item, i) => this._buildListItem(item, i + 1)),\n };\n\n // Guard for SSR — document is unavailable server-side\n if (typeof document === 'undefined') return;\n\n if (!this._jsonLdScript) {\n // Dedup guard: remove any stale script with this instance's ID before\n // creating a fresh one. This handles the edge case where the element was\n // reconnected to the DOM after being disconnected without the script\n // reference being re-established.\n document.getElementById(this._jsonLdId)?.remove();\n\n this._jsonLdScript = document.createElement('script');\n this._jsonLdScript.type = 'application/ld+json';\n this._jsonLdScript.id = this._jsonLdId;\n this._jsonLdScript.setAttribute('data-hx-breadcrumb', '');\n document.head.appendChild(this._jsonLdScript);\n }\n\n this._jsonLdScript.textContent = JSON.stringify(schema);\n }\n\n /* @internal /\n private _removeJsonLd(): void {\n this._jsonLdScript?.remove();\n this._jsonLdScript = null;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('click', this._boundEllipsisClick);\n this.addEventListener('keydown', this._boundEllipsisKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('click', this._boundEllipsisClick);\n this.removeEventListener('keydown', this._boundEllipsisKeydown);\n this._removeJsonLd();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('separator')) {\n // JSON.stringify wraps the string in quotes so the value is valid\n // for use in the CSS `content` property (e.g. '/' becomes '\"/\"').\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(this.separator));\n }\n\n if (changedProperties.has('maxItems')) {\n // Re-evaluate collapse state when maxItems changes programmatically\n // (e.g. when the expand button resets maxItems to 0).\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n const items = this._getBreadcrumbItems(slot);\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n this._applyItemAttributes(items);\n }\n }\n\n if (changedProperties.has('jsonLd')) {\n if (this.jsonLd) {\n // json-ld toggled on after initial render — inject script immediately.\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n this._updateJsonLd(this._getBreadcrumbItems(slot));\n }\n } else {\n // json-ld toggled off — remove existing script.\n this._removeJsonLd();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <nav part=\"nav\" aria-label=${this.label}>\n <ol part=\"list\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </ol>\n </nav>\n <slot\n name=\"separator\"\n class=\"separator-slot\"\n @slotchange=${this._handleSeparatorSlotChange}\n ></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb': HelixBreadcrumb;\n }\n}\n","import { css } from 'lit';\n\nexport const helixBreadcrumbItemStyles = css`\n :host {\n display: inline-flex;\n align-items: center;\n }\n\n /\n * display: contents removes [part='item'] from the box model entirely.\n * This is intentional — the wrapper exists only for slot selection purposes.\n * Consumers using ::part(item) CANNOT apply box-model properties (padding,\n * margin, background, border) to this part. Use ::part(link) or ::part(text)\n * for visual styling of breadcrumb item content.\n /\n [part='item'] {\n display: contents;\n }\n\n [part='link'] {\n color: var(--hx-breadcrumb-link-color, var(--hx-color-primary-600));\n text-decoration: none;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n [part='link']:hover {\n color: var(--hx-breadcrumb-link-hover-color, var(--hx-color-primary-700));\n text-decoration: underline;\n }\n\n [part='link']:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-breadcrumb-link-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-radius: var(--hx-border-radius-sm, 0.125rem);\n }\n\n [part='text'] {\n color: var(--hx-breadcrumb-text-color, var(--hx-color-neutral-700));\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .separator {\n margin-inline: var(--hx-breadcrumb-separator-gap, var(--hx-space-1, 0.25rem));\n color: var(--hx-breadcrumb-separator-color, var(--hx-color-neutral-400));\n user-select: none;\n }\n\n .separator::before {\n content: var(--hx-breadcrumb-separator-content, '/');\n }\n\n / Normalize buttons slotted into breadcrumb items (e.g. the expand-ellipsis button). /\n ::slotted(button) {\n background: none;\n border: none;\n cursor: pointer;\n font: inherit;\n color: inherit;\n padding: 0;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixBreadcrumbItemStyles } from './hx-breadcrumb-item.styles.js';\n\n/\n A single breadcrumb navigation item.\n \n @summary A navigation item within an hx-breadcrumb component. Renders as a link when `href` is\n * provided, or as static text for the current page item. The current page item is determined by\n * the `current` attribute (set explicitly or automatically by the parent `hx-breadcrumb`).\n \n @tag hx-breadcrumb-item\n \n @slot - The link or page text content. Accepts text, HTML, or icon elements.\n \n @csspart item - Wrapper around the link or text content.\n * @csspart link - The anchor element when href is provided (non-current items only).\n * @csspart text - The span element for the current page or items without href.\n * @csspart separator - The separator element rendered after non-last items.\n \n @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link text color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover text color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character displayed after non-last items.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal margin around separator.\n * @cssprop [--hx-breadcrumb-item-max-width] - Optional max-width for text truncation.\n /\n@customElement('hx-breadcrumb-item')\nexport class HelixBreadcrumbItem extends LitElement {\n static override styles = [tokenStyles, helixBreadcrumbItemStyles];\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Only apply role=\"listitem\" when this item is a direct child of an\n // hx-breadcrumb element. Setting the role unconditionally when used\n // standalone (outside a list context) creates an invalid ARIA hierarchy\n // because listitem requires a list ancestor.\n //\n // IMPORTANT: If programmatically creating an ellipsis element, set aria-hidden\n // BEFORE inserting into the DOM. connectedCallback fires on insertion and sets\n // role=\"listitem\"; setting aria-hidden after would momentarily expose an\n // un-hidden listitem to the accessibility tree.\n if (this.closest('hx-breadcrumb') !== null) {\n this.setAttribute('role', 'listitem');\n } else {\n this.removeAttribute('role');\n }\n }\n\n /\n The URL for this breadcrumb link. Omit for the current page item.\n * When `current` is true, this attribute is ignored and the item always\n * renders as static text per WAI-ARIA APG breadcrumb guidance.\n * @attr href\n /\n @property({ type: String, reflect: true })\n href: string \| undefined = undefined;\n\n /\n Whether this is the last item in the breadcrumb trail. Set by the parent\n * hx-breadcrumb component via the `data-bc-last` boolean attribute. When\n * present the trailing separator is hidden.\n \n @attr data-bc-last\n * @internal\n /\n @property({ type: Boolean, attribute: 'data-bc-last', reflect: true })\n dataBcLast = false;\n\n /\n Marks this item as the current page. When set, the item always renders as\n * static text (never a navigable link) and `aria-current=\"page\"` is placed on\n * the inner text element per WAI-ARIA APG breadcrumb guidance, yielding the\n * canonical AT announcement (\"current page, Patient Records\").\n \n Can be set explicitly by consumers (e.g. Drupal Twig templates) to override\n * the default positional last-item detection in `hx-breadcrumb`. When any item\n * in the breadcrumb has an explicit `current` attribute, the parent will not\n * override it.\n \n @attr current\n */\n @property({ type: Boolean, reflect: true })\n current = false;\n\n override render() {\n // Per WAI-ARIA APG, the current page item MUST NOT be a navigable link.\n // aria-current=\"page\" is placed on the inner element (not the listitem host)\n // for canonical AT announcement (\"current page, Patient Records\" vs\n // \"current page, list item\").\n return html`\n <span part=\"item\">\n ${this.current\n ? html`<span part=\"text\" aria-current=\"page\"><slot></slot></span>`\n : this.href\n ? html`<a part=\"link\" href=${this.href}><slot></slot></a>`\n : html`<span part=\"text\"><slot></slot></span>`}\n </span>\n ${!this.dataBcLast\n ? html`<span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>`\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb-item': HelixBreadcrumbItem;\n }\n}\n"],"names":["helixBreadcrumbStyles","css","HelixBreadcrumb","LitElement","e","slot","el","items","hasExplicitCurrent","item","isLast","assigned","text","_a","ellipsis","btn","firstItem","_b","position","href","name","entry","schema","i","changedProperties","html","tokenStyles","__decorateClass","property","customElement","helixBreadcrumbItemStyles","HelixBreadcrumbItem","nothing"],"mappings":"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"}
1	+ {"version":3,"file":"hx-breadcrumb-item-B2rjepqy.js","sources":["../../src/components/hx-breadcrumb/hx-breadcrumb.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBreadcrumbStyles = css`\n :host {\n display: block;\n font-family: var(\n --hx-breadcrumb-font-family,\n var(--hx-font-family-sans, system-ui, sans-serif)\n );\n font-size: var(--hx-breadcrumb-font-size, var(--hx-font-size-sm, 0.875rem));\n }\n\n [part='nav'] {\n /* nav landmark — no additional styling needed /\n }\n\n [part='list'] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: 0;\n }\n\n / Hide middle items when collapsed via maxItems /\n ::slotted([data-bc-hidden]) {\n display: none;\n }\n\n / Visually hide the separator slot — used only to read text content.\n * display:none is intentional: the slot contains no interactive or focusable\n * content. If a future change adds focusable elements to this slot, switch to\n * visibility:hidden + position:absolute to preserve focus reachability. /\n .separator-slot {\n display: none;\n }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixBreadcrumbStyles } from './hx-breadcrumb.styles.js';\n\n/* Typed schema.org ListItem entry for JSON-LD BreadcrumbList structured data. /\ninterface JsonLdListItem {\n '@type': string;\n position: number;\n name: string;\n item?: string;\n}\n\n/\n Hierarchical page path navigation showing current location in site structure.\n \n @summary Navigation breadcrumb showing the page hierarchy. Works with Drupal's breadcrumb system.\n \n @tag hx-breadcrumb\n \n @slot - Default slot for hx-breadcrumb-item children.\n * @slot separator - Optional separator element. Its text content overrides the `separator` property.\n \n @csspart nav - The nav landmark element.\n * @csspart list - The ordered list containing items.\n \n @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character between items.\n * NOTE: If overriding this custom property directly in CSS (rather than via the `separator`\n * attribute), the value MUST be quoted: `--hx-breadcrumb-separator-content: \">\"`. An unquoted\n * value is invalid for the CSS `content` property and will silently render nothing.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal gap around separators.\n * @cssprop [--hx-breadcrumb-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-item-max-width] - Max-width for item text truncation (e.g. `12rem`).\n /\n@customElement('hx-breadcrumb')\nexport class HelixBreadcrumb extends LitElement {\n static override styles = [tokenStyles, helixBreadcrumbStyles];\n\n /\n Per-instance counter used to generate stable, deterministic IDs for the\n * injected JSON-LD script tags. Deterministic IDs (vs Math.random()) allow\n * SSR frameworks to match server-rendered script tags during hydration.\n /\n /* @internal /\n private static _instanceCounter = 0;\n\n /\n The separator character displayed between breadcrumb items.\n * @attr separator\n /\n @property({ type: String })\n separator = '/';\n\n /\n The accessible label for the nav landmark.\n * @attr label\n /\n @property({ type: String })\n label = 'Breadcrumb';\n\n /\n Maximum number of items to show before collapsing middle items with an ellipsis.\n * Set to 0 (default) to show all items. The ellipsis is a keyboard-accessible\n * button; activating it expands the full breadcrumb by setting maxItems to 0.\n * @attr max-items\n /\n @property({ type: Number, attribute: 'max-items' })\n maxItems = 0;\n\n /\n Accessible label for the expand ellipsis button. Override for i18n.\n * @attr label-ellipsis\n /\n @property({ attribute: 'label-ellipsis' }) labelEllipsis = 'Show all breadcrumb items';\n\n /\n When true, injects a JSON-LD BreadcrumbList structured data script into the document head.\n \n NOTE: Drupal manages `<head>` content via its own render pipeline. Injecting a\n * `<script>` directly via `document.head.appendChild()` in a Drupal context:\n * 1. Bypasses Drupal's deduplication and `hook_html_head_alter()` hook.\n * 2. Is not cacheable by Drupal's page cache.\n * 3. Will be wiped on BigPipe partial page replacements.\n \n For Drupal integrations, leave `json-ld` false and use the structured data\n * Twig template instead (see `hx-breadcrumb.twig` in the component directory).\n \n @attr json-ld\n /\n @property({ type: Boolean, attribute: 'json-ld' })\n jsonLd = false;\n\n /* @internal /\n private _ellipsisItem: Element \| null = null;\n /* @internal /\n private _jsonLdScript: HTMLScriptElement \| null = null;\n /* @internal /\n private readonly _boundEllipsisClick = (e: Event) => this._handleEllipsisClick(e);\n /* @internal /\n private readonly _boundEllipsisKeydown = (e: Event) => this._handleEllipsisKeydown(e);\n\n /\n Tracks which items had their `current` attribute set by this component\n * (as opposed to set by a consumer/Drupal template). This lets us re-evaluate\n * positional current-page detection on each slotchange without incorrectly\n * treating a previously component-set `current` attribute as a consumer-set\n * explicit override.\n /\n /* @internal /\n private readonly _managedCurrentItems = new WeakSet<Element>();\n\n /\n Stable per-instance ID used to tag the injected script element so that\n * multiple hx-breadcrumb instances on the same page don't produce conflicting\n * or duplicate structured-data blocks. Each instance owns exactly one script\n * tag identified by this ID; any stale tag from a previous render cycle is\n * removed before a new one is inserted.\n \n Uses a static counter (not Math.random()) so IDs are deterministic across\n * server and client renders, enabling SSR hydration matching.\n /\n /* @internal /\n private readonly _jsonLdId = `hx-breadcrumb-ld-${++HelixBreadcrumb._instanceCounter}`;\n\n // ─── Item Helpers ───\n\n /* Returns only real breadcrumb items, excluding the managed ellipsis element. /\n /* @internal /\n private _getBreadcrumbItems(slot: HTMLSlotElement): Element[] {\n return slot\n .assignedElements({ flatten: true })\n .filter(\n (el) =>\n el.tagName.toLowerCase() === 'hx-breadcrumb-item' &&\n !el.classList.contains('hx-bc-ellipsis'),\n );\n }\n\n /\n Applies aria/state attributes to the item list.\n \n Current-page detection: if any item has an explicit `current` attribute\n * (e.g. set by a Drupal Twig template), that item is treated as the current\n * page. Otherwise the last item is the current page (default behaviour).\n \n This separation allows Drupal to control current-page marking without\n * relying on item order.\n /\n /* @internal /\n private _applyItemAttributes(items: Element[]): void {\n // Detect consumer-set 'current' attributes. An item has an explicit consumer\n // current if it has the 'current' attribute AND the component did not set it\n // (tracked via _managedCurrentItems). This prevents component-managed state\n // from being misread as a consumer override on subsequent slotchange events.\n const hasExplicitCurrent = items.some(\n (el) => el.hasAttribute('current') && !this._managedCurrentItems.has(el),\n );\n\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n const isLast = i === items.length - 1;\n\n // Separator hiding: always positional — last item has no trailing separator.\n if (isLast) {\n el.setAttribute('data-bc-last', '');\n } else {\n el.removeAttribute('data-bc-last');\n }\n\n // Current-page marker: explicit consumer attribute wins over positional last.\n // The item component renders aria-current=\"page\" on its inner element\n // based on this attribute (see hx-breadcrumb-item.ts).\n if (!hasExplicitCurrent) {\n if (isLast) {\n el.setAttribute('current', '');\n this._managedCurrentItems.add(el);\n } else {\n el.removeAttribute('current');\n this._managedCurrentItems.delete(el);\n }\n }\n // When hasExplicitCurrent is true, leave 'current' attributes as-is so\n // consumer or Drupal template markup is not overridden.\n });\n }\n\n // ─── Slot Handling ───\n\n /* @internal /\n private _handleSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const items = this._getBreadcrumbItems(e.target);\n\n // Handle collapse behaviour\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n\n this._applyItemAttributes(items);\n\n if (this.jsonLd) {\n this._updateJsonLd(items);\n }\n }\n\n /* @internal /\n private _handleSeparatorSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const assigned = e.target.assignedElements({ flatten: true });\n if (assigned.length > 0) {\n const text = (assigned[0] as HTMLElement).textContent?.trim() ?? '';\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(text));\n }\n }\n\n // ─── Collapse ───\n\n /* @internal /\n private _applyCollapse(items: Element[]): void {\n // Show only first and last; hide all middle items\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n if (i === 0 \|\| i === items.length - 1) {\n el.removeAttribute('data-bc-hidden');\n } else {\n el.setAttribute('data-bc-hidden', '');\n }\n });\n\n // Create the ellipsis element once (guard for SSR — document is unavailable server-side)\n if (!this._ellipsisItem && typeof document !== 'undefined') {\n const ellipsis = document.createElement('hx-breadcrumb-item');\n ellipsis.classList.add('hx-bc-ellipsis');\n\n // Keyboard-accessible expand button. Events handled via host-level delegation\n // in _handleEllipsisClick / _handleEllipsisKeydown.\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.textContent = '…';\n btn.setAttribute('aria-label', this.labelEllipsis);\n ellipsis.appendChild(btn);\n\n this._ellipsisItem = ellipsis;\n }\n\n // Insert ellipsis after first item only if not already correctly placed\n const firstItem = items[0];\n if (!firstItem \|\| !this._ellipsisItem) return;\n if (this._ellipsisItem.previousElementSibling !== firstItem) {\n firstItem.after(this._ellipsisItem);\n }\n }\n\n /* @internal /\n private _removeCollapse(items: Element[]): void {\n items.forEach((item) => {\n (item as HTMLElement).removeAttribute('data-bc-hidden');\n });\n\n if (this._ellipsisItem?.isConnected) {\n this._ellipsisItem.remove();\n }\n }\n\n /* @internal /\n private _handleEllipsisClick(e: Event): void {\n if ((e.target as Element)?.closest?.('.hx-bc-ellipsis')) {\n this._expandBreadcrumb();\n }\n }\n\n /* @internal /\n private _handleEllipsisKeydown(e: Event): void {\n if (!(e instanceof KeyboardEvent)) return;\n if (e.key === 'Enter' \|\| e.key === ' ') {\n if ((e.target as Element)?.closest?.('.hx-bc-ellipsis')) {\n e.preventDefault();\n this._expandBreadcrumb();\n }\n }\n }\n\n /\n Expands a collapsed breadcrumb by resetting maxItems to 0.\n * Called by the ellipsis expand button (click or Enter/Space).\n /\n /* @internal /\n private _expandBreadcrumb(): void {\n this.maxItems = 0;\n // updated() will detect the maxItems change and call _removeCollapse.\n }\n\n // ─── JSON-LD ───\n\n /\n JSON-LD ListItem entry with typed fields to avoid Record<string, unknown>.\n /\n /* @internal /\n private _buildListItem(item: Element, position: number): JsonLdListItem {\n const href = (item as HTMLElement).getAttribute('href');\n const name = (item as HTMLElement).textContent?.trim() ?? '';\n const entry: JsonLdListItem = {\n '@type': 'ListItem',\n position,\n name,\n };\n if (href) entry.item = href;\n return entry;\n }\n\n /* @internal /\n private _updateJsonLd(items: Element[]): void {\n const schema = {\n '@context': 'https://schema.org',\n '@type': 'BreadcrumbList',\n itemListElement: items.map((item, i) => this._buildListItem(item, i + 1)),\n };\n\n // Guard for SSR — document is unavailable server-side\n if (typeof document === 'undefined') return;\n\n if (!this._jsonLdScript) {\n // Dedup guard: remove any stale script with this instance's ID before\n // creating a fresh one. This handles the edge case where the element was\n // reconnected to the DOM after being disconnected without the script\n // reference being re-established.\n document.getElementById(this._jsonLdId)?.remove();\n\n this._jsonLdScript = document.createElement('script');\n this._jsonLdScript.type = 'application/ld+json';\n this._jsonLdScript.id = this._jsonLdId;\n this._jsonLdScript.setAttribute('data-hx-breadcrumb', '');\n document.head.appendChild(this._jsonLdScript);\n }\n\n this._jsonLdScript.textContent = JSON.stringify(schema);\n }\n\n /* @internal /\n private _removeJsonLd(): void {\n this._jsonLdScript?.remove();\n this._jsonLdScript = null;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('click', this._boundEllipsisClick);\n this.addEventListener('keydown', this._boundEllipsisKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('click', this._boundEllipsisClick);\n this.removeEventListener('keydown', this._boundEllipsisKeydown);\n this._removeJsonLd();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('separator')) {\n // JSON.stringify wraps the string in quotes so the value is valid\n // for use in the CSS `content` property (e.g. '/' becomes '\"/\"').\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(this.separator));\n }\n\n if (changedProperties.has('maxItems')) {\n // Re-evaluate collapse state when maxItems changes programmatically\n // (e.g. when the expand button resets maxItems to 0).\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n const items = this._getBreadcrumbItems(slot);\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n this._applyItemAttributes(items);\n }\n }\n\n if (changedProperties.has('jsonLd')) {\n if (this.jsonLd) {\n // json-ld toggled on after initial render — inject script immediately.\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n this._updateJsonLd(this._getBreadcrumbItems(slot));\n }\n } else {\n // json-ld toggled off — remove existing script.\n this._removeJsonLd();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <nav part=\"nav\" aria-label=${this.label}>\n <ol part=\"list\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </ol>\n </nav>\n <slot\n name=\"separator\"\n class=\"separator-slot\"\n @slotchange=${this._handleSeparatorSlotChange}\n ></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb': HelixBreadcrumb;\n }\n}\n","import { css } from 'lit';\n\nexport const helixBreadcrumbItemStyles = css`\n :host {\n display: inline-flex;\n align-items: center;\n }\n\n /\n * display: contents removes [part='item'] from the box model entirely.\n * This is intentional — the wrapper exists only for slot selection purposes.\n * Consumers using ::part(item) CANNOT apply box-model properties (padding,\n * margin, background, border) to this part. Use ::part(link) or ::part(text)\n * for visual styling of breadcrumb item content.\n /\n [part='item'] {\n display: contents;\n }\n\n [part='link'] {\n color: var(--hx-breadcrumb-link-color, var(--hx-color-primary-600));\n text-decoration: none;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n [part='link']:hover {\n color: var(--hx-breadcrumb-link-hover-color, var(--hx-color-primary-700));\n text-decoration: underline;\n }\n\n [part='link']:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-breadcrumb-link-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-radius: var(--hx-border-radius-sm, 0.125rem);\n }\n\n [part='text'] {\n color: var(--hx-breadcrumb-text-color, var(--hx-color-neutral-700));\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .separator {\n margin-inline: var(--hx-breadcrumb-separator-gap, var(--hx-space-1, 0.25rem));\n color: var(--hx-breadcrumb-separator-color, var(--hx-color-neutral-400));\n user-select: none;\n }\n\n .separator::before {\n content: var(--hx-breadcrumb-separator-content, '/');\n }\n\n / Normalize buttons slotted into breadcrumb items (e.g. the expand-ellipsis button). /\n ::slotted(button) {\n background: none;\n border: none;\n cursor: pointer;\n font: inherit;\n color: inherit;\n padding: 0;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixBreadcrumbItemStyles } from './hx-breadcrumb-item.styles.js';\n\n/\n A single breadcrumb navigation item.\n \n @summary A navigation item within an hx-breadcrumb component. Renders as a link when `href` is\n * provided, or as static text for the current page item. The current page item is determined by\n * the `current` attribute (set explicitly or automatically by the parent `hx-breadcrumb`).\n \n @tag hx-breadcrumb-item\n \n @slot - The link or page text content. Accepts text, HTML, or icon elements.\n \n @csspart item - Wrapper around the link or text content.\n * @csspart link - The anchor element when href is provided (non-current items only).\n * @csspart text - The span element for the current page or items without href.\n * @csspart separator - The separator element rendered after non-last items.\n \n @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link text color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover text color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character displayed after non-last items.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal margin around separator.\n * @cssprop [--hx-breadcrumb-item-max-width] - Optional max-width for text truncation.\n /\n@customElement('hx-breadcrumb-item')\nexport class HelixBreadcrumbItem extends LitElement {\n static override styles = [tokenStyles, helixBreadcrumbItemStyles];\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Only apply role=\"listitem\" when this item is a direct child of an\n // hx-breadcrumb element. Setting the role unconditionally when used\n // standalone (outside a list context) creates an invalid ARIA hierarchy\n // because listitem requires a list ancestor.\n //\n // IMPORTANT: If programmatically creating an ellipsis element, set aria-hidden\n // BEFORE inserting into the DOM. connectedCallback fires on insertion and sets\n // role=\"listitem\"; setting aria-hidden after would momentarily expose an\n // un-hidden listitem to the accessibility tree.\n if (this.closest('hx-breadcrumb') !== null) {\n this.setAttribute('role', 'listitem');\n } else {\n this.removeAttribute('role');\n }\n }\n\n /\n The URL for this breadcrumb link. Omit for the current page item.\n * When `current` is true, this attribute is ignored and the item always\n * renders as static text per WAI-ARIA APG breadcrumb guidance.\n * @attr href\n /\n @property({ type: String, reflect: true })\n href: string \| undefined = undefined;\n\n /\n Whether this is the last item in the breadcrumb trail. Set by the parent\n * hx-breadcrumb component via the `data-bc-last` boolean attribute. When\n * present the trailing separator is hidden.\n \n @attr data-bc-last\n * @internal\n /\n @property({ type: Boolean, attribute: 'data-bc-last', reflect: true })\n dataBcLast = false;\n\n /\n Marks this item as the current page. When set, the item always renders as\n * static text (never a navigable link) and `aria-current=\"page\"` is placed on\n * the inner text element per WAI-ARIA APG breadcrumb guidance, yielding the\n * canonical AT announcement (\"current page, Patient Records\").\n \n Can be set explicitly by consumers (e.g. Drupal Twig templates) to override\n * the default positional last-item detection in `hx-breadcrumb`. When any item\n * in the breadcrumb has an explicit `current` attribute, the parent will not\n * override it.\n \n @attr current\n */\n @property({ type: Boolean, reflect: true })\n current = false;\n\n override render() {\n // Per WAI-ARIA APG, the current page item MUST NOT be a navigable link.\n // aria-current=\"page\" is placed on the inner element (not the listitem host)\n // for canonical AT announcement (\"current page, Patient Records\" vs\n // \"current page, list item\").\n return html`\n <span part=\"item\">\n ${this.current\n ? html`<span part=\"text\" aria-current=\"page\"><slot></slot></span>`\n : this.href\n ? html`<a part=\"link\" href=${this.href}><slot></slot></a>`\n : html`<span part=\"text\"><slot></slot></span>`}\n </span>\n ${!this.dataBcLast\n ? html`<span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>`\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb-item': HelixBreadcrumbItem;\n }\n}\n"],"names":["helixBreadcrumbStyles","css","HelixBreadcrumb","LitElement","e","slot","el","items","hasExplicitCurrent","item","isLast","assigned","text","_a","ellipsis","btn","firstItem","_b","position","href","name","entry","schema","i","changedProperties","html","tokenStyles","__decorateClass","property","customElement","helixBreadcrumbItemStyles","HelixBreadcrumbItem","nothing"],"mappings":"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"}