@motifx-community/ui 0.0.0-stage → 0.1.0-beta.0

package/dist/components/scheduler/view/TimelineView.d.ts

@@ -0,0 +1,72 @@
+import { Component } from '@motifx/core';
+import type { SchedulerHost } from './scheduler-host';
+interface Props<T> {
+    host: SchedulerHost<T>;
+}
+/**
+ * The timeline views: a row per group of resources (one without groups) with the time running along it, mirrored
+ * right to left. One scroll box holds it all: the head with the two tiers of the scale stays at the top, the resource
+ * column at the start. A big timeline builds only what is in view: its rows through `Virtualization` (each as tall as
+ * its lanes, from the model), its cells and appointments by the model's window along the time. Changing the date fills
+ * the same rows and cells in place.
+ *
+ * It follows nothing: it draws itself when the model tells it what changed, when its sizes are measured, on
+ * `reState()` and when an option or a text it shows changes.
+ */
+export declare class TimelineView<T> extends Component<HTMLDivElement, Props<T>> {
+    /** Its parts are made (in `onConfigured`): until then a draw has nothing to draw on. */
+    private made;
+    private scroller;
+    private rows;
+    private probe;
+    /** A cell's width and the resource column's, in pixels (measured). */
+    private readonly size;
+    /** The rows the virtual list keeps off screen, by the row's own number. */
+    private readonly away;
+    /** The rows' heights the virtual list was last given. */
+    private given;
+    /** The sizes are measured (the rows know their heights): the virtual list asks for them only then. */
+    private measured;
+    private readonly ready;
+    /** A scroll asked for before the sizes were known, made once they are. */
+    private pending;
+    private readonly watch;
+    private timeline;
+    private scale;
+    /** The rows of a timeline that is not virtual. */
+    private lines;
+    /** The rows the virtual list has made, while they live. */
+    private readonly shownLines;
+    /** What the rows were made for: virtual or not, and the cell template. */
+    private madeFor;
+    private stopFollow;
+    constructor(props: Props<T>);
+    onConfigured(): void;
+    onMounted(): void;
+    onDisposing(): void;
+    /** What the model tells is drawn: the rows and the scale follow the window and the focus themselves; the rest draws the view again. */
+    private changed;
+    /** All of the view, as the model has it now. */
+    draw(): void;
+    /** The scroll box with the scale and the rows, virtual or not. */
+    private make;
+    /** A scroll box made after the view was on the page is watched for its size too. */
+    private observeScroller;
+    /** The virtual list is given the rows again when they or their heights changed; while an appointment is dragged its rows grow in place and are given after. */
+    private giveChanged;
+    /** Reads the sizes the design language gives (a cell, a lane, the gap, a row, the resource column) and lays the window out again. */
+    private measure;
+    /** After a scroll, the window follows at the next frame (once however many scroll events come). */
+    private followSoon;
+    /** Builds the cells in view (and a screen's worth on each side), and moves the window on when the view nears its edge. */
+    private follow;
+    /** Gives the virtual list the rows (and their heights); focus stays on the cell or appointment it was on. */
+    private give;
+    /** Scrolls so that a cell along the time (at its start) and a row are at the start of the view. */
+    private scrollTo;
+    /** Scrolls a cell (along the time) and a row into view only when they are not in it, and builds them. */
+    private reveal;
+    /** Where a row starts in the scroll box, under the head. */
+    private rowTop;
+}
+export {};

package/dist/components/scheduler/view/ask-series-scope.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentBase } from '@motifx/core';
+import type { FormHost } from '../../form/form-host';
+import type { SeriesScope } from '../model/series-scope';
+/** What the question about a series shows. */
+export interface SeriesQuestion {
+    title: () => string;
+    /** The question, which names the choices. */
+    text: () => string;
+    scopes: readonly SeriesScope[];
+    label: (scope: SeriesScope) => string;
+    ok: () => string;
+    cancel: () => string;
+    /** A delete: the answer's button warns. */
+    danger: boolean;
+    host: FormHost & ComponentBase;
+}
+/**
+ * Asks what a change of an occurrence reaches: a modal form with the choices as radio buttons (the
+ * first chosen, the arrows move, Enter answers, Escape cancels). Resolves with the choice, or `null`.
+ */
+export declare function askSeriesScope(question: SeriesQuestion): Promise<SeriesScope | null>;

