npm - @helixui/library - Versions diffs - 2.1.2-next.51 → 2.1.2-next.53 - Mend

@helixui/library 2.1.2-next.51 → 2.1.2-next.53

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 (477) hide show

package/dist/shared/{hx-link-CN7AvGOW.js → hx-link-DCBct0f4.js} RENAMED Viewed

@@ -1,9 +1,9 @@
-import { css as v, LitElement as x, nothing as u, svg as f, html as c } from "lit";
+import { css as x, LitElement as v, nothing as f, svg as u, html as h } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
-import { property as o, customElement as k } from "lit/decorators.js";
+import { property as i, customElement as k } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { ifDefined as a } from "lit/directives/if-defined.js";
-const y = v`
+const y = x`
   :host {
     display: inline;
   }
@@ -95,6 +95,24 @@ const y = v`
     }
   }
+  /* ─── High Contrast Mode (forced-colors) ─── */
+  @media (forced-colors: active) {
+    .link {
+      forced-color-adjust: none;
+      color: LinkText;
+    }
+    .link:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+    .link--disabled {
+      color: GrayText;
+    }
+  }
   /* --- Visually hidden (sr-only) --- */
   .sr-only {
@@ -109,12 +127,12 @@ const y = v`
     border: 0;
   }
 `;
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, n, s, l) => {
-  for (var t = l > 1 ? void 0 : l ? b(n, s) : n, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (t = (l ? h(n, s, t) : h(t)) || t);
-  return l && t && m(n, s, t), t;
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (e, n, s, l) => {
+  for (var o = l > 1 ? void 0 : l ? b(n, s) : n, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (o = (l ? c(n, s, o) : c(o)) || o);
+  return l && o && m(n, s, o), o;
 };
-let r = class extends x {
+let r = class extends v {
   constructor() {
     super(...arguments), this.href = void 0, this.target = void 0, this.variant = "default", this.disabled = !1, this.download = void 0, this.rel = void 0;
   }
@@ -145,7 +163,7 @@ let r = class extends x {
   }
   /** @internal */
   _renderExternalIcon() {
-    return this.target !== "_blank" ? u : c`
+    return this.target !== "_blank" ? f : h`
       <svg
         class="link__external-icon"
         part="external-icon"
@@ -157,7 +175,7 @@ let r = class extends x {
         stroke-linecap="round"
         stroke-linejoin="round"
       >
-        ${f`<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />`}
+        ${u`<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />`}
       </svg>
       <span class="sr-only">(opens in new tab)</span>
     `;
@@ -169,7 +187,7 @@ let r = class extends x {
       [`link--${this.variant}`]: this.variant !== "default",
       "link--disabled": this.disabled
     };
-    return this.disabled ? c`
+    return this.disabled ? h`
         <span
           part="link"
           class=${p(e)}
@@ -181,7 +199,7 @@ let r = class extends x {
         >
           <slot></slot>
         </span>
-      ` : c`
+      ` : h`
       <a
         part="link"
         class=${p(e)}
@@ -198,28 +216,28 @@ let r = class extends x {
   }
 };
 r.styles = [y];
