npm - @helixui/library - Versions diffs - 3.7.0 → 3.8.0 - Mend

@helixui/library 3.7.0 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (248) hide show

package/dist/shared/hx-clinical-status-D3XQIOqX.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-clinical-status-D3XQIOqX.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, #bedcfc));\n border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid\n var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0c8beb));\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, #eff6fe));\n color: var(--hx-clinical-status-color, var(--hx-color-info-800, #064172));\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, #eff6fe);\n --hx-clinical-status-border-color: var(--hx-color-info-200, #bedcfc);\n --hx-clinical-status-accent-color: var(--hx-color-info-500, #0c8beb);\n --hx-clinical-status-color: var(--hx-color-info-800, #064172);\n --hx-clinical-status-icon-color: var(--hx-color-info-500, #0c8beb);\n }\n\n / ─── Severity: warning ─── /\n\n :host([severity='warning']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-warning-50, #fff3ea);\n --hx-clinical-status-border-color: var(--hx-color-warning-200, #facfae);\n --hx-clinical-status-accent-color: var(--hx-color-warning-500, #c2711c);\n --hx-clinical-status-color: var(--hx-color-warning-800, #603301);\n --hx-clinical-status-icon-color: var(--hx-color-warning-500, #c2711c);\n }\n\n / ─── Severity: critical ─── /\n\n :host([severity='critical']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);\n --hx-clinical-status-border-color: var(--hx-color-error-200, #fccbc4);\n --hx-clinical-status-accent-color: var(--hx-color-error-500, #e5493e);\n --hx-clinical-status-color: var(--hx-color-error-800, #7a090a);\n --hx-clinical-status-icon-color: var(--hx-color-error-500, #e5493e);\n }\n\n / ─── Severity: emergent ─── /\n\n :host([severity='emergent']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);\n --hx-clinical-status-border-color: var(--hx-color-error-300, #fda79c);\n --hx-clinical-status-accent-color: var(--hx-color-error-700, #a21312);\n --hx-clinical-status-color: var(--hx-color-error-900, #530d0a);\n --hx-clinical-status-icon-color: var(--hx-color-error-700, #a21312);\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, #0c8beb));\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, #064172));\n cursor: pointer;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: 1;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n opacity: 0.7;\n }\n\n .clinical-status__dismiss-button:hover {\n opacity: 1;\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .clinical-status__dismiss-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);\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 var(--hx-focus-ring-color, #0f7078);\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';\nimport { forcedColorsSurface } from '../../styles/forced-colors.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 * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-error-200] - Color.\n * @cssprop [--hx-color-error-300] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-700] - Color.\n * @cssprop [--hx-color-error-800] - Color.\n * @cssprop [--hx-color-error-900] - Color.\n * @cssprop [--hx-color-focus] - Color.\n * @cssprop [--hx-color-info-200] - Color.\n * @cssprop [--hx-color-info-50] - Color.\n * @cssprop [--hx-color-info-500] - Color.\n * @cssprop [--hx-color-info-800] - Color.\n * @cssprop [--hx-color-warning-200] - Color.\n * @cssprop [--hx-color-warning-50] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-warning-800] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-letter-spacing-wide] - CSS custom property.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-5] - Spacing token.\n * @cssprop [--hx-space-8] - Spacing token.\n * @cssprop [--hx-touch-target-size] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n /\n@customElement('hx-clinical-status')\nexport class HelixClinicalStatus extends HelixElement {\n static override styles = [helixClinicalStatusStyles, forcedColorsSurface];\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","forcedColorsSurface","__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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"}
1	+ {"version":3,"file":"hx-clinical-status-D3XQIOqX.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, #bedcfc));\n border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid\n var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0c8beb));\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, #eff6fe));\n color: var(--hx-clinical-status-color, var(--hx-color-info-800, #064172));\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, #eff6fe);\n --hx-clinical-status-border-color: var(--hx-color-info-200, #bedcfc);\n --hx-clinical-status-accent-color: var(--hx-color-info-500, #0c8beb);\n --hx-clinical-status-color: var(--hx-color-info-800, #064172);\n --hx-clinical-status-icon-color: var(--hx-color-info-500, #0c8beb);\n }\n\n / ─── Severity: warning ─── /\n\n :host([severity='warning']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-warning-50, #fff3ea);\n --hx-clinical-status-border-color: var(--hx-color-warning-200, #facfae);\n --hx-clinical-status-accent-color: var(--hx-color-warning-500, #c2711c);\n --hx-clinical-status-color: var(--hx-color-warning-800, #603301);\n --hx-clinical-status-icon-color: var(--hx-color-warning-500, #c2711c);\n }\n\n / ─── Severity: critical ─── /\n\n :host([severity='critical']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);\n --hx-clinical-status-border-color: var(--hx-color-error-200, #fccbc4);\n --hx-clinical-status-accent-color: var(--hx-color-error-500, #e5493e);\n --hx-clinical-status-color: var(--hx-color-error-800, #7a090a);\n --hx-clinical-status-icon-color: var(--hx-color-error-500, #e5493e);\n }\n\n / ─── Severity: emergent ─── /\n\n :host([severity='emergent']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);\n --hx-clinical-status-border-color: var(--hx-color-error-300, #fda79c);\n --hx-clinical-status-accent-color: var(--hx-color-error-700, #a21312);\n --hx-clinical-status-color: var(--hx-color-error-900, #530d0a);\n --hx-clinical-status-icon-color: var(--hx-color-error-700, #a21312);\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, #0c8beb));\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, #064172));\n cursor: pointer;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: 1;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n opacity: 0.7;\n }\n\n .clinical-status__dismiss-button:hover {\n opacity: 1;\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .clinical-status__dismiss-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);\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 var(--hx-focus-ring-color, #0f7078);\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';\nimport { forcedColorsSurface } from '../../styles/forced-colors.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 * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-error-200] - Color.\n * @cssprop [--hx-color-error-300] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-700] - Color.\n * @cssprop [--hx-color-error-800] - Color.\n * @cssprop [--hx-color-error-900] - Color.\n * @cssprop [--hx-color-focus] - Color.\n * @cssprop [--hx-color-info-200] - Color.\n * @cssprop [--hx-color-info-50] - Color.\n * @cssprop [--hx-color-info-500] - Color.\n * @cssprop [--hx-color-info-800] - Color.\n * @cssprop [--hx-color-warning-200] - Color.\n * @cssprop [--hx-color-warning-50] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-warning-800] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-letter-spacing-wide] - CSS custom property.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-5] - Spacing token.\n * @cssprop [--hx-space-8] - Spacing token.\n * @cssprop [--hx-touch-target-size] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n \n @aaa-certified 2026-05-09\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-clinical-status/AAA-AUDIT.md\n * @keyboard-contract dismiss=Escape\n * @aria-pattern alert\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-clinical-status\n * @priority-tier P0\n * @phi-handles true\n * @clinical-context healthcare-alert-fatigue-prevention\n /\n@customElement('hx-clinical-status')\nexport class HelixClinicalStatus extends HelixElement {\n static override styles = [helixClinicalStatusStyles, forcedColorsSurface];\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","forcedColorsSurface","__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-color-picker-DBwJzT5f.js → hx-color-picker-CYjx8i8R.js} RENAMED Viewed

@@ -1,13 +1,13 @@
-import { css as A, html as b, nothing as $ } from "lit";
+import { css as P, html as b, nothing as T } from "lit";
 import { F as I } from "./FormMixin-B8PXk5RQ.js";
-import { property as c, state as f, query as C, customElement as R } from "lit/decorators.js";
-import { ifDefined as H } from "lit/directives/if-defined.js";
+import { property as d, state as f, query as C, customElement as R } from "lit/decorators.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
 import { styleMap as m } from "lit/directives/style-map.js";
 import { b as F } from "./forced-colors-CTEDFRGa.js";
-import { s as B, i as N, r as P } from "./aria-idref-DCuEaknC.js";
+import { s as B, i as N, r as H } from "./aria-idref-DCuEaknC.js";
 import { f as y } from "./aria-flatten-DY6v2vah.js";
 import { H as V } from "./helix-element-BNEYeiys.js";
-const U = A`
+const G = P`
   :host {
     display: inline-block;
     position: relative;
@@ -53,6 +53,10 @@ const U = A`
     background: var(--hx-color-neutral-0, #ffffff);
     cursor: pointer;
     transition: border-color var(--hx-transition-fast, 150ms ease);
+    /* WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.
+       Bound to --hx-touch-target-min so the trigger clears the AAA-strict
+       floor at default sizing. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
   .trigger:hover:not([disabled]) {
     border-color: var(
@@ -213,13 +217,20 @@ const U = A`
   }
   .format-btn {
     flex-shrink: 0;
+    /* WCAG 2.5.5 (Enhanced) AAA — interactive panel controls must clear
+       44×44. Without min-width/min-height the format toggle collapses to
+       its label box (~44×24 in default rendering, sub-44 on the y-axis). */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
     background: var(--hx-color-neutral-100, #ebeee9);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-600, #4a5362);
+    /* AAA 1.4.6: 12px label vs neutral-100 must be ≥7:1; neutral-700 = 9.34:1
+       (neutral-600 was 6.63:1, a tight AAA miss). */
+    color: var(--hx-color-neutral-700, #313e4b);
     text-transform: uppercase;
     font-weight: var(--hx-font-weight-semibold, 600);
     letter-spacing: 0.05em;
@@ -227,6 +238,8 @@ const U = A`
   .color-input {
     flex: 1;
     min-width: 0;
+    /* WCAG 2.5.5 (Enhanced) AAA — text input must clear 44×44. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -320,7 +333,7 @@ const U = A`
 function x(e, t, r) {
   return Math.max(t, Math.min(r, e));
 }
-function q(e) {
+function U(e) {
   let t = e.trim().replace(/^#/, "");
   if (t.length === 3 && (t = t.replace(/(.)/g, "$1$1")), t.length === 4 && (t = t.replace(/(.)/g, "$1$1")), t.length === 6 && (t += "ff"), t.length !== 8) return null;
   const r = parseInt(t, 16);
@@ -331,75 +344,75 @@ function q(e) {
     a: (r & 255) / 255
   };
 }
-function T(e) {
+function $(e) {
   return Math.round(x(e, 0, 255)).toString(16).padStart(2, "0");
 }
-function G(e, t) {
-  const r = `#${T(e.r)}${T(e.g)}${T(e.b)}`;
-  return t && e.a < 1 ? r + T(e.a * 255) : r;
+function q(e, t) {
+  const r = `#${$(e.r)}${$(e.g)}${$(e.b)}`;
+  return t && e.a < 1 ? r + $(e.a * 255) : r;
 }
 function O(e) {
-  const t = e.r / 255, r = e.g / 255, i = e.b / 255, s = Math.max(t, r, i), h = Math.min(t, r, i), l = s - h, n = s === 0 ? 0 : l / s, p = s;
-  let d = 0;
-  return l !== 0 && (s === t ? d = ((r - i) / l + (r < i ? 6 : 0)) / 6 : s === r ? d = ((i - t) / l + 2) / 6 : d = ((t - r) / l + 4) / 6), { h: d * 360, s: n * 100, v: p * 100, a: e.a };
+  const t = e.r / 255, r = e.g / 255, i = e.b / 255, s = Math.max(t, r, i), h = Math.min(t, r, i), n = s - h, l = s === 0 ? 0 : n / s, p = s;
+  let c = 0;
+  return n !== 0 && (s === t ? c = ((r - i) / n + (r < i ? 6 : 0)) / 6 : s === r ? c = ((i - t) / n + 2) / 6 : c = ((t - r) / n + 4) / 6), { h: c * 360, s: l * 100, v: p * 100, a: e.a };
 }
-function D(e) {
-  const t = e.h / 360, r = e.s / 100, i = e.v / 100, s = Math.floor(t * 6), h = t * 6 - s, l = i * (1 - r), n = i * (1 - h * r), p = i * (1 - (1 - h) * r);
-  let d = 0, _ = 0, g = 0;
+function A(e) {
+  const t = e.h / 360, r = e.s / 100, i = e.v / 100, s = Math.floor(t * 6), h = t * 6 - s, n = i * (1 - r), l = i * (1 - h * r), p = i * (1 - (1 - h) * r);
+  let c = 0, _ = 0, g = 0;
   switch (s % 6) {
     case 0:
-      d = i, _ = p, g = l;
+      c = i, _ = p, g = n;
       break;
     case 1:
-      d = n, _ = i, g = l;
+      c = l, _ = i, g = n;
       break;
     case 2:
-      d = l, _ = i, g = p;
+      c = n, _ = i, g = p;
       break;
     case 3:
-      d = l, _ = n, g = i;
+      c = n, _ = l, g = i;
       break;
     case 4:
-      d = p, _ = l, g = i;
+      c = p, _ = n, g = i;
       break;
     case 5:
-      d = i, _ = l, g = n;
+      c = i, _ = n, g = l;
       break;
   }
-  return { r: Math.round(d * 255), g: Math.round(_ * 255), b: Math.round(g * 255), a: e.a };
+  return { r: Math.round(c * 255), g: Math.round(_ * 255), b: Math.round(g * 255), a: e.a };
 }
 function j(e) {
-  const t = e.r / 255, r = e.g / 255, i = e.b / 255, s = Math.max(t, r, i), h = Math.min(t, r, i), l = (s + h) / 2;
-  let n = 0, p = 0;
+  const t = e.r / 255, r = e.g / 255, i = e.b / 255, s = Math.max(t, r, i), h = Math.min(t, r, i), n = (s + h) / 2;
+  let l = 0, p = 0;
   if (s !== h) {
-    const d = s - h;
-    p = l > 0.5 ? d / (2 - s - h) : d / (s + h), s === t ? n = ((r - i) / d + (r < i ? 6 : 0)) / 6 : s === r ? n = ((i - t) / d + 2) / 6 : n = ((t - r) / d + 4) / 6;
+    const c = s - h;
+    p = n > 0.5 ? c / (2 - s - h) : c / (s + h), s === t ? l = ((r - i) / c + (r < i ? 6 : 0)) / 6 : s === r ? l = ((i - t) / c + 2) / 6 : l = ((t - r) / c + 4) / 6;
   }
-  return { h: n * 360, s: p * 100, l: l * 100, a: e.a };
+  return { h: l * 360, s: p * 100, l: n * 100, a: e.a };
 }
 function E(e) {
   if (!e) return null;
   if (e.startsWith("#")) {
-    const s = q(e);
+    const s = U(e);
     return s ? O(s) : null;
   }
   const t = e.match(
     /rgba?\(\s*(\d+)(?:\s*,\s*|\s+)(\d+)(?:\s*,\s*|\s+)(\d+)(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
   );
   if (t) {
-    const [, s, h, l, n] = t;
+    const [, s, h, n, l] = t;
     return O({
       r: parseInt(s ?? "0", 10),
       g: parseInt(h ?? "0", 10),
-      b: parseInt(l ?? "0", 10),
-      a: n !== void 0 ? parseFloat(n) : 1
+      b: parseInt(n ?? "0", 10),
+      a: l !== void 0 ? parseFloat(l) : 1
     });
   }
   const r = e.match(
     /hsla?\(\s*([\d.]+)(?:\s*,\s*|\s+)([\d.]+)%(?:\s*,\s*|\s+)([\d.]+)%(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
   );
   if (r) {
-    const [, s, h, l, n] = r, p = parseFloat(s ?? "0"), d = parseFloat(h ?? "0") / 100, _ = parseFloat(l ?? "0") / 100, g = n !== void 0 ? parseFloat(n) : 1, v = (1 - Math.abs(2 * _ - 1)) * d, u = v * (1 - Math.abs(p / 60 % 2 - 1)), L = _ - v / 2;
+    const [, s, h, n, l] = r, p = parseFloat(s ?? "0"), c = parseFloat(h ?? "0") / 100, _ = parseFloat(n ?? "0") / 100, g = l !== void 0 ? parseFloat(l) : 1, v = (1 - Math.abs(2 * _ - 1)) * c, u = v * (1 - Math.abs(p / 60 % 2 - 1)), L = _ - v / 2;
     let w = 0, S = 0, k = 0;
     return p < 60 ? (w = v, S = u) : p < 120 ? (w = u, S = v) : p < 180 ? (S = v, k = u) : p < 240 ? (S = u, k = v) : p < 300 ? (w = u, k = v) : (w = v, k = u), O({
       r: Math.round((w + L) * 255),
@@ -412,21 +425,21 @@ function E(e) {
     /hsva?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)/
   );
   if (i) {
-    const [, s, h, l, n] = i;
+    const [, s, h, n, l] = i;
     return {
       h: parseFloat(s ?? "0"),
       s: parseFloat(h ?? "0"),
-      v: parseFloat(l ?? "0"),
-      a: n !== void 0 ? parseFloat(n) : 1
+      v: parseFloat(n ?? "0"),
+      a: l !== void 0 ? parseFloat(l) : 1
     };
   }
   return null;
 }
 function M(e, t, r) {
-  const i = D(e);
+  const i = A(e);
   switch (t) {
     case "hex":
-      return G(i, r);
+      return q(i, r);
     case "rgb":
       return r && e.a < 1 ? `rgb(${i.r} ${i.g} ${i.b} / ${Math.round(e.a * 100) / 100})` : `rgb(${i.r} ${i.g} ${i.b})`;
     case "hsl": {
@@ -438,13 +451,13 @@ function M(e, t, r) {
   }
 }
 var z = Object.defineProperty, K = Object.getOwnPropertyDescriptor, a = (e, t, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? K(t, r) : t, h = e.length - 1, l; h >= 0; h--)
-    (l = e[h]) && (s = (i ? l(t, r, s) : l(s)) || s);
+  for (var s = i > 1 ? void 0 : i ? K(t, r) : t, h = e.length - 1, n; h >= 0; h--)
+    (n = e[h]) && (s = (i ? n(t, r, s) : n(s)) || s);
   return i && s && z(t, r, s), s;
 };
-let X = 0, o = class extends I(V) {
+let W = 0, o = class extends I(V) {
   constructor() {
-    super(), this.value = "#000000", this.format = "hex", this.opacity = !1, this.swatches = [], this.swatchesOnly = !1, this.disabled = !1, this.name = "", this.inline = !1, this.required = !1, this.labelGradient = "Color gradient", this.labelHue = "Hue", this.labelOpacity = "Opacity", this.labelSwatches = "Preset colors", this.labelSwitchFormat = "Switch color format", this.labelColorValue = "Color value", this.labelPicker = "Color picker", this.label = void 0, this.accessibleLabel = void 0, this.helpText = void 0, this.error = void 0, this.labelTrigger = (e) => `Choose color: ${e}`, this._hsv = { h: 0, s: 0, v: 0, a: 1 }, this._open = !1, this._inputValue = "#000000", this._supportsIdrefRefs = !0, this._slottedLabelEls = [], this._labelSlotText = "", this._hasLabelSlot = !1, this._helpSlotText = "", this._errorSlotText = "", this._announcedError = "", this._instanceId = ++X, this._helpId = `hx-color-picker-help-${this._instanceId}`, this._errorId = `hx-color-picker-error-${this._instanceId}`, this._hostDescId = `hx-color-picker-host-desc-${this._instanceId}`, this._fallbackTriggerAriaLabelledBy = null, this._fallbackTriggerAriaDescribedBy = null, this._fallbackTriggerAriaLabel = null, this._externalDescText = "", this._ariaMirror = null, this._labelSlotTextObserver = null, this._helpSlotTextObserver = null, this._errorSlotTextObserver = null, this._externalRefsObserver = null, this._draggingGrid = !1, this._draggingHue = !1, this._draggingOpacity = !1, this._dragRect = null, this._boundPointerMove = this._handlePointerMove.bind(this), this._boundPointerUp = this._handlePointerUp.bind(this), this._boundDocumentClick = this._handleDocumentClick.bind(this);
+    super(), this.value = "#000000", this.format = "hex", this.opacity = !1, this.swatches = [], this.swatchesOnly = !1, this.disabled = !1, this.name = "", this.inline = !1, this.required = !1, this.labelGradient = "Color gradient", this.labelHue = "Hue", this.labelOpacity = "Opacity", this.labelSwatches = "Preset colors", this.labelSwitchFormat = "Switch color format", this.labelColorValue = "Color value", this.labelPicker = "Color picker", this.label = void 0, this.accessibleLabel = void 0, this.helpText = void 0, this.error = void 0, this.labelTrigger = (e) => `Choose color: ${e}`, this._hsv = { h: 0, s: 0, v: 0, a: 1 }, this._open = !1, this._inputValue = "#000000", this._supportsIdrefRefs = !0, this._slottedLabelEls = [], this._labelSlotText = "", this._hasLabelSlot = !1, this._helpSlotText = "", this._errorSlotText = "", this._announcedError = "", this._instanceId = ++W, this._helpId = `hx-color-picker-help-${this._instanceId}`, this._errorId = `hx-color-picker-error-${this._instanceId}`, this._hostDescId = `hx-color-picker-host-desc-${this._instanceId}`, this._fallbackTriggerAriaLabelledBy = null, this._fallbackTriggerAriaDescribedBy = null, this._fallbackTriggerAriaLabel = null, this._externalDescText = "", this._ariaMirror = null, this._labelSlotTextObserver = null, this._helpSlotTextObserver = null, this._errorSlotTextObserver = null, this._externalRefsObserver = null, this._draggingGrid = !1, this._draggingHue = !1, this._draggingOpacity = !1, this._dragRect = null, this._boundPointerMove = this._handlePointerMove.bind(this), this._boundPointerUp = this._handlePointerUp.bind(this), this._boundDocumentClick = this._handleDocumentClick.bind(this);
   }
   // ─── Lifecycle ───────────────────────────────────────────────────────────
   connectedCallback() {
@@ -629,20 +642,20 @@ let X = 0, o = class extends I(V) {
    */
   _syncHostAriaSemantics() {
     var v;
-    const e = this._internals, t = ((v = this.getAttribute("aria-label")) == null ? void 0 : v.trim()) || "", r = this.getAttribute("aria-labelledby"), i = this.getAttribute("aria-describedby"), s = P(this, r), h = P(this, i), l = s.length > 0;
-    let n;
-    l ? n = s.map((u) => y(u)).filter((u) => u.length > 0).join(" ").replace(/\s+/g, " ").trim() || null : t ? n = t : this.accessibleLabel ? n = this.accessibleLabel : this.label ? n = this.label : this._hasLabelSlot && this._labelSlotText ? n = this._labelSlotText : n = this.labelTrigger(this._inputValue);
+    const e = this._internals, t = ((v = this.getAttribute("aria-label")) == null ? void 0 : v.trim()) || "", r = this.getAttribute("aria-labelledby"), i = this.getAttribute("aria-describedby"), s = H(this, r), h = H(this, i), n = s.length > 0;
+    let l;
+    n ? l = s.map((u) => y(u)).filter((u) => u.length > 0).join(" ").replace(/\s+/g, " ").trim() || null : t ? l = t : this.accessibleLabel ? l = this.accessibleLabel : this.label ? l = this.label : this._hasLabelSlot && this._labelSlotText ? l = this._labelSlotText : l = this.labelTrigger(this._inputValue);
     const p = h.length > 0 ? h.map((u) => y(u)).filter((u) => u.length > 0).join(" ").replace(/\s+/g, " ").trim() : "";
     this._externalDescText = p, this._installExternalRefsObserver([...s, ...h]);
-    const d = !!(this.error || this._errorSlotText), g = !e.validity.valid || d;
+    const c = !!(this.error || this._errorSlotText), g = !e.validity.valid || c;
     if (this._supportsIdrefRefs) {
-      e.ariaLabel = n ?? null, e.ariaInvalid = g ? "true" : "false", e.ariaDisabled = this.disabled ? "true" : "false", e.ariaRequired = this.required ? "true" : "false";
+      e.ariaLabel = l ?? null, e.ariaInvalid = g ? "true" : "false", e.ariaDisabled = this.disabled ? "true" : "false", e.ariaRequired = this.required ? "true" : "false";
       const u = e;
-      u.ariaLabelledByElements = l ? s : null, u.ariaDescribedByElements = h.length > 0 ? h : null, this._fallbackTriggerAriaLabelledBy = null, this._fallbackTriggerAriaDescribedBy = null, this._fallbackTriggerAriaLabel = null;
+      u.ariaLabelledByElements = n ? s : null, u.ariaDescribedByElements = h.length > 0 ? h : null, this._fallbackTriggerAriaLabelledBy = null, this._fallbackTriggerAriaDescribedBy = null, this._fallbackTriggerAriaLabel = null;
     } else {
       e.ariaLabel = null, e.ariaInvalid = null, e.ariaDisabled = null, e.ariaRequired = null;
       const u = e;
-      u.ariaLabelledByElements = null, u.ariaDescribedByElements = null, this._fallbackTriggerAriaLabelledBy = l ? r : null, this._fallbackTriggerAriaDescribedBy = i || null, this._fallbackTriggerAriaLabel = n;
+      u.ariaLabelledByElements = null, u.ariaDescribedByElements = null, this._fallbackTriggerAriaLabelledBy = n ? r : null, this._fallbackTriggerAriaDescribedBy = i || null, this._fallbackTriggerAriaLabel = l;
     }
   }
   // ─── Effective text helpers (rendered into hidden host-desc span) ────────
@@ -852,7 +865,7 @@ let X = 0, o = class extends I(V) {
   }
   /** @internal */
   _previewColor() {
-    const e = D(this._hsv);
+    const e = A(this._hsv);
     return this.opacity && this._hsv.a < 1 ? `rgb(${e.r} ${e.g} ${e.b} / ${Math.round(this._hsv.a * 100) / 100})` : `rgb(${e.r} ${e.g} ${e.b})`;
   }
   // ─── Render helpers ───────────────────────────────────────────────────────
@@ -909,8 +922,8 @@ let X = 0, o = class extends I(V) {
   }
   /** @internal */
   _renderOpacitySlider() {
-    if (!this.opacity) return $;
-    const e = `${this._hsv.a * 100}%`, t = D(this._hsv), r = `rgb(${t.r} ${t.g} ${t.b} / ${Math.round(this._hsv.a * 100) / 100})`, i = this._hueColor();
+    if (!this.opacity) return T;
+    const e = `${this._hsv.a * 100}%`, t = A(this._hsv), r = `rgb(${t.r} ${t.g} ${t.b} / ${Math.round(this._hsv.a * 100) / 100})`, i = this._hueColor();
     return b`
       <div
         part="slider opacity-slider"
@@ -952,7 +965,7 @@ let X = 0, o = class extends I(V) {
           `
     )}
       </div>
-    ` : $;
+    ` : T;
   }
   /** @internal */
   _renderInput() {
@@ -995,7 +1008,7 @@ let X = 0, o = class extends I(V) {
         tabindex="-1"
         @keydown=${this._handlePanelKeydown}
       >
-        ${this.swatchesOnly ? $ : b`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}
+        ${this.swatchesOnly ? T : b`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}
         ${this._renderSwatches()} ${this._renderInput()}
       </div>
     `;
@@ -1025,7 +1038,7 @@ let X = 0, o = class extends I(V) {
       data-hx-host-desc
       style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
       >${e}</span
-    >` : $;
+    >` : T;
   }
   /** @internal */
   _renderLabelSlot() {
@@ -1064,7 +1077,7 @@ let X = 0, o = class extends I(V) {
   }
   // ─── Main render ─────────────────────────────────────────────────────────
   render() {
-    const e = this._previewColor(), r = this._hostDescriptionText() ? this._hostDescId : void 0, i = this._supportsIdrefRefs ? this.labelTrigger(this._inputValue) : this._fallbackTriggerAriaLabel ?? this.labelTrigger(this._inputValue), s = this._supportsIdrefRefs ? void 0 : this._fallbackTriggerAriaLabelledBy ?? void 0, h = this._supportsIdrefRefs ? r : [this._fallbackTriggerAriaDescribedBy, r].filter((n) => !!n && n.length > 0).join(" ") || void 0, l = !this._internals.validity.valid || !!this._effectiveErrorText();
+    const e = this._previewColor(), r = this._hostDescriptionText() ? this._hostDescId : void 0, i = this._supportsIdrefRefs ? this.labelTrigger(this._inputValue) : this._fallbackTriggerAriaLabel ?? this.labelTrigger(this._inputValue), s = this._supportsIdrefRefs ? void 0 : this._fallbackTriggerAriaLabelledBy ?? void 0, h = this._supportsIdrefRefs ? r : [this._fallbackTriggerAriaDescribedBy, r].filter((l) => !!l && l.length > 0).join(" ") || void 0, n = !this._internals.validity.valid || !!this._effectiveErrorText();
     return this.inline ? b`
         <div style=${m({ "--_preview-color": e })}>
           ${this._renderLabelSlot()} ${this._renderHostDescriptionSpan()} ${this._renderPanel()}
@@ -1077,10 +1090,10 @@ let X = 0, o = class extends I(V) {
         type="button"
         class="trigger"
         aria-label=${i}
-        aria-labelledby=${H(s)}
-        aria-describedby=${H(h)}
+        aria-labelledby=${D(s)}
+        aria-describedby=${D(h)}
         aria-expanded=${this._open ? "true" : "false"}
-        aria-invalid=${l ? "true" : "false"}
+        aria-invalid=${n ? "true" : "false"}
         ?disabled=${this.disabled}
         style=${m({ "--_preview-color": e })}
         @click=${this._handleTriggerClick}
@@ -1091,75 +1104,75 @@ let X = 0, o = class extends I(V) {
         </slot>
       </button>
       ${this._renderHelpSlot()} ${this._renderErrorSlot()}
-      ${this._open ? this._renderPanel() : $}
+      ${this._open ? this._renderPanel() : T}
     `;
   }
 };
-o.styles = [U, F];
+o.styles = [G, F];
 o.formAssociated = !0;
 o.__testSupportsIdrefRefsOverride = null;
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "value", 2);
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "format", 2);
 a([
-  c({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "opacity", 2);
 a([
-  c({ attribute: !1 })
+  d({ attribute: !1 })
 ], o.prototype, "swatches", 2);
 a([
-  c({ type: Boolean, reflect: !0, attribute: "swatches-only" })
+  d({ type: Boolean, reflect: !0, attribute: "swatches-only" })
 ], o.prototype, "swatchesOnly", 2);
 a([
-  c({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "name", 2);
 a([
-  c({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "inline", 2);
 a([
-  c({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "required", 2);
 a([
-  c({ type: String, attribute: "label-gradient" })
+  d({ type: String, attribute: "label-gradient" })
 ], o.prototype, "labelGradient", 2);
 a([
-  c({ type: String, attribute: "label-hue" })
+  d({ type: String, attribute: "label-hue" })
 ], o.prototype, "labelHue", 2);
 a([
-  c({ type: String, attribute: "label-opacity" })
+  d({ type: String, attribute: "label-opacity" })
 ], o.prototype, "labelOpacity", 2);
 a([
-  c({ type: String, attribute: "label-swatches" })
+  d({ type: String, attribute: "label-swatches" })
 ], o.prototype, "labelSwatches", 2);
 a([
-  c({ type: String, attribute: "label-switch-format" })
+  d({ type: String, attribute: "label-switch-format" })
 ], o.prototype, "labelSwitchFormat", 2);
 a([
-  c({ type: String, attribute: "label-color-value" })
+  d({ type: String, attribute: "label-color-value" })
 ], o.prototype, "labelColorValue", 2);
 a([
-  c({ type: String, attribute: "label-picker" })
+  d({ type: String, attribute: "label-picker" })
 ], o.prototype, "labelPicker", 2);
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "label", 2);
 a([
-  c({ type: String, attribute: "accessible-label" })
+  d({ type: String, attribute: "accessible-label" })
 ], o.prototype, "accessibleLabel", 2);
 a([
-  c({ type: String, attribute: "help-text" })
+  d({ type: String, attribute: "help-text" })
 ], o.prototype, "helpText", 2);
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "error", 2);
 a([
-  c({ attribute: !1 })
+  d({ attribute: !1 })
 ], o.prototype, "labelTrigger", 2);
 a([
   f()
@@ -1218,4 +1231,4 @@ o = a([
 export {
   o as H
 };
-//# sourceMappingURL=hx-color-picker-DBwJzT5f.js.map
+//# sourceMappingURL=hx-color-picker-CYjx8i8R.js.map