package/dist/components/scheduler/view/cell-spot.d.ts

@@ -0,0 +1,8 @@
+import type { SchedulerColumn } from '../model/scheduler-column';
+import type { TimeSlot } from '../model/time-slot';
+/** Where a cell of the day views stands: its place in its row, the column shown there now (none past the last), its time row (`null`: all day). */
+export interface CellSpot {
+    place: number;
+    column: SchedulerColumn | undefined;
+    slot: TimeSlot | null;
+}

package/dist/components/scheduler/view/cell-words.d.ts

@@ -0,0 +1,7 @@
+import type { SchedulerColumn } from '../model/scheduler-column';
+import type { SchedulerHost } from './scheduler-host';
+/** What a cell says besides its time: its group's names before, and the blocked time it is in after. */
+export declare function cellWords<T>(host: SchedulerHost<T>, column: SchedulerColumn, slot: number): {
+    group: string;
+    block: string;
+};

package/dist/components/scheduler/view/scheduler-host.d.ts

@@ -0,0 +1,87 @@
+import type { ComponentBase } from '@motifx/core';
+import type { UiStrings } from '../../../core/ui-strings';
+import type { AgendaRowContext } from '../agenda-row-context';
+import type { AppointmentTemplateContext } from '../appointment-template-context';
+import type { CellTemplateContext } from '../cell-template-context';
+import type { DateTemplateContext } from '../date-template-context';
+import type { AnyPiece } from '../model/any-piece';
+import type { CellPlace } from '../model/cell-place';
+import type { Resources } from '../model/Resources';
+import type { ResourceHeaderContext } from '../resource-header-context';
+import type { SchedulerModel } from '../model/SchedulerModel';
+import type { SchedulerFields } from '../scheduler-fields';
+import type { MoreListContext } from '../more-list-context';
+import type { TimeTemplateContext } from '../time-template-context';
+import type { TooltipTemplateContext } from '../tooltip-template-context';
+import type { DragMode } from './AppointmentDrag';
+import type { TimelineScroll } from './timeline-scroll';
+import type { SchedulerFormat } from './SchedulerFormat';
+/** What the views of a scheduler use of it: the model, the settings they draw with, and where to send what the user does. */
+export interface SchedulerHost<T> {
+    model: SchedulerModel<T>;
+    format: SchedulerFormat;
+    text(key: keyof UiStrings, values?: Record<string, unknown>): string;
+    fields(): SchedulerFields;
+    showCurrentTime(): boolean;
+    dimPast(): boolean;
+    /** The resource kinds: the names of an appointment's items. */
+    resources: Resources;
+    /** The templates of the view shown (its own, else the scheduler's). */
+    headerTemplate(): ((context: ResourceHeaderContext) => ComponentBase) | null;
+    template(): ((context: AppointmentTemplateContext<T>) => ComponentBase) | null;
+    cellTemplate(): ((context: CellTemplateContext) => ComponentBase) | null;
+    dateTemplate(): ((context: DateTemplateContext) => ComponentBase) | null;
+    timeTemplate(): ((context: TimeTemplateContext) => ComponentBase) | null;
+    agendaTemplate(): ((context: AgendaRowContext<T>) => ComponentBase) | null;
+    tooltipTemplate(): ((context: TooltipTemplateContext<T>) => ComponentBase) | null;
+    moreTemplate(): ((context: MoreListContext<T>) => ComponentBase) | null;
+    allDayLines(): number;
+    rtl(): boolean;
+    /** Occurrences and ones changed apart carry their marks. */
+    recurrenceMarks(): boolean;
+    /** How an appointment's series repeats, in plain words; empty for one that happens once. */
+    recurrenceText(item: T): string;
+    /** An appointment's own time zone when it is not the scheduler's; empty otherwise. */
+    zoneOf(item: T): string;
+    /** The lines a week of the month has room for, measured by the month view. */
+    setMonthRoom(lines: number): void;
+    /** A timeline row's sizes in pixels, measured by the timeline view. */
+    setLineMetrics(metrics: {
+        lane: number;
+        gap: number;
+        min: number;
+    }): void;
+    cellPointerDown(place: CellPlace, e: PointerEvent): void;
+    cellClick(place: CellPlace, e: MouseEvent): void;
+    cellDblClick(place: CellPlace, e: MouseEvent): void;
+    appointmentClick(piece: AnyPiece<T>, e: MouseEvent | KeyboardEvent): void;
+    appointmentDblClick(piece: AnyPiece<T>, e: MouseEvent | KeyboardEvent): void;
+    appointmentKey(piece: AnyPiece<T>, e: KeyboardEvent): void;
+    appointmentPointerDown(piece: AnyPiece<T>, mode: DragMode, e: PointerEvent): void;
+    /** Focus left an appointment: a move by the keys goes back (not when it goes to another box of the same appointment). */
+    appointmentBlur(item: T, e: FocusEvent): void;
+    /** A finger lifted this appointment last: it shows its handles. */
+    touchSelected(item: T): boolean;
+    /** The appointment being moved was lifted by a finger. */
+    liftedByTouch(): boolean;
+    /** Keeps how a part drawn by hand draws itself, to draw it again when an option or a text it shows changes; returns what forgets it. */
+    keepDrawn(draw: () => void): () => void;
+    canDrag(item: T): boolean;
+    canResize(item: T): boolean;
+    isSaving(item: T): boolean;
+    /** The appointment's tooltip is showing. */
+    isOpen(item: T): boolean;
+    /** "+N more" of a day, in a group (its index, -1 without groups). */
+    openMore(day: Date, group: number, anchor: HTMLElement): void;
+    gridKey(e: KeyboardEvent): void;
+    /** A view is on the page. */
+    viewShown(): void;
+    /** The view's scroll box, for scrolling to a time. */
+    setScroller(el: HTMLElement | null): void;
+    /** The timeline view's scrolling, for scrolling to a time and bringing a cell into view. */
+    setTimeline(timeline: TimelineScroll | null): void;
+    /** An appointment is being moved or resized (by the pointer or the keys): it is shown where it would go. */
+    dragging(): boolean;
+    /** The agenda's keys: moving over its rows, opening one. */
+    agendaKey(e: KeyboardEvent): void;
+}

