kanto-ds 1.0.0

package/dist/components/feedback/kt-progress-bar/kt-progress-bar.d.ts

@@ -0,0 +1,53 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtProgressVariant = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export type KtProgressSize = 'small' | 'medium' | 'large';
+/**
+ * A determinate progress bar.
+ *
+ * Reaching `max` switches the fill to the success colour, so "done" reads at a
+ * glance without the caller having to swap the variant.
+ *
+ * @element kt-progress-bar
+ *
+ * @csspart track - The groove.
+ * @csspart fill - The filled portion.
+ * @csspart base - The container.
+ * @csspart caption - The row above the bar.
+ * @csspart value - The percentage, when `show-value` is set.
+ *
+ * @example
+ * ```html
+ * <kt-progress-bar value="64" show-value></kt-progress-bar>
+ * <kt-progress-bar value="90" variant="warning" striped animated></kt-progress-bar>
+ * ```
+ */
+export declare class KtProgressBar extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    value: number;
+    max: number;
+    size: KtProgressSize;
+    variant: KtProgressVariant;
+    /** Draws the percentage in a caption above the bar. */
+    showValue: boolean;
+    /**
+     * Shows `label` above the bar as visible text, beside the value.
+     *
+     * `label` alone is the accessible name and stays invisible, which is right
+     * when the surrounding copy already says what is progressing.
+     */
+    showLabel: boolean;
+    striped: boolean;
+    /** Animates the stripes. Requires `striped`. */
+    animated: boolean;
+    /** Accessible name — what is progressing. */
+    label: string;
+    /** The value as a whole percentage, clamped to 0–100. */
+    get percent(): number;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-progress-bar': KtProgressBar;
+    }
+}

package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js

