kanto-ds 1.7.0 → 1.8.0

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

@@ -0,0 +1,252 @@
+import { css as k, nothing as b, html as d } from "lit";
+import { property as o, state as y } from "lit/decorators.js";
+import { K as v, d as $ } from "../../../chunks/kt-element-COgh6Yr1.js";
+import { e as w } from "../../../chunks/events-r51msXNf.js";
+import { a as S, s as M } from "../../../chunks/form-control-B74_EHtG.js";
+import { s as N } from "../../../chunks/index-BEWmAE0T.js";
+import { d as f } from "../../../chunks/numbers-QyecMiSJ.js";
+var C = Object.defineProperty, r = (u, t, e, n) => {
+  for (var a = void 0, i = u.length - 1, l; i >= 0; i--)
+    (l = u[i]) && (a = l(t, e, a) || a);
+  return a && C(t, e, a), a;
+};
+class s extends v {
+  constructor() {
+    super(...arguments), this.value = "", this.min = 0, this.max = 100, this.step = 1, this.range = !1, this.label = "", this.name = "", this.disabled = !1, this.showValue = !1, this.format = (t) => String(t), this.formDisabled = !1, this.internals = null, this.defaultValue = "";
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      v.styles,
+      k`
+      :host {
+        display: block;
+        --kt-slider-thumb: calc(18px * var(--density-scale, 1));
+        --kt-slider-track: 6px;
+      }
+      :host([disabled]) {
+        opacity: 0.5;
+      }
+
+      .head {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--gap-button);
+        margin-bottom: 8px;
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+      }
+      .value {
+        color: var(--text-muted);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .control {
+        position: relative;
+        height: var(--kt-slider-thumb);
+      }
+      .track,
+      .fill {
+        position: absolute;
+        top: 50%;
+        height: var(--kt-slider-track);
+        border-radius: var(--radius-full);
+        transform: translateY(-50%);
+      }
+      .track {
+        right: 0;
+        left: 0;
+        background: var(--color-dark-22);
+      }
+      .fill {
+        background: var(--color-primary-base);
+      }
+
+      /* The native inputs lie over the track, invisible but for their thumbs:
+         two can share it, and each thumb still catches its own pointer. */
+      input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        background: none;
+        pointer-events: none;
+        appearance: none;
+      }
+      input:focus {
+        outline: none;
+      }
+      input.front {
+        z-index: 1;
+      }
+      input::-webkit-slider-runnable-track {
+        height: 100%;
+        background: none;
+      }
+      input::-moz-range-track {
+        background: none;
+      }
+      input::-webkit-slider-thumb {
+        width: var(--kt-slider-thumb);
+        height: var(--kt-slider-thumb);
+        background: var(--color-white);
+        border: 2px solid var(--color-primary-base);
+        border-radius: 50%;
+        box-shadow: 0 1px 3px color-mix(in srgb, var(--color-backdrop) 70%, transparent);
+        cursor: grab;
+        pointer-events: auto;
+        appearance: none;
+        transition: box-shadow var(--duration-instant);
+      }
+      input::-moz-range-thumb {
+        box-sizing: border-box;
+        width: var(--kt-slider-thumb);
+        height: var(--kt-slider-thumb);
+        background: var(--color-white);
+        border: 2px solid var(--color-primary-base);
+        border-radius: 50%;
+        box-shadow: 0 1px 3px color-mix(in srgb, var(--color-backdrop) 70%, transparent);
+        cursor: grab;
+        pointer-events: auto;
+      }
+      input:focus-visible::-webkit-slider-thumb {
+        box-shadow:
+          0 0 0 4px var(--color-primary-soft),
+          0 0 0 2px var(--color-primary-base);
+      }
+      input:focus-visible::-moz-range-thumb {
+        box-shadow:
+          0 0 0 4px var(--color-primary-soft),
+          0 0 0 2px var(--color-primary-base);
+      }
+      input:disabled::-webkit-slider-thumb {
+        cursor: not-allowed;
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= S(this);
+  }
+  // Bounded on the first update, not on connect: a script may set `max`
+  // after appending the element, and the value must wait for it.
+  firstUpdated() {
+    this.defaultValue = this.value;
+  }
+  willUpdate(t) {
+    if (t.has("value") || t.has("min") || t.has("max") || t.has("step") || t.has("range")) {
+      const e = this.normalised(this.value);
+      e !== this.value && (this.value = e), M(this.internals, this.value);
+    }
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  formDisabledCallback(t) {
+    this.formDisabled = t;
+  }
+  formStateRestoreCallback(t) {
+    t !== null && (this.value = t);
+  }
+  /** The thumbs' numbers: one, or low and high. */
+  get numbers() {
+    return this.value.split("/").map(Number);
+  }
+  /** `n` within bounds and on the step. */
+  snap(t) {
+    if (!Number.isFinite(t)) return this.min;
+    const e = this.step > 0 ? this.step : 1, n = this.min + Math.round((t - this.min) / e) * e, a = Math.max(f(e), f(this.min));
+    return Number(Math.min(this.max, Math.max(this.min, n)).toFixed(a));
+  }
+  normalised(t) {
+    const e = t === "" ? [] : t.split("/").map(Number);
+    if (!this.range) return String(this.snap(e[0] ?? this.min));
+    const n = this.snap(e[0] ?? this.min), a = this.snap(e[1] ?? this.max);
+    return `${Math.min(n, a)}/${Math.max(n, a)}`;
+  }
+  /** A thumb moved: the low one cannot pass the high one, nor the other way. */
+  onSlide(t, e, n) {
+    const a = t.target;
+    let i = this.snap(Number(a.value));
+    if (this.range) {
+      const [l, h] = this.numbers;
+      e === 0 ? i = Math.min(i, h) : i = Math.max(i, l), a.value = String(i), this.value = e === 0 ? `${i}/${h}` : `${l}/${i}`;
+    } else
+      this.value = String(i);
+    w(this, n ? "kt-change" : "kt-input", { value: this.value });
+  }
+  percent(t) {
+    return this.max > this.min ? (t - this.min) / (this.max - this.min) * 100 : 0;
+  }
+  render() {
+    const t = N(), e = this.numbers, [n, a] = this.range ? [e[0], e[1]] : [this.min, e[0]], i = this.disabled || this.formDisabled, l = this.range ? `${this.format(e[0])} – ${this.format(e[1])}` : this.format(e[0]), h = (p) => p.charAt(0).toUpperCase() + p.slice(1), g = this.range ? this.label ? [`${this.label}, ${t.sliderMinimum}`, `${this.label}, ${t.sliderMaximum}`] : [h(t.sliderMinimum), h(t.sliderMaximum)] : [this.label], x = this.range && e[0] === e[1] && e[0] > this.min;
+    return d`${this.showValue ? d`<div class="head">
+              <span>${this.label}</span>
+              <span part="value" class="value">${l}</span>
+            </div>` : b}
+      <div class="control">
+        <div part="track" class="track"></div>
+        <div
+          part="fill"
+          class="fill"
+          style=${`left: ${this.percent(n)}%; right: ${100 - this.percent(a)}%`}
+        ></div>
+        ${e.map(
+      (p, m) => d`<input
+              class=${m === 0 && x ? "front" : ""}
+              type="range"
+              min=${this.min}
+              max=${this.max}
+              step=${this.step}
+              .value=${String(p)}
+              ?disabled=${i}
+              aria-label=${g[m] || b}
+              aria-valuetext=${this.format(p)}
+              @input=${(c) => this.onSlide(c, m, !1)}
+              @change=${(c) => this.onSlide(c, m, !0)}
+            />`
+    )}
+      </div>`;
+  }
+}
+r([
+  o({ type: String, reflect: !0 })
+], s.prototype, "value");
+r([
+  o({ type: Number })
+], s.prototype, "min");
+r([
+  o({ type: Number })
+], s.prototype, "max");
+r([
+  o({ type: Number })
+], s.prototype, "step");
+r([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "range");
+r([
+  o({ type: String })
+], s.prototype, "label");
+r([
+  o({ type: String })
+], s.prototype, "name");
+r([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled");
+r([
+  o({ type: Boolean, attribute: "show-value" })
+], s.prototype, "showValue");
+r([
+  o({ attribute: !1 })
+], s.prototype, "format");
+r([
+  y()
+], s.prototype, "formDisabled");
+$("kt-slider", s);
+export {
+  s as KtSlider
+};
+//# sourceMappingURL=kt-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-slider.js","sources":["../../../../src/components/forms/kt-slider/kt-slider.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, state } 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';\nimport { strings } from '#internal/strings';\nimport { decimalsOf } from '#internal/numbers';\n\n/**\n * A value picked by sliding along a range: a volume, a threshold, or with\n * `range`, a price between two ends.\n *\n * Each thumb is a native `<input type=\"range\">`, so the keyboard — arrows,\n * Page Up and Down, Home and End — and what a screen reader announces come\n * from the platform. The value is text, like a form field's: `\"40\"`, or\n * `\"20/80\"` with `range`, low then high. It is kept within `min` and `max`\n * and on `step`, and two thumbs never cross.\n *\n * @element kt-slider\n *\n * @csspart track - The rail.\n * @csspart fill - The selected stretch of it.\n * @csspart value - The shown value, with `show-value`.\n *\n * @fires kt-input - While sliding. `detail: { value }`.\n * @fires kt-change - Once let go. `detail: { value }`.\n *\n * @example\n * ```html\n * <kt-slider label=\"Volume\" value=\"40\" show-value></kt-slider>\n * <kt-slider label=\"Price\" range min=\"0\" max=\"500\" step=\"10\" value=\"50/300\"></kt-slider>\n * ```\n */\nexport class KtSlider extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        --kt-slider-thumb: calc(18px * var(--density-scale, 1));\n        --kt-slider-track: 6px;\n      }\n      :host([disabled]) {\n        opacity: 0.5;\n      }\n\n      .head {\n        display: flex;\n        justify-content: space-between;\n        gap: var(--gap-button);\n        margin-bottom: 8px;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n      }\n      .value {\n        color: var(--text-muted);\n        font-variant-numeric: tabular-nums;\n      }\n\n      .control {\n        position: relative;\n        height: var(--kt-slider-thumb);\n      }\n      .track,\n      .fill {\n        position: absolute;\n        top: 50%;\n        height: var(--kt-slider-track);\n        border-radius: var(--radius-full);\n        transform: translateY(-50%);\n      }\n      .track {\n        right: 0;\n        left: 0;\n        background: var(--color-dark-22);\n      }\n      .fill {\n        background: var(--color-primary-base);\n      }\n\n      /* The native inputs lie over the track, invisible but for their thumbs:\n         two can share it, and each thumb still catches its own pointer. */\n      input {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        background: none;\n        pointer-events: none;\n        appearance: none;\n      }\n      input:focus {\n        outline: none;\n      }\n      input.front {\n        z-index: 1;\n      }\n      input::-webkit-slider-runnable-track {\n        height: 100%;\n        background: none;\n      }\n      input::-moz-range-track {\n        background: none;\n      }\n      input::-webkit-slider-thumb {\n        width: var(--kt-slider-thumb);\n        height: var(--kt-slider-thumb);\n        background: var(--color-white);\n        border: 2px solid var(--color-primary-base);\n        border-radius: 50%;\n        box-shadow: 0 1px 3px color-mix(in srgb, var(--color-backdrop) 70%, transparent);\n        cursor: grab;\n        pointer-events: auto;\n        appearance: none;\n        transition: box-shadow var(--duration-instant);\n      }\n      input::-moz-range-thumb {\n        box-sizing: border-box;\n        width: var(--kt-slider-thumb);\n        height: var(--kt-slider-thumb);\n        background: var(--color-white);\n        border: 2px solid var(--color-primary-base);\n        border-radius: 50%;\n        box-shadow: 0 1px 3px color-mix(in srgb, var(--color-backdrop) 70%, transparent);\n        cursor: grab;\n        pointer-events: auto;\n      }\n      input:focus-visible::-webkit-slider-thumb {\n        box-shadow:\n          0 0 0 4px var(--color-primary-soft),\n          0 0 0 2px var(--color-primary-base);\n      }\n      input:focus-visible::-moz-range-thumb {\n        box-shadow:\n          0 0 0 4px var(--color-primary-soft),\n          0 0 0 2px var(--color-primary-base);\n      }\n      input:disabled::-webkit-slider-thumb {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  /** `\"40\"`, or `\"20/80\"` with `range`. Kept within bounds and on the step. */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  @property({ type: Number })\n  step = 1;\n\n  /** Two thumbs: a low and a high end. */\n  @property({ type: Boolean, reflect: true })\n  range = false;\n\n  /** Accessible name; shown above the slider with `show-value`. */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Shows the label and the current value above the slider. */\n  @property({ type: Boolean, attribute: 'show-value' })\n  showValue = false;\n\n  /** How a number is shown and announced: `(n) => \\`$${n}\\``. */\n  @property({ attribute: false })\n  format: (value: number) => string = (value) => String(value);\n\n  @state() private formDisabled = false;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n  }\n\n  // Bounded on the first update, not on connect: a script may set `max`\n  // after appending the element, and the value must wait for it.\n  override firstUpdated(): void {\n    this.defaultValue = this.value;\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('min') ||\n      changed.has('max') ||\n      changed.has('step') ||\n      changed.has('range')\n    ) {\n      const normalised = this.normalised(this.value);\n      if (normalised !== this.value) this.value = normalised;\n      setFormValue(this.internals, this.value);\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    this.formDisabled = disabled;\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    if (state !== null) this.value = state;\n  }\n\n  /** The thumbs' numbers: one, or low and high. */\n  private get numbers(): number[] {\n    return this.value.split('/').map(Number);\n  }\n\n  /** `n` within bounds and on the step. */\n  private snap(n: number): number {\n    if (!Number.isFinite(n)) return this.min;\n    const step = this.step > 0 ? this.step : 1;\n    const snapped = this.min + Math.round((n - this.min) / step) * step;\n    // Rounding to the step's decimals keeps 0.1 + 0.2 from showing as 0.30000000000000004.\n    const decimals = Math.max(decimalsOf(step), decimalsOf(this.min));\n    return Number(Math.min(this.max, Math.max(this.min, snapped)).toFixed(decimals));\n  }\n\n  private normalised(value: string): string {\n    const parts = value === '' ? [] : value.split('/').map(Number);\n    if (!this.range) return String(this.snap(parts[0] ?? this.min));\n    const low = this.snap(parts[0] ?? this.min);\n    const high = this.snap(parts[1] ?? this.max);\n    return `${Math.min(low, high)}/${Math.max(low, high)}`;\n  }\n\n  /** A thumb moved: the low one cannot pass the high one, nor the other way. */\n  private onSlide(event: Event, index: number, commit: boolean): void {\n    const input = event.target as HTMLInputElement;\n    let next = this.snap(Number(input.value));\n    if (this.range) {\n      const [low, high] = this.numbers as [number, number];\n      if (index === 0) next = Math.min(next, high);\n      else next = Math.max(next, low);\n      input.value = String(next);\n      this.value = index === 0 ? `${next}/${high}` : `${low}/${next}`;\n    } else {\n      this.value = String(next);\n    }\n    emit(this, commit ? 'kt-change' : 'kt-input', { value: this.value });\n  }\n\n  private percent(n: number): number {\n    return this.max > this.min ? ((n - this.min) / (this.max - this.min)) * 100 : 0;\n  }\n\n  override render(): TemplateResult {\n    const s = strings();\n    const numbers = this.numbers;\n    const [start, end] = this.range ? [numbers[0]!, numbers[1]!] : [this.min, numbers[0]!];\n    const inactive = this.disabled || this.formDisabled;\n    const shown = this.range\n      ? `${this.format(numbers[0]!)} – ${this.format(numbers[1]!)}`\n      : this.format(numbers[0]!);\n    const capital = (word: string) => word.charAt(0).toUpperCase() + word.slice(1);\n    const names = !this.range\n      ? [this.label]\n      : this.label\n        ? [`${this.label}, ${s.sliderMinimum}`, `${this.label}, ${s.sliderMaximum}`]\n        : [capital(s.sliderMinimum), capital(s.sliderMaximum)];\n    // Met at one point, the thumbs are drawn one over the other and the later\n    // input catches the pointer. Above the bottom, the low one goes on top, so\n    // a pointer can pull the range open downwards; at the bottom the high one\n    // stays on top to pull it open upwards.\n    const lowOnTop = this.range && numbers[0] === numbers[1] && numbers[0]! > this.min;\n\n    return html`${\n        this.showValue\n          ? html`<div class=\"head\">\n              <span>${this.label}</span>\n              <span part=\"value\" class=\"value\">${shown}</span>\n            </div>`\n          : nothing\n      }\n      <div class=\"control\">\n        <div part=\"track\" class=\"track\"></div>\n        <div\n          part=\"fill\"\n          class=\"fill\"\n          style=${`left: ${this.percent(start)}%; right: ${100 - this.percent(end)}%`}\n        ></div>\n        ${numbers.map(\n          (n, index) =>\n            html`<input\n              class=${index === 0 && lowOnTop ? 'front' : ''}\n              type=\"range\"\n              min=${this.min}\n              max=${this.max}\n              step=${this.step}\n              .value=${String(n)}\n              ?disabled=${inactive}\n              aria-label=${names[index] || nothing}\n              aria-valuetext=${this.format(n)}\n              @input=${(event: Event) => this.onSlide(event, index, false)}\n              @change=${(event: Event) => this.onSlide(event, index, true)}\n            />`,\n        )}\n      </div>`;\n  }\n}\n\ndefineElement('kt-slider', KtSlider);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-slider': KtSlider;\n  }\n}\n"],"names":["KtSlider","KtElement","value","css","attachFormInternals","changed","normalised","setFormValue","disabled","state","n","step","snapped","decimals","decimalsOf","parts","low","high","event","index","commit","input","next","emit","s","strings","numbers","start","end","inactive","shown","capital","word","names","lowOnTop","html","nothing","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -2,10 +2,10 @@ import { css as m, nothing as i, html as l } from "lit";
 import { query as f, property as a, state as b } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { live as g } from "lit/directives/live.js";
-import { K as c, d as y } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as c, d as y } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as p } from "../../../chunks/events-r51msXNf.js";
 import { a as x, s as v, b as w } from "../../../chunks/form-control-B74_EHtG.js";