package/dist/components/scheduler/view/timeline-scroll.d.ts

@@ -0,0 +1,7 @@
+/** What the timeline view does for its scheduler: scrolls to a cell along the time and to a row. */
+export interface TimelineScroll {
+    /** Puts the cell (its start) and the row at the start of the view; `null` leaves that way as it is. */
+    scrollTo(tick: number | null, row: number | null): void;
+    /** Scrolls only as far as needed for the cell and the row to be in view, and builds them. */
+    reveal(tick: number | null, row: number | null): void;
+}

package/dist/components/scheduler/view/touch-host.d.ts

@@ -0,0 +1,21 @@
+import type { ViewKind } from '../model/view-kind';
+/** What the finger gestures use of their scheduler. */
+export interface TouchHost {
+    root(): HTMLElement;
+    /** The view's scroll box. */
+    scroller(): HTMLElement | null;
+    kind(): ViewKind;
+    /** An appointment is being moved or resized. */
+    dragging(): boolean;
+    swipeNavigation(): boolean;
+    pinchZoom(): boolean;
+    rtl(): boolean;
+    zoom(): number;
+    /** Two fingers are about to change the zoom; `false` when that is refused. */
+    zoomChanging(from: number, to: number): boolean;
+    setZoom(zoom: number): void;
+    zoomChanged(from: number, to: number): void;
+    /** A swipe goes on (`x` pixels, toward the next days or the previous ones), or is over (`x` null). */
+    swiping(x: number | null, next: boolean, ready: boolean): void;
+    step(by: number): void;
+}

