kanto-ds 1.7.0 → 1.8.0

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

@@ -0,0 +1,350 @@
+import { css as b, nothing as u, html as p } from "lit";
+import { property as o, state as f, query as v } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { K as c, d as g } from "../../../chunks/kt-element-COgh6Yr1.js";
+import { u as x, e as N } from "../../../chunks/events-r51msXNf.js";
+import { a as w, s as $, b as k } from "../../../chunks/form-control-B74_EHtG.js";
+import { r as F } from "../../../chunks/locale-C5xLkGx5.js";
+import { s as m } from "../../../chunks/index-BEWmAE0T.js";
+import { d } from "../../../chunks/numbers-QyecMiSJ.js";
+import "../../core/kt-icon/kt-icon.js";
+var I = Object.defineProperty, r = (n, t, e, a) => {
+  for (var s = void 0, l = n.length - 1, h; l >= 0; l--)
+    (h = n[l]) && (s = h(t, e, s) || s);
+  return s && I(t, e, s), s;
+};
+function B(n) {
+  const t = new Intl.NumberFormat(n).formatToParts(12345.6);
+  return {
+    group: t.find((e) => e.type === "group")?.value ?? ",",
+    decimal: t.find((e) => e.type === "decimal")?.value ?? "."
+  };
+}
+function D(n, t, e = !1) {
+  const { group: a, decimal: s } = B(t), l = n.replace(/[\u200e\u200f\u061c]/g, "").replace(/[\u2212\u2012\u2013\u2014]/g, "-").replace(/\s/g, "").split(a).join("").replace(s, ".").replace(/[%\p{Sc}]/gu, "");
+  if (!/^[+-]?(\d+\.?\d*|\.\d+)$/.test(l)) return NaN;
+  const h = Number(l);
+  return e ? h / 100 : h;
+}
+class i extends c {
+  constructor() {
+    super(...arguments), this.value = null, this.min = Number.NEGATIVE_INFINITY, this.max = Number.POSITIVE_INFINITY, this.step = 1, this.name = "", this.label = "", this.locale = "", this.placeholder = "", this.size = "medium", this.disabled = !1, this.required = !1, this.error = "", this.formatOptions = {}, this.focused = !1, this.formDisabled = !1, this.internals = null, this.defaultValue = null, this.errorId = x("kt-number-error");
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      c.styles,
+      b`
+      :host {
+        display: block;
+        --field-height: var(--button-height);
+      }
+      :host([size='small']) {
+        --field-height: var(--button-height-small);
+      }
+      :host([size='large']) {
+        --field-height: var(--button-height-large);
+      }
+
+      .field {
+        display: flex;
+        align-items: center;
+        height: var(--field-height);
+        background-color: var(--surface-field);
+        border: var(--border-width) solid var(--border-field);
+        border-radius: var(--radius-input);
+        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);
+      }
+      .field.error,
+      .field.error:hover,
+      .field.error:focus-within {
+        outline: var(--outline-width) solid var(--color-danger-base);
+      }
+      .field.disabled {
+        background-color: var(--color-dark-14);
+        pointer-events: none;
+      }
+
+      input {
+        flex: 1;
+        min-width: 0;
+        height: 100%;
+        padding: 0 4px;
+        color: var(--text-body);
+        font: var(--font-input);
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+        background: transparent;
+        border: none;
+        outline: none;
+      }
+      .disabled input {
+        color: var(--text-disabled);
+      }
+
+      button {
+        display: inline-grid;
+        flex: none;
+        place-items: center;
+        width: var(--field-height);
+        height: 100%;
+        padding: 0;
+        color: var(--text-muted);
+        background: none;
+        border: none;
+        cursor: pointer;
+        transition:
+          color var(--duration-instant),
+          background-color var(--duration-instant);
+      }
+      button:hover:not(:disabled) {
+        color: var(--text-body);
+        background: var(--surface-hover);
+      }
+      .minus {
+        border-radius: calc(var(--radius-input) - 1px) 0 0 calc(var(--radius-input) - 1px);
+      }
+      .plus {
+        border-radius: 0 calc(var(--radius-input) - 1px) calc(var(--radius-input) - 1px) 0;
+      }
+      button:disabled {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+      button:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: -2px;
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= w(this), this.value = this.value === null ? null : this.clamp(this.value), this.defaultValue = this.value;
+  }
+  willUpdate(t) {
+    if (t.has("value") || t.has("required") || t.has("error") || this.stringsChanged(t)) {
+      $(this.internals, this.value === null ? null : String(this.value));
+      const e = this.required && this.value === null;
+      k(
+        this.internals,
+        { valueMissing: e, customError: !!this.error },
+        this.error || (e ? m().numberRequired : "")
+      );
+    }
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  formDisabledCallback(t) {
+    this.formDisabled = t;
+  }
+  formStateRestoreCallback(t) {
+    this.value = t === null || t === "" ? null : Number(t);
+  }
+  focus(t) {
+    this.input?.focus(t);
+  }
+  get resolvedLocale() {
+    return F(this.locale);
+  }
+  get inactive() {
+    return this.disabled || this.formDisabled;
+  }
+  /** `n` within bounds and on the step, counted from `min` when it has one. */
+  clamp(t) {
+    const e = this.step > 0 ? this.step : 1, a = Number.isFinite(this.min) ? this.min : 0, s = a + Math.round((t - a) / e) * e, l = Math.max(d(e), d(a));
+    return Number(Math.min(this.max, Math.max(this.min, s)).toFixed(l));
+  }
+  commit(t) {
+    const e = t === null ? null : this.clamp(t);
+    this.input && (this.input.value = this.text(e)), e !== this.value && (this.value = e, N(this, "kt-change", { value: e }));
+  }
+  /** The text for `value`: plain while typing, the locale's format at rest. */
+  text(t) {
+    if (t === null) return "";
+    const e = Math.max(d(this.step), d(this.min));
+    if (this.focused) {
+      const s = this.percent ? t * 100 : t;
+      return new Intl.NumberFormat(this.resolvedLocale, {
+        maximumFractionDigits: 20,
+        useGrouping: !1
+      }).format(Number(s.toPrecision(15)));
+    }
+    const a = this.formatOptions.minimumFractionDigits ?? 0;
+    return new Intl.NumberFormat(this.resolvedLocale, {
+      maximumFractionDigits: Math.max(e, 3, a),
+      ...this.formatOptions
+    }).format(t);
+  }
+  /** Shown as a percentage: what is typed is on a scale of a hundred. */
+  get percent() {
+    return this.formatOptions.style === "percent";
+  }
+  stepBy(t) {
+    if (this.inactive) return;
+    const e = this.value ?? (Number.isFinite(this.min) ? this.min : 0);
+    this.commit(this.value === null ? e : e + t * this.step);
+  }
+  onKeyDown(t) {
+    const a = {
+      ArrowUp: () => this.stepBy(1),
+      ArrowDown: () => this.stepBy(-1),
+      PageUp: () => this.stepBy(10),
+      PageDown: () => this.stepBy(-10),
+      Home: () => Number.isFinite(this.min) && this.commit(this.min),
+      End: () => Number.isFinite(this.max) && this.commit(this.max),
+      Enter: () => this.readTyped()
+    }[t.key];
+    a && (t.preventDefault(), a());
+  }
+  /** What was typed, read; text that is no number puts back what it had. */
+  readTyped() {
+    const t = this.input.value.trim();
+    if (t === "") {
+      this.commit(null);
+      return;
+    }
+    const e = D(t, this.resolvedLocale, this.percent);
+    if (Number.isNaN(e)) {
+      this.input.value = this.text(this.value);
+      return;
+    }
+    this.commit(e);
+  }
+  onFocus() {
+    this.focused = !0, this.input.value = this.text(this.value);
+  }
+  onBlur() {
+    this.readTyped(), this.focused = !1, this.input.value = this.text(this.value);
+  }
+  render() {
+    const t = m(), e = this.inactive, a = this.value !== null && this.value <= this.min, s = this.value !== null && this.value >= this.max, l = this.text(this.value);
+    return p`${this.error ? p`<span id=${this.errorId} class="visually-hidden">${this.error}</span>` : u}
+      <div
+        part="field"
+        class=${y({ field: !0, error: !!this.error, disabled: e })}
+      >
+        <button
+          part="decrease"
+          class="minus"
+          type="button"
+          tabindex="-1"
+          aria-label=${t.decrease}
+          ?disabled=${e || a}
+          @click=${() => this.stepBy(-1)}
+        >
+          <kt-icon name="minus" size="16"></kt-icon>
+        </button>
+        <input
+          part="input"
+          type="text"
+          role="spinbutton"
+          inputmode="decimal"
+          autocomplete="off"
+          .value=${l}
+          placeholder=${this.placeholder || u}
+          aria-label=${this.label || u}
+          aria-valuenow=${this.value ?? u}
+          aria-valuetext=${this.value === null ? u : l}
+          aria-valuemin=${Number.isFinite(this.min) ? this.min : u}
+          aria-valuemax=${Number.isFinite(this.max) ? this.max : u}
+          aria-invalid=${this.error ? "true" : u}
+          aria-describedby=${this.error ? this.errorId : u}
+          aria-required=${this.required ? "true" : u}
+          ?disabled=${e}
+          @keydown=${this.onKeyDown}
+          @focus=${this.onFocus}
+          @blur=${this.onBlur}
+        />
+        <button
+          part="increase"
+          class="plus"
+          type="button"
+          tabindex="-1"
+          aria-label=${t.increase}
+          ?disabled=${e || s}
+          @click=${() => this.stepBy(1)}
+        >
+          <kt-icon name="plus" size="16"></kt-icon>
+        </button>
+      </div>`;
+  }
+}
+r([
+  o({
+    converter: {
+      fromAttribute: (n) => {
+        const t = n === null || n.trim() === "" ? NaN : Number(n);
+        return Number.isFinite(t) ? t : null;
+      }
+    }
+  })
+], i.prototype, "value");
+r([
+  o({ type: Number })
+], i.prototype, "min");
+r([
+  o({ type: Number })
+], i.prototype, "max");
+r([
+  o({ type: Number })
+], i.prototype, "step");
+r([
+  o({ type: String })
+], i.prototype, "name");
+r([
+  o({ type: String })
+], i.prototype, "label");
+r([
+  o({ type: String })
+], i.prototype, "locale");
+r([
+  o({ type: String })
+], i.prototype, "placeholder");
+r([
+  o({ type: String, reflect: !0 })
+], i.prototype, "size");
+r([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+r([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "required");
+r([
+  o({ type: String, reflect: !0 })
+], i.prototype, "error");
+r([
+  o({ attribute: !1 })
+], i.prototype, "formatOptions");
+r([
+  f()
+], i.prototype, "focused");
+r([
+  f()
+], i.prototype, "formDisabled");
+r([
+  v("input")
+], i.prototype, "input");
+g("kt-number-input", i);
+export {
+  i as KtNumberInput,
+  D as parseLocaleNumber
+};
+//# sourceMappingURL=kt-number-input.js.map

package/dist/components/forms/kt-number-input/kt-number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-number-input.js","sources":["../../../../src/components/forms/kt-number-input/kt-number-input.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit, uniqueId } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport { resolveLocale } from '#internal/locale';\nimport { strings } from '#internal/strings';\nimport { decimalsOf } from '#internal/numbers';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtNumberInputSize = 'small' | 'medium' | 'large';\n\n/** How `locale` writes a number: its group and decimal separators. */\nfunction separators(locale: string): { group: string; decimal: string } {\n  const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);\n  return {\n    group: parts.find((part) => part.type === 'group')?.value ?? ',',\n    decimal: parts.find((part) => part.type === 'decimal')?.value ?? '.',\n  };\n}\n\n/**\n * A number typed the way `locale` writes one, or NaN. \"1 234,5\" in French is\n * 1234.5; \"−20\" with a true minus sign is -20; a percent sign is dropped, and\n * `percent` divides by a hundred. Text holding letters is no number: it is\n * turned down rather than guessed at.\n */\nexport function parseLocaleNumber(text: string, locale: string, percent = false): number {\n  const { group, decimal } = separators(locale);\n  const plain = text\n    // Bidi marks around a number in Arabic or Hebrew text.\n    .replace(/[\\u200e\\u200f\\u061c]/g, '')\n    // Minus signs other than the hyphen: Swedish and Finnish write U+2212.\n    .replace(/[\\u2212\\u2012\\u2013\\u2014]/g, '-')\n    .replace(/\\s/g, '')\n    .split(group)\n    .join('')\n    .replace(decimal, '.')\n    .replace(/[%\\p{Sc}]/gu, '');\n  if (!/^[+-]?(\\d+\\.?\\d*|\\.\\d+)$/.test(plain)) return NaN;\n  const n = Number(plain);\n  return percent ? n / 100 : n;\n}\n\n/**\n * A number field with − and + beside it: a quantity, a seat count, an amount.\n *\n * Type a number the way your language writes one — \"1 234,5\" in French — or\n * step it with the buttons, the arrows (Page Up and Down by ten steps, Home\n * and End to the bounds). It is kept within `min` and `max` and on `step`\n * when the field is left. At rest it reads as the locale writes it, through\n * `formatOptions` — a currency, a percentage, a unit.\n *\n * @element kt-number-input\n *\n * @csspart field - The field.\n * @csspart input - The text field.\n * @csspart decrease - The − button.\n * @csspart increase - The + button.\n *\n * @fires kt-change - The value changed. `detail: { value }`, a number or null.\n *\n * @example\n * ```html\n * <kt-number-input label=\"Seats\" min=\"1\" max=\"50\" value=\"5\"></kt-number-input>\n * ```\n */\nexport class KtNumberInput extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        --field-height: var(--button-height);\n      }\n      :host([size='small']) {\n        --field-height: var(--button-height-small);\n      }\n      :host([size='large']) {\n        --field-height: var(--button-height-large);\n      }\n\n      .field {\n        display: flex;\n        align-items: center;\n        height: var(--field-height);\n        background-color: var(--surface-field);\n        border: var(--border-width) solid var(--border-field);\n        border-radius: var(--radius-input);\n        outline: var(--outline-width) solid transparent;\n        transition: outline-color var(--duration-instant);\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      .field.error,\n      .field.error:hover,\n      .field.error:focus-within {\n        outline: var(--outline-width) solid var(--color-danger-base);\n      }\n      .field.disabled {\n        background-color: var(--color-dark-14);\n        pointer-events: none;\n      }\n\n      input {\n        flex: 1;\n        min-width: 0;\n        height: 100%;\n        padding: 0 4px;\n        color: var(--text-body);\n        font: var(--font-input);\n        font-variant-numeric: tabular-nums;\n        text-align: center;\n        background: transparent;\n        border: none;\n        outline: none;\n      }\n      .disabled input {\n        color: var(--text-disabled);\n      }\n\n      button {\n        display: inline-grid;\n        flex: none;\n        place-items: center;\n        width: var(--field-height);\n        height: 100%;\n        padding: 0;\n        color: var(--text-muted);\n        background: none;\n        border: none;\n        cursor: pointer;\n        transition:\n          color var(--duration-instant),\n          background-color var(--duration-instant);\n      }\n      button:hover:not(:disabled) {\n        color: var(--text-body);\n        background: var(--surface-hover);\n      }\n      .minus {\n        border-radius: calc(var(--radius-input) - 1px) 0 0 calc(var(--radius-input) - 1px);\n      }\n      .plus {\n        border-radius: 0 calc(var(--radius-input) - 1px) calc(var(--radius-input) - 1px) 0;\n      }\n      button:disabled {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      .visually-hidden {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n      }\n      button:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: -2px;\n      }\n    `,\n  ];\n\n  /** The number, or null while empty. An attribute that is no number reads as empty. */\n  @property({\n    converter: {\n      fromAttribute: (text: string | null) => {\n        const n = text === null || text.trim() === '' ? NaN : Number(text);\n        return Number.isFinite(n) ? n : null;\n      },\n    },\n  })\n  value: number | null = null;\n\n  @property({ type: Number })\n  min = Number.NEGATIVE_INFINITY;\n\n  @property({ type: Number })\n  max = Number.POSITIVE_INFINITY;\n\n  @property({ type: Number })\n  step = 1;\n\n  @property({ type: String })\n  name = '';\n\n  /** Accessible name, when no `<kt-label-input>` wraps it. */\n  @property({ type: String })\n  label = '';\n\n  /** BCP 47 locale for reading and writing numbers. Empty: page, then browser. */\n  @property({ type: String })\n  locale = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String, reflect: true })\n  size: KtNumberInputSize = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = 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  /** How the number reads at rest: `{ style: 'currency', currency: 'EUR' }`. */\n  @property({ attribute: false })\n  formatOptions: Intl.NumberFormatOptions = {};\n\n  @state() private focused = false;\n  @state() private formDisabled = false;\n\n  @query('input') private input!: HTMLInputElement;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: number | null = null;\n  private readonly errorId = uniqueId('kt-number-error');\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.value = this.value === null ? null : this.clamp(this.value);\n    this.defaultValue = this.value;\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      this.stringsChanged(changed)\n    ) {\n      setFormValue(this.internals, this.value === null ? null : String(this.value));\n      const missing = this.required && this.value === null;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? strings().numberRequired : ''),\n      );\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    this.value = state === null || state === '' ? null : Number(state);\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.input?.focus(options);\n  }\n\n  private get resolvedLocale(): string {\n    return resolveLocale(this.locale);\n  }\n\n  private get inactive(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  /** `n` within bounds and on the step, counted from `min` when it has one. */\n  private clamp(n: number): number {\n    const step = this.step > 0 ? this.step : 1;\n    const origin = Number.isFinite(this.min) ? this.min : 0;\n    const snapped = origin + Math.round((n - origin) / step) * step;\n    // Decimals of the step and of the origin: min 0.5 with step 1 lands on 1.5.\n    const decimals = Math.max(decimalsOf(step), decimalsOf(origin));\n    return Number(Math.min(this.max, Math.max(this.min, snapped)).toFixed(decimals));\n  }\n\n  private commit(next: number | null): void {\n    const value = next === null ? null : this.clamp(next);\n    if (this.input) this.input.value = this.text(value);\n    if (value === this.value) return;\n    this.value = value;\n    emit(this, 'kt-change', { value });\n  }\n\n  /** The text for `value`: plain while typing, the locale's format at rest. */\n  private text(value: number | null): string {\n    if (value === null) return '';\n    const decimals = Math.max(decimalsOf(this.step), decimalsOf(this.min));\n    if (this.focused) {\n      // The plain number to edit, on the scale it is shown at: 50 for 50%.\n      const shown = this.percent ? value * 100 : value;\n      return new Intl.NumberFormat(this.resolvedLocale, {\n        maximumFractionDigits: 20,\n        useGrouping: false,\n      }).format(Number(shown.toPrecision(15)));\n    }\n    const minimum = this.formatOptions.minimumFractionDigits ?? 0;\n    return new Intl.NumberFormat(this.resolvedLocale, {\n      maximumFractionDigits: Math.max(decimals, 3, minimum),\n      ...this.formatOptions,\n    }).format(value);\n  }\n\n  /** Shown as a percentage: what is typed is on a scale of a hundred. */\n  private get percent(): boolean {\n    return this.formatOptions.style === 'percent';\n  }\n\n  private stepBy(steps: number): void {\n    if (this.inactive) return;\n    const from = this.value ?? (Number.isFinite(this.min) ? this.min : 0);\n    this.commit(this.value === null ? from : from + steps * this.step);\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    const moves: Record<string, () => void> = {\n      ArrowUp: () => this.stepBy(1),\n      ArrowDown: () => this.stepBy(-1),\n      PageUp: () => this.stepBy(10),\n      PageDown: () => this.stepBy(-10),\n      Home: () => Number.isFinite(this.min) && this.commit(this.min),\n      End: () => Number.isFinite(this.max) && this.commit(this.max),\n      Enter: () => this.readTyped(),\n    };\n    const move = moves[event.key];\n    if (!move) return;\n    event.preventDefault();\n    move();\n  }\n\n  /** What was typed, read; text that is no number puts back what it had. */\n  private readTyped(): void {\n    const typed = this.input.value.trim();\n    if (typed === '') {\n      this.commit(null);\n      return;\n    }\n    const parsed = parseLocaleNumber(typed, this.resolvedLocale, this.percent);\n    if (Number.isNaN(parsed)) {\n      this.input.value = this.text(this.value);\n      return;\n    }\n    this.commit(parsed);\n  }\n\n  private onFocus(): void {\n    this.focused = true;\n    this.input.value = this.text(this.value);\n  }\n\n  private onBlur(): void {\n    this.readTyped();\n    this.focused = false;\n    this.input.value = this.text(this.value);\n  }\n\n  override render(): TemplateResult {\n    const s = strings();\n    const inactive = this.inactive;\n    const atMin = this.value !== null && this.value <= this.min;\n    const atMax = this.value !== null && this.value >= this.max;\n    const shown = this.text(this.value);\n\n    return html`${\n        this.error\n          ? html`<span id=${this.errorId} class=\"visually-hidden\">${this.error}</span>`\n          : nothing\n      }\n      <div\n        part=\"field\"\n        class=${classMap({ field: true, error: Boolean(this.error), disabled: inactive })}\n      >\n        <button\n          part=\"decrease\"\n          class=\"minus\"\n          type=\"button\"\n          tabindex=\"-1\"\n          aria-label=${s.decrease}\n          ?disabled=${inactive || atMin}\n          @click=${() => this.stepBy(-1)}\n        >\n          <kt-icon name=\"minus\" size=\"16\"></kt-icon>\n        </button>\n        <input\n          part=\"input\"\n          type=\"text\"\n          role=\"spinbutton\"\n          inputmode=\"decimal\"\n          autocomplete=\"off\"\n          .value=${shown}\n          placeholder=${this.placeholder || nothing}\n          aria-label=${this.label || nothing}\n          aria-valuenow=${this.value ?? nothing}\n          aria-valuetext=${this.value === null ? nothing : shown}\n          aria-valuemin=${Number.isFinite(this.min) ? this.min : nothing}\n          aria-valuemax=${Number.isFinite(this.max) ? this.max : nothing}\n          aria-invalid=${this.error ? 'true' : nothing}\n          aria-describedby=${this.error ? this.errorId : nothing}\n          aria-required=${this.required ? 'true' : nothing}\n          ?disabled=${inactive}\n          @keydown=${this.onKeyDown}\n          @focus=${this.onFocus}\n          @blur=${this.onBlur}\n        />\n        <button\n          part=\"increase\"\n          class=\"plus\"\n          type=\"button\"\n          tabindex=\"-1\"\n          aria-label=${s.increase}\n          ?disabled=${inactive || atMax}\n          @click=${() => this.stepBy(1)}\n        >\n          <kt-icon name=\"plus\" size=\"16\"></kt-icon>\n        </button>\n      </div>`;\n  }\n}\n\ndefineElement('kt-number-input', KtNumberInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-number-input': KtNumberInput;\n  }\n}\n"],"names":["separators","locale","parts","part","parseLocaleNumber","text","percent","group","decimal","plain","n","KtNumberInput","KtElement","uniqueId","css","attachFormInternals","changed","setFormValue","missing","setValidity","strings","disabled","state","options","resolveLocale","step","origin","snapped","decimals","decimalsOf","next","value","emit","shown","minimum","steps","from","event","move","typed","parsed","s","inactive","atMin","atMax","html","nothing","classMap","__decorateClass","property","query","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-radio-group/kt-radio-group.js

@@ -1,9 +1,9 @@
 import { css as f, nothing as d, html as p } from "lit";
 import { property as i, queryAssignedElements as y, state as g } from "lit/decorators.js";
-import { K as u, d as v } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as u, d as v } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as m } from "../../../chunks/events-r51msXNf.js";
 import { a as k, s as w, b as x } from "../../../chunks/form-control-B74_EHtG.js";