-import { s as $ } from "../../../chunks/index-TWJzttLX.js";
+import { s as $ } from "../../../chunks/index-BEWmAE0T.js";
 import "../../core/kt-icon/kt-icon.js";
 var k = Object.defineProperty, r = (n, e, o, C) => {
   for (var s = void 0, h = n.length - 1, d; h >= 0; h--)

package/dist/components/forms/kt-time-input/kt-time-input.js

@@ -1,9 +1,9 @@
 import "lit";
 import { property as v } from "lit/decorators.js";
-import { d as x } from "../../../chunks/kt-element-T0VbIBNp.js";
-import { K as O } from "../../../chunks/segmented-field-BBXR4XFL.js";
+import { d as x } from "../../../chunks/kt-element-COgh6Yr1.js";
+import { K as O } from "../../../chunks/segmented-field-BCjCGF4I.js";
 import { d as w } from "../../../chunks/locale-C5xLkGx5.js";
-import { s as y } from "../../../chunks/index-TWJzttLX.js";
+import { s as y } from "../../../chunks/index-BEWmAE0T.js";
 var P = Object.defineProperty, g = (u, e, t, r) => {
   for (var o = void 0, n = u.length - 1, s; n >= 0; n--)
     (s = u[n]) && (o = s(e, t, o) || o);

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

@@ -1,6 +1,6 @@
 import { css as d, nothing as h, html as u } from "lit";
 import { property as i, state as b } from "lit/decorators.js";
-import { K as n, d as p } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as n, d as p } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as m } from "../../../chunks/events-r51msXNf.js";
 import { a as f, s as v } from "../../../chunks/form-control-B74_EHtG.js";
 var g = Object.defineProperty, a = (s, t, l, k) => {

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

@@ -1,8 +1,8 @@
 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-T0VbIBNp.js";
+import { K as p, d as u } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as h } from "../../../chunks/events-r51msXNf.js";
-import { s as v } from "../../../chunks/index-TWJzttLX.js";
+import { s as v } from "../../../chunks/index-BEWmAE0T.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--)

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

