kanto-ds 1.0.0

package/dist/components/forms/kt-textarea/kt-textarea.js

@@ -0,0 +1,239 @@
+import { css as m, nothing as i, html as s } from "lit";
+import { query as f, property as a } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { live as b } from "lit/directives/live.js";
+import { K as c, d as g } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as y, s as v, b as x } from "../../../chunks/form-control-CxjBTt1c.js";
+import "../../core/kt-icon/kt-icon.js";
+var w = Object.defineProperty, r = (n, e, o, $) => {
+  for (var l = void 0, h = n.length - 1, d; h >= 0; h--)
+    (d = n[h]) && (l = d(e, o, l) || l);
+  return l && w(e, o, l), l;
+};
+class t extends c {
+  constructor() {
+    super(...arguments), this.internals = null, this.defaultValue = "", this.value = "", this.name = "", this.placeholder = "", this.rows = 3, this.disabled = !1, this.readonly = !1, this.required = !1, this.error = "", this.label = "", this.resize = "none";
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      c.styles,
+      m`
+      :host {
+        display: block;
+      }
+
+      .field {
+        display: flex;
+        align-items: flex-start;
+        width: 100%;
+        min-height: var(--button-height);
+        background-color: var(--surface-field);
+        border-radius: var(--radius-input);
+        /* A resting hairline. A field is a fill on --surface-field, which is
+           one ramp step from the page in dark and almost the same colour in
+           light — so on a card or inside a modal it simply disappeared and
+           read as a bare native control.
+
+           A border rather than an outline, because the control inside fills
+           the field exactly and a coincident outline is painted over by the
+           native widget. A border insets the control by its own width, so it
+           cannot be covered. box-sizing: border-box keeps the outer size.
+
+           The hover and focus rings stay outlines on top of it, and the
+           transparent resting outline is what they animate from: without it
+           outline-color starts at the initial value, which resolves to the
+           text colour, and hover flashed near-white before settling. */
+        border: var(--border-width) solid var(--border-field);
+        outline: var(--outline-width) solid transparent;
+        transition: outline-color var(--duration-instant);
+      }
+
+      .field:hover {
+        outline: var(--outline-width) solid var(--color-text-700);
+      }
+      .field:focus-within {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      .error,
+      .error:hover,
+      .error:focus-within {
+        outline: var(--outline-width) solid var(--color-danger-base);
+      }
+      .error textarea {
+        color: var(--color-danger-base);
+      }
+
+      .disabled {
+        background-color: var(--color-dark-14);
+        pointer-events: none;
+      }
+      .disabled textarea {
+        color: var(--text-disabled);
+      }
+
+      textarea {
+        width: 100%;
+        min-height: calc(var(--button-height) - var(--gap-element) * 2);
+        padding: var(--text-area-padding);
+        color: var(--text-body);
+        font: var(--font-input);
+        background: transparent;
+        border: none;
+        outline: none;
+        resize: none;
+      }
+
+      :host([resize='vertical']) textarea {
+        resize: vertical;
+      }
+
+      textarea::placeholder {
+        color: var(--color-text-500);
+      }
+
+      .meta {
+        display: flex;
+        flex: none;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--gap-element);
+        margin: 10px var(--button-padding-x) 0 0;
+      }
+
+      .counter {
+        color: var(--color-text-700);
+        font: var(--font-normal-small);
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+
+      .counter.at-limit {
+        color: var(--color-danger-base);
+      }
+
+      .error-icon {
+        display: flex;
+        color: var(--color-danger-base);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= y(this), this.defaultValue = this.value, v(this.internals, this.value);
+  }
+  willUpdate(e) {
+    if (e.has("value") || e.has("required") || e.has("error")) {
+      v(this.internals, this.value);
+      const o = this.required && this.value.length === 0;
+      x(
+        this.internals,
+        { valueMissing: o, customError: !!this.error },
+        this.error || (o ? "This field is required." : "")
+      );
+    }
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  formStateRestoreCallback(e) {
+    this.value = e;
+  }
+  focus(e) {
+    this.control?.focus(e);
+  }
+  blur() {
+    this.control?.blur();
+  }
+  onInput(e) {
+    this.value = e.target.value, p(this, "kt-input", { value: this.value });
+  }
+  onChange(e) {
+    e.stopPropagation(), p(this, "kt-change", { value: this.value });
+  }
+  render() {
+    const e = this.maxlength !== void 0, o = this.maxlength !== void 0 && this.value.length >= this.maxlength;
+    return s`<div
+      part="base"
+      class=${u({
+      field: !0,
+      error: !!this.error,
+      disabled: this.disabled
+    })}
+    >
+      <textarea
+        part="control"
+        name=${this.name || i}
+        rows=${this.rows}
+        maxlength=${this.maxlength ?? i}
+        placeholder=${this.placeholder || i}
+        aria-label=${this.label || i}
+        aria-invalid=${this.error ? "true" : i}
+        .value=${b(this.value)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        @input=${this.onInput}
+        @change=${this.onChange}
+      ></textarea>
+
+      ${this.error || e ? s`<div class="meta">
+              ${this.error ? s`<span class="error-icon" title=${this.error}>
+                      <kt-icon name="circle-alert" size="18" label=${this.error}></kt-icon>
+                    </span>` : i}
+              ${e ? s`<span
+                      part="counter"
+                      class=${u({ counter: !0, "at-limit": o })}
+                      aria-live="polite"
+                    >
+                      ${this.value.length} / ${this.maxlength}
+                    </span>` : i}
+            </div>` : i}
+    </div>`;
+  }
+}
+r([
+  f("textarea")
+], t.prototype, "control");
+r([
+  a({ type: String })
+], t.prototype, "value");
+r([
+  a({ type: String })
+], t.prototype, "name");
+r([
+  a({ type: String })
+], t.prototype, "placeholder");
+r([
+  a({ type: Number })
+], t.prototype, "rows");
+r([
+  a({ type: Number })
+], t.prototype, "maxlength");
+r([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+r([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "readonly");
+r([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "required");
+r([
+  a({ type: String, reflect: !0 })
+], t.prototype, "error");
+r([
+  a({ type: String })
+], t.prototype, "label");
+r([
+  a({ type: String, reflect: !0 })
+], t.prototype, "resize");
+g("kt-textarea", t);
+export {
+  t as KtTextarea
+};
+//# sourceMappingURL=kt-textarea.js.map

package/dist/components/forms/kt-textarea/kt-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-textarea.js","sources":["../../../../src/components/forms/kt-textarea/kt-textarea.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport '../../core/kt-icon/kt-icon.js';\n\n/**\n * A multi-line text field, with the same borderless fill and outline states as\n * `<kt-input>`.\n *\n * A character counter appears whenever `maxlength` is set — the field tells\n * the user where the limit is before the browser silently stops accepting\n * keystrokes.\n *\n * @element kt-textarea\n *\n * @csspart base - The field container.\n * @csspart control - The native `<textarea>`.\n * @csspart counter - The character counter.\n *\n * @fires kt-input - On every keystroke. `detail: { value }`.\n * @fires kt-change - When the value is committed. `detail: { value }`.\n */\nexport class KtTextarea extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .field {\n        display: flex;\n        align-items: flex-start;\n        width: 100%;\n        min-height: var(--button-height);\n        background-color: var(--surface-field);\n        border-radius: var(--radius-input);\n        /* A resting hairline. A field is a fill on --surface-field, which is\n           one ramp step from the page in dark and almost the same colour in\n           light — so on a card or inside a modal it simply disappeared and\n           read as a bare native control.\n\n           A border rather than an outline, because the control inside fills\n           the field exactly and a coincident outline is painted over by the\n           native widget. A border insets the control by its own width, so it\n           cannot be covered. box-sizing: border-box keeps the outer size.\n\n           The hover and focus rings stay outlines on top of it, and the\n           transparent resting outline is what they animate from: without it\n           outline-color starts at the initial value, which resolves to the\n           text colour, and hover flashed near-white before settling. */\n        border: var(--border-width) solid var(--border-field);\n        outline: var(--outline-width) solid transparent;\n        transition: outline-color var(--duration-instant);\n      }\n\n      .field:hover {\n        outline: var(--outline-width) solid var(--color-text-700);\n      }\n      .field:focus-within {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .error,\n      .error:hover,\n      .error:focus-within {\n        outline: var(--outline-width) solid var(--color-danger-base);\n      }\n      .error textarea {\n        color: var(--color-danger-base);\n      }\n\n      .disabled {\n        background-color: var(--color-dark-14);\n        pointer-events: none;\n      }\n      .disabled textarea {\n        color: var(--text-disabled);\n      }\n\n      textarea {\n        width: 100%;\n        min-height: calc(var(--button-height) - var(--gap-element) * 2);\n        padding: var(--text-area-padding);\n        color: var(--text-body);\n        font: var(--font-input);\n        background: transparent;\n        border: none;\n        outline: none;\n        resize: none;\n      }\n\n      :host([resize='vertical']) textarea {\n        resize: vertical;\n      }\n\n      textarea::placeholder {\n        color: var(--color-text-500);\n      }\n\n      .meta {\n        display: flex;\n        flex: none;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--gap-element);\n        margin: 10px var(--button-padding-x) 0 0;\n      }\n\n      .counter {\n        color: var(--color-text-700);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n        white-space: nowrap;\n      }\n\n      .counter.at-limit {\n        color: var(--color-danger-base);\n      }\n\n      .error-icon {\n        display: flex;\n        color: var(--color-danger-base);\n      }\n    `,\n  ];\n\n  @query('textarea')\n  private control!: HTMLTextAreaElement;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: Number })\n  rows = 3;\n\n  @property({ type: Number })\n  maxlength?: number;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /** Error message. A non-empty value puts the field in its error state. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  /** Accessible name, when no `<kt-label-input>` wraps the field. */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the reader may drag the field taller.\n   *\n   * Off by default, as in the rest of Kanto: the grip is drawn by the operating\n   * system, lands on the field's rounded corner and belongs to no design\n   * system — and a field the layout sized is not usually the reader's to\n   * resize. Turn it on where the content genuinely varies.\n   */\n  @property({ type: String, reflect: true })\n  resize: 'vertical' | 'none' = 'none';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    setFormValue(this.internals, this.value);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('value') || changed.has('required') || changed.has('error')) {\n      setFormValue(this.internals, this.value);\n\n      const missing = this.required && this.value.length === 0;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? 'This field is required.' : ''),\n      );\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.control?.focus(options);\n  }\n\n  override blur(): void {\n    this.control?.blur();\n  }\n\n  private onInput(event: Event): void {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    emit(this, 'kt-input', { value: this.value });\n  }\n\n  private onChange(event: Event): void {\n    event.stopPropagation();\n    emit(this, 'kt-change', { value: this.value });\n  }\n\n  override render(): TemplateResult {\n    const showCounter = this.maxlength !== undefined;\n    const atLimit = this.maxlength !== undefined && this.value.length >= this.maxlength;\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        field: true,\n        error: Boolean(this.error),\n        disabled: this.disabled,\n      })}\n    >\n      <textarea\n        part=\"control\"\n        name=${this.name || nothing}\n        rows=${this.rows}\n        maxlength=${this.maxlength ?? nothing}\n        placeholder=${this.placeholder || nothing}\n        aria-label=${this.label || nothing}\n        aria-invalid=${this.error ? 'true' : nothing}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        @input=${this.onInput}\n        @change=${this.onChange}\n      ></textarea>\n\n      ${\n        this.error || showCounter\n          ? html`<div class=\"meta\">\n              ${\n                this.error\n                  ? html`<span class=\"error-icon\" title=${this.error}>\n                      <kt-icon name=\"circle-alert\" size=\"18\" label=${this.error}></kt-icon>\n                    </span>`\n                  : nothing\n              }\n              ${\n                showCounter\n                  ? html`<span\n                      part=\"counter\"\n                      class=${classMap({ counter: true, 'at-limit': atLimit })}\n                      aria-live=\"polite\"\n                    >\n                      ${this.value.length} / ${this.maxlength}\n                    </span>`\n                  : nothing\n              }\n            </div>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-textarea', KtTextarea);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-textarea': KtTextarea;\n  }\n}\n"],"names":["KtTextarea","KtElement","css","attachFormInternals","setFormValue","changed","missing","setValidity","state","options","event","emit","showCounter","atLimit","html","classMap","nothing","live","__decorateClass","query","property","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-toggle/kt-toggle.d.ts

@@ -0,0 +1,53 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtToggleSize = 'small' | 'medium' | 'large';
+/**
+ * An on/off switch.
+ *
+ * Sized off the button heights so a toggle lines up with the controls beside
+ * it: the track is 1.8× the field height, the thumb is inset by 12% of it.
+ * Change `--button-height` and the switch follows.
+ *
+ * @element kt-toggle
+ *
+ * @slot - Optional label, rendered beside the switch and clickable.
+ *
+ * @csspart base - The button carrying `role="switch"`.
+ * @csspart track - The track.
+ * @csspart thumb - The sliding thumb.
+ *
+ * @fires kt-change - The state changed. `detail: { checked }`.
+ *
+ * @example
+ * ```html
+ * <kt-toggle checked>Notifications</kt-toggle>
+ * <kt-toggle size="small" disabled></kt-toggle>
+ * ```
+ */
+export declare class KtToggle extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    private internals;
+    private defaultChecked;
+    checked: boolean;
+    disabled: boolean;
+    size: KtToggleSize;
+    name: string;
+    /** Submitted when checked, as for a native checkbox. */
+    value: string;
+    /** Accessible name, when nothing is slotted. */
+    label: string;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    private syncFormValue;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    focus(options?: FocusOptions): void;
+    private toggle;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-toggle': KtToggle;
+    }
+}

