@helixui/library 1.0.0 → 1.1.1

package/dist/shared/toast-factory-B8jicczW.js

@@ -1,426 +0,0 @@
-import { css as u, LitElement as d, nothing as b, html as m } from "lit";
-import { property as l, customElement as f } from "lit/decorators.js";
-import { classMap as x } from "lit/directives/class-map.js";
-import { tokenStyles as v } from "@helixui/tokens/lit";
-const g = u`
-  /* ─── hx-toast host ─── */
-
-  :host {
-    display: block;
-    pointer-events: none;
-  }
-
-  :host([open]) {
-    pointer-events: auto;
-  }
-
-  /* ─── Toast base ─── */
-
-  .toast {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--hx-space-3, 0.75rem);
-    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
-    border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));
-    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);
-    box-shadow: var(
-      --hx-toast-shadow,
-      0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1)
-    );
-    opacity: 0;
-    transform: translateY(var(--hx-toast-enter-translate, var(--hx-space-2, 0.5rem)));
-    transition:
-      opacity var(--hx-transition-normal, 250ms ease),
-      transform var(--hx-transition-normal, 250ms ease);
-    width: var(--hx-toast-width, 20rem);
-    max-width: 100%;
-    pointer-events: auto;
-  }
-
-  :host([open]) .toast {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  /* ─── Variant overrides ─── */
-
-  .toast--success {
-    --hx-toast-bg: var(--hx-color-success-600, #16a34a);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
-  }
-
-  .toast--warning {
-    --hx-toast-bg: var(--hx-color-warning-500, #f59e0b);
-    --hx-toast-color: var(--hx-color-neutral-900, #0f172a);
-  }
-
-  .toast--danger {
-    --hx-toast-bg: var(--hx-color-error-600, #dc2626);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
-  }
-
-  .toast--info {
-    --hx-toast-bg: var(--hx-color-primary-600, #2563eb);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
-  }
-
-  /* ─── Icon ─── */
-
-  .toast__icon {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-  }
-
-  .toast__icon:empty {
-    display: none;
-  }
-
-  /* ─── Message ─── */
-
-  .toast__message {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  /* ─── Action slot ─── */
-
-  .toast__action {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .toast__action:empty {
-    display: none;
-  }
-
-  /* ─── Close button ─── */
-
-  .toast__close {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--hx-space-1, 0.25rem);
-    background: transparent;
-    border: none;
-    border-radius: var(--hx-border-radius-sm, 0.25rem);
-    color: inherit;
-    cursor: pointer;
-    opacity: 0.7;
-    transition: opacity var(--hx-transition-fast, 150ms ease);
-  }
-
-  .toast__close:hover {
-    opacity: 1;
-  }
-
-  .toast__close:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid currentColor;
-    outline-offset: var(--hx-focus-ring-offset, 2px);
-  }
-
-  /* ─── Reduced motion ─── */
-
-  @media (prefers-reduced-motion: reduce) {
-    .toast {
-      transition: none;
-    }
-  }
-`, y = u`
-  :host {
-    display: block;
-    position: fixed;
-    z-index: var(--hx-z-index-toast, 9000);
-    pointer-events: none;
-  }
-
-  .toast-stack {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-space-3, 0.75rem);
-    padding: var(--hx-space-4, 1rem);
-    pointer-events: none;
-  }
-
-  /* ─── Placements ─── */
-
-  :host([placement='top-start']) {
-    top: 0;
-    left: 0;
-    right: auto;
-    bottom: auto;
-  }
-
-  :host([placement='top-center']) {
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    right: auto;
-    bottom: auto;
-  }
-
-  :host([placement='top-end']) {
-    top: 0;
-    right: 0;
-    left: auto;
-    bottom: auto;
-  }
-
-  :host([placement='bottom-start']) {
-    bottom: 0;
-    left: 0;
-    right: auto;
-    top: auto;
-  }
-
-  :host([placement='bottom-center']) {
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    right: auto;
-    top: auto;
-  }
-
-  :host([placement='bottom-end']) {
-    bottom: 0;
-    right: 0;
-    left: auto;
-    top: auto;
-  }
-
-  /* ─── Bottom placements: reverse order so newest is on top ─── */
-
-  :host([placement^='bottom']) .toast-stack {
-    flex-direction: column-reverse;
-  }
-
-  /* ─── Slide direction by placement ─── */
-
-  :host([placement^='top']) ::slotted(hx-toast) {
-    --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);
-  }
-`;
-var w = Object.defineProperty, T = Object.getOwnPropertyDescriptor, h = (a, o, s, e) => {
-  for (var t = e > 1 ? void 0 : e ? T(o, s) : o, r = a.length - 1, i; r >= 0; r--)
-    (i = a[r]) && (t = (e ? i(o, s, t) : i(t)) || t);
-  return e && t && w(o, s, t), t;
-};
-let n = class extends d {
-  constructor() {
-    super(...arguments), this.variant = "default", this.duration = 3e3, this.closable = !1, this.open = !1, this.closeLabel = "Dismiss notification", this._timer = null, this._timerStartedAt = null, this._timerRemaining = null;
-  }
-  // ─── Lifecycle ───
-  updated(a) {
-    a.has("open") && (this.open ? (this.removeAttribute("aria-hidden"), this._emitShow(), this.duration > 0 && this._startTimer()) : (this.setAttribute("aria-hidden", "true"), this._clearTimer(), this._emitHide()));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._clearTimer();
-  }
-  // ─── Public API ───
-  /** Show the toast. */
-  show() {
-    this.open || (this.open = !0);
-  }
-  /** Hide the toast. */
-  hide() {
-    this.open && (this.open = !1);
-  }
-  // ─── Private Helpers ───
-  /** @internal */
-  _startTimer(a) {
-    this._clearTimerHandle();
-    const o = a ?? this.duration;
-    this._timerStartedAt = Date.now(), this._timerRemaining = o, this._timer = setTimeout(() => {
-      this.open = !1;
-    }, o);
-  }
-  /** @internal */
-  _pauseTimer() {
-    if (this._timer === null || this._timerStartedAt === null || this._timerRemaining === null)
-      return;
-    const a = Date.now() - this._timerStartedAt;
-    this._timerRemaining = Math.max(0, this._timerRemaining - a), this._clearTimerHandle();
-  }
-  /** @internal */
-  _clearTimerHandle() {
-    this._timer !== null && (clearTimeout(this._timer), this._timer = null);
-  }
-  /** @internal */
-  _clearTimer() {
-    this._clearTimerHandle(), this._timerStartedAt = null, this._timerRemaining = null;
-  }
-  /** @internal */
-  _emitShow() {
-    this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 }));
-  }
-  /** @internal */
-  _emitHide() {
-    var e;
-    this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 }));
-    let a = !1;
-    const o = () => {
-      a || (a = !0, this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })));
-    }, s = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".toast");
-    s && s.addEventListener("transitionend", o, { once: !0 }), setTimeout(o, 300);
-  }
-  // ─── Event Handlers ───
-  /** @internal */
-  _handleMouseEnter() {
-    this._pauseTimer();
-  }
-  /** @internal */
-  _handleMouseLeave() {
-    this.open && this.duration > 0 && this._startTimer(this._timerRemaining ?? void 0);
-  }
-  /** @internal */
-  _handleFocusIn() {
-    this._pauseTimer();
-  }
-  /** @internal */
-  _handleFocusOut() {
-    this.open && this.duration > 0 && this._startTimer(this._timerRemaining ?? void 0);
-  }
-  /** @internal */
-  _handleClose() {
-    this.hide();
-  }
-  // ─── ARIA Helpers ───
-  /** @internal */
-  get _role() {
-    return this.variant === "danger" ? "alert" : "status";
-  }
-  /** @internal */
-  get _ariaLive() {
-    return this.variant === "danger" ? "assertive" : "polite";
-  }
-  // ─── Render ───
-  render() {
-    return m`
-      <div
-        part="base"
-        class=${x({
-      toast: !0,
-      [`toast--${this.variant}`]: !0
-    })}
-        role=${this._role}
-        aria-live=${this._ariaLive}
-        aria-atomic="true"
-        @mouseenter=${this._handleMouseEnter}
-        @mouseleave=${this._handleMouseLeave}
-        @focusin=${this._handleFocusIn}
-        @focusout=${this._handleFocusOut}
-      >
-        <span part="icon" class="toast__icon">
-          <slot name="icon"></slot>
-        </span>
-        <span part="message" class="toast__message">
-          <slot></slot>
-        </span>
-        <span part="action" class="toast__action">
-          <slot name="action"></slot>
-        </span>
-        ${this.closable ? m`
-              <button
-                part="close-button"
-                class="toast__close"
-                aria-label=${this.closeLabel}
-                @click=${this._handleClose}
-              >
-                <svg
-                  aria-hidden="true"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M18 6L6 18M6 6l12 12" />
-                </svg>
-              </button>
-            ` : b}
-      </div>
-    `;
-  }
-};
-n.styles = [v, g];
-h([
-  l({ type: String, reflect: !0 })
-], n.prototype, "variant", 2);
-h([
-  l({ type: Number })
-], n.prototype, "duration", 2);
-h([
-  l({ type: Boolean, reflect: !0 })
-], n.prototype, "closable", 2);
-h([
-  l({ type: Boolean, reflect: !0 })
-], n.prototype, "open", 2);
-h([
-  l({ attribute: "close-label" })
-], n.prototype, "closeLabel", 2);
-n = h([
-  f("hx-toast")
-], n);
-var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, p = (a, o, s, e) => {
-  for (var t = e > 1 ? void 0 : e ? S(o, s) : o, r = a.length - 1, i; r >= 0; r--)
-    (i = a[r]) && (t = (e ? i(o, s, t) : i(t)) || t);
-  return e && t && k(o, s, t), t;
-};
-let c = class extends d {
-  constructor() {
-    super(...arguments), this.placement = "bottom-end", this.stackLimit = 3;
-  }
-  render() {
-    return m`
-      <div
-        part="base"
-        class=${x({
-      "toast-stack": !0,
-      [`toast-stack--${this.placement}`]: !0
-    })}
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-c.styles = [v, y];
-p([
-  l({ type: String, reflect: !0 })
-], c.prototype, "placement", 2);
-p([
-  l({ type: Number, attribute: "stack-limit" })
-], c.prototype, "stackLimit", 2);
-c = p([
-  f("hx-toast-stack")
-], c);
-function A(a) {
-  var r;
-  const o = a.placement ?? "bottom-end", s = `hx-toast-stack[placement="${o}"]`;
-  let e = document.querySelector(s);
-  if (e || (e = document.createElement("hx-toast-stack"), e.placement = o, document.body.appendChild(e)), e.stackLimit > 0) {
-    const i = [...e.querySelectorAll("hx-toast")].filter((_) => _.open);
-    i.length >= e.stackLimit && ((r = i[0]) == null || r.hide());
-  }
-  const t = document.createElement("hx-toast");
-  return t.variant = a.variant ?? "default", t.duration = a.duration ?? 3e3, t.closable = !0, t.textContent = a.message, t.addEventListener("hx-after-hide", () => {
-    t.remove();
-  }), e.appendChild(t), t.show(), t;
-}
-export {
-  n as H,
-  c as a,
-  A as t
-};
-//# sourceMappingURL=toast-factory-B8jicczW.js.map

package/dist/shared/toast-factory-B8jicczW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toast-factory-B8jicczW.js","sources":["../../src/components/hx-toast/hx-toast.styles.ts","../../src/components/hx-toast/hx-toast.ts","../../src/components/hx-toast/hx-toast-stack.ts","../../src/components/hx-toast/toast-factory.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToastStyles = css`\n  /* ─── hx-toast host ─── */\n\n  :host {\n    display: block;\n    pointer-events: none;\n  }\n\n  :host([open]) {\n    pointer-events: auto;\n  }\n\n  /* ─── Toast base ─── */\n\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));\n    color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));\n    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    box-shadow: var(\n      --hx-toast-shadow,\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1)\n    );\n    opacity: 0;\n    transform: translateY(var(--hx-toast-enter-translate, var(--hx-space-2, 0.5rem)));\n    transition:\n      opacity var(--hx-transition-normal, 250ms ease),\n      transform var(--hx-transition-normal, 250ms ease);\n    width: var(--hx-toast-width, 20rem);\n    max-width: 100%;\n    pointer-events: auto;\n  }\n\n  :host([open]) .toast {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  /* ─── Variant overrides ─── */\n\n  .toast--success {\n    --hx-toast-bg: var(--hx-color-success-600, #16a34a);\n    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .toast--warning {\n    --hx-toast-bg: var(--hx-color-warning-500, #f59e0b);\n    --hx-toast-color: var(--hx-color-neutral-900, #0f172a);\n  }\n\n  .toast--danger {\n    --hx-toast-bg: var(--hx-color-error-600, #dc2626);\n    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .toast--info {\n    --hx-toast-bg: var(--hx-color-primary-600, #2563eb);\n    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  /* ─── Icon ─── */\n\n  .toast__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    line-height: 1;\n  }\n\n  .toast__icon:empty {\n    display: none;\n  }\n\n  /* ─── Message ─── */\n\n  .toast__message {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* ─── Action slot ─── */\n\n  .toast__action {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .toast__action:empty {\n    display: none;\n  }\n\n  /* ─── Close button ─── */\n\n  .toast__close {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--hx-space-1, 0.25rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    color: inherit;\n    cursor: pointer;\n    opacity: 0.7;\n    transition: opacity var(--hx-transition-fast, 150ms ease);\n  }\n\n  .toast__close:hover {\n    opacity: 1;\n  }\n\n  .toast__close:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid currentColor;\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .toast {\n      transition: none;\n    }\n  }\n`;\n\nexport const helixToastStackStyles = css`\n  :host {\n    display: block;\n    position: fixed;\n    z-index: var(--hx-z-index-toast, 9000);\n    pointer-events: none;\n  }\n\n  .toast-stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-space-4, 1rem);\n    pointer-events: none;\n  }\n\n  /* ─── Placements ─── */\n\n  :host([placement='top-start']) {\n    top: 0;\n    left: 0;\n    right: auto;\n    bottom: auto;\n  }\n\n  :host([placement='top-center']) {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    right: auto;\n    bottom: auto;\n  }\n\n  :host([placement='top-end']) {\n    top: 0;\n    right: 0;\n    left: auto;\n    bottom: auto;\n  }\n\n  :host([placement='bottom-start']) {\n    bottom: 0;\n    left: 0;\n    right: auto;\n    top: auto;\n  }\n\n  :host([placement='bottom-center']) {\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    right: auto;\n    top: auto;\n  }\n\n  :host([placement='bottom-end']) {\n    bottom: 0;\n    right: 0;\n    left: auto;\n    top: auto;\n  }\n\n  /* ─── Bottom placements: reverse order so newest is on top ─── */\n\n  :host([placement^='bottom']) .toast-stack {\n    flex-direction: column-reverse;\n  }\n\n  /* ─── Slide direction by placement ─── */\n\n  :host([placement^='top']) ::slotted(hx-toast) {\n    --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);\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 { tokenStyles } from '@helixui/tokens/lit';\nimport { helixToastStyles } from './hx-toast.styles.js';\n\nexport type ToastVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * A transient notification message that auto-dismisses after a configurable duration.\n * Supports multiple visual variants, a closable button, icon/action slots, and full\n * ARIA live region semantics for screen readers.\n *\n * @summary Transient notification toast component.\n *\n * @tag hx-toast\n *\n * @slot - Default slot for the notification message.\n * @slot icon - Optional icon rendered before the message.\n * @slot action - Optional action button rendered after the message.\n *\n * @fires {CustomEvent} hx-show - Dispatched when the toast becomes visible.\n * @fires {CustomEvent} hx-hide - Dispatched when the toast begins hiding.\n * @fires {CustomEvent} hx-after-hide - Dispatched after the hide animation completes.\n *\n * @csspart base - The inner toast container div.\n * @csspart icon - The icon slot wrapper.\n * @csspart message - The message slot wrapper.\n * @csspart close-button - The dismiss button (only when closable).\n * @csspart action - The action slot wrapper.\n *\n * @cssprop [--hx-toast-bg=var(--hx-color-neutral-900)] - Toast background color.\n * @cssprop [--hx-toast-color=var(--hx-color-neutral-0)] - Toast text color.\n * @cssprop [--hx-toast-border-radius=var(--hx-border-radius-md)] - Toast border radius.\n * @cssprop [--hx-toast-shadow] - Toast box shadow.\n * @cssprop [--hx-toast-width=20rem] - Toast width.\n */\n@customElement('hx-toast')\nexport class HelixToast extends LitElement {\n  static override styles = [tokenStyles, helixToastStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Visual style variant.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: ToastVariant = 'default';\n\n  /**\n   * Auto-dismiss duration in milliseconds. Set to 0 for persistent toasts.\n   * @attr duration\n   */\n  @property({ type: Number })\n  duration = 3000;\n\n  /**\n   * Whether to show a close button.\n   * @attr closable\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * Whether the toast is currently visible.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Accessible label for the close button. Override for localization.\n   * @attr close-label\n   */\n  @property({ attribute: 'close-label' })\n  closeLabel = 'Dismiss notification';\n\n  // ─── Private State ───\n\n  /** @internal */\n  private _timer: ReturnType<typeof setTimeout> | null = null;\n\n  /** @internal */\n  private _timerStartedAt: number | null = null;\n\n  /** @internal */\n  private _timerRemaining: number | null = null;\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<PropertyKey, unknown>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.removeAttribute('aria-hidden');\n        this._emitShow();\n        if (this.duration > 0) {\n          this._startTimer();\n        }\n      } else {\n        this.setAttribute('aria-hidden', 'true');\n        this._clearTimer();\n        this._emitHide();\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearTimer();\n  }\n\n  // ─── Public API ───\n\n  /** Show the toast. */\n  show(): void {\n    if (!this.open) {\n      this.open = true;\n    }\n  }\n\n  /** Hide the toast. */\n  hide(): void {\n    if (this.open) {\n      this.open = false;\n    }\n  }\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private _startTimer(remaining?: number): void {\n    this._clearTimerHandle();\n    const delay = remaining ?? this.duration;\n    this._timerStartedAt = Date.now();\n    this._timerRemaining = delay;\n    this._timer = setTimeout(() => {\n      this.open = false;\n    }, delay);\n  }\n\n  /** @internal */\n  private _pauseTimer(): void {\n    if (this._timer === null || this._timerStartedAt === null || this._timerRemaining === null) {\n      return;\n    }\n    const elapsed = Date.now() - this._timerStartedAt;\n    this._timerRemaining = Math.max(0, this._timerRemaining - elapsed);\n    this._clearTimerHandle();\n  }\n\n  /** @internal */\n  private _clearTimerHandle(): void {\n    if (this._timer !== null) {\n      clearTimeout(this._timer);\n      this._timer = null;\n    }\n  }\n\n  /** @internal */\n  private _clearTimer(): void {\n    this._clearTimerHandle();\n    this._timerStartedAt = null;\n    this._timerRemaining = null;\n  }\n\n  /** @internal */\n  private _emitShow(): void {\n    this.dispatchEvent(new CustomEvent('hx-show', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _emitHide(): void {\n    this.dispatchEvent(new CustomEvent('hx-hide', { bubbles: true, composed: true }));\n\n    let fired = false;\n    const fireAfterHide = () => {\n      if (fired) return;\n      fired = true;\n      this.dispatchEvent(new CustomEvent('hx-after-hide', { bubbles: true, composed: true }));\n    };\n\n    // Fire on transitionend if available; fallback ensures it fires in test environments\n    // and when transitions are disabled (prefers-reduced-motion, no CSS transitions).\n    const base = this.shadowRoot?.querySelector('.toast');\n    if (base) {\n      base.addEventListener('transitionend', fireAfterHide, { once: true });\n    }\n    // Fallback fires after the CSS transition duration (250ms) plus a small buffer.\n    setTimeout(fireAfterHide, 300);\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleMouseEnter(): void {\n    this._pauseTimer();\n  }\n\n  /** @internal */\n  private _handleMouseLeave(): void {\n    if (this.open && this.duration > 0) {\n      this._startTimer(this._timerRemaining ?? undefined);\n    }\n  }\n\n  /** @internal */\n  private _handleFocusIn(): void {\n    this._pauseTimer();\n  }\n\n  /** @internal */\n  private _handleFocusOut(): void {\n    if (this.open && this.duration > 0) {\n      this._startTimer(this._timerRemaining ?? undefined);\n    }\n  }\n\n  /** @internal */\n  private _handleClose(): void {\n    this.hide();\n  }\n\n  // ─── ARIA Helpers ───\n\n  /** @internal */\n  private get _role(): 'alert' | 'status' {\n    return this.variant === 'danger' ? 'alert' : 'status';\n  }\n\n  /** @internal */\n  private get _ariaLive(): 'assertive' | 'polite' {\n    return this.variant === 'danger' ? 'assertive' : 'polite';\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          toast: true,\n          [`toast--${this.variant}`]: true,\n        })}\n        role=${this._role}\n        aria-live=${this._ariaLive}\n        aria-atomic=\"true\"\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n        @focusin=${this._handleFocusIn}\n        @focusout=${this._handleFocusOut}\n      >\n        <span part=\"icon\" class=\"toast__icon\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span part=\"message\" class=\"toast__message\">\n          <slot></slot>\n        </span>\n        <span part=\"action\" class=\"toast__action\">\n          <slot name=\"action\"></slot>\n        </span>\n        ${this.closable\n          ? html`\n              <button\n                part=\"close-button\"\n                class=\"toast__close\"\n                aria-label=${this.closeLabel}\n                @click=${this._handleClose}\n              >\n                <svg\n                  aria-hidden=\"true\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <path d=\"M18 6L6 18M6 6l12 12\" />\n                </svg>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toast': HelixToast;\n  }\n}\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixToastStackStyles } from './hx-toast.styles.js';\n\nexport type ToastStackPlacement =\n  | 'top-start'\n  | 'top-center'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-center'\n  | 'bottom-end';\n\n/**\n * A fixed-position container that stacks `hx-toast` elements at the specified\n * corner of the viewport. Enforces a maximum visible toast count via `stack-limit`.\n *\n * @summary Toast stack container managing position and count limits.\n *\n * @tag hx-toast-stack\n *\n * @slot - Accepts `hx-toast` elements.\n *\n * @csspart base - The inner stack container div.\n *\n * @cssprop [--hx-z-index-toast=9000] - Z-index for the fixed stack.\n */\n@customElement('hx-toast-stack')\nexport class HelixToastStack extends LitElement {\n  static override styles = [tokenStyles, helixToastStackStyles];\n\n  /**\n   * Corner of the viewport where toasts appear.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement: ToastStackPlacement = 'bottom-end';\n\n  /**\n   * Maximum number of simultaneously visible toasts. 0 = unlimited.\n   * @attr stack-limit\n   */\n  @property({ type: Number, attribute: 'stack-limit' })\n  stackLimit = 3;\n\n  override render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'toast-stack': true,\n          [`toast-stack--${this.placement}`]: true,\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toast-stack': HelixToastStack;\n  }\n}\n","import { HelixToast } from './hx-toast.js';\nimport { HelixToastStack } from './hx-toast-stack.js';\nimport type { ToastVariant } from './hx-toast.js';\nimport type { ToastStackPlacement } from './hx-toast-stack.js';\n\nexport interface ToastOptions {\n  /** The notification message text. */\n  message: string;\n  /** Visual variant. Defaults to 'default'. */\n  variant?: ToastVariant;\n  /** Auto-dismiss duration in ms. 0 = persistent. Defaults to 3000. */\n  duration?: number;\n  /** Placement of the shared stack. Defaults to 'bottom-end'. */\n  placement?: ToastStackPlacement;\n}\n\n/**\n * Imperatively create and display a toast notification.\n *\n * Creates a shared `hx-toast-stack` on `document.body` if one does not exist,\n * then appends a new `hx-toast` with the given options. Respects the stack's\n * `stackLimit` by hiding the oldest visible toast when the limit is exceeded.\n *\n * @example\n * import { toast } from '@helixui/library/components/hx-toast/index.js';\n * toast({ message: 'Patient record saved.', variant: 'success' });\n */\nexport function toast(options: ToastOptions): HelixToast {\n  const placement = options.placement ?? 'bottom-end';\n\n  // Find or create a dedicated stack for this placement\n  const stackSelector = `hx-toast-stack[placement=\"${placement}\"]`;\n  let stack = document.querySelector<HelixToastStack>(stackSelector);\n  if (!stack) {\n    stack = document.createElement('hx-toast-stack') as HelixToastStack;\n    stack.placement = placement;\n    // Intentional design decision: the toast stack is appended to document.body rather\n    // than inserted near the caller. This is required so that the fixed-position overlay\n    // is not clipped by an ancestor with `overflow: hidden`, `transform`, or `filter`\n    // (all of which create a new stacking context and break fixed positioning).\n    // Drupal compatibility note: Drupal's BigPipe / AJAX behaviors can re-attach the\n    // document body without removing these stacks. The selector check above\n    // (`document.querySelector`) ensures only one stack per placement is ever created,\n    // preventing duplicates on re-attach cycles.\n    document.body.appendChild(stack);\n  }\n\n  // Enforce stack limit: hide oldest open toast if at capacity\n  if (stack.stackLimit > 0) {\n    const openToasts = [...stack.querySelectorAll<HelixToast>('hx-toast')].filter((t) => t.open);\n    if (openToasts.length >= stack.stackLimit) {\n      openToasts[0]?.hide();\n    }\n  }\n\n  // Create toast element\n  const toastEl = document.createElement('hx-toast') as HelixToast;\n  toastEl.variant = options.variant ?? 'default';\n  toastEl.duration = options.duration ?? 3000;\n  toastEl.closable = true;\n  toastEl.textContent = options.message;\n\n  // Remove from DOM after hiding\n  toastEl.addEventListener('hx-after-hide', () => {\n    toastEl.remove();\n  });\n\n  stack.appendChild(toastEl);\n  toastEl.show();\n\n  return toastEl;\n}\n"],"names":["helixToastStyles","css","helixToastStackStyles","HelixToast","LitElement","changedProperties","remaining","delay","elapsed","fired","fireAfterHide","base","_a","html","classMap","nothing","tokenStyles","__decorateClass","property","customElement","HelixToastStack","toast","options","placement","stackSelector","stack","openToasts","t","toastEl"],"mappings":"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"}