@synopackageland/ui 0.17.4 → 0.17.5

package/docs/button-policy.md

@@ -24,6 +24,7 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
 | Notification | `Notification` `confirm` / `cancel` | capsule | Cancel `secondary`, then the action `primary` |
 | Toolbar | `AppToolbar`, a row above a list | tool | `secondary`; `SplitButton` for Create and its variants |
 | Page header | `PageHeader` `#actions` | tool | one refresh `IconButton` per page |
+| Tab row | `SectionTabs` `#actions` | tool | `secondary`, for the shown section (Export, Check again) |
 | Section or card | `SettingsSection` / `Card` body, `#actions`, `#footer` | tool | `secondary`; a Save / Cancel row there goes in `FormActions` |
 | Beside a field | `InputGroup` | tool | `secondary` (Open, Copy, Test) |
 | Row of a list or grid | `ListItem` `#actions`, an `actions` column | tool | `IconButton` with a `label` |

package/docs/layout-rules.md

@@ -66,6 +66,8 @@ These rules keep pages built from `@synopackageland/ui` consistent. The componen
 ## Status
 
 - Show a headline number (space freed, files moved) with `Statistic`: `label`, `value`, optional `note`; `size="lg"` for the one number a page leads with. Put several in `Surface`s in a grid. Do not set font sizes for figures.
+- A row of counts that also filters the page (Online, Outdated, Failed) is a `StatTileGroup` of `StatTile`s, each with a `filter` key; the group's model is the filters that are on. A single filter tile takes `v-model`. Do not style buttons as tiles.
+- Show how a whole splits up (a volume by content, devices by read status) with `StackedBar`: one bar, a legend with the sizes, and one accessible name for all of it.
 - Colour a usage bar by meaning with `Progress tone` (`warning` when nearly full) rather than drawing your own bar.
 - Show a state as a `Badge` in a `KeyValueRow`, not as a sentence. A toned badge leads with a dot; keep `neutral` for plain values such as a version.
 - A passing result ("Settings applied") is a toast; a Callout is for something the user has to act on or a short risk note, with one title, one line and one action ([callout](callout.md)).

package/docs/size-and-split.md

@@ -1,8 +1,9 @@
-# SplitPane, SizeBar and StorageMeter
+# SplitPane, SizeBar, StorageMeter and StackedBar
 
-Three building blocks for storage pages: two panes the user resizes, a size
-bar for a list row, and a "free now → free after" projection. All three are
-styled with classes only and work inside the DSM-embedded theme.
+Building blocks for storage pages: two panes the user resizes, a size bar for
+a list row, a "free now → free after" projection, and a bar of the parts of a
+whole. All are styled with classes only and work inside the DSM-embedded
+theme.
 
 ## SplitPane
 
@@ -94,3 +95,43 @@ part use `--ui-primary`. Hooks: `data-ui-storage-meter`,
 `data-ui-storage-meter-now`, `data-ui-storage-meter-after`,
 `data-ui-storage-meter-used`, `data-ui-storage-meter-freeing`
 (`data-at-least`).
+
+## StackedBar
+
+One 6px bar of the parts of a whole, with a legend of their sizes under it.
+With `total` it shows capacity: the parts against the volume's size, the rest
+as free space. Without it, it shows composition: the parts fill the bar.
+
+```vue
+<StackedBar
+  label="Volume 1"
+  :total="volume.size"
+  :segments="[
+    { label: 'Photos', value: photos, tone: 'primary' },
+    { label: 'Backups', value: backups, color: 'var(--ui-accent-7)' },
+    { label: 'Snapshots', value: snapshots, tone: 'warning' },
+  ]"
+/>
+<StackedBar label="Read coverage" :segments="coverage" :format="n => `${n} devices`" />
+```
+
+| Prop | Default | Meaning |
+| --- | --- | --- |
+| `segments` | required | `{ label, value, tone?, color?, key? }[]`. `tone` is `primary` (default), `info`, `success`, `warning`, `danger` or `neutral`; `color` (any CSS colour) wins over it; `key` names the part in its hooks (default: the label). A value that is 0, negative or not a number draws nothing and counts as 0. |
+| `total` | unset | The whole. What the parts leave is the free part; a total smaller than the parts grows to them. |
+| `label` | unset | Names the bar before its parts in the accessible name: `Volume 1: …`. |
+| `remainderLabel` | "Free" | The free part's word; an empty string leaves it out of the legend and the name. |
+| `legend` | `true` | The legend under the bar. |
+| `format` | `formatFileSize` | Value formatter (DSM's 1024 base). |
+
+The whole is one `role="img"` named by every part and its size, then the free
+part and "Total" when there is a `total`, joined as the UI language lists
+them: "Volume 1: Photos 820 GB, Backups 1.4 TB, Free 1.7 TB, Total 4 TB". The
+bar and legend are hidden from assistive technology, so nothing is read
+twice. `primary` and `info` are the same blue in DSM: give neighbouring parts
+different tones, or a lighter shade such as `var(--ui-accent-7)` through
+`color`. A non-zero part is at least 2px wide, and a 1px surface line separates
+neighbouring parts. The track colour is `--ui-stacked-bar-track` (default
+`--ui-gray-a3`). Hooks: `data-ui-stacked-bar`, `data-ui-stacked-bar-track`,
+`data-ui-stacked-bar-segment` (`data-key`, `data-tone`),
+`data-ui-stacked-bar-legend`, `data-ui-stacked-bar-remainder`.

package/docs/theme-hooks.md

@@ -90,6 +90,11 @@ here stay implementation details and can change in any release.
 | `data-ui-dialog`, `data-ui-sheet` | `Dialog` / `Sheet` panels | present |
 | `data-ui-list-item-title`, `-description`, `-meta`, `-actions`, `-leading` | `ListItem` parts | present |
 | `data-ui-statistic-label`, `-value`, `-note` | `Statistic` parts | present |
+| `data-ui-stat-tile` | `StatTile` (`data-tone`; a filter tile also `data-state` `on` / `off`) | present |
+| `data-ui-stat-tile-label`, `-value`, `-unit`, `-note` | `StatTile` parts | present |
+| `data-ui-stat-tile-group` | `StatTileGroup` | present |
+| `data-ui-stacked-bar`, `-track`, `-segment`, `-legend`, `-remainder` | `StackedBar` parts (a segment has `data-key` and `data-tone`) | present |
+| `data-ui-section-tabs-row`, `data-ui-section-tabs-actions` | `SectionTabs` with `#actions`: the row and the actions | present |
 | `data-tone` | `Callout` | `info`, `success`, `warning`, `danger` |
 | `data-variant` | `Callout` | `soft`, `inline` |
 | `data-fill` | `Callout` | present when it spans its container |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.17.4",
+  "version": "0.17.5",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",