package/dist/components/forms/kt-toggle/kt-toggle.js

@@ -0,0 +1,170 @@
+import { css as n, nothing as d, html as u } from "lit";
+import { property as r } from "lit/decorators.js";
+import { K as h, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as m, s as g } from "../../../chunks/form-control-CxjBTt1c.js";
+var k = Object.defineProperty, s = (i, t, l, v) => {
+  for (var a = void 0, o = i.length - 1, c; o >= 0; o--)
+    (c = i[o]) && (a = c(t, l, a) || a);
+  return a && k(t, l, a), a;
+};
+class e extends h {
+  constructor() {
+    super(...arguments), this.internals = null, this.defaultChecked = !1, this.checked = !1, this.disabled = !1, this.size = "medium", this.name = "", this.value = "on", this.label = "";
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      h.styles,
+      n`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--gap-button);
+
+        /* The whole switch derives from the field height, so it keeps its
+           proportions at every breakpoint and every size. */
+        --switch-height: var(--button-height);
+        --switch-inset: calc(var(--switch-height) * 0.12);
+        --thumb-size: calc(var(--switch-height) - var(--switch-inset) * 2);
+      }
+
+      :host([size='small']) {
+        --switch-height: var(--button-height-small);
+      }
+      :host([size='large']) {
+        --switch-height: var(--button-height-large);
+      }
+
+      button {
+        display: inline-flex;
+        margin: 0;
+        padding: 0;
+        background: transparent;
+        border: none;
+        outline: none;
+        appearance: none;
+        cursor: pointer;
+      }
+
+      button:disabled {
+        cursor: not-allowed;
+      }
+
+      button:focus-visible .track {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .track {
+        position: relative;
+        display: inline-block;
+        width: calc(var(--switch-height) * 1.8);
+        height: var(--switch-height);
+        background-color: var(--color-dark-24);
+        border-radius: var(--radius-full);
+        transition: background-color var(--duration-instant);
+      }
+
+      button[aria-checked='true'] .track {
+        background-color: var(--color-primary-base);
+      }
+
+      .thumb {
+        position: absolute;
+        top: var(--switch-inset);
+        left: var(--switch-inset);
+        width: var(--thumb-size);
+        height: var(--thumb-size);
+        background-color: var(--color-white);
+        border-radius: var(--radius-full);
+        transition: left var(--duration-normal);
+      }
+
+      button[aria-checked='true'] .thumb {
+        left: calc(100% - var(--switch-inset) - var(--thumb-size));
+      }
+
+      :host([disabled]) .track {
+        background-color: var(--color-dark-22);
+      }
+      :host([disabled]) .thumb {
+        background-color: var(--color-text-500);
+      }
+
+      .label {
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        cursor: pointer;
+      }
+
+      :host([disabled]) .label {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= m(this), this.defaultChecked = this.checked, this.syncFormValue();
+  }
+  willUpdate(t) {
+    (t.has("checked") || t.has("value")) && this.syncFormValue();
+  }
+  syncFormValue() {
+    g(this.internals, this.checked ? this.value : null);
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked;
+  }
+  formStateRestoreCallback(t) {
+    this.checked = t === this.value;
+  }
+  focus(t) {
+    this.shadowRoot?.querySelector("button")?.focus(t);
+  }
+  toggle() {
+    this.disabled || (this.checked = !this.checked, p(this, "kt-change", { checked: this.checked }));
+  }
+  render() {
+    return u`<button
+        part="base"
+        type="button"
+        role="switch"
+        aria-checked=${this.checked ? "true" : "false"}
+        aria-label=${this.label || d}
+        ?disabled=${this.disabled}
+        @click=${this.toggle}
+      >
+        <span part="track" class="track">
+          <span part="thumb" class="thumb"></span>
+        </span>
+      </button>
+      <span class="label" @click=${this.toggle}><slot></slot></span>`;
+  }
+}
+s([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "checked");
+s([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+s([
+  r({ type: String, reflect: !0 })
+], e.prototype, "size");
+s([
+  r({ type: String })
+], e.prototype, "name");
+s([
+  r({ type: String })
+], e.prototype, "value");
+s([
+  r({ type: String })
+], e.prototype, "label");
+b("kt-toggle", e);
+export {
+  e as KtToggle
+};
+//# sourceMappingURL=kt-toggle.js.map

package/dist/components/forms/kt-toggle/kt-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-toggle.js","sources":["../../../../src/components/forms/kt-toggle/kt-toggle.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { attachFormInternals, setFormValue, type UsableInternals } from '#internal/form-control';\n\nexport type KtToggleSize = 'small' | 'medium' | 'large';\n\n/**\n * An on/off switch.\n *\n * Sized off the button heights so a toggle lines up with the controls beside\n * it: the track is 1.8× the field height, the thumb is inset by 12% of it.\n * Change `--button-height` and the switch follows.\n *\n * @element kt-toggle\n *\n * @slot - Optional label, rendered beside the switch and clickable.\n *\n * @csspart base - The button carrying `role=\"switch\"`.\n * @csspart track - The track.\n * @csspart thumb - The sliding thumb.\n *\n * @fires kt-change - The state changed. `detail: { checked }`.\n *\n * @example\n * ```html\n * <kt-toggle checked>Notifications</kt-toggle>\n * <kt-toggle size=\"small\" disabled></kt-toggle>\n * ```\n */\nexport class KtToggle extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--gap-button);\n\n        /* The whole switch derives from the field height, so it keeps its\n           proportions at every breakpoint and every size. */\n        --switch-height: var(--button-height);\n        --switch-inset: calc(var(--switch-height) * 0.12);\n        --thumb-size: calc(var(--switch-height) - var(--switch-inset) * 2);\n      }\n\n      :host([size='small']) {\n        --switch-height: var(--button-height-small);\n      }\n      :host([size='large']) {\n        --switch-height: var(--button-height-large);\n      }\n\n      button {\n        display: inline-flex;\n        margin: 0;\n        padding: 0;\n        background: transparent;\n        border: none;\n        outline: none;\n        appearance: none;\n        cursor: pointer;\n      }\n\n      button:disabled {\n        cursor: not-allowed;\n      }\n\n      button:focus-visible .track {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .track {\n        position: relative;\n        display: inline-block;\n        width: calc(var(--switch-height) * 1.8);\n        height: var(--switch-height);\n        background-color: var(--color-dark-24);\n        border-radius: var(--radius-full);\n        transition: background-color var(--duration-instant);\n      }\n\n      button[aria-checked='true'] .track {\n        background-color: var(--color-primary-base);\n      }\n\n      .thumb {\n        position: absolute;\n        top: var(--switch-inset);\n        left: var(--switch-inset);\n        width: var(--thumb-size);\n        height: var(--thumb-size);\n        background-color: var(--color-white);\n        border-radius: var(--radius-full);\n        transition: left var(--duration-normal);\n      }\n\n      button[aria-checked='true'] .thumb {\n        left: calc(100% - var(--switch-inset) - var(--thumb-size));\n      }\n\n      :host([disabled]) .track {\n        background-color: var(--color-dark-22);\n      }\n      :host([disabled]) .thumb {\n        background-color: var(--color-text-500);\n      }\n\n      .label {\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        cursor: pointer;\n      }\n\n      :host([disabled]) .label {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  private internals: UsableInternals | null = null;\n  private defaultChecked = false;\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String, reflect: true })\n  size: KtToggleSize = 'medium';\n\n  @property({ type: String })\n  name = '';\n\n  /** Submitted when checked, as for a native checkbox. */\n  @property({ type: String })\n  value = 'on';\n\n  /** Accessible name, when nothing is slotted. */\n  @property({ type: String })\n  label = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('checked') || changed.has('value')) this.syncFormValue();\n  }\n\n  private syncFormValue(): void {\n    // An unchecked checkbox contributes nothing to a submission, not an empty\n    // string — null is how ElementInternals says \"leave me out\".\n    setFormValue(this.internals, this.checked ? this.value : null);\n  }\n\n  formResetCallback(): void {\n    this.checked = this.defaultChecked;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.checked = state === this.value;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector('button')?.focus(options);\n  }\n\n  private toggle(): void {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    emit(this, 'kt-change', { checked: this.checked });\n  }\n\n  override render(): TemplateResult {\n    return html`<button\n        part=\"base\"\n        type=\"button\"\n        role=\"switch\"\n        aria-checked=${this.checked ? 'true' : 'false'}\n        aria-label=${this.label || nothing}\n        ?disabled=${this.disabled}\n        @click=${this.toggle}\n      >\n        <span part=\"track\" class=\"track\">\n          <span part=\"thumb\" class=\"thumb\"></span>\n        </span>\n      </button>\n      <span class=\"label\" @click=${this.toggle}><slot></slot></span>`;\n  }\n}\n\ndefineElement('kt-toggle', KtToggle);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toggle': KtToggle;\n  }\n}\n"],"names":["KtToggle","KtElement","css","attachFormInternals","changed","setFormValue","state","options","emit","html","nothing","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,45 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export interface KtBreadcrumbItem {
+    readonly label: string;
+    readonly href?: string;
+}
+/**
+ * A trail showing where the current page sits.
+ *
+ * The last entry is the current page: rendered as text, not a link, and marked
+ * `aria-current="page"`. A breadcrumb whose final item links to the page you
+ * are already on is a dead control.
+ *
+ * @element kt-breadcrumb
+ *
+ * @csspart nav - The `<nav>`.
+ * @csspart item - A trail entry.
+ *
+ * @fires kt-navigate - An entry was activated. `detail: { item, index }`.
+ *   Cancel it to keep the browser from following the href.
+ *
+ * @example
+ * ```js
+ * trail.items = [
+ *   { label: 'Home', href: '/' },
+ *   { label: 'Entities', href: '/entities' },
+ *   { label: 'Entity 4812' },
+ * ];
+ * ```
+ */
+export declare class KtBreadcrumb extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The trail, root first. The last entry is the current page. */
+    items: readonly KtBreadcrumbItem[];
+    /** Accessible name for the navigation landmark. */
+    label: string;
+    private onSelect;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-breadcrumb': KtBreadcrumb;
+    }
+}

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

