@synopackageland/ui 0.13.2 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.14.0 (2026-10-22)
+
+Additive only: existing props, defaults and DOM stay as they were.
+
+- Add `SplitPane`: two panes, horizontal or vertical, with a separator moved by pointer, arrow keys (Shift for larger steps, Home/End to the minimums) or reset by a double click. `min-start`/`min-end` in px; `storage-key` remembers the share per orientation in `localStorage` (guarded, falling back to `default-size`). The separator is a focusable `role="separator"` with value, orientation and `aria-controls`.
+- Add `SizeBar`: a 4px two-part bar for a list cell (a size against the largest row, with an emphasised part such as what can be freed).
+- Add `StorageMeter`: "Free now → Free after" with a used/freeing/free bar, an "At least" lower-bound state and a pending state; follows the surrounding text colour.
+- `DataGrid`: `row-selectable(row)` disables a row's box and the header box skips it; `row-select-disabled-reason(row)` shows why in a keyboard-reachable tooltip; `select-all-scope="all"` makes the header box act on every filtered row across pages. The header box shows a mixed state when some rows are selected; a click when all are selected clears them. `labels.selectRow` also receives the row.
+- `Checkbox`: `indeterminate` shows the mixed state (a dash, `aria-checked="mixed"`); a click emits `true`.
+- `PageHeader`: each action keeps its content width, so a full-width control (a `Select`) in the actions no longer takes the whole row and pushes the other actions onto lines of their own.
+- New strings in all nine built-in languages: "Resize panes", "Free now", "Free after", "At least {size}", "Free now {now}, free after {after}".
+- `docs/size-and-split.md` documents the three components. A test now keeps `<style>` blocks out of library components: the embedded theme is built from classes only, so such styles would never reach an app.
+
 ## 0.13.2 (2026-10-21)
 
 - Fix inherited `--ui-nav-row-height` overrides: web and mobile layout modes now supply only an internal fallback. A theme can set the public token on any ancestor, including outside `AppLayout`; unset, window/web/mobile rows remain 42/40/46px. Sidebar, top-navigation and tree rows use the same fallback, and explicit density values remain supported.

package/README.md

@@ -472,7 +472,7 @@ Primitives:
 - Input / Textarea
 - Checkbox / CheckboxGroup / RadioGroup / Switch
 - Select
-- Badge / StatusDot / Separator / Spinner / LoadingMask / LoadingArea / Progress / Skeleton / Surface
+- Badge / StatusDot / Separator / Spinner / LoadingMask / LoadingArea / Progress / SizeBar / Skeleton / Surface
 - SplitButton
 - Tooltip / Popover / DropdownMenu / ContextMenu / Dialog
 - Sheet / Drawer
@@ -492,6 +492,7 @@ DSM-style application building blocks:
 - AppRoot (DSM-embedded app root)
 - AppLayout / AppSidebar / AppToolbar / AppActionBar
 - PageHeader / SectionTabs
+- SplitPane / StorageMeter (see [docs/size-and-split.md](docs/size-and-split.md))
 
 `Tabs` and `SectionTabs` move a raised selection notch in 120ms. Selected labels
 are blue; main labels are bold 14px and section labels bold 13px. `Tabs` fades its
@@ -616,8 +617,9 @@ phone; use `DataGrid` for anything a user searches or arranges.
 - **Paging.** Long lists are paged in the footer (20 rows per page by default). `page` and `page-size` work unbound or with `v-model:page` / `v-model:page-size`; `page-sizes` adds the page-size choice. A new filter, sort or page size goes back to page 1, and a page past the end shows the last one. With `:local-pagination="false"` and `total-rows` the app pages on its server. Virtual scrolling is not provided.
 - **Saved view.** `state-key="downloads"` saves the user's column order, hidden columns, widths, sort and page size in this browser (localStorage) and restores them; bound props win. To keep them on a server, bind the v-models instead, or use the exported `loadGridState` / `saveGridState`. `resetColumns()` (exposed) and the chooser's Reset restore order, visibility and widths.
 - **Layout.** Sticky header (default), column dividers, hover and selected row colours, `max-height` to scroll inside the grid. `selectable` adds checkboxes; with `select-on-row-click` a row click selects the row and Ctrl/Cmd-click toggles it.
