@synopackageland/ui 0.20.10 → 0.20.11

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 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:

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/composite/file-picker/FilePicker.vue.d.ts

@@ -22,6 +22,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 +51,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/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;