kanto-ds 1.7.0 → 1.9.0

package/dist/components/core/kt-avatar-group/kt-avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-avatar-group.js","sources":["../../../../src/components/core/kt-avatar-group/kt-avatar-group.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { strings } from '#internal/strings';\nimport '../kt-avatar/kt-avatar.js';\nimport type { KtAvatarSize } from '../kt-avatar/kt-avatar.js';\n\nexport interface KtAvatarGroupPerson {\n  readonly name: string;\n  /** A picture; without one the avatar draws the name's initials. */\n  readonly src?: string;\n}\n\n/**\n * The people on something — a project's members, a document's editors — as\n * avatars overlapping in a row, the rest summed up as \"+N\".\n *\n * @element kt-avatar-group\n *\n * @csspart list - The `<ul>`.\n * @csspart more - The \"+N\" at the end.\n *\n * @example\n * ```html\n * <kt-avatar-group label=\"Project members\" max=\"3\"></kt-avatar-group>\n * <script>\n *   group.people = [{ name: 'Dana Whitfield' }, { name: 'Hank Scorpio', src: '/hank.png' }];\n * </script>\n * ```\n */\nexport class KtAvatarGroup extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-block;\n        --kt-avatar-size: 32px;\n      }\n      :host([size='small']) {\n        --kt-avatar-size: 24px;\n      }\n      :host([size='large']) {\n        --kt-avatar-size: 48px;\n      }\n\n      ul {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n      /* Each one over the last by a third, ringed in the page's colour so the\n         overlap reads as a stack, not a smudge. */\n      li {\n        display: flex;\n        border-radius: var(--radius-full);\n        box-shadow: 0 0 0 2px var(--surface-page);\n      }\n      li + li {\n        margin-inline-start: calc(var(--kt-avatar-size) * -0.3);\n      }\n\n      .more {\n        display: grid;\n        place-items: center;\n        min-width: var(--kt-avatar-size);\n        height: var(--kt-avatar-size);\n        padding: 0 4px;\n        color: var(--text-body);\n        font: 600 calc(var(--kt-avatar-size) * 0.36) / 1 var(--font-family-body);\n        background: var(--surface-raised);\n        border-radius: var(--radius-full);\n      }\n    `,\n  ];\n\n  /** The people. Set as a property: `group.people = [...]`. */\n  @property({ attribute: false })\n  people: readonly KtAvatarGroupPerson[] = [];\n\n  /** How many avatars to show before summing the rest up. */\n  @property({ type: Number })\n  max = 4;\n\n  @property({ type: String, reflect: true })\n  size: KtAvatarSize = 'medium';\n\n  /** Accessible name for the group: \"Project members\". */\n  @property({ type: String })\n  label = '';\n\n  override render(): TemplateResult {\n    const shown = this.people.slice(0, Math.max(0, this.max));\n    const rest = this.people.length - shown.length;\n    return html`<ul part=\"list\" aria-label=${this.label || nothing}>\n      ${shown.map(\n        (person) =>\n          html`<li>\n            <kt-avatar\n              name=${person.name}\n              src=${person.src || nothing}\n              size=${this.size}\n            ></kt-avatar>\n          </li>`,\n      )}\n      ${\n        rest > 0\n          ? html`<li>\n              <span part=\"more\" class=\"more\" role=\"img\" aria-label=${strings().moreCount(rest)}\n                >+${rest}</span\n              >\n            </li>`\n          : nothing\n      }\n    </ul>`;\n  }\n}\n\ndefineElement('kt-avatar-group', KtAvatarGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-avatar-group': KtAvatarGroup;\n  }\n}\n"],"names":["KtAvatarGroup","KtElement","css","shown","rest","html","nothing","person","strings","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AA8BO,MAAMA,UAAsBC,EAAU;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgDL,KAAA,SAAyC,CAAA,GAIzC,KAAA,MAAM,GAGN,KAAA,OAAqB,UAIrB,KAAA,QAAQ;AAAA,EAAA;AAAA,EA1DR,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,IAAA;AAAA,EAyCF;AAAA,EAiBS,SAAyB;AAChC,UAAMC,IAAQ,KAAK,OAAO,MAAM,GAAG,KAAK,IAAI,GAAG,KAAK,GAAG,CAAC,GAClDC,IAAO,KAAK,OAAO,SAASD,EAAM;AACxC,WAAOE,+BAAkC,KAAK,SAASC,CAAO;AAAA,QAC1DH,EAAM;AAAA,MACN,CAACI,MACCF;AAAA;AAAA,qBAEWE,EAAO,IAAI;AAAA,oBACZA,EAAO,OAAOD,CAAO;AAAA,qBACpB,KAAK,IAAI;AAAA;AAAA;AAAA,IAAA,CAGvB;AAAA,QAECF,IAAO,IACHC;AAAA,qEACyDG,EAAA,EAAU,UAAUJ,CAAI,CAAC;AAAA,oBAC1EA,CAAI;AAAA;AAAA,qBAGZE,CACN;AAAA;AAAA,EAEJ;AACF;AAtCEG,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA/CnBV,EAgDX,WAAA,QAAA;AAIAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnDfV,EAoDX,WAAA,KAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAtD9BV,EAuDX,WAAA,MAAA;AAIAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1DfV,EA2DX,WAAA,OAAA;AA6BFW,EAAc,mBAAmBX,CAAa;"}

