@helixui/library 3.8.0 → 3.9.0

package/dist/shared/hx-alert-C0axS32J.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-alert-C0axS32J.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 .alert__glyph {\n    --hx-icon-size: var(--hx-space-5, 1.25rem);\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 .alert__glyph {\n    --hx-icon-size: var(--hx-space-4, 1rem);\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 '../hx-icon/hx-icon.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 _renderDefaultIcon() {\n    const name = this.variant === 'info' ? 'info' : this.variant;\n    return html`<hx-icon\n      class=\"alert__glyph\"\n      library=\"helix\"\n      name=${name}\n      aria-hidden=\"true\"\n    ></hx-icon>`;\n  }\n\n  /** @internal */\n  private _renderCloseIcon() {\n    return html`<hx-icon\n      class=\"alert__glyph\"\n      library=\"helix\"\n      name=\"close\"\n      aria-hidden=\"true\"\n    ></hx-icon>`;\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","name","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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"}

package/dist/shared/{hx-avatar-C9hOmlAb.js → hx-avatar-ChAYWnK8.js}

@@ -1,5 +1,5 @@
-import { css as _, html as v, nothing as d } from "lit";
-import { property as l, state as c, customElement as y } from "lit/decorators.js";
+import { css as _, html as c, nothing as d } from "lit";
+import { property as l, state as v, customElement as y } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { a as z } from "./forced-colors-CTEDFRGa.js";
 import { d as f } from "./dev-warn-YlwPHjtX.js";
@@ -94,8 +94,7 @@ const w = _`
   /* ─── Fallback Icon ─── */
 
   .avatar__fallback-icon {
-    width: 60%;
-    height: 60%;
+    --hx-icon-size: 60%;
     color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
   }
 
@@ -188,42 +187,41 @@ let i = class extends S {
     this._imgError = !0;
   }
   // ─── Fallback Icon ───
-  /** @internal */
+  /** @internal The "user silhouette" fallback isn't part of the helix curated 32-glyph
+   * vocabulary, so it falls back to the FA Free Solid `user` glyph. The
+   * `part="fallback-icon"` is preserved so external `::part(fallback-icon)`
+   * styling continues to target the same surface. */
   _renderFallbackIcon() {
-    return v`
-      <svg
+    return c`
+      <hx-icon
         part="fallback-icon"
         class="avatar__fallback-icon"
-        viewBox="0 0 24 24"
+        library="fa-free"
+        name="user"
         aria-hidden="true"
-        fill="currentColor"
-      >
-        <path
-          d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"
-        />
-      </svg>
+      ></hx-icon>
     `;
   }
   // ─── Render ───
   render() {
-    const t = this.src, r = this._hasDefaultSlot, e = !r && !!t && !this._imgError, a = !r && !e && !!this.initials.trim(), s = !r && !e && !a, n = e ? this.alt || this.label || "Avatar" : a ? this.label || this.initials : this.label || "Avatar", h = ["xs", "sm", "md", "lg", "xl"], m = ["circle", "square"], g = h.includes(this.size) ? this.size : "md", u = m.includes(this.shape) ? this.shape : "circle", x = {
+    const t = this.src, r = this._hasDefaultSlot, e = !r && !!t && !this._imgError, a = !r && !e && !!this.initials.trim(), s = !r && !e && !a, n = e ? this.alt || this.label || "Avatar" : a ? this.label || this.initials : this.label || "Avatar", h = ["xs", "sm", "md", "lg", "xl"], m = ["circle", "square"], g = h.includes(this.size) ? this.size : "md", x = m.includes(this.shape) ? this.shape : "circle", u = {
       avatar: !0,
       [`avatar--${g}`]: !0,
-      [`avatar--${u}`]: !0
+      [`avatar--${x}`]: !0
     }, b = {
       avatar__badge: !0,
       "avatar__badge--hidden": !this._hasBadgeSlot
     };
-    return v`
+    return c`
       <div class="avatar-wrapper">
         <div
           part="avatar"
-          class=${p(x)}
+          class=${p(u)}
           role=${r ? d : "img"}
           aria-label=${r ? d : n}
         >
           <slot @slotchange=${this._handleSlotChange}></slot>
-          ${e && t ? v`<img
+          ${e && t ? c`<img
                 part="image"
                 class="avatar__image"
                 src=${t}
@@ -232,7 +230,7 @@ let i = class extends S {
                 loading="lazy"
                 @error=${this._handleImgError}
               />` : d}
-          ${a ? v`<span part="initials" class="avatar__initials">${this.initials.trim()}</span>` : d}
+          ${a ? c`<span part="initials" class="avatar__initials">${this.initials.trim()}</span>` : d}
           ${s ? this._renderFallbackIcon() : d}
         </div>
         <span part="badge" class=${p(b)}>
@@ -262,13 +260,13 @@ o([
   l({ type: String, reflect: !0 })
 ], i.prototype, "shape", 2);
 o([
-  c()
+  v()
 ], i.prototype, "_imgError", 2);
 o([
-  c()
+  v()
 ], i.prototype, "_hasDefaultSlot", 2);
 o([
-  c()
+  v()
 ], i.prototype, "_hasBadgeSlot", 2);
 i = o([
   y("hx-avatar")
@@ -276,4 +274,4 @@ i = o([
 export {
   i as H
 };
-//# sourceMappingURL=hx-avatar-C9hOmlAb.js.map
+//# sourceMappingURL=hx-avatar-ChAYWnK8.js.map

package/dist/shared/hx-avatar-ChAYWnK8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-avatar-ChAYWnK8.js","sources":["../../src/components/hx-avatar/hx-avatar.styles.ts","../../src/components/hx-avatar/hx-avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAvatarStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */\n  .avatar-wrapper {\n    position: relative;\n    display: inline-flex;\n  }\n\n  .avatar {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    width: var(--hx-avatar-size);\n    height: var(--hx-avatar-size);\n    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100, #dbf0f0));\n    color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));\n    border-radius: var(--hx-avatar-border-radius);\n    flex-shrink: 0;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .avatar--xs {\n    --hx-avatar-size: var(--hx-size-6, 1.5rem);\n    --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);\n  }\n\n  .avatar--sm {\n    --hx-avatar-size: var(--hx-size-8, 2rem);\n    --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  .avatar--md {\n    --hx-avatar-size: var(--hx-size-10, 2.5rem);\n    --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .avatar--lg {\n    --hx-avatar-size: var(--hx-size-12, 3rem);\n    --hx-avatar-font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  .avatar--xl {\n    --hx-avatar-size: var(--hx-size-16, 4rem);\n    --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);\n  }\n\n  /* ─── Shape Variants ─── */\n\n  .avatar--circle {\n    --hx-avatar-border-radius: 50%;\n  }\n\n  .avatar--square {\n    --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Image ─── */\n\n  .avatar__image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  /* ─── Initials ─── */\n\n  .avatar__initials {\n    font-family: var(--hx-avatar-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-avatar-font-size);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    line-height: 1;\n    text-transform: uppercase;\n    letter-spacing: var(--hx-letter-spacing-wide, 0.025em);\n    user-select: none;\n  }\n\n  /* ─── Fallback Icon ─── */\n\n  .avatar__fallback-icon {\n    --hx-icon-size: 60%;\n    color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));\n  }\n\n  /* ─── Badge Slot ─── */\n\n  /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */\n  .avatar__badge {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n  }\n\n  /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */\n  .avatar__badge--hidden {\n    display: none;\n  }\n\n  /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,\n     leaving no visual boundary. Restore a visible border, explicit foreground, and\n     background so the avatar container, initials, and fallback icon all remain\n     perceivable at any contrast level.\n     WCAG 1.4.11 Non-text Contrast (Level AA). */\n  @media (forced-colors: active) {\n    .avatar {\n      forced-color-adjust: none;\n      border: 2px solid ButtonText;\n      background-color: Canvas;\n      color: CanvasText;\n    }\n\n    .avatar__initials {\n      color: CanvasText;\n    }\n\n    .avatar__fallback-icon {\n      color: CanvasText;\n    }\n\n    .avatar__image {\n      forced-color-adjust: auto;\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 '../hx-icon/hx-icon.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixAvatarStyles } from './hx-avatar.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A user avatar component that displays an image, initials, or a fallback icon.\n * Supports a badge slot for status indicator overlays.\n *\n * @summary User avatar with image, initials, and fallback icon support for healthcare applications.\n *\n * @tag hx-avatar\n *\n * @slot - Default slot for custom avatar content. Overrides src and initials when slotted content is present.\n * @slot badge - Status indicator overlay, positioned at the bottom-right of the avatar container.\n *\n * @csspart avatar - The outer container element.\n * @csspart image - The img element shown when src is provided.\n * @csspart initials - The initials text span shown as a fallback.\n * @csspart fallback-icon - The SVG person silhouette shown when no src or initials are available.\n * @csspart badge - The badge slot container.\n *\n * @cssprop [--hx-avatar-size] - Computed width and height from the size variant.\n * @cssprop [--hx-avatar-border-radius] - Circle = 50%, Square = var(--hx-border-radius-md).\n * @cssprop [--hx-avatar-bg=var(--hx-color-primary-100)] - Background color of the avatar container.\n * @cssprop [--hx-avatar-color=var(--hx-color-primary-700)] - Text and icon color inside the avatar.\n * @cssprop [--hx-avatar-font-size] - Font size for the initials text, set per size variant.\n * @cssprop [--hx-color-primary-100] - Color.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-size-6] - Size token.\n * @cssprop [--hx-font-size-2xs] - Font size.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-size-16] - Size token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-avatar-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-letter-spacing-wide] - CSS custom property.\n */\n@customElement('hx-avatar')\nexport class HelixAvatar extends HelixElement {\n  static override styles = [helixAvatarStyles, forcedColorsSurface];\n\n  /**\n   * Image URL. When provided and successfully loaded, displays the image.\n   * @attr src\n   */\n  @property({ type: String })\n  src: string | undefined = undefined;\n\n  /**\n   * Accessible label for the image. Required when `src` is provided.\n   * Used as the container's aria-label in image mode.\n   * @attr alt\n   */\n  @property({ type: String })\n  alt = '';\n\n  /**\n   * Human-readable accessible name for non-image states (initials, fallback icon).\n   * In healthcare contexts, provide the full person name (e.g., \"Dr. Jane Doe\") rather than\n   * relying on raw initials, which screen readers announce as individual letters.\n   * When set, takes precedence over raw initials and the generic \"Avatar\" fallback.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Fallback initials text displayed when no image is available.\n   * @attr initials\n   */\n  @property({ type: String })\n  initials = '';\n\n  /**\n   * Size variant of the avatar.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /**\n   * Shape variant of the avatar.\n   * @attr shape\n   */\n  @property({ type: String, reflect: true })\n  shape: 'circle' | 'square' = 'circle';\n\n  /**\n   * Tracks whether the image failed to load, triggering the fallback chain.\n   * @internal\n   */\n  @state()\n  private _imgError = false;\n\n  /**\n   * Tracks whether the default slot has assigned content.\n   * @internal\n   */\n  @state()\n  private _hasDefaultSlot = false;\n\n  /**\n   * Tracks whether the badge slot has assigned content.\n   * @internal\n   */\n  @state()\n  private _hasBadgeSlot = false;\n\n  // ─── Lifecycle ───\n\n  // P1-A / P2-B: Use willUpdate() instead of updated() for property validation\n  // and derived state. willUpdate() runs before render() and does not schedule\n  // a second update cycle when @state() properties are mutated.\n  override willUpdate(changedProperties: PropertyValues<this>): void {\n    // P0-1: Reset image error state when src changes so a new valid src renders correctly.\n    if (changedProperties.has('src')) {\n      this._imgError = false;\n    }\n\n    // P1-2: Warn when src is provided without alt — silent accessibility failure in healthcare UIs.\n    if (changedProperties.has('src') || changedProperties.has('alt')) {\n      if (this.src && !this.alt) {\n        devWarn(\n          'hx-avatar',\n          'Accessibility: \"alt\" attribute is required when \"src\" is provided. ' +\n            'Without alt text, screen readers announce a non-descriptive label. ' +\n            'Add alt=\"Full name or description\" to your hx-avatar element.',\n        );\n      }\n    }\n\n    // P2-A: Warn when initials are used without label — screen readers announce\n    // raw initials as individual letters (e.g., \"J D\") instead of a name.\n    if (changedProperties.has('initials') || changedProperties.has('label')) {\n      if (this.initials && !this.label) {\n        devWarn(\n          'hx-avatar',\n          'Accessibility: \"label\" attribute is recommended when \"initials\" is provided. ' +\n            'Without label, screen readers announce raw initials as individual letters. ' +\n            'Add label=\"Full Name\" to your hx-avatar element.',\n        );\n      }\n    }\n\n    // P2-1: Warn when invalid size or shape attribute values are used (e.g., from Twig templates).\n    const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n    if (changedProperties.has('size') && !validSizes.includes(this.size)) {\n      devWarn(\n        'hx-avatar',\n        `Invalid hx-size=\"${String(this.size)}\". Valid values: xs, sm, md, lg, xl. Rendering with \"md\".`,\n      );\n    }\n    const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n    if (changedProperties.has('shape') && !validShapes.includes(this.shape)) {\n      devWarn(\n        'hx-avatar',\n        `Invalid shape=\"${String(this.shape)}\". Valid values: circle, square. Rendering with \"circle\".`,\n      );\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    this._hasDefaultSlot = 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  /** @internal */\n  private _handleBadgeSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasBadgeSlot = 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    // P2-C: Warn when badge slot content lacks an accessible name.\n    // A plain <span class=\"dot\"></span> badge is invisible to screen readers.\n    if (this._hasBadgeSlot) {\n      const hasAccessibleName = nodes.some((node) => {\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          const el = node as Element;\n          return (\n            el.hasAttribute('aria-label') ||\n            el.hasAttribute('aria-labelledby') ||\n            !!el.getAttribute('role')\n          );\n        }\n        return false;\n      });\n      if (!hasAccessibleName) {\n        devWarn(\n          'hx-avatar',\n          'Accessibility: badge slot content should have an accessible name ' +\n            '(aria-label, role, etc.). Without it, the badge is invisible to screen readers.',\n        );\n      }\n    }\n  }\n\n  // ─── Image Error Handling ───\n\n  /** @internal */\n  private _handleImgError(): void {\n    this._imgError = true;\n  }\n\n  // ─── Fallback Icon ───\n\n  /** @internal The \"user silhouette\" fallback isn't part of the helix curated 32-glyph\n   * vocabulary, so it falls back to the FA Free Solid `user` glyph. The\n   * `part=\"fallback-icon\"` is preserved so external `::part(fallback-icon)`\n   * styling continues to target the same surface. */\n  private _renderFallbackIcon() {\n    return html`\n      <hx-icon\n        part=\"fallback-icon\"\n        class=\"avatar__fallback-icon\"\n        library=\"fa-free\"\n        name=\"user\"\n        aria-hidden=\"true\"\n      ></hx-icon>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const src = this.src;\n    const showSlot = this._hasDefaultSlot;\n    const showImage = !showSlot && !!src && !this._imgError;\n    const showInitials = !showSlot && !showImage && !!this.initials.trim();\n    const showFallback = !showSlot && !showImage && !showInitials;\n\n    // P1-1 / P1-7: Use label property for human-readable accessible name in non-image states.\n    const ariaLabel = showImage\n      ? this.alt || this.label || 'Avatar'\n      : showInitials\n        ? this.label || this.initials\n        : this.label || 'Avatar';\n\n    // P2-1: Safe class fallback for invalid attribute values supplied via HTML/Twig.\n    const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n    const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n    const sizeClass = validSizes.includes(this.size) ? this.size : 'md';\n    const shapeClass = validShapes.includes(this.shape) ? this.shape : 'circle';\n\n    const classes = {\n      avatar: true,\n      [`avatar--${sizeClass}`]: true,\n      [`avatar--${shapeClass}`]: true,\n    };\n\n    // P2-2: Badge wrapper is hidden (not removed) when empty so slotchange detection still works.\n    const badgeClasses = {\n      avatar__badge: true,\n      'avatar__badge--hidden': !this._hasBadgeSlot,\n    };\n\n    return html`\n      <div class=\"avatar-wrapper\">\n        <div\n          part=\"avatar\"\n          class=${classMap(classes)}\n          role=${showSlot ? nothing : 'img'}\n          aria-label=${showSlot ? nothing : ariaLabel}\n        >\n          <slot @slotchange=${this._handleSlotChange}></slot>\n          ${showImage && src\n            ? html`<img\n                part=\"image\"\n                class=\"avatar__image\"\n                src=${src}\n                alt=${this.alt}\n                aria-hidden=\"true\"\n                loading=\"lazy\"\n                @error=${this._handleImgError}\n              />`\n            : nothing}\n          ${showInitials\n            ? html`<span part=\"initials\" class=\"avatar__initials\">${this.initials.trim()}</span>`\n            : nothing}\n          ${showFallback ? this._renderFallbackIcon() : nothing}\n        </div>\n        <span part=\"badge\" class=${classMap(badgeClasses)}>\n          <slot name=\"badge\" @slotchange=${this._handleBadgeSlotChange}></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-avatar': HelixAvatar;\n  }\n}\n"],"names":["helixAvatarStyles","css","HelixAvatar","HelixElement","changedProperties","validSizes","devWarn","validShapes","e","nodes","node","el","html","src","showSlot","showImage","showInitials","showFallback","ariaLabel","sizeClass","shapeClass","classes","badgeClasses","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-badge-DFL35nzi.js → hx-badge-vX-1cuLA.js}

@@ -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 f = g`
+const m = g`
   :host {
     display: inline-block;
   }
@@ -244,11 +244,16 @@ const f = g`
       border-width: 2px;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated remove-button SVG. */
+  .badge__remove-glyph {
+    --hx-icon-size: 10px;
+  }
 `;
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (r, a, n, o) => {
+var f = 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;
+  return o && s && f(a, n, s), s;
 };
 let e = class extends v {
   constructor() {
@@ -314,18 +319,18 @@ let e = class extends v {
               aria-label=${this.removeLabel}
               @click=${this._handleRemove}
             >
-              <svg viewBox="0 0 12 12" aria-hidden="true" width="10" height="10">
-                <path
-                  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"
-                  fill="currentColor"
-                />
-              </svg>
+              <hx-icon
+                class="badge__remove-glyph"
+                library="helix"
+                name="close"
+                aria-hidden="true"
+              ></hx-icon>
             </button>` : l}
       </span>
     `;
   }
 };
-e.styles = [f, u];
+e.styles = [m, u];
 e._SEMANTIC_VARIANT_LABELS = {
   success: "Success",
   warning: "Warning",
@@ -368,4 +373,4 @@ e = t([
 export {
   e as H
 };
-//# sourceMappingURL=hx-badge-DFL35nzi.js.map
+//# sourceMappingURL=hx-badge-vX-1cuLA.js.map

package/dist/shared/hx-badge-vX-1cuLA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-badge-vX-1cuLA.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  /* hx-icon glyph sizing for the migrated remove-button SVG. */\n  .badge__remove-glyph {\n    --hx-icon-size: 10px;\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 '../hx-icon/hx-icon.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              <hx-icon\n                class=\"badge__remove-glyph\"\n                library=\"helix\"\n                name=\"close\"\n                aria-hidden=\"true\"\n              ></hx-icon>\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 → hx-banner-PbHwFNSb.js}

@@ -1,9 +1,9 @@
-import { css as d, html as t, nothing as b } from "lit";
-import { property as o, customElement as v } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { a as p } from "./forced-colors-CTEDFRGa.js";
-import { H as x } from "./helix-element-BNEYeiys.js";
+import { css as d, html as s, nothing as b } from "lit";
+import { property as o, customElement as f } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
+import { a as v } from "./forced-colors-CTEDFRGa.js";
+import { H as u } from "./helix-element-BNEYeiys.js";
 const g = d`
   :host {
     display: block;
@@ -65,10 +65,8 @@ const g = d`
     color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
-  .banner__icon svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .banner__icon .banner__glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
   }
 
   /* ─── Message ─── */
@@ -148,10 +146,8 @@ const g = d`
     opacity: 1;
   }
 
-  .banner__close-button svg {
-    width: var(--hx-space-4, 1rem);
-    height: var(--hx-space-4, 1rem);
-    fill: currentColor;
+  .banner__close-button .banner__glyph {
+    --hx-icon-size: var(--hx-space-4, 1rem);
   }
 
   /* ─── Variant: info ─── */
@@ -226,12 +222,12 @@ const g = d`
     }
   }
 `;
-var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (n, i, s, l) => {
-  for (var a = l > 1 ? void 0 : l ? _(i, s) : i, c = n.length - 1, h; c >= 0; c--)
-    (h = n[c]) && (a = (l ? h(i, s, a) : h(a)) || a);
-  return l && a && m(i, s, a), a;
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (r, i, a, l) => {
+  for (var t = l > 1 ? void 0 : l ? _(i, a) : i, c = r.length - 1, h; c >= 0; c--)
+    (h = r[c]) && (t = (l ? h(i, a, t) : h(t)) || t);
+  return l && t && m(i, a, t), t;
 };
-let e = class extends x {
+let e = class extends u {
   constructor() {
     super(...arguments), this.variant = "info", this.position = "sticky", this.dismissible = !1, this.heading = "", this.actionLabel = "", this.actionHref = "", this.open = !0, this.labelClose = "Dismiss banner";
   }
@@ -275,63 +271,28 @@ let e = class extends x {
   connectedCallback() {
     super.connectedCallback(), this._internals.role = this._role, this.setAttribute("role", this._role), this.open || this.setAttribute("aria-hidden", "true");
   }
-  updated(n) {
-    super.updated(n), n.has("variant") && (this._internals.role = this._role, this.setAttribute("role", this._role)), n.has("open") && (this.open ? this.removeAttribute("aria-hidden") : this.setAttribute("aria-hidden", "true"));
+  updated(r) {
+    super.updated(r), r.has("variant") && (this._internals.role = this._role, this.setAttribute("role", this._role)), r.has("open") && (this.open ? this.removeAttribute("aria-hidden") : this.setAttribute("aria-hidden", "true"));
   }
   // ─── Default Icons ───
   /** @internal */
-  _renderInfoIcon() {
-    return t`<svg viewBox="0 0 20 20" aria-hidden="true">
-      <path
-        d="M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z"
-      />
-    </svg>`;
-  }
-  /** @internal */
-  _renderSuccessIcon() {
-    return t`<svg viewBox="0 0 20 20" aria-hidden="true">
-      <path
-        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"
-      />
-    </svg>`;
-  }
-  /** @internal */
-  _renderWarningIcon() {
-    return t`<svg viewBox="0 0 20 20" aria-hidden="true">
-      <path
-        d="M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z"
-      />
-    </svg>`;
-  }
-  /** @internal */
-  _renderErrorIcon() {
-    return t`<svg viewBox="0 0 20 20" aria-hidden="true">
-      <path
-        d="M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z"
-      />
-    </svg>`;
-  }
-  /** @internal */
   _renderDefaultIcon() {
-    switch (this.variant) {
-      case "success":
-        return this._renderSuccessIcon();
-      case "warning":
-        return this._renderWarningIcon();
-      case "error":
-        return this._renderErrorIcon();
-      case "info":
-      default:
-        return this._renderInfoIcon();
-    }
+    const r = this.variant === "info" ? "info" : this.variant;
+    return s`<hx-icon
+      class="banner__glyph"
+      library="helix"
+      name=${r}
+      aria-hidden="true"
+    ></hx-icon>`;
   }
   /** @internal */
   _renderCloseIcon() {
-    return t`<svg viewBox="0 0 20 20" aria-hidden="true">
-      <path
-        d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-      />
-    </svg>`;
+    return s`<hx-icon
+      class="banner__glyph"
+      library="helix"
+      name="close"
+      aria-hidden="true"
+    ></hx-icon>`;
   }
   // ─── Public Methods ───
   /**
@@ -353,30 +314,30 @@ let e = class extends x {
   }
   // ─── Render ───
   render() {
-    const n = {
+    const r = {
       banner: !0,
       [`banner--${this.variant}`]: !0
-    }, i = this.actionLabel.length > 0 && this.actionHref.length > 0, s = this._effectiveSeverityLabel;
-    return t`
-      <div part="banner" class=${f(n)}>
-        <span class="banner__severity-label">${s}</span>
+    }, i = this.actionLabel.length > 0 && this.actionHref.length > 0, a = this._effectiveSeverityLabel;
+    return s`
+      <div part="banner" class=${p(r)}>
+        <span class="banner__severity-label">${a}</span>
         <div part="icon" class="banner__icon">${this._renderDefaultIcon()}</div>
 
         <div part="message" class="banner__message">
           <slot></slot>
         </div>
 
-        ${i ? t`
+        ${i ? s`
               <a
                 part="action"
                 class="banner__action"
-                href=${u(this.actionHref || void 0)}
+                href=${x(this.actionHref || void 0)}
                 aria-label=${this.heading ? `${this.actionLabel}: ${this.heading}` : this.actionLabel}
               >
                 <slot name="action">${this.actionLabel}</slot>
               </a>
             ` : b}
-        ${this.dismissible ? t`
+        ${this.dismissible ? s`
               <button
                 part="close-button"
                 class="banner__close-button"
@@ -390,38 +351,38 @@ let e = class extends x {
     `;
   }
 };
-e.styles = [g, p];
-r([
+e.styles = [g, v];
+n([
   o({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
-r([
+n([
   o({ type: String, reflect: !0 })
 ], e.prototype, "position", 2);
-r([
+n([
   o({ type: Boolean, reflect: !0 })
 ], e.prototype, "dismissible", 2);
-r([
+n([
   o({ type: String })
 ], e.prototype, "heading", 2);
-r([
+n([
   o({ type: String, attribute: "action-label" })
 ], e.prototype, "actionLabel", 2);
-r([
+n([
   o({ type: String, attribute: "action-href" })
 ], e.prototype, "actionHref", 2);
-r([
+n([
   o({ type: Boolean, reflect: !0 })
 ], e.prototype, "open", 2);
-r([
+n([
   o({ type: String, attribute: "label-close" })
 ], e.prototype, "labelClose", 2);
-r([
+n([
   o({ attribute: "severity-label" })
 ], e.prototype, "severityLabel", 2);
-e = r([
-  v("hx-banner")
+e = n([
+  f("hx-banner")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-banner-fpRnciIO.js.map
+//# sourceMappingURL=hx-banner-PbHwFNSb.js.map