@helixui/library 0.1.0

package/dist/shared/hx-alert-C3Papw22.js

@@ -0,0 +1,364 @@
+import { css as v, LitElement as f, html as o, nothing as d } from "lit";
+import { property as i, state as u, customElement as p } from "lit/decorators.js";
+import { classMap as x } from "lit/directives/class-map.js";
+import { t as g } from "./lit-Dpo7RLp4.js";
+const b = v`
+  :host {
+    display: block;
+  }
+
+  :host(:not([open])) {
+    display: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Alert Container ─── */
+
+  .alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));
+    padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));
+    border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid
+      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));
+    border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #e8f4fd));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));
+    font-family: var(--hx-alert-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);
+  }
+
+  /* ─── Accent Variant (left border stripe) ─── */
+  /* Removes full border and replaces with a left-side accent stripe.         */
+  /* Common healthcare/enterprise dashboard pattern for dense information UIs. */
+
+  .alert--accent {
+    border-width: 0;
+    border-left: var(--hx-alert-accent-width, 4px) solid
+      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));
+    border-radius: 0;
+  }
+
+  /* ─── Icon ─── */
+
+  .alert__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #3b82f6));
+  }
+
+  .alert__icon svg {
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    fill: currentColor;
+  }
+
+  /* ─── Title ─── */
+
+  .alert__title {
+    display: none;
+    font-weight: var(--hx-font-weight-semibold, 600);
+    margin-bottom: var(--hx-space-1, 0.25rem);
+  }
+
+  .alert__title--visible {
+    display: block;
+  }
+
+  /* ─── Message ─── */
+
+  .alert__message {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ─── Actions ─── */
+  /* Hidden by default; shown via JS slotchange detection to avoid invisible  */
+  /* margin-top spacing when no actions are slotted.                          */
+
+  .alert__actions {
+    display: none;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    margin-top: var(--hx-space-2, 0.5rem);
+  }
+
+  .alert__actions--visible {
+    display: flex;
+  }
+
+  /* ─── 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.         */
+
+  .alert__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-alert-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;
+  }
+
+  .alert__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);
+  }
+
+  .alert__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;
+  }
+
+  .alert__close-button svg {
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+    fill: currentColor;
+  }
+
+  /* ─── Variant: info ─── */
+
+  :host([variant='info']) .alert,
+  :host(:not([variant])) .alert {
+    --hx-alert-bg: var(--hx-color-info-50, #e8f4fd);
+    --hx-alert-border-color: var(--hx-color-info-200, #b3d9ef);
+    --hx-alert-color: var(--hx-color-info-800, #1a3a4a);
+    --hx-alert-icon-color: var(--hx-color-info-500, #3b82f6);
+  }
+
+  /* ─── Variant: success ─── */
+
+  :host([variant='success']) .alert {
+    --hx-alert-bg: var(--hx-color-success-50, #ecfdf5);
+    --hx-alert-border-color: var(--hx-color-success-200, #a7f3d0);
+    --hx-alert-color: var(--hx-color-success-800, #065f46);
+    --hx-alert-icon-color: var(--hx-color-success-500, #10b981);
+  }
+
+  /* ─── Variant: warning ─── */
+
+  :host([variant='warning']) .alert {
+    --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);
+    --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);
+    --hx-alert-color: var(--hx-color-warning-800, #92400e);
+    --hx-alert-icon-color: var(--hx-color-warning-500, #f59e0b);
+  }
+
+  /* ─── Variant: error ─── */
+
+  :host([variant='error']) .alert {
+    --hx-alert-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-alert-border-color: var(--hx-color-error-200, #fecaca);
+    --hx-alert-color: var(--hx-color-error-800, #991b1b);
+    --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);
+  }
+`;
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, t, l, n) => {
+  for (var s = n > 1 ? void 0 : n ? _(t, l) : t, c = e.length - 1, h; c >= 0; c--)
+    (h = e[c]) && (s = (n ? h(t, l, s) : h(s)) || s);
+  return n && s && m(t, l, s), s;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.variant = "info", this.dismissible = !1, this.open = !0, this.showIcon = !0, this.accent = !1, this.returnFocusTo = null, this._hasActions = !1, this._hasTitle = !1, this._actionsSlotChangeHandler = null, this._titleSlotChangeHandler = null;
+  }
+  // ─── 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");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const e = this.renderRoot.querySelector('slot[name="actions"]');
+    e && this._actionsSlotChangeHandler && e.removeEventListener("slotchange", this._actionsSlotChangeHandler);
+    const t = this.renderRoot.querySelector('slot[name="title"]');
+    t && this._titleSlotChangeHandler && t.removeEventListener("slotchange", this._titleSlotChangeHandler);
+  }
+  firstUpdated() {
+    const e = this.renderRoot.querySelector('slot[name="actions"]');
+    e && (this._actionsSlotChangeHandler = () => {
+      this._hasActions = e.assignedNodes({ flatten: !0 }).length > 0;
+    }, e.addEventListener("slotchange", this._actionsSlotChangeHandler));
+    const t = this.renderRoot.querySelector('slot[name="title"]');
+    t && (this._titleSlotChangeHandler = () => {
+      this._hasTitle = t.assignedNodes({ flatten: !0 }).length > 0;
+    }, t.addEventListener("slotchange", this._titleSlotChangeHandler));
+  }
+  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 o`<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 o`<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 o`<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 o`<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 o`<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>`;
+  }
+  // ─── Event Handling ───
+  _handleDismiss() {
+    if (this.open = !1, this.dispatchEvent(
+      new CustomEvent("hx-close", {
+        bubbles: !0,
+        composed: !0,
+        detail: { reason: "user" }
+      })
+    ), this.dispatchEvent(
+      new CustomEvent("hx-after-close", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.returnFocusTo) {
+      const e = document.querySelector(this.returnFocusTo);
+      e instanceof HTMLElement && e.focus();
+    }
+  }
+  // ─── Render ───
+  render() {
+    const e = {
+      alert: !0,
+      [`alert--${this.variant}`]: !0,
+      "alert--accent": this.accent
+    };
+    return o`
+      <div part="alert" class=${x(e)}>
+        ${this.showIcon ? o`
+              <div part="icon" class="alert__icon">
+                <slot name="icon">${this._renderDefaultIcon()}</slot>
+              </div>
+            ` : d}
+
+        <div part="message" class="alert__message">
+          <div part="title" class="alert__title ${this._hasTitle ? "alert__title--visible" : ""}">
+            <slot name="title"></slot>
+          </div>
+          <slot></slot>
+          <div
+            part="actions"
+            class="alert__actions ${this._hasActions ? "alert__actions--visible" : ""}"
+          >
+            <slot name="actions"></slot>
+          </div>
+        </div>
+
+        ${this.dismissible ? o`
+              <button
+                part="close-button"
+                class="alert__close-button"
+                aria-label="Close"
+                @click=${this._handleDismiss}
+              >
+                ${this._renderCloseIcon()}
+              </button>
+            ` : d}
+      </div>
+    `;
+  }
+};
+r.styles = [g, b];
+a([
+  i({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "dismissible", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+a([
+  i({ type: Boolean, reflect: !0, attribute: "show-icon" })
+], r.prototype, "showIcon", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "accent", 2);
+a([
+  i({ type: String, attribute: "return-focus-to" })
+], r.prototype, "returnFocusTo", 2);
+a([
+  u()
+], r.prototype, "_hasActions", 2);
+a([
+  u()
+], r.prototype, "_hasTitle", 2);
+r = a([
+  p("hx-alert")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-alert-C3Papw22.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-alert-C3Papw22.js","sources":["../../src/components/hx-alert/hx-alert.styles.ts","../../src/components/hx-alert/hx-alert.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAlertStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host(:not([open])) {\n    display: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Alert Container ─── */\n\n  .alert {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));\n    padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));\n    border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid\n      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));\n    border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #e8f4fd));\n    color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));\n    font-family: var(--hx-alert-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Accent Variant (left border stripe) ─── */\n  /* Removes full border and replaces with a left-side accent stripe.         */\n  /* Common healthcare/enterprise dashboard pattern for dense information UIs. */\n\n  .alert--accent {\n    border-width: 0;\n    border-left: var(--hx-alert-accent-width, 4px) solid\n      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));\n    border-radius: 0;\n  }\n\n  /* ─── Icon ─── */\n\n  .alert__icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #3b82f6));\n  }\n\n  .alert__icon svg {\n    width: var(--hx-space-5, 1.25rem);\n    height: var(--hx-space-5, 1.25rem);\n    fill: currentColor;\n  }\n\n  /* ─── Title ─── */\n\n  .alert__title {\n    display: none;\n    font-weight: var(--hx-font-weight-semibold, 600);\n    margin-bottom: var(--hx-space-1, 0.25rem);\n  }\n\n  .alert__title--visible {\n    display: block;\n  }\n\n  /* ─── Message ─── */\n\n  .alert__message {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* ─── Actions ─── */\n  /* Hidden by default; shown via JS slotchange detection to avoid invisible  */\n  /* margin-top spacing when no actions are slotted.                          */\n\n  .alert__actions {\n    display: none;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    margin-top: var(--hx-space-2, 0.5rem);\n  }\n\n  .alert__actions--visible {\n    display: flex;\n  }\n\n  /* ─── Close Button ─── */\n  /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */\n  /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */\n  /* the target size is independent of the consumer's base font size.         */\n\n  .alert__close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    min-width: var(--hx-touch-target-size, 44px);\n    min-height: var(--hx-touch-target-size, 44px);\n    margin-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-alert-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  .alert__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  .alert__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  .alert__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']) .alert,\n  :host(:not([variant])) .alert {\n    --hx-alert-bg: var(--hx-color-info-50, #e8f4fd);\n    --hx-alert-border-color: var(--hx-color-info-200, #b3d9ef);\n    --hx-alert-color: var(--hx-color-info-800, #1a3a4a);\n    --hx-alert-icon-color: var(--hx-color-info-500, #3b82f6);\n  }\n\n  /* ─── Variant: success ─── */\n\n  :host([variant='success']) .alert {\n    --hx-alert-bg: var(--hx-color-success-50, #ecfdf5);\n    --hx-alert-border-color: var(--hx-color-success-200, #a7f3d0);\n    --hx-alert-color: var(--hx-color-success-800, #065f46);\n    --hx-alert-icon-color: var(--hx-color-success-500, #10b981);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  :host([variant='warning']) .alert {\n    --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);\n    --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);\n    --hx-alert-color: var(--hx-color-warning-800, #92400e);\n    --hx-alert-icon-color: var(--hx-color-warning-500, #f59e0b);\n  }\n\n  /* ─── Variant: error ─── */\n\n  :host([variant='error']) .alert {\n    --hx-alert-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-alert-border-color: var(--hx-color-error-200, #fecaca);\n    --hx-alert-color: var(--hx-color-error-800, #991b1b);\n    --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);\n  }\n`;\n","import { LitElement, html, nothing } 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 { helixAlertStyles } from './hx-alert.styles.js';\n\n/** Alert variant determines visual styling and ARIA semantics. */\ntype AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * A feedback component for communicating status messages, warnings, and errors.\n * Critical for healthcare patient safety alerts.\n *\n * @summary Feedback alert for status messages with variant-based styling and ARIA live regions.\n *\n * @tag hx-alert\n *\n * @slot - Default slot for alert message content.\n * @slot title - Optional title/headline for the alert.\n * @slot icon - Custom icon to override the default variant icon.\n * @slot actions - Action buttons rendered within the alert.\n *\n * @fires {CustomEvent<{reason: string}>} hx-close - Dispatched when the user dismisses the alert.\n * @fires {CustomEvent} hx-after-close - Dispatched after the alert is dismissed.\n *\n * @csspart alert - The outer alert container.\n * @csspart title - The title/headline container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n * @csspart actions - The actions container.\n *\n * @cssprop [--hx-alert-bg=var(--hx-color-info-50)] - Alert background color.\n * @cssprop [--hx-alert-color=var(--hx-color-info-800)] - Alert text color.\n * @cssprop [--hx-alert-border-color=var(--hx-color-info-200)] - Alert border color.\n * @cssprop [--hx-alert-border-radius=var(--hx-border-radius-md)] - Alert border radius.\n * @cssprop [--hx-alert-border-width=var(--hx-border-width-thin)] - Alert border width.\n * @cssprop [--hx-alert-padding=var(--hx-space-4)] - Alert padding.\n * @cssprop [--hx-alert-gap=var(--hx-space-3)] - Gap between alert elements.\n * @cssprop [--hx-alert-icon-color=var(--hx-color-info-500)] - Alert icon color.\n * @cssprop [--hx-alert-font-family=var(--hx-font-family-sans)] - Alert font family.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-alert-accent-width=4px] - Width of the left border accent stripe.\n */\n@customElement('hx-alert')\nexport class HelixAlert extends LitElement {\n  static override styles = [tokenStyles, helixAlertStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Visual variant of the alert that determines colors and ARIA semantics.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: AlertVariant = 'info';\n\n  /**\n   * Whether the alert can be dismissed by the user.\n   * @attr dismissible\n   */\n  @property({ type: Boolean, reflect: true })\n  dismissible = false;\n\n  /**\n   * Whether the alert is visible. Set to false to hide the alert.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * Whether to show the default variant icon. Set to false to hide the icon container entirely.\n   * Note: Boolean attribute semantics apply — the attribute must be absent (not set to \"false\")\n   * to hide the icon. `<hx-alert show-icon=\"false\">` still shows the icon because the attribute\n   * is present; use `<hx-alert>` (attribute absent) or `el.showIcon = false` to hide it.\n   * @attr show-icon\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-icon' })\n  showIcon = true;\n\n  /**\n   * When true, applies a left border accent stripe instead of a full border.\n   * Common healthcare/enterprise dashboard pattern for visual distinction of alert types.\n   * @attr accent\n   */\n  @property({ type: Boolean, reflect: true })\n  accent = false;\n\n  /**\n   * CSS selector for the element to return focus to after the alert is dismissed.\n   * When set, the component will find and focus the matching element after dismissal.\n   * If not set, focus management is the caller's responsibility via the hx-after-close event.\n   * @attr return-focus-to\n   */\n  @property({ type: String, attribute: 'return-focus-to' })\n  returnFocusTo: string | null = null;\n\n  // ─── State ───\n\n  @state()\n  private _hasActions = false;\n\n  @state()\n  private _hasTitle = false;\n\n  // ─── Private Handler References ───\n\n  private _actionsSlotChangeHandler: (() => void) | null = null;\n  private _titleSlotChangeHandler: (() => void) | null = null;\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  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n    if (actionsSlot && this._actionsSlotChangeHandler) {\n      actionsSlot.removeEventListener('slotchange', this._actionsSlotChangeHandler);\n    }\n    const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n    if (titleSlot && this._titleSlotChangeHandler) {\n      titleSlot.removeEventListener('slotchange', this._titleSlotChangeHandler);\n    }\n  }\n\n  override firstUpdated(): void {\n    // Track actions slot content to avoid invisible spacing when no actions are slotted.\n    const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n    if (actionsSlot) {\n      this._actionsSlotChangeHandler = () => {\n        this._hasActions = actionsSlot.assignedNodes({ flatten: true }).length > 0;\n      };\n      actionsSlot.addEventListener('slotchange', this._actionsSlotChangeHandler);\n    }\n\n    // Track title slot content so the title container doesn't create dead space when empty.\n    const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n    if (titleSlot) {\n      this._titleSlotChangeHandler = () => {\n        this._hasTitle = titleSlot.assignedNodes({ flatten: true }).length > 0;\n      };\n      titleSlot.addEventListener('slotchange', this._titleSlotChangeHandler);\n    }\n  }\n\n  protected override updated(changedProperties: 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  // ─── Event Handling ───\n\n  private _handleDismiss(): void {\n    this.open = false;\n\n    /**\n     * Dispatched when the user dismisses the alert.\n     * @event hx-close\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-close', {\n        bubbles: true,\n        composed: true,\n        detail: { reason: 'user' },\n      }),\n    );\n\n    /**\n     * Dispatched after the alert is dismissed.\n     * @event hx-after-close\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-after-close', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    // Return focus to a designated element if specified via returnFocusTo.\n    if (this.returnFocusTo) {\n      const target = document.querySelector(this.returnFocusTo);\n      if (target instanceof HTMLElement) {\n        target.focus();\n      }\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      alert: true,\n      [`alert--${this.variant}`]: true,\n      'alert--accent': this.accent,\n    };\n\n    return html`\n      <div part=\"alert\" class=${classMap(classes)}>\n        ${this.showIcon\n          ? html`\n              <div part=\"icon\" class=\"alert__icon\">\n                <slot name=\"icon\">${this._renderDefaultIcon()}</slot>\n              </div>\n            `\n          : nothing}\n\n        <div part=\"message\" class=\"alert__message\">\n          <div part=\"title\" class=\"alert__title ${this._hasTitle ? 'alert__title--visible' : ''}\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot></slot>\n          <div\n            part=\"actions\"\n            class=\"alert__actions ${this._hasActions ? 'alert__actions--visible' : ''}\"\n          >\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n\n        ${this.dismissible\n          ? html`\n              <button\n                part=\"close-button\"\n                class=\"alert__close-button\"\n                aria-label=\"Close\"\n                @click=${this._handleDismiss}\n              >\n                ${this._renderCloseIcon()}\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-alert': HelixAlert;\n  }\n}\n\nexport type { HelixAlert as HxAlert };\n"],"names":["helixAlertStyles","css","HelixAlert","LitElement","actionsSlot","titleSlot","changedProperties","html","target","classes","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-avatar-DoHGMrj7.js

@@ -0,0 +1,238 @@
+import { css as _, LitElement as b, html as c, nothing as d } from "lit";
+import { property as l, state as v, customElement as z } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { t as y } from "./lit-Dpo7RLp4.js";
+const S = _`
+  :host {
+    display: inline-block;
+  }
+
+  /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */
+  .avatar-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: var(--hx-avatar-size);
+    height: var(--hx-avatar-size);
+    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));
+    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+    border-radius: var(--hx-avatar-border-radius);
+    flex-shrink: 0;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .avatar--xs {
+    --hx-avatar-size: var(--hx-size-6, 1.5rem);
+    --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);
+  }
+
+  .avatar--sm {
+    --hx-avatar-size: var(--hx-size-8, 2rem);
+    --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  .avatar--md {
+    --hx-avatar-size: var(--hx-size-10, 2.5rem);
+    --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .avatar--lg {
+    --hx-avatar-size: var(--hx-size-12, 3rem);
+    --hx-avatar-font-size: var(--hx-font-size-base, 1rem);
+  }
+
+  .avatar--xl {
+    --hx-avatar-size: var(--hx-size-16, 4rem);
+    --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);
+  }
+
+  /* ─── Shape Variants ─── */
+
+  .avatar--circle {
+    --hx-avatar-border-radius: 50%;
+  }
+
+  .avatar--square {
+    --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  /* ─── Image ─── */
+
+  .avatar__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  /* ─── Initials ─── */
+
+  .avatar__initials {
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-avatar-font-size);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
+    user-select: none;
+  }
+
+  /* ─── Fallback Icon ─── */
+
+  .avatar__fallback-icon {
+    width: 60%;
+    height: 60%;
+    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+  }
+
+  /* ─── Badge Slot ─── */
+
+  /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */
+  .avatar__badge {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
+  /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */
+  .avatar__badge--hidden {
+    display: none;
+  }
+`;
+var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (a, e, r, t) => {
+  for (var o = t > 1 ? void 0 : t ? E(e, r) : e, n = a.length - 1, h; n >= 0; n--)
+    (h = a[n]) && (o = (t ? h(e, r, o) : h(o)) || o);
+  return t && o && w(e, r, o), o;
+};
+let s = class extends b {
+  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;
+  }
+  // ─── Lifecycle ───
+  updated(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.'
+    );
+    const e = ["xs", "sm", "md", "lg", "xl"];
+    a.has("size") && !e.includes(this.size) && console.warn(
+      `[hx-avatar] Invalid hx-size="${String(this.size)}". Valid values: xs, sm, md, lg, xl. Rendering with "md".`
+    );
+    const r = ["circle", "square"];
+    a.has("shape") && !r.includes(this.shape) && console.warn(
+      `[hx-avatar] Invalid shape="${String(this.shape)}". Valid values: circle, square. Rendering with "circle".`
+    );
+  }
+  // ─── Slot Change Handling ───
+  _handleSlotChange(a) {
+    const r = a.target.assignedNodes({ flatten: !0 });
+    this._hasDefaultSlot = r.some((t) => t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1);
+  }
+  _handleBadgeSlotChange(a) {
+    const r = a.target.assignedNodes({ flatten: !0 });
+    this._hasBadgeSlot = r.some((t) => t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1);
+  }
+  // ─── Image Error Handling ───
+  _handleImgError() {
+    this._imgError = !0;
+  }
+  // ─── Fallback Icon ───
+  _renderFallbackIcon() {
+    return c`
+      <svg
+        part="fallback-icon"
+        class="avatar__fallback-icon"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        fill="currentColor"
+      >
+        <path
+          d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"
+        />
+      </svg>
+    `;
+  }
+  // ─── Render ───
+  render() {
+    const a = this.src, e = this._hasDefaultSlot, r = !e && !!a && !this._imgError, t = !e && !r && !!this.initials.trim(), o = !e && !r && !t, n = r ? this.alt || this.label || "Avatar" : t ? this.label || this.initials : this.label || "Avatar", h = ["xs", "sm", "md", "lg", "xl"], g = ["circle", "square"], m = h.includes(this.size) ? this.size : "md", x = g.includes(this.shape) ? this.shape : "circle", f = {
+      avatar: !0,
+      [`avatar--${m}`]: !0,
+      [`avatar--${x}`]: !0
+    }, u = {
+      avatar__badge: !0,
+      "avatar__badge--hidden": !this._hasBadgeSlot
+    };
+    return c`
+      <div class="avatar-wrapper">
+        <div
+          part="avatar"
+          class=${p(f)}
+          role=${e ? d : "img"}
+          aria-label=${e ? d : n}
+        >
+          <slot @slotchange=${this._handleSlotChange}></slot>
+          ${r && a ? c`<img
+                part="image"
+                class="avatar__image"
+                src=${a}
+                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}
+          ${o ? this._renderFallbackIcon() : d}
+        </div>
+        <span part="badge" class=${p(u)}>
+          <slot name="badge" @slotchange=${this._handleBadgeSlotChange}></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+s.styles = [y, S];
+i([
+  l({ type: String })
+], s.prototype, "src", 2);
+i([
+  l({ type: String })
+], s.prototype, "alt", 2);
+i([
+  l({ type: String })
+], s.prototype, "label", 2);
+i([
+  l({ type: String })
+], s.prototype, "initials", 2);
+i([
+  l({ type: String, reflect: !0, attribute: "hx-size" })
+], s.prototype, "size", 2);
+i([
+  l({ type: String, reflect: !0 })
+], s.prototype, "shape", 2);
+i([
+  v()
+], s.prototype, "_imgError", 2);
+i([
+  v()
+], s.prototype, "_hasDefaultSlot", 2);
+i([
+  v()
+], s.prototype, "_hasBadgeSlot", 2);
+s = i([
+  z("hx-avatar")
+], s);
+export {
+  s as H
+};
+//# sourceMappingURL=hx-avatar-DoHGMrj7.js.map