package/dist/components/core/kt-badge/kt-badge.js

@@ -2,9 +2,9 @@ import { css as h, nothing as n, html as l } from "lit";
 import { property as e } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as p, d as v } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as p, d as v } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 import { e as u } from "../../../chunks/events-r51msXNf.js";
-import { s as g } from "../../../chunks/index-TWJzttLX.js";
+import { s as g } from "../../../chunks/index-1ZFgagWW.js";
 import "../kt-icon/kt-icon.js";
 var f = Object.defineProperty, t = (s, r, i, y) => {
   for (var a = void 0, c = s.length - 1, d; c >= 0; c--)

package/dist/components/core/kt-button/flights.d.ts

@@ -0,0 +1,27 @@
+/**
+ * How an icon leaves a button when its action is done, and comes back.
+ *
+ * Most icons have no story to tell and fade; a few do. A paper plane takes a
+ * breath back, then flies off to the top right. Keyed by the Lucide name.
+ */
+export interface Flight {
+    /**
+     * While the action runs, the icon's own outline becomes the spinner — and
+     * becomes the icon again when it is done — instead of being swapped for one.
+     */
+    readonly morphs?: boolean;
+    /**
+     * On success, before the tick. Each keyframe carries the easing of the
+     * leg after it; the whole runs on a linear clock.
+     */
+    readonly leave: Keyframe[];
+    /** How many times the slow duration the leaving takes. */
+    readonly leaveScale?: number;
+    /** Back to rest, a moment later. */
+    readonly back: Keyframe[];
+}
+export declare function flightOf(icon: string): Flight;
+/** The tick or the alert coming in: a small overshoot, then rest. */
+export declare const ARRIVE: Keyframe[];
+/** A no: side to side, settling. */
+export declare const SHAKE: Keyframe[];

package/dist/components/core/kt-button/kt-button.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import { KtElement } from '#internal/kt-element';
 import '../kt-icon/kt-icon.js';
 export type KtButtonVariant = 'primary' | 'secondary' | 'secondary-no-bg' | 'dark' | 'danger' | 'delete' | 'warning' | 'info' | 'success' | 'text';
@@ -15,6 +15,11 @@ export type KtButtonType = 'button' | 'submit' | 'reset';
  * Setting `icon` with no slotted text produces a square icon-only button,
  * which then requires a `label`.
  *
+ * `run(action)` runs an async action and shows how it went: busy while it
+ * runs, then a tick — and `done-label`, if given — or, if it throws, a shake,
+ * an alert and `failed-label`; back to rest two seconds later. Some icons
+ * leave in their own way: a `send` plane flies off to the top right.
+ *
  * @element kt-button
  *
  * @slot - The button label.
@@ -27,6 +32,10 @@ export type KtButtonType = 'button' | 'submit' | 'reset';
  * <kt-button icon="plus">New entity</kt-button>
  * <kt-button variant="secondary" icon="refresh-cw">Refresh</kt-button>
  * <kt-button variant="danger">Delete</kt-button>
+ * <kt-button icon="send" done-label="Sent">Send</kt-button>
+ * <script>
+ *   send.addEventListener('click', () => send.run(() => api.send(message)));
+ * </script>
  * ```
  */
 export declare class KtButton extends KtElement {
@@ -57,6 +66,46 @@ export declare class KtButton extends KtElement {
     name: string;
     /** @see name */
     value: string;
+    /** Shown in place of the label once `run()` succeeds. Empty keeps the label. */
+    doneLabel: string;
+    /** Shown in place of the label when `run()` fails. Empty keeps the label. */
+    failedLabel: string;
+    /** How long the done or failed state stays before the button rests again. */
+    static DONE_MS: number;
+    private phase;
+    private running;
+    private restTimer;
+    /** The button's width before a label change, to move from. */
+    private widthBefore;
+    /** Whether this run turns its icon into the spinner and back. */
+    private morphing;
+    /**
+     * The morph, driven frame by frame: `m` from icon (0) to ring (1), moving
+     * towards `target`; `offset` walks the arc round the ring. One state, so a
+     * change of mind half-way goes back from where it is, never from an end.
+     */
+    private shape;
+    /**
+     * Runs `action` and shows how it went. A second call while it runs gets the
+     * same promise rather than a second run. Resolves with what the action
+     * resolved with; rejects with what it threw, after showing it failed.
+     */
+    run<T>(action: () => Promise<T>): Promise<T>;
+    private finish;
+    disconnectedCallback(): void;
+    /** Moves the morph towards the ring (1) or the icon (0); resolves on arrival at the icon. */
+    private morphTo;
+    private step;
+    /** Draws the morph where it stands: the outline, its opening, the fold. */
+    private drawShape;
+    updated(changed: PropertyValues): void;
+    /**
+     * A label that changed length: the width follows instead of jumping. A new
+     * icon draws in its own update, after this one, so it is waited for — the
+     * button measured before it would be an icon short, and shrink to that
+     * before snapping back. The wait ends before the frame is painted.
+     */
+    private followWidth;
     /** Moves focus to the button. */
     focus(options?: FocusOptions): void;
     blur(): void;
@@ -69,6 +118,8 @@ export declare class KtButton extends KtElement {
      */
     private submitEnclosingForm;
     private onClick;
+    /** The icon for where `run()` is, and how it moves while busy. */
+    private get shownIcon();
     render(): TemplateResult;
 }
 declare global {

package/dist/components/core/kt-button/kt-button.js

@@ -1,22 +1,133 @@
-import { css as h, html as d, nothing as i } from "lit";
-import { property as e } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { K as u, d as v } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { css as P, html as g, nothing as c } from "lit";
+import { property as l, state as T } from "lit/decorators.js";
+import { classMap as N } from "lit/directives/class-map.js";
+import { K as y, d as I } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { d as $, p as f } from "../../../chunks/motion-ChVUUO7O.js";
 import "../kt-icon/kt-icon.js";
-var g = Object.defineProperty, a = (l, t, o, y) => {
-  for (var n = void 0, c = l.length - 1, s; c >= 0; c--)
-    (s = l[c]) && (n = s(t, o, n) || n);
-  return n && g(t, o, n), n;
+const R = {
+  leave: [
+    { opacity: 1, scale: 1, easing: "ease-in" },
+    { opacity: 0, scale: 0.6 }
+  ],
+  back: [
+    { opacity: 0, scale: 0.6 },
+    { opacity: 1, scale: 1 }
+  ]
+}, A = {
+  morphs: !0,
+  leaveScale: 1.5,
+  leave: [
+    { translate: "0 0", rotate: "0deg", opacity: 1, easing: "cubic-bezier(0.2, 0, 0.4, 1)" },
+    // A breath back, slowing into it, before it goes.
+    {
+      translate: "-0.15em 0.15em",
+      rotate: "-6deg",
+      opacity: 1,
+      offset: 0.3,
+      easing: "cubic-bezier(0.55, 0, 0.8, 0.4)"
+    },
+    // Then off, speeding up, fading only at the end.
+    { translate: "1.1em -1.1em", rotate: "6deg", opacity: 1, offset: 0.75 },
+    { translate: "1.8em -1.8em", rotate: "10deg", opacity: 0 }
+  ],
+  back: [
+    { translate: "-0.8em 0.8em", opacity: 0 },
+    { translate: "0 0", opacity: 1 }
+  ]
+}, C = {
+  send: A,
+  "send-horizontal": A
 };
-const b = { small: 16, medium: 20, large: 24 };
-class r extends u {
+function m(a) {
+  return C[a] ?? R;
+}
+const M = [
+  { opacity: 0, scale: 0.3 },
+  { opacity: 1, scale: 1.15, offset: 0.6 },
+  { opacity: 1, scale: 1 }
+], O = [
+  { translate: "0" },
+  { translate: "-4px" },
+  { translate: "4px" },
+  { translate: "-3px" },
+  { translate: "2px" },
+  { translate: "0" }
+], b = [
+  [14.536, 21.686],
+  [15.473, 21.662],
+  [21.973, 2.662],
+  [21.338, 2.027],
+  [2.338, 8.527],
+  [2.314, 9.464],
+  [10.244, 12.644],
+  [11.356, 13.754]
+], _ = "M21.854 2.147L10.914 13.086", L = 64, v = [12, 12], E = 9;
+function z(a) {
+  let e = 0;
+  return a.forEach(([t, o], r) => {
+    const [i, d] = a[(r + 1) % a.length];
+    e += t * d - i * o;
+  }), Math.sign(e);
+}
+const q = Math.atan2(b[0][1] - v[1], b[0][0] - v[0]);
+function F(a, e) {
+  const t = a.map((h, p) => {
+    const u = a[(p + 1) % a.length];
+    return { from: h, to: u, length: Math.hypot(u[0] - h[0], u[1] - h[1]) };
+  }), o = t.reduce((h, p) => h + p.length, 0), r = [];
+  let i = 0, d = 0;
+  for (let h = 0; h < e; h += 1) {
+    const p = o * h / e;
+    for (; d + t[i].length < p; ) d += t[i++].length;
+    const { from: u, to: k, length: x } = t[i], S = x ? (p - d) / x : 0;
+    r.push([u[0] + (k[0] - u[0]) * S, u[1] + (k[1] - u[1]) * S]);
+  }
+  return r;
+}
+function D(a, e) {
+  const t = z(b) || 1;
+  return Array.from({ length: a }, (o, r) => {
+    const i = e + t * 2 * Math.PI * r / a;
+    return [v[0] + E * Math.cos(i), v[1] + E * Math.sin(i)];
+  });
+}
+function K(a, e, t) {
+  return a.map(([o, r], i) => [o + (e[i][0] - o) * t, r + (e[i][1] - r) * t]);
+}
+function j(a) {
+  const e = ([t, o]) => `${Number(t.toFixed(3))} ${Number(o.toFixed(3))}`;
+  return `M${a.map(e).join("L")}Z`;
+}
+var W = Object.defineProperty, s = (a, e, t, o) => {
+  for (var r = void 0, i = a.length - 1, d; i >= 0; i--)
+    (d = a[i]) && (r = d(e, t, r) || r);
+  return r && W(e, t, r), r;
+};
+const w = { small: 16, medium: 20, large: 24 }, G = F(b, L), Z = D(L, q), H = 0.28, U = 1e3, V = (a) => a < 0.5 ? 4 * a ** 3 : 1 - (-2 * a + 2) ** 3 / 2, n = class B extends y {
   constructor() {
-    super(...arguments), this.variant = "primary", this.size = "medium", this.disabled = !1, this.type = "button", this.icon = "", this.iconPosition = "left", this.label = "", this.popup = void 0, this.expanded = void 0, this.fullWidth = !1, this.name = "", this.value = "";
+    super(...arguments), this.variant = "primary", this.size = "medium", this.disabled = !1, this.type = "button", this.icon = "", this.iconPosition = "left", this.label = "", this.popup = void 0, this.expanded = void 0, this.fullWidth = !1, this.name = "", this.value = "", this.doneLabel = "", this.failedLabel = "", this.phase = "idle", this.running = null, this.widthBefore = 0, this.morphing = !1, this.shape = {
+      m: 0,
+      target: 0,
+      offset: 0,
+      frame: 0,
+      last: 0,
+      span: 1,
+      settled: null
+    }, this.step = (e) => {
+      const t = this.shape, o = t.last ? e - t.last : 0;
+      t.last = e;
+      const r = o / t.span;
+      if (t.m = t.target > t.m ? Math.min(t.target, t.m + r) : Math.max(t.target, t.m - r), t.offset = (t.offset - o / U) % 1, this.drawShape(), t.target === 0 && t.m === 0) {
+        t.frame = 0, t.settled?.(), t.settled = null;
+        return;
+      }
+      t.frame = requestAnimationFrame(this.step);
+    };
   }
   static {
     this.styles = [
-      u.styles,
-      h`
+      y.styles,
+      P`
       :host {
         display: inline-flex;
         vertical-align: middle;
@@ -38,6 +149,9 @@ class r extends u {
         border: none;
         border-radius: var(--border-radius);
         font: var(--font-normal-regular);
+        /* One line, always: the height is fixed, and a label that wrapped —
+           while run() moves the width to a new one — stood on end. */
+        white-space: nowrap;
         cursor: pointer;
         transition:
           background-color var(--duration-instant),
@@ -182,12 +296,126 @@ class r extends u {
         outline: var(--outline-width) solid var(--color-primary-base);
         outline-offset: 2px;
       }
+
+      /* === RUN ===
+         Busy is shown, not disabled: the button keeps its colour and the
+         focus, and ignores clicks. */
+      button[aria-busy='true'] {
+        cursor: progress;
+      }
+      .spin {
+        animation: kt-button-spin calc(var(--duration-slow) * 2) linear infinite;
+      }
+      @keyframes kt-button-spin {
+        to {
+          rotate: 1turn;
+        }
+      }
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
     `
     ];
   }