@@ -0,0 +1,93 @@
+import { css as d, nothing as f, html as s } from "lit";
+import { property as c } from "lit/decorators.js";
+import { K as p, d as u } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as h } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-icon/kt-icon.js";
+var b = Object.defineProperty, m = (o, t, e, a) => {
+  for (var r = void 0, i = o.length - 1, l; i >= 0; i--)
+    (l = o[i]) && (r = l(t, e, r) || r);
+  return r && b(t, e, r), r;
+};
+class n extends p {
+  constructor() {
+    super(...arguments), this.items = [], this.label = "Breadcrumb";
+  }
+  static {
+    this.styles = [
+      p.styles,
+      d`
+      :host {
+        display: block;
+      }
+
+      nav {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .item {
+        padding: 2px 6px;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        border-radius: 6px;
+        text-decoration: none;
+      }
+
+      a.item:hover {
+        color: var(--text-body);
+        background: var(--color-dark-18);
+        text-decoration: none;
+      }
+
+      a.item:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 1px;
+      }
+
+      .current {
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+      }
+
+      .separator {
+        display: inline-flex;
+        color: var(--color-text-600);
+      }
+    `
+    ];
+  }
+  onSelect(t, e, a) {
+    t.metaKey || t.ctrlKey || t.shiftKey || t.button !== 0 || !h(this, "kt-navigate", { item: e, index: a }).defaultPrevented || t.preventDefault();
+  }
+  render() {
+    const t = this.items.length - 1;
+    return s`<nav part="nav" aria-label=${this.label}>
+      ${this.items.map(
+      (e, a) => a === t ? s`<span part="item" class="item current" aria-current="page">${e.label}</span>` : s`<a
+                part="item"
+                class="item"
+                href=${e.href ?? "#"}
+                @click=${(r) => this.onSelect(r, e, a)}
+                >${e.label}</a
+              >
+              <span class="separator" aria-hidden="true">
+                <kt-icon name="chevron-right" size="14"></kt-icon>
+              </span>`
+    )}
+      ${this.items.length === 0 ? f : ""}
+    </nav>`;
+  }
+}
+m([
+  c({ attribute: !1 })
+], n.prototype, "items");
+m([
+  c({ type: String })
+], n.prototype, "label");
+u("kt-breadcrumb", n);
+export {
+  n as KtBreadcrumb
+};
+//# sourceMappingURL=kt-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-breadcrumb.js","sources":["../../../../src/components/navigation/kt-breadcrumb/kt-breadcrumb.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport interface KtBreadcrumbItem {\n  readonly label: string;\n  readonly href?: string;\n}\n\n/**\n * A trail showing where the current page sits.\n *\n * The last entry is the current page: rendered as text, not a link, and marked\n * `aria-current=\"page\"`. A breadcrumb whose final item links to the page you\n * are already on is a dead control.\n *\n * @element kt-breadcrumb\n *\n * @csspart nav - The `<nav>`.\n * @csspart item - A trail entry.\n *\n * @fires kt-navigate - An entry was activated. `detail: { item, index }`.\n *   Cancel it to keep the browser from following the href.\n *\n * @example\n * ```js\n * trail.items = [\n *   { label: 'Home', href: '/' },\n *   { label: 'Entities', href: '/entities' },\n *   { label: 'Entity 4812' },\n * ];\n * ```\n */\nexport class KtBreadcrumb extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      nav {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .item {\n        padding: 2px 6px;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        border-radius: 6px;\n        text-decoration: none;\n      }\n\n      a.item:hover {\n        color: var(--text-body);\n        background: var(--color-dark-18);\n        text-decoration: none;\n      }\n\n      a.item:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 1px;\n      }\n\n      .current {\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n      }\n\n      .separator {\n        display: inline-flex;\n        color: var(--color-text-600);\n      }\n    `,\n  ];\n\n  /** The trail, root first. The last entry is the current page. */\n  @property({ attribute: false })\n  items: readonly KtBreadcrumbItem[] = [];\n\n  /** Accessible name for the navigation landmark. */\n  @property({ type: String })\n  label = 'Breadcrumb';\n\n  private onSelect(event: MouseEvent, item: KtBreadcrumbItem, index: number): void {\n    // Let modified clicks through: they open a new tab, which is the user\n    // asking the browser for something we should not intercept.\n    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;\n\n    const proceed = emit(this, 'kt-navigate', { item, index });\n    if (!proceed.defaultPrevented) return;\n    event.preventDefault();\n  }\n\n  override render(): TemplateResult {\n    const lastIndex = this.items.length - 1;\n\n    return html`<nav part=\"nav\" aria-label=${this.label}>\n      ${this.items.map((item, index) =>\n        index === lastIndex\n          ? html`<span part=\"item\" class=\"item current\" aria-current=\"page\">${item.label}</span>`\n          : html`<a\n                part=\"item\"\n                class=\"item\"\n                href=${item.href ?? '#'}\n                @click=${(event: MouseEvent) => this.onSelect(event, item, index)}\n                >${item.label}</a\n              >\n              <span class=\"separator\" aria-hidden=\"true\">\n                <kt-icon name=\"chevron-right\" size=\"14\"></kt-icon>\n              </span>`,\n      )}\n      ${this.items.length === 0 ? nothing : ''}\n    </nav>`;\n  }\n}\n\ndefineElement('kt-breadcrumb', KtBreadcrumb);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-breadcrumb': KtBreadcrumb;\n  }\n}\n"],"names":["KtBreadcrumb","KtElement","css","event","item","index","emit","lastIndex","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AAmCO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgDL,KAAA,QAAqC,CAAA,GAIrC,KAAA,QAAQ;AAAA,EAAA;AAAA,EAnDR,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,EAUQ,SAASC,GAAmBC,GAAwBC,GAAqB;AAM/E,IAHIF,EAAM,WAAWA,EAAM,WAAWA,EAAM,YAAYA,EAAM,WAAW,KAGrE,CADYG,EAAK,MAAM,eAAe,EAAE,MAAAF,GAAM,OAAAC,GAAO,EAC5C,oBACbF,EAAM,eAAA;AAAA,EACR;AAAA,EAES,SAAyB;AAChC,UAAMI,IAAY,KAAK,MAAM,SAAS;AAEtC,WAAOC,+BAAkC,KAAK,KAAK;AAAA,QAC/C,KAAK,MAAM;AAAA,MAAI,CAACJ,GAAMC,MACtBA,MAAUE,IACNC,+DAAkEJ,EAAK,KAAK,YAC5EI;AAAA;AAAA;AAAA,uBAGWJ,EAAK,QAAQ,GAAG;AAAA,yBACd,CAACD,MAAsB,KAAK,SAASA,GAAOC,GAAMC,CAAK,CAAC;AAAA,mBAC9DD,EAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAKtB;AAAA,QACC,KAAK,MAAM,WAAW,IAAIK,IAAU,EAAE;AAAA;AAAA,EAE5C;AACF;AArCEC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA/CnBX,EAgDX,WAAA,OAAA;AAIAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnDfX,EAoDX,WAAA,OAAA;AAmCFY,EAAc,iBAAiBZ,CAAY;"}