@helixui/library 3.1.0 → 3.2.0-next.102

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-button-CHlkRQTe.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, #429797));\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, #0f7078));\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  /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target for sm variant.\n     min-height uses --hx-touch-target-min to guarantee the interactive area\n     meets the threshold even though the visual size token is smaller. */\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-touch-target-min, 2.75rem);\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-action-primary-bg, #429797);\n    /* Inline #0d1825 matches text.on-primary's resolved primitive (neutral-900);\n       cold-start without the semantic still paints AA-tuned dark-on-primary\n       rather than white-on-primary (3.43:1 fail). */\n    --hx-button-color: var(--hx-color-text-on-primary, #0d1825);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--secondary {\n    --hx-button-bg: transparent;\n    /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.\n       primary-600 (#0F7078) on white = 5.82:1 — AA pass. */\n    --hx-button-color: var(--hx-color-action-secondary-fg, #0f7078);\n    --hx-button-border-color: var(--hx-color-action-secondary-border, #0f7078);\n  }\n\n  .button--secondary:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-secondary-bg-hover, #ebf8f8));\n  }\n\n  .button--tertiary {\n    --hx-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n    --hx-button-color: var(--hx-color-text-primary, #0d1825);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--tertiary:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));\n  }\n\n  .button--danger {\n    --hx-button-bg: var(--hx-color-action-danger-bg, #e5493e);\n    /* Inline #0d1825 matches text.on-error's resolved primitive (neutral-900);\n       cold-start without the semantic still paints AA-tuned dark-on-error\n       rather than white-on-error (3.92:1 fail). */\n    --hx-button-color: var(--hx-color-text-on-error, #0d1825);\n    --hx-button-border-color: transparent;\n  }\n\n  /* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).\n     error-600 (#C92A2A) drops that to 3.28:1 — AA fail. text.on-error-strong\n     resolves to neutral-0 across modes (no dark flip) so the darker hover fill\n     stays legible. Mirrors hx-toast precedent (commit 300e21ab0); routed\n     through the semantic tier in 3.2.1 token-cascade remediation. */\n  .button--danger:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-hover, #c92a2a));\n    --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);\n  }\n\n  /* Pressed state binds explicitly to action.danger.bg-active (error-700,\n     #A21312) + text.on-error-strong (neutral-0) = 7.96:1 AA. Base\n     .button:active filter:brightness(0.8) would compound on top of bg-hover\n     (#C92A2A) and produce ~3.3:1 sub-AA on the bound colors. Override the\n     filter to none. HC override on action.danger.bg-active flips to HC\n     error-500 so the on-error-strong (HC = #000) pair is AA in HC too. */\n  .button--danger:active {\n    --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-danger-bg-active, #a21312));\n    --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);\n    filter: none;\n  }\n\n  .button--ghost {\n    --hx-button-bg: transparent;\n    /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.\n       primary-600 (#0F7078) on white = 5.82:1 — AA pass. */\n    --hx-button-color: var(--hx-color-action-ghost-fg, #0f7078);\n    --hx-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-ghost-bg-hover, #ebf8f8));\n  }\n\n  .button--outline {\n    --hx-button-bg: transparent;\n    --hx-button-color: var(--hx-color-text-primary, #0d1825);\n    --hx-button-border-color: var(--hx-color-border-strong, #66787b);\n  }\n\n  .button--outline:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));\n  }\n\n  /* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.\n     primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. text.on-primary-strong\n     resolves to neutral-0 across modes (no dark flip) for the darker hover fill.\n     Mirrors hx-toast precedent (commit 300e21ab0); routed through the semantic\n     tier in 3.2.1 token-cascade remediation. */\n  .button--primary:hover {\n    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-hover, #0f7078));\n    --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);\n  }\n\n  /* Pressed state binds explicitly to action.primary.bg-active (primary-700,\n     #0F6363) + text.on-primary-strong (neutral-0) = 7.03:1 AA. The base\n     .button:active filter:brightness(0.8) would compound on top of bg-hover\n     (#0F7078) and produce ~3.7:1 sub-AA on the bound colors. Override the\n     filter to none so the action.*.bg-active token is what actually paints. */\n  .button--primary:active {\n    --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-primary-bg-active, #0f6363));\n    --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);\n    filter: none;\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 {\n      transition: none;\n    }\n\n    .button__spinner {\n      animation: none;\n      opacity: var(--hx-opacity-muted, 0.6);\n    }\n  }\n\n  /* ─── Inverted Mode ─── */\n\n  /* Inline-fallback contract for the on-dark-* tokens in this section:\n     the literal rgba(255, 255, 255, 0.X) arms are a LIGHT-MODE-only last\n     resort (cold-start, CSS-not-loaded). At runtime, hx-theme injects\n     the dark.* override (overlay-black-* for the strong border and the\n     surface.on-dark-overlay-* fills) so dark-mode inverted buttons stay\n     visible on the now-light surface.inverse (#EBEEE9). The inline white\n     overlays would render invisible (≈1.1:1) on a light surface, but\n     they never paint when the theme is mounted. If a future change\n     moves these into a context where hx-theme is not guaranteed,\n     replace with mode-aware tokens. */\n\n  /* Override text color and filter-based hover/active for all variants */\n  :host([inverted]) .button {\n    color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #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    /* WCAG 1.4.11: focus indicator needs ≥3:1 against adjacent colors.\n       border-on-dark-strong (overlay-white-70) ≈ 5:1 on neutral-900 — passes.\n       The lower-alpha siblings used to live in border.* but were sub-3:1\n       against any plausible surface and could not honour a border contract;\n       they're now surface.on-dark-overlay-{default,subtle} (translucent\n       fills, not borders) and used elsewhere in this file. See\n       tokens.json color.surface.on-dark-overlay-* for canonical ratios. */\n    outline-color: var(\n      --hx-button-inverted-focus-ring-color,\n      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))\n    );\n  }\n\n  /* Primary inverted — resting bg routes through action.primary.bg-inverted-rest\n     so dark mode can flip the fill to primary-600. surface.inverse becomes light\n     (#EBEEE9) in dark mode; primary-500 on #EBEEE9 = 2.94:1 (sub-3:1 UI floor\n     fail for the inverted-button boundary). primary-600 on #EBEEE9 = 4.97:1\n     (AA pass). Light mode tracks action.primary.bg (primary-500, 5.20:1 on\n     dark surface.inverse). */\n  :host([inverted]) .button--primary {\n    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-rest, #429797);\n  }\n\n  /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover\n     (primary-400, light teal). The base :host([inverted]) .button rule binds\n     color to text.inverse, which flips by mode (neutral-0 in light, neutral-900\n     in dark). On a permanent light-teal fill, white text drops to 2.4:1 in\n     light mode (AA fail). Pin color to text.on-primary (neutral-900, no\n     dark-mode flip) for both hover and active so the foreground is dark in\n     both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).\n     Pressed === hover visually in inverted mode is acceptable UX (the\n     transient absence of pointer over the button signals release).\n     The fallback chain wraps --hx-button-active-bg (highest precedence) and\n     --hx-button-hover-bg so consumer overrides on either prop apply under\n     :host([inverted]) — the two share a paint here, so either knob is\n     honored, with active-bg winning when both are set. */\n  :host([inverted]) .button--primary:hover,\n  :host([inverted]) .button--primary:active {\n    --hx-button-bg: var(\n      --hx-button-active-bg,\n      var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))\n    );\n    color: var(\n      --hx-button-inverted-primary-interactive-color,\n      var(--hx-color-text-on-primary, #0d1825)\n    );\n  }\n\n  /* Danger inverted — sister to primary. Hover/pressed lift to\n     action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground\n     contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);\n     pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both\n     modes. Same active-bg → hover-bg → semantic fallback chain as primary. */\n  :host([inverted]) .button--danger:hover,\n  :host([inverted]) .button--danger:active {\n    --hx-button-bg: var(\n      --hx-button-active-bg,\n      var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))\n    );\n    color: var(\n      --hx-button-inverted-danger-interactive-color,\n      var(--hx-color-text-on-error, #0d1825)\n    );\n  }\n\n  /* Secondary inverted — white border and translucent hover fill */\n  :host([inverted]) .button--secondary {\n    --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n  }\n\n  :host([inverted]) .button--secondary:hover {\n    --hx-button-bg: var(--hx-color-surface-on-dark-overlay-default, rgba(255, 255, 255, 0.3));\n  }\n\n  /* Tertiary inverted — resting at the subtle overlay (10%) lifts to the default\n     overlay (30%) on hover so the runtime hover delta is visually distinct, not\n     collapsed onto a single token. */\n  :host([inverted]) .button--tertiary {\n    --hx-button-bg: var(--hx-color-surface-on-dark-overlay-subtle, rgba(255, 255, 255, 0.1));\n    --hx-button-border-color: transparent;\n  }\n\n  :host([inverted]) .button--tertiary:hover {\n    --hx-button-bg: var(--hx-color-surface-on-dark-overlay-default, rgba(255, 255, 255, 0.3));\n  }\n\n  /* Ghost inverted — transparent base, translucent 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(\n      --hx-button-inverted-ghost-hover-bg,\n      var(--hx-color-surface-on-dark-overlay-default, rgba(255, 255, 255, 0.3))\n    );\n  }\n\n  /* Outline inverted — white border */\n  :host([inverted]) .button--outline {\n    --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n  }\n\n  :host([inverted]) .button--outline:hover {\n    --hx-button-bg: var(--hx-color-surface-on-dark-overlay-default, rgba(255, 255, 255, 0.3));\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  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .button {\n      /* Ensure button outline is visible in Windows High Contrast mode.\n         ButtonText/ButtonFace are system colors recognized by the browser. */\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 2px solid ButtonText;\n    }\n\n    .button:hover {\n      /* Hover affordance must survive in HC. Highlight/HighlightText is the\n         OS-level \"selected\" pair, mirroring the forcedColorsInteractive mixin's\n         hover contract — kept inline since this component owns its bespoke HC\n         block (XOR rule). */\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n    }\n\n    .button:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .button[disabled] {\n      background-color: ButtonFace;\n      color: GrayText;\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    .button--loading .button__spinner {\n      /* Ensure spinner is visible in HCM */\n      forced-color-adjust: auto;\n    }\n  }\n`;\n","import { html, nothing, type TemplateResult, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixButtonStyles } from './hx-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Detail for the hx-click event dispatched by hx-button. */\nexport interface HxButtonClickDetail {\n  originalEvent: MouseEvent;\n}\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-action-primary-bg)] - Button background color (3.2.1 cascade — variant rules route through action.{primary,secondary,ghost,danger}.bg).\n * @cssprop [--hx-button-hover-bg] - Hover background override (primary and danger variants only). Other variants (secondary/outline, ghost) keep their hover fills routed through their semantic action.* tokens and do not consume this hook. Under [inverted] for primary/danger, hover and active share a paint (combined :hover, :active rule), so this override applies to both states unless --hx-button-active-bg also takes precedence.\n * @cssprop [--hx-button-active-bg] - Pressed/active background override (primary and danger variants only, including their inverted modes). Takes precedence over --hx-button-hover-bg in the fallback chain. Standard-mode primary/danger default to action.{primary,danger}.bg-active (with filter:none) for AA-pinned pressed contrast. Inverted-mode primary/danger reuse action.{primary,danger}.bg-inverted-hover (combined :hover, :active rule); setting --hx-button-active-bg under [inverted] therefore overrides the lifted hover fill as well as the pressed fill — the two share a paint in inverted mode. Other variants do not consume this hook.\n * @cssprop [--hx-button-color=var(--hx-color-text-on-primary)] - Button text color (variants route through text.on-{role} / text.on-{role}-strong).\n * @cssprop [--hx-button-border-color=transparent] - Button border color (secondary/outline variants route through action.secondary.border).\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=var(--hx-color-text-inverse)] - Text color when inverted (resolves to neutral-0).\n * @cssprop [--hx-button-inverted-primary-interactive-color=var(--hx-color-text-on-primary)] - Foreground override for inverted primary hover and pressed (combined :hover, :active rule). Defaults to text.on-primary (neutral-900, no dark-mode flip) so dark text rides the lifted primary-400 fill — text.inverse on light teal collapses to ~2.4:1 in light mode.\n * @cssprop [--hx-button-inverted-danger-interactive-color=var(--hx-color-text-on-error)] - Foreground override for inverted danger hover and pressed (combined :hover, :active rule). Defaults to text.on-error (neutral-900); same rationale as the primary override.\n * @cssprop [--hx-button-inverted-ghost-hover-bg=var(--hx-color-surface-on-dark-overlay-default)] - Ghost hover bg when inverted (overlay-white-30 — translucent fill, not a border; contrast not applicable).\n * @cssprop [--hx-button-inverted-focus-ring-color=var(--hx-color-border-on-dark-strong)] - Focus ring color when inverted (overlay-white-70 ≈ 5:1 vs neutral-900 — clears WCAG 1.4.11 3:1 floor for non-text UI).\n *\n * @cssprop [--hx-color-action-primary-bg] - Primary variant resting fill (3.2.1 semantic action layer).\n * @cssprop [--hx-color-action-primary-bg-hover] - Primary variant hover fill.\n * @cssprop [--hx-color-action-primary-bg-active] - Primary variant active/pressed fill.\n * @cssprop [--hx-color-action-secondary-fg] - Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark). Consumed only by .button--secondary; the actual border/surface paint for outline currently routes through --hx-color-border-strong / --hx-color-surface-raised in styles, with this token reserved for the foreground.\n * @cssprop [--hx-color-action-secondary-border] - Secondary/outline variant border (3.2.1 semantic; outline still routes through --hx-color-border-strong by default).\n * @cssprop [--hx-color-action-secondary-bg-hover] - Secondary/outline variant hover fill (3.2.1 semantic; outline still routes through --hx-color-surface-raised by default).\n * @cssprop [--hx-color-action-ghost-fg] - Ghost variant fg.\n * @cssprop [--hx-color-action-ghost-bg-hover] - Ghost variant hover fill.\n * @cssprop [--hx-color-action-danger-bg] - Danger variant resting fill.\n * @cssprop [--hx-color-action-danger-bg-hover] - Danger variant hover fill.\n * @cssprop [--hx-color-action-danger-bg-active] - Danger variant active fill.\n * @cssprop [--hx-color-action-primary-bg-inverted-hover] - Primary variant hover/pressed fill on dark/inverted surface (resolves to primary-400, 7.27:1 on neutral-900).\n * @cssprop [--hx-color-action-danger-bg-inverted-hover] - Danger variant hover/pressed fill on dark/inverted surface (resolves to error-400, 6.58:1 on neutral-900).\n * @cssprop [--hx-color-text-on-primary] - Foreground for primary fill (resolves to neutral-900 — AA-tuned for primary-500).\n * @cssprop [--hx-color-text-on-primary-strong] - Foreground for primary-hover fill (resolves to neutral-0 across modes).\n * @cssprop [--hx-color-text-on-error] - Foreground for danger fill (resolves to neutral-900).\n * @cssprop [--hx-color-text-on-error-strong] - Foreground for danger-hover fill (resolves to neutral-0 across modes).\n * @cssprop [--hx-color-text-primary] - Foreground for tertiary variant on surface.sunken.\n * @cssprop [--hx-color-surface-sunken] - Tertiary variant resting fill.\n * @cssprop [--hx-color-surface-raised] - Tertiary variant hover fill.\n * @cssprop [--hx-color-surface-on-dark-overlay-subtle] - Inverted-tertiary resting fill (overlay-white-10 — translucent fill, not a border).\n * @cssprop [--hx-color-surface-on-dark-overlay-default] - Inverted-tertiary hover fill + inverted-secondary/ghost/outline hover fill (overlay-white-30 — translucent fill, not a border).\n * @cssprop [--hx-color-border-on-dark-strong] - Inverted-secondary/outline border + inverted focus-visible outline (overlay-white-70 ≈ 5:1 — clears WCAG 1.4.11 3:1 floor).\n */\n@customElement('hx-button')\nexport class HelixButton extends mixinDelegatesAria(HelixElement) {\n  // 3.2.1: forced-colors deference is owned by the bespoke @media block in\n  // hx-button.styles.ts (covers loading/disabled/focus, not just the base).\n  // Do NOT also compose forcedColorsInteractive here — the mixin's docstring\n  // forbids dual composition (XOR rule) and the dual approach was flagged in\n  // the token-cascade campaign findings.\n  static override styles = [helixButtonStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\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   *\n   * **Mode scope:** `[inverted]` is validated for placement on a dark *region*\n   * within a light-mode-active page (hero banners, gradient sections, dark\n   * cards). It is NOT validated for use within a dark-mode-active root\n   * context: in dark mode, `surface.inverse` flips to a light surface\n   * (neutral-100), and the lifted `-400` hover/active fills lose UI-floor\n   * contrast against it (primary 2.10:1, danger 2.32:1 vs WCAG 1.4.11's 3:1\n   * floor). Mode-aware fill stops + foreground for the dark-mode-inverted\n   * combination are tracked as a 3.2.x follow-up.\n   *\n   * @attr inverted\n   */\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /**\n   * Accessible label for icon-only or text-less buttons.\n   * Required when the button has no visible text content.\n   *\n   * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n   * `accessible-label` takes precedence when both are set.\n   *\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel: string = '';\n\n  /**\n   * Returns the effective label for the button, checking accessible-label first,\n   * then the aria-label attribute, falling back to empty string.\n   * @internal\n   */\n  private get _effectiveLabel(): string {\n    return this.accessibleLabel?.trim() || this.ariaLabel?.trim() || '';\n  }\n\n  // ─── Form API ───\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Lifecycle ───\n\n  /** @internal */\n  private static readonly _VALID_VARIANTS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'danger',\n    'ghost',\n    'outline',\n  ] as const;\n\n  // Prevents double-warn on browsers that fire slotchange for empty initial slots.\n  private _emptySlotWarnEmitted = false;\n\n  override firstUpdated(changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(changedProperties);\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    const hasContent = (slot?.assignedNodes({ flatten: true }) ?? []).some(\n      (n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0,\n    );\n    if (!hasContent && !this._effectiveLabel) {\n      this._emptySlotWarnEmitted = true;\n      devWarn(\n        'hx-button',\n        'hx-button has no slot content and no accessible-label — button will have no accessible name.',\n      );\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('variant')) {\n      const validVariants: string[] = [...HelixButton._VALID_VARIANTS];\n      if (!validVariants.includes(this.variant)) {\n        devWarn(\n          'hx-button',\n          `Invalid variant \"${this.variant}\". Expected one of: ${validVariants.join(', ')}. Clamping to \"primary\".`,\n        );\n        this.variant = 'primary';\n      }\n    }\n  }\n\n  // ─── Slot Handlers ───\n\n  /** @internal */\n  private _handleDefaultSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const hasContent = slot\n      .assignedNodes({ flatten: true })\n      .some((n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0);\n    if (!hasContent && !this._effectiveLabel && !this._emptySlotWarnEmitted) {\n      devWarn(\n        'hx-button',\n        'hx-button has no slot content and no accessible-label — button will have no accessible name.',\n      );\n    }\n    // Only reset once content arrives so the guard stays armed for browsers\n    // that fire a second slotchange for the same empty initial slot.\n    if (hasContent) {\n      this._emptySlotWarnEmitted = false;\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /**\n   * @private\n   * @internal\n   */\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<{ originalEvent: MouseEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n\n    // Handle form submission/reset if form-associated and not in 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  /**\n   * @private\n   * @internal\n   */\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  /**\n   * @private\n   * @internal\n   */\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 @slotchange=${this._handleDefaultSlotChange}></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._effectiveLabel || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-busy=${this.loading ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : 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._effectiveLabel || 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  interface HTMLElementEventMap {\n    'hx-click': CustomEvent<{ originalEvent: MouseEvent }>;\n  }\n}\n"],"names":["helixButtonStyles","css","HelixButton","mixinDelegatesAria","HelixElement","_a","_b","disabled","changedProperties","slot","n","validVariants","devWarn","e","hasContent","html","nothing","classes","classMap","ifDefined","__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;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"}

