@helixui/library 0.3.4 → 1.0.0

package/dist/shared/{hx-button-CtiJsmOg.js → hx-button-Cbhqpm5i.js}

@@ -1,9 +1,9 @@
-import { css as d, LitElement as x, html as l, nothing as n } from "lit";
-import { property as e, customElement as f } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-import { tokenStyles as v } from "@helixui/tokens/lit";
-const m = d`
+import { css as p, LitElement as c, html as h, nothing as n } 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 v } from "lit/directives/if-defined.js";
+import { tokenStyles as f } from "@helixui/tokens/lit";
+const g = p`
   :host {
     display: inline-block;
   }
@@ -13,6 +13,16 @@ const m = d`
     opacity: var(--hx-opacity-disabled, 0.5);
   }
 
+  :host([full]) {
+    display: block;
+    width: 100%;
+  }
+
+  :host([full]) .button {
+    width: 100%;
+    justify-content: center;
+  }
+
   /* ─── Base Button ─── */
 
   .button {
@@ -88,7 +98,7 @@ const m = d`
   }
 
   .button--secondary:hover {
-    --hx-button-bg: var(--hx-color-primary-50);
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));
   }
 
   .button--tertiary {
@@ -98,7 +108,7 @@ const m = d`
   }
 
   .button--tertiary:hover {
-    --hx-button-bg: var(--hx-color-neutral-200);
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));
   }
 
   .button--danger {
@@ -108,7 +118,7 @@ const m = d`
   }
 
   .button--danger:hover {
-    --hx-button-bg: var(--hx-color-error-600);
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600));
   }
 
   .button--ghost {
@@ -118,7 +128,7 @@ const m = d`
   }
 
   .button--ghost:hover {
-    --hx-button-bg: var(--hx-color-neutral-100);
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));
   }
 
   .button--outline {
@@ -128,7 +138,11 @@ const m = d`
   }
 
   .button--outline:hover {
-    --hx-button-bg: var(--hx-color-neutral-50);
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));
+  }
+
+  .button--primary:hover {
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-500));
   }
 
   /* ─── Disabled ─── */
@@ -166,6 +180,69 @@ const m = d`
     }
   }
 
+  /* ─── Inverted Mode ─── */
+
+  /* Override text color and filter-based hover/active for all variants */
+  :host([inverted]) .button {
+    color: var(--hx-button-inverted-color, #ffffff);
+    filter: none;
+  }
+
+  :host([inverted]) .button:hover {
+    filter: none;
+  }
+
+  :host([inverted]) .button:active {
+    filter: none;
+  }
+
+  :host([inverted]) .button:focus-visible {
+    outline-color: var(--hx-button-inverted-focus-ring-color, rgba(255, 255, 255, 0.5));
+  }
+
+  /* Primary inverted — slight transparent white overlay on hover */
+  :host([inverted]) .button--primary:hover {
+    --hx-button-bg: var(--hx-color-primary-400, #3b82f6);
+  }
+
+  /* Secondary inverted — white border and text */
+  :host([inverted]) .button--secondary {
+    --hx-button-border-color: rgba(255, 255, 255, 0.7);
+  }
+
+  :host([inverted]) .button--secondary:hover {
+    --hx-button-bg: rgba(255, 255, 255, 0.15);
+  }
+
+  /* Tertiary inverted */
+  :host([inverted]) .button--tertiary {
+    --hx-button-bg: rgba(255, 255, 255, 0.15);
+    --hx-button-border-color: transparent;
+  }
+
+  :host([inverted]) .button--tertiary:hover {
+    --hx-button-bg: rgba(255, 255, 255, 0.25);
+  }
+
+  /* Ghost inverted — transparent base, white hover bg */
+  :host([inverted]) .button--ghost {
+    --hx-button-bg: transparent;
+    --hx-button-border-color: transparent;
+  }
+
+  :host([inverted]) .button--ghost:hover {
+    --hx-button-bg: var(--hx-button-inverted-ghost-hover-bg, rgba(255, 255, 255, 0.15));
+  }
+
+  /* Outline inverted — white border */
+  :host([inverted]) .button--outline {
+    --hx-button-border-color: rgba(255, 255, 255, 0.7);
+  }
+
+  :host([inverted]) .button--outline:hover {
+    --hx-button-bg: rgba(255, 255, 255, 0.15);
+  }
+
   /* ─── Prefix / Suffix / Label ─── */
 
   .button__prefix,
@@ -179,14 +256,14 @@ const m = d`
     flex: 1 1 auto;
   }
 `;
-var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (o, i, h, s) => {
-  for (var a = s > 1 ? void 0 : s ? y(i, h) : i, u = o.length - 1, b; u >= 0; u--)
-    (b = o[u]) && (a = (s ? b(i, h, a) : b(a)) || a);
-  return s && a && g(i, h, a), a;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (o, i, l, s) => {
+  for (var a = s > 1 ? void 0 : s ? y(i, l) : i, b = o.length - 1, u; b >= 0; b--)
+    (u = o[b]) && (a = (s ? u(i, l, a) : u(a)) || a);
+  return s && a && m(i, l, a), a;
 };
-let t = class extends x {
+let t = class extends c {
   constructor() {
-    super(), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1, this.type = "button", this.href = void 0, this.target = void 0, this.name = void 0, this.value = void 0, this.ariaLabel = null, this._internals = this.attachInternals();
+    super(), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1, this.type = "button", this.href = void 0, this.target = void 0, this.name = void 0, this.value = void 0, this.full = !1, this.inverted = !1, this.ariaLabel = null, this._internals = this.attachInternals();
   }
   // ─── Form API ───
   /** Returns the associated form element, if any. */
@@ -211,7 +288,7 @@ let t = class extends x {
   // ─── Render Helpers ───
   /** @private */
   _renderSpinner() {
-    return l`
+    return h`
       <svg
         class="button__spinner"
         part="spinner"
@@ -240,7 +317,7 @@ let t = class extends x {
   }
   /** @private */
   _renderInner() {
-    return l`
+    return h`
       ${this.loading ? this._renderSpinner() : n}
       <span part="prefix" class="button__prefix">
         <slot name="prefix"></slot>
@@ -261,12 +338,12 @@ let t = class extends x {
       [`button--${this.size}`]: !0,
       "button--loading": this.loading
     };
-    return this.href !== void 0 ? l`
+    return this.href !== void 0 ? h`
         <a
           part="button"
-          class=${p(o)}
-          href=${this.disabled || this.loading ? n : c(this.href)}
-          target=${c(this.target)}
+          class=${d(o)}
+          href=${this.disabled || this.loading ? n : v(this.href)}
+          target=${v(this.target)}
           rel=${this.target === "_blank" ? "noopener noreferrer" : n}
           aria-label=${this.ariaLabel ?? n}
           aria-disabled=${this.disabled ? "true" : n}
@@ -275,10 +352,10 @@ let t = class extends x {
         >
           ${this._renderInner()}
         </a>
-      ` : l`
+      ` : h`
       <button
         part="button"
-        class=${p(o)}
+        class=${d(o)}
         ?disabled=${this.disabled}
         type=${this.type}
         aria-label=${this.ariaLabel ?? n}
@@ -290,7 +367,7 @@ let t = class extends x {
     `;
   }
 };
