@synopackageland/ui 0.20.19 → 0.21.0

package/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 ## Unreleased
 
+## 0.21.0 (2026-11-07)
+
+Native phone shell. A *touch phone* is an `AppLayout` 640px or narrower under a coarse pointer (`data-ui-phone`). A narrow DSM window driven by a mouse, tablets and desktop are unchanged. No App change is required; every new behaviour has an opt-out (docs/mobile-native.md, "Native phone shell").
+
+- **Page actions become a FAB.** On a touch phone the page's actions (PageHeader `#actions`, a pushed page's `#header-actions`, AppToolbar `#actions`) render in a floating action button at the bottom right instead of the bar. One action: the 56px FAB is that action and runs it. Two or more: the FAB opens a speed dial of labelled pills over a scrim, with focus trapped in it; Escape, Back, the scrim or the FAB close it and focus returns to the FAB; a pick runs the action and closes it; reduced motion shows it at once. A page whose primary action is in a footer bar (a `SettingsPage` footer, a sticky `FormActions`) keeps its actions in the bar. Page content gets `--ui-fab-room` of bottom padding
+  - **Opt-out / override:** `phone-actions="fab" | "bar" | "inline"` on `AppLayout` (all pages) and on `PageHeader`, `AppToolbar` and `PushTransition` (one page). `bar` is the 0.20.20 behaviour
+  - **New `PageFab`:** `<PageFab><Button variant="primary">…</Button></PageFab>` in the page's actions picks the FAB explicitly; the page's other actions go to the bar. Elsewhere it renders in place
+- **Hide on scroll, on by default.** Scrolling a page down (16px) slides the bar, the tab bar, the FAB and a clean settings footer out; any scroll up (4px), the top of the page and a scroll that stops at its end bring them back. They never hide while the speed dial, the drawer, a sheet or a dialog is open or a text field has focus. They move in `--ui-motion-bars` (200ms, 0 with reduced motion). The root carries `data-ui-bars-hidden="all|bottom"`
+  - **Opt-out:** `<AppLayout :hide-on-scroll="false">` (the App) or `<PageContent :hide-on-scroll="false">` (one page). Both keep the settings footer as well
+- **Settings footer hides only when clean.** A `SettingsPage` footer slides away with the bars only while its form is clean, never while it is dirty, invalid or saving. New props `dirty`, `invalid` and `saving`; left out, it reads them from the page: clean while the footer's primary button is disabled, invalid while a field has `aria-invalid="true"`, saving while a footer button is loading. The footer does not collapse at rest
+- **Footer hints on their own line.** On a touch phone, a hint or status beside the buttons of any footer bar (`data-ui-footer-bar`: SettingsPage, Dialog, Sheet, BottomSheet, Card, Panel, Wizard, AppActionBar, and a FormActions in one) takes a full-width line above them instead of a narrow column of one or two words per line. Wrap bare text in an element
+- **One compact bar.** A root page with no menu button leads the bar with the App icon (`brand-icon`), title start-aligned; no brand row. On a touch phone at most two trailing icons show in the bar; more page actions stay in the page's row, and `headerActions` go to "…" once page actions are in the bar. `AppTabBar` labels are 12px
+- **SectionTabs: the underline strip on a touch phone.** `phone="auto"` with four or fewer sections (not `fill`) is now the scrolling underline strip under the bar instead of a full-width SegmentControl. `phone="segment"` keeps the SegmentControl; a mouse-driven narrow window keeps it too
+- **Host insets.** `--ui-safe-top/-right/-bottom/-left` read `--ui-host-inset-*` first, then `env(safe-area-inset-*)`. A host shell that draws its own chrome around the App sets them so the bars and the FAB clear it. The Package Land mobile shell draws none and needs no setting
+- New UI string "Page actions" (the speed dial's name), in all nine locales
+- `check:phone-layout` covers a list page with one action (FAB), three (speed dial), `phone-actions="bar"`, hide-on-scroll off, and settings pages with a clean footer, a dirty footer and a footer hint, at 390x844, 360x800 and 390x664 with touch, in a DSM window and on desktop, in English and Traditional Chinese. It also checks the FAB's size, place and colour, hiding and showing on scroll, the dial's focus trap, Escape and scrim, and reduced motion. `check:mobile` gains the FAB, the open speed dial, hidden bars and a footer hint
+
+## 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

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

@@ -1,3 +1,4 @@
+import { PhoneActionsPlacement } from './pageTitle';
 import { DropdownMenuEntry } from '../../primitives/dropdown-menu/DropdownMenu.vue';
 import { AppAsideState, AppNavigation, WideLayout } from '../../../lib/adaptiveLayout';
 type __VLS_Props = {
@@ -37,6 +38,23 @@ type __VLS_Props = {
      * label); the rest open from "…". A pick emits `headerAction` with the key.
      */
     headerActions?: DropdownMenuEntry[];
+    /**
+     * Where a page's own actions (PageHeader `#actions`, a pushed page's
+     * `#header-actions`, an AppToolbar's `#actions` above the page) go on a
+     * phone: `fab` (default) a floating action button, which runs a single
+     * action or opens a speed dial of them; `bar` icons in the phone bar;
+     * `inline` the page's own header row. A page's `phone-actions` overrides
+     * it. A page with a sticky footer (a SettingsPage footer, a sticky
+     * FormActions) keeps them in the bar, and a narrow window used with a
+     * mouse treats `fab` as `bar`.
+     */
+    phoneActions?: PhoneActionsPlacement;
+    /**
+     * On a phone, scrolling the page down slides the phone bar, the tab bar
+     * and the FAB out of view, and any scroll up brings them back. `false`
+     * keeps them; a page opts out alone with PageContent `hide-on-scroll="false"`.
+     */
+    hideOnScroll?: boolean;
 };
 type __VLS_Slots = {
     sidebar?: () => unknown;
@@ -86,6 +104,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     title: string;
     height: "auto" | "fill";
+    phoneActions: PhoneActionsPlacement;
     minHeight: string;
     back: boolean;
     sidebarWidth: string;
@@ -96,6 +115,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     brandIcon: string;
     navigation: AppNavigation;
     headerActions: DropdownMenuEntry[];
+    hideOnScroll: 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/app/app-layout/PhoneFab.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    /** Slid out of view (the page scrolled down, or the keyboard is open). */
+    hidden?: boolean;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    actions: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    count: import('vue').Ref<number, number>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,37 @@
+import { InjectionKey, Ref, WatchSource } from 'vue';
+/** Scrolling down this far in one go hides the bars (a small threshold against jitter). */
+export declare const HIDE_AFTER_PX = 16;
+/** Scrolling up this far brings them back: any real scroll up, not a sub-pixel wobble. */
+export declare const SHOW_AFTER_PX = 4;
+/**
+ * Which bars a scroll hides: `all` (the phone bar, the tab bar and the FAB)
+ * when the page scrolls in an area under the bar, `bottom` (the tab bar and
+ * the FAB) when the document scrolls, which already carries the bar away.
+ */
+export type BarsHidden = false | 'all' | 'bottom';
+export interface HideOnScrollOptions {
+    /** The layout's content column: scrolls in it (or of the document) count. */
+    column: Readonly<Ref<HTMLElement | null>>;
+    /** The phone bar, to tell whether the scroller carries it. */
+    bar: () => HTMLElement | null;
+    /** On only for a phone with the feature on (no page opted out). */
+    enabled: () => boolean;
+    /** Never hide while this holds (the speed dial or the navigation drawer is open). */
+    blocked: () => boolean;
+    /** The room the bars take: a page that scrolls less than this keeps them, or hiding them would end its scroll. */
+    room: () => number;
+    /** How long hiding or showing moves the layout; scrolls in that time are its own, not the user's. */
+    settleMs: () => number;
+    /** Each change shows the bars again (a new page). */
+    reset: WatchSource[];
+}
+/**
+ * Hide-on-scroll for the phone shell: scrolling the page down slides the bars
+ * out, any scroll up brings them back at once, and so do the top of the page
+ * and a scroll that ends at its bottom. It never hides while a sheet, dialog,
+ * the speed dial or the drawer is open, or while a text field has focus, and
+ * focus moving into the bars shows them.
+ */
+export declare function useHideOnScroll(options: HideOnScrollOptions): Ref<BarsHidden>;
+/** A page's opt-out from hide-on-scroll (PageContent `hide-on-scroll="false"`): counts while it is mounted. */
+export declare const APP_KEEP_BARS_KEY: InjectionKey<() => () => void>;

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,26 @@
 import { ComputedRef, InjectionKey, Ref } from 'vue';
+/**
+ * Where a page's own actions go on a phone (an App 640px or narrower with a
+ * coarse pointer): `fab`, a floating action button at the bottom right (one
+ * action runs at once, two or more open a speed dial); `bar`, icons in the
+ * phone bar after the title; `inline`, the page's own header row. A narrow
+ * window used with a mouse treats `fab` as `bar`.
+ */
+export type PhoneActionsPlacement = 'fab' | 'bar' | 'inline';
 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 +28,69 @@ 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;
+    /** The phone's floating action button, where page actions go with the `fab` placement; null where there is none. */
+    fab?: Readonly<Ref<HTMLElement | null>>;
+    /** The placement a page's actions take, given the page's own choice (its `phone-actions`). */
+    placement?: (requested: PhoneActionsPlacement | undefined) => PhoneActionsPlacement;
+    /**
+     * A footer bar that sticks at the bottom of the page (a SettingsPage
+     * footer, a sticky FormActions) claims the bottom: the page's primary
+     * action is there, so the page's actions take the bar, not a FAB.
+     */
+    useFooterBar?: () => () => void;
+    /** A PageFab holds the FAB: the page's other actions with the `fab` placement take the bar instead. */
+    useExplicitFab?: () => () => 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>;
+    fab?: Readonly<Ref<HTMLElement | null>>;
+    placement?: (requested: PhoneActionsPlacement | undefined) => PhoneActionsPlacement;
+    footerBars?: Ref<number>;
+    explicitFabs?: 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>;
+/**
+ * Where a component's actions render on a phone: the phone bar or the FAB
+ * (`target`), or null for its own row. Counts them while they are in the bar.
+ * `wanted` says whether the component would move them out of its row (its
+ * title is in the bar, or it is the bar above the page); `placement` is the
+ * component's own `phone-actions`, which overrides the layout's.
+ */
+export declare function usePageActionsInBar(wanted: () => boolean, placement?: () => PhoneActionsPlacement | undefined): {
+    target: ComputedRef<HTMLElement | null>;
+    placement: ComputedRef<PhoneActionsPlacement>;
+};
+/**
+ * Claims the bottom of the layout's page for a footer bar while `active`
+ * holds and `element` is in the layout's content column (a footer in a dialog
+ * or sheet does not count).
  */
-export declare function usePageTitle(element: Readonly<Ref<HTMLElement | null>>, title: () => string): ComputedRef<boolean>;
+export declare function useFooterBarClaim(element: Readonly<Ref<HTMLElement | null>>, active: () => boolean): void;
 export {};

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

@@ -1,16 +1,17 @@
+import { PhoneActionsPlacement } from '../app-layout/pageTitle';
 type __VLS_Props = {
     height?: string;
+    /** Where `#actions` go on a phone when this is the bar above the page: `fab`, `bar` or `inline` (this row). Defaults to AppLayout's `phone-actions`. */
+    phoneActions?: PhoneActionsPlacement;
 };
-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;
+    phoneActions: PhoneActionsPlacement;
 }, {}, {}, {}, 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/aside-panel/AsidePanel.vue.d.ts

@@ -53,11 +53,11 @@ 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";
+    fab: boolean;
     icon: Component;
     shortcut: string;
     expandable: boolean;
     unread: boolean;
-    fab: 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/app/page-content/PageContent.vue.d.ts

@@ -12,6 +12,11 @@ type __VLS_Props = {
      * holding one) takes the height left and scrolls itself.
      */
     height?: 'auto' | 'fill';
+    /**
+     * `false` keeps a phone's bars in place while this page shows, when
+     * AppLayout hides them on scroll (its `hide-on-scroll`, on by default).
+     */
+    hideOnScroll?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -21,6 +26,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     height: "auto" | "fill";
     width: "fill" | "readable" | (string & {});
     surface: "auto" | "flat" | "card" | "none";
+    hideOnScroll: 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/app/page-fab/PageFab.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/app/page-header/PageHeader.vue.d.ts

@@ -1,16 +1,29 @@
+import { PhoneActionsPlacement } from '../app-layout/pageTitle';
 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;
+    /** Where `#actions` go on a phone: `fab`, `bar` or `inline` (this header's row). Defaults to AppLayout's `phone-actions`. */
+    phoneActions?: PhoneActionsPlacement;
 };
-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;
+    phoneActions: PhoneActionsPlacement;
+    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/components/app/section-tabs/SectionTabs.vue.d.ts

@@ -8,9 +8,10 @@ export type SectionTab = {
 /**
  * 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.
+ * full-width SegmentControl, `strip` the scrolling underline strip. `auto`: a
+ * list for five or more sections or a `fill` settings page, else the strip on
+ * a touch phone (a SegmentControl before 0.21.0; ask for `segment` to keep
+ * it) and a SegmentControl in a narrow window used with a mouse.
  */
 export type SectionTabsPhoneLayout = 'auto' | 'list' | 'segment' | 'strip';
 type __VLS_Props = {

package/dist/components/app/settings-page/SettingsPage.vue.d.ts

@@ -1,10 +1,25 @@
+type __VLS_Props = {
+    /**
+     * The form has changes not yet applied. With `false` the footer may slide
+     * away with the phone's bars on a scroll down; with `true` it stays. Left
+     * out, the footer reads it: the form is clean while the footer's primary
+     * button (every button, when none is primary) is disabled.
+     */
+    dirty?: boolean;
+    /** A field has an error: the footer stays. A field with `aria-invalid="true"` counts too. */
+    invalid?: boolean;
+    /** Apply is running: the footer stays. A footer button in its loading state counts too. */
+    saving?: boolean;
+};
 declare var __VLS_1: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     footer?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    dirty: 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;

package/dist/components/primitives/motion/PushTransition.vue.d.ts

@@ -1,3 +1,4 @@
+import { PhoneActionsPlacement } from '../../app/app-layout/pageTitle';
 type __VLS_Props = {
     /** Whether the page is pushed. */
     show: boolean;
@@ -11,6 +12,8 @@ type __VLS_Props = {
     keepMounted?: boolean;
     /** The page's element. */
     as?: string;
+    /** Where `#header-actions` go on a phone while the layout's bar shows this page: `fab`, `bar` or `inline` (a row atop the page). Defaults to AppLayout's `phone-actions`. */
+    phoneActions?: PhoneActionsPlacement;
 };
 type __VLS_Slots = {
     default?: () => unknown;
@@ -27,6 +30,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     enabled: boolean;
     under: HTMLElement | null;
     keepMounted: boolean;
+    phoneActions: PhoneActionsPlacement;
 }, {}, {}, {}, 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/grid.js

@@ -3942,6 +3942,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
   "Free now {now}, free after {after}": "Free now {now}, free after {after}",
   Sections: "Sections",
   "Back to the previous page": "Back",
+  "Page actions": "Page actions",
   Slider: "Slider",
   "Increase value": "Increase value",
   "Decrease value": "Decrease value",
@@ -4203,6 +4204,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "目前可用 {now}，清理後可用 {after}",
     Sections: "區段",
     "Back to the previous page": "返回",
+    "Page actions": "頁面動作",
     Slider: "滑桿",
     "Increase value": "增加數值",
     "Decrease value": "減少數值",
@@ -4463,6 +4465,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "当前可用 {now}，清理后可用 {after}",
     Sections: "区段",
     "Back to the previous page": "返回",
+    "Page actions": "页面操作",
     Slider: "滑块",
     "Increase value": "增加数值",
     "Decrease value": "减少数值",
@@ -4723,6 +4726,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "現在の空き {now}、解放後の空き {after}",
     Sections: "セクション",
     "Back to the previous page": "戻る",
+    "Page actions": "ページの操作",
     Slider: "スライダー",
     "Increase value": "値を増やす",
     "Decrease value": "値を減らす",
@@ -4983,6 +4987,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "현재 여유 공간 {now}, 정리 후 여유 공간 {after}",
     Sections: "섹션",
     "Back to the previous page": "뒤로",
+    "Page actions": "페이지 작업",
     Slider: "슬라이더",
     "Increase value": "값 증가",
     "Decrease value": "값 감소",
@@ -5243,6 +5248,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Jetzt frei {now}, danach frei {after}",
     Sections: "Abschnitte",
     "Back to the previous page": "Zurück",
+    "Page actions": "Seitenaktionen",
     Slider: "Schieberegler",
     "Increase value": "Wert erhöhen",
     "Decrease value": "Wert verringern",
@@ -5503,6 +5509,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Libre maintenant {now}, libre ensuite {after}",
     Sections: "Sections",
     "Back to the previous page": "Retour",
+    "Page actions": "Actions de la page",
     Slider: "Curseur",
     "Increase value": "Augmenter la valeur",
     "Decrease value": "Diminuer la valeur",
@@ -5763,6 +5770,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Libre ahora {now}, libre después {after}",
     Sections: "Secciones",
     "Back to the previous page": "Atrás",
+    "Page actions": "Acciones de la página",
     Slider: "Control deslizante",
     "Increase value": "Aumentar valor",
     "Decrease value": "Disminuir valor",
@@ -6023,6 +6031,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Free now {now}, free after {after}": "Libero ora {now}, libero dopo {after}",
     Sections: "Sezioni",
     "Back to the previous page": "Indietro",
+    "Page actions": "Azioni della pagina",
     Slider: "Cursore",
     "Increase value": "Aumenta valore",
     "Decrease value": "Diminuisci valore",

package/dist/i18n/text.d.ts

@@ -106,6 +106,7 @@ export declare const englishUiText: {
     readonly "Free now {now}, free after {after}": "Free now {now}, free after {after}";
     readonly Sections: "Sections";
     readonly "Back to the previous page": "Back";
+    readonly "Page actions": "Page actions";
     readonly Slider: "Slider";
     readonly "Increase value": "Increase value";
     readonly "Decrease value": "Decrease value";

package/dist/index.d.ts

@@ -260,6 +260,8 @@ export type { AppSidebarGroup, AppSidebarItem } from './components/app/app-sideb
 export { default as AppToolbar } from './components/app/app-toolbar/AppToolbar.vue';
 export { default as AppActionBar } from './components/app/app-action-bar/AppActionBar.vue';
 export { default as PageHeader } from './components/app/page-header/PageHeader.vue';
+export { default as PageFab } from './components/app/page-fab/PageFab.vue';
+export type { PhoneActionsPlacement } from './components/app/app-layout/pageTitle';
 export { default as PageToolbar } from './components/app/page-toolbar/PageToolbar.vue';
 export { default as SplitPane } from './components/containers/split-pane/SplitPane.vue';
 export { default as ListDetail } from './components/containers/list-detail/ListDetail.vue';