package/dist/shared/{hx-button-group-BJOGWoMa.js → hx-button-group-BI-QBqmO.js}

@@ -1,8 +1,9 @@
-import { css as h, html as u } from "lit";
+import { css as u, html as h } from "lit";
 import { property as n, customElement as c } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { H as b } from "./helix-element-BNEYeiys.js";
-const m = h`
+import { classMap as b } from "lit/directives/class-map.js";
+import { f as p } from "./forced-colors-CTEDFRGa.js";
+import { H as g } from "./helix-element-BNEYeiys.js";
+const x = u`
   :host {
     display: inline-flex;
     contain: layout style;
@@ -26,33 +27,43 @@ const m = h`
   /* ─── No Double Borders: Horizontal ─── */
 
   .group--horizontal ::slotted(*:not(:first-child)) {
-    margin-inline-start: calc(-1 * var(--hx-border-width-thin, 1px));
+    margin-inline-start: var(
+      --hx-button-group-divider-offset,
+      calc(-1 * var(--hx-border-width-thin, 1px))
+    );
   }
 
   /* ─── No Double Borders: Vertical ─── */
 
   .group--vertical ::slotted(*:not(:first-child)) {
-    margin-top: calc(-1 * var(--hx-border-width-thin, 1px));
+    margin-top: var(--hx-button-group-divider-offset, calc(-1 * var(--hx-border-width-thin, 1px)));
   }
 
   /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */
 
   .group--horizontal ::slotted(:only-child) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: var(
+      --hx-button-group-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
   }
 
   /* ─── Border Radius: Horizontal — First child keeps left corners ─── */
 
   .group--horizontal ::slotted(:first-child:not(:only-child)) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem) 0 0
-      var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: var(
+        --hx-button-group-border-radius,
+        var(--hx-border-radius-md, 0.375rem)
+      )
+      0 0 var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */
 
   .group--horizontal ::slotted(:last-child:not(:only-child)) {
-    --hx-button-border-radius: 0 var(--hx-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem) 0;
+    --hx-button-border-radius: 0
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
   }
 
   /* ─── Border Radius: Horizontal — Middle children have no radius ─── */
@@ -64,21 +75,28 @@ const m = h`
   /* ─── Border Radius: Vertical — Single child keeps all corners ─── */
 
   .group--vertical ::slotted(:only-child) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: var(
+      --hx-button-group-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
   }
 
   /* ─── Border Radius: Vertical — First child keeps top corners ─── */
 
   .group--vertical ::slotted(:first-child:not(:only-child)) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem) 0 0;
