@helixui/library 2.1.2 → 3.0.0

package/dist/shared/hx-image-2gt14zZd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-image-2gt14zZd.js","sources":["../../src/components/hx-image/hx-image.styles.ts","../../src/components/hx-image/hx-image.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixImageStyles = css`\n  :host {\n    display: block;\n  }\n\n  .image__container {\n    position: relative;\n    display: block;\n    overflow: hidden;\n    margin: 0;\n    padding: 0;\n    aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));\n    border-radius: var(--_radius, var(--hx-image-border-radius, 0));\n  }\n\n  .image__container--error {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: var(--hx-image-fallback-min-height, 3rem);\n    background-color: var(--hx-color-neutral-100, #f1f5f9);\n    color: var(--hx-color-neutral-500, #64748b);\n  }\n\n  .image__img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: var(--_fit, var(--hx-image-object-fit, cover));\n  }\n\n  .image__caption {\n    display: none;\n    padding: var(--hx-image-caption-padding, 0.5rem 0 0);\n    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #475569));\n    font-size: var(--hx-image-caption-font-size, 0.875rem);\n  }\n\n  .image__caption--visible {\n    display: block;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .image__container--error {\n      border: 1px solid GrayText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixImageStyles } from './hx-image.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An accessible image wrapper with lazy loading, fallback support, aspect ratio control,\n * responsive image (srcset/sizes) support, and optional caption.\n *\n * @summary Accessible image wrapper with lazy loading, fallback, srcset, and aspect ratio control.\n *\n * @tag hx-image\n *\n * @slot fallback - Custom content shown when the image fails to load and no fallback-src is set.\n * @slot caption - Optional caption content rendered in a figcaption element below the image.\n *\n * @csspart base - The inner img element.\n * @csspart caption - The figcaption element (visible only when caption content is present).\n *\n * @cssprop [--hx-image-object-fit] - Controls how the image fills its container. Maps to object-fit.\n * @cssprop [--hx-image-border-radius] - Border radius of the image. Overridden by the `rounded` prop.\n * @cssprop [--hx-image-aspect-ratio] - Aspect ratio of the image container. Overridden by the `ratio` prop.\n * @cssprop [--hx-image-caption-color] - Text color for the caption.\n * @cssprop [--hx-image-caption-font-size] - Font size for the caption.\n * @cssprop [--hx-image-caption-padding] - Padding for the caption.\n * @cssprop [--hx-image-fallback-min-height] - Minimum height of the error/fallback container.\n *\n * @fires hx-load - Dispatched when the image has successfully loaded.\n * @fires hx-error - Dispatched when the image fails to load (including after fallback-src also fails).\n */\n@customElement('hx-image')\nexport class HelixImage extends HelixElement {\n  static override styles = [helixImageStyles];\n\n  /**\n   * The URL of the image to display.\n   * @attr src\n   */\n  @property({ type: String, reflect: true })\n  src = '';\n\n  /**\n   * Accessible text description of the image.\n   * Required for informative images. Use the `decorative` prop for decorative images\n   * instead of setting this to an empty string — explicit decorative intent is preferred.\n   * @attr alt\n   */\n  @property({ type: String, reflect: true })\n  alt: string | undefined = undefined;\n\n  /**\n   * Marks the image as decorative (hidden from screen readers).\n   * Use this instead of `alt=\"\"` to make decorative intent explicit in markup.\n   * When set, the inner img receives `alt=\"\"` and `role=\"presentation\"`.\n   * @attr decorative\n   */\n  @property({ type: Boolean, reflect: true })\n  decorative = false;\n\n  /**\n   * Width of the image element.\n   * @attr width\n   */\n  @property({ reflect: true })\n  width: number | string | undefined = undefined;\n\n  /**\n   * Height of the image element.\n   * @attr height\n   */\n  @property({ reflect: true })\n  height: number | string | undefined = undefined;\n\n  /**\n   * Loading strategy for the image.\n   * @attr loading\n   */\n  @property({ type: String, reflect: true })\n  loading: 'lazy' | 'eager' = 'lazy';\n\n  /**\n   * How the image should be resized to fit its container.\n   * Maps to CSS object-fit.\n   * @attr fit\n   */\n  @property({ type: String, reflect: true })\n  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | undefined = undefined;\n\n  /**\n   * CSS aspect-ratio value (e.g. \"16/9\", \"1\", \"4/3\").\n   * When set, the container maintains this ratio.\n   * @attr ratio\n   */\n  @property({ type: String, reflect: true })\n  ratio: string | undefined = undefined;\n\n  /**\n   * Border radius for the image.\n   * Boolean attribute (or `true`) applies the theme's medium radius token.\n   * A string value is used directly as a CSS border-radius value (e.g. \"1rem\", \"50%\").\n   *\n   * Note: When set as an HTML attribute (`<hx-image rounded>`), Lit receives the value as\n   * an empty string (`''`). When set programmatically (`el.rounded = true`), it receives\n   * a boolean. Both forms apply the theme radius token.\n   *\n   * @attr rounded\n   */\n  @property({ type: String, reflect: true })\n  rounded: boolean | string | undefined = undefined;\n\n  /**\n   * Fallback image URL shown when the primary src fails to load.\n   * @attr fallback-src\n   */\n  @property({ type: String, attribute: 'fallback-src', reflect: true })\n  fallbackSrc: string | undefined = undefined;\n\n  /**\n   * A comma-separated list of image candidates for responsive images.\n   * Passed directly to the inner img's srcset attribute.\n   * Enables Drupal responsive image styles and browser-native image selection.\n   * @attr srcset\n   */\n  @property({ type: String, reflect: true })\n  srcset: string | undefined = undefined;\n\n  /**\n   * Media conditions indicating which image size to use alongside srcset.\n   * Works in conjunction with the `srcset` attribute.\n   * @attr sizes\n   */\n  @property({ type: String, reflect: true })\n  sizes: string | undefined = undefined;\n\n  /** @internal */\n  @state()\n  private _error = false;\n\n  /** @internal */\n  @state()\n  private _usedFallbackSrc = false;\n\n  /** @internal */\n  @state()\n  private _hasCaptionSlot = false;\n\n  /** @internal */\n  private _handleLoad(): void {\n    this.dispatchEvent(new CustomEvent<void>('hx-load', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _handleError(): void {\n    if (!this._error && this.fallbackSrc && !this._usedFallbackSrc) {\n      // Try the fallback-src before showing the fallback slot\n      this._usedFallbackSrc = true;\n      return;\n    }\n    this._error = true;\n    this.dispatchEvent(new CustomEvent<void>('hx-error', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _onCaptionSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasCaptionSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _computeBorderRadius(): string | undefined {\n    if (this.rounded === true || this.rounded === '' || this.rounded === 'true') {\n      return 'var(--hx-border-radius-md, 0.375rem)';\n    }\n    if (typeof this.rounded === 'string' && this.rounded.length > 0 && this.rounded !== 'false') {\n      return this.rounded;\n    }\n    return undefined;\n  }\n\n  /** @internal */\n  private _currentSrc(): string {\n    if (this._usedFallbackSrc && this.fallbackSrc) {\n      return this.fallbackSrc;\n    }\n    return this.src;\n  }\n\n  override render() {\n    if (!this.decorative && !this.alt) {\n      devWarn(\n        'hx-image',\n        'Informative images require an `alt` attribute for accessibility (WCAG 1.1.1). ' +\n          'Provide a descriptive `alt` value, or set the `decorative` attribute if the image is decorative.',\n      );\n    }\n    const isDecorative = this.decorative || this.alt === '';\n    const altText = isDecorative ? '' : (this.alt ?? '');\n    const borderRadius = this._computeBorderRadius();\n    const showCaption = this._hasCaptionSlot;\n\n    const containerStyles = {\n      ...(this.ratio ? { '--_ratio': this.ratio } : {}),\n      ...(this.fit ? { '--_fit': this.fit } : {}),\n      ...(borderRadius ? { '--_radius': borderRadius } : {}),\n      ...(this.width != null\n        ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }\n        : {}),\n      ...(this.height != null\n        ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height }\n        : {}),\n    };\n\n    if (this._error) {\n      return html`\n        <figure\n          class=\"image__container image__container--error\"\n          style=${styleMap(containerStyles)}\n          role=\"alert\"\n        >\n          <slot name=\"fallback\"></slot>\n        </figure>\n      `;\n    }\n\n    return html`\n      <figure class=\"image__container\" style=${styleMap(containerStyles)}>\n        <img\n          part=\"base\"\n          class=\"image__img\"\n          src=${this._currentSrc() || nothing}\n          alt=${altText}\n          role=${isDecorative ? 'presentation' : nothing}\n          loading=${this.loading}\n          width=${this.width != null ? this.width : nothing}\n          height=${this.height != null ? this.height : nothing}\n          srcset=${this.srcset ?? nothing}\n          sizes=${this.sizes ?? nothing}\n          @load=${this._handleLoad}\n          @error=${this._handleError}\n        />\n        <figcaption\n          part=\"caption\"\n          class=${classMap({ image__caption: true, 'image__caption--visible': showCaption })}\n        >\n          <slot name=\"caption\" @slotchange=${this._onCaptionSlotChange}></slot>\n        </figcaption>\n      </figure>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-image': HelixImage;\n  }\n}\n"],"names":["helixImageStyles","css","HelixImage","HelixElement","e","slot","isDecorative","altText","borderRadius","showCaption","containerStyles","html","styleMap","nothing","classMap","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-link-IVsXmsKx.js → hx-link-BESrWK8M.js}

@@ -1,9 +1,9 @@
-import { css as v, LitElement as x, nothing as u, svg as f, html as c } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as o, customElement as k } from "lit/decorators.js";
+import { css as x, nothing as v, svg as f, html as h } from "lit";
+import { property as i, customElement as u } 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 m = v`
+import { H as k } from "./helix-element-BNEYeiys.js";
+const m = x`
   :host {
     display: inline;
   }
