@helixui/library 2.1.2 → 3.0.0-next.62

package/dist/shared/{hx-checkbox-group-DThZeN5d.js → hx-checkbox-group-C3poJ-Zw.js}

@@ -1,8 +1,10 @@
-import { css as _, LitElement as u, nothing as d, html as h } from "lit";
-import "./document-token-adoption-DuYNKd4k.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 = _`
+import { css as x, nothing as d, html as h } from "lit";
+import { property as l, state as p, customElement as _ } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { F as f } from "./FormMixin-B8PXk5RQ.js";
+import { H as g } from "./helix-element-BNEYeiys.js";
+import { c as m } from "./id-counter-DuX8vsui.js";
+const b = x`
   :host {
     display: block;
   }
@@ -25,7 +27,7 @@ const f = _`
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-2);
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-checkbox-group-font-family, var(--hx-font-family-sans));
   }
 
   /* ─── Legend ─── */
@@ -43,7 +45,7 @@ const f = _`
   }
 
   .fieldset__required-marker {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
     font-weight: var(--hx-font-weight-bold);
   }
 
@@ -63,7 +65,7 @@ const f = _`
   /* ─── Error State ─── */
 
   .fieldset--error .fieldset__legend {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
   }
 
   /* ─── Help Text & Error Messages ─── */
@@ -76,29 +78,62 @@ const f = _`
 
   .fieldset__error {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
     line-height: var(--hx-line-height-normal);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .fieldset {
+      border: none;
+    }
+
+    .fieldset__legend {
+      color: CanvasText;
+    }
+
+    .fieldset--error .fieldset__legend {
+      color: LinkText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    :host([disabled]) .fieldset__legend {
+      color: GrayText;
+    }
+
+    .fieldset__help-text {
+      color: GrayText;
+    }
+
+    .fieldset__error {
+      color: LinkText;
+    }
+  }
 `;
-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;
+var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (e, t, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? C(t, r) : t, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (s = (a ? c(t, r, s) : c(s)) || s);
+  return a && s && k(t, r, s), s;
 };
