@helixui/library 3.1.0-next.70 → 3.1.0-next.72

package/dist/shared/{hx-tag-CgnrNnte.js → hx-tag-CNSmdyaK.js}

@@ -1,8 +1,9 @@
-import { css as f, nothing as c, html as g } from "lit";
-import { property as n, state as x, customElement as p } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
+import { css as f, nothing as x, html as g } from "lit";
+import { property as n, state as d, customElement as p } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { a as v } from "./forced-colors-CTEDFRGa.js";
 import { H as u } from "./helix-element-BNEYeiys.js";
-const v = f`
+const m = f`
   :host {
     display: inline-block;
   }
@@ -18,15 +19,15 @@ const v = f`
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f1f5f9));
-    color: var(--hx-tag-color, var(--hx-color-neutral-700, #334155));
+    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #ebeee9));
+    color: var(--hx-tag-color, var(--hx-color-neutral-700, #313e4b));
     font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));
     line-height: var(--hx-line-height-tight, 1.25);
     white-space: nowrap;
     vertical-align: middle;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-tag-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-tag-border-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   /* ─── Size Variants ─── */
@@ -52,33 +53,33 @@ const v = f`
   /* ─── Color Variants ─── */
 
   .tag--default {
-    --hx-tag-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-tag-color: var(--hx-color-neutral-700, #334155);
-    --hx-tag-border-color: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-tag-bg: var(--hx-tag-default-bg, var(--hx-color-neutral-100, #ebeee9));
+    --hx-tag-color: var(--hx-tag-default-color, var(--hx-color-neutral-700, #313e4b));
+    --hx-tag-border-color: var(--hx-tag-default-border-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   .tag--primary {
-    --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);
-    --hx-tag-color: var(--hx-color-primary-700, #1e40af);
-    --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);
+    --hx-tag-bg: var(--hx-tag-primary-bg, var(--hx-color-primary-50, #ebf8f8));
+    --hx-tag-color: var(--hx-tag-primary-color, var(--hx-color-primary-700, #0f6363));
+    --hx-tag-border-color: var(--hx-tag-primary-border-color, var(--hx-color-primary-200, #bce1e1));
   }
 
   .tag--success {
-    --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-tag-color: var(--hx-color-success-700, #166534);
-    --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);
+    --hx-tag-bg: var(--hx-tag-success-bg, var(--hx-color-success-50, #eafaec));
+    --hx-tag-color: var(--hx-tag-success-color, var(--hx-color-success-700, #146831));
+    --hx-tag-border-color: var(--hx-tag-success-border-color, var(--hx-color-success-200, #bae6c2));
   }
 
   .tag--warning {
-    --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-tag-color: var(--hx-color-warning-700, #92400e);
-    --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);
+    --hx-tag-bg: var(--hx-tag-warning-bg, var(--hx-color-warning-50, #fff3ea));
+    --hx-tag-color: var(--hx-tag-warning-color, var(--hx-color-warning-700, #804605));
+    --hx-tag-border-color: var(--hx-tag-warning-border-color, var(--hx-color-warning-200, #facfae));
   }
 
   .tag--danger {
-    --hx-tag-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-tag-color: var(--hx-color-error-700, #991b1b);
-    --hx-tag-border-color: var(--hx-color-error-200, #fecaca);
+    --hx-tag-bg: var(--hx-tag-danger-bg, var(--hx-color-error-50, #fff2f0));
+    --hx-tag-color: var(--hx-tag-danger-color, var(--hx-color-error-700, #a21312));
+    --hx-tag-border-color: var(--hx-tag-danger-border-color, var(--hx-color-error-200, #fccbc4));
   }
 
   /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */
@@ -161,12 +162,12 @@ const v = f`
     }
   }
 `;
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (r, t, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? b(t, s) : t, l = r.length - 1, h; l >= 0; l--)
-    (h = r[l]) && (i = (a ? h(t, s, i) : h(i)) || i);
-  return a && i && m(t, s, i), i;
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, r, s, e) => {
+  for (var i = e > 1 ? void 0 : e ? _(r, s) : r, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (i = (e ? h(r, s, i) : h(i)) || i);
+  return e && i && b(r, s, i), i;
 };
-let e = class extends u {
+let a = class extends u {
   constructor() {
     super(...arguments), this.variant = "default", this.size = "md", this.pill = !1, this.removable = !1, this.disabled = !1, this._defaultSlotText = "", this._hasPrefix = !1, this._hasSuffix = !1;
   }
@@ -181,48 +182,48 @@ let e = class extends u {
     );
   }
   /** @internal Updates _defaultSlotText from only the default slot's text nodes. */
-  _onDefaultSlotChange(r) {
-    const s = r.target.assignedNodes({ flatten: !0 });
-    this._defaultSlotText = s.filter((a) => a.nodeType === Node.TEXT_NODE).map((a) => a.textContent ?? "").join("").trim();
+  _onDefaultSlotChange(t) {
+    const s = t.target.assignedNodes({ flatten: !0 });
+    this._defaultSlotText = s.filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent ?? "").join("").trim();
   }
   /** @internal */
-  _onPrefixSlotChange(r) {
-    const t = r.target;
-    this._hasPrefix = t.assignedNodes({ flatten: !0 }).length > 0;
+  _onPrefixSlotChange(t) {
+    const r = t.target;
+    this._hasPrefix = r.assignedNodes({ flatten: !0 }).length > 0;
   }
   /** @internal */
-  _onSuffixSlotChange(r) {
-    const t = r.target;
-    this._hasSuffix = t.assignedNodes({ flatten: !0 }).length > 0;
+  _onSuffixSlotChange(t) {
+    const r = t.target;
+    this._hasSuffix = r.assignedNodes({ flatten: !0 }).length > 0;
   }
   /** @internal */
   get _semanticVariantLabel() {
-    return e._SEMANTIC_VARIANT_LABELS[this.variant] ?? "";
+    return a._SEMANTIC_VARIANT_LABELS[this.variant] ?? "";
   }
   // ─── Render ───
   render() {
-    const r = {
+    const t = {
       tag: !0,
       [`tag--${this.variant}`]: !0,
       [`tag--${this.size}`]: !0,
       "tag--pill": this.pill
-    }, t = {
+    }, r = {
       tag__prefix: !0,
       "tag__prefix--hidden": !this._hasPrefix
     }, s = {
       tag__suffix: !0,
       "tag__suffix--hidden": !this._hasSuffix
-    }, a = this._semanticVariantLabel;
+    }, e = this._semanticVariantLabel;
     return g`
-      <span part="base" class=${d(r)}>
-        ${a ? g`<span class="tag__variant-label">${a}: </span>` : c}
-        <span part="prefix" class=${d(t)}>
+      <span part="base" class=${c(t)}>
+        ${e ? g`<span class="tag__variant-label">${e}: </span>` : x}
+        <span part="prefix" class=${c(r)}>
           <slot name="prefix" @slotchange=${this._onPrefixSlotChange}></slot>
         </span>
         <span part="label" class="tag__label">
           <slot @slotchange=${this._onDefaultSlotChange}></slot>
         </span>
-        <span part="suffix" class=${d(s)}>
+        <span part="suffix" class=${c(s)}>
           <slot name="suffix" @slotchange=${this._onSuffixSlotChange}></slot>
         </span>
         ${this.removable ? g`<button
@@ -238,45 +239,45 @@ let e = class extends u {
                   fill="currentColor"
                 />
               </svg>
-            </button>` : c}
+            </button>` : x}
       </span>
     `;
   }
 };
-e.styles = [v];
-e._SEMANTIC_VARIANT_LABELS = {
+a.styles = [m, v];
+a._SEMANTIC_VARIANT_LABELS = {
   success: "Success",
   warning: "Warning",
   danger: "Danger"
 };
 o([
   n({ type: String, reflect: !0 })
-], e.prototype, "variant", 2);
+], a.prototype, "variant", 2);
 o([
   n({ type: String, reflect: !0, attribute: "hx-size" })
-], e.prototype, "size", 2);
+], a.prototype, "size", 2);
 o([
   n({ type: Boolean, reflect: !0 })
-], e.prototype, "pill", 2);
+], a.prototype, "pill", 2);
 o([
   n({ type: Boolean, reflect: !0 })
-], e.prototype, "removable", 2);
+], a.prototype, "removable", 2);
 o([
   n({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
+], a.prototype, "disabled", 2);
 o([
-  x()
-], e.prototype, "_defaultSlotText", 2);
+  d()
+], a.prototype, "_defaultSlotText", 2);
 o([
-  x()
-], e.prototype, "_hasPrefix", 2);
+  d()
+], a.prototype, "_hasPrefix", 2);
 o([
-  x()
-], e.prototype, "_hasSuffix", 2);
-e = o([
+  d()
+], a.prototype, "_hasSuffix", 2);
+a = o([
   p("hx-tag")
-], e);
+], a);
 export {
-  e as H
+  a as H
 };
-//# sourceMappingURL=hx-tag-CgnrNnte.js.map
+//# sourceMappingURL=hx-tag-CNSmdyaK.js.map

package/dist/shared/hx-tag-CNSmdyaK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tag-CNSmdyaK.js","sources":["../../src/components/hx-tag/hx-tag.styles.ts","../../src/components/hx-tag/hx-tag.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTagStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n    /* cursor: not-allowed is intentionally omitted — pointer-events: none prevents cursor display */\n  }\n\n  .tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #ebeee9));\n    color: var(--hx-tag-color, var(--hx-color-neutral-700, #313e4b));\n    font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));\n    line-height: var(--hx-line-height-tight, 1.25);\n    white-space: nowrap;\n    vertical-align: middle;\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-tag-border-color, var(--hx-color-neutral-200, #d6dbd5));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .tag--sm {\n    font-size: var(--hx-tag-font-size, var(--hx-font-size-xs, 0.75rem));\n    padding: var(--hx-tag-padding-y, var(--hx-space-0-5, 0.125rem))\n      var(--hx-tag-padding-x, var(--hx-space-1-5, 0.375rem));\n  }\n\n  .tag--md {\n    font-size: var(--hx-tag-font-size, var(--hx-font-size-sm, 0.875rem));\n    padding: var(--hx-tag-padding-y, var(--hx-space-1, 0.25rem))\n      var(--hx-tag-padding-x, var(--hx-space-2, 0.5rem));\n  }\n\n  .tag--lg {\n    font-size: var(--hx-tag-font-size, var(--hx-font-size-md, 1rem));\n    padding: var(--hx-tag-padding-y, var(--hx-space-1-5, 0.375rem))\n      var(--hx-tag-padding-x, var(--hx-space-3, 0.75rem));\n  }\n\n  /* ─── Color Variants ─── */\n\n  .tag--default {\n    --hx-tag-bg: var(--hx-tag-default-bg, var(--hx-color-neutral-100, #ebeee9));\n    --hx-tag-color: var(--hx-tag-default-color, var(--hx-color-neutral-700, #313e4b));\n    --hx-tag-border-color: var(--hx-tag-default-border-color, var(--hx-color-neutral-200, #d6dbd5));\n  }\n\n  .tag--primary {\n    --hx-tag-bg: var(--hx-tag-primary-bg, var(--hx-color-primary-50, #ebf8f8));\n    --hx-tag-color: var(--hx-tag-primary-color, var(--hx-color-primary-700, #0f6363));\n    --hx-tag-border-color: var(--hx-tag-primary-border-color, var(--hx-color-primary-200, #bce1e1));\n  }\n\n  .tag--success {\n    --hx-tag-bg: var(--hx-tag-success-bg, var(--hx-color-success-50, #eafaec));\n    --hx-tag-color: var(--hx-tag-success-color, var(--hx-color-success-700, #146831));\n    --hx-tag-border-color: var(--hx-tag-success-border-color, var(--hx-color-success-200, #bae6c2));\n  }\n\n  .tag--warning {\n    --hx-tag-bg: var(--hx-tag-warning-bg, var(--hx-color-warning-50, #fff3ea));\n    --hx-tag-color: var(--hx-tag-warning-color, var(--hx-color-warning-700, #804605));\n    --hx-tag-border-color: var(--hx-tag-warning-border-color, var(--hx-color-warning-200, #facfae));\n  }\n\n  .tag--danger {\n    --hx-tag-bg: var(--hx-tag-danger-bg, var(--hx-color-error-50, #fff2f0));\n    --hx-tag-color: var(--hx-tag-danger-color, var(--hx-color-error-700, #a21312));\n    --hx-tag-border-color: var(--hx-tag-danger-border-color, var(--hx-color-error-200, #fccbc4));\n  }\n\n  /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */\n  /* Visually hidden text prefix for semantic variants (success/warning/danger). */\n  /* Ensures the variant state is not conveyed by color alone.                   */\n\n  .tag__variant-label {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Pill Mode ─── */\n\n  /* Uses --hx-tag-border-radius-pill (separate from --hx-tag-border-radius) so consumer\n     overrides to --hx-tag-border-radius don't break pill shape. */\n  .tag--pill {\n    border-radius: var(--hx-tag-border-radius-pill, var(--hx-border-radius-full, 9999px));\n  }\n\n  /* ─── Prefix / Suffix slots ─── */\n\n  .tag__prefix,\n  .tag__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  /* Hide wrappers when slots have no assigned content */\n  .tag__prefix--hidden,\n  .tag__suffix--hidden {\n    display: none;\n  }\n\n  /* ─── Remove Button ─── */\n\n  .tag__remove-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: none;\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    padding: 0;\n    margin-inline-start: var(--hx-space-1, 0.25rem);\n    cursor: pointer;\n    color: inherit;\n    opacity: var(--hx-opacity-75, 0.75);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    line-height: 0;\n  }\n\n  .tag__remove-button:hover {\n    opacity: var(--hx-opacity-100, 1);\n  }\n\n  .tag__remove-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .tag {\n      border-color: CanvasText;\n    }\n\n    .tag__remove-button {\n      color: ButtonText;\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 { HelixElement } from '../../base/index.js';\nimport { helixTagStyles } from './hx-tag.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/**\n * A compact label for categorization, filtering, and selection.\n *\n * @summary Compact tag/chip for categorization, filtering, and selection.\n *\n * @tag hx-tag\n *\n * @slot - Default slot for tag label text.\n * @slot prefix - Icon or avatar rendered before the label.\n * @slot suffix - Content rendered after the label.\n *\n * @fires {CustomEvent<void>} hx-remove - Dispatched when the user clicks the remove button.\n *\n * @csspart base - The root tag element.\n * @csspart prefix - The prefix slot wrapper.\n * @csspart label - The label slot wrapper.\n * @csspart suffix - The suffix slot wrapper.\n * @csspart remove-button - The remove/dismiss button.\n *\n * @cssprop [--hx-tag-bg=var(--hx-color-neutral-100)] - Tag background color.\n * @cssprop [--hx-tag-color=var(--hx-color-neutral-700)] - Tag text color.\n * @cssprop [--hx-tag-border-color=var(--hx-color-neutral-200)] - Tag border color.\n * @cssprop [--hx-tag-font-size] - Tag font size (set per size variant).\n * @cssprop [--hx-tag-font-weight=var(--hx-font-weight-medium)] - Tag font weight.\n * @cssprop [--hx-tag-font-family=var(--hx-font-family-sans)] - Tag font family.\n * @cssprop [--hx-tag-border-radius=var(--hx-border-radius-sm)] - Tag border radius (non-pill mode).\n * @cssprop [--hx-tag-border-radius-pill=var(--hx-border-radius-full)] - Border radius in pill mode. Independent of --hx-tag-border-radius so consumer overrides don't break pill shape.\n * @cssprop [--hx-tag-padding-x] - Tag horizontal padding (set per size variant).\n * @cssprop [--hx-tag-padding-y] - Tag vertical padding (set per size variant).\n *\n * @note Visual style variants (filled/outlined/ghost) are not supported. This component\n * intentionally provides only filled-style tags with color variation via the `variant` prop.\n *\n * @note aria-live removal announcements are the consuming application's responsibility.\n * When a tag is removed from the DOM, applications should announce the change via their\n * own aria-live region to inform screen reader users of clinical data filter changes.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-error-200] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n * @cssprop [--hx-color-error-700] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-primary-200] - Color.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-color-success-200] - Color.\n * @cssprop [--hx-color-success-50] - Color.\n * @cssprop [--hx-color-success-700] - Color.\n * @cssprop [--hx-color-warning-200] - Color.\n * @cssprop [--hx-color-warning-50] - Color.\n * @cssprop [--hx-color-warning-700] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-0-5] - Spacing token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-1-5] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n */\n@customElement('hx-tag')\nexport class HelixTag extends HelixElement {\n  static override styles = [helixTagStyles, forcedColorsSurface];\n\n  /**\n   * Visual style variant of the tag.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' = 'default';\n\n  /**\n   * Size of the tag.\n   * @attr hx-size\n   * @note The attribute name is `hx-size` (not `size`) to avoid conflict with the native\n   * `size` attribute. Storybook autodocs controls bind to the property name `size`; when\n   * writing HTML or Drupal Twig templates always use the `hx-size` attribute name.\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the tag uses fully rounded (pill) styling.\n   * @attr pill\n   */\n  @property({ type: Boolean, reflect: true })\n  pill = false;\n\n  /**\n   * Whether the tag renders a dismiss button.\n   * @attr removable\n   */\n  @property({ type: Boolean, reflect: true })\n  removable = false;\n\n  /**\n   * Whether the tag is disabled. When disabled, interactions are suppressed.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Internal State ───\n\n  /**\n   * Text from the default slot only (excludes prefix/suffix slotted content).\n   * Used to build the remove button's aria-label without polluting it with icon text.\n   * @internal\n   */\n  @state() private _defaultSlotText = '';\n\n  /** @internal Whether the prefix slot has assigned content. */\n  @state() private _hasPrefix = false;\n\n  /** @internal Whether the suffix slot has assigned content. */\n  @state() private _hasSuffix = false;\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleRemove(): void {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent<void>('hx-remove', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** @internal Updates _defaultSlotText from only the default slot's text nodes. */\n  private _onDefaultSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._defaultSlotText = nodes\n      .filter((n): n is Text => n.nodeType === Node.TEXT_NODE)\n      .map((n) => n.textContent ?? '')\n      .join('')\n      .trim();\n  }\n\n  /** @internal */\n  private _onPrefixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefix = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _onSuffixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffix = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── WCAG 1.4.1: Semantic variant label map ───\n  // Variants with semantic meaning require a non-color cue so users who cannot\n  // distinguish variants by color alone (e.g. color-blind or high-contrast mode)\n  // still receive the status context from assistive technology.\n\n  /** @internal */\n  private static readonly _SEMANTIC_VARIANT_LABELS: Partial<Record<HelixTag['variant'], string>> = {\n    success: 'Success',\n    warning: 'Warning',\n    danger: 'Danger',\n  };\n\n  /** @internal */\n  private get _semanticVariantLabel(): string {\n    return HelixTag._SEMANTIC_VARIANT_LABELS[this.variant] ?? '';\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      tag: true,\n      [`tag--${this.variant}`]: true,\n      [`tag--${this.size}`]: true,\n      'tag--pill': this.pill,\n    };\n\n    const prefixClasses = {\n      tag__prefix: true,\n      'tag__prefix--hidden': !this._hasPrefix,\n    };\n\n    const suffixClasses = {\n      tag__suffix: true,\n      'tag__suffix--hidden': !this._hasSuffix,\n    };\n\n    const variantLabel = this._semanticVariantLabel;\n\n    return html`\n      <span part=\"base\" class=${classMap(classes)}>\n        ${variantLabel ? html`<span class=\"tag__variant-label\">${variantLabel}: </span>` : nothing}\n        <span part=\"prefix\" class=${classMap(prefixClasses)}>\n          <slot name=\"prefix\" @slotchange=${this._onPrefixSlotChange}></slot>\n        </span>\n        <span part=\"label\" class=\"tag__label\">\n          <slot @slotchange=${this._onDefaultSlotChange}></slot>\n        </span>\n        <span part=\"suffix\" class=${classMap(suffixClasses)}>\n          <slot name=\"suffix\" @slotchange=${this._onSuffixSlotChange}></slot>\n        </span>\n        ${this.removable\n          ? html`<button\n              part=\"remove-button\"\n              class=\"tag__remove-button\"\n              aria-label=${`Remove ${this._defaultSlotText || 'tag'}`}\n              ?disabled=${this.disabled}\n              @click=${this._handleRemove}\n            >\n              <svg viewBox=\"0 0 12 12\" aria-hidden=\"true\" width=\"10\" height=\"10\">\n                <path\n                  d=\"M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </button>`\n          : nothing}\n      </span>\n    `;\n  }\n}\n\nexport type HxTag = HelixTag;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tag': HelixTag;\n  }\n}\n"],"names":["helixTagStyles","css","HelixTag","HelixElement","e","nodes","n","slot","classes","prefixClasses","suffixClasses","variantLabel","html","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-td-B737T0_c.js → hx-td-1zwTFLRw.js}

@@ -1,8 +1,9 @@
 import { css as d, nothing as g, html as n } from "lit";
 import { property as l, state as D, customElement as b } from "lit/decorators.js";
+import { a as O } from "./forced-colors-CTEDFRGa.js";
 import { H as v } from "./helix-element-BNEYeiys.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
-const O = d`
+const P = d`
   :host {
     display: block;
     overflow-x: auto;
@@ -35,7 +36,7 @@ const O = d`
     text-align: start;
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-table-header-color, var(--hx-color-text-strong, #1e293b));
+    color: var(--hx-table-header-color, var(--hx-color-text-strong, #202b39));
     font-size: var(--hx-font-size-md, 1rem);
   }
 
@@ -51,12 +52,12 @@ const O = d`
 
   /* Header background via CSS vars that cascade through display:contents */
   ::slotted(hx-thead) {
-    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
+    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */
   :host([variant='striped']) ::slotted(hx-tbody) {
-    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f8fafc));
+    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* Hover variant: set hover bg variable on direct slotted section elements */
@@ -66,7 +67,7 @@ const O = d`
   :host([variant='striped']) ::slotted(hx-thead),
   :host([variant='default']) ::slotted(hx-tbody),
   :host([variant='default']) ::slotted(hx-thead) {
-    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
+    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* Compact variant: reduced padding signal set on section elements that cascade to cells */
@@ -82,14 +83,14 @@ const O = d`
     --_hx-table-th-position: sticky;
     --_hx-table-th-top: 0;
     --_hx-table-th-z-index: 1;
-    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
+    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* ─── Focus ─── */
 
   ::slotted(:focus-visible) {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
     outline-offset: var(--hx-focus-ring-offset, -2px);
   }
 
@@ -132,10 +133,10 @@ const $ = d`
     display: contents;
   }
 `;
-var P = Object.defineProperty, H = Object.getOwnPropertyDescriptor, x = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? H(r, i) : r, a = e.length - 1, s; a >= 0; a--)
+var H = Object.defineProperty, j = Object.getOwnPropertyDescriptor, x = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? j(r, i) : r, a = e.length - 1, s; a >= 0; a--)
     (s = e[a]) && (t = (o ? s(r, i, t) : s(t)) || t);
-  return o && t && P(r, i, t), t;
+  return o && t && H(r, i, t), t;
 };
 let h = class extends v {
   constructor() {
@@ -172,7 +173,7 @@ let h = class extends v {
     `;
   }
 };
-h.styles = [O];
+h.styles = [P, O];
 x([
   l({ type: String })
 ], h.prototype, "label", 2);
@@ -194,8 +195,8 @@ x([
 h = x([
   b("hx-table")
 ], h);
-var j = Object.getOwnPropertyDescriptor, T = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? j(r, i) : r, a = e.length - 1, s; a >= 0; a--)
+var T = Object.getOwnPropertyDescriptor, B = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? T(r, i) : r, a = e.length - 1, s; a >= 0; a--)
     (s = e[a]) && (t = s(t) || t);
   return t;
 };
@@ -207,11 +208,11 @@ let w = class extends v {
   }
 };
 w.styles = [$];
-w = T([
+w = B([
   b("hx-thead")
 ], w);
-var B = Object.getOwnPropertyDescriptor, z = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? B(r, i) : r, a = e.length - 1, s; a >= 0; a--)
+var z = Object.getOwnPropertyDescriptor, M = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? z(r, i) : r, a = e.length - 1, s; a >= 0; a--)
     (s = e[a]) && (t = s(t) || t);
   return t;
 };
@@ -238,11 +239,11 @@ _.styles = [
       }
     `
 ];
-_ = z([
+_ = M([
   b("hx-tbody")
 ], _);
-var M = Object.getOwnPropertyDescriptor, A = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? M(r, i) : r, a = e.length - 1, s; a >= 0; a--)
+var A = Object.getOwnPropertyDescriptor, E = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? A(r, i) : r, a = e.length - 1, s; a >= 0; a--)
     (s = e[a]) && (t = s(t) || t);
   return t;
 };
@@ -254,13 +255,13 @@ let S = class extends v {
   }
 };
 S.styles = [$];
-S = A([
+S = E([
   b("hx-tfoot")
 ], S);
-var E = Object.defineProperty, L = Object.getOwnPropertyDescriptor, C = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? L(r, i) : r, a = e.length - 1, s; a >= 0; a--)
+var L = Object.defineProperty, N = Object.getOwnPropertyDescriptor, C = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? N(r, i) : r, a = e.length - 1, s; a >= 0; a--)
     (s = e[a]) && (t = (o ? s(r, i, t) : s(t)) || t);
-  return o && t && E(r, i, t), t;
+  return o && t && L(r, i, t), t;
 };
 let y = class extends v {
   constructor() {
@@ -295,7 +296,7 @@ y.styles = [
       }
 
       :host([selected]) tr {
-        background-color: var(--hx-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+        background-color: var(--hx-table-row-selected-bg, var(--hx-color-primary-50, #ebf8f8));
       }
 
       :host([disabled]) tr {
@@ -319,10 +320,10 @@ C([
 y = C([
   b("hx-tr")
 ], y);
-var N = Object.defineProperty, W = Object.getOwnPropertyDescriptor, f = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? W(r, i) : r, a = e.length - 1, s; a >= 0; a--)
+var W = Object.defineProperty, F = Object.getOwnPropertyDescriptor, f = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? F(r, i) : r, a = e.length - 1, s; a >= 0; a--)
     (s = e[a]) && (t = (o ? s(r, i, t) : s(t)) || t);
-  return o && t && N(r, i, t), t;
+  return o && t && W(r, i, t), t;
 };
 let c = class extends v {
   constructor() {
@@ -400,13 +401,13 @@ c.styles = [
         padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
         text-align: left;
         font-weight: var(--hx-font-weight-semibold, 600);
-        color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+        color: var(--hx-table-header-color, var(--hx-color-neutral-700, #313e4b));
         background-color: var(
           --_hx-table-cell-bg,
-          var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc))
+          var(--hx-table-header-bg, var(--hx-color-neutral-50, #f5f8f3))
         );
         border-bottom: var(--hx-border-width-thin, 1px) solid
-          var(--hx-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+          var(--hx-table-border-color, var(--hx-color-neutral-200, #d6dbd5));
         white-space: nowrap;
         vertical-align: middle;
         position: var(--_hx-table-th-position, static);
@@ -437,7 +438,7 @@ c.styles = [
 
       .sort-btn:focus-visible {
         outline: var(--hx-focus-ring-width, 2px) solid
-          var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+          var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
         outline-offset: var(--hx-focus-ring-offset, 2px);
         border-radius: var(--hx-border-radius-sm, 2px);
       }
@@ -458,7 +459,7 @@ c.styles = [
 
       .sort-icon--active {
         opacity: 1;
-        color: var(--hx-color-primary-500, #2563eb);
+        color: var(--hx-color-primary-500, #429797);
       }
 
       .sort-icon--desc {
@@ -513,10 +514,10 @@ f([
 c = f([
   b("hx-th")
 ], c);
-var F = Object.defineProperty, I = Object.getOwnPropertyDescriptor, m = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? I(r, i) : r, a = e.length - 1, s; a >= 0; a--)
+var I = Object.defineProperty, R = Object.getOwnPropertyDescriptor, m = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? R(r, i) : r, a = e.length - 1, s; a >= 0; a--)
     (s = e[a]) && (t = (o ? s(r, i, t) : s(t)) || t);
-  return o && t && F(r, i, t), t;
+  return o && t && I(r, i, t), t;
 };
 let p = class extends v {
   constructor() {
@@ -545,9 +546,9 @@ p.styles = [
       td {
         padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
         text-align: left;
-        color: var(--hx-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+        color: var(--hx-table-cell-color, var(--hx-color-neutral-900, #0d1825));
         border-bottom: var(--hx-border-width-thin, 1px) solid
-          var(--hx-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+          var(--hx-table-border-color, var(--hx-color-neutral-200, #d6dbd5));
         vertical-align: middle;
       }
 
@@ -561,7 +562,7 @@ p.styles = [
 
       td:focus-visible {
         outline: var(--hx-focus-ring-width, 2px) solid
-          var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+          var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
         outline-offset: var(--hx-focus-ring-offset, -2px);
         border-radius: var(--hx-border-radius-sm, 2px);
       }
@@ -585,7 +586,7 @@ p.styles = [
           content: attr(data-label);
           font-weight: var(--hx-font-weight-semibold, 600);
           float: left;
-          color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+          color: var(--hx-table-header-color, var(--hx-color-neutral-700, #313e4b));
         }
       }
     `
@@ -614,4 +615,4 @@ export {
   c as e,
   y as f
 };
-//# sourceMappingURL=hx-td-B737T0_c.js.map
+//# sourceMappingURL=hx-td-1zwTFLRw.js.map

package/dist/shared/hx-td-1zwTFLRw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-td-1zwTFLRw.js","sources":["../../src/components/hx-table/hx-table.styles.ts","../../src/components/hx-table/hx-table.ts","../../src/components/hx-table/hx-thead.ts","../../src/components/hx-table/hx-tbody.ts","../../src/components/hx-table/hx-tfoot.ts","../../src/components/hx-table/hx-tr.ts","../../src/components/hx-table/hx-th.ts","../../src/components/hx-table/hx-td.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTableStyles = css`\n  :host {\n    display: block;\n    overflow-x: auto;\n    font-family: var(--hx-table-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  /* ─── Scroll Wrapper ─── */\n\n  .table-wrapper {\n    min-width: 0;\n    width: 100%;\n  }\n\n  /* ─── Table ─── */\n\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n\n  :host([full-width]) table {\n    width: 100%;\n  }\n\n  /* ─── Caption ─── */\n\n  caption {\n    caption-side: top;\n    text-align: start;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-table-header-color, var(--hx-color-text-strong, #202b39));\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  /* ─── Slotted sub-component styling ─── */\n\n  /*\n   * ::slotted() only matches DIRECT slot assignees. hx-table's direct\n   * slot children are hx-thead, hx-tbody, and hx-tfoot — never hx-tr,\n   * hx-th, or hx-td. CSS custom properties inherit through shadow DOM\n   * boundaries, so variables set on section elements cascade to their\n   * slotted row and cell descendants automatically.\n   */\n\n  /* Header background via CSS vars that cascade through display:contents */\n  ::slotted(hx-thead) {\n    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));\n  }\n\n  /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */\n  :host([variant='striped']) ::slotted(hx-tbody) {\n    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f5f8f3));\n  }\n\n  /* Hover variant: set hover bg variable on direct slotted section elements */\n  :host([variant='hover']) ::slotted(hx-tbody),\n  :host([variant='hover']) ::slotted(hx-thead),\n  :host([variant='striped']) ::slotted(hx-tbody),\n  :host([variant='striped']) ::slotted(hx-thead),\n  :host([variant='default']) ::slotted(hx-tbody),\n  :host([variant='default']) ::slotted(hx-thead) {\n    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f5f8f3));\n  }\n\n  /* Compact variant: reduced padding signal set on section elements that cascade to cells */\n  :host([variant='compact']) ::slotted(hx-thead),\n  :host([variant='compact']) ::slotted(hx-tbody),\n  :host([variant='compact']) ::slotted(hx-tfoot) {\n    --_hx-table-cell-padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Sticky Header ─── */\n\n  :host([sticky-header]) ::slotted(hx-thead) {\n    --_hx-table-th-position: sticky;\n    --_hx-table-th-top: 0;\n    --_hx-table-th-z-index: 1;\n    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));\n  }\n\n  /* ─── Focus ─── */\n\n  ::slotted(:focus-visible) {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n  }\n\n  /* ─── Responsive Mobile Card Layout ─── */\n\n  @media (max-width: 768px) {\n    .table-wrapper {\n      overflow-x: visible;\n    }\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    ::slotted(*) {\n      transition: none !important;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    table {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n\n/**\n * Styles shared by sub-components (hx-th, hx-td) for cell layout.\n * Exported so sub-components can import them directly.\n */\nexport const helixTableCellBaseStyles = css`\n  :host {\n    display: contents;\n  }\n`;\n\nexport const helixTableRowBaseStyles = css`\n  :host {\n    display: contents;\n  }\n`;\n\nexport const helixTableSectionBaseStyles = css`\n  :host {\n    display: contents;\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 { HelixElement } from '../../base/index.js';\nimport { helixTableStyles } from './hx-table.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A semantic table container with variant styling and accessibility support.\n * Compose with `hx-thead`, `hx-tbody`, `hx-tfoot`, `hx-tr`, `hx-th`, and `hx-td`.\n *\n * @summary Semantic HTML table with variant styling, sticky header, and responsive layout.\n *\n * @tag hx-table\n *\n * @slot - Default slot for `hx-thead`, `hx-tbody`, and `hx-tfoot` sub-components.\n * @slot caption - Custom caption content rendered inside the `<caption>` element.\n *\n * @csspart table - The `<table>` element.\n * @csspart caption - The `<caption>` element.\n *\n * @cssprop [--hx-table-border-color=var(--hx-color-neutral-200, #D6DBD5)] - Cell border color.\n * @cssprop [--hx-table-header-bg=var(--hx-color-neutral-50, #F5F8F3)] - Header row background.\n * @cssprop [--hx-table-header-color=var(--hx-color-neutral-700, #313E4B)] - Header text color.\n * @cssprop [--hx-table-cell-color=var(--hx-color-neutral-900, #0D1825)] - Cell text color.\n * @cssprop [--hx-table-row-hover-bg=var(--hx-color-neutral-50, #F5F8F3)] - Row hover background.\n * @cssprop [--hx-table-stripe-bg=var(--hx-color-neutral-50, #F5F8F3)] - Striped row background.\n * @cssprop [--hx-table-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n */\n@customElement('hx-table')\nexport class HelixTable extends HelixElement {\n  static override styles = [helixTableStyles, forcedColorsSurface];\n\n  // ─── Public Properties ───\n\n  /**\n   * Accessible name for the table (WCAG 4.1.2 requirement).\n   * Exposed via `aria-label` on the `<table>` element.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Visible caption text. When set, renders a `<caption>` element.\n   * Use the `caption` slot for richer caption content.\n   * @attr caption\n   */\n  @property({ type: String })\n  caption = '';\n\n  /**\n   * Visual variant that controls row styling.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'striped' | 'hover' | 'compact' = 'default';\n\n  /**\n   * When true, the header row stays fixed while the table body scrolls.\n   * @attr sticky-header\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n  stickyHeader = false;\n\n  /**\n   * When true, the table expands to fill 100% of its container width.\n   * @attr full-width\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  fullWidth = true;\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _hasCaptionSlot = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._hasCaptionSlot = this.querySelector('[slot=\"caption\"]') !== null;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(changedProperties);\n    // WCAG 4.1.2: warn when neither label nor caption provides an accessible name.\n    // A table without an accessible name cannot be identified by screen reader users.\n    if (!this.label && !this.caption && !this._hasCaptionSlot) {\n      devWarn(\n        'hx-table',\n        'No accessible name provided. Set the `label` or `caption` attribute, or use the `caption` slot, so screen readers can identify this table (WCAG 4.1.2 Name, Role, Value).',\n      );\n    }\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('label') && !this.label && changed.get('label') !== undefined) {\n      devWarn(\n        'hx-table',\n        'No accessible name provided. Set the `label` attribute so screen readers can identify this table (WCAG 4.1.2).',\n      );\n    }\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  // ─── Render ───\n\n  override render() {\n    const hasCaption = this.caption || this._hasCaptionSlot;\n\n    return html`\n      <div class=\"table-wrapper\">\n        <!-- role=\"table\" is required: sub-components use display:contents which can confuse assistive technology in Shadow DOM -->\n        <table part=\"table\" role=\"table\" aria-label=${this.label || nothing}>\n          ${hasCaption\n            ? html`<caption part=\"caption\">\n                <slot name=\"caption\" @slotchange=${this._onCaptionSlotChange}>${this.caption}</slot>\n              </caption>`\n            : nothing}\n          <slot></slot>\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-table': HelixTable;\n  }\n}\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixTableSectionBaseStyles } from './hx-table.styles.js';\n\n/**\n * Semantic table head section. Must be a direct child of `hx-table`.\n * Contains `hx-tr` rows with `hx-th` header cells.\n *\n * @summary Table head section (`<thead>`) for use inside `hx-table`.\n *\n * @tag hx-thead\n *\n * @slot - Default slot for `hx-tr` elements.\n *\n * @csspart thead - The `<thead>` element.\n */\n@customElement('hx-thead')\nexport class HelixTableHead extends HelixElement {\n  static override styles = [helixTableSectionBaseStyles];\n\n  override render() {\n    return html`<thead part=\"thead\" role=\"rowgroup\">\n      <slot></slot>\n    </thead>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-thead': HelixTableHead;\n  }\n}\n","import { html, css } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\n\n/**\n * Semantic table body section. Must be a direct child of `hx-table`.\n * Contains `hx-tr` rows with `hx-td` data cells.\n *\n * @summary Table body section (`<tbody>`) for use inside `hx-table`.\n *\n * @tag hx-tbody\n *\n * @slot - Default slot for `hx-tr` elements.\n *\n * @csspart tbody - The `<tbody>` element.\n */\n@customElement('hx-tbody')\nexport class HelixTableBody extends HelixElement {\n  static override styles = [\n    css`\n      :host {\n        display: contents;\n      }\n\n      /*\n       * Striped rows: only applies when the parent hx-table sets\n       * --_hx-table-row-stripe-bg (via variant=\"striped\"). Falls back\n       * to transparent so non-striped variants are unaffected.\n       */\n      ::slotted(hx-tr:nth-child(even)) {\n        --_hx-table-row-bg: var(--_hx-table-row-stripe-bg, transparent);\n      }\n    `,\n  ];\n\n  override render() {\n    return html`<tbody part=\"tbody\" role=\"rowgroup\">\n      <slot></slot>\n    </tbody>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tbody': HelixTableBody;\n  }\n}\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixTableSectionBaseStyles } from './hx-table.styles.js';\n\n/**\n * Semantic table foot section. Must be a direct child of `hx-table`.\n * Typically contains summary or totals rows.\n *\n * @summary Table foot section (`<tfoot>`) for use inside `hx-table`.\n *\n * @tag hx-tfoot\n *\n * @slot - Default slot for `hx-tr` elements.\n *\n * @csspart tfoot - The `<tfoot>` element.\n */\n@customElement('hx-tfoot')\nexport class HelixTableFoot extends HelixElement {\n  static override styles = [helixTableSectionBaseStyles];\n\n  override render() {\n    return html`<tfoot part=\"tfoot\" role=\"rowgroup\">\n      <slot></slot>\n    </tfoot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tfoot': HelixTableFoot;\n  }\n}\n","import { html, nothing, css } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\n\n/**\n * Semantic table row. Must be a child of `hx-thead`, `hx-tbody`, or `hx-tfoot`.\n * Contains `hx-th` or `hx-td` cells.\n *\n * @summary Table row (`<tr>`) for use inside `hx-thead`, `hx-tbody`, or `hx-tfoot`.\n *\n * @tag hx-tr\n *\n * @slot - Default slot for `hx-th` and `hx-td` elements.\n *\n * @csspart row - The `<tr>` element.\n */\n@customElement('hx-tr')\nexport class HelixTableRow extends HelixElement {\n  static override styles = [\n    css`\n      :host {\n        display: contents;\n      }\n\n      tr {\n        background-color: var(--_hx-table-row-bg, transparent);\n        transition: background-color var(--hx-transition-fast, 150ms ease);\n      }\n\n      tr:hover {\n        background-color: var(--_hx-table-row-hover-bg, var(--hx-table-row-hover-bg, transparent));\n      }\n\n      :host([selected]) tr {\n        background-color: var(--hx-table-row-selected-bg, var(--hx-color-primary-50, #ebf8f8));\n      }\n\n      :host([disabled]) tr {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        tr {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /**\n   * When true, marks the row as selected and applies selected styling.\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * When true, the row is visually disabled and non-interactive.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  override render() {\n    return html`\n      <tr\n        part=\"row\"\n        role=\"row\"\n        aria-selected=${this.selected ? 'true' : nothing}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n      >\n        <slot></slot>\n      </tr>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tr': HelixTableRow;\n  }\n}\n","import { html, nothing, css } 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';\n\n/**\n * Detail type for `hx-sort` events dispatched from `hx-th`.\n */\nexport interface HxTableSortDetail {\n  direction: 'asc' | 'desc';\n}\n\n/**\n * Semantic table header cell. Must be a child of `hx-tr`.\n * Supports sortable columns with accessible sort state.\n *\n * @summary Table header cell (`<th>`) with optional sort support.\n *\n * @tag hx-th\n *\n * @slot - Default slot for header label content.\n *\n * @fires {CustomEvent<HxTableSortDetail>} hx-sort - Dispatched when a sortable header is activated.\n *\n * @csspart header - The `<th>` element.\n * @csspart sort-icon - The sort indicator icon `<span>` inside sortable headers.\n */\n@customElement('hx-th')\nexport class HelixTableHeader extends HelixElement {\n  static override styles = [\n    css`\n      :host {\n        display: contents;\n      }\n\n      th {\n        padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n        text-align: left;\n        font-weight: var(--hx-font-weight-semibold, 600);\n        color: var(--hx-table-header-color, var(--hx-color-neutral-700, #313e4b));\n        background-color: var(\n          --_hx-table-cell-bg,\n          var(--hx-table-header-bg, var(--hx-color-neutral-50, #f5f8f3))\n        );\n        border-bottom: var(--hx-border-width-thin, 1px) solid\n          var(--hx-table-border-color, var(--hx-color-neutral-200, #d6dbd5));\n        white-space: nowrap;\n        vertical-align: middle;\n        position: var(--_hx-table-th-position, static);\n        top: var(--_hx-table-th-top, auto);\n        z-index: var(--_hx-table-th-z-index, auto);\n      }\n\n      :host([sortable]) th {\n        cursor: pointer;\n      }\n\n      /* ─── Sort Button ─── */\n\n      .sort-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--hx-space-1, 0.25rem);\n        background: none;\n        border: none;\n        padding: 0;\n        font: inherit;\n        font-weight: inherit;\n        color: inherit;\n        cursor: pointer;\n        white-space: nowrap;\n        width: 100%;\n      }\n\n      .sort-btn:focus-visible {\n        outline: var(--hx-focus-ring-width, 2px) solid\n          var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));\n        outline-offset: var(--hx-focus-ring-offset, 2px);\n        border-radius: var(--hx-border-radius-sm, 2px);\n      }\n\n      /* ─── Sort Icon ─── */\n\n      .sort-icon {\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n        width: 1em;\n        height: 1em;\n        opacity: 0.4;\n        transition:\n          opacity var(--hx-transition-fast, 150ms ease),\n          transform var(--hx-transition-fast, 150ms ease);\n      }\n\n      .sort-icon--active {\n        opacity: 1;\n        color: var(--hx-color-primary-500, #429797);\n      }\n\n      .sort-icon--desc {\n        transform: rotate(180deg);\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .sort-icon {\n          transition: none;\n        }\n      }\n\n      /* ─── Mobile card layout ─── */\n\n      @media (max-width: 768px) {\n        /*\n         * Visually hide the header cell on mobile while keeping it in the\n         * accessibility tree. Screen readers can then associate column\n         * headers with data cells via the semantic table structure\n         * (scope=\"col\", role=\"columnheader\"), satisfying WCAG 2.1 AA.\n         * Using display:none would remove headers from the a11y tree entirely.\n         */\n        th {\n          position: absolute;\n          width: 1px;\n          height: 1px;\n          padding: 0;\n          margin: -1px;\n          overflow: hidden;\n          clip: rect(0, 0, 0, 0);\n          white-space: nowrap;\n          border: 0;\n        }\n      }\n    `,\n  ];\n\n  /**\n   * When true, the header renders a sort button and emits `hx-sort` on activation.\n   * @attr sortable\n   */\n  @property({ type: Boolean, reflect: true })\n  sortable = false;\n\n  /**\n   * Current sort direction. Reflected for CSS targeting.\n   * @attr sort-direction\n   */\n  @property({ type: String, reflect: true, attribute: 'sort-direction' })\n  sortDirection: 'asc' | 'desc' | 'none' = 'none';\n\n  /**\n   * The `scope` attribute for the underlying `<th>` element.\n   * @attr scope\n   */\n  @property({ type: String })\n  scope: 'col' | 'row' | 'colgroup' | 'rowgroup' = 'col';\n\n  /**\n   * Number of columns this header spans.\n   * @attr colspan\n   */\n  @property({ type: Number })\n  colspan = 0;\n\n  /**\n   * Number of rows this header spans.\n   * @attr rowspan\n   */\n  @property({ type: Number })\n  rowspan = 0;\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSort(): void {\n    const next: 'asc' | 'desc' = this.sortDirection === 'asc' ? 'desc' : 'asc';\n    this.sortDirection = next;\n    this.dispatchEvent(\n      new CustomEvent<HxTableSortDetail>('hx-sort', {\n        bubbles: true,\n        composed: true,\n        detail: { direction: next },\n      }),\n    );\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderSortIcon() {\n    const isActive = this.sortDirection !== 'none';\n    const iconClass = [\n      'sort-icon',\n      isActive ? 'sort-icon--active' : '',\n      this.sortDirection === 'desc' ? 'sort-icon--desc' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <span part=\"sort-icon\" class=${iconClass} aria-hidden=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          width=\"16\"\n          height=\"16\"\n        >\n          <path d=\"M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z\" fill-rule=\"evenodd\" />\n        </svg>\n      </span>\n    `;\n  }\n\n  /** @internal */\n  private _ariaSort(): 'ascending' | 'descending' | 'none' | typeof nothing {\n    if (!this.sortable) return nothing;\n    if (this.sortDirection === 'asc') return 'ascending';\n    if (this.sortDirection === 'desc') return 'descending';\n    return 'none';\n  }\n\n  /** @internal */\n  private _sortLabel(): string {\n    if (this.sortDirection === 'asc') return 'Sort descending';\n    if (this.sortDirection === 'desc') return 'Sort ascending';\n    return 'Sort';\n  }\n\n  override render() {\n    return html`\n      <th\n        part=\"header\"\n        role=\"columnheader\"\n        scope=${this.scope}\n        colspan=${ifDefined(this.colspan > 0 ? this.colspan : undefined)}\n        rowspan=${ifDefined(this.rowspan > 0 ? this.rowspan : undefined)}\n        aria-sort=${this._ariaSort()}\n      >\n        ${this.sortable\n          ? html`\n              <button class=\"sort-btn\" @click=${this._handleSort} aria-label=${this._sortLabel()}>\n                <slot></slot>\n                ${this._renderSortIcon()}\n              </button>\n            `\n          : html`<slot></slot>`}\n      </th>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-th': HelixTableHeader;\n  }\n}\n","import { html, css } 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';\n\n/**\n * Semantic table data cell. Must be a child of `hx-tr`.\n *\n * @summary Table data cell (`<td>`) for use inside `hx-tr`.\n *\n * @tag hx-td\n *\n * @slot - Default slot for cell content.\n *\n * @csspart cell - The `<td>` element.\n *\n * @cssprop [--hx-table-cell-color=var(--hx-color-neutral-900, #0D1825)] - Cell text color.\n */\n@customElement('hx-td')\nexport class HelixTableCell extends HelixElement {\n  static override styles = [\n    css`\n      :host {\n        display: contents;\n      }\n\n      td {\n        padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n        text-align: left;\n        color: var(--hx-table-cell-color, var(--hx-color-neutral-900, #0d1825));\n        border-bottom: var(--hx-border-width-thin, 1px) solid\n          var(--hx-table-border-color, var(--hx-color-neutral-200, #d6dbd5));\n        vertical-align: middle;\n      }\n\n      :host([align='center']) td {\n        text-align: center;\n      }\n\n      :host([align='right']) td {\n        text-align: right;\n      }\n\n      td:focus-visible {\n        outline: var(--hx-focus-ring-width, 2px) solid\n          var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));\n        outline-offset: var(--hx-focus-ring-offset, -2px);\n        border-radius: var(--hx-border-radius-sm, 2px);\n      }\n\n      /* ─── Mobile card layout ─── */\n\n      @media (max-width: 768px) {\n        :host {\n          display: block;\n        }\n\n        td {\n          display: block;\n          text-align: right;\n          padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n          border-bottom: none;\n          position: relative;\n        }\n\n        td::before {\n          content: attr(data-label);\n          font-weight: var(--hx-font-weight-semibold, 600);\n          float: left;\n          color: var(--hx-table-header-color, var(--hx-color-neutral-700, #313e4b));\n        }\n      }\n    `,\n  ];\n\n  /**\n   * Horizontal alignment for cell content.\n   * @attr align\n   */\n  @property({ type: String, reflect: true })\n  align: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Number of columns this cell spans.\n   * @attr colspan\n   */\n  @property({ type: Number })\n  colspan = 0;\n\n  /**\n   * Number of rows this cell spans.\n   * @attr rowspan\n   */\n  @property({ type: Number })\n  rowspan = 0;\n\n  /**\n   * Column header label for this cell. Forwarded as `data-label` on the native `<td>` for\n   * the mobile card layout (`td::before { content: attr(data-label) }`) and as `aria-label`\n   * so screen readers identify the column when the header row is hidden.\n   * @attr label\n   */\n  @property({ type: String, attribute: 'label' })\n  label = '';\n\n  override render() {\n    return html`\n      <td\n        part=\"cell\"\n        role=\"cell\"\n        data-label=${ifDefined(this.label || undefined)}\n        colspan=${ifDefined(this.colspan > 0 ? this.colspan : undefined)}\n        rowspan=${ifDefined(this.rowspan > 0 ? this.rowspan : undefined)}\n      >\n        <slot></slot>\n      </td>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-td': HelixTableCell;\n  }\n}\n"],"names":["helixTableStyles","css","helixTableSectionBaseStyles","HelixTable","HelixElement","changedProperties","changed","slot","hasCaption","html","nothing","forcedColorsSurface","__decorateClass","property","state","customElement","HelixTableHead","HelixTableBody","HelixTableFoot","HelixTableRow","HelixTableHeader","next","iconClass","ifDefined","HelixTableCell"],"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwHQA;AAAA;AAAA;AAAA;AAAA;AAMDA;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAMC,IAA8BD;AAAA;AAAA;AAAA;AAAA;;;;;;AC1FpC,IAAME,IAAN,cAAyBC,EAAa;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAWL,KAAA,QAAQ,IAQR,KAAA,UAAU,IAOV,KAAA,UAAuD,WAOvD,KAAA,eAAe,IAOf,KAAA,YAAY,IAKH,KAAQ,kBAAkB;AAAA,EAAA;AAAA;AAAA,EAI1B,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,kBAAkB,KAAK,cAAc,kBAAkB,MAAM;AAAA,EACpE;AAAA,EAES,aAAaC,GAA+C;AACnE,UAAM,aAAaA,CAAiB,GAGhC,CAAC,KAAK,SAAS,CAAC,KAAK,WAAY,KAAK;AAAA,EAM5C;AAAA,EAES,WAAWC,GAAqC;AACvD,IAAIA,EAAQ,IAAI,OAAO,KAAK,CAAC,KAAK,SAASA,EAAQ,IAAI,OAAO;AAAA,EAMhE;AAAA;AAAA,EAGQ,qBAAqB,GAAgB;AAC3C,UAAMC,IAAO,EAAE;AACf,SAAK,kBAAkBA,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACxE;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAa,KAAK,WAAW,KAAK;AAExC,WAAOC;AAAA;AAAA;AAAA,sDAG2C,KAAK,SAASC,CAAO;AAAA,YAC/DF,IACEC;AAAA,mDACqC,KAAK,oBAAoB,IAAI,KAAK,OAAO;AAAA,4BAE9EC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnB;AACF;AApGaP,EACK,SAAS,CAACH,GAAkBW,CAAmB;AAU/DC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfV,EAWX,WAAA,SAAA,CAAA;AAQAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlBfV,EAmBX,WAAA,WAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzB9BV,EA0BX,WAAA,WAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,iBAAiB;AAAA,GAhC3DV,EAiCX,WAAA,gBAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,cAAc;AAAA,GAvCxDV,EAwCX,WAAA,aAAA,CAAA;AAKiBS,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7CIX,EA6CM,WAAA,mBAAA,CAAA;AA7CNA,IAANS,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZZ,CAAA;;;;;;ACzBN,IAAMa,IAAN,cAA6BZ,EAAa;AAAA,EAGtC,SAAS;AAChB,WAAOK;AAAA;AAAA;AAAA,EAGT;AACF;AARaO,EACK,SAAS,CAACd,CAA2B;AAD1Cc,IAANJ,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZC,CAAA;;;;;;ACDN,IAAMC,IAAN,cAA6Bb,EAAa;AAAA,EAkBtC,SAAS;AAChB,WAAOK;AAAA;AAAA;AAAA,EAGT;AACF;AAvBaQ,EACK,SAAS;AAAA,EACvBhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcF;AAhBWgB,IAANL,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZE,CAAA;;;;;;ACCN,IAAMC,IAAN,cAA6Bd,EAAa;AAAA,EAGtC,SAAS;AAChB,WAAOK;AAAA;AAAA;AAAA,EAGT;AACF;AARaS,EACK,SAAS,CAAChB,CAA2B;AAD1CgB,IAANN,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZG,CAAA;;;;;;ACDN,IAAMC,IAAN,cAA4Bf,EAAa;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAsCL,KAAA,WAAW,IAOX,KAAA,WAAW;AAAA,EAAA;AAAA,EAEF,SAAS;AAChB,WAAOK;AAAA;AAAA;AAAA;AAAA,wBAIa,KAAK,WAAW,SAASC,CAAO;AAAA,wBAChC,KAAK,WAAW,SAASA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKtD;AACF;AA3DaS,EACK,SAAS;AAAA,EACvBlB;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;AA6BF;AAOAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArC/BM,EAsCX,WAAA,YAAA,CAAA;AAOAP,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5C/BM,EA6CX,WAAA,YAAA,CAAA;AA7CWA,IAANP,EAAA;AAAA,EADNG,EAAc,OAAO;AAAA,GACTI,CAAA;;;;;;ACWN,IAAMC,IAAN,cAA+BhB,EAAa;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHL,KAAA,WAAW,IAOX,KAAA,gBAAyC,QAOzC,KAAA,QAAiD,OAOjD,KAAA,UAAU,GAOV,KAAA,UAAU;AAAA,EAAA;AAAA;AAAA;AAAA,EAKF,cAAoB;AAC1B,UAAMiB,IAAuB,KAAK,kBAAkB,QAAQ,SAAS;AACrE,SAAK,gBAAgBA,GACrB,KAAK;AAAA,MACH,IAAI,YAA+B,WAAW;AAAA,QAC5C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,WAAWA,EAAA;AAAA,MAAK,CAC3B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKQ,kBAAkB;AAExB,UAAMC,IAAY;AAAA,MAChB;AAAA,MAFe,KAAK,kBAAkB,SAG3B,sBAAsB;AAAA,MACjC,KAAK,kBAAkB,SAAS,oBAAoB;AAAA,IAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WAAOb;AAAA,qCAC0Ba,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY5C;AAAA;AAAA,EAGQ,YAAkE;AACxE,WAAK,KAAK,WACN,KAAK,kBAAkB,QAAc,cACrC,KAAK,kBAAkB,SAAe,eACnC,SAHoBZ;AAAA,EAI7B;AAAA;AAAA,EAGQ,aAAqB;AAC3B,WAAI,KAAK,kBAAkB,QAAc,oBACrC,KAAK,kBAAkB,SAAe,mBACnC;AAAA,EACT;AAAA,EAES,SAAS;AAChB,WAAOD;AAAA;AAAA;AAAA;AAAA,gBAIK,KAAK,KAAK;AAAA,kBACRc,EAAU,KAAK,UAAU,IAAI,KAAK,UAAU,MAAS,CAAC;AAAA,kBACtDA,EAAU,KAAK,UAAU,IAAI,KAAK,UAAU,MAAS,CAAC;AAAA,oBACpD,KAAK,WAAW;AAAA;AAAA,UAE1B,KAAK,WACHd;AAAA,gDACoC,KAAK,WAAW,eAAe,KAAK,YAAY;AAAA;AAAA,kBAE9E,KAAK,iBAAiB;AAAA;AAAA,gBAG5BA,gBAAmB;AAAA;AAAA;AAAA,EAG7B;AACF;AA7NaW,EACK,SAAS;AAAA,EACvBnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuGF;AAOAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/G/BO,EAgHX,WAAA,YAAA,CAAA;AAOAR,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,kBAAkB;AAAA,GAtH3DO,EAuHX,WAAA,iBAAA,CAAA;AAOAR,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7HfO,EA8HX,WAAA,SAAA,CAAA;AAOAR,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApIfO,EAqIX,WAAA,WAAA,CAAA;AAOAR,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3IfO,EA4IX,WAAA,WAAA,CAAA;AA5IWA,IAANR,EAAA;AAAA,EADNG,EAAc,OAAO;AAAA,GACTK,CAAA;;;;;;ACTN,IAAMI,IAAN,cAA6BpB,EAAa;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GA6DL,KAAA,QAAqC,QAOrC,KAAA,UAAU,GAOV,KAAA,UAAU,GASV,KAAA,QAAQ;AAAA,EAAA;AAAA,EAEC,SAAS;AAChB,WAAOK;AAAA;AAAA;AAAA;AAAA,qBAIUc,EAAU,KAAK,SAAS,MAAS,CAAC;AAAA,kBACrCA,EAAU,KAAK,UAAU,IAAI,KAAK,UAAU,MAAS,CAAC;AAAA,kBACtDA,EAAU,KAAK,UAAU,IAAI,KAAK,UAAU,MAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKtE;AACF;AAnGaC,EACK,SAAS;AAAA,EACvBvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoDF;AAOAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5D9BW,EA6DX,WAAA,SAAA,CAAA;AAOAZ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEfW,EAoEX,WAAA,WAAA,CAAA;AAOAZ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EfW,EA2EX,WAAA,WAAA,CAAA;AASAZ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,SAAS;AAAA,GAnFnCW,EAoFX,WAAA,SAAA,CAAA;AApFWA,IAANZ,EAAA;AAAA,EADNG,EAAc,OAAO;AAAA,GACTS,CAAA;"}