@synopackageland/ui 0.17.4 → 0.17.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.17.5 (2026-10-29)
+
+Additive only: existing props, defaults and DOM stay as they were.
+
+- `SectionTabs` takes an `#actions` slot for page actions on the tab row: right-aligned over the same baseline, and on a row too narrow for both they wrap onto a line of their own above the tabs, still right-aligned (`data-ui-section-tabs-row`, `data-ui-section-tabs-actions`). Use tool buttons there. Without the slot the strip renders as before; attributes stay on the strip.
+- Add `StatTile`: a KPI tile with a `label`, a `value` (or slot) with an optional `unit`, a `note` and an optional `tone` dot. With `v-model` it is a toggle button (`aria-pressed`, Enter and Space, focus ring, accent border and fill when pressed); without one it is a plain tile.
+- Add `StatTileGroup`: a filter bar of `StatTile`s keyed by `filter`, a named `role="group"` in equal columns at least `--ui-stat-tile-min` (10rem) wide. An array model lets several be on, a string model one.
+- Add `StackedBar`: the parts of a whole in one 6px bar with a legend. With `total` the rest is shown as free space; without it the parts fill the bar. Each part has a label and a tone (or a CSS `color`); values are formatted with `formatFileSize` unless `format` says otherwise. The whole is one `role="img"` named by every part, the free part and the total, in the UI language.
+- New strings in all nine built-in languages: "Free" and "Total {size}".
+
 ## 0.17.4 (2026-10-28)
 
 - `ListItem` takes a `#leading` slot for an icon, avatar or initials tile before the title (`data-ui-list-item-leading`). It does not shrink, and the title, description and extra content keep their room beside it; a list item without it renders as before, inside one more wrapper.

package/README.md

