@synopackageland/ui 0.20.11 → 0.20.12

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

package/README.md

@@ -1210,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/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;

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