kanto-ds 1.7.0 → 1.9.0

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

@@ -1,33 +1,38 @@
-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 { css as v, nothing as c, html as h } from "lit";
+import { queryAll as f, property as s, 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 { 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 { K as b, d as g } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { I as y } from "../../../chunks/indicator-B_Rs8F92.js";
+import { e as k } from "../../../chunks/events-r51msXNf.js";
+import { a as x, s as w, b as $ } from "../../../chunks/form-control-B74_EHtG.js";
+import { s as I } from "../../../chunks/index-1ZFgagWW.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--)
-    (l = h[r]) && (e = l(t, i, e) || e);
-  return e && I(t, i, e), e;
+var S = Object.defineProperty, n = (p, t, i, o) => {
+  for (var e = void 0, r = p.length - 1, l; r >= 0; r--)
+    (l = p[r]) && (e = l(t, i, e) || e);
+  return e && S(t, i, e), e;
 };
-const S = { small: 16, medium: 20, large: 24 };
-class a extends f {
+const C = { small: 16, medium: 20, large: 24 };
+class a extends b {
   constructor() {
-    super(...arguments), this.internals = null, this.defaultValue = null, this.options = [], this.value = null, this.size = "medium", this.orientation = "horizontal", this.disabled = !1, this.formDisabled = !1, this.label = "", this.name = "", this.required = !1;
+    super(), this.internals = null, this.defaultValue = null, this.options = [], this.value = null, this.size = "medium", this.orientation = "horizontal", this.disabled = !1, this.formDisabled = !1, this.label = "", this.name = "", this.required = !1, new y(this, {
+      container: () => this.renderRoot.querySelector(".track"),
+      selected: () => this.renderRoot.querySelector(".option.selected")
+    });
   }
   static {
     this.formAssociated = !0;
   }
   static {
     this.styles = [
-      f.styles,
-      b`
+      b.styles,
+      v`
       :host {
         display: inline-block;
       }
 
       .track {
+        position: relative;
         display: inline-flex;
         box-sizing: border-box;
         gap: 4px;
@@ -86,13 +91,44 @@ class a extends f {
         background-color: var(--surface-card);
       }
 
-      .option.selected {
+      /* Its surface is the thumb below, not its own background. */
+      .option.selected,
+      .option.selected:hover:not(:disabled) {
         color: var(--text-body);
+        background-color: transparent;
+      }
+
+      /* One surface that slides from segment to segment, placed by
+         IndicatorController before the first paint. The segments sit above
+         it. */
+      .thumb {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: none;
+        width: var(--kt-indicator-width);
+        height: var(--kt-indicator-height);
         background-color: var(--surface-raised);
+        border-radius: calc(var(--border-radius) - 4px);
+        translate: var(--kt-indicator-x) var(--kt-indicator-y);
+        pointer-events: none;
       }
-      .option.selected:hover:not(:disabled) {
+      .track[data-indicator] .thumb {
+        display: block;
+      }
+      .option {
+        position: relative;
+      }
+      .track:has(.option.selected:hover:not(:disabled)) .thumb {
         background-color: var(--surface-hover);
       }
+      .track[data-indicator='ready'] .thumb {
+        transition:
+          translate var(--duration-normal) var(--easing-standard),
+          width var(--duration-normal) var(--easing-standard),
+          height var(--duration-normal) var(--easing-standard),
+          background-color var(--duration-normal) var(--easing-standard);
+      }
 
       .option:disabled {
         color: var(--text-disabled);
@@ -140,13 +176,13 @@ class a extends f {
     return this.disabled || this.formDisabled;
   }
   connectedCallback() {
-    super.connectedCallback(), this.internals ??= y(this), this.defaultValue = this.value;
+    super.connectedCallback(), this.internals ??= x(this), this.defaultValue = this.value;
   }
   willUpdate(t) {
     if (t.has("value") || t.has("required") || this.stringsChanged(t)) {
-      k(this.internals, this.value === null ? null : String(this.value));
+      w(this.internals, this.value === null ? null : String(this.value));
       const i = this.required && this.value === null;
-      w(this.internals, { valueMissing: i }, i ? $().selectOption : "");
+      $(this.internals, { valueMissing: i }, i ? I().selectOption : "");
     }
   }
   formResetCallback() {
@@ -166,7 +202,7 @@ class a extends f {
     return this.options.findIndex((t) => t.value === this.value);
   }
   choose(t) {
-    this.inactive || t.disabled || this.value === t.value || (this.value = t.value, x(this, "kt-change", { value: t.value, option: t }));
+    this.inactive || t.disabled || this.value === t.value || (this.value = t.value, k(this, "kt-change", { value: t.value, option: t }));
   }
   /**
    * Radio-group semantics: the arrows move *and* select, wrapping at the ends
@@ -198,7 +234,7 @@ class a extends f {
   }
   render() {
     const t = this.selectedIndex, i = t >= 0 ? t : this.options.findIndex((o) => !o.disabled);
-    return p`<div
+    return h`<div
       part="base"
       class=${u({
       track: !0,
@@ -211,9 +247,10 @@ class a extends f {
       aria-disabled=${this.inactive ? "true" : c}
       @keydown=${this.onKeyDown}
     >
+      <span class="thumb" aria-hidden="true"></span>
       ${this.options.map((o, e) => {
       const r = o.value === this.value, l = o.label ?? "", d = !!o.icon && l === "";
-      return p`<button
+      return h`<button
           part="option"
           type="button"
           role="radio"
@@ -229,42 +266,42 @@ class a extends f {
           ?disabled=${this.inactive || o.disabled}
           @click=${() => this.choose(o)}
         >
-          ${o.icon ? p`<kt-icon name=${o.icon} size=${S[this.size]}></kt-icon>` : c}
-          ${d ? c : p`<span class="text">${l}</span>`}
+          ${o.icon ? h`<kt-icon name=${o.icon} size=${C[this.size]}></kt-icon>` : c}
+          ${d ? c : h`<span class="text">${l}</span>`}
         </button>`;
     })}
     </div>`;
   }
 }
-s([
-  v(".option")
+n([
+  f(".option")
 ], a.prototype, "segments");
-s([
-  n({ attribute: !1 })
+n([
+  s({ attribute: !1 })
 ], a.prototype, "options");
-s([
-  n({ type: String })
+n([
+  s({ type: String })
 ], a.prototype, "value");
-s([
-  n({ type: String, reflect: !0 })
+n([
+  s({ type: String, reflect: !0 })
 ], a.prototype, "size");
-s([
-  n({ type: String, reflect: !0 })
+n([
+  s({ type: String, reflect: !0 })
 ], a.prototype, "orientation");
-s([
-  n({ type: Boolean, reflect: !0 })
+n([
+  s({ type: Boolean, reflect: !0 })
 ], a.prototype, "disabled");
-s([
+n([
   m()
 ], a.prototype, "formDisabled");
-s([
-  n({ type: String })
+n([
+  s({ type: String })
 ], a.prototype, "label");
-s([
-  n({ type: String })
+n([
+  s({ type: String })
 ], a.prototype, "name");
-s([
-  n({ type: Boolean, reflect: !0 })
+n([
+  s({ type: Boolean, reflect: !0 })
 ], a.prototype, "required");
 g("kt-segmented-control", a);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"kt-segmented-control.js","sources":["../../../../src/components/navigation/kt-segmented-control/kt-segmented-control.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAll, state } 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 {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtSegmentedSize = 'small' | 'medium' | 'large';\n\nexport interface KtSegmentedOption {\n  readonly value: string | number;\n  readonly label?: string;\n  readonly icon?: string;\n  readonly disabled?: boolean;\n}\n\nconst ICON_SIZE: Record<KtSegmentedSize, number> = { small: 16, medium: 20, large: 24 };\n\n/**\n * A small set of mutually exclusive choices, shown as one inset track with the\n * selected segment raised out of it.\n *\n * Use it for two to five options that all fit on screen — a view switch, a date\n * range. Past that, `<kt-select>`.\n *\n * Implemented as a radio group: one tab stop for the whole control, arrows to\n * move between segments. That is what a keyboard user expects here, and it\n * keeps a five-option control from adding five tab stops to the page.\n *\n * @element kt-segmented-control\n *\n * @csspart base - The track.\n * @csspart option - A segment.\n *\n * @fires kt-change - A segment was chosen. `detail: { value, option }`.\n *\n * @example\n * ```js\n * control.options = [\n *   { value: 'day', label: 'Day' },\n *   { value: 'week', label: 'Week' },\n *   { value: 'month', label: 'Month' },\n * ];\n * control.value = 'week';\n * ```\n */\nexport class KtSegmentedControl extends KtElement {\n  static readonly formAssociated = true;\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      .track {\n        display: inline-flex;\n        box-sizing: border-box;\n        gap: 4px;\n        padding: 4px;\n        background-color: var(--color-dark-14);\n        border-radius: var(--border-radius);\n      }\n\n      .track.small {\n        gap: 3px;\n        padding: 3px;\n      }\n      .track.large {\n        gap: 5px;\n        padding: 5px;\n      }\n\n      .track.vertical {\n        flex-direction: column;\n        width: fit-content;\n      }\n\n      :host(:disabled) .track {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      .option {\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        gap: var(--gap-button);\n        height: var(--button-height-small);\n        padding: 0 12px;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        /* Segments share the width equally from a basis of zero, so in a\n           container that shrinks to fit they would split a label over two\n           lines of a fixed-height button. */\n        white-space: nowrap;\n        background-color: transparent;\n        border: none;\n        border-radius: calc(var(--border-radius) - 4px);\n        cursor: pointer;\n        transition:\n          background-color var(--duration-normal) var(--easing-standard),\n          color var(--duration-normal) var(--easing-standard);\n      }\n\n      .option:hover:not(:disabled) {\n        background-color: var(--color-dark-18);\n      }\n      .option:active:not(:disabled) {\n        background-color: var(--surface-card);\n      }\n\n      .option.selected {\n        color: var(--text-body);\n        background-color: var(--surface-raised);\n      }\n      .option.selected:hover:not(:disabled) {\n        background-color: var(--surface-hover);\n      }\n\n      .option:disabled {\n        color: var(--text-disabled);\n        background-color: transparent;\n        pointer-events: none;\n      }\n\n      .option:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: -2px;\n      }\n\n      .option.small {\n        height: 24px;\n        gap: 6px;\n        padding: 0 8px;\n        font: var(--font-normal-small);\n      }\n      .option.large {\n        height: var(--button-height);\n        padding: 0 16px;\n        font: var(--font-normal-medium);\n      }\n\n      .option.icon-only {\n        width: var(--button-height-small);\n        padding: 0;\n      }\n      .option.icon-only.small {\n        width: 24px;\n      }\n      .option.icon-only.large {\n        width: var(--button-height);\n      }\n\n      .text {\n        flex: 1;\n        text-align: center;\n      }\n    `,\n  ];\n\n  @queryAll('.option')\n  private segments!: NodeListOf<HTMLButtonElement>;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | number | null = null;\n\n  @property({ attribute: false })\n  options: readonly KtSegmentedOption[] = [];\n\n  @property({ type: String })\n  value: string | number | null = null;\n\n  @property({ type: String, reflect: true })\n  size: KtSegmentedSize = 'medium';\n\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */\n  @state()\n  private formDisabled = false;\n\n  /** Whether the control is off, by its own `disabled` or by its form. */\n  private get inactive(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  /** Accessible name for the group. */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('value') || changed.has('required') || this.stringsChanged(changed)) {\n      setFormValue(this.internals, this.value === null ? null : String(this.value));\n\n      const missing = this.required && this.value === null;\n      setValidity(this.internals, { valueMissing: missing }, missing ? strings().selectOption : '');\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  /**\n   * Called by the platform when the control's disabled state changes — its\n   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n   */\n  formDisabledCallback(disabled: boolean): void {\n    this.formDisabled = disabled;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    // The form stores a string; hand back the option's own value, which may be\n    // a number.\n    this.value = this.options.find((option) => String(option.value) === state)?.value ?? state;\n  }\n\n  private get selectedIndex(): number {\n    return this.options.findIndex((option) => option.value === this.value);\n  }\n\n  private choose(option: KtSegmentedOption): void {\n    if (this.inactive || option.disabled || this.value === option.value) return;\n    this.value = option.value;\n    emit(this, 'kt-change', { value: option.value, option });\n  }\n\n  /**\n   * Radio-group semantics: the arrows move *and* select, wrapping at the ends\n   * and skipping disabled segments.\n   */\n  private onKeyDown(event: KeyboardEvent): void {\n    const forward = this.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n    const back = this.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n\n    let target: number | undefined;\n    if (event.key === forward) target = this.step(1);\n    else if (event.key === back) target = this.step(-1);\n    else if (event.key === 'Home') target = this.options.findIndex((o) => !o.disabled);\n    else if (event.key === 'End')\n      target = this.options.length - 1 - [...this.options].reverse().findIndex((o) => !o.disabled);\n    else return;\n\n    event.preventDefault();\n    if (target === undefined || target < 0) return;\n\n    const option = this.options[target];\n    if (!option) return;\n\n    const index = target;\n    this.choose(option);\n    void this.updateComplete.then(() => this.segments[index]?.focus());\n  }\n\n  private step(direction: 1 | -1): number | undefined {\n    const count = this.options.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.options[index]?.disabled) return index;\n    }\n    return undefined;\n  }\n\n  override render(): TemplateResult {\n    const selectedIndex = this.selectedIndex;\n    // One tab stop for the whole group: the selected segment holds it, or the\n    // first selectable one when nothing is chosen yet.\n    const tabStop = selectedIndex >= 0 ? selectedIndex : this.options.findIndex((o) => !o.disabled);\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        track: true,\n        [this.size]: true,\n        vertical: this.orientation === 'vertical',\n      })}\n      role=\"radiogroup\"\n      aria-label=${this.label || nothing}\n      aria-orientation=${this.orientation}\n      aria-disabled=${this.inactive ? 'true' : nothing}\n      @keydown=${this.onKeyDown}\n    >\n      ${this.options.map((option, index) => {\n        const selected = option.value === this.value;\n        const text = option.label ?? '';\n        const iconOnly = Boolean(option.icon) && text === '';\n\n        return html`<button\n          part=\"option\"\n          type=\"button\"\n          role=\"radio\"\n          class=${classMap({\n            option: true,\n            [this.size]: true,\n            selected,\n            'icon-only': iconOnly,\n          })}\n          aria-checked=${selected ? 'true' : 'false'}\n          aria-label=${iconOnly ? (option.icon ?? '') : nothing}\n          tabindex=${index === tabStop ? 0 : -1}\n          ?disabled=${this.inactive || option.disabled}\n          @click=${() => this.choose(option)}\n        >\n          ${\n            option.icon\n              ? html`<kt-icon name=${option.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n              : nothing\n          }\n          ${iconOnly ? nothing : html`<span class=\"text\">${text}</span>`}\n        </button>`;\n      })}\n    </div>`;\n  }\n}\n\ndefineElement('kt-segmented-control', KtSegmentedControl);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-segmented-control': KtSegmentedControl;\n  }\n}\n"],"names":["ICON_SIZE","KtSegmentedControl","KtElement","css","attachFormInternals","changed","setFormValue","missing","setValidity","strings","disabled","state","option","emit","event","forward","back","target","o","index","direction","count","from","offset","selectedIndex","tabStop","html","classMap","nothing","selected","text","iconOnly","__decorateClass","queryAll","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-segmented-control.js","sources":["../../../../src/components/navigation/kt-segmented-control/kt-segmented-control.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { IndicatorController } from '#internal/indicator';\nimport { emit } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtSegmentedSize = 'small' | 'medium' | 'large';\n\nexport interface KtSegmentedOption {\n  readonly value: string | number;\n  readonly label?: string;\n  readonly icon?: string;\n  readonly disabled?: boolean;\n}\n\nconst ICON_SIZE: Record<KtSegmentedSize, number> = { small: 16, medium: 20, large: 24 };\n\n/**\n * A small set of mutually exclusive choices, shown as one inset track with the\n * selected segment raised out of it.\n *\n * Use it for two to five options that all fit on screen — a view switch, a date\n * range. Past that, `<kt-select>`.\n *\n * Implemented as a radio group: one tab stop for the whole control, arrows to\n * move between segments. That is what a keyboard user expects here, and it\n * keeps a five-option control from adding five tab stops to the page.\n *\n * @element kt-segmented-control\n *\n * @csspart base - The track.\n * @csspart option - A segment.\n *\n * @fires kt-change - A segment was chosen. `detail: { value, option }`.\n *\n * @example\n * ```js\n * control.options = [\n *   { value: 'day', label: 'Day' },\n *   { value: 'week', label: 'Week' },\n *   { value: 'month', label: 'Month' },\n * ];\n * control.value = 'week';\n * ```\n */\nexport class KtSegmentedControl extends KtElement {\n  static readonly formAssociated = true;\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      .track {\n        position: relative;\n        display: inline-flex;\n        box-sizing: border-box;\n        gap: 4px;\n        padding: 4px;\n        background-color: var(--color-dark-14);\n        border-radius: var(--border-radius);\n      }\n\n      .track.small {\n        gap: 3px;\n        padding: 3px;\n      }\n      .track.large {\n        gap: 5px;\n        padding: 5px;\n      }\n\n      .track.vertical {\n        flex-direction: column;\n        width: fit-content;\n      }\n\n      :host(:disabled) .track {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      .option {\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        gap: var(--gap-button);\n        height: var(--button-height-small);\n        padding: 0 12px;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        /* Segments share the width equally from a basis of zero, so in a\n           container that shrinks to fit they would split a label over two\n           lines of a fixed-height button. */\n        white-space: nowrap;\n        background-color: transparent;\n        border: none;\n        border-radius: calc(var(--border-radius) - 4px);\n        cursor: pointer;\n        transition:\n          background-color var(--duration-normal) var(--easing-standard),\n          color var(--duration-normal) var(--easing-standard);\n      }\n\n      .option:hover:not(:disabled) {\n        background-color: var(--color-dark-18);\n      }\n      .option:active:not(:disabled) {\n        background-color: var(--surface-card);\n      }\n\n      /* Its surface is the thumb below, not its own background. */\n      .option.selected,\n      .option.selected:hover:not(:disabled) {\n        color: var(--text-body);\n        background-color: transparent;\n      }\n\n      /* One surface that slides from segment to segment, placed by\n         IndicatorController before the first paint. The segments sit above\n         it. */\n      .thumb {\n        position: absolute;\n        top: 0;\n        left: 0;\n        display: none;\n        width: var(--kt-indicator-width);\n        height: var(--kt-indicator-height);\n        background-color: var(--surface-raised);\n        border-radius: calc(var(--border-radius) - 4px);\n        translate: var(--kt-indicator-x) var(--kt-indicator-y);\n        pointer-events: none;\n      }\n      .track[data-indicator] .thumb {\n        display: block;\n      }\n      .option {\n        position: relative;\n      }\n      .track:has(.option.selected:hover:not(:disabled)) .thumb {\n        background-color: var(--surface-hover);\n      }\n      .track[data-indicator='ready'] .thumb {\n        transition:\n          translate var(--duration-normal) var(--easing-standard),\n          width var(--duration-normal) var(--easing-standard),\n          height var(--duration-normal) var(--easing-standard),\n          background-color var(--duration-normal) var(--easing-standard);\n      }\n\n      .option:disabled {\n        color: var(--text-disabled);\n        background-color: transparent;\n        pointer-events: none;\n      }\n\n      .option:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: -2px;\n      }\n\n      .option.small {\n        height: 24px;\n        gap: 6px;\n        padding: 0 8px;\n        font: var(--font-normal-small);\n      }\n      .option.large {\n        height: var(--button-height);\n        padding: 0 16px;\n        font: var(--font-normal-medium);\n      }\n\n      .option.icon-only {\n        width: var(--button-height-small);\n        padding: 0;\n      }\n      .option.icon-only.small {\n        width: 24px;\n      }\n      .option.icon-only.large {\n        width: var(--button-height);\n      }\n\n      .text {\n        flex: 1;\n        text-align: center;\n      }\n    `,\n  ];\n\n  @queryAll('.option')\n  private segments!: NodeListOf<HTMLButtonElement>;\n\n  constructor() {\n    super();\n    new IndicatorController(this, {\n      container: () => this.renderRoot.querySelector<HTMLElement>('.track'),\n      selected: () => this.renderRoot.querySelector<HTMLElement>('.option.selected'),\n    });\n  }\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | number | null = null;\n\n  @property({ attribute: false })\n  options: readonly KtSegmentedOption[] = [];\n\n  @property({ type: String })\n  value: string | number | null = null;\n\n  @property({ type: String, reflect: true })\n  size: KtSegmentedSize = 'medium';\n\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */\n  @state()\n  private formDisabled = false;\n\n  /** Whether the control is off, by its own `disabled` or by its form. */\n  private get inactive(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  /** Accessible name for the group. */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('value') || changed.has('required') || this.stringsChanged(changed)) {\n      setFormValue(this.internals, this.value === null ? null : String(this.value));\n\n      const missing = this.required && this.value === null;\n      setValidity(this.internals, { valueMissing: missing }, missing ? strings().selectOption : '');\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  /**\n   * Called by the platform when the control's disabled state changes — its\n   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n   */\n  formDisabledCallback(disabled: boolean): void {\n    this.formDisabled = disabled;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    // The form stores a string; hand back the option's own value, which may be\n    // a number.\n    this.value = this.options.find((option) => String(option.value) === state)?.value ?? state;\n  }\n\n  private get selectedIndex(): number {\n    return this.options.findIndex((option) => option.value === this.value);\n  }\n\n  private choose(option: KtSegmentedOption): void {\n    if (this.inactive || option.disabled || this.value === option.value) return;\n    this.value = option.value;\n    emit(this, 'kt-change', { value: option.value, option });\n  }\n\n  /**\n   * Radio-group semantics: the arrows move *and* select, wrapping at the ends\n   * and skipping disabled segments.\n   */\n  private onKeyDown(event: KeyboardEvent): void {\n    const forward = this.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n    const back = this.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n\n    let target: number | undefined;\n    if (event.key === forward) target = this.step(1);\n    else if (event.key === back) target = this.step(-1);\n    else if (event.key === 'Home') target = this.options.findIndex((o) => !o.disabled);\n    else if (event.key === 'End')\n      target = this.options.length - 1 - [...this.options].reverse().findIndex((o) => !o.disabled);\n    else return;\n\n    event.preventDefault();\n    if (target === undefined || target < 0) return;\n\n    const option = this.options[target];\n    if (!option) return;\n\n    const index = target;\n    this.choose(option);\n    void this.updateComplete.then(() => this.segments[index]?.focus());\n  }\n\n  private step(direction: 1 | -1): number | undefined {\n    const count = this.options.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.options[index]?.disabled) return index;\n    }\n    return undefined;\n  }\n\n  override render(): TemplateResult {\n    const selectedIndex = this.selectedIndex;\n    // One tab stop for the whole group: the selected segment holds it, or the\n    // first selectable one when nothing is chosen yet.\n    const tabStop = selectedIndex >= 0 ? selectedIndex : this.options.findIndex((o) => !o.disabled);\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        track: true,\n        [this.size]: true,\n        vertical: this.orientation === 'vertical',\n      })}\n      role=\"radiogroup\"\n      aria-label=${this.label || nothing}\n      aria-orientation=${this.orientation}\n      aria-disabled=${this.inactive ? 'true' : nothing}\n      @keydown=${this.onKeyDown}\n    >\n      <span class=\"thumb\" aria-hidden=\"true\"></span>\n      ${this.options.map((option, index) => {\n        const selected = option.value === this.value;\n        const text = option.label ?? '';\n        const iconOnly = Boolean(option.icon) && text === '';\n\n        return html`<button\n          part=\"option\"\n          type=\"button\"\n          role=\"radio\"\n          class=${classMap({\n            option: true,\n            [this.size]: true,\n            selected,\n            'icon-only': iconOnly,\n          })}\n          aria-checked=${selected ? 'true' : 'false'}\n          aria-label=${iconOnly ? (option.icon ?? '') : nothing}\n          tabindex=${index === tabStop ? 0 : -1}\n          ?disabled=${this.inactive || option.disabled}\n          @click=${() => this.choose(option)}\n        >\n          ${\n            option.icon\n              ? html`<kt-icon name=${option.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n              : nothing\n          }\n          ${iconOnly ? nothing : html`<span class=\"text\">${text}</span>`}\n        </button>`;\n      })}\n    </div>`;\n  }\n}\n\ndefineElement('kt-segmented-control', KtSegmentedControl);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-segmented-control': KtSegmentedControl;\n  }\n}\n"],"names":["ICON_SIZE","KtSegmentedControl","KtElement","IndicatorController","css","attachFormInternals","changed","setFormValue","missing","setValidity","strings","disabled","state","option","emit","event","forward","back","target","o","index","direction","count","from","offset","selectedIndex","tabStop","html","classMap","nothing","selected","text","iconOnly","__decorateClass","queryAll","property","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,68 @@
+import { type PropertyValues, 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;
+    /** Steps completed by the last change of `current`, whose tick comes in. */
+    private entering;
+    willUpdate(changed: PropertyValues<this>): void;
+    private stateOf;
+    private goTo;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-steps': KtSteps;
+    }
+}

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

@@ -0,0 +1,286 @@
+import { css as g, nothing as p, html as i } from "lit";
+import { property as l } from "lit/decorators.js";
+import { K as m, d as b } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { e as k } from "../../../chunks/events-r51msXNf.js";
+import { s as v } from "../../../chunks/index-1ZFgagWW.js";
+import "../../core/kt-icon/kt-icon.js";
+var x = Object.defineProperty, c = (d, r, a, o) => {
+  for (var t = void 0, e = d.length - 1, s; e >= 0; e--)
+    (s = d[e]) && (t = s(r, a, t) || t);
+  return t && x(r, a, t), t;
+};
+class n extends m {
+  constructor() {
+    super(...arguments), this.steps = [], this.current = "", this.label = "", this.orientation = "horizontal", this.navigable = !1, this.entering = /* @__PURE__ */ new Set();
+  }
+  static {
+    this.styles = [
+      m.styles,
+      g`
+      :host {
+        display: block;
+        --kt-steps-marker: calc(28px * var(--density-scale, 1));
+      }
+
+      ol {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      :host([orientation='vertical']) ol {
+        flex-direction: column;
+      }
+
+      /* Across, the steps share the width evenly: a column each, the marker
+         on top and the text centred under it. */
+      li {
+        position: relative;
+        flex: 1 1 0;
+        min-width: 0;
+      }
+      .step {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: center;
+        text-align: center;
+      }
+      :host([orientation='vertical']) li {
+        flex: none;
+        padding-bottom: 24px;
+      }
+      :host([orientation='vertical']) li:last-child {
+        padding-bottom: 0;
+      }
+      :host([orientation='vertical']) .step {
+        flex-direction: row;
+        gap: 12px;
+        align-items: flex-start;
+        text-align: start;
+      }
+
+      /* The line to the next step, from marker to marker through their
+         middle, clear of each: 8px across, 6px down. */
+      .connector {
+        position: absolute;
+        top: calc(var(--kt-steps-marker) / 2 - 1px);
+        left: calc(50% + var(--kt-steps-marker) / 2 + 8px);
+        width: calc(100% - var(--kt-steps-marker) - 16px);
+        height: 2px;
+        background: var(--border-field);
+        border-radius: var(--radius-full);
+      }
+      /* The fill runs from this step to the next as it is completed, and
+         back as it is undone. */
+      .fill {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: var(--color-primary-base);
+        border-radius: inherit;
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: transform var(--duration-slow) var(--easing-standard);
+      }
+      li[data-state='complete'] .fill {
+        transform: none;
+      }
+      :host([orientation='vertical']) .fill {
+        transform: scaleY(0);
+        transform-origin: top;
+      }
+      :host([orientation='vertical']) li[data-state='complete'] .fill {
+        transform: none;
+      }
+      :host([orientation='vertical']) .connector {
+        top: calc(var(--kt-steps-marker) + 6px);
+        left: calc(var(--kt-steps-marker) / 2 - 1px);
+        width: 2px;
+        height: calc(100% - var(--kt-steps-marker) - 12px);
+      }
+
+      /* A filled circle: the tick when done, the number otherwise. */
+      .marker {
+        display: grid;
+        flex: none;
+        place-items: center;
+        width: var(--kt-steps-marker);
+        height: var(--kt-steps-marker);
+        color: var(--text-body);
+        font: var(--font-normal-small);
+        font-weight: 600;
+        /* A field's border colour: a grey that reads on a card and a page,
+           in both themes. */
+        background: var(--border-field);
+        border-radius: 50%;
+        transition:
+          background-color var(--duration-fast) var(--easing-standard),
+          color var(--duration-fast) var(--easing-standard);
+      }
+      li[data-state='complete'] .marker,
+      li[data-state='current'] .marker {
+        color: var(--color-white);
+        background: var(--color-primary-base);
+      }
+      li[data-state='error'] .marker {
+        color: var(--color-white);
+        background: var(--color-danger-base);
+      }
+      /* Trimmed to the digits' height, so the grid centres the ink, not a
+         line box padded by the font's ascent and descent. */
+      .number {
+        display: block;
+        line-height: 1;
+        font-variant-numeric: tabular-nums;
+        text-box: trim-both cap alphabetic;
+      }
+      /* Lucide's tick sits high in its square; this puts its ink on the
+         marker's middle. */
+      .marker kt-icon[name='check'] {
+        translate: 0 0.5px;
+      }
+      /* A step just completed: its tick comes in as the line reaches the
+         next step. Never on the first render — a page opens still. */
+      .marker kt-icon.enter {
+        animation: kt-steps-tick var(--duration-normal) var(--easing-standard) backwards;
+      }
+      @keyframes kt-steps-tick {
+        from {
+          opacity: 0;
+          scale: 0.4;
+        }
+      }
+
+      .text {
+        display: grid;
+        gap: 2px;
+        min-width: 0;
+        padding: 0 4px;
+      }
+      :host([orientation='vertical']) .text {
+        gap: 0;
+        padding: 0;
+      }
+      .label {
+        color: var(--text-muted);
+        font: var(--font-normal-medium);
+      }
+      /* Down, as tall as the marker, so the label sits on its middle. */
+      :host([orientation='vertical']) .label {
+        display: flex;
+        align-items: center;
+        min-height: var(--kt-steps-marker);
+      }
+      li[data-state='current'] .label,
+      li[data-state='complete'] .label {
+        color: var(--text-body);
+      }
+      li[data-state='error'] .label {
+        color: var(--color-danger-text);
+      }
+      .description {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+
+      button.step {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        color: inherit;
+        font: inherit;
+        background: none;
+        border: none;
+        border-radius: var(--radius-input);
+        cursor: pointer;
+      }
+      button.step:hover .label {
+        color: var(--color-primary-text);
+      }
+      button.step:hover .marker {
+        background: var(--color-primary-hover);
+      }
+      button.step:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 4px;
+      }
+
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+    `
+    ];
+  }
+  willUpdate(r) {
+    if (!r.has("current") || !this.hasUpdated) return;
+    const a = (e) => this.steps.findIndex((s) => s.id === e), o = a(r.get("current")), t = a(this.current);
+    this.entering = /* @__PURE__ */ new Set();
+    for (let e = Math.max(o, 0); e < t; e += 1) this.entering.add(e);
+  }
+  stateOf(r, a, o) {
+    return r.error ? "error" : a < o ? "complete" : a === o ? "current" : "upcoming";
+  }
+  goTo(r) {
+    this.current = r.id, k(this, "kt-change", { id: r.id });
+  }
+  render() {
+    const r = v(), a = this.steps.findIndex((t) => t.id === this.current), o = {
+      complete: r.stepComplete,
+      current: r.stepCurrent,
+      upcoming: r.stepUpcoming,
+      error: r.stepError
+    };
+    return i`<ol part="list" aria-label=${this.label || p}>
+      ${this.steps.map((t, e) => {
+      const s = this.stateOf(t, e, a), u = s === "complete" ? i`<kt-icon
+                class=${this.entering.has(e) ? "enter" : ""}
+                name="check"
+                size="14"
+              ></kt-icon>` : s === "error" ? i`<kt-icon name="circle-alert" size="14"></kt-icon>` : i`<span class="number">${e + 1}</span>`, h = i`<span part="marker" class="marker" aria-hidden="true">${u}</span>
+          <span class="text">
+            <span class="label">${t.label}</span>
+            ${t.description ? i`<span class="description">${t.description}</span>` : p}
+            <span class="visually-hidden">${o[s]}</span>
+          </span>`, f = this.navigable && e < a;
+      return i`<li
+          part="step"
+          data-state=${s}
+          aria-current=${e === a ? "step" : p}
+        >
+          ${f ? i`<button class="step" type="button" @click=${() => this.goTo(t)}>
+                  ${h}
+                </button>` : i`<span class="step">${h}</span>`}
+          ${e < this.steps.length - 1 ? i`<span part="connector" class="connector" aria-hidden="true"
+                  ><span class="fill"></span
+                ></span>` : p}
+        </li>`;
+    })}
+    </ol>`;
+  }
+}
+c([
+  l({ attribute: !1 })
+], n.prototype, "steps");
+c([
+  l({ type: String, reflect: !0 })
+], n.prototype, "current");
+c([
+  l({ type: String })
+], n.prototype, "label");
+c([
+  l({ type: String, reflect: !0 })
+], n.prototype, "orientation");
+c([
+  l({ type: Boolean, reflect: !0 })
+], n.prototype, "navigable");
+b("kt-steps", n);
+export {
+  n as KtSteps
+};
+//# sourceMappingURL=kt-steps.js.map