kanto-ds 1.5.2 → 1.6.0

package/dist/internal/segmented-field.d.ts

@@ -0,0 +1,114 @@
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from './kt-element.js';
+import { type UsableInternals } from './form-control.js';
+import { type SegmentSpec } from './segments.js';
+/** One part of a segmented field: a number typed digit by digit, or one of a few words. */
+export interface Segment {
+    readonly key: string;
+    readonly label: string;
+    /** What the segment shows while empty: "dd", "--". */
+    readonly placeholder: string;
+    /** A number, typed and stepped within these bounds… */
+    readonly spec?: SegmentSpec;
+    /** …stepped by this much with the arrows… */
+    readonly step?: number;
+    /** …or one of these words, picked by its first letter: AM, PM. */
+    readonly choices?: readonly string[];
+}
+/** What a segmented field is made of: segments, and the characters between them. */
+export type FieldItem = Segment | {
+    readonly literal: string;
+};
+export type KtSegmentedFieldSize = 'small' | 'medium' | 'large';
+/**
+ * The common ground of `<kt-date-input>` and `<kt-time-input>`: a field of
+ * segments — a day, a month, an hour — each its own spinbutton, typed digit by
+ * digit, stepped with the arrows, the focus moving on as each fills.
+ *
+ * Each segment is `contenteditable`, so a phone shows its number pad, but the
+ * text never changes behind the field's back: every keystroke and every input
+ * event is turned into the segment's new value here. A subclass says what its
+ * segments are, how they read into a value, and how a value fills them.
+ */
+export declare abstract class KtSegmentedField extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    protected internals: UsableInternals | null;
+    private defaultValue;
+    /** Set while the field writes its own value, which should not refill it. */
+    private committing;
+    protected readonly errorId: string;
+    /** What each segment holds, by key: digits, or the index of a choice. */
+    protected texts: Record<string, string>;
+    /** Why the segments do not make a value, when they are all filled. */
+    protected typedError: string;
+    private focusedKey;
+    /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */
+    private formDisabled;
+    value: string | null;
+    name: string;
+    /** Accessible name of the field, when no `<kt-label-input>` wraps it. */
+    label: string;
+    /** BCP 47 locale for the order and names of the segments. Empty: page, then browser. */
+    locale: string;
+    min: string;
+    max: string;
+    size: KtSegmentedFieldSize;
+    disabled: boolean;
+    required: boolean;
+    /** Error message. A non-empty value puts the field in its error state. */
+    error: string;
+    /** The segments, in order, with what goes between them. */
+    protected abstract items(): FieldItem[];
+    /** What each segment holds for a value. */
+    protected abstract fill(value: string | null): Record<string, string>;
+    /** The value the segments make — null until they all hold something — and why not, if not. */
+    protected abstract read(texts: Record<string, string>): {
+        value: string | null;
+        error: string;
+    };
+    /** The message of a required field left empty. */
+    protected abstract requiredMessage(): string;
+    /** Anything after the segments: a calendar button. */
+    protected renderAfter(): TemplateResult | typeof nothing;
+    /**
+     * What a segment left half-typed becomes when the focus leaves it — a
+     * two-digit year written out — or null to leave it as typed.
+     */
+    protected completeOnBlur(_segment: Segment, _text: string): string | null;
+    /** Whether a popup belonging to the field is open, for the field's outline. */
+    protected get expanded(): boolean;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    /**
+     * Called by the platform when the control's disabled state changes — its
+     * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /** Called by the platform when the browser restores a session. */
+    formStateRestoreCallback(state: string | null): void;
+    /** Focuses the first segment. */
+    focus(options?: FocusOptions): void;
+    protected get inactive(): boolean;
+    protected get resolvedLocale(): string;
+    /** Sets a value chosen outside the segments — a day picked in a calendar. */
+    protected commitValue(value: string | null): void;
+    private setText;
+    private apply;
+    private segmentElements;
+    private focusSegment;
+    /** One key's effect on a segment; true when the key was the field's to handle. */
+    private applyKey;
+    private onKeyDown;
+    /**
+     * What a phone's keyboard sends: input events rather than key presses.
+     * The text is never left to the browser; each character goes through the
+     * same path as a key.
+     */
+    private onBeforeInput;
+    /** A click on the field's padding or separators lands in its first empty segment. */
+    private onFieldClick;
+    private renderSegment;
+    render(): TemplateResult;
+}