-let k = 0, s = class extends u {
+const y = m("hx-checkbox-group");
+let o = class extends f(g) {
   constructor() {
-    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) => {
+    super(...arguments), 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 = y(), this._helpTextId = `${this._groupId}-help`, this._errorId = `${this._groupId}-error`, this._handleCheckboxChange = (e) => {
       if (e.target === this) return;
       e.stopImmediatePropagation();
       const t = this._getCheckedValues();
-      this._updateFormValue(t), this._updateValidity(t), this.dispatchEvent(
+      this._updateFormValue(t), this._updateValidity(t), this._handleInteractionInput(), this.dispatchEvent(
         new CustomEvent("hx-change", {
           bubbles: !0,
           composed: !0,
           detail: { values: t }
         })
       );
-    }, this._internals = this.attachInternals();
+    };
   }
   get orientation() {
     return this._orientation;
@@ -125,7 +160,18 @@ let k = 0, s = class extends u {
     super.disconnectedCallback(), this.removeEventListener("hx-change", this._handleCheckboxChange);
   }
   updated(e) {
-    super.updated(e), e.has("disabled") && this._syncCheckboxes(), e.has("name") && this._syncCheckboxNames(), e.has("required") && this._updateValidity();
+    var t;
+    if (super.updated(e), e.has("disabled") && this._syncCheckboxes(), e.has("name") && this._syncCheckboxNames(), e.has("error") && this.error) {
+      const r = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[role="alert"]');
+      if (r) {
+        const a = this.error;
+        requestAnimationFrame(() => {
+          r.textContent = "", requestAnimationFrame(() => {
+            r.textContent = a;
+          });
+        });
+      }
+    }
   }
   firstUpdated(e) {
     super.firstUpdated(e), this._syncCheckboxes(), this._syncCheckboxNames();
@@ -183,42 +229,22 @@ let k = 0, s = class extends u {
     } else
       this._internals.setValidity({});
   }
-  /** Returns the associated form element, if any. */
-  get form() {
-    return this._internals.form;
-  }
-  /** Returns the validation message. */
-  get validationMessage() {
-    return this._internals.validationMessage;
-  }
-  /** Returns the ValidityState object. */
-  get validity() {
-    return this._internals.validity;
-  }
-  /** Checks whether the group satisfies its constraints. */
-  checkValidity() {
-    return this._internals.checkValidity();
-  }
-  /** Reports validity and shows the browser's constraint validation UI. */
-  reportValidity() {
-    return this._internals.reportValidity();
-  }
   /** @internal */
-  formResetCallback() {
+  _onFormReset() {
     this._getCheckboxes().forEach((t) => {
       t.checked = !1;
-    }), this._internals.setFormValue(null), this._updateValidity([]);
+    }), this._internals.setFormValue(null), this._updateValidity([]), this._resetInteractionState();
   }
   /** @internal */
-  formStateRestoreCallback(e, t) {
+  _onFormStateRestore(e, t) {
     if (!(e instanceof FormData)) return;
-    const r = e.getAll(this.name).map((i) => String(i));
-    this._getCheckboxes().forEach((i) => {
-      i.checked = r.includes(i.value);
+    const r = e.getAll(this.name).map((s) => String(s));
+    this._getCheckboxes().forEach((s) => {
+      s.checked = r.includes(s.value);
     }), this._updateFormValue(r), this._updateValidity(r);
   }
   /** @internal */
-  formDisabledCallback(e) {
+  _onFormDisabled(e) {
     this.disabled = e;
   }
   // ─── Render ───
@@ -235,7 +261,7 @@ let k = 0, s = class extends u {
     return h`
       <fieldset
         part="group"
-        class=${g(t)}
+        class=${u(t)}
         aria-describedby=${r ?? d}
       >
         <legend part="label" class="fieldset__legend">
@@ -247,7 +273,7 @@ let k = 0, s = class extends u {
           <slot @slotchange=${this._handleSlotChange}></slot>
         </div>
 
-        ${e ? h`<div part="error-message" class="fieldset__error" id=${this._errorId} role="alert">
+        ${e ? h`<div part="error" class="fieldset__error" id=${this._errorId} role="alert">
               <slot name="error" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>
             </div>` : h`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
 
@@ -258,39 +284,39 @@ let k = 0, s = class extends u {
     `;
   }
 };
-s.styles = [f];
-s.formAssociated = !0;
-o([
-  a({ type: String })
-], s.prototype, "name", 2);
-o([
-  a({ type: String })
-], s.prototype, "label", 2);
-o([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "required", 2);
-o([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled", 2);
-o([
-  a({ type: String })
-], s.prototype, "error", 2);
-o([
-  a({ type: String, attribute: "help-text" })
-], s.prototype, "helpText", 2);
-o([
-  a({ type: String, reflect: !0 })
-], s.prototype, "orientation", 1);
-o([
+o.styles = [b];
+o.formAssociated = !0;
+i([
+  l({ type: String, reflect: !0 })
+], o.prototype, "name", 2);
+i([
+  l({ type: String })
+], o.prototype, "label", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "required", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+i([
+  l({ type: String })
+], o.prototype, "error", 2);
+i([
+  l({ type: String, attribute: "help-text" })
+], o.prototype, "helpText", 2);
+i([
+  l({ type: String, reflect: !0 })
+], o.prototype, "orientation", 1);
+i([
   p()
-], s.prototype, "_hasErrorSlot", 2);
-o([
+], o.prototype, "_hasErrorSlot", 2);
+i([
   p()
-], s.prototype, "_hasHelpSlot", 2);
-s = o([
-  x("hx-checkbox-group")
-], s);
+], o.prototype, "_hasHelpSlot", 2);
+o = i([
+  _("hx-checkbox-group")
+], o);
 export {
-  s as H
+  o as H
 };
-//# sourceMappingURL=hx-checkbox-group-DThZeN5d.js.map
+//# sourceMappingURL=hx-checkbox-group-C3poJ-Zw.js.map

package/dist/shared/hx-checkbox-group-C3poJ-Zw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-checkbox-group-C3poJ-Zw.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-checkbox-group-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-text, #b91c1c));\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-text, #b91c1c));\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-text, #b91c1c));\n    line-height: var(--hx-line-height-normal);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .fieldset {\n      border: none;\n    }\n\n    .fieldset__legend {\n      color: CanvasText;\n    }\n\n    .fieldset--error .fieldset__legend {\n      color: LinkText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .fieldset__legend {\n      color: GrayText;\n    }\n\n    .fieldset__help-text {\n      color: GrayText;\n    }\n\n    .fieldset__error {\n      color: LinkText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.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\nconst _nextCheckboxGroupId = createIdCounter('hx-checkbox-group');\n\n/** Detail for the hx-change event dispatched by hx-checkbox-group. */\nexport interface HxCheckboxGroupChangeDetail {\n  values: string[];\n}\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 - 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 FormMixin(HelixElement) {\n  static override styles = [helixCheckboxGroupStyles];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\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, reflect: true })\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 = _nextCheckboxGroupId();\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    // Force screen reader re-announcement when error text changes (a11y-v3-005)\n    if (changedProperties.has('error') && this.error) {\n      const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n      if (errorEl) {\n        const msg = this.error;\n        requestAnimationFrame(() => {\n          errorEl.textContent = '';\n          requestAnimationFrame(() => {\n            errorEl.textContent = msg;\n          });\n        });\n      }\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    this._handleInteractionInput();\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  override _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  /** @internal */\n  protected override _onFormReset(): void {\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.checked = false;\n    });\n    this._internals.setFormValue(null);\n    this._updateValidity([]);\n    this._resetInteractionState();\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    state: File | string | 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  protected override _onFormDisabled(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\" 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","_nextCheckboxGroupId","createIdCounter","HelixCheckboxGroup","FormMixin","HelixElement","values","value","slot","changedProperties","errorEl","_a","msg","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-m4soOOwg.js → hx-clinical-status-BS5lcddT.js}

@@ -1,9 +1,9 @@
-import { css as v, html as e, nothing as d } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as o, state as p, customElement as x } from "lit/decorators.js";
+import { css as p, html as e, nothing as d } from "lit";
+import { property as o, state as v, 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`
+import { H as g } from "./helix-element-BNEYeiys.js";
+import { c as m } from "./id-counter-DuX8vsui.js";
+const f = p`
   :host {
     display: block;
   }
@@ -39,12 +39,12 @@ const f = v`
     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));
+      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #bae6fd));
     border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid
-      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #3b82f6));
+      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0284c7));
     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));
+    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #f0f9ff));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
     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);
@@ -65,11 +65,11 @@ const f = v`
 
   :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);
+    --hx-clinical-status-bg: var(--hx-color-info-50, #f0f9ff);
+    --hx-clinical-status-border-color: var(--hx-color-info-200, #bae6fd);
+    --hx-clinical-status-accent-color: var(--hx-color-info-500, #0284c7);
+    --hx-clinical-status-color: var(--hx-color-info-800, #0c4a6e);
+    --hx-clinical-status-icon-color: var(--hx-color-info-500, #0284c7);
   }
 
   /* ─── Severity: warning ─── */
@@ -77,9 +77,9 @@ const f = v`
   :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);
+    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #d97706);
+    --hx-clinical-status-color: var(--hx-color-warning-800, #78350f);
+    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #d97706);
   }
 
   /* ─── Severity: critical ─── */
@@ -87,9 +87,9 @@ const f = v`
   :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);
+    --hx-clinical-status-accent-color: var(--hx-color-error-500, #dc2626);
+    --hx-clinical-status-color: var(--hx-color-error-800, #7f1d1d);
+    --hx-clinical-status-icon-color: var(--hx-color-error-500, #dc2626);
   }
 
   /* ─── Severity: emergent ─── */
@@ -97,9 +97,9 @@ const f = v`
   :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);
+    --hx-clinical-status-accent-color: var(--hx-color-error-700, #991b1b);
+    --hx-clinical-status-color: var(--hx-color-error-900, #651a1a);
+    --hx-clinical-status-icon-color: var(--hx-color-error-700, #991b1b);
     border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);
     font-weight: var(--hx-font-weight-semibold, 600);
   }
@@ -110,7 +110,7 @@ const f = v`
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #3b82f6));
+    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0284c7));
   }
 
   .clinical-status__icon svg {
@@ -173,7 +173,7 @@ const f = v`
     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));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -190,7 +190,7 @@ const f = v`
 
   .clinical-status__dismiss-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -221,7 +221,7 @@ const f = v`
     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);
+    letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
     cursor: pointer;
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-touch-target-size, 44px);
@@ -236,7 +236,7 @@ const f = v`
 
   .clinical-status__acknowledge-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -251,11 +251,34 @@ const f = v`
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .clinical-status {
+      border-color: CanvasText;
+      border-inline-start-color: CanvasText;
+    }
+
+    .clinical-status__icon svg {
+      fill: CanvasText;
+    }
+
+    .clinical-status__dismiss-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+
+    .clinical-status__acknowledge-button {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+  }
 `;
-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;
+var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (t, s, a, c) => {
+  for (var n = c > 1 ? void 0 : c ? b(s, a) : s, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (n = (c ? h(s, a, n) : h(n)) || n);
+  return c && n && _(s, a, n), n;
 };
 const y = m("hx-clinical-status");
 let i = class extends g {
@@ -290,13 +313,13 @@ let i = class extends g {
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", this._role);
+    super.connectedCallback(), this._internals.role = this._role;
   }
-  attributeChangedCallback(t, s, r) {
-    super.attributeChangedCallback(t, s, r), t === "persistent" && (this._persistentExplicitlySet = r !== null);
+  attributeChangedCallback(t, s, a) {
+    super.attributeChangedCallback(t, s, a), t === "persistent" && (this._persistentExplicitlySet = a !== null);
   }
   updated(t) {
-    super.updated(t), t.has("severity") && this.setAttribute("role", this._role);
+    super.updated(t), t.has("severity") && (this._internals.role = this._role);
   }
   // ─── Default Icons ───
   /** @internal */
@@ -388,16 +411,16 @@ let i = class extends g {
       "clinical-status": !0,
       [`clinical-status--${this.severity}`]: !0,
       "clinical-status--compact": this.compact
-    }, s = this._severityLabel(), r = `${this._componentId}-message`;
+    }, s = this._severityLabel(), a = `${this._componentId}-message`;
     return e`
-      <div part="container" class=${u(t)} aria-labelledby=${r}>
+      <div part="container" class=${u(t)} aria-labelledby=${a}>
         <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">
+        <div id=${a} part="message" class="clinical-status__message">
           ${this.message}
           ${this._hasSlottedContent ? e`<div class="clinical-status__slot-content">
                 <slot @slotchange=${this._handleSlotChange}></slot>
@@ -436,34 +459,34 @@ let i = class extends g {
   }
 };
 i.styles = [f];
-a([
+r([
   o({ type: String, reflect: !0 })
 ], i.prototype, "severity", 2);
-a([
+r([
   o({ type: String })
 ], i.prototype, "message", 2);
-a([
+r([
   o({ type: Boolean, reflect: !0 })
 ], i.prototype, "dismissible", 2);
-a([
+r([
   o({ type: Boolean, reflect: !0 })
 ], i.prototype, "persistent", 2);
-a([
+r([
   o({ type: String })
 ], i.prototype, "icon", 2);
-a([
+r([
   o({ type: Boolean, reflect: !0 })
 ], i.prototype, "compact", 2);
-a([
-  p()
+r([
+  v()
 ], i.prototype, "_hasSlottedContent", 2);
-a([
-  p()
+r([
+  v()
 ], i.prototype, "_acknowledged", 2);
-i = a([
+i = r([
   x("hx-clinical-status")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-clinical-status-m4soOOwg.js.map
+//# sourceMappingURL=hx-clinical-status-BS5lcddT.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-clinical-status-BS5lcddT.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, #bae6fd));\n    border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid\n      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0284c7));\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, #f0f9ff));\n    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));\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, #f0f9ff);\n    --hx-clinical-status-border-color: var(--hx-color-info-200, #bae6fd);\n    --hx-clinical-status-accent-color: var(--hx-color-info-500, #0284c7);\n    --hx-clinical-status-color: var(--hx-color-info-800, #0c4a6e);\n    --hx-clinical-status-icon-color: var(--hx-color-info-500, #0284c7);\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, #d97706);\n    --hx-clinical-status-color: var(--hx-color-warning-800, #78350f);\n    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #d97706);\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, #dc2626);\n    --hx-clinical-status-color: var(--hx-color-error-800, #7f1d1d);\n    --hx-clinical-status-icon-color: var(--hx-color-error-500, #dc2626);\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, #991b1b);\n    --hx-clinical-status-color: var(--hx-color-error-900, #651a1a);\n    --hx-clinical-status-icon-color: var(--hx-color-error-700, #991b1b);\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, #0284c7));\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, #0c4a6e));\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, #60a5fa));\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.025em);\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, #60a5fa));\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  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .clinical-status {\n      border-color: CanvasText;\n      border-inline-start-color: CanvasText;\n    }\n\n    .clinical-status__icon svg {\n      fill: CanvasText;\n    }\n\n    .clinical-status__dismiss-button {\n      color: ButtonText;\n      border: 1px solid ButtonText;\n    }\n\n    .clinical-status__acknowledge-button {\n      border-color: ButtonText;\n      color: ButtonText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } 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 = [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._internals.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._internals.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","__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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"}