kanto-ds 1.0.0

package/dist/components/navigation/kt-tabs/kt-tabs.d.ts

@@ -0,0 +1,64 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+import '../../feedback/kt-skeleton/kt-skeleton.js';
+export interface KtTab {
+    readonly value: string | number;
+    readonly label?: string;
+    /** Lucide icon name, kebab-case. */
+    readonly icon?: string;
+    readonly disabled?: boolean;
+    /** id of the element this tab controls, for `aria-controls`. */
+    readonly panel?: string;
+}
+/**
+ * An underlined tab bar.
+ *
+ * Against `<kt-segmented-control>`: a segmented control picks a *value* — a
+ * date range, a unit — and sits inside a form or a toolbar. Tabs switch which
+ * *region of the page* you are looking at, and read as part of the page
+ * structure rather than as a control on it. The shapes say so: an inset track
+ * with a raised pill, versus a rule with one segment underlined.
+ *
+ * Like the segmented control, this only manages selection. Swapping the panel
+ * is the consumer's business.
+ *
+ * @element kt-tabs
+ *
+ * @csspart base - The tablist.
+ * @csspart tab - One tab.
+ *
+ * @fires kt-change - A tab was selected. `detail: { value, tab }`.
+ *
+ * @example
+ * ```js
+ * tabs.tabs = [
+ *   { value: 'usage', label: 'Usage' },
+ *   { value: 'api', label: 'API', icon: 'code' },
+ * ];
+ * ```
+ */
+export declare class KtTabs extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private tabElements;
+    /** The tabs to show. A property: this is data. */
+    tabs: readonly KtTab[];
+    /** The selected tab's value. */
+    value: string | number | null;
+    disabled: boolean;
+    /** Renders placeholder tabs instead of the real ones. */
+    loading: boolean;
+    /** Accessible name for the tablist. */
+    label: string;
+    private get selectedIndex();
+    private select;
+    /** Moves to the next selectable tab in `direction`, wrapping at both ends. */
+    private step;
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-tabs': KtTabs;
+    }
+}

package/dist/components/navigation/kt-tabs/kt-tabs.js

