@synopackageland/ui 0.22.0 → 0.23.1

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 ## Unreleased
 
+## 0.23.1 (2026-11-07)
+
+Phone tab pages without a title in the bar. No App change is required; a DSM window and desktop are unchanged.
+
+- **New `phone-bar-title="none"` on `AppLayout`.** In the phone layout a root page's bar draws no title and no App icon or brand (a bottom-tab page, like X), while the drawer opened from the menu button or the tab bar's More stays headed by `brand-name` and `brand-icon`, screen readers still hear the `title`, and the document title is untouched. The bar keeps its height, actions, single "…", hide on scroll and Back on a sub-page. Before, an App hid them by passing an empty `title` and brand, and the drawer then read "Application navigation". Defaults to `'auto'` (as before)
+- `check:phone-layout` adds a tab page (scene `tab`) at 390x844, 360x800 and 390x664 with touch, in a DSM window and on desktop, in English and Traditional Chinese: no title, icon or brand in the bar, its height kept, the title kept for screen readers, hide on scroll, and the drawer from More headed by the App's name and icon
+
+## 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.

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

@@ -31,11 +31,22 @@ type __VLS_Props = {
      * `PageHeader`, and without one of those the brand.
      */
     title?: string;
+    /**
+     * `'none'` draws the phone bar of a root page without a title and without
+     * the App icon or brand (a bottom-tab page whose tab already names it).
+     * The drawer, screen readers and the document title still read `title`
+     * and the brand; a sub-page (Back) still shows its title. Only the phone
+     * layout changes. Defaults to `'auto'`.
+     */
+    phoneBarTitle?: 'auto' | 'none';
     /** 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[];
     /**
@@ -122,6 +133,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     brandName: string;
     brandIcon: string;
     navigation: AppNavigation;
+    phoneBarTitle: "auto" | "none";
     headerActions: DropdownMenuEntry[];
     hideOnScroll: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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. */