@synopackageland/ui 0.20.4 → 0.20.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.20.5 (2026-11-05)
+
+- In a DSM window on a touch device, a small Button, IconButton, checkbox, radio, switch or tappable Tag keeps its 44px tap box around itself. The host reset made these controls static, so the tap box covered the nearest positioned ancestor (a whole board or panel) and took every tap in it. `check:mobile` now fails when a tap box reaches past twice its control or 64px
+- Mobile overflow checks now block the full release gate. Tables and nowrap examples scroll within their parent; wizard actions wrap, topology and Select labels fit, and Slider bubbles stay inside their track. Sheets, heading links, preset options and settings switches use the touch hit area; the rich text toolbar moves 44px tools into More earlier
+- Phone tabs have 44px tap targets and selected-tab scrolling; short segmented controls fill the available width
+- On a phone, RecordPanel and AsidePanel open as the BottomSheet: the record sheet is 92% with an optional Previous / Next footer and comments as a pushed page, and the assistant rests at half or 92%. Their own swipe code is gone
+- Phone shell: `AppLayout`'s phone bar is one 48px row with a menu or Back button (`back`, emits `back`), the page title (new `title` prop, else the page's `PageHeader` title, else the brand) and one action plus "…" (`headerActions`, emits `headerAction`); the navigation drawer is Reka's Drawer from the left (85%, up to 320px), swipes left to close, moves 240/180ms and closes on Back. `AppTabBar` shows at most five slots, the rest under More, and pads by `--ui-safe-bottom`
+- Phone forms: Input and SearchField set keyboard hints by type (new `integer` and `decimal` types), Form gives fields Next / Done in order, and FormActions sticks above the keyboard with full-width buttons by default on a phone
+- New `BottomSheet` on Reka's Drawer (reka-ui 2.11.0): grabber, swipe to close, keyboard-aware heights, Back to close and `confirm-close`. `Dialog` on a phone and `Sheet side="bottom"` use it
+- Phone push navigation: `ListDetail` at 640px or narrower pushes the detail over the list (Back, browser Back and an edge swipe pop it); `SectionTabs` on a phone shows five or more sections or a `fill` settings page as a grouped list that pushes each section, and four or fewer as a full-width SegmentControl; new `PushTransition`
+- On a phone, Select and the combobox selects, DatePicker, ColorPicker and menus with more than five actions or a submenu open as bottom sheets (48px rows, a pinned search, Done or Cancel); new `usePhoneSurface` decides popover or sheet
+- On a phone, `Pagination` is `‹ Page 1 of N ›` with 44px buttons and a sheet for the page and page size. `DataGrid` and `DataTable` show a list (title, subtitle, trailing status; new column `list` role); DataGrid selects by long press with a bottom selection bar and moves sorting and columns into a sheet. DataTable's `auto` view is the list instead of cards
+
 ## 0.20.4 (2026-11-05)
 
 - Keep anchored menus, pickers and tips within the shared floating boundary, safe area and keyboard inset

package/LICENSES/THIRD_PARTY.md

@@ -211,7 +211,7 @@ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 ```
 
-## @floating-ui/vue@1.1.11
+## @floating-ui/vue@2.0.1
 
 Declared license: MIT
 
@@ -3393,7 +3393,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 ```
 
-## reka-ui@2.10.5
+## reka-ui@2.11.0
 
 Declared license: MIT
 
@@ -3603,36 +3603,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 ```
 
-## vue-demi@0.14.10
-
-Declared license: MIT
-
-### LICENSE
-
-```text
-MIT License
-
-Copyright (c) 2020-present, Anthony Fu
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-```
-
 ## w3c-keyname@2.2.8
 
 Declared license: MIT

package/dist/components/app/app-layout/AppLayout.vue.d.ts

@@ -1,3 +1,4 @@
+import { DropdownMenuEntry } from '../../primitives/dropdown-menu/DropdownMenu.vue';
 import { AppAsideState, AppNavigation, WideLayout } from '../../../lib/adaptiveLayout';
 type __VLS_Props = {
     sidebarWidth?: string;
@@ -8,7 +9,7 @@ type __VLS_Props = {
     wideLayout?: WideLayout;
     /** Remembers the web sidebar's width and collapse under `${key}:app-sidebar`; use an app-unique key. */
     sidebarStorageKey?: string;
-    /** Heads the web sidebar and the phone bar; defaults to the page title. A DSM window shows it in its title bar instead. */
+    /** Heads the web sidebar and the phone drawer (and the phone bar when no page title is known); defaults to the document title. A DSM window shows it in its title bar instead. */
     brandName?: string;
     /** Logo URL beside the brand name; defaults to the page icon. */
     brandIcon?: string;
@@ -24,6 +25,18 @@ type __VLS_Props = {
      * drawer. Defaults to the left sidebar.
      */
     navigation?: AppNavigation;
+    /**
+     * The phone bar's title. Without it the bar shows the title of the page's
+     * `PageHeader`, and without one of those the brand.
+     */
+    title?: string;
+    /** The phone bar leads with a Back button (emits `back`) instead of the menu button, for a pushed page. */
+    back?: boolean;
+    /**
+     * The phone bar's actions: the first is one button (its icon, or else its
+     * label); the rest open from "…". A pick emits `headerAction` with the key.
+     */
+    headerActions?: DropdownMenuEntry[];
 };
 type __VLS_Slots = {
     sidebar?: () => unknown;
@@ -59,16 +72,22 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    back: () => any;
     brand: (event: MouseEvent) => any;
+    headerAction: (key: string) => any;
     "update:aside": (value: AppAsideState) => any;
     "update:asideWidth": (value: number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onBack?: (() => any) | undefined;
     onBrand?: ((event: MouseEvent) => any) | undefined;
+    onHeaderAction?: ((key: string) => any) | undefined;
     "onUpdate:aside"?: ((value: AppAsideState) => any) | undefined;
     "onUpdate:asideWidth"?: ((value: number) => any) | undefined;
 }>, {
+    title: string;
     height: "auto" | "fill";
     minHeight: string;
+    back: boolean;
     sidebarWidth: string;
     responsive: boolean;
     wideLayout: WideLayout;
@@ -76,6 +95,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     brandName: string;
     brandIcon: string;
     navigation: AppNavigation;
+    headerActions: DropdownMenuEntry[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/app/app-layout/pageTitle.d.ts

@@ -0,0 +1,24 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+interface PageTitleEntry {
+    title: () => string;
+}
+/**
+ * The phone bar's page title. A PageHeader in the layout's content registers
+ * its title; the last one mounted is the page's, and the bar shows it unless
+ * AppLayout's own `title` prop is set.
+ */
+export interface AppPageTitleHost {
+    /** The content column: a PageHeader outside it (in a dialog or sheet) keeps its own title. */
+    main: Readonly<Ref<HTMLElement | null>>;
+    entries: Ref<readonly PageTitleEntry[]>;
+    /** Whether the bar shows this entry's title (a phone, and no `title` prop). */
+    shows: (entry: PageTitleEntry) => boolean;
+}
+export declare const APP_PAGE_TITLE_KEY: InjectionKey<AppPageTitleHost>;
+export declare function createPageTitleHost(main: Readonly<Ref<HTMLElement | null>>, active: () => boolean): AppPageTitleHost;
+/**
+ * Hands a PageHeader's title to the phone bar. Returns whether the bar shows
+ * it, so the header can keep its own heading for screen readers only.
+ */
+export declare function usePageTitle(element: Readonly<Ref<HTMLElement | null>>, title: () => string): ComputedRef<boolean>;
+export {};

package/dist/components/app/app-tab-bar/AppTabBar.vue.d.ts

@@ -28,9 +28,9 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((key: string) => any) | undefined;
     onMore?: (() => any) | undefined;
 }>, {
+    hidden: boolean;
     modelValue: string;
     ariaLabel: string;
-    hidden: boolean;
     more: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/app/aside-panel/AsidePanel.vue.d.ts

@@ -53,8 +53,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     mode: import('vue').ComputedRef<Mode>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     initialFocus: "field" | "panel" | "none";
-    shortcut: string;
     icon: Component;
+    shortcut: string;
     expandable: boolean;
     unread: boolean;
     fab: boolean;

package/dist/components/app/section-tabs/SectionTabs.vue.d.ts

@@ -2,7 +2,17 @@ export type SectionTab = {
     value: string;
     label: string;
     disabled?: boolean;
+    /** On a phone's section list, sections with the same group sit in one block under this heading. */
+    group?: string;
 };
+/**
+ * How the sections show on a phone (an App 640px wide or less):
+ * `list` a grouped list that pushes each section as a page, `segment` a
+ * full-width SegmentControl, `strip` the scrolling strip (inside a pushed page
+ * or a sheet). `auto`: a list for five or more sections or a `fill` settings
+ * page, else a SegmentControl.
+ */
+export type SectionTabsPhoneLayout = 'auto' | 'list' | 'segment' | 'strip';
 type __VLS_Props = {
     ariaLabel?: string;
     modelValue: string;
@@ -15,19 +25,27 @@ type __VLS_Props = {
     fill?: boolean;
     /** Mount all supplied item panels and hide inactive ones, preserving local drafts. */
     keepMounted?: boolean;
+    /** How the sections show on a phone; see SectionTabsPhoneLayout. */
+    phone?: SectionTabsPhoneLayout;
+    /** On a phone's section list, whether the selected section is pushed (`v-model:pushed`). */
+    pushed?: boolean;
 };
-declare var __VLS_14: {}, __VLS_17: `panel-${string}`, __VLS_18: {}, __VLS_21: `panel-${string}`, __VLS_22: {};
+declare var __VLS_8: {}, __VLS_35: {}, __VLS_44: `panel-${string}`, __VLS_45: {}, __VLS_48: `panel-${string}`, __VLS_49: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
+    [K in NonNullable<typeof __VLS_44>]?: (props: typeof __VLS_45) => any;
 } & {
-    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
+    [K in NonNullable<typeof __VLS_48>]?: (props: typeof __VLS_49) => any;
 } & {
-    actions?: (props: typeof __VLS_14) => any;
+    actions?: (props: typeof __VLS_8) => any;
+} & {
+    actions?: (props: typeof __VLS_35) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    "update:pushed": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:pushed"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/about-dialog/AboutDialog.vue.d.ts

@@ -60,10 +60,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     "onCheck-result"?: ((info: AboutVersionInfo | null) => any) | undefined;
     "onCheck-error"?: ((error: unknown) => any) | undefined;
 }>, {
+    open: boolean;
     width: string;
     version: string;
     defaultOpen: boolean;
-    open: boolean;
     tagline: string;
     iconSrc: string;
     beta: boolean;

package/dist/components/composite/adaptive-panel/AdaptivePanel.vue.d.ts

@@ -41,10 +41,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    open: boolean;
     width: string;
     side: "top" | "right" | "bottom" | "left";
     align: "start" | "center" | "end";
-    open: boolean;
     motion: OverlayMotion;
     sheetSide: "bottom" | "right";
     sheetSize: string;

package/dist/components/composite/data-grid/DataGrid.vue.d.ts

@@ -1,5 +1,6 @@
 import { DataGridLabels } from './labels';
 import { TableColumnAlign, TableColumnType } from './columnType';
+import { TableColumnListRole } from './listLayout';
 export type DataGridSort = {
     key: string;
     direction: 'asc' | 'desc';
@@ -47,6 +48,8 @@ export type DataGridColumn = {
     /** Cell slots of an editable column get `editing`, `startEdit`, `stopEdit` and `update`. */
     editable?: boolean;
     compare?: (a: unknown, b: unknown, rowA: Record<string, unknown>, rowB: Record<string, unknown>) => number;
+    /** Its place in the phone list (see TableColumnListRole); unset, the first column is the title and the next two the subtitle. */
+    list?: TableColumnListRole;
 };
 export type DataGridColumnWidths = Record<string, number>;
 export type DataGridGroup = {
@@ -117,6 +120,12 @@ export type DataGridGroupSlotProps = {
     expanded: boolean;
     toggle: () => void;
 };
+export type DataGridSelectionSlotProps = {
+    keys: string[];
+    rows: Record<string, unknown>[];
+    /** Clears the selection, which ends the phone list's select mode. */
+    clear: () => void;
+};
 export type DataGridExpandSlotProps = {
     row: Record<string, unknown>;
     index: number;
@@ -205,6 +214,12 @@ type __VLS_Props = {
     defaultExpandedKeys?: string[];
     /** Row reordering with drag and drop plus keyboard support. */
     draggable?: boolean | DataGridDraggable;
+    /**
+     * `auto` shows a list in an app 640px or narrower (a phone): a row per
+     * item with a title, a subtitle and a trailing status, long press to
+     * select, and sorting and columns in a sheet. `list` always, `table` never.
+     */
+    mobileView?: 'auto' | 'list' | 'table';
 };
 declare function resetColumns(): void;
 type __VLS_Slots = {
@@ -216,6 +231,8 @@ type __VLS_Slots = {
         pageCount: number;
     }) => unknown;
     expand?: (props: DataGridExpandSlotProps) => unknown;
+    /** Actions in the phone list's selection bar. */
+    'selection-actions'?: (props: DataGridSelectionSlotProps) => unknown;
     [name: `header-${string}`]: (props: {
         column: DataGridColumn;
     }) => unknown;
@@ -303,15 +320,16 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     fill: boolean;
     footer: boolean;
     loading: boolean;
+    draggable: boolean | DataGridDraggable;
     group: DataGridGroup | null;
     loadingText: string;
-    draggable: boolean | DataGridDraggable;
     page: number;
     pageSize: number;
     selectable: boolean;
     columnOrder: string[];
     hiddenColumns: string[];
     rowKey: string;
+    mobileView: "auto" | "list" | "table";
     resizable: boolean;
     defaultSort: DataGridSort | null;
     selectedKeys: string[];

package/dist/components/composite/data-grid/labels.d.ts

@@ -28,6 +28,15 @@ export type DataGridLabels = {
     pageSize?: string;
     /** Beside a column the chooser lists that the width leaves out. */
     hiddenByWidth?: string;
+    /** The phone list's selection bar. */
+    selected?: (count: number) => string;
+    /** Ends the phone list's select mode and clears the selection. */
+    cancelSelection?: string;
+    /** The phone list's sort and columns sheet, and its button. */
+    viewOptions?: string;
+    sortBy?: string;
+    ascending?: string;
+    descending?: string;
 };
 /** `DataGridLabels` after the defaults were merged in: every label is present. */
 export type ResolvedDataGridLabels = DataGridLabels & {
@@ -40,6 +49,12 @@ export type ResolvedDataGridLabels = DataGridLabels & {
     noMatch: string;
     pageSize: string;
     hiddenByWidth: string;
+    selected: (count: number) => string;
+    cancelSelection: string;
+    viewOptions: string;
+    sortBy: string;
+    ascending: string;
+    descending: string;
 };
 export declare const defaultDataGridLabels: ResolvedDataGridLabels;
 /** Locale-aware chrome; the exported English defaults remain available to callers. */

package/dist/components/composite/data-grid/listLayout.d.ts

@@ -0,0 +1,26 @@
+import { TableColumnType } from './columnType';
+/**
+ * A column's place in the phone list (DataGrid and DataTable at 640px or
+ * narrower): `title` is the row's first line, `subtitle` joins the second
+ * line (two at most), `trailing` sits at the row's end (a status badge, the
+ * actions), `none` leaves the column out of the list.
+ */
+export type TableColumnListRole = 'title' | 'subtitle' | 'trailing' | 'none';
+type ListColumn = {
+    key: string;
+    type?: TableColumnType;
+    list?: TableColumnListRole;
+};
+export type ListLayout<T extends ListColumn> = {
+    title: T | undefined;
+    subtitle: T[];
+    trailing: T[];
+};
+export declare const MAX_LIST_SUBTITLE_COLUMNS = 2;
+/**
+ * Places the shown columns in the list. Without `list` roles the first column
+ * is the title, the next two make the subtitle and an `actions` column trails.
+ * A column marked `subtitle` replaces the unmarked ones on the second line.
+ */
+export declare function listLayout<T extends ListColumn>(columns: readonly T[]): ListLayout<T>;
+export {};

package/dist/components/composite/data-table/DataTable.vue.d.ts

@@ -1,4 +1,5 @@
 import { TableColumnAlign, TableColumnType } from '../data-grid/columnType';
+import { TableColumnListRole } from '../data-grid/listLayout';
 export type DataTableColumn = {
     key: string;
     label: string;
@@ -11,6 +12,8 @@ export type DataTableColumn = {
     minWidth?: string | number;
     /** Overrides the table's `resizable` for this column. */
     resizable?: boolean;
+    /** Its place in the phone list (see TableColumnListRole); unset, the first column is the title and the next two the subtitle. */
+    list?: TableColumnListRole;
 };
 type __VLS_Props = {
     columns: DataTableColumn[];
@@ -18,8 +21,13 @@ type __VLS_Props = {
     rowKey?: string;
     emptyText?: string;
     compact?: boolean;
-    /** Simple tables become fully labeled cards in mobile mode unless set to table. `container` picks cards from the measured width (see `containerBreakpoint`) whatever the app presentation. */
-    mobileView?: 'auto' | 'cards' | 'table' | 'container';
+    /**
+     * `auto` shows a list in mobile mode (an app 640px or narrower): a row per
+     * item with a title, a subtitle and a trailing column. `list` and `cards`
+     * (fully labeled cards) always, `table` never. `container` picks cards from
+     * the measured width (see `containerBreakpoint`) whatever the app presentation.
+     */
+    mobileView?: 'auto' | 'list' | 'cards' | 'table' | 'container';
     /** Width in px under which `mobileView="container"` shows cards. */
     containerBreakpoint?: number;
     /**
@@ -39,11 +47,23 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
     row: Record<string, unknown>;
     value: unknown;
     column: DataTableColumn;
-}, __VLS_12: `cell-${string}`, __VLS_13: {
+}, __VLS_6: `cell-${string}`, __VLS_7: {
+    row: Record<string, unknown>;
+    value: unknown;
+    column: DataTableColumn;
+}, __VLS_10: `cell-${string}`, __VLS_11: {
+    row: Record<string, unknown>;
+    value: unknown;
+    column: DataTableColumn;
+}, __VLS_14: `cell-${string}`, __VLS_15: {
+    row: Record<string, unknown>;
+    value: unknown;
+    column: DataTableColumn;
+}, __VLS_24: `cell-${string}`, __VLS_25: {
     row: Record<string, unknown>;
     value: unknown;
     column: DataTableColumn;
-}, __VLS_16: `cell-${string}`, __VLS_17: {
+}, __VLS_28: `cell-${string}`, __VLS_29: {
     row: Record<string, unknown>;
     value: unknown;
     column: DataTableColumn;
@@ -51,9 +71,15 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
 } & {
-    [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
+    [K in NonNullable<typeof __VLS_6>]?: (props: typeof __VLS_7) => any;
+} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_14>]?: (props: typeof __VLS_15) => any;
+} & {
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
 } & {
-    [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;
+    [K in NonNullable<typeof __VLS_28>]?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:columnWidths": (value: Record<string, number>) => any;
@@ -64,7 +90,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     compact: boolean;
     columnWidths: Record<string, number>;
     rowKey: string;
-    mobileView: "auto" | "cards" | "table" | "container";
+    mobileView: "auto" | "list" | "cards" | "table" | "container";
     containerBreakpoint: number;
     resizable: boolean;
     stateKey: string;

package/dist/components/composite/file-picker/FilePicker.vue.d.ts

@@ -38,13 +38,13 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     variant: "dropzone" | "compact";
     disabled: boolean;
-    modelValue: File[];
     paste: boolean;
+    modelValue: File[];
     multiple: boolean;
+    showList: boolean;
     maxFiles: number;
     maxSize: number;
     directory: boolean;
-    showList: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/form/FormGroup.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    /** Indent levels (multiples of 28px) or any CSS length. */
+    /** Indent levels (28px, or 12px on a touch phone) or any CSS length. */
     indent?: number | string;
     /** Disables every control in the group, usually `!parentOn`. */
     disabled?: boolean;

package/dist/components/composite/form/context.d.ts

@@ -18,6 +18,19 @@ export type FormContext = {
     validateMessageDisplayMode: ValidateMessageDisplayMode;
     registerField: (field: FormFieldHandle) => void;
     unregisterField: (field: FormFieldHandle) => void;
+    /** Text entry fields, kept in document order for their keyboard's Enter key. */
+    registerTextControl?: (control: FormTextControl) => void;
+    unregisterTextControl?: (control: FormTextControl) => void;
+    /** `done` for the form's last active text field, `next` for the others. */
+    enterKeyHint?: (control: FormTextControl) => 'next' | 'done' | undefined;
+    /** The active text field after this one, if any. */
+    nextTextControl?: (control: FormTextControl) => HTMLElement | undefined;
+};
+/** One text entry field of a Form (an Input), for the Next / Done keyboard key. */
+export type FormTextControl = {
+    element: () => HTMLElement | null;
+    /** False while the field is disabled or read-only: it is skipped. */
+    active: () => boolean;
 };
 /** One registered FormItem, as used by `Form.validate()` / `resetFields()` / `commit()`. */
 export type FormFieldHandle = {

package/dist/components/composite/form-actions/FormActions.vue.d.ts

@@ -4,7 +4,11 @@ type __VLS_Props = {
     labelWidth?: string;
     /** Indents the actions past the shared label column (`--ui-label-column`). */
     inset?: boolean;
-    /** Keeps the actions in view at the bottom of a long scrolling form, over a divider. */
+    /**
+     * Keeps the actions in view at the bottom of a long scrolling form, over a
+     * divider, and above the on-screen keyboard. On by default on a phone, off
+     * elsewhere; `false` turns it off on a phone too.
+     */
     sticky?: boolean;
 };
 declare var __VLS_1: {};
@@ -12,9 +16,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    align: "start" | "end";
     sticky: boolean;
     inset: boolean;
+    align: "start" | "end";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/record-panel/RecordPanel.vue.d.ts

@@ -1,4 +1,5 @@
-export type RecordPanelCloseReason = 'escape' | 'button' | 'swipe';
+/** `swipe` is any other way the phone sheet was let go: a drag, or Back. */
+export type RecordPanelCloseReason = 'escape' | 'button' | 'outside' | 'swipe';
 type __VLS_Props = {
     /** Controlled open state (`v-model:open`). */
     open?: boolean;
@@ -12,16 +13,21 @@ type __VLS_Props = {
     minWidth?: number;
     /** The view kept visible beside the panel, however wide it is dragged. */
     minMainWidth?: number;
-    /** Shows the `secondary` slot (comments) as a column on the far side; the panel grows by `secondaryWidth`. */
+    /** Shows the `secondary` slot (comments) as a column on the far side; the panel grows by `secondaryWidth`. On the phone sheet it is a page pushed over the body, and its Back emits `update:secondaryOpen`. */
     secondaryOpen?: boolean;
     secondaryWidth?: number;
+    /** The pushed comments page's title on the phone sheet, already translated. */
+    secondaryLabel?: string;
     /** The element the panel docks to and is clipped by; it must be positioned. The parent element otherwise. */
     container?: HTMLElement | null;
-    /** At this host width and narrower the panel is a full-screen sheet. */
+    /** At this host width and narrower the panel is a bottom sheet. */
     compactBelow?: number;
+    /** The phone sheet's footer: Previous and Next record, disabled where false. Without both, no footer. */
+    hasPrevious?: boolean;
+    hasNext?: boolean;
     /** Where focus goes on close when the element that had it at open is gone (a re-rendered card). */
     returnFocus?: () => HTMLElement | null | undefined;
-    /** `field`: the first editable field (not on touch); `panel`: the panel itself; `none`: focus stays. */
+    /** `field`: the first editable field (not on touch or the phone sheet); `panel`: the panel itself; `none`: focus stays. */
     initialFocus?: 'field' | 'panel' | 'none';
     /** No body padding; the caller lays the body out. */
     flush?: boolean;
@@ -45,18 +51,25 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     compact: import('vue').ComputedRef<boolean>;
     width: import('vue').ComputedRef<number>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    next: () => any;
     close: (reason: RecordPanelCloseReason) => any;
     "update:open": (value: boolean) => any;
     "update:width": (value: number) => any;
+    "update:secondaryOpen": (value: boolean) => any;
     resizeEnd: (value: number) => any;
+    previous: () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onNext?: (() => any) | undefined;
     onClose?: ((reason: RecordPanelCloseReason) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:width"?: ((value: number) => any) | undefined;
+    "onUpdate:secondaryOpen"?: ((value: boolean) => any) | undefined;
     onResizeEnd?: ((value: number) => any) | undefined;
+    onPrevious?: (() => any) | undefined;
 }>, {
-    width: number;
     open: boolean;
+    width: number;
+    initialFocus: "field" | "panel" | "none";
     minWidth: number;
     compactBelow: number;
     container: HTMLElement | null;
@@ -64,8 +77,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     minMainWidth: number;
     secondaryOpen: boolean;
     secondaryWidth: number;
+    hasPrevious: boolean;
+    hasNext: boolean;
     returnFocus: () => HTMLElement | null | undefined;
-    initialFocus: "field" | "panel" | "none";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/settings-section/SettingsSection.vue.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-    defaultOpen: boolean;
     open: boolean;
+    defaultOpen: boolean;
     collapsible: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/composite/tag-editor/TagEditor.vue.d.ts

@@ -13,14 +13,14 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     error: (error: unknown) => any;
-    "update:modelValue": (value: string[]) => any;
     close: () => any;
     open: () => any;
+    "update:modelValue": (value: string[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onError?: ((error: unknown) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
     disabled: boolean;
     modelValue: string[];