@@ -0,0 +1,175 @@
+import { css as u, html as l, nothing as p } from "lit";
+import { queryAll as h, property as n } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { K as c, d as v } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as m } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-icon/kt-icon.js";
+import "../../feedback/kt-skeleton/kt-skeleton.js";
+var x = Object.defineProperty, i = (d, e, t, r) => {
+  for (var s = void 0, a = d.length - 1, b; a >= 0; a--)
+    (b = d[a]) && (s = b(e, t, s) || s);
+  return s && x(e, t, s), s;
+};
+class o extends c {
+  constructor() {
+    super(...arguments), this.tabs = [], this.value = null, this.disabled = !1, this.loading = !1, this.label = "";
+  }
+  static {
+    this.styles = [
+      c.styles,
+      u`
+      :host {
+        display: block;
+      }
+
+      .tablist {
+        display: flex;
+        gap: var(--gap-drag-drop);
+        border-bottom: var(--border-width) solid var(--border-subtle);
+        overflow-x: auto;
+        scrollbar-width: none;
+      }
+
+      .tablist::-webkit-scrollbar {
+        display: none;
+      }
+
+      :host([disabled]) .tablist {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      .tab {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        /* The -1px pulls the active underline over the container's rule so the
+           two read as one line rather than two stacked ones. */
+        margin-bottom: calc(var(--border-width) * -1);
+        padding: 10px 2px;
+        color: var(--text-muted);
+        font: var(--font-normal-medium);
+        white-space: nowrap;
+        background: transparent;
+        border: none;
+        border-bottom: 2px solid transparent;
+        cursor: pointer;
+        transition:
+          color var(--duration-instant),
+          border-color var(--duration-instant);
+      }
+
+      .tab:hover:not(:disabled) {
+        color: var(--text-body);
+      }
+
+      .tab.selected {
+        color: var(--text-body);
+        border-bottom-color: var(--color-primary-base);
+      }
+
+      .tab:disabled {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+
+      .tab:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+
+      .loading {
+        display: flex;
+        gap: var(--gap-drag-drop);
+        padding: 10px 0;
+      }
+    `
+    ];
+  }
+  get selectedIndex() {
+    return this.tabs.findIndex((e) => e.value === this.value);
+  }
+  select(e) {
+    e.disabled || this.value === e.value || (this.value = e.value, m(this, "kt-change", { value: e.value, tab: e }));
+  }
+  /** Moves to the next selectable tab in `direction`, wrapping at both ends. */
+  step(e) {
+    const t = this.tabs.length;
+    if (t === 0) return;
+    const r = this.selectedIndex < 0 ? e === 1 ? -1 : 0 : this.selectedIndex;
+    for (let s = 1; s <= t; s += 1) {
+      const a = ((r + e * s) % t + t) % t;
+      if (!this.tabs[a]?.disabled) return a;
+    }
+  }
+  onKeyDown(e) {
+    let t;
+    if (e.key === "ArrowRight") t = this.step(1);
+    else if (e.key === "ArrowLeft") t = this.step(-1);
+    else if (e.key === "Home") t = this.tabs.findIndex((a) => !a.disabled);
+    else if (e.key === "End")
+      t = this.tabs.length - 1 - [...this.tabs].reverse().findIndex((a) => !a.disabled);
+    else return;
+    if (e.preventDefault(), t === void 0 || t < 0) return;
+    const r = this.tabs[t];
+    if (!r) return;
+    const s = t;
+    this.select(r), this.updateComplete.then(() => this.tabElements[s]?.focus());
+  }
+  render() {
+    if (this.loading)
+      return l`<div class="loading" aria-hidden="true">
+        ${[0, 1, 2].map(() => l`<kt-skeleton variant="rect" width="64px" height="22px"></kt-skeleton>`)}
+      </div>`;
+    const e = this.selectedIndex, t = e >= 0 ? e : this.tabs.findIndex((r) => !r.disabled);
+    return l`<div
+      part="base"
+      class="tablist"
+      role="tablist"
+      aria-label=${this.label || p}
+      @keydown=${this.onKeyDown}
+    >
+      ${this.tabs.map((r, s) => {
+      const a = r.value === this.value;
+      return l`<button
+          part="tab"
+          type="button"
+          role="tab"
+          class=${f({ tab: !0, selected: a })}
+          aria-selected=${a ? "true" : "false"}
+          aria-controls=${r.panel ?? p}
+          tabindex=${s === t ? 0 : -1}
+          ?disabled=${this.disabled || r.disabled}
+          @click=${() => this.select(r)}
+        >
+          ${r.icon ? l`<kt-icon name=${r.icon} size="16"></kt-icon>` : p}
+          ${r.label ?? String(r.value)}
+        </button>`;
+    })}
+    </div>`;
+  }
+}
+i([
+  h(".tab")
+], o.prototype, "tabElements");
+i([
+  n({ attribute: !1 })
+], o.prototype, "tabs");
+i([
+  n({ type: String })
+], o.prototype, "value");
+i([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+i([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "loading");
+i([
+  n({ type: String })
+], o.prototype, "label");
+v("kt-tabs", o);
+export {
+  o as KtTabs
+};
+//# sourceMappingURL=kt-tabs.js.map

package/dist/components/navigation/kt-tabs/kt-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-tabs.js","sources":["../../../../src/components/navigation/kt-tabs/kt-tabs.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport interface KtTab {\n  readonly value: string | number;\n  readonly label?: string;\n  /** Lucide icon name, kebab-case. */\n  readonly icon?: string;\n  readonly disabled?: boolean;\n  /** id of the element this tab controls, for `aria-controls`. */\n  readonly panel?: string;\n}\n\n/**\n * An underlined tab bar.\n *\n * Against `<kt-segmented-control>`: a segmented control picks a *value* — a\n * date range, a unit — and sits inside a form or a toolbar. Tabs switch which\n * *region of the page* you are looking at, and read as part of the page\n * structure rather than as a control on it. The shapes say so: an inset track\n * with a raised pill, versus a rule with one segment underlined.\n *\n * Like the segmented control, this only manages selection. Swapping the panel\n * is the consumer's business.\n *\n * @element kt-tabs\n *\n * @csspart base - The tablist.\n * @csspart tab - One tab.\n *\n * @fires kt-change - A tab was selected. `detail: { value, tab }`.\n *\n * @example\n * ```js\n * tabs.tabs = [\n *   { value: 'usage', label: 'Usage' },\n *   { value: 'api', label: 'API', icon: 'code' },\n * ];\n * ```\n */\nexport class KtTabs extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .tablist {\n        display: flex;\n        gap: var(--gap-drag-drop);\n        border-bottom: var(--border-width) solid var(--border-subtle);\n        overflow-x: auto;\n        scrollbar-width: none;\n      }\n\n      .tablist::-webkit-scrollbar {\n        display: none;\n      }\n\n      :host([disabled]) .tablist {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      .tab {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        /* The -1px pulls the active underline over the container's rule so the\n           two read as one line rather than two stacked ones. */\n        margin-bottom: calc(var(--border-width) * -1);\n        padding: 10px 2px;\n        color: var(--text-muted);\n        font: var(--font-normal-medium);\n        white-space: nowrap;\n        background: transparent;\n        border: none;\n        border-bottom: 2px solid transparent;\n        cursor: pointer;\n        transition:\n          color var(--duration-instant),\n          border-color var(--duration-instant);\n      }\n\n      .tab:hover:not(:disabled) {\n        color: var(--text-body);\n      }\n\n      .tab.selected {\n        color: var(--text-body);\n        border-bottom-color: var(--color-primary-base);\n      }\n\n      .tab:disabled {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n\n      .tab:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n        border-radius: 4px;\n      }\n\n      .loading {\n        display: flex;\n        gap: var(--gap-drag-drop);\n        padding: 10px 0;\n      }\n    `,\n  ];\n\n  @queryAll('.tab')\n  private tabElements!: NodeListOf<HTMLButtonElement>;\n\n  /** The tabs to show. A property: this is data. */\n  @property({ attribute: false })\n  tabs: readonly KtTab[] = [];\n\n  /** The selected tab's value. */\n  @property({ type: String })\n  value: string | number | null = null;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Renders placeholder tabs instead of the real ones. */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /** Accessible name for the tablist. */\n  @property({ type: String })\n  label = '';\n\n  private get selectedIndex(): number {\n    return this.tabs.findIndex((tab) => tab.value === this.value);\n  }\n\n  private select(tab: KtTab): void {\n    if (tab.disabled || this.value === tab.value) return;\n    this.value = tab.value;\n    emit(this, 'kt-change', { value: tab.value, tab });\n  }\n\n  /** Moves to the next selectable tab in `direction`, wrapping at both ends. */\n  private step(direction: 1 | -1): number | undefined {\n    const count = this.tabs.length;\n    if (count === 0) return undefined;\n\n    const from = this.selectedIndex < 0 ? (direction === 1 ? -1 : 0) : this.selectedIndex;\n    for (let offset = 1; offset <= count; offset += 1) {\n      const index = (((from + direction * offset) % count) + count) % count;\n      if (!this.tabs[index]?.disabled) return index;\n    }\n    return undefined;\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    let target: number | undefined;\n\n    if (event.key === 'ArrowRight') target = this.step(1);\n    else if (event.key === 'ArrowLeft') target = this.step(-1);\n    else if (event.key === 'Home') target = this.tabs.findIndex((tab) => !tab.disabled);\n    else if (event.key === 'End')\n      target = this.tabs.length - 1 - [...this.tabs].reverse().findIndex((tab) => !tab.disabled);\n    else return;\n\n    event.preventDefault();\n    if (target === undefined || target < 0) return;\n\n    const tab = this.tabs[target];\n    if (!tab) return;\n\n    const index = target;\n    this.select(tab);\n    void this.updateComplete.then(() => this.tabElements[index]?.focus());\n  }\n\n  override render(): TemplateResult {\n    if (this.loading) {\n      return html`<div class=\"loading\" aria-hidden=\"true\">\n        ${[0, 1, 2].map(() => html`<kt-skeleton variant=\"rect\" width=\"64px\" height=\"22px\"></kt-skeleton>`)}\n      </div>`;\n    }\n\n    const selectedIndex = this.selectedIndex;\n    // One tab stop for the whole bar, as a tablist should have.\n    const tabStop = selectedIndex >= 0 ? selectedIndex : this.tabs.findIndex((t) => !t.disabled);\n\n    return html`<div\n      part=\"base\"\n      class=\"tablist\"\n      role=\"tablist\"\n      aria-label=${this.label || nothing}\n      @keydown=${this.onKeyDown}\n    >\n      ${this.tabs.map((tab, index) => {\n        const selected = tab.value === this.value;\n\n        return html`<button\n          part=\"tab\"\n          type=\"button\"\n          role=\"tab\"\n          class=${classMap({ tab: true, selected })}\n          aria-selected=${selected ? 'true' : 'false'}\n          aria-controls=${tab.panel ?? nothing}\n          tabindex=${index === tabStop ? 0 : -1}\n          ?disabled=${this.disabled || tab.disabled}\n          @click=${() => this.select(tab)}\n        >\n          ${tab.icon ? html`<kt-icon name=${tab.icon} size=\"16\"></kt-icon>` : nothing}\n          ${tab.label ?? String(tab.value)}\n        </button>`;\n      })}\n    </div>`;\n  }\n}\n\ndefineElement('kt-tabs', KtTabs);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-tabs': KtTabs;\n  }\n}\n"],"names":["KtTabs","KtElement","css","tab","emit","direction","count","from","offset","index","event","target","html","selectedIndex","tabStop","t","nothing","selected","classMap","__decorateClass","queryAll","property","defineElement"],"mappings":"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"}

package/dist/components/navigation/kt-toggle-button/kt-toggle-button.d.ts

@@ -0,0 +1,50 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export type KtToggleButtonVariant = 'primary' | 'secondary' | 'outline';
+export type KtToggleButtonSize = 'small' | 'medium' | 'large';
+/**
+ * A button that stays pressed.
+ *
+ * `aria-pressed` rather than `aria-checked`: this is a control that holds a
+ * state, not one option among several. Put several in a
+ * `<kt-toggle-button-group>` when they are.
+ *
+ * @element kt-toggle-button
+ *
+ * @slot - The button label.
+ *
+ * @csspart button - The native `<button>`.
+ *
+ * @fires kt-change - The state changed. `detail: { selected, value }`.
+ */
+export declare class KtToggleButton extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    selected: boolean;
+    disabled: boolean;
+    variant: KtToggleButtonVariant;
+    size: KtToggleButtonSize;
+    /** Identifies this button inside a `<kt-toggle-button-group>`. */
+    value: string;
+    icon: string;
+    iconPosition: 'left' | 'right';
+    /** Accessible name. Required when the button is icon-only. */
+    label: string;
+    /**
+     * Set by `<kt-toggle-button-group>` on the buttons it owns.
+     *
+     * A managed button is a display, not a control: it neither flips itself nor
+     * emits. The group reads the click, decides what the selection now is, and
+     * writes `selected` back. Without this the two both react to the same click
+     * and consumers hear two different kt-change events for one press.
+     */
+    managed: boolean;
+    focus(options?: FocusOptions): void;
+    private toggle;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-toggle-button': KtToggleButton;
+    }
+}