+- **Selection.** The header box selects every selectable row of its scope: the current page (`select-all-scope="page"`, the default) or every row the filter leaves, across pages (`"all"`). It is checked when all of them are selected, mixed (`aria-checked="mixed"`, a dash) when some are, and a click when all are clears them; keys outside the scope (another page, rows the filter hides) are kept. `row-selectable(row)` returning `false` disables a row's box, and the header box skips that row and keeps its state. `row-select-disabled-reason(row)` says why: the box is wrapped in a Tab stop with that text as its accessible name and as a `Tooltip`, so the reason is visible on hover and keyboard focus, not only in a native `title`. With no selectable row the header box is disabled.
 - **Footer bar.** `footer` shows the DSM bar with the item count; `refreshable` adds the refresh button (`@refresh`, `refreshing` spins it). Without `footer` it appears when there is more than one page, a page-size choice that matters, or a `#footer` slot.
-- **Localisation.** Every built-in string goes through `labels`: `empty`, `noMatch`, `items(count)`, `filtered(count, total)`, `page(page, count)`, `previous`, `next`, `pageSize`, `refresh`, `selectAll`, `selectRow(key)`, `resizeColumn(label)`, `columns`, `resetColumns`, `hiddenByWidth`. `emptyText` still works.
+- **Localisation.** Every built-in string goes through `labels`: `empty`, `noMatch`, `items(count)`, `filtered(count, total)`, `page(page, count)`, `previous`, `next`, `pageSize`, `refresh`, `selectAll`, `selectRow(key, row)`, `resizeColumn(label)`, `columns`, `resetColumns`, `hiddenByWidth`. `emptyText` still works.
 - **Loading.** `loading` masks the table with a centred indicator; `loading-text` adds a message.
 - **Footer layout.** The footer has top and bottom divider lines and a separator
   before Refresh. In a flex column with a bounded height, the grid fills the

package/dist/components/composite/data-grid/DataGrid.vue.d.ts