@@ -32,12 +32,12 @@ const m = v`
   }
 
   .link:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
     text-decoration: var(--hx-link-text-decoration-hover, underline);
   }
 
   .link:active {
-    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e40af));
+    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e3a8a));
   }
 
   .link:focus-visible {
@@ -47,7 +47,7 @@ const m = v`
         var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
-    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
   /* --- Variant: subtle --- */
@@ -58,7 +58,7 @@ const m = v`
   }
 
   .link--subtle:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
     text-decoration: underline;
   }
 
@@ -69,7 +69,7 @@ const m = v`
   }
 
   .link--danger:hover {
-    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));
+    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #991b1b));
   }
 
   /* --- Disabled --- */
@@ -77,7 +77,7 @@ const m = v`
   .link--disabled {
     color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
     text-decoration: none;
-    pointer-events: none;
+    cursor: not-allowed;
   }
 
   /* --- External link icon --- */
@@ -95,6 +95,24 @@ const m = 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,27 +127,31 @@ const m = v`
     border: 0;
   }
 `;
-var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (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;
+var y = 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 && y(n, s, o), o;
 };
-let e = class extends x {
+let r = class extends k {
   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 ---
+  /** @internal Blocks Enter and Space activation on disabled span. */
+  _handleDisabledKeydown(e) {
+    (e.key === "Enter" || e.key === " ") && e.preventDefault();
+  }
   /** @internal */
-  _handleClick(r) {
+  _handleClick(e) {
     if (this.disabled) {
-      r.preventDefault(), r.stopPropagation();
+      e.preventDefault(), e.stopPropagation();
       return;
     }
     this.dispatchEvent(
       new CustomEvent("hx-click", {
         bubbles: !0,
         composed: !0,
-        detail: { originalEvent: r }
+        detail: { originalEvent: e }
       })
     );
   }
@@ -141,7 +163,7 @@ let e = class extends x {
   }
   /** @internal */
   _renderExternalIcon() {
-    return this.target !== "_blank" ? u : c`
+    return this.target !== "_blank" ? v : h`
       <svg
         class="link__external-icon"
         part="external-icon"
@@ -160,25 +182,27 @@ let e = class extends x {
   }
   // --- Render ---
   render() {
-    const r = {
+    const e = {
       link: !0,
       [`link--${this.variant}`]: this.variant !== "default",
       "link--disabled": this.disabled
     };
-    return this.disabled ? c`
+    return this.disabled ? h`
         <span
           part="link"
-          class=${p(r)}
+          class=${p(e)}
           role="link"
           aria-disabled="true"
+          tabindex="0"
           @click=${this._handleClick}
+          @keydown=${this._handleDisabledKeydown}
         >
           <slot></slot>
         </span>
-      ` : c`
+      ` : h`
       <a
         part="link"
-        class=${p(r)}
+        class=${p(e)}
         href=${a(this.href)}
         target=${a(this.target)}
         rel=${a(this._computeRel())}
@@ -191,29 +215,29 @@ let e = class extends x {
     `;
   }
 };