@@ -1,8 +1,8 @@
 import { css as c, nothing as u, html as m } from "lit";
 import { state as b, property as n } from "lit/decorators.js";
-import { K as d, d as f } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as d, d as f } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as p } from "../../../chunks/events-r51msXNf.js";
-import { s as h } from "../../../chunks/index-TWJzttLX.js";
+import { s as h } from "../../../chunks/index-BEWmAE0T.js";
 import "../../core/kt-button/kt-button.js";
 var g = Object.defineProperty, a = (r, o, s, v) => {
   for (var e = void 0, i = r.length - 1, l; i >= 0; i--)

package/dist/components/navigation/kt-page-header/kt-page-header.js

@@ -1,6 +1,6 @@
 import { css as c, html as t, nothing as l } from "lit";
 import { property as s } from "lit/decorators.js";
-import { K as h, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as h, d as g } from "../../../chunks/kt-element-COgh6Yr1.js";
 var f = Object.defineProperty, o = (a, r, p, v) => {
   for (var e = void 0, n = a.length - 1, d; n >= 0; n--)
     (d = a[n]) && (e = d(r, p, e) || e);

package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js

@@ -1,10 +1,10 @@
 import { css as b, nothing as c, html as p } from "lit";
 import { queryAll as v, property as n, state as m } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
-import { K as f, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as f, d as g } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as x } from "../../../chunks/events-r51msXNf.js";
 import { a as y, s as k, b as w } from "../../../chunks/form-control-B74_EHtG.js";
-import { s as $ } from "../../../chunks/index-TWJzttLX.js";
+import { s as $ } from "../../../chunks/index-BEWmAE0T.js";
 import "../../core/kt-icon/kt-icon.js";
 var I = Object.defineProperty, s = (h, t, i, o) => {
   for (var e = void 0, r = h.length - 1, l; r >= 0; r--)

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

@@ -0,0 +1,65 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export interface KtStep {
+    readonly id: string;
+    readonly label: string;
+    /** A line under the label. */
+    readonly description?: string;
+    /** Something on this step needs fixing — a field it holds failed. */
+    readonly error?: boolean;
+}
+export type KtStepsOrientation = 'horizontal' | 'vertical';
+/**
+ * The steps of a flow — sign-up, checkout, onboarding — and where the reader
+ * is in it.
+ *
+ * Steps before `current` are complete, `current` is current, the rest are to
+ * come — all of them, while `current` names no step; a step with `error` shows as needing attention wherever it is. With
+ * `navigable`, a completed step is a button that goes back to it; going
+ * forward is the flow's job, not the stepper's.
+ *
+ * An ordered list: the number is the step's place, `aria-current="step"`
+ * marks the current one, and each state is said in words, not only shown.
+ *
+ * @element kt-steps
+ *
+ * @csspart list - The `<ol>`.
+ * @csspart step - A step.
+ * @csspart marker - A step's number, tick or alert.
+ * @csspart connector - The line from a step to the next.
+ *
+ * @fires kt-change - A completed step was picked, with `navigable`. `detail: { id }`.
+ *
+ * @example
+ * ```html
+ * <kt-steps label="Sign-up" current="billing"></kt-steps>
+ * <script>
+ *   steps.steps = [
+ *     { id: 'account', label: 'Account' },
+ *     { id: 'billing', label: 'Billing', description: 'Card or invoice' },
+ *     { id: 'team', label: 'Team' },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class KtSteps extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The steps, in order. Set as a property. */
+    steps: readonly KtStep[];
+    /** The id of the step the reader is on. */
+    current: string;
+    /** Accessible name of the list: what the flow is. */
+    label: string;
+    orientation: KtStepsOrientation;
+    /** Completed steps become buttons that go back to them. */
+    navigable: boolean;
+    private stateOf;
+    private goTo;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-steps': KtSteps;
+    }
+}