@helixui/library 0.1.0

package/dist/shared/hx-toggle-button-BkDaJgRS.js

@@ -0,0 +1,320 @@
+import { css as u, LitElement as g, html as b, nothing as p } from "lit";
+import { property as a, customElement as d } from "lit/decorators.js";
+import { classMap as x } from "lit/directives/class-map.js";
+import { t as c } from "./lit-Dpo7RLp4.js";
+const f = u`
+  :host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  /* ─── Base Button ─── */
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
+    border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));
+    font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
+    line-height: var(--hx-line-height-tight, 1.25);
+    cursor: pointer;
+    transition:
+      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;
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .button:hover {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .button:active {
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Size Variants ─── */
+
+  .button--sm {
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    min-height: var(--hx-size-8, 2rem);
+  }
+
+  .button--md {
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    min-height: var(--hx-size-10, 2.5rem);
+  }
+
+  .button--lg {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    min-height: var(--hx-size-12, 3rem);
+  }
+
+  /* ─── Style Variants ─── */
+
+  .button--primary {
+    --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toggle-button-border-color: transparent;
+  }
+
+  .button--secondary {
+    --hx-toggle-button-bg: transparent;
+    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  .button--secondary:hover {
+    --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);
+  }
+
+  .button--tertiary {
+    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toggle-button-border-color: transparent;
+  }
+
+  .button--tertiary:hover {
+    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+  }
+
+  .button--ghost {
+    --hx-toggle-button-bg: transparent;
+    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-border-color: transparent;
+  }
+
+  .button--ghost:hover {
+    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+  }
+
+  .button--outline {
+    --hx-toggle-button-bg: transparent;
+    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
+  }
+
+  .button--outline:hover {
+    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);
+  }
+
+  /* ─── Pressed State ─── */
+
+  /*
+   * Primary: already uses solid primary bg; pressed deepens to primary-700
+   * to give clear visual feedback without introducing a new color.
+   */
+  .button--primary.button--pressed {
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1d4ed8));
+    --hx-toggle-button-color: var(
+      --hx-toggle-button-pressed-color,
+      var(--hx-color-neutral-0, #ffffff)
+    );
+    --hx-toggle-button-border-color: transparent;
+  }
+
+  /*
+   * Secondary: unpressed is outlined/transparent; pressed fills with primary bg
+   * so the state change is immediately legible.
+   */
+  .button--secondary.button--pressed {
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));
+    --hx-toggle-button-color: var(
+      --hx-toggle-button-pressed-color,
+      var(--hx-color-neutral-0, #ffffff)
+    );
+    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
+  .button--tertiary.button--pressed {
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
+    --hx-toggle-button-color: var(
+      --hx-toggle-button-pressed-color,
+      var(--hx-color-primary-700, #1d4ed8)
+    );
+    --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
+    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
+  }
+
+  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
+  .button--ghost.button--pressed {
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
+    --hx-toggle-button-color: var(
+      --hx-toggle-button-pressed-color,
+      var(--hx-color-primary-700, #1d4ed8)
+    );
+    --hx-toggle-button-border-color: transparent;
+  }
+
+  /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */
+  .button--outline.button--pressed {
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));
+    --hx-toggle-button-color: var(
+      --hx-toggle-button-pressed-color,
+      var(--hx-color-neutral-900, #0f172a)
+    );
+    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);
+    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
+  }
+
+  /* ─── Disabled ─── */
+
+  .button[disabled] {
+    cursor: not-allowed;
+  }
+
+  /* ─── Prefix / Suffix / Label ─── */
+
+  .button__prefix,
+  .button__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .button__label {
+    flex: 1 1 auto;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      transition: none;
+    }
+  }
+`;
+var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (t, s, l, n) => {
+  for (var o = n > 1 ? void 0 : n ? m(s, l) : s, i = t.length - 1, h; i >= 0; i--)
+    (h = t[i]) && (o = (n ? h(s, l, o) : h(o)) || o);
+  return n && o && v(s, l, o), o;
+};
+let e = class extends g {
+  constructor() {
+    super(), this.pressed = !1, this.variant = "secondary", this.size = "md", this.disabled = !1, this.name = void 0, this.value = void 0, this.label = void 0, this._internals = this.attachInternals();
+  }
+  // ─── Form API ───
+  /** Returns the associated form element, if any. */
+  get form() {
+    return this._internals.form;
+  }
+  // ─── Lifecycle ───
+  updated(t) {
+    super.updated(t), (t.has("pressed") || t.has("value")) && this._syncFormValue();
+  }
+  /** Called by the browser when the associated form is reset. */
+  formResetCallback() {
+    this.pressed = !1;
+  }
+  /** Called by the browser when restoring form state (e.g. bfcache). */
+  formStateRestoreCallback(t) {
+    this.pressed = t === "pressed";
+  }
+  // ─── Private Helpers ───
+  _syncFormValue() {
+    this.pressed && this.value !== void 0 ? this._internals.setFormValue(this.value, "pressed") : this._internals.setFormValue(null);
+  }
+  // ─── Event Handling ───
+  _handleClick(t) {
+    if (this.disabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    this.pressed = !this.pressed, this._syncFormValue(), this.dispatchEvent(
+      new CustomEvent("hx-toggle", {
+        bubbles: !0,
+        composed: !0,
+        detail: { pressed: this.pressed }
+      })
+    );
+  }
+  // ─── Render Helpers ───
+  _renderInner() {
+    return b`
+      <span part="prefix" class="button__prefix">
+        <slot name="prefix"></slot>
+      </span>
+      <span part="label" class="button__label">
+        <slot></slot>
+      </span>
+      <span part="suffix" class="button__suffix">
+        <slot name="suffix"></slot>
+      </span>
+    `;
+  }
+  // ─── Render ───
+  render() {
+    const t = {
+      button: !0,
+      [`button--${this.variant}`]: !0,
+      [`button--${this.size}`]: !0,
+      "button--pressed": this.pressed
+    };
+    return b`
+      <button
+        part="button"
+        class=${x(t)}
+        ?disabled=${this.disabled}
+        type="button"
+        aria-pressed=${this.pressed ? "true" : "false"}
+        aria-label=${this.label ?? p}
+        @click=${this._handleClick}
+      >
+        ${this._renderInner()}
+      </button>
+    `;
+  }
+};
+e.styles = [c, f];
+e.formAssociated = !0;
+r([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "pressed", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+r([
+  a({ type: String, reflect: !0, attribute: "hx-size" })
+], e.prototype, "size", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+r([
+  a({ type: String })
+], e.prototype, "name", 2);
+r([
+  a({ type: String })
+], e.prototype, "value", 2);
+r([
+  a({ type: String })
+], e.prototype, "label", 2);
+e = r([
+  d("hx-toggle-button")
+], e);
+export {
+  e as H
+};
+//# sourceMappingURL=hx-toggle-button-BkDaJgRS.js.map

package/dist/shared/hx-toggle-button-BkDaJgRS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-toggle-button-BkDaJgRS.js","sources":["../../src/components/hx-toggle-button/hx-toggle-button.styles.ts","../../src/components/hx-toggle-button/hx-toggle-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToggleButtonStyles = 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  /* ─── Base Button ─── */\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);\n    border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));\n    line-height: var(--hx-line-height-tight, 1.25);\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    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .button:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .button--sm {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    font-size: var(--hx-font-size-md, 1rem);\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Style Variants ─── */\n\n  .button--primary {\n    --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--secondary {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  .button--secondary:hover {\n    --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);\n  }\n\n  .button--tertiary {\n    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--tertiary:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);\n  }\n\n  .button--ghost {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n  }\n\n  .button--outline {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .button--outline:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);\n  }\n\n  /* ─── Pressed State ─── */\n\n  /*\n   * Primary: already uses solid primary bg; pressed deepens to primary-700\n   * to give clear visual feedback without introducing a new color.\n   */\n  .button--primary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1d4ed8));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-0, #ffffff)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /*\n   * Secondary: unpressed is outlined/transparent; pressed fills with primary bg\n   * so the state change is immediately legible.\n   */\n  .button--secondary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-0, #ffffff)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */\n  .button--tertiary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #1d4ed8)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);\n    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);\n  }\n\n  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */\n  .button--ghost.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #1d4ed8)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */\n  .button--outline.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-900, #0f172a)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);\n    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Prefix / Suffix / Label ─── */\n\n  .button__prefix,\n  .button__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .button__label {\n    flex: 1 1 auto;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixToggleButtonStyles } from './hx-toggle-button.styles.js';\n\n/**\n * A two-state toggle button that communicates a pressed/unpressed status to\n * assistive technology via `aria-pressed`. Supports multiple visual variants\n * and sizes, prefix/suffix slots, full ElementInternals form association, and\n * a distinct pressed visual state for every variant.\n *\n * @summary Two-state toggle button with pressed/unpressed ARIA semantics.\n *\n * @tag hx-toggle-button\n *\n * @slot - Default slot for the button label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @fires {CustomEvent<{pressed: boolean}>} hx-toggle - Dispatched when the\n *   toggle state changes. Not dispatched when the button is disabled.\n *\n * @csspart button - The native `<button>` element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n *\n * @cssprop [--hx-toggle-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-toggle-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-toggle-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-toggle-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-toggle-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-toggle-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-toggle-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-toggle-button-pressed-bg=var(--hx-color-primary-500)] - Background when pressed (variant-specific fallback applies).\n * @cssprop [--hx-toggle-button-pressed-color=var(--hx-color-neutral-0)] - Text color when pressed (variant-specific fallback applies).\n */\n@customElement('hx-toggle-button')\nexport class HelixToggleButton extends LitElement {\n  static override styles = [tokenStyles, helixToggleButtonStyles];\n\n  // ─── Form Association ───\n\n  static formAssociated = true;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Public Properties ───\n\n  /**\n   * Whether the toggle button is in the pressed state.\n   * Reflected as an attribute so CSS selectors like `:host([pressed])` work.\n   * @attr pressed\n   */\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' = 'secondary';\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   * Whether the button is disabled. Prevents all interaction and form actions.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Form field name submitted via ElementInternals when the button is pressed.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Form field value submitted via ElementInternals when the button is pressed.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  /**\n   * Accessible label forwarded to the inner `<button>` as `aria-label`.\n   * Required for icon-only toggle buttons where no visible text is present.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  // ─── Form API ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('pressed') || changedProperties.has('value')) {\n      this._syncFormValue();\n    }\n  }\n\n  /** Called by the browser when the associated form is reset. */\n  formResetCallback(): void {\n    this.pressed = false;\n  }\n\n  /** Called by the browser when restoring form state (e.g. bfcache). */\n  formStateRestoreCallback(state: string): void {\n    this.pressed = state === 'pressed';\n  }\n\n  // ─── Private Helpers ───\n\n  private _syncFormValue(): void {\n    if (this.pressed && this.value !== undefined) {\n      // Pass explicit state 'pressed' so formStateRestoreCallback can reliably detect it.\n      this._internals.setFormValue(this.value, 'pressed');\n    } else {\n      this._internals.setFormValue(null);\n    }\n  }\n\n  // ─── Event Handling ───\n\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.pressed = !this.pressed;\n    this._syncFormValue();\n\n    /**\n     * Dispatched when the toggle state changes.\n     * @event hx-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { pressed: this.pressed },\n      }),\n    );\n  }\n\n  // ─── Render Helpers ───\n\n  private _renderInner() {\n    return html`\n      <span part=\"prefix\" class=\"button__prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span part=\"label\" class=\"button__label\">\n        <slot></slot>\n      </span>\n      <span part=\"suffix\" class=\"button__suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n      'button--pressed': this.pressed,\n    };\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(classes)}\n        ?disabled=${this.disabled}\n        type=\"button\"\n        aria-pressed=${this.pressed ? 'true' : 'false'}\n        aria-label=${this.label ?? nothing}\n        @click=${this._handleClick}\n      >\n        ${this._renderInner()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toggle-button': HelixToggleButton;\n  }\n}\n"],"names":["helixToggleButtonStyles","css","HelixToggleButton","LitElement","changedProperties","state","e","html","classes","classMap","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-tooltip-wAQWzjlr.js