+  static {
+    this.DONE_MS = 2e3;
+  }
+  /**
+   * Runs `action` and shows how it went. A second call while it runs gets the
+   * same promise rather than a second run. Resolves with what the action
+   * resolved with; rejects with what it threw, after showing it failed.
+   */
+  run(e) {
+    if (this.running) return this.running;
+    clearTimeout(this.restTimer), this.morphing = !!m(this.icon).morphs && $(this, "--duration-slow") > 0, this.phase = "busy";
+    const t = (async () => {
+      try {
+        const o = await e();
+        return await this.finish("done"), o;
+      } catch (o) {
+        throw await this.finish("failed"), o;
+      } finally {
+        this.running = null;
+      }
+    })();
+    return this.running = t, t;
+  }
+  async finish(e) {
+    if (this.morphing && await this.morphTo(0), e === "done") {
+      const t = this.renderRoot.querySelector('[part="icon"]');
+      this.phase = "leaving", await this.updateComplete;
+      const o = m(this.icon);
+      await (t ? f(t, o.leave, "--duration-slow", "kt-button-leave", {
+        easing: "linear",
+        scale: o.leaveScale ?? 1
+      }) : null)?.finished.catch(() => {
+      });
+    }
+    this.widthBefore = this.getBoundingClientRect().width, this.morphing = !1, this.phase = e, this.restTimer = setTimeout(() => {
+      this.widthBefore = this.getBoundingClientRect().width, this.phase = "idle";
+    }, B.DONE_MS);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), clearTimeout(this.restTimer), cancelAnimationFrame(this.shape.frame), this.shape.frame = 0, this.shape.settled?.(), this.running || (this.phase = "idle");
+  }
+  /** Moves the morph towards the ring (1) or the icon (0); resolves on arrival at the icon. */
+  morphTo(e) {
+    const t = this.shape;
+    t.target = e, t.span = $(this, "--duration-slow");
+    const o = new Promise((r) => {
+      e === 0 && t.m === 0 && !t.frame ? r() : e === 0 ? t.settled = r : r();
+    });
+    return t.frame || (t.last = 0, t.frame = requestAnimationFrame(this.step)), o;
+  }
+  /** Draws the morph where it stands: the outline, its opening, the fold. */
+  drawShape() {
+    const e = this.renderRoot.querySelector("svg.morph");
+    if (!e) return;
+    const t = V(this.shape.m), o = e.querySelector(".outline");
+    o.setAttribute("d", j(K(G, Z, t)));
+    const r = H * t;
+    o.setAttribute("stroke-dasharray", `${1 - r} ${r}`), o.setAttribute("stroke-dashoffset", String(this.shape.offset)), e.querySelector(".fold").style.opacity = String(Math.max(0, 1 - t * 2.5));
+  }
+  // `phase` is private, so the map is read untyped.
+  updated(e) {
+    super.updated(e);
+    const t = e.get("phase");
+    if (t === void 0 || !e.has("phase")) return;
+    this.phase === "busy" && this.morphing && (this.drawShape(), this.morphTo(1));
+    const o = this.renderRoot.querySelector('[part="icon"]'), r = this.renderRoot.querySelector("button");
+    (this.phase === "done" || this.phase === "failed") && (o && f(o, M, "--duration-normal", "kt-button-arrive"), this.phase === "failed" && f(r, O, "--duration-slow", "kt-button-shake")), this.phase === "idle" && (t === "done" || t === "failed") && o && f(o, m(this.icon).back, "--duration-normal", "kt-button-back");
+    const i = this.widthBefore;
+    this.widthBefore = 0, i && this.followWidth(i, o);
+  }
+  /**
+   * A label that changed length: the width follows instead of jumping. A new
+   * icon draws in its own update, after this one, so it is waited for — the
+   * button measured before it would be an icon short, and shrink to that
+   * before snapping back. The wait ends before the frame is painted.
+   */
+  async followWidth(e, t) {
+    t instanceof y && await t.updateComplete;
+    const o = this.getBoundingClientRect().width;
+    Math.abs(o - e) <= 0.5 || f(
+      this,
+      [
+        // Clipped while it moves: a label wider than the button so far is
+        // cut at its edge, not spilled past it.
+        { width: `${e}px`, overflow: "clip" },
+        { width: `${o}px`, overflow: "clip" }
+      ],
+      "--duration-normal",
+      "kt-button-resize"
+    );
+  }
   /** Moves focus to the button. */