-t.styles = [v, m];
+t.styles = [f, g];
 t.formAssociated = !0;
 r([
   e({ type: String, reflect: !0 })
@@ -319,13 +396,19 @@ r([
 r([
   e({ type: String })
 ], t.prototype, "value", 2);
+r([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "full", 2);
+r([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "inverted", 2);
 r([
   e({ type: String, reflect: !0, attribute: "aria-label" })
 ], t.prototype, "ariaLabel", 2);
 t = r([
-  f("hx-button")
+  x("hx-button")
 ], t);
 export {
   t as H
 };
-//# sourceMappingURL=hx-button-CtiJsmOg.js.map
+//# sourceMappingURL=hx-button-Cbhqpm5i.js.map

package/dist/shared/hx-button-Cbhqpm5i.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-button-Cbhqpm5i.js","sources":["../../src/components/hx-button/hx-button.styles.ts","../../src/components/hx-button/hx-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonStyles = 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  :host([full]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([full]) .button {\n    width: 100%;\n    justify-content: center;\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-button-border-color, transparent);\n    border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-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-button-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\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-button-bg: var(--hx-color-primary-500);\n    --hx-button-color: var(--hx-color-neutral-0);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--secondary {\n    --hx-button-bg: transparent;\n    --hx-button-color: var(--hx-color-primary-500);\n    --hx-button-border-color: var(--hx-color-primary-500);\n  }\n\n  .button--secondary:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));\n  }\n\n  .button--tertiary {\n    --hx-button-bg: var(--hx-color-neutral-100);\n    --hx-button-color: var(--hx-color-neutral-900);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--tertiary:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));\n  }\n\n  .button--danger {\n    --hx-button-bg: var(--hx-color-error-500);\n    --hx-button-color: var(--hx-color-neutral-0);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--danger:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600));\n  }\n\n  .button--ghost {\n    --hx-button-bg: transparent;\n    --hx-button-color: var(--hx-color-primary-500);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));\n  }\n\n  .button--outline {\n    --hx-button-bg: transparent;\n    --hx-button-color: var(--hx-color-neutral-900);\n    --hx-button-border-color: var(--hx-color-neutral-300);\n  }\n\n  .button--outline:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));\n  }\n\n  .button--primary:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-500));\n  }\n\n  /* ─── Disabled ─── */\n\n  /* Note: opacity is applied on :host([disabled]) above — do NOT add opacity here.\n     Stacking opacity on both :host and .button[disabled] would multiply to 0.25. */\n  .button[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Loading State ─── */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button__spinner {\n    width: 1em;\n    height: 1em;\n    flex-shrink: 0;\n    animation: hx-spin var(--hx-duration-spinner, 750ms) linear infinite;\n  }\n\n  @keyframes hx-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .button__spinner {\n      animation: none;\n      opacity: var(--hx-opacity-muted, 0.6);\n    }\n  }\n\n  /* ─── Inverted Mode ─── */\n\n  /* Override text color and filter-based hover/active for all variants */\n  :host([inverted]) .button {\n    color: var(--hx-button-inverted-color, #ffffff);\n    filter: none;\n  }\n\n  :host([inverted]) .button:hover {\n    filter: none;\n  }\n\n  :host([inverted]) .button:active {\n    filter: none;\n  }\n\n  :host([inverted]) .button:focus-visible {\n    outline-color: var(--hx-button-inverted-focus-ring-color, rgba(255, 255, 255, 0.5));\n  }\n\n  /* Primary inverted — slight transparent white overlay on hover */\n  :host([inverted]) .button--primary:hover {\n    --hx-button-bg: var(--hx-color-primary-400, #3b82f6);\n  }\n\n  /* Secondary inverted — white border and text */\n  :host([inverted]) .button--secondary {\n    --hx-button-border-color: rgba(255, 255, 255, 0.7);\n  }\n\n  :host([inverted]) .button--secondary:hover {\n    --hx-button-bg: rgba(255, 255, 255, 0.15);\n  }\n\n  /* Tertiary inverted */\n  :host([inverted]) .button--tertiary {\n    --hx-button-bg: rgba(255, 255, 255, 0.15);\n    --hx-button-border-color: transparent;\n  }\n\n  :host([inverted]) .button--tertiary:hover {\n    --hx-button-bg: rgba(255, 255, 255, 0.25);\n  }\n\n  /* Ghost inverted — transparent base, white hover bg */\n  :host([inverted]) .button--ghost {\n    --hx-button-bg: transparent;\n    --hx-button-border-color: transparent;\n  }\n\n  :host([inverted]) .button--ghost:hover {\n    --hx-button-bg: var(--hx-button-inverted-ghost-hover-bg, rgba(255, 255, 255, 0.15));\n  }\n\n  /* Outline inverted — white border */\n  :host([inverted]) .button--outline {\n    --hx-button-border-color: rgba(255, 255, 255, 0.7);\n  }\n\n  :host([inverted]) .button--outline:hover {\n    --hx-button-bg: rgba(255, 255, 255, 0.15);\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","import { LitElement, html, nothing, type TemplateResult } 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 { helixButtonStyles } from './hx-button.styles.js';\n\n/**\n * A production-grade button component for user interaction. Supports multiple\n * visual variants, sizes, loading state, prefix/suffix slots, anchor rendering,\n * and full ElementInternals form association.\n *\n * @summary Primary interactive element for triggering actions and form submission.\n *\n * @tag hx-button\n *\n * @slot - Default slot for 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<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n *   the button is clicked and is neither disabled nor loading.\n *\n * @csspart button - The native button or anchor 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 * @csspart spinner - The loading spinner SVG element.\n *\n * @cssprop [--hx-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-button-hover-bg] - Hover background color override. When set, overrides the variant default hover background from outside the shadow DOM.\n * @cssprop [--hx-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @cssprop [--hx-button-inverted-color=#ffffff] - Text color when inverted.\n * @cssprop [--hx-button-inverted-ghost-hover-bg=rgba(255,255,255,0.15)] - Ghost hover bg when inverted.\n * @cssprop [--hx-button-inverted-focus-ring-color=rgba(255,255,255,0.5)] - Focus ring color when inverted.\n */\n@customElement('hx-button')\nexport class HelixButton extends LitElement {\n  static override styles = [tokenStyles, helixButtonStyles];\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   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\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   * Whether the button is in a loading state. Shows spinner, prevents interaction,\n   * and sets aria-busy. Does not set the disabled attribute.\n   * @attr loading\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /**\n   * The type attribute for the underlying button element. Ignored when href is set.\n   * @attr type\n   */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * When set, renders an anchor element instead of a button.\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * Anchor target attribute. Only used when href is set.\n   * @attr target\n   */\n  @property({ type: String })\n  target: string | undefined = undefined;\n\n  /**\n   * Form field name submitted via ElementInternals.setFormValue on submit.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Form field value submitted via ElementInternals.setFormValue on submit.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  /**\n   * When true, the button stretches to fill its container width.\n   * Sets the host to `display: block` and the inner element to `width: 100%`.\n   * @attr full\n   */\n  @property({ type: Boolean, reflect: true })\n  full = false;\n\n  /**\n   * When true, flips button colors for placement on dark or gradient backgrounds.\n   * Forces text to white and adjusts hover/focus ring colors across all variants.\n   * @attr inverted\n   */\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /**\n   * Accessible label forwarded to the inner button/anchor. Required for icon-only usage.\n   * @attr aria-label\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\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  // ─── Event Handling ───\n\n  /** @private */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled || this.loading) {\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 anchor mode\n    if (this.href === undefined && this.type === 'submit' && this._internals.form) {\n      if (this.name !== undefined && this.value !== undefined) {\n        this._internals.setFormValue(this.value);\n      }\n      this._internals.form.requestSubmit();\n    } else if (this.href === undefined && this.type === 'reset' && this._internals.form) {\n      this._internals.form.reset();\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  /** @private */\n  private _renderSpinner(): TemplateResult {\n    return html`\n      <svg\n        class=\"button__spinner\"\n        part=\"spinner\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n      >\n        <circle\n          class=\"button__spinner-track\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          opacity=\"0.3\"\n        />\n        <path\n          class=\"button__spinner-arc\"\n          d=\"M12 2a10 10 0 0 1 10 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @private */\n  private _renderInner(): TemplateResult {\n    return html`\n      ${this.loading ? this._renderSpinner() : nothing}\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--loading': this.loading,\n    };\n\n    if (this.href !== undefined) {\n      return html`\n        <a\n          part=\"button\"\n          class=${classMap(classes)}\n          href=${this.disabled || this.loading ? nothing : ifDefined(this.href)}\n          target=${ifDefined(this.target)}\n          rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n          aria-label=${this.ariaLabel ?? nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-busy=${this.loading ? 'true' : nothing}\n          @click=${this._handleClick}\n        >\n          ${this._renderInner()}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(classes)}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        aria-label=${this.ariaLabel ?? nothing}\n        aria-busy=${this.loading ? 'true' : nothing}\n        @click=${this._handleClick}\n      >\n        ${this._renderInner()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-button': HelixButton;\n  }\n}\n"],"names":["helixButtonStyles","css","HelixButton","LitElement","e","html","nothing","classes","classMap","ifDefined","tokenStyles","__decorateClass","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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/shared/{hx-button-group-BMV5qFs4.js → hx-button-group-CWjWv-wS.js}

@@ -1,5 +1,5 @@
 import { css as h, LitElement as u, html as c } from "lit";
-import { property as d, customElement as p } from "lit/decorators.js";
+import { property as n, customElement as p } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
 import { tokenStyles as m } from "@helixui/tokens/lit";
 const x = h`
@@ -94,10 +94,10 @@ const x = h`
     position: relative;
   }
 `;
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (r, i, s, e) => {
-  for (var t = e > 1 ? void 0 : e ? f(i, s) : i, a = r.length - 1, n; a >= 0; a--)
-    (n = r[a]) && (t = (e ? n(i, s, t) : n(t)) || t);
-  return e && t && g(i, s, t), t;
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? f(e, s) : e, a = r.length - 1, d; a >= 0; a--)
+    (d = r[a]) && (t = (i ? d(e, s, t) : d(t)) || t);
+  return i && t && g(e, s, t), t;
 };
 let o = class extends u {
   // ─── Constructor ───
@@ -108,7 +108,7 @@ let o = class extends u {
     return this._orientation;
   }
   set orientation(r) {
-    r !== "horizontal" && r !== "vertical" && (console.warn(`[hx-button-group] Invalid orientation "${r}", defaulting to "horizontal".`), r = "horizontal"), this._orientation = r;
+    r !== "horizontal" && r !== "vertical" && (r = "horizontal"), this._orientation = r;
   }
   // ─── Lifecycle ───
   updated(r) {
@@ -135,13 +135,13 @@ let o = class extends u {
 };
 o.styles = [m, x];
 l([
-  d({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], o.prototype, "orientation", 1);
 l([
-  d({ type: String, reflect: !0, attribute: "hx-size" })
+  n({ type: String, reflect: !0, attribute: "hx-size" })
 ], o.prototype, "size", 2);
 l([
-  d({ type: String })
+  n({ type: String })
 ], o.prototype, "label", 2);
 o = l([
   p("hx-button-group")
@@ -149,4 +149,4 @@ o = l([
 export {
   o as H
 };
-//# sourceMappingURL=hx-button-group-BMV5qFs4.js.map
+//# sourceMappingURL=hx-button-group-CWjWv-wS.js.map

package/dist/shared/hx-button-group-CWjWv-wS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-button-group-CWjWv-wS.js","sources":["../../src/components/hx-button-group/hx-button-group.styles.ts","../../src/components/hx-button-group/hx-button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonGroupStyles = css`\n  :host {\n    display: inline-flex;\n    contain: layout style;\n  }\n\n  .group {\n    display: inline-flex;\n    align-items: stretch;\n  }\n\n  /* ─── Orientation Variants ─── */\n\n  .group--horizontal {\n    flex-direction: row;\n  }\n\n  .group--vertical {\n    flex-direction: column;\n  }\n\n  /* ─── No Double Borders: Horizontal ─── */\n\n  .group--horizontal ::slotted(*:not(:first-child)) {\n    margin-left: calc(-1 * var(--hx-border-width-thin, 1px));\n  }\n\n  /* ─── No Double Borders: Vertical ─── */\n\n  .group--vertical ::slotted(*:not(:first-child)) {\n    margin-top: calc(-1 * var(--hx-border-width-thin, 1px));\n  }\n\n  /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */\n\n  .group--horizontal ::slotted(:only-child) {\n    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Border Radius: Horizontal — First child keeps left corners ─── */\n\n  .group--horizontal ::slotted(:first-child:not(:only-child)) {\n    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem) 0 0\n      var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */\n\n  .group--horizontal ::slotted(:last-child:not(:only-child)) {\n    --hx-button-border-radius: 0 var(--hx-border-radius-md, 0.375rem)\n      var(--hx-border-radius-md, 0.375rem) 0;\n  }\n\n  /* ─── Border Radius: Horizontal — Middle children have no radius ─── */\n\n  .group--horizontal ::slotted(:not(:first-child):not(:last-child)) {\n    --hx-button-border-radius: 0;\n  }\n\n  /* ─── Border Radius: Vertical — Single child keeps all corners ─── */\n\n  .group--vertical ::slotted(:only-child) {\n    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Border Radius: Vertical — First child keeps top corners ─── */\n\n  .group--vertical ::slotted(:first-child:not(:only-child)) {\n    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem)\n      var(--hx-border-radius-md, 0.375rem) 0 0;\n  }\n\n  /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */\n\n  .group--vertical ::slotted(:last-child:not(:only-child)) {\n    --hx-button-border-radius: 0 0 var(--hx-border-radius-md, 0.375rem)\n      var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Border Radius: Vertical — Middle children have no radius ─── */\n\n  .group--vertical ::slotted(:not(:first-child):not(:last-child)) {\n    --hx-button-border-radius: 0;\n  }\n\n  /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */\n\n  .group ::slotted(:focus-within) {\n    z-index: 1;\n    position: relative;\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 { helixButtonGroupStyles } from './hx-button-group.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A container component that groups related hx-button elements into a cohesive\n * horizontal or vertical action set. Eliminates double borders between adjacent\n * buttons and squares off inner border-radius for a unified visual appearance.\n *\n * **Accessibility:** Always provide an accessible label via `aria-label` or\n * `aria-labelledby` so screen readers can announce the group purpose.\n *\n * @summary Groups hx-button elements into a horizontal or vertical action set with shared borders.\n *\n * @tag hx-button-group\n *\n * @slot - Default slot accepting hx-button children.\n *\n * @csspart group - The container div element wrapping all slotted buttons.\n *\n * @cssprop [--hx-button-group-size=md] - Size token forwarded to child buttons. Accepts 'sm', 'md', or 'lg'.\n */\n@customElement('hx-button-group')\nexport class HelixButtonGroup extends LitElement {\n  static override styles = [tokenStyles, helixButtonGroupStyles];\n\n  /**\n   * ElementInternals instance for ARIA role and label management via the Accessibility Object Model.\n   * @internal\n   */\n  private internals: ElementInternals;\n\n  /**\n   * Layout orientation of the button group.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  get orientation(): 'horizontal' | 'vertical' {\n    return this._orientation;\n  }\n  set orientation(value: string) {\n    if (value !== 'horizontal' && value !== 'vertical') {\n      devWarn('hx-button-group', `Invalid orientation \"${value}\", defaulting to \"horizontal\".`);\n      value = 'horizontal';\n    }\n    this._orientation = value as 'horizontal' | 'vertical';\n  }\n  /**\n   * Backing store for the orientation property, holding the validated orientation value.\n   * @internal\n   */\n  private _orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size applied to the button group and cascaded to child buttons via\n   * the --hx-button-group-size CSS custom property.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Accessible label for the button group. Sets aria-label via ElementInternals.\n   * **Strongly recommended** for WCAG 2.1 AA compliance — without it, screen\n   * readers announce an unnamed \"group\". For Drupal/Twig compatibility, prefer\n   * applying `aria-label` directly as an HTML attribute instead.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string = '';\n\n  // ─── Constructor ───\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n    this.internals.role = 'group';\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('size')) {\n      this.style.setProperty('--hx-button-group-size', this.size);\n    }\n\n    if (changedProperties.has('label')) {\n      this.internals.ariaLabel = this.label || null;\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.setProperty('--hx-button-group-size', this.size);\n    if (this.label) {\n      this.internals.ariaLabel = this.label;\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        part=\"group\"\n        class=${classMap({\n          group: true,\n          'group--horizontal': this.orientation === 'horizontal',\n          'group--vertical': this.orientation === 'vertical',\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-button-group': HelixButtonGroup;\n  }\n}\n"],"names":["helixButtonGroupStyles","css","HelixButtonGroup","LitElement","value","changedProperties","html","classMap","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACwB/B,IAAMC,IAAN,cAA+BC,EAAW;AAAA;AAAA,EAkD/C,cAAc;AACZ,UAAA,GAvBF,KAAQ,eAA0C,cAQlD,KAAA,OAA2B,MAU3B,KAAA,QAAgB,IAMd,KAAK,YAAY,KAAK,gBAAA,GACtB,KAAK,UAAU,OAAO;AAAA,EACxB;AAAA,EAxCA,IAAI,cAAyC;AAC3C,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,YAAYC,GAAe;AAC7B,IAAIA,MAAU,gBAAgBA,MAAU,eAEtCA,IAAQ,eAEV,KAAK,eAAeA;AAAA,EACtB;AAAA;AAAA,EAmCS,QAAQC,GAAoD;AACnE,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,KAC9B,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GAGxDA,EAAkB,IAAI,OAAO,MAC/B,KAAK,UAAU,YAAY,KAAK,SAAS;AAAA,EAE7C;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GACtD,KAAK,UACP,KAAK,UAAU,YAAY,KAAK;AAAA,EAEpC;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,gBAGKC,EAAS;AAAA,MACf,OAAO;AAAA,MACP,qBAAqB,KAAK,gBAAgB;AAAA,MAC1C,mBAAmB,KAAK,gBAAgB;AAAA,IAAA,CACzC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR;AACF;AA9FaL,EACK,SAAS,CAACM,GAAaR,CAAsB;AAazDS,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAb9BR,EAcP,WAAA,eAAA,CAAA;AAsBJO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAnCpDR,EAoCX,WAAA,QAAA,CAAA;AAUAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7CfR,EA8CX,WAAA,SAAA,CAAA;AA9CWA,IAANO,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBT,CAAA;"}

package/dist/shared/{hx-card-DAkEfpJd.js → hx-card-Bg4W4uXC.js}

@@ -1,10 +1,12 @@
 import { css as g, LitElement as p, nothing as l, html as v } from "lit";
-import { property as s, state as d, customElement as x } from "lit/decorators.js";
+import { property as d, state as s, customElement as x } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
 import { tokenStyles as m } from "@helixui/tokens/lit";
 const _ = g`
   :host {
     display: block;
+    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));
+    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
   }
 
   .card {
@@ -161,10 +163,10 @@ const _ = g`
     margin-top: auto;
   }
 `;
-var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (a, r, n, i) => {
-  for (var o = i > 1 ? void 0 : i ? u(r, n) : r, h = a.length - 1, c; h >= 0; h--)
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (a, r, n, i) => {
+  for (var o = i > 1 ? void 0 : i ? b(r, n) : r, h = a.length - 1, c; h >= 0; h--)
     (c = a[h]) && (o = (i ? c(r, n, o) : c(o)) || o);
-  return i && o && b(r, n, o), o;
+  return i && o && u(r, n, o), o;
 };
 let e = class extends p {
   constructor() {
@@ -184,9 +186,7 @@ let e = class extends p {
   }
   _onActionsSlotChange(a) {
     const r = a.target;
-    this._hasActions = r.assignedNodes({ flatten: !0 }).length > 0, this._hasActions && this.hxHref && console.warn(
-      '[hx-card] Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: interactive controls cannot be nested inside role="link". Use either hx-href or the actions slot, not both.'
-    );
+    this._hasActions = r.assignedNodes({ flatten: !0 }).length > 0, this._hasActions && this.hxHref;
   }
   // ─── Event Handling ───
   _dispatchCardClick(a) {
@@ -251,28 +251,28 @@ e.shadowRootOptions = {
 };
 e.styles = [m, _];
 t([
-  s({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 t([
-  s({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], e.prototype, "elevation", 2);
 t([
-  s({ type: String, attribute: "hx-href" })
+  d({ type: String, attribute: "hx-href" })
 ], e.prototype, "hxHref", 2);
 t([
-  s({ type: String, attribute: "hx-aria-label" })
+  d({ type: String, attribute: "hx-aria-label" })
 ], e.prototype, "hxAriaLabel", 2);
 t([
-  d()
+  s()
 ], e.prototype, "_hasImage", 2);
 t([
-  d()
+  s()
 ], e.prototype, "_hasHeading", 2);
 t([
-  d()
+  s()
 ], e.prototype, "_hasFooter", 2);
 t([
-  d()
+  s()
 ], e.prototype, "_hasActions", 2);
 e = t([
   x("hx-card")
@@ -280,4 +280,4 @@ e = t([
 export {
   e as H
 };
-//# sourceMappingURL=hx-card-DAkEfpJd.js.map
+//# sourceMappingURL=hx-card-Bg4W4uXC.js.map

package/dist/shared/hx-card-Bg4W4uXC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-card-Bg4W4uXC.js","sources":["../../src/components/hx-card/hx-card.styles.ts","../../src/components/hx-card/hx-card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCardStyles = css`\n  :host {\n    display: block;\n    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));\n    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-card-gap, var(--hx-space-4, 1rem));\n    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n    border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    overflow: hidden;\n    font-family: var(--hx-font-family-sans, sans-serif);\n    transition:\n      box-shadow var(--hx-transition-normal, 250ms ease),\n      transform var(--hx-transition-normal, 250ms ease);\n  }\n\n  /* ─── Elevation Variants ─── */\n\n  .card--flat {\n    box-shadow: none;\n  }\n\n  .card--raised {\n    box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n  }\n\n  .card--floating {\n    box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));\n  }\n\n  /* ─── Style Variants ─── */\n\n  .card--default {\n    /* Default styling — uses base styles */\n  }\n\n  .card--featured {\n    border-color: var(--hx-color-primary-500, #2563eb);\n    border-width: var(--hx-border-width-medium, 2px);\n  }\n\n  .card--compact .card__body {\n    padding: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__heading {\n    padding-top: var(--hx-space-3, 0.75rem);\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__footer {\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__actions {\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Interactive ─── */\n\n  .card--interactive {\n    cursor: pointer;\n  }\n\n  .card--interactive:hover {\n    box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));\n    transform: translateY(var(--hx-lift-md, -2px));\n  }\n\n  .card--interactive:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .card--interactive:active {\n    transform: translateY(0);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .card {\n      transition: none;\n    }\n\n    .card--interactive:hover {\n      transform: none;\n    }\n\n    .card--interactive:active {\n      transform: none;\n    }\n  }\n\n  /* ─── Hidden empty slot wrappers ─── */\n\n  [hidden] {\n    display: none !important;\n  }\n\n  /* ─── Sections ─── */\n\n  .card__image {\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .card__image ::slotted(img) {\n    width: 100%;\n    aspect-ratio: var(--hx-card-image-aspect-ratio, 16 / 9);\n    display: block;\n    object-fit: cover;\n  }\n\n  .card__heading {\n    padding-top: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: 0;\n    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    font-size: var(--hx-font-size-xl, 1.25rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    line-height: var(--hx-line-height-tight, 1.25);\n  }\n\n  .card__body {\n    padding: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    flex: 1;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    color: var(--hx-color-neutral-600, #495057);\n  }\n\n  .card__footer {\n    padding-top: 0;\n    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n  }\n\n  .card__actions {\n    display: flex;\n    gap: var(--hx-space-2, 0.5rem);\n    padding-top: var(--hx-space-4, 1rem);\n    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n    margin-top: auto;\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 { helixCardStyles } from './hx-card.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A flexible card component for displaying grouped content.\n *\n * @summary Content container with image, heading, body, footer, and action slots.\n *\n * @tag hx-card\n *\n * @slot image - Optional image or media content at the top of the card.\n * @slot heading - The card heading/title content. Use a semantic heading element (h2, h3, etc.) for proper accessibility.\n * @slot - Default slot for the card body content.\n * @slot footer - Optional footer content below the body.\n * @slot actions - Optional action buttons, rendered with a top border separator. Do NOT use together with hx-href (interactive card + focusable actions is an ARIA anti-pattern).\n *\n * @fires {CustomEvent<{href: string, originalEvent: MouseEvent | KeyboardEvent}>} hx-click - Dispatched when an interactive card (with hx-href) is clicked.\n *\n * @csspart card - The outer card container element.\n * @csspart image - The image slot container.\n * @csspart heading - The heading slot container.\n * @csspart body - The body slot container.\n * @csspart footer - The footer slot container.\n * @csspart actions - The actions slot container.\n *\n * @cssprop [--hx-card-bg=var(--hx-color-neutral-0)] - Card background color.\n * @cssprop [--hx-card-color=var(--hx-color-neutral-800)] - Card text color.\n * @cssprop [--hx-card-border-color=var(--hx-color-neutral-200)] - Card border color.\n * @cssprop [--hx-card-border-radius=var(--hx-border-radius-lg)] - Card border radius.\n * @cssprop [--hx-card-padding=var(--hx-space-6)] - Internal padding for card sections.\n * @cssprop [--hx-card-gap=var(--hx-space-4)] - Gap between card sections.\n * @cssprop [--hx-card-image-aspect-ratio=16/9] - Aspect ratio for the image slot.\n */\n@customElement('hx-card')\nexport class HelixCard extends LitElement {\n  /** Enable delegatesFocus so :focus on the host works when the inner card div has focus. */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static override styles = [tokenStyles, helixCardStyles];\n\n  /**\n   * Visual style variant of the card.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'featured' | 'compact' = 'default';\n\n  /**\n   * Elevation (shadow depth) of the card.\n   * @attr elevation\n   */\n  @property({ type: String, reflect: true })\n  elevation: 'flat' | 'raised' | 'floating' = 'flat';\n\n  /**\n   * Optional URL. When set, the card becomes interactive (clickable)\n   * and navigates to this URL on click.\n   * Uses hx-href to avoid conflicting with the native HTML href attribute.\n   * @attr hx-href\n   */\n  @property({ type: String, attribute: 'hx-href' })\n  hxHref: string | undefined = undefined;\n\n  /**\n   * Accessible label for interactive cards. Use this to provide a meaningful\n   * description of the card's purpose rather than exposing the raw URL.\n   * Only applies when hx-href is set.\n   * @attr hx-aria-label\n   */\n  @property({ type: String, attribute: 'hx-aria-label' })\n  hxAriaLabel: string | undefined = undefined;\n\n  // ─── Slot Detection ───\n\n  /**\n   * Tracks whether any content is assigned to the image slot, controlling slot container visibility.\n   * @internal\n   */\n  @state() private _hasImage = false;\n\n  /**\n   * Tracks whether any content is assigned to the heading slot, controlling slot container visibility.\n   * @internal\n   */\n  @state() private _hasHeading = false;\n\n  /**\n   * Tracks whether any content is assigned to the footer slot, controlling slot container visibility.\n   * @internal\n   */\n  @state() private _hasFooter = false;\n\n  /**\n   * Tracks whether any content is assigned to the actions slot, controlling slot container visibility.\n   * @internal\n   */\n  @state() private _hasActions = false;\n\n  private _onImageSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasImage = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onHeadingSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeading = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onFooterSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onActionsSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasActions = slot.assignedNodes({ flatten: true }).length > 0;\n    if (this._hasActions && this.hxHref) {\n      devWarn(\n        'hx-card',\n        'Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: ' +\n          'interactive controls cannot be nested inside role=\"link\". ' +\n          'Use either hx-href or the actions slot, not both.',\n      );\n    }\n  }\n\n  // ─── Event Handling ───\n\n  private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n    if (!this.hxHref) return;\n\n    /**\n     * Dispatched when an interactive card is clicked.\n     * Includes the target href in the detail.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ href: string; originalEvent: MouseEvent | KeyboardEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { href: this.hxHref, originalEvent },\n      }),\n    );\n  }\n\n  private _handleClick(e: MouseEvent): void {\n    this._dispatchCardClick(e);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (!this.hxHref) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._dispatchCardClick(e);\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isInteractive = !!this.hxHref;\n\n    const classes = {\n      card: true,\n      [`card--${this.variant}`]: true,\n      [`card--${this.elevation}`]: true,\n      'card--interactive': isInteractive,\n    };\n\n    return html`\n      <div\n        part=\"card\"\n        class=${classMap(classes)}\n        role=${isInteractive ? 'link' : nothing}\n        tabindex=${isInteractive ? '0' : nothing}\n        aria-label=${isInteractive && this.hxAriaLabel ? this.hxAriaLabel : nothing}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeyDown}\n      >\n        <div class=\"card__image\" part=\"image\" ?hidden=${!this._hasImage}>\n          <slot name=\"image\" @slotchange=${this._onImageSlotChange}></slot>\n        </div>\n\n        <div class=\"card__heading\" part=\"heading\" ?hidden=${!this._hasHeading}>\n          <slot name=\"heading\" @slotchange=${this._onHeadingSlotChange}></slot>\n        </div>\n\n        <div class=\"card__body\" part=\"body\">\n          <slot></slot>\n        </div>\n\n        <div class=\"card__footer\" part=\"footer\" ?hidden=${!this._hasFooter}>\n          <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n        </div>\n\n        <div class=\"card__actions\" part=\"actions\" ?hidden=${!this._hasActions}>\n          <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-card': HelixCard;\n  }\n}\n"],"names":["helixCardStyles","css","HelixCard","LitElement","e","slot","originalEvent","isInteractive","classes","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}