@@ -0,0 +1,190 @@
+import { css as v, LitElement as g, html as x } from "lit";
+import { property as p, state as w, customElement as y } from "lit/decorators.js";
+import { t as f } from "./lit-Dpo7RLp4.js";
+import { computePosition as b, offset as T, flip as D, shift as $, arrow as E } from "@floating-ui/dom";
+const S = v`
+  :host {
+    display: inline-block;
+  }
+
+  .trigger-wrapper {
+    display: inline-block;
+  }
+
+  [part='tooltip'] {
+    position: fixed;
+    z-index: var(--hx-tooltip-z-index, 9999);
+    max-width: var(--hx-tooltip-max-width, 280px);
+    padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f9fafb));
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
+    line-height: var(--hx-line-height-normal, 1.5);
+    border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    box-shadow: var(
+      --hx-tooltip-shadow,
+      var(--hx-shadow-sm, 0 2px 8px var(--hx-overlay-black-20, rgba(0, 0, 0, 0.2)))
+    );
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      opacity var(--hx-tooltip-transition-duration, 0.15s) ease,
+      visibility var(--hx-tooltip-transition-duration, 0.15s) ease;
+    overflow-wrap: break-word;
+  }
+
+  [part='tooltip'].visible {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  [part='arrow'] {
+    position: absolute;
+    width: var(--hx-tooltip-arrow-size, 8px);
+    height: var(--hx-tooltip-arrow-size, 8px);
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='tooltip'] {
+      transition: none;
+    }
+  }
+`;
+var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (t, e, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? C(e, i) : e, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (o = (s ? a(e, i, o) : a(o)) || o);
+  return s && o && k(e, i, o), o;
+};
+let h = class extends g {
+  constructor() {
+    super(...arguments), this.placement = "top", this.showDelay = 300, this.hideDelay = 100, this._visible = !1, this._showTimer = null, this._hideTimer = null, this._tooltipId = `hx-tooltip-${crypto.randomUUID()}`, this._lightDomDescription = null, this._handleKeydown = (t) => {
+      t.key === "Escape" && this._visible && (this._clearTimers(), this._hide());
+    };
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), this._clearTimers(), (t = this._lightDomDescription) == null || t.remove(), this._lightDomDescription = null;
+  }
+  firstUpdated() {
+    this._setupTriggerAria();
+  }
+  // ─── ARIA setup ───
+  _setupTriggerAria() {
+    var o, r;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot:not([name])");
+    if (!t) return;
+    const e = t.assignedElements()[0], i = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
+      'slot[name="content"]'
+    ), s = (i == null ? void 0 : i.assignedElements().map((a) => a.textContent).join(" ").trim()) ?? "";
+    this._lightDomDescription || (this._lightDomDescription = document.createElement("span"), this._lightDomDescription.id = this._tooltipId, this._lightDomDescription.style.cssText = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0", this.appendChild(this._lightDomDescription)), this._lightDomDescription.textContent = s, e && e.setAttribute("aria-describedby", this._tooltipId);
+  }
+  // ─── Show/Hide ───
+  _scheduleShow() {
+    this._clearTimers(), this._showTimer = setTimeout(() => {
+      this._show();
+    }, this.showDelay);
+  }
+  _scheduleHide() {
+    this._clearTimers(), this._hideTimer = setTimeout(() => {
+      this._hide();
+    }, this.hideDelay);
+  }
+  async _show() {
+    this._visible = !0, await this.updateComplete, await this._updatePosition();
+  }
+  _hide() {
+    this._visible = !1;
+  }
+  _clearTimers() {
+    this._showTimer !== null && (clearTimeout(this._showTimer), this._showTimer = null), this._hideTimer !== null && (clearTimeout(this._hideTimer), this._hideTimer = null);
+  }
+  // ─── Positioning ───
+  async _updatePosition() {
+    var d, c, m;
+    const t = (d = this.shadowRoot) == null ? void 0 : d.querySelector(".trigger-wrapper"), e = (c = this.shadowRoot) == null ? void 0 : c.querySelector('[part="tooltip"]'), i = (m = this.shadowRoot) == null ? void 0 : m.querySelector('[part="arrow"]');
+    if (!t || !e || !i) return;
+    const { x: s, y: o, placement: r, middlewareData: a } = await b(t, e, {
+      placement: this.placement,
+      strategy: "fixed",
+      middleware: [T(8), D(), $({ padding: 8 }), E({ element: i })]
+    });
+    Object.assign(e.style, {
+      left: `${s}px`,
+      top: `${o}px`
+    });
+    const l = a.arrow, u = r.split("-")[0] ?? "top", _ = { top: "bottom", right: "left", bottom: "top", left: "right" }[u] ?? "bottom";
+    Object.assign(i.style, {
+      left: (l == null ? void 0 : l.x) != null ? `${l.x}px` : "",
+      top: (l == null ? void 0 : l.y) != null ? `${l.y}px` : "",
+      right: "",
+      bottom: "",
+      [_]: `${-(i.offsetWidth / 2)}px`
+    });
+  }
+  /**
+   * Handle mouseleave on the trigger wrapper.
+   * Does not schedule hide if keyboard focus is still on the trigger element,
+   * preventing mixed keyboard+mouse interactions from dismissing the tooltip
+   * while the user is still navigating by keyboard.
+   * @internal
+   */
+  _handleTriggerMouseleave() {
+    var i;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])"), e = t == null ? void 0 : t.assignedElements()[0];
+    e && (e === document.activeElement || e.contains(document.activeElement)) || this._scheduleHide();
+  }
+  // ─── Render ───
+  render() {
+    return x`
+      <div
+        class="trigger-wrapper"
+        @mouseenter=${this._scheduleShow}
+        @mouseleave=${this._handleTriggerMouseleave}
+        @focusin=${this._scheduleShow}
+        @focusout=${this._scheduleHide}
+      >
+        <slot @slotchange=${this._setupTriggerAria}></slot>
+      </div>
+      <div
+        part="tooltip"
+        id=${this._tooltipId}
+        role="tooltip"
+        aria-hidden=${String(!this._visible)}
+        class=${this._visible ? "visible" : ""}
+        @mouseenter=${this._clearTimers}
+        @mouseleave=${this._scheduleHide}
+      >
+        <slot name="content" @slotchange=${this._setupTriggerAria}></slot>
+        <div part="arrow"></div>
+      </div>
+    `;
+  }
+};
+h.styles = [f, S];
+n([
+  p({ type: String, reflect: !0 })
+], h.prototype, "placement", 2);
+n([
+  p({ type: Number, attribute: "show-delay" })
+], h.prototype, "showDelay", 2);
+n([
+  p({ type: Number, attribute: "hide-delay" })
+], h.prototype, "hideDelay", 2);
+n([
+  w()
+], h.prototype, "_visible", 2);
+h = n([
+  y("hx-tooltip")
+], h);
+export {
+  h as H
+};
+//# sourceMappingURL=hx-tooltip-wAQWzjlr.js.map