package/dist/components/scheduler/view-changed-event-args.d.ts

@@ -0,0 +1,7 @@
+import type { Scheduler } from './Scheduler';
+export interface ViewChangedEventArgs<T = unknown> {
+    from: string;
+    to: string;
+    byUser: boolean;
+    source: Scheduler<T>;
+}

package/dist/components/scheduler/view-changing-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { EventArgs } from '@motifx/core';
+import type { Scheduler } from './Scheduler';
+/** Another view is about to show; `cancel = true` keeps this one. */
+export interface ViewChangingEventArgs<T = unknown> extends EventArgs {
+    from: string;
+    to: string;
+    byUser: boolean;
+    source: Scheduler<T>;
+}

package/dist/components/sheet/BottomSheet.d.ts

@@ -0,0 +1,82 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { OverlayPanel } from '../../parts/overlay/OverlayPanel';
+import type { BottomSheetDetent } from './bottom-sheet-detent';
+import type { BottomSheetProps } from './bottom-sheet-props';
+import type { DetentChangedEventArgs } from './detent-changed-event-args';
+import type { DetentChangingEventArgs } from './detent-changing-event-args';
+/**
+ * A panel that comes up from the bottom of the page or of a container and stops at a few heights
+ * (`detents`: a peek, half, full, as tall as its content, or heights of your own). The finger and the
+ * mouse drag it by its handle and its title from height to height, a flick goes on to the next one,
+ * and dragging it down past the lowest one closes it; the content takes the sheet along when it
+ * cannot scroll that way. The handle is a slider for the keyboard (the arrow keys, Home and End).
+ * It is a dialog: modal by default, with Escape, a press on the scrim and the browser's back
+ * closing it, focus moved in and back again; it keeps clear of the screen's safe areas.
+ *
+ * @example
+ * <BottomSheet title="Filters" detents={['peek', 'half', 'full']} x-model={() => this.state.filters}>…</BottomSheet>
+ *
+ * const sheet = new BottomSheet({ title: 'Share', detent: 'fit', content: new ShareList() });
+ * sheet.show(this);
+ */
+export declare class BottomSheet extends OverlayPanel<BottomSheetProps> {
+    static overlayClass: string;
+    constructor(props?: IBaseProp<BottomSheetProps>);
+    get detents(): readonly BottomSheetDetent[];
+    set detents(value: Bind<readonly BottomSheetDetent[]>);
+    /** The height it is at (or opens at). Reactive. Setting it moves the sheet there. */
+    get detent(): BottomSheetDetent;
+    set detent(value: Bind<BottomSheetDetent>);
+    get showHandle(): boolean;
+    set showHandle(value: Bind<boolean>);
+    get draggable(): boolean;
+    set draggable(value: Bind<boolean>);
+    get dragContent(): boolean;
+    set dragContent(value: Bind<boolean>);
+    get swipeToClose(): boolean;
+    set swipeToClose(value: Bind<boolean>);
+    get flickSpeed(): number;
+    set flickSpeed(value: Bind<number>);
+    get topGap(): number | string | null;
+    set topGap(value: Bind<number | string | null>);
+    /** Its height now, in pixels (0 while closed). */
+    get height(): number;
+    get onDetentChanging(): MotifEvent<DetentChangingEventArgs>;
+    get onDetentChanged(): MotifEvent<DetentChangedEventArgs>;
+    /** Moves it to one of its heights (opened at it when closed). `false` when an `onDetentChanging` listener said no. */
+    snapTo(detent: BottomSheetDetent): boolean;
+    /** To the next taller height; `false` at the tallest. */
+    expand(): boolean;
+    /** To the next lower height; `false` at the lowest. */
+    collapse(): boolean;
+    protected applyProperty(name: string, value: unknown): void;
+    protected placePanel(): void;
+    protected panelClosed(): void;
+    private get sheet();
+    private createSheet;
+    /** The heights as they measure now, the lowest first; none taller than full. */
+    private stops;
+    private measure;
+    /** As tall as the content needs, measured with no height of its own. */
+    private fitHeight;
+    /** The height of what it opens over. */
+    private room;
+    /** How much of the page the on-screen keyboard covers now, in pixels (0 without one). */
+    private keyboard;
+    /** Its height and how far below it is pulled (a drag past its lowest height). */
+    private setSize;
+    private renderHandle;
+    /** Goes `by` heights up (1) or down (-1). */
+    private step;
+    private nearest;
+    /** Moves to `detent`, asking first; it goes back where it was when the change is refused. */
+    private changeDetent;
+    private listenDrag;
+    private startDrag;
+    private moveDrag;
+    private endDrag;
+    private touchStart;
+    private touchMove;
+    private touchEnd;
+    private handleKey;
+}

