@helixui/library 3.1.0 → 3.2.0-next.102

package/dist/shared/{hx-icon-button-BHneqPCU.js → hx-icon-button-CGNdQSFM.js}

@@ -1,32 +1,33 @@
-import { css as x, html as c, nothing as u } from "lit";
-import { property as e, customElement as p } from "lit/decorators.js";
+import { css as f, html as c, nothing as u } from "lit";
+import { property as e, customElement as x } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { ifDefined as b } from "lit/directives/if-defined.js";
-import { H as v } from "./helix-element-BNEYeiys.js";
-const m = x`
+import { f as p } from "./forced-colors-CTEDFRGa.js";
+import { H as m } from "./helix-element-BNEYeiys.js";
+const v = f`
   :host {
     display: inline-block;
   }
 
   :host([disabled]) {
     pointer-events: none;
-    opacity: var(--hx-opacity-disabled);
+    opacity: var(--hx-opacity-disabled, 0.5);
   }
 
   .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);
-    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-icon-button-bg);
-    color: var(--hx-icon-button-color, var(--hx-color-primary-500));
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-icon-button-border-color, transparent);
+    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-icon-button-bg, transparent);
+    color: var(--hx-icon-button-color, var(--hx-color-primary-500, #429797));
     cursor: pointer;
     transition:
-      background-color var(--hx-transition-fast),
-      color var(--hx-transition-fast),
-      border-color var(--hx-transition-fast),
-      box-shadow var(--hx-transition-fast);
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
     text-decoration: none;
     user-select: none;
     -webkit-user-select: none;
@@ -34,9 +35,9 @@ const m = x`
   }
 
   .button:focus-visible {
-    outline: var(--hx-focus-ring-width) solid
-      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));
-    outline-offset: var(--hx-focus-ring-offset);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .button:active {
@@ -50,82 +51,90 @@ const m = x`
      the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */
 
   .button--sm {
-    padding: var(--hx-space-1);
-    width: var(--hx-icon-button-size, var(--hx-size-8));
-    height: var(--hx-icon-button-size, var(--hx-size-8));
+    padding: var(--hx-space-1, 0.25rem);
+    width: var(--hx-icon-button-size, var(--hx-size-8, 2rem));
+    height: var(--hx-icon-button-size, var(--hx-size-8, 2rem));
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    font-size: var(--hx-font-size-sm);
+    font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
   .button--md {
-    padding: var(--hx-space-2);
-    width: var(--hx-icon-button-size, var(--hx-size-10));
-    height: var(--hx-icon-button-size, var(--hx-size-10));
+    padding: var(--hx-space-2, 0.5rem);
+    width: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));
+    height: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    font-size: var(--hx-font-size-md);
+    font-size: var(--hx-font-size-md, 1rem);
   }
 
   .button--lg {
-    padding: var(--hx-space-3);
-    width: var(--hx-icon-button-size, var(--hx-size-12));
-    height: var(--hx-icon-button-size, var(--hx-size-12));
+    padding: var(--hx-space-3, 0.75rem);
+    width: var(--hx-icon-button-size, var(--hx-size-12, 3rem));
+    height: var(--hx-icon-button-size, var(--hx-size-12, 3rem));
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    font-size: var(--hx-font-size-lg);
+    font-size: var(--hx-font-size-lg, 1.125rem);
   }
 
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-icon-button-bg: var(--hx-color-primary-500);
-    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-icon-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-icon-button-border-color: transparent;
   }
 
