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

@helixui/library 3.6.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 (280) hide show

package/dist/shared/hx-action-bar-BlEG4aZv.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-action-bar-BlEG4aZv.js","sources":["../../src/components/hx-action-bar/hx-action-bar.styles.ts","../../src/components/hx-action-bar/hx-action-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixActionBarStyles = css`\n :host {\n display: block;\n }\n\n /* ─── Base ─── */\n\n .base {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));\n padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n background: var(--hx-action-bar-bg, transparent);\n border: var(--hx-action-bar-border, none);\n box-sizing: border-box;\n width: 100%;\n }\n\n /* ─── Sticky (top) ─── */\n\n .base--sticky {\n position: sticky;\n top: 0;\n padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));\n z-index: var(--hx-action-bar-z-index, 10);\n /*\n * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container\n * equal to the bar's rendered height so anchor targets are not hidden behind the bar.\n * Example: .scroll-container { scroll-padding-top: 2.5rem; }\n */\n }\n\n /* ─── Bottom sticky ─── */\n\n .base--bottom {\n position: sticky;\n bottom: 0;\n /*\n * Respect iOS home-indicator safe area on devices with notch/home bar.\n * Falls back to 0px on devices that do not support env().\n */\n padding-bottom: max(\n var(--hx-action-bar-padding-block-end, 0px),\n env(safe-area-inset-bottom, 0px)\n );\n z-index: var(--hx-action-bar-z-index, 10);\n }\n\n /* ─── Variant: outlined ─── */\n\n .base--outlined {\n background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));\n border: var(\n --hx-action-bar-border,\n var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5)\n );\n border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));\n }\n\n /* ─── Variant: filled ─── */\n\n .base--filled {\n background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f5f8f3));\n border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));\n }\n\n /* ─── Size modifiers ─── */\n\n .base--sm {\n padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));\n min-height: var(--hx-size-8, 2rem);\n }\n\n .base--md {\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .base--lg {\n padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Sections ─── */\n\n .section {\n display: flex;\n align-items: center;\n gap: inherit;\n }\n\n /*\n * Equal flex-basis on start and end guarantees the center section is visually centered\n * within the full bar width, regardless of how wide start and end content are.\n */\n .section--start {\n flex: 1 1 0;\n justify-content: flex-start;\n }\n\n .section--center {\n flex: 0 0 auto;\n justify-content: center;\n }\n\n .section--end {\n flex: 1 1 0;\n justify-content: flex-end;\n }\n\n /* ─── Slotted content ─── */\n\n ::slotted(*) {\n flex-shrink: 0;\n }\n\n /*\n * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on slotted\n * natives (e.g. bare <button>, <a>) so consumers who slot non-HELiX\n * controls inherit the same indicator as the HELiX components do.\n * Token-driven: --hx-focus-ring-width resolves to 2px (default).\n */\n ::slotted(:focus-visible) {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-action-bar-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n /* Outlined variant: border is already present and will be honored by the browser */\n .base--outlined {\n border: 1px solid CanvasText;\n }\n\n /* Filled variant: background is suppressed — add border to maintain visual separation */\n .base--filled {\n border: 1px solid CanvasText;\n }\n }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixActionBarStyles } from './hx-action-bar.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Re-export size type for external consumers.\nexport type ActionBarSize = 'sm' | 'md' | 'lg';\n\n/**\n * A horizontal toolbar container for grouping related action buttons and controls.\n * Implements the ARIA toolbar pattern with roving tabindex keyboard navigation.\n *\n * @summary Horizontal action bar for grouping related controls.\n *\n * @tag hx-action-bar\n *\n * @slot start - Left-aligned actions.\n * @slot - Center content (default slot).\n * @slot end - Right-aligned actions.\n * @slot overflow - Actions revealed when the bar is constrained for space.\n *\n * @csspart base - The root toolbar container element.\n * @csspart start - The start (left) slot wrapper.\n * @csspart center - The center (default) slot wrapper.\n * @csspart end - The end (right) slot wrapper.\n * @csspart overflow - The overflow slot wrapper (hidden when no overflow content).\n *\n * @cssprop [--hx-action-bar-bg=transparent] - Bar background color (default variant).\n * @cssprop [--hx-action-bar-border=none] - Bar border (default variant).\n * @cssprop [--hx-action-bar-padding=var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)] - Inner padding.\n * @cssprop [--hx-action-bar-gap=var(--hx-space-2,0.5rem)] - Gap between slotted items.\n * @cssprop [--hx-action-bar-z-index=10] - Z-index when sticky or bottom position.\n *\n * @attr {string} accessible-label - Identifies the toolbar to assistive technology.\n * When multiple toolbars appear on the same page, each must have a unique, descriptive label.\n * Falls back to the native `aria-label` attribute if not set.\n *\n * @example\n * ```html\n * <hx-action-bar aria-label=\"Patient actions\">\n * <hx-button slot=\"start\">Save</hx-button>\n * <hx-button slot=\"end\" variant=\"ghost\">Cancel</hx-button>\n * </hx-action-bar>\n * ```\n * @cssprop [--hx-action-bar-padding-block-start=0px] - Padding.\n * @cssprop [--hx-action-bar-padding-block-end=0px] - Padding.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-size-12] - Size token.\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 * @aaa-certified 2026-05-08\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-action-bar/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow; activate=Enter,Space; disabled-suppresses=true\n * @aria-pattern toolbar\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\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-action-bar\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-action-bar')\nexport class HelixActionBar extends HelixElement {\n static override styles = [helixActionBarStyles, forcedColorsInteractive];\n\n /**\n * Size of the action bar — propagated as a data attribute to slotted children.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Visual variant controlling the bar background.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'outlined' | 'filled' = 'default';\n\n /**\n * Position and sticky behavior of the action bar.\n * - `top` — normal flow (default)\n * - `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n * scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n * - `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support\n * @attr position\n */\n @property({ type: String, reflect: true })\n position: 'top' | 'bottom' | 'sticky' = 'top';\n\n // The deprecated `sticky` boolean property has been removed in 3.0.0.\n // Use `position=\"sticky\"` instead.\n\n /**\n * Accessible label for the toolbar.\n * Required when multiple toolbars appear on the same page.\n *\n * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n * The `accessible-label` attribute takes precedence when both are set.\n *\n * Previously this was exposed as the `ariaLabel` JS property, which shadowed\n * the native `HTMLElement.ariaLabel`. That shadowing is removed; use\n * `accessibleLabel` or the HTML attributes instead.\n *\n * @attr accessible-label\n */\n @property({ attribute: 'accessible-label' })\n accessibleLabel: string = '';\n\n /**\n * Observed mirror of the host's `aria-label` attribute so Lit re-renders\n * when consumers set `aria-label` (the standard HTML pattern).\n * @internal\n */\n @property({ attribute: 'aria-label' })\n private _ariaLabelAttr: string = '';\n\n /**\n * Returns the effective label for the toolbar, checking accessible-label first,\n * then the aria-label attribute, falling back to 'Actions'.\n * @internal\n */\n private get _effectiveLabel(): string {\n return this.accessibleLabel || this._ariaLabelAttr || 'Actions';\n }\n\n /** Cached list of focusable items — invalidated on slot change. */\n /** @internal */\n private _focusableCache: HTMLElement[] | null = null;\n\n /** Whether the overflow slot has assigned content. * @internal\n */\n @state()\n private _hasOverflow = false;\n\n // ─── Lifecycle ───\n\n /** Arrow function field — stable reference for add/removeEventListener. */\n /** @internal */\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n this._moveFocus('next');\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this._moveFocus('prev');\n } else if (e.key === 'Home') {\n e.preventDefault();\n // Move directly to first item — do NOT call _moveFocus which would visit other items first.\n const items = this._getFocusableItems();\n if (items.length) {\n items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n items[0]?.focus();\n }\n } else if (e.key === 'End') {\n e.preventDefault();\n const items = this._getFocusableItems();\n const last = items.length - 1;\n if (items.length) {\n items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n items[last]?.focus();\n }\n }\n };\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-action-bar', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as ActionBarSize;\n }\n // Prevent dual aria-label announcement: the host carries the consumer's\n // aria-label attribute while the inner div[role=\"toolbar\"] receives the\n // same value. Setting role=\"none\" on the host hides it from the\n // accessibility tree so only the toolbar is announced.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'none');\n } else if (this.getAttribute('role') !== 'none') {\n devWarn(\n 'hx-action-bar',\n `Setting role=\"${this.getAttribute('role')}\" on the host creates a duplicate toolbar announcement. ` +\n 'The shadow DOM already contains role=\"toolbar\". Set role=\"none\" on the host to suppress it.',\n );\n }\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override firstUpdated(): void {\n // Slot assignments are complete by firstUpdated; initialize roving tabindex\n // immediately rather than waiting for the async slotchange event.\n this._initRovingTabindex();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n // ─── Focusable item discovery ───\n\n /** @internal */\n private _isFocusable(el: HTMLElement): boolean {\n // Check disabled via DOM attribute (native elements) or property (custom elements)\n if (el.hasAttribute('disabled')) return false;\n const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n if (elWithDisabled.disabled === true) return false;\n\n // Use the IDL tabIndex property — covers both DOM attribute and ElementInternals settings.\n // Custom elements (e.g. hx-button) that set tabIndex via ElementInternals are discoverable.\n if (el.tabIndex >= 0) return true;\n\n const tag = el.tagName.toLowerCase();\n return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n }\n\n /** @internal */\n private _getFocusableItems(): HTMLElement[] {\n if (this._focusableCache) return this._focusableCache;\n\n const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];\n const items: HTMLElement[] = [];\n\n for (const slot of Array.from(slots)) {\n const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n for (const el of assigned) {\n if (!(el instanceof HTMLElement)) continue;\n if (this._isFocusable(el)) {\n // Element is itself focusable — include it and do NOT also recurse into its children\n // to prevent double-counting compound components (e.g. <a><button>).\n items.push(el);\n } else {\n // Element is a non-focusable wrapper (e.g. <div>, <span>) — find focusable children.\n const descendants = el.querySelectorAll<HTMLElement>('*');\n for (const d of Array.from(descendants)) {\n if (this._isFocusable(d)) {\n items.push(d);\n }\n }\n }\n }\n }\n\n this._focusableCache = items;\n return items;\n }\n\n // ─── Roving tabindex helpers ───\n\n /** @internal */\n private _initRovingTabindex(): void {\n this._focusableCache = null; // invalidate cache on slot change\n const items = this._getFocusableItems();\n if (!items.length) return;\n // Find the currently active item. If none exists (e.g. first render or active item was\n // removed), fall back to index 0. Then set ALL items explicitly so newly added items and\n // items whose tabindex changed externally are always in a correct state.\n const activeIndex = items.findIndex((el) => el.getAttribute('tabindex') === '0');\n const targetIndex = activeIndex === -1 ? 0 : activeIndex;\n items.forEach((el, i) => el.setAttribute('tabindex', i === targetIndex ? '0' : '-1'));\n }\n\n /** @internal */\n private _moveFocus(direction: 'next' | 'prev'): void {\n const items = this._getFocusableItems();\n if (!items.length) return;\n\n const focused = document.activeElement as HTMLElement | null;\n const currentIndex = items.indexOf(focused as HTMLElement);\n\n let nextIndex: number;\n if (direction === 'next') {\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n } else {\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n }\n\n items.forEach((el, i) => {\n el.setAttribute('tabindex', i === nextIndex ? '0' : '-1');\n });\n\n items[nextIndex]?.focus();\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n if (slot.name === 'overflow') {\n this._hasOverflow = slot.assignedElements({ flatten: true }).length > 0;\n }\n this._initRovingTabindex();\n }\n\n // ─── Render ───\n\n override render() {\n const isSticky = this.position === 'sticky';\n const isBottom = this.position === 'bottom';\n const positionClass = isSticky ? ' base--sticky' : isBottom ? ' base--bottom' : '';\n\n return html`\n <div\n part=\"base\"\n role=\"toolbar\"\n aria-label=${this._effectiveLabel}\n aria-orientation=\"horizontal\"\n class=\"base base--${this.size} base--${this.variant}${positionClass}\"\n >\n <div part=\"start\" class=\"section section--start\">\n <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"center\" class=\"section section--center\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"end\" class=\"section section--end\">\n <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"overflow\" class=\"section section--overflow\" ?hidden=${!this._hasOverflow}>\n <slot name=\"overflow\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-action-bar': HelixActionBar;\n }\n}\n"],"names":["helixActionBarStyles","css","HelixActionBar","HelixElement","items","el","i","_a","last","_b","legacySize","devWarn","tag","slots","slot","assigned","descendants","activeIndex","targetIndex","direction","focused","currentIndex","nextIndex","isSticky","isBottom","positionClass","html","forcedColorsInteractive","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-alert-Bto8-TIi.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-alert-Bto8-TIi.js","sources":["../../src/components/hx-alert/hx-alert.styles.ts","../../src/components/hx-alert/hx-alert.ts"],"sourcesContent":["import { css } from 'lit';\n\n/*\n hx-alert styles.\n \n Component-tier tokens with two-level var() fallback:\n * var(--hx-alert-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n * info-50 = #EFF6FE, info-200 = #BEDCFC, info-500 = #0C8BEB, info-800 = #064172,\n * success-50 = #EAFAEC, success-200 = #BAE6C2, success-500 = #3B9E58, success-800 = #0B4D23,\n * warning-50 = #FFF3EA, warning-200 = #FACFAE, warning-500 = #C2711C, warning-800 = #603301,\n * error-50 = #FFF2F0, error-200 = #FCCBC4, error-500 = #E5493E, error-800 = #7A090A,\n * primary-400 = #6AB1B1.\n /\nexport const helixAlertStyles = css`\n :host {\n display: block;\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n / ─── Screen-reader-only announcement region ─── /\n / Always present in DOM so AT registers it before content is injected. /\n / Visually hidden via clip-path technique (superior to display:none which /\n / removes the element from the AT tree entirely). /\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 {\n box-sizing: border-box;\n }\n\n /* ─── Alert Container ─── /\n\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));\n border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));\n border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-alert-bg, var(--hx-color-info-50, #eff6fe));\n color: var(--hx-alert-color, var(--hx-color-info-800, #064172));\n font-family: var(--hx-alert-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 / ─── Accent Variant (left border stripe) ─── /\n / Removes full border and replaces with a left-side accent stripe. /\n / Common healthcare/enterprise dashboard pattern for dense information UIs. /\n\n .alert--accent {\n border-width: 0;\n border-inline-start: var(--hx-alert-accent-width, 4px) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));\n border-radius: 0;\n }\n\n / ─── Severity Label (WCAG 1.4.1) ─── /\n / Visually hidden — provides a non-color cue for screen readers and users /\n / who cannot distinguish variants by color alone (e.g. color-blind users). /\n / Always present regardless of showIcon so severity is never color-only. /\n\n .alert__severity-label {\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 / ─── Icon ─── /\n\n .alert__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0c8beb));\n }\n\n .alert__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n / ─── Title ─── /\n\n .alert__title {\n display: none;\n font-weight: var(--hx-font-weight-semibold, 600);\n margin-bottom: var(--hx-space-1, 0.25rem);\n }\n\n .alert__title--visible {\n display: block;\n }\n\n / ─── Message ─── /\n\n .alert__message {\n flex: 1;\n min-width: 0;\n }\n\n / (group-6 5.1) Wrapper around the default slot. Carries aria-hidden=true\n so the visible message text is not double-announced alongside the\n sr-only announcer. display:contents keeps the wrapper visually\n transparent so children participate in the parent flex layout as if\n the wrapper were not there. /\n .alert__default-slot {\n display: contents;\n }\n\n / ─── Actions ─── /\n / Hidden by default; shown via JS slotchange detection to avoid invisible /\n / margin-top spacing when no actions are slotted. /\n\n .alert__actions {\n display: none;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n margin-top: var(--hx-space-2, 0.5rem);\n }\n\n .alert__actions--visible {\n display: flex;\n }\n\n / ─── Close Button ─── /\n / Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and /\n / Apple HIG / Google Material guidelines. Uses absolute px units to ensure /\n / the target size is independent of the consumer's base font size. /\n\n .alert__close-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 margin-inline-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-alert-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: var(--hx-opacity-75, 0.75);\n }\n\n .alert__close-button:hover {\n opacity: var(--hx-opacity-100, 1);\n / color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. /\n / Falls back to transparent (no hover background) in older environments. /\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .alert__close-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-alert-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .alert__close-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .alert__close-button {\n transition: none;\n }\n }\n\n / ─── Variant: info ─── /\n\n :host([variant='info']) .alert,\n :host(:not([variant])) .alert {\n --hx-alert-bg: var(--hx-color-info-50, #eff6fe);\n --hx-alert-border-color: var(--hx-color-info-200, #bedcfc);\n --hx-alert-color: var(--hx-color-info-800, #064172);\n --hx-alert-icon-color: var(--hx-color-info-500, #0c8beb);\n }\n\n / ─── Variant: success ─── /\n\n :host([variant='success']) .alert {\n --hx-alert-bg: var(--hx-color-success-50, #eafaec);\n --hx-alert-border-color: var(--hx-color-success-200, #bae6c2);\n --hx-alert-color: var(--hx-color-success-800, #0b4d23);\n --hx-alert-icon-color: var(--hx-color-success-500, #3b9e58);\n }\n\n / ─── Variant: warning ─── /\n\n :host([variant='warning']) .alert {\n --hx-alert-bg: var(--hx-color-warning-50, #fff3ea);\n --hx-alert-border-color: var(--hx-color-warning-200, #facfae);\n --hx-alert-color: var(--hx-color-warning-800, #603301);\n --hx-alert-icon-color: var(--hx-color-warning-500, #c2711c);\n }\n\n / ─── Variant: error ─── /\n\n :host([variant='error']) .alert {\n --hx-alert-bg: var(--hx-color-error-50, #fff2f0);\n --hx-alert-border-color: var(--hx-color-error-200, #fccbc4);\n --hx-alert-color: var(--hx-color-error-800, #7a090a);\n --hx-alert-icon-color: var(--hx-color-error-500, #e5493e);\n }\n\n / ─── Forced Colors (Windows High Contrast) ─── /\n / Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. /\n\n @media (forced-colors: active) {\n .alert {\n border-color: CanvasText;\n }\n\n .alert--accent {\n border-inline-start-color: CanvasText;\n }\n\n .alert__icon svg {\n fill: CanvasText;\n }\n\n .alert__close-button {\n color: ButtonText;\n border: 1px solid 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 { helixAlertStyles } from './hx-alert.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/* Alert variant determines visual styling and ARIA semantics. /\nexport type AlertVariant = 'info' \| 'success' \| 'warning' \| 'error';\n\n/* Detail for the hx-close event dispatched by hx-alert. /\nexport interface HxAlertCloseDetail {\n reason: string;\n}\n\n/\n A feedback component for communicating status messages, warnings, and errors.\n * Critical for healthcare patient safety alerts.\n \n @summary Feedback alert for status messages with variant-based styling and ARIA live regions.\n \n @tag hx-alert\n \n @slot - Default slot for alert message content.\n * @slot title - Optional title/headline for the alert.\n * @slot icon - Custom icon to override the default variant icon.\n * @slot actions - Action buttons rendered within the alert.\n \n @attr {string} heading - Text used to build the close button's contextual aria-label\n * (e.g., \"Close Low blood pressure alert\"). When absent the label falls back to \"Close alert\".\n \n @fires {CustomEvent<{reason: string}>} hx-close - Dispatched when the user dismisses the alert.\n * @fires {CustomEvent} hx-after-close - Dispatched after the alert is dismissed.\n \n @csspart alert - The outer alert container.\n * @csspart title - The title/headline container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n * @csspart actions - The actions container.\n \n @cssprop [--hx-alert-bg=var(--hx-color-info-50)] - Alert background color.\n * @cssprop [--hx-alert-color=var(--hx-color-info-800)] - Alert text color.\n * @cssprop [--hx-alert-border-color=var(--hx-color-info-200)] - Alert border color.\n * @cssprop [--hx-alert-border-radius=var(--hx-border-radius-md)] - Alert border radius.\n * @cssprop [--hx-alert-border-width=var(--hx-border-width-thin)] - Alert border width.\n * @cssprop [--hx-alert-padding=var(--hx-space-4)] - Alert padding.\n * @cssprop [--hx-alert-gap=var(--hx-space-3)] - Gap between alert elements.\n * @cssprop [--hx-alert-icon-color=var(--hx-color-info-500)] - Alert icon color.\n * @cssprop [--hx-alert-font-family=var(--hx-font-family-sans)] - Alert font family.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-alert-accent-width=4px] - Width of the left border accent stripe.\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-50] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-800] - 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-primary-400] - Color.\n * @cssprop [--hx-color-success-200] - Color.\n * @cssprop [--hx-color-success-50] - Color.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-success-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-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-opacity-75] - Opacity.\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-transition-fast] - Transition timing.\n /\n@customElement('hx-alert')\nexport class HelixAlert extends HelixElement {\n static override styles = [helixAlertStyles, forcedColorsSurface];\n\n // ─── Properties ───\n\n /\n Visual variant of the alert that determines colors and ARIA semantics.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'info' \| 'success' \| 'warning' \| 'error' = 'info';\n\n /\n Whether the alert can be dismissed by the user.\n * @attr dismissible\n /\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /\n Optional heading text that provides context for the close button's accessible label.\n * When provided, the close button is announced as \"Close [heading] alert\".\n * When absent, the close button falls back to \"Close alert\".\n * @attr heading\n /\n @property({ type: String })\n heading = '';\n\n /\n Accessible label for the close button. Override for i18n.\n * @attr label-close\n /\n @property({ attribute: 'label-close' }) labelClose = 'Close alert';\n\n /\n Whether the alert is visible. Add the `open` attribute to show the alert.\n * @attr open\n /\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /\n Whether to show the default variant icon. Add `show-icon` attribute to display the icon.\n * @attr show-icon\n /\n @property({ type: Boolean, reflect: true, attribute: 'show-icon' })\n showIcon = false;\n\n /\n When true, applies a left border accent stripe instead of a full border.\n * Common healthcare/enterprise dashboard pattern for visual distinction of alert types.\n * @attr accent\n /\n @property({ type: Boolean, reflect: true })\n accent = false;\n\n /\n Override for the severity prefix announced to screen readers (e.g., \"Info:\", \"Error:\").\n * When not set, defaults to the English label matching the current variant.\n * @attr severity-label\n /\n @property({ attribute: 'severity-label' })\n severityLabel: string \| undefined;\n\n /\n CSS selector for the element to return focus to after the alert is dismissed.\n * When set, the component will find and focus the matching element after dismissal.\n * If not set, focus management is the caller's responsibility via the hx-after-close event.\n * @attr return-focus-to\n /\n @property({ type: String, attribute: 'return-focus-to' })\n returnFocusTo: string \| null = null;\n\n // ─── State ───\n\n /* @internal /\n @state()\n private _hasActions = false;\n\n /* @internal /\n @state()\n private _hasTitle = false;\n\n // ─── Private Handler References ───\n\n /* @internal /\n private _actionsSlotChangeHandler: (() => void) \| null = null;\n /* @internal /\n private _titleSlotChangeHandler: (() => void) \| null = null;\n\n /\n (group-6 §5.4) Race-guard counter for the sr-only announcer microtask\n * dance. Each open=false→true transition increments this; the deferred\n * text-clear + re-inject only writes to the announcer when the counter\n * matches the value captured at scheduling time. Rapid open/close cycles\n * therefore collapse to a single announcement on the final settled state\n * rather than leaking stale text from earlier cycles.\n \n @internal\n /\n private _announcerCycle = 0;\n\n // ─── Private Helpers ───\n\n /* @internal /\n private _defaultSeverityLabel(): string {\n const labels: Record<string, string> = {\n info: 'Info:',\n success: 'Success:',\n warning: 'Warning:',\n error: 'Error:',\n };\n return labels[this.variant] ?? '';\n }\n\n /* @internal /\n private get _effectiveSeverityLabel(): string {\n return this.severityLabel ?? this._defaultSeverityLabel();\n }\n\n /* Returns true when the variant requires assertive announcement. /\n /* @internal /\n private get _isAssertive(): boolean {\n return this.variant === 'error';\n }\n\n /\n Returns the appropriate ARIA role based on variant.\n * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n /\n /* @internal /\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Apply ARIA role to the host element for reliable screen reader support across\n // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n //\n // (group-6) Dual-write: `internals.role` is the modern IDL-based source of\n // truth; the `role` attribute is retained as a legacy fallback for older AT\n // that don't yet honour ElementInternals ARIA reflection. role implies\n // aria-live per ARIA spec — we do NOT set explicit aria-live on the host\n // (the inner sr-only announcer carries the explicit aria-live so the\n // open=false→true text-mutation is observed by AT).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n if (!this.open) {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot && this._actionsSlotChangeHandler) {\n actionsSlot.removeEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot && this._titleSlotChangeHandler) {\n titleSlot.removeEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n override firstUpdated(): void {\n // Track actions slot content to avoid invisible spacing when no actions are slotted.\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot) {\n this._actionsSlotChangeHandler = () => {\n this._hasActions = actionsSlot.assignedNodes({ flatten: true }).length > 0;\n };\n actionsSlot.addEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n\n // Track title slot content so the title container doesn't create dead space when empty.\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot) {\n this._titleSlotChangeHandler = () => {\n this._hasTitle = titleSlot.assignedNodes({ flatten: true }).length > 0;\n };\n titleSlot.addEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n // Keep host ARIA role in sync with variant (assertive vs. polite).\n // Dual-write: internals (modern) + attribute (legacy fallback).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n }\n if (changedProperties.has('open')) {\n // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n // When open transitions from false→true, removing aria-hidden signals to AT\n // that the live region content should be announced.\n if (this.open) {\n this.removeAttribute('aria-hidden');\n // Trigger announcement via the sr-only polite live region for ATs (JAWS+Chrome,\n // NVDA) that do not re-announce existing content when aria-hidden is merely removed.\n // We inject text after a microtask so the DOM has settled and the live region\n // is registered by the AT before content arrives.\n const previousOpen = changedProperties.get('open');\n if (previousOpen === false) {\n // (group-6 §5.4) Race-guard: bump the cycle counter and capture it.\n // The deferred microtask only writes if the counter still matches —\n // rapid open/close cycles therefore collapse to a single announcement\n // on the final settled state rather than leaking stale text.\n const myCycle = ++this._announcerCycle;\n Promise.resolve().then(() => {\n if (myCycle !== this._announcerCycle \|\| !this.open) return;\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n // Second microtask ensures the clear is processed before re-injection,\n // guaranteeing the AT sees a content change rather than no-op.\n Promise.resolve().then(() => {\n if (myCycle !== this._announcerCycle \|\| !this.open) return;\n const prefix = this._effectiveSeverityLabel;\n const message = this.textContent?.trim() ?? '';\n announcer.textContent = prefix ? `${prefix} ${message}` : message;\n });\n }\n });\n }\n } else {\n this.setAttribute('aria-hidden', 'true');\n // (group-6 §5.4) Bump the cycle counter on close so any pending\n // announcer microtask from the previous open is invalidated.\n this._announcerCycle++;\n // Clear the announcer when hidden so stale text is not re-read on next open.\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n }\n }\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 _renderSuccessIcon() {\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-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\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 _renderErrorIcon() {\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 _renderDefaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'error':\n return this._renderErrorIcon();\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 // ─── Event Handling ───\n\n /* @internal /\n private _handleDismiss(): void {\n this.open = false;\n\n /\n Dispatched when the user dismisses the alert.\n * @event hx-close\n /\n this.dispatchEvent(\n new CustomEvent<{ reason: string }>('hx-close', {\n bubbles: true,\n composed: true,\n detail: { reason: 'user' },\n }),\n );\n\n /\n Dispatched after the alert is dismissed.\n * @event hx-after-close\n */\n this.dispatchEvent(\n new CustomEvent<void>('hx-after-close', {\n bubbles: true,\n composed: true,\n }),\n );\n\n // Return focus to a designated element if specified via returnFocusTo.\n if (this.returnFocusTo) {\n const target = document.querySelector(this.returnFocusTo);\n if (target instanceof HTMLElement) {\n target.focus();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n alert: true,\n [`alert--${this.variant}`]: true,\n 'alert--accent': this.accent,\n };\n\n // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n // is never conveyed by color alone, regardless of whether showIcon is set.\n const severityLabel = this._effectiveSeverityLabel;\n\n // (group-6 §5.1) Decorative duplicates of announcer copy — severity\n // label, icon, title — are each marked aria-hidden=true so the\n // sr-only announcer is the SOLE announcement surface for THAT copy.\n // Without this guard, JAWS+Chrome was observed reading those bits\n // twice (once from host text, once from the announcer).\n //\n // (group-6 codex round-1 fix) The default slot wrapper is NO LONGER\n // aria-hidden. The default slot can hold consumer-supplied interactive\n // content (inline links, inline buttons inside an alert message), and\n // aria-hidden on a parent of focusable elements is an axe-core\n // `aria-hidden-focus` violation: AT users would tab into invisible\n // controls. To suppress the (now exclusively-announcer-driven)\n // double-announce risk on the slot text itself, the announcer copy is\n // built from `this.textContent` and the host has its `role` toggled\n // off-then-on across the open transition, so AT only registers the\n // announcer as the live region for that text — not the host.\n //\n // aria-hidden is also NOT placed on the alert container, the actions\n // slot wrapper, or the close button — those host focusable descendants\n // for the same axe-core reason.\n return html`\n <div\n class=\"sr-only\"\n aria-live=${this._isAssertive ? 'assertive' : 'polite'}\n aria-atomic=\"true\"\n ></div>\n <div part=\"alert\" class=${classMap(classes)}>\n <span class=\"alert__severity-label\" aria-hidden=\"true\">${severityLabel}</span>\n ${this.showIcon\n ? html`\n <div part=\"icon\" class=\"alert__icon\" aria-hidden=\"true\">\n <slot name=\"icon\">${this._renderDefaultIcon()}</slot>\n </div>\n `\n : nothing}\n\n <div part=\"message\" class=\"alert__message\">\n <div\n part=\"title\"\n class=\"alert__title ${this._hasTitle ? 'alert__title--visible' : ''}\"\n aria-hidden=\"true\"\n >\n <slot name=\"title\"></slot>\n </div>\n <span class=\"alert__default-slot\"><slot></slot></span>\n <div\n part=\"actions\"\n class=\"alert__actions ${this._hasActions ? 'alert__actions--visible' : ''}\"\n >\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n ${this.dismissible\n ? html`\n <button\n part=\"close-button\"\n class=\"alert__close-button\"\n aria-label=${this.labelClose}\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-alert': HelixAlert;\n }\n}\n\nexport type { HelixAlert as HxAlert };\n"],"names":["helixAlertStyles","css","HelixAlert","HelixElement","actionsSlot","titleSlot","changedProperties","myCycle","announcer","prefix","message","_a","html","target","classes","severityLabel","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":";;;;;AAcO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}
1	+ {"version":3,"file":"hx-alert-Bto8-TIi.js","sources":["../../src/components/hx-alert/hx-alert.styles.ts","../../src/components/hx-alert/hx-alert.ts"],"sourcesContent":["import { css } from 'lit';\n\n/*\n hx-alert styles.\n \n Component-tier tokens with two-level var() fallback:\n * var(--hx-alert-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n * info-50 = #EFF6FE, info-200 = #BEDCFC, info-500 = #0C8BEB, info-800 = #064172,\n * success-50 = #EAFAEC, success-200 = #BAE6C2, success-500 = #3B9E58, success-800 = #0B4D23,\n * warning-50 = #FFF3EA, warning-200 = #FACFAE, warning-500 = #C2711C, warning-800 = #603301,\n * error-50 = #FFF2F0, error-200 = #FCCBC4, error-500 = #E5493E, error-800 = #7A090A,\n * primary-400 = #6AB1B1.\n /\nexport const helixAlertStyles = css`\n :host {\n display: block;\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n / ─── Screen-reader-only announcement region ─── /\n / Always present in DOM so AT registers it before content is injected. /\n / Visually hidden via clip-path technique (superior to display:none which /\n / removes the element from the AT tree entirely). /\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 {\n box-sizing: border-box;\n }\n\n /* ─── Alert Container ─── /\n\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));\n border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));\n border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-alert-bg, var(--hx-color-info-50, #eff6fe));\n color: var(--hx-alert-color, var(--hx-color-info-800, #064172));\n font-family: var(--hx-alert-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 / ─── Accent Variant (left border stripe) ─── /\n / Removes full border and replaces with a left-side accent stripe. /\n / Common healthcare/enterprise dashboard pattern for dense information UIs. /\n\n .alert--accent {\n border-width: 0;\n border-inline-start: var(--hx-alert-accent-width, 4px) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));\n border-radius: 0;\n }\n\n / ─── Severity Label (WCAG 1.4.1) ─── /\n / Visually hidden — provides a non-color cue for screen readers and users /\n / who cannot distinguish variants by color alone (e.g. color-blind users). /\n / Always present regardless of showIcon so severity is never color-only. /\n\n .alert__severity-label {\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 / ─── Icon ─── /\n\n .alert__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0c8beb));\n }\n\n .alert__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n / ─── Title ─── /\n\n .alert__title {\n display: none;\n font-weight: var(--hx-font-weight-semibold, 600);\n margin-bottom: var(--hx-space-1, 0.25rem);\n }\n\n .alert__title--visible {\n display: block;\n }\n\n / ─── Message ─── /\n\n .alert__message {\n flex: 1;\n min-width: 0;\n }\n\n / (group-6 5.1) Wrapper around the default slot. Carries aria-hidden=true\n so the visible message text is not double-announced alongside the\n sr-only announcer. display:contents keeps the wrapper visually\n transparent so children participate in the parent flex layout as if\n the wrapper were not there. /\n .alert__default-slot {\n display: contents;\n }\n\n / ─── Actions ─── /\n / Hidden by default; shown via JS slotchange detection to avoid invisible /\n / margin-top spacing when no actions are slotted. /\n\n .alert__actions {\n display: none;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n margin-top: var(--hx-space-2, 0.5rem);\n }\n\n .alert__actions--visible {\n display: flex;\n }\n\n / ─── Close Button ─── /\n / Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and /\n / Apple HIG / Google Material guidelines. Uses absolute px units to ensure /\n / the target size is independent of the consumer's base font size. /\n\n .alert__close-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 margin-inline-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-alert-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: var(--hx-opacity-75, 0.75);\n }\n\n .alert__close-button:hover {\n opacity: var(--hx-opacity-100, 1);\n / color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. /\n / Falls back to transparent (no hover background) in older environments. /\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .alert__close-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-alert-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .alert__close-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .alert__close-button {\n transition: none;\n }\n }\n\n / ─── Variant: info ─── /\n\n :host([variant='info']) .alert,\n :host(:not([variant])) .alert {\n --hx-alert-bg: var(--hx-color-info-50, #eff6fe);\n --hx-alert-border-color: var(--hx-color-info-200, #bedcfc);\n --hx-alert-color: var(--hx-color-info-800, #064172);\n --hx-alert-icon-color: var(--hx-color-info-500, #0c8beb);\n }\n\n / ─── Variant: success ─── /\n\n :host([variant='success']) .alert {\n --hx-alert-bg: var(--hx-color-success-50, #eafaec);\n --hx-alert-border-color: var(--hx-color-success-200, #bae6c2);\n --hx-alert-color: var(--hx-color-success-800, #0b4d23);\n --hx-alert-icon-color: var(--hx-color-success-500, #3b9e58);\n }\n\n / ─── Variant: warning ─── /\n\n :host([variant='warning']) .alert {\n --hx-alert-bg: var(--hx-color-warning-50, #fff3ea);\n --hx-alert-border-color: var(--hx-color-warning-200, #facfae);\n --hx-alert-color: var(--hx-color-warning-800, #603301);\n --hx-alert-icon-color: var(--hx-color-warning-500, #c2711c);\n }\n\n / ─── Variant: error ─── /\n\n :host([variant='error']) .alert {\n --hx-alert-bg: var(--hx-color-error-50, #fff2f0);\n --hx-alert-border-color: var(--hx-color-error-200, #fccbc4);\n --hx-alert-color: var(--hx-color-error-800, #7a090a);\n --hx-alert-icon-color: var(--hx-color-error-500, #e5493e);\n }\n\n / ─── Forced Colors (Windows High Contrast) ─── /\n / Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. /\n\n @media (forced-colors: active) {\n .alert {\n border-color: CanvasText;\n }\n\n .alert--accent {\n border-inline-start-color: CanvasText;\n }\n\n .alert__icon svg {\n fill: CanvasText;\n }\n\n .alert__close-button {\n color: ButtonText;\n border: 1px solid 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 { helixAlertStyles } from './hx-alert.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/* Alert variant determines visual styling and ARIA semantics. /\nexport type AlertVariant = 'info' \| 'success' \| 'warning' \| 'error';\n\n/* Detail for the hx-close event dispatched by hx-alert. /\nexport interface HxAlertCloseDetail {\n reason: string;\n}\n\n/\n A feedback component for communicating status messages, warnings, and errors.\n * Critical for healthcare patient safety alerts.\n \n @summary Feedback alert for status messages with variant-based styling and ARIA live regions.\n \n @tag hx-alert\n \n @slot - Default slot for alert message content.\n * @slot title - Optional title/headline for the alert.\n * @slot icon - Custom icon to override the default variant icon.\n * @slot actions - Action buttons rendered within the alert.\n \n @attr {string} heading - Text used to build the close button's contextual aria-label\n * (e.g., \"Close Low blood pressure alert\"). When absent the label falls back to \"Close alert\".\n \n @fires {CustomEvent<{reason: string}>} hx-close - Dispatched when the user dismisses the alert.\n * @fires {CustomEvent} hx-after-close - Dispatched after the alert is dismissed.\n \n @csspart alert - The outer alert container.\n * @csspart title - The title/headline container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n * @csspart actions - The actions container.\n \n @cssprop [--hx-alert-bg=var(--hx-color-info-50)] - Alert background color.\n * @cssprop [--hx-alert-color=var(--hx-color-info-800)] - Alert text color.\n * @cssprop [--hx-alert-border-color=var(--hx-color-info-200)] - Alert border color.\n * @cssprop [--hx-alert-border-radius=var(--hx-border-radius-md)] - Alert border radius.\n * @cssprop [--hx-alert-border-width=var(--hx-border-width-thin)] - Alert border width.\n * @cssprop [--hx-alert-padding=var(--hx-space-4)] - Alert padding.\n * @cssprop [--hx-alert-gap=var(--hx-space-3)] - Gap between alert elements.\n * @cssprop [--hx-alert-icon-color=var(--hx-color-info-500)] - Alert icon color.\n * @cssprop [--hx-alert-font-family=var(--hx-font-family-sans)] - Alert font family.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-alert-accent-width=4px] - Width of the left border accent stripe.\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-50] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-800] - 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-primary-400] - Color.\n * @cssprop [--hx-color-success-200] - Color.\n * @cssprop [--hx-color-success-50] - Color.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-success-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-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-opacity-75] - Opacity.\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-transition-fast] - Transition timing.\n * @aaa-certified 2026-05-08\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-alert/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.6.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-alert\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n /\n@customElement('hx-alert')\nexport class HelixAlert extends HelixElement {\n static override styles = [helixAlertStyles, forcedColorsSurface];\n\n // ─── Properties ───\n\n /\n Visual variant of the alert that determines colors and ARIA semantics.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'info' \| 'success' \| 'warning' \| 'error' = 'info';\n\n /\n Whether the alert can be dismissed by the user.\n * @attr dismissible\n /\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /\n Optional heading text that provides context for the close button's accessible label.\n * When provided, the close button is announced as \"Close [heading] alert\".\n * When absent, the close button falls back to \"Close alert\".\n * @attr heading\n /\n @property({ type: String })\n heading = '';\n\n /\n Accessible label for the close button. Override for i18n.\n * @attr label-close\n /\n @property({ attribute: 'label-close' }) labelClose = 'Close alert';\n\n /\n Whether the alert is visible. Add the `open` attribute to show the alert.\n * @attr open\n /\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /\n Whether to show the default variant icon. Add `show-icon` attribute to display the icon.\n * @attr show-icon\n /\n @property({ type: Boolean, reflect: true, attribute: 'show-icon' })\n showIcon = false;\n\n /\n When true, applies a left border accent stripe instead of a full border.\n * Common healthcare/enterprise dashboard pattern for visual distinction of alert types.\n * @attr accent\n /\n @property({ type: Boolean, reflect: true })\n accent = false;\n\n /\n Override for the severity prefix announced to screen readers (e.g., \"Info:\", \"Error:\").\n * When not set, defaults to the English label matching the current variant.\n * @attr severity-label\n /\n @property({ attribute: 'severity-label' })\n severityLabel: string \| undefined;\n\n /\n CSS selector for the element to return focus to after the alert is dismissed.\n * When set, the component will find and focus the matching element after dismissal.\n * If not set, focus management is the caller's responsibility via the hx-after-close event.\n * @attr return-focus-to\n /\n @property({ type: String, attribute: 'return-focus-to' })\n returnFocusTo: string \| null = null;\n\n // ─── State ───\n\n /* @internal /\n @state()\n private _hasActions = false;\n\n /* @internal /\n @state()\n private _hasTitle = false;\n\n // ─── Private Handler References ───\n\n /* @internal /\n private _actionsSlotChangeHandler: (() => void) \| null = null;\n /* @internal /\n private _titleSlotChangeHandler: (() => void) \| null = null;\n\n /\n (group-6 §5.4) Race-guard counter for the sr-only announcer microtask\n * dance. Each open=false→true transition increments this; the deferred\n * text-clear + re-inject only writes to the announcer when the counter\n * matches the value captured at scheduling time. Rapid open/close cycles\n * therefore collapse to a single announcement on the final settled state\n * rather than leaking stale text from earlier cycles.\n \n @internal\n /\n private _announcerCycle = 0;\n\n // ─── Private Helpers ───\n\n /* @internal /\n private _defaultSeverityLabel(): string {\n const labels: Record<string, string> = {\n info: 'Info:',\n success: 'Success:',\n warning: 'Warning:',\n error: 'Error:',\n };\n return labels[this.variant] ?? '';\n }\n\n /* @internal /\n private get _effectiveSeverityLabel(): string {\n return this.severityLabel ?? this._defaultSeverityLabel();\n }\n\n /* Returns true when the variant requires assertive announcement. /\n /* @internal /\n private get _isAssertive(): boolean {\n return this.variant === 'error';\n }\n\n /\n Returns the appropriate ARIA role based on variant.\n * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n /\n /* @internal /\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Apply ARIA role to the host element for reliable screen reader support across\n // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n //\n // (group-6) Dual-write: `internals.role` is the modern IDL-based source of\n // truth; the `role` attribute is retained as a legacy fallback for older AT\n // that don't yet honour ElementInternals ARIA reflection. role implies\n // aria-live per ARIA spec — we do NOT set explicit aria-live on the host\n // (the inner sr-only announcer carries the explicit aria-live so the\n // open=false→true text-mutation is observed by AT).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n if (!this.open) {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot && this._actionsSlotChangeHandler) {\n actionsSlot.removeEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot && this._titleSlotChangeHandler) {\n titleSlot.removeEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n override firstUpdated(): void {\n // Track actions slot content to avoid invisible spacing when no actions are slotted.\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot) {\n this._actionsSlotChangeHandler = () => {\n this._hasActions = actionsSlot.assignedNodes({ flatten: true }).length > 0;\n };\n actionsSlot.addEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n\n // Track title slot content so the title container doesn't create dead space when empty.\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot) {\n this._titleSlotChangeHandler = () => {\n this._hasTitle = titleSlot.assignedNodes({ flatten: true }).length > 0;\n };\n titleSlot.addEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n // Keep host ARIA role in sync with variant (assertive vs. polite).\n // Dual-write: internals (modern) + attribute (legacy fallback).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n }\n if (changedProperties.has('open')) {\n // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n // When open transitions from false→true, removing aria-hidden signals to AT\n // that the live region content should be announced.\n if (this.open) {\n this.removeAttribute('aria-hidden');\n // Trigger announcement via the sr-only polite live region for ATs (JAWS+Chrome,\n // NVDA) that do not re-announce existing content when aria-hidden is merely removed.\n // We inject text after a microtask so the DOM has settled and the live region\n // is registered by the AT before content arrives.\n const previousOpen = changedProperties.get('open');\n if (previousOpen === false) {\n // (group-6 §5.4) Race-guard: bump the cycle counter and capture it.\n // The deferred microtask only writes if the counter still matches —\n // rapid open/close cycles therefore collapse to a single announcement\n // on the final settled state rather than leaking stale text.\n const myCycle = ++this._announcerCycle;\n Promise.resolve().then(() => {\n if (myCycle !== this._announcerCycle \|\| !this.open) return;\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n // Second microtask ensures the clear is processed before re-injection,\n // guaranteeing the AT sees a content change rather than no-op.\n Promise.resolve().then(() => {\n if (myCycle !== this._announcerCycle \|\| !this.open) return;\n const prefix = this._effectiveSeverityLabel;\n const message = this.textContent?.trim() ?? '';\n announcer.textContent = prefix ? `${prefix} ${message}` : message;\n });\n }\n });\n }\n } else {\n this.setAttribute('aria-hidden', 'true');\n // (group-6 §5.4) Bump the cycle counter on close so any pending\n // announcer microtask from the previous open is invalidated.\n this._announcerCycle++;\n // Clear the announcer when hidden so stale text is not re-read on next open.\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n }\n }\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 _renderSuccessIcon() {\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-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\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 _renderErrorIcon() {\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 _renderDefaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'error':\n return this._renderErrorIcon();\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 // ─── Event Handling ───\n\n /* @internal /\n private _handleDismiss(): void {\n this.open = false;\n\n /\n Dispatched when the user dismisses the alert.\n * @event hx-close\n /\n this.dispatchEvent(\n new CustomEvent<{ reason: string }>('hx-close', {\n bubbles: true,\n composed: true,\n detail: { reason: 'user' },\n }),\n );\n\n /\n Dispatched after the alert is dismissed.\n * @event hx-after-close\n */\n this.dispatchEvent(\n new CustomEvent<void>('hx-after-close', {\n bubbles: true,\n composed: true,\n }),\n );\n\n // Return focus to a designated element if specified via returnFocusTo.\n if (this.returnFocusTo) {\n const target = document.querySelector(this.returnFocusTo);\n if (target instanceof HTMLElement) {\n target.focus();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n alert: true,\n [`alert--${this.variant}`]: true,\n 'alert--accent': this.accent,\n };\n\n // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n // is never conveyed by color alone, regardless of whether showIcon is set.\n const severityLabel = this._effectiveSeverityLabel;\n\n // (group-6 §5.1) Decorative duplicates of announcer copy — severity\n // label, icon, title — are each marked aria-hidden=true so the\n // sr-only announcer is the SOLE announcement surface for THAT copy.\n // Without this guard, JAWS+Chrome was observed reading those bits\n // twice (once from host text, once from the announcer).\n //\n // (group-6 codex round-1 fix) The default slot wrapper is NO LONGER\n // aria-hidden. The default slot can hold consumer-supplied interactive\n // content (inline links, inline buttons inside an alert message), and\n // aria-hidden on a parent of focusable elements is an axe-core\n // `aria-hidden-focus` violation: AT users would tab into invisible\n // controls. To suppress the (now exclusively-announcer-driven)\n // double-announce risk on the slot text itself, the announcer copy is\n // built from `this.textContent` and the host has its `role` toggled\n // off-then-on across the open transition, so AT only registers the\n // announcer as the live region for that text — not the host.\n //\n // aria-hidden is also NOT placed on the alert container, the actions\n // slot wrapper, or the close button — those host focusable descendants\n // for the same axe-core reason.\n return html`\n <div\n class=\"sr-only\"\n aria-live=${this._isAssertive ? 'assertive' : 'polite'}\n aria-atomic=\"true\"\n ></div>\n <div part=\"alert\" class=${classMap(classes)}>\n <span class=\"alert__severity-label\" aria-hidden=\"true\">${severityLabel}</span>\n ${this.showIcon\n ? html`\n <div part=\"icon\" class=\"alert__icon\" aria-hidden=\"true\">\n <slot name=\"icon\">${this._renderDefaultIcon()}</slot>\n </div>\n `\n : nothing}\n\n <div part=\"message\" class=\"alert__message\">\n <div\n part=\"title\"\n class=\"alert__title ${this._hasTitle ? 'alert__title--visible' : ''}\"\n aria-hidden=\"true\"\n >\n <slot name=\"title\"></slot>\n </div>\n <span class=\"alert__default-slot\"><slot></slot></span>\n <div\n part=\"actions\"\n class=\"alert__actions ${this._hasActions ? 'alert__actions--visible' : ''}\"\n >\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n ${this.dismissible\n ? html`\n <button\n part=\"close-button\"\n class=\"alert__close-button\"\n aria-label=${this.labelClose}\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-alert': HelixAlert;\n }\n}\n\nexport type { HelixAlert as HxAlert };\n"],"names":["helixAlertStyles","css","HelixAlert","HelixElement","actionsSlot","titleSlot","changedProperties","myCycle","announcer","prefix","message","_a","html","target","classes","severityLabel","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":";;;;;AAcO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC+FzB,IAAMC,IAAN,cAAyBC,EAAa;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,UAAoD,QAOpD,KAAA,cAAc,IASd,KAAA,UAAU,IAM8B,KAAA,aAAa,eAOrD,KAAA,OAAO,IAOP,KAAA,WAAW,IAQX,KAAA,SAAS,IAiBT,KAAA,gBAA+B,MAM/B,KAAQ,cAAc,IAItB,KAAQ,YAAY,IAKpB,KAAQ,4BAAiD,MAEzD,KAAQ,0BAA+C,MAYvD,KAAQ,kBAAkB;AAAA,EAAA;AAAA;AAAA;AAAA,EAKlB,wBAAgC;AAOtC,WANuC;AAAA,MACrC,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA,EAEK,KAAK,OAAO,KAAK;AAAA,EACjC;AAAA;AAAA,EAGA,IAAY,0BAAkC;AAC5C,WAAO,KAAK,iBAAiB,KAAK,sBAAA;AAAA,EACpC;AAAA;AAAA;AAAA,EAIA,IAAY,eAAwB;AAClC,WAAO,KAAK,YAAY;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAY,QAAgB;AAC1B,WAAO,KAAK,eAAe,UAAU;AAAA,EACvC;AAAA;AAAA,EAIS,oBAA0B;AACjC,UAAM,kBAAA,GAWN,KAAK,WAAW,OAAO,KAAK,OAC5B,KAAK,aAAa,QAAQ,KAAK,KAAK,GAC/B,KAAK,QACR,KAAK,aAAa,eAAe,MAAM;AAAA,EAE3C;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,UAAMC,IAAc,KAAK,WAAW,cAA+B,sBAAsB;AACzF,IAAIA,KAAe,KAAK,6BACtBA,EAAY,oBAAoB,cAAc,KAAK,yBAAyB;AAE9E,UAAMC,IAAY,KAAK,WAAW,cAA+B,oBAAoB;AACrF,IAAIA,KAAa,KAAK,2BACpBA,EAAU,oBAAoB,cAAc,KAAK,uBAAuB;AAAA,EAE5E;AAAA,EAES,eAAqB;AAE5B,UAAMD,IAAc,KAAK,WAAW,cAA+B,sBAAsB;AACzF,IAAIA,MACF,KAAK,4BAA4B,MAAM;AACrC,WAAK,cAAcA,EAAY,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,IAC3E,GACAA,EAAY,iBAAiB,cAAc,KAAK,yBAAyB;AAI3E,UAAMC,IAAY,KAAK,WAAW,cAA+B,oBAAoB;AACrF,IAAIA,MACF,KAAK,0BAA0B,MAAM;AACnC,WAAK,YAAYA,EAAU,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,IACvE,GACAA,EAAU,iBAAiB,cAAc,KAAK,uBAAuB;AAAA,EAEzE;AAAA,EAEmB,QAAQC,GAA+C;AAQxE,QAPA,MAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,SAAS,MAGjC,KAAK,WAAW,OAAO,KAAK,OAC5B,KAAK,aAAa,QAAQ,KAAK,KAAK,IAElCA,EAAkB,IAAI,MAAM;AAI9B,UAAI,KAAK;AAOP,YANA,KAAK,gBAAgB,aAAa,GAKbA,EAAkB,IAAI,MAAM,MAC5B,IAAO;AAK1B,gBAAMC,IAAU,EAAE,KAAK;AACvB,kBAAQ,UAAU,KAAK,MAAM;AAC3B,gBAAIA,MAAY,KAAK,mBAAmB,CAAC,KAAK,KAAM;AACpD,kBAAMC,IAAY,KAAK,WAAW,cAA2B,UAAU;AACvE,YAAIA,MACFA,EAAU,cAAc,IAGxB,QAAQ,UAAU,KAAK,MAAM;;AAC3B,kBAAID,MAAY,KAAK,mBAAmB,CAAC,KAAK,KAAM;AACpD,oBAAME,IAAS,KAAK,yBACdC,MAAUC,IAAA,KAAK,gBAAL,gBAAAA,EAAkB,WAAU;AAC5C,cAAAH,EAAU,cAAcC,IAAS,GAAGA,CAAM,IAAIC,CAAO,KAAKA;AAAA,YAC5D,CAAC;AAAA,UAEL,CAAC;AAAA,QACH;AAAA,aACK;AACL,aAAK,aAAa,eAAe,MAAM,GAGvC,KAAK;AAEL,cAAMF,IAAY,KAAK,WAAW,cAA2B,UAAU;AACvE,QAAIA,MACFA,EAAU,cAAc;AAAA,MAE5B;AAAA,EAEJ;AAAA;AAAA;AAAA,EAKQ,kBAAkB;AACxB,WAAOI;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAAA;AAAA,EAGQ,qBAAqB;AAC3B,WAAOA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAAA;AAAA,EAGQ,qBAAqB;AAC3B,WAAOA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAAA;AAAA,EAGQ,mBAAmB;AACzB,WAAOA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAAA;AAAA,EAGQ,qBAAqB;AAC3B,YAAQ,KAAK,SAAA;AAAA,MACX,KAAK;AACH,eAAO,KAAK,mBAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,mBAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,iBAAA;AAAA,MACd,KAAK;AAAA,MACL;AACE,eAAO,KAAK,gBAAA;AAAA,IAAgB;AAAA,EAElC;AAAA;AAAA,EAGQ,mBAAmB;AACzB,WAAOA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAAA;AAAA;AAAA,EAKQ,iBAAuB;AA2B7B,QA1BA,KAAK,OAAO,IAMZ,KAAK;AAAA,MACH,IAAI,YAAgC,YAAY;AAAA,QAC9C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,QAAQ,OAAA;AAAA,MAAO,CAC1B;AAAA,IAAA,GAOH,KAAK;AAAA,MACH,IAAI,YAAkB,kBAAkB;AAAA,QACtC,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA,GAIC,KAAK,eAAe;AACtB,YAAMC,IAAS,SAAS,cAAc,KAAK,aAAa;AACxD,MAAIA,aAAkB,eACpBA,EAAO,MAAA;AAAA,IAEX;AAAA,EACF;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,OAAO;AAAA,MACP,CAAC,UAAU,KAAK,OAAO,EAAE,GAAG;AAAA,MAC5B,iBAAiB,KAAK;AAAA,IAAA,GAKlBC,IAAgB,KAAK;AAsB3B,WAAOH;AAAA;AAAA;AAAA,oBAGS,KAAK,eAAe,cAAc,QAAQ;AAAA;AAAA;AAAA,gCAG9BI,EAASF,CAAO,CAAC;AAAA,iEACgBC,CAAa;AAAA,UACpE,KAAK,WACHH;AAAA;AAAA,oCAEwB,KAAK,oBAAoB;AAAA;AAAA,gBAGjDK,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kCAKe,KAAK,YAAY,0BAA0B,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAQ3C,KAAK,cAAc,4BAA4B,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM3E,KAAK,cACHL;AAAA;AAAA;AAAA;AAAA,6BAIiB,KAAK,UAAU;AAAA,yBACnB,KAAK,cAAc;AAAA;AAAA,kBAE1B,KAAK,kBAAkB;AAAA;AAAA,gBAG7BK,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAzaaf,EACK,SAAS,CAACF,GAAkBkB,CAAmB;AAS/DC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAT9BlB,EAUX,WAAA,WAAA,CAAA;AAOAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BlB,EAiBX,WAAA,eAAA,CAAA;AASAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBflB,EA0BX,WAAA,WAAA,CAAA;AAMwCiB,EAAA;AAAA,EAAvCC,EAAS,EAAE,WAAW,cAAA,CAAe;AAAA,GAhC3BlB,EAgC6B,WAAA,cAAA,CAAA;AAOxCiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtC/BlB,EAuCX,WAAA,QAAA,CAAA;AAOAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,aAAa;AAAA,GA7CvDlB,EA8CX,WAAA,YAAA,CAAA;AAQAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArD/BlB,EAsDX,WAAA,UAAA,CAAA;AAQAiB,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,iBAAA,CAAkB;AAAA,GA7D9BlB,EA8DX,WAAA,iBAAA,CAAA;AASAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GAtE7ClB,EAuEX,WAAA,iBAAA,CAAA;AAMQiB,EAAA;AAAA,EADPE,EAAA;AAAM,GA5EInB,EA6EH,WAAA,eAAA,CAAA;AAIAiB,EAAA;AAAA,EADPE,EAAA;AAAM,GAhFInB,EAiFH,WAAA,aAAA,CAAA;AAjFGA,IAANiB,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZpB,CAAA;"}

package/dist/shared/{hx-badge-JlFtAdxS.js → hx-badge-DFL35nzi.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import { property as i, state as c, customElement as x } from "lit/decorators.js
 import { classMap as p } from "lit/directives/class-map.js";
 import { a as u } from "./forced-colors-CTEDFRGa.js";
 import { H as v } from "./helix-element-BNEYeiys.js";
-const m = g`
+const f = g`
   :host {
     display: inline-block;
   }
@@ -14,8 +14,8 @@ const m = g`
     justify-content: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #429797));
-    color: var(--hx-badge-color, var(--hx-color-text-on-primary, #0d1825));
+    background-color: var(--hx-badge-bg, var(--hx-color-action-primary-bg, #0f7078));
+    color: var(--hx-badge-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -47,11 +47,11 @@ const m = g`
   /* ─── Style Variants ─── */
   .badge--primary {
-    --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797));
-    --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #0d1825));
+    --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-action-primary-bg, #0f7078));
+    --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797))
+      var(--hx-badge-primary-bg, var(--hx-color-action-primary-bg, #0f7078))
     );
   }
@@ -245,10 +245,10 @@ const m = g`
     }
   }
 `;
-var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (r, a, s, o) => {
-  for (var n = o > 1 ? void 0 : o ? y(a, s) : a, h = r.length - 1, b; h >= 0; h--)
-    (b = r[h]) && (n = (o ? b(a, s, n) : b(n)) || n);
-  return o && n && f(a, s, n), n;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (r, a, n, o) => {
+  for (var s = o > 1 ? void 0 : o ? y(a, n) : a, h = r.length - 1, b; h >= 0; h--)
+    (b = r[h]) && (s = (o ? b(a, n, s) : b(s)) || s);
+  return o && s && m(a, n, s), s;
 };
 let e = class extends v {
   constructor() {
@@ -263,8 +263,8 @@ let e = class extends v {
   // ─── Slot Change Handling ───
   /** @internal */
   _handleSlotChange(r) {
-    const s = r.target.assignedNodes({ flatten: !0 });
-    this._hasSlotContent = s.some((o) => o.nodeType === Node.ELEMENT_NODE ? !0 : o.nodeType === Node.TEXT_NODE ? (o.textContent ?? "").trim().length > 0 : !1);
+    const n = r.target.assignedNodes({ flatten: !0 });
+    this._hasSlotContent = n.some((o) => o.nodeType === Node.ELEMENT_NODE ? !0 : o.nodeType === Node.TEXT_NODE ? (o.textContent ?? "").trim().length > 0 : !1);
   }
   // ─── Event Handling ───
   /** @internal */
@@ -289,7 +289,7 @@ let e = class extends v {
   render() {
     const r = this.count !== void 0, a = !this._hasSlotContent && !r && this.pulse;
     a && this.dotLabel;
-    const s = {
+    const n = {
       badge: !0,
       [`badge--${this.variant}`]: !0,
       [`badge--${this.size}`]: !0,
@@ -300,7 +300,7 @@ let e = class extends v {
     return d`
       <span
         part="badge"
-        class=${p(s)}
+        class=${p(n)}
         role=${a && this.dotLabel ? "img" : l}
         aria-label=${a && this.dotLabel ? this.dotLabel : l}
         aria-live=${r ? "polite" : l}
@@ -325,7 +325,7 @@ let e = class extends v {
     `;
   }
 };
-e.styles = [m, u];
+e.styles = [f, u];
 e._SEMANTIC_VARIANT_LABELS = {
   success: "Success",
   warning: "Warning",
@@ -368,4 +368,4 @@ e = t([
 export {
   e as H
 };
-//# sourceMappingURL=hx-badge-JlFtAdxS.js.map
+//# sourceMappingURL=hx-badge-DFL35nzi.js.map

package/dist/shared/hx-badge-DFL35nzi.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-badge-DFL35nzi.js","sources":["../../src/components/hx-badge/hx-badge.styles.ts","../../src/components/hx-badge/hx-badge.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBadgeStyles = css`\n :host {\n display: inline-block;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-1, 0.25rem);\n border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-badge-bg, var(--hx-color-action-primary-bg, #0f7078));\n color: var(--hx-badge-color, var(--hx-color-text-on-primary, #ffffff));\n font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n vertical-align: middle;\n position: relative;\n }\n\n /* ─── Size Variants ─── */\n\n .badge--sm {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-2xs, 0.625rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-0-5, 0.125rem))\n var(--hx-badge-padding-x, var(--hx-space-1-5, 0.375rem));\n }\n\n .badge--md {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-xs, 0.75rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-badge-padding-x, var(--hx-space-2, 0.5rem));\n }\n\n .badge--lg {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-sm, 0.875rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-badge-padding-x, var(--hx-space-3, 0.75rem));\n }\n\n /* ─── Style Variants ─── */\n\n .badge--primary {\n --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-action-primary-bg, #0f7078));\n --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #ffffff));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-primary-bg, var(--hx-color-action-primary-bg, #0f7078))\n );\n }\n\n .badge--secondary {\n --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9));\n --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #313e4b));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9))\n );\n }\n\n .badge--success {\n --hx-badge-bg: var(--hx-badge-success-bg, var(--hx-color-success-700, #146831));\n --hx-badge-color: var(--hx-badge-success-color, var(--hx-color-neutral-0, #ffffff));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-success-bg, var(--hx-color-success-700, #146831))\n );\n }\n\n .badge--warning {\n --hx-badge-bg: var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c));\n --hx-badge-color: var(--hx-badge-warning-color, var(--hx-color-neutral-900, #0d1825));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c))\n );\n }\n\n .badge--error {\n --hx-badge-bg: var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e));\n --hx-badge-color: var(--hx-badge-error-color, var(--hx-color-text-on-error, #0d1825));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e))\n );\n }\n\n .badge--neutral {\n --hx-badge-bg: var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5));\n --hx-badge-color: var(--hx-badge-neutral-color, var(--hx-color-neutral-700, #313e4b));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5))\n );\n }\n\n .badge--info {\n --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997));\n --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997))\n );\n }\n\n /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */\n /* Visually hidden text prefix for semantic variants (success/warning/error/info). */\n /* Ensures the variant is not conveyed by color alone. */\n\n .badge__variant-label {\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 /* ─── Pill Mode ─── */\n\n .badge--pill {\n border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-full, 9999px));\n }\n\n /* ─── Dot Indicator (empty + pulse) ─── */\n\n .badge--dot {\n width: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));\n height: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));\n padding: 0;\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n /* Guard: hide all inner content in dot mode — the dot is purely visual */\n .badge--dot ::slotted(*),\n .badge--dot slot,\n .badge--dot slot[name='prefix'] {\n display: none !important;\n }\n\n /* ─── Pulse Animation ─── */\n\n @keyframes hx-badge-pulse {\n 0%,\n 100% {\n opacity: 1;\n box-shadow: 0 0 0 2px var(--hx-badge-pulse-color-internal, currentColor);\n }\n 50% {\n opacity: var(--hx-opacity-75, 0.75);\n box-shadow: 0 0 0 6px transparent;\n }\n }\n\n .badge--pulse {\n animation: hx-badge-pulse var(--hx-badge-pulse-duration, var(--hx-duration-slow, 2s))\n var(--hx-badge-pulse-easing, var(--hx-easing-in-out, ease-in-out)) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .badge--pulse {\n animation: none;\n }\n }\n\n /* ─── Remove Button ─── */\n\n .badge__remove-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0;\n margin-inline-start: var(--hx-space-1, 0.25rem);\n cursor: pointer;\n color: inherit;\n opacity: var(--hx-opacity-75, 0.75);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n line-height: 0;\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 }\n\n .badge__remove-button:hover {\n opacity: var(--hx-opacity-100, 1);\n }\n\n .badge__remove-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .badge {\n border: 1px solid CanvasText;\n forced-color-adjust: none;\n background-color: Canvas;\n color: CanvasText;\n }\n\n .badge--pulse {\n animation: none;\n }\n\n .badge__remove-button {\n color: ButtonText;\n }\n\n /* Per-semantic-variant forced-colors fallbacks. The visually-hidden\n semantic variant label (.badge__variant-label) keeps AT users\n informed; these blocks restore visual semantic distinction for\n sighted users in HCM where bg/color collapse to system defaults.\n Pattern: distinct border-style per variant. */\n .badge--success {\n border-style: solid;\n border-width: 2px;\n }\n\n .badge--warning {\n border-style: dashed;\n border-width: 2px;\n }\n\n .badge--error {\n border-style: double;\n border-width: 3px;\n }\n\n .badge--info {\n border-style: dotted;\n border-width: 2px;\n }\n }\n`;\n","import { html, nothing } 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 { helixBadgeStyles } from './hx-badge.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A small status indicator for notifications, counts, and labels.\n *\n * @summary Presentational badge for status indicators, notification counts, and labels.\n *\n * @tag hx-badge\n *\n * @slot - Default slot for badge content (text, number). When empty with pulse enabled, renders as a dot indicator.\n * @slot prefix - Icon or content rendered before the badge text.\n *\n * @fires {CustomEvent<void>} hx-remove - Dispatched when the user clicks the remove button.\n *\n * @csspart badge - The badge element.\n * @csspart remove-button - The remove/dismiss button.\n *\n * @cssprop [--hx-badge-bg=var(--hx-color-primary-500)] - Badge background color. The primary override point.\n * @cssprop [--hx-badge-color=var(--hx-color-neutral-0)] - Badge text color. The primary override point.\n * @cssprop [--hx-badge-font-size] - Badge font size (set per size variant).\n * @cssprop [--hx-badge-font-weight=var(--hx-font-weight-semibold)] - Badge font weight.\n * @cssprop [--hx-badge-font-family=var(--hx-font-family-sans)] - Badge font family.\n * @cssprop [--hx-badge-border-radius=var(--hx-border-radius-md)] - Badge border radius.\n * @cssprop [--hx-badge-padding-x] - Badge horizontal padding (set per size variant).\n * @cssprop [--hx-badge-padding-y] - Badge vertical padding (set per size variant).\n * @cssprop [--hx-badge-pulse-color] - Pulse color matching variant background with reduced opacity.\n * @cssprop [--hx-badge-dot-size=var(--hx-size-2)] - Dot indicator size when rendered without content.\n * @cssprop [--hx-badge-secondary-bg=var(--hx-color-neutral-100)] - Background for the secondary variant.\n * @cssprop [--hx-badge-secondary-color=var(--hx-color-neutral-700)] - Text color for the secondary variant.\n * @cssprop [--hx-badge-info-bg=var(--hx-color-info-700)] - Background for the info variant.\n * @cssprop [--hx-badge-info-color=var(--hx-color-neutral-0)] - Text color for the info variant.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-font-size-2xs] - Font size.\n * @cssprop [--hx-space-0-5] - Spacing token.\n * @cssprop [--hx-space-1-5] - Spacing token.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-badge-pulse-color-internal] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-success-700] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-info-700] - Color.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-badge-pulse-duration=var(--hx-duration-slow)] - CSS custom property.\n * @cssprop [--hx-duration-slow] - Animation duration.\n * @cssprop [--hx-badge-pulse-easing=var(--hx-easing-in-out)] - CSS custom property.\n * @cssprop [--hx-easing-in-out] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n */\n@customElement('hx-badge')\nexport class HelixBadge extends HelixElement {\n static override styles = [helixBadgeStyles, forcedColorsSurface];\n\n /**\n * Visual style variant of the badge.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral' | 'info' =\n 'primary';\n\n /**\n * Size of the badge.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the badge uses fully rounded (pill) styling.\n * @attr pill\n */\n @property({ type: Boolean, reflect: true })\n pill = false;\n\n /**\n * Whether the badge displays an animated pulse for attention.\n * @attr pulse\n */\n @property({ type: Boolean, reflect: true })\n pulse = false;\n\n /**\n * Whether the badge renders a dismiss button.\n * @attr removable\n */\n @property({ type: Boolean, reflect: true })\n removable = false;\n\n /**\n * Numeric count to display. When set, renders the count as badge content.\n * When count exceeds `max`, displays `${max}+` (e.g. `99+`).\n * @attr count\n */\n @property({ type: Number, reflect: true })\n count: number | undefined = undefined;\n\n /**\n * Maximum count value before truncation to `${max}+`. Defaults to 99.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 99;\n\n /**\n * Accessible label for the dot indicator mode (pulse + empty slot).\n * Required for WCAG 4.1.2 compliance when using the dot indicator pattern.\n * Example: `dot-label=\"3 new messages\"`.\n * @attr dot-label\n */\n @property({ type: String, attribute: 'dot-label' })\n dotLabel = '';\n\n /**\n * Accessible label for the remove button. Should describe what is being removed.\n * Defaults to \"Remove\". For better accessibility, include context: e.g. \"Remove Critical badge\".\n * @attr remove-label\n */\n @property({ type: String, attribute: 'remove-label' })\n removeLabel = 'Remove';\n\n /**\n * Tracks whether the default slot has assigned content.\n * @internal\n */\n @state()\n private _hasSlotContent = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-badge', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as 'sm' | 'md' | 'lg';\n }\n }\n\n // ─── Slot Change Handling ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n // Check if any assigned node has non-whitespace content\n this._hasSlotContent = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleRemove(): void {\n this.dispatchEvent(\n new CustomEvent<void>('hx-remove', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // ─── Count Display ───\n\n /** @internal */\n private get _countDisplay(): string {\n if (this.count === undefined) return '';\n return this.count > this.max ? `${this.max}+` : String(this.count);\n }\n\n // ─── WCAG 1.4.1: Semantic variant label map ───\n // Variants that carry semantic meaning beyond decoration need a non-color cue.\n // Visually-hidden text is prepended so screen reader users and color-blind\n // users get the variant context even when no icon is slotted.\n\n /** @internal */\n private static readonly _SEMANTIC_VARIANT_LABELS: Partial<Record<HelixBadge['variant'], string>> =\n {\n success: 'Success',\n warning: 'Warning',\n error: 'Error',\n info: 'Info',\n };\n\n /** @internal */\n private get _semanticVariantLabel(): string {\n return HelixBadge._SEMANTIC_VARIANT_LABELS[this.variant] ?? '';\n }\n\n // ─── Render ───\n\n override render() {\n const hasCount = this.count !== undefined;\n const isDot = !this._hasSlotContent && !hasCount && this.pulse;\n\n if (isDot && !this.dotLabel) {\n devWarn(\n 'hx-badge',\n 'Dot badge is missing an accessible label. Set `dotLabel` so screen readers can announce the badge purpose (WCAG 4.1.2).',\n );\n }\n\n const classes = {\n badge: true,\n [`badge--${this.variant}`]: true,\n [`badge--${this.size}`]: true,\n 'badge--pill': this.pill,\n 'badge--pulse': this.pulse,\n 'badge--dot': isDot,\n };\n\n const variantLabel = this._semanticVariantLabel;\n\n return html`\n <span\n part=\"badge\"\n class=${classMap(classes)}\n role=${isDot && this.dotLabel ? 'img' : nothing}\n aria-label=${isDot && this.dotLabel ? this.dotLabel : nothing}\n aria-live=${hasCount ? 'polite' : nothing}\n >\n ${variantLabel\n ? html`<span class=\"badge__variant-label\">${variantLabel}: </span>`\n : nothing}\n ${isDot ? nothing : html`<slot name=\"prefix\"></slot>`}\n ${hasCount ? this._countDisplay : html`<slot @slotchange=${this._handleSlotChange}></slot>`}\n ${this.removable\n ? html`<button\n part=\"remove-button\"\n class=\"badge__remove-button\"\n aria-label=${this.removeLabel}\n @click=${this._handleRemove}\n >\n <svg viewBox=\"0 0 12 12\" aria-hidden=\"true\" width=\"10\" height=\"10\">\n <path\n d=\"M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>`\n : nothing}\n </span>\n `;\n }\n}\n\n/** Canonical type alias for the hx-badge component. */\nexport type HxBadge = HelixBadge;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-badge': HelixBadge;\n }\n}\n"],"names":["helixBadgeStyles","css","HelixBadge","HelixElement","legacySize","e","nodes","node","hasCount","isDot","classes","variantLabel","html","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/shared/hx-banner-fpRnciIO.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-banner-fpRnciIO.js","sources":["../../src/components/hx-banner/hx-banner.styles.ts","../../src/components/hx-banner/hx-banner.ts"],"sourcesContent":["import { css } from 'lit';\n\n/*\n hx-banner styles.\n \n Component-tier tokens with two-level var() fallback:\n * var(--hx-banner-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n * info-50 = #EFF6FE, info-200 = #BEDCFC, info-500 = #0C8BEB, info-800 = #064172,\n * success-50 = #EAFAEC, success-200 = #BAE6C2, success-500 = #3B9E58, success-800 = #0B4D23,\n * warning-50 = #FFF3EA, warning-200 = #FACFAE, warning-500 = #C2711C, warning-800 = #603301,\n * error-50 = #FFF2F0, error-200 = #FCCBC4, error-500 = #E5493E, error-800 = #7A090A,\n * primary-400 = #6AB1B1.\n /\nexport const helixBannerStyles = css`\n :host {\n display: block;\n width: 100%;\n position: var(--hx-banner-position, sticky);\n top: 0;\n left: 0;\n right: 0;\n z-index: var(--hx-banner-z-index, 100);\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n {\n box-sizing: border-box;\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── /\n / Visually hidden — ensures variant is never conveyed by color alone. /\n / Always rendered so screen readers can identify the banner severity. /\n\n .banner__severity-label {\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 / ─── Banner Container ─── /\n\n .banner {\n display: flex;\n align-items: center;\n gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n background-color: var(--hx-banner-bg, var(--hx-color-info-50, #eff6fe));\n color: var(--hx-banner-color, var(--hx-color-info-800, #064172));\n border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-banner-border-color, var(--hx-color-info-200, #bedcfc));\n font-family: var(--hx-banner-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 width: 100%;\n }\n\n / ─── Icon ─── /\n\n .banner__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));\n }\n\n .banner__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n / ─── Message ─── /\n\n .banner__message {\n flex: 1;\n min-width: 0;\n }\n\n / ─── Action Link ─── /\n\n .banner__action {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #064172)));\n font-weight: var(--hx-font-weight-semibold, 600);\n text-decoration: underline;\n text-underline-offset: 2px;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n font-size: inherit;\n font-family: inherit;\n }\n\n .banner__action:hover {\n opacity: var(--hx-opacity-90, 0.9);\n }\n\n .banner__action:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-banner-action-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n / ─── Close Button ─── /\n / Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and /\n / Apple HIG / Google Material guidelines. Uses absolute px units to ensure /\n / the target size is independent of the consumer's base font size. /\n\n .banner__close-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 margin-inline-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-banner-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: var(--hx-opacity-75, 0.75);\n }\n\n .banner__close-button:hover {\n opacity: var(--hx-opacity-100, 1);\n / color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. /\n / Falls back to transparent (no hover background) in older environments. /\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .banner__close-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-banner-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .banner__close-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n / ─── Variant: info ─── /\n\n :host([variant='info']) .banner,\n :host(:not([variant])) .banner {\n --hx-banner-bg: var(--hx-color-info-50, #eff6fe);\n --hx-banner-border-color: var(--hx-color-info-200, #bedcfc);\n --hx-banner-color: var(--hx-color-info-800, #064172);\n --hx-banner-icon-color: var(--hx-color-info-500, #0c8beb);\n }\n\n / ─── Variant: success ─── /\n\n :host([variant='success']) .banner {\n --hx-banner-bg: var(--hx-color-success-50, #eafaec);\n --hx-banner-border-color: var(--hx-color-success-200, #bae6c2);\n --hx-banner-color: var(--hx-color-success-800, #0b4d23);\n --hx-banner-icon-color: var(--hx-color-success-500, #3b9e58);\n }\n\n / ─── Variant: warning ─── /\n\n :host([variant='warning']) .banner {\n --hx-banner-bg: var(--hx-color-warning-50, #fff3ea);\n --hx-banner-border-color: var(--hx-color-warning-200, #facfae);\n --hx-banner-color: var(--hx-color-warning-800, #603301);\n --hx-banner-icon-color: var(--hx-color-warning-500, #c2711c);\n }\n\n / ─── Variant: error ─── /\n\n :host([variant='error']) .banner {\n --hx-banner-bg: var(--hx-color-error-50, #fff2f0);\n --hx-banner-border-color: var(--hx-color-error-200, #fccbc4);\n --hx-banner-color: var(--hx-color-error-800, #7a090a);\n --hx-banner-icon-color: var(--hx-color-error-500, #e5493e);\n }\n\n / ─── Position: fixed ─── /\n / When position=\"fixed\", override the host-level CSS custom property. /\n / The :host rule above sets position via var(--hx-banner-position). /\n / We use an attribute selector to override it cleanly without duplication. /\n\n :host([position='fixed']) {\n position: fixed;\n }\n\n / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .banner__close-button {\n transition: none;\n }\n }\n\n / ─── Forced Colors (Windows High Contrast) ─── /\n / Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. /\n\n @media (forced-colors: active) {\n .banner {\n border-bottom-color: CanvasText;\n }\n\n .banner__icon svg {\n fill: CanvasText;\n }\n\n .banner__close-button {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixBannerStyles } from './hx-banner.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/* Banner variant determines visual styling and ARIA semantics. /\nexport type BannerVariant = 'info' \| 'success' \| 'warning' \| 'error';\n\n/* Banner position determines CSS positioning behavior. /\nexport type BannerPosition = 'sticky' \| 'fixed';\n\n// ─── ARIA naming disambiguation (group-6) ───\n//\n// IMPORTANT: the component name `hx-banner` refers to the visual UX pattern\n// (full-width page-level notification surface). It is NOT a semantic mapping\n// to the HTML5 LANDMARK role `role=\"banner\"` (which marks the page-level\n// header/masthead).\n//\n// The ARIA role this component sets on its host is `alert` or `status`,\n// derived from `variant`. A regression test in `hx-banner.test.ts` asserts\n// that `role=\"banner\"` (the LANDMARK role) is NEVER applied. Do NOT \"fix\"\n// this by adding the LANDMARK role.\n//\n// APG caveat: NVDA + JAWS do not announce alerts that are present in the DOM\n// at page-load. A `<hx-banner open>` rendered server-side will not be\n// announced on first paint. Consumers needing first-paint announcement\n// should mount with `open=false` and flip to `open=true` after window load,\n// or use a sticky `hx-alert` instead.\n\n/\n A full-width page-level banner for persistent notifications and announcements.\n * Designed for healthcare applications requiring prominent system-level messaging.\n \n @summary Full-width page-level banner for persistent notifications with variant-based styling and ARIA live regions.\n \n @tag hx-banner\n \n @slot - Default slot for banner message content.\n * @slot action - Optional slot to override the built-in action link with custom content.\n \n @fires {CustomEvent<{reason: string}>} hx-dismiss - Dispatched when the user dismisses the banner.\n \n @csspart banner - The outer banner container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart action - The action link element (only rendered when action-label and action-href are set).\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n \n @cssprop [--hx-banner-bg=var(--hx-color-info-50)] - Banner background color.\n * @cssprop [--hx-banner-color=var(--hx-color-info-800)] - Banner text color.\n * @cssprop [--hx-banner-border-color=var(--hx-color-info-200)] - Banner bottom border color.\n * @cssprop [--hx-banner-border-width=var(--hx-border-width-thin)] - Banner bottom border width.\n * @cssprop [--hx-banner-padding=var(--hx-space-3) var(--hx-space-4)] - Banner padding.\n * @cssprop [--hx-banner-gap=var(--hx-space-3)] - Gap between banner elements.\n * @cssprop [--hx-banner-icon-color=var(--hx-color-info-500)] - Banner icon color.\n * @cssprop [--hx-banner-font-family=var(--hx-font-family-sans)] - Banner font family.\n * @cssprop [--hx-banner-action-color=var(--hx-banner-color)] - Action link color.\n * @cssprop [--hx-banner-position=sticky] - CSS position value (sticky or fixed).\n * @cssprop [--hx-banner-z-index=100] - Banner z-index for stacking context.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-color-info-50] - Color.\n * @cssprop [--hx-color-info-800] - Color.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-info-200] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-info-500] - Color.\n * @cssprop [--hx-space-5] - Spacing token.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-opacity-90] - Opacity.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-color-success-50] - Color.\n * @cssprop [--hx-color-success-200] - Color.\n * @cssprop [--hx-color-success-800] - Color.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-warning-50] - Color.\n * @cssprop [--hx-color-warning-200] - Color.\n * @cssprop [--hx-color-warning-800] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n * @cssprop [--hx-color-error-200] - Color.\n * @cssprop [--hx-color-error-800] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n /\n@customElement('hx-banner')\nexport class HelixBanner extends HelixElement {\n static override styles = [helixBannerStyles, forcedColorsSurface];\n\n // ─── Properties ───\n\n /\n Visual variant of the banner that determines colors and ARIA semantics.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'info' \| 'success' \| 'warning' \| 'error' = 'info';\n\n /\n CSS positioning behavior. \"sticky\" keeps the banner in flow; \"fixed\" pins it to the viewport.\n * @attr position\n /\n @property({ type: String, reflect: true })\n position: 'sticky' \| 'fixed' = 'sticky';\n\n /\n Whether the banner can be dismissed by the user.\n * @attr dismissible\n /\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /\n Heading text for the banner, used to provide context in the action link's and\n * close button's accessible labels.\n * @attr heading\n /\n @property({ type: String })\n heading = '';\n\n /\n Label text for the optional action link. Requires action-href to render.\n * @attr action-label\n /\n @property({ type: String, attribute: 'action-label' })\n actionLabel = '';\n\n /\n URL for the optional action link. Requires action-label to render.\n * @attr action-href\n /\n @property({ type: String, attribute: 'action-href' })\n actionHref = '';\n\n /\n Whether the banner is visible. Defaults to true — banners are shown by default.\n * @attr open\n /\n @property({ type: Boolean, reflect: true })\n open = true;\n\n /* Accessible label for the dismiss button. Override for localized text. /\n @property({ type: String, attribute: 'label-close' })\n labelClose = 'Dismiss banner';\n\n /\n Override for the severity prefix announced to screen readers (e.g., \"Info:\", \"Error:\").\n * When not set, defaults to the English label matching the current variant.\n * @attr severity-label\n /\n @property({ attribute: 'severity-label' })\n severityLabel: string \| undefined;\n\n // ─── Private Helpers ───\n\n /* Returns the default English severity label for the current variant. /\n private _defaultSeverityLabel(): string {\n const labels: Record<string, string> = {\n info: 'Info:',\n success: 'Success:',\n warning: 'Warning:',\n error: 'Error:',\n };\n return labels[this.variant] ?? '';\n }\n\n /* Returns the effective severity label, using the override if provided. /\n private get _effectiveSeverityLabel(): string {\n return this.severityLabel ?? this._defaultSeverityLabel();\n }\n\n /\n Returns true when the variant requires assertive announcement.\n \n (group-6) Harmonized with `hx-alert` and `hx-toast`: only `error` is\n * assertive. Previous behavior also escalated `warning` to assertive on\n * `hx-banner`, which diverged from the rest of the live-region surface.\n * Warnings are non-urgent and use a polite live region (role=\"status\").\n * Critical/error messages remain assertive (role=\"alert\").\n /\n /* @internal /\n private get _isAssertive(): boolean {\n return this.variant === 'error';\n }\n\n /\n Returns the appropriate ARIA role based on variant.\n * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n /\n /* @internal /\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Apply ARIA role to the host element for reliable screen reader support across\n // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n //\n // (group-6) Dual-write: `internals.role` is the modern IDL-based source of\n // truth; the `role` attribute is retained as a legacy fallback for older AT\n // that don't yet honour ElementInternals ARIA reflection. Per ARIA spec,\n // role implies aria-live (`alert`→assertive, `status`→polite); we therefore\n // do NOT set an explicit `aria-live` attribute (avoids §5.1 double-announce).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n if (!this.open) {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n // Keep host ARIA role in sync with variant (assertive vs. polite).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n }\n if (changedProperties.has('open')) {\n // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n // When open transitions from false→true, removing aria-hidden signals to AT\n // that the live region content should be announced.\n if (this.open) {\n this.removeAttribute('aria-hidden');\n } else {\n this.setAttribute('aria-hidden', 'true');\n }\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 _renderSuccessIcon() {\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-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\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 _renderErrorIcon() {\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 _renderDefaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'error':\n return this._renderErrorIcon();\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 // ─── Public Methods ───\n\n /\n Programmatically dismisses the banner. Sets open=false and dispatches hx-dismiss.\n /\n dismiss(): void {\n this._handleDismiss();\n }\n\n // ─── Event Handling ───\n\n /* @internal /\n private _handleDismiss(): void {\n this.open = false;\n\n /\n Dispatched when the user (or caller) dismisses the banner.\n * @event hx-dismiss\n */\n this.dispatchEvent(\n new CustomEvent<{ reason: string }>('hx-dismiss', {\n bubbles: true,\n composed: true,\n detail: { reason: 'user' },\n }),\n );\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n banner: true,\n [`banner--${this.variant}`]: true,\n };\n\n const hasAction = this.actionLabel.length > 0 && this.actionHref.length > 0;\n\n // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n // is never conveyed by color alone.\n const severityLabel = this._effectiveSeverityLabel;\n\n return html`\n <div part=\"banner\" class=${classMap(classes)}>\n <span class=\"banner__severity-label\">${severityLabel}</span>\n <div part=\"icon\" class=\"banner__icon\">${this._renderDefaultIcon()}</div>\n\n <div part=\"message\" class=\"banner__message\">\n <slot></slot>\n </div>\n\n ${hasAction\n ? html`\n <a\n part=\"action\"\n class=\"banner__action\"\n href=${ifDefined(this.actionHref \|\| undefined)}\n aria-label=${this.heading\n ? `${this.actionLabel}: ${this.heading}`\n : this.actionLabel}\n >\n <slot name=\"action\">${this.actionLabel}</slot>\n </a>\n `\n : nothing}\n ${this.dismissible\n ? html`\n <button\n part=\"close-button\"\n class=\"banner__close-button\"\n aria-label=${this.labelClose}\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-banner': HelixBanner;\n }\n}\n\nexport type { HelixBanner as HxBanner };\n"],"names":["helixBannerStyles","css","HelixBanner","HelixElement","changedProperties","html","classes","hasAction","severityLabel","classMap","ifDefined","nothing","forcedColorsSurface","__decorateClass","property","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"hx-banner-fpRnciIO.js","sources":["../../src/components/hx-banner/hx-banner.styles.ts","../../src/components/hx-banner/hx-banner.ts"],"sourcesContent":["import { css } from 'lit';\n\n/*\n hx-banner styles.\n \n Component-tier tokens with two-level var() fallback:\n * var(--hx-banner-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n * info-50 = #EFF6FE, info-200 = #BEDCFC, info-500 = #0C8BEB, info-800 = #064172,\n * success-50 = #EAFAEC, success-200 = #BAE6C2, success-500 = #3B9E58, success-800 = #0B4D23,\n * warning-50 = #FFF3EA, warning-200 = #FACFAE, warning-500 = #C2711C, warning-800 = #603301,\n * error-50 = #FFF2F0, error-200 = #FCCBC4, error-500 = #E5493E, error-800 = #7A090A,\n * primary-400 = #6AB1B1.\n /\nexport const helixBannerStyles = css`\n :host {\n display: block;\n width: 100%;\n position: var(--hx-banner-position, sticky);\n top: 0;\n left: 0;\n right: 0;\n z-index: var(--hx-banner-z-index, 100);\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n {\n box-sizing: border-box;\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── /\n / Visually hidden — ensures variant is never conveyed by color alone. /\n / Always rendered so screen readers can identify the banner severity. /\n\n .banner__severity-label {\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 / ─── Banner Container ─── /\n\n .banner {\n display: flex;\n align-items: center;\n gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n background-color: var(--hx-banner-bg, var(--hx-color-info-50, #eff6fe));\n color: var(--hx-banner-color, var(--hx-color-info-800, #064172));\n border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-banner-border-color, var(--hx-color-info-200, #bedcfc));\n font-family: var(--hx-banner-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 width: 100%;\n }\n\n / ─── Icon ─── /\n\n .banner__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));\n }\n\n .banner__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n / ─── Message ─── /\n\n .banner__message {\n flex: 1;\n min-width: 0;\n }\n\n / ─── Action Link ─── /\n\n .banner__action {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #064172)));\n font-weight: var(--hx-font-weight-semibold, 600);\n text-decoration: underline;\n text-underline-offset: 2px;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n font-size: inherit;\n font-family: inherit;\n }\n\n .banner__action:hover {\n opacity: var(--hx-opacity-90, 0.9);\n }\n\n .banner__action:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-banner-action-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n / ─── Close Button ─── /\n / Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and /\n / Apple HIG / Google Material guidelines. Uses absolute px units to ensure /\n / the target size is independent of the consumer's base font size. /\n\n .banner__close-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 margin-inline-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-banner-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: var(--hx-opacity-75, 0.75);\n }\n\n .banner__close-button:hover {\n opacity: var(--hx-opacity-100, 1);\n / color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. /\n / Falls back to transparent (no hover background) in older environments. /\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .banner__close-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-banner-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .banner__close-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n / ─── Variant: info ─── /\n\n :host([variant='info']) .banner,\n :host(:not([variant])) .banner {\n --hx-banner-bg: var(--hx-color-info-50, #eff6fe);\n --hx-banner-border-color: var(--hx-color-info-200, #bedcfc);\n --hx-banner-color: var(--hx-color-info-800, #064172);\n --hx-banner-icon-color: var(--hx-color-info-500, #0c8beb);\n }\n\n / ─── Variant: success ─── /\n\n :host([variant='success']) .banner {\n --hx-banner-bg: var(--hx-color-success-50, #eafaec);\n --hx-banner-border-color: var(--hx-color-success-200, #bae6c2);\n --hx-banner-color: var(--hx-color-success-800, #0b4d23);\n --hx-banner-icon-color: var(--hx-color-success-500, #3b9e58);\n }\n\n / ─── Variant: warning ─── /\n\n :host([variant='warning']) .banner {\n --hx-banner-bg: var(--hx-color-warning-50, #fff3ea);\n --hx-banner-border-color: var(--hx-color-warning-200, #facfae);\n --hx-banner-color: var(--hx-color-warning-800, #603301);\n --hx-banner-icon-color: var(--hx-color-warning-500, #c2711c);\n }\n\n / ─── Variant: error ─── /\n\n :host([variant='error']) .banner {\n --hx-banner-bg: var(--hx-color-error-50, #fff2f0);\n --hx-banner-border-color: var(--hx-color-error-200, #fccbc4);\n --hx-banner-color: var(--hx-color-error-800, #7a090a);\n --hx-banner-icon-color: var(--hx-color-error-500, #e5493e);\n }\n\n / ─── Position: fixed ─── /\n / When position=\"fixed\", override the host-level CSS custom property. /\n / The :host rule above sets position via var(--hx-banner-position). /\n / We use an attribute selector to override it cleanly without duplication. /\n\n :host([position='fixed']) {\n position: fixed;\n }\n\n / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .banner__close-button {\n transition: none;\n }\n }\n\n / ─── Forced Colors (Windows High Contrast) ─── /\n / Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. /\n\n @media (forced-colors: active) {\n .banner {\n border-bottom-color: CanvasText;\n }\n\n .banner__icon svg {\n fill: CanvasText;\n }\n\n .banner__close-button {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixBannerStyles } from './hx-banner.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/* Banner variant determines visual styling and ARIA semantics. /\nexport type BannerVariant = 'info' \| 'success' \| 'warning' \| 'error';\n\n/* Banner position determines CSS positioning behavior. /\nexport type BannerPosition = 'sticky' \| 'fixed';\n\n// ─── ARIA naming disambiguation (group-6) ───\n//\n// IMPORTANT: the component name `hx-banner` refers to the visual UX pattern\n// (full-width page-level notification surface). It is NOT a semantic mapping\n// to the HTML5 LANDMARK role `role=\"banner\"` (which marks the page-level\n// header/masthead).\n//\n// The ARIA role this component sets on its host is `alert` or `status`,\n// derived from `variant`. A regression test in `hx-banner.test.ts` asserts\n// that `role=\"banner\"` (the LANDMARK role) is NEVER applied. Do NOT \"fix\"\n// this by adding the LANDMARK role.\n//\n// APG caveat: NVDA + JAWS do not announce alerts that are present in the DOM\n// at page-load. A `<hx-banner open>` rendered server-side will not be\n// announced on first paint. Consumers needing first-paint announcement\n// should mount with `open=false` and flip to `open=true` after window load,\n// or use a sticky `hx-alert` instead.\n\n/\n A full-width page-level banner for persistent notifications and announcements.\n * Designed for healthcare applications requiring prominent system-level messaging.\n \n @summary Full-width page-level banner for persistent notifications with variant-based styling and ARIA live regions.\n \n @tag hx-banner\n \n @slot - Default slot for banner message content.\n * @slot action - Optional slot to override the built-in action link with custom content.\n \n @fires {CustomEvent<{reason: string}>} hx-dismiss - Dispatched when the user dismisses the banner.\n \n @csspart banner - The outer banner container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart action - The action link element (only rendered when action-label and action-href are set).\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n \n @cssprop [--hx-banner-bg=var(--hx-color-info-50)] - Banner background color.\n * @cssprop [--hx-banner-color=var(--hx-color-info-800)] - Banner text color.\n * @cssprop [--hx-banner-border-color=var(--hx-color-info-200)] - Banner bottom border color.\n * @cssprop [--hx-banner-border-width=var(--hx-border-width-thin)] - Banner bottom border width.\n * @cssprop [--hx-banner-padding=var(--hx-space-3) var(--hx-space-4)] - Banner padding.\n * @cssprop [--hx-banner-gap=var(--hx-space-3)] - Gap between banner elements.\n * @cssprop [--hx-banner-icon-color=var(--hx-color-info-500)] - Banner icon color.\n * @cssprop [--hx-banner-font-family=var(--hx-font-family-sans)] - Banner font family.\n * @cssprop [--hx-banner-action-color=var(--hx-banner-color)] - Action link color.\n * @cssprop [--hx-banner-position=sticky] - CSS position value (sticky or fixed).\n * @cssprop [--hx-banner-z-index=100] - Banner z-index for stacking context.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-color-info-50] - Color.\n * @cssprop [--hx-color-info-800] - Color.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-info-200] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-info-500] - Color.\n * @cssprop [--hx-space-5] - Spacing token.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-opacity-90] - Opacity.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-color-success-50] - Color.\n * @cssprop [--hx-color-success-200] - Color.\n * @cssprop [--hx-color-success-800] - Color.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-warning-50] - Color.\n * @cssprop [--hx-color-warning-200] - Color.\n * @cssprop [--hx-color-warning-800] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n * @cssprop [--hx-color-error-200] - Color.\n * @cssprop [--hx-color-error-800] - Color.\n * @cssprop [--hx-color-error-500] - Color.\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-banner/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-banner\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n /\n@customElement('hx-banner')\nexport class HelixBanner extends HelixElement {\n static override styles = [helixBannerStyles, forcedColorsSurface];\n\n // ─── Properties ───\n\n /\n Visual variant of the banner that determines colors and ARIA semantics.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'info' \| 'success' \| 'warning' \| 'error' = 'info';\n\n /\n CSS positioning behavior. \"sticky\" keeps the banner in flow; \"fixed\" pins it to the viewport.\n * @attr position\n /\n @property({ type: String, reflect: true })\n position: 'sticky' \| 'fixed' = 'sticky';\n\n /\n Whether the banner can be dismissed by the user.\n * @attr dismissible\n /\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /\n Heading text for the banner, used to provide context in the action link's and\n * close button's accessible labels.\n * @attr heading\n /\n @property({ type: String })\n heading = '';\n\n /\n Label text for the optional action link. Requires action-href to render.\n * @attr action-label\n /\n @property({ type: String, attribute: 'action-label' })\n actionLabel = '';\n\n /\n URL for the optional action link. Requires action-label to render.\n * @attr action-href\n /\n @property({ type: String, attribute: 'action-href' })\n actionHref = '';\n\n /\n Whether the banner is visible. Defaults to true — banners are shown by default.\n * @attr open\n /\n @property({ type: Boolean, reflect: true })\n open = true;\n\n /* Accessible label for the dismiss button. Override for localized text. /\n @property({ type: String, attribute: 'label-close' })\n labelClose = 'Dismiss banner';\n\n /\n Override for the severity prefix announced to screen readers (e.g., \"Info:\", \"Error:\").\n * When not set, defaults to the English label matching the current variant.\n * @attr severity-label\n /\n @property({ attribute: 'severity-label' })\n severityLabel: string \| undefined;\n\n // ─── Private Helpers ───\n\n /* Returns the default English severity label for the current variant. /\n private _defaultSeverityLabel(): string {\n const labels: Record<string, string> = {\n info: 'Info:',\n success: 'Success:',\n warning: 'Warning:',\n error: 'Error:',\n };\n return labels[this.variant] ?? '';\n }\n\n /* Returns the effective severity label, using the override if provided. /\n private get _effectiveSeverityLabel(): string {\n return this.severityLabel ?? this._defaultSeverityLabel();\n }\n\n /\n Returns true when the variant requires assertive announcement.\n \n (group-6) Harmonized with `hx-alert` and `hx-toast`: only `error` is\n * assertive. Previous behavior also escalated `warning` to assertive on\n * `hx-banner`, which diverged from the rest of the live-region surface.\n * Warnings are non-urgent and use a polite live region (role=\"status\").\n * Critical/error messages remain assertive (role=\"alert\").\n /\n /* @internal /\n private get _isAssertive(): boolean {\n return this.variant === 'error';\n }\n\n /\n Returns the appropriate ARIA role based on variant.\n * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n /\n /* @internal /\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Apply ARIA role to the host element for reliable screen reader support across\n // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n //\n // (group-6) Dual-write: `internals.role` is the modern IDL-based source of\n // truth; the `role` attribute is retained as a legacy fallback for older AT\n // that don't yet honour ElementInternals ARIA reflection. Per ARIA spec,\n // role implies aria-live (`alert`→assertive, `status`→polite); we therefore\n // do NOT set an explicit `aria-live` attribute (avoids §5.1 double-announce).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n if (!this.open) {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n // Keep host ARIA role in sync with variant (assertive vs. polite).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n }\n if (changedProperties.has('open')) {\n // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n // When open transitions from false→true, removing aria-hidden signals to AT\n // that the live region content should be announced.\n if (this.open) {\n this.removeAttribute('aria-hidden');\n } else {\n this.setAttribute('aria-hidden', 'true');\n }\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 _renderSuccessIcon() {\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-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\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 _renderErrorIcon() {\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 _renderDefaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'error':\n return this._renderErrorIcon();\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 // ─── Public Methods ───\n\n /\n Programmatically dismisses the banner. Sets open=false and dispatches hx-dismiss.\n /\n dismiss(): void {\n this._handleDismiss();\n }\n\n // ─── Event Handling ───\n\n /* @internal /\n private _handleDismiss(): void {\n this.open = false;\n\n /\n Dispatched when the user (or caller) dismisses the banner.\n * @event hx-dismiss\n */\n this.dispatchEvent(\n new CustomEvent<{ reason: string }>('hx-dismiss', {\n bubbles: true,\n composed: true,\n detail: { reason: 'user' },\n }),\n );\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n banner: true,\n [`banner--${this.variant}`]: true,\n };\n\n const hasAction = this.actionLabel.length > 0 && this.actionHref.length > 0;\n\n // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n // is never conveyed by color alone.\n const severityLabel = this._effectiveSeverityLabel;\n\n return html`\n <div part=\"banner\" class=${classMap(classes)}>\n <span class=\"banner__severity-label\">${severityLabel}</span>\n <div part=\"icon\" class=\"banner__icon\">${this._renderDefaultIcon()}</div>\n\n <div part=\"message\" class=\"banner__message\">\n <slot></slot>\n </div>\n\n ${hasAction\n ? html`\n <a\n part=\"action\"\n class=\"banner__action\"\n href=${ifDefined(this.actionHref \|\| undefined)}\n aria-label=${this.heading\n ? `${this.actionLabel}: ${this.heading}`\n : this.actionLabel}\n >\n <slot name=\"action\">${this.actionLabel}</slot>\n </a>\n `\n : nothing}\n ${this.dismissible\n ? html`\n <button\n part=\"close-button\"\n class=\"banner__close-button\"\n aria-label=${this.labelClose}\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-banner': HelixBanner;\n }\n}\n\nexport type { HelixBanner as HxBanner };\n"],"names":["helixBannerStyles","css","HelixBanner","HelixElement","changedProperties","html","classes","hasAction","severityLabel","classMap","ifDefined","nothing","forcedColorsSurface","__decorateClass","property","customElement"],"mappings":"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"}