@k2b/ui 0.44.0 → 0.45.0

package/dist/types/actions/menu-sheet.d.ts

@@ -1,8 +1,6 @@
 import { type JSX } from "solid-js";
 import type { DropdownItem, DropdownSearch } from "./Dropdown";
-/** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */
-export declare const PHONE_SHEET_QUERY = "(max-width: 47.999rem)";
-export declare const prefersMenuSheet: () => boolean;
+export { PHONE_SHEET_QUERY, prefersMenuSheet } from "./phone-sheet";
 export type MenuSheetOptions = {
     /** Renders the rows: the dropdown's own `DropdownItems`, passed in so this module does not import it back. */
     Items: (props: {

package/dist/types/actions/phone-sheet.d.ts

@@ -0,0 +1,3 @@
+/** Phones, where a menu or a date calendar opens as a bottom sheet instead of beside its trigger. */
+export declare const PHONE_SHEET_QUERY = "(max-width: 47.999rem)";
+export declare const prefersMenuSheet: () => boolean;

package/dist/types/feedback/dialog-tone.d.ts

@@ -0,0 +1,10 @@
+import type { UiMessages } from "../intl/messages";
+/** A dialog's outcome or risk: a 2 px edge in its colour inside the frame and its icon in the header. */
+export type DialogTone = "success" | "warning" | "danger";
+/** The header icon of a toned dialog; it replaces the dialog's own icon. */
+export declare const dialogToneIcon: (tone: DialogTone) => string;
+/**
+ * The tone's word for screen readers, so the tone is not carried by colour alone. Headers render it hidden with
+ * `data-dialog-tone-label`; the dialog core makes it the dialog's description, and the heading keeps the title alone.
+ */
+export declare const dialogToneLabel: (messages: UiMessages, tone: DialogTone) => string;

package/dist/types/feedback/index.d.ts

@@ -2,6 +2,7 @@ export type { AnnounceOptions, AnnouncePoliteness } from "./announce";
 export { announce } from "./announce";
 export type { DialogClose, DialogCore, DialogRender, OpenDialogOptions } from "./dialog-core";
 export { dialogCore } from "./dialog-core";
+export type { DialogTone } from "./dialog-tone";
 export type { HoverPreviewController, HoverPreviewOptions, HoverPreviewPlacement, HoverPreviewProps } from "./HoverPreview";
 export { createHoverPreview, HoverPreview } from "./HoverPreview";
 export type { InlineGuidanceProps } from "./InlineGuidance";

package/dist/types/feedback/prompt-confirm.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from "solid-js";
+import { type DialogTone } from "./dialog-tone";
+import type { ConfirmOptions, DialogOptions } from "./prompts";
+export type PromptContent = string | HTMLElement | JSX.Element;
+/** A prompt's `variant` is its tone too: a success or danger prompt carries the dialog tone of that name. */
+export declare const promptTone: (variant: DialogOptions["variant"]) => DialogTone | undefined;
+export declare const DialogHeader: (props: {
+    close: () => void;
+    title?: string;
+    icon?: string;
+    tone?: DialogTone;
+}) => JSX.Element;
+export declare const panelClass: (options?: Pick<DialogOptions, "size" | "surface" | "variant">) => string;
+export declare const contentClass: (surface?: DialogOptions["surface"]) => string;
+export declare const confirmPrompt: (content: PromptContent, options?: ConfirmOptions) => Promise<boolean | undefined>;
+/** `prompts` starts as this object; `PanelDialog` asks through it, so it reaches a replaced `prompts.confirm` too. */
+export declare const sharedPrompts: {
+    confirm: typeof confirmPrompt;
+};

package/dist/types/feedback/prompts.d.ts

@@ -1,5 +1,7 @@
 import { type JSX } from "solid-js";
 import { type DialogRender, type OpenDialogOptions } from "./dialog-core";
+import { type PromptContent } from "./prompt-confirm";
+export { DialogHeader } from "./prompt-confirm";
 export interface DialogOptions {
     signal?: AbortSignal;
     title?: string;
@@ -19,7 +21,6 @@ export interface DialogOptions {
 export interface ConfirmOptions extends DialogOptions {
     confirmationPhrase?: string;
 }
-type PromptContent = string | HTMLElement | JSX.Element;
 export type PromptSearchItem<T = unknown> = {
     /**
      * Stable identity of the result, such as its record ID. With it, a newer answer that contains the same result keeps
@@ -153,11 +154,6 @@ export declare const createFormState: <T extends Record<string, FieldSchema>>(sc
     validateAll: () => boolean;
     reset: () => void;
 };
-export declare const DialogHeader: (props: {
-    close: () => void;
-    title?: string;
-    icon?: string;
-}) => JSX.Element;
 type CloudSearchResolver<T> = (input: PromptSearchInput) => Promise<PromptSearchItem<T>[]> | PromptSearchItem<T>[];
 declare const openSearchPrompt: <T extends unknown = unknown>(resolver: CloudSearchResolver<T>, options?: PromptSearchOptions) => Promise<PromptSearchItem<T> | undefined>;
 declare const promptText: (content: string, defaultValue?: string, options?: DialogOptions) => Promise<string | null>;
@@ -166,9 +162,10 @@ declare const promptNumber: (content: string, defaultValue?: number, options?: D
     max?: number;
 }) => Promise<number | null>;
 export declare const prompts: {
+    confirm: typeof import("./prompt-confirm").confirmPrompt;
+} & {
     alert: (content: PromptContent, options?: DialogOptions) => Promise<void | undefined>;
     success: (content: PromptContent, options?: Omit<DialogOptions, "variant">) => Promise<void | undefined>;
-    confirm: (content: PromptContent, options?: ConfirmOptions) => Promise<boolean | undefined>;
     prompt: typeof promptText;
     promptNumber: typeof promptNumber;
     form: <T extends Record<string, FieldSchema>>(config: PromptFormOptions<T>) => Promise<InferFormValues<T> | null>;
@@ -182,4 +179,3 @@ export declare const prompts: {
     search: typeof openSearchPrompt;
     error: (content: string | HTMLElement, options?: DialogOptions) => Promise<unknown>;
 };
-export {};

package/dist/types/inputs/ChoiceList.d.ts

@@ -7,6 +7,10 @@ export type ChoiceListOption<T extends string = string> = {
     description?: string;
     /** A quiet tag after the label, such as "Default" for the choice that applies without one. */
     marker?: string;
+    /** A Tabler icon class before the text, such as `ti ti-truck`, when a picture helps tell the choices apart. */
+    icon?: string;
+    /** This choice is not possible now. Say why in `description`; a disabled chosen option still shows as chosen. */
+    disabled?: boolean;
 };
 export type ChoiceListProps<T extends string = string> = Omit<ValueFieldProps<T | null>, "onValueChange" | "onValueCommit"> & {
     options: readonly ChoiceListOption<T>[];
@@ -20,9 +24,9 @@ export type ChoiceListProps<T extends string = string> = Omit<ValueFieldProps<T
     onValueCommit?: (value: T) => void;
 };
 /**
- * A labeled single choice shown as a short list of rows, each with a radio, a label and one sentence on what it
- * means, for a few choices whose consequences need words. Choosing changes only paint, so no row moves; `details`
- * opens under the chosen row. Use `ChoiceChips` for quick picks without explanation, `RichSelect` for longer lists
+ * A labeled single choice shown as cards, each with a radio, a label and one sentence on what it
+ * means, for a few choices whose consequences need words. Choosing changes only paint, so no card moves; `details`
+ * opens under the chosen card's row. Use `ChoiceChips` for quick picks without explanation, `RichSelect` for longer lists
  * in a dropdown, and `ChoiceTiles` when a preview decides.
  */
 export declare function ChoiceList<T extends string = string>(props: ChoiceListProps<T>): JSX.Element;

package/dist/types/inputs/DatePicker.d.ts

@@ -18,11 +18,20 @@ export type DatePickerBaseProps<T> = Omit<ValueFieldProps<T>, "value"> & {
     presets?: readonly DatePreset<T>[];
     dateConfig?: DateContext;
     clearable?: boolean;
-    /** `plain` shows the value as text for property rows; a clearable picker offers clearing in its panel. */
+    /**
+     * `field` (default) is a text field: people type a date or open the calendar. `plain` shows the value as text for
+     * property rows and only opens the calendar; a clearable plain picker offers clearing in its panel.
+     */
     appearance?: ChoiceAppearance;
+    /** Earliest selectable day as a date key such as `2026-11-02`; earlier days are locked and typed ones refused. */
+    min?: string;
+    /** Latest selectable day as a date key. */
+    max?: string;
+    /** Shows and announces the value without changing it; the field stays focusable. */
+    readOnly?: boolean;
 };
 export type DatePickerProps = DatePickerBaseProps<string | null> & {
-    /** Trigger content for a set value, for example the date with a relative hint. */
+    /** Content for a set value: the trigger of a `plain` picker, or the resting status line of a typed field. */
     renderValue?: (value: string) => JSX.Element;
 };
 export type DateTimePickerProps = DatePickerBaseProps<string | null> & {
@@ -41,7 +50,8 @@ export type DateRangePickerProps = DatePickerBaseProps<DateRangeValue> & {
     datePresets?: readonly DatePreset<string | null>[];
     durationPresets?: readonly DurationPreset[];
 };
-export declare const placeDatePopover: (trigger: HTMLElement, popover: HTMLElement, wide: boolean) => void;
+/** `below` is a line under the trigger that the panel must not cover, such as a typed field's status line. */
+export declare const placeDatePopover: (trigger: HTMLElement, popover: HTMLElement, wide: boolean, below?: HTMLElement) => void;
 export declare function DatePicker(props: DatePickerProps): JSX.Element;
 export declare function DateTimePicker(props: DateTimePickerProps): JSX.Element;
 export declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;

package/dist/types/inputs/TextInput.d.ts

@@ -6,7 +6,7 @@ export type TextInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "on
     maxLength?: number;
     type?: "text" | "search" | "email" | "url" | "tel";
     variant?: "default" | "ai" | "compact";
-    /** Set false for a plain field without a leading icon. */
+    /** A leading icon such as a search magnifier. Plain text fields have none. */
     icon?: string | false;
     activeIcon?: string;
     /** ID of a consumer-owned visible error; caller owns its announcement. Native controls only. */

package/dist/types/inputs/date-input-messages.d.ts

@@ -0,0 +1,64 @@
+/** Status line and errors of the typed date field; dates, weekdays and distances come from Intl. */
+declare const dateInputMessages: import("@k2b/stdlib").Catalog<{
+    dayLetters: string;
+    monthLetters: string;
+    yearLetters: string;
+    openCalendar: string;
+    closeCalendar: string;
+    notADate: ({ example }: {
+        example: string;
+    }) => string;
+    notYet: string;
+    ambiguous: string;
+    incompleteYear: ({ year }: {
+        year: string;
+    }) => string;
+    unknownUnit: string;
+    noSuchMonth: ({ month }: {
+        month: number;
+    }) => string;
+    shortMonth: ({ month, days }: {
+        month: string;
+        days: number;
+    }) => string;
+    earliest: ({ date }: {
+        date: string;
+    }) => string;
+    latest: ({ date }: {
+        date: string;
+    }) => string;
+    outsideRange: string;
+    required: string;
+    endBeforeStart: string;
+    missingEnd: string;
+    missingStart: string;
+    nextWeekday: ({ weekday }: {
+        weekday: string;
+    }) => string;
+    nextWeek: string;
+    notSelectable: ({ date }: {
+        date: string;
+    }) => string;
+    limitFrom: ({ date }: {
+        date: string;
+    }) => string;
+    limitUntil: ({ date }: {
+        date: string;
+    }) => string;
+    start: string;
+    end: string;
+    startOf: ({ label }: {
+        label: string;
+    }) => string;
+    endOf: ({ label }: {
+        label: string;
+    }) => string;
+    startMissing: string;
+    endMissing: string;
+    noDate: string;
+}>;
+export type DateInputMessages = ReturnType<(typeof dateInputMessages)["resolve"]>["t"];
+/** Resolved from the date locale, so the words join the dates they describe in one language. */
+export declare const resolveDateInputMessages: (locale?: string) => DateInputMessages;
+export declare const checkDateInputMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

package/dist/types/inputs/date-input-status.d.ts

@@ -0,0 +1,35 @@
+import { type DateInputError, type DateInputNote } from "./date-input";
+import type { DateInputMessages } from "./date-input-messages";
+/**
+ * The line under a typed date field. It always says which day is meant: grey at rest (weekday and distance), blue
+ * while typing (the absolute date that a commit would save), red after a commit that failed.
+ */
+export type DateStatusTone = "rest" | "draft" | "error";
+export type DateStatus = {
+    tone: DateStatusTone;
+    text: string;
+};
+/** "Mi., 4. Nov. 2026" / "Wed, Nov 4, 2026": the absolute date of a draft. */
+export declare const formatDateLong: (key: string, locale?: string) => string;
+/** "Mittwoch, in 9 Tagen": the saved date at rest. */
+export declare const restStatusText: (key: string, today: string, locale?: string) => string;
+/** What a word or offset meant: "morgen", "nächster Mittwoch", "gestern + 34 Tage". */
+export declare const noteText: (note: DateInputNote, locale: string | undefined, t: DateInputMessages) => string;
+/** The draft line: "→ Mi., 4. Nov. 2026 · nächster Mittwoch". */
+export declare const draftStatusText: (key: string, note: DateInputNote | undefined, locale: string | undefined, t: DateInputMessages) => string;
+/** The reason a text is not a date, short enough for one line. */
+export declare const errorText: (error: DateInputError, locale: string | undefined, t: DateInputMessages, today: string) => string;
+/** A date outside `min`/`max` (date keys) is refused with the nearest allowed day. */
+export declare const limitErrorText: (key: string, limits: {
+    min?: string;
+    max?: string;
+}, locale: string | undefined, t: DateInputMessages) => string | undefined;
+/** While typing nothing is red yet: an unfinished entry says so calmly, a definite mistake already names the reason. */
+export declare const typingStatusText: (error: DateInputError, locale: string | undefined, t: DateInputMessages, today: string) => string;
+/** "Mittwoch, 4. November 2026, nächster Mittwoch": what the live region reads after typing pauses. */
+export declare const spokenDateText: (key: string, note: DateInputNote | undefined, locale: string | undefined, t: DateInputMessages) => string;
+/** "Mi., 11. Nov. 2026 – Sa., 14. Nov. 2026 · 4 Tage", or one end with what is missing. */
+export declare const rangeStatusText: (range: {
+    start: string | null;
+    end: string | null;
+}, locale: string | undefined, t: DateInputMessages) => string;

package/dist/types/inputs/date-input.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Typed date input: a small, predictable grammar instead of a natural-language parser. Every input resolves to one
+ * calendar day (a date key such as `2026-11-11`), so the field can show the absolute date before it is committed.
+ *
+ * - Dates in the locale's order of day, month and year: `11.11.2026`, `11.11.26`, `11.11.`, `11.11`, `11/11/2026`.
+ * - Digits only: 1–2 digits are a day of the current month; 4, 6 or 8 digits are day, month and year without separators.
+ * - ISO dates (`2026-11-11`) and month names (`11. November 2026`, `Nov 11, 2026`).
+ * - Day words and weekdays in German and English: `heute`, `morgen`, `mi`, `wed`, `Mittwoch`. A weekday is its next
+ *   occurrence after today; today's weekday is the same day next week.
+ * - One offset at the end: `[anchor] ± N [unit]`, such as `+14`, `-3`, `heute +2w`, `gestern + 34`, `mi +7`, `11.11. -3`.
+ *   The anchor is any of the forms above; without one it is today, never the saved value.
+ */
+export type DatePart = "day" | "month" | "year";
+export type DateUnit = "day" | "week" | "month" | "year";
+/** What a word or offset meant, so the field can say it next to the resolved date. */
+export type DateInputAnchor = {
+    kind: "today";
+} | {
+    kind: "date";
+    date: string;
+} | {
+    kind: "day";
+    offset: number;
+} | {
+    kind: "weekday";
+    weekday: number;
+};
+export type DateInputNote = {
+    kind: "day";
+    offset: number;
+} | {
+    kind: "weekday";
+    weekday: number;
+    nextWeek: boolean;
+} | {
+    kind: "offset";
+    anchor: DateInputAnchor;
+    amount: number;
+    unit: DateUnit;
+};
+export type DateInputError = {
+    code: "not-a-date";
+} | {
+    code: "incomplete";
+} | {
+    code: "ambiguous";
+} | {
+    code: "year";
+} | {
+    code: "unit";
+} | {
+    code: "month";
+    month: number;
+} | {
+    code: "day";
+    year: number;
+    month: number;
+    days: number;
+};
+export type DateInputResult = {
+    kind: "empty";
+} | {
+    kind: "date";
+    date: string;
+    note?: DateInputNote;
+} | {
+    kind: "error";
+    error: DateInputError;
+};
+export declare const addDaysToKey: (key: string, days: number) => string;
+/** Months and years keep the day where it exists and otherwise end on the last day of the month (31.01. + 1m = 28.02.). */
+export declare const addMonthsToKey: (key: string, months: number) => string;
+/** Monday 0 … Sunday 6. */
+export declare const weekdayOfKey: (key: string) => number;
+/** Whole days from `from` to `to`. */
+export declare const daysBetweenKeys: (from: string, to: string) => number;
+/** The locale's order of day, month and year in a numeric date, read from Intl; day-month-year without data. */
+export declare const dateOrder: (locale?: string) => DatePart[];
+/** The numeric form the field shows after a commit, such as `11.11.2026` or `11/11/2026`. */
+export declare const formatDateInput: (key: string, locale?: string) => string;
+/** The placeholder pattern in the locale's order, with letters from the caller (`TT.MM.JJJJ`, `MM/DD/YYYY`). */
+export declare const dateInputPattern: (locale: string | undefined, letters: Record<DatePart, string>) => string;
+/**
+ * Parses what a person typed into a date field. `today` is the current date key in the field's time zone; the result
+ * never depends on the clock.
+ */
+export declare const parseDateInput: (raw: string, options: {
+    today: string;
+    locale?: string;
+}) => DateInputResult;

package/dist/types/inputs/date-sheet.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from "solid-js";
+/**
+ * The phone calendar of a typed date field as a bottom sheet. Date pickers load this module only when the sheet opens:
+ * the sheet reaches `PanelDialog`, whose prompts render date pickers, so a static import would be a cycle.
+ */
+export declare const openDateSheet: <T>(options: {
+    title: JSX.Element;
+    subtitle: string;
+    ariaLabel?: string;
+    /** The calendar's id, which the field's `aria-controls` names while the sheet is open. */
+    id: string;
+    locale: string;
+    content: (close: (result: T) => void) => JSX.Element;
+}) => Promise<T | undefined>;

package/dist/types/internal/reveal-in-scroller.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Scrolls `scroller` alone so `item` sits fully inside it, with the "nearest" rule of `scrollIntoView`: an item already
+ * in view stays put, and one larger than the view keeps its start in view. Unlike `scrollIntoView`, no ancestor moves,
+ * so a strip that keeps its selection visible never scrolls the page or panel around it.
+ */
+export declare function revealInScroller(scroller: HTMLElement | undefined, item: HTMLElement | undefined): void;

package/dist/types/intl/messages.d.ts

@@ -76,6 +76,9 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     info: string;
     ok: string;
     success: string;
+    dialogToneSuccess: string;
+    dialogToneWarning: string;
+    dialogToneDanger: string;
     unknown: string;
     name: string;
     color: string;

package/dist/types/layout/AppWorkspace.d.ts

@@ -106,8 +106,22 @@ export type AppWorkspaceMainPaneProps = {
     description?: JSX.Element;
     /** Levels mode: a small mark before the level title, such as the colour dot of the object's container. */
     lead?: JSX.Element;
+    /**
+     * Levels mode: the level's own parent inside the same column, such as a sub-view of a detail that replaces the
+     * detail in place. Its back step shows at every width and replaces the shared step to the level before.
+     */
+    back?: {
+        href: string;
+        label: string;
+    };
     /** Controls at the end of the level head. */
     actions?: JSX.Element;
+    /**
+     * Levels mode: `"page"` marks the level that holds the page itself, such as a settings form or the list of an
+     * area, rather than a column that leads there or a detail beside it. Its title takes the page step of the type
+     * scale, above every group title in it, and its content starts at the title's edge without an inset of its own.
+     */
+    heading?: "page";
     surface?: "default" | "navigation";
     open?: boolean;
     resizable?: boolean;

package/dist/types/layout/BottomSheet.d.ts

@@ -1,4 +1,5 @@
 import { type JSX } from "solid-js";
+import type { DialogTone } from "../feedback/dialog-tone";
 /** Initial focus goes to the first input of the top sheet, otherwise to the
  * dialog element itself. Native `showModal()` focuses the first focusable
  * descendant, which is the drag handle; iOS shows a ring for that programmatic
@@ -24,6 +25,8 @@ export type BottomSheetProps = {
     dismissDisabled?: boolean;
     dismissLabel?: string;
     handle?: boolean;
+    /** See `PanelDialog`'s `tone`. */
+    tone?: DialogTone;
 };
 declare function BottomSheetRoot(props: BottomSheetProps): JSX.Element;
 /** Bottom-edge presentation; dialogCore continues to own all modal state. */

package/dist/types/layout/PanelDialog.d.ts

@@ -1,8 +1,11 @@
 import { type JSX } from "solid-js";
+import { type DialogTone } from "../feedback/dialog-tone";
 export type PanelDialogSurface = "contained" | "floating";
 export type PanelDialogProps = {
     children: JSX.Element;
     surface?: PanelDialogSurface;
+    /** A 2 px edge in the tone's colour inside the dialog frame; the header shows the tone's icon instead of its own. */
+    tone?: DialogTone;
 };
 export type PanelDialogHeaderProps = {
     title: JSX.Element;

package/dist/types/layout/Settings.d.ts

@@ -25,7 +25,8 @@ export type SettingsSectionProps = {
 };
 /**
  * A full-page settings group: a heading, optional actions and its fields on the
- * page surface without a card. Dialogs keep using PanelDialog.Section.
+ * page surface without a card. From 860 px of its own width the heading takes a
+ * column beside the fields. Dialogs keep using PanelDialog.Section.
  */
 export declare function SettingsSection(props: SettingsSectionProps): JSX.Element;
 export type SettingsGroupProps = {
@@ -46,11 +47,26 @@ export declare const readSettingsError: (response: Pick<Response, "json">, fallb
     message: string;
     fields: Record<string, string>;
 }>;
+/**
+ * The room a setting's control takes: `short` for a number, `medium` for a choice, `long` for text, and `full` for
+ * an editor, which keeps its name above it and takes the whole row.
+ */
+export type SettingsFieldWidth = "short" | "medium" | "long" | "full";
 export type SettingsFieldProps = {
     label: string;
+    /** One sentence of help; longer guidance belongs in the page's guide. */
     description: string;
     error: MaybeAccessor<string | undefined>;
     changed?: MaybeAccessor<boolean>;
+    /**
+     * Where the value comes from, at a fixed place after the control: quiet text such as "Default", or the one way
+     * back to it, such as a Reset button that only a value of its own shows.
+     */
+    source?: JSX.Element;
+    /** The control's width by kind, so a number never stretches like a URL. Defaults to `long`, the full column. */
+    width?: SettingsFieldWidth;
+    /** The row's id, for a link that leads to this one setting. */
+    id?: string;
     children: JSX.Element | ((control: SettingsFieldControlProps) => JSX.Element);
     class?: string;
 };

package/dist/types/layout/index.d.ts

@@ -38,7 +38,7 @@ export { default as ResizeSeparator, type ResizeSeparatorProps } from "./ResizeS
 export { attachResizeSeparator, type ResizeSeparatorOptions } from "./resize-separator";
 export type { ScrollAreaProps } from "./ScrollArea";
 export { default as ScrollArea } from "./ScrollArea";
-export type { SaveStatusProps, SaveStatusState, SettingsFieldControlProps, SettingsFieldProps, SettingsGroupActionProps, SettingsGroupProps, SettingsPageProps, SettingsPanelFooterProps, SettingsSaveBarProps, SettingsSectionProps, } from "./Settings";
+export type { SaveStatusProps, SaveStatusState, SettingsFieldControlProps, SettingsFieldProps, SettingsFieldWidth, SettingsGroupActionProps, SettingsGroupProps, SettingsPageProps, SettingsPanelFooterProps, SettingsSaveBarProps, SettingsSectionProps, } from "./Settings";
 export { readSettingsError, SaveStatus, SettingsField, SettingsGroup, SettingsPage, SettingsPanelFooter, SettingsSaveBar, SettingsSection, sameSettingValue, } from "./Settings";
 export type { SettingsCollectionActionProps, SettingsCollectionItemActionsProps, SettingsCollectionItemProps, SettingsCollectionItemReorderProps, SettingsCollectionItemStatusProps, SettingsCollectionProps, } from "./SettingsCollection";
 export { default as SettingsCollection } from "./SettingsCollection";

package/dist/types/surfaces/StatusBadge.d.ts

@@ -5,6 +5,11 @@ export type StatusBadgeProps = {
     label: JSX.Element;
     icon?: string | null;
     variant?: "chip" | "dot" | "text";
+    /**
+     * Every label this place can show, such as all states of a list's status. The badge keeps the width of the longest,
+     * so in a right-aligned slot its dot starts at one x in every row and stays put when the state changes.
+     */
+    labels?: readonly string[];
     title?: string;
     class?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",