package/dist/internal/segments.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The arithmetic of a segmented field — a day, a month, a year, an hour —
+ * each typed digit by digit and stepped with the arrows. Pure, so the two
+ * fields that share it, `<kt-date-input>` and `<kt-time-input>`, agree on
+ * every key.
+ */
+export interface SegmentSpec {
+    readonly min: number;
+    readonly max: number;
+    /** Digits when full: 2 for a day, 4 for a year. */
+    readonly length: number;
+}
+/**
+ * The segment's text once `digit` is typed, and whether the focus should move
+ * on. It moves on when the segment is full, or as soon as no further digit
+ * could follow — a day starting with 4 is the 4th. A digit that would
+ * overshoot the maximum, or one typed into a full segment, starts it over.
+ */
+export declare function typeDigit(current: string, digit: string, spec: SegmentSpec): {
+    text: string;
+    advance: boolean;
+};
+/**
+ * The value an arrow press lands on: the next multiple of the step — counted
+ * from the minimum — in the direction of `by`, wrapping past either end. An
+ * empty segment starts from its first value going up, its last going down.
+ */
+export declare function stepSegment(value: number | null, by: number, spec: SegmentSpec): number;
+/** A value written with the segment's leading zeros: 4 → "04". */
+export declare function padSegment(value: number, spec: SegmentSpec): string;

package/dist/internal/strings.d.ts

