@synopackageland/ui 0.20.10 → 0.20.12

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## Unreleased
+
+## 0.20.12 (2026-11-05)
+
+- On a short screen (a phone in landscape, at most 480px tall) outside the phone layout, every App gets a short mode: the page title shows in the bar above the page, beside the toolbar's actions, instead of only for screen readers; a settings page (a `SettingsPage` or a `SectionTabs fill`) scrolls as one, so the bar and header scroll away while the section tabs stay at the top and Reset / Apply at the bottom; and a `PageHeader` scrolls with the page in a tight row. A phone in portrait and a taller window are unchanged. New exports `SHORT_VIEWPORT_QUERY` and `APP_SHORT_KEY` (docs/adaptive-layout.md, "Short screens")
+- A `SectionTabs fill` strip, and on a phone the Back header of a pushed section, sticks below a sticky `PageHeader` in the same `PageContent` instead of sliding under it when the page scrolls as a whole
+- FilePicker on Android no longer makes Chrome ask for the camera or microphone: when `accept` names a video or audio type (`video/*`, `.mp4`, `.mp3`), the file chooser gets `application/octet-stream` (every file, no recording), and a chosen file outside `accept` is still rejected. The new `native-accept` prop sets the chooser's type when it should differ from `accept` (README, FilePicker)
+- Grid: a record link draws as a grey chip in the cell's text colour (like a select option without a colour), no longer in the link blue
+- Grid: a click on an attachment thumbnail asks to open it (`open-attachment`) on the first click, as a checkbox or link icon does; record chips still open only on a cell already selected
+
+## 0.20.11 (2026-11-05)
+
+- Button centres its icon on the label: an icon (an `svg`, or an element marked `data-icon`, which `Icon` and `StatusDot` now carry) sits on the centre of the label's line instead of DSM's x-height middle, which put a 16px icon 0.6-1.6px under the label depending on the font. The label keeps its ellipsis
+- Button counts only an `svg` or a `data-icon` element as the icon before or after its text. A `<span>` around the text is text, so `<Button><Mic /><span>Record</span></Button>` keeps one 8px gap instead of 16px, and a `v-if` comment counts as nothing. The label is plain text (docs/button-policy.md, rule 10). CopyButton and FacetPanel mark their icon and count with `data-icon`
+- A Callout inside a `SettingsSection` body sits 12px from the rows around it instead of flush on the next row; a closed Callout takes no gap
+- On a phone, a `SectionTabs` section pushed from its list spans the page's content area: its Back header reaches both edges and its content keeps the page gutter, instead of a white page inside the gutter with its fields on its edges. The list keeps its inset
+- A pushed page's Back header never cuts Back short: its sides keep their full width and a long title ends in its ellipsis first (SectionTabs, ListDetail)
+- FilePicker leaves the file count out of its limits line when the limit is 1 ("up to 1 files"), and the new `show-hint` prop (default on) hides the built-in line of types, size and count when the page states them itself
+- An `AppTabBar` set to `:more="false"` is the whole phone navigation: while it shows, the phone bar drops its menu button, which opened a drawer of the same destinations. A hidden bar brings the button back. Leave `more` unset to keep the drawer reachable through More
+- Docs: the dark scheme attribute belongs on the app root (`AppRoot color-scheme`); `<html data-ui-color-scheme="dark">` works only with `theme.css`, never under the embedded stylesheets. WizardStep lays its content out in block flow (docs/wizard.md, Layout)
+
 ## 0.20.10 (2026-11-05)
 
 - A page of cards now sits on a lighter near-white canvas (`--ui-page-canvas`) so it matches pages without a background; `--ui-app-web-canvas` still overrides it

package/README.md