@@ -0,0 +1,212 @@
+import { css as v, nothing as p, html as o } from "lit";
+import { property as t } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { styleMap as m } from "lit/directives/style-map.js";
+import { K as u, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+var f = Object.defineProperty, r = (n, e, i, c) => {
+  for (var s = void 0, l = n.length - 1, d; l >= 0; l--)
+    (d = n[l]) && (s = d(e, i, s) || s);
+  return s && f(e, i, s), s;
+};
+class a extends u {
+  constructor() {
+    super(...arguments), this.value = 0, this.max = 100, this.size = "medium", this.variant = "primary", this.showValue = !1, this.showLabel = !1, this.striped = !1, this.animated = !1, this.label = "";
+  }
+  static {
+    this.styles = [
+      u.styles,
+      v`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .bar {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      /* The caption sits above the track, not inside it. A label centred over
+         an 8px bar is half on the fill and half off it, so it is unreadable at
+         one end of the range whatever colour it is given — and at size="small"
+         the track is 4px and clips it outright. Above the bar it reads in every
+         theme, at every size, at every value. */
+      .caption {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      .caption-label {
+        overflow: hidden;
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .caption-value {
+        flex: none;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .complete .caption-value {
+        color: var(--color-success-base);
+      }
+
+      .track {
+        position: relative;
+        height: 8px;
+        overflow: hidden;
+        background: var(--surface-raised);
+        border-radius: var(--border-radius);
+      }
+
+      :host([size='small']) .track {
+        height: 4px;
+      }
+      :host([size='large']) .track {
+        height: 12px;
+      }
+
+      .fill {
+        width: 0;
+        height: 100%;
+        background: var(--color-primary-base);
+        transition: width 0.4s var(--easing-standard);
+      }
+
+      :host([variant='info']) .fill {
+        background: var(--color-info-base);
+      }
+      :host([variant='success']) .fill {
+        background: var(--color-success-base);
+      }
+      :host([variant='warning']) .fill {
+        background: var(--color-warning-base);
+      }
+      :host([variant='danger']) .fill {
+        background: var(--color-danger-base);
+      }
+      :host([variant='neutral']) .fill {
+        background: var(--color-text-500);
+      }
+
+      /* Completion reads as success whatever the variant was. */
+      .fill.complete {
+        background: var(--color-success-base);
+      }
+
+      /* The one decorative animation in Kanto, and it earns its place: a
+         striped bar is how an operation says it is still working. */
+      .fill.striped {
+        background-image: linear-gradient(
+          45deg,
+          rgba(255, 255, 255, 0.07) 25%,
+          transparent 25%,
+          transparent 50%,
+          rgba(255, 255, 255, 0.07) 50%,
+          rgba(255, 255, 255, 0.07) 75%,
+          transparent 75%,
+          transparent
+        );
+        background-size: 1rem 1rem;
+      }
+
+      .fill.striped.animated {
+        animation: kt-progress-stripes 1s linear infinite;
+      }
+
+      @keyframes kt-progress-stripes {
+        from {
+          background-position: 0 0;
+        }
+        to {
+          background-position: 1rem 0;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .fill {
+          transition: none;
+        }
+        .fill.striped.animated {
+          animation: none;
+        }
+      }
+    `
+    ];
+  }
+  /** The value as a whole percentage, clamped to 0–100. */
+  get percent() {
+    const e = this.max > 0 ? this.max : 100, i = Math.min(Math.max(this.value, 0), e);
+    return Math.round(i / e * 100);
+  }
+  render() {
+    const e = this.percent, i = this.value >= (this.max > 0 ? this.max : 100), c = this.showLabel && this.label || this.showValue;
+    return o`<div part="base" class=${h({ bar: !0, complete: i })}>
+      ${c ? o`<div part="caption" class="caption">
+              ${this.showLabel && this.label ? o`<span class="caption-label">${this.label}</span>` : o`<span></span>`}
+              ${this.showValue ? o`<span part="value" class="caption-value">${e}%</span>` : p}
+            </div>` : p}
+
+      <div
+        part="track"
+        class="track"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.value}
+        aria-valuetext=${`${e}%`}
+        aria-label=${this.label || p}
+      >
+        <div
+          part="fill"
+          class=${h({
+      fill: !0,
+      complete: i,
+      striped: this.striped,
+      animated: this.animated
+    })}
+          style=${m({ width: `${e}%` })}
+        ></div>
+      </div>
+    </div>`;
+  }
+}
+r([
+  t({ type: Number })
+], a.prototype, "value");
+r([
+  t({ type: Number })
+], a.prototype, "max");
+r([
+  t({ type: String, reflect: !0 })
+], a.prototype, "size");
+r([
+  t({ type: String, reflect: !0 })
+], a.prototype, "variant");
+r([
+  t({ type: Boolean, attribute: "show-value" })
+], a.prototype, "showValue");
+r([
+  t({ type: Boolean, attribute: "show-label" })
+], a.prototype, "showLabel");
+r([
+  t({ type: Boolean, reflect: !0 })
+], a.prototype, "striped");
+r([
+  t({ type: Boolean, reflect: !0 })
+], a.prototype, "animated");
+r([
+  t({ type: String })
+], a.prototype, "label");
+b("kt-progress-bar", a);
+export {
+  a as KtProgressBar
+};
+//# sourceMappingURL=kt-progress-bar.js.map

package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-progress-bar.js","sources":["../../../../src/components/feedback/kt-progress-bar/kt-progress-bar.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\nexport type KtProgressVariant = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';\nexport type KtProgressSize = 'small' | 'medium' | 'large';\n\n/**\n * A determinate progress bar.\n *\n * Reaching `max` switches the fill to the success colour, so \"done\" reads at a\n * glance without the caller having to swap the variant.\n *\n * @element kt-progress-bar\n *\n * @csspart track - The groove.\n * @csspart fill - The filled portion.\n * @csspart base - The container.\n * @csspart caption - The row above the bar.\n * @csspart value - The percentage, when `show-value` is set.\n *\n * @example\n * ```html\n * <kt-progress-bar value=\"64\" show-value></kt-progress-bar>\n * <kt-progress-bar value=\"90\" variant=\"warning\" striped animated></kt-progress-bar>\n * ```\n */\nexport class KtProgressBar extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      .bar {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n\n      /* The caption sits above the track, not inside it. A label centred over\n         an 8px bar is half on the fill and half off it, so it is unreadable at\n         one end of the range whatever colour it is given — and at size=\"small\"\n         the track is 4px and clips it outright. Above the bar it reads in every\n         theme, at every size, at every value. */\n      .caption {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 12px;\n      }\n\n      .caption-label {\n        overflow: hidden;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .caption-value {\n        flex: none;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n      }\n\n      .complete .caption-value {\n        color: var(--color-success-base);\n      }\n\n      .track {\n        position: relative;\n        height: 8px;\n        overflow: hidden;\n        background: var(--surface-raised);\n        border-radius: var(--border-radius);\n      }\n\n      :host([size='small']) .track {\n        height: 4px;\n      }\n      :host([size='large']) .track {\n        height: 12px;\n      }\n\n      .fill {\n        width: 0;\n        height: 100%;\n        background: var(--color-primary-base);\n        transition: width 0.4s var(--easing-standard);\n      }\n\n      :host([variant='info']) .fill {\n        background: var(--color-info-base);\n      }\n      :host([variant='success']) .fill {\n        background: var(--color-success-base);\n      }\n      :host([variant='warning']) .fill {\n        background: var(--color-warning-base);\n      }\n      :host([variant='danger']) .fill {\n        background: var(--color-danger-base);\n      }\n      :host([variant='neutral']) .fill {\n        background: var(--color-text-500);\n      }\n\n      /* Completion reads as success whatever the variant was. */\n      .fill.complete {\n        background: var(--color-success-base);\n      }\n\n      /* The one decorative animation in Kanto, and it earns its place: a\n         striped bar is how an operation says it is still working. */\n      .fill.striped {\n        background-image: linear-gradient(\n          45deg,\n          rgba(255, 255, 255, 0.07) 25%,\n          transparent 25%,\n          transparent 50%,\n          rgba(255, 255, 255, 0.07) 50%,\n          rgba(255, 255, 255, 0.07) 75%,\n          transparent 75%,\n          transparent\n        );\n        background-size: 1rem 1rem;\n      }\n\n      .fill.striped.animated {\n        animation: kt-progress-stripes 1s linear infinite;\n      }\n\n      @keyframes kt-progress-stripes {\n        from {\n          background-position: 0 0;\n        }\n        to {\n          background-position: 1rem 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .fill {\n          transition: none;\n        }\n        .fill.striped.animated {\n          animation: none;\n        }\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  value = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  @property({ type: String, reflect: true })\n  size: KtProgressSize = 'medium';\n\n  @property({ type: String, reflect: true })\n  variant: KtProgressVariant = 'primary';\n\n  /** Draws the percentage in a caption above the bar. */\n  @property({ type: Boolean, attribute: 'show-value' })\n  showValue = false;\n\n  /**\n   * Shows `label` above the bar as visible text, beside the value.\n   *\n   * `label` alone is the accessible name and stays invisible, which is right\n   * when the surrounding copy already says what is progressing.\n   */\n  @property({ type: Boolean, attribute: 'show-label' })\n  showLabel = false;\n\n  @property({ type: Boolean, reflect: true })\n  striped = false;\n\n  /** Animates the stripes. Requires `striped`. */\n  @property({ type: Boolean, reflect: true })\n  animated = false;\n\n  /** Accessible name — what is progressing. */\n  @property({ type: String })\n  label = '';\n\n  /** The value as a whole percentage, clamped to 0–100. */\n  get percent(): number {\n    const max = this.max > 0 ? this.max : 100;\n    const clamped = Math.min(Math.max(this.value, 0), max);\n    return Math.round((clamped / max) * 100);\n  }\n\n  override render(): TemplateResult {\n    const percent = this.percent;\n    const complete = this.value >= (this.max > 0 ? this.max : 100);\n\n    const caption = (this.showLabel && this.label) || this.showValue;\n\n    return html`<div part=\"base\" class=${classMap({ bar: true, complete })}>\n      ${\n        caption\n          ? html`<div part=\"caption\" class=\"caption\">\n              ${\n                this.showLabel && this.label\n                  ? html`<span class=\"caption-label\">${this.label}</span>`\n                  : html`<span></span>`\n              }\n              ${\n                this.showValue\n                  ? html`<span part=\"value\" class=\"caption-value\">${percent}%</span>`\n                  : nothing\n              }\n            </div>`\n          : nothing\n      }\n\n      <div\n        part=\"track\"\n        class=\"track\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.value}\n        aria-valuetext=${`${percent}%`}\n        aria-label=${this.label || nothing}\n      >\n        <div\n          part=\"fill\"\n          class=${classMap({\n            fill: true,\n            complete,\n            striped: this.striped,\n            animated: this.animated,\n          })}\n          style=${styleMap({ width: `${percent}%` })}\n        ></div>\n      </div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-progress-bar', KtProgressBar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-progress-bar': KtProgressBar;\n  }\n}\n"],"names":["KtProgressBar","KtElement","css","max","clamped","percent","complete","caption","html","classMap","nothing","styleMap","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtSkeletonVariant = 'text' | 'rect' | 'circle';
+/**
+ * A loading placeholder, pulsing between two steps of the surface ramp.
+ *
+ * With `count` above one, the last line is drawn short — the shape a paragraph
+ * actually has, which is what makes a skeleton read as text rather than as
+ * stacked bars.
+ *
+ * The whole thing is `aria-hidden`: it is a picture of content that is not
+ * there yet. Announce loading state on the region that owns it, with
+ * `aria-busy`.
+ *
+ * @element kt-skeleton
+ *
+ * @csspart line - One placeholder line.
+ *
+ * @example
+ * ```html
+ * <kt-skeleton count="3"></kt-skeleton>
+ * <kt-skeleton variant="circle" width="48px" height="48px"></kt-skeleton>
+ * ```
+ */
+export declare class KtSkeleton extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    variant: KtSkeletonVariant;
+    /** Any CSS length. Defaults to the full width, or 40px for a circle. */
+    width: string;
+    /** Any CSS length. Defaults to the variant's natural height. */
+    height: string;
+    /** How many lines to draw. Above one, the last is shortened. */
+    count: number;
+    animated: boolean;
+    private line;
+    render(): TemplateResult;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-skeleton': KtSkeleton;
+    }
+}

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

