@synopackageland/ui 0.20.11 → 0.20.13

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.20.13 (2026-11-05)
+
+- On a touch screen, small controls get the shared 44px tap box: links, close buttons (Dialog, Sheet, Toast, Notification, RecordPanel, Aside, Callout), PathDisplay copy, InfoTip, Card and ExpandableItem toggles, Pagination numbers, Breadcrumb crumbs and menu, DatePicker months, days and clear, the SplitButton caret, Accordion headers, navigation and tree rows. On a touch tablet, fields, selects, form buttons and menu rows are 44px tall. Phone and desktop sizes otherwise stay the same, and a link inside a sentence keeps its size
+- RecordPanel: a panel that is already open when the page loads (a record opened from a URL) now gets initial focus, by the same rules as a normal open, with no slide-in
+- RecordPanel: reopening a panel before its close animation ends (Back, then Forward) keeps its header and content instead of showing an empty panel
+
+## 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';