-import { s as b } from "../../../chunks/index-TWJzttLX.js";
+import { s as b } from "../../../chunks/index-BEWmAE0T.js";
 var D = Object.defineProperty, a = (c, e, t, l) => {
   for (var r = void 0, o = c.length - 1, h; o >= 0; o--)
     (h = c[o]) && (r = h(e, t, r) || r);

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

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

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

@@ -0,0 +1,69 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+/**
+ * A value picked by sliding along a range: a volume, a threshold, or with
+ * `range`, a price between two ends.
+ *
+ * Each thumb is a native `<input type="range">`, so the keyboard — arrows,
+ * Page Up and Down, Home and End — and what a screen reader announces come
+ * from the platform. The value is text, like a form field's: `"40"`, or
+ * `"20/80"` with `range`, low then high. It is kept within `min` and `max`
+ * and on `step`, and two thumbs never cross.
+ *
+ * @element kt-slider
+ *
+ * @csspart track - The rail.
+ * @csspart fill - The selected stretch of it.
+ * @csspart value - The shown value, with `show-value`.
+ *
+ * @fires kt-input - While sliding. `detail: { value }`.
+ * @fires kt-change - Once let go. `detail: { value }`.
+ *
+ * @example
+ * ```html
+ * <kt-slider label="Volume" value="40" show-value></kt-slider>
+ * <kt-slider label="Price" range min="0" max="500" step="10" value="50/300"></kt-slider>
+ * ```
+ */
+export declare class KtSlider extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    /** `"40"`, or `"20/80"` with `range`. Kept within bounds and on the step. */
+    value: string;
+    min: number;
+    max: number;
+    step: number;
+    /** Two thumbs: a low and a high end. */
+    range: boolean;
+    /** Accessible name; shown above the slider with `show-value`. */
+    label: string;
+    name: string;
+    disabled: boolean;
+    /** Shows the label and the current value above the slider. */
+    showValue: boolean;
+    /** How a number is shown and announced: `(n) => \`$${n}\``. */
+    format: (value: number) => string;
+    private formDisabled;
+    private internals;
+    private defaultValue;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | null): void;
+    /** The thumbs' numbers: one, or low and high. */
+    private get numbers();
+    /** `n` within bounds and on the step. */
+    private snap;
+    private normalised;
+    /** A thumb moved: the low one cannot pass the high one, nor the other way. */
+    private onSlide;
+    private percent;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-slider': KtSlider;
+    }
+}