@@ -476,9 +476,13 @@ readable on it, and leaves the status tones DSM's:
 </AppRoot>
 ```
 
-The theme has a dark scheme too: `<AppRoot color-scheme="dark">` (or
-`data-ui-color-scheme="dark"` on `<html>` for a full page) switches every
-token, and derives the accent for a dark page. The host decides when, for
+The theme has a dark scheme too: `<AppRoot color-scheme="dark">` switches
+every token, and derives the accent for a dark page. AppRoot puts
+`data-ui-color-scheme="dark"` on its root (`[data-ui-app]`); set the attribute
+there yourself only without AppRoot. The embedded stylesheets
+(`themes/dsm7-embedded*.css`, a DSM window) read it only on `[data-ui-app]`, never on
+the host's `<html>`; `<html data-ui-color-scheme="dark">` works only with
+`theme.css`, on a page of your own. The host decides when, for
 example from `prefers-color-scheme` ([colour system](docs/color-system.md#dark-theme)).
 
 Other tokens are overridden in a stylesheet imported after the library's:
@@ -1206,7 +1210,18 @@ partial overrides of `title`, `description`, `chooseFiles`, `chooseFolder`,
 `titleOne`, `descriptionOne`, `chooseFile`, `acceptedTypes`, `images`,
 `videos`, `audio`, `maxSize`, `maxFiles`, `remove`,
 `typeRejected`, `sizeRejected`, `countRejected`, `duplicateRejected`.
-The messages use `{name}`, `{size}`, `{count}` and `{types}` placeholders. Existing
+The messages use `{name}`, `{size}`, `{count}` and `{types}` placeholders.
+
+On Android, Chrome asks for the camera when the file chooser's `accept` names
+a video type and for the microphone when it names an audio type (extensions
+count: `.mp4` is video, `.mp3` audio), so that it can offer recording. When
+`accept` names one, FilePicker gives the chooser `application/octet-stream`
+on Android instead: the plain document chooser, every file, no prompt. The hint
+still names the `accept` types, and a chosen file outside them is rejected with
+`type`. Desktop browsers and iOS get `accept` unchanged. `native-accept` sets
+the chooser's type everywhere when it should differ from `accept` (an empty
+string shows every file); set it to the `accept` value to keep recording on
+Android. Existing
 `title`/`description` props still win. Other controls retain their exposed text
 props and partial text objects; built-in text throughout the library now follows
 Provider locale. Explicit strings, including `''`, win over built-in translations.

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

@@ -3,21 +3,23 @@ interface PageTitleEntry {
     title: () => string;
 }
 /**
- * The phone bar's page title. 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.
+ * 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.
  */
 export interface AppPageTitleHost {
     /** The content column: a PageHeader outside it (in a dialog or sheet) keeps its own title. */
     main: Readonly<Ref<HTMLElement | null>>;
     entries: Ref<readonly PageTitleEntry[]>;
-    /** Whether the bar shows this entry's title (a phone, and no `title` prop). */
+    /** Whether the bar shows this entry's title, so its PageHeader keeps the heading for screen readers only. */
     shows: (entry: PageTitleEntry) => boolean;
 }
 export declare const APP_PAGE_TITLE_KEY: InjectionKey<AppPageTitleHost>;
-export declare function createPageTitleHost(main: Readonly<Ref<HTMLElement | null>>, active: () => boolean): 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;
 /**
- * Hands a PageHeader's title to the phone bar. Returns whether the bar shows
+ * 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.
  */
 export declare function usePageTitle(element: Readonly<Ref<HTMLElement | null>>, title: () => string): ComputedRef<boolean>;

package/dist/components/app/app-tab-bar/AppTabBar.vue.d.ts

@@ -13,7 +13,9 @@ type __VLS_Props = {
     modelValue?: string;
     /**
      * Adds a last More tab. Defaults to on inside an AppLayout with a sidebar,
-     * where it opens the navigation drawer; it always emits `more`.
+     * where it opens the navigation drawer; it always emits `more`. Set to
+     * `false` when the tabs are the whole navigation: while the bar shows,
+     * the phone bar then drops its menu button too.
      */
     more?: boolean;
     /** Hides the bar, for example while a full-screen drawer covers the page. */

package/dist/components/app/page-content/pageSticky.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+/** For PageContent: the tallest height its sticky headers report, in px. */
+export declare function providePageSticky(): Readonly<Ref<number>>;
+/** For PageHeader: reports its height while it sticks, and nothing once it scrolls with the page. */
+export declare function useStickyHeight(element: Readonly<Ref<HTMLElement | null>>, sticks: () => boolean): void;

package/dist/components/composite/file-picker/FilePicker.vue.d.ts

@@ -8,7 +8,18 @@ export type FileRejection = {
 type __VLS_Props = {
     modelValue?: File[];
     multiple?: boolean;
+    /** The file types taken (`.mp3,audio/*`), as the input's `accept`: chosen, dropped or pasted files of other types are rejected. */
     accept?: string;
+    /**
+     * The `accept` the browser's file chooser gets, when it should differ from
+     * `accept`; `accept` still decides which chosen files are taken, and an
+     * empty string lets the chooser show every file. Unset, it is `accept`,
+     * except on Android when `accept` names a video or audio type (`video/*`,
+     * `.mp4`, `.mp3`): Chrome there asks for the camera or microphone to offer
+     * recording, so the chooser gets `application/octet-stream` (every file,
+     * nothing to record). Set it to `accept` to keep recording on Android.
+     */
+    nativeAccept?: string;
     disabled?: boolean;
     maxFiles?: number;
     maxSize?: number;