package/dist/components/navigation/kt-toggle-button/kt-toggle-button.js

@@ -0,0 +1,191 @@
+import { css as p, html as c, nothing as n } from "lit";
+import { property as o } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { K as u, d as g } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as v } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-icon/kt-icon.js";
+var m = Object.defineProperty, r = (l, e, i, s) => {
+  for (var a = void 0, d = l.length - 1, h; d >= 0; d--)
+    (h = l[d]) && (a = h(e, i, a) || a);
+  return a && m(e, i, a), a;
+};
+const y = { small: 16, medium: 20, large: 24 };
+class t extends u {
+  constructor() {
+    super(...arguments), this.selected = !1, this.disabled = !1, this.variant = "primary", this.size = "medium", this.value = "", this.icon = "", this.iconPosition = "left", this.label = "", this.managed = !1;
+  }
+  static {
+    this.styles = [
+      u.styles,
+      p`
+      :host {
+        display: inline-flex;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: 100%;
+        height: var(--button-height);
+        padding: 0 var(--button-padding-x);
+        gap: var(--gap-button);
+        font: var(--font-normal-regular);
+        border: var(--border-width) solid transparent;
+        /* Overridden by kt-toggle-button-group, which is the only thing that
+           knows whether this button is first, last or in the middle. */
+        border-radius: var(--kt-toggle-button-radius, var(--border-radius));
+        cursor: pointer;
+        transition:
+          background-color var(--duration-normal) var(--easing-standard),
+          border-color var(--duration-normal) var(--easing-standard),
+          color var(--duration-normal) var(--easing-standard);
+      }
+
+      button:disabled {
+        color: var(--text-disabled);
+        background-color: var(--color-dark-14);
+        border-color: transparent;
+        pointer-events: none;
+      }
+
+      button:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .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);
+      }
+
+      /* === PRIMARY === */
+      .primary {
+        color: var(--text-muted);
+        background-color: var(--surface-raised);
+      }
+      .primary:hover:not(:disabled) {
+        background-color: var(--surface-hover);
+      }
+      .primary.selected {
+        color: var(--color-white);
+        background-color: var(--color-primary-base);
+        border-color: var(--color-primary-base);
+      }
+      .primary.selected:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+      }
+
+      /* === SECONDARY === */
+      .secondary {
+        color: var(--text-muted);
+        background-color: var(--color-dark-14);
+      }
+      .secondary:hover:not(:disabled) {
+        background-color: var(--color-secondary-hover);
+      }
+      .secondary.selected {
+        color: var(--color-primary-base);
+        background-color: var(--color-primary-soft);
+      }
+
+      /* === OUTLINE === */
+      .outline {
+        color: var(--text-muted);
+        background-color: transparent;
+        border-color: var(--color-text-600);
+      }
+      .outline:hover:not(:disabled) {
+        background-color: var(--color-dark-14);
+        border-color: var(--text-muted);
+      }
+      .outline.selected {
+        color: var(--color-primary-base);
+        background-color: var(--color-primary-soft);
+        border-color: var(--color-primary-base);
+      }
+
+      .icon-only {
+        width: var(--button-height);
+        padding: 0;
+      }
+      .icon-only.small {
+        width: var(--button-height-small);
+      }
+      .icon-only.large {
+        width: var(--button-height-large);
+      }
+
+      .text {
+        white-space: nowrap;
+      }
+    `
+    ];
+  }
+  focus(e) {
+    this.shadowRoot?.querySelector("button")?.focus(e);
+  }
+  toggle() {
+    this.disabled || this.managed || (this.selected = !this.selected, v(this, "kt-change", { selected: this.selected, value: this.value }));
+  }
+  render() {
+    const e = this.textContent !== null && this.textContent.trim().length > 0, i = !!this.icon && !e, s = this.icon ? c`<kt-icon name=${this.icon} size=${y[this.size]}></kt-icon>` : n;
+    return c`<button
+      part="button"
+      type="button"
+      class=${b({
+      [this.variant]: !0,
+      [this.size]: !0,
+      selected: this.selected,
+      "icon-only": i
+    })}
+      aria-pressed=${this.selected ? "true" : "false"}
+      aria-label=${this.label || n}
+      ?disabled=${this.disabled}
+      @click=${this.toggle}
+    >
+      ${this.iconPosition === "left" ? s : n}
+      ${i ? n : c`<span class="text"><slot></slot></span>`}
+      ${this.iconPosition === "right" ? s : n}
+    </button>`;
+  }
+}
+r([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "selected");
+r([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+r([
+  o({ type: String, reflect: !0 })
+], t.prototype, "variant");
+r([
+  o({ type: String, reflect: !0 })
+], t.prototype, "size");
+r([
+  o({ type: String })
+], t.prototype, "value");
+r([
+  o({ type: String })
+], t.prototype, "icon");
+r([
+  o({ type: String, attribute: "icon-position" })
+], t.prototype, "iconPosition");
+r([
+  o({ type: String })
+], t.prototype, "label");
+r([
+  o({ attribute: !1 })
+], t.prototype, "managed");
+g("kt-toggle-button", t);
+export {
+  t as KtToggleButton
+};
+//# sourceMappingURL=kt-toggle-button.js.map

package/dist/components/navigation/kt-toggle-button/kt-toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-toggle-button.js","sources":["../../../../src/components/navigation/kt-toggle-button/kt-toggle-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 { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtToggleButtonVariant = 'primary' | 'secondary' | 'outline';\nexport type KtToggleButtonSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE: Record<KtToggleButtonSize, number> = { small: 16, medium: 20, large: 24 };\n\n/**\n * A button that stays pressed.\n *\n * `aria-pressed` rather than `aria-checked`: this is a control that holds a\n * state, not one option among several. Put several in a\n * `<kt-toggle-button-group>` when they are.\n *\n * @element kt-toggle-button\n *\n * @slot - The button label.\n *\n * @csspart button - The native `<button>`.\n *\n * @fires kt-change - The state changed. `detail: { selected, value }`.\n */\nexport class KtToggleButton extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n\n      button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        width: 100%;\n        height: var(--button-height);\n        padding: 0 var(--button-padding-x);\n        gap: var(--gap-button);\n        font: var(--font-normal-regular);\n        border: var(--border-width) solid transparent;\n        /* Overridden by kt-toggle-button-group, which is the only thing that\n           knows whether this button is first, last or in the middle. */\n        border-radius: var(--kt-toggle-button-radius, var(--border-radius));\n        cursor: pointer;\n        transition:\n          background-color var(--duration-normal) var(--easing-standard),\n          border-color var(--duration-normal) var(--easing-standard),\n          color var(--duration-normal) var(--easing-standard);\n      }\n\n      button:disabled {\n        color: var(--text-disabled);\n        background-color: var(--color-dark-14);\n        border-color: transparent;\n        pointer-events: none;\n      }\n\n      button:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .small {\n        height: var(--button-height-small);\n        padding: 0 8px;\n        font: var(--font-normal-small);\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      /* === PRIMARY === */\n      .primary {\n        color: var(--text-muted);\n        background-color: var(--surface-raised);\n      }\n      .primary:hover:not(:disabled) {\n        background-color: var(--surface-hover);\n      }\n      .primary.selected {\n        color: var(--color-white);\n        background-color: var(--color-primary-base);\n        border-color: var(--color-primary-base);\n      }\n      .primary.selected:hover:not(:disabled) {\n        background-color: var(--color-primary-hover);\n      }\n\n      /* === SECONDARY === */\n      .secondary {\n        color: var(--text-muted);\n        background-color: var(--color-dark-14);\n      }\n      .secondary:hover:not(:disabled) {\n        background-color: var(--color-secondary-hover);\n      }\n      .secondary.selected {\n        color: var(--color-primary-base);\n        background-color: var(--color-primary-soft);\n      }\n\n      /* === OUTLINE === */\n      .outline {\n        color: var(--text-muted);\n        background-color: transparent;\n        border-color: var(--color-text-600);\n      }\n      .outline:hover:not(:disabled) {\n        background-color: var(--color-dark-14);\n        border-color: var(--text-muted);\n      }\n      .outline.selected {\n        color: var(--color-primary-base);\n        background-color: var(--color-primary-soft);\n        border-color: var(--color-primary-base);\n      }\n\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      .text {\n        white-space: nowrap;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String, reflect: true })\n  variant: KtToggleButtonVariant = 'primary';\n\n  @property({ type: String, reflect: true })\n  size: KtToggleButtonSize = 'medium';\n\n  /** Identifies this button inside a `<kt-toggle-button-group>`. */\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'icon-position' })\n  iconPosition: 'left' | 'right' = 'left';\n\n  /** Accessible name. Required when the button is icon-only. */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Set by `<kt-toggle-button-group>` on the buttons it owns.\n   *\n   * A managed button is a display, not a control: it neither flips itself nor\n   * emits. The group reads the click, decides what the selection now is, and\n   * writes `selected` back. Without this the two both react to the same click\n   * and consumers hear two different kt-change events for one press.\n   */\n  @property({ attribute: false })\n  managed = false;\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector('button')?.focus(options);\n  }\n\n  private toggle(): void {\n    if (this.disabled || this.managed) return;\n    this.selected = !this.selected;\n    emit(this, 'kt-change', { selected: this.selected, value: this.value });\n  }\n\n  override render(): TemplateResult {\n    const hasText = this.textContent !== null && this.textContent.trim().length > 0;\n    const iconOnly = Boolean(this.icon) && !hasText;\n    const icon = this.icon\n      ? html`<kt-icon name=${this.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n      : nothing;\n\n    return html`<button\n      part=\"button\"\n      type=\"button\"\n      class=${classMap({\n        [this.variant]: true,\n        [this.size]: true,\n        selected: this.selected,\n        'icon-only': iconOnly,\n      })}\n      aria-pressed=${this.selected ? 'true' : 'false'}\n      aria-label=${this.label || nothing}\n      ?disabled=${this.disabled}\n      @click=${this.toggle}\n    >\n      ${this.iconPosition === 'left' ? icon : nothing}\n      ${iconOnly ? nothing : html`<span class=\"text\"><slot></slot></span>`}\n      ${this.iconPosition === 'right' ? icon : nothing}\n    </button>`;\n  }\n}\n\ndefineElement('kt-toggle-button', KtToggleButton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toggle-button': KtToggleButton;\n  }\n}\n"],"names":["ICON_SIZE","KtToggleButton","KtElement","css","options","emit","hasText","iconOnly","icon","html","nothing","classMap","__decorateClass","property","defineElement"],"mappings":"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"}