+  /* on-primary tokens are tuned for primary-500. primary-600 + on-primary
+     drops icon contrast to 3.07:1 — fails the 4.5:1 floor for meaningful
+     icons. Pin fg at neutral-0 (5.82:1 on primary-600). Mirrors hx-button. */
   .button--primary:hover {
-    --hx-icon-button-bg: var(--hx-color-primary-600);
+    --hx-icon-button-bg: var(--hx-color-primary-600, #0f7078);
+    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .button--secondary {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-primary-500);
-    --hx-icon-button-border-color: var(--hx-color-primary-500);
+    --hx-icon-button-color: var(--hx-color-primary-500, #429797);
+    --hx-icon-button-border-color: var(--hx-color-primary-500, #429797);
   }
 
   .button--secondary:hover {
-    --hx-icon-button-bg: var(--hx-color-primary-50);
+    --hx-icon-button-bg: var(--hx-color-primary-50, #ebf8f8);
   }
 
   .button--tertiary {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-neutral-700);
-    --hx-icon-button-border-color: var(--hx-color-neutral-300);
+    --hx-icon-button-color: var(--hx-color-text-strong, #202b39);
+    --hx-icon-button-border-color: var(--hx-color-border-strong, #66787b);
   }
 
   .button--tertiary:hover {
-    --hx-icon-button-bg: var(--hx-color-neutral-100);
+    --hx-icon-button-bg: var(--hx-color-surface-sunken, #ebeee9);
   }
 
   .button--danger {
-    --hx-icon-button-bg: var(--hx-color-error-500);
-    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-bg: var(--hx-color-error-500, #e5493e);
+    --hx-icon-button-color: var(--hx-color-text-on-error, #ffffff);
     --hx-icon-button-border-color: transparent;
   }
 
+  /* on-error tokens are tuned for error-500. error-600 + on-error drops
+     icon contrast to 2.25:1 — fails AA. Pin fg at neutral-0
+     (6.47:1 on error-600). Mirrors hx-button danger:hover. */
   .button--danger:hover {
-    --hx-icon-button-bg: var(--hx-color-error-600);
+    --hx-icon-button-bg: var(--hx-color-error-600, #c92a2a);
+    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .button--ghost {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-primary-500);
+    --hx-icon-button-color: var(--hx-color-primary-500, #429797);
     --hx-icon-button-border-color: transparent;
   }
 
   .button--ghost:hover {
-    --hx-icon-button-bg: var(--hx-color-neutral-100);
+    --hx-icon-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   /* ─── Icon Container ─── */
@@ -183,12 +192,12 @@ const m = x`
     }
   }
 `;
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, n, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? g(n, s) : n, h = t.length - 1, l; h >= 0; h--)
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, n, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? y(n, s) : n, h = t.length - 1, l; h >= 0; h--)
     (l = t[h]) && (i = (a ? l(n, s, i) : l(i)) || i);
-  return a && i && f(n, s, i), i;
+  return a && i && g(n, s, i), i;
 };
-let o = class extends v {
+let r = class extends m {
   constructor() {
     super(...arguments), this.label = "", this.variant = "ghost", this.size = "md", this.type = "button", this.disabled = !1, this.href = void 0, this.name = void 0, this.value = void 0;
   }
@@ -260,36 +269,36 @@ let o = class extends v {
     ` : u;
   }
 };
-o.styles = [m];
-o.formAssociated = !0;
-r([
+r.styles = [v, p];
+r.formAssociated = !0;
+o([
   e({ type: String })
-], o.prototype, "label", 2);
-r([
+], r.prototype, "label", 2);
+o([
   e({ type: String, reflect: !0 })
-], o.prototype, "variant", 2);
-r([
+], r.prototype, "variant", 2);
+o([
   e({ type: String, reflect: !0, attribute: "hx-size" })
-], o.prototype, "size", 2);
-r([
+], r.prototype, "size", 2);
+o([
   e({ type: String })
-], o.prototype, "type", 2);
-r([
+], r.prototype, "type", 2);
+o([
   e({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-r([
+], r.prototype, "disabled", 2);
+o([
   e({ type: String })
-], o.prototype, "href", 2);
-r([
+], r.prototype, "href", 2);
+o([
   e({ type: String })
-], o.prototype, "name", 2);
-r([
+], r.prototype, "name", 2);
+o([
   e({ type: String })
-], o.prototype, "value", 2);
-o = r([
-  p("hx-icon-button")
-], o);
+], r.prototype, "value", 2);
+r = o([
+  x("hx-icon-button")
+], r);
 export {
-  o as H
+  r as H
 };
-//# sourceMappingURL=hx-icon-button-BHneqPCU.js.map
+//# sourceMappingURL=hx-icon-button-CGNdQSFM.js.map

package/dist/shared/hx-icon-button-CGNdQSFM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-icon-button-CGNdQSFM.js","sources":["../../src/components/hx-icon-button/hx-icon-button.styles.ts","../../src/components/hx-icon-button/hx-icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-icon-button-border-color, transparent);\n    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-icon-button-bg, transparent);\n    color: var(--hx-icon-button-color, var(--hx-color-primary-500, #429797));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.\n     min-width/min-height override the explicit size tokens when they fall below\n     the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */\n\n  .button--sm {\n    padding: var(--hx-space-1, 0.25rem);\n    width: var(--hx-icon-button-size, var(--hx-size-8, 2rem));\n    height: var(--hx-icon-button-size, var(--hx-size-8, 2rem));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2, 0.5rem);\n    width: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));\n    height: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3, 0.75rem);\n    width: var(--hx-icon-button-size, var(--hx-size-12, 3rem));\n    height: var(--hx-icon-button-size, var(--hx-size-12, 3rem));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n  }\n\n  /* ─── Style Variants ─── */\n\n  .button--primary {\n    --hx-icon-button-bg: var(--hx-color-primary-500, #429797);\n    --hx-icon-button-color: var(--hx-color-text-on-primary, #ffffff);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  /* on-primary tokens are tuned for primary-500. primary-600 + on-primary\n     drops icon contrast to 3.07:1 — fails the 4.5:1 floor for meaningful\n     icons. Pin fg at neutral-0 (5.82:1 on primary-600). Mirrors hx-button. */\n  .button--primary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-600, #0f7078);\n    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .button--secondary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500, #429797);\n    --hx-icon-button-border-color: var(--hx-color-primary-500, #429797);\n  }\n\n  .button--secondary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-50, #ebf8f8);\n  }\n\n  .button--tertiary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-text-strong, #202b39);\n    --hx-icon-button-border-color: var(--hx-color-border-strong, #66787b);\n  }\n\n  .button--tertiary:hover {\n    --hx-icon-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n  }\n\n  .button--danger {\n    --hx-icon-button-bg: var(--hx-color-error-500, #e5493e);\n    --hx-icon-button-color: var(--hx-color-text-on-error, #ffffff);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  /* on-error tokens are tuned for error-500. error-600 + on-error drops\n     icon contrast to 2.25:1 — fails AA. Pin fg at neutral-0\n     (6.47:1 on error-600). Mirrors hx-button danger:hover. */\n  .button--danger:hover {\n    --hx-icon-button-bg: var(--hx-color-error-600, #c92a2a);\n    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .button--ghost {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500, #429797);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-icon-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent\n       multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .button {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 2px solid ButtonText;\n    }\n\n    .button:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .button[disabled] {\n      background-color: ButtonFace;\n      color: GrayText;\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n  }\n`;\n","import { html, nothing } 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 { helixIconButtonStyles } from './hx-icon-button.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An icon-only button component for compact, accessible actions.\n * Renders a square button or anchor element containing a single icon.\n * The `label` property is required and provides the accessible name\n * via `aria-label` and a native tooltip via the `title` attribute.\n *\n * @summary Icon-only action button with full accessibility support.\n *\n * @tag hx-icon-button\n *\n * @slot - Icon element to display (hx-icon, svg, or img).\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when the button is clicked (not disabled).\n *\n * @csspart button - The native button or anchor element.\n * @csspart icon - The icon container span wrapping the default slot.\n *\n * @cssprop [--hx-icon-button-bg=transparent] - Button background color.\n * @cssprop [--hx-icon-button-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-icon-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-icon-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-icon-button-size] - Explicit width and height override for the button.\n * @cssprop [--hx-icon-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-600] - Color.\n */\n@customElement('hx-icon-button')\nexport class HelixIconButton extends HelixElement {\n  static override styles = [helixIconButtonStyles, forcedColorsInteractive];\n\n  /**\n   * Accessible name for the button. Required. Rendered as `aria-label` and\n   * `title` on the underlying element. The component renders nothing when absent,\n   * and a console warning is emitted to alert developers during authoring.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' = 'ghost';\n\n  /**\n   * Size of the button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * The type attribute for the underlying button element.\n   * Has no effect when `href` is set.\n   * @attr type\n   */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Whether the button is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * When set, renders an `<a>` element instead of a `<button>`.\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * Name submitted with form data. Only applicable when rendering as a button.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Value submitted with form data. Only applicable when rendering as a button.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    /**\n     * Dispatched when the button is clicked.\n     * @event hx-click\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    // Handle form submission/reset if form-associated and not in href/link mode\n    if (!this.href) {\n      if (this.type === 'submit' && this._internals.form) {\n        this._internals.form.requestSubmit();\n      } else if (this.type === 'reset' && this._internals.form) {\n        this._internals.form.reset();\n      }\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _normalizedLabel(): string {\n    return this.label.trim();\n  }\n\n  /** @internal */\n  private _classes() {\n    return {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n    };\n  }\n\n  /** @internal */\n  private _iconSlot() {\n    return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const normalizedLabel = this._normalizedLabel();\n    if (!normalizedLabel) {\n      devWarn(\n        'hx-icon-button',\n        'The `label` property is required for accessibility. Render suppressed.',\n      );\n      return nothing;\n    }\n\n    if (this.href !== undefined) {\n      // P1-03 fix: disabled anchor must set tabindex=\"-1\" explicitly — an <a>\n      // without href is non-focusable by default in most browsers, but this is\n      // browser-dependent. Explicit tabindex=\"-1\" guarantees keyboard exclusion\n      // across all conforming browsers.\n      // P1-07 note: aria-disabled IS required on the anchor branch because\n      // <a> elements have no native disabled attribute; aria-disabled is the\n      // only AT signal available.\n      return html`\n        <a\n          part=\"button\"\n          class=${classMap(this._classes())}\n          href=${ifDefined(this.disabled ? undefined : this.href)}\n          aria-label=${normalizedLabel}\n          title=${normalizedLabel}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : nothing}\n          @click=${this._handleClick}\n        >\n          ${this._iconSlot()}\n        </a>\n      `;\n    }\n\n    // P1-07 fix: aria-disabled is redundant on a natively disabled <button>.\n    // The native disabled attribute already exposes aria-disabled=\"true\"\n    // implicitly in the accessibility tree. Duplicate explicit aria-disabled\n    // creates ambiguity about design intent. Keep only native ?disabled.\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._classes())}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        aria-label=${normalizedLabel}\n        title=${normalizedLabel}\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        @click=${this._handleClick}\n      >\n        ${this._iconSlot()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-icon-button': HelixIconButton;\n  }\n  interface HTMLElementEventMap {\n    'hx-click': CustomEvent<{ originalEvent: MouseEvent }>;\n  }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","HelixElement","disabled","e","html","normalizedLabel","classMap","ifDefined","nothing","forcedColorsInteractive","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-icon-CcyDPDYY.js → hx-icon-fuVm4-bk.js}

@@ -1,8 +1,9 @@
-import { css as _, nothing as o, html as g } from "lit";
+import { css as _, nothing as o, html as m } from "lit";
 import { property as c, state as u, customElement as S } from "lit/decorators.js";
 import { unsafeHTML as x } from "lit/directives/unsafe-html.js";
-import { H as y } from "./helix-element-BNEYeiys.js";
-const b = _`
+import { a as y } from "./forced-colors-CTEDFRGa.js";
+import { H as b } from "./helix-element-BNEYeiys.js";
+const z = _`
   :host {
     display: inline-flex;
     align-items: center;
@@ -84,12 +85,12 @@ const b = _`
     }
   }
 `;
-var z = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (e, i, r, n) => {
-  for (var t = n > 1 ? void 0 : n ? $(i, r) : i, l = e.length - 1, f; l >= 0; l--)
+var $ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (e, i, r, n) => {
+  for (var t = n > 1 ? void 0 : n ? A(i, r) : i, l = e.length - 1, f; l >= 0; l--)
     (f = e[l]) && (t = (n ? f(i, r, t) : f(t)) || t);
-  return n && t && z(i, r, t), t;
+  return n && t && $(i, r, t), t;
 };
-let s = class extends y {
+let s = class extends b {
   constructor() {
     super(...arguments), this.name = "", this.src = void 0, this.spriteUrl = void 0, this.size = "md", this.label = "", this.allowedOrigins = "", this._inlineSvg = "", this._fetchedSrc = void 0, this._fetchSeq = 0;
   }
@@ -187,8 +188,8 @@ let s = class extends y {
           return;
         }
         if (f.has(v)) {
-          const m = p.value.replace(/\s/g, "").toLowerCase();
-          (m.startsWith("javascript:") || m.startsWith("data:")) && h.removeAttribute(p.name);
+          const g = p.value.replace(/\s/g, "").toLowerCase();
+          (g.startsWith("javascript:") || g.startsWith("data:")) && h.removeAttribute(p.name);
         }
       });
     }), w.forEach((h) => t.removeAttribute(h)), t.setAttribute("focusable", "false"), t.outerHTML;
@@ -209,7 +210,7 @@ let s = class extends y {
   /** @internal */
   _renderSprite() {
     const e = !this.label.trim();
-    return g`
+    return m`
       <svg
         part="svg"
         class="icon__svg"
@@ -220,7 +221,7 @@ let s = class extends y {
         aria-hidden=${e ? "true" : o}
         focusable="false"
       >
-        ${e ? o : g`<title>${this.label}</title>`}
+        ${e ? o : m`<title>${this.label}</title>`}
         <use href=${this._spriteHref()}></use>
       </svg>
     `;
@@ -230,7 +231,7 @@ let s = class extends y {
     if (!this._inlineSvg)
       return o;
     const e = !this.label.trim();
-    return g`
+    return m`
       <span
         part="svg"
         class="icon__inline"
@@ -247,7 +248,7 @@ let s = class extends y {
     return typeof this.src == "string" && this.src.trim().length > 0 ? this._renderInline() : this.name ? this._renderSprite() : o;
   }
 };
-s.styles = [b];
+s.styles = [z, y];
 a([
   c({ type: String })
 ], s.prototype, "name", 2);
@@ -279,4 +280,4 @@ const d = /* @__PURE__ */ new Map();
 export {
   s as H
 };
-//# sourceMappingURL=hx-icon-CcyDPDYY.js.map
+//# sourceMappingURL=hx-icon-fuVm4-bk.js.map

package/dist/shared/hx-icon-fuVm4-bk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-icon-fuVm4-bk.js","sources":["../../src/components/hx-icon/hx-icon.styles.ts","../../src/components/hx-icon/hx-icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* vertical-align: middle ensures the icon aligns to the visual centre of\n       adjacent inline text rather than the text baseline. */\n    vertical-align: middle;\n    /* overflow: hidden prevents malformed or oversized icons from painting\n       outside the component boundary. The inner SVG may still set\n       overflow: visible for its own viewBox content. */\n    overflow: hidden;\n    width: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n    height: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n    color: var(--hx-icon-color, currentColor);\n    flex-shrink: 0;\n  }\n\n  /* ─── Size Variants ───\n     Fallback pixel values mirror the design token values at time of writing.\n     If token values are updated the fallbacks should be updated to match. */\n\n  :host([hx-size='xs']) {\n    --hx-icon-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([hx-size='sm']) {\n    --hx-icon-size: var(--hx-size-5, 1.25rem);\n  }\n\n  :host([hx-size='md']) {\n    --hx-icon-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([hx-size='lg']) {\n    --hx-icon-size: var(--hx-size-8, 2rem);\n  }\n\n  :host([hx-size='xl']) {\n    --hx-icon-size: var(--hx-size-10, 2.5rem);\n  }\n\n  /* ─── SVG (sprite mode) ───\n     In sprite mode [part=\"svg\"] is an actual <svg> element. The selector\n     targets it specifically. In inline mode the part is applied to a <span>\n     wrapper — see .icon__inline below. */\n\n  svg[part='svg'] {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n    display: block;\n    overflow: visible;\n  }\n\n  /* ─── Inline SVG wrapper ───\n     In inline mode [part=\"svg\"] is a <span> that wraps the fetched SVG.\n     The inner <svg> is sized to fill the wrapper. */\n\n  .icon__inline {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon__inline svg {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n    display: block;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    :host {\n      color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixIconStyles } from './hx-icon.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/**\n * An icon component that supports inline SVG fetching and SVG sprite sheet references.\n * Decorative icons are automatically hidden from assistive technology.\n * When a label is provided the icon is announced as an image with that label.\n *\n * **Render modes:**\n * - **Sprite mode** (recommended for Drupal/SSR): Set `name` and optionally `sprite-url`.\n *   Renders an `<svg><use href=\"...#name\">` — works server-side without JavaScript.\n * - **Inline mode**: Set `src` to a URL of a standalone SVG file. The component fetches,\n *   sanitizes, and embeds the SVG markup. Requires JavaScript; not server-side renderable.\n *   For Drupal/Twig templates use sprite mode to avoid content shift before hydration.\n *\n * @summary SVG icon with sprite and inline fetch modes for healthcare applications.\n *\n * @tag hx-icon\n *\n * @csspart svg - The SVG element rendered in sprite mode, or the inline SVG container\n *   in inline mode. In sprite mode this is an `<svg>` element; in inline mode it is a\n *   `<span>` element wrapping the fetched SVG. Both expose the same `part` name for\n *   consistent external styling via `::part(svg)`.\n *\n * @cssprop [--hx-icon-size=var(--hx-size-6,1.5rem)] - Width and height of the icon.\n * @cssprop [--hx-icon-color=currentColor] - Icon color.\n * @cssprop [--hx-size-4] - Size token.\n * @cssprop [--hx-size-5] - Size token.\n * @cssprop [--hx-size-6] - Size token.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-size-10] - Size token.\n */\n@customElement('hx-icon')\nexport class HelixIcon extends HelixElement {\n  static override styles = [helixIconStyles, forcedColorsSurface];\n\n  /**\n   * Icon name used as the fragment identifier when referencing a sprite sheet.\n   * For sprite mode provide the bare symbol id (e.g. `check`). The component\n   * will build the full href as `${spriteUrl}#${name}`. If `name` already\n   * starts with `#` it is used as-is (inline sprite reference without a base\n   * URL).\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * URL of a standalone SVG file to fetch and render inline. Takes precedence\n   * over sprite mode when both `src` and `spriteUrl`/`name` are set.\n   *\n   * **Note:** Inline mode requires browser JavaScript (`fetch` + `DOMParser`).\n   * It is not server-side renderable. For Drupal/Twig use sprite mode instead.\n   * @attr src\n   */\n  @property({ type: String })\n  src: string | undefined = undefined;\n\n  /**\n   * Base URL of the SVG sprite sheet. Used together with `name` to construct\n   * the `<use>` href: `${spriteUrl}#${name}`.\n   * @attr sprite-url\n   */\n  @property({ type: String, attribute: 'sprite-url' })\n  spriteUrl: string | undefined = undefined;\n\n  /**\n   * Size variant of the icon.\n   *\n   * Set via the `hx-size` HTML attribute (e.g. `hx-size=\"lg\"`) or via the\n   * `size` JavaScript property (e.g. `el.size = 'lg'`). Both are equivalent —\n   * the `attribute: 'hx-size'` mapping is used to avoid colliding with the\n   * native `<input>` `size` attribute in Drupal attribute-passthrough scenarios.\n   * The CEM exposes both the JS property name (`size`) and the HTML attribute\n   * name (`hx-size`).\n   *\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /**\n   * Accessible label for the icon. When non-empty, `role=\"img\"` and\n   * `aria-label` are applied so assistive technology announces the icon.\n   * When empty the icon is treated as decorative and `aria-hidden=\"true\"` is\n   * applied.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Comma-separated list of allowed origins for cross-origin SVG fetches.\n   * By default, only same-origin URLs are permitted. Set this to allow\n   * specific CDN or asset server origins (e.g., \"https://cdn.example.com,https://assets.example.com\").\n   * @attr allowed-origins\n   */\n  @property({ type: String, attribute: 'allowed-origins' })\n  allowedOrigins = '';\n\n  /**\n   * Stores the sanitized inner markup of an externally fetched SVG.\n   * @internal\n   */\n  @state()\n  private _inlineSvg = '';\n\n  /**\n   * Tracks the `src` URL that was last successfully fetched so that we only\n   * refetch when it genuinely changes.\n   * @internal\n   */\n  @state()\n  private _fetchedSrc: string | undefined = undefined;\n\n  /**\n   * Monotonically-increasing sequence number. Incremented before each fetch so\n   * that stale out-of-order responses can be discarded.\n   */\n  /** @internal */\n  private _fetchSeq = 0;\n\n  // ─── Lifecycle ───\n\n  override updated(changed: PropertyValues<this>): void {\n    super.updated(changed);\n    if (changed.has('src') && this.src !== this._fetchedSrc) {\n      void this._fetchInlineSvg(this.src);\n    }\n  }\n\n  // ─── Inline SVG Fetch ───\n\n  /** @internal */\n  private async _fetchInlineSvg(url: string | undefined): Promise<void> {\n    const seq = ++this._fetchSeq;\n\n    if (!url) {\n      this._inlineSvg = '';\n      this._fetchedSrc = undefined;\n      return;\n    }\n\n    // Validate URL origin — only allow same-origin or data: URIs by default.\n    // Cross-origin SVGs are blocked unless explicitly allowed via allowedOrigins.\n    if (!this._isAllowedOrigin(url)) {\n      console.warn(\n        `[hx-icon] Blocked cross-origin SVG fetch: \"${url}\". ` +\n          'Only same-origin URLs are allowed by default. ' +\n          'Set the allowed-origins attribute to permit specific external origins.',\n      );\n      this._inlineSvg = '';\n      this._fetchedSrc = undefined;\n      return;\n    }\n\n    // Use module-level cache to avoid duplicate network requests for the same URL.\n    // Multiple hx-icon instances sharing the same src will share one in-flight fetch.\n    try {\n      let pending = _svgCache.get(url);\n      if (!pending) {\n        pending = fetch(url).then(async (response) => {\n          if (!response.ok) {\n            _svgCache.delete(url);\n            return '';\n          }\n          return response.text();\n        });\n        _svgCache.set(url, pending);\n      }\n\n      const text = await pending;\n      if (seq !== this._fetchSeq) return;\n\n      if (!text) {\n        this._inlineSvg = '';\n        this._fetchedSrc = undefined;\n        return;\n      }\n\n      const sanitized = this._sanitizeSvg(text);\n      this._inlineSvg = sanitized;\n      this._fetchedSrc = url;\n    } catch {\n      if (seq !== this._fetchSeq) return;\n      _svgCache.delete(url);\n      this._inlineSvg = '';\n      this._fetchedSrc = undefined;\n    }\n  }\n\n  /**\n   * Checks whether a URL is same-origin or matches the configured allowedOrigins.\n   * Relative URLs and data: URIs are always allowed. Cross-origin URLs are blocked\n   * unless their origin appears in the allowedOrigins list.\n   * @internal\n   */\n  private _isAllowedOrigin(url: string): boolean {\n    // Relative URLs are always same-origin\n    if (url.startsWith('/') || url.startsWith('./') || url.startsWith('../')) {\n      return true;\n    }\n\n    try {\n      const parsed = new URL(url, window.location.href);\n\n      // Same-origin is always allowed\n      if (parsed.origin === window.location.origin) {\n        return true;\n      }\n\n      // Check configured allowlist\n      if (this.allowedOrigins) {\n        const allowed = this.allowedOrigins\n          .split(',')\n          .map((o) => o.trim().toLowerCase())\n          .filter(Boolean);\n        return allowed.includes(parsed.origin.toLowerCase());\n      }\n\n      return false;\n    } catch {\n      // Unparseable URL — block it\n      return false;\n    }\n  }\n\n  /**\n   * Parses the raw SVG text, strips dangerous content (script elements,\n   * foreignObject, on* event-handler attributes, javascript:/data: URIs,\n   * and style attributes that could carry CSS injection payloads), and\n   * returns the outer SVG markup safe for rendering via `unsafeHTML`.\n   *\n   * Additionally injects `focusable=\"false\"` on the root SVG element to\n   * prevent IE11/old-Edge from making the SVG keyboard-focusable, and strips\n   * any ARIA attributes from the inner SVG to prevent conflicts with the\n   * wrapper's own ARIA semantics.\n   */\n  /** @internal */\n  private _sanitizeSvg(raw: string): string {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(raw, 'image/svg+xml');\n\n    const parseError = doc.querySelector('parsererror');\n    if (parseError) {\n      return '';\n    }\n\n    const svgEl = doc.querySelector('svg');\n    if (!svgEl) {\n      return '';\n    }\n\n    // Remove dangerous embedded elements:\n    // - script: arbitrary code execution\n    // - foreignObject: can embed arbitrary HTML including scripts\n    // - style: CSS injection (url() payloads, expression(), external references)\n    // - animate, animateTransform, animateMotion, set: SMIL animation elements\n    //   can trigger event handlers and modify attributes to bypass sanitization\n    const dangerousElements = [\n      'script',\n      'foreignObject',\n      'style',\n      'animate',\n      'animateTransform',\n      'animateMotion',\n      'set',\n    ];\n    svgEl.querySelectorAll(dangerousElements.join(', ')).forEach((s) => {\n      s.remove();\n    });\n\n    // URL-bearing attributes that can carry javascript:/data: payloads.\n    const urlAttrs = new Set(['href', 'xlink:href', 'src', 'action', 'formaction']);\n\n    // ARIA attributes that may conflict with the wrapper element's own semantics.\n    // The wrapper <span part=\"svg\"> owns role/aria-label/aria-hidden — the inner\n    // SVG must not duplicate or contradict these.\n    const ariaAttrs = new Set(['role', 'aria-label', 'aria-labelledby', 'aria-hidden']);\n\n    // Sanitize every element including the root svg.\n    const allElements: Element[] = [svgEl, ...Array.from(svgEl.querySelectorAll('*'))];\n    allElements.forEach((el) => {\n      const attrs = Array.from(el.attributes);\n      attrs.forEach((attr) => {\n        const attrName = attr.name.toLowerCase();\n        // Strip event-handler attributes.\n        if (attrName.startsWith('on')) {\n          el.removeAttribute(attr.name);\n          return;\n        }\n        // Strip style attributes — CSS can carry injection payloads via\n        // url(javascript:...), expression(), or external filter/clip-path references.\n        if (attrName === 'style') {\n          el.removeAttribute(attr.name);\n          return;\n        }\n        // Strip javascript: and data: URIs from URL-bearing attributes.\n        if (urlAttrs.has(attrName)) {\n          const val = attr.value.replace(/\\s/g, '').toLowerCase();\n          if (val.startsWith('javascript:') || val.startsWith('data:')) {\n            el.removeAttribute(attr.name);\n          }\n        }\n      });\n    });\n\n    // Strip ARIA attributes from the root SVG only — they conflict with the\n    // wrapper element's ARIA. Child elements' ARIA is left intact.\n    ariaAttrs.forEach((a) => svgEl.removeAttribute(a));\n\n    // Inject focusable=\"false\" so IE11/old-Edge do not tab into the SVG.\n    svgEl.setAttribute('focusable', 'false');\n\n    return svgEl.outerHTML;\n  }\n\n  // ─── Render Helpers ───\n\n  /**\n   * Returns the href used in the `<use>` element for sprite mode.\n   * If `name` already begins with `#` it is treated as an inline reference.\n   */\n  /** @internal */\n  private _spriteHref(): string {\n    const n = this.name;\n    if (n.startsWith('#')) {\n      return n;\n    }\n    const base = this.spriteUrl ?? '';\n    return base ? `${base}#${n}` : `#${n}`;\n  }\n\n  /** @internal */\n  private _renderSprite() {\n    const isDecorative = !this.label.trim();\n\n    return html`\n      <svg\n        part=\"svg\"\n        class=\"icon__svg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        role=${isDecorative ? nothing : 'img'}\n        aria-label=${isDecorative ? nothing : this.label}\n        aria-hidden=${isDecorative ? 'true' : nothing}\n        focusable=\"false\"\n      >\n        ${isDecorative ? nothing : html`<title>${this.label}</title>`}\n        <use href=${this._spriteHref()}></use>\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _renderInline() {\n    if (!this._inlineSvg) {\n      return nothing;\n    }\n\n    const isDecorative = !this.label.trim();\n\n    // The fetched SVG is rendered inside a wrapper span that carries the\n    // csspart and ARIA semantics. The inner SVG from unsafeHTML fills the\n    // container via the `.icon__inline svg` CSS rule. ARIA attributes and\n    // focusable=\"false\" are injected into the inner SVG by _sanitizeSvg.\n    return html`\n      <span\n        part=\"svg\"\n        class=\"icon__inline\"\n        role=${isDecorative ? nothing : 'img'}\n        aria-label=${isDecorative ? nothing : this.label}\n        aria-hidden=${isDecorative ? 'true' : nothing}\n      >\n        ${unsafeHTML(this._inlineSvg)}\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Inline fetch mode takes precedence when src is a non-empty string.\n    if (typeof this.src === 'string' && this.src.trim().length > 0) {\n      return this._renderInline();\n    }\n\n    // Sprite mode: requires at least a name.\n    if (this.name) {\n      return this._renderSprite();\n    }\n\n    return nothing;\n  }\n}\n\n/**\n * Module-level SVG fetch cache. Shared across all `hx-icon` instances so that\n * multiple icons sharing the same `src` URL issue only one network request.\n * The cache stores in-flight `Promise<string>` values — resolved entries remain\n * cached for the lifetime of the page to prevent redundant re-fetches.\n */\nconst _svgCache = new Map<string, Promise<string>>();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-icon': HelixIcon;\n  }\n}\n"],"names":["helixIconStyles","css","HelixIcon","HelixElement","changed","url","seq","pending","_svgCache","response","text","sanitized","parsed","o","raw","doc","svgEl","dangerousElements","s","urlAttrs","ariaAttrs","el","attr","attrName","val","a","n","base","isDecorative","html","nothing","unsafeHTML","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-image-2gt14zZd.js → hx-image-Ben_4yM5.js}

@@ -2,8 +2,9 @@ import { css as g, html as p, nothing as h } from "lit";
 import { property as r, state as d, customElement as f } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { styleMap as u } from "lit/directives/style-map.js";
-import { H as _ } from "./helix-element-BNEYeiys.js";
-const v = g`
+import { a as _ } from "./forced-colors-CTEDFRGa.js";
+import { H as v } from "./helix-element-BNEYeiys.js";
+const b = g`
   :host {
     display: block;
   }
@@ -23,8 +24,8 @@ const v = g`
     align-items: center;
     justify-content: center;
     min-height: var(--hx-image-fallback-min-height, 3rem);
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
-    color: var(--hx-color-neutral-500, #64748b);
+    background-color: var(--hx-image-fallback-bg, var(--hx-color-neutral-100, #ebeee9));
+    color: var(--hx-image-fallback-color, var(--hx-color-neutral-500, #66787b));
   }
 
   .image__img {
@@ -37,7 +38,7 @@ const v = g`
   .image__caption {
     display: none;
     padding: var(--hx-image-caption-padding, 0.5rem 0 0);
-    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4a5362));
     font-size: var(--hx-image-caption-font-size, 0.875rem);
   }
 
@@ -53,12 +54,12 @@ const v = g`
     }
   }
 `;
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (s, o, a, l) => {
-  for (var i = l > 1 ? void 0 : l ? b(o, a) : o, n = s.length - 1, c; n >= 0; n--)
-    (c = s[n]) && (i = (l ? c(o, a, i) : c(i)) || i);
-  return l && i && y(o, a, i), i;
+var y = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (a, o, s, l) => {
+  for (var i = l > 1 ? void 0 : l ? S(o, s) : o, n = a.length - 1, c; n >= 0; n--)
+    (c = a[n]) && (i = (l ? c(o, s, i) : c(i)) || i);
+  return l && i && y(o, s, i), i;
 };
-let t = class extends _ {
+let t = class extends v {
   constructor() {
     super(...arguments), this.src = "", this.alt = void 0, this.decorative = !1, this.width = void 0, this.height = void 0, this.loading = "lazy", this.fit = void 0, this.ratio = void 0, this.rounded = void 0, this.fallbackSrc = void 0, this.srcset = void 0, this.sizes = void 0, this._error = !1, this._usedFallbackSrc = !1, this._hasCaptionSlot = !1;
   }
@@ -75,8 +76,8 @@ let t = class extends _ {
     this._error = !0, this.dispatchEvent(new CustomEvent("hx-error", { bubbles: !0, composed: !0 }));
   }
   /** @internal */
-  _onCaptionSlotChange(s) {
-    const o = s.target;
+  _onCaptionSlotChange(a) {
+    const o = a.target;
     this._hasCaptionSlot = o.assignedNodes({ flatten: !0 }).length > 0;
   }
   /** @internal */
@@ -92,10 +93,10 @@ let t = class extends _ {
   }
   render() {
     !this.decorative && this.alt;
-    const s = this.decorative || this.alt === "", o = s ? "" : this.alt ?? "", a = this._computeBorderRadius(), l = this._hasCaptionSlot, i = {
+    const a = this.decorative || this.alt === "", o = a ? "" : this.alt ?? "", s = this._computeBorderRadius(), l = this._hasCaptionSlot, i = {
       ...this.ratio ? { "--_ratio": this.ratio } : {},
       ...this.fit ? { "--_fit": this.fit } : {},
-      ...a ? { "--_radius": a } : {},
+      ...s ? { "--_radius": s } : {},
       ...this.width != null ? { width: typeof this.width == "number" ? `${this.width}px` : this.width } : {},
       ...this.height != null ? { height: typeof this.height == "number" ? `${this.height}px` : this.height } : {}
     };
@@ -114,7 +115,7 @@ let t = class extends _ {
           class="image__img"
           src=${this._currentSrc() || h}
           alt=${o}
-          role=${s ? "presentation" : h}
+          role=${a ? "presentation" : h}
           loading=${this.loading}
           width=${this.width != null ? this.width : h}
           height=${this.height != null ? this.height : h}
@@ -133,7 +134,7 @@ let t = class extends _ {
     `;
   }
 };
-t.styles = [v];
+t.styles = [b, _];
 e([
   r({ type: String, reflect: !0 })
 ], t.prototype, "src", 2);
@@ -185,4 +186,4 @@ t = e([
 export {
   t as H
 };
-//# sourceMappingURL=hx-image-2gt14zZd.js.map
+//# sourceMappingURL=hx-image-Ben_4yM5.js.map

package/dist/shared/hx-image-Ben_4yM5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-image-Ben_4yM5.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-image-fallback-bg, var(--hx-color-neutral-100, #ebeee9));\n    color: var(--hx-image-fallback-color, var(--hx-color-neutral-500, #66787b));\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, #4a5362));\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 { forcedColorsSurface } from '../../styles/forced-colors.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 * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n */\n@customElement('hx-image')\nexport class HelixImage extends HelixElement {\n  static override styles = [helixImageStyles, forcedColorsSurface];\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","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAmBC;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;;;;;;ACsCzB,IAAMC,IAAN,cAAyBC,EAAa;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,MAAM,IASN,KAAA,MAA0B,QAS1B,KAAA,aAAa,IAOb,KAAA,QAAqC,QAOrC,KAAA,SAAsC,QAOtC,KAAA,UAA4B,QAQ5B,KAAA,MAAwE,QAQxE,KAAA,QAA4B,QAc5B,KAAA,UAAwC,QAOxC,KAAA,cAAkC,QASlC,KAAA,SAA6B,QAQ7B,KAAA,QAA4B,QAI5B,KAAQ,SAAS,IAIjB,KAAQ,mBAAmB,IAI3B,KAAQ,kBAAkB;AAAA,EAAA;AAAA;AAAA,EAGlB,cAAoB;AAC1B,SAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,eAAqB;AAC3B,QAAI,CAAC,KAAK,UAAU,KAAK,eAAe,CAAC,KAAK,kBAAkB;AAE9D,WAAK,mBAAmB;AACxB;AAAA,IACF;AACA,SAAK,SAAS,IACd,KAAK,cAAc,IAAI,YAAkB,YAAY,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACzF;AAAA;AAAA,EAGQ,qBAAqBC,GAAgB;AAC3C,UAAMC,IAAOD,EAAE;AACf,SAAK,kBAAkBC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACxE;AAAA;AAAA,EAGQ,uBAA2C;AACjD,QAAI,KAAK,YAAY,MAAQ,KAAK,YAAY,MAAM,KAAK,YAAY;AACnE,aAAO;AAET,QAAI,OAAO,KAAK,WAAY,YAAY,KAAK,QAAQ,SAAS,KAAK,KAAK,YAAY;AAClF,aAAO,KAAK;AAAA,EAGhB;AAAA;AAAA,EAGQ,cAAsB;AAC5B,WAAI,KAAK,oBAAoB,KAAK,cACzB,KAAK,cAEP,KAAK;AAAA,EACd;AAAA,EAES,SAAS;AAChB,IAAI,CAAC,KAAK,cAAe,KAAK;AAO9B,UAAMC,IAAe,KAAK,cAAc,KAAK,QAAQ,IAC/CC,IAAUD,IAAe,KAAM,KAAK,OAAO,IAC3CE,IAAe,KAAK,qBAAA,GACpBC,IAAc,KAAK,iBAEnBC,IAAkB;AAAA,MACtB,GAAI,KAAK,QAAQ,EAAE,YAAY,KAAK,MAAA,IAAU,CAAA;AAAA,MAC9C,GAAI,KAAK,MAAM,EAAE,UAAU,KAAK,IAAA,IAAQ,CAAA;AAAA,MACxC,GAAIF,IAAe,EAAE,aAAaA,EAAA,IAAiB,CAAA;AAAA,MACnD,GAAI,KAAK,SAAS,OACd,EAAE,OAAO,OAAO,KAAK,SAAU,WAAW,GAAG,KAAK,KAAK,OAAO,KAAK,MAAA,IACnE,CAAA;AAAA,MACJ,GAAI,KAAK,UAAU,OACf,EAAE,QAAQ,OAAO,KAAK,UAAW,WAAW,GAAG,KAAK,MAAM,OAAO,KAAK,WACtE,CAAA;AAAA,IAAC;AAGP,WAAI,KAAK,SACAG;AAAA;AAAA;AAAA,kBAGKC,EAASF,CAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAQhCC;AAAA,+CACoCC,EAASF,CAAe,CAAC;AAAA;AAAA;AAAA;AAAA,gBAIxD,KAAK,YAAA,KAAiBG,CAAO;AAAA,gBAC7BN,CAAO;AAAA,iBACND,IAAe,iBAAiBO,CAAO;AAAA,oBACpC,KAAK,OAAO;AAAA,kBACd,KAAK,SAAS,OAAO,KAAK,QAAQA,CAAO;AAAA,mBACxC,KAAK,UAAU,OAAO,KAAK,SAASA,CAAO;AAAA,mBAC3C,KAAK,UAAUA,CAAO;AAAA,kBACvB,KAAK,SAASA,CAAO;AAAA,kBACrB,KAAK,WAAW;AAAA,mBACf,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,kBAIlBC,EAAS,EAAE,gBAAgB,IAAM,2BAA2BL,EAAA,CAAa,CAAC;AAAA;AAAA,6CAE/C,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AA1NaP,EACK,SAAS,CAACF,GAAkBe,CAAmB;AAO/DC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9Bf,EAQX,WAAA,OAAA,CAAA;AASAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9Bf,EAiBX,WAAA,OAAA,CAAA;AASAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzB/Bf,EA0BX,WAAA,cAAA,CAAA;AAOAc,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhChBf,EAiCX,WAAA,SAAA,CAAA;AAOAc,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAvChBf,EAwCX,WAAA,UAAA,CAAA;AAOAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9C9Bf,EA+CX,WAAA,WAAA,CAAA;AAQAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAtD9Bf,EAuDX,WAAA,OAAA,CAAA;AAQAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9D9Bf,EA+DX,WAAA,SAAA,CAAA;AAcAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5E9Bf,EA6EX,WAAA,WAAA,CAAA;AAOAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,SAAS,IAAM;AAAA,GAnFzDf,EAoFX,WAAA,eAAA,CAAA;AASAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5F9Bf,EA6FX,WAAA,UAAA,CAAA;AAQAc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApG9Bf,EAqGX,WAAA,SAAA,CAAA;AAIQc,EAAA;AAAA,EADPE,EAAA;AAAM,GAxGIhB,EAyGH,WAAA,UAAA,CAAA;AAIAc,EAAA;AAAA,EADPE,EAAA;AAAM,GA5GIhB,EA6GH,WAAA,oBAAA,CAAA;AAIAc,EAAA;AAAA,EADPE,EAAA;AAAM,GAhHIhB,EAiHH,WAAA,mBAAA,CAAA;AAjHGA,IAANc,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZjB,CAAA;"}