package/dist/shared/hx-tooltip-wAQWzjlr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tooltip-wAQWzjlr.js","sources":["../../src/components/hx-tooltip/hx-tooltip.styles.ts","../../src/components/hx-tooltip/hx-tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTooltipStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='tooltip'] {\n    position: fixed;\n    z-index: var(--hx-tooltip-z-index, 9999);\n    max-width: var(--hx-tooltip-max-width, 280px);\n    padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));\n    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f9fafb));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    box-shadow: var(\n      --hx-tooltip-shadow,\n      var(--hx-shadow-sm, 0 2px 8px var(--hx-overlay-black-20, rgba(0, 0, 0, 0.2)))\n    );\n    visibility: hidden;\n    opacity: 0;\n    transition:\n      opacity var(--hx-tooltip-transition-duration, 0.15s) ease,\n      visibility var(--hx-tooltip-transition-duration, 0.15s) ease;\n    overflow-wrap: break-word;\n  }\n\n  [part='tooltip'].visible {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-tooltip-arrow-size, 8px);\n    height: var(--hx-tooltip-arrow-size, 8px);\n    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='tooltip'] {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { helixTooltipStyles } from './hx-tooltip.styles.js';\n\n/**\n * A tooltip that displays contextual help text on hover or focus.\n *\n * @summary Contextual help text and abbreviations with smart positioning.\n *\n * @tag hx-tooltip\n *\n * @slot - Default slot for the trigger element.\n * @slot content - Tooltip content to display.\n *\n * @csspart tooltip - The tooltip container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-tooltip-bg=var(--hx-color-neutral-900)] - Tooltip background color.\n * @cssprop [--hx-tooltip-color=var(--hx-color-neutral-50)] - Tooltip text color.\n * @cssprop [--hx-tooltip-font-size=var(--hx-font-size-xs)] - Tooltip font size.\n * @cssprop [--hx-tooltip-max-width=280px] - Maximum tooltip width.\n * @cssprop [--hx-tooltip-padding] - Tooltip padding.\n * @cssprop [--hx-tooltip-border-radius=var(--hx-border-radius-sm)] - Tooltip border radius.\n * @cssprop [--hx-tooltip-shadow] - Tooltip box shadow.\n * @cssprop [--hx-tooltip-z-index=9999] - Tooltip z-index.\n * @cssprop [--hx-tooltip-transition-duration=0.15s] - Show/hide transition duration.\n * @cssprop [--hx-tooltip-arrow-size=8px] - Size of the arrow indicator.\n *\n * @example\n * ```html\n * <hx-tooltip>\n *   <button>Hover me</button>\n *   <span slot=\"content\">Helpful context here</span>\n * </hx-tooltip>\n * ```\n *\n * @example Drupal/Twig usage\n * ```twig\n * <hx-tooltip>\n *   <button type=\"button\">{{ trigger_label }}</button>\n *   <span slot=\"content\">{{ tooltip_text }}</span>\n * </hx-tooltip>\n * ```\n */\n@customElement('hx-tooltip')\nexport class HelixTooltip extends LitElement {\n  static override styles = [tokenStyles, helixTooltipStyles];\n\n  /**\n   * Preferred placement of the tooltip relative to the trigger.\n   * Supports all Floating UI placement values including alignment variants\n   * (e.g. 'top-start', 'bottom-end') and 'auto'.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement: Placement = 'top';\n\n  /**\n   * Delay in milliseconds before the tooltip is shown.\n   * @attr show-delay\n   */\n  @property({ type: Number, attribute: 'show-delay' })\n  showDelay = 300;\n\n  /**\n   * Delay in milliseconds before the tooltip is hidden.\n   * @attr hide-delay\n   */\n  @property({ type: Number, attribute: 'hide-delay' })\n  hideDelay = 100;\n\n  /** @internal */\n  @state() private _visible = false;\n\n  /** @internal */\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n  /** @internal */\n  private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /**\n   * Unique ID for this tooltip instance.\n   * Uses crypto.randomUUID() to prevent SSR hydration ID collisions.\n   * @internal\n   */\n  private readonly _tooltipId = `hx-tooltip-${crypto.randomUUID()}`;\n\n  /**\n   * Visually-hidden description element in light DOM.\n   * Necessary because aria-describedby cannot cross Shadow DOM boundaries —\n   * ARIA ID references are scoped to the element's root node. This element\n   * lives in the document scope so the trigger's aria-describedby resolves correctly.\n   * @internal\n   */\n  private _lightDomDescription: HTMLSpanElement | null = null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown as EventListener);\n    this._clearTimers();\n    this._lightDomDescription?.remove();\n    this._lightDomDescription = null;\n  }\n\n  override firstUpdated(): void {\n    this._setupTriggerAria();\n  }\n\n  // ─── ARIA setup ───\n\n  private _setupTriggerAria(): void {\n    const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n    if (!slot) return;\n    const trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n\n    // Sync content from the content slot into a visually-hidden light DOM element.\n    // aria-describedby cannot cross Shadow DOM boundaries, so the referenced element\n    // must live in the document scope (light DOM), not inside the shadow root.\n    const contentSlot = this.shadowRoot?.querySelector(\n      'slot[name=\"content\"]',\n    ) as HTMLSlotElement | null;\n    const contentText =\n      contentSlot\n        ?.assignedElements()\n        .map((el) => el.textContent)\n        .join(' ')\n        .trim() ?? '';\n\n    if (!this._lightDomDescription) {\n      this._lightDomDescription = document.createElement('span');\n      this._lightDomDescription.id = this._tooltipId;\n      // Visually hidden but accessible to screen readers via aria-describedby\n      this._lightDomDescription.style.cssText =\n        'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n      this.appendChild(this._lightDomDescription);\n    }\n    this._lightDomDescription.textContent = contentText;\n\n    if (trigger) {\n      trigger.setAttribute('aria-describedby', this._tooltipId);\n    }\n  }\n\n  // ─── Show/Hide ───\n\n  private _scheduleShow(): void {\n    this._clearTimers();\n    this._showTimer = setTimeout(() => {\n      void this._show();\n    }, this.showDelay);\n  }\n\n  private _scheduleHide(): void {\n    this._clearTimers();\n    this._hideTimer = setTimeout(() => {\n      this._hide();\n    }, this.hideDelay);\n  }\n\n  private async _show(): Promise<void> {\n    this._visible = true;\n    await this.updateComplete;\n    await this._updatePosition();\n  }\n\n  private _hide(): void {\n    this._visible = false;\n  }\n\n  private _clearTimers(): void {\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hideTimer !== null) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = null;\n    }\n  }\n\n  // ─── Positioning ───\n\n  private async _updatePosition(): Promise<void> {\n    const reference = this.shadowRoot?.querySelector('.trigger-wrapper') as HTMLElement | null;\n    const tooltipEl = this.shadowRoot?.querySelector('[part=\"tooltip\"]') as HTMLElement | null;\n    const arrowEl = this.shadowRoot?.querySelector('[part=\"arrow\"]') as HTMLElement | null;\n\n    if (!reference || !tooltipEl || !arrowEl) return;\n\n    const { x, y, placement, middlewareData } = await computePosition(reference, tooltipEl, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware: [offset(8), flip(), shift({ padding: 8 }), arrow({ element: arrowEl })],\n    });\n\n    Object.assign(tooltipEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const arrowData = middlewareData.arrow;\n    const basePlacement = placement.split('-')[0] ?? 'top';\n    const staticSide =\n      ({ top: 'bottom', right: 'left', bottom: 'top', left: 'right' } as Record<string, string>)[\n        basePlacement\n      ] ?? 'bottom';\n\n    // Offset is derived from the arrow element's actual size so that custom\n    // --hx-tooltip-arrow-size values position the arrow correctly.\n    Object.assign(arrowEl.style, {\n      left: arrowData?.x != null ? `${arrowData.x}px` : '',\n      top: arrowData?.y != null ? `${arrowData.y}px` : '',\n      right: '',\n      bottom: '',\n      [staticSide]: `${-(arrowEl.offsetWidth / 2)}px`,\n    });\n  }\n\n  // ─── Events ───\n\n  /** @internal */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this._visible) {\n      this._clearTimers();\n      this._hide();\n    }\n  };\n\n  /**\n   * Handle mouseleave on the trigger wrapper.\n   * Does not schedule hide if keyboard focus is still on the trigger element,\n   * preventing mixed keyboard+mouse interactions from dismissing the tooltip\n   * while the user is still navigating by keyboard.\n   * @internal\n   */\n  private _handleTriggerMouseleave(): void {\n    const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n    const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n    if (\n      trigger &&\n      (trigger === document.activeElement || trigger.contains(document.activeElement))\n    ) {\n      return;\n    }\n    this._scheduleHide();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrapper\"\n        @mouseenter=${this._scheduleShow}\n        @mouseleave=${this._handleTriggerMouseleave}\n        @focusin=${this._scheduleShow}\n        @focusout=${this._scheduleHide}\n      >\n        <slot @slotchange=${this._setupTriggerAria}></slot>\n      </div>\n      <div\n        part=\"tooltip\"\n        id=${this._tooltipId}\n        role=\"tooltip\"\n        aria-hidden=${String(!this._visible)}\n        class=${this._visible ? 'visible' : ''}\n        @mouseenter=${this._clearTimers}\n        @mouseleave=${this._scheduleHide}\n      >\n        <slot name=\"content\" @slotchange=${this._setupTriggerAria}></slot>\n        <div part=\"arrow\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tooltip': HelixTooltip;\n  }\n}\n"],"names":["helixTooltipStyles","css","HelixTooltip","LitElement","e","_a","slot","trigger","contentSlot","_b","contentText","el","reference","tooltipEl","arrowEl","_c","x","y","placement","middlewareData","computePosition","offset","flip","shift","arrow","arrowData","basePlacement","staticSide","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}