@@ -0,0 +1,117 @@
+import { css as c, html as d } from "lit";
+import { property as s } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { styleMap as m } from "lit/directives/style-map.js";
+import { K as u, d as f } from "../../../chunks/kt-element-CcMLO5e8.js";
+var y = Object.defineProperty, a = (n, i, t, p) => {
+  for (var e = void 0, o = n.length - 1, l; o >= 0; o--)
+    (l = n[o]) && (e = l(i, t, e) || e);
+  return e && y(i, t, e), e;
+};
+const v = {
+  text: "14px",
+  rect: "80px",
+  circle: "40px"
+};
+class r extends u {
+  constructor() {
+    super(...arguments), this.variant = "text", this.width = "", this.height = "", this.count = 1, this.animated = !0;
+  }
+  static {
+    this.styles = [
+      u.styles,
+      c`
+      :host {
+        display: block;
+      }
+
+      .group {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .line {
+        display: block;
+        background: var(--surface-raised);
+        border-radius: var(--border-radius);
+      }
+
+      .text {
+        border-radius: 4px;
+      }
+
+      .circle {
+        border-radius: var(--radius-full);
+      }
+
+      .pulse {
+        animation: kt-skeleton-pulse 1.4s var(--easing-standard) infinite;
+      }
+
+      @keyframes kt-skeleton-pulse {
+        0%,
+        100% {
+          background: var(--surface-raised);
+        }
+        50% {
+          background: var(--surface-hover);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .pulse {
+          animation: none;
+        }
+      }
+    `
+    ];
+  }
+  line(i, t) {
+    const p = t && this.count > 1 && this.variant === "text";
+    return d`<span
+      part="line"
+      class=${h({
+      line: !0,
+      [this.variant]: !0,
+      pulse: this.animated
+    })}
+      style=${m({
+      width: p ? "60%" : this.width || (this.variant === "circle" ? "40px" : "100%"),
+      height: this.height || v[this.variant]
+    })}
+      data-index=${i}
+    ></span>`;
+  }
+  render() {
+    return this.count <= 1 ? this.line(0, !1) : d`<span class="group">
+      ${Array.from(
+      { length: this.count },
+      (i, t) => this.line(t, t === this.count - 1)
+    )}
+    </span>`;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("aria-hidden", "true");
+  }
+}
+a([
+  s({ type: String, reflect: !0 })
+], r.prototype, "variant");
+a([
+  s({ type: String })
+], r.prototype, "width");
+a([
+  s({ type: String })
+], r.prototype, "height");
+a([
+  s({ type: Number })
+], r.prototype, "count");
+a([
+  s({ type: Boolean })
+], r.prototype, "animated");
+f("kt-skeleton", r);
+export {
+  r as KtSkeleton
+};
+//# sourceMappingURL=kt-skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-skeleton.js","sources":["../../../../src/components/feedback/kt-skeleton/kt-skeleton.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\nexport type KtSkeletonVariant = 'text' | 'rect' | 'circle';\n\n/** Default height per variant, when none is given. */\nconst HEIGHT: Record<KtSkeletonVariant, string> = {\n  text: '14px',\n  rect: '80px',\n  circle: '40px',\n};\n\n/**\n * A loading placeholder, pulsing between two steps of the surface ramp.\n *\n * With `count` above one, the last line is drawn short — the shape a paragraph\n * actually has, which is what makes a skeleton read as text rather than as\n * stacked bars.\n *\n * The whole thing is `aria-hidden`: it is a picture of content that is not\n * there yet. Announce loading state on the region that owns it, with\n * `aria-busy`.\n *\n * @element kt-skeleton\n *\n * @csspart line - One placeholder line.\n *\n * @example\n * ```html\n * <kt-skeleton count=\"3\"></kt-skeleton>\n * <kt-skeleton variant=\"circle\" width=\"48px\" height=\"48px\"></kt-skeleton>\n * ```\n */\nexport class KtSkeleton extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .group {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n      }\n\n      .line {\n        display: block;\n        background: var(--surface-raised);\n        border-radius: var(--border-radius);\n      }\n\n      .text {\n        border-radius: 4px;\n      }\n\n      .circle {\n        border-radius: var(--radius-full);\n      }\n\n      .pulse {\n        animation: kt-skeleton-pulse 1.4s var(--easing-standard) infinite;\n      }\n\n      @keyframes kt-skeleton-pulse {\n        0%,\n        100% {\n          background: var(--surface-raised);\n        }\n        50% {\n          background: var(--surface-hover);\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .pulse {\n          animation: none;\n        }\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: KtSkeletonVariant = 'text';\n\n  /** Any CSS length. Defaults to the full width, or 40px for a circle. */\n  @property({ type: String })\n  width = '';\n\n  /** Any CSS length. Defaults to the variant's natural height. */\n  @property({ type: String })\n  height = '';\n\n  /** How many lines to draw. Above one, the last is shortened. */\n  @property({ type: Number })\n  count = 1;\n\n  @property({ type: Boolean })\n  animated = true;\n\n  private line(index: number, last: boolean): TemplateResult {\n    const shortened = last && this.count > 1 && this.variant === 'text';\n\n    return html`<span\n      part=\"line\"\n      class=${classMap({\n        line: true,\n        [this.variant]: true,\n        pulse: this.animated,\n      })}\n      style=${styleMap({\n        width: shortened ? '60%' : this.width || (this.variant === 'circle' ? '40px' : '100%'),\n        height: this.height || HEIGHT[this.variant],\n      })}\n      data-index=${index}\n    ></span>`;\n  }\n\n  override render(): TemplateResult {\n    if (this.count <= 1) return this.line(0, false);\n\n    return html`<span class=\"group\">\n      ${Array.from({ length: this.count }, (_, index) =>\n        this.line(index, index === this.count - 1),\n      )}\n    </span>`;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // A skeleton is a picture of absent content: there is nothing here to\n    // announce, and reading out a dozen empty boxes is worse than silence.\n    this.setAttribute('aria-hidden', 'true');\n  }\n}\n\ndefineElement('kt-skeleton', KtSkeleton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-skeleton': KtSkeleton;\n  }\n}\n"],"names":["HEIGHT","KtSkeleton","KtElement","css","index","last","shortened","html","classMap","styleMap","_","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AASA,MAAMA,IAA4C;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AACV;AAuBO,MAAMC,UAAmBC,EAAU;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmDL,KAAA,UAA6B,QAI7B,KAAA,QAAQ,IAIR,KAAA,SAAS,IAIT,KAAA,QAAQ,GAGR,KAAA,WAAW;AAAA,EAAA;AAAA,EAjEX,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA6CF;AAAA,EAoBQ,KAAKC,GAAeC,GAA+B;AACzD,UAAMC,IAAYD,KAAQ,KAAK,QAAQ,KAAK,KAAK,YAAY;AAE7D,WAAOE;AAAA;AAAA,cAEGC,EAAS;AAAA,MACf,MAAM;AAAA,MACN,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,OAAO,KAAK;AAAA,IAAA,CACb,CAAC;AAAA,cACMC,EAAS;AAAA,MACf,OAAOH,IAAY,QAAQ,KAAK,UAAU,KAAK,YAAY,WAAW,SAAS;AAAA,MAC/E,QAAQ,KAAK,UAAUN,EAAO,KAAK,OAAO;AAAA,IAAA,CAC3C,CAAC;AAAA,mBACWI,CAAK;AAAA;AAAA,EAEtB;AAAA,EAES,SAAyB;AAChC,WAAI,KAAK,SAAS,IAAU,KAAK,KAAK,GAAG,EAAK,IAEvCG;AAAA,QACH,MAAM;AAAA,MAAK,EAAE,QAAQ,KAAK,MAAA;AAAA,MAAS,CAACG,GAAGN,MACvC,KAAK,KAAKA,GAAOA,MAAU,KAAK,QAAQ,CAAC;AAAA,IAAA,CAC1C;AAAA;AAAA,EAEL;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GAGN,KAAK,aAAa,eAAe,MAAM;AAAA,EACzC;AACF;AAnDEO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlD9BX,EAmDX,WAAA,SAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtDfX,EAuDX,WAAA,OAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1DfX,EA2DX,WAAA,QAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9DfX,EA+DX,WAAA,OAAA;AAGAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjEhBX,EAkEX,WAAA,UAAA;AAsCFY,EAAc,eAAeZ,CAAU;"}

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