package/dist/components/sheet/bottom-sheet-detent.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A height a bottom sheet stops at: `'peek'` (a strip, `sheet.peek-height`), `'half'` (half the room),
+ * `'full'` (the room but a gap at the top), `'fit'` (as tall as its content, up to full), a number
+ * of pixels, or a share of the room such as `'40%'`.
+ */
+export type BottomSheetDetent = 'peek' | 'half' | 'full' | 'fit' | number | `${number}%`;

package/dist/components/sheet/bottom-sheet-props.d.ts

@@ -0,0 +1,27 @@
+import type { Bind } from '@motifx/core';
+import type { OverlayPanelProps } from '../../parts/overlay/overlay-panel-props';
+import type { BottomSheetDetent } from './bottom-sheet-detent';
+import type { DetentChangedEventArgs } from './detent-changed-event-args';
+import type { DetentChangingEventArgs } from './detent-changing-event-args';
+/** Props of `BottomSheet`: the shared `OverlayPanelProps` plus its own. Each one is also a settable, reactive property. */
+export interface BottomSheetProps extends OverlayPanelProps {
+    /** The heights it stops at, in any order. Default `['half', 'full']`. */
+    detents?: Bind<readonly BottomSheetDetent[]>;
+    /** The height it opens at and is at now (one of `detents`); the user moving it writes it. Default: the first of `detents`. */
+    detent?: Bind<BottomSheetDetent>;
+    /** The handle at the top: drag it, or use the arrow keys on it, to change the height. Default `true`. */
+    showHandle?: Bind<boolean>;
+    /** The finger and the mouse move it between its heights (by the handle and the title; by the content too, see `dragContent`). Default `true`. */
+    draggable?: Bind<boolean>;
+    /** A finger moving the content takes the sheet along when the content cannot scroll that way: down from its top, up while the sheet is not at its tallest. Default `true`. */
+    dragContent?: Bind<boolean>;
+    /** Dragging or flicking it down below its lowest height closes it. Default `true`. */
+    swipeToClose?: Bind<boolean>;
+    /** How fast a flick goes on to the next height, in pixels per millisecond. Default `0.4`. */
+    flickSpeed?: Bind<number>;
+    /** The room it leaves above itself at full height: pixels or a CSS length; `0` for a full-screen sheet (its corners square off up there); `null` for `sheet.top-gap`. Default `null`. */
+    topGap?: Bind<number | string | null>;
+    /** The height is about to change; cancelable, `to` can be changed. */
+    onDetentChanging?: (e: DetentChangingEventArgs) => void;
+    onDetentChanged?: (e: DetentChangedEventArgs) => void;
+}

package/dist/components/sheet/detent-changed-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { BottomSheet } from './BottomSheet';
+import type { BottomSheetDetent } from './bottom-sheet-detent';
+export interface DetentChangedEventArgs {
+    from: BottomSheetDetent;
+    to: BottomSheetDetent;
+    byUser: boolean;
+    source: BottomSheet;
+}

