@helixui/library 1.1.1 → 1.1.2-next.2

package/dist/shared/{hx-banner-BTV-X2xF.js → hx-banner-2RS7Nux4.js}

@@ -1,7 +1,7 @@
-import { css as d, LitElement as f, html as o, nothing as b } from "lit";
-import { property as t, customElement as u } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { ifDefined as p } from "lit/directives/if-defined.js";
+import { css as d, LitElement as v, html as t, nothing as b } from "lit";
+import { property as a, customElement as f } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
 import { tokenStyles as x } from "@helixui/tokens/lit";
 const g = d`
   :host {
@@ -22,6 +22,22 @@ const g = d`
     box-sizing: border-box;
   }
 
+  /* ─── Severity Label (WCAG 1.4.1) ─── */
+  /* Visually hidden — ensures variant is never conveyed by color alone.   */
+  /* Always rendered so screen readers can identify the banner severity.   */
+
+  .banner__severity-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   /* ─── Banner Container ─── */
 
   .banner {
@@ -80,11 +96,12 @@ const g = d`
   }
 
   .banner__action:hover {
-    opacity: 0.8;
+    opacity: var(--hx-opacity-90, 0.9);
   }
 
   .banner__action:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -101,7 +118,7 @@ const g = d`
     flex-shrink: 0;
     min-width: var(--hx-touch-target-size, 44px);
     min-height: var(--hx-touch-target-size, 44px);
-    margin-left: auto;
+    margin-inline-start: auto;
     padding: 0;
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -113,18 +130,19 @@ const g = d`
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
       opacity var(--hx-transition-fast, 150ms ease);
-    opacity: 0.7;
+    opacity: var(--hx-opacity-75, 0.75);
   }
 
   .banner__close-button:hover {
-    opacity: 1;
+    opacity: var(--hx-opacity-100, 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: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -189,16 +207,29 @@ const g = d`
     }
   }
 `;
-var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (n, i, l, s) => {
-  for (var a = s > 1 ? void 0 : s ? _(i, l) : i, c = n.length - 1, h; c >= 0; c--)
-    (h = n[c]) && (a = (s ? h(i, l, a) : h(a)) || a);
-  return s && a && m(i, l, a), a;
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (n, i, s, l) => {
+  for (var o = l > 1 ? void 0 : l ? _(i, s) : i, c = n.length - 1, h; c >= 0; c--)
+    (h = n[c]) && (o = (l ? h(i, s, o) : h(o)) || o);
+  return l && o && m(i, s, o), o;
 };
-let r = class extends f {
+let e = class extends v {
   constructor() {
-    super(...arguments), this.variant = "info", this.position = "sticky", this.dismissible = !1, this.heading = "", this.actionLabel = "", this.actionHref = "", this.open = !0, this.closeLabel = "Dismiss banner";
+    super(...arguments), this.variant = "info", this.position = "sticky", this.dismissible = !1, this.heading = "", this.actionLabel = "", this.actionHref = "", this.open = !0, this.labelClose = "Dismiss banner";
   }
   // ─── Private Helpers ───
+  /** Returns the default English severity label for the current variant. */
+  _defaultSeverityLabel() {
+    return {
+      info: "Info:",
+      success: "Success:",
+      warning: "Warning:",
+      error: "Error:"
+    }[this.variant] ?? "";
+  }
+  /** Returns the effective severity label, using the override if provided. */
+  get _effectiveSeverityLabel() {
+    return this.severityLabel ?? this._defaultSeverityLabel();
+  }
   /** Returns true when the variant requires assertive announcement. */
   /** @internal */
   get _isAssertive() {
@@ -223,7 +254,7 @@ let r = class extends f {
   // ─── Default Icons ───
   /** @internal */
   _renderInfoIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    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"
       />
@@ -231,7 +262,7 @@ let r = class extends f {
   }
   /** @internal */
   _renderSuccessIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    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"
       />
@@ -239,7 +270,7 @@ let r = class extends f {
   }
   /** @internal */
   _renderWarningIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    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"
       />
@@ -247,7 +278,7 @@ let r = class extends f {
   }
   /** @internal */
   _renderErrorIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    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"
       />
@@ -269,7 +300,7 @@ let r = class extends f {
   }
   /** @internal */
   _renderCloseIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    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"
       />
@@ -298,30 +329,31 @@ let r = class extends f {
     const n = {
       banner: !0,
       [`banner--${this.variant}`]: !0
-    }, i = this.actionLabel.length > 0 && this.actionHref.length > 0;
-    return o`
-      <div part="banner" class=${v(n)}>
+    }, i = this.actionLabel.length > 0 && this.actionHref.length > 0, s = this._effectiveSeverityLabel;
+    return t`
+      <div part="banner" class=${p(n)}>
+        <span class="banner__severity-label">${s}</span>
         <div part="icon" class="banner__icon">${this._renderDefaultIcon()}</div>
 
         <div part="message" class="banner__message">
           <slot></slot>
         </div>
 
-        ${i ? o`
+        ${i ? t`
               <a
                 part="action"
                 class="banner__action"
-                href=${p(this.actionHref || void 0)}
+                href=${u(this.actionHref || void 0)}
                 aria-label=${this.heading ? `${this.actionLabel}: ${this.heading}` : this.actionLabel}
               >
                 <slot name="action">${this.actionLabel}</slot>
               </a>
             ` : b}
