kanto-ds 1.0.0

package/dist/components/feedback/kt-toast/kt-toast.js

@@ -0,0 +1,231 @@
+import { css as g, nothing as n, html as o } from "lit";
+import { state as u, property as e } from "lit/decorators.js";
+import { K as h, d as v } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as m } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-icon/kt-icon.js";
+import "../kt-progress-bar/kt-progress-bar.js";
+var b = Object.defineProperty, i = (c, a, s, w) => {
+  for (var r = void 0, d = c.length - 1, l; d >= 0; d--)
+    (l = c[d]) && (r = l(a, s, r) || r);
+  return r && b(a, s, r), r;
+};
+const f = {
+  success: { icon: "circle-check", progress: "success" },
+  information: { icon: "info", progress: "info" },
+  warning: { icon: "triangle-alert", progress: "warning" },
+  error: { icon: "circle-alert", progress: "danger" }
+}, p = 50;
+class t extends h {
+  constructor() {
+    super(...arguments), this.remaining = 0, this.variant = "information", this.heading = "", this.description = "", this.dismissible = !1, this.duration = 0;
+  }
+  static {
+    this.styles = [
+      h.styles,
+      g`
+      :host {
+        display: block;
+      }
+
+      .toast {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--gap-form);
+        max-width: 480px;
+        padding: var(--padding-form);
+        overflow: hidden;
+        color: var(--text-body);
+        background: var(--surface-card);
+        border: var(--border-width) solid rgba(255, 255, 255, 0.1);
+        border-radius: var(--border-radius);
+        box-shadow: var(--shadow-toast);
+        backdrop-filter: blur(10px);
+      }
+
+      /* A wash of the variant's hue over the card surface, rather than a
+         solid fill: the text stays on a neutral background and keeps its
+         contrast. */
+      :host([variant='success']) .toast {
+        background:
+          linear-gradient(135deg, rgba(53, 221, 131, 0.25), rgba(53, 221, 131, 0.15)),
+          var(--surface-card);
+      }
+      :host([variant='information']) .toast {
+        background:
+          linear-gradient(135deg, rgba(53, 175, 243, 0.25), rgba(53, 175, 243, 0.15)),
+          var(--surface-card);
+      }
+      :host([variant='warning']) .toast {
+        background:
+          linear-gradient(135deg, rgba(245, 171, 61, 0.25), rgba(245, 171, 61, 0.15)),
+          var(--surface-card);
+      }
+      :host([variant='error']) .toast {
+        background:
+          linear-gradient(135deg, rgba(245, 61, 92, 0.25), rgba(245, 61, 92, 0.15)),
+          var(--surface-card);
+      }
+
+      :host([variant='success']) .heading {
+        color: var(--color-success-base);
+      }
+      :host([variant='information']) .heading {
+        color: var(--color-info-base);
+      }
+      :host([variant='warning']) .heading {
+        color: var(--color-warning-base);
+      }
+      :host([variant='error']) .heading {
+        color: var(--color-danger-base);
+      }
+
+      :host([variant='success']) .icon {
+        color: var(--color-success-base);
+      }
+      :host([variant='information']) .icon {
+        color: var(--color-info-base);
+      }
+      :host([variant='warning']) .icon {
+        color: var(--color-warning-base);
+      }
+      :host([variant='error']) .icon {
+        color: var(--color-danger-base);
+      }
+
+      .body {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-form);
+      }
+
+      .icon {
+        display: flex;
+        align-items: center;
+      }
+
+      .content {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        gap: var(--gap-element);
+      }
+
+      .heading {
+        font: var(--font-normal-medium);
+      }
+
+      .description {
+        font: var(--font-normal-regular);
+      }
+
+      .close {
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        color: currentcolor;
+        background: transparent;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .close:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      .countdown {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.startCountdown();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.stopCountdown();
+  }
+  startCountdown() {
+    this.stopCountdown(), !(this.duration <= 0) && (this.remaining = this.duration, this.tick());
+  }
+  /** Runs the countdown from whatever `remaining` currently is. */
+  tick() {
+    this.timer = setInterval(() => {
+      this.remaining -= p, !(this.remaining > 0) && (this.stopCountdown(), this.close());
+    }, p);
+  }
+  stopCountdown() {
+    this.timer !== void 0 && clearInterval(this.timer), this.timer = void 0;
+  }
+  /** Pauses the countdown. The container calls this while the pointer is over the stack. */
+  pause() {
+    this.timer !== void 0 && this.stopCountdown();
+  }
+  /** Resumes a paused countdown from where it stopped. */
+  resume() {
+    this.duration <= 0 || this.timer !== void 0 || this.remaining <= 0 || this.tick();
+  }
+  /** Asks to be removed. The container is what actually removes it. */
+  close() {
+    this.stopCountdown(), m(this, "kt-toast-close");
+  }
+  render() {
+    const a = f[this.variant], s = this.duration > 0;
+    return o`<div
+      part="base"
+      class="toast"
+      role=${this.variant === "error" ? "alert" : "status"}
+      aria-live=${this.variant === "error" ? "assertive" : "polite"}
+    >
+      <div class="body">
+        <span class="icon"><kt-icon name=${a.icon} size="24"></kt-icon></span>
+        <div class="content">
+          ${this.heading ? o`<div class="heading">${this.heading}</div>` : n}
+          ${this.description ? o`<div class="description">${this.description}</div>` : n}
+        </div>
+      </div>
+
+      ${this.dismissible ? o`<button part="close" class="close" aria-label="Close" @click=${this.close}>
+              <kt-icon name="x" size="18"></kt-icon>
+            </button>` : n}
+      ${s ? o`<div class="countdown">
+              <kt-progress-bar
+                size="small"
+                variant=${a.progress}
+                striped
+                animated
+                .value=${this.remaining}
+                .max=${this.duration}
+                label="Time remaining"
+              ></kt-progress-bar>
+            </div>` : n}
+    </div>`;
+  }
+}
+i([
+  u()
+], t.prototype, "remaining");
+i([
+  e({ type: String, reflect: !0 })
+], t.prototype, "variant");
+i([
+  e({ type: String })
+], t.prototype, "heading");
+i([
+  e({ type: String })
+], t.prototype, "description");
+i([
+  e({ type: Boolean })
+], t.prototype, "dismissible");
+i([
+  e({ type: Number })
+], t.prototype, "duration");
+v("kt-toast", t);
+export {
+  t as KtToast
+};
+//# sourceMappingURL=kt-toast.js.map

package/dist/components/feedback/kt-toast/kt-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-toast.js","sources":["../../../../src/components/feedback/kt-toast/kt-toast.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-progress-bar/kt-progress-bar.js';\n\nexport type KtToastVariant = 'success' | 'information' | 'warning' | 'error';\n\ninterface VariantMeta {\n  readonly icon: string;\n  readonly progress: 'success' | 'info' | 'warning' | 'danger';\n}\n\nconst META: Record<KtToastVariant, VariantMeta> = {\n  success: { icon: 'circle-check', progress: 'success' },\n  information: { icon: 'info', progress: 'info' },\n  warning: { icon: 'triangle-alert', progress: 'warning' },\n  error: { icon: 'circle-alert', progress: 'danger' },\n};\n\n/** Countdown refresh interval. 50ms is smooth without being a busy loop. */\nconst TICK_MS = 50;\n\n/**\n * A transient notification.\n *\n * The only element in Kanto with a real shadow, and the only one that blurs\n * what is behind it: a toast floats above the page, so it has to say so.\n *\n * @element kt-toast\n *\n * @csspart base - The toast surface.\n * @csspart close - The dismiss button.\n *\n * @fires kt-toast-close - The toast asked to be removed, by timeout or by the\n *   dismiss button. `<kt-toast-container>` listens for this.\n */\nexport class KtToast extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .toast {\n        position: relative;\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: var(--gap-form);\n        max-width: 480px;\n        padding: var(--padding-form);\n        overflow: hidden;\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid rgba(255, 255, 255, 0.1);\n        border-radius: var(--border-radius);\n        box-shadow: var(--shadow-toast);\n        backdrop-filter: blur(10px);\n      }\n\n      /* A wash of the variant's hue over the card surface, rather than a\n         solid fill: the text stays on a neutral background and keeps its\n         contrast. */\n      :host([variant='success']) .toast {\n        background:\n          linear-gradient(135deg, rgba(53, 221, 131, 0.25), rgba(53, 221, 131, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='information']) .toast {\n        background:\n          linear-gradient(135deg, rgba(53, 175, 243, 0.25), rgba(53, 175, 243, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='warning']) .toast {\n        background:\n          linear-gradient(135deg, rgba(245, 171, 61, 0.25), rgba(245, 171, 61, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='error']) .toast {\n        background:\n          linear-gradient(135deg, rgba(245, 61, 92, 0.25), rgba(245, 61, 92, 0.15)),\n          var(--surface-card);\n      }\n\n      :host([variant='success']) .heading {\n        color: var(--color-success-base);\n      }\n      :host([variant='information']) .heading {\n        color: var(--color-info-base);\n      }\n      :host([variant='warning']) .heading {\n        color: var(--color-warning-base);\n      }\n      :host([variant='error']) .heading {\n        color: var(--color-danger-base);\n      }\n\n      :host([variant='success']) .icon {\n        color: var(--color-success-base);\n      }\n      :host([variant='information']) .icon {\n        color: var(--color-info-base);\n      }\n      :host([variant='warning']) .icon {\n        color: var(--color-warning-base);\n      }\n      :host([variant='error']) .icon {\n        color: var(--color-danger-base);\n      }\n\n      .body {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-form);\n      }\n\n      .icon {\n        display: flex;\n        align-items: center;\n      }\n\n      .content {\n        display: flex;\n        flex: 1 1 auto;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      .heading {\n        font: var(--font-normal-medium);\n      }\n\n      .description {\n        font: var(--font-normal-regular);\n      }\n\n      .close {\n        display: flex;\n        align-items: center;\n        padding: 4px;\n        color: currentcolor;\n        background: transparent;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      .close:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .countdown {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n      }\n    `,\n  ];\n\n  private timer: ReturnType<typeof setInterval> | undefined;\n\n  @state()\n  private remaining = 0;\n\n  @property({ type: String, reflect: true })\n  variant: KtToastVariant = 'information';\n\n  /**\n   * The toast's title.\n   *\n   * Named `heading` because every element already has a `title`, and shadowing\n   * it would turn the toast into its own tooltip.\n   */\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  @property({ type: Boolean })\n  dismissible = false;\n\n  /**\n   * Auto-dismiss after this many milliseconds, with a countdown bar. Zero\n   * keeps the toast until something removes it.\n   */\n  @property({ type: Number })\n  duration = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.startCountdown();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.stopCountdown();\n  }\n\n  private startCountdown(): void {\n    this.stopCountdown();\n    if (this.duration <= 0) return;\n\n    this.remaining = this.duration;\n    this.tick();\n  }\n\n  /** Runs the countdown from whatever `remaining` currently is. */\n  private tick(): void {\n    this.timer = setInterval(() => {\n      this.remaining -= TICK_MS;\n      if (this.remaining > 0) return;\n\n      this.stopCountdown();\n      this.close();\n    }, TICK_MS);\n  }\n\n  private stopCountdown(): void {\n    if (this.timer !== undefined) clearInterval(this.timer);\n    this.timer = undefined;\n  }\n\n  /** Pauses the countdown. The container calls this while the pointer is over the stack. */\n  pause(): void {\n    if (this.timer !== undefined) this.stopCountdown();\n  }\n\n  /** Resumes a paused countdown from where it stopped. */\n  resume(): void {\n    if (this.duration <= 0 || this.timer !== undefined || this.remaining <= 0) return;\n    this.tick();\n  }\n\n  /** Asks to be removed. The container is what actually removes it. */\n  close(): void {\n    this.stopCountdown();\n    emit(this, 'kt-toast-close');\n  }\n\n  override render(): TemplateResult {\n    const meta = META[this.variant];\n    const showCountdown = this.duration > 0;\n\n    return html`<div\n      part=\"base\"\n      class=\"toast\"\n      role=${this.variant === 'error' ? 'alert' : 'status'}\n      aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n    >\n      <div class=\"body\">\n        <span class=\"icon\"><kt-icon name=${meta.icon} size=\"24\"></kt-icon></span>\n        <div class=\"content\">\n          ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n          ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n        </div>\n      </div>\n\n      ${\n        this.dismissible\n          ? html`<button part=\"close\" class=\"close\" aria-label=\"Close\" @click=${this.close}>\n              <kt-icon name=\"x\" size=\"18\"></kt-icon>\n            </button>`\n          : nothing\n      }\n      ${\n        showCountdown\n          ? html`<div class=\"countdown\">\n              <kt-progress-bar\n                size=\"small\"\n                variant=${meta.progress}\n                striped\n                animated\n                .value=${this.remaining}\n                .max=${this.duration}\n                label=\"Time remaining\"\n              ></kt-progress-bar>\n            </div>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-toast', KtToast);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toast': KtToast;\n  }\n}\n"],"names":["META","TICK_MS","KtToast","KtElement","css","emit","meta","showCountdown","html","nothing","__decorateClass","state","property","defineElement"],"mappings":"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"}

