@k2b/ui 0.44.0 → 0.46.0

package/dist/types/actions/FilterChip.d.ts

@@ -58,6 +58,10 @@ export type FilterToggleProps = {
     /** Link to the URL with the filter switched. The link keeps working without JavaScript. */
     href?: string;
     onClick?: (event: MouseEvent) => void;
+    /** The button opens a dialog with more filters, such as a filter builder; it stays pressed while they apply. */
+    opensDialog?: boolean;
+    /** The button is loading what it opens; it stays enabled so it keeps focus for the dialog to return it. */
+    busy?: boolean;
     title?: string;
     disabled?: boolean;
     class?: string;

package/dist/types/actions/ViewTabs.d.ts

@@ -5,6 +5,10 @@ export type ViewTab = {
     href: string;
     icon?: string;
     count?: number | string;
+    /** A short quiet label after the count, such as "New" for a view people have not opened yet. */
+    badge?: string;
+    /** Stays in the strip after More at every width, for a view of another kind than the ones that overflow. */
+    pinned?: boolean;
 };
 export type ViewTabsProps = {
     /** Accessible name of the navigation landmark, e.g. "Views". */
@@ -12,14 +16,20 @@ export type ViewTabsProps = {
     items: readonly ViewTab[];
     /** Id of the open view; the server reads it from `?view=`. Unknown ids select nothing. */
     current: string | undefined;
-    /** Tabs shown before More (default 5). */
+    /** At most this many views before More (default 5). */
     max?: number;
+    /**
+     * The strip shows only the views that fit its room and counts the rest in More, instead of scrolling them. The open
+     * view and pinned views stay. Pair it with a larger `max` so a wide head shows more views.
+     */
+    fit?: boolean;
     class?: string;
 };
 /** Two deterministic strip levels; only opening the menu reads CSS visibility. */
 export declare function viewTabsLayout(items: readonly ViewTab[], current: string | undefined, max?: number): {
     wide: number[];
     compact: number[];
+    pinned: number[];
     wideHidden: number;
     compactHidden: number;
 };

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/content/FileGrid.d.ts

@@ -34,6 +34,11 @@ type FileGridBaseProps<T> = {
 export type FileGridSelectableProps<T> = FileGridBaseProps<T> & {
     selection: CollectionSelection;
     onRowClick?: (row: T) => void;
+    /**
+     * Shows a check box before each item that `checks` returns `true` for, or a circle when only one item may be
+     * selected. The check only mirrors the selection; items without one keep its slot, so names stay in line.
+     */
+    checks?: (row: T) => boolean;
     limit?: never;
     expanded?: never;
     onExpandedChange?: never;
@@ -45,6 +50,7 @@ export type FileGridSelectableProps<T> = FileGridBaseProps<T> & {
 export type FileGridOpenProps<T> = FileGridBaseProps<T> & {
     selection?: never;
     onRowClick?: never;
+    checks?: never;
     /** Shows the first `limit` items, then "Show all N", which opens the full list in place. Without it, the list is always full. */
     limit?: number;
     /** Controls whether the full list is open. Without it, the list keeps its own state. */

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/choice.d.ts

@@ -45,14 +45,20 @@ export declare function createChoiceLoader<T extends string>(loader: () => Choic
 };
 export type ChoicePopoverPlacement = {
     /**
-     * `trigger` (default) gives the popover the trigger's width; `own` keeps the
-     * width its stylesheet sets, such as a RichSelect with a preview.
+     * `trigger` (default) makes the popover at least as wide as the trigger and
+     * as wide as its longest name, so names stay on one line; `own` keeps
+     * the width its stylesheet sets, such as a RichSelect with a preview.
      */
     width?: "trigger" | "own";
     /** The side tried first. The popover flips when the other side has more room. */
     side?: "below" | "above";
 };
-export declare const placeChoicePopover: (trigger: HTMLElement, popover: HTMLElement, placement?: ChoicePopoverPlacement) => void;
+/**
+ * Places the popover under (or above) its trigger. `floor` is the narrowest
+ * width it may take, such as the width it already had while open, so filtering
+ * the options never makes it narrower.
+ */
+export declare const placeChoicePopover: (trigger: HTMLElement, popover: HTMLElement, placement?: ChoicePopoverPlacement, floor?: number) => void;
 export declare function createChoicePopover(disabled: () => boolean, placement?: () => ChoicePopoverPlacement): {
     open: () => boolean;
     setTrigger: Setter<HTMLElement | undefined>;

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/DetailPanel.d.ts

@@ -100,6 +100,14 @@ export type DetailPanelActionButtonProps = DetailPanelActionBaseProps & DetailPa
     href?: never;
 };
 export type DetailPanelActionProps = DetailPanelActionLinkProps | DetailPanelActionButtonProps;
+/** A row that only shows something, such as a person and their role: the columns of an action, without a command. */
+export type DetailPanelRowProps = {
+    title: JSX.Element;
+    description?: JSX.Element;
+    leading?: JSX.Element;
+    trailing?: JSX.Element;
+    class?: string;
+};
 export type DetailPanelSectionProps = DetailPanelSectionBaseProps & ({
     children?: JSX.Element;
     actions?: JSX.Element;
@@ -127,6 +135,7 @@ type DetailPanelComponent = ((props: DetailPanelProps) => JSX.Element) & {
     Group: (props: DetailPanelGroupProps) => JSX.Element;
     Section: (props: DetailPanelSectionProps) => JSX.Element;
     Action: (props: DetailPanelActionProps) => JSX.Element;
+    Row: (props: DetailPanelRowProps) => JSX.Element;
 };
 /** A count chip, or "None yet" for zero; shared by sections and discussions. */
 export declare const DetailPanelCount: (props: {