-        ${this.dismissible ? o`
+        ${this.dismissible ? t`
               <button
                 part="close-button"
                 class="banner__close-button"
-                aria-label=${this.closeLabel}
+                aria-label=${this.labelClose}
                 @click=${this._handleDismiss}
               >
                 ${this._renderCloseIcon()}
@@ -331,35 +363,38 @@ let r = class extends f {
     `;
   }
 };
-r.styles = [x, g];
-e([
-  t({ type: String, reflect: !0 })
-], r.prototype, "variant", 2);
-e([
-  t({ type: String, reflect: !0 })
-], r.prototype, "position", 2);
-e([
-  t({ type: Boolean, reflect: !0 })
-], r.prototype, "dismissible", 2);
-e([
-  t({ type: String })
-], r.prototype, "heading", 2);
-e([
-  t({ type: String, attribute: "action-label" })
-], r.prototype, "actionLabel", 2);
-e([
-  t({ type: String, attribute: "action-href" })
-], r.prototype, "actionHref", 2);
-e([
-  t({ type: Boolean, reflect: !0 })
-], r.prototype, "open", 2);
-e([
-  t({ type: String, attribute: "close-label" })
-], r.prototype, "closeLabel", 2);
-r = e([
-  u("hx-banner")
-], r);
+e.styles = [x, g];
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "position", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "dismissible", 2);
+r([
+  a({ type: String })
+], e.prototype, "heading", 2);
+r([
+  a({ type: String, attribute: "action-label" })
+], e.prototype, "actionLabel", 2);
+r([
+  a({ type: String, attribute: "action-href" })
+], e.prototype, "actionHref", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
+r([
+  a({ type: String, attribute: "label-close" })
+], e.prototype, "labelClose", 2);
+r([
+  a({ attribute: "severity-label" })
+], e.prototype, "severityLabel", 2);
+e = r([
+  f("hx-banner")
+], e);
 export {
-  r as H
+  e as H
 };
-//# sourceMappingURL=hx-banner-BTV-X2xF.js.map
+//# sourceMappingURL=hx-banner-2RS7Nux4.js.map

package/dist/shared/hx-banner-2RS7Nux4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-banner-2RS7Nux4.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  /* ─── Severity Label (WCAG 1.4.1) ─── */\n  /* Visually hidden — ensures variant is never conveyed by color alone.   */\n  /* Always rendered so screen readers can identify the banner severity.   */\n\n  .banner__severity-label {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Banner Container ─── */\n\n  .banner {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));\n    padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #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: var(--hx-opacity-90, 0.9);\n  }\n\n  .banner__action:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  /* ─── Close Button ─── */\n  /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */\n  /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */\n  /* the target size is independent of the consumer's base font size.         */\n\n  .banner__close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    min-width: var(--hx-touch-target-size, 44px);\n    min-height: var(--hx-touch-target-size, 44px);\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-banner-color, var(--hx-color-info-800, #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: var(--hx-opacity-75, 0.75);\n  }\n\n  .banner__close-button:hover {\n    opacity: var(--hx-opacity-100, 1);\n    /* color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+.   */\n    /* Falls back to transparent (no hover background) in older environments.  */\n    background-color: color-mix(in srgb, currentColor 10%, transparent);\n  }\n\n  .banner__close-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\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, type PropertyValues } 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: 'info' | 'success' | 'warning' | 'error' = 'info';\n\n  /**\n   * CSS positioning behavior. \"sticky\" keeps the banner in flow; \"fixed\" pins it to the viewport.\n   * @attr position\n   */\n  @property({ type: String, reflect: true })\n  position: 'sticky' | 'fixed' = 'sticky';\n\n  /**\n   * Whether the banner can be dismissed by the user.\n   * @attr dismissible\n   */\n  @property({ type: Boolean, reflect: true })\n  dismissible = false;\n\n  /**\n   * Heading text for the banner, used to provide context in the action link's and\n   * close button's accessible labels.\n   * @attr heading\n   */\n  @property({ type: String })\n  heading = '';\n\n  /**\n   * Label text for the optional action link. Requires action-href to render.\n   * @attr action-label\n   */\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  /**\n   * URL for the optional action link. Requires action-label to render.\n   * @attr action-href\n   */\n  @property({ type: String, attribute: 'action-href' })\n  actionHref = '';\n\n  /**\n   * Whether the banner is visible. Defaults to true — banners are shown by default.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /** Accessible label for the dismiss button. Override for localized text. */\n  @property({ type: String, attribute: 'label-close' })\n  labelClose = 'Dismiss banner';\n\n  /**\n   * Override for the severity prefix announced to screen readers (e.g., \"Info:\", \"Error:\").\n   * When not set, defaults to the English label matching the current variant.\n   * @attr severity-label\n   */\n  @property({ attribute: 'severity-label' })\n  severityLabel: string | undefined;\n\n  // ─── Private Helpers ───\n\n  /** Returns the default English severity label for the current variant. */\n  private _defaultSeverityLabel(): string {\n    const labels: Record<string, string> = {\n      info: 'Info:',\n      success: 'Success:',\n      warning: 'Warning:',\n      error: 'Error:',\n    };\n    return labels[this.variant] ?? '';\n  }\n\n  /** Returns the effective severity label, using the override if provided. */\n  private get _effectiveSeverityLabel(): string {\n    return this.severityLabel ?? this._defaultSeverityLabel();\n  }\n\n  /** Returns true when the variant requires assertive announcement. */\n  /** @internal */\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  /** @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    this.setAttribute('role', this._role);\n    if (!this.open) {\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('variant')) {\n      // Keep host ARIA role in sync with variant (assertive vs. polite).\n      this.setAttribute('role', this._role);\n    }\n    if (changedProperties.has('open')) {\n      // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n      // When open transitions from false→true, removing aria-hidden signals to AT\n      // that the live region content should be announced.\n      if (this.open) {\n        this.removeAttribute('aria-hidden');\n      } else {\n        this.setAttribute('aria-hidden', 'true');\n      }\n    }\n  }\n\n  // ─── Default Icons ───\n\n  /** @internal */\n  private _renderInfoIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderSuccessIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderWarningIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderErrorIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderDefaultIcon() {\n    switch (this.variant) {\n      case 'success':\n        return this._renderSuccessIcon();\n      case 'warning':\n        return this._renderWarningIcon();\n      case 'error':\n        return this._renderErrorIcon();\n      case 'info':\n      default:\n        return this._renderInfoIcon();\n    }\n  }\n\n  /** @internal */\n  private _renderCloseIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n      />\n    </svg>`;\n  }\n\n  // ─── Public Methods ───\n\n  /**\n   * Programmatically dismisses the banner. Sets open=false and dispatches hx-dismiss.\n   */\n  dismiss(): void {\n    this._handleDismiss();\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleDismiss(): void {\n    this.open = false;\n\n    /**\n     * Dispatched when the user (or caller) dismisses the banner.\n     * @event hx-dismiss\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ reason: string }>('hx-dismiss', {\n        bubbles: true,\n        composed: true,\n        detail: { reason: 'user' },\n      }),\n    );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      banner: true,\n      [`banner--${this.variant}`]: true,\n    };\n\n    const hasAction = this.actionLabel.length > 0 && this.actionHref.length > 0;\n\n    // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n    // is never conveyed by color alone.\n    const severityLabel = this._effectiveSeverityLabel;\n\n    return html`\n      <div part=\"banner\" class=${classMap(classes)}>\n        <span class=\"banner__severity-label\">${severityLabel}</span>\n        <div part=\"icon\" class=\"banner__icon\">${this._renderDefaultIcon()}</div>\n\n        <div part=\"message\" class=\"banner__message\">\n          <slot></slot>\n        </div>\n\n        ${hasAction\n          ? html`\n              <a\n                part=\"action\"\n                class=\"banner__action\"\n                href=${ifDefined(this.actionHref || undefined)}\n                aria-label=${this.heading\n                  ? `${this.actionLabel}: ${this.heading}`\n                  : this.actionLabel}\n              >\n                <slot name=\"action\">${this.actionLabel}</slot>\n              </a>\n            `\n          : nothing}\n        ${this.dismissible\n          ? html`\n              <button\n                part=\"close-button\"\n                class=\"banner__close-button\"\n                aria-label=${this.labelClose}\n                @click=${this._handleDismiss}\n              >\n                ${this._renderCloseIcon()}\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-banner': HelixBanner;\n  }\n}\n\nexport type { HelixBanner as HxBanner };\n"],"names":["helixBannerStyles","css","HelixBanner","LitElement","changedProperties","html","classes","hasAction","severityLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-breadcrumb-item-4IwaLgaO.js → hx-breadcrumb-item-B2rjepqy.js}

@@ -1,5 +1,5 @@
 import { css as m, LitElement as u, html as d, nothing as x } from "lit";
-import { property as l, customElement as b } from "lit/decorators.js";
+import { property as n, customElement as b } from "lit/decorators.js";
 import { tokenStyles as f } from "@helixui/tokens/lit";
 const y = m`
   :host {
@@ -38,23 +38,21 @@ const y = m`
     display: none;
   }
 `;
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? _(t, s) : t, a = e.length - 1, o; a >= 0; a--)
-    (o = e[a]) && (r = (i ? o(t, s, r) : o(r)) || r);
-  return i && r && v(t, s, r), r;
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? _(e, s) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (r = (i ? l(e, s, r) : l(r)) || r);
+  return i && r && v(e, s, r), r;
 };
-let n = class extends u {
+let o = class extends u {
   constructor() {
-    super(...arguments), this.separator = "/", this.label = "Breadcrumb", this.maxItems = 0, this.jsonLd = !1, this._ellipsisItem = null, this._jsonLdScript = null, this._boundEllipsisClick = () => {
-    }, this._boundEllipsisKeydown = () => {
-    }, this._managedCurrentItems = /* @__PURE__ */ new WeakSet(), this._jsonLdId = `hx-breadcrumb-ld-${++n._instanceCounter}`;
+    super(...arguments), this.separator = "/", this.label = "Breadcrumb", this.maxItems = 0, this.labelEllipsis = "Show all breadcrumb items", this.jsonLd = !1, this._ellipsisItem = null, this._jsonLdScript = null, this._boundEllipsisClick = (t) => this._handleEllipsisClick(t), this._boundEllipsisKeydown = (t) => this._handleEllipsisKeydown(t), this._managedCurrentItems = /* @__PURE__ */ new WeakSet(), this._jsonLdId = `hx-breadcrumb-ld-${++o._instanceCounter}`;
   }
   // ─── Item Helpers ───
   /** Returns only real breadcrumb items, excluding the managed ellipsis element. */
   /** @internal */
-  _getBreadcrumbItems(e) {
-    return e.assignedElements({ flatten: !0 }).filter(
-      (t) => t.tagName.toLowerCase() === "hx-breadcrumb-item" && !t.classList.contains("hx-bc-ellipsis")
+  _getBreadcrumbItems(t) {
+    return t.assignedElements({ flatten: !0 }).filter(
+      (e) => e.tagName.toLowerCase() === "hx-breadcrumb-item" && !e.classList.contains("hx-bc-ellipsis")
     );
   }
   /**
@@ -68,63 +66,63 @@ let n = class extends u {
    * relying on item order.
    */
   /** @internal */
-  _applyItemAttributes(e) {
-    const t = e.some(
+  _applyItemAttributes(t) {
+    const e = t.some(
       (s) => s.hasAttribute("current") && !this._managedCurrentItems.has(s)
     );
-    e.forEach((s, i) => {
-      const r = s, a = i === e.length - 1;
-      a ? r.setAttribute("data-bc-last", "") : r.removeAttribute("data-bc-last"), t || (a ? (r.setAttribute("current", ""), this._managedCurrentItems.add(r)) : (r.removeAttribute("current"), this._managedCurrentItems.delete(r)));
+    t.forEach((s, i) => {
+      const r = s, a = i === t.length - 1;
+      a ? r.setAttribute("data-bc-last", "") : r.removeAttribute("data-bc-last"), e || (a ? (r.setAttribute("current", ""), this._managedCurrentItems.add(r)) : (r.removeAttribute("current"), this._managedCurrentItems.delete(r)));
     });
   }
   // ─── Slot Handling ───
   /** @internal */
-  _handleSlotChange(e) {
-    if (!(e.target instanceof HTMLSlotElement)) return;
-    const t = this._getBreadcrumbItems(e.target);
-    this.maxItems > 0 && t.length > this.maxItems ? this._applyCollapse(t) : this._removeCollapse(t), this._applyItemAttributes(t), this.jsonLd && this._updateJsonLd(t);
+  _handleSlotChange(t) {
+    if (!(t.target instanceof HTMLSlotElement)) return;
+    const e = this._getBreadcrumbItems(t.target);
+    this.maxItems > 0 && e.length > this.maxItems ? this._applyCollapse(e) : this._removeCollapse(e), this._applyItemAttributes(e), this.jsonLd && this._updateJsonLd(e);
   }
   /** @internal */
-  _handleSeparatorSlotChange(e) {
+  _handleSeparatorSlotChange(t) {
     var s;
-    if (!(e.target instanceof HTMLSlotElement)) return;
-    const t = e.target.assignedElements({ flatten: !0 });
-    if (t.length > 0) {
-      const i = ((s = t[0].textContent) == null ? void 0 : s.trim()) ?? "";
+    if (!(t.target instanceof HTMLSlotElement)) return;
+    const e = t.target.assignedElements({ flatten: !0 });
+    if (e.length > 0) {
+      const i = ((s = e[0].textContent) == null ? void 0 : s.trim()) ?? "";
       this.style.setProperty("--hx-breadcrumb-separator-content", JSON.stringify(i));
     }
   }
   // ─── Collapse ───
   /** @internal */
-  _applyCollapse(e) {
-    if (e.forEach((s, i) => {
+  _applyCollapse(t) {
+    if (t.forEach((s, i) => {
       const r = s;
-      i === 0 || i === e.length - 1 ? r.removeAttribute("data-bc-hidden") : r.setAttribute("data-bc-hidden", "");
+      i === 0 || i === t.length - 1 ? r.removeAttribute("data-bc-hidden") : r.setAttribute("data-bc-hidden", "");
     }), !this._ellipsisItem && typeof document < "u") {
       const s = document.createElement("hx-breadcrumb-item");
       s.classList.add("hx-bc-ellipsis");
       const i = document.createElement("button");
-      i.type = "button", i.textContent = "…", i.setAttribute("aria-label", "Show all breadcrumb items"), s.appendChild(i), this._ellipsisItem = s;
+      i.type = "button", i.textContent = "…", i.setAttribute("aria-label", this.labelEllipsis), s.appendChild(i), this._ellipsisItem = s;
     }
-    const t = e[0];
-    !t || !this._ellipsisItem || this._ellipsisItem.previousElementSibling !== t && t.after(this._ellipsisItem);
+    const e = t[0];
+    !e || !this._ellipsisItem || this._ellipsisItem.previousElementSibling !== e && e.after(this._ellipsisItem);
   }
   /** @internal */
-  _removeCollapse(e) {
-    var t;
-    e.forEach((s) => {
+  _removeCollapse(t) {
+    var e;
+    t.forEach((s) => {
       s.removeAttribute("data-bc-hidden");
-    }), (t = this._ellipsisItem) != null && t.isConnected && this._ellipsisItem.remove();
+    }), (e = this._ellipsisItem) != null && e.isConnected && this._ellipsisItem.remove();
   }
   /** @internal */
-  _handleEllipsisClick(e) {
-    var t, s;
-    (s = (t = e.target) == null ? void 0 : t.closest) != null && s.call(t, ".hx-bc-ellipsis") && this._expandBreadcrumb();
+  _handleEllipsisClick(t) {
+    var e, s;
+    (s = (e = t.target) == null ? void 0 : e.closest) != null && s.call(e, ".hx-bc-ellipsis") && this._expandBreadcrumb();
   }
   /** @internal */
-  _handleEllipsisKeydown(e) {
-    var t, s;
-    e instanceof KeyboardEvent && (e.key === "Enter" || e.key === " ") && (s = (t = e.target) == null ? void 0 : t.closest) != null && s.call(t, ".hx-bc-ellipsis") && (e.preventDefault(), this._expandBreadcrumb());
+  _handleEllipsisKeydown(t) {
+    var e, s;
+    t instanceof KeyboardEvent && (t.key === "Enter" || t.key === " ") && (s = (e = t.target) == null ? void 0 : e.closest) != null && s.call(e, ".hx-bc-ellipsis") && (t.preventDefault(), this._expandBreadcrumb());
   }
   /**
    * Expands a collapsed breadcrumb by resetting maxItems to 0.
@@ -139,47 +137,47 @@ let n = class extends u {
    * JSON-LD ListItem entry with typed fields to avoid Record<string, unknown>.
    */
   /** @internal */
-  _buildListItem(e, t) {
+  _buildListItem(t, e) {
     var a;
-    const s = e.getAttribute("href"), i = ((a = e.textContent) == null ? void 0 : a.trim()) ?? "", r = {
+    const s = t.getAttribute("href"), i = ((a = t.textContent) == null ? void 0 : a.trim()) ?? "", r = {
       "@type": "ListItem",
-      position: t,
+      position: e,
       name: i
     };
     return s && (r.item = s), r;
   }
   /** @internal */
-  _updateJsonLd(e) {
+  _updateJsonLd(t) {
     var s;
-    const t = {
+    const e = {
       "@context": "https://schema.org",
       "@type": "BreadcrumbList",
-      itemListElement: e.map((i, r) => this._buildListItem(i, r + 1))
+      itemListElement: t.map((i, r) => this._buildListItem(i, r + 1))
     };
-    typeof document > "u" || (this._jsonLdScript || ((s = document.getElementById(this._jsonLdId)) == null || s.remove(), this._jsonLdScript = document.createElement("script"), this._jsonLdScript.type = "application/ld+json", this._jsonLdScript.id = this._jsonLdId, this._jsonLdScript.setAttribute("data-hx-breadcrumb", ""), document.head.appendChild(this._jsonLdScript)), this._jsonLdScript.textContent = JSON.stringify(t));
+    typeof document > "u" || (this._jsonLdScript || ((s = document.getElementById(this._jsonLdId)) == null || s.remove(), this._jsonLdScript = document.createElement("script"), this._jsonLdScript.type = "application/ld+json", this._jsonLdScript.id = this._jsonLdId, this._jsonLdScript.setAttribute("data-hx-breadcrumb", ""), document.head.appendChild(this._jsonLdScript)), this._jsonLdScript.textContent = JSON.stringify(e));
   }
   /** @internal */
   _removeJsonLd() {
-    var e;
-    (e = this._jsonLdScript) == null || e.remove(), this._jsonLdScript = null;
+    var t;
+    (t = this._jsonLdScript) == null || t.remove(), this._jsonLdScript = null;
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this._boundEllipsisClick = this._handleEllipsisClick.bind(this), this._boundEllipsisKeydown = this._handleEllipsisKeydown.bind(this), this.addEventListener("click", this._boundEllipsisClick), this.addEventListener("keydown", this._boundEllipsisKeydown);
+    super.connectedCallback(), this.addEventListener("click", this._boundEllipsisClick), this.addEventListener("keydown", this._boundEllipsisKeydown);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("click", this._boundEllipsisClick), this.removeEventListener("keydown", this._boundEllipsisKeydown), this._removeJsonLd();
   }
-  updated(e) {
-    var t, s;
-    if (super.updated(e), e.has("separator") && this.style.setProperty("--hx-breadcrumb-separator-content", JSON.stringify(this.separator)), e.has("maxItems")) {
-      const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot:not([name])");
+  updated(t) {
+    var e, s;
+    if (super.updated(t), t.has("separator") && this.style.setProperty("--hx-breadcrumb-separator-content", JSON.stringify(this.separator)), t.has("maxItems")) {
+      const i = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot:not([name])");
       if (i) {
         const r = this._getBreadcrumbItems(i);
         this.maxItems > 0 && r.length > this.maxItems ? this._applyCollapse(r) : this._removeCollapse(r), this._applyItemAttributes(r);
       }
     }
-    if (e.has("jsonLd"))
+    if (t.has("jsonLd"))
       if (this.jsonLd) {
         const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot:not([name])");
         i && this._updateJsonLd(this._getBreadcrumbItems(i));
@@ -202,23 +200,26 @@ let n = class extends u {
     `;
   }
 };