@@ -49,6 +49,8 @@ export interface KtStrings {
     searchCountry: string;
     noCountry: string;
     countryCode: (country: string | undefined) => string;
+    /** How many values a multi-select holds, for a screen reader. */
+    selectedCount: (count: number) => string;
     dragAndDrop: string;
     browseFiles: string;
     recommendedSize: (size: string) => string;
@@ -71,6 +73,34 @@ export interface KtStrings {
     /** A required checkbox left unchecked. */
     checkRequired: string;
     dateRequired: string;
+    /** A typed date that does not read as one; `example` is today, written the reader's way. */
+    dateInvalid: (example: string) => string;
+    /** A typed date outside the field's min and max. */
+    dateOutOfRange: string;
+    /** The date field's button that opens its calendar. */
+    openCalendar: string;
+    /** The date picker's ready-made periods, and the button for today. */
+    presetToday: string;
+    presetLast7Days: string;
+    presetLast30Days: string;
+    presetThisMonth: string;
+    presetLastMonth: string;
+    presetThisYear: string;
+    /** The segments of the date and time inputs: their names, then what an empty one shows. */
+    segmentDay: string;
+    segmentMonth: string;
+    segmentYear: string;
+    segmentHour: string;
+    segmentMinute: string;
+    segmentSecond: string;
+    segmentDayPeriod: string;
+    placeholderDay: string;
+    placeholderMonth: string;
+    placeholderYear: string;
+    placeholderTime: string;
+    /** A required time left empty, and one outside min and max. */
+    timeRequired: string;
+    timeOutOfRange: string;
     /** A phone number typed with the prefix only dialled from inside the country. */
     phoneTrunkPrefix: (prefix: string) => string;
     openMenu: string;

package/dist/internal/typed-date.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Reading a date someone typed, in their language.
+ *
+ * A field that only opens a calendar makes a date ten years away, or one
+ * already on paper, a chore. Typed, it is a second's work — if the field reads
+ * it the way the person writes it: day then month in London, month then day in
+ * New York, month names in their own words, the year left out when it is this
+ * one.
+ */
+import { type PlainDate } from './date.js';
+/**
+ * How the language writes a date in numbers: the order of day, month and year,
+ * and what goes between them — `25/09/2026`, `09/25/2026`, `25.09.2026`.
+ */
+export declare function dateLayout(locale: string): {
+    order: ('day' | 'month' | 'year')[];
+    separator: string;
+};
+/** A typed year: two digits are this century or the last, whichever is nearer. */
+export declare function typedYear(digits: string, reference: number): number | null;
+/** A date typed in `locale`, or null when it does not read as one. */
+export declare function parseTypedDate(text: string, locale: string, reference: PlainDate): PlainDate | null;
+/**
+ * A period typed as two dates around a dash — "1/9 – 25/9/2026" — in order.
+ * A start typed without a year borrows the end's, the year before if that
+ * would put it after the end: "20/12 – 5/1/2027" starts in December 2026.
+ */
+export declare function parseTypedRange(text: string, locale: string, reference: PlainDate): {
+    start: PlainDate;
+    end: PlainDate;
+} | null;
+/** `reference` written in numbers the way `locale` writes a date — for a hint. */
+export declare function exampleDate(locale: string, reference: PlainDate): string;

package/dist/react/index.d.ts

@@ -1,4 +1,5 @@
 import { type EventName } from '@lit/react';
+import type { KtOption } from '../internal/listbox.js';
 import { KtAvatar as KtAvatarElement } from '../components/core/kt-avatar/kt-avatar.js';
 import { KtBadge as KtBadgeElement } from '../components/core/kt-badge/kt-badge.js';
 import { KtButton as KtButtonElement } from '../components/core/kt-button/kt-button.js';
@@ -9,15 +10,18 @@ import { KtIcon as KtIconElement } from '../components/core/kt-icon/kt-icon.js';
 import { KtKbd as KtKbdElement } from '../components/core/kt-kbd/kt-kbd.js';
 import { KtCheckbox as KtCheckboxElement } from '../components/forms/kt-checkbox/kt-checkbox.js';
 import { KtCalendar as KtCalendarElement } from '../components/forms/kt-calendar/kt-calendar.js';
+import { KtDateInput as KtDateInputElement } from '../components/forms/kt-date-input/kt-date-input.js';
 import { KtDatePicker as KtDatePickerElement } from '../components/forms/kt-date-picker/kt-date-picker.js';
 import { KtDragDrop as KtDragDropElement } from '../components/forms/kt-drag-drop/kt-drag-drop.js';
 import { KtForm as KtFormElement } from '../components/forms/kt-form/kt-form.js';
 import { KtInput as KtInputElement } from '../components/forms/kt-input/kt-input.js';
 import { KtInputMenu as KtInputMenuElement } from '../components/forms/kt-input-menu/kt-input-menu.js';
+import { KtMultiSelect as KtMultiSelectElement } from '../components/forms/kt-multi-select/kt-multi-select.js';
 import { KtLabelInput as KtLabelInputElement } from '../components/forms/kt-label-input/kt-label-input.js';
 import { KtRadio as KtRadioElement, KtRadioGroup as KtRadioGroupElement } from '../components/forms/kt-radio-group/kt-radio-group.js';
 import { KtSelect as KtSelectElement } from '../components/forms/kt-select/kt-select.js';
 import { KtTextarea as KtTextareaElement } from '../components/forms/kt-textarea/kt-textarea.js';
+import { KtTimeInput as KtTimeInputElement } from '../components/forms/kt-time-input/kt-time-input.js';
 import { KtToggle as KtToggleElement } from '../components/forms/kt-toggle/kt-toggle.js';
 import { KtBreadcrumb as KtBreadcrumbElement } from '../components/navigation/kt-breadcrumb/kt-breadcrumb.js';
 import { KtPageHeader as KtPageHeaderElement } from '../components/navigation/kt-page-header/kt-page-header.js';
@@ -103,6 +107,16 @@ export declare const KtCalendar: import("@lit/react").ReactWebComponent<KtCalend
         value: string;
     }>;
 }>;
+export declare const KtDateInput: import("@lit/react").ReactWebComponent<KtDateInputElement, {
+    onKtChange: Kt<{
+        value: string | null;
+    }>;
+}>;
+export declare const KtTimeInput: import("@lit/react").ReactWebComponent<KtTimeInputElement, {
+    onKtChange: Kt<{
+        value: string | null;
+    }>;
+}>;
 export declare const KtDatePicker: import("@lit/react").ReactWebComponent<KtDatePickerElement, {
     onKtChange: Kt<{
         value: string | null;
@@ -132,6 +146,15 @@ export declare const KtInputMenu: import("@lit/react").ReactWebComponent<KtInput
         query: string;
     }>;
 }>;
+export declare const KtMultiSelect: import("@lit/react").ReactWebComponent<KtMultiSelectElement, {
+    onKtChange: Kt<{
+        value: (string | number)[];
+        options: KtOption[];
+    }>;
+    onKtFilter: Kt<{
+        query: string;
+    }>;
+}>;
 export declare const KtDragDrop: import("@lit/react").ReactWebComponent<KtDragDropElement, {
     onKtFilesChange: Kt<{
         files: File[];