@@ -22,6 +33,11 @@ type __VLS_Props = {
     text?: Partial<FilePickerText>;
     title?: string;
     description?: string;
+    /**
+     * Shows the built-in line of limits (accepted types, maximum size, file
+     * count) under the picker. Turn it off when the page states the limits itself.
+     */
+    showHint?: boolean;
 };
 declare var __VLS_53: {
     file: File;
@@ -46,6 +62,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     maxFiles: number;
     maxSize: number;
     directory: boolean;
+    showHint: 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/grid/cells/types.d.ts

@@ -190,8 +190,8 @@ export interface GridCellKindRenderer<V extends GridCellValue = GridCellValue> {
     /** Plain text for assistive tech and copy. */
     describe: (value: V, context: GridCellTextContext) => string;
     /**
-     * Target under the pointer, if any. Checkbox, rating, link icon and button
-     * act on the first click; chips and thumbnails only when `wasActive`.
+     * Target under the pointer, if any. Checkbox, rating, link icon, button and
+     * attachment thumbnail act on the first click; record chips only when `wasActive`.
      */
     hitTest?: (value: V, input: GridCellHitInput) => GridCellHit | null;
     /** Keyboard equivalent of the hit areas (Enter, Space, digits, Backspace). */

package/dist/grid.js

@@ -3668,15 +3668,15 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
   describe: (e) => dt(e.options.map((t) => t.label))
 }, gr = {
   draw: (e, t, n) => {
-    const o = { fill: t.cellTheme.badgeFill, color: t.cellTheme.link }, i = xo(e, t, n.records.map((a) => ({ label: a.label, colors: o })));
+    const o = { fill: t.cellTheme.badgeFill, color: t.cellTheme.text }, i = xo(e, t, n.records.map((a) => ({ label: a.label, colors: o })));
     Nt.set(He("link", t, n.records.map((a) => a.id)), i);
   },
   describe: (e) => dt(e.records.map((t) => t.label)),
   hitTest: (e, t) => Ro(Nt.get(He("link", Xt(t), e.records.map((n) => n.id))), t, (n) => ({ type: "open-record", id: e.records[n].id }))
-}, Xt = (e) => ({ width: e.size.width, metrics: e.metrics }), Ro = (e, t, n) => {
-  if (!t.wasActive || !e) return null;
-  const o = e.findIndex((i) => Xe(t.point, i));
-  return o < 0 ? null : { action: n(o), area: e[o] };
+}, Xt = (e) => ({ width: e.size.width, metrics: e.metrics }), Ro = (e, t, n, o = !1) => {
+  if (!t.wasActive && !o || !e) return null;
+  const i = e.findIndex((a) => Xe(t.point, a));
+  return i < 0 ? null : { action: n(i), area: e[i] };
 }, fr = (e, t, n, o, i, a, s) => {
   const { cellTheme: r, theme: c } = t, l = s ? t.images.get(s) : void 0;
   if (e.save(), e.beginPath(), e.arc(n + i / 2, o + i / 2, i / 2, 0, Math.PI * 2), e.closePath(), l)
@@ -3722,7 +3722,7 @@ const Xe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     }), l.more > 0 && $t(e, t, h, l.more, l.badgeWidth), Lt.set(He("attachment", t, n.files.map((g) => g.id)), m);
   },
   describe: (e) => dt(e.files.map((t) => t.name)),
-  hitTest: (e, t) => Ro(Lt.get(He("attachment", Xt(t), e.files.map((n) => n.id))), t, (n) => ({ type: "open-attachment", id: e.files[n].id }))
+  hitTest: (e, t) => Ro(Lt.get(He("attachment", Xt(t), e.files.map((n) => n.id))), t, (n) => ({ type: "open-attachment", id: e.files[n].id }), !0)
 }, Qn = (e) => `${Math.round(Math.max(0, Math.min(1, e)) * 100)}%`, wr = {
   draw: (e, t, n) => {
     if (n.value == null) return;

package/dist/i18n/filePicker.d.ts

@@ -13,6 +13,7 @@ export type FilePickerText = {
     images: string;
     videos: string;
     audio: string;
+    /** `maxFiles` shows only for a limit of two or more, so it is always plural. */
     maxSize: string;
     maxFiles: string;
     remove: string;

package/dist/index.d.ts

@@ -240,7 +240,7 @@ export { default as AsidePanel } from './components/app/aside-panel/AsidePanel.v
 export { clampAsideWidth, readAsidePreference, useAsidePreference, writeAsidePreference } from './components/app/aside-panel/asidePreference';
 export type { AsidePreference } from './components/app/aside-panel/asidePreference';
 export { default as ResponsiveView } from './components/app/responsive-view/ResponsiveView.vue';
-export { APP_ASIDE_KEY, APP_SIDE_MOTION_KEY, appPresentationForWidth, MOBILE_LAYOUT_MAX, WEB_ASIDE_DEFAULT, WEB_ASIDE_MAX, WEB_ASIDE_MIN, WEB_LAYOUT_MIN, WEB_RAIL_BELOW, WEB_RAIL_WIDTH } from './lib/adaptiveLayout';
+export { APP_ASIDE_KEY, APP_SHORT_KEY, APP_SIDE_MOTION_KEY, appPresentationForWidth, MOBILE_LAYOUT_MAX, SHORT_VIEWPORT_QUERY, WEB_ASIDE_DEFAULT, WEB_ASIDE_MAX, WEB_ASIDE_MIN, WEB_LAYOUT_MIN, WEB_RAIL_BELOW, WEB_RAIL_WIDTH } from './lib/adaptiveLayout';
 export type { AppAside, AppAsideState, AppNavigation, AppPresentation, WideLayout } from './lib/adaptiveLayout';
 export { default as AppTabBar } from './components/app/app-tab-bar/AppTabBar.vue';
 export type { AppTabBarItem } from './components/app/app-tab-bar/AppTabBar.vue';