kanto-ds 1.7.0 → 1.9.0

package/dist/components/forms/kt-number-input/kt-number-input.d.ts

@@ -0,0 +1,92 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export type KtNumberInputSize = 'small' | 'medium' | 'large';
+/**
+ * A number typed the way `locale` writes one, or NaN. "1 234,5" in French is
+ * 1234.5; "−20" with a true minus sign is -20; a percent sign is dropped, and
+ * `percent` divides by a hundred. Text holding letters is no number: it is
+ * turned down rather than guessed at.
+ */
+export declare function parseLocaleNumber(text: string, locale: string, percent?: boolean): number;
+/**
+ * A number field with − and + beside it: a quantity, a seat count, an amount.
+ *
+ * Type a number the way your language writes one — "1 234,5" in French — or
+ * step it with the buttons, the arrows (Page Up and Down by ten steps, Home
+ * and End to the bounds). It is kept within `min` and `max` and on `step`
+ * when the field is left. At rest it reads as the locale writes it, through
+ * `formatOptions` — a currency, a percentage, a unit.
+ *
+ * @element kt-number-input
+ *
+ * @csspart field - The field.
+ * @csspart input - The text field.
+ * @csspart decrease - The − button.
+ * @csspart increase - The + button.
+ *
+ * @fires kt-change - The value changed. `detail: { value }`, a number or null.
+ *
+ * @example
+ * ```html
+ * <kt-number-input label="Seats" min="1" max="50" value="5"></kt-number-input>
+ * ```
+ */
+export declare class KtNumberInput extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    /** The number, or null while empty. An attribute that is no number reads as empty. */
+    value: number | null;
+    min: number;
+    max: number;
+    step: number;
+    name: string;
+    /** Accessible name, when no `<kt-label-input>` wraps it. */
+    label: string;
+    /** BCP 47 locale for reading and writing numbers. Empty: page, then browser. */
+    locale: string;
+    placeholder: string;
+    size: KtNumberInputSize;
+    disabled: boolean;
+    required: boolean;
+    /** Error message. A non-empty value puts the field in its error state. */
+    error: string;
+    /** How the number reads at rest: `{ style: 'currency', currency: 'EUR' }`. */
+    formatOptions: Intl.NumberFormatOptions;
+    private focused;
+    private formDisabled;
+    private input;
+    private internals;
+    private defaultValue;
+    private readonly errorId;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | null): void;
+    focus(options?: FocusOptions): void;
+    private get resolvedLocale();
+    private get inactive();
+    /** `n` within bounds and on the step, counted from `min` when it has one. */
+    private clamp;
+    private commit;
+    /** The text for `value`: plain while typing, the locale's format at rest. */
+    private text;
+    /** Shown as a percentage: what is typed is on a scale of a hundred. */
+    private get percent();
+    /** Which way the last step went, for the number to roll that way: 1, -1 or 0. */
+    private rolling;
+    private stepBy;
+    updated(changed: PropertyValues<this>): void;
+    private onKeyDown;
+    /** What was typed, read; text that is no number puts back what it had. */
+    private readTyped;
+    private onFocus;
+    private onBlur;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-number-input': KtNumberInput;
+    }
+}

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

