@helixui/library 0.1.0

package/dist/shared/hx-link-DObQ7eS4.js

@@ -0,0 +1,209 @@
+import { css as v, LitElement as x, nothing as u, svg as f, html as c } from "lit";
+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";
+import { t as m } from "./lit-Dpo7RLp4.js";
+const b = v`
+  :host {
+    display: inline;
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  /* --- Base Link --- */
+
+  .link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));
+    font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));
+    font-size: inherit;
+    line-height: inherit;
+    text-decoration: var(--hx-link-text-decoration, underline);
+    text-underline-offset: var(--hx-link-underline-offset, 2px);
+    cursor: pointer;
+    outline: 0;
+    transition:
+      color var(--hx-transition-fast, 150ms ease),
+      text-decoration-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .link:hover {
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    text-decoration: var(--hx-link-text-decoration-hover, underline);
+  }
+
+  .link:active {
+    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e40af));
+  }
+
+  .link:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-link-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+  }
+
+  /* --- Variant: subtle --- */
+
+  .link--subtle {
+    color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));
+    text-decoration: none;
+  }
+
+  .link--subtle:hover {
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    text-decoration: underline;
+  }
+
+  /* --- Variant: danger --- */
+
+  .link--danger {
+    color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));
+  }
+
+  .link--danger:hover {
+    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));
+  }
+
+  /* --- Disabled --- */
+
+  .link--disabled {
+    color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
+    text-decoration: none;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* --- External link icon --- */
+
+  .link__external-icon {
+    display: inline-flex;
+    width: 0.75em;
+    height: 0.75em;
+    flex-shrink: 0;
+  }
+
+  /* --- Visually hidden (sr-only) --- */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (r, n, s, l) => {
+  for (var t = l > 1 ? void 0 : l ? y(n, s) : n, h = r.length - 1, d; h >= 0; h--)
+    (d = r[h]) && (t = (l ? d(n, s, t) : d(t)) || t);
+  return l && t && g(n, s, t), t;
+};
+let e = class extends x {
+  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;
+  }
+  // --- Event Handling ---
+  _handleClick(r) {
+    if (this.disabled) {
+      r.preventDefault(), r.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("hx-click", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: r }
+      })
+    );
+  }
+  // --- Render Helpers ---
+  _computeRel() {
+    if (this.rel) return this.rel;
+    if (this.target === "_blank") return "noopener noreferrer";
+  }
+  _renderExternalIcon() {
+    return this.target !== "_blank" ? u : c`
+      <svg
+        class="link__external-icon"
+        part="external-icon"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        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" />`}
+      </svg>
+      <span class="sr-only">(opens in new tab)</span>
+    `;
+  }
+  // --- Render ---
+  render() {
+    const r = {
+      link: !0,
+      [`link--${this.variant}`]: this.variant !== "default",
+      "link--disabled": this.disabled
+    };
+    return this.disabled ? c`
+        <span
+          part="link"
+          class=${p(r)}
+          role="link"
+          tabindex="0"
+          aria-disabled="true"
+          @click=${this._handleClick}
+        >
+          <slot></slot>
+        </span>
+      ` : c`
+      <a
+        part="link"
+        class=${p(r)}
+        href=${a(this.href)}
+        target=${a(this.target)}
+        rel=${a(this._computeRel())}
+        download=${a(this.download)}
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+        ${this._renderExternalIcon()}
+      </a>
+    `;
+  }
+};
+e.styles = [m, b];
+o([
+  i({ type: String })
+], e.prototype, "href", 2);
+o([
+  i({ type: String })
+], e.prototype, "target", 2);
+o([
+  i({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  i({ type: String })
+], e.prototype, "download", 2);
+o([
+  i({ type: String })
+], e.prototype, "rel", 2);
+e = o([
+  k("hx-link")
+], e);
+export {
+  e as H
+};
+//# sourceMappingURL=hx-link-DObQ7eS4.js.map

package/dist/shared/hx-link-DObQ7eS4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-link-DObQ7eS4.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(--hx-link-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\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    pointer-events: none;\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  /* --- 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 { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { 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-500)] - Danger variant color.\n * @cssprop [--hx-link-text-decoration=underline] - Link text decoration.\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 = [tokenStyles, 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: LinkVariant = '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  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('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n  }\n\n  // --- Render Helpers ---\n\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  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          tabindex=\"0\"\n          aria-disabled=\"true\"\n          @click=${this._handleClick}\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","e","nothing","html","svg","classes","classMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-list-B6yPCAAW.js

@@ -0,0 +1,402 @@
+import { css as v, LitElement as f, html as a, nothing as p } from "lit";
+import { property as o, customElement as b } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { t as x } from "./lit-Dpo7RLp4.js";
+const y = v`
+  :host {
+    display: block;
+  }
+
+  .list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-list-gap, 0);
+  }
+
+  /* ─── Variant: bulleted ─── */
+
+  .list--bulleted {
+    padding-inline-start: var(--hx-space-6, 1.5rem);
+    list-style: disc;
+  }
+
+  /* ─── Variant: numbered ─── */
+
+  .list--numbered {
+    padding-inline-start: var(--hx-space-6, 1.5rem);
+    list-style: decimal;
+  }
+
+  /* ─── Variant: interactive ─── */
+
+  .list--interactive {
+    list-style: none;
+    padding: 0;
+  }
+
+  /* ─── Variant: description ─── */
+
+  .list--description {
+    padding: 0;
+    list-style: none;
+  }
+
+  /* ─── Dividers ─── */
+
+  :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
+  }
+`, _ = v`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  /* ─── Base list item ─── */
+
+  .list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-3, 0.75rem);
+    padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));
+    color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0f172a));
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+    cursor: default;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  /* ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── */
+
+  :host([interactive]) .list-item {
+    cursor: pointer;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  :host([interactive]) .list-item:hover:not(.list-item--disabled) {
+    background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  :host([interactive]):focus-visible .list-item {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Selected state ─── */
+
+  .list-item--selected {
+    background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #eff6ff));
+    color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1d4ed8));
+  }
+
+  /* ─── Disabled state ─── */
+
+  .list-item--disabled {
+    cursor: not-allowed;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  /* ─── Link mode ─── */
+
+  .list-item__link {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-3, 0.75rem);
+    width: 100%;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .list-item__link:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }
+
+  /* ─── Slots ─── */
+
+  .list-item__prefix,
+  .list-item__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .list-item__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .list-item__label {
+    display: block;
+  }
+
+  .list-item__description {
+    display: block;
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #64748b));
+    margin-top: var(--hx-space-1, 0.25rem);
+  }
+`;
+var g = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (t, e, r, s) => {
+  for (var i = s > 1 ? void 0 : s ? $(e, r) : e, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (i = (s ? d(e, r, i) : d(i)) || i);
+  return s && i && g(e, r, i), i;
+};
+let n = class extends f {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.selected = !1, this.href = void 0, this.value = void 0, this.interactive = !1, this.type = "default";
+  }
+  updated(t) {
+    super.updated(t), (t.has("interactive") || t.has("selected") || t.has("disabled")) && this._syncHostAria();
+  }
+  /**
+   * Syncs ARIA attributes to the host element when in interactive (listbox option) mode.
+   * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].
+   */
+  _syncHostAria() {
+    this.interactive ? (this.setAttribute("role", "option"), this.setAttribute("aria-selected", String(this.selected)), this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0")) : (this.removeAttribute("role"), this.removeAttribute("aria-selected"), this.removeAttribute("aria-disabled"), this.removeAttribute("tabindex"));
+  }
+  _handleClick(t) {
+    if (this.disabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("hx-list-item-click", {
+        bubbles: !0,
+        composed: !0,
+        detail: { item: this, value: this.value }
+      })
+    );
+  }
+  _renderContent() {
+    return a`
+      <span part="prefix" class="list-item__prefix">
+        <slot name="prefix"></slot>
+      </span>
+      <span class="list-item__body">
+        <span part="label" class="list-item__label">
+          <slot></slot>
+        </span>
+        <span part="description" class="list-item__description">
+          <slot name="description"></slot>
+        </span>
+      </span>
+      <span part="suffix" class="list-item__suffix">
+        <slot name="suffix"></slot>
+      </span>
+    `;
+  }
+  render() {
+    return this.type === "term" ? a`
+        <dt
+          part="base"
+          class="list-item ${this.disabled ? "list-item--disabled" : ""}"
+          aria-disabled=${this.disabled ? "true" : p}
+        >
+          ${this._renderContent()}
+        </dt>
+      ` : this.type === "definition" ? a`
+        <dd
+          part="base"
+          class="list-item ${this.disabled ? "list-item--disabled" : ""}"
+          aria-disabled=${this.disabled ? "true" : p}
+        >
+          ${this._renderContent()}
+        </dd>
+      ` : this.interactive ? a`
+        <li
+          part="base"
+          role="presentation"
+          class="list-item ${this.selected ? "list-item--selected" : ""} ${this.disabled ? "list-item--disabled" : ""}"
+          @click=${this._handleClick}
+          @keydown=${this._handleKeydown}
+        >
+          ${this._renderContent()}
+        </li>
+      ` : this.href !== void 0 && !this.disabled ? a`
+        <li
+          part="base"
+          class="list-item"
+          role="listitem"
+          aria-disabled=${this.disabled ? "true" : p}
+        >
+          <a class="list-item__link" href=${m(this.href)} @click=${this._handleClick}>
+            ${this._renderContent()}
+          </a>
+        </li>
+      ` : a`
+      <li
+        part="base"
+        class="list-item ${this.selected ? "list-item--selected" : ""} ${this.disabled ? "list-item--disabled" : ""}"
+        role="listitem"
+        aria-disabled=${this.disabled ? "true" : p}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        ${this._renderContent()}
+      </li>
+    `;
+  }
+  _handleKeydown(t) {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.disabled || this._handleClick(t));
+  }
+};
+n.styles = [x, _];
+c([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled", 2);
+c([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "selected", 2);
+c([
+  o({ type: String })
+], n.prototype, "href", 2);
+c([
+  o({ type: String })
+], n.prototype, "value", 2);
+c([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "interactive", 2);
+c([
+  o({ type: String, reflect: !0 })
+], n.prototype, "type", 2);
+n = c([
+  b("hx-list-item")
+], n);
+var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, u = (t, e, r, s) => {
+  for (var i = s > 1 ? void 0 : s ? w(e, r) : e, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (i = (s ? d(e, r, i) : d(i)) || i);
+  return s && i && k(e, r, i), i;
+};
+let h = class extends f {
+  constructor() {
+    super(...arguments), this.variant = "plain", this.divided = !1, this.label = void 0, this._handleKeydown = (t) => {
+      var l;
+      if (this.variant !== "interactive") return;
+      const e = Array.from(this.querySelectorAll("hx-list-item:not([disabled])"));
+      if (e.length === 0) return;
+      const r = this.querySelector("hx-list-item:focus"), s = r ? e.indexOf(r) : -1;
+      let i = s;
+      switch (t.key) {
+        case "ArrowDown":
+          t.preventDefault(), i = s < e.length - 1 ? s + 1 : 0;
+          break;
+        case "ArrowUp":
+          t.preventDefault(), i = s > 0 ? s - 1 : e.length - 1;
+          break;
+        case "Home":
+          t.preventDefault(), i = 0;
+          break;
+        case "End":
+          t.preventDefault(), i = e.length - 1;
+          break;
+        default:
+          return;
+      }
+      (l = e[i]) == null || l.focus();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  updated(t) {
+    super.updated(t), t.has("variant") && this._updateItemStates(), this.variant === "interactive" && !this.label && console.warn(
+      '[hx-list] The "label" attribute is required when variant is "interactive". Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).'
+    );
+  }
+  /**
+   * Sets the `interactive` property on all child hx-list-item elements
+   * so they can style and behave correctly without `:host-context()`.
+   */
+  _updateItemStates() {
+    const t = this.variant === "interactive", e = this.querySelectorAll("hx-list-item");
+    for (const r of e)
+      r.interactive = t;
+  }
+  _handleSlotChange() {
+    this._updateItemStates();
+  }
+  _handleItemClick(t) {
+    if (this.variant !== "interactive" || !(t.target instanceof n)) return;
+    const e = t.target;
+    e.disabled || this.dispatchEvent(
+      new CustomEvent("hx-select", {
+        bubbles: !0,
+        composed: !0,
+        detail: { item: e, value: e.value }
+      })
+    );
+  }
+  render() {
+    const t = this.variant === "interactive", e = this.variant === "numbered", r = this.variant === "description", s = a`<slot @slotchange=${this._handleSlotChange}></slot>`;
+    return r ? a`
+        <dl
+          part="base"
+          class="list list--${this.variant}"
+          aria-label=${m(this.label)}
+          @hx-list-item-click=${this._handleItemClick}
+        >
+          ${s}
+        </dl>
+      ` : e ? a`
+        <div
+          part="base"
+          role="list"
+          class="list list--${this.variant}"
+          aria-label=${m(this.label)}
+          @hx-list-item-click=${this._handleItemClick}
+        >
+          ${s}
+        </div>
+      ` : a`
+      <div
+        part="base"
+        class="list list--${this.variant}"
+        role=${t ? "listbox" : "list"}
+        aria-label=${m(this.label)}
+        aria-multiselectable=${t ? "false" : p}
+        @hx-list-item-click=${this._handleItemClick}
+      >
+        ${s}
+      </div>
+    `;
+  }
+};
+h.styles = [x, y];
+u([
+  o({ type: String, reflect: !0 })
+], h.prototype, "variant", 2);
+u([
+  o({ type: Boolean, reflect: !0 })
+], h.prototype, "divided", 2);
+u([
+  o({ type: String })
+], h.prototype, "label", 2);
+h = u([
+  b("hx-list")
+], h);
+export {
+  h as H,
+  n as a
+};
+//# sourceMappingURL=hx-list-B6yPCAAW.js.map