package/dist/components/sheet/detent-changing-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { BottomSheet } from './BottomSheet';
+import type { BottomSheetDetent } from './bottom-sheet-detent';
+/** A bottom sheet is about to stop at another height; `to` can be changed, `cancel = true` keeps it where it was. */
+export interface DetentChangingEventArgs {
+    from: BottomSheetDetent;
+    to: BottomSheetDetent;
+    /** The finger, the mouse or a key moved it; `false` for code. */
+    byUser: boolean;
+    cancel: boolean;
+    source: BottomSheet;
+}

package/dist/components/sheet/index.d.ts

@@ -0,0 +1,5 @@
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './bottom-sheet-props';
+export type { BottomSheetDetent } from './bottom-sheet-detent';
+export type { DetentChangingEventArgs } from './detent-changing-event-args';
+export type { DetentChangedEventArgs } from './detent-changed-event-args';

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,45 @@
+import { Component, type Bind, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { SkeletonAnimation } from './skeleton-animation';
+import type { SkeletonProps } from './skeleton-props';
+import type { SkeletonShape } from './skeleton-shape';
+/**
+ * The shape of what is loading (lines of text, a block, a circle), moving as the design language does
+ * until `loading` turns `false`; then its JSX children show in its place. A screen reader hears that it
+ * is loading.
+ *
+ * @example
+ * <Skeleton lines={3} loading={() => this.posts.loading}>
+ *   <PostList posts={this.posts} />
+ * </Skeleton>
+ * <Skeleton shape="circle" width={40} />
+ */
+export declare class Skeleton extends Control<HTMLDivElement, SkeletonProps> {
+    /** An animation not given is the design language's. */
+    private readonly look;
+    private readonly bones;
+    private readonly contentPart;
+    constructor(props?: IBaseProp<SkeletonProps>);
+    get shape(): SkeletonShape;
+    set shape(value: Bind<SkeletonShape>);
+    get lines(): number;
+    set lines(value: Bind<number>);
+    get width(): string | number | null;
+    set width(value: Bind<string | number | null>);
+    get height(): string | number | null;
+    set height(value: Bind<string | number | null>);
+    get animation(): SkeletonAnimation;
+    set animation(value: Bind<SkeletonAnimation>);
+    get loading(): boolean;
+    set loading(value: Bind<boolean>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** The part holding what shows once loaded, for adding to it from code. */
+    get content(): Component<HTMLDivElement>;
+    onMounted(): void;
+    private countOf;
+    /** One bone per line of text, else one. */
+    private renderBones;
+    private renderLoading;
+    private renderLook;
+}

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,4 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonAnimation } from './skeleton-animation';
+export type { SkeletonProps } from './skeleton-props';
+export type { SkeletonShape } from './skeleton-shape';

package/dist/components/skeleton/skeleton-animation.d.ts

@@ -0,0 +1,2 @@
+/** How a skeleton moves while it waits: a wave sweeping across, a pulse, or still. */
+export type SkeletonAnimation = 'wave' | 'pulse' | 'none';

package/dist/components/skeleton/skeleton-props.d.ts

@@ -0,0 +1,21 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { SkeletonAnimation } from './skeleton-animation';
+import type { SkeletonShape } from './skeleton-shape';
+/** Props of `Skeleton`. Each one is also a settable property; a function is followed. */
+export interface SkeletonProps extends ControlProps {
+    /** Default `'text'`. */
+    shape?: Bind<SkeletonShape>;
+    /** How many lines of text; the last of several is shorter. Default `1`. */
+    lines?: Bind<number>;
+    /** A CSS length, or pixels as a number; a circle's size. Default: the room it is in (a circle: the language's size). */
+    width?: Bind<string | number | null>;
+    /** A CSS length, or pixels as a number. Default: a line of text, or the language's block height. */
+    height?: Bind<string | number | null>;
+    /** Default: the design language's (`wave`, or `pulse`). */
+    animation?: Bind<SkeletonAnimation>;
+    /** While `true` the skeleton shows; then its JSX children do. Default `true`. */
+    loading?: Bind<boolean>;
+    /** What screen readers say while it loads. Default: the kit's "Loading…". */
+    label?: Bind<string>;
+}

package/dist/components/skeleton/skeleton-shape.d.ts

@@ -0,0 +1,2 @@
+/** What a skeleton stands for: lines of text, a block (a picture, a field), or a circle (an avatar). */
+export type SkeletonShape = 'text' | 'rect' | 'circle';

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,114 @@
+import { type Bind, type IBaseProp } from '@motifx/core';
+import { Field } from '../../parts/field/Field';
+import type { SliderOrientation } from './slider-orientation';
+import type { SliderProps } from './slider-props';
+import type { SliderShowValue } from './slider-show-value';
+import type { SliderValue } from './slider-value';
+/**
+ * A value picked on a track by dragging a thumb or with the keys: one number, or a range with two
+ * thumbs that cannot cross. Steps, marks with labels, a value bubble, a vertical form and number
+ * formatting; the label, help line and validation come from `Field`. `x-model` binds the value.
+ *
+ * @example
+ * <Slider label="&Volume" x-model={() => this.settings.volume} showValue="drag" />
+ * <Slider label="Price" range min={0} max={500} step={10} x-model={() => this.filter.price} />
+ *
+ * const zoom = new Slider({ label: 'Zoom', min: 25, max: 400, step: 25, ticks: true });
+ * this.panel.controls.add(zoom);
+ * zoom.value = 100;
+ */
+export declare class Slider extends Field<SliderValue, SliderProps> {
+    /** What the design language decides: a track split around the thumbs (a gap there). */
+    private readonly trackLook;
+    constructor(props?: IBaseProp<SliderProps>);
+    get min(): number;
+    set min(value: Bind<number>);
+    get max(): number;
+    set max(value: Bind<number>);
+    get step(): number;
+    set step(value: Bind<number>);
+    get largeStep(): number;
+    set largeStep(value: Bind<number>);
+    get range(): boolean;
+    set range(value: Bind<boolean>);
+    get minDistance(): number;
+    set minDistance(value: Bind<number>);
+    /** Where the active segment starts on a one-thumb slider; `undefined` for the start of the track. */
+    get origin(): number | undefined;
+    set origin(value: Bind<number | undefined>);
+    get orientation(): SliderOrientation;
+    set orientation(value: Bind<SliderOrientation>);
+    get ticks(): boolean | number;
+    set ticks(value: Bind<boolean | number>);
+    get tickLabels(): boolean;
+    set tickLabels(value: Bind<boolean>);
+    get showValue(): SliderShowValue;
+    set showValue(value: Bind<SliderShowValue>);
+    get format(): Intl.NumberFormatOptions | null;
+    set format(value: Bind<Intl.NumberFormatOptions | null>);
+    get locale(): string;
+    set locale(value: Bind<string>);
+    get updateOn(): 'input' | 'change';
+    set updateOn(value: Bind<'input' | 'change'>);
+    get name(): string;
+    set name(value: Bind<string>);
+    /** A function, so it is stored as it is, never bound. */
+    get valueText(): ((value: number) => string) | null;
+    set valueText(value: ((value: number) => string) | null);
+    /** The thumbs, `[start, end]` with a range (the end one is hidden without). */
+    get thumbElements(): readonly HTMLElement[];
+    /** The value as text, the way the bubble and the tick labels write it. */
+    formatValue(value: number): string;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): SliderValue;
+    protected isEmptyValue(): boolean;
+    protected sameValue(a: SliderValue, b: SliderValue): boolean;
+    /** Kept on the steps and inside the bounds; a range keeps its thumbs apart. The same array comes back when nothing changes. */
+    protected normalizeValue(value: SliderValue): SliderValue;
+    protected renderValue(): void;
+    protected renderReadOnly(on: boolean): void;
+    onMounted(): void;
+    protected get focusElement(): HTMLElement;
+    protected applyProperty(name: string, value: unknown): void;
+    private get sliderParts();
+    private buildParts;
+    /** A property; while the constructor is still binding the props it is read from them. */
+    private option;
+    private get bounds();
+    private get gap();
+    /** What an arrow key moves by: a step, or a hundredth of the track without steps. */
+    private get unit();
+    private snap;
+    /** `current` with one thumb moved to `raw`, on a step and away from the other thumb. */
+    private place;
+    /** The bounds, the steps or the mode changed: the value follows and is written back. */
+    private conform;
+    private draw;
+    /** The values the active segment spans: from the start, the origin or the first thumb to the value or the second thumb. */
+    private activeSpan;
+    /** The origin inside the bounds; `null` without one, and with a range. */
+    private originValue;
+    /** Marks inside the active segment are drawn in its colour. */
+    private markTicks;
+    private renderTrack;
+    private drawThumb;
+    private renderRange;
+    private renderNames;
+    private renderOrientation;
+    private renderFormat;
+    private renderTicks;
+    /** Hidden inputs that send the value with a form. */
+    private renderInputs;
+    private get vertical();
+    private get rtl();
+    private listen;
+    /** How far a point is from the `min` end of the track, in pixels; `null` while the track has no size. */
+    private positionOf;
+    private valueAt;
+    private nearestThumb;
+    private pointerDown;
+    private pointerMove;
+    private pointerUp;
+    private moveTo;
+    private keyDown;
+}

