sp-component 0.0.1

package/dist/components/toast/sp-toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/sp-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,EAAE,cAAc,CAAa;IAGpC,OAAO,SAAM;IAGb,QAAQ,SAAQ;IAGhB,QAAQ,EAAE,eAAe,CAAe;IAGxC,IAAI,UAAS;IAGb,QAAQ,UAAQ;IAGhB,MAAM,SAAM;IAGZ,UAAU,SAAM;IAGhB,YAAY,UAAS;IAErB,OAAO,CAAC,MAAM,CAA8C;IAC5D,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,UAAU,CAAK;IAEd,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAc9C,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,WAAW;IAOV,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,MAAM;IASd,QAAQ,CAAC,YAAY,aAAuB;IAE5C,QAAQ,CAAC,kBAAkB,GAAI,GAAG,KAAK,UAGrC;IAEF,QAAQ,CAAC,iBAAiB,aAOxB;IAEF,QAAQ,CAAC,iBAAiB,aAKxB;IAEF,kEAAkE;IAClE,QAAQ,IAAI,MAAM;IAWT,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}

package/dist/components/toast/sp-toast.js

@@ -0,0 +1,88 @@
+import { unsafeCSS as l, LitElement as m } from "lit";
+import { property as s, customElement as u } from "lit/decorators.js";
+import c from "./sp-toast.css.js";
+import { toastTemplate as _ } from "./sp-toast.template.js";
+var f = Object.defineProperty, d = Object.getOwnPropertyDescriptor, e = (i, o, a, n) => {
+  for (var r = n > 1 ? void 0 : n ? d(o, a) : o, p = i.length - 1, h; p >= 0; p--)
+    (h = i[p]) && (r = (n ? h(o, a, r) : h(r)) || r);
+  return n && r && f(o, a, r), r;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.variant = "neutral", this.message = "", this.duration = 4e3, this.position = "top-right", this.open = !1, this.closable = !0, this.action = "", this.actionHref = "", this.pauseOnHover = !1, this._timer = null, this._pausedAt = null, this._remainingTime = 0, this._startTime = 0, this._handleClose = () => this._close(), this._handleActionClick = (i) => {
+      i.preventDefault(), this.dispatchEvent(new CustomEvent("sp-action", { bubbles: !0, composed: !0 }));
+    }, this._handleMouseEnter = () => {
+      if (!(!this.pauseOnHover || !this.open || this.duration <= 0) && this._timer) {
+        const i = Date.now() - this._startTime;
+        this._remainingTime = Math.max(0, this._remainingTime - i), this._clearTimer();
+      }
+    }, this._handleMouseLeave = () => {
+      !this.pauseOnHover || !this.open || this.duration <= 0 || !this._timer && this._remainingTime > 0 && this._startTimer();
+    };
+  }
+  updated(i) {
+    i.has("open") && (this.open ? (this.dispatchEvent(new CustomEvent("sp-show", { bubbles: !0, composed: !0 })), this.duration > 0 && (this._remainingTime = this.duration, this._startTimer())) : this._clearTimer());
+  }
+  _startTimer() {
+    this._clearTimer(), this._startTime = Date.now(), this._timer = setTimeout(() => this._close(), this._remainingTime);
+  }
+  _clearTimer() {
+    this._timer && (clearTimeout(this._timer), this._timer = null);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._clearTimer();
+  }
+  _close() {
+    this.open = !1, this.dispatchEvent(new CustomEvent("sp-hide", { bubbles: !0, composed: !0 })), setTimeout(
+      () => this.dispatchEvent(new CustomEvent("sp-after-hide", { bubbles: !0, composed: !0 })),
+      300
+    );
+  }
+  /** Returns the unicode icon character for the current variant. */
+  _getIcon() {
+    return {
+      neutral: "•",
+      info: "ℹ",
+      success: "✓",
+      warning: "⚠",
+      error: "✕"
+    }[this.variant];
+  }
+  render() {
+    return _.call(this);
+  }
+};
+t.styles = l(c);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+e([
+  s({ type: String })
+], t.prototype, "message", 2);
+e([
+  s({ type: Number })
+], t.prototype, "duration", 2);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "position", 2);
+e([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+e([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "closable", 2);
+e([
+  s({ type: String })
+], t.prototype, "action", 2);
+e([
+  s({ type: String })
+], t.prototype, "actionHref", 2);
+e([
+  s({ type: Boolean })
+], t.prototype, "pauseOnHover", 2);
+t = e([
+  u("sp-toast")
+], t);
+export {
+  t as SpToastComponent
+};

package/dist/components/toast/sp-toast.template.d.ts

@@ -0,0 +1,9 @@
+import { TemplateResult } from 'lit';
+import { SpToastComponent } from './sp-toast.js';
+/**
+ * HTML template for sp-toast.
+ *
+ * Call as: toastTemplate.call(this) inside render()
+ */
+export declare function toastTemplate(this: SpToastComponent): TemplateResult;
+//# sourceMappingURL=sp-toast.template.d.ts.map

package/dist/components/toast/sp-toast.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-toast.template.d.ts","sourceRoot":"","sources":["../../../src/components/toast/sp-toast.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,cAAc,CA+CpE"}

package/dist/components/toast/sp-toast.template.js

@@ -0,0 +1,45 @@
+import { nothing as s, html as t } from "lit";
+import { classMap as a } from "lit/directives/class-map.js";
+function n() {
+  const o = this.duration > 0 && this.open;
+  return t`
+    <div
+      class=${a({
+    "sp-toast": !0,
+    "sp-toast--open": this.open,
+    "sp-toast--hidden": !this.open
+  })}
+      role="status"
+      aria-live="polite"
+      @mouseenter=${this._handleMouseEnter}
+      @mouseleave=${this._handleMouseLeave}
+    >
+      ${o ? t`<div
+            class="sp-toast-progress"
+            style="animation-duration: ${this.duration}ms"
+          ></div>` : s}
+      <span class="sp-toast-icon" aria-hidden="true">${this._getIcon()}</span>
+      <span class="sp-toast-message">${this.message}<slot></slot></span>
+      ${this.action ? this.actionHref ? t`<a
+              class="sp-toast-action"
+              href=${this.actionHref}
+              @click=${this._handleActionClick}
+            >${this.action}</a>` : t`<button
+              class="sp-toast-action"
+              type="button"
+              @click=${this._handleActionClick}
+            >${this.action}</button>` : s}
+      ${this.closable ? t`
+            <button
+              class="sp-toast-close"
+              type="button"
+              @click=${this._handleClose}
+              aria-label="Close"
+            >✕</button>
+          ` : s}
+    </div>
+  `;
+}
+export {
+  n as toastTemplate
+};

package/dist/components/toast/sp-toast.types.d.ts

@@ -0,0 +1,14 @@
+export type SpToastVariant = "info" | "success" | "warning" | "error" | "neutral";
+export type SpToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
+export interface SpToastProps {
+    variant: SpToastVariant;
+    message: string;
+    duration: number;
+    position: SpToastPosition;
+    open: boolean;
+    closable: boolean;
+    action: string;
+    actionHref: string;
+    pauseOnHover: boolean;
+}
+//# sourceMappingURL=sp-toast.types.d.ts.map

package/dist/components/toast/sp-toast.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-toast.types.d.ts","sourceRoot":"","sources":["../../../src/components/toast/sp-toast.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAElF,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,GACb,YAAY,GACZ,eAAe,CAAC;AAEpB,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;CACvB"}

package/dist/components/toast-stack/index.d.ts

@@ -0,0 +1,3 @@
+export { SpToastStackComponent } from './sp-toast-stack.js';
+export type { SpToastStackProps, ToastItem } from './sp-toast-stack.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/toast-stack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast-stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/toast-stack/sp-toast-stack.css.js

@@ -0,0 +1,4 @@
+const t = ":host{display:contents}.sp-toast-stack{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;padding:16px;max-width:360px;width:100%;box-sizing:border-box}.sp-toast-stack--top-left{top:0;left:0;align-items:flex-start}.sp-toast-stack--top-center{top:0;left:50%;transform:translate(-50%);align-items:center}.sp-toast-stack--top-right{top:0;right:0;align-items:flex-end}.sp-toast-stack--bottom-left{bottom:0;left:0;align-items:flex-start;flex-direction:column-reverse}.sp-toast-stack--bottom-center{bottom:0;left:50%;transform:translate(-50%);align-items:center;flex-direction:column-reverse}.sp-toast-stack--bottom-right{bottom:0;right:0;align-items:flex-end;flex-direction:column-reverse}.sp-toast-card{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;background:var(--sp-bg, #ffffff);border-radius:8px;box-shadow:0 4px 12px #00000026;border-left:4px solid transparent;pointer-events:auto;width:100%;box-sizing:border-box;animation:sp-toast-in .25s ease;position:relative}@keyframes sp-toast-in{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.sp-toast-stack--top-left .sp-toast-card,.sp-toast-stack--top-center .sp-toast-card{animation-name:sp-toast-in-top}@keyframes sp-toast-in-top{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.sp-toast-card--info{border-left-color:var(--sp-primary, #3b82f6)}.sp-toast-card--success{border-left-color:var(--sp-success, #52C41A)}.sp-toast-card--warning{border-left-color:var(--sp-warning, #FAAD14)}.sp-toast-card--error{border-left-color:var(--sp-error, #FF4D4F)}.sp-toast-icon{flex-shrink:0;width:20px;height:20px;margin-top:1px}.sp-toast-icon--info{color:var(--sp-primary, #3b82f6)}.sp-toast-icon--success{color:var(--sp-success, #52C41A)}.sp-toast-icon--warning{color:var(--sp-warning, #FAAD14)}.sp-toast-icon--error{color:var(--sp-error, #FF4D4F)}.sp-toast-content{flex:1;min-width:0}.sp-toast-title{font-size:14px;font-weight:600;color:var(--sp-text, #111827);margin:0 0 2px}.sp-toast-message{font-size:13px;color:var(--sp-text-muted, #4b5563);margin:0;line-height:1.4}.sp-toast-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:4px;background:transparent;color:var(--sp-text-placeholder, #9ca3af);cursor:pointer;font-size:16px;padding:0;flex-shrink:0;transition:background .15s,color .15s}.sp-toast-close:hover{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text-secondary, #374151)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}";
+export {
+  t as default
+};

package/dist/components/toast-stack/sp-toast-stack.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+import { SpToastVariant, SpToastPosition, ToastItem } from './sp-toast-stack.types.js';
+/**
+ * Toast stack manager component — renders a stack of toast notifications.
+ *
+ * @element sp-toast-stack
+ *
+ * @prop {SpToastPosition} position - Stack position on screen (default "bottom-right")
+ * @prop {number}          max      - Max visible toasts at once (default 5)
+ *
+ * @fires {CustomEvent<{ id: string }>} sp-show    - Emitted when a toast is shown
+ * @fires {CustomEvent<{ id: string }>} sp-dismiss - Emitted when a toast is dismissed
+ */
+export declare class SpToastStackComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    position: SpToastPosition;
+    max: number;
+    _toasts: ToastItem[];
+    private _timers;
+    render(): import('lit-html').TemplateResult;
+    /**
+     * Show a toast notification.
+     * @returns The toast id
+     */
+    show(options: {
+        message: string;
+        variant?: SpToastVariant;
+        duration?: number;
+        title?: string;
+        closable?: boolean;
+    }): string;
+    /**
+     * Dismiss a specific toast by id.
+     */
+    dismiss(id: string): void;
+    /**
+     * Dismiss all toasts.
+     */
+    dismissAll(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-toast-stack": SpToastStackComponent;
+    }
+}
+//# sourceMappingURL=sp-toast-stack.d.ts.map

package/dist/components/toast-stack/sp-toast-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-toast-stack.d.ts","sourceRoot":"","sources":["../../../src/components/toast-stack/sp-toast-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE5F;;;;;;;;;;GAUG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAAqB;IAG3C,QAAQ,EAAE,eAAe,CAAkB;IAG3C,GAAG,SAAK;IAGR,OAAO,EAAE,SAAS,EAAE,CAAM;IAE1B,OAAO,CAAC,OAAO,CAAoD;IAE1D,MAAM;IAIf;;;OAGG;IACH,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,cAAc,CAAC;QACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,GAAG,MAAM;IA6BV;;OAEG;IACH,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAqBzB;;OAEG;IACH,UAAU,IAAI,IAAI;IAQT,oBAAoB;CAI9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,qBAAqB,CAAC;KACzC;CACF"}

package/dist/components/toast-stack/sp-toast-stack.js

@@ -0,0 +1,82 @@
+import { unsafeCSS as c, LitElement as p } from "lit";
+import { property as n, state as u, customElement as h } from "lit/decorators.js";
+import d from "./sp-toast-stack.css.js";
+import { toastStackTemplate as _ } from "./sp-toast-stack.template.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (t, s, i, e) => {
+  for (var r = e > 1 ? void 0 : e ? v(s, i) : s, m = t.length - 1, l; m >= 0; m--)
+    (l = t[m]) && (r = (e ? l(s, i, r) : l(r)) || r);
+  return e && r && f(s, i, r), r;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.position = "bottom-right", this.max = 5, this._toasts = [], this._timers = /* @__PURE__ */ new Map();
+  }
+  render() {
+    return _.call(this);
+  }
+  /**
+   * Show a toast notification.
+   * @returns The toast id
+   */
+  show(t) {
+    const s = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, i = {
+      id: s,
+      message: t.message,
+      variant: t.variant ?? "info",
+      duration: t.duration ?? 4e3,
+      ...t.title !== void 0 ? { title: t.title } : {},
+      closable: t.closable ?? !0
+    };
+    if (this._toasts = [...this._toasts, i], this.dispatchEvent(
+      new CustomEvent("sp-show", {
+        detail: { id: s },
+        bubbles: !0,
+        composed: !0
+      })
+    ), i.duration > 0) {
+      const e = setTimeout(() => this.dismiss(s), i.duration);
+      this._timers.set(s, e);
+    }
+    return s;
+  }
+  /**
+   * Dismiss a specific toast by id.
+   */
+  dismiss(t) {
+    const s = this._timers.get(t);
+    s !== void 0 && (clearTimeout(s), this._timers.delete(t)), this._toasts.some((e) => e.id === t) && (this._toasts = this._toasts.filter((e) => e.id !== t), this.dispatchEvent(
+      new CustomEvent("sp-dismiss", {
+        detail: { id: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  /**
+   * Dismiss all toasts.
+   */
+  dismissAll() {
+    for (const t of this._timers.values())
+      clearTimeout(t);
+    this._timers.clear(), this._toasts = [];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.dismissAll();
+  }
+};
+o.styles = c(d);
+a([
+  n({ type: String, reflect: !0 })
+], o.prototype, "position", 2);
+a([
+  n({ type: Number })
+], o.prototype, "max", 2);
+a([
+  u()
+], o.prototype, "_toasts", 2);
+o = a([
+  h("sp-toast-stack")
+], o);
+export {
+  o as SpToastStackComponent
+};

package/dist/components/toast-stack/sp-toast-stack.template.d.ts

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit';
+import { SpToastStackComponent } from './sp-toast-stack.js';
+/**
+ * HTML template for sp-toast-stack.
+ * Call as: toastStackTemplate.call(this) inside render()
+ */
+export declare function toastStackTemplate(this: SpToastStackComponent): TemplateResult;
+//# sourceMappingURL=sp-toast-stack.template.d.ts.map

package/dist/components/toast-stack/sp-toast-stack.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-toast-stack.template.d.ts","sourceRoot":"","sources":["../../../src/components/toast-stack/sp-toast-stack.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AA+CjE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,qBAAqB,GAAG,cAAc,CAc9E"}

package/dist/components/toast-stack/sp-toast-stack.template.js

@@ -0,0 +1,59 @@
+import { html as e, nothing as i, svg as s } from "lit";
+import { classMap as l } from "lit/directives/class-map.js";
+function r(t) {
+  switch (t) {
+    case "info":
+      return s`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`;
+    case "success":
+      return s`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`;
+    case "warning":
+      return s`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`;
+    case "error":
+      return s`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`;
+  }
+}
+function o(t, a) {
+  return e`
+    <div
+      class=${l({
+    "sp-toast-card": !0,
+    [`sp-toast-card--${a.variant}`]: !0
+  })}
+      role="alert"
+      aria-live="polite"
+    >
+      <span class=${`sp-toast-icon sp-toast-icon--${a.variant}`}>
+        ${r(a.variant)}
+      </span>
+      <div class="sp-toast-content">
+        ${a.title ? e`<p class="sp-toast-title">${a.title}</p>` : i}
+        <p class="sp-toast-message">${a.message}</p>
+      </div>
+      ${a.closable ? e`<button
+            class="sp-toast-close"
+            type="button"
+            aria-label="Dismiss notification"
+            @click=${() => t.dismiss(a.id)}
+          >
+            ✕
+          </button>` : i}
+    </div>
+  `;
+}
+function d() {
+  const t = this.max > 0 ? this._toasts.slice(-this.max) : this._toasts;
+  return e`
+    <div
+      class=${l({
+    "sp-toast-stack": !0,
+    [`sp-toast-stack--${this.position}`]: !0
+  })}
+      aria-label="Notifications"
+    >
+      ${t.map((a) => o(this, a))}
+    </div>
+  `;
+}
+export {
+  d as toastStackTemplate
+};

package/dist/components/toast-stack/sp-toast-stack.types.d.ts

@@ -0,0 +1,15 @@
+export type SpToastVariant = "info" | "success" | "warning" | "error";
+export type SpToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface ToastItem {
+    id: string;
+    message: string;
+    variant: SpToastVariant;
+    duration: number;
+    title?: string;
+    closable: boolean;
+}
+export interface SpToastStackProps {
+    position: SpToastPosition;
+    max: number;
+}
+//# sourceMappingURL=sp-toast-stack.types.d.ts.map

package/dist/components/toast-stack/sp-toast-stack.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-toast-stack.types.d.ts","sourceRoot":"","sources":["../../../src/components/toast-stack/sp-toast-stack.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,cAAc,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,eAAe,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAC;CACb"}

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { SpTooltipComponent } from './sp-tooltip.js';
+export type { SpTooltipProps, SpTooltipPlacement, SpTooltipTrigger, } from './sp-tooltip.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC"}

package/dist/components/tooltip/sp-tooltip.css.js

@@ -0,0 +1,4 @@
+const i = ":host{display:inline-block}.sp-tooltip-wrapper{position:relative;display:inline-flex}.sp-tooltip{position:absolute;z-index:9999;background:var(--sp-text-secondary, #1f2937);color:var(--sp-bg, white);font-size:12px;padding:5px 10px;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .15s;max-width:var(--sp-tooltip-max-width, 200px);white-space:normal;text-align:center;line-height:1.4;word-break:break-word;box-sizing:border-box}@media(max-width:480px){.sp-tooltip{max-width:calc(100vw - 32px)!important}}.sp-tooltip--visible{opacity:1}:host([disabled]) .sp-tooltip{display:none}.sp-tooltip-wrapper:focus-visible,::slotted(:focus-visible){outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px;border-radius:4px}@media(prefers-reduced-motion:reduce){.sp-tooltip{transition:none}}";
+export {
+  i as default
+};

package/dist/components/tooltip/sp-tooltip.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+import { SpTooltipPlacement, SpTooltipTrigger } from './sp-tooltip.types.js';
+/**
+ * Tooltip component that shows contextual information on hover, focus, or click.
+ *
+ * @element sp-tooltip
+ *
+ * @prop {string}              content    - Text content shown in the tooltip
+ * @prop {SpTooltipPlacement}  placement  - Tooltip position: top | bottom | left | right
+ * @prop {SpTooltipTrigger}    trigger    - What triggers visibility: hover | focus | click | manual
+ * @prop {boolean}             disabled   - Disables the tooltip
+ * @prop {boolean}             open       - Controls visibility (set manually when trigger=manual)
+ * @prop {number}              distance   - Gap in px between trigger and tooltip
+ * @prop {number}              showDelay  - Delay in ms before showing (default 300)
+ * @prop {number}              hideDelay  - Delay in ms before hiding (default 100)
+ * @prop {string}              maxWidth   - CSS max-width for tooltip (default "200px")
+ *
+ * @slot - The element that triggers the tooltip
+ */
+export declare class SpTooltipComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    _id: string;
+    /** Computed placement after collision detection */
+    _effectivePlacement: SpTooltipPlacement;
+    content: string;
+    placement: SpTooltipPlacement;
+    trigger: SpTooltipTrigger;
+    disabled: boolean;
+    open: boolean;
+    distance: number;
+    showDelay: number;
+    hideDelay: number;
+    maxWidth: string;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult;
+    /** Computes the effective placement with viewport collision detection. */
+    _computeEffectivePlacement(): SpTooltipPlacement;
+    _getTooltipStyle(): string;
+    _show(): void;
+    _hide(): void;
+    readonly _handleMouseEnter: () => void;
+    readonly _handleMouseLeave: () => void;
+    readonly _handleFocusIn: () => void;
+    readonly _handleFocusOut: () => void;
+    readonly _handleClick: () => void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-tooltip": SpTooltipComponent;
+    }
+}
+//# sourceMappingURL=sp-tooltip.d.ts.map

package/dist/components/tooltip/sp-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/sp-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAElF;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;;IAChD,OAAgB,MAAM,0BAAqB;IAElC,GAAG,SAA0D;IAEtE,mDAAmD;IAC1C,mBAAmB,EAAE,kBAAkB,CAAS;IAMzD,OAAO,SAAM;IAGb,SAAS,EAAE,kBAAkB,CAAS;IAGtC,OAAO,EAAE,gBAAgB,CAAW;IAGpC,QAAQ,UAAS;IAGjB,IAAI,UAAS;IAGb,QAAQ,SAAK;IAGb,SAAS,SAAO;IAGhB,SAAS,SAAO;IAGhB,QAAQ,SAAW;IAEV,iBAAiB;IAKjB,MAAM;IAIf,0EAA0E;IAC1E,0BAA0B,IAAI,kBAAkB;IAehD,gBAAgB,IAAI,MAAM;IAY1B,KAAK,IAAI,IAAI;IAab,KAAK,IAAI,IAAI;IAUb,QAAQ,CAAC,iBAAiB,aAExB;IAEF,QAAQ,CAAC,iBAAiB,aAExB;IAEF,QAAQ,CAAC,cAAc,aAErB;IAEF,QAAQ,CAAC,eAAe,aAEtB;IAEF,QAAQ,CAAC,YAAY,aASnB;IAEO,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}

package/dist/components/tooltip/sp-tooltip.js

@@ -0,0 +1,109 @@
+import { unsafeCSS as g, LitElement as v } from "lit";
+import { state as _, property as h, customElement as w } from "lit/decorators.js";
+import x from "./sp-tooltip.css.js";
+import { tooltipTemplate as P } from "./sp-tooltip.template.js";
+var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, u = (t) => {
+  throw TypeError(t);
+}, a = (t, e, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? C(e, i) : e, s = t.length - 1, p; s >= 0; s--)
+    (p = t[s]) && (r = (n ? p(e, i, r) : p(r)) || r);
+  return n && r && S(e, i, r), r;
+}, y = (t, e, i) => e.has(t) || u("Cannot " + i), f = (t, e, i) => (y(t, e, "read from private field"), e.get(t)), m = (t, e, i) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), d = (t, e, i, n) => (y(t, e, "write to private field"), e.set(t, i), i), l, c;
+let o = class extends v {
+  constructor() {
+    super(...arguments), this._id = `sp-tooltip-${Math.random().toString(36).slice(2, 9)}`, this._effectivePlacement = "top", m(this, l), m(this, c), this.content = "", this.placement = "top", this.trigger = "hover", this.disabled = !1, this.open = !1, this.distance = 8, this.showDelay = 300, this.hideDelay = 100, this.maxWidth = "200px", this._handleMouseEnter = () => {
+      this.trigger === "hover" && this._show();
+    }, this._handleMouseLeave = () => {
+      this.trigger === "hover" && this._hide();
+    }, this._handleFocusIn = () => {
+      this.trigger === "focus" && this._show();
+    }, this._handleFocusOut = () => {
+      this.trigger === "focus" && this._hide();
+    }, this._handleClick = () => {
+      this.trigger === "click" && (this.open ? this.open = !1 : (this._effectivePlacement = this._computeEffectivePlacement(), this.open = !0));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._effectivePlacement = this.placement;
+  }
+  render() {
+    return P.call(this);
+  }
+  /** Computes the effective placement with viewport collision detection. */
+  _computeEffectivePlacement() {
+    var p;
+    const t = (p = this.shadowRoot) == null ? void 0 : p.querySelector(".sp-tooltip-wrapper");
+    if (!t) return this.placement;
+    const e = t.getBoundingClientRect(), i = window.innerWidth, n = window.innerHeight, r = 8;
+    let s = this.placement;
+    return s === "top" && e.top < r ? s = "bottom" : s === "bottom" && e.bottom > n - r ? s = "top" : s === "left" && e.left < r ? s = "right" : s === "right" && e.right > i - r && (s = "left"), s;
+  }
+  _getTooltipStyle() {
+    const t = this._effectivePlacement, e = `${this.distance}px`;
+    return {
+      top: `bottom: calc(100% + ${e}); left: 50%; transform: translateX(-50%); max-width: ${this.maxWidth};`,
+      bottom: `top: calc(100% + ${e}); left: 50%; transform: translateX(-50%); max-width: ${this.maxWidth};`,
+      left: `right: calc(100% + ${e}); top: 50%; transform: translateY(-50%); max-width: ${this.maxWidth};`,
+      right: `left: calc(100% + ${e}); top: 50%; transform: translateY(-50%); max-width: ${this.maxWidth};`
+    }[t];
+  }
+  _show() {
+    clearTimeout(f(this, c));
+    const t = () => {
+      this._effectivePlacement = this._computeEffectivePlacement(), this.open = !0;
+    };
+    this.showDelay > 0 ? d(this, l, setTimeout(t, this.showDelay)) : t();
+  }
+  _hide() {
+    clearTimeout(f(this, l));
+    const t = () => {
+      this.open = !1;
+    };
+    this.hideDelay > 0 ? d(this, c, setTimeout(t, this.hideDelay)) : t();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), clearTimeout(f(this, l)), clearTimeout(f(this, c));
+  }
+};
+l = /* @__PURE__ */ new WeakMap();
+c = /* @__PURE__ */ new WeakMap();
+o.styles = g(x);
+a([
+  _()
+], o.prototype, "_id", 2);
+a([
+  _()
+], o.prototype, "_effectivePlacement", 2);
+a([
+  h({ type: String })
+], o.prototype, "content", 2);
+a([
+  h({ type: String, reflect: !0 })
+], o.prototype, "placement", 2);
+a([
+  h({ type: String })
+], o.prototype, "trigger", 2);
+a([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+a([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+a([
+  h({ type: Number })
+], o.prototype, "distance", 2);
+a([
+  h({ type: Number })
+], o.prototype, "showDelay", 2);
+a([
+  h({ type: Number })
+], o.prototype, "hideDelay", 2);
+a([
+  h({ type: String })
+], o.prototype, "maxWidth", 2);
+o = a([
+  w("sp-tooltip")
+], o);
+export {
+  o as SpTooltipComponent
+};

package/dist/components/tooltip/sp-tooltip.template.d.ts

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit';
+import { SpTooltipComponent } from './sp-tooltip.js';
+/**
+ * HTML template for sp-tooltip.
+ * Call as: tooltipTemplate.call(this) inside render()
+ */
+export declare function tooltipTemplate(this: SpTooltipComponent): TemplateResult;
+//# sourceMappingURL=sp-tooltip.template.d.ts.map

package/dist/components/tooltip/sp-tooltip.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tooltip.template.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/sp-tooltip.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,kBAAkB,GAAG,cAAc,CAyBxE"}

package/dist/components/tooltip/sp-tooltip.template.js

@@ -0,0 +1,31 @@
+import { nothing as t, html as i } from "lit";
+import { classMap as s } from "lit/directives/class-map.js";
+function l() {
+  return i`
+    <div
+      class="sp-tooltip-wrapper"
+      aria-describedby=${this.open && !this.disabled ? this._id : t}
+      @mouseenter=${this._handleMouseEnter}
+      @mouseleave=${this._handleMouseLeave}
+      @focusin=${this._handleFocusIn}
+      @focusout=${this._handleFocusOut}
+      @click=${this._handleClick}
+    >
+      <slot></slot>
+      <div
+        id=${this._id}
+        class=${s({
+    "sp-tooltip": !0,
+    "sp-tooltip--visible": this.open && !this.disabled
+  })}
+        role="tooltip"
+        style=${this._getTooltipStyle()}
+      >
+        ${this.content}
+      </div>
+    </div>
+  `;
+}
+export {
+  l as tooltipTemplate
+};