@helixui/library 0.3.3 → 1.0.0

package/dist/shared/{hx-avatar-yHjmNdtf.js → hx-avatar-Cep6Urm3.js}

@@ -1,8 +1,9 @@
-import { css as b, LitElement as _, html as c, nothing as d } from "lit";
-import { property as n, state as v, customElement as y } from "lit/decorators.js";
+import { css as _, LitElement as y, html as v, nothing as d } from "lit";
+import { property as l, state as c, customElement as z } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
-import { tokenStyles as z } from "@helixui/tokens/lit";
-const w = b`
+import { tokenStyles as S } from "@helixui/tokens/lit";
+import { d as m } from "./dev-warn-YlwPHjtX.js";
+const w = _`
   :host {
     display: inline-block;
   }
@@ -120,12 +121,12 @@ const w = b`
     }
   }
 `;
-var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (a, r, e, t) => {
-  for (var s = t > 1 ? void 0 : t ? E(r, e) : r, o = a.length - 1, h; o >= 0; o--)
-    (h = a[o]) && (s = (t ? h(r, e, s) : h(s)) || s);
-  return t && s && S(r, e, s), s;
+var E = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (t, r, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? $(r, e) : r, n = t.length - 1, h; n >= 0; n--)
+    (h = t[n]) && (s = (a ? h(r, e, s) : h(s)) || s);
+  return a && s && E(r, e, s), s;
 };
