kanto-ds 1.0.0

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

@@ -0,0 +1,254 @@
+import { css as u, nothing as n, html as l } from "lit";
+import { property as e } 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 p, d as v } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as b } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../kt-icon/kt-icon.js";
+var g = Object.defineProperty, t = (s, r, i, f) => {
+  for (var a = void 0, c = s.length - 1, d; c >= 0; c--)
+    (d = s[c]) && (a = d(r, i, a) || a);
+  return a && g(r, i, a), a;
+};
+class o extends p {
+  constructor() {
+    super(...arguments), this.variant = "tag", this.tone = "neutral", this.size = "medium", this.label = "", this.color = "", this.icon = "", this.clickable = !1, this.removable = !1, this.error = !1;
+  }
+  static {
+    this.styles = [
+      p.styles,
+      u`
+      :host {
+        display: inline-flex;
+        vertical-align: middle;
+        --kt-badge-color: var(--color-primary-hover);
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--gap-element);
+        width: fit-content;
+        margin: 0;
+        padding: var(--padding-chip);
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        background-color: var(--color-dark-20);
+        border: var(--border-width) solid var(--color-text-600);
+        border-radius: var(--radius-input);
+        white-space: normal;
+      }
+
+      .small {
+        padding: 2px 8px;
+        font: var(--font-normal-small);
+      }
+
+      /* === TAG === */
+      .tag {
+        border-radius: var(--radius-pill);
+      }
+
+      /* === CODE ===
+         Uses the semantic code surface rather than a ramp step: --color-dark-8
+         is the darkest surface in the dark theme and pure white in the light
+         one, which made this badge white-on-white. */
+      .code {
+        color: var(--text-code);
+        font: var(--font-code-regular);
+        background-color: var(--surface-code);
+        border-color: var(--border-code);
+      }
+
+      /* === CATEGORY ===
+         color-mix keeps the 20% fill honest for any colour notation the host
+         hands us; concatenating a "33" onto a hex string produces garbage
+         for rgb() and named colours. */
+      .category {
+        color: var(--kt-badge-color);
+        background-color: color-mix(in srgb, var(--kt-badge-color) 20%, transparent);
+        border-color: var(--kt-badge-color);
+      }
+
+      /* === COUNT ===
+         No border: a number pinned to a nav item is a mark on the thing it
+         counts, not a label with an outline of its own. */
+      .count {
+        min-width: 20px;
+        padding: 2px 6px;
+        justify-content: center;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        font-variant-numeric: tabular-nums;
+        line-height: 1.4;
+        white-space: nowrap;
+        background: var(--surface-raised);
+        border: none;
+        border-radius: var(--radius-pill);
+      }
+
+      /* === TONES ===
+         The system's tinted pair everywhere: the colour at 12% behind, the
+         colour itself as the ink. The border follows on the bordered shapes
+         and is simply absent on the count shape. */
+      .primary {
+        color: var(--color-primary-base);
+        background-color: var(--color-primary-soft);
+        border-color: var(--color-primary-base);
+      }
+      .success {
+        color: var(--color-success-base);
+        background-color: var(--color-success-soft);
+        border-color: var(--color-success-base);
+      }
+      .warning {
+        color: var(--color-warning-base);
+        background-color: var(--color-warning-soft);
+        border-color: var(--color-warning-base);
+      }
+      .danger {
+        color: var(--color-danger-base);
+        background-color: var(--color-danger-soft);
+        border-color: var(--color-danger-base);
+      }
+      .info {
+        color: var(--color-info-base);
+        background-color: var(--color-info-soft);
+        border-color: var(--color-info-base);
+      }
+
+      .count.primary,
+      .count.success,
+      .count.warning,
+      .count.danger,
+      .count.info {
+        border: none;
+      }
+
+      /* === CLICKABLE === */
+      .clickable {
+        cursor: pointer;
+      }
+      .clickable:hover {
+        outline: var(--outline-width) solid var(--text-muted);
+      }
+      .clickable:active {
+        color: var(--color-white);
+        background-color: var(--color-primary-base);
+        border-color: transparent;
+      }
+      .clickable:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .remove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: -4px;
+        padding: 0;
+        color: inherit;
+        background: none;
+        border: none;
+        border-radius: var(--radius-pill);
+        cursor: pointer;
+        opacity: 0.65;
+      }
+
+      .remove:hover {
+        opacity: 1;
+      }
+
+      .remove:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 1px;
+      }
+
+      kt-icon {
+        flex: none;
+      }
+    `
+    ];
+  }
+  get display() {
+    const r = this.label || (this.textContent ?? "").trim();
+    if (this.max === void 0) return r;
+    const i = Number(r);
+    return Number.isFinite(i) && i > this.max ? `${this.max}+` : r;
+  }
+  activate() {
+    this.clickable && b(this, "kt-badge-click");
+  }
+  onKeyDown(r) {
+    this.clickable && (r.key !== "Enter" && r.key !== " " || (r.preventDefault(), this.activate()));
+  }
+  onRemove(r) {
+    r.stopPropagation(), b(this, "kt-remove");
+  }
+  render() {
+    const r = this.error ? "danger" : this.tone;
+    return l`<span
+      part="base"
+      class=${h({
+      badge: !0,
+      [this.variant]: !0,
+      [r]: r !== "neutral",
+      small: this.size === "small",
+      clickable: this.clickable
+    })}
+      style=${m(this.color ? { "--kt-badge-color": this.color } : {})}
+      role=${this.clickable ? "button" : n}
+      tabindex=${this.clickable ? 0 : n}
+      @click=${this.activate}
+      @keydown=${this.onKeyDown}
+    >
+      ${this.icon ? l`<kt-icon name=${this.icon} size="14"></kt-icon>` : n}
+      ${this.max === void 0 ? l`<slot>${this.label}</slot>` : this.display}
+      ${this.removable ? l`<button
+              part="remove"
+              type="button"
+              class="remove"
+              aria-label=${`Remove ${this.display || "this"}`}
+              @click=${this.onRemove}
+            >
+              <kt-icon name="x" size="12"></kt-icon>
+            </button>` : n}
+    </span>`;
+  }
+}
+t([
+  e({ type: String, reflect: !0 })
+], o.prototype, "variant");
+t([
+  e({ type: String, reflect: !0 })
+], o.prototype, "tone");
+t([
+  e({ type: String, reflect: !0 })
+], o.prototype, "size");
+t([
+  e({ type: String })
+], o.prototype, "label");
+t([
+  e({ type: String })
+], o.prototype, "color");
+t([
+  e({ type: String })
+], o.prototype, "icon");
+t([
+  e({ type: Boolean, reflect: !0 })
+], o.prototype, "clickable");
+t([
+  e({ type: Boolean, reflect: !0 })
+], o.prototype, "removable");
+t([
+  e({ type: Number })
+], o.prototype, "max");
+t([
+  e({ type: Boolean, reflect: !0 })
+], o.prototype, "error");
+v("kt-badge", o);
+export {
+  o as KtBadge
+};
+//# sourceMappingURL=kt-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-badge.js","sources":["../../../../src/components/core/kt-badge/kt-badge.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';\nimport { emit } from '#internal/events';\nimport '../kt-icon/kt-icon.js';\n\nexport type KtBadgeVariant = 'tag' | 'code' | 'category' | 'count';\nexport type KtBadgeTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';\nexport type KtBadgeSize = 'small' | 'medium';\n\n/**\n * A compact label: a pill `tag`, a monospaced `code` token, a `category`\n * tinted with a colour of your choosing, or a `count`.\n *\n * Two independent axes, because they answer different questions. `variant` is\n * the **shape** — what kind of thing this is. `tone` is the **colour** — what\n * it means. A tag can be neutral or dangerous; so can a count. Folding them\n * into one list would give you nine variants and no way to say \"a tag, but\n * this one is a warning\".\n *\n * `count` is the exception that carries no border, because a number pinned to\n * a nav item is not a label with an outline — it is a mark on the thing it\n * counts.\n *\n * @element kt-badge\n *\n * @slot - The text. Falls back to the `label` attribute.\n *\n * @csspart base - The container.\n * @csspart remove - The remove button, when `removable`.\n *\n * @cssproperty --kt-badge-color - Category hue. The fill is this colour at 20%.\n *\n * @fires kt-badge-click - A `clickable` badge was activated. Cancelable.\n * @fires kt-remove - The remove button was pressed. Cancelable: cancel it and\n *   remove the badge yourself once the server agrees.\n *\n * @example\n * ```html\n * <kt-badge>Design systems</kt-badge>\n * <kt-badge tone=\"success\">Active</kt-badge>\n * <kt-badge variant=\"code\">--surface-card</kt-badge>\n * <kt-badge variant=\"category\" color=\"#3987e5\">Infrastructure</kt-badge>\n * <kt-badge variant=\"count\" tone=\"danger\" max=\"99\">128</kt-badge>\n * <kt-badge icon=\"user\" removable>Assigned to me</kt-badge>\n * ```\n */\nexport class KtBadge extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        vertical-align: middle;\n        --kt-badge-color: var(--color-primary-hover);\n      }\n\n      .badge {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--gap-element);\n        width: fit-content;\n        margin: 0;\n        padding: var(--padding-chip);\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        background-color: var(--color-dark-20);\n        border: var(--border-width) solid var(--color-text-600);\n        border-radius: var(--radius-input);\n        white-space: normal;\n      }\n\n      .small {\n        padding: 2px 8px;\n        font: var(--font-normal-small);\n      }\n\n      /* === TAG === */\n      .tag {\n        border-radius: var(--radius-pill);\n      }\n\n      /* === CODE ===\n         Uses the semantic code surface rather than a ramp step: --color-dark-8\n         is the darkest surface in the dark theme and pure white in the light\n         one, which made this badge white-on-white. */\n      .code {\n        color: var(--text-code);\n        font: var(--font-code-regular);\n        background-color: var(--surface-code);\n        border-color: var(--border-code);\n      }\n\n      /* === CATEGORY ===\n         color-mix keeps the 20% fill honest for any colour notation the host\n         hands us; concatenating a \"33\" onto a hex string produces garbage\n         for rgb() and named colours. */\n      .category {\n        color: var(--kt-badge-color);\n        background-color: color-mix(in srgb, var(--kt-badge-color) 20%, transparent);\n        border-color: var(--kt-badge-color);\n      }\n\n      /* === COUNT ===\n         No border: a number pinned to a nav item is a mark on the thing it\n         counts, not a label with an outline of its own. */\n      .count {\n        min-width: 20px;\n        padding: 2px 6px;\n        justify-content: center;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n        line-height: 1.4;\n        white-space: nowrap;\n        background: var(--surface-raised);\n        border: none;\n        border-radius: var(--radius-pill);\n      }\n\n      /* === TONES ===\n         The system's tinted pair everywhere: the colour at 12% behind, the\n         colour itself as the ink. The border follows on the bordered shapes\n         and is simply absent on the count shape. */\n      .primary {\n        color: var(--color-primary-base);\n        background-color: var(--color-primary-soft);\n        border-color: var(--color-primary-base);\n      }\n      .success {\n        color: var(--color-success-base);\n        background-color: var(--color-success-soft);\n        border-color: var(--color-success-base);\n      }\n      .warning {\n        color: var(--color-warning-base);\n        background-color: var(--color-warning-soft);\n        border-color: var(--color-warning-base);\n      }\n      .danger {\n        color: var(--color-danger-base);\n        background-color: var(--color-danger-soft);\n        border-color: var(--color-danger-base);\n      }\n      .info {\n        color: var(--color-info-base);\n        background-color: var(--color-info-soft);\n        border-color: var(--color-info-base);\n      }\n\n      .count.primary,\n      .count.success,\n      .count.warning,\n      .count.danger,\n      .count.info {\n        border: none;\n      }\n\n      /* === CLICKABLE === */\n      .clickable {\n        cursor: pointer;\n      }\n      .clickable:hover {\n        outline: var(--outline-width) solid var(--text-muted);\n      }\n      .clickable:active {\n        color: var(--color-white);\n        background-color: var(--color-primary-base);\n        border-color: transparent;\n      }\n      .clickable:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .remove {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        margin-right: -4px;\n        padding: 0;\n        color: inherit;\n        background: none;\n        border: none;\n        border-radius: var(--radius-pill);\n        cursor: pointer;\n        opacity: 0.65;\n      }\n\n      .remove:hover {\n        opacity: 1;\n      }\n\n      .remove:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 1px;\n      }\n\n      kt-icon {\n        flex: none;\n      }\n    `,\n  ];\n\n  /** The shape: what kind of thing this is. */\n  @property({ type: String, reflect: true })\n  variant: KtBadgeVariant = 'tag';\n\n  /** The colour: what it means. Independent of `variant`. */\n  @property({ type: String, reflect: true })\n  tone: KtBadgeTone = 'neutral';\n\n  @property({ type: String, reflect: true })\n  size: KtBadgeSize = 'medium';\n\n  /** Badge text. The default slot wins when both are present. */\n  @property({ type: String })\n  label = '';\n\n  /** Category hue: any CSS colour. The fill is this colour at 20%. */\n  @property({ type: String })\n  color = '';\n\n  /** Lucide icon name, before the text. */\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: Boolean, reflect: true })\n  clickable = false;\n\n  /** Adds a remove button. Fires a cancelable `kt-remove`. */\n  @property({ type: Boolean, reflect: true })\n  removable = false;\n\n  /**\n   * Caps a numeric label: `max=\"99\"` shows `99+`.\n   * Ignored when the content is not a number.\n   */\n  @property({ type: Number })\n  max?: number;\n\n  /** Shorthand for `tone=\"danger\"`, kept from the field components. */\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  private get display(): string {\n    const raw = this.label || (this.textContent ?? '').trim();\n    if (this.max === undefined) return raw;\n\n    const n = Number(raw);\n    return Number.isFinite(n) && n > this.max ? `${this.max}+` : raw;\n  }\n\n  private activate(): void {\n    if (this.clickable) emit(this, 'kt-badge-click');\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    if (!this.clickable) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    event.preventDefault();\n    this.activate();\n  }\n\n  private onRemove(event: Event): void {\n    // Otherwise a removable clickable badge reports both at once.\n    event.stopPropagation();\n    emit(this, 'kt-remove');\n  }\n\n  override render(): TemplateResult {\n    const tone = this.error ? 'danger' : this.tone;\n\n    return html`<span\n      part=\"base\"\n      class=${classMap({\n        badge: true,\n        [this.variant]: true,\n        [tone]: tone !== 'neutral',\n        small: this.size === 'small',\n        clickable: this.clickable,\n      })}\n      style=${styleMap(this.color ? { '--kt-badge-color': this.color } : {})}\n      role=${this.clickable ? 'button' : nothing}\n      tabindex=${this.clickable ? 0 : nothing}\n      @click=${this.activate}\n      @keydown=${this.onKeyDown}\n    >\n      ${this.icon ? html`<kt-icon name=${this.icon} size=\"14\"></kt-icon>` : nothing}\n      ${this.max === undefined ? html`<slot>${this.label}</slot>` : this.display}\n      ${\n        this.removable\n          ? html`<button\n              part=\"remove\"\n              type=\"button\"\n              class=\"remove\"\n              aria-label=${`Remove ${this.display || 'this'}`}\n              @click=${this.onRemove}\n            >\n              <kt-icon name=\"x\" size=\"12\"></kt-icon>\n            </button>`\n          : nothing\n      }\n    </span>`;\n  }\n}\n\ndefineElement('kt-badge', KtBadge);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-badge': KtBadge;\n  }\n}\n"],"names":["KtBadge","KtElement","css","raw","n","emit","event","tone","html","classMap","styleMap","nothing","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+import { 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';
+export type KtButtonSize = 'small' | 'medium' | 'large';
+export type KtButtonType = 'button' | 'submit' | 'reset';
+/**
+ * The Kanto action button.
+ *
+ * Ten variants; `primary` for the one action a screen is about, `secondary`
+ * (a soft indigo tint) for everything supporting it. The semantic variants —
+ * `danger`, `warning`, `info`, `success` — are tinted fills with coloured
+ * text; `delete` is the only solid red, reserved for irreversible actions.
+ *
+ * Setting `icon` with no slotted text produces a square icon-only button,
+ * which then requires a `label`.
+ *
+ * @element kt-button
+ *
+ * @slot - The button label.
+ *
+ * @csspart button - The native `<button>`.
+ * @csspart icon - The icon, when `icon` is set.
+ *
+ * @example
+ * ```html
+ * <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>
+ * ```
+ */
+export declare class KtButton extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Visual variant. */
+    variant: KtButtonVariant;
+    /** Height: 32 / 40 / 48px at the desktop scale. */
+    size: KtButtonSize;
+    disabled: boolean;
+    /** Native button behaviour. `submit` and `reset` act on the enclosing form. */
+    type: KtButtonType;
+    /** Lucide icon name, kebab-case. */
+    icon: string;
+    /** Which side of the label the icon sits on. */
+    iconPosition: 'left' | 'right';
+    /** Accessible name. Required for an icon-only button. */
+    label: string;
+    /** Stretches the button to the width of its container. */
+    fullWidth: boolean;
+    /** Submitted with the form, as on a native button. */
+    name: string;
+    /** @see name */
+    value: string;
+    /** Moves focus to the button. */
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    private get hasLabelText();
+    /**
+     * A button inside a shadow root is invisible to the enclosing form, so
+     * `type="submit"` would do nothing. Click a throwaway native button instead:
+     * that runs constraint validation, fires a real `submit` event, and carries
+     * `name`/`value` into the submission the way an author expects.
+     */
+    private submitEnclosingForm;
+    private onClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-button': KtButton;
+    }
+}

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