+    --hx-button-border-radius: var(
+        --hx-button-group-border-radius,
+        var(--hx-border-radius-md, 0.375rem)
+      )
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0;
   }
 
   /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */
 
   .group--vertical ::slotted(:last-child:not(:only-child)) {
-    --hx-button-border-radius: 0 0 var(--hx-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: 0 0
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Border Radius: Vertical — Middle children have no radius ─── */
@@ -90,7 +108,7 @@ const m = h`
   /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */
 
   .group ::slotted(:focus-within) {
-    z-index: 1;
+    z-index: var(--hx-button-group-focus-z-index, 1);
     position: relative;
   }
 
@@ -103,16 +121,16 @@ const m = h`
      * outline from hx-button's own forced-colors block is fully visible.
      */
     .group ::slotted(:focus-within) {
-      z-index: 2;
+      z-index: var(--hx-button-group-focus-z-index-hc, 2);
     }
   }
 `;
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (r, e, l, i) => {
-  for (var t = i > 1 ? void 0 : i ? f(e, l) : e, a = r.length - 1, d; a >= 0; a--)
-    (d = r[a]) && (t = (i ? d(e, l, t) : d(t)) || t);
-  return i && t && g(e, l, t), t;
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? f(e, a) : e, l = r.length - 1, d; l >= 0; l--)
+    (d = r[l]) && (t = (i ? d(e, a, t) : d(t)) || t);
+  return i && t && v(e, a, t), t;
 };
-let o = class extends b {
+let o = class extends g {
   constructor() {
     super(...arguments), this._orientation = "horizontal", this.size = "md", this.label = "";
   }
@@ -131,10 +149,10 @@ let o = class extends b {
   }
   // ─── Render ───
   render() {
-    return u`
+    return h`
       <div
         part="group"
-        class=${p({
+        class=${b({
       group: !0,
       "group--horizontal": this.orientation === "horizontal",
       "group--vertical": this.orientation === "vertical"
@@ -145,7 +163,7 @@ let o = class extends b {
     `;
   }
 };
-o.styles = [m];
+o.styles = [x, p];
 s([
   n({ type: String, reflect: !0 })
 ], o.prototype, "orientation", 1);
@@ -161,4 +179,4 @@ o = s([
 export {
   o as H
 };
-//# sourceMappingURL=hx-button-group-BJOGWoMa.js.map
+//# sourceMappingURL=hx-button-group-BI-QBqmO.js.map

package/dist/shared/hx-button-group-BI-QBqmO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-button-group-BI-QBqmO.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-inline-start: var(\n      --hx-button-group-divider-offset,\n      calc(-1 * var(--hx-border-width-thin, 1px))\n    );\n  }\n\n  /* ─── No Double Borders: Vertical ─── */\n\n  .group--vertical ::slotted(*:not(:first-child)) {\n    margin-top: var(--hx-button-group-divider-offset, 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(\n      --hx-button-group-border-radius,\n      var(--hx-border-radius-md, 0.375rem)\n    );\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(\n        --hx-button-group-border-radius,\n        var(--hx-border-radius-md, 0.375rem)\n      )\n      0 0 var(--hx-button-group-border-radius, 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\n      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))\n      var(--hx-button-group-border-radius, 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(\n      --hx-button-group-border-radius,\n      var(--hx-border-radius-md, 0.375rem)\n    );\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(\n        --hx-button-group-border-radius,\n        var(--hx-border-radius-md, 0.375rem)\n      )\n      var(--hx-button-group-border-radius, 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\n      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))\n      var(--hx-button-group-border-radius, 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: var(--hx-button-group-focus-z-index, 1);\n    position: relative;\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    /*\n     * In forced-colors mode, negative margins that collapse borders between grouped\n     * buttons can obscure focus rings. Raise focused children so the Highlight\n     * outline from hx-button's own forced-colors block is fully visible.\n     */\n    .group ::slotted(:focus-within) {\n      z-index: var(--hx-button-group-focus-z-index-hc, 2);\n    }\n  }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixButtonGroupStyles } from './hx-button-group.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.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 * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n */\n@customElement('hx-button-group')\nexport class HelixButtonGroup extends HelixElement {\n  static override styles = [helixButtonGroupStyles, forcedColorsInteractive];\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 on the host element.\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  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): 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      if (this.label) {\n        this.setAttribute('aria-label', this.label);\n      } else {\n        this.removeAttribute('aria-label');\n      }\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'group');\n    this.style.setProperty('--hx-button-group-size', this.size);\n    if (this.label) {\n      this.setAttribute('aria-label', this.label);\n    } else {\n      devWarn(\n        'hx-button-group',\n        'Missing accessible label. Provide a `label` attribute so screen readers can announce the group purpose (WCAG 4.1.2).',\n      );\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","HelixElement","value","changedProperties","html","classMap","forcedColorsInteractive","__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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC4B/B,IAAMC,IAAN,cAA+BC,EAAa;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAsBL,KAAQ,eAA0C,cAQlD,KAAA,OAA2B,MAU3B,KAAA,QAAgB;AAAA,EAAA;AAAA,EAhChB,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,EA2BS,QAAQC,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,KAC9B,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GAGxDA,EAAkB,IAAI,OAAO,MAC3B,KAAK,QACP,KAAK,aAAa,cAAc,KAAK,KAAK,IAE1C,KAAK,gBAAgB,YAAY;AAAA,EAGvC;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,OAAO,GACjC,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GACtD,KAAK,SACP,KAAK,aAAa,cAAc,KAAK,KAAK;AAAA,EAO9C;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;AA1FaL,EACK,SAAS,CAACF,GAAwBQ,CAAuB;AAOrEC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BR,EAQP,WAAA,eAAA,CAAA;AAsBJO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GA7BpDR,EA8BX,WAAA,QAAA,CAAA;AAUAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvCfR,EAwCX,WAAA,SAAA,CAAA;AAxCWA,IAANO,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBT,CAAA;"}

package/dist/shared/{hx-card-ycveujjL.js → hx-card-qNAM2QNV.js}

@@ -1,23 +1,24 @@
-import { css as g, nothing as n, html as v } from "lit";
+import { css as v, nothing as n, html as g } from "lit";
 import { property as h, state as s, customElement as x } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
+import { a as m } from "./forced-colors-CTEDFRGa.js";
 import { H as p } from "./helix-element-BNEYeiys.js";
-import { c as m } from "./id-counter-DuX8vsui.js";
-const _ = g`
+import { c as _ } from "./id-counter-DuX8vsui.js";
+const b = v`
   :host {
     display: block;
     color: var(--hx-card-color, inherit);
-    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
   }
 
   .card {
     display: flex;
     flex-direction: column;
     gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
-    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-card-color, var(--hx-color-neutral-800, #1e293b));
+    background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-card-color, var(--hx-color-text-strong, #202b39));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-card-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
     overflow: hidden;
     font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));
@@ -33,11 +34,14 @@ const _ = g`
   }
 
   .card--raised {
-    box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+    box-shadow: var(--hx-card-shadow, var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)));
   }
 
   .card--floating {
-    box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));
+    box-shadow: var(
+      --hx-card-shadow-floating,
+      var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1))
+    );
   }
 
   /* ─── Style Variants ─── */
@@ -47,8 +51,8 @@ const _ = g`
   }
 
   .card--featured {
-    border-color: var(--hx-color-primary-500, #2563eb);
-    border-width: var(--hx-border-width-medium, 2px);
+    border-color: var(--hx-card-featured-border-color, var(--hx-color-primary-500, #429797));
+    border-width: var(--hx-card-featured-border-width, var(--hx-border-width-medium, 2px));
   }
 
   .card--compact .card__body {
@@ -80,13 +84,13 @@ const _ = g`
   }
 
   .card--interactive:hover {
-    box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    box-shadow: var(--hx-card-shadow-hover, var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)));
     transform: translateY(var(--hx-transform-lift-md, -2px));
   }
 
   .card--interactive:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -143,7 +147,14 @@ const _ = g`
     flex: 1;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-card-color, var(--hx-color-neutral-600, #475569));
+    /*
+     * Body color cascades: component-tier --hx-card-body-color overrides
+     * the host-tier --hx-card-color, which falls back to text-secondary.
+     * Preserves the propagation contract: setting --hx-card-color on the
+     * host flows into the body slot (and through to slotted light-DOM
+     * descendants via flat-tree inheritance).
+     */
+    color: var(--hx-card-body-color, var(--hx-card-color, var(--hx-color-text-secondary, #313e4b)));
   }
 
   .card__footer {
@@ -161,11 +172,12 @@ const _ = g`
     padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-card-border-color, var(--hx-color-border-default, #d6dbd5));
     margin-top: auto;
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .card {
@@ -177,15 +189,15 @@ const _ = g`
     }
   }
 `;
-var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (a, r, o, d) => {
-  for (var t = d > 1 ? void 0 : d ? u(r, o) : r, c = a.length - 1, l; c >= 0; c--)
-    (l = a[c]) && (t = (d ? l(r, o, t) : l(t)) || t);
-  return d && t && b(r, o, t), t;
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (a, r, d, i) => {
+  for (var t = i > 1 ? void 0 : i ? y(r, d) : r, c = a.length - 1, l; c >= 0; c--)
+    (l = a[c]) && (t = (i ? l(r, d, t) : l(t)) || t);
+  return i && t && u(r, d, t), t;
 };
-const y = m("hx-card");
+const w = _("hx-card");
 let e = class extends p {
   constructor() {
-    super(...arguments), this.variant = "default", this.elevation = "flat", this.href = void 0, this.label = void 0, this._hasImage = !1, this._hasHeading = !1, this._hasFooter = !1, this._hasActions = !1, this._headingText = "", this._cardId = y(), this._headingId = `${this._cardId}-heading`;
+    super(...arguments), this.variant = "default", this.elevation = "flat", this.href = void 0, this.label = void 0, this._hasImage = !1, this._hasHeading = !1, this._hasFooter = !1, this._hasActions = !1, this._headingText = "", this._cardId = w(), this._headingId = `${this._cardId}-heading`;
   }
   /** @internal */
   _onImageSlotChange(a) {
@@ -194,10 +206,10 @@ let e = class extends p {
   }
   /** @internal */
   _onHeadingSlotChange(a) {
-    const o = a.target.assignedNodes({ flatten: !0 });
-    this._hasHeading = o.length > 0, this._headingText = o.map((d) => {
+    const d = a.target.assignedNodes({ flatten: !0 });
+    this._hasHeading = d.length > 0, this._headingText = d.map((i) => {
       var t;
-      return ((t = d.textContent) == null ? void 0 : t.trim()) ?? "";
+      return ((t = i.textContent) == null ? void 0 : t.trim()) ?? "";
     }).join(" ").trim();
   }
   /** @internal */
@@ -240,7 +252,7 @@ let e = class extends p {
       [`card--${this.elevation}`]: !0,
       "card--interactive": a
     };
-    return v`
+    return g`
       <div
         part="card"
         class=${f(r)}
@@ -283,38 +295,38 @@ e.shadowRootOptions = {
   ...p.shadowRootOptions,
   delegatesFocus: !0
 };
-e.styles = [_];
-i([
+e.styles = [b, m];
+o([
   h({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
-i([
+o([
   h({ type: String, reflect: !0 })
 ], e.prototype, "elevation", 2);
-i([
+o([
   h({ type: String, attribute: "hx-href" })
 ], e.prototype, "href", 2);
-i([
+o([
   h({ type: String, attribute: "hx-label" })
 ], e.prototype, "label", 2);
-i([
+o([
   s()
 ], e.prototype, "_hasImage", 2);
-i([
+o([
   s()
 ], e.prototype, "_hasHeading", 2);
-i([
+o([
   s()
 ], e.prototype, "_hasFooter", 2);
-i([
+o([
   s()
 ], e.prototype, "_hasActions", 2);
-i([
+o([
   s()
 ], e.prototype, "_headingText", 2);
-e = i([
+e = o([
   x("hx-card")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-card-ycveujjL.js.map
+//# sourceMappingURL=hx-card-qNAM2QNV.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-card-qNAM2QNV.js","sources":["../../src/components/hx-card/hx-card.styles.ts","../../src/components/hx-card/hx-card.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-card styles.\n *\n * Component-tier tokens with two-level var() fallback:\n *   var(--hx-card-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n *   neutral-0 = #FFFFFF, neutral-200 = #D6DBD5, neutral-800 = #202B39,\n *   neutral-600 = #4A5362, primary-500 = #429797.\n */\nexport const helixCardStyles = css`\n  :host {\n    display: block;\n    color: var(--hx-card-color, inherit);\n    background-color: var(--hx-card-bg, var(--hx-color-surface-default, #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-surface-default, #ffffff));\n    color: var(--hx-card-color, var(--hx-color-text-strong, #202b39));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-card-border-color, var(--hx-color-border-default, #d6dbd5));\n    border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    overflow: hidden;\n    font-family: var(--hx-card-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-card-shadow, var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)));\n  }\n\n  .card--floating {\n    box-shadow: var(\n      --hx-card-shadow-floating,\n      var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1))\n    );\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-card-featured-border-color, var(--hx-color-primary-500, #429797));\n    border-width: var(--hx-card-featured-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-inline-end: var(--hx-space-3, 0.75rem);\n    padding-inline-start: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__footer {\n    padding-inline-end: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-inline-start: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__actions {\n    padding-inline-end: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-inline-start: 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-card-shadow-hover, var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)));\n    transform: translateY(var(--hx-transform-lift-md, -2px));\n  }\n\n  .card--interactive:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\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-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: 0;\n    padding-inline-start: 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    /*\n     * Body color cascades: component-tier --hx-card-body-color overrides\n     * the host-tier --hx-card-color, which falls back to text-secondary.\n     * Preserves the propagation contract: setting --hx-card-color on the\n     * host flows into the body slot (and through to slotted light-DOM\n     * descendants via flat-tree inheritance).\n     */\n    color: var(--hx-card-body-color, var(--hx-card-color, var(--hx-color-text-secondary, #313e4b)));\n  }\n\n  .card__footer {\n    padding-top: 0;\n    padding-inline-end: 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-inline-start: 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-inline-end: 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-inline-start: 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-border-default, #d6dbd5));\n    margin-top: auto;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n  @media (forced-colors: active) {\n    .card {\n      border-color: CanvasText;\n    }\n\n    .card__actions {\n      border-top-color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixCardStyles } from './hx-card.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextCardId = createIdCounter('hx-card');\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 * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-border-width-medium] - Width.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-card-focus-ring-color=var(--hx-focus-ring-color)] - Color.\n * @cssprop [--hx-card-font-family=var(--hx-font-family-sans)] - Font family for card text content.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-shadow-lg] - Box shadow.\n * @cssprop [--hx-shadow-md] - Box shadow.\n * @cssprop [--hx-shadow-xl] - Box shadow.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-transform-lift-md] - Transform applied on hover to lift the card.\n * @cssprop [--hx-transition-normal] - Transition timing.\n */\n@customElement('hx-card')\nexport class HelixCard extends HelixElement {\n  /** @internal */\n  static override shadowRootOptions = {\n    ...HelixElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static override styles = [helixCardStyles, forcedColorsSurface];\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 the hx-href attribute to avoid conflicting with the native HTML href attribute.\n   * @attr hx-href\n   */\n  @property({ type: String, attribute: 'hx-href' })\n  href: 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-label\n   */\n  @property({ type: String, attribute: 'hx-label' })\n  label: 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  /**\n   * Text content extracted from the heading slot, used as a fallback accessible\n   * name for interactive cards when no explicit `hx-label` is provided.\n   * @internal\n   */\n  @state() private _headingText = '';\n\n  /**\n   * Unique identifier for this card instance, used in ARIA attributes.\n   * @internal\n   */\n  private _cardId = _nextCardId();\n  /**\n   * Unique identifier for the heading element, used in aria-labelledby.\n   * @internal\n   */\n  private _headingId = `${this._cardId}-heading`;\n\n  /** @internal */\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  /** @internal */\n  private _onHeadingSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasHeading = nodes.length > 0;\n    this._headingText = nodes\n      .map((n) => n.textContent?.trim() ?? '')\n      .join(' ')\n      .trim();\n  }\n\n  /** @internal */\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  /** @internal */\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.href) {\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  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    // WCAG 4.1.2: interactive cards (with hx-href) must have an accessible name\n    if (\n      (changedProperties.has('href') || changedProperties.has('label')) &&\n      this.href &&\n      !this.label &&\n      !this._headingText\n    ) {\n      devWarn(\n        'hx-card',\n        \"Interactive card (hx-href is set) is missing an accessible name. Set `hx-label` or provide heading slot content to describe the card's destination or purpose (WCAG 4.1.2).\",\n      );\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n    if (!this.href) 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.href, originalEvent },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    this._dispatchCardClick(e);\n  }\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (!this.href) return;\n\n    // WCAG 2.1.1 / ARIA APG: role=\"link\" activates on Enter only.\n    // Space is reserved for scrolling and must not activate links.\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      this._dispatchCardClick(e);\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isInteractive = !!this.href;\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.label ? this.label : nothing}\n        aria-labelledby=${this._hasHeading && !this.label ? this._headingId : 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\n          class=\"card__heading\"\n          part=\"heading\"\n          id=${this._headingId}\n          ?hidden=${!this._hasHeading}\n        >\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","_nextCardId","createIdCounter","HelixCard","HelixElement","e","slot","nodes","n","_a","changedProperties","originalEvent","isInteractive","classes","html","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}