@@ -0,0 +1,366 @@
+import { css as b, nothing as u, html as d } 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-DvWtPQ1Y.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-1ZFgagWW.js";
+import { d as p } from "../../../chunks/numbers-QyecMiSJ.js";
+import { p as I } from "../../../chunks/motion-ChVUUO7O.js";
+import "../../core/kt-icon/kt-icon.js";
+var B = Object.defineProperty, s = (n, t, e, r) => {
+  for (var a = void 0, l = n.length - 1, h; l >= 0; l--)
+    (h = n[l]) && (a = h(t, e, a) || a);
+  return a && B(t, e, a), a;
+};
+function D(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 M(n, t, e = !1) {
+  const { group: r, decimal: a } = D(t), l = n.replace(/[\u200e\u200f\u061c]/g, "").replace(/[\u2212\u2012\u2013\u2014]/g, "-").replace(/\s/g, "").split(r).join("").replace(a, ".").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"), this.rolling = 0;
+  }
+  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);
+        /* Keeps a rolling number inside the field. */
+        overflow: clip;
+        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, r = Number.isFinite(this.min) ? this.min : 0, a = r + Math.round((t - r) / e) * e, l = Math.max(p(e), p(r));
+    return Number(Math.min(this.max, Math.max(this.min, a)).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(p(this.step), p(this.min));
+    if (this.focused) {
+      const a = this.percent ? t * 100 : t;
+      return new Intl.NumberFormat(this.resolvedLocale, {
+        maximumFractionDigits: 20,
+        useGrouping: !1
+      }).format(Number(a.toPrecision(15)));
+    }
+    const r = this.formatOptions.minimumFractionDigits ?? 0;
+    return new Intl.NumberFormat(this.resolvedLocale, {
+      maximumFractionDigits: Math.max(e, 3, r),
+      ...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, r = e ?? (Number.isFinite(this.min) ? this.min : 0);
+    this.commit(e === null ? r : r + t * this.step), e !== null && this.value !== null && this.value !== e && (this.rolling = Math.sign(this.value - e));
+  }
+  updated(t) {
+    if (super.updated(t), !this.rolling) return;
+    const e = `${this.rolling * 0.6}em`;
+    this.rolling = 0, I(
+      this.renderRoot.querySelector("input"),
+      [
+        { translate: `0 ${e}`, opacity: 0 },
+        { translate: "0 0", opacity: 1 }
+      ],
+      "--duration-fast",
+      "kt-number-roll"
+    );
+  }
+  onKeyDown(t) {
+    const r = {
+      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];
+    r && (t.preventDefault(), r());
+  }
+  /** 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 = M(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, r = this.value !== null && this.value <= this.min, a = this.value !== null && this.value >= this.max, l = this.text(this.value);
+    return d`${this.error ? d`<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 || r}
+          @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 || a}
+          @click=${() => this.stepBy(1)}
+        >
+          <kt-icon name="plus" size="16"></kt-icon>
+        </button>
+      </div>`;
+  }
+}
+s([
+  o({
+    converter: {
+      fromAttribute: (n) => {
+        const t = n === null || n.trim() === "" ? NaN : Number(n);
+        return Number.isFinite(t) ? t : null;
+      }
+    }
+  })
+], i.prototype, "value");
+s([
+  o({ type: Number })
+], i.prototype, "min");
+s([
+  o({ type: Number })
+], i.prototype, "max");
+s([
+  o({ type: Number })
+], i.prototype, "step");
+s([
+  o({ type: String })
+], i.prototype, "name");
+s([
+  o({ type: String })
+], i.prototype, "label");
+s([
+  o({ type: String })
+], i.prototype, "locale");
+s([
+  o({ type: String })
+], i.prototype, "placeholder");
+s([
+  o({ type: String, reflect: !0 })
+], i.prototype, "size");
+s([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+s([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "required");
+s([
+  o({ type: String, reflect: !0 })
+], i.prototype, "error");
+s([
+  o({ attribute: !1 })
+], i.prototype, "formatOptions");
+s([
+  f()
+], i.prototype, "focused");
+s([
+  f()
+], i.prototype, "formDisabled");
+s([
+  v("input")
+], i.prototype, "input");
+g("kt-number-input", i);
+export {
+  i as KtNumberInput,
+  M 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 { play } from '#internal/motion';\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        /* Keeps a rolling number inside the field. */\n        overflow: clip;\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  /** Which way the last step went, for the number to roll that way: 1, -1 or 0. */\n  private rolling = 0;\n\n  private stepBy(steps: number): void {\n    if (this.inactive) return;\n    const before = this.value;\n    const from = before ?? (Number.isFinite(this.min) ? this.min : 0);\n    this.commit(before === null ? from : from + steps * this.step);\n    if (before !== null && this.value !== null && this.value !== before) {\n      this.rolling = Math.sign(this.value - before);\n    }\n  }\n\n  override updated(changed: PropertyValues<this>): void {\n    super.updated(changed);\n    if (!this.rolling) return;\n    // Up as it grows, the new number coming from below; down as it shrinks.\n    const offset = `${this.rolling * 0.6}em`;\n    this.rolling = 0;\n    play(\n      this.renderRoot.querySelector('input')!,\n      [\n        { translate: `0 ${offset}`, opacity: 0 },\n        { translate: '0 0', opacity: 1 },\n      ],\n      '--duration-fast',\n      'kt-number-roll',\n    );\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","before","from","offset","play","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-otp-input/kt-otp-input.d.ts

@@ -0,0 +1,74 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtOtpInputType = 'numeric' | 'alphanumeric';
+/**
+ * A one-time code — the six digits of a sign-in, a verification, a
+ * second factor — one box per character.
+ *
+ * Typing moves to the next box, Backspace from an empty box steps back and
+ * clears the one before, the arrows move between boxes, and a pasted code is
+ * spread over them. The first box asks the browser for `one-time-code`, so a
+ * code that arrived by text message fills itself in. `kt-complete` fires when
+ * the code is whole.
+ *
+ * A form control: submitted under `name`, `required` until whole, reset with
+ * the form.
+ *
+ * @element kt-otp-input
+ *
+ * @csspart group - The boxes.
+ * @csspart box - One box.
+ * @csspart error - The error message.
+ *
+ * @fires kt-change - The code changed. `detail: { value }`.
+ * @fires kt-complete - The code is whole. `detail: { value }`.
+ *
+ * @example
+ * ```html
+ * <kt-otp-input label="Verification code" name="code" required></kt-otp-input>
+ * ```
+ */
+export declare class KtOtpInput extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    /** The code so far. */
+    value: string;
+    /** How many characters the code has. */
+    length: number;
+    /** `numeric` takes digits; `alphanumeric` letters and digits, in capitals. */
+    type: KtOtpInputType;
+    /** Accessible name for the group: "Verification code". */
+    label: string;
+    name: string;
+    required: boolean;
+    disabled: boolean;
+    /** An error to show and announce under the boxes. */
+    error: string;
+    private formDisabled;
+    private boxes;
+    private internals;
+    private defaultValue;
+    private readonly errorId;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | null): void;
+    focus(options?: FocusOptions): void;
+    private get inactive();
+    /** What the code may hold: digits, or letters and digits in capitals, and no more than `length`. */
+    private clean;
+    private box;
+    /** Sets the code, says so, and says when it is whole. */
+    private commit;
+    private onInput;
+    private onKeyDown;
+    private onPaste;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-otp-input': KtOtpInput;
+    }
+}