-n.styles = [f, y];
-n._instanceCounter = 0;
+o.styles = [f, y];
+o._instanceCounter = 0;
+p([
+  n({ type: String })
+], o.prototype, "separator", 2);
 p([
-  l({ type: String })
-], n.prototype, "separator", 2);
+  n({ type: String })
+], o.prototype, "label", 2);
 p([
-  l({ type: String })
-], n.prototype, "label", 2);
+  n({ type: Number, attribute: "max-items" })
+], o.prototype, "maxItems", 2);
 p([
-  l({ type: Number, attribute: "max-items" })
-], n.prototype, "maxItems", 2);
+  n({ attribute: "label-ellipsis" })
+], o.prototype, "labelEllipsis", 2);
 p([
-  l({ type: Boolean, attribute: "json-ld" })
-], n.prototype, "jsonLd", 2);
-n = p([
+  n({ type: Boolean, attribute: "json-ld" })
+], o.prototype, "jsonLd", 2);
+o = p([
   b("hx-breadcrumb")
-], n);
+], o);
 const g = m`
   :host {
     display: inline-flex;
@@ -293,10 +294,10 @@ const g = m`
     padding: 0;
   }
 `;
-var L = Object.defineProperty, C = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? C(t, s) : t, a = e.length - 1, o; a >= 0; a--)
-    (o = e[a]) && (r = (i ? o(t, s, r) : o(r)) || r);
-  return i && r && L(t, s, r), r;
+var L = Object.defineProperty, C = Object.getOwnPropertyDescriptor, h = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? C(e, s) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (r = (i ? l(e, s, r) : l(r)) || r);
+  return i && r && L(e, s, r), r;
 };
 let c = class extends u {
   constructor() {
@@ -316,19 +317,19 @@ let c = class extends u {
 };
 c.styles = [f, g];
 h([
-  l({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], c.prototype, "href", 2);
 h([
-  l({ type: Boolean, attribute: "data-bc-last", reflect: !0 })
+  n({ type: Boolean, attribute: "data-bc-last", reflect: !0 })
 ], c.prototype, "dataBcLast", 2);
 h([
-  l({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], c.prototype, "current", 2);
 c = h([
   b("hx-breadcrumb-item")
 ], c);
 export {
-  n as H,
+  o as H,
   c as a
 };
-//# sourceMappingURL=hx-breadcrumb-item-4IwaLgaO.js.map
+//# sourceMappingURL=hx-breadcrumb-item-B2rjepqy.js.map