-  focus(t) {
-    this.shadowRoot?.querySelector("button")?.focus(t);
+  focus(e) {
+    this.shadowRoot?.querySelector("button")?.focus(e);
   }
   blur() {
     this.shadowRoot?.querySelector("button")?.blur();
@@ -202,78 +430,126 @@ class r extends u {
    * `name`/`value` into the submission the way an author expects.
    */
   submitEnclosingForm() {
-    const t = this.closest("form");
-    if (!t) return;
-    const o = document.createElement("button");
-    o.type = this.type, o.hidden = !0, this.name && (o.name = this.name), this.value && (o.value = this.value), t.append(o), o.click(), o.remove();
+    const e = this.closest("form");
+    if (!e) return;
+    const t = document.createElement("button");
+    t.type = this.type, t.hidden = !0, this.name && (t.name = this.name), this.value && (t.value = this.value), e.append(t), t.click(), t.remove();
   }
-  onClick(t) {
-    if (this.disabled) {
-      t.preventDefault(), t.stopPropagation();
+  onClick(e) {
+    if (this.disabled || this.phase !== "idle") {
+      e.preventDefault(), e.stopPropagation();
       return;
     }
     this.type !== "button" && this.submitEnclosingForm();
   }
+  /** The icon for where `run()` is, and how it moves while busy. */
+  get shownIcon() {
+    const e = m(this.icon);
+    switch (this.phase) {
+      case "busy":
+        return this.icon && e.morphs ? { name: this.icon, motion: "" } : { name: "loader-circle", motion: "spin" };
+      case "done":
+        return { name: "check", motion: "" };
+      case "failed":
+        return { name: "circle-alert", motion: "" };
+      default:
+        return this.icon ? { name: this.icon, motion: "" } : null;
+    }
+  }
   render() {
-    const t = !!this.icon && !this.hasLabelText, o = this.icon ? d`<kt-icon part="icon" name=${this.icon} size=${b[this.size]}></kt-icon>` : i;
-    return d`<button
-      part="button"
-      class=${p({
+    const e = !!this.icon && !this.hasLabelText, t = this.shownIcon, o = this.phase === "busy" || this.phase === "leaving", r = o && this.morphing ? g`<svg
+            part="icon"
+            class="morph"
+            viewBox="0 0 24 24"
+            width=${w[this.size]}
+            height=${w[this.size]}
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path class="outline" pathLength="1"></path>
+            <path class="fold" d=${_}></path>
+          </svg>` : t ? g`<kt-icon
+              part="icon"
+              class=${t.motion || c}
+              name=${t.name}
+              size=${w[this.size]}
+            ></kt-icon>` : c, i = this.phase === "done" ? this.doneLabel : this.phase === "failed" ? this.failedLabel : "";
+    return g`<button
+        part="button"
+        class=${N({
       [this.variant]: !0,
       [this.size]: !0,
-      "icon-only": t
+      "icon-only": e
     })}
-      type=${this.type}
-      ?disabled=${this.disabled}
-      aria-label=${this.label || i}
-      aria-haspopup=${this.popup ?? i}
-      aria-expanded=${this.expanded === void 0 ? i : String(this.expanded)}
-      @click=${this.onClick}
-    >
-      ${this.iconPosition === "left" ? o : i}
-      <slot></slot>
-      ${this.iconPosition === "right" ? o : i}
-    </button>`;
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-label=${this.label || c}
+        aria-haspopup=${this.popup ?? c}
+        aria-expanded=${this.expanded === void 0 ? c : String(this.expanded)}
+        aria-busy=${o ? "true" : c}
+        aria-disabled=${this.phase === "idle" ? c : "true"}
+        @click=${this.onClick}
+      >
+        ${this.iconPosition === "left" ? r : c}
+        ${i && !e ? g`<span>${i}</span>` : c}
+        <slot ?hidden=${!!i && !e}></slot>
+        ${this.iconPosition === "right" ? r : c}
+      </button>
+      <span class="visually-hidden" role="status">${i}</span>`;
   }
-}
-a([
-  e({ type: String, reflect: !0 })
-], r.prototype, "variant");
-a([
-  e({ type: String, reflect: !0 })
-], r.prototype, "size");
-a([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
-a([
-  e({ type: String })
-], r.prototype, "type");
-a([
-  e({ type: String })
-], r.prototype, "icon");
-a([
-  e({ type: String, attribute: "icon-position" })
-], r.prototype, "iconPosition");
-a([
-  e({ type: String })
-], r.prototype, "label");
-a([
-  e({ attribute: !1 })
-], r.prototype, "popup");
-a([
-  e({ attribute: !1 })
-], r.prototype, "expanded");
-a([
-  e({ type: Boolean, reflect: !0, attribute: "full-width" })
-], r.prototype, "fullWidth");
-a([
-  e({ type: String })
-], r.prototype, "name");
-a([
-  e({ type: String })
-], r.prototype, "value");
-v("kt-button", r);
+};
+s([
+  l({ type: String, reflect: !0 })
+], n.prototype, "variant");
+s([
+  l({ type: String, reflect: !0 })
+], n.prototype, "size");
+s([
+  l({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled");
+s([
+  l({ type: String })
+], n.prototype, "type");
+s([
+  l({ type: String })
+], n.prototype, "icon");
+s([
+  l({ type: String, attribute: "icon-position" })
+], n.prototype, "iconPosition");
+s([
+  l({ type: String })
+], n.prototype, "label");
+s([
+  l({ attribute: !1 })
+], n.prototype, "popup");
+s([
+  l({ attribute: !1 })
+], n.prototype, "expanded");
+s([
+  l({ type: Boolean, reflect: !0, attribute: "full-width" })
+], n.prototype, "fullWidth");
+s([
+  l({ type: String })
+], n.prototype, "name");
+s([
+  l({ type: String })
+], n.prototype, "value");
+s([
+  l({ type: String, attribute: "done-label" })
+], n.prototype, "doneLabel");
+s([
+  l({ type: String, attribute: "failed-label" })
+], n.prototype, "failedLabel");
+s([
+  T()
+], n.prototype, "phase");
+let Y = n;
+I("kt-button", Y);
 export {
-  r as KtButton
+  Y as KtButton
 };
 //# sourceMappingURL=kt-button.js.map