-e.styles = [m];
-i([
-  o({ type: String })
-], e.prototype, "href", 2);
-i([
-  o({ type: String })
-], e.prototype, "target", 2);
-i([
-  o({ type: String, reflect: !0 })
-], e.prototype, "variant", 2);
-i([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-i([
-  o({ type: String })
-], e.prototype, "download", 2);
-i([
-  o({ type: String })
-], e.prototype, "rel", 2);
-e = i([
-  k("hx-link")
-], e);
+r.styles = [m];
+t([
+  i({ type: String })
+], r.prototype, "href", 2);
+t([
+  i({ type: String })
+], r.prototype, "target", 2);
+t([
+  i({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+t([
+  i({ type: String })
+], r.prototype, "download", 2);
+t([
+  i({ type: String })
+], r.prototype, "rel", 2);
+r = t([
+  u("hx-link")
+], r);
 export {
-  e as H
+  r as H
 };
-//# sourceMappingURL=hx-link-IVsXmsKx.js.map
+//# sourceMappingURL=hx-link-BESrWK8M.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-link-BESrWK8M.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, #1e40af));\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, #1e3a8a));\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.25rem);\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, #1e40af));\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, #991b1b));\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 { 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 { HelixElement } from '../../base/index.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 HelixElement {\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","HelixElement","nothing","html","svg","classes","classMap","ifDefined","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-list-CoTDMp19.js → hx-list-_9qVv02L.js}

@@ -1,8 +1,8 @@
-import { css as v, LitElement as b, html as a, nothing as p } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as o, customElement as x } from "lit/decorators.js";
+import { css as v, html as a, nothing as h } from "lit";
+import { property as n, customElement as b } from "lit/decorators.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
 import { classMap as m } from "lit/directives/class-map.js";
+import { H as x } from "./helix-element-BNEYeiys.js";
 const y = v`
   :host {
     display: block;
@@ -51,6 +51,16 @@ const y = v`
     border-bottom: var(--hx-border-width-thin, 1px) solid
       var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /* Divider borders are already using a border property, which forced-colors respects.
+       Ensure the system color is used for divider borders. */
+    :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {
+      border-bottom-color: CanvasText;
+    }
+  }
 `, _ = v`
   :host {
     display: block;
@@ -69,7 +79,7 @@ const y = v`
     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-family: var(--hx-list-item-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;
@@ -91,7 +101,7 @@ const y = v`
 
   :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));
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #1d4ed8));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -99,7 +109,7 @@ const y = v`
 
   .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));
+    color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1e40af));
   }
 
   /* ─── Disabled state ─── */