package/dist/components/slider/index.d.ts

@@ -0,0 +1,5 @@
+export { Slider } from './Slider';
+export type { SliderProps } from './slider-props';
+export type { SliderValue } from './slider-value';
+export type { SliderOrientation } from './slider-orientation';
+export type { SliderShowValue } from './slider-show-value';

package/dist/components/slider/slider-orientation.d.ts

@@ -0,0 +1,2 @@
+/** `horizontal` (the default) or `vertical`, where up is more. */
+export type SliderOrientation = 'horizontal' | 'vertical';

package/dist/components/slider/slider-props.d.ts

@@ -0,0 +1,40 @@
+import type { Bind } from '@motifx/core';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { SliderOrientation } from './slider-orientation';
+import type { SliderShowValue } from './slider-show-value';
+import type { SliderValue } from './slider-value';
+/** Props of `Slider`: the field props plus its own. Each one is also a settable, reactive property. */
+export interface SliderProps extends FieldProps<SliderValue> {
+    /** Default `0`. */
+    min?: Bind<number>;
+    /** Default `100`. */
+    max?: Bind<number>;
+    /** Default `1`; `0` lets the value take any number. */
+    step?: Bind<number>;
+    /** What Page Up and Page Down move by. Default ten steps. */
+    largeStep?: Bind<number>;
+    /** Two thumbs; the value is `[start, end]`. */
+    range?: Bind<boolean>;
+    /** A centred slider: the active segment runs from this value to the thumb. Not with `range`. */
+    origin?: Bind<number | undefined>;
+    /** The least distance between the two thumbs. Default `0`. */
+    minDistance?: Bind<number>;
+    /** Default `'horizontal'`. */
+    orientation?: Bind<SliderOrientation>;
+    /** `true` a mark at every step, a number that many equal parts. */
+    ticks?: Bind<boolean | number>;
+    /** The values under the marks (at the two ends without marks). */
+    tickLabels?: Bind<boolean>;
+    /** Default `'never'`. */
+    showValue?: Bind<SliderShowValue>;
+    /** How the bubble and the tick labels write the value. */
+    format?: Bind<Intl.NumberFormatOptions | null>;
+    /** Default: the page's `lang`. */
+    locale?: Bind<string>;
+    /** `input` (default) changes the value while the thumb moves, `change` when it is let go. */
+    updateOn?: Bind<'input' | 'change'>;
+    /** The name it is sent with in a form; a range sends two values. */
+    name?: Bind<string>;
+    /** What screen readers say for a value, e.g. `(v) => v + ' °C'`. A function, so it is not bound like the other props. */
+    valueText?: (value: number) => string;
+}