-let i = class extends _ {
+let i = class extends y {
   constructor() {
     super(...arguments), this.src = void 0, this.alt = "", this.label = "", this.initials = "", this.size = "md", this.shape = "circle", this._imgError = !1, this._hasDefaultSlot = !1, this._hasBadgeSlot = !1;
   }
@@ -133,37 +134,33 @@ let i = class extends _ {
   // P1-A / P2-B: Use willUpdate() instead of updated() for property validation
   // and derived state. willUpdate() runs before render() and does not schedule
   // a second update cycle when @state() properties are mutated.
-  willUpdate(a) {
-    a.has("src") && (this._imgError = !1), (a.has("src") || a.has("alt")) && this.src && !this.alt && console.warn(
-      '[hx-avatar] Accessibility: "alt" attribute is required when "src" is provided. Without alt text, screen readers announce a non-descriptive label. Add alt="Full name or description" to your hx-avatar element.'
-    ), (a.has("initials") || a.has("label")) && this.initials && !this.label && console.warn(
-      '[hx-avatar] Accessibility: "label" attribute is recommended when "initials" is provided. Without label, screen readers announce raw initials as individual letters. Add label="Full Name" to your hx-avatar element.'
-    );
+  willUpdate(t) {
+    t.has("src") && (this._imgError = !1), (t.has("src") || t.has("alt")) && this.src && this.alt, (t.has("initials") || t.has("label")) && this.initials && this.label;
     const r = ["xs", "sm", "md", "lg", "xl"];
-    a.has("size") && !r.includes(this.size) && console.warn(
-      `[hx-avatar] Invalid hx-size="${String(this.size)}". Valid values: xs, sm, md, lg, xl. Rendering with "md".`
+    t.has("size") && !r.includes(this.size) && m(
+      "hx-avatar",
+      `Invalid hx-size="${String(this.size)}". Valid values: xs, sm, md, lg, xl. Rendering with "md".`
     );
     const e = ["circle", "square"];
-    a.has("shape") && !e.includes(this.shape) && console.warn(
-      `[hx-avatar] Invalid shape="${String(this.shape)}". Valid values: circle, square. Rendering with "circle".`
+    t.has("shape") && !e.includes(this.shape) && m(
+      "hx-avatar",
+      `Invalid shape="${String(this.shape)}". Valid values: circle, square. Rendering with "circle".`
     );
   }
   // ─── Slot Change Handling ───
-  _handleSlotChange(a) {
-    const e = a.target.assignedNodes({ flatten: !0 });
-    this._hasDefaultSlot = e.some((t) => t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1);
+  _handleSlotChange(t) {
+    const e = t.target.assignedNodes({ flatten: !0 });
+    this._hasDefaultSlot = e.some((a) => a.nodeType === Node.ELEMENT_NODE ? !0 : a.nodeType === Node.TEXT_NODE ? (a.textContent ?? "").trim().length > 0 : !1);
   }
-  _handleBadgeSlotChange(a) {
-    const e = a.target.assignedNodes({ flatten: !0 });
-    this._hasBadgeSlot = e.some((t) => t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1), this._hasBadgeSlot && (e.some((s) => {
-      if (s.nodeType === Node.ELEMENT_NODE) {
-        const o = s;
-        return o.hasAttribute("aria-label") || o.hasAttribute("aria-labelledby") || !!o.getAttribute("role");
+  _handleBadgeSlotChange(t) {
+    const e = t.target.assignedNodes({ flatten: !0 });
+    this._hasBadgeSlot = e.some((a) => a.nodeType === Node.ELEMENT_NODE ? !0 : a.nodeType === Node.TEXT_NODE ? (a.textContent ?? "").trim().length > 0 : !1), this._hasBadgeSlot && e.some((a) => {
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const s = a;
+        return s.hasAttribute("aria-label") || s.hasAttribute("aria-labelledby") || !!s.getAttribute("role");
       }
       return !1;
-    }) || console.warn(
-      "[hx-avatar] Accessibility: badge slot content should have an accessible name (aria-label, role, etc.). Without it, the badge is invisible to screen readers."
-    ));
+    });
   }
   // ─── Image Error Handling ───
   _handleImgError() {
@@ -171,7 +168,7 @@ let i = class extends _ {
   }
   // ─── Fallback Icon ───
   _renderFallbackIcon() {
-    return c`
+    return v`
       <svg
         part="fallback-icon"
         class="avatar__fallback-icon"
@@ -187,74 +184,74 @@ let i = class extends _ {
   }
   // ─── Render ───
   render() {
-    const a = this.src, r = this._hasDefaultSlot, e = !r && !!a && !this._imgError, t = !r && !e && !!this.initials.trim(), s = !r && !e && !t, o = e ? this.alt || this.label || "Avatar" : t ? this.label || this.initials : this.label || "Avatar", h = ["xs", "sm", "md", "lg", "xl"], m = ["circle", "square"], u = h.includes(this.size) ? this.size : "md", g = 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"], g = ["circle", "square"], f = h.includes(this.size) ? this.size : "md", x = g.includes(this.shape) ? this.shape : "circle", u = {
       avatar: !0,
-      [`avatar--${u}`]: !0,
-      [`avatar--${g}`]: !0
-    }, f = {
+      [`avatar--${f}`]: !0,
+      [`avatar--${x}`]: !0
+    }, b = {
       avatar__badge: !0,
       "avatar__badge--hidden": !this._hasBadgeSlot
     };
-    return c`
+    return v`
       <div class="avatar-wrapper">
         <div
           part="avatar"
-          class=${p(x)}
+          class=${p(u)}
           role=${r ? d : "img"}
-          aria-label=${r ? d : o}
+          aria-label=${r ? d : n}
         >
           <slot @slotchange=${this._handleSlotChange}></slot>
-          ${e && a ? c`<img
+          ${e && t ? v`<img
                 part="image"
                 class="avatar__image"
-                src=${a}
+                src=${t}
                 alt=${this.alt}
                 aria-hidden="true"
                 loading="lazy"
                 @error=${this._handleImgError}
               />` : d}
-          ${t ? c`<span part="initials" class="avatar__initials">${this.initials.trim()}</span>` : d}
+          ${a ? v`<span part="initials" class="avatar__initials">${this.initials.trim()}</span>` : d}
           ${s ? this._renderFallbackIcon() : d}
         </div>
-        <span part="badge" class=${p(f)}>
+        <span part="badge" class=${p(b)}>
           <slot name="badge" @slotchange=${this._handleBadgeSlotChange}></slot>
         </span>
       </div>
     `;
   }
 };
-i.styles = [z, w];
-l([
-  n({ type: String })
+i.styles = [S, w];
+o([
+  l({ type: String })
 ], i.prototype, "src", 2);
-l([
-  n({ type: String })
+o([
+  l({ type: String })
 ], i.prototype, "alt", 2);
-l([
-  n({ type: String })
+o([
+  l({ type: String })
 ], i.prototype, "label", 2);
-l([
-  n({ type: String })
+o([
+  l({ type: String })
 ], i.prototype, "initials", 2);
-l([
-  n({ type: String, reflect: !0, attribute: "hx-size" })
+o([
+  l({ type: String, reflect: !0, attribute: "hx-size" })
 ], i.prototype, "size", 2);
-l([
-  n({ type: String, reflect: !0 })
+o([
+  l({ type: String, reflect: !0 })
 ], i.prototype, "shape", 2);
-l([
-  v()
+o([
+  c()
 ], i.prototype, "_imgError", 2);
-l([
-  v()
+o([
+  c()
 ], i.prototype, "_hasDefaultSlot", 2);
-l([
-  v()
+o([
+  c()
 ], i.prototype, "_hasBadgeSlot", 2);
-i = l([
-  y("hx-avatar")
+i = o([
+  z("hx-avatar")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-avatar-yHjmNdtf.js.map
+//# sourceMappingURL=hx-avatar-Cep6Urm3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-avatar-Cep6Urm3.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));\n    color: var(--hx-avatar-color, var(--hx-color-primary-700));\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-base, 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-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    width: 60%;\n    height: 60%;\n    color: var(--hx-avatar-color, var(--hx-color-primary-700));\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. Add a border so the avatar remains perceivable.\n     WCAG 1.4.11 Non-text Contrast (Level AA). */\n  @media (forced-colors: active) {\n    .avatar {\n      border: 2px solid ButtonText;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAvatarStyles } from './hx-avatar.styles.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 */\n@customElement('hx-avatar')\nexport class HelixAvatar extends LitElement {\n  static override styles = [tokenStyles, helixAvatarStyles];\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   */\n  @state()\n  private _imgError = false;\n\n  /**\n   * Tracks whether the default slot has assigned content.\n   */\n  @state()\n  private _hasDefaultSlot = false;\n\n  /**\n   * Tracks whether the badge slot has assigned content.\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): 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  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  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  private _handleImgError(): void {\n    this._imgError = true;\n  }\n\n  // ─── Fallback Icon ───\n\n  private _renderFallbackIcon() {\n    return html`\n      <svg\n        part=\"fallback-icon\"\n        class=\"avatar__fallback-icon\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n        fill=\"currentColor\"\n      >\n        <path\n          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\"\n        />\n      </svg>\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","LitElement","changedProperties","validSizes","devWarn","validShapes","e","nodes","node","el","html","src","showSlot","showImage","showInitials","showFallback","ariaLabel","sizeClass","shapeClass","classes","badgeClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-banner-lxAIJ2kR.js

@@ -0,0 +1,349 @@
+import { css as b, LitElement as f, html as n, nothing as d } from "lit";
+import { property as i, customElement as u } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
+import { tokenStyles as p } from "@helixui/tokens/lit";
+const g = b`
+  :host {
+    display: block;
+    width: 100%;
+    position: var(--hx-banner-position, sticky);
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--hx-banner-z-index, 100);
+  }
+
+  :host(:not([open])) {
+    display: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Banner Container ─── */
+
+  .banner {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));
+    padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
+    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #e8f4fd));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #1a3a4a));
+    border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid
+      var(--hx-banner-border-color, var(--hx-color-info-200, #b3d9ef));
+    font-family: var(--hx-banner-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+    width: 100%;
+  }
+
+  /* ─── Icon ─── */
+
+  .banner__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #3b82f6));
+  }
+
+  .banner__icon svg {
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    fill: currentColor;
+  }
+
+  /* ─── Message ─── */
+
+  .banner__message {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ─── Action Link ─── */
+
+  .banner__action {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #1a3a4a)));
+    font-weight: var(--hx-font-weight-semibold, 600);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  .banner__action:hover {
+    opacity: 0.8;
+  }
+
+  .banner__action:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }
+
+  /* ─── Close Button ─── */
+  /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */
+  /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */
+  /* the target size is independent of the consumer's base font size.         */
+
+  .banner__close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: var(--hx-touch-target-size, 44px);
+    min-height: var(--hx-touch-target-size, 44px);
+    margin-left: auto;
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-banner-color, var(--hx-color-info-800, #1a3a4a));
+    cursor: pointer;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: 1;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      opacity var(--hx-transition-fast, 150ms ease);
+    opacity: 0.7;
+  }
+
+  .banner__close-button:hover {
+    opacity: 1;
+    /* color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+.   */
+    /* Falls back to transparent (no hover background) in older environments.  */
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .banner__close-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    opacity: 1;
+  }
+
+  .banner__close-button svg {
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+    fill: currentColor;
+  }
+
+  /* ─── Variant: info ─── */
+
+  :host([variant='info']) .banner,
+  :host(:not([variant])) .banner {
+    --hx-banner-bg: var(--hx-color-info-50, #e8f4fd);
+    --hx-banner-border-color: var(--hx-color-info-200, #b3d9ef);
+    --hx-banner-color: var(--hx-color-info-800, #1a3a4a);
+    --hx-banner-icon-color: var(--hx-color-info-500, #3b82f6);
+  }
+
+  /* ─── Variant: success ─── */
+
+  :host([variant='success']) .banner {
+    --hx-banner-bg: var(--hx-color-success-50, #ecfdf5);
+    --hx-banner-border-color: var(--hx-color-success-200, #a7f3d0);
+    --hx-banner-color: var(--hx-color-success-800, #065f46);
+    --hx-banner-icon-color: var(--hx-color-success-500, #10b981);
+  }
+
+  /* ─── Variant: warning ─── */
+
+  :host([variant='warning']) .banner {
+    --hx-banner-bg: var(--hx-color-warning-50, #fffbeb);
+    --hx-banner-border-color: var(--hx-color-warning-200, #fde68a);
+    --hx-banner-color: var(--hx-color-warning-800, #92400e);
+    --hx-banner-icon-color: var(--hx-color-warning-500, #f59e0b);
+  }
+
+  /* ─── Variant: error ─── */
+
+  :host([variant='error']) .banner {
+    --hx-banner-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-banner-border-color: var(--hx-color-error-200, #fecaca);
+    --hx-banner-color: var(--hx-color-error-800, #991b1b);
+    --hx-banner-icon-color: var(--hx-color-error-500, #ef4444);
+  }
+
+  /* ─── Position: fixed ─── */
+  /* When position="fixed", override the host-level CSS custom property.    */
+  /* The :host rule above sets position via var(--hx-banner-position).      */
+  /* We use an attribute selector to override it cleanly without duplication. */
+
+  :host([position='fixed']) {
+    position: fixed;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .banner__close-button {
+      transition: none;
+    }
+  }
+`;
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (e, a, c, s) => {
+  for (var o = s > 1 ? void 0 : s ? _(a, c) : a, l = e.length - 1, h; l >= 0; l--)
+    (h = e[l]) && (o = (s ? h(a, c, o) : h(o)) || o);
+  return s && o && m(a, c, o), o;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.variant = "info", this.position = "sticky", this.dismissible = !1, this.actionLabel = "", this.actionHref = "", this.open = !0;
+  }
+  // ─── Private Helpers ───
+  /** Returns true when the variant requires assertive announcement. */
+  get _isAssertive() {
+    return this.variant === "error" || this.variant === "warning";
+  }
+  /**
+   * Returns the appropriate ARIA role based on variant.
+   * role="alert" implies aria-live="assertive"; role="status" implies aria-live="polite".
+   * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.
+   */
+  get _role() {
+    return this._isAssertive ? "alert" : "status";
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", this._role), this.open || this.setAttribute("aria-hidden", "true");
+  }
+  updated(e) {
+    super.updated(e), e.has("variant") && this.setAttribute("role", this._role), e.has("open") && (this.open ? this.removeAttribute("aria-hidden") : this.setAttribute("aria-hidden", "true"));
+  }
+  // ─── Default Icons ───
+  _renderInfoIcon() {
+    return n`<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>`;
+  }
+  _renderSuccessIcon() {
+    return n`<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>`;
+  }
+  _renderWarningIcon() {
+    return n`<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>`;
+  }
+  _renderErrorIcon() {
+    return n`<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>`;
+  }
+  _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();
+    }
+  }
+  _renderCloseIcon() {
+    return n`<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>`;
+  }
+  // ─── Public Methods ───
+  /**
+   * Programmatically dismisses the banner. Sets open=false and dispatches hx-dismiss.
+   */
+  dismiss() {
+    this._handleDismiss();
+  }
+  // ─── Event Handling ───
+  _handleDismiss() {
+    this.open = !1, this.dispatchEvent(
+      new CustomEvent("hx-dismiss", {
+        bubbles: !0,
+        composed: !0,
+        detail: { reason: "user" }
+      })
+    );
+  }
+  // ─── Render ───
+  render() {
+    const e = {
+      banner: !0,
+      [`banner--${this.variant}`]: !0
+    }, a = this.actionLabel.length > 0 && this.actionHref.length > 0;
+    return n`
+      <div part="banner" class=${v(e)}>
+        <div part="icon" class="banner__icon">${this._renderDefaultIcon()}</div>
+
+        <div part="message" class="banner__message">
+          <slot></slot>
+        </div>
+
+        ${a ? n`
+              <a
+                part="action"
+                class="banner__action"
+                href=${x(this.actionHref || void 0)}
+              >
+                <slot name="action">${this.actionLabel}</slot>
+              </a>
+            ` : d}
+        ${this.dismissible ? n`
+              <button
+                part="close-button"
+                class="banner__close-button"
+                aria-label="Dismiss"
+                @click=${this._handleDismiss}
+              >
+                ${this._renderCloseIcon()}
+              </button>
+            ` : d}
+      </div>
+    `;
+  }
+};
+r.styles = [p, g];
+t([
+  i({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+t([
+  i({ type: String, reflect: !0 })
+], r.prototype, "position", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "dismissible", 2);
+t([
+  i({ type: String, attribute: "action-label" })
+], r.prototype, "actionLabel", 2);
+t([
+  i({ type: String, attribute: "action-href" })
+], r.prototype, "actionHref", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+r = t([
+  u("hx-banner")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-banner-lxAIJ2kR.js.map

package/dist/shared/hx-banner-lxAIJ2kR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-banner-lxAIJ2kR.js","sources":["../../src/components/hx-banner/hx-banner.styles.ts","../../src/components/hx-banner/hx-banner.ts"],"sourcesContent":["import { css } from 'lit';\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  /* ─── 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, #e8f4fd));\n    color: var(--hx-banner-color, var(--hx-color-info-800, #1a3a4a));\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, #b3d9ef));\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, #3b82f6));\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, #1a3a4a)));\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: 0.8;\n  }\n\n  .banner__action:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\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-left: 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, #1a3a4a));\n    cursor: pointer;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: 1;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      opacity var(--hx-transition-fast, 150ms ease);\n    opacity: 0.7;\n  }\n\n  .banner__close-button:hover {\n    opacity: 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 var(--hx-focus-ring-color, #2563eb);\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, #e8f4fd);\n    --hx-banner-border-color: var(--hx-color-info-200, #b3d9ef);\n    --hx-banner-color: var(--hx-color-info-800, #1a3a4a);\n    --hx-banner-icon-color: var(--hx-color-info-500, #3b82f6);\n  }\n\n  /* ─── Variant: success ─── */\n\n  :host([variant='success']) .banner {\n    --hx-banner-bg: var(--hx-color-success-50, #ecfdf5);\n    --hx-banner-border-color: var(--hx-color-success-200, #a7f3d0);\n    --hx-banner-color: var(--hx-color-success-800, #065f46);\n    --hx-banner-icon-color: var(--hx-color-success-500, #10b981);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  :host([variant='warning']) .banner {\n    --hx-banner-bg: var(--hx-color-warning-50, #fffbeb);\n    --hx-banner-border-color: var(--hx-color-warning-200, #fde68a);\n    --hx-banner-color: var(--hx-color-warning-800, #92400e);\n    --hx-banner-icon-color: var(--hx-color-warning-500, #f59e0b);\n  }\n\n  /* ─── Variant: error ─── */\n\n  :host([variant='error']) .banner {\n    --hx-banner-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-banner-border-color: var(--hx-color-error-200, #fecaca);\n    --hx-banner-color: var(--hx-color-error-800, #991b1b);\n    --hx-banner-icon-color: var(--hx-color-error-500, #ef4444);\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","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixBannerStyles } from './hx-banner.styles.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/**\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 */\n@customElement('hx-banner')\nexport class HelixBanner extends LitElement {\n  static override styles = [tokenStyles, helixBannerStyles];\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: BannerVariant = '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: BannerPosition = '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   * 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  // ─── Private Helpers ───\n\n  /** Returns true when the variant requires assertive announcement. */\n  private get _isAssertive(): boolean {\n    return this.variant === 'error' || this.variant === 'warning';\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  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    this.setAttribute('role', this._role);\n    if (!this.open) {\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  protected override updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('variant')) {\n      // Keep host ARIA role in sync with variant (assertive vs. polite).\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  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  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  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  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  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  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  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('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    return html`\n      <div part=\"banner\" class=${classMap(classes)}>\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              >\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=\"Dismiss\"\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","LitElement","changedProperties","html","classes","hasAction","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}