package/dist/components/feedback/kt-toast-container/kt-toast-container.d.ts

@@ -0,0 +1,60 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import type { KtToast, KtToastVariant } from '../kt-toast/kt-toast.js';
+import '../kt-toast/kt-toast.js';
+export type KtToastPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface KtToastOptions {
+    readonly variant?: KtToastVariant;
+    readonly heading?: string;
+    readonly description?: string;
+    readonly dismissible?: boolean;
+    /** Milliseconds before it dismisses itself. Zero keeps it until closed. */
+    readonly duration?: number;
+}
+/**
+ * A fixed stack that owns the toasts on screen.
+ *
+ * Toasts are appended and removed by the container, not by the code that
+ * raised them — a toast that removes itself from a list it does not own is how
+ * you end up with two of them and neither disappearing.
+ *
+ * @element kt-toast-container
+ *
+ * @slot - The toasts. Usually filled by `show()` rather than by hand.
+ *
+ * @example
+ * ```js
+ * document.querySelector('kt-toast-container').show({
+ *   variant: 'success',
+ *   heading: 'Entity created',
+ *   duration: 4000,
+ *   dismissible: true,
+ * });
+ * ```
+ */
+export declare class KtToastContainer extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    position: KtToastPosition;
+    /** Oldest toasts are dropped once the stack reaches this many. */
+    limit: number;
+    /** The toasts currently on screen, oldest first. */
+    get toasts(): KtToast[];
+    /** Raises a toast and returns it, so a caller can close it early. */
+    show(options?: KtToastOptions): KtToast;
+    /** Removes one toast. */
+    dismiss(toast: KtToast): void;
+    /** Removes every toast. */
+    clear(): void;
+    private enforceLimit;
+    /** Hovering the stack freezes every countdown; leaving it resumes them. */
+    private pauseAll;
+    private resumeAll;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-toast-container': KtToastContainer;
+    }
+}