-i([
-  o({ type: String })
+t([
+  i({ type: String })
 ], r.prototype, "href", 2);
-i([
-  o({ type: String })
+t([
+  i({ type: String })
 ], r.prototype, "target", 2);
-i([
-  o({ type: String, reflect: !0 })
+t([
+  i({ type: String, reflect: !0 })
 ], r.prototype, "variant", 2);
-i([
-  o({ type: Boolean, reflect: !0 })
+t([
+  i({ type: Boolean, reflect: !0 })
 ], r.prototype, "disabled", 2);
-i([
-  o({ type: String })
+t([
+  i({ type: String })
 ], r.prototype, "download", 2);
-i([
-  o({ type: String })
+t([
+  i({ type: String })
 ], r.prototype, "rel", 2);
-r = i([
+r = t([
   k("hx-link")
 ], r);
 export {
   r as H
 };
-//# sourceMappingURL=hx-link-CN7AvGOW.js.map
+//# sourceMappingURL=hx-link-DCBct0f4.js.map

package/dist/shared/hx-link-DCBct0f4.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-link-DCBct0f4.js","sources":["../../src/components/hx-link/hx-link.styles.ts","../../src/components/hx-link/hx-link.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixLinkStyles = css`\n :host {\n display: inline;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n /* --- Base Link --- */\n\n .link {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));\n font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));\n font-size: inherit;\n line-height: inherit;\n text-decoration: var(--hx-link-text-decoration, underline);\n text-underline-offset: var(--hx-link-underline-offset, 2px);\n cursor: pointer;\n outline: 0;\n transition:\n color var(--hx-transition-fast, 150ms ease),\n text-decoration-color var(--hx-transition-fast, 150ms ease);\n }\n\n .link:hover {\n color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));\n text-decoration: var(--hx-link-text-decoration-hover, underline);\n }\n\n .link:active {\n color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e40af));\n }\n\n .link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-link-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n }\n\n /* --- Variant: subtle --- */\n\n .link--subtle {\n color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));\n text-decoration: none;\n }\n\n .link--subtle:hover {\n color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));\n text-decoration: underline;\n }\n\n /* --- Variant: danger --- */\n\n .link--danger {\n color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));\n }\n\n .link--danger:hover {\n color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));\n }\n\n /* --- Disabled --- */\n\n .link--disabled {\n color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));\n text-decoration: none;\n cursor: not-allowed;\n }\n\n /* --- External link icon --- */\n\n .link__external-icon {\n display: inline-flex;\n width: 0.75em;\n height: 0.75em;\n flex-shrink: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .link {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .link {\n forced-color-adjust: none;\n color: LinkText;\n }\n\n .link:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .link--disabled {\n color: GrayText;\n }\n }\n\n /* --- Visually hidden (sr-only) --- */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n`;\n","import { LitElement, html, nothing, svg } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { helixLinkStyles } from './hx-link.styles.js';\n\n/**\n * Variant options for the link component.\n */\nexport type LinkVariant = 'default' | 'subtle' | 'danger';\n\n/**\n * A semantic hyperlink component with accessibility-first design.\n * Renders a native `<a>` element for enabled state and a `<span>` for\n * disabled state with full keyboard and screen reader support.\n *\n * @summary Accessible hyperlink with external-link detection, disabled state,\n * and download support.\n *\n * @tag hx-link\n *\n * @slot - Default slot for link label text or content.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the link is clicked and is not disabled.\n *\n * @csspart link - The inner anchor or span element.\n * @csspart external-icon - The external link icon SVG (when target=\"_blank\").\n *\n * @cssprop [--hx-link-color=var(--hx-color-primary-500)] - Default link color.\n * @cssprop [--hx-link-color-hover=var(--hx-color-primary-700)] - Hover color.\n * @cssprop [--hx-link-color-active=var(--hx-color-primary-800)] - Active color.\n * @cssprop [--hx-link-color-disabled=var(--hx-color-neutral-400)] - Disabled color.\n * @cssprop [--hx-link-color-subtle=var(--hx-color-neutral-600)] - Subtle variant color.\n * @cssprop [--hx-link-color-danger=var(--hx-color-error-text)] - Danger variant color.\n * @cssprop [--hx-link-color-danger-hover=var(--hx-color-error-700)] - Danger variant hover color.\n * @cssprop [--hx-link-font-family=var(--hx-font-family-sans)] - Link font family.\n * @cssprop [--hx-link-text-decoration=underline] - Link text decoration.\n * @cssprop [--hx-link-text-decoration-hover=underline] - Hover text decoration.\n * @cssprop [--hx-link-underline-offset=2px] - Text underline offset.\n * @cssprop [--hx-link-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @note The `:visited` pseudo-class does not work inside Shadow DOM due to\n * browser privacy restrictions. This is a known platform limitation.\n */\n@customElement('hx-link')\nexport class HelixLink extends LitElement {\n static override styles = [helixLinkStyles];\n\n /**\n * The URL the link points to.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Where to display the linked URL (_self, _blank, etc.).\n * When set to \"_blank\", automatically adds rel=\"noopener noreferrer\"\n * and shows an external-link indicator.\n * @attr target\n */\n @property({ type: String })\n target: string | undefined = undefined;\n\n /**\n * Visual style variant of the link.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'subtle' | 'danger' = 'default';\n\n /**\n * Whether the link is disabled. Renders a span instead of an anchor.\n * The disabled span is keyboard-focusable (tabindex=\"0\") and announces\n * as a disabled link to screen readers.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Prompts the user to download the linked URL. When set to a string,\n * the value is used as the suggested filename.\n * @attr download\n */\n @property({ type: String })\n download: string | undefined = undefined;\n\n /**\n * Relationship between the current document and the linked URL.\n * Automatically set to \"noopener noreferrer\" when target=\"_blank\".\n * @attr rel\n */\n @property({ type: String })\n rel: string | undefined = undefined;\n\n // --- Event Handling ---\n\n /** @internal Blocks Enter and Space activation on disabled span. */\n private _handleDisabledKeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n }\n }\n\n /** @internal */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n }\n\n // --- Render Helpers ---\n\n /** @internal */\n private _computeRel(): string | undefined {\n if (this.rel) return this.rel;\n if (this.target === '_blank') return 'noopener noreferrer';\n return undefined;\n }\n\n /** @internal */\n private _renderExternalIcon() {\n if (this.target !== '_blank') return nothing;\n\n return html`\n <svg\n class=\"link__external-icon\"\n part=\"external-icon\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n ${svg`<path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" /><polyline points=\"15 3 21 3 21 9\" /><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />`}\n </svg>\n <span class=\"sr-only\">(opens in new tab)</span>\n `;\n }\n\n // --- Render ---\n\n override render() {\n const classes = {\n link: true,\n [`link--${this.variant}`]: this.variant !== 'default',\n 'link--disabled': this.disabled,\n };\n\n if (this.disabled) {\n return html`\n <span\n part=\"link\"\n class=${classMap(classes)}\n role=\"link\"\n aria-disabled=\"true\"\n tabindex=\"0\"\n @click=${this._handleClick}\n @keydown=${this._handleDisabledKeydown}\n >\n <slot></slot>\n </span>\n `;\n }\n\n return html`\n <a\n part=\"link\"\n class=${classMap(classes)}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${ifDefined(this._computeRel())}\n download=${ifDefined(this.download)}\n @click=${this._handleClick}\n >\n <slot></slot>\n ${this._renderExternalIcon()}\n </a>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-link': HelixLink;\n }\n}\n"],"names":["helixLinkStyles","css","HelixLink","LitElement","nothing","html","svg","classes","classMap","ifDefined","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-list-CnDK30Yk.js → hx-list-Dnei26t4.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { css as v, LitElement as b, html as a, nothing as p } from "lit";
+import { css as v, LitElement as b, html as a, nothing as h } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
 import { property as n, customElement as x } from "lit/decorators.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
@@ -254,7 +254,7 @@ let o = class extends b {
         <dt
           part="base"
           class=${u({ "list-item": !0, "list-item--disabled": this.disabled })}
-          aria-disabled=${this.disabled ? "true" : p}
+          aria-disabled=${this.disabled ? "true" : h}
         >
           ${this._renderContent()}
         </dt>
@@ -262,7 +262,7 @@ let o = class extends b {
         <dd
           part="base"
           class=${u({ "list-item": !0, "list-item--disabled": this.disabled })}
-          aria-disabled=${this.disabled ? "true" : p}
+          aria-disabled=${this.disabled ? "true" : h}
         >
           ${this._renderContent()}
         </dd>
@@ -285,7 +285,7 @@ let o = class extends b {
           part="base"
           class="list-item"
           role="listitem"
-          aria-disabled=${this.disabled ? "true" : p}
+          aria-disabled=${this.disabled ? "true" : h}
         >
           <a class="list-item__link" href=${m(this.href)} @click=${this._handleClick}>
             ${this._renderContent()}
@@ -300,7 +300,7 @@ let o = class extends b {
       "list-item--disabled": this.disabled
     })}
         role="listitem"
-        aria-disabled=${this.disabled ? "true" : p}
+        aria-disabled=${this.disabled ? "true" : h}
         @click=${this._handleClick}
         @keydown=${this._handleKeydown}
       >
@@ -340,7 +340,7 @@ var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (t, e, r
     (d = t[l]) && (i = (s ? d(e, r, i) : d(i)) || i);
   return s && i && $(e, r, i), i;
 };
-let h = class extends b {
+let p = class extends b {
   constructor() {
     super(...arguments), this.variant = "plain", this.divided = !1, this.label = void 0, this._handleKeydown = (t) => {
       var l;
@@ -429,8 +429,8 @@ let h = class extends b {
         part="base"
         class="list list--${this.variant}"
         role=${t ? "listbox" : "list"}
-        aria-label=${t ? this.label || "List" : m(this.label)}
-        aria-multiselectable=${t ? "false" : p}
+        aria-label=${t ? this.label || h : m(this.label)}
+        aria-multiselectable=${t ? "false" : h}
         @hx-list-item-click=${this._handleItemClick}
       >
         ${s}
@@ -438,21 +438,21 @@ let h = class extends b {
     `;
   }
 };
-h.styles = [y];
+p.styles = [y];
 f([
   n({ type: String, reflect: !0 })
-], h.prototype, "variant", 2);
+], p.prototype, "variant", 2);
 f([
   n({ type: Boolean, reflect: !0 })
-], h.prototype, "divided", 2);
+], p.prototype, "divided", 2);
 f([
   n({ type: String })
-], h.prototype, "label", 2);
-h = f([
+], p.prototype, "label", 2);
+p = f([
   x("hx-list")
-], h);
+], p);
 export {
-  h as H,
+  p as H,
   o as a
 };
-//# sourceMappingURL=hx-list-CnDK30Yk.js.map
+//# sourceMappingURL=hx-list-Dnei26t4.js.map

package/dist/shared/{hx-list-CnDK30Yk.js.map → hx-list-Dnei26t4.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-list-CnDK30Yk.js","sources":["../../src/components/hx-list/hx-list.styles.ts","../../src/components/hx-list/hx-list-item.styles.ts","../../src/components/hx-list/hx-list-item.ts","../../src/components/hx-list/hx-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixListStyles = css`\n :host {\n display: block;\n }\n\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--hx-list-gap, 0);\n }\n\n /* ─── Variant: bulleted ─── /\n\n .list--bulleted {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: disc;\n }\n\n / ─── Variant: numbered ─── /\n\n .list--numbered {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: decimal;\n }\n\n / ─── Variant: interactive ─── /\n\n .list--interactive {\n list-style: none;\n padding: 0;\n }\n\n / ─── Variant: description ─── /\n\n .list--description {\n padding: 0;\n list-style: none;\n }\n\n / ─── Dividers ─── /\n\n :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n }\n`;\n","import { css } from 'lit';\n\nexport const helixListItemStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n / ─── Base list item ─── /\n\n .list-item {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));\n color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0f172a));\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n cursor: default;\n box-sizing: border-box;\n width: 100%;\n }\n\n / ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── /\n\n :host([interactive]) .list-item {\n cursor: pointer;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f8fafc));\n }\n\n :host([interactive]):focus-visible .list-item {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n / ─── Selected state ─── /\n\n .list-item--selected {\n background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #eff6ff));\n color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1d4ed8));\n }\n\n / ─── Disabled state ─── /\n\n .list-item--disabled {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n / ─── Link mode ─── /\n\n .list-item__link {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n .list-item__link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n / ─── Slots ─── /\n\n .list-item__prefix,\n .list-item__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .list-item__body {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .list-item__label {\n display: block;\n }\n\n .list-item__description {\n display: block;\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #64748b));\n margin-top: var(--hx-space-1, 0.25rem);\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([interactive]) .list-item {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast / forced-colors mode) ─── /\n\n @media (forced-colors: active) {\n / Selected state: replace background-color with a visible border using system Highlight color /\n :host([interactive]) .list-item--selected {\n background-color: transparent;\n border: 2px solid Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n\n / Hover state: use an outline instead of background-color /\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: transparent;\n outline: 1px solid Highlight;\n outline-offset: -1px;\n }\n\n / Disabled state: use system GrayText color /\n :host([interactive][disabled]) .list-item,\n :host([interactive]) .list-item--disabled {\n color: GrayText;\n }\n\n / Focus ring: ensure visibility in forced-colors mode /\n :host([interactive]):focus-visible .list-item {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n forced-color-adjust: none;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\n\n/\n A rich list item for use inside `hx-list`.\n \n @summary Individual list item with optional prefix, suffix, description, link, and disabled/selected states.\n \n @tag hx-list-item\n \n @slot - Default slot for the item label text.\n * @slot prefix - Icon, avatar, or content rendered before the label.\n * @slot suffix - Icon, badge, or text rendered after the label.\n * @slot description - Secondary descriptive text rendered below the label.\n \n @fires {CustomEvent<{item: HelixListItem, value: string \| undefined}>} hx-list-item-click -\n * Dispatched when the item is clicked and not disabled.\n \n @csspart base - The root item element (li, dt, dd, or wrapper).\n * @csspart prefix - The prefix slot container.\n * @csspart label - The label slot container.\n * @csspart description - The description slot container.\n * @csspart suffix - The suffix slot container.\n \n @cssprop [--hx-list-item-padding=var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-list-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-list-item-bg-hover=var(--hx-color-neutral-50)] - Item hover background.\n * @cssprop [--hx-list-item-bg-selected=var(--hx-color-primary-50)] - Selected item background.\n * @cssprop [--hx-list-item-color-selected=var(--hx-color-primary-700)] - Selected item text color.\n * @cssprop [--hx-list-item-description-color=var(--hx-color-neutral-500)] - Description text color.\n /\n@customElement('hx-list-item')\nexport class HelixListItem extends LitElement {\n static override styles = [helixListItemStyles];\n\n /\n Whether the item is disabled. Prevents interaction.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Whether the item is selected (used in interactive mode).\n * @attr selected\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n When set, renders the item as a link (only in non-interactive variants).\n * @attr href\n /\n @property({ type: String })\n href: string \| undefined = undefined;\n\n /\n The value associated with this item (used with hx-select).\n * @attr value\n /\n @property({ type: String })\n value: string \| undefined = undefined;\n\n /\n Set by the parent hx-list to indicate this item is part of an interactive listbox.\n * Controls CSS styling and ARIA role via host attributes.\n * @attr interactive\n /\n @property({ type: Boolean, reflect: true })\n interactive = false;\n\n /\n Item type for description list variant. Use 'term' for <dt> and 'definition' for <dd>.\n * @attr type\n /\n @property({ type: String, reflect: true })\n type: 'default' \| 'term' \| 'definition' = 'default';\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (\n changedProps.has('interactive') \|\|\n changedProps.has('selected') \|\|\n changedProps.has('disabled')\n ) {\n this._syncHostAria();\n }\n }\n\n /\n Syncs ARIA attributes to the host element when in interactive (listbox option) mode.\n * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].\n /\n /* @internal /\n private _syncHostAria(): void {\n if (this.interactive) {\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', String(this.selected));\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n if (!this.disabled) {\n this.setAttribute('tabindex', '0');\n } else {\n this.removeAttribute('tabindex');\n }\n } else {\n this.removeAttribute('role');\n this.removeAttribute('aria-selected');\n this.removeAttribute('aria-disabled');\n this.removeAttribute('tabindex');\n }\n }\n\n /* @internal /\n private _dispatchListItemClick(): void {\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string \| undefined }>('hx-list-item-click', {\n bubbles: true,\n composed: true,\n detail: { item: this, value: this.value },\n }),\n );\n }\n\n /* @internal /\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this._dispatchListItemClick();\n }\n\n /* @internal /\n private _renderContent() {\n return html`\n <span part=\"prefix\" class=\"list-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span class=\"list-item__body\">\n <span part=\"label\" class=\"list-item__label\">\n <slot></slot>\n </span>\n <span part=\"description\" class=\"list-item__description\">\n <slot name=\"description\"></slot>\n </span>\n </span>\n <span part=\"suffix\" class=\"list-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n override render() {\n // Description list: render as <dt> (term) or <dd> (definition)\n if (this.type === 'term') {\n return html`\n <dt\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dt>\n `;\n }\n\n if (this.type === 'definition') {\n return html`\n <dd\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dd>\n `;\n }\n\n // Interactive mode: role is on the host element (ARIA ownership across shadow DOM).\n // Internal <li> uses role=\"presentation\" so AT sees: listbox > option (host).\n if (this.interactive) {\n // In interactive mode, links are not rendered as <a> to avoid\n // invalid ARIA: focusable content inside role=\"option\" is prohibited.\n return html`\n <li\n part=\"base\"\n role=\"presentation\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n // Non-interactive with href: render as link\n if (this.href !== undefined && !this.disabled) {\n return html`\n <li\n part=\"base\"\n class=\"list-item\"\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n <a class=\"list-item__link\" href=${ifDefined(this.href)} @click=${this._handleClick}>\n ${this._renderContent()}\n </a>\n </li>\n `;\n }\n\n // Default non-interactive\n return html`\n <li\n part=\"base\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n /* @internal /\n private _handleKeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n if (!this.disabled) {\n this._dispatchListItemClick();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list-item': HelixListItem;\n }\n}\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\n \n @summary Container for list items with optional dividers and interactive selection.\n \n @tag hx-list\n \n @slot - Default slot for `hx-list-item` elements.\n \n @fires {CustomEvent<{item: HelixListItem, value: string \| undefined}>} hx-select - Dispatched\n * when an item is clicked in interactive mode.\n \n @csspart base - The root list element.\n \n @cssprop [--hx-list-gap=0] - Gap between list items.\n * @cssprop [--hx-list-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n /\n@customElement('hx-list')\nexport class HelixList extends LitElement {\n static override styles = [helixListStyles];\n\n /\n Visual variant of the list.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'plain' \| 'bulleted' \| 'numbered' \| 'description' \| 'interactive' = 'plain';\n\n /\n Whether to show dividers between list items.\n * @attr divided\n /\n @property({ type: Boolean, reflect: true })\n divided = false;\n\n /\n Accessible label for the list. Required when variant is \"interactive\" (listbox role).\n * @attr label\n /\n @property({ type: String })\n label: string \| undefined = undefined;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('variant')) {\n this._updateItemStates();\n }\n if (this.variant === 'interactive' && !this.label) {\n devWarn(\n 'hx-list',\n 'The \"label\" attribute is required when variant is \"interactive\". ' +\n 'Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).',\n );\n }\n }\n\n /\n Sets the `interactive` property on all child hx-list-item elements\n * so they can style and behave correctly without `:host-context()`.\n /\n /* @internal /\n private _updateItemStates(): void {\n const isInteractive = this.variant === 'interactive';\n const items = this.querySelectorAll('hx-list-item');\n for (const item of items) {\n (item as HelixListItem).interactive = isInteractive;\n }\n }\n\n /* @internal /\n private _handleSlotChange(): void {\n this._updateItemStates();\n }\n\n /* @internal /\n private readonly _handleKeydown = (e: KeyboardEvent): void => {\n if (this.variant !== 'interactive') return;\n\n const items = Array.from(this.querySelectorAll<HelixListItem>('hx-list-item:not([disabled])'));\n if (items.length === 0) return;\n\n const focused = this.querySelector<HelixListItem>('hx-list-item:focus');\n const currentIndex = focused ? items.indexOf(focused) : -1;\n\n let nextIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'ArrowUp':\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n break;\n case 'Home':\n e.preventDefault();\n nextIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n nextIndex = items.length - 1;\n break;\n default:\n return;\n }\n\n items[nextIndex]?.focus();\n };\n\n /* @internal */\n private _handleItemClick(e: Event): void {\n if (this.variant !== 'interactive') return;\n\n if (!(e.target instanceof HelixListItem)) return;\n const item = e.target;\n if (item.disabled) return;\n\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string \| undefined }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item, value: item.value },\n }),\n );\n }\n\n override render() {\n const isInteractive = this.variant === 'interactive';\n const isNumbered = this.variant === 'numbered';\n const isDescription = this.variant === 'description';\n\n const slot = html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n\n if (isDescription) {\n return html`\n <dl\n part=\"base\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </dl>\n `;\n }\n\n if (isNumbered) {\n return html`\n <div\n part=\"base\"\n role=\"list\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n\n return html`\n <div\n part=\"base\"\n class=\"list list--${this.variant}\"\n role=${isInteractive ? 'listbox' : 'list'}\n aria-label=${isInteractive ? this.label \|\| 'List' : ifDefined(this.label)}\n aria-multiselectable=${isInteractive ? 'false' : nothing}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list': HelixList;\n }\n}\n"],"names":["helixListStyles","css","helixListItemStyles","HelixListItem","LitElement","changedProps","e","html","classMap","nothing","ifDefined","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","_a","isInteractive","item","isNumbered","isDescription","slot"],"mappings":";;;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCAlBC,IAAsBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACkC5B,IAAME,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,OAA2B,QAO3B,KAAA,QAA4B,QAQ5B,KAAA,cAAc,IAOd,KAAA,OAA0C;AAAA,EAAA;AAAA,EAEjC,QAAQC,GAA0C;AACzD,UAAM,QAAQA,CAAY,IAExBA,EAAa,IAAI,aAAa,KAC9BA,EAAa,IAAI,UAAU,KAC3BA,EAAa,IAAI,UAAU,MAE3B,KAAK,cAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,gBAAsB;AAC5B,IAAI,KAAK,eACP,KAAK,aAAa,QAAQ,QAAQ,GAClC,KAAK,aAAa,iBAAiB,OAAO,KAAK,QAAQ,CAAC,GACpD,KAAK,WACP,KAAK,aAAa,iBAAiB,MAAM,IAEzC,KAAK,gBAAgB,eAAe,GAEjC,KAAK,WAGR,KAAK,gBAAgB,UAAU,IAF/B,KAAK,aAAa,YAAY,GAAG,MAKnC,KAAK,gBAAgB,MAAM,GAC3B,KAAK,gBAAgB,eAAe,GACpC,KAAK,gBAAgB,eAAe,GACpC,KAAK,gBAAgB,UAAU;AAAA,EAEnC;AAAA;AAAA,EAGQ,yBAA+B;AACrC,SAAK;AAAA,MACH,IAAI,YAAgE,sBAAsB;AAAA,QACxF,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAM,MAAM,OAAO,KAAK,MAAA;AAAA,MAAM,CACzC;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,aAAaC,GAAqB;AACxC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAEA,SAAK,uBAAA;AAAA,EACP;AAAA;AAAA,EAGQ,iBAAiB;AACvB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBT;AAAA,EAES,SAAS;AAEhB,WAAI,KAAK,SAAS,SACTA;AAAA;AAAA;AAAA,kBAGKC,EAAS,EAAE,aAAa,IAAM,uBAAuB,KAAK,UAAU,CAAC;AAAA,0BAC7D,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA,YAE9C,KAAK,gBAAgB;AAAA;AAAA,UAKzB,KAAK,SAAS,eACTF;AAAA;AAAA;AAAA,kBAGKC,EAAS,EAAE,aAAa,IAAM,uBAAuB,KAAK,UAAU,CAAC;AAAA,0BAC7D,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA,YAE9C,KAAK,gBAAgB;AAAA;AAAA,UAOzB,KAAK,cAGAF;AAAA;AAAA;AAAA;AAAA,kBAIKC,EAAS;AAAA,MACf,aAAa;AAAA,MACb,uBAAuB,KAAK;AAAA,MAC5B,uBAAuB,KAAK;AAAA,IAAA,CAC7B,CAAC;AAAA,mBACO,KAAK,YAAY;AAAA,qBACf,KAAK,cAAc;AAAA;AAAA,YAE5B,KAAK,gBAAgB;AAAA;AAAA,UAMzB,KAAK,SAAS,UAAa,CAAC,KAAK,WAC5BD;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKa,KAAK,WAAW,SAASE,CAAO;AAAA;AAAA,4CAEdC,EAAU,KAAK,IAAI,CAAC,WAAW,KAAK,YAAY;AAAA,cAC9E,KAAK,gBAAgB;AAAA;AAAA;AAAA,UAOxBH;AAAA;AAAA;AAAA,gBAGKC,EAAS;AAAA,MACf,aAAa;AAAA,MACb,uBAAuB,KAAK;AAAA,MAC5B,uBAAuB,KAAK;AAAA,IAAA,CAC7B,CAAC;AAAA;AAAA,wBAEc,KAAK,WAAW,SAASC,CAAO;AAAA,iBACvC,KAAK,YAAY;AAAA,mBACf,KAAK,cAAc;AAAA;AAAA,UAE5B,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAG7B;AAAA;AAAA,EAGQ,eAAeH,GAAwB;AAC7C,KAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACG,KAAK,YACR,KAAK,uBAAA;AAAA,EAGX;AACF;AA1NaH,EACK,SAAS,CAACD,CAAmB;AAO7CS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAP/BT,EAQX,WAAA,YAAA,CAAA;AAOAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BT,EAeX,WAAA,YAAA,CAAA;AAOAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfT,EAsBX,WAAA,QAAA,CAAA;AAOAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5BfT,EA6BX,WAAA,SAAA,CAAA;AAQAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApC/BT,EAqCX,WAAA,eAAA,CAAA;AAOAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3C9BT,EA4CX,WAAA,QAAA,CAAA;AA5CWA,IAANQ,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBV,CAAA;;;;;;ACVN,IAAMW,IAAN,cAAwBV,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,UAA6E,SAO7E,KAAA,UAAU,IAOV,KAAA,QAA4B,QA6C5B,KAAiB,iBAAiB,CAACE,MAA2B;;AAC5D,UAAI,KAAK,YAAY,cAAe;AAEpC,YAAMS,IAAQ,MAAM,KAAK,KAAK,iBAAgC,8BAA8B,CAAC;AAC7F,UAAIA,EAAM,WAAW,EAAG;AAExB,YAAMC,IAAU,KAAK,cAA6B,oBAAoB,GAChEC,IAAeD,IAAUD,EAAM,QAAQC,CAAO,IAAI;AAExD,UAAIE,IAAYD;AAEhB,cAAQX,EAAE,KAAA;AAAA,QACR,KAAK;AACH,UAAAA,EAAE,eAAA,GACFY,IAAYD,IAAeF,EAAM,SAAS,IAAIE,IAAe,IAAI;AACjE;AAAA,QACF,KAAK;AACH,UAAAX,EAAE,eAAA,GACFY,IAAYD,IAAe,IAAIA,IAAe,IAAIF,EAAM,SAAS;AACjE;AAAA,QACF,KAAK;AACH,UAAAT,EAAE,eAAA,GACFY,IAAY;AACZ;AAAA,QACF,KAAK;AACH,UAAAZ,EAAE,eAAA,GACFY,IAAYH,EAAM,SAAS;AAC3B;AAAA,QACF;AACE;AAAA,MAAA;AAGJ,OAAAI,IAAAJ,EAAMG,CAAS,MAAf,QAAAC,EAAkB;AAAA,IACpB;AAAA,EAAA;AAAA,EA5ES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA,EAES,QAAQd,GAA0C;AACzD,UAAM,QAAQA,CAAY,GACtBA,EAAa,IAAI,SAAS,KAC5B,KAAK,kBAAA,GAEH,KAAK,YAAY,iBAAkB,KAAK;AAAA,EAO9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,oBAA0B;AAChC,UAAMe,IAAgB,KAAK,YAAY,eACjCL,IAAQ,KAAK,iBAAiB,cAAc;AAClD,eAAWM,KAAQN;AAChB,MAAAM,EAAuB,cAAcD;AAAA,EAE1C;AAAA;AAAA,EAGQ,oBAA0B;AAChC,SAAK,kBAAA;AAAA,EACP;AAAA;AAAA,EAuCQ,iBAAiBd,GAAgB;AAGvC,QAFI,KAAK,YAAY,iBAEjB,EAAEA,EAAE,kBAAkBH,GAAgB;AAC1C,UAAMkB,IAAOf,EAAE;AACf,IAAIe,EAAK,YAET,KAAK;AAAA,MACH,IAAI,YAAgE,aAAa;AAAA,QAC/E,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAAA,GAAM,OAAOA,EAAK,MAAA;AAAA,MAAM,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAS;AAChB,UAAMD,IAAgB,KAAK,YAAY,eACjCE,IAAa,KAAK,YAAY,YAC9BC,IAAgB,KAAK,YAAY,eAEjCC,IAAOjB,sBAAyB,KAAK,iBAAiB;AAE5D,WAAIgB,IACKhB;AAAA;AAAA;AAAA,8BAGiB,KAAK,OAAO;AAAA,uBACnBG,EAAU,KAAK,KAAK,CAAC;AAAA,gCACZ,KAAK,gBAAgB;AAAA;AAAA,YAEzCc,CAAI;AAAA;AAAA,UAKRF,IACKf;AAAA;AAAA;AAAA;AAAA,8BAIiB,KAAK,OAAO;AAAA,uBACnBG,EAAU,KAAK,KAAK,CAAC;AAAA,gCACZ,KAAK,gBAAgB;AAAA;AAAA,YAEzCc,CAAI;AAAA;AAAA,UAKLjB;AAAA;AAAA;AAAA,4BAGiB,KAAK,OAAO;AAAA,eACzBa,IAAgB,YAAY,MAAM;AAAA,qBAC5BA,IAAgB,KAAK,SAAS,SAASV,EAAU,KAAK,KAAK,CAAC;AAAA,+BAClDU,IAAgB,UAAUX,CAAO;AAAA,8BAClC,KAAK,gBAAgB;AAAA;AAAA,UAEzCe,CAAI;AAAA;AAAA;AAAA,EAGZ;AACF;AAtKaV,EACK,SAAS,CAACd,CAAe;AAOzCW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BE,EAQX,WAAA,WAAA,CAAA;AAOAH,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BE,EAeX,WAAA,WAAA,CAAA;AAOAH,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfE,EAsBX,WAAA,SAAA,CAAA;AAtBWA,IAANH,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXC,CAAA;"}
1	+ {"version":3,"file":"hx-list-Dnei26t4.js","sources":["../../src/components/hx-list/hx-list.styles.ts","../../src/components/hx-list/hx-list-item.styles.ts","../../src/components/hx-list/hx-list-item.ts","../../src/components/hx-list/hx-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixListStyles = css`\n :host {\n display: block;\n }\n\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--hx-list-gap, 0);\n }\n\n /* ─── Variant: bulleted ─── /\n\n .list--bulleted {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: disc;\n }\n\n / ─── Variant: numbered ─── /\n\n .list--numbered {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: decimal;\n }\n\n / ─── Variant: interactive ─── /\n\n .list--interactive {\n list-style: none;\n padding: 0;\n }\n\n / ─── Variant: description ─── /\n\n .list--description {\n padding: 0;\n list-style: none;\n }\n\n / ─── Dividers ─── /\n\n :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n }\n`;\n","import { css } from 'lit';\n\nexport const helixListItemStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n / ─── Base list item ─── /\n\n .list-item {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));\n color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0f172a));\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n cursor: default;\n box-sizing: border-box;\n width: 100%;\n }\n\n / ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── /\n\n :host([interactive]) .list-item {\n cursor: pointer;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f8fafc));\n }\n\n :host([interactive]):focus-visible .list-item {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n / ─── Selected state ─── /\n\n .list-item--selected {\n background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #eff6ff));\n color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1d4ed8));\n }\n\n / ─── Disabled state ─── /\n\n .list-item--disabled {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n / ─── Link mode ─── /\n\n .list-item__link {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n .list-item__link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n / ─── Slots ─── /\n\n .list-item__prefix,\n .list-item__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .list-item__body {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .list-item__label {\n display: block;\n }\n\n .list-item__description {\n display: block;\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #64748b));\n margin-top: var(--hx-space-1, 0.25rem);\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([interactive]) .list-item {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast / forced-colors mode) ─── /\n\n @media (forced-colors: active) {\n / Selected state: replace background-color with a visible border using system Highlight color /\n :host([interactive]) .list-item--selected {\n background-color: transparent;\n border: 2px solid Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n\n / Hover state: use an outline instead of background-color /\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: transparent;\n outline: 1px solid Highlight;\n outline-offset: -1px;\n }\n\n / Disabled state: use system GrayText color /\n :host([interactive][disabled]) .list-item,\n :host([interactive]) .list-item--disabled {\n color: GrayText;\n }\n\n / Focus ring: ensure visibility in forced-colors mode /\n :host([interactive]):focus-visible .list-item {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n forced-color-adjust: none;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\n\n/\n A rich list item for use inside `hx-list`.\n \n @summary Individual list item with optional prefix, suffix, description, link, and disabled/selected states.\n \n @tag hx-list-item\n \n @slot - Default slot for the item label text.\n * @slot prefix - Icon, avatar, or content rendered before the label.\n * @slot suffix - Icon, badge, or text rendered after the label.\n * @slot description - Secondary descriptive text rendered below the label.\n \n @fires {CustomEvent<{item: HelixListItem, value: string \| undefined}>} hx-list-item-click -\n * Dispatched when the item is clicked and not disabled.\n \n @csspart base - The root item element (li, dt, dd, or wrapper).\n * @csspart prefix - The prefix slot container.\n * @csspart label - The label slot container.\n * @csspart description - The description slot container.\n * @csspart suffix - The suffix slot container.\n \n @cssprop [--hx-list-item-padding=var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-list-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-list-item-bg-hover=var(--hx-color-neutral-50)] - Item hover background.\n * @cssprop [--hx-list-item-bg-selected=var(--hx-color-primary-50)] - Selected item background.\n * @cssprop [--hx-list-item-color-selected=var(--hx-color-primary-700)] - Selected item text color.\n * @cssprop [--hx-list-item-description-color=var(--hx-color-neutral-500)] - Description text color.\n /\n@customElement('hx-list-item')\nexport class HelixListItem extends LitElement {\n static override styles = [helixListItemStyles];\n\n /\n Whether the item is disabled. Prevents interaction.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Whether the item is selected (used in interactive mode).\n * @attr selected\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n When set, renders the item as a link (only in non-interactive variants).\n * @attr href\n /\n @property({ type: String })\n href: string \| undefined = undefined;\n\n /\n The value associated with this item (used with hx-select).\n * @attr value\n /\n @property({ type: String })\n value: string \| undefined = undefined;\n\n /\n Set by the parent hx-list to indicate this item is part of an interactive listbox.\n * Controls CSS styling and ARIA role via host attributes.\n * @attr interactive\n /\n @property({ type: Boolean, reflect: true })\n interactive = false;\n\n /\n Item type for description list variant. Use 'term' for <dt> and 'definition' for <dd>.\n * @attr type\n /\n @property({ type: String, reflect: true })\n type: 'default' \| 'term' \| 'definition' = 'default';\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (\n changedProps.has('interactive') \|\|\n changedProps.has('selected') \|\|\n changedProps.has('disabled')\n ) {\n this._syncHostAria();\n }\n }\n\n /\n Syncs ARIA attributes to the host element when in interactive (listbox option) mode.\n * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].\n /\n /* @internal /\n private _syncHostAria(): void {\n if (this.interactive) {\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', String(this.selected));\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n if (!this.disabled) {\n this.setAttribute('tabindex', '0');\n } else {\n this.removeAttribute('tabindex');\n }\n } else {\n this.removeAttribute('role');\n this.removeAttribute('aria-selected');\n this.removeAttribute('aria-disabled');\n this.removeAttribute('tabindex');\n }\n }\n\n /* @internal /\n private _dispatchListItemClick(): void {\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string \| undefined }>('hx-list-item-click', {\n bubbles: true,\n composed: true,\n detail: { item: this, value: this.value },\n }),\n );\n }\n\n /* @internal /\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this._dispatchListItemClick();\n }\n\n /* @internal /\n private _renderContent() {\n return html`\n <span part=\"prefix\" class=\"list-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span class=\"list-item__body\">\n <span part=\"label\" class=\"list-item__label\">\n <slot></slot>\n </span>\n <span part=\"description\" class=\"list-item__description\">\n <slot name=\"description\"></slot>\n </span>\n </span>\n <span part=\"suffix\" class=\"list-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n override render() {\n // Description list: render as <dt> (term) or <dd> (definition)\n if (this.type === 'term') {\n return html`\n <dt\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dt>\n `;\n }\n\n if (this.type === 'definition') {\n return html`\n <dd\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dd>\n `;\n }\n\n // Interactive mode: role is on the host element (ARIA ownership across shadow DOM).\n // Internal <li> uses role=\"presentation\" so AT sees: listbox > option (host).\n if (this.interactive) {\n // In interactive mode, links are not rendered as <a> to avoid\n // invalid ARIA: focusable content inside role=\"option\" is prohibited.\n return html`\n <li\n part=\"base\"\n role=\"presentation\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n // Non-interactive with href: render as link\n if (this.href !== undefined && !this.disabled) {\n return html`\n <li\n part=\"base\"\n class=\"list-item\"\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n <a class=\"list-item__link\" href=${ifDefined(this.href)} @click=${this._handleClick}>\n ${this._renderContent()}\n </a>\n </li>\n `;\n }\n\n // Default non-interactive\n return html`\n <li\n part=\"base\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n /* @internal /\n private _handleKeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n if (!this.disabled) {\n this._dispatchListItemClick();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list-item': HelixListItem;\n }\n}\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\n \n @summary Container for list items with optional dividers and interactive selection.\n \n @tag hx-list\n \n @slot - Default slot for `hx-list-item` elements.\n \n @fires {CustomEvent<{item: HelixListItem, value: string \| undefined}>} hx-select - Dispatched\n * when an item is clicked in interactive mode.\n \n @csspart base - The root list element.\n \n @cssprop [--hx-list-gap=0] - Gap between list items.\n * @cssprop [--hx-list-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n /\n@customElement('hx-list')\nexport class HelixList extends LitElement {\n static override styles = [helixListStyles];\n\n /\n Visual variant of the list.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'plain' \| 'bulleted' \| 'numbered' \| 'description' \| 'interactive' = 'plain';\n\n /\n Whether to show dividers between list items.\n * @attr divided\n /\n @property({ type: Boolean, reflect: true })\n divided = false;\n\n /\n Accessible label for the list. Required when variant is \"interactive\" (listbox role).\n * @attr label\n /\n @property({ type: String })\n label: string \| undefined = undefined;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('variant')) {\n this._updateItemStates();\n }\n if (this.variant === 'interactive' && !this.label) {\n devWarn(\n 'hx-list',\n 'The \"label\" attribute is required when variant is \"interactive\". ' +\n 'Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).',\n );\n }\n }\n\n /\n Sets the `interactive` property on all child hx-list-item elements\n * so they can style and behave correctly without `:host-context()`.\n /\n /* @internal /\n private _updateItemStates(): void {\n const isInteractive = this.variant === 'interactive';\n const items = this.querySelectorAll('hx-list-item');\n for (const item of items) {\n (item as HelixListItem).interactive = isInteractive;\n }\n }\n\n /* @internal /\n private _handleSlotChange(): void {\n this._updateItemStates();\n }\n\n /* @internal /\n private readonly _handleKeydown = (e: KeyboardEvent): void => {\n if (this.variant !== 'interactive') return;\n\n const items = Array.from(this.querySelectorAll<HelixListItem>('hx-list-item:not([disabled])'));\n if (items.length === 0) return;\n\n const focused = this.querySelector<HelixListItem>('hx-list-item:focus');\n const currentIndex = focused ? items.indexOf(focused) : -1;\n\n let nextIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'ArrowUp':\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n break;\n case 'Home':\n e.preventDefault();\n nextIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n nextIndex = items.length - 1;\n break;\n default:\n return;\n }\n\n items[nextIndex]?.focus();\n };\n\n /* @internal */\n private _handleItemClick(e: Event): void {\n if (this.variant !== 'interactive') return;\n\n if (!(e.target instanceof HelixListItem)) return;\n const item = e.target;\n if (item.disabled) return;\n\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string \| undefined }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item, value: item.value },\n }),\n );\n }\n\n override render() {\n const isInteractive = this.variant === 'interactive';\n const isNumbered = this.variant === 'numbered';\n const isDescription = this.variant === 'description';\n\n const slot = html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n\n if (isDescription) {\n return html`\n <dl\n part=\"base\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </dl>\n `;\n }\n\n if (isNumbered) {\n return html`\n <div\n part=\"base\"\n role=\"list\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n\n return html`\n <div\n part=\"base\"\n class=\"list list--${this.variant}\"\n role=${isInteractive ? 'listbox' : 'list'}\n aria-label=${isInteractive ? this.label \|\| nothing : ifDefined(this.label)}\n aria-multiselectable=${isInteractive ? 'false' : nothing}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list': HelixList;\n }\n}\n"],"names":["helixListStyles","css","helixListItemStyles","HelixListItem","LitElement","changedProps","e","html","classMap","nothing","ifDefined","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","_a","isInteractive","item","isNumbered","isDescription","slot"],"mappings":"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"}

package/dist/shared/{hx-menu-divider-DRT8yHRZ.js → hx-menu-divider-DVWER7iT.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { css as p, LitElement as f, html as u, nothing as h } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
-import { property as c, customElement as x, state as _, query as b } from "lit/decorators.js";
+import { property as c, customElement as x, state as v, query as b } from "lit/decorators.js";
 import { d as g } from "./dev-warn-YlwPHjtX.js";
 import { classMap as y } from "lit/directives/class-map.js";
 const k = p`
@@ -26,11 +26,20 @@ const k = p`
     overflow-y: auto;
     outline: none;
   }
+  /* ─── High Contrast Mode (forced-colors) ─── */
+  @media (forced-colors: active) {
+    .menu {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 `;
-var I = Object.defineProperty, w = Object.getOwnPropertyDescriptor, v = (e, t, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? w(t, s) : t, r = e.length - 1, o; r >= 0; r--)
-    (o = e[r]) && (n = (i ? o(t, s, n) : o(n)) || n);
-  return i && n && I(t, s, n), n;
+var I = Object.defineProperty, w = Object.getOwnPropertyDescriptor, _ = (e, t, n, s) => {
+  for (var i = s > 1 ? void 0 : s ? w(t, n) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = (s ? a(t, n, i) : a(i)) || i);
+  return s && i && I(t, n, i), i;
 };
 let d = class extends f {
   constructor() {
@@ -49,8 +58,8 @@ let d = class extends f {
   /** @internal */
   _syncRovingTabIndex() {
     const e = this._getItems(), t = this._focusedIndex >= 0 ? this._focusedIndex : 0;
-    e.forEach((s, i) => {
-      s.setRovingTabIndex(i === t ? 0 : -1);
+    e.forEach((n, s) => {
+      n.setRovingTabIndex(s === t ? 0 : -1);
     });
   }
   /** Focus the first menu item. */
@@ -68,14 +77,14 @@ let d = class extends f {
     const t = this._getItems();
     if (t.length === 0) return;
     this._focusedIndex = Math.max(0, Math.min(e, t.length - 1)), this._syncRovingTabIndex();
-    const s = t[this._focusedIndex];
-    s !== void 0 && s.focus();
+    const n = t[this._focusedIndex];
+    n !== void 0 && n.focus();
   }
   /** @internal */
   _updateFocusedIndex() {
-    var i;
-    const e = this._getItems(), t = ((i = this.shadowRoot) == null ? void 0 : i.activeElement) ?? document.activeElement, s = e.findIndex((n) => n.matches(":focus-within") || n === t);
-    s !== -1 && (this._focusedIndex = s);
+    var s;
+    const e = this._getItems(), t = ((s = this.shadowRoot) == null ? void 0 : s.activeElement) ?? document.activeElement, n = e.findIndex((i) => i.matches(":focus-within") || i === t);
+    n !== -1 && (this._focusedIndex = n);
   }
   /** @internal */
   _handleKeyDown(e) {
@@ -108,27 +117,27 @@ let d = class extends f {
     this._typeaheadTimer !== null && clearTimeout(this._typeaheadTimer), this._typeaheadBuffer += e.toLowerCase(), this._typeaheadTimer = setTimeout(() => {
       this._typeaheadBuffer = "", this._typeaheadTimer = null;
     }, 500);
-    const s = t.findIndex((i) => {
+    const n = t.findIndex((s) => {
       var r;
-      return i.disabled || i.hasAttribute("disabled") ? !1 : (((r = i.textContent) == null ? void 0 : r.trim().toLowerCase()) ?? "").startsWith(this._typeaheadBuffer);
+      return s.disabled || s.hasAttribute("disabled") ? !1 : (((r = s.textContent) == null ? void 0 : r.trim().toLowerCase()) ?? "").startsWith(this._typeaheadBuffer);
     });
-    s !== -1 && this._focusItem(s);
+    n !== -1 && this._focusItem(n);
   }
   /** @internal */
   _handleSlotChange(e) {
     const t = e.target;
     if (!(t instanceof HTMLSlotElement)) return;
-    const s = /* @__PURE__ */ new Set(["hx-menu-item", "hx-menu-divider"]), i = t.assignedElements().filter((n) => !s.has(n.tagName.toLowerCase()));
-    i.length > 0 && g(
+    const n = /* @__PURE__ */ new Set(["hx-menu-item", "hx-menu-divider"]), s = t.assignedElements().filter((i) => !n.has(i.tagName.toLowerCase()));
+    s.length > 0 && g(
       "hx-menu",
-      `Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${i.map((n) => `<${n.tagName.toLowerCase()}>`).join(", ")}`
+      `Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${s.map((i) => `<${i.tagName.toLowerCase()}>`).join(", ")}`
     ), this._syncRovingTabIndex();
   }
   /** @internal */
   _handleItemSelect(e) {
     if (!(e instanceof CustomEvent)) return;
-    const t = e.detail, s = this._getItems();
-    this._focusedIndex = s.indexOf(t.item), this.dispatchEvent(
+    const t = e.detail, n = this._getItems();
+    this._focusedIndex = n.indexOf(t.item), this.dispatchEvent(
       new CustomEvent("hx-select", {
         bubbles: !0,
         composed: !0,
@@ -158,10 +167,10 @@ let d = class extends f {
   }
 };
 d.styles = [k];
-v([
+_([
   c({ type: String, reflect: !0 })
 ], d.prototype, "label", 2);
-d = v([
+d = _([
   x("hx-menu")
 ], d);
 const C = p`
@@ -263,13 +272,39 @@ const C = p`
       opacity: var(--hx-opacity-muted, 0.6);
     }
   }
+  /* ─── High Contrast Mode (forced-colors) ─── */
+  @media (forced-colors: active) {
+    .menu-item {
+      forced-color-adjust: none;
+      color: CanvasText;
+      background-color: Canvas;
+    }
+    .menu-item:hover,
+    .menu-item:focus-visible {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+    .menu-item:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+    :host([disabled]) .menu-item {
+      color: GrayText;
+      opacity: 1;
+    }
+  }
 `;
-var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, l = (e, t, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? T(t, s) : t, r = e.length - 1, o; r >= 0; r--)
-    (o = e[r]) && (n = (i ? o(t, s, n) : o(n)) || n);
-  return i && n && S(t, s, n), n;
+var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, l = (e, t, n, s) => {
+  for (var i = s > 1 ? void 0 : s ? T(t, n) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = (s ? a(t, n, i) : a(i)) || i);
+  return s && i && S(t, n, i), i;
 };
-let a = class extends f {
+let o = class extends f {
   constructor() {
     super(...arguments), this._rovingTabIndex = -1, this.value = "", this.disabled = !1, this.checked = !1, this.type = "normal", this.loading = !1, this._hasSubmenu = !1, this._submenuOpen = !1;
   }
@@ -410,14 +445,14 @@ let a = class extends f {
     }
   }
   render() {
-    const e = this._getRole(), t = this.type === "checkbox" || this.type === "radio", s = {
+    const e = this._getRole(), t = this.type === "checkbox" || this.type === "radio", n = {
       "menu-item": !0,
       "menu-item--checked": this.checked
     };
     return u`
       <div
         part="base"
-        class=${y(s)}
+        class=${y(n)}
         role=${e}
         tabindex=${this.disabled ? "-1" : String(this._rovingTabIndex)}
         aria-disabled=${this.disabled ? "true" : h}
@@ -445,37 +480,37 @@ let a = class extends f {
     `;
   }
 };
-a.styles = [C];
+o.styles = [C];
 l([
-  _()
-], a.prototype, "_rovingTabIndex", 2);
+  v()
+], o.prototype, "_rovingTabIndex", 2);
 l([
   c({ type: String })
-], a.prototype, "value", 2);
+], o.prototype, "value", 2);
 l([
   c({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled", 2);
+], o.prototype, "disabled", 2);
 l([
   c({ type: Boolean, reflect: !0 })
-], a.prototype, "checked", 2);
+], o.prototype, "checked", 2);
 l([
   c({ type: String, reflect: !0 })
-], a.prototype, "type", 2);
+], o.prototype, "type", 2);
 l([
   c({ type: Boolean, reflect: !0 })
-], a.prototype, "loading", 2);
+], o.prototype, "loading", 2);
 l([
-  _()
-], a.prototype, "_hasSubmenu", 2);
+  v()
+], o.prototype, "_hasSubmenu", 2);
 l([
-  _()
-], a.prototype, "_submenuOpen", 2);
+  v()
+], o.prototype, "_submenuOpen", 2);
 l([
   b(".menu-item")
-], a.prototype, "_menuItemEl", 2);
-a = l([
+], o.prototype, "_menuItemEl", 2);
+o = l([
   x("hx-menu-item")
-], a);
+], o);
 const E = p`
   :host {
     display: block;
@@ -486,11 +521,19 @@ const E = p`
     background-color: var(--hx-menu-divider-color, var(--hx-color-neutral-200, #e2e8f0));
     margin: var(--hx-space-1, 0.25rem) calc(-1 * var(--hx-space-1, 0.25rem));
   }
+  /* ─── High Contrast Mode (forced-colors) ─── */
+  @media (forced-colors: active) {
+    .menu-divider {
+      background-color: GrayText;
+    }
+  }
 `;
-var $ = Object.getOwnPropertyDescriptor, D = (e, t, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? $(t, s) : t, r = e.length - 1, o; r >= 0; r--)
-    (o = e[r]) && (n = o(n) || n);
-  return n;
+var $ = Object.getOwnPropertyDescriptor, D = (e, t, n, s) => {
+  for (var i = s > 1 ? void 0 : s ? $(t, n) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = a(i) || i);
+  return i;
 };
 let m = class extends f {
   render() {
@@ -509,6 +552,6 @@ m = D([
 export {
   d as H,
   m as a,
-  a as b
+  o as b
 };
-//# sourceMappingURL=hx-menu-divider-DRT8yHRZ.js.map
+//# sourceMappingURL=hx-menu-divider-DVWER7iT.js.map