@@ -122,7 +132,7 @@ const y = v`
 
   .list-item__link:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #1d4ed8));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -159,13 +169,45 @@ const y = v`
       transition: none;
     }
   }
+
+  /* ─── Forced colors (Windows High Contrast / forced-colors mode) ─── */
+
+  @media (forced-colors: active) {
+    /* Selected state: replace background-color with a visible border using system Highlight color */
+    :host([interactive]) .list-item--selected {
+      background-color: transparent;
+      border: 2px solid Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+
+    /* Hover state: use an outline instead of background-color */
+    :host([interactive]) .list-item:hover:not(.list-item--disabled) {
+      background-color: transparent;
+      outline: 1px solid Highlight;
+      outline-offset: -1px;
+    }
+
+    /* Disabled state: use system GrayText color */
+    :host([interactive][disabled]) .list-item,
+    :host([interactive]) .list-item--disabled {
+      color: GrayText;
+    }
+
+    /* Focus ring: ensure visibility in forced-colors mode */
+    :host([interactive]):focus-visible .list-item {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+      forced-color-adjust: none;
+    }
+  }
 `;
-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--)
+var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, c = (t, e, r, s) => {
+  for (var i = s > 1 ? void 0 : s ? k(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 b {
+let o = class extends x {
   constructor() {
     super(...arguments), this.disabled = !1, this.selected = !1, this.href = void 0, this.value = void 0, this.interactive = !1, this.type = "default";
   }
@@ -222,7 +264,7 @@ let n = class extends b {
         <dt
           part="base"
           class=${m({ "list-item": !0, "list-item--disabled": this.disabled })}
-          aria-disabled=${this.disabled ? "true" : p}
+          aria-disabled=${this.disabled ? "true" : h}
         >
           ${this._renderContent()}
         </dt>
@@ -230,7 +272,7 @@ let n = class extends b {
         <dd
           part="base"
           class=${m({ "list-item": !0, "list-item--disabled": this.disabled })}
-          aria-disabled=${this.disabled ? "true" : p}
+          aria-disabled=${this.disabled ? "true" : h}
         >
           ${this._renderContent()}
         </dd>
@@ -253,7 +295,7 @@ let n = 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=${u(this.href)} @click=${this._handleClick}>
             ${this._renderContent()}
@@ -268,7 +310,7 @@ let n = 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}
       >
@@ -281,34 +323,34 @@ let n = class extends b {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.disabled || this._dispatchListItemClick());
   }
 };
-n.styles = [_];
+o.styles = [_];
 c([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "disabled", 2);
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
 c([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "selected", 2);
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "selected", 2);
 c([
-  o({ type: String })
-], n.prototype, "href", 2);
+  n({ type: String })
+], o.prototype, "href", 2);
 c([
-  o({ type: String })
-], n.prototype, "value", 2);
+  n({ type: String })
+], o.prototype, "value", 2);
 c([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "interactive", 2);
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "interactive", 2);
 c([
-  o({ type: String, reflect: !0 })
-], n.prototype, "type", 2);
-n = c([
-  x("hx-list-item")
-], n);
-var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (t, e, r, s) => {
+  n({ type: String, reflect: !0 })
+], o.prototype, "type", 2);
+o = c([
+  b("hx-list-item")
+], o);
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (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;
+  return s && i && $(e, r, i), i;
 };
-let h = class extends b {
+let p = class extends x {
   constructor() {
     super(...arguments), this.variant = "plain", this.divided = !1, this.label = void 0, this._handleKeydown = (t) => {
       var l;
@@ -361,7 +403,7 @@ let h = class extends b {
   }
   /** @internal */
   _handleItemClick(t) {
-    if (this.variant !== "interactive" || !(t.target instanceof n)) return;
+    if (this.variant !== "interactive" || !(t.target instanceof o)) return;
     const e = t.target;
     e.disabled || this.dispatchEvent(
       new CustomEvent("hx-select", {
@@ -397,8 +439,8 @@ let h = class extends b {
         part="base"
         class="list list--${this.variant}"
         role=${t ? "listbox" : "list"}
-        aria-label=${u(this.label)}
-        aria-multiselectable=${t ? "false" : p}
+        aria-label=${t ? this.label || h : u(this.label)}
+        aria-multiselectable=${t ? "false" : h}
         @hx-list-item-click=${this._handleItemClick}
       >
         ${s}
@@ -406,21 +448,21 @@ let h = class extends b {
     `;
   }
 };