package/dist/components/feedback/kt-toast-container/kt-toast-container.js

@@ -0,0 +1,100 @@
+import { css as c, html as m } from "lit";
+import { property as p } from "lit/decorators.js";
+import { K as l, d } from "../../../chunks/kt-element-CcMLO5e8.js";
+import "../kt-toast/kt-toast.js";
+var f = Object.defineProperty, h = (i, t, e, n) => {
+  for (var s = void 0, o = i.length - 1, a; o >= 0; o--)
+    (a = i[o]) && (s = a(t, e, s) || s);
+  return s && f(t, e, s), s;
+};
+class r extends l {
+  constructor() {
+    super(...arguments), this.position = "bottom-right", this.limit = 5, this.pauseAll = () => {
+      for (const t of this.toasts) t.pause();
+    }, this.resumeAll = () => {
+      for (const t of this.toasts) t.resume();
+    };
+  }
+  static {
+    this.styles = [
+      l.styles,
+      c`
+      :host {
+        position: fixed;
+        z-index: var(--z-toast);
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        /* The stack only intercepts pointer events over the toasts
+           themselves; the rest of the corner stays clickable. */
+        pointer-events: none;
+      }
+
+      :host([position='bottom-right']) {
+        right: 24px;
+        bottom: 24px;
+        align-items: flex-end;
+      }
+      :host([position='top-right']) {
+        top: 24px;
+        right: 24px;
+        align-items: flex-end;
+      }
+      :host([position='bottom-left']) {
+        bottom: 24px;
+        left: 24px;
+      }
+      :host([position='top-left']) {
+        top: 24px;
+        left: 24px;
+      }
+
+      ::slotted(kt-toast) {
+        pointer-events: auto;
+      }
+    `
+    ];
+  }
+  /** The toasts currently on screen, oldest first. */
+  get toasts() {
+    return [...this.querySelectorAll("kt-toast")];
+  }
+  /** Raises a toast and returns it, so a caller can close it early. */
+  show(t = {}) {
+    const e = document.createElement("kt-toast");
+    return e.variant = t.variant ?? "information", e.heading = t.heading ?? "", e.description = t.description ?? "", e.dismissible = t.dismissible ?? !0, e.duration = t.duration ?? 0, e.addEventListener("kt-toast-close", () => this.dismiss(e), { once: !0 }), this.position.startsWith("top") ? this.prepend(e) : this.append(e), this.enforceLimit(), e;
+  }
+  /** Removes one toast. */
+  dismiss(t) {
+    t.remove();
+  }
+  /** Removes every toast. */
+  clear() {
+    for (const t of this.toasts) t.remove();
+  }
+  enforceLimit() {
+    if (this.limit <= 0) return;
+    const t = this.toasts, e = t.length - this.limit, n = this.position.startsWith("top") ? [...t].reverse() : t;
+    for (let s = 0; s < e; s += 1) n[s]?.remove();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("pointerenter", this.pauseAll), this.addEventListener("pointerleave", this.resumeAll);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("pointerenter", this.pauseAll), this.removeEventListener("pointerleave", this.resumeAll);
+  }
+  render() {
+    return m`<slot></slot>`;
+  }
+}
+h([
+  p({ type: String, reflect: !0 })
+], r.prototype, "position");
+h([
+  p({ type: Number })
+], r.prototype, "limit");
+d("kt-toast-container", r);
+export {
+  r as KtToastContainer
+};
+//# sourceMappingURL=kt-toast-container.js.map