package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.d.ts

@@ -0,0 +1,55 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+/**
+ * Joins `<kt-toggle-button>`s into one segmented bar and coordinates their
+ * selection.
+ *
+ * Single mode behaves like a radio group with a deselect: clicking the active
+ * button clears it. Multiple mode is a set of independent checkboxes that
+ * happen to be drawn together.
+ *
+ * The buttons are slotted rather than described by an options array, so a
+ * button can hold whatever its label needs — an icon, a count, a badge.
+ *
+ * @element kt-toggle-button-group
+ *
+ * @slot - The `<kt-toggle-button>` children.
+ *
+ * @csspart base - The group container.
+ *
+ * @fires kt-change - The selection changed.
+ *   `detail: { value }` — a single value or `null`, or an array in multiple mode.
+ *
+ * @example
+ * ```html
+ * <kt-toggle-button-group>
+ *   <kt-toggle-button value="list" icon="list" label="List"></kt-toggle-button>
+ *   <kt-toggle-button value="grid" icon="grid" label="Grid"></kt-toggle-button>
+ * </kt-toggle-button-group>
+ * ```
+ */
+export declare class KtToggleButtonGroup extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private buttons;
+    /** `false`: one selection at a time. `true`: any number. */
+    multiple: boolean;
+    orientation: 'horizontal' | 'vertical';
+    /** Accessible name for the group. */
+    label: string;
+    /** The selected value, or values in multiple mode. */
+    value: string | string[] | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): void;
+    private isSelected;
+    /** Pushes the group's state down; the buttons are the display, not the truth. */
+    private syncButtons;
+    private onButtonClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-toggle-button-group': KtToggleButtonGroup;
+    }
+}