-h.styles = [y];
+p.styles = [y];
 f([
-  o({ type: String, reflect: !0 })
-], h.prototype, "variant", 2);
+  n({ type: String, reflect: !0 })
+], p.prototype, "variant", 2);
 f([
-  o({ type: Boolean, reflect: !0 })
-], h.prototype, "divided", 2);
+  n({ type: Boolean, reflect: !0 })
+], p.prototype, "divided", 2);
 f([
-  o({ type: String })
-], h.prototype, "label", 2);
-h = f([
-  x("hx-list")
-], h);
+  n({ type: String })
+], p.prototype, "label", 2);
+p = f([
+  b("hx-list")
+], p);
 export {
-  h as H,
-  n as a
+  p as H,
+  o as a
 };
-//# sourceMappingURL=hx-list-CoTDMp19.js.map
+//# sourceMappingURL=hx-list-_9qVv02L.js.map

package/dist/shared/hx-list-_9qVv02L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-list-_9qVv02L.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  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    /* Divider borders are already using a border property, which forced-colors respects.\n       Ensure the system color is used for divider borders. */\n    :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n      border-bottom-color: CanvasText;\n    }\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-list-item-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, #1d4ed8));\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, #1e40af));\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, #1d4ed8));\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 { 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 { HelixElement } from '../../base/index.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 HelixElement {\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 { 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 { HelixElement } from '../../base/index.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 HelixElement {\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","HelixElement","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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"}