package/dist/components/feedback/kt-toast-container/kt-toast-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-toast-container.js","sources":["../../../../src/components/feedback/kt-toast-container/kt-toast-container.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport type { KtToast, KtToastVariant } from '../kt-toast/kt-toast.js';\nimport '../kt-toast/kt-toast.js';\n\nexport type KtToastPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\nexport interface KtToastOptions {\n  readonly variant?: KtToastVariant;\n  readonly heading?: string;\n  readonly description?: string;\n  readonly dismissible?: boolean;\n  /** Milliseconds before it dismisses itself. Zero keeps it until closed. */\n  readonly duration?: number;\n}\n\n/**\n * A fixed stack that owns the toasts on screen.\n *\n * Toasts are appended and removed by the container, not by the code that\n * raised them — a toast that removes itself from a list it does not own is how\n * you end up with two of them and neither disappearing.\n *\n * @element kt-toast-container\n *\n * @slot - The toasts. Usually filled by `show()` rather than by hand.\n *\n * @example\n * ```js\n * document.querySelector('kt-toast-container').show({\n *   variant: 'success',\n *   heading: 'Entity created',\n *   duration: 4000,\n *   dismissible: true,\n * });\n * ```\n */\nexport class KtToastContainer extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        position: fixed;\n        z-index: var(--z-toast);\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n        /* The stack only intercepts pointer events over the toasts\n           themselves; the rest of the corner stays clickable. */\n        pointer-events: none;\n      }\n\n      :host([position='bottom-right']) {\n        right: 24px;\n        bottom: 24px;\n        align-items: flex-end;\n      }\n      :host([position='top-right']) {\n        top: 24px;\n        right: 24px;\n        align-items: flex-end;\n      }\n      :host([position='bottom-left']) {\n        bottom: 24px;\n        left: 24px;\n      }\n      :host([position='top-left']) {\n        top: 24px;\n        left: 24px;\n      }\n\n      ::slotted(kt-toast) {\n        pointer-events: auto;\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  position: KtToastPosition = 'bottom-right';\n\n  /** Oldest toasts are dropped once the stack reaches this many. */\n  @property({ type: Number })\n  limit = 5;\n\n  /** The toasts currently on screen, oldest first. */\n  get toasts(): KtToast[] {\n    return [...this.querySelectorAll('kt-toast')];\n  }\n\n  /** Raises a toast and returns it, so a caller can close it early. */\n  show(options: KtToastOptions = {}): KtToast {\n    const toast = document.createElement('kt-toast');\n    toast.variant = options.variant ?? 'information';\n    toast.heading = options.heading ?? '';\n    toast.description = options.description ?? '';\n    toast.dismissible = options.dismissible ?? true;\n    toast.duration = options.duration ?? 0;\n\n    toast.addEventListener('kt-toast-close', () => this.dismiss(toast), { once: true });\n\n    // Toasts stack towards the screen edge: newest nearest it, which for a\n    // bottom-anchored stack means appending and for a top-anchored one means\n    // prepending.\n    if (this.position.startsWith('top')) this.prepend(toast);\n    else this.append(toast);\n\n    this.enforceLimit();\n    return toast;\n  }\n\n  /** Removes one toast. */\n  dismiss(toast: KtToast): void {\n    toast.remove();\n  }\n\n  /** Removes every toast. */\n  clear(): void {\n    for (const toast of this.toasts) toast.remove();\n  }\n\n  private enforceLimit(): void {\n    if (this.limit <= 0) return;\n\n    const toasts = this.toasts;\n    const excess = toasts.length - this.limit;\n    const oldestFirst = this.position.startsWith('top') ? [...toasts].reverse() : toasts;\n\n    for (let index = 0; index < excess; index += 1) oldestFirst[index]?.remove();\n  }\n\n  /** Hovering the stack freezes every countdown; leaving it resumes them. */\n  private pauseAll = (): void => {\n    for (const toast of this.toasts) toast.pause();\n  };\n\n  private resumeAll = (): void => {\n    for (const toast of this.toasts) toast.resume();\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('pointerenter', this.pauseAll);\n    this.addEventListener('pointerleave', this.resumeAll);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerenter', this.pauseAll);\n    this.removeEventListener('pointerleave', this.resumeAll);\n  }\n\n  override render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndefineElement('kt-toast-container', KtToastContainer);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toast-container': KtToastContainer;\n  }\n}\n"],"names":["KtToastContainer","KtElement","toast","css","options","toasts","excess","oldestFirst","index","html","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;AAsCO,MAAMA,UAAyBC,EAAU;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAyCL,KAAA,WAA4B,gBAI5B,KAAA,QAAQ,GAiDR,KAAQ,WAAW,MAAY;AAC7B,iBAAWC,KAAS,KAAK,OAAQ,CAAAA,EAAM,MAAA;AAAA,IACzC,GAEA,KAAQ,YAAY,MAAY;AAC9B,iBAAWA,KAAS,KAAK,OAAQ,CAAAA,EAAM,OAAA;AAAA,IACzC;AAAA,EAAA;AAAA,EAnGA,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBD,EAAU;AAAA,MACVE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAmCF;AAAA;AAAA,EAUA,IAAI,SAAoB;AACtB,WAAO,CAAC,GAAG,KAAK,iBAAiB,UAAU,CAAC;AAAA,EAC9C;AAAA;AAAA,EAGA,KAAKC,IAA0B,IAAa;AAC1C,UAAMF,IAAQ,SAAS,cAAc,UAAU;AAC/C,WAAAA,EAAM,UAAUE,EAAQ,WAAW,eACnCF,EAAM,UAAUE,EAAQ,WAAW,IACnCF,EAAM,cAAcE,EAAQ,eAAe,IAC3CF,EAAM,cAAcE,EAAQ,eAAe,IAC3CF,EAAM,WAAWE,EAAQ,YAAY,GAErCF,EAAM,iBAAiB,kBAAkB,MAAM,KAAK,QAAQA,CAAK,GAAG,EAAE,MAAM,IAAM,GAK9E,KAAK,SAAS,WAAW,KAAK,IAAG,KAAK,QAAQA,CAAK,IAClD,KAAK,OAAOA,CAAK,GAEtB,KAAK,aAAA,GACEA;AAAA,EACT;AAAA;AAAA,EAGA,QAAQA,GAAsB;AAC5B,IAAAA,EAAM,OAAA;AAAA,EACR;AAAA;AAAA,EAGA,QAAc;AACZ,eAAWA,KAAS,KAAK,OAAQ,CAAAA,EAAM,OAAA;AAAA,EACzC;AAAA,EAEQ,eAAqB;AAC3B,QAAI,KAAK,SAAS,EAAG;AAErB,UAAMG,IAAS,KAAK,QACdC,IAASD,EAAO,SAAS,KAAK,OAC9BE,IAAc,KAAK,SAAS,WAAW,KAAK,IAAI,CAAC,GAAGF,CAAM,EAAE,QAAA,IAAYA;AAE9E,aAASG,IAAQ,GAAGA,IAAQF,GAAQE,KAAS,EAAG,CAAAD,EAAYC,CAAK,GAAG,OAAA;AAAA,EACtE;AAAA,EAWS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,gBAAgB,KAAK,QAAQ,GACnD,KAAK,iBAAiB,gBAAgB,KAAK,SAAS;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,gBAAgB,KAAK,QAAQ,GACtD,KAAK,oBAAoB,gBAAgB,KAAK,SAAS;AAAA,EACzD;AAAA,EAES,SAAyB;AAChC,WAAOC;AAAA,EACT;AACF;AA5EEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAxC9BX,EAyCX,WAAA,UAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5CfX,EA6CX,WAAA,OAAA;AA0EFY,EAAc,sBAAsBZ,CAAgB;"}

package/dist/components/feedback/kt-toast-container/toaster.d.ts

@@ -0,0 +1,37 @@
+import { KtToastContainer, type KtToastOptions, type KtToastPosition } from '../kt-toast-container/kt-toast-container.js';
+import type { KtToast } from '../kt-toast/kt-toast.js';
+import '../kt-toast-container/kt-toast-container.js';
+/**
+ * The imperative way to raise a toast, for the many places where reaching a
+ * container element is inconvenient — an interceptor, a store, a catch block.
+ *
+ * It lazily creates one `<kt-toast-container>` on `<body>` and reuses it.
+ *
+ * ```js
+ * import { toaster } from 'kanto-ds';
+ *
+ * toaster.success('Entity created');
+ * toaster.error('Could not save', { description: 'Try again in a moment.' });
+ * ```
+ *
+ * Prefer placing a `<kt-toast-container>` in your own markup when you care
+ * where in the DOM it lives — inside a dialog, or scoped to one region.
+ */
+declare class Toaster {
+    private container;
+    /** Where the auto-created container sits. Changing it moves the stack. */
+    position: KtToastPosition;
+    /** The container in use, created on first call. */
+    getContainer(): KtToastContainer;
+    show(options: KtToastOptions): KtToast;
+    success(heading: string, options?: Omit<KtToastOptions, 'variant' | 'heading'>): KtToast;
+    info(heading: string, options?: Omit<KtToastOptions, 'variant' | 'heading'>): KtToast;
+    warning(heading: string, options?: Omit<KtToastOptions, 'variant' | 'heading'>): KtToast;
+    /** Errors do not dismiss themselves: the user has to see this one. */
+    error(heading: string, options?: Omit<KtToastOptions, 'variant' | 'heading'>): KtToast;
+    /** Clears the stack. */
+    clear(): void;
+}
+/** The shared toaster. */
+export declare const toaster: Toaster;
+export {};

package/dist/components/feedback/kt-tooltip/kt-tooltip.d.ts

@@ -0,0 +1,57 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * A short label that appears on hover or focus.
+ *
+ * Wrap the thing it describes:
+ *
+ * ```html
+ * <kt-tooltip text="Refresh the data">
+ *   <kt-button icon="refresh-cw" label="Refresh"></kt-button>
+ * </kt-tooltip>
+ * ```
+ *
+ * A tooltip is a *description*, never the only name of a control. If the
+ * trigger has no visible text, give it its own `label` too — a tooltip that has
+ * to be hovered to be read leaves touch and screen-reader users with nothing.
+ *
+ * @element kt-tooltip
+ *
+ * @slot - The trigger.
+ *
+ * @csspart bubble - The tooltip bubble.
+ */
+export declare class KtTooltip extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private readonly descriptionId;
+    private description;
+    private visible;
+    text: string;
+    placement: KtTooltipPlacement;
+    /** Suppresses the tooltip without removing it from the markup. */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    /**
+     * `aria-describedby` cannot reach across a shadow boundary: an id inside this
+     * element's shadow root is invisible to a trigger sitting in the light DOM.
+     *
+     * So the description also exists as a light-DOM node, addressed to a slot
+     * that does not exist — which keeps it out of the rendered output while
+     * leaving it referenceable, since an explicit aria-describedby target is read
+     * even when it is not displayed.
+     */
+    private syncDescription;
+    private show;
+    private hide;
+    /** WCAG 1.4.13: a pointer-triggered overlay must be dismissible from the keyboard. */
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-tooltip': KtTooltip;
+    }
+}