@@ -0,0 +1,271 @@
+import { css as h, html as d, nothing as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { K as u, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import "../kt-icon/kt-icon.js";
+var g = Object.defineProperty, e = (l, r, o, y) => {
+  for (var n = void 0, c = l.length - 1, s; c >= 0; c--)
+    (s = l[c]) && (n = s(r, o, n) || n);
+  return n && g(r, o, n), n;
+};
+const p = { small: 16, medium: 20, large: 24 };
+class t extends u {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "medium", this.disabled = !1, this.type = "button", this.icon = "", this.iconPosition = "left", this.label = "", this.fullWidth = !1, this.name = "", this.value = "";
+  }
+  static {
+    this.styles = [
+      u.styles,
+      h`
+      :host {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+
+      :host([full-width]) {
+        display: flex;
+        width: 100%;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: var(--button-height);
+        padding: 0 var(--button-padding-x);
+        gap: var(--gap-button);
+        border: none;
+        border-radius: var(--border-radius);
+        font: var(--font-normal-regular);
+        cursor: pointer;
+        transition:
+          background-color var(--duration-instant),
+          color var(--duration-instant);
+      }
+
+      /* === SIZES === */
+      .small {
+        height: var(--button-height-small);
+        padding: 0 8px;
+        font: var(--font-normal-small);
+      }
+
+      .large {
+        height: var(--button-height-large);
+        padding: 0 calc(var(--button-padding-x) + 8px);
+        font: var(--font-normal-medium);
+      }
+
+      /* === VARIANTS ===
+         Press returns to the base colour; Kanto has no scale or shrink. */
+      .primary {
+        color: var(--color-white);
+        background-color: var(--color-primary-base);
+      }
+      .primary:hover {
+        background-color: var(--color-primary-hover);
+      }
+      .primary:active {
+        background-color: var(--color-primary-base);
+      }
+
+      .secondary {
+        color: var(--color-primary-base);
+        background-color: var(--color-primary-soft);
+      }
+      .secondary:hover {
+        background-color: var(--color-secondary-hover);
+      }
+      .secondary:active {
+        background-color: var(--color-primary-soft);
+      }
+
+      .secondary-no-bg {
+        color: var(--color-primary-base);
+        background: none;
+      }
+      .secondary-no-bg:hover {
+        background-color: var(--color-secondary-hover);
+      }
+      .secondary-no-bg:active {
+        background-color: var(--color-dark-14);
+      }
+
+      .dark {
+        color: var(--color-text-400);
+        background-color: var(--color-dark-20);
+      }
+      .dark:hover {
+        background-color: var(--color-dark-22);
+      }
+      .dark:active {
+        background-color: var(--color-dark-20);
+      }
+
+      .danger {
+        color: var(--color-danger-base);
+        background-color: var(--color-danger-soft);
+      }
+      .danger:hover {
+        background-color: var(--color-danger-hover);
+      }
+      .danger:active {
+        background-color: var(--color-danger-soft);
+      }
+
+      .delete {
+        color: var(--color-white);
+        background-color: var(--color-navigation-icon-close);
+      }
+      .delete:hover {
+        background-color: var(--color-danger-base);
+      }
+
+      .warning {
+        color: var(--color-warning-base);
+        background-color: var(--color-warning-soft);
+      }
+      .warning:hover {
+        background-color: var(--color-warning-hover);
+      }
+
+      .info {
+        color: var(--color-info-base);
+        background-color: var(--color-info-soft);
+      }
+      .info:hover {
+        background-color: var(--color-info-hover);
+      }
+
+      .success {
+        color: var(--color-success-base);
+        background-color: var(--color-success-soft);
+      }
+      .success:hover {
+        background-color: var(--color-success-hover);
+      }
+
+      .text {
+        height: auto;
+        padding: 0;
+        color: var(--color-primary-base);
+        background: none;
+      }
+      .text:active {
+        background-color: var(--color-dark-14);
+      }
+
+      /* === ICON-ONLY === */
+      .icon-only {
+        width: var(--button-height);
+        padding: 0;
+      }
+      .icon-only.small {
+        width: var(--button-height-small);
+      }
+      .icon-only.large {
+        width: var(--button-height-large);
+      }
+
+      /* === DISABLED === */
+      button:disabled {
+        color: var(--text-disabled);
+        background-color: var(--color-dark-14);
+        cursor: not-allowed;
+      }
+      button:disabled:hover {
+        background-color: var(--color-dark-14);
+      }
+
+      button:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+    `
+    ];
+  }
+  /** Moves focus to the button. */
+  focus(r) {
+    this.shadowRoot?.querySelector("button")?.focus(r);
+  }
+  blur() {
+    this.shadowRoot?.querySelector("button")?.blur();
+  }
+  get hasLabelText() {
+    return this.textContent !== null && this.textContent.trim().length > 0;
+  }
+  /**
+   * A button inside a shadow root is invisible to the enclosing form, so
+   * `type="submit"` would do nothing. Click a throwaway native button instead:
+   * that runs constraint validation, fires a real `submit` event, and carries
+   * `name`/`value` into the submission the way an author expects.
+   */
+  submitEnclosingForm() {
+    const r = this.closest("form");
+    if (!r) 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), r.append(o), o.click(), o.remove();
+  }
+  onClick(r) {
+    if (this.disabled) {
+      r.preventDefault(), r.stopPropagation();
+      return;
+    }
+    this.type !== "button" && this.submitEnclosingForm();
+  }
+  render() {
+    const r = !!this.icon && !this.hasLabelText, o = this.icon ? d`<kt-icon part="icon" name=${this.icon} size=${p[this.size]}></kt-icon>` : i;
+    return d`<button
+      part="button"
+      class=${v({
+      [this.variant]: !0,
+      [this.size]: !0,
+      "icon-only": r
+    })}
+      type=${this.type}
+      ?disabled=${this.disabled}
+      aria-label=${this.label || i}
+      @click=${this.onClick}
+    >
+      ${this.iconPosition === "left" ? o : i}
+      <slot></slot>
+      ${this.iconPosition === "right" ? o : i}
+    </button>`;
+  }
+}
+e([
+  a({ type: String, reflect: !0 })
+], t.prototype, "variant");
+e([
+  a({ type: String, reflect: !0 })
+], t.prototype, "size");
+e([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+e([
+  a({ type: String })
+], t.prototype, "type");
+e([
+  a({ type: String })
+], t.prototype, "icon");
+e([
+  a({ type: String, attribute: "icon-position" })
+], t.prototype, "iconPosition");
+e([
+  a({ type: String })
+], t.prototype, "label");
+e([
+  a({ type: Boolean, reflect: !0, attribute: "full-width" })
+], t.prototype, "fullWidth");
+e([
+  a({ type: String })
+], t.prototype, "name");
+e([
+  a({ type: String })
+], t.prototype, "value");
+b("kt-button", t);
+export {
+  t as KtButton
+};
+//# sourceMappingURL=kt-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-button.js","sources":["../../../../src/components/core/kt-button/kt-button.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 { KtElement, defineElement } from '#internal/kt-element';\nimport '../kt-icon/kt-icon.js';\n\nexport type KtButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'secondary-no-bg'\n  | 'dark'\n  | 'danger'\n  | 'delete'\n  | 'warning'\n  | 'info'\n  | 'success'\n  | 'text';\n\nexport type KtButtonSize = 'small' | 'medium' | 'large';\nexport type KtButtonType = 'button' | 'submit' | 'reset';\n\n/** Icon size per button size, so the glyph stays optically balanced. */\nconst ICON_SIZE: Record<KtButtonSize, number> = { small: 16, medium: 20, large: 24 };\n\n/**\n * The Kanto action button.\n *\n * Ten variants; `primary` for the one action a screen is about, `secondary`\n * (a soft indigo tint) for everything supporting it. The semantic variants —\n * `danger`, `warning`, `info`, `success` — are tinted fills with coloured\n * text; `delete` is the only solid red, reserved for irreversible actions.\n *\n * Setting `icon` with no slotted text produces a square icon-only button,\n * which then requires a `label`.\n *\n * @element kt-button\n *\n * @slot - The button label.\n *\n * @csspart button - The native `<button>`.\n * @csspart icon - The icon, when `icon` is set.\n *\n * @example\n * ```html\n * <kt-button icon=\"plus\">New entity</kt-button>\n * <kt-button variant=\"secondary\" icon=\"refresh-cw\">Refresh</kt-button>\n * <kt-button variant=\"danger\">Delete</kt-button>\n * ```\n */\nexport class KtButton extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        vertical-align: middle;\n      }\n\n      :host([full-width]) {\n        display: flex;\n        width: 100%;\n      }\n\n      button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: var(--button-height);\n        padding: 0 var(--button-padding-x);\n        gap: var(--gap-button);\n        border: none;\n        border-radius: var(--border-radius);\n        font: var(--font-normal-regular);\n        cursor: pointer;\n        transition:\n          background-color var(--duration-instant),\n          color var(--duration-instant);\n      }\n\n      /* === SIZES === */\n      .small {\n        height: var(--button-height-small);\n        padding: 0 8px;\n        font: var(--font-normal-small);\n      }\n\n      .large {\n        height: var(--button-height-large);\n        padding: 0 calc(var(--button-padding-x) + 8px);\n        font: var(--font-normal-medium);\n      }\n\n      /* === VARIANTS ===\n         Press returns to the base colour; Kanto has no scale or shrink. */\n      .primary {\n        color: var(--color-white);\n        background-color: var(--color-primary-base);\n      }\n      .primary:hover {\n        background-color: var(--color-primary-hover);\n      }\n      .primary:active {\n        background-color: var(--color-primary-base);\n      }\n\n      .secondary {\n        color: var(--color-primary-base);\n        background-color: var(--color-primary-soft);\n      }\n      .secondary:hover {\n        background-color: var(--color-secondary-hover);\n      }\n      .secondary:active {\n        background-color: var(--color-primary-soft);\n      }\n\n      .secondary-no-bg {\n        color: var(--color-primary-base);\n        background: none;\n      }\n      .secondary-no-bg:hover {\n        background-color: var(--color-secondary-hover);\n      }\n      .secondary-no-bg:active {\n        background-color: var(--color-dark-14);\n      }\n\n      .dark {\n        color: var(--color-text-400);\n        background-color: var(--color-dark-20);\n      }\n      .dark:hover {\n        background-color: var(--color-dark-22);\n      }\n      .dark:active {\n        background-color: var(--color-dark-20);\n      }\n\n      .danger {\n        color: var(--color-danger-base);\n        background-color: var(--color-danger-soft);\n      }\n      .danger:hover {\n        background-color: var(--color-danger-hover);\n      }\n      .danger:active {\n        background-color: var(--color-danger-soft);\n      }\n\n      .delete {\n        color: var(--color-white);\n        background-color: var(--color-navigation-icon-close);\n      }\n      .delete:hover {\n        background-color: var(--color-danger-base);\n      }\n\n      .warning {\n        color: var(--color-warning-base);\n        background-color: var(--color-warning-soft);\n      }\n      .warning:hover {\n        background-color: var(--color-warning-hover);\n      }\n\n      .info {\n        color: var(--color-info-base);\n        background-color: var(--color-info-soft);\n      }\n      .info:hover {\n        background-color: var(--color-info-hover);\n      }\n\n      .success {\n        color: var(--color-success-base);\n        background-color: var(--color-success-soft);\n      }\n      .success:hover {\n        background-color: var(--color-success-hover);\n      }\n\n      .text {\n        height: auto;\n        padding: 0;\n        color: var(--color-primary-base);\n        background: none;\n      }\n      .text:active {\n        background-color: var(--color-dark-14);\n      }\n\n      /* === ICON-ONLY === */\n      .icon-only {\n        width: var(--button-height);\n        padding: 0;\n      }\n      .icon-only.small {\n        width: var(--button-height-small);\n      }\n      .icon-only.large {\n        width: var(--button-height-large);\n      }\n\n      /* === DISABLED === */\n      button:disabled {\n        color: var(--text-disabled);\n        background-color: var(--color-dark-14);\n        cursor: not-allowed;\n      }\n      button:disabled:hover {\n        background-color: var(--color-dark-14);\n      }\n\n      button:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n    `,\n  ];\n\n  /** Visual variant. */\n  @property({ type: String, reflect: true })\n  variant: KtButtonVariant = 'primary';\n\n  /** Height: 32 / 40 / 48px at the desktop scale. */\n  @property({ type: String, reflect: true })\n  size: KtButtonSize = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Native button behaviour. `submit` and `reset` act on the enclosing form. */\n  @property({ type: String })\n  type: KtButtonType = 'button';\n\n  /** Lucide icon name, kebab-case. */\n  @property({ type: String })\n  icon = '';\n\n  /** Which side of the label the icon sits on. */\n  @property({ type: String, attribute: 'icon-position' })\n  iconPosition: 'left' | 'right' = 'left';\n\n  /** Accessible name. Required for an icon-only button. */\n  @property({ type: String })\n  label = '';\n\n  /** Stretches the button to the width of its container. */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  fullWidth = false;\n\n  /** Submitted with the form, as on a native button. */\n  @property({ type: String })\n  name = '';\n\n  /** @see name */\n  @property({ type: String })\n  value = '';\n\n  /** Moves focus to the button. */\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector('button')?.focus(options);\n  }\n\n  override blur(): void {\n    this.shadowRoot?.querySelector('button')?.blur();\n  }\n\n  private get hasLabelText(): boolean {\n    return this.textContent !== null && this.textContent.trim().length > 0;\n  }\n\n  /**\n   * A button inside a shadow root is invisible to the enclosing form, so\n   * `type=\"submit\"` would do nothing. Click a throwaway native button instead:\n   * that runs constraint validation, fires a real `submit` event, and carries\n   * `name`/`value` into the submission the way an author expects.\n   */\n  private submitEnclosingForm(): void {\n    const form = this.closest('form');\n    if (!form) return;\n\n    const proxy = document.createElement('button');\n    proxy.type = this.type;\n    proxy.hidden = true;\n    if (this.name) proxy.name = this.name;\n    if (this.value) proxy.value = this.value;\n\n    form.append(proxy);\n    proxy.click();\n    proxy.remove();\n  }\n\n  private onClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    if (this.type !== 'button') this.submitEnclosingForm();\n  }\n\n  override render(): TemplateResult {\n    const iconOnly = Boolean(this.icon) && !this.hasLabelText;\n    const icon = this.icon\n      ? html`<kt-icon part=\"icon\" name=${this.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n      : nothing;\n\n    return html`<button\n      part=\"button\"\n      class=${classMap({\n        [this.variant]: true,\n        [this.size]: true,\n        'icon-only': iconOnly,\n      })}\n      type=${this.type}\n      ?disabled=${this.disabled}\n      aria-label=${this.label || nothing}\n      @click=${this.onClick}\n    >\n      ${this.iconPosition === 'left' ? icon : nothing}\n      <slot></slot>\n      ${this.iconPosition === 'right' ? icon : nothing}\n    </button>`;\n  }\n}\n\ndefineElement('kt-button', KtButton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-button': KtButton;\n  }\n}\n"],"names":["ICON_SIZE","KtButton","KtElement","css","options","form","proxy","event","iconOnly","icon","html","nothing","classMap","__decorateClass","property","defineElement"],"mappings":"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"}