@synopackageland/ui 0.21.1 → 0.23.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 ## Unreleased
 
+## 0.23.0 (2026-11-07)
+
+Compact phone bars and native phone density. A DSM window and desktop are unchanged. No App change is required, except that among several `headerActions` only an entry marked `primary: true` is a bar button (below). Details in docs/mobile-native.md.
+
+- **Thin bars, like X.** The phone bar is one 44px row (plus its rule) with a 16px title and a 24px App icon; it still hides on scroll and comes back on a scroll up. The tabs strip under it is drawn 40px (`--ui-section-tab-height`) with a 44px tap box and sticks under the bar, and to the top of the screen while the bars are hidden. The tab bar is icon only: a 48px row (`--ui-tab-bar-height`) plus the safe area, a 1px rule and no shadow, 24px icons (`--ui-tab-bar-icon-size`) in tabs at least 44px square, the current tab in the primary colour with a heavier stroke, badges kept. A tab's label is its accessible name and shows above it on a long press or after a 500ms hover. The FAB, toasts, the bottom accessory and fill pages follow the new heights
+- **Phone density.** On a touch phone: 14px body text (12px secondary, 15px card titles, 16px titles), 12px page margins, section gaps and card insets, 44px list and menu rows, buttons drawn 36px (28 small, 40 large) inside a 44px tap box, 32px small controls; fields stay 44px. A Card's header is one 44px row with no gap under it, a ListItem row is 10px top and bottom, and a surface inside a card's body draws no frame or inset of its own, so cards never nest padding
+- **Type tokens everywhere, zoom and tap areas.** Components carry no literal font sizes; status, help and hint text read `--ui-font-size-sm`. The canvas grid draws cells at `--ui-grid-font-size`, and new `readTypeScale(el)` / `canvasFont()` give an App's own canvas or chart the same tokens. Rows, footers and bars have a minimum height only, so two lines or larger text make them taller; a SettingsSection header grows too. A text button never shrinks in its row. New `check:text-zoom` renders the phone scenes at 390x844 and at 200% zoom and fails on sideways overflow, cut text, or any bar button, tab, text button, DisclosureRow or icon button without its own 44px tap square
+- **One "…" in the phone bar.** A page whose own menu is in the bar (a drill-down page's "…") showed a second "…" for `headerActions` (an App shell's account entry). The `headerActions` now join the end of the page's menu after a separator, and pick through `headerAction` as before; without such a menu they keep a "…" of their own. A `headerActions` entry is no longer promoted to a bar button because it is first: mark it `primary: true` (new on `DropdownMenuEntry`). A sole entry with an icon (an App shell's account) stays that icon
+- **New `Button variant="text"`** for a short action in a line of text (Change, Edit): primary-coloured text with no frame or fill, dimmed while pressed, grey while disabled, a 44px tap box on touch without growing the line, and `chevron` for a trailing ›. docs/button-policy.md says when to use it and that labels never end in "..."
+- **New `DisclosureRow`:** an iOS settings row (label, value, ›) that is one button (or a link with `href`), at least 44px high on a phone, with hover, pressed and focus states
+- **Fill pages reach the bottom with the bars hidden.** While the bars are hidden on a fill page, the room after its last row is only the safe area. New `--ui-page-end-space` (24px) carries it; an App shell that pads its page end reads it
+- **New `--ui-sticky-top-offset`** on PageContent: the height of what sticks at its top (the covered padding, a sticky PageHeader, the phone's tabs strip). Every element in the page body takes it as `scroll-margin-top`, so `scrollIntoView` and focus land below the stuck rows; a row an App makes sticky uses it instead of a hardcoded 44 or 96px
+- **New scroll helpers** `nearestScroller(el)`, `scrollIntoViewWithinScroller(el, options)` and `scrollToStart(el)`, which scroll the element that actually scrolls on a phone, in a DSM window or on a desktop, honour scroll margins and move at once under reduced motion
+- `check:phone-layout` adds a home page (a primary Start meeting button, an inline Change, an upload card, a recent list) and a form page with DisclosureRows; the toast expectation follows the 48px tab bar
+
+## 0.22.0 (2026-11-07)
+
+Native phone shell follow-ups. No App change is required; a DSM window and desktop are unchanged apart from the new slot.
+
+- **Fill pages give the freed room to their list.** On a fill page (its content scrolls itself), the FAB's 88px room stayed under the content's scroller while the FAB was hidden on scroll, leaving a blank band at the bottom when the bars slid away. PageContent now marks a page whose outer element does not scroll (`height="fill"`, or an App shell that fills it) with `data-ui-page-fills`; there the room goes while the FAB is hidden on scroll or by the keyboard, so the scroller reaches the bars' edge, and comes back with the FAB. A page that scrolls as a whole keeps the room at its end, so its length never changes under the finger. No room is kept while no FAB is drawn
+- **New `#accessory` slot on `AppLayout`.** A bar across the bottom for something the App is running (a recording bar, a mini player). On a phone it docks right above the tab bar, stays while the bars hide on scroll (sliding into the tab bar's place, in `--ui-motion-bars`) and hides while the keyboard is up. The layout measures it (`--ui-bottom-accessory-height`) and lifts the FAB, toasts, an AsidePanel's phone button and the page's end above it; an App overrides no tab-bar or FAB token. Elsewhere it is the column's bottom row. An empty slot draws nothing
+- **Sticky rows in a padded page scroller.** When an App shell makes the PageContent its page's scroller and pads its top, a stuck row (a group heading, a grid header) stopped that padding below the top and the rows scrolling under it showed in the strip above. PageContent now covers that strip in the page header's colour (`[data-ui-page-scroll-cover]`, `--ui-page-scroll-pad`); the content starts where it did and a `top: 0` sticky row needs no offset
+- `check:phone-layout` adds a feed page with sticky group headings, as a page that scrolls and as a fill page, with and without a bottom accessory and with a toast, at 390x844, 360x800 and 390x664 with touch, in a DSM window and on desktop, in English and Traditional Chinese: the covered strip above a stuck heading, the fill page's list reaching the bottom with the bars hidden, the accessory docked above the tab bar and sliding into its place, and the FAB and toast above it. New story "App / Phone shell accessory"
+
 ## 0.21.1 (2026-11-07)
 
 Native phone shell fixes. No App change is required; pages without a FAB, a DSM window and desktop are unchanged.

package/README.md

@@ -537,6 +537,7 @@ DSM-style application building blocks:
 
 - SearchField
 - SettingsRow / SettingsSection
+- DisclosureRow (a whole clickable row: label, value, ›; see [docs/button-policy.md](docs/button-policy.md))
 - SettingsPage / Form / FormItem / FormGroup / FormNote / InfoBox / FormActions / Fieldset (DSM-native settings structure, see [docs/layout-rules.md](docs/layout-rules.md))
 - Callout (see [docs/callout.md](docs/callout.md) for when to use a Callout, a toast or an inline note) / EmptyState / StepList
 - ConnectionTopology

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

@@ -34,8 +34,11 @@ type __VLS_Props = {
     /** 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.
+     * The phone bar's actions. They open from the bar's one "…": the page's
+     * own menu when it is in the bar (after a separator), else a "…" of their
+     * own. An entry marked `primary`, or a sole entry with an icon, is a button
+     * (its icon, or else its label) while the page puts no actions in the bar.
+     * A pick emits `headerAction`.
      */
     headerActions?: DropdownMenuEntry[];
     /**
@@ -65,6 +68,14 @@ type __VLS_Slots = {
     footer?: () => unknown;
     /** A phone's bottom tab bar (AppTabBar), shown only in the mobile presentation. */
     tabbar?: () => unknown;
+    /**
+     * A bar across the bottom of the page that stays while the App runs
+     * something (a recording bar, a mini player). On a phone it docks right
+     * above the tab bar, stays while the bars hide on scroll (sliding into the
+     * tab bar's place) and hides while the keyboard is up; the FAB, toasts and
+     * the page's end move above it. Elsewhere it is the column's bottom row.
+     */
+    accessory?: () => unknown;
     /**
      * The right side region. `overlay` is true when the open aside floats over
      * the page (the page would be narrower than 480px, or the layout is not

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

@@ -60,9 +60,9 @@ 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;
+    open: boolean;
     defaultOpen: boolean;
     tagline: string;
     iconSrc: string;

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

@@ -41,8 +41,8 @@ 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;
+    open: boolean;
     side: "top" | "right" | "bottom" | "left";
     align: "start" | "center" | "end";
     motion: OverlayMotion;

package/dist/components/composite/disclosure-row/DisclosureRow.vue.d.ts

@@ -0,0 +1,39 @@
+type __VLS_Props = {
+    label?: string;
+    /** The current value, in secondary text before the chevron. */
+    value?: string | number;
+    /** A second line under the label. */
+    description?: string;
+    /** Renders a link instead of a button. */
+    href?: string;
+    target?: string;
+    disabled?: boolean;
+    /** `false` hides the chevron (a row that acts in place). */
+    chevron?: boolean;
+};
+declare var __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    description?: (props: typeof __VLS_14) => any;
+} & {
+    value?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    chevron: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -67,8 +67,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     onResizeEnd?: ((value: number) => any) | undefined;
     onPrevious?: (() => any) | undefined;
 }>, {
-    open: boolean;
     width: number;
+    open: boolean;
     initialFocus: "field" | "panel" | "none";
     minWidth: number;
     compactBelow: number;

package/dist/components/containers/split-pane/SplitPane.vue.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     label: string;
-    modelValue: number;
     orientation: "horizontal" | "vertical";
+    modelValue: number;
     gap: number;
     storageKey: string;
     defaultSize: number;

package/dist/components/feedback/validation-popup/ValidationPopup.vue.d.ts

@@ -24,8 +24,8 @@ 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;
     offset: number;
+    open: boolean;
     side: "top" | "right" | "bottom" | "left";
     align: "start" | "center" | "end";
     defaultOpen: boolean;

package/dist/components/primitives/button/Button.vue.d.ts

@@ -1,6 +1,6 @@
 import { ClickHandlers } from '../../../composables/pendingClick';
 import { ButtonKind } from '../../../composables/buttonKind';
-type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline';
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline' | 'text';
 type ButtonSize = 'sm' | 'md' | 'lg';
 type __VLS_Props = {
     variant?: ButtonVariant;
@@ -14,6 +14,11 @@ type __VLS_Props = {
     kind?: ButtonKind;
     loading?: boolean;
     disabled?: boolean;
+    /**
+     * A trailing › that says the action opens a next level (a picker, a page).
+     * Meant for `variant="text"`.
+     */
+    chevron?: boolean;
     type?: 'button' | 'submit' | 'reset';
     /** A listener that returns a promise shows the loading state until it settles. */
     onClick?: ClickHandlers;
@@ -28,6 +33,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     variant: ButtonVariant;
     loading: boolean;
     disabled: boolean;
+    chevron: 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/primitives/checkbox/CheckboxGroup.vue.d.ts

@@ -16,8 +16,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    modelValue: string[];
     orientation: "vertical" | "horizontal";
+    modelValue: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/primitives/dropdown-menu/types.d.ts

@@ -16,6 +16,12 @@ export type DropdownMenuSubEntry = {
     submenu?: boolean;
     /** Nested entries render as a submenu. */
     children?: DropdownMenuEntry[];
+    /**
+     * In AppLayout's `headerActions`: this entry is the phone bar's own button
+     * (its icon, or else its label) instead of a row in "…". Only the first
+     * such entry, and only while the page puts no actions in the bar.
+     */
+    primary?: boolean;
 };
 export type DropdownMenuCheckboxEntry = {
     type: 'checkbox';

package/dist/components/primitives/pagination/Pagination.vue.d.ts

@@ -91,9 +91,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     "onUpdate:pageSize"?: ((pageSize: number) => any) | undefined;
     onChangePage?: ((payload: PaginationSwitch) => any) | undefined;
 }>, {
-    modelValue: number;
     end: string | number;
     mode: "normal" | "less" | "phone";
+    modelValue: number;
     labels: Partial<PaginationLabels>;
     start: string | number;
     hasNext: boolean;

package/dist/components/primitives/popover/Popover.vue.d.ts

@@ -23,8 +23,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-    open: boolean;
     width: string;
+    open: boolean;
     side: "top" | "right" | "bottom" | "left";
     align: "start" | "center" | "end";
     motion: OverlayMotion;

package/dist/components/primitives/progress/Progress.vue.d.ts

@@ -13,8 +13,8 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "md" | "sm";
-    value: number;
     max: number;
+    value: number;
     indeterminate: boolean;
     tone: "primary" | "success" | "warning" | "danger";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/primitives/tooltip/tooltipStyle.d.ts

@@ -1,4 +1,4 @@
-export declare const TOOLTIP_CONTENT_CLASS = "z-[1450] max-w-[min(18rem,var(--reka-popper-available-width,18rem))] rounded-[var(--ui-radius-sm)] bg-[var(--ui-tooltip-bg)] px-3 py-1.5 text-[12px] leading-4 text-[var(--ui-tooltip-fg)] whitespace-pre-line shadow-[var(--ui-shadow-menu)] [overflow-wrap:anywhere] animate-[ui-fade-in_var(--ui-motion-fast)_var(--ui-motion-ease)]";
+export declare const TOOLTIP_CONTENT_CLASS = "z-[1450] max-w-[min(18rem,var(--reka-popper-available-width,18rem))] rounded-[var(--ui-radius-sm)] bg-[var(--ui-tooltip-bg)] px-3 py-1.5 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-tooltip-fg)] whitespace-pre-line shadow-[var(--ui-shadow-menu)] [overflow-wrap:anywhere] animate-[ui-fade-in_var(--ui-motion-fast)_var(--ui-motion-ease)]";
 /** Gap between a tooltip and its trigger. */
 export declare const TOOLTIP_OFFSET = 6;
 /** The first tooltip waits this long (interaction-spec §1.1). */

package/dist/components/rich-text-editor/RichTextEditor.vue.d.ts

@@ -68,8 +68,8 @@ declare const __VLS_export: import('vue').DefineComponent<{
     variant: "compact" | "full";
     loading: boolean;
     disabled: boolean;
-    invalid: boolean;
     id: string;
+    invalid: boolean;
     modelValue: string;
     placeholder: string;
     ariaLabel: string;

package/dist/feedback/StatusSlot.vue.d.ts

@@ -14,9 +14,9 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: (() => any) | undefined;
 }>, {
-    message: string;
     height: string;
     width: string;
+    message: string;
     delay: number;
     state: "idle" | "pending" | "saved" | "error";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/grid-core/theme.d.ts

@@ -59,7 +59,8 @@ export declare const defaultGridTheme: IGridTheme;
 export declare const GRID_THEME_TOKENS: Record<Exclude<IGridThemeColorKey, 'themeKey' | 'fontFamily'>, string>;
 export declare const GRID_FONT_TOKENS: {
     readonly fontFamily: "--ui-font-sans";
-    readonly fontSizeSM: "--ui-font-size";
+    /** Cell text: the grid's own size (14px on a phone), else the body size. */
+    readonly fontSizeSM: "--ui-grid-font-size";
     readonly fontSizeXS: "--ui-font-size-sm";
 };
 /** Looks up a CSS custom property, returning an empty string or undefined when it is not set. */