package/dist/components/feedback/kt-tooltip/kt-tooltip.js

@@ -0,0 +1,138 @@
+import { css as h, html as l } from "lit";
+import { state as c, property as n } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { K as d, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { u as f } from "../../../chunks/events-Bjl5Zmmq.js";
+var u = Object.defineProperty, s = (r, t, a, y) => {
+  for (var e = void 0, o = r.length - 1, p; o >= 0; o--)
+    (p = r[o]) && (e = p(t, a, e) || e);
+  return e && u(t, a, e), e;
+};
+const m = "kt-tooltip-description";
+class i extends d {
+  constructor() {
+    super(...arguments), this.descriptionId = f("kt-tooltip"), this.visible = !1, this.text = "", this.placement = "top", this.disabled = !1, this.show = () => {
+      !this.disabled && this.text && (this.visible = !0);
+    }, this.hide = () => {
+      this.visible = !1;
+    }, this.onKeyDown = (t) => {
+      t.key === "Escape" && this.visible && (t.stopPropagation(), this.visible = !1);
+    };
+  }
+  static {
+    this.styles = [
+      d.styles,
+      h`
+      :host {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .bubble {
+        position: absolute;
+        z-index: var(--z-tooltip);
+        max-width: 260px;
+        padding: var(--padding-chip);
+        /* Inverted against the page, so the bubble reads as floating in
+           both themes — the raw ramp step this used to name is pure white
+           under data-theme="light". */
+        color: var(--text-inverted);
+        font: var(--font-code-regular);
+        white-space: nowrap;
+        background: var(--surface-inverted);
+        border-radius: var(--radius-input);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 150ms var(--easing-standard);
+      }
+
+      .bubble.visible {
+        opacity: 1;
+      }
+
+      .top {
+        bottom: calc(100% + 6px);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .bottom {
+        top: calc(100% + 6px);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .left {
+        top: 50%;
+        right: calc(100% + 6px);
+        transform: translateY(-50%);
+      }
+      .right {
+        top: 50%;
+        left: calc(100% + 6px);
+        transform: translateY(-50%);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .bubble {
+          transition: none;
+        }
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("pointerenter", this.show), this.addEventListener("pointerleave", this.hide), this.addEventListener("focusin", this.show), this.addEventListener("focusout", this.hide), this.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("pointerenter", this.show), this.removeEventListener("pointerleave", this.hide), this.removeEventListener("focusin", this.show), this.removeEventListener("focusout", this.hide), this.removeEventListener("keydown", this.onKeyDown), this.description?.remove();
+  }
+  willUpdate(t) {
+    t.has("text") && this.syncDescription();
+  }
+  /**
+   * `aria-describedby` cannot reach across a shadow boundary: an id inside this
+   * element's shadow root is invisible to a trigger sitting in the light DOM.
+   *
+   * So the description also exists as a light-DOM node, addressed to a slot
+   * that does not exist — which keeps it out of the rendered output while
+   * leaving it referenceable, since an explicit aria-describedby target is read
+   * even when it is not displayed.
+   */
+  syncDescription() {
+    if (!this.text) {
+      this.description?.remove(), this.description = void 0;
+      return;
+    }
+    this.description || (this.description = document.createElement("span"), this.description.id = this.descriptionId, this.description.slot = m, this.append(this.description)), this.description.textContent = this.text;
+    for (const t of this.children)
+      t !== this.description && t.setAttribute("aria-describedby", this.descriptionId);
+  }
+  render() {
+    return l`<slot @slotchange=${this.syncDescription}></slot>
+      <span
+        part="bubble"
+        class=${v({ bubble: !0, [this.placement]: !0, visible: this.visible })}
+        role="tooltip"
+        aria-hidden=${this.visible ? "false" : "true"}
+        >${this.text}</span
+      >`;
+  }
+}
+s([
+  c()
+], i.prototype, "visible");
+s([
+  n({ type: String })
+], i.prototype, "text");
+s([
+  n({ type: String, reflect: !0 })
+], i.prototype, "placement");
+s([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+b("kt-tooltip", i);
+export {
+  i as KtTooltip
+};
+//# sourceMappingURL=kt-tooltip.js.map