@@ -0,0 +1,57 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+import '../kt-progress-bar/kt-progress-bar.js';
+export type KtToastVariant = 'success' | 'information' | 'warning' | 'error';
+/**
+ * A transient notification.
+ *
+ * The only element in Kanto with a real shadow, and the only one that blurs
+ * what is behind it: a toast floats above the page, so it has to say so.
+ *
+ * @element kt-toast
+ *
+ * @csspart base - The toast surface.
+ * @csspart close - The dismiss button.
+ *
+ * @fires kt-toast-close - The toast asked to be removed, by timeout or by the
+ *   dismiss button. `<kt-toast-container>` listens for this.
+ */
+export declare class KtToast extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private timer;
+    private remaining;
+    variant: KtToastVariant;
+    /**
+     * The toast's title.
+     *
+     * Named `heading` because every element already has a `title`, and shadowing
+     * it would turn the toast into its own tooltip.
+     */
+    heading: string;
+    description: string;
+    dismissible: boolean;
+    /**
+     * Auto-dismiss after this many milliseconds, with a countdown bar. Zero
+     * keeps the toast until something removes it.
+     */
+    duration: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private startCountdown;
+    /** Runs the countdown from whatever `remaining` currently is. */
+    private tick;
+    private stopCountdown;
+    /** Pauses the countdown. The container calls this while the pointer is over the stack. */
+    pause(): void;
+    /** Resumes a paused countdown from where it stopped. */
+    resume(): void;
+    /** Asks to be removed. The container is what actually removes it. */
+    close(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-toast': KtToast;
+    }
+}