@@ -530,7 +530,8 @@ 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))
+- Statistic / StatTile / StatTileGroup
+- SplitPane / StorageMeter / StackedBar (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
@@ -551,11 +552,51 @@ and End move focus between tabs; Enter or Space selects one. In a grid or flex p
 </SectionTabs>
 ```
 
+Page actions for the shown section go in `#actions`, on the tab row at the
+right edge over the same baseline; when the row is too narrow for both, the
+actions wrap onto a line of their own above the tabs, still right-aligned.
+They are tool buttons ([button policy](docs/button-policy.md)). Attributes stay
+on the strip (`nav`).
+
+```vue
+<SectionTabs v-model="section" :items="sections">
+  <template #actions>
+    <Button>Export</Button>
+    <Button>Check again</Button>
+  </template>
+</SectionTabs>
+```
+
 Navigation-only `SectionTabs` usage still works. For content managed separately
 by the caller, add `class="ui-tab-panel"` to a panel keyed by the selected value
 to use the same short fade. These effects and the loading ring respect the
 system's reduced-motion preference.
 
+### StatTile: counts that filter
+
+`StatTile` is a KPI tile: a small `label`, the figure (`value`, or the default
+slot) with an optional `unit` word after it, and a `note` (or `#note`). `tone`
+(`neutral`, `info`, `success`, `warning`, `danger`) puts a status dot before
+the label; the label still says what the number means. The app formats the
+value, as for `Statistic`.
+
+Without a model it is a plain tile. With `v-model` it is a toggle button
+(`aria-pressed`): Tab reaches it, Enter or Space presses it, it shows the focus
+ring, and a pressed tile has the accent border and a light accent fill.
+`disabled` keeps it in place, dimmed. In a `StatTileGroup` the group owns the
+state and each tile's `filter` is its key: an array model lets several be on
+(a filter bar), a string model or `type="single"` one, and pressing it again
+clears it. The group is a named `role="group"` (`label`) laying the tiles out in
+equal columns at least `--ui-stat-tile-min` (10rem) wide, one per row when
+narrower.
+
+```vue
+<StatTileGroup v-model="filters" label="Filter devices">
+  <StatTile filter="outdated" label="Outdated DSM" :value="4" unit="devices" tone="warning" />
+  <StatTile filter="failed" label="Failed sign-in" :value="27" unit="attempts" tone="danger" note="Last 24 hours" />
+</StatTileGroup>
+```
+
 ### Status: StatusDot, StepList, ConnectionTopology
 
 `StatusDot` is an 8px tone dot; `pulse` ripples a ring out of it for a state

package/dist/components/app/section-tabs/SectionTabs.vue.d.ts

@@ -8,9 +8,11 @@ type __VLS_Props = {
     modelValue: string;
     items: SectionTab[];
 };
-declare var __VLS_2: `panel-${string}`, __VLS_3: {};
+declare var __VLS_7: {}, __VLS_10: `panel-${string}`, __VLS_11: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    actions?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/components/composite/stacked-bar/StackedBar.vue.d.ts

@@ -0,0 +1,31 @@
+export type StackedBarTone = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export type StackedBarSegment = {
+    label: string;
+    value: number;
+    tone?: StackedBarTone;
+    /** A CSS colour for a part no tone fits; it wins over `tone`. */
+    color?: string;
+    /** Identity for the part's hooks (`data-key`); defaults to its label. */
+    key?: string;
+};
+type __VLS_Props = {
+    segments: StackedBarSegment[];
+    /** The whole, such as the volume's size; what the parts leave is shown as free. */
+    total?: number;
+    /** Names the bar for assistive technology, before the parts: `Volume 1`. */
+    label?: string;
+    /** The rest of `total` in the legend and summary; an empty string leaves it out. */
+    remainderLabel?: string;
+    legend?: boolean;
+    /** Formats a value; DSM sizes (`formatFileSize`) by default. */
+    format?: (value: 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<{}>, {
+    label: string;
+    legend: boolean;
+    format: (value: number) => string;
+    total: number;
+    remainderLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/stat-tile/StatTile.vue.d.ts

@@ -0,0 +1,42 @@
+export type StatTileTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+type __VLS_Props = {
+    label: string;
+    value?: string | number;
+    /** A word after the figure, in the label's size: `12 devices`. */
+    unit?: string;
+    note?: string;
+    /** A dot before the label; the label still says what the figure means. */
+    tone?: StatTileTone;
+    /** Pressed state of a standalone filter tile; leave unset for a plain tile. */
+    modelValue?: boolean;
+    /** The tile's key inside a StatTileGroup. */
+    filter?: string;
+    disabled?: boolean;
+};
+declare var __VLS_13: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+} & {
+    note?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    filter: string;
+    disabled: boolean;
+    value: string | number;
+    modelValue: boolean;
+    tone: StatTileTone;
+    unit: string;
+    note: 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/composite/stat-tile/StatTileGroup.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    modelValue?: string | string[];
+    /** Accessible name for the group (`aria-label`). */
+    label?: string;
+    /** Defaults to single select, or multi-select when the model is an array. */
+    type?: 'single' | 'multiple';
+    disabled?: boolean;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    label: string;
+    type: "single" | "multiple";
+    disabled: boolean;
+    modelValue: string | 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/i18n/text.d.ts

@@ -39,6 +39,8 @@ export declare const englishUiText: {
     readonly "Resize panes": "Resize panes";
     readonly "Free now": "Free now";
     readonly "Free after": "Free after";
+    readonly Free: "Free";
+    readonly "Total {size}": "Total {size}";
     readonly "At least {size}": "At least {size}";
     readonly "Free now {now}, free after {after}": "Free now {now}, free after {after}";
     readonly Sections: "Sections";

package/dist/index.d.ts

@@ -127,6 +127,9 @@ export { default as CellText } from './components/composite/table-cell/CellText.
 export { default as CellStatus } from './components/composite/table-cell/CellStatus.vue';
 export { default as ListItem } from './components/composite/list-item/ListItem.vue';
 export { default as Statistic } from './components/composite/statistic/Statistic.vue';
+export { default as StatTile } from './components/composite/stat-tile/StatTile.vue';
+export type { StatTileTone } from './components/composite/stat-tile/StatTile.vue';
+export { default as StatTileGroup } from './components/composite/stat-tile/StatTileGroup.vue';
 export type { DataTableColumn } from './components/composite/data-table/DataTable.vue';
 export { default as DataGrid } from './components/composite/data-grid/DataGrid.vue';
 export type { DataGridColumn, DataGridColumnWidths, DataGridLabels, ResolvedDataGridLabels, DataGridSort, DataGridGroup, DataGridExpandable, DataGridDraggable, DataGridReorder, DataGridCellUpdate, DataGridAdapter, DataGridCellSlotProps } from './components/composite/data-grid/DataGrid.vue';
@@ -199,6 +202,8 @@ export { default as PageHeader } from './components/app/page-header/PageHeader.v
 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 StackedBar } from './components/composite/stacked-bar/StackedBar.vue';
+export type { StackedBarSegment, StackedBarTone } from './components/composite/stacked-bar/StackedBar.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';