@helixui/library 2.1.2-next.48 → 2.1.2-next.50

package/dist/shared/{hx-checkbox-CTEZ9IFq.js.map → hx-checkbox-C82GjRXe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-checkbox-CTEZ9IFq.js","sources":["../../src/components/hx-checkbox/hx-checkbox.styles.ts","../../src/components/hx-checkbox/hx-checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .checkbox {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Control (checkbox + label row) ─── */\n\n  .checkbox__control {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--hx-space-2, 0.5rem);\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    cursor: pointer;\n  }\n\n  :host([disabled]) .checkbox__control {\n    cursor: not-allowed;\n  }\n\n  /* ─── Hidden Native Input ─── */\n\n  .checkbox__input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Visual Checkbox ─── */\n\n  .checkbox__box {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    border: var(--hx-border-width-medium, 2px) solid\n      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    margin-top: var(--hx-space-px, 1px);\n  }\n\n  /* ─── Focus Ring ─── */\n\n  .checkbox__input:focus-visible ~ .checkbox__box {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-checkbox-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Checked State ─── */\n\n  .checkbox--checked .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* ─── Indeterminate State ─── */\n\n  .checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* ─── Error State ─── */\n\n  .checkbox--error .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  .checkbox--error.checkbox--checked .checkbox__box,\n  .checkbox--error.checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  /* ─── Hover ─── */\n\n  /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */\n  .checkbox__control:hover .checkbox__box {\n    border-color: var(\n      --hx-checkbox-hover-border-color,\n      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))\n    );\n  }\n\n  .checkbox--checked .checkbox__control:hover .checkbox__box {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .checkbox--error .checkbox__control:hover .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  /* ─── Checkmark Icon ─── */\n\n  .checkbox__icon {\n    display: none;\n    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    fill: none;\n    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .checkbox--checked .checkbox__icon--check {\n    display: block;\n  }\n\n  .checkbox--indeterminate .checkbox__icon--indeterminate {\n    display: block;\n  }\n\n  /* ─── Label ─── */\n\n  .checkbox__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .checkbox__required-marker {\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .checkbox__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #6c757d));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-inline-start: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-inline-start: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) {\n    --hx-checkbox-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__help-text,\n  :host([hx-size='sm']) .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    padding-inline-start: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));\n  }\n\n  :host([hx-size='lg']) {\n    --hx-checkbox-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__label {\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__help-text,\n  :host([hx-size='lg']) .checkbox__error {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    padding-inline-start: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .checkbox__box {\n      transition: none;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixCheckboxStyles } from './hx-checkbox.styles.js';\n\n// P2-05: monotonic counter — collision-free, deterministic, SSR-safe\nconst _nextCheckboxId = createIdCounter('hx-checkbox');\n\n/**\n * A checkbox component with label, validation, and form association.\n *\n * @summary Form-associated checkbox with built-in label, error, and help text.\n *\n * @tag hx-checkbox\n *\n * @slot - Custom label content (overrides the label property). Rich HTML allowed — Drupal can include links in consent labels.\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the checkbox is toggled.\n *\n * @csspart checkbox - The visual checkbox element.\n * @csspart checkmark - The SVG checkmark icon inside the checkbox.\n * @csspart label - The label element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n * @csspart control - The wrapper around checkbox and label.\n *\n * @cssprop [--hx-checkbox-size=var(--hx-size-5, 1.25rem)] - Checkbox dimensions.\n * @cssprop [--hx-checkbox-bg=var(--hx-color-neutral-0, #ffffff)] - Unchecked background color.\n * @cssprop [--hx-checkbox-border-color=var(--hx-color-neutral-300, #ced4da)] - Checkbox border color.\n * @cssprop [--hx-checkbox-border-radius=var(--hx-border-radius-sm, 0.25rem)] - Checkbox border radius.\n * @cssprop [--hx-checkbox-checked-bg=var(--hx-color-primary-500, #2563EB)] - Checked background color.\n * @cssprop [--hx-checkbox-checked-border-color=var(--hx-color-primary-500, #2563EB)] - Checked border color.\n * @cssprop [--hx-checkbox-checkmark-color=var(--hx-color-neutral-0, #ffffff)] - Checkmark color.\n * @cssprop [--hx-checkbox-focus-ring-color=var(--hx-focus-ring-color, #2563EB)] - Focus ring color.\n * @cssprop [--hx-checkbox-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-checkbox-help-text-color=var(--hx-color-neutral-500, #6c757d)] - Help text color.\n * @cssprop [--hx-checkbox-hover-border-color=var(--hx-checkbox-border-color)] - Border color on hover.\n * @cssprop [--hx-checkbox-error-color=var(--hx-color-error-500, #dc3545)] - Error state color.\n */\n@customElement('hx-checkbox')\nexport class HelixCheckbox extends mixinDelegatesAria(FormMixin(HelixElement)) {\n  static override styles = [helixCheckboxStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * Whether the checkbox is checked.\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state (e.g., for \"select all\" patterns).\n   * @attr indeterminate\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Whether the checkbox is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the checkbox is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The name of the checkbox, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The value submitted when the checkbox is checked.\n   * @attr value\n   */\n  @property({ type: String })\n  value = 'on';\n\n  /**\n   * The visible label text for the checkbox.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Error message to display. When set, the checkbox enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the checkbox for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Validation message shown when the field is required but empty.\n   * @attr required-message\n   */\n  @property({ attribute: 'required-message' })\n  requiredMessage = 'This field is required.';\n\n  /**\n   * The size of the checkbox.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** @internal */\n  @query('.checkbox__input')\n  private _inputEl: HTMLInputElement | undefined;\n\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n\n  /**\n   * Deferred copy of this.error used inside the live region. Injected after\n   * the region is visible (via requestAnimationFrame) so screen readers\n   * re-announce the message even if it was set before the region became\n   * visible — see WCAG 4.1.3.\n   * @internal\n   */\n  @state() private _announcedError = '';\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  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('value')) {\n      this._internals.setFormValue(this.checked ? this.value : null);\n    }\n    // WCAG 4.1.3: Keep _announcedError in sync with the error property.\n    // When error changes from one non-empty value to another, clear the live region\n    // first then re-inject after a rAF tick so screen readers re-announce the updated\n    // message (clearing content before the region is re-populated triggers a new event).\n    // When transitioning from empty to non-empty (initial display), set directly so\n    // the text is immediately available for synchronous DOM assertions.\n    if (changedProperties.has('error')) {\n      const previousError = changedProperties.get('error') as string;\n      if (previousError && this.error) {\n        // Changing from one error message to another: defer to trigger re-announcement.\n        this._announcedError = '';\n        requestAnimationFrame(() => {\n          this._announcedError = this.error;\n        });\n      } else {\n        // Transitioning from empty→error or error→empty: set directly.\n        this._announcedError = this.error;\n      }\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  override get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  override get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  override get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** @internal */\n  protected _updateValidity(): void {\n    if (this.required && !this.checked) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.requiredMessage,\n        this._inputEl ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // ─── Form Lifecycle Hooks ───\n\n  protected override _onFormReset(): void {\n    this.checked = false;\n    this.indeterminate = false;\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n  }\n\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    this.checked = typeof state === 'string' && state === this.value;\n  }\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleChange(): void {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n\n    this._internals.setFormValue(this.checked ? this.value : null);\n    this._handleInteractionInput();\n\n    /**\n     * Dispatched when the checkbox is toggled.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ checked: boolean; value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      this._handleChange();\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the checkbox input element. */\n  override focus(options?: FocusOptions): void {\n    this._inputEl?.focus(options);\n  }\n\n  // ─── Render ───\n\n  // P2-05: monotonic counter — collision-free and deterministic\n  /** @internal */\n  private _id = _nextCheckboxId();\n  /** @internal */\n  private _helpTextId = `${this._id}-help`;\n  /** @internal */\n  private _errorId = `${this._id}-error`;\n  /** @internal */\n  private _labelId = `${this._id}-label`;\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const containerClasses = {\n      checkbox: true,\n      'checkbox--checked': this.checked,\n      'checkbox--indeterminate': this.indeterminate,\n      'checkbox--error': hasError,\n      'checkbox--disabled': this.disabled,\n      'checkbox--required': this.required,\n      'checkbox--sm': this.size === 'sm',\n      'checkbox--md': this.size === 'md',\n      'checkbox--lg': this.size === 'lg',\n    };\n\n    // P2-06: simplified — hasError already includes _hasErrorSlot\n    const describedBy =\n      [hasError ? this._errorId : null, this.helpText && !hasError ? this._helpTextId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    const hostAriaLabel = this.ariaLabel ?? undefined;\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <label part=\"control\" class=\"checkbox__control\" @click=${this._handleChange}>\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            id=${this._id}\n            .checked=${live(this.checked)}\n            .indeterminate=${live(this.indeterminate)}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            name=${ifDefined(this.name || undefined)}\n            .value=${this.value}\n            aria-checked=${this.indeterminate ? 'mixed' : nothing}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-label=${ifDefined(hostAriaLabel)}\n            aria-labelledby=${ifDefined(!hostAriaLabel ? this._labelId : undefined)}\n            @keydown=${this._handleKeyDown}\n            @click=${(e: Event) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            @change=${(e: Event) => e.stopPropagation()}\n          />\n\n          <span part=\"checkbox\" class=\"checkbox__box\">\n            <svg\n              part=\"checkmark\"\n              class=\"checkbox__icon checkbox__icon--check\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"3.5 8 6.5 11 12.5 5\"></polyline>\n            </svg>\n            <svg\n              class=\"checkbox__icon checkbox__icon--indeterminate\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <line x1=\"4\" y1=\"8\" x2=\"12\" y2=\"8\"></line>\n            </svg>\n          </span>\n\n          <span part=\"label\" class=\"checkbox__label\" id=${this._labelId}>\n            <slot>${this.label}</slot>\n            ${this.required\n              ? html`<span class=\"checkbox__required-marker\" aria-hidden=\"true\">*</span>`\n              : nothing}\n          </span>\n        </label>\n\n        <!--\n          P0-01: wrapper div always owns _errorId so aria-describedby works regardless\n          of whether error content comes from the .error property or the named slot.\n          P1-02: role=\"status\" (implicit aria-live=\"polite\") replaces role=\"alert\" +\n          aria-live=\"polite\" which was semantically contradictory.\n        -->\n        <div\n          part=\"error\"\n          class=\"checkbox__error\"\n          id=${this._errorId}\n          role=\"status\"\n          ?hidden=${!hasError}\n        >\n          <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n            ${this._announcedError}\n          </slot>\n        </div>\n\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"checkbox__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n/** Canonical type alias for the hx-checkbox component. */\nexport type HxCheckbox = HelixCheckbox;\n\n/** @deprecated Use {@link HxCheckbox} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcCheckbox = HelixCheckbox;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-checkbox': HelixCheckbox;\n  }\n}\n"],"names":["helixCheckboxStyles","css","_nextCheckboxId","createIdCounter","HelixCheckbox","mixinDelegatesAria","FormMixin","HelixElement","slot","changedProperties","state","_mode","disabled","options","_a","hasError","containerClasses","describedBy","hostAriaLabel","html","classMap","live","ifDefined","nothing","e","__decorateClass","property","query","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-checkbox-C82GjRXe.js","sources":["../../src/components/hx-checkbox/hx-checkbox.styles.ts","../../src/components/hx-checkbox/hx-checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .checkbox {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Control (checkbox + label row) ─── */\n\n  .checkbox__control {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--hx-space-2, 0.5rem);\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    cursor: pointer;\n  }\n\n  :host([disabled]) .checkbox__control {\n    cursor: not-allowed;\n  }\n\n  /* ─── Hidden Native Input ─── */\n\n  .checkbox__input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Visual Checkbox ─── */\n\n  .checkbox__box {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    border: var(--hx-border-width-medium, 2px) solid\n      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    margin-top: var(--hx-space-px, 1px);\n  }\n\n  /* ─── Focus Ring ─── */\n\n  .checkbox__input:focus-visible ~ .checkbox__box {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-checkbox-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Checked State ─── */\n\n  .checkbox--checked .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* ─── Indeterminate State ─── */\n\n  .checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* ─── Error State ─── */\n\n  .checkbox--error .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  .checkbox--error.checkbox--checked .checkbox__box,\n  .checkbox--error.checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  /* ─── Hover ─── */\n\n  /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */\n  .checkbox__control:hover .checkbox__box {\n    border-color: var(\n      --hx-checkbox-hover-border-color,\n      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))\n    );\n  }\n\n  .checkbox--checked .checkbox__control:hover .checkbox__box {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .checkbox--error .checkbox__control:hover .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  /* ─── Checkmark Icon ─── */\n\n  .checkbox__icon {\n    display: none;\n    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    fill: none;\n    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .checkbox--checked .checkbox__icon--check {\n    display: block;\n  }\n\n  .checkbox--indeterminate .checkbox__icon--indeterminate {\n    display: block;\n  }\n\n  /* ─── Label ─── */\n\n  .checkbox__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .checkbox__required-marker {\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .checkbox__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #6c757d));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-inline-start: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-inline-start: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) {\n    --hx-checkbox-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__help-text,\n  :host([hx-size='sm']) .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    padding-inline-start: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));\n  }\n\n  :host([hx-size='lg']) {\n    --hx-checkbox-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__label {\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__help-text,\n  :host([hx-size='lg']) .checkbox__error {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    padding-inline-start: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .checkbox__box {\n      transition: none;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixCheckboxStyles } from './hx-checkbox.styles.js';\n\n// P2-05: monotonic counter — collision-free, deterministic, SSR-safe\nconst _nextCheckboxId = createIdCounter('hx-checkbox');\n\n/**\n * A checkbox component with label, validation, and form association.\n *\n * @summary Form-associated checkbox with built-in label, error, and help text.\n *\n * @tag hx-checkbox\n *\n * @slot - Custom label content (overrides the label property). Rich HTML allowed — Drupal can include links in consent labels.\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the checkbox is toggled.\n *\n * @csspart checkbox - The visual checkbox element.\n * @csspart checkmark - The SVG checkmark icon inside the checkbox.\n * @csspart label - The label element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n * @csspart control - The wrapper around checkbox and label.\n *\n * @cssprop [--hx-checkbox-size=var(--hx-size-5, 1.25rem)] - Checkbox dimensions.\n * @cssprop [--hx-checkbox-bg=var(--hx-color-neutral-0, #ffffff)] - Unchecked background color.\n * @cssprop [--hx-checkbox-border-color=var(--hx-color-neutral-300, #ced4da)] - Checkbox border color.\n * @cssprop [--hx-checkbox-border-radius=var(--hx-border-radius-sm, 0.25rem)] - Checkbox border radius.\n * @cssprop [--hx-checkbox-checked-bg=var(--hx-color-primary-500, #2563EB)] - Checked background color.\n * @cssprop [--hx-checkbox-checked-border-color=var(--hx-color-primary-500, #2563EB)] - Checked border color.\n * @cssprop [--hx-checkbox-checkmark-color=var(--hx-color-neutral-0, #ffffff)] - Checkmark color.\n * @cssprop [--hx-checkbox-focus-ring-color=var(--hx-focus-ring-color, #2563EB)] - Focus ring color.\n * @cssprop [--hx-checkbox-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-checkbox-help-text-color=var(--hx-color-neutral-500, #6c757d)] - Help text color.\n * @cssprop [--hx-checkbox-hover-border-color=var(--hx-checkbox-border-color)] - Border color on hover.\n * @cssprop [--hx-checkbox-error-color=var(--hx-color-error-500, #dc3545)] - Error state color.\n */\n@customElement('hx-checkbox')\nexport class HelixCheckbox extends mixinDelegatesAria(FormMixin(HelixElement)) {\n  static override styles = [helixCheckboxStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * Whether the checkbox is checked.\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state (e.g., for \"select all\" patterns).\n   * @attr indeterminate\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Whether the checkbox is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the checkbox is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The name of the checkbox, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The value submitted when the checkbox is checked.\n   * @attr value\n   */\n  @property({ type: String })\n  value = 'on';\n\n  /**\n   * The visible label text for the checkbox.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Error message to display. When set, the checkbox enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the checkbox for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Validation message shown when the field is required but empty.\n   * @attr required-message\n   */\n  @property({ attribute: 'required-message' })\n  requiredMessage = 'This field is required.';\n\n  /**\n   * The size of the checkbox.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** @internal */\n  @query('.checkbox__input')\n  private _inputEl: HTMLInputElement | undefined;\n\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n\n  /**\n   * Deferred copy of this.error used inside the live region. Injected after\n   * the region is visible (via requestAnimationFrame) so screen readers\n   * re-announce the message even if it was set before the region became\n   * visible — see WCAG 4.1.3.\n   * @internal\n   */\n  @state() private _announcedError = '';\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  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('value')) {\n      this._internals.setFormValue(this.checked ? this.value : null);\n    }\n    // WCAG 4.1.3: Keep _announcedError in sync with the error property.\n    // When error changes from one non-empty value to another, clear the live region\n    // first then re-inject after a rAF tick so screen readers re-announce the updated\n    // message (clearing content before the region is re-populated triggers a new event).\n    // When transitioning from empty to non-empty (initial display), set directly so\n    // the text is immediately available for synchronous DOM assertions.\n    if (changedProperties.has('error')) {\n      const previousError = changedProperties.get('error') as string;\n      if (previousError && this.error) {\n        // Changing from one error message to another: defer to trigger re-announcement.\n        this._announcedError = '';\n        requestAnimationFrame(() => {\n          this._announcedError = this.error;\n        });\n      } else {\n        // Transitioning from empty→error or error→empty: set directly.\n        this._announcedError = this.error;\n      }\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  override get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  override get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  override get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** @internal */\n  protected _updateValidity(): void {\n    if (this.required && !this.checked) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.requiredMessage,\n        this._inputEl ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // ─── Form Lifecycle Hooks ───\n\n  protected override _onFormReset(): void {\n    this.checked = false;\n    this.indeterminate = false;\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n  }\n\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    this.checked = typeof state === 'string' && state === this.value;\n  }\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleChange(): void {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n\n    this._internals.setFormValue(this.checked ? this.value : null);\n    this._handleInteractionInput();\n\n    /**\n     * Dispatched when the checkbox is toggled.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ checked: boolean; value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      this._handleChange();\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the checkbox input element. */\n  override focus(options?: FocusOptions): void {\n    this._inputEl?.focus(options);\n  }\n\n  // ─── Render ───\n\n  // P2-05: monotonic counter — collision-free and deterministic\n  /** @internal */\n  private _id = _nextCheckboxId();\n  /** @internal */\n  private _helpTextId = `${this._id}-help`;\n  /** @internal */\n  private _errorId = `${this._id}-error`;\n  /** @internal */\n  private _labelId = `${this._id}-label`;\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const containerClasses = {\n      checkbox: true,\n      'checkbox--checked': this.checked,\n      'checkbox--indeterminate': this.indeterminate,\n      'checkbox--error': hasError,\n      'checkbox--disabled': this.disabled,\n      'checkbox--required': this.required,\n      'checkbox--sm': this.size === 'sm',\n      'checkbox--md': this.size === 'md',\n      'checkbox--lg': this.size === 'lg',\n    };\n\n    // P2-06: simplified — hasError already includes _hasErrorSlot\n    const describedBy =\n      [hasError ? this._errorId : null, this.helpText && !hasError ? this._helpTextId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    const hostAriaLabel = this.ariaLabel ?? undefined;\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <label part=\"control\" class=\"checkbox__control\" @click=${this._handleChange}>\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            id=${this._id}\n            .checked=${live(this.checked)}\n            .indeterminate=${live(this.indeterminate)}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            name=${ifDefined(this.name || undefined)}\n            .value=${this.value}\n            aria-checked=${this.indeterminate ? 'mixed' : nothing}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-label=${ifDefined(hostAriaLabel)}\n            aria-labelledby=${ifDefined(!hostAriaLabel ? this._labelId : undefined)}\n            @keydown=${this._handleKeyDown}\n            @click=${(e: Event) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            @change=${(e: Event) => e.stopPropagation()}\n          />\n\n          <span part=\"checkbox\" class=\"checkbox__box\">\n            <svg\n              part=\"checkmark\"\n              class=\"checkbox__icon checkbox__icon--check\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"3.5 8 6.5 11 12.5 5\"></polyline>\n            </svg>\n            <svg\n              class=\"checkbox__icon checkbox__icon--indeterminate\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <line x1=\"4\" y1=\"8\" x2=\"12\" y2=\"8\"></line>\n            </svg>\n          </span>\n\n          <span part=\"label\" class=\"checkbox__label\" id=${this._labelId}>\n            <slot>${this.label}</slot>\n            ${this.required\n              ? html`<span class=\"checkbox__required-marker\" aria-hidden=\"true\">*</span>`\n              : nothing}\n          </span>\n        </label>\n\n        <!--\n          P0-01: wrapper div always owns _errorId so aria-describedby works regardless\n          of whether error content comes from the .error property or the named slot.\n          P1-02: role=\"status\" (implicit aria-live=\"polite\") replaces role=\"alert\" +\n          aria-live=\"polite\" which was semantically contradictory.\n        -->\n        <div\n          part=\"error\"\n          class=\"checkbox__error\"\n          id=${this._errorId}\n          role=\"status\"\n          ?hidden=${!hasError}\n        >\n          <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n            ${this._announcedError}\n          </slot>\n        </div>\n\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"checkbox__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n/** Canonical type alias for the hx-checkbox component. */\nexport type HxCheckbox = HelixCheckbox;\n\n/** @deprecated Use {@link HxCheckbox} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcCheckbox = HelixCheckbox;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-checkbox': HelixCheckbox;\n  }\n}\n"],"names":["helixCheckboxStyles","css","_nextCheckboxId","createIdCounter","HelixCheckbox","mixinDelegatesAria","FormMixin","HelixElement","slot","changedProperties","state","_mode","disabled","options","_a","hasError","containerClasses","describedBy","hostAriaLabel","html","classMap","live","ifDefined","nothing","e","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-clinical-status-m4soOOwg.js → hx-clinical-status-BjtT5c0M.js}

@@ -2,7 +2,8 @@ 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 { classMap as u } from "lit/directives/class-map.js";
-import { H as g, c as m } from "./id-counter-JhvVCnjh.js";
+import { H as g } from "./helix-element-CZvaIEQP.js";
+import { c as m } from "./id-counter-PTgF-zcG.js";
 const f = v`
   :host {
     display: block;
@@ -252,15 +253,15 @@ const f = v`
     }
   }
 `;
-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 b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (t, s, a, c) => {
+  for (var n = c > 1 ? void 0 : c ? _(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 && b(s, a, 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;
+    super(...arguments), this._elInternals = this.attachInternals(), 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. */
@@ -290,13 +291,13 @@ let i = class extends g {
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", this._role);
+    super.connectedCallback(), this._elInternals.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._elInternals.role = this._role);
   }
   // ─── Default Icons ───
   /** @internal */
@@ -388,16 +389,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 +437,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([
+r([
   p()
 ], i.prototype, "_hasSlottedContent", 2);
-a([
+r([
   p()
 ], 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-BjtT5c0M.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-clinical-status-BjtT5c0M.js","sources":["../../src/components/hx-clinical-status/hx-clinical-status.styles.ts","../../src/components/hx-clinical-status/hx-clinical-status.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixClinicalStatusStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Screen-reader-only utility ─── */\n  /* @design-system-approved: WCAG standard visually-hidden technique for a11y */\n\n  .sr-only {\n    position: absolute;\n    width: 1px; /* @design-system-approved: standard sr-only technique */\n    height: 1px; /* @design-system-approved: standard sr-only technique */\n    padding: 0;\n    margin: -1px; /* @design-system-approved: standard sr-only technique */\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Container ─── */\n\n  .clinical-status {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));\n    padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));\n    border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid\n      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #b3d9ef));\n    border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid\n      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #3b82f6));\n    border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #e8f4fd));\n    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));\n    font-family: var(--hx-clinical-status-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Compact Mode ─── */\n\n  .clinical-status--compact {\n    padding: var(\n      --hx-clinical-status-compact-padding,\n      var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem)\n    );\n    gap: var(--hx-space-2, 0.5rem);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  /* ─── Severity: info ─── */\n\n  :host([severity='info']) .clinical-status,\n  :host(:not([severity])) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-info-50, #e8f4fd);\n    --hx-clinical-status-border-color: var(--hx-color-info-200, #b3d9ef);\n    --hx-clinical-status-accent-color: var(--hx-color-info-500, #3b82f6);\n    --hx-clinical-status-color: var(--hx-color-info-800, #1a3a4a);\n    --hx-clinical-status-icon-color: var(--hx-color-info-500, #3b82f6);\n  }\n\n  /* ─── Severity: warning ─── */\n\n  :host([severity='warning']) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);\n    --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);\n    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #f59e0b);\n    --hx-clinical-status-color: var(--hx-color-warning-800, #92400e);\n    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #f59e0b);\n  }\n\n  /* ─── Severity: critical ─── */\n\n  :host([severity='critical']) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);\n    --hx-clinical-status-accent-color: var(--hx-color-error-500, #ef4444);\n    --hx-clinical-status-color: var(--hx-color-error-800, #991b1b);\n    --hx-clinical-status-icon-color: var(--hx-color-error-500, #ef4444);\n  }\n\n  /* ─── Severity: emergent ─── */\n\n  :host([severity='emergent']) .clinical-status {\n    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);\n    --hx-clinical-status-accent-color: var(--hx-color-error-700, #b91c1c);\n    --hx-clinical-status-color: var(--hx-color-error-900, #7f1d1d);\n    --hx-clinical-status-icon-color: var(--hx-color-error-700, #b91c1c);\n    border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);\n    font-weight: var(--hx-font-weight-semibold, 600);\n  }\n\n  /* ─── Icon ─── */\n\n  .clinical-status__icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #3b82f6));\n  }\n\n  .clinical-status__icon svg {\n    width: var(--hx-space-5, 1.25rem);\n    height: var(--hx-space-5, 1.25rem);\n    fill: currentColor;\n  }\n\n  .clinical-status--compact .clinical-status__icon svg {\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Message ─── */\n\n  .clinical-status__message {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* ─── Severity Label (WCAG 1.4.1) ─── */\n  /* @design-system-approved: WCAG 1.4.1 non-color severity indicator for screen readers */\n\n  .clinical-status__severity-label {\n    position: absolute;\n    width: 1px; /* @design-system-approved: standard sr-only technique */\n    height: 1px; /* @design-system-approved: standard sr-only technique */\n    padding: 0;\n    margin: -1px; /* @design-system-approved: standard sr-only technique */\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Actions ─── */\n\n  .clinical-status__actions {\n    display: none;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    margin-inline-start: auto;\n    flex-shrink: 0;\n  }\n\n  .clinical-status__actions--visible {\n    display: flex;\n  }\n\n  /* ─── Dismiss Button ─── */\n\n  .clinical-status__dismiss-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    min-width: var(--hx-touch-target-size, 44px);\n    min-height: var(--hx-touch-target-size, 44px);\n    padding: 0;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));\n    cursor: pointer;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: 1;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      opacity var(--hx-transition-fast, 150ms ease);\n    opacity: 0.7;\n  }\n\n  .clinical-status__dismiss-button:hover {\n    opacity: 1;\n    background-color: color-mix(in srgb, currentColor 10%, transparent);\n  }\n\n  .clinical-status__dismiss-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    opacity: 1;\n  }\n\n  .clinical-status__dismiss-button svg {\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    fill: currentColor;\n  }\n\n  .clinical-status--compact .clinical-status__dismiss-button {\n    min-width: var(--hx-space-8, 2rem);\n    min-height: var(--hx-space-8, 2rem);\n  }\n\n  /* ─── Acknowledge Button ─── */\n\n  .clinical-status__acknowledge-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n    border: var(--hx-border-width-thin, 1px) solid currentColor;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: inherit;\n    font-family: inherit;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    text-transform: uppercase;\n    letter-spacing: var(--hx-letter-spacing-wide, 0.05em);\n    cursor: pointer;\n    line-height: var(--hx-line-height-normal, 1.5);\n    min-height: var(--hx-touch-target-size, 44px);\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      opacity var(--hx-transition-fast, 150ms ease);\n  }\n\n  .clinical-status__acknowledge-button:hover {\n    background-color: color-mix(in srgb, currentColor 10%, transparent);\n  }\n\n  .clinical-status__acknowledge-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .clinical-status--compact .clinical-status__acknowledge-button {\n    min-height: var(--hx-space-8, 2rem);\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .clinical-status__dismiss-button,\n    .clinical-status__acknowledge-button {\n      transition: none;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../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  /**\n   * ElementInternals instance for setting ARIA role without host attributes.\n   * Using internals prevents consumers from accidentally overriding the role\n   * via a host attribute, which would break critical healthcare alert semantics.\n   * @internal\n   */\n  private readonly _elInternals = this.attachInternals();\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._elInternals.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._elInternals.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;A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"}

package/dist/shared/{hx-code-snippet-CoLYvX1Z.js → hx-code-snippet-DcVENSuC.js}

@@ -1,7 +1,8 @@
-import { css as x, LitElement as m, html as p, nothing as h } from "lit";
+import { css as x, html as p, nothing as h } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
-import { property as r, state as d, customElement as f } from "lit/decorators.js";
+import { property as r, state as d, customElement as m } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
+import { H as f } from "./helix-element-CZvaIEQP.js";
 const b = x`
   :host {
     display: block;
@@ -187,7 +188,7 @@ var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (e, t, n
     (c = e[l]) && (s = (a ? c(t, n, s) : c(s)) || s);
   return a && s && v(t, n, s), s;
 };
-let o = class extends m {
+let o = class extends f {
   constructor() {
     super(...arguments), this.language = "", this.inline = !1, this.wrap = !1, this.copyable = !1, this.maxLines = 0, this.lineNumbers = !1, this.labelCopy = "Copy code", this.labelCopied = "Copied!", this.labelShowMore = "Show more", this.labelShowLess = "Show less", this._copied = !1, this._expanded = !1, this._codeText = "", this._copyTimer = null;
   }
@@ -352,9 +353,9 @@ i([
   d()
 ], o.prototype, "_codeText", 2);
 o = i([
-  f("hx-code-snippet")
+  m("hx-code-snippet")
 ], o);
 export {
   o as H
 };
-//# sourceMappingURL=hx-code-snippet-CoLYvX1Z.js.map
+//# sourceMappingURL=hx-code-snippet-DcVENSuC.js.map

package/dist/shared/hx-code-snippet-DcVENSuC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-code-snippet-DcVENSuC.js","sources":["../../src/components/hx-code-snippet/hx-code-snippet.styles.ts","../../src/components/hx-code-snippet/hx-code-snippet.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCodeSnippetStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([inline]) {\n    display: inline;\n  }\n\n  /* ─── Inline Mode ─── */\n\n  .code-snippet--inline {\n    display: inline;\n    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));\n    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));\n    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));\n    padding: var(--hx-code-snippet-inline-padding-y, 0.125em)\n      var(--hx-code-snippet-inline-padding-x, 0.375em);\n    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));\n  }\n\n  /* ─── Block Mode Container ─── */\n\n  .code-snippet {\n    position: relative;\n    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));\n    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));\n    overflow: hidden;\n  }\n\n  /* ─── Hidden Slot ─── */\n\n  .code-snippet__slot {\n    display: none;\n  }\n\n  /* ─── Header ─── */\n\n  .code-snippet__header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-2, 0.5rem) 0;\n    min-height: var(--hx-space-8, 2rem);\n  }\n\n  /* ─── Pre / Code ─── */\n\n  .code-snippet__pre {\n    margin: 0;\n    padding: var(--hx-code-snippet-padding, var(--hx-space-4, 1rem));\n    overflow-x: auto;\n    white-space: pre;\n  }\n\n  .code-snippet__pre--wrap {\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n\n  .code-snippet__code {\n    display: block;\n    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-relaxed, 1.625);\n    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));\n    tab-size: var(--hx-code-snippet-tab-size, 2);\n  }\n\n  /* ─── Copy Button ─── */\n\n  .code-snippet__copy-button {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    /* WCAG 2.5.5: minimum 44×44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background-color: var(--hx-color-neutral-800, #1e293b);\n    color: var(--hx-color-neutral-200, #e2e8f0);\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: 1; /* intentional literal: icon/action button needs line-height 1; no token maps to exactly 1 */\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease);\n    white-space: nowrap;\n    z-index: 1; /* @audit-exception: local stacking context within shadow root */\n  }\n\n  .code-snippet__copy-button:hover {\n    background-color: var(--hx-color-neutral-700, #334155);\n    border-color: var(--hx-color-neutral-500, #64748b);\n  }\n\n  .code-snippet__copy-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .code-snippet__copy-button:active {\n    /* Non-standard token — fallback 0.8 applies if token is absent */\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Expand Button ─── */\n\n  .code-snippet__expand-button {\n    display: block;\n    width: 100%;\n    /* WCAG 2.5.5: minimum 44×44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    border: none;\n    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);\n    background-color: var(--hx-color-neutral-800, #1e293b);\n    color: var(--hx-color-neutral-300, #cbd5e1);\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    text-align: center;\n    cursor: pointer;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .code-snippet__expand-button:hover {\n    background-color: var(--hx-color-neutral-700, #334155);\n    color: var(--hx-color-neutral-100, #f1f5f9);\n  }\n\n  .code-snippet__expand-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Line Numbers ─── */\n\n  .code-snippet__line-number {\n    display: inline-block;\n    min-width: var(--hx-space-8, 2rem);\n    padding-inline-end: var(--hx-space-3, 0.75rem);\n    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));\n    user-select: none;\n    text-align: end;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .code-snippet__copy-button {\n      transition: none;\n    }\n\n    .code-snippet__expand-button {\n      transition: none;\n    }\n  }\n\n  /* ─── Screen-reader only ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { html, nothing, TemplateResult } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { HelixElement } from '../../base/index.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixCodeSnippetStyles } from './hx-code-snippet.styles.js';\n\n/**\n * A styled code block with optional copy button and max-lines truncation.\n * Supports block (`<pre><code>`) and inline (`<code>`) rendering modes.\n * No external syntax highlighting dependency — use the `language` attribute\n * as a hint for consumers integrating their own highlighter via slotted content.\n *\n * @summary Styled code display component with copy-to-clipboard and expand/collapse.\n *\n * @tag hx-code-snippet\n *\n * @slot - Code content as plain text. Note: HTML markup in slot content will be\n *   stripped — only text content is extracted. Pre-highlighted HTML is not supported.\n *\n * @fires {CustomEvent<{text: string}>} hx-copy - Dispatched when the copy button is clicked.\n *\n * @csspart base - The outermost container (block: `<div>`, inline: `<code>`).\n * @csspart header - The header bar containing the copy button (block mode only).\n * @csspart code - The `<code>` element containing the content.\n * @csspart copy-button - The copy-to-clipboard button.\n * @csspart expand-button - The \"Show more / Show less\" button.\n *\n * @cssprop [--hx-code-snippet-bg=var(--hx-color-neutral-900,#0f172a)] - Background color.\n * @cssprop [--hx-code-snippet-color=var(--hx-color-neutral-100,#f1f5f9)] - Text color.\n * @cssprop [--hx-code-snippet-font-family=var(--hx-font-family-mono,monospace)] - Font family.\n * @cssprop [--hx-code-snippet-font-size=var(--hx-font-size-sm,0.875rem)] - Font size.\n * @cssprop [--hx-code-snippet-border-radius=var(--hx-border-radius-md,0.375rem)] - Border radius.\n * @cssprop [--hx-code-snippet-padding=var(--hx-space-4,1rem)] - Inner padding (block mode).\n */\n@customElement('hx-code-snippet')\nexport class HelixCodeSnippet extends HelixElement {\n  static override styles = [helixCodeSnippetStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Language hint for consumers to apply syntax highlighting.\n   * Does not affect rendering directly; it is applied as a `language-*` class\n   * on the `<code>` element so external highlighters can target it.\n   * @attr language\n   */\n  @property({ type: String, reflect: true })\n  language: string = '';\n\n  /**\n   * When true, renders as an inline `<code>` element instead of a `<pre><code>` block.\n   * @attr inline\n   */\n  @property({ type: Boolean, reflect: true })\n  inline: boolean = false;\n\n  /**\n   * When true, enables word-wrap in block mode.\n   * @attr wrap\n   */\n  @property({ type: Boolean, reflect: true })\n  wrap: boolean = false;\n\n  /**\n   * When true, shows a copy-to-clipboard button. Add the `copyable` attribute to enable it.\n   * @attr copyable\n   */\n  @property({ type: Boolean, reflect: true })\n  copyable: boolean = false;\n\n  /**\n   * Maximum number of lines to display before showing a \"Show more\" button.\n   * Set to 0 (default) to disable truncation.\n   * @attr max-lines\n   */\n  @property({ type: Number, attribute: 'max-lines', reflect: true })\n  maxLines: number = 0;\n\n  /**\n   * When true, prepends line numbers to each displayed line in block mode.\n   * Line numbers are rendered as `aria-hidden` spans so screen readers skip them.\n   * @attr line-numbers\n   */\n  @property({ type: Boolean, attribute: 'line-numbers', reflect: true })\n  lineNumbers: boolean = false;\n\n  /**\n   * Label for the copy button in idle state.\n   * @attr label-copy\n   */\n  @property({ type: String, attribute: 'label-copy' })\n  labelCopy = 'Copy code';\n\n  /**\n   * Label for the copy button after successful copy.\n   * @attr label-copied\n   */\n  @property({ type: String, attribute: 'label-copied' })\n  labelCopied = 'Copied!';\n\n  /**\n   * Label for the expand button when content is collapsed.\n   * @attr label-show-more\n   */\n  @property({ type: String, attribute: 'label-show-more' })\n  labelShowMore = 'Show more';\n\n  /**\n   * Label for the expand button when content is expanded.\n   * @attr label-show-less\n   */\n  @property({ type: String, attribute: 'label-show-less' })\n  labelShowLess = 'Show less';\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _copied: boolean = false;\n  /** @internal */\n  @state() private _expanded: boolean = false;\n  /** @internal */\n  @state() private _codeText: string = '';\n\n  /** @internal */\n  private _copyTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override firstUpdated(): void {\n    // Prevent flash of empty <code> before slotchange fires by eagerly reading\n    // text content from host children that are already present on first render.\n    if (!this._codeText) {\n      const text = this.textContent?.trim() ?? '';\n      if (text) {\n        this._codeText = text;\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._copyTimer !== null) {\n      clearTimeout(this._copyTimer);\n      this._copyTimer = null;\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement | null;\n    if (!slot) return;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._codeText = nodes.map((n) => n.textContent ?? '').join('');\n  }\n\n  /** @internal */\n  private _handleCopy(): void {\n    const text = this._codeText;\n\n    navigator?.clipboard?.writeText(text).catch(() => {\n      // Clipboard API unavailable (non-HTTPS environments such as Drupal staging) — emit event only.\n      // Note: navigator.clipboard requires a secure context (HTTPS or localhost).\n      // On HTTP, the copy event still fires but the clipboard is not populated.\n    });\n\n    this.dispatchEvent(\n      new CustomEvent<{ text: string }>('hx-copy', {\n        bubbles: true,\n        composed: true,\n        detail: { text },\n      }),\n    );\n\n    this._copied = true;\n    if (this._copyTimer !== null) clearTimeout(this._copyTimer);\n    this._copyTimer = setTimeout(() => {\n      this._copied = false;\n    }, 2000);\n  }\n\n  /** @internal */\n  private _handleExpand(): void {\n    this._expanded = !this._expanded;\n  }\n\n  // ─── Helpers ───\n\n  /** @internal */\n  private _getDisplayLines(): string[] {\n    const lines = this._codeText.split('\\n');\n    if (!this.maxLines || this.maxLines <= 0 || this._expanded) {\n      return lines;\n    }\n    if (lines.length <= this.maxLines) {\n      return lines;\n    }\n    return lines.slice(0, this.maxLines);\n  }\n\n  /** @internal */\n  private _isTruncated(): boolean {\n    if (!this.maxLines || this.maxLines <= 0) return false;\n    const lines = this._codeText.split('\\n');\n    return lines.length > this.maxLines;\n  }\n\n  /** @internal */\n  private _renderLines(lines: string[]): TemplateResult {\n    if (!this.lineNumbers) {\n      return html`${lines.join('\\n')}`;\n    }\n    return html`${lines.map(\n      (line, i) =>\n        html`<span aria-hidden=\"true\" class=\"code-snippet__line-number\">${i + 1}</span>${line +\n          '\\n'}`,\n    )}`;\n  }\n\n  // ─── Render ───\n\n  override render(): TemplateResult | typeof nothing {\n    if (this.inline) {\n      return html`\n        <code part=\"base code\" class=\"code-snippet code-snippet--inline\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </code>\n      `;\n    }\n\n    const displayLines = this._getDisplayLines();\n    const truncated = this._isTruncated();\n    const preLabel = this.language ? `Code snippet: ${this.language}` : 'Code snippet';\n    const codeClasses = classMap({\n      'code-snippet__code': true,\n      [`language-${this.language}`]: Boolean(this.language),\n    });\n\n    return html`\n      <div part=\"base\" class=\"code-snippet\">\n        <div part=\"header\" class=\"code-snippet__header\">\n          ${this.copyable\n            ? html`\n                <button\n                  part=\"copy-button\"\n                  class=\"code-snippet__copy-button\"\n                  type=\"button\"\n                  aria-label=${this._copied ? this.labelCopied : this.labelCopy}\n                  @click=${this._handleCopy}\n                >\n                  ${this._copied ? this.labelCopied : this.labelCopy}\n                </button>\n              `\n            : nothing}\n        </div>\n\n        <!-- Visually-hidden live region announces copy confirmation to assistive technology -->\n        <span\n          aria-live=\"polite\"\n          style=\"position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;\"\n          >${this._copied ? this.labelCopied : ''}</span\n        >\n\n        <pre\n          role=\"region\"\n          aria-label=${preLabel}\n          class=${classMap({\n            'code-snippet__pre': true,\n            'code-snippet__pre--wrap': this.wrap,\n          })}\n        ><code part=\"code\" class=${codeClasses}>${this._renderLines(displayLines)}</code></pre>\n\n        <!-- Hidden slot to capture text content for display and copy -->\n        <slot class=\"code-snippet__slot\" @slotchange=${this._handleSlotChange}></slot>\n\n        ${truncated\n          ? html`\n              <button\n                part=\"expand-button\"\n                class=\"code-snippet__expand-button\"\n                type=\"button\"\n                aria-expanded=${this._expanded ? 'true' : 'false'}\n                @click=${this._handleExpand}\n              >\n                ${this._expanded ? this.labelShowLess : this.labelShowMore}\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-code-snippet': HelixCodeSnippet;\n  }\n}\n"],"names":["helixCodeSnippetStyles","css","HelixCodeSnippet","HelixElement","text","_a","slot","nodes","n","lines","html","line","i","displayLines","truncated","preLabel","codeClasses","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}