@@ -134,6 +134,12 @@ type __VLS_Props = {
     selectable?: boolean;
     /** With `selectable`: a row click selects that row; Ctrl/Cmd-click toggles it. */
     selectOnRowClick?: boolean;
+    /** With `selectable`: `false` disables a row's box; the header box skips that row. */
+    rowSelectable?: (row: Record<string, unknown>) => boolean;
+    /** Why a row's box is disabled, in a tooltip on it that the keyboard also reaches. */
+    rowSelectDisabledReason?: (row: Record<string, unknown>) => string | undefined;
+    /** What the header box selects: the rows of this `page` (default), or `all` the rows the filter shows, on every page. */
+    selectAllScope?: 'page' | 'all';
     /** One selected row at a time, picked by clicking the row; no checkbox column. */
     singleSelect?: boolean;
     /** Bind to control the page; leave unset and the grid pages by itself. */
@@ -300,6 +306,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     defaultSort: DataGridSort | null;
     selectedKeys: string[];
     selectOnRowClick: boolean;
+    rowSelectable: (row: Record<string, unknown>) => boolean;
+    rowSelectDisabledReason: (row: Record<string, unknown>) => string | undefined;
+    selectAllScope: "page" | "all";
     singleSelect: boolean;
     localFilter: boolean;
     localSort: boolean;

package/dist/components/composite/data-grid/labels.d.ts

@@ -11,7 +11,8 @@ export type DataGridLabels = {
     next: string;
     refresh: string;
     selectAll: string;
-    selectRow: (key: string) => string;
+    /** The row's box; `row` is the row itself, to name it by its content rather than its key. */
+    selectRow: (key: string, row?: Record<string, unknown>) => string;
     resizeColumn: (label: string) => string;
     expandRow?: (key: string) => string;
     collapseRow?: (key: string) => string;

package/dist/components/composite/storage-meter/StorageMeter.vue.d.ts

@@ -0,0 +1,27 @@
+export type StorageMeterLabels = {
+    freeNow?: string;
+    freeAfter?: string;
+};
+type __VLS_Props = {
+    /** The volume's size in bytes. */
+    total: number;
+    /** Free bytes now. */
+    free: number;
+    /** Bytes the release frees: they move from used to free. */
+    freeing: number;
+    /** `freeing` is a lower bound: "at least". */
+    atLeast?: boolean;
+    /** A better number is being worked out (`aria-busy`). */
+    pending?: boolean;
+    labels?: StorageMeterLabels;
+    /** Formats bytes; DSM sizes (`formatFileSize`) by default. */
+    format?: (bytes: number) => string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    pending: boolean;
+    format: (bytes: number) => string;
+    labels: StorageMeterLabels;
+    atLeast: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/containers/split-pane/SplitPane.vue.d.ts

@@ -0,0 +1,49 @@
+type __VLS_Props = {
+    /** The start pane's share of the room, 0–1. Bind to control it; leave unset and the pane tracks it. */
+    modelValue?: number;
+    /** The share it starts with and goes back to on a double click. */
+    defaultSize?: number;
+    /** `horizontal`: side by side, start on the left. `vertical`: start above end. */
+    orientation?: 'horizontal' | 'vertical';
+    /** The start pane's minimum size in px. */
+    minStart?: number;
+    /** The end pane's minimum size in px. */
+    minEnd?: number;
+    /** The separator's thickness in px: the room between the panes. */
+    gap?: number;
+    /** Remembers the share in `localStorage` under `<storageKey>:<orientation>`; unreadable storage falls back to `defaultSize`. */
+    storageKey?: string;
+    /** The separator's accessible name. */
+    label?: string;
+};
+declare function reset(): void;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    end?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    reset: typeof reset;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    label: string;
+    modelValue: number;
+    orientation: "horizontal" | "vertical";
+    gap: number;
+    defaultSize: number;
+    minStart: number;
+    minEnd: number;
+    storageKey: string;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/primitives/checkbox/Checkbox.vue.d.ts

@@ -3,6 +3,8 @@ type __VLS_Props = {
     disabled?: boolean;
     label?: string;
     description?: string;
+    /** Some but not all of what the box stands for is chosen (a header "select all"): a dash, `aria-checked="mixed"`. A click checks it. */
+    indeterminate?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
@@ -11,6 +13,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     disabled: boolean;
     modelValue: boolean;
+    indeterminate: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/primitives/size-bar/SizeBar.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    value: number | null | undefined;
+    max: number;
+    part?: number | null;
+    /** The bar's accessible name; without it the bar is decorative (`aria-hidden`). */
+    label?: string;
+    tone?: 'primary' | 'success' | 'warning' | 'danger';
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    tone: "primary" | "success" | "warning" | "danger";
+    part: number | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/i18n/text.d.ts

@@ -35,6 +35,11 @@ export declare const englishUiText: {
     readonly "Collapse navigation": "Collapse navigation";
     readonly "Expand navigation": "Expand navigation";
     readonly "Resize navigation": "Resize navigation";
+    readonly "Resize panes": "Resize panes";
+    readonly "Free now": "Free now";
+    readonly "Free after": "Free after";
+    readonly "At least {size}": "At least {size}";
+    readonly "Free now {now}, free after {after}": "Free now {now}, free after {after}";
     readonly Sections: "Sections";
     readonly Slider: "Slider";
     readonly "Increase value": "Increase value";

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { default as LoadingMask } from './components/primitives/loading/LoadingM
 export { default as LoadingArea } from './components/primitives/loading/LoadingArea.vue';
 export { default as LoadingIndicator } from './components/primitives/loading/LoadingIndicator.vue';
 export { default as Progress } from './components/primitives/progress/Progress.vue';
+export { default as SizeBar } from './components/primitives/size-bar/SizeBar.vue';
 export { default as Skeleton } from './components/primitives/skeleton/Skeleton.vue';
 export { default as SectionSkeleton } from './components/primitives/skeleton/SectionSkeleton.vue';
 export { default as Surface } from './components/primitives/surface/Surface.vue';
@@ -191,6 +192,9 @@ 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 SplitPane } from './components/containers/split-pane/SplitPane.vue';
+export { default as StorageMeter } from './components/composite/storage-meter/StorageMeter.vue';
+export type { StorageMeterLabels } from './components/composite/storage-meter/StorageMeter.vue';
 export { default as PageContent } from './components/app/page-content/PageContent.vue';
 export { default as SectionTabs } from './components/app/section-tabs/SectionTabs.vue';
 export type { SectionTab } from './components/app/section-tabs/SectionTabs.vue';