@helixui/library 0.3.0 → 0.3.2

package/dist/shared/{hx-container-BXZBaOGG.js → hx-container-DLUKnTi9.js}

@@ -1,10 +1,11 @@
 import { css as h, LitElement as c, html as x } from "lit";
 import { property as s, customElement as m } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
-import { tokenStyles as v } from "@helixui/tokens/lit";
-const l = h`
+import { tokenStyles as l } from "@helixui/tokens/lit";
+const v = h`
   :host {
     display: block;
+    contain: layout style;
     width: 100%;
     background-color: var(--hx-container-bg, transparent);
     box-sizing: border-box;
@@ -84,10 +85,10 @@ const l = h`
     max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));
   }
 `;
-var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, p = (t, e, i, a) => {
-  for (var n = a > 1 ? void 0 : a ? w(e, i) : e, o = t.length - 1, d; o >= 0; o--)
-    (d = t[o]) && (n = (a ? d(e, i, n) : d(n)) || n);
-  return a && n && _(e, i, n), n;
+var _ = Object.defineProperty, u = Object.getOwnPropertyDescriptor, p = (t, a, i, e) => {
+  for (var n = e > 1 ? void 0 : e ? u(a, i) : a, o = t.length - 1, d; o >= 0; o--)
+    (d = t[o]) && (n = (e ? d(a, i, n) : d(n)) || n);
+  return e && n && _(a, i, n), n;
 };
 let r = class extends c {
   constructor() {
@@ -106,7 +107,7 @@ let r = class extends c {
     `;
   }
 };
-r.styles = [v, l];
+r.styles = [l, v];
 p([
   s({ type: String, reflect: !0 })
 ], r.prototype, "width", 2);
@@ -119,4 +120,4 @@ r = p([
 export {
   r as H
 };
-//# sourceMappingURL=hx-container-BXZBaOGG.js.map
+//# sourceMappingURL=hx-container-DLUKnTi9.js.map

package/dist/shared/hx-container-DLUKnTi9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-container-DLUKnTi9.js","sources":["../../src/components/hx-container/hx-container.styles.ts","../../src/components/hx-container/hx-container.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixContainerStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n    width: 100%;\n    background-color: var(--hx-container-bg, transparent);\n    box-sizing: border-box;\n  }\n\n  /* ─── Vertical Padding Variants ─── */\n\n  /* Defensive reset: ensures zero vertical padding even if a future base rule adds it */\n  :host([padding='none']) {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  :host([padding='sm']) {\n    padding-top: var(--hx-space-6, 1.5rem);\n    padding-bottom: var(--hx-space-6, 1.5rem);\n  }\n\n  :host([padding='md']) {\n    padding-top: var(--hx-space-12, 3rem);\n    padding-bottom: var(--hx-space-12, 3rem);\n  }\n\n  :host([padding='lg']) {\n    padding-top: var(--hx-space-16, 4rem);\n    padding-bottom: var(--hx-space-16, 4rem);\n  }\n\n  :host([padding='xl']) {\n    padding-top: var(--hx-space-24, 6rem);\n    padding-bottom: var(--hx-space-24, 6rem);\n  }\n\n  :host([padding='2xl']) {\n    padding-top: var(--hx-space-32, 8rem);\n    padding-bottom: var(--hx-space-32, 8rem);\n  }\n\n  /* ─── Inner Container ─── */\n\n  .container__inner {\n    margin-left: auto;\n    margin-right: auto;\n    padding-left: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n    padding-right: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Width Variants ─── */\n\n  .container__inner--full {\n    max-width: none;\n  }\n\n  .container__inner--content {\n    max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));\n  }\n\n  .container__inner--narrow {\n    max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));\n  }\n\n  .container__inner--sm {\n    max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));\n  }\n\n  .container__inner--md {\n    max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));\n  }\n\n  .container__inner--lg {\n    max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));\n  }\n\n  .container__inner--xl {\n    max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixContainerStyles } from './hx-container.styles.js';\n\n/**\n * A layout container that constrains content width and provides\n * consistent vertical spacing and horizontal gutters.\n *\n * Uses a two-layer model: the outer host spans full width (background,\n * vertical padding), while the inner wrapper constrains max-width,\n * centers content, and applies horizontal gutters.\n *\n * ## Accessibility\n *\n * `hx-container` is a purely visual layout primitive with no semantic meaning.\n * It carries no ARIA role and is intentionally transparent to assistive\n * technologies. Screen readers announce the container's children directly,\n * not the container itself.\n *\n * The inner wrapper always centers content horizontally (via `margin: auto`).\n * This is by design for page-layout use cases. If you need non-centered\n * alignment at a specific breakpoint, override `margin-left` and\n * `margin-right` on `::part(inner)` from your stylesheet.\n *\n * @summary Layout primitive for constraining content width with consistent spacing.\n *\n * @tag hx-container\n *\n * @slot - Default slot for container content.\n *\n * @csspart inner - The inner wrapper that constrains max-width and applies gutters.\n *\n * @cssprop [--hx-container-bg=transparent] - Background color on the outer wrapper.\n * @cssprop [--hx-container-gutter=var(--hx-space-6)] - Horizontal padding on the inner box.\n * @cssprop [--hx-container-max-width] - Override the max-width set by the width property.\n * @cssprop [--hx-container-content=72rem] - Max-width for the content width preset.\n * @cssprop [--hx-container-narrow=48rem] - Max-width for the narrow width preset.\n * @cssprop [--hx-container-sm=640px] - Max-width for the sm width preset.\n * @cssprop [--hx-container-md=768px] - Max-width for the md width preset.\n * @cssprop [--hx-container-lg=1024px] - Max-width for the lg width preset.\n * @cssprop [--hx-container-xl=1280px] - Max-width for the xl width preset.\n */\n@customElement('hx-container')\nexport class HelixContainer extends LitElement {\n  static override styles = [tokenStyles, helixContainerStyles];\n\n  /**\n   * Controls the max-width of the inner content wrapper.\n   * @attr width\n   * @example\n   * // Width presets and their default max-width values:\n   * // full    → no max-width constraint\n   * // content → 72rem (1152px)\n   * // narrow  → 48rem (768px) — override with --hx-container-narrow\n   * // sm      → 640px — override with --hx-container-sm\n   * // md      → 768px — override with --hx-container-md\n   * // lg      → 1024px — override with --hx-container-lg\n   * // xl      → 1280px — override with --hx-container-xl\n   */\n  @property({ type: String, reflect: true })\n  width: 'full' | 'content' | 'narrow' | 'sm' | 'md' | 'lg' | 'xl' = 'content';\n\n  /**\n   * Vertical padding applied to the outer wrapper.\n   * @attr padding\n   */\n  @property({ type: String, reflect: true })\n  padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'none';\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      container__inner: true,\n      [`container__inner--${this.width}`]: true,\n    };\n\n    return html`\n      <div part=\"inner\" class=${classMap(classes)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n/** @deprecated Use `HelixContainer` directly. Alias kept for backward compatibility. */\nexport type WcContainer = HelixContainer;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-container': HelixContainer;\n  }\n}\n"],"names":["helixContainerStyles","css","HelixContainer","LitElement","classes","html","classMap","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAuBC;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;;;;;;AC2C7B,IAAMC,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiBL,KAAA,QAAmE,WAOnE,KAAA,UAAsD;AAAA,EAAA;AAAA;AAAA,EAI7C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,kBAAkB;AAAA,MAClB,CAAC,qBAAqB,KAAK,KAAK,EAAE,GAAG;AAAA,IAAA;AAGvC,WAAOC;AAAA,gCACqBC,EAASF,CAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAI/C;AACF;AAxCaF,EACK,SAAS,CAACK,GAAaP,CAAoB;AAgB3DQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9BP,EAiBX,WAAA,SAAA,CAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvB9BP,EAwBX,WAAA,WAAA,CAAA;AAxBWA,IAANM,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBR,CAAA;"}

package/dist/shared/hx-copy-button-BXL1xkxb.js.map

@@ -1 +1 @@
-{"version":3,"file":"hx-copy-button-BXL1xkxb.js","sources":["../../src/components/hx-copy-button/hx-copy-button.styles.ts","../../src/components/hx-copy-button/hx-copy-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCopyButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2);\n    border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);\n    border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-copy-button-bg, transparent);\n    color: var(--hx-copy-button-color, var(--hx-color-primary-500));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast),\n      color var(--hx-transition-fast),\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n    font-family: var(--hx-font-family-sans);\n    font-weight: var(--hx-font-weight-medium);\n    white-space: nowrap;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: var(--hx-focus-ring-offset);\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);\n    min-width: var(--hx-size-8);\n    height: var(--hx-size-8);\n    font-size: var(--hx-font-size-sm);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2);\n    min-width: var(--hx-size-10);\n    height: var(--hx-size-10);\n    font-size: var(--hx-font-size-md);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3);\n    min-width: var(--hx-size-12);\n    height: var(--hx-size-12);\n    font-size: var(--hx-font-size-lg);\n  }\n\n  /* ─── Copied / Success State ─── */\n\n  .button--copied {\n    color: var(--hx-color-success-text, var(--hx-color-primary-500));\n    /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).\n       A border provides visual differentiation for users with color blindness. */\n    border-color: var(--hx-color-success-500, var(--hx-color-primary-500));\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n    flex-shrink: 0;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled);\n  }\n\n  /* ─── Screen Reader Only ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\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 } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCopyButtonStyles } from './hx-copy-button.styles.js';\n\n/** Minimum allowed value for feedbackDuration (ms). */\nconst MIN_FEEDBACK_DURATION = 300;\n\n/** Allowed size values for runtime validation. */\nconst VALID_SIZES = new Set(['sm', 'md', 'lg']);\n\n/**\n * A clipboard copy button component that writes a given value to the system\n * clipboard. Provides idle and success states with configurable feedback\n * duration, slot-based icon overrides, and an accessible live region that\n * announces copy completion to screen reader users.\n *\n * The `aria-label` reflects the current copy state: idle shows `label`,\n * copied state appends \" — Copied\" so screen reader users who re-focus the\n * button after copy receive an accurate accessible name.\n *\n * Note: `aria-pressed` is intentionally NOT used. This is not a toggle button;\n * copied is a transient feedback state, not a persistent on/off toggle.\n *\n * @summary One-click clipboard copy with accessible success feedback.\n *\n * @tag hx-copy-button\n *\n * @slot - Optional label text rendered inside the button alongside the icon.\n * @slot copy-icon - Icon shown in the idle (pre-copy) state.\n * @slot success-icon - Icon shown after a successful clipboard write.\n *\n * @fires {CustomEvent<{value: string}>} hx-copy - Dispatched after the value\n *   has been successfully written to the clipboard.\n * @fires {CustomEvent<{value: string; error: unknown}>} hx-copy-error - Dispatched\n *   when the clipboard write fails (permission denied, iframe restriction, etc.).\n *   The `error` detail contains the caught error for diagnostic use.\n *\n * @csspart button - The native button element.\n * @csspart icon - The icon container span wrapping the active icon slot.\n *\n * @cssprop [--hx-copy-button-bg=transparent] - Button background color.\n * @cssprop [--hx-copy-button-color=var(--hx-color-primary-500)] - Icon and text color.\n * @cssprop [--hx-copy-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-copy-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-copy-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-copy-button')\nexport class HelixCopyButton extends LitElement {\n  static override styles = [tokenStyles, helixCopyButtonStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * The text value to write to the clipboard on click. Required for the\n   * component to perform a copy operation.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Accessible label applied as `aria-label` and `title` on the button.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Copy to clipboard';\n\n  /**\n   * Duration in milliseconds to display the success (copied) state before\n   * reverting to the idle state. Values below 300 ms are clamped to 300 ms\n   * to ensure the success announcement remains visible long enough for\n   * assistive technology and human perception.\n   * @attr feedback-duration\n   */\n  @property({ type: Number, attribute: 'feedback-duration' })\n  feedbackDuration = 2000;\n\n  /**\n   * Visual size of the button. Maps to fixed height and padding tokens.\n   * Accepts: 'sm' | 'md' | 'lg'. Invalid values are silently coerced to 'md'.\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. When true, click events are suppressed\n   * and clipboard writes do not occur.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Private State ───\n\n  /** True while the success feedback window is active. */\n  @state() private _copied = false;\n\n  /** Non-empty string shown in the aria-live region; cleared when not active. */\n  @state() private _announcement = '';\n\n  /** Timeout handle used to revert the copied state. */\n  private _feedbackTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearFeedbackTimer();\n  }\n\n  // ─── Private Helpers ───\n\n  /**\n   * Returns the effective feedback duration, clamped to the minimum allowed\n   * value. Prevents zero/negative timeouts that would cause the success state\n   * to immediately revert with no visible or audible feedback.\n   */\n  private _effectiveDuration(): number {\n    return Math.max(this.feedbackDuration, MIN_FEEDBACK_DURATION);\n  }\n\n  /**\n   * Returns the effective size, falling back to 'md' if the runtime value is\n   * not in the set of valid sizes. Prevents `button--xl` and similar class\n   * names that have no matching CSS rule.\n   */\n  private _effectiveSize(): 'sm' | 'md' | 'lg' {\n    return VALID_SIZES.has(this.size) ? this.size : 'md';\n  }\n\n  private _clearFeedbackTimer(): void {\n    if (this._feedbackTimer !== null) {\n      clearTimeout(this._feedbackTimer);\n      this._feedbackTimer = null;\n    }\n  }\n\n  private async _copyToClipboard(): Promise<void> {\n    if (navigator.clipboard) {\n      await navigator.clipboard.writeText(this.value);\n    } else {\n      // Legacy execCommand fallback for environments without Clipboard API.\n      const textarea = document.createElement('textarea');\n      textarea.value = this.value;\n      textarea.style.position = 'fixed';\n      textarea.style.opacity = '0';\n      document.body.appendChild(textarea);\n      textarea.select();\n      const success = document.execCommand('copy');\n      document.body.removeChild(textarea);\n      if (!success) {\n        throw new Error('execCommand(\"copy\") returned false');\n      }\n    }\n  }\n\n  // ─── Event Handling ───\n\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    void this._performCopy();\n  }\n\n  private async _performCopy(): Promise<void> {\n    try {\n      await this._copyToClipboard();\n    } catch (error: unknown) {\n      // Clipboard write failed — notify consumers and announce failure.\n      this._announcement = 'Copy failed';\n\n      /**\n       * Dispatched when the clipboard write fails (permission denied, iframe\n       * restriction, browser security policy, etc.).\n       * @event hx-copy-error\n       */\n      this.dispatchEvent(\n        new CustomEvent<{ value: string; error: unknown }>('hx-copy-error', {\n          bubbles: true,\n          composed: true,\n          detail: { value: this.value, error },\n        }),\n      );\n      return;\n    }\n\n    this._clearFeedbackTimer();\n    this._copied = true;\n    this._announcement = 'Copied';\n\n    /**\n     * Dispatched after the value has been successfully written to the\n     * clipboard.\n     * @event hx-copy\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-copy', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n\n    this._feedbackTimer = setTimeout(() => {\n      this._copied = false;\n      this._announcement = '';\n      this._feedbackTimer = null;\n    }, this._effectiveDuration());\n  }\n\n  // ─── Render Helpers ───\n\n  private _buttonClasses() {\n    const size = this._effectiveSize();\n    return {\n      button: true,\n      [`button--${size}`]: true,\n      'button--copied': this._copied,\n    };\n  }\n\n  private _renderIcon() {\n    // Show success-icon slot when copied, copy-icon slot otherwise.\n    return html`\n      <span part=\"icon\" class=\"icon\">\n        ${this._copied\n          ? html`<slot name=\"success-icon\"></slot>`\n          : html`<slot name=\"copy-icon\"></slot>`}\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Reflect copied state in aria-label so re-focused button has an accurate\n    // accessible name (WCAG 1.3.1). The live region handles the initial\n    // announcement; this covers re-focus scenarios.\n    const ariaLabel = this._copied ? `${this.label} — Copied` : this.label;\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._buttonClasses())}\n        type=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=${ariaLabel}\n        title=${this.label}\n        @click=${this._handleClick}\n      >\n        ${this._renderIcon()}\n        <slot></slot>\n      </button>\n\n      <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n        ${this._announcement || nothing}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-copy-button': HelixCopyButton;\n  }\n}\n"],"names":["helixCopyButtonStyles","css","MIN_FEEDBACK_DURATION","VALID_SIZES","HelixCopyButton","LitElement","textarea","success","error","html","ariaLabel","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-copy-button-BXL1xkxb.js","sources":["../../src/components/hx-copy-button/hx-copy-button.styles.ts","../../src/components/hx-copy-button/hx-copy-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCopyButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2);\n    border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);\n    border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-copy-button-bg, transparent);\n    color: var(--hx-copy-button-color, var(--hx-color-primary-500));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast),\n      color var(--hx-transition-fast),\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n    font-family: var(--hx-font-family-sans);\n    font-weight: var(--hx-font-weight-medium);\n    white-space: nowrap;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: var(--hx-focus-ring-offset);\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);\n    min-width: var(--hx-size-8);\n    height: var(--hx-size-8);\n    font-size: var(--hx-font-size-sm);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2);\n    min-width: var(--hx-size-10);\n    height: var(--hx-size-10);\n    font-size: var(--hx-font-size-md);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3);\n    min-width: var(--hx-size-12);\n    height: var(--hx-size-12);\n    font-size: var(--hx-font-size-lg);\n  }\n\n  /* ─── Copied / Success State ─── */\n\n  .button--copied {\n    color: var(--hx-color-success-text, var(--hx-color-primary-500));\n    /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).\n       A border provides visual differentiation for users with color blindness. */\n    border-color: var(--hx-color-success-500, var(--hx-color-primary-500));\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n    flex-shrink: 0;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled);\n  }\n\n  /* ─── Screen Reader Only ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\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 } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCopyButtonStyles } from './hx-copy-button.styles.js';\n\n/** Minimum allowed value for feedbackDuration (ms). */\nconst MIN_FEEDBACK_DURATION = 300;\n\n/** Allowed size values for runtime validation. */\nconst VALID_SIZES = new Set(['sm', 'md', 'lg']);\n\n/**\n * A clipboard copy button component that writes a given value to the system\n * clipboard. Provides idle and success states with configurable feedback\n * duration, slot-based icon overrides, and an accessible live region that\n * announces copy completion to screen reader users.\n *\n * The `aria-label` reflects the current copy state: idle shows `label`,\n * copied state appends \" — Copied\" so screen reader users who re-focus the\n * button after copy receive an accurate accessible name.\n *\n * Note: `aria-pressed` is intentionally NOT used. This is not a toggle button;\n * copied is a transient feedback state, not a persistent on/off toggle.\n *\n * @summary One-click clipboard copy with accessible success feedback.\n *\n * @tag hx-copy-button\n *\n * @slot - Optional label text rendered inside the button alongside the icon.\n * @slot copy-icon - Icon shown in the idle (pre-copy) state.\n * @slot success-icon - Icon shown after a successful clipboard write.\n *\n * @fires {CustomEvent<{value: string}>} hx-copy - Dispatched after the value\n *   has been successfully written to the clipboard.\n * @fires {CustomEvent<{value: string; error: unknown}>} hx-copy-error - Dispatched\n *   when the clipboard write fails (permission denied, iframe restriction, etc.).\n *   The `error` detail contains the caught error for diagnostic use.\n *\n * @csspart button - The native button element.\n * @csspart icon - The icon container span wrapping the active icon slot.\n *\n * @cssprop [--hx-copy-button-bg=transparent] - Button background color.\n * @cssprop [--hx-copy-button-color=var(--hx-color-primary-500)] - Icon and text color.\n * @cssprop [--hx-copy-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-copy-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-copy-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-copy-button')\nexport class HelixCopyButton extends LitElement {\n  static override styles = [tokenStyles, helixCopyButtonStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * The text value to write to the clipboard on click. Required for the\n   * component to perform a copy operation.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Accessible label applied as `aria-label` and `title` on the button.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Copy to clipboard';\n\n  /**\n   * Duration in milliseconds to display the success (copied) state before\n   * reverting to the idle state. Values below 300 ms are clamped to 300 ms\n   * to ensure the success announcement remains visible long enough for\n   * assistive technology and human perception.\n   * @attr feedback-duration\n   */\n  @property({ type: Number, attribute: 'feedback-duration' })\n  feedbackDuration = 2000;\n\n  /**\n   * Visual size of the button. Maps to fixed height and padding tokens.\n   * Accepts: 'sm' | 'md' | 'lg'. Invalid values are silently coerced to 'md'.\n   *\n   * **Accessibility (WCAG 2.5.8):** The `sm` variant uses `--hx-size-8` for\n   * its minimum width and height. Ensure this token resolves to at least 24×24 px\n   * (WCAG 2.5.8 AA minimum target size). For touch-primary interfaces such as\n   * mobile clinical apps, prefer `md` or `lg` to meet the 44×44 px recommended\n   * target size (WCAG 2.5.5 AAA / Apple HIG / Android guidelines).\n   *\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. When true, click events are suppressed\n   * and clipboard writes do not occur.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Private State ───\n\n  /** True while the success feedback window is active. */\n  @state() private _copied = false;\n\n  /** Non-empty string shown in the aria-live region; cleared when not active. */\n  @state() private _announcement = '';\n\n  /** Timeout handle used to revert the copied state. */\n  private _feedbackTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearFeedbackTimer();\n  }\n\n  // ─── Private Helpers ───\n\n  /**\n   * Returns the effective feedback duration, clamped to the minimum allowed\n   * value. Prevents zero/negative timeouts that would cause the success state\n   * to immediately revert with no visible or audible feedback.\n   */\n  private _effectiveDuration(): number {\n    return Math.max(this.feedbackDuration, MIN_FEEDBACK_DURATION);\n  }\n\n  /**\n   * Returns the effective size, falling back to 'md' if the runtime value is\n   * not in the set of valid sizes. Prevents `button--xl` and similar class\n   * names that have no matching CSS rule.\n   */\n  private _effectiveSize(): 'sm' | 'md' | 'lg' {\n    return VALID_SIZES.has(this.size) ? this.size : 'md';\n  }\n\n  private _clearFeedbackTimer(): void {\n    if (this._feedbackTimer !== null) {\n      clearTimeout(this._feedbackTimer);\n      this._feedbackTimer = null;\n    }\n  }\n\n  private async _copyToClipboard(): Promise<void> {\n    if (navigator.clipboard) {\n      await navigator.clipboard.writeText(this.value);\n    } else {\n      // Legacy execCommand fallback for environments without Clipboard API.\n      const textarea = document.createElement('textarea');\n      textarea.value = this.value;\n      textarea.style.position = 'fixed';\n      textarea.style.opacity = '0';\n      document.body.appendChild(textarea);\n      textarea.select();\n      const success = document.execCommand('copy');\n      document.body.removeChild(textarea);\n      if (!success) {\n        throw new Error('execCommand(\"copy\") returned false');\n      }\n    }\n  }\n\n  // ─── Event Handling ───\n\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    void this._performCopy();\n  }\n\n  private async _performCopy(): Promise<void> {\n    try {\n      await this._copyToClipboard();\n    } catch (error: unknown) {\n      // Clipboard write failed — notify consumers and announce failure.\n      this._announcement = 'Copy failed';\n\n      /**\n       * Dispatched when the clipboard write fails (permission denied, iframe\n       * restriction, browser security policy, etc.).\n       * @event hx-copy-error\n       */\n      this.dispatchEvent(\n        new CustomEvent<{ value: string; error: unknown }>('hx-copy-error', {\n          bubbles: true,\n          composed: true,\n          detail: { value: this.value, error },\n        }),\n      );\n      return;\n    }\n\n    this._clearFeedbackTimer();\n    this._copied = true;\n    this._announcement = 'Copied';\n\n    /**\n     * Dispatched after the value has been successfully written to the\n     * clipboard.\n     * @event hx-copy\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-copy', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n\n    this._feedbackTimer = setTimeout(() => {\n      this._copied = false;\n      this._announcement = '';\n      this._feedbackTimer = null;\n    }, this._effectiveDuration());\n  }\n\n  // ─── Render Helpers ───\n\n  private _buttonClasses() {\n    const size = this._effectiveSize();\n    return {\n      button: true,\n      [`button--${size}`]: true,\n      'button--copied': this._copied,\n    };\n  }\n\n  private _renderIcon() {\n    // Show success-icon slot when copied, copy-icon slot otherwise.\n    return html`\n      <span part=\"icon\" class=\"icon\">\n        ${this._copied\n          ? html`<slot name=\"success-icon\"></slot>`\n          : html`<slot name=\"copy-icon\"></slot>`}\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Reflect copied state in aria-label so re-focused button has an accurate\n    // accessible name (WCAG 1.3.1). The live region handles the initial\n    // announcement; this covers re-focus scenarios.\n    const ariaLabel = this._copied ? `${this.label} — Copied` : this.label;\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._buttonClasses())}\n        type=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=${ariaLabel}\n        title=${this.label}\n        @click=${this._handleClick}\n      >\n        ${this._renderIcon()}\n        <slot></slot>\n      </button>\n\n      <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n        ${this._announcement || nothing}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-copy-button': HelixCopyButton;\n  }\n}\n"],"names":["helixCopyButtonStyles","css","MIN_FEEDBACK_DURATION","VALID_SIZES","HelixCopyButton","LitElement","textarea","success","error","html","ariaLabel","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-drawer-CenIAGuR.js → hx-drawer-bTF0nbrg.js}

@@ -403,7 +403,7 @@ let o = class extends w {
                 style="display:none"
               ></slot>`}
           <button
-            part="close-button"
+            part="close-btn"
             class="drawer-close-button"
             aria-label="Close drawer"
             @click=${() => {
@@ -512,4 +512,4 @@ o = i([
 export {
   o as H
 };
-//# sourceMappingURL=hx-drawer-CenIAGuR.js.map
+//# sourceMappingURL=hx-drawer-bTF0nbrg.js.map

package/dist/shared/hx-drawer-bTF0nbrg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-drawer-bTF0nbrg.js","sources":["../../src/components/hx-drawer/hx-drawer.styles.ts","../../src/components/hx-drawer/hx-drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDrawerStyles = css`\n  /* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: contents;\n  }\n\n  :host([contained]) {\n    display: block;\n    position: relative;\n    overflow: hidden;\n  }\n\n  /* ─── Overlay ─── */\n\n  .drawer-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--hx-z-index-modal, 400);\n    display: flex;\n    pointer-events: none;\n    visibility: hidden;\n  }\n\n  :host([contained]) .drawer-overlay {\n    position: absolute;\n  }\n\n  .drawer-overlay.is-open {\n    pointer-events: auto;\n    visibility: visible;\n  }\n\n  /* ─── Backdrop ─── */\n\n  .drawer-backdrop {\n    position: absolute;\n    inset: 0;\n    background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));\n    opacity: 0;\n    transition: opacity var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out);\n  }\n\n  .drawer-overlay.is-open .drawer-backdrop {\n    opacity: var(--hx-drawer-backdrop-opacity, 0.5);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .drawer-backdrop {\n      transition: none;\n    }\n  }\n\n  /* ─── Panel ─── */\n\n  .drawer-panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--hx-drawer-bg, var(--hx-color-neutral-0));\n    color: var(--hx-drawer-color, var(--hx-color-neutral-900));\n    box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));\n    overflow: hidden;\n    outline: none;\n    z-index: 1;\n    transition:\n      transform var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out),\n      opacity var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out);\n    opacity: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .drawer-panel {\n      transition: none;\n    }\n  }\n\n  /* ─── Placement: end (default — right) ─── */\n\n  :host([placement='end']) .drawer-panel,\n  :host(:not([placement])) .drawer-panel {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n    max-width: 100%;\n    transform: translateX(100%);\n  }\n\n  :host([placement='end']) .drawer-overlay.is-open .drawer-panel,\n  :host(:not([placement])) .drawer-overlay.is-open .drawer-panel {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* ─── Placement: start (left) ─── */\n\n  :host([placement='start']) .drawer-panel {\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n    max-width: 100%;\n    transform: translateX(-100%);\n  }\n\n  :host([placement='start']) .drawer-overlay.is-open .drawer-panel {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* ─── Placement: top ─── */\n\n  :host([placement='top']) .drawer-panel {\n    top: 0;\n    left: 0;\n    right: 0;\n    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n    max-height: 100%;\n    width: 100%;\n    transform: translateY(-100%);\n  }\n\n  :host([placement='top']) .drawer-overlay.is-open .drawer-panel {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* ─── Placement: bottom ─── */\n\n  :host([placement='bottom']) .drawer-panel {\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n    max-height: 100%;\n    width: 100%;\n    transform: translateY(100%);\n  }\n\n  :host([placement='bottom']) .drawer-overlay.is-open .drawer-panel {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* ─── Header ─── */\n\n  .drawer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--hx-spacing-4, 1rem);\n    padding: var(\n      --hx-drawer-header-padding,\n      var(--hx-spacing-5, 1.25rem) var(--hx-spacing-6, 1.5rem)\n    );\n    border-bottom: var(--hx-border-width-1, 1px) solid\n      var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));\n    flex-shrink: 0;\n  }\n\n  .drawer-title {\n    margin: 0;\n    flex: 1 1 auto;\n    font-family: var(--hx-font-family-sans);\n    font-size: var(--hx-font-size-lg);\n    font-weight: var(--hx-font-weight-semibold);\n    line-height: var(--hx-line-height-snug);\n    color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));\n  }\n\n  .drawer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-spacing-2, 0.5rem);\n    flex-shrink: 0;\n  }\n\n  .drawer-close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background: transparent;\n    color: var(--hx-color-neutral-500);\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: background-color var(--hx-duration-100, 100ms) ease;\n  }\n\n  .drawer-close-button:hover {\n    background-color: var(--hx-color-neutral-100);\n    color: var(--hx-color-neutral-900);\n  }\n\n  .drawer-close-button:focus-visible {\n    outline: 2px solid var(--hx-color-primary-600);\n    outline-offset: 2px;\n  }\n\n  /* ─── Body ─── */\n\n  .drawer-body {\n    flex: 1 1 auto;\n    padding: var(--hx-drawer-body-padding, var(--hx-spacing-6, 1.5rem));\n    overflow-y: auto;\n    overscroll-behavior: contain;\n  }\n\n  /* ─── Footer ─── */\n\n  .drawer-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--hx-spacing-3, 0.75rem);\n    padding: var(--hx-drawer-footer-padding, var(--hx-spacing-4, 1rem) var(--hx-spacing-6, 1.5rem));\n    border-top: var(--hx-border-width-1, 1px) solid\n      var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));\n    flex-shrink: 0;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDrawerStyles } from './hx-drawer.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxDrawerIdCounter = 0;\n\ntype DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';\ntype DrawerSizePreset = 'sm' | 'md' | 'lg' | 'full';\ntype DrawerSize = DrawerSizePreset | (string & Record<never, never>);\n\nconst DRAWER_SIZE_MAP: Record<DrawerSizePreset, string> = {\n  sm: '20rem',\n  md: '30rem',\n  lg: '40rem',\n  full: '100%',\n};\n\nconst FOCUSABLE_SELECTORS = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  'details > summary',\n].join(',');\n\n/**\n * A slide-in drawer panel that can appear from any edge of the viewport.\n * Supports focus trapping, overlay backdrop, keyboard navigation, and full\n * ARIA labelling for enterprise healthcare accessibility requirements.\n *\n * @summary Slide-in panel overlay from any viewport edge.\n *\n * @tag hx-drawer\n *\n * @slot label - The drawer title text.\n * @slot header-actions - Action buttons displayed in the header near the close button.\n * @slot - Default slot for the drawer body content.\n * @slot footer - Action buttons or footer content.\n *\n * @fires {CustomEvent<void>} hx-show - Fired when the drawer begins to open.\n * @fires {CustomEvent<void>} hx-after-show - Fired after the drawer open animation completes.\n * @fires {CustomEvent<void>} hx-hide - Fired when the drawer begins to close.\n * @fires {CustomEvent<void>} hx-after-hide - Fired after the drawer close animation completes.\n * @fires {CustomEvent<void>} hx-initial-focus - Fired when initial focus is set inside the drawer. Cancelable to override focus behavior.\n *\n * @csspart overlay - The full-screen overlay container (includes backdrop and panel).\n * @csspart panel - The drawer panel itself.\n * @csspart header - The header region containing the title and actions.\n * @csspart title - The drawer title element.\n * @csspart close-btn - The built-in close button.\n * @csspart body - The scrollable body region.\n * @csspart footer - The footer region.\n *\n * @attr [label] - Accessible label for the dialog when no visible label slot is provided.\n *\n * @cssprop [--hx-drawer-bg=var(--hx-color-neutral-0)] - Drawer panel background color.\n * @cssprop [--hx-drawer-color=var(--hx-color-neutral-900)] - Drawer panel text color.\n * @cssprop [--hx-drawer-shadow=var(--hx-shadow-xl)] - Drawer panel box shadow.\n * @cssprop [--hx-drawer-backdrop-color=var(--hx-color-neutral-900)] - Backdrop color.\n * @cssprop [--hx-drawer-backdrop-opacity=0.5] - Backdrop opacity.\n * @cssprop [--hx-drawer-header-padding] - Padding inside the header.\n * @cssprop [--hx-drawer-header-border-color=var(--hx-color-neutral-200)] - Header border color.\n * @cssprop [--hx-drawer-title-color=var(--hx-color-neutral-900)] - Title text color.\n * @cssprop [--hx-drawer-body-padding] - Padding inside the body.\n * @cssprop [--hx-drawer-footer-padding] - Padding inside the footer.\n * @cssprop [--hx-drawer-footer-border-color=var(--hx-color-neutral-200)] - Footer border color.\n */\n@customElement('hx-drawer')\nexport class HelixDrawer extends LitElement {\n  static override styles = [tokenStyles, helixDrawerStyles];\n\n  // ─── Queries ───\n\n  @query('.drawer-overlay')\n  private _overlayEl!: HTMLElement | null;\n\n  @query('.drawer-panel')\n  private _panelEl!: HTMLElement | null;\n\n  // ─── Internal state ───\n\n  @state()\n  private _isOpen = false;\n\n  @state()\n  private _hasHeaderActionsSlot = false;\n\n  @state()\n  private _hasFooterSlot = false;\n\n  @state()\n  private _hasLabelSlot = false;\n\n  private _cachedFocusableElements: HTMLElement[] = [];\n  private _triggerElement: HTMLElement | null = null;\n  private _animationTimeout: ReturnType<typeof setTimeout> | null = null;\n  private _previousBodyOverflow: string | null = null;\n  private _siblingAriaHiddenElements: Element[] = [];\n\n  private readonly _titleId = `hx-drawer-title-${++_hxDrawerIdCounter}`;\n\n  // ─── Public Properties ───\n\n  /**\n   * Controls whether the drawer is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Which edge of the viewport the drawer slides in from.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement: DrawerPlacement = 'end';\n\n  /**\n   * The size of the drawer panel. Use 'sm', 'md', 'lg', 'full', or any valid CSS length.\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  size: DrawerSize = 'md';\n\n  /**\n   * When true, the drawer is constrained to its positioned parent instead of the viewport.\n   * The host element must have `position: relative` (or the library handles it via :host).\n   * @attr contained\n   */\n  @property({ type: Boolean, reflect: true })\n  contained = false;\n\n  /**\n   * When true, the header (title, header-actions, close button) is hidden.\n   * @attr no-header\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-header' })\n  noHeader = false;\n\n  /**\n   * When true, the footer slot is hidden.\n   * @attr no-footer\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-footer' })\n  noFooter = false;\n\n  /**\n   * Accessible label for the dialog when the `label` slot is not populated.\n   * When the `label` slot is used, `aria-labelledby` takes precedence.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._removeListeners();\n    if (this._animationTimeout !== null) {\n      clearTimeout(this._animationTimeout);\n    }\n    this._restoreBodyScroll();\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._openDrawer();\n      } else {\n        this._closeDrawer();\n      }\n    }\n\n    if (changedProperties.has('size')) {\n      this._applySizeVar();\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Opens the drawer. */\n  show(): void {\n    this.open = true;\n  }\n\n  /** Closes the drawer. */\n  hide(): void {\n    this.open = false;\n  }\n\n  // ─── Private: Size CSS variable ───\n\n  private _applySizeVar(): void {\n    const resolvedSize = DRAWER_SIZE_MAP[this.size as DrawerSizePreset] ?? this.size;\n    this.style.setProperty('--_drawer-size', resolvedSize);\n  }\n\n  // ─── Private: Open / Close ───\n\n  private _lockBodyScroll(): void {\n    if (this.contained) return;\n    this._previousBodyOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n\n  private _restoreBodyScroll(): void {\n    if (this._previousBodyOverflow === null) return;\n    document.body.style.overflow = this._previousBodyOverflow;\n    this._previousBodyOverflow = null;\n  }\n\n  private _openDrawer(): void {\n    // Capture trigger for focus restoration (P2-04: use instanceof guard)\n    const active = document.activeElement;\n    this._triggerElement = active instanceof HTMLElement ? active : null;\n\n    // P1-05: clear any pending animation timeout before scheduling a new one\n    if (this._animationTimeout !== null) {\n      clearTimeout(this._animationTimeout);\n      this._animationTimeout = null;\n    }\n\n    this._applySizeVar();\n    this._lockBodyScroll();\n    this._hideBackgroundFromScreenReaders();\n\n    // Dispatch hx-show before visual update\n    this.dispatchEvent(new CustomEvent('hx-show', { bubbles: true, composed: true }));\n\n    // Transition to open state\n    void this.updateComplete\n      .then(() => {\n        this._isOpen = true;\n        this._addListeners();\n\n        // Set initial focus after next render\n        return this.updateComplete;\n      })\n      .then(() => {\n        this._cachedFocusableElements = this._getFocusableElements();\n        this._setInitialFocus();\n\n        // Dispatch hx-after-show after animation duration\n        const duration = this._getAnimationDuration();\n        this._animationTimeout = setTimeout(() => {\n          this.dispatchEvent(new CustomEvent('hx-after-show', { bubbles: true, composed: true }));\n        }, duration);\n      })\n      .catch(console.error);\n  }\n\n  private _closeDrawer(): void {\n    // P1-05: clear any pending animation timeout before scheduling a new one\n    if (this._animationTimeout !== null) {\n      clearTimeout(this._animationTimeout);\n      this._animationTimeout = null;\n    }\n\n    this._isOpen = false;\n    this._removeListeners();\n    this._cachedFocusableElements = [];\n    this._restoreBodyScroll();\n    this._restoreBackgroundForScreenReaders();\n\n    this.dispatchEvent(new CustomEvent('hx-hide', { bubbles: true, composed: true }));\n\n    // Restore focus to the trigger\n    const duration = this._getAnimationDuration();\n    this._animationTimeout = setTimeout(() => {\n      this.dispatchEvent(new CustomEvent('hx-after-hide', { bubbles: true, composed: true }));\n      if (this._triggerElement && typeof this._triggerElement.focus === 'function') {\n        this._triggerElement.focus();\n      }\n      this._triggerElement = null;\n    }, duration);\n  }\n\n  private _getAnimationDuration(): number {\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return 0;\n    return 300;\n  }\n\n  // ─── Background aria-hidden management (P1-03) ───\n\n  private _hideBackgroundFromScreenReaders(): void {\n    if (this.contained) return;\n    this._siblingAriaHiddenElements = [];\n    Array.from(document.body.children).forEach((child) => {\n      if (child === this || child.contains(this)) return;\n      if (!child.hasAttribute('aria-hidden')) {\n        child.setAttribute('aria-hidden', 'true');\n        this._siblingAriaHiddenElements.push(child);\n      }\n    });\n  }\n\n  private _restoreBackgroundForScreenReaders(): void {\n    this._siblingAriaHiddenElements.forEach((el) => {\n      el.removeAttribute('aria-hidden');\n    });\n    this._siblingAriaHiddenElements = [];\n  }\n\n  // ─── Event Listeners (P1-01: use only document listener, not overlay) ───\n\n  private _addListeners(): void {\n    document.addEventListener('keydown', this._handleKeyDown);\n  }\n\n  private _removeListeners(): void {\n    document.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  // ─── Keyboard Handler ───\n\n  private _handleKeyDown = (e: KeyboardEvent): void => {\n    if (!this._isOpen) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.open = false;\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      this._trapFocus(e);\n    }\n  };\n\n  // ─── Focus ───\n\n  private _setInitialFocus(): void {\n    const event = new CustomEvent('hx-initial-focus', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n    this.dispatchEvent(event);\n\n    if (!event.defaultPrevented) {\n      const focusable = this._cachedFocusableElements;\n      if (focusable.length > 0 && focusable[0]) {\n        focusable[0].focus();\n      } else {\n        this._panelEl?.focus();\n      }\n    }\n  }\n\n  private _getFocusableElements(): HTMLElement[] {\n    const shadowFocusable = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS) ?? [],\n    );\n\n    const slots = this.shadowRoot?.querySelectorAll<HTMLSlotElement>('slot') ?? [];\n    const lightFocusable: HTMLElement[] = [];\n\n    slots.forEach((slot) => {\n      slot.assignedElements({ flatten: true }).forEach((el) => {\n        if (el instanceof HTMLElement) {\n          if (el.matches(FOCUSABLE_SELECTORS)) {\n            lightFocusable.push(el);\n          }\n          el.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS).forEach((child) => {\n            lightFocusable.push(child);\n          });\n        }\n      });\n    });\n\n    return [...shadowFocusable, ...lightFocusable].filter(\n      (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',\n    );\n  }\n\n  private _trapFocus(e: KeyboardEvent): void {\n    const focusable =\n      this._cachedFocusableElements.length > 0\n        ? this._cachedFocusableElements\n        : this._getFocusableElements();\n\n    if (focusable.length === 0) {\n      e.preventDefault();\n      return;\n    }\n\n    const [first, ...rest] = focusable;\n    const last = rest.length > 0 ? rest[rest.length - 1] : first;\n\n    if (!first || !last) return;\n\n    // P1-02: Use document.activeElement for reliable detection of slotted (light DOM) elements.\n    // shadowRoot.activeElement returns the <slot> host for slotted content, not the actual element.\n    const active = document.activeElement as HTMLElement | null;\n\n    if (e.shiftKey) {\n      if (active === first) {\n        e.preventDefault();\n        last.focus();\n      }\n    } else {\n      if (active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n  }\n\n  // ─── Overlay Click ───\n\n  private _handleOverlayClick = (e: MouseEvent): void => {\n    // Only close when clicking the overlay itself (backdrop), not the panel\n    const target = e.target as HTMLElement;\n    if (target === this._overlayEl || target.classList.contains('drawer-backdrop')) {\n      this.open = false;\n    }\n  };\n\n  // ─── Slot change handlers ───\n\n  private _handleHeaderActionsSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeaderActionsSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleFooterSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooterSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Render Helpers ───\n\n  private _renderHeader() {\n    if (this.noHeader) return nothing;\n\n    return html`\n      <div part=\"header\" class=\"drawer-header\">\n        <p part=\"title\" id=${this._titleId} class=\"drawer-title\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}></slot>\n        </p>\n        <div class=\"drawer-header-actions\">\n          ${this._hasHeaderActionsSlot\n            ? html`<slot\n                name=\"header-actions\"\n                @slotchange=${this._handleHeaderActionsSlotChange}\n              ></slot>`\n            : html`<slot\n                name=\"header-actions\"\n                @slotchange=${this._handleHeaderActionsSlotChange}\n                style=\"display:none\"\n              ></slot>`}\n          <button\n            part=\"close-btn\"\n            class=\"drawer-close-button\"\n            aria-label=\"Close drawer\"\n            @click=${() => {\n              this.open = false;\n            }}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderFooter() {\n    if (this.noFooter) return nothing;\n\n    return html`\n      <div part=\"footer\" class=\"drawer-footer\" ?hidden=${!this._hasFooterSlot}>\n        <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const overlayClasses = {\n      'drawer-overlay': true,\n      'is-open': this._isOpen,\n    };\n\n    // P1-06: ensure the dialog always has an accessible name.\n    // Priority: aria-labelledby (slot) > aria-label (prop) > aria-label (fallback \"Drawer\")\n    const ariaLabelledby = this._hasLabelSlot ? this._titleId : undefined;\n    const ariaLabel = !this._hasLabelSlot ? this.label || 'Drawer' : undefined;\n\n    return html`\n      <div\n        part=\"overlay\"\n        class=${classMap(overlayClasses)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=${ifDefined(ariaLabelledby)}\n        aria-label=${ifDefined(ariaLabel)}\n        tabindex=\"-1\"\n        @click=${this._handleOverlayClick}\n      >\n        <div class=\"drawer-backdrop\" aria-hidden=\"true\"></div>\n        <div part=\"panel\" class=\"drawer-panel\" tabindex=\"-1\" role=\"document\">\n          ${this._renderHeader()}\n          <div part=\"body\" class=\"drawer-body\">\n            <slot></slot>\n          </div>\n          ${this._renderFooter()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-drawer': HelixDrawer;\n  }\n}\n"],"names":["helixDrawerStyles","css","_hxDrawerIdCounter","DRAWER_SIZE_MAP","FOCUSABLE_SELECTORS","HelixDrawer","LitElement","target","changedProperties","resolvedSize","active","duration","child","el","event","focusable","_a","shadowFocusable","slots","_b","lightFocusable","slot","first","rest","last","nothing","html","overlayClasses","ariaLabelledby","ariaLabel","classMap","ifDefined","tokenStyles","__decorateClass","query","state","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAoBC;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;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;;;;;;ACMjC,IAAIC,IAAqB;AAMzB,MAAMC,IA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"}

package/dist/shared/hx-icon-button-C_fsUJW4.js

@@ -0,0 +1,257 @@
+import { css as p, LitElement as v, html as c, nothing as u } from "lit";
+import { property as e, customElement as x } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { tokenStyles as f } from "@helixui/tokens/lit";
+const m = p`
+  :host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled);
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);
+    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));
+    background-color: var(--hx-icon-button-bg);
+    color: var(--hx-icon-button-color, var(--hx-color-primary-500));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast),
+      color var(--hx-transition-fast),
+      border-color var(--hx-transition-fast),
+      box-shadow var(--hx-transition-fast);
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    flex-shrink: 0;
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width) solid
+      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: var(--hx-focus-ring-offset);
+  }
+
+  .button:active {
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Size Variants ─── */
+
+  .button--sm {
+    padding: var(--hx-space-1);
+    width: var(--hx-icon-button-size, var(--hx-size-8));
+    height: var(--hx-icon-button-size, var(--hx-size-8));
+    font-size: var(--hx-font-size-sm);
+  }
+
+  .button--md {
+    padding: var(--hx-space-2);
+    width: var(--hx-icon-button-size, var(--hx-size-10));
+    height: var(--hx-icon-button-size, var(--hx-size-10));
+    font-size: var(--hx-font-size-md);
+  }
+
+  .button--lg {
+    padding: var(--hx-space-3);
+    width: var(--hx-icon-button-size, var(--hx-size-12));
+    height: var(--hx-icon-button-size, var(--hx-size-12));
+    font-size: var(--hx-font-size-lg);
+  }
+
+  /* ─── Style Variants ─── */
+
+  .button--primary {
+    --hx-icon-button-bg: var(--hx-color-primary-500);
+    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-border-color: transparent;
+  }
+
+  .button--primary:hover {
+    --hx-icon-button-bg: var(--hx-color-primary-600);
+  }
+
+  .button--secondary {
+    --hx-icon-button-bg: transparent;
+    --hx-icon-button-color: var(--hx-color-primary-500);
+    --hx-icon-button-border-color: var(--hx-color-primary-500);
+  }
+
+  .button--secondary:hover {
+    --hx-icon-button-bg: var(--hx-color-primary-50);
+  }
+
+  .button--tertiary {
+    --hx-icon-button-bg: transparent;
+    --hx-icon-button-color: var(--hx-color-neutral-700);
+    --hx-icon-button-border-color: var(--hx-color-neutral-300);
+  }
+
+  .button--tertiary:hover {
+    --hx-icon-button-bg: var(--hx-color-neutral-100);
+  }
+
+  .button--danger {
+    --hx-icon-button-bg: var(--hx-color-error-500);
+    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-border-color: transparent;
+  }
+
+  .button--danger:hover {
+    --hx-icon-button-bg: var(--hx-color-error-600);
+  }
+
+  .button--ghost {
+    --hx-icon-button-bg: transparent;
+    --hx-icon-button-color: var(--hx-color-primary-500);
+    --hx-icon-button-border-color: transparent;
+  }
+
+  .button--ghost:hover {
+    --hx-icon-button-bg: var(--hx-color-neutral-100);
+  }
+
+  /* ─── Icon Container ─── */
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  /* ─── Disabled ─── */
+
+  .button[disabled] {
+    cursor: not-allowed;
+    /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent
+       multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      transition: none;
+    }
+  }
+`;
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, n, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? g(n, s) : n, h = t.length - 1, l; h >= 0; h--)
+    (l = t[h]) && (i = (a ? l(n, s, i) : l(i)) || i);
+  return a && i && y(n, s, i), i;
+};
+let o = class extends v {
+  constructor() {
+    super(), this.label = "", this.variant = "ghost", this.size = "md", this.type = "button", this.disabled = !1, this.href = void 0, this.name = void 0, this.value = void 0, this._internals = this.attachInternals();
+  }
+  /** Returns the associated form element, if any. */
+  get form() {
+    return this._internals.form;
+  }
+  // ─── Event Handling ───
+  _handleClick(t) {
+    if (this.disabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("hx-click", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: t }
+      })
+    ), this.href || (this.type === "submit" && this._internals.form ? this._internals.form.requestSubmit() : this.type === "reset" && this._internals.form && this._internals.form.reset());
+  }
+  // ─── Render Helpers ───
+  _normalizedLabel() {
+    return this.label.trim();
+  }
+  _classes() {
+    return {
+      button: !0,
+      [`button--${this.variant}`]: !0,
+      [`button--${this.size}`]: !0
+    };
+  }
+  _iconSlot() {
+    return c`<span part="icon" class="icon"><slot></slot></span>`;
+  }
+  // ─── Render ───
+  render() {
+    const t = this._normalizedLabel();
+    return t ? this.href !== void 0 ? c`
+        <a
+          part="button"
+          class=${d(this._classes())}
+          href=${b(this.disabled ? void 0 : this.href)}
+          aria-label=${t}
+          title=${t}
+          aria-disabled=${this.disabled ? "true" : u}
+          tabindex=${this.disabled ? "-1" : u}
+          @click=${this._handleClick}
+        >
+          ${this._iconSlot()}
+        </a>
+      ` : c`
+      <button
+        part="button"
+        class=${d(this._classes())}
+        ?disabled=${this.disabled}
+        type=${this.type}
+        aria-label=${t}
+        title=${t}
+        name=${b(this.name)}
+        value=${b(this.value)}
+        @click=${this._handleClick}
+      >
+        ${this._iconSlot()}
+      </button>
+    ` : (console.warn(
+      "[hx-icon-button] The `label` property is required for accessibility. Render suppressed."
+    ), u);
+  }
+};
+o.styles = [f, m];
+o.formAssociated = !0;
+r([
+  e({ type: String })
+], o.prototype, "label", 2);
+r([
+  e({ type: String, reflect: !0 })
+], o.prototype, "variant", 2);
+r([
+  e({ type: String, reflect: !0, attribute: "hx-size" })
+], o.prototype, "size", 2);
+r([
+  e({ type: String })
+], o.prototype, "type", 2);
+r([
+  e({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+r([
+  e({ type: String })
+], o.prototype, "href", 2);
+r([
+  e({ type: String })
+], o.prototype, "name", 2);
+r([
+  e({ type: String })
+], o.prototype, "value", 2);
+o = r([
+  x("hx-icon-button")
+], o);
+export {
+  o as H
+};
+//# sourceMappingURL=hx-icon-button-C_fsUJW4.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-icon-button-C_fsUJW4.js","sources":["../../src/components/hx-icon-button/hx-icon-button.styles.ts","../../src/components/hx-icon-button/hx-icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled);\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);\n    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-icon-button-bg);\n    color: var(--hx-icon-button-color, var(--hx-color-primary-500));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast),\n      color var(--hx-transition-fast),\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: var(--hx-focus-ring-offset);\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);\n    width: var(--hx-icon-button-size, var(--hx-size-8));\n    height: var(--hx-icon-button-size, var(--hx-size-8));\n    font-size: var(--hx-font-size-sm);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2);\n    width: var(--hx-icon-button-size, var(--hx-size-10));\n    height: var(--hx-icon-button-size, var(--hx-size-10));\n    font-size: var(--hx-font-size-md);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3);\n    width: var(--hx-icon-button-size, var(--hx-size-12));\n    height: var(--hx-icon-button-size, var(--hx-size-12));\n    font-size: var(--hx-font-size-lg);\n  }\n\n  /* ─── Style Variants ─── */\n\n  .button--primary {\n    --hx-icon-button-bg: var(--hx-color-primary-500);\n    --hx-icon-button-color: var(--hx-color-neutral-0);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--primary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-600);\n  }\n\n  .button--secondary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500);\n    --hx-icon-button-border-color: var(--hx-color-primary-500);\n  }\n\n  .button--secondary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-50);\n  }\n\n  .button--tertiary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-neutral-700);\n    --hx-icon-button-border-color: var(--hx-color-neutral-300);\n  }\n\n  .button--tertiary:hover {\n    --hx-icon-button-bg: var(--hx-color-neutral-100);\n  }\n\n  .button--danger {\n    --hx-icon-button-bg: var(--hx-color-error-500);\n    --hx-icon-button-color: var(--hx-color-neutral-0);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--danger:hover {\n    --hx-icon-button-bg: var(--hx-color-error-600);\n  }\n\n  .button--ghost {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-icon-button-bg: var(--hx-color-neutral-100);\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent\n       multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.js';\n\n/**\n * An icon-only button component for compact, accessible actions.\n * Renders a square button or anchor element containing a single icon.\n * The `label` property is required and provides the accessible name\n * via `aria-label` and a native tooltip via the `title` attribute.\n *\n * @summary Icon-only action button with full accessibility support.\n *\n * @tag hx-icon-button\n *\n * @slot - Icon element to display (hx-icon, svg, or img).\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when the button is clicked (not disabled).\n *\n * @csspart button - The native button or anchor element.\n * @csspart icon - The icon container span wrapping the default slot.\n *\n * @cssprop [--hx-icon-button-bg=transparent] - Button background color.\n * @cssprop [--hx-icon-button-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-icon-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-icon-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-icon-button-size] - Explicit width and height override for the button.\n * @cssprop [--hx-icon-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-icon-button')\nexport class HelixIconButton extends LitElement {\n  static override styles = [tokenStyles, helixIconButtonStyles];\n\n  /**\n   * Accessible name for the button. Required. Rendered as `aria-label` and\n   * `title` on the underlying element. The component renders nothing when absent,\n   * and a console warning is emitted to alert developers during authoring.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' = 'ghost';\n\n  /**\n   * Size of the button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * The type attribute for the underlying button element.\n   * Has no effect when `href` is set.\n   * @attr type\n   */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Whether the button is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * When set, renders an `<a>` element instead of a `<button>`.\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * Name submitted with form data. Only applicable when rendering as a button.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Value submitted with form data. Only applicable when rendering as a button.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  // ─── Form Association via ElementInternals ───\n\n  static formAssociated = true;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\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    /**\n     * Dispatched when the button is clicked.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n\n    // Handle form submission/reset if form-associated and not in href/link mode\n    if (!this.href) {\n      if (this.type === 'submit' && this._internals.form) {\n        this._internals.form.requestSubmit();\n      } else if (this.type === 'reset' && this._internals.form) {\n        this._internals.form.reset();\n      }\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  private _normalizedLabel(): string {\n    return this.label.trim();\n  }\n\n  private _classes() {\n    return {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n    };\n  }\n\n  private _iconSlot() {\n    return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const normalizedLabel = this._normalizedLabel();\n    if (!normalizedLabel) {\n      console.warn(\n        '[hx-icon-button] The `label` property is required for accessibility. Render suppressed.',\n      );\n      return nothing;\n    }\n\n    if (this.href !== undefined) {\n      // P1-03 fix: disabled anchor must set tabindex=\"-1\" explicitly — an <a>\n      // without href is non-focusable by default in most browsers, but this is\n      // browser-dependent. Explicit tabindex=\"-1\" guarantees keyboard exclusion\n      // across all conforming browsers.\n      // P1-07 note: aria-disabled IS required on the anchor branch because\n      // <a> elements have no native disabled attribute; aria-disabled is the\n      // only AT signal available.\n      return html`\n        <a\n          part=\"button\"\n          class=${classMap(this._classes())}\n          href=${ifDefined(this.disabled ? undefined : this.href)}\n          aria-label=${normalizedLabel}\n          title=${normalizedLabel}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : nothing}\n          @click=${this._handleClick}\n        >\n          ${this._iconSlot()}\n        </a>\n      `;\n    }\n\n    // P1-07 fix: aria-disabled is redundant on a natively disabled <button>.\n    // The native disabled attribute already exposes aria-disabled=\"true\"\n    // implicitly in the accessibility tree. Duplicate explicit aria-disabled\n    // creates ambiguity about design intent. Keep only native ?disabled.\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._classes())}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        aria-label=${normalizedLabel}\n        title=${normalizedLabel}\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        @click=${this._handleClick}\n      >\n        ${this._iconSlot()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-icon-button': HelixIconButton;\n  }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","LitElement","e","html","normalizedLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-image-CzkOEeO4.js → hx-image-xyb_tHCR.js}

@@ -146,7 +146,7 @@ e([
   r({ type: String, reflect: !0 })
 ], t.prototype, "ratio", 2);
 e([
-  r({ reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "rounded", 2);
 e([
   r({ type: String, attribute: "fallback-src", reflect: !0 })
@@ -172,4 +172,4 @@ t = e([
 export {
   t as H
 };
-//# sourceMappingURL=hx-image-CzkOEeO4.js.map
+//# sourceMappingURL=hx-image-xyb_tHCR.js.map

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

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