@helixui/library 1.1.2 → 2.0.0-next.30

package/dist/shared/{hx-checkbox-group-Z5VvWzcj.js → hx-checkbox-group-J2CGHDwY.js}

@@ -1,8 +1,8 @@
 import { css as _, LitElement as u, nothing as d, html as h } from "lit";
-import { property as a, state as p, customElement as g } from "lit/decorators.js";
-import { classMap as x } from "lit/directives/class-map.js";
-import { tokenStyles as f } from "@helixui/tokens/lit";
-const b = _`
+import "./document-token-adoption-Dym9ALA4.js";
+import { property as a, state as p, customElement as x } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
+const f = _`
   :host {
     display: block;
   }
@@ -80,14 +80,14 @@ const b = _`
     line-height: var(--hx-line-height-normal);
   }
 `;
-var m = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
-  for (var s = l > 1 ? void 0 : l ? k(t, r) : t, n = e.length - 1, c; n >= 0; n--)
-    (c = e[n]) && (s = (l ? c(t, r, s) : c(s)) || s);
-  return l && s && m(t, r, s), s;
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (e, t, r, l) => {
+  for (var i = l > 1 ? void 0 : l ? m(t, r) : t, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (i = (l ? c(t, r, i) : c(i)) || i);
+  return l && i && b(t, r, i), i;
 };
-let y = 0, o = class extends u {
+let k = 0, s = class extends u {
   constructor() {
-    super(), this.name = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this._orientation = "vertical", this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._groupId = `hx-checkbox-group-${++y}`, this._helpTextId = `${this._groupId}-help`, this._errorId = `${this._groupId}-error`, this._handleCheckboxChange = (e) => {
+    super(), this.name = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this._orientation = "vertical", this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._groupId = `hx-checkbox-group-${++k}`, this._helpTextId = `${this._groupId}-help`, this._errorId = `${this._groupId}-error`, this._handleCheckboxChange = (e) => {
       if (e.target === this) return;
       e.stopImmediatePropagation();
       const t = this._getCheckedValues();
@@ -203,21 +203,21 @@ let y = 0, o = class extends u {
   reportValidity() {
     return this._internals.reportValidity();
   }
-  /** Called by the form when it resets. */
+  /** @internal */
   formResetCallback() {
     this._getCheckboxes().forEach((t) => {
       t.checked = !1;
     }), this._internals.setFormValue(null), this._updateValidity([]);
   }
-  /** Called when the form restores state (e.g., back/forward navigation). */
+  /** @internal */
   formStateRestoreCallback(e, t) {
     if (!(e instanceof FormData)) return;
-    const r = e.getAll(this.name).map((s) => String(s));
-    this._getCheckboxes().forEach((s) => {
-      s.checked = r.includes(s.value);
+    const r = e.getAll(this.name).map((i) => String(i));
+    this._getCheckboxes().forEach((i) => {
+      i.checked = r.includes(i.value);
     }), this._updateFormValue(r), this._updateValidity(r);
   }
-  /** Called when a parent fieldset is disabled/enabled. */
+  /** @internal */
   formDisabledCallback(e) {
     this.disabled = e;
   }
@@ -228,11 +228,14 @@ let y = 0, o = class extends u {
       "fieldset--error": e,
       "fieldset--disabled": this.disabled,
       "fieldset--required": this.required
-    }, r = [e ? this._errorId : null, this._hasHelpSlot ? this._helpTextId : null].filter(Boolean).join(" ") || void 0;
+    }, r = [
+      e ? this._errorId : null,
+      this.helpText || this._hasHelpSlot ? this._helpTextId : null
+    ].filter(Boolean).join(" ") || void 0;
     return h`
       <fieldset
         part="group"
-        class=${x(t)}
+        class=${g(t)}
         aria-describedby=${r ?? d}
       >
         <legend part="label" class="fieldset__legend">
@@ -249,42 +252,45 @@ let y = 0, o = class extends u {
             </div>` : h`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
 
         <div part="help-text" class="fieldset__help-text" id=${this._helpTextId}>
-          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}></slot>
+          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>
         </div>
       </fieldset>
     `;
   }
 };
-o.styles = [f, b];
-o.formAssociated = !0;
-i([
+s.styles = [f];
+s.formAssociated = !0;
+o([
   a({ type: String })
-], o.prototype, "name", 2);
-i([
+], s.prototype, "name", 2);
+o([
   a({ type: String })
-], o.prototype, "label", 2);
-i([
+], s.prototype, "label", 2);
+o([
   a({ type: Boolean, reflect: !0 })
-], o.prototype, "required", 2);
-i([
+], s.prototype, "required", 2);
+o([
   a({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-i([
+], s.prototype, "disabled", 2);
+o([
   a({ type: String })
-], o.prototype, "error", 2);
-i([
+], s.prototype, "error", 2);
+o([
+  a({ type: String, attribute: "help-text" })
+], s.prototype, "helpText", 2);
+o([
   a({ type: String, reflect: !0 })
-], o.prototype, "orientation", 1);
-i([
+], s.prototype, "orientation", 1);
+o([
   p()
-], o.prototype, "_hasErrorSlot", 2);
-i([
+], s.prototype, "_hasErrorSlot", 2);
+o([
   p()
-], o.prototype, "_hasHelpSlot", 2);
-o = i([
-  g("hx-checkbox-group")
-], o);
+], s.prototype, "_hasHelpSlot", 2);
+s = o([
+  x("hx-checkbox-group")
+], s);
 export {
-  o as H
+  s as H
 };
-//# sourceMappingURL=hx-checkbox-group-Z5VvWzcj.js.map
+//# sourceMappingURL=hx-checkbox-group-J2CGHDwY.js.map

package/dist/shared/hx-checkbox-group-J2CGHDwY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-checkbox-group-J2CGHDwY.js","sources":["../../src/components/hx-checkbox-group/hx-checkbox-group.styles.ts","../../src/components/hx-checkbox-group/hx-checkbox-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxGroupStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Fieldset ─── */\n\n  .fieldset {\n    border: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2);\n    font-family: var(--hx-font-family-sans);\n  }\n\n  /* ─── Legend ─── */\n\n  .fieldset__legend {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1);\n    font-size: var(--hx-font-size-sm);\n    font-weight: var(--hx-font-weight-medium);\n    color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));\n    line-height: var(--hx-line-height-normal);\n    padding: 0;\n    margin-bottom: var(--hx-space-1);\n  }\n\n  .fieldset__required-marker {\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));\n    font-weight: var(--hx-font-weight-bold);\n  }\n\n  /* ─── Items Container ─── */\n\n  .fieldset__items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-checkbox-group-gap, var(--hx-space-3));\n  }\n\n  :host([orientation='horizontal']) .fieldset__items {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* ─── Error State ─── */\n\n  .fieldset--error .fieldset__legend {\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .fieldset__help-text {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));\n    line-height: var(--hx-line-height-normal);\n  }\n\n  .fieldset__error {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));\n    line-height: var(--hx-line-height-normal);\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixCheckboxGroupStyles } from './hx-checkbox-group.styles.js';\nimport type { HelixCheckbox } from '../hx-checkbox/hx-checkbox.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Monotonic counter for stable, SSR-safe IDs. */\nlet _uid = 0;\n\n/**\n * A form-associated checkbox group that manages a set of `<hx-checkbox>` children.\n *\n * @summary Form-associated checkbox group with label, validation, help text, and multi-value form submission.\n *\n * @tag hx-checkbox-group\n *\n * @slot - `<hx-checkbox>` elements.\n * @slot label - Rich HTML group label (overrides the label property when used).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Group-level help text.\n *\n * @fires {CustomEvent<{values: string[]}>} hx-change - Dispatched when any child checkbox changes.\n *\n * @csspart group - The fieldset wrapper.\n * @csspart label - The legend/label.\n * @csspart help-text - The help text container.\n * @csspart error-message - The error message container.\n *\n * @cssprop [--hx-checkbox-group-gap=var(--hx-space-3, 0.75rem)] - Gap between checkbox items.\n * @cssprop [--hx-checkbox-group-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-checkbox-group-error-color=var(--hx-color-error-500, #dc3545)] - Error message color.\n * @cssprop [--hx-checkbox-group-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n *\n * @drupal\n * Form-associated; render via Twig:\n * ```twig\n * <hx-checkbox-group name=\"{{ field_name }}\" label=\"{{ label }}\"{{ required ? ' required' : '' }}>\n *   {% for option in options %}\n *     <hx-checkbox value=\"{{ option.value }}\" label=\"{{ option.label }}\"></hx-checkbox>\n *   {% endfor %}\n * </hx-checkbox-group>\n * ```\n * The `name` attribute propagates automatically to child checkboxes — no Drupal behavior required.\n */\n@customElement('hx-checkbox-group')\nexport class HelixCheckboxGroup extends LitElement {\n  static override styles = [helixCheckboxGroupStyles];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static formAssociated = true;\n\n  /** Holds the ElementInternals instance used for form value and validity management. @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The name used for form submission. Passed to child `hx-checkbox` elements.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The fieldset legend/label text.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether at least one checkbox must be checked for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the entire group is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message to display. When set, the group enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text to display below the group. Can also be provided via the help-text slot.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Layout orientation of the checkbox items.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  get orientation(): 'vertical' | 'horizontal' {\n    return this._orientation;\n  }\n  set orientation(value: string) {\n    if (value !== 'vertical' && value !== 'horizontal') {\n      devWarn('hx-checkbox-group', `Invalid orientation \"${value}\", defaulting to \"vertical\".`);\n      value = 'vertical';\n    }\n    this._orientation = value as 'vertical' | 'horizontal';\n  }\n  /** @internal */\n  private _orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /** Whether the named error slot contains projected content. @internal */\n  @state() private _hasErrorSlot = false;\n  /** Whether the named help-text slot contains projected content. @internal */\n  @state() private _hasHelpSlot = false;\n\n  // ─── Internal IDs ───\n\n  /** @internal */\n  private _groupId = `hx-checkbox-group-${++_uid}`;\n  /** @internal */\n  private _helpTextId = `${this._groupId}-help`;\n  /** @internal */\n  private _errorId = `${this._groupId}-error`;\n\n  // ─── Slot Handlers ───\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-change', this._handleCheckboxChange);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-change', this._handleCheckboxChange);\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this._syncCheckboxes();\n    }\n    if (changedProperties.has('name')) {\n      this._syncCheckboxNames();\n    }\n    if (changedProperties.has('required')) {\n      this._updateValidity();\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(changedProperties);\n    this._syncCheckboxes();\n    this._syncCheckboxNames();\n    const checkedValues = this._getCheckedValues();\n    this._updateFormValue(checkedValues);\n    this._updateValidity(checkedValues);\n  }\n\n  // ─── Checkbox Management ───\n\n  /** @internal */\n  private _getCheckboxes(): HelixCheckbox[] {\n    return Array.from(this.children).filter((c): c is HelixCheckbox => c.tagName === 'HX-CHECKBOX');\n  }\n\n  /** @internal */\n  private _getCheckedValues(): string[] {\n    return this._getCheckboxes()\n      .filter((cb) => cb.checked)\n      .map((cb) => cb.value);\n  }\n\n  /** @internal */\n  private _syncCheckboxes(): void {\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.disabled = this.disabled;\n    });\n  }\n\n  /** @internal */\n  private _syncCheckboxNames(): void {\n    if (!this.name) return;\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.name = this.name;\n    });\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleCheckboxChange = (e: Event): void => {\n    // Only intercept events from direct hx-checkbox children — do not re-intercept\n    // the hx-change we dispatch ourselves from this element.\n    if (e.target === this) return;\n\n    e.stopImmediatePropagation();\n\n    const values = this._getCheckedValues();\n    this._updateFormValue(values);\n    this._updateValidity(values);\n\n    /**\n     * Dispatched when any child checkbox changes.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ values: string[] }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { values },\n      }),\n    );\n  };\n\n  /** @internal */\n  private _handleSlotChange(): void {\n    this._syncCheckboxes();\n    this._syncCheckboxNames();\n    const checkedValues = this._getCheckedValues();\n    this._updateFormValue(checkedValues);\n    this._updateValidity(checkedValues);\n  }\n\n  // ─── Form Integration ───\n\n  /** @internal */\n  private _updateFormValue(values: string[]): void {\n    if (values.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n    const formData = new FormData();\n    values.forEach((v) => formData.append(this.name, v));\n    this._internals.setFormValue(formData);\n  }\n\n  /** @internal */\n  private _updateValidity(values?: string[]): void {\n    const checkedValues = values ?? this._getCheckedValues();\n    if (this.required && checkedValues.length === 0) {\n      const firstCheckbox = this._getCheckboxes()[0];\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'Please select at least one option.',\n        firstCheckbox,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the group satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.checked = false;\n    });\n    this._internals.setFormValue(null);\n    this._updateValidity([]);\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (!(state instanceof FormData)) return;\n    const restoredValues = state.getAll(this.name).map((v) => String(v));\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.checked = restoredValues.includes(cb.value);\n    });\n    this._updateFormValue(restoredValues);\n    this._updateValidity(restoredValues);\n  }\n\n  /** @internal */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldsetClasses = {\n      fieldset: true,\n      'fieldset--error': hasError,\n      'fieldset--disabled': this.disabled,\n      'fieldset--required': this.required,\n    };\n\n    const describedBy =\n      [\n        hasError ? this._errorId : null,\n        this.helpText || this._hasHelpSlot ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <fieldset\n        part=\"group\"\n        class=${classMap(fieldsetClasses)}\n        aria-describedby=${describedBy ?? nothing}\n      >\n        <legend part=\"label\" class=\"fieldset__legend\">\n          <slot name=\"label\">${this.label}</slot>\n          ${this.required\n            ? html`<span class=\"fieldset__required-marker\" aria-hidden=\"true\">*</span>`\n            : nothing}\n        </legend>\n\n        <div class=\"fieldset__items\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n\n        ${hasError\n          ? html`<div part=\"error-message\" class=\"fieldset__error\" id=${this._errorId} role=\"alert\">\n              <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n            </div>`\n          : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n\n        <div part=\"help-text\" class=\"fieldset__help-text\" id=${this._helpTextId}>\n          <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n        </div>\n      </fieldset>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-checkbox-group': HelixCheckboxGroup;\n  }\n}\n"],"names":["helixCheckboxGroupStyles","css","_uid","HelixCheckboxGroup","LitElement","values","value","slot","changedProperties","checkedValues","c","cb","formData","v","firstCheckbox","state","_mode","restoredValues","disabled","hasError","fieldsetClasses","describedBy","html","classMap","nothing","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-clinical-status-CGx5q5PL.js

@@ -0,0 +1,469 @@
+import { css as v, html as e, nothing as d } from "lit";
+import "./document-token-adoption-Dym9ALA4.js";
+import { property as o, state as p, customElement as x } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { H as g, c as m } from "./id-counter-JhvVCnjh.js";
+const f = v`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Screen-reader-only utility ─── */
+  /* @design-system-approved: WCAG standard visually-hidden technique for a11y */
+
+  .sr-only {
+    position: absolute;
+    width: 1px; /* @design-system-approved: standard sr-only technique */
+    height: 1px; /* @design-system-approved: standard sr-only technique */
+    padding: 0;
+    margin: -1px; /* @design-system-approved: standard sr-only technique */
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Container ─── */
+
+  .clinical-status {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));
+    padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));
+    border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid
+      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #b3d9ef));
+    border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid
+      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #3b82f6));
+    border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #e8f4fd));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));
+    font-family: var(--hx-clinical-status-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Compact Mode ─── */
+
+  .clinical-status--compact {
+    padding: var(
+      --hx-clinical-status-compact-padding,
+      var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem)
+    );
+    gap: var(--hx-space-2, 0.5rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  /* ─── Severity: info ─── */
+
+  :host([severity='info']) .clinical-status,
+  :host(:not([severity])) .clinical-status {
+    --hx-clinical-status-bg: var(--hx-color-info-50, #e8f4fd);
+    --hx-clinical-status-border-color: var(--hx-color-info-200, #b3d9ef);
+    --hx-clinical-status-accent-color: var(--hx-color-info-500, #3b82f6);
+    --hx-clinical-status-color: var(--hx-color-info-800, #1a3a4a);
+    --hx-clinical-status-icon-color: var(--hx-color-info-500, #3b82f6);
+  }
+
+  /* ─── Severity: warning ─── */
+
+  :host([severity='warning']) .clinical-status {
+    --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);
+    --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);
+    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #f59e0b);
+    --hx-clinical-status-color: var(--hx-color-warning-800, #92400e);
+    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #f59e0b);
+  }
+
+  /* ─── Severity: critical ─── */
+
+  :host([severity='critical']) .clinical-status {
+    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);
+    --hx-clinical-status-accent-color: var(--hx-color-error-500, #ef4444);
+    --hx-clinical-status-color: var(--hx-color-error-800, #991b1b);
+    --hx-clinical-status-icon-color: var(--hx-color-error-500, #ef4444);
+  }
+
+  /* ─── Severity: emergent ─── */
+
+  :host([severity='emergent']) .clinical-status {
+    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);
+    --hx-clinical-status-accent-color: var(--hx-color-error-700, #b91c1c);
+    --hx-clinical-status-color: var(--hx-color-error-900, #7f1d1d);
+    --hx-clinical-status-icon-color: var(--hx-color-error-700, #b91c1c);
+    border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);
+    font-weight: var(--hx-font-weight-semibold, 600);
+  }
+
+  /* ─── Icon ─── */
+
+  .clinical-status__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #3b82f6));
+  }
+
+  .clinical-status__icon svg {
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    fill: currentColor;
+  }
+
+  .clinical-status--compact .clinical-status__icon svg {
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+  }
+
+  /* ─── Message ─── */
+
+  .clinical-status__message {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ─── Severity Label (WCAG 1.4.1) ─── */
+  /* @design-system-approved: WCAG 1.4.1 non-color severity indicator for screen readers */
+
+  .clinical-status__severity-label {
+    position: absolute;
+    width: 1px; /* @design-system-approved: standard sr-only technique */
+    height: 1px; /* @design-system-approved: standard sr-only technique */
+    padding: 0;
+    margin: -1px; /* @design-system-approved: standard sr-only technique */
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Actions ─── */
+
+  .clinical-status__actions {
+    display: none;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    margin-inline-start: auto;
+    flex-shrink: 0;
+  }
+
+  .clinical-status__actions--visible {
+    display: flex;
+  }
+
+  /* ─── Dismiss Button ─── */
+
+  .clinical-status__dismiss-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: var(--hx-touch-target-size, 44px);
+    min-height: var(--hx-touch-target-size, 44px);
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));
+    cursor: pointer;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: 1;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      opacity var(--hx-transition-fast, 150ms ease);
+    opacity: 0.7;
+  }
+
+  .clinical-status__dismiss-button:hover {
+    opacity: 1;
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .clinical-status__dismiss-button:focus-visible {
+    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;
+  }
+
+  .clinical-status__dismiss-button svg {
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+    fill: currentColor;
+  }
+
+  .clinical-status--compact .clinical-status__dismiss-button {
+    min-width: var(--hx-space-8, 2rem);
+    min-height: var(--hx-space-8, 2rem);
+  }
+
+  /* ─── Acknowledge Button ─── */
+
+  .clinical-status__acknowledge-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
+    border: var(--hx-border-width-thin, 1px) solid currentColor;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    text-transform: uppercase;
+    letter-spacing: var(--hx-letter-spacing-wide, 0.05em);
+    cursor: pointer;
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-touch-target-size, 44px);
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      opacity var(--hx-transition-fast, 150ms ease);
+  }
+
+  .clinical-status__acknowledge-button:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .clinical-status__acknowledge-button:focus-visible {
+    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);
+  }
+
+  .clinical-status--compact .clinical-status__acknowledge-button {
+    min-height: var(--hx-space-8, 2rem);
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .clinical-status__dismiss-button,
+    .clinical-status__acknowledge-button {
+      transition: none;
+    }
+  }
+`;
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (t, s, r, c) => {
+  for (var n = c > 1 ? void 0 : c ? _(s, r) : s, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (n = (c ? h(s, r, n) : h(n)) || n);
+  return c && n && b(s, r, n), n;
+};
+const y = m("hx-clinical-status");
+let i = class extends g {
+  constructor() {
+    super(...arguments), this.severity = "info", this.message = "", this.dismissible = !1, this.persistent = !1, this.icon = "", this.compact = !1, this._hasSlottedContent = !1, this._acknowledged = !1, this._componentId = y(), this._persistentExplicitlySet = !1;
+  }
+  // ─── Private Helpers ───
+  /** Returns true when the severity requires assertive announcement. */
+  get _isAssertive() {
+    return this.severity === "critical" || this.severity === "emergent";
+  }
+  /** Returns the appropriate ARIA role based on severity. */
+  get _role() {
+    return this._isAssertive ? "alert" : "status";
+  }
+  /** Returns the default severity label for screen readers (WCAG 1.4.1). */
+  _severityLabel() {
+    return {
+      info: "Info:",
+      warning: "Warning:",
+      critical: "Critical:",
+      emergent: "Emergent:"
+    }[this.severity] ?? "";
+  }
+  /** Returns true when the severity requires explicit acknowledgment. */
+  get _requiresAcknowledgment() {
+    return this.severity === "critical" || this.severity === "emergent";
+  }
+  /** Effective persistent value, considering severity-based defaults. */
+  get _effectivePersistent() {
+    return this._persistentExplicitlySet ? this.persistent : this._isAssertive;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", this._role);
+  }
+  attributeChangedCallback(t, s, r) {
+    super.attributeChangedCallback(t, s, r), t === "persistent" && (this._persistentExplicitlySet = r !== null);
+  }
+  updated(t) {
+    super.updated(t), t.has("severity") && this.setAttribute("role", this._role);
+  }
+  // ─── Default Icons ───
+  /** @internal */
+  _renderInfoIcon() {
+    return e`<svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        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"
+      />
+    </svg>`;
+  }
+  /** @internal */
+  _renderWarningIcon() {
+    return e`<svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        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"
+      />
+    </svg>`;
+  }
+  /** @internal */
+  _renderCriticalIcon() {
+    return e`<svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        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"
+      />
+    </svg>`;
+  }
+  /** @internal */
+  _renderEmergentIcon() {
+    return e`<svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        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"
+      />
+    </svg>`;
+  }
+  /** @internal */
+  _renderDefaultIcon() {
+    switch (this.severity) {
+      case "warning":
+        return this._renderWarningIcon();
+      case "critical":
+        return this._renderCriticalIcon();
+      case "emergent":
+        return this._renderEmergentIcon();
+      case "info":
+      default:
+        return this._renderInfoIcon();
+    }
+  }
+  /** @internal */
+  _renderCloseIcon() {
+    return e`<svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        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"
+      />
+    </svg>`;
+  }
+  // ─── Slot Change Handling ───
+  /** @internal */
+  _handleSlotChange(t) {
+    const s = t.target;
+    this._hasSlottedContent = s.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Event Handling ───
+  /** @internal */
+  _handleDismiss() {
+    this.dispatchEvent(
+      new CustomEvent("hx-dismiss", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** @internal */
+  _handleAcknowledge() {
+    this._acknowledged = !0, this.dispatchEvent(
+      new CustomEvent("hx-acknowledge", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          severity: this.severity,
+          persistent: this._effectivePersistent
+        }
+      })
+    );
+  }
+  // ─── Render ───
+  render() {
+    const t = {
+      "clinical-status": !0,
+      [`clinical-status--${this.severity}`]: !0,
+      "clinical-status--compact": this.compact
+    }, s = this._severityLabel(), r = `${this._componentId}-message`;
+    return e`
+      <div part="container" class=${u(t)} aria-labelledby=${r}>
+        <span class="clinical-status__severity-label">${s}</span>
+
+        <div part="icon" class="clinical-status__icon">
+          ${this.icon ? e`<span class="clinical-status__custom-icon">${this.icon}</span>` : this._renderDefaultIcon()}
+        </div>
+
+        <div id=${r} part="message" class="clinical-status__message">
+          ${this.message}
+          ${this._hasSlottedContent ? e`<div class="clinical-status__slot-content">
+                <slot @slotchange=${this._handleSlotChange}></slot>
+              </div>` : e`<slot @slotchange=${this._handleSlotChange}></slot>`}
+        </div>
+
+        <div
+          part="actions"
+          class=${u({
+      "clinical-status__actions": !0,
+      "clinical-status__actions--visible": this.dismissible || this._requiresAcknowledgment
+    })}
+        >
+          ${this._requiresAcknowledgment && !this._acknowledged ? e`
+                <button
+                  part="acknowledge-button"
+                  class="clinical-status__acknowledge-button"
+                  @click=${this._handleAcknowledge}
+                >
+                  Acknowledge
+                </button>
+              ` : d}
+          ${this.dismissible ? e`
+                <button
+                  part="dismiss-button"
+                  class="clinical-status__dismiss-button"
+                  aria-label="Dismiss clinical status"
+                  @click=${this._handleDismiss}
+                >
+                  ${this._renderCloseIcon()}
+                </button>
+              ` : d}
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = [f];
+a([
+  o({ type: String, reflect: !0 })
+], i.prototype, "severity", 2);
+a([
+  o({ type: String })
+], i.prototype, "message", 2);
+a([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "dismissible", 2);
+a([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "persistent", 2);
+a([
+  o({ type: String })
+], i.prototype, "icon", 2);
+a([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "compact", 2);
+a([
+  p()
+], i.prototype, "_hasSlottedContent", 2);
+a([
+  p()
+], i.prototype, "_acknowledged", 2);
+i = a([
+  x("hx-clinical-status")
+], i);
+export {
+  i as H
+};
+//# sourceMappingURL=hx-clinical-status-CGx5q5PL.js.map