@helixui/library 1.1.2-next.2 → 1.1.2-next.4

package/dist/shared/{hx-button-6S3DwuIj.js → hx-button-CC1YH9RZ.js}

@@ -1,11 +1,11 @@
-import { css as p, html as l, nothing as n, LitElement as c } from "lit";
+import { css as c, html as l, nothing as n, LitElement as p } from "lit";
 import { property as o, 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";
 import { d as g } from "./dev-warn-YlwPHjtX.js";
 import { m } from "./aria-delegation-CBP9eQ0M.js";
-const y = p`
+const y = c`
   :host {
     display: inline-block;
   }
@@ -267,13 +267,47 @@ const y = p`
   .button__label {
     flex: 1 1 auto;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .button {
+      /* Ensure button outline is visible in Windows High Contrast mode.
+         ButtonText/ButtonFace are system colors recognized by the browser. */
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+
+    .button:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .button[disabled] {
+      background-color: ButtonFace;
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    .button--loading .button__spinner {
+      /* Ensure spinner is visible in HCM */
+      forced-color-adjust: auto;
+    }
+  }
 `;
 var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (r, a, s, h) => {
-  for (var i = h > 1 ? void 0 : h ? w(a, s) : a, b = r.length - 1, u; b >= 0; b--)
-    (u = r[b]) && (i = (h ? u(a, s, i) : u(i)) || i);
+  for (var i = h > 1 ? void 0 : h ? w(a, s) : a, u = r.length - 1, b; u >= 0; u--)
+    (b = r[u]) && (i = (h ? b(a, s, i) : b(i)) || i);
   return h && i && _(a, s, i), i;
 };
-let t = class extends m(c) {
+let t = class extends m(p) {
   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.full = !1, this.inverted = !1, this._internals = this.attachInternals();
   }
@@ -301,8 +335,10 @@ let t = class extends m(c) {
     !(r.target.assignedNodes({ flatten: !0 }).length > 0) && this.ariaLabel;
   }
   // ─── Event Handling ───
-  /** @private */
-  /** @internal */
+  /**
+   * @private
+   * @internal
+   */
   _handleClick(r) {
     if (this.disabled || this.loading) {
       r.preventDefault(), r.stopPropagation();
@@ -317,8 +353,10 @@ let t = class extends m(c) {
     ), this.href === void 0 && this.type === "submit" && this._internals.form ? (this.name !== void 0 && this.value !== void 0 && this._internals.setFormValue(this.value), this._internals.form.requestSubmit()) : this.href === void 0 && this.type === "reset" && this._internals.form && this._internals.form.reset();
   }
   // ─── Render Helpers ───
-  /** @private */
-  /** @internal */
+  /**
+   * @private
+   * @internal
+   */
   _renderSpinner() {
     return l`
       <svg
@@ -347,8 +385,10 @@ let t = class extends m(c) {
       </svg>
     `;
   }
-  /** @private */
-  /** @internal */
+  /**
+   * @private
+   * @internal
+   */
   _renderInner() {
     return l`
       ${this.loading ? this._renderSpinner() : n}
@@ -450,4 +490,4 @@ t = e([
 export {
   t as H
 };
-//# sourceMappingURL=hx-button-6S3DwuIj.js.map
+//# sourceMappingURL=hx-button-CC1YH9RZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-button-CC1YH9RZ.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 {\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  /* 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-neutral-0));\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(\n      --hx-button-inverted-focus-ring-color,\n      var(--hx-overlay-white-50, rgba(255, 255, 255, 0.5))\n    );\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: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));\n  }\n\n  :host([inverted]) .button--secondary:hover {\n    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n  }\n\n  /* Tertiary inverted */\n  :host([inverted]) .button--tertiary {\n    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n    --hx-button-border-color: transparent;\n  }\n\n  :host([inverted]) .button--tertiary:hover {\n    --hx-button-bg: var(--hx-overlay-white-25, 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(\n      --hx-button-inverted-ghost-hover-bg,\n      var(--hx-overlay-white-20, rgba(255, 255, 255, 0.2))\n    );\n  }\n\n  /* Outline inverted — white border */\n  :host([inverted]) .button--outline {\n    --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));\n  }\n\n  :host([inverted]) .button--outline:hover {\n    --hx-button-bg: var(--hx-overlay-white-15, 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  /* ─── 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: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 { LitElement, html, nothing, type TemplateResult, type PropertyValues } 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 { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixButtonStyles } from './hx-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.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 mixinDelegatesAria(LitElement) {\n  static override styles = [tokenStyles, helixButtonStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\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  // ─── Form API ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** @internal */\n  formDisabledCallback(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  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.assignedNodes({ flatten: true }).length > 0;\n    if (!hasContent && !this.ariaLabel) {\n      devWarn(\n        'hx-button',\n        'hx-button has no label and no aria-label — button will have no accessible name.',\n      );\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.ariaLabel ?? 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.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","mixinDelegatesAria","LitElement","disabled","changedProperties","validVariants","devWarn","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;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"}

package/dist/shared/{hx-clinical-status-De8yrA5I.js → hx-clinical-status-D6eaplvs.js}

@@ -189,7 +189,8 @@ const b = v`
   }
 
   .clinical-status__dismiss-button:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -234,7 +235,8 @@ const b = v`
   }
 
   .clinical-status__acknowledge-button:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -464,4 +466,4 @@ i = a([
 export {
   i as H
 };
-//# sourceMappingURL=hx-clinical-status-De8yrA5I.js.map
+//# sourceMappingURL=hx-clinical-status-D6eaplvs.js.map

package/dist/shared/hx-clinical-status-D6eaplvs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-clinical-status-D6eaplvs.js","sources":["../../src/components/hx-clinical-status/hx-clinical-status.styles.ts","../../src/components/hx-clinical-status/hx-clinical-status.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixClinicalStatusStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Screen-reader-only utility ─── */\n  /* @design-system-approved: WCAG standard visually-hidden technique for a11y */\n\n  .sr-only {\n    position: absolute;\n    width: 1px; /* @design-system-approved: standard sr-only technique */\n    height: 1px; /* @design-system-approved: standard sr-only technique */\n    padding: 0;\n    margin: -1px; /* @design-system-approved: standard sr-only technique */\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Container ─── */\n\n  .clinical-status {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));\n    padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));\n    border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid\n      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #b3d9ef));\n    border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid\n      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #3b82f6));\n    border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #e8f4fd));\n    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));\n    font-family: var(--hx-clinical-status-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Compact Mode ─── */\n\n  .clinical-status--compact {\n    padding: var(\n      --hx-clinical-status-compact-padding,\n      var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem)\n    );\n    gap: var(--hx-space-2, 0.5rem);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  /* ─── Severity: info ─── */\n\n  :host([severity='info']) .clinical-status,\n  :host(:not([severity])) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-info-50, #e8f4fd);\n    --hx-clinical-status-border-color: var(--hx-color-info-200, #b3d9ef);\n    --hx-clinical-status-accent-color: var(--hx-color-info-500, #3b82f6);\n    --hx-clinical-status-color: var(--hx-color-info-800, #1a3a4a);\n    --hx-clinical-status-icon-color: var(--hx-color-info-500, #3b82f6);\n  }\n\n  /* ─── Severity: warning ─── */\n\n  :host([severity='warning']) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);\n    --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);\n    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #f59e0b);\n    --hx-clinical-status-color: var(--hx-color-warning-800, #92400e);\n    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #f59e0b);\n  }\n\n  /* ─── Severity: critical ─── */\n\n  :host([severity='critical']) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);\n    --hx-clinical-status-accent-color: var(--hx-color-error-500, #ef4444);\n    --hx-clinical-status-color: var(--hx-color-error-800, #991b1b);\n    --hx-clinical-status-icon-color: var(--hx-color-error-500, #ef4444);\n  }\n\n  /* ─── Severity: emergent ─── */\n\n  :host([severity='emergent']) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);\n    --hx-clinical-status-accent-color: var(--hx-color-error-700, #b91c1c);\n    --hx-clinical-status-color: var(--hx-color-error-900, #7f1d1d);\n    --hx-clinical-status-icon-color: var(--hx-color-error-700, #b91c1c);\n    border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);\n    font-weight: var(--hx-font-weight-semibold, 600);\n  }\n\n  /* ─── Icon ─── */\n\n  .clinical-status__icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #3b82f6));\n  }\n\n  .clinical-status__icon svg {\n    width: var(--hx-space-5, 1.25rem);\n    height: var(--hx-space-5, 1.25rem);\n    fill: currentColor;\n  }\n\n  .clinical-status--compact .clinical-status__icon svg {\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Message ─── */\n\n  .clinical-status__message {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* ─── Severity Label (WCAG 1.4.1) ─── */\n  /* @design-system-approved: WCAG 1.4.1 non-color severity indicator for screen readers */\n\n  .clinical-status__severity-label {\n    position: absolute;\n    width: 1px; /* @design-system-approved: standard sr-only technique */\n    height: 1px; /* @design-system-approved: standard sr-only technique */\n    padding: 0;\n    margin: -1px; /* @design-system-approved: standard sr-only technique */\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Actions ─── */\n\n  .clinical-status__actions {\n    display: none;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    margin-inline-start: auto;\n    flex-shrink: 0;\n  }\n\n  .clinical-status__actions--visible {\n    display: flex;\n  }\n\n  /* ─── Dismiss Button ─── */\n\n  .clinical-status__dismiss-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    min-width: var(--hx-touch-target-size, 44px);\n    min-height: var(--hx-touch-target-size, 44px);\n    padding: 0;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));\n    cursor: pointer;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: 1;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      opacity var(--hx-transition-fast, 150ms ease);\n    opacity: 0.7;\n  }\n\n  .clinical-status__dismiss-button:hover {\n    opacity: 1;\n    background-color: color-mix(in srgb, currentColor 10%, transparent);\n  }\n\n  .clinical-status__dismiss-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    opacity: 1;\n  }\n\n  .clinical-status__dismiss-button svg {\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    fill: currentColor;\n  }\n\n  .clinical-status--compact .clinical-status__dismiss-button {\n    min-width: var(--hx-space-8, 2rem);\n    min-height: var(--hx-space-8, 2rem);\n  }\n\n  /* ─── Acknowledge Button ─── */\n\n  .clinical-status__acknowledge-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n    border: var(--hx-border-width-thin, 1px) solid currentColor;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: inherit;\n    font-family: inherit;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    text-transform: uppercase;\n    letter-spacing: var(--hx-letter-spacing-wide, 0.05em);\n    cursor: pointer;\n    line-height: var(--hx-line-height-normal, 1.5);\n    min-height: var(--hx-touch-target-size, 44px);\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      opacity var(--hx-transition-fast, 150ms ease);\n  }\n\n  .clinical-status__acknowledge-button:hover {\n    background-color: color-mix(in srgb, currentColor 10%, transparent);\n  }\n\n  .clinical-status__acknowledge-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .clinical-status--compact .clinical-status__acknowledge-button {\n    min-height: var(--hx-space-8, 2rem);\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .clinical-status__dismiss-button,\n    .clinical-status__acknowledge-button {\n      transition: none;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } 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 { HelixElement } from '../../base/index.js';\nimport { createIdCounter } from '../../base/index.js';\nimport { helixClinicalStatusStyles } from './hx-clinical-status.styles.js';\n\n/** Clinical severity level for alert fatigue prevention. */\nexport type ClinicalSeverity = 'info' | 'warning' | 'critical' | 'emergent';\n\nconst nextId = createIdCounter('hx-clinical-status');\n\n/**\n * A clinical status indicator designed for healthcare alert fatigue prevention.\n * Standardizes clinical alert presentations to reduce cognitive overload from\n * inconsistent color/icon combinations across healthcare interfaces.\n *\n * @summary Clinical status indicator for standardized healthcare alert fatigue prevention.\n *\n * @tag hx-clinical-status\n *\n * @slot - Default slot for additional message content.\n *\n * @fires {CustomEvent<void>} hx-dismiss - Dispatched when the user dismisses the status.\n * @fires {CustomEvent<{ severity: ClinicalSeverity; persistent: boolean }>} hx-acknowledge - Dispatched when the user acknowledges a critical/emergent status.\n *\n * @csspart container - The outer status container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart actions - The actions container (dismiss/acknowledge buttons).\n * @csspart dismiss-button - The dismiss button (only rendered when dismissible).\n * @csspart acknowledge-button - The acknowledge button (only rendered when acknowledgeable).\n *\n * @cssprop [--hx-clinical-status-bg=var(--hx-color-info-50)] - Background color.\n * @cssprop [--hx-clinical-status-color=var(--hx-color-info-800)] - Text color.\n * @cssprop [--hx-clinical-status-border-color=var(--hx-color-info-200)] - Border color.\n * @cssprop [--hx-clinical-status-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-clinical-status-border-width=var(--hx-border-width-thin)] - Border width.\n * @cssprop [--hx-clinical-status-accent-color=var(--hx-color-info-500)] - Left accent stripe color.\n * @cssprop [--hx-clinical-status-accent-width=4px] - Left accent stripe width.\n * @cssprop [--hx-clinical-status-padding=var(--hx-space-4)] - Container padding.\n * @cssprop [--hx-clinical-status-gap=var(--hx-space-3)] - Gap between elements.\n * @cssprop [--hx-clinical-status-icon-color=var(--hx-color-info-500)] - Icon color.\n * @cssprop [--hx-clinical-status-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-clinical-status-compact-padding] - Padding in compact mode.\n * @cssprop [--hx-clinical-status-emergent-accent-width=6px] - Accent width for emergent severity.\n */\n@customElement('hx-clinical-status')\nexport class HelixClinicalStatus extends HelixElement {\n  static override styles = [tokenStyles, helixClinicalStatusStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Clinical severity level that determines visual styling and ARIA semantics.\n   * - `info`: Informational, non-urgent (role=\"status\")\n   * - `warning`: Requires attention but not immediate (role=\"status\")\n   * - `critical`: Requires prompt clinical attention (role=\"alert\")\n   * - `emergent`: Life-threatening, immediate action required (role=\"alert\")\n   * @attr severity\n   */\n  @property({ type: String, reflect: true })\n  severity: ClinicalSeverity = 'info';\n\n  /**\n   * Status message text. Displayed as the primary content of the indicator.\n   * @attr message\n   */\n  @property({ type: String })\n  message = '';\n\n  /**\n   * Whether the status can be dismissed by the user.\n   * Critical and emergent statuses should require acknowledgment rather than simple dismissal.\n   * @attr dismissible\n   */\n  @property({ type: Boolean, reflect: true })\n  dismissible = false;\n\n  /**\n   * Whether the status survives page navigation.\n   * Defaults to false for info/warning, true for critical/emergent.\n   * When set explicitly, overrides the severity-based default.\n   * @attr persistent\n   */\n  @property({ type: Boolean, reflect: true })\n  persistent = false;\n\n  /**\n   * Optional custom icon name. When not set, a default severity-appropriate icon is shown.\n   * @attr icon\n   */\n  @property({ type: String })\n  icon = '';\n\n  /**\n   * Compact mode for dense clinical UIs (e.g. patient dashboards, bedside displays).\n   * Reduces padding, font size, and icon size.\n   * @attr compact\n   */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  // ─── State ───\n\n  /** @internal */\n  @state()\n  private _hasSlottedContent = false;\n\n  /** @internal */\n  @state()\n  private _acknowledged = false;\n\n  /**\n   * SSR-safe unique ID for ARIA relationships.\n   * @internal\n   */\n  private _componentId = nextId();\n\n  /**\n   * Tracks whether `persistent` was explicitly set by the consumer.\n   * @internal\n   */\n  private _persistentExplicitlySet = false;\n\n  // ─── Private Helpers ───\n\n  /** Returns true when the severity requires assertive announcement. */\n  private get _isAssertive(): boolean {\n    return this.severity === 'critical' || this.severity === 'emergent';\n  }\n\n  /** Returns the appropriate ARIA role based on severity. */\n  private get _role(): string {\n    return this._isAssertive ? 'alert' : 'status';\n  }\n\n  /** Returns the default severity label for screen readers (WCAG 1.4.1). */\n  private _severityLabel(): string {\n    const labels: Record<ClinicalSeverity, string> = {\n      info: 'Info:',\n      warning: 'Warning:',\n      critical: 'Critical:',\n      emergent: 'Emergent:',\n    };\n    return labels[this.severity] ?? '';\n  }\n\n  /** Returns true when the severity requires explicit acknowledgment. */\n  private get _requiresAcknowledgment(): boolean {\n    return this.severity === 'critical' || this.severity === 'emergent';\n  }\n\n  /** Effective persistent value, considering severity-based defaults. */\n  private get _effectivePersistent(): boolean {\n    if (this._persistentExplicitlySet) {\n      return this.persistent;\n    }\n    return this._isAssertive;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', this._role);\n  }\n\n  override attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n    super.attributeChangedCallback(name, _old, value);\n    if (name === 'persistent') {\n      this._persistentExplicitlySet = value !== null;\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('severity')) {\n      this.setAttribute('role', this._role);\n    }\n  }\n\n  // ─── Default Icons ───\n\n  /** @internal */\n  private _renderInfoIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderWarningIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderCriticalIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderEmergentIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1 4a1 1 0 112 0v4a1 1 0 11-2 0V6zm1 9a1.25 1.25 0 100-2.5A1.25 1.25 0 0010 15z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderDefaultIcon() {\n    switch (this.severity) {\n      case 'warning':\n        return this._renderWarningIcon();\n      case 'critical':\n        return this._renderCriticalIcon();\n      case 'emergent':\n        return this._renderEmergentIcon();\n      case 'info':\n      default:\n        return this._renderInfoIcon();\n    }\n  }\n\n  /** @internal */\n  private _renderCloseIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n      />\n    </svg>`;\n  }\n\n  // ─── Slot Change Handling ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSlottedContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleDismiss(): void {\n    this.dispatchEvent(\n      new CustomEvent<void>('hx-dismiss', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleAcknowledge(): void {\n    this._acknowledged = true;\n    this.dispatchEvent(\n      new CustomEvent<{ severity: ClinicalSeverity; persistent: boolean }>('hx-acknowledge', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          severity: this.severity,\n          persistent: this._effectivePersistent,\n        },\n      }),\n    );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      'clinical-status': true,\n      [`clinical-status--${this.severity}`]: true,\n      'clinical-status--compact': this.compact,\n    };\n\n    const severityLabel = this._severityLabel();\n    const messageId = `${this._componentId}-message`;\n\n    return html`\n      <div part=\"container\" class=${classMap(classes)} aria-labelledby=${messageId}>\n        <span class=\"clinical-status__severity-label\">${severityLabel}</span>\n\n        <div part=\"icon\" class=\"clinical-status__icon\">\n          ${this.icon\n            ? html`<span class=\"clinical-status__custom-icon\">${this.icon}</span>`\n            : this._renderDefaultIcon()}\n        </div>\n\n        <div id=${messageId} part=\"message\" class=\"clinical-status__message\">\n          ${this.message}\n          ${this._hasSlottedContent\n            ? html`<div class=\"clinical-status__slot-content\">\n                <slot @slotchange=${this._handleSlotChange}></slot>\n              </div>`\n            : html`<slot @slotchange=${this._handleSlotChange}></slot>`}\n        </div>\n\n        <div\n          part=\"actions\"\n          class=${classMap({\n            'clinical-status__actions': true,\n            'clinical-status__actions--visible': this.dismissible || this._requiresAcknowledgment,\n          })}\n        >\n          ${this._requiresAcknowledgment && !this._acknowledged\n            ? html`\n                <button\n                  part=\"acknowledge-button\"\n                  class=\"clinical-status__acknowledge-button\"\n                  @click=${this._handleAcknowledge}\n                >\n                  Acknowledge\n                </button>\n              `\n            : nothing}\n          ${this.dismissible\n            ? html`\n                <button\n                  part=\"dismiss-button\"\n                  class=\"clinical-status__dismiss-button\"\n                  aria-label=\"Dismiss clinical status\"\n                  @click=${this._handleDismiss}\n                >\n                  ${this._renderCloseIcon()}\n                </button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-clinical-status': HelixClinicalStatus;\n  }\n}\n\n/** Canonical type alias for the hx-clinical-status component. */\nexport type HxClinicalStatus = HelixClinicalStatus;\n"],"names":["helixClinicalStatusStyles","css","nextId","createIdCounter","HelixClinicalStatus","HelixElement","name","_old","value","changedProperties","html","e","slot","classes","severityLabel","messageId","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helixui/library",
-  "version": "1.1.2-next.2",
+  "version": "1.1.2-next.4",
   "description": "Enterprise Web Component Library built with Lit 3.x",
   "type": "module",
   "sideEffects": [
@@ -43,7 +43,7 @@
   "customElements": "custom-elements.json",
   "dependencies": {
     "lit": "^3.3.2",
-    "@helixui/tokens": "0.3.4-next.2"
+    "@helixui/tokens": "0.3.4-next.4"
   },
   "peerDependencies": {
     "@floating-ui/dom": "^1.7.6"

package/dist/shared/hx-avatar-7p1cj3lG.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-avatar-7p1cj3lG.js","sources":["../../src/components/hx-avatar/hx-avatar.styles.ts","../../src/components/hx-avatar/hx-avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAvatarStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */\n  .avatar-wrapper {\n    position: relative;\n    display: inline-flex;\n  }\n\n  .avatar {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    width: var(--hx-avatar-size);\n    height: var(--hx-avatar-size);\n    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));\n    color: var(--hx-avatar-color, var(--hx-color-primary-700));\n    border-radius: var(--hx-avatar-border-radius);\n    flex-shrink: 0;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .avatar--xs {\n    --hx-avatar-size: var(--hx-size-6, 1.5rem);\n    --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);\n  }\n\n  .avatar--sm {\n    --hx-avatar-size: var(--hx-size-8, 2rem);\n    --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  .avatar--md {\n    --hx-avatar-size: var(--hx-size-10, 2.5rem);\n    --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .avatar--lg {\n    --hx-avatar-size: var(--hx-size-12, 3rem);\n    --hx-avatar-font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  .avatar--xl {\n    --hx-avatar-size: var(--hx-size-16, 4rem);\n    --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);\n  }\n\n  /* ─── Shape Variants ─── */\n\n  .avatar--circle {\n    --hx-avatar-border-radius: 50%;\n  }\n\n  .avatar--square {\n    --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Image ─── */\n\n  .avatar__image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  /* ─── Initials ─── */\n\n  .avatar__initials {\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-avatar-font-size);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    line-height: 1;\n    text-transform: uppercase;\n    letter-spacing: var(--hx-letter-spacing-wide, 0.025em);\n    user-select: none;\n  }\n\n  /* ─── Fallback Icon ─── */\n\n  .avatar__fallback-icon {\n    width: 60%;\n    height: 60%;\n    color: var(--hx-avatar-color, var(--hx-color-primary-700));\n  }\n\n  /* ─── Badge Slot ─── */\n\n  /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */\n  .avatar__badge {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n  }\n\n  /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */\n  .avatar__badge--hidden {\n    display: none;\n  }\n\n  /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,\n     leaving no visual boundary. Add a border so the avatar remains perceivable.\n     WCAG 1.4.11 Non-text Contrast (Level AA). */\n  @media (forced-colors: active) {\n    .avatar {\n      border: 2px solid ButtonText;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } 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 { helixAvatarStyles } from './hx-avatar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A user avatar component that displays an image, initials, or a fallback icon.\n * Supports a badge slot for status indicator overlays.\n *\n * @summary User avatar with image, initials, and fallback icon support for healthcare applications.\n *\n * @tag hx-avatar\n *\n * @slot - Default slot for custom avatar content. Overrides src and initials when slotted content is present.\n * @slot badge - Status indicator overlay, positioned at the bottom-right of the avatar container.\n *\n * @csspart avatar - The outer container element.\n * @csspart image - The img element shown when src is provided.\n * @csspart initials - The initials text span shown as a fallback.\n * @csspart fallback-icon - The SVG person silhouette shown when no src or initials are available.\n * @csspart badge - The badge slot container.\n *\n * @cssprop [--hx-avatar-size] - Computed width and height from the size variant.\n * @cssprop [--hx-avatar-border-radius] - Circle = 50%, Square = var(--hx-border-radius-md).\n * @cssprop [--hx-avatar-bg=var(--hx-color-primary-100)] - Background color of the avatar container.\n * @cssprop [--hx-avatar-color=var(--hx-color-primary-700)] - Text and icon color inside the avatar.\n * @cssprop [--hx-avatar-font-size] - Font size for the initials text, set per size variant.\n */\n@customElement('hx-avatar')\nexport class HelixAvatar extends LitElement {\n  static override styles = [tokenStyles, helixAvatarStyles];\n\n  /**\n   * Image URL. When provided and successfully loaded, displays the image.\n   * @attr src\n   */\n  @property({ type: String })\n  src: string | undefined = undefined;\n\n  /**\n   * Accessible label for the image. Required when `src` is provided.\n   * Used as the container's aria-label in image mode.\n   * @attr alt\n   */\n  @property({ type: String })\n  alt = '';\n\n  /**\n   * Human-readable accessible name for non-image states (initials, fallback icon).\n   * In healthcare contexts, provide the full person name (e.g., \"Dr. Jane Doe\") rather than\n   * relying on raw initials, which screen readers announce as individual letters.\n   * When set, takes precedence over raw initials and the generic \"Avatar\" fallback.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Fallback initials text displayed when no image is available.\n   * @attr initials\n   */\n  @property({ type: String })\n  initials = '';\n\n  /**\n   * Size variant of the avatar.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /**\n   * Shape variant of the avatar.\n   * @attr shape\n   */\n  @property({ type: String, reflect: true })\n  shape: 'circle' | 'square' = 'circle';\n\n  /**\n   * Tracks whether the image failed to load, triggering the fallback chain.\n   * @internal\n   */\n  @state()\n  private _imgError = false;\n\n  /**\n   * Tracks whether the default slot has assigned content.\n   * @internal\n   */\n  @state()\n  private _hasDefaultSlot = false;\n\n  /**\n   * Tracks whether the badge slot has assigned content.\n   * @internal\n   */\n  @state()\n  private _hasBadgeSlot = false;\n\n  // ─── Lifecycle ───\n\n  // P1-A / P2-B: Use willUpdate() instead of updated() for property validation\n  // and derived state. willUpdate() runs before render() and does not schedule\n  // a second update cycle when @state() properties are mutated.\n  override willUpdate(changedProperties: PropertyValues<this>): void {\n    // P0-1: Reset image error state when src changes so a new valid src renders correctly.\n    if (changedProperties.has('src')) {\n      this._imgError = false;\n    }\n\n    // P1-2: Warn when src is provided without alt — silent accessibility failure in healthcare UIs.\n    if (changedProperties.has('src') || changedProperties.has('alt')) {\n      if (this.src && !this.alt) {\n        devWarn(\n          'hx-avatar',\n          'Accessibility: \"alt\" attribute is required when \"src\" is provided. ' +\n            'Without alt text, screen readers announce a non-descriptive label. ' +\n            'Add alt=\"Full name or description\" to your hx-avatar element.',\n        );\n      }\n    }\n\n    // P2-A: Warn when initials are used without label — screen readers announce\n    // raw initials as individual letters (e.g., \"J D\") instead of a name.\n    if (changedProperties.has('initials') || changedProperties.has('label')) {\n      if (this.initials && !this.label) {\n        devWarn(\n          'hx-avatar',\n          'Accessibility: \"label\" attribute is recommended when \"initials\" is provided. ' +\n            'Without label, screen readers announce raw initials as individual letters. ' +\n            'Add label=\"Full Name\" to your hx-avatar element.',\n        );\n      }\n    }\n\n    // P2-1: Warn when invalid size or shape attribute values are used (e.g., from Twig templates).\n    const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n    if (changedProperties.has('size') && !validSizes.includes(this.size)) {\n      devWarn(\n        'hx-avatar',\n        `Invalid hx-size=\"${String(this.size)}\". Valid values: xs, sm, md, lg, xl. Rendering with \"md\".`,\n      );\n    }\n    const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n    if (changedProperties.has('shape') && !validShapes.includes(this.shape)) {\n      devWarn(\n        'hx-avatar',\n        `Invalid shape=\"${String(this.shape)}\". Valid values: circle, square. Rendering with \"circle\".`,\n      );\n    }\n  }\n\n  // ─── Slot Change Handling ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasDefaultSlot = nodes.some((node) => {\n      if (node.nodeType === Node.ELEMENT_NODE) return true;\n      if (node.nodeType === Node.TEXT_NODE) {\n        return (node.textContent ?? '').trim().length > 0;\n      }\n      return false;\n    });\n  }\n\n  /** @internal */\n  private _handleBadgeSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasBadgeSlot = nodes.some((node) => {\n      if (node.nodeType === Node.ELEMENT_NODE) return true;\n      if (node.nodeType === Node.TEXT_NODE) {\n        return (node.textContent ?? '').trim().length > 0;\n      }\n      return false;\n    });\n\n    // P2-C: Warn when badge slot content lacks an accessible name.\n    // A plain <span class=\"dot\"></span> badge is invisible to screen readers.\n    if (this._hasBadgeSlot) {\n      const hasAccessibleName = nodes.some((node) => {\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          const el = node as Element;\n          return (\n            el.hasAttribute('aria-label') ||\n            el.hasAttribute('aria-labelledby') ||\n            !!el.getAttribute('role')\n          );\n        }\n        return false;\n      });\n      if (!hasAccessibleName) {\n        devWarn(\n          'hx-avatar',\n          'Accessibility: badge slot content should have an accessible name ' +\n            '(aria-label, role, etc.). Without it, the badge is invisible to screen readers.',\n        );\n      }\n    }\n  }\n\n  // ─── Image Error Handling ───\n\n  /** @internal */\n  private _handleImgError(): void {\n    this._imgError = true;\n  }\n\n  // ─── Fallback Icon ───\n\n  /** @internal */\n  private _renderFallbackIcon() {\n    return html`\n      <svg\n        part=\"fallback-icon\"\n        class=\"avatar__fallback-icon\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n        fill=\"currentColor\"\n      >\n        <path\n          d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\"\n        />\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const src = this.src;\n    const showSlot = this._hasDefaultSlot;\n    const showImage = !showSlot && !!src && !this._imgError;\n    const showInitials = !showSlot && !showImage && !!this.initials.trim();\n    const showFallback = !showSlot && !showImage && !showInitials;\n\n    // P1-1 / P1-7: Use label property for human-readable accessible name in non-image states.\n    const ariaLabel = showImage\n      ? this.alt || this.label || 'Avatar'\n      : showInitials\n        ? this.label || this.initials\n        : this.label || 'Avatar';\n\n    // P2-1: Safe class fallback for invalid attribute values supplied via HTML/Twig.\n    const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n    const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n    const sizeClass = validSizes.includes(this.size) ? this.size : 'md';\n    const shapeClass = validShapes.includes(this.shape) ? this.shape : 'circle';\n\n    const classes = {\n      avatar: true,\n      [`avatar--${sizeClass}`]: true,\n      [`avatar--${shapeClass}`]: true,\n    };\n\n    // P2-2: Badge wrapper is hidden (not removed) when empty so slotchange detection still works.\n    const badgeClasses = {\n      avatar__badge: true,\n      'avatar__badge--hidden': !this._hasBadgeSlot,\n    };\n\n    return html`\n      <div class=\"avatar-wrapper\">\n        <div\n          part=\"avatar\"\n          class=${classMap(classes)}\n          role=${showSlot ? nothing : 'img'}\n          aria-label=${showSlot ? nothing : ariaLabel}\n        >\n          <slot @slotchange=${this._handleSlotChange}></slot>\n          ${showImage && src\n            ? html`<img\n                part=\"image\"\n                class=\"avatar__image\"\n                src=${src}\n                alt=${this.alt}\n                aria-hidden=\"true\"\n                loading=\"lazy\"\n                @error=${this._handleImgError}\n              />`\n            : nothing}\n          ${showInitials\n            ? html`<span part=\"initials\" class=\"avatar__initials\">${this.initials.trim()}</span>`\n            : nothing}\n          ${showFallback ? this._renderFallbackIcon() : nothing}\n        </div>\n        <span part=\"badge\" class=${classMap(badgeClasses)}>\n          <slot name=\"badge\" @slotchange=${this._handleBadgeSlotChange}></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-avatar': HelixAvatar;\n  }\n}\n"],"names":["helixAvatarStyles","css","HelixAvatar","LitElement","changedProperties","validSizes","devWarn","validShapes","e","nodes","node","el","html","src","showSlot","showImage","showInitials","showFallback","ariaLabel","sizeClass","shapeClass","classes","badgeClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-button-6S3DwuIj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-button-6S3DwuIj.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 {\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  /* 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-neutral-0));\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(\n      --hx-button-inverted-focus-ring-color,\n      var(--hx-overlay-white-50, rgba(255, 255, 255, 0.5))\n    );\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: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));\n  }\n\n  :host([inverted]) .button--secondary:hover {\n    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n  }\n\n  /* Tertiary inverted */\n  :host([inverted]) .button--tertiary {\n    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n    --hx-button-border-color: transparent;\n  }\n\n  :host([inverted]) .button--tertiary:hover {\n    --hx-button-bg: var(--hx-overlay-white-25, 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(\n      --hx-button-inverted-ghost-hover-bg,\n      var(--hx-overlay-white-20, rgba(255, 255, 255, 0.2))\n    );\n  }\n\n  /* Outline inverted — white border */\n  :host([inverted]) .button--outline {\n    --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));\n  }\n\n  :host([inverted]) .button--outline:hover {\n    --hx-button-bg: var(--hx-overlay-white-15, 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, type PropertyValues } 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 { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixButtonStyles } from './hx-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.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 mixinDelegatesAria(LitElement) {\n  static override styles = [tokenStyles, helixButtonStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\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  // ─── Form API ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** @internal */\n  formDisabledCallback(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  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.assignedNodes({ flatten: true }).length > 0;\n    if (!hasContent && !this.ariaLabel) {\n      devWarn(\n        'hx-button',\n        'hx-button has no label and no aria-label — button will have no accessible name.',\n      );\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @private */\n  /** @internal */\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  /** @private */\n  /** @internal */\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  /** @internal */\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.ariaLabel ?? 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.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","mixinDelegatesAria","LitElement","disabled","changedProperties","validVariants","devWarn","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;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"}

package/dist/shared/hx-clinical-status-De8yrA5I.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-clinical-status-De8yrA5I.js","sources":["../../src/components/hx-clinical-status/hx-clinical-status.styles.ts","../../src/components/hx-clinical-status/hx-clinical-status.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixClinicalStatusStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Screen-reader-only utility ─── */\n  /* @design-system-approved: WCAG standard visually-hidden technique for a11y */\n\n  .sr-only {\n    position: absolute;\n    width: 1px; /* @design-system-approved: standard sr-only technique */\n    height: 1px; /* @design-system-approved: standard sr-only technique */\n    padding: 0;\n    margin: -1px; /* @design-system-approved: standard sr-only technique */\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Container ─── */\n\n  .clinical-status {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));\n    padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));\n    border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid\n      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #b3d9ef));\n    border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid\n      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #3b82f6));\n    border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #e8f4fd));\n    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));\n    font-family: var(--hx-clinical-status-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Compact Mode ─── */\n\n  .clinical-status--compact {\n    padding: var(\n      --hx-clinical-status-compact-padding,\n      var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem)\n    );\n    gap: var(--hx-space-2, 0.5rem);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  /* ─── Severity: info ─── */\n\n  :host([severity='info']) .clinical-status,\n  :host(:not([severity])) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-info-50, #e8f4fd);\n    --hx-clinical-status-border-color: var(--hx-color-info-200, #b3d9ef);\n    --hx-clinical-status-accent-color: var(--hx-color-info-500, #3b82f6);\n    --hx-clinical-status-color: var(--hx-color-info-800, #1a3a4a);\n    --hx-clinical-status-icon-color: var(--hx-color-info-500, #3b82f6);\n  }\n\n  /* ─── Severity: warning ─── */\n\n  :host([severity='warning']) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);\n    --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);\n    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #f59e0b);\n    --hx-clinical-status-color: var(--hx-color-warning-800, #92400e);\n    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #f59e0b);\n  }\n\n  /* ─── Severity: critical ─── */\n\n  :host([severity='critical']) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);\n    --hx-clinical-status-accent-color: var(--hx-color-error-500, #ef4444);\n    --hx-clinical-status-color: var(--hx-color-error-800, #991b1b);\n    --hx-clinical-status-icon-color: var(--hx-color-error-500, #ef4444);\n  }\n\n  /* ─── Severity: emergent ─── */\n\n  :host([severity='emergent']) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);\n    --hx-clinical-status-accent-color: var(--hx-color-error-700, #b91c1c);\n    --hx-clinical-status-color: var(--hx-color-error-900, #7f1d1d);\n    --hx-clinical-status-icon-color: var(--hx-color-error-700, #b91c1c);\n    border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);\n    font-weight: var(--hx-font-weight-semibold, 600);\n  }\n\n  /* ─── Icon ─── */\n\n  .clinical-status__icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #3b82f6));\n  }\n\n  .clinical-status__icon svg {\n    width: var(--hx-space-5, 1.25rem);\n    height: var(--hx-space-5, 1.25rem);\n    fill: currentColor;\n  }\n\n  .clinical-status--compact .clinical-status__icon svg {\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Message ─── */\n\n  .clinical-status__message {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* ─── Severity Label (WCAG 1.4.1) ─── */\n  /* @design-system-approved: WCAG 1.4.1 non-color severity indicator for screen readers */\n\n  .clinical-status__severity-label {\n    position: absolute;\n    width: 1px; /* @design-system-approved: standard sr-only technique */\n    height: 1px; /* @design-system-approved: standard sr-only technique */\n    padding: 0;\n    margin: -1px; /* @design-system-approved: standard sr-only technique */\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Actions ─── */\n\n  .clinical-status__actions {\n    display: none;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    margin-inline-start: auto;\n    flex-shrink: 0;\n  }\n\n  .clinical-status__actions--visible {\n    display: flex;\n  }\n\n  /* ─── Dismiss Button ─── */\n\n  .clinical-status__dismiss-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    min-width: var(--hx-touch-target-size, 44px);\n    min-height: var(--hx-touch-target-size, 44px);\n    padding: 0;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));\n    cursor: pointer;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: 1;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      opacity var(--hx-transition-fast, 150ms ease);\n    opacity: 0.7;\n  }\n\n  .clinical-status__dismiss-button:hover {\n    opacity: 1;\n    background-color: color-mix(in srgb, currentColor 10%, transparent);\n  }\n\n  .clinical-status__dismiss-button: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    opacity: 1;\n  }\n\n  .clinical-status__dismiss-button svg {\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    fill: currentColor;\n  }\n\n  .clinical-status--compact .clinical-status__dismiss-button {\n    min-width: var(--hx-space-8, 2rem);\n    min-height: var(--hx-space-8, 2rem);\n  }\n\n  /* ─── Acknowledge Button ─── */\n\n  .clinical-status__acknowledge-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n    border: var(--hx-border-width-thin, 1px) solid currentColor;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: inherit;\n    font-family: inherit;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    text-transform: uppercase;\n    letter-spacing: var(--hx-letter-spacing-wide, 0.05em);\n    cursor: pointer;\n    line-height: var(--hx-line-height-normal, 1.5);\n    min-height: var(--hx-touch-target-size, 44px);\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      opacity var(--hx-transition-fast, 150ms ease);\n  }\n\n  .clinical-status__acknowledge-button:hover {\n    background-color: color-mix(in srgb, currentColor 10%, transparent);\n  }\n\n  .clinical-status__acknowledge-button: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  .clinical-status--compact .clinical-status__acknowledge-button {\n    min-height: var(--hx-space-8, 2rem);\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .clinical-status__dismiss-button,\n    .clinical-status__acknowledge-button {\n      transition: none;\n    }\n  }\n`;\n","import { 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 { HelixElement } from '../../base/index.js';\nimport { createIdCounter } from '../../base/index.js';\nimport { helixClinicalStatusStyles } from './hx-clinical-status.styles.js';\n\n/** Clinical severity level for alert fatigue prevention. */\nexport type ClinicalSeverity = 'info' | 'warning' | 'critical' | 'emergent';\n\nconst nextId = createIdCounter('hx-clinical-status');\n\n/**\n * A clinical status indicator designed for healthcare alert fatigue prevention.\n * Standardizes clinical alert presentations to reduce cognitive overload from\n * inconsistent color/icon combinations across healthcare interfaces.\n *\n * @summary Clinical status indicator for standardized healthcare alert fatigue prevention.\n *\n * @tag hx-clinical-status\n *\n * @slot - Default slot for additional message content.\n *\n * @fires {CustomEvent} hx-dismiss - Dispatched when the user dismisses the status.\n * @fires {CustomEvent} hx-acknowledge - Dispatched when the user acknowledges a critical/emergent status.\n *\n * @csspart container - The outer status container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart actions - The actions container (dismiss/acknowledge buttons).\n * @csspart dismiss-button - The dismiss button (only rendered when dismissible).\n * @csspart acknowledge-button - The acknowledge button (only rendered when acknowledgeable).\n *\n * @cssprop [--hx-clinical-status-bg=var(--hx-color-info-50)] - Background color.\n * @cssprop [--hx-clinical-status-color=var(--hx-color-info-800)] - Text color.\n * @cssprop [--hx-clinical-status-border-color=var(--hx-color-info-200)] - Border color.\n * @cssprop [--hx-clinical-status-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-clinical-status-border-width=var(--hx-border-width-thin)] - Border width.\n * @cssprop [--hx-clinical-status-accent-color=var(--hx-color-info-500)] - Left accent stripe color.\n * @cssprop [--hx-clinical-status-accent-width=4px] - Left accent stripe width.\n * @cssprop [--hx-clinical-status-padding=var(--hx-space-4)] - Container padding.\n * @cssprop [--hx-clinical-status-gap=var(--hx-space-3)] - Gap between elements.\n * @cssprop [--hx-clinical-status-icon-color=var(--hx-color-info-500)] - Icon color.\n * @cssprop [--hx-clinical-status-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-clinical-status-compact-padding] - Padding in compact mode.\n * @cssprop [--hx-clinical-status-emergent-accent-width=6px] - Accent width for emergent severity.\n */\n@customElement('hx-clinical-status')\nexport class HelixClinicalStatus extends HelixElement {\n  static override styles = [tokenStyles, helixClinicalStatusStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Clinical severity level that determines visual styling and ARIA semantics.\n   * - `info`: Informational, non-urgent (role=\"status\")\n   * - `warning`: Requires attention but not immediate (role=\"status\")\n   * - `critical`: Requires prompt clinical attention (role=\"alert\")\n   * - `emergent`: Life-threatening, immediate action required (role=\"alert\")\n   * @attr severity\n   */\n  @property({ type: String, reflect: true })\n  severity: ClinicalSeverity = 'info';\n\n  /**\n   * Status message text. Displayed as the primary content of the indicator.\n   * @attr message\n   */\n  @property({ type: String })\n  message = '';\n\n  /**\n   * Whether the status can be dismissed by the user.\n   * Critical and emergent statuses should require acknowledgment rather than simple dismissal.\n   * @attr dismissible\n   */\n  @property({ type: Boolean, reflect: true })\n  dismissible = false;\n\n  /**\n   * Whether the status survives page navigation.\n   * Defaults to false for info/warning, true for critical/emergent.\n   * When set explicitly, overrides the severity-based default.\n   * @attr persistent\n   */\n  @property({ type: Boolean, reflect: true })\n  persistent = false;\n\n  /**\n   * Optional custom icon name. When not set, a default severity-appropriate icon is shown.\n   * @attr icon\n   */\n  @property({ type: String })\n  icon = '';\n\n  /**\n   * Compact mode for dense clinical UIs (e.g. patient dashboards, bedside displays).\n   * Reduces padding, font size, and icon size.\n   * @attr compact\n   */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  // ─── State ───\n\n  /** @internal */\n  @state()\n  private _hasSlottedContent = false;\n\n  /** @internal */\n  @state()\n  private _acknowledged = false;\n\n  /** SSR-safe unique ID for ARIA relationships. */\n  private _componentId = nextId();\n\n  /** @internal Tracks whether `persistent` was explicitly set by the consumer. */\n  private _persistentExplicitlySet = false;\n\n  // ─── Private Helpers ───\n\n  /** Returns true when the severity requires assertive announcement. */\n  private get _isAssertive(): boolean {\n    return this.severity === 'critical' || this.severity === 'emergent';\n  }\n\n  /** Returns the appropriate ARIA role based on severity. */\n  private get _role(): string {\n    return this._isAssertive ? 'alert' : 'status';\n  }\n\n  /** Returns the default severity label for screen readers (WCAG 1.4.1). */\n  private _severityLabel(): string {\n    const labels: Record<ClinicalSeverity, string> = {\n      info: 'Info:',\n      warning: 'Warning:',\n      critical: 'Critical:',\n      emergent: 'Emergent:',\n    };\n    return labels[this.severity] ?? '';\n  }\n\n  /** Returns true when the severity requires explicit acknowledgment. */\n  private get _requiresAcknowledgment(): boolean {\n    return this.severity === 'critical' || this.severity === 'emergent';\n  }\n\n  /** Effective persistent value, considering severity-based defaults. */\n  private get _effectivePersistent(): boolean {\n    if (this._persistentExplicitlySet) {\n      return this.persistent;\n    }\n    return this._isAssertive;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', this._role);\n  }\n\n  override attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n    super.attributeChangedCallback(name, _old, value);\n    if (name === 'persistent') {\n      this._persistentExplicitlySet = value !== null;\n    }\n  }\n\n  protected override updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('severity')) {\n      this.setAttribute('role', this._role);\n    }\n  }\n\n  // ─── Default Icons ───\n\n  /** @internal */\n  private _renderInfoIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderWarningIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderCriticalIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderEmergentIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1 4a1 1 0 112 0v4a1 1 0 11-2 0V6zm1 9a1.25 1.25 0 100-2.5A1.25 1.25 0 0010 15z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderDefaultIcon() {\n    switch (this.severity) {\n      case 'warning':\n        return this._renderWarningIcon();\n      case 'critical':\n        return this._renderCriticalIcon();\n      case 'emergent':\n        return this._renderEmergentIcon();\n      case 'info':\n      default:\n        return this._renderInfoIcon();\n    }\n  }\n\n  /** @internal */\n  private _renderCloseIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n      />\n    </svg>`;\n  }\n\n  // ─── Slot Change Handling ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSlottedContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleDismiss(): void {\n    this.dispatchEvent(\n      new CustomEvent<void>('hx-dismiss', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleAcknowledge(): void {\n    this._acknowledged = true;\n    this.dispatchEvent(\n      new CustomEvent<{ severity: ClinicalSeverity; persistent: boolean }>('hx-acknowledge', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          severity: this.severity,\n          persistent: this._effectivePersistent,\n        },\n      }),\n    );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      'clinical-status': true,\n      [`clinical-status--${this.severity}`]: true,\n      'clinical-status--compact': this.compact,\n    };\n\n    const severityLabel = this._severityLabel();\n    const messageId = `${this._componentId}-message`;\n\n    return html`\n      <div part=\"container\" class=${classMap(classes)} aria-labelledby=${messageId}>\n        <span class=\"clinical-status__severity-label\">${severityLabel}</span>\n\n        <div part=\"icon\" class=\"clinical-status__icon\">\n          ${this.icon\n            ? html`<span class=\"clinical-status__custom-icon\">${this.icon}</span>`\n            : this._renderDefaultIcon()}\n        </div>\n\n        <div id=${messageId} part=\"message\" class=\"clinical-status__message\">\n          ${this.message}\n          ${this._hasSlottedContent\n            ? html`<div class=\"clinical-status__slot-content\">\n                <slot @slotchange=${this._handleSlotChange}></slot>\n              </div>`\n            : html`<slot @slotchange=${this._handleSlotChange}></slot>`}\n        </div>\n\n        <div\n          part=\"actions\"\n          class=${classMap({\n            'clinical-status__actions': true,\n            'clinical-status__actions--visible': this.dismissible || this._requiresAcknowledgment,\n          })}\n        >\n          ${this._requiresAcknowledgment && !this._acknowledged\n            ? html`\n                <button\n                  part=\"acknowledge-button\"\n                  class=\"clinical-status__acknowledge-button\"\n                  @click=${this._handleAcknowledge}\n                >\n                  Acknowledge\n                </button>\n              `\n            : nothing}\n          ${this.dismissible\n            ? html`\n                <button\n                  part=\"dismiss-button\"\n                  class=\"clinical-status__dismiss-button\"\n                  aria-label=\"Dismiss clinical status\"\n                  @click=${this._handleDismiss}\n                >\n                  ${this._renderCloseIcon()}\n                </button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-clinical-status': HelixClinicalStatus;\n  }\n}\n\nexport type { HelixClinicalStatus as HxClinicalStatus };\n"],"names":["helixClinicalStatusStyles","css","nextId","createIdCounter","HelixClinicalStatus","HelixElement","name","_old","value","changedProperties","html","e","slot","classes","severityLabel","messageId","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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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"}