@synopackageland/ui 0.20.18 → 0.20.20

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ## Unreleased
 
+## 0.20.20 (2026-11-07)
+
+Phone layout (AppLayout 640px or narrower). No App change is required; `PageHeader` `back` is new and optional.
+
+- **One header row in a settings drill-down.** A section pushed from a `SectionTabs` list (`PushTransition` with a `title` inside an `AppLayout`) takes the phone bar over while it is shown: Back, the section's title and its `header-actions`, in one row. The page title row and the pushed page's own 48px back header are no longer drawn under it. The list view keeps the page title. Back, the browser's Back and the edge swipe still pop the section
+- **Page actions join the title row.** The `#actions` of the `PageHeader` whose title is in the bar, a pushed page's `#header-actions` and the `#actions` of an `AppToolbar` in AppLayout's `toolbar` slot render in the phone bar after the title (`[data-ui-mobile-page-actions]`), before `headerActions`. They no longer get a bar of their own (the SDK AppShell's Refresh bar is gone on phones). A Button with an icon is drawn as its 44px icon, with its label as its accessible name and tooltip. A text-only Button stays text, in the primary colour. A primary or danger Button keeps its fill. An `AppToolbar` with nothing else takes no row. If the actions do not fit beside the title (the title would be under 80px, or the row would overflow), they stay in the page's own row. Wider layouts are unchanged
+- **One header row on a detail page: `PageHeader` `back`.** `<PageHeader title="Meeting record" back @back="…">` marks a sub-page. On a phone the bar leads with Back, shows this page's title (whatever AppLayout's `title` says) and holds its actions; Back emits `back` and the App pops its own route. Wider, the header leads its title with a Back button. Use it instead of a hand-drawn Back row above the page
+- **No stacked dividers above the footer.** A collapsed `SettingsSection` (and a fixed one with an empty body) draws no rule under its title. Collapsed sections in a row form one list, with a rule between rows and none after the last, so the footer's rule is the only one under them. Desktop too. `SettingsSection` carries `data-state="open|closed"`
+- **One divider in the SettingsPage footer (and other footer bars).** A `FormActions` in a footer that draws its own rule no longer adds its own sticky border, padding and background. This covers the SettingsPage footer (the page's own Reset / Apply and an App's `footer` slot) and the Dialog, Sheet, BottomSheet, Card, Panel, Wizard and AppActionBar footers, which now carry `data-ui-footer-bar`. On a phone the SettingsPage footer drew two rules
+- **Buttons one size smaller on a phone.** Under a coarse pointer in the phone layout, a `Button` and a `SplitButton` are drawn md 36px, sm 28px and lg 44px (`--ui-button-md/-sm/-lg`), one size below the 44px field beside them. Their tap box stays 44px through the shared box (`data-ui-hit`); the SplitButton's two halves now join it too, and its label, not the button, cuts its overflow. An `IconButton` keeps its 36/44px. A mouse-driven narrow window and wider layouts are unchanged
+- **Whole-page scroll on a phone.** At any height (390x664 portrait included), a page with a `SettingsPage` or a `SectionTabs fill` scrolls as one, in the area under the bar. Before, it squeezed the settings body into an inner scroller about 310–540px tall whose scrollbar iOS hides, so the sections below the first one looked gone. Every element between the area and the settings, an App shell's fill wrappers included, takes its content's height. The bar stays, the section strip and a sticky `PageHeader` stick under it, and Reset / Apply stick at the bottom (a short page keeps them at the screen's bottom). The root carries `data-ui-layout-scroll="page"`. Short landscape screens keep their short mode; desktop and DSM windows wider than 640px keep the settings body's own scroller
+- **Disclosure rows on the content edge.** On a touch phone, a collapsible `SettingsSection` header and an `Accordion` trigger start their title on the content edge, where the rule and the content below start, and put the chevron at the row's end (down when closed, up when open) instead of a leading chevron that put the title 24px in. A mouse-driven window keeps the leading chevron. A SegmentControl and the SectionTabs segments already sit on the content edges; a wider one in an App comes from App markup
+- New browser check `check:phone-layout` (in the full gate): the settings list, a pushed section, a long settings page and a detail page at 390x844, 360x800 and 390x664 with touch, in a 390px DSM window and on a 1280px desktop, in English and Traditional Chinese. It checks for one header row, the page's actions in the bar, no stacked rules, footer buttons drawn smaller with a 44px tap box, disclosures on the content edges and a single page scroller on a phone
+
+## 0.20.19 (2026-11-06)
+
+- The phone navigation drawer returns focus to its opener inside the shell (the menu button or a More tab) after Escape, Close, a navigation pick, Back or a swipe. If a touch tap left focus on the host page outside the shell, it falls back to the menu button instead of returning focus to the host. It waits until the drawer has left and the background is no longer inert
+- Dialog, Sheet, BottomSheet, RecordPanel and notifications remember focus only inside their AppRoot (including its floating dialog host). A touch-opened overlay ignores the host page's focused element and returns to the pressed control inside the app; existing closeAutoFocus overrides still take precedence
+
 ## 0.20.18 (2026-11-06)
 
 - `Callout` takes `dismissScope`. `persistent` (the default) keeps today's behaviour: a closed callout stays closed after a reload until what it says changes. `occurrence` is for a notice about a passing state (reconnecting, an error, a stalled capture) that the App shows with `v-if` while the state lasts: closing hides this appearance only, nothing is stored, and the dismissal is forgotten when the Callout unmounts, so the next time the state starts the notice shows again. `dismissalKey` and `forgetDismissal` are exported: `forgetDismissal(dismissalKey('reconnecting'))` shows the callout with that `dismissKey` again (docs/callout.md, "Closing")

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

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+/**
+ * A page's actions in the phone bar draw a labelled Button as its icon alone
+ * (adaptive.css): its text stays its accessible name, and this gives it the
+ * same text as a tooltip, as the bar's own icon actions have. The title goes
+ * again when the button leaves the bar (a wider layout puts it back in its
+ * header), and a title the App set is kept.
+ */
+export declare function useIconActionTitles(container: Readonly<Ref<HTMLElement | null>>): void;

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

@@ -1,12 +1,18 @@
 import { ComputedRef, InjectionKey, Ref } from 'vue';
 interface PageTitleEntry {
     title: () => string;
+    /**
+     * A sub-page's Back (a detail page's PageHeader `back`, a pushed page). On a
+     * phone the bar then leads with Back and shows this title, whatever
+     * AppLayout's own `title` says: the page and its way back are one row.
+     */
+    back?: () => void;
 }
 /**
  * The bar's page title (the phone bar, or the bar of a short screen). 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.
+ * registered is the page's, and the bar shows it unless AppLayout's own `title`
+ * prop is set. A sub-page (an entry with `back`) takes the phone bar over.
  */
 export interface AppPageTitleHost {
     /** The content column: a PageHeader outside it (in a dialog or sheet) keeps its own title. */
@@ -14,13 +20,44 @@ export interface AppPageTitleHost {
     entries: Ref<readonly PageTitleEntry[]>;
     /** Whether the bar shows this entry's title, so its PageHeader keeps the heading for screen readers only. */
     shows: (entry: PageTitleEntry) => boolean;
+    /**
+     * The phone bar's place for the page's own actions (PageHeader `#actions`,
+     * a pushed page's `#header-actions`, an AppToolbar's `#actions` above the
+     * page); null where there is no phone bar. They render there, after the
+     * title and before the bar's `headerActions`, instead of in a row of their own.
+     */
+    actions: Readonly<Ref<HTMLElement | null>>;
+    /** Counts what renders into `actions`, so the bar knows the title is not alone. Returns the release. */
+    useActions: () => () => void;
 }
 export declare const APP_PAGE_TITLE_KEY: InjectionKey<AppPageTitleHost>;
-/** `active` says whether the bar shows a page title of this text (it is the page's last PageHeader). */
-export declare function createPageTitleHost(main: Readonly<Ref<HTMLElement | null>>, active: (title: string) => boolean): AppPageTitleHost;
+/**
+ * `active` says whether the bar shows a page title of this text (it is the
+ * page's last PageHeader); `phone` whether the phone bar is up, where a
+ * sub-page's title always shows.
+ */
+export declare function createPageTitleHost(main: Readonly<Ref<HTMLElement | null>>, active: (title: string) => boolean, options?: {
+    phone?: () => boolean;
+    actions?: Readonly<Ref<HTMLElement | null>>;
+    actionUsers?: Ref<number>;
+}): AppPageTitleHost;
 /**
  * Hands a PageHeader's title to the layout's bar. Returns whether the bar shows
- * it, so the header can keep its own heading for screen readers only.
+ * it, so the header can keep its own heading for screen readers only. With
+ * `back` the page is a sub-page: on a phone the bar leads with Back and calls
+ * it. With `when`, the title is handed over only while it holds (a pushed page
+ * while it is shown).
+ */
+export declare function usePageTitle(element: Readonly<Ref<HTMLElement | null>>, title: () => string, options?: {
+    back?: () => (() => void) | undefined;
+    when?: () => boolean;
+}): ComputedRef<boolean>;
+/**
+ * Whether a component's actions render in the phone bar, and counts them while
+ * they do. `wanted` says whether the component would put them there (its title
+ * is in the bar, or it is the bar above the page).
  */
-export declare function usePageTitle(element: Readonly<Ref<HTMLElement | null>>, title: () => string): ComputedRef<boolean>;
+export declare function usePageActionsInBar(wanted: () => boolean): {
+    target: ComputedRef<HTMLElement | null>;
+};
 export {};

package/dist/components/app/app-toolbar/AppToolbar.vue.d.ts

@@ -1,13 +1,10 @@
 type __VLS_Props = {
     height?: string;
 };
-declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
-type __VLS_Slots = {} & {
-    leading?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_8) => any;
-} & {
-    actions?: (props: typeof __VLS_10) => any;
+type __VLS_Slots = {
+    default?: () => unknown;
+    leading?: () => unknown;
+    actions?: () => unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     height: string;

package/dist/components/app/page-header/PageHeader.vue.d.ts

@@ -2,15 +2,24 @@ type __VLS_Props = {
     title: string;
     description?: string;
     sticky?: boolean;
+    /** A sub-page's header: Back before the title, emitting `back`. On a phone, the bar's Back. */
+    back?: boolean;
 };
-declare var __VLS_6: {}, __VLS_8: {};
+declare var __VLS_19: {}, __VLS_27: {}, __VLS_29: {};
 type __VLS_Slots = {} & {
-    meta?: (props: typeof __VLS_6) => any;
+    meta?: (props: typeof __VLS_19) => any;
 } & {
-    actions?: (props: typeof __VLS_8) => any;
+    actions?: (props: typeof __VLS_27) => any;
+} & {
+    actions?: (props: typeof __VLS_29) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    back: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBack?: (() => any) | undefined;
+}>, {
     sticky: boolean;
+    back: 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/composables/focusOwner.d.ts

@@ -0,0 +1,4 @@
+import { InjectionKey, Ref } from 'vue';
+export declare const APP_FOCUS_ROOT_KEY: InjectionKey<Ref<HTMLElement | null>>;
+/** Remember only this app's controls, including its viewport portal. */
+export declare function useFocusOwner(): (element: HTMLElement) => boolean;

package/dist/composables/openerFocus.d.ts

@@ -6,7 +6,8 @@ export declare const OPENER_FOCUS_FRAMES = 120;
  * an element that had focus when the content mounted, so a bottom sheet, and
  * a dialog opened by a click that did not focus its button (Safari, touch),
  * left focus on <body> when Escape or the Close button shut it. The opener is
- * the focused element when `open` turns true, else the control just pressed.
+ * the focused element inside the app when `open` turns true, else the control
+ * just pressed inside the app, else the supplied fallback trigger.
  *
  * The returned handler, called from the content's `closeAutoFocus` after the
  * consumer's own listener, runs when the overlay starts to close: its content
@@ -21,4 +22,7 @@ export declare const OPENER_FOCUS_FRAMES = 120;
  * document. A consumer that prevents the default
  * keeps full control.
  */
-export declare function useOpenerFocus(open: () => boolean): (event: Event) => void;
+export declare function useOpenerFocus(open: () => boolean, options?: {
+    contains?: (element: HTMLElement) => boolean;
+    fallback?: () => HTMLElement | null;
+}): (event: Event) => void;