@synopackageland/ui 0.20.20 → 0.21.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 ## Unreleased
 
+## 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.
+
+- **Toasts clear the FAB.** On a touch phone a toast sat over the FAB (at 390x844, the toast at y 730–780 and the FAB at 715–771). While a page shows a FAB (page actions or a `PageFab`), the toast now sits 8px above it; while the FAB is hidden on scroll or by the keyboard, the toast goes back to its own place. While the speed dial is open the toast fades out, so it never covers a pill, and it comes back when the dial closes. It moves with the bars in `--ui-motion-bars`, at once with reduced motion
+- **IconButtons in the speed dial are labelled pills.** An `IconButton` among the page actions (such as "More actions", which opens a menu) became a 48px circle in the dial with its name spilling out of it. Every dial pill is now its icon and its text: an action with no text of its own shows its `aria-label`, or else its `title` (copied to `data-ui-fab-label`), and the pill sizes to it, a name too long for the screen ending in an ellipsis. A menu trigger stays in the dial and keeps it open until its menu closes
+- `check:phone-layout` adds a list page with a More actions menu in the dial and a toast with one FAB and with the dial, at 390x844, 360x800 and 390x664 with touch, in a DSM window and on desktop, in English and Traditional Chinese: each pill holds its whole label, the toast sits above a shown FAB, steps aside while the dial is open and is back down while the FAB is hidden, keeps the bottom right off a phone, and moves at once with reduced motion
+
+## 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.

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/pageTitle.d.ts

@@ -1,4 +1,12 @@
 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;
     /**
@@ -29,6 +37,18 @@ export interface AppPageTitleHost {
     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>;
 /**
@@ -40,6 +60,10 @@ export declare function createPageTitleHost(main: Readonly<Ref<HTMLElement | nul
     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
@@ -53,11 +77,20 @@ export declare function usePageTitle(element: Readonly<Ref<HTMLElement | null>>,
     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).
+ * 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): {
+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 useFooterBarClaim(element: Readonly<Ref<HTMLElement | null>>, active: () => boolean): void;
 export {};

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

@@ -1,5 +1,8 @@
+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;
 };
 type __VLS_Slots = {
     default?: () => unknown;
@@ -8,6 +11,7 @@ type __VLS_Slots = {
 };
 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,9 +1,12 @@
+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_19: {}, __VLS_27: {}, __VLS_29: {};
 type __VLS_Slots = {} & {
@@ -19,6 +22,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     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>;

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';