@synopackageland/ui 0.17.15 → 0.18.0

package/docs/button-policy.md

@@ -20,6 +20,7 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
 | Dialog, sheet or wizard footer | `Dialog`, `Sheet`, `Wizard` `#footer` | capsule | Cancel `secondary`, then OK `primary` |
 | Wizard footer | `Wizard` | capsule | The step's `#actions` at the start (a quiet `ghost` `kind="tool"` text action); Cancel `secondary` (a page wizard only), Back `secondary`, then Next / Apply / Finish `primary` at the end |
 | Confirmation of a destructive action | `Dialog` `#footer` | capsule | Cancel `secondary`, then Delete `danger` |
+| Destructive choice beside the main action | `Dialog` `#footer` | capsule | Cancel `secondary`, the destructive choice `danger-outline` (Replace theirs), then the main action `primary` (Save as copy) |
 | Form or window footer | `FormActions`, `AppActionBar`, `Footbar`, `Panel` `#fbar` | capsule | Reset `secondary`, then Apply `primary` |
 | 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 |
@@ -36,7 +37,8 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
    wizard. An action that stays on the page, such as Disable this connection,
    Open or Check again, is a tool button even in a section footer.
 2. One main action per footer: one `primary`, or one `danger` for a
-   destructive confirmation. The others are `secondary`.
+   destructive confirmation. The others are `secondary`, or `danger-outline`
+   for a destructive choice that is not the main one.
 3. The main action goes last, at the right edge: Cancel then OK, Reset then
    Apply. A footer is right-aligned, except `FormActions` in a page form, which
    starts at the field edge.

package/docs/callout.md

@@ -9,6 +9,7 @@ has its own component, and none of them is a full-width banner.
 | A passing result: "Settings applied", "The check passed", "Copied" | `useToast()` | A toast that fades after 4.5 s. Do not leave a Callout behind for it. |
 | Something the user has to act on: a missing setting, a failed connection, a sign-in that waits | `<Callout>` | One-line title, at most one line of text, one action. |
 | A risk or a limit of a feature | `<Callout variant="inline">` | One short sentence; longer text in `#details` behind "Learn more", or a link. |
+| A state of the page that fits its toolbar row: "Two devices are offline", "Read only" | `<Callout variant="hint">` | The icon and a few words on one line; the details in a tooltip. |
 | A failure the user has to know about now, outside the page | `Notification` / `MessageBox` | See their docs. |
 
 ## Closing
@@ -57,6 +58,12 @@ icon and one line of secondary text, with a link or a small button after it.
 Use it for a note under a field or a section heading, where a panel would
 weigh more than the note.
 
+`variant="hint"` is one toolbar-high line: the tone's icon, the title in bold
+and the message after it, cut with an ellipsis when the row is short. The
+`#details` slot goes behind an info mark whose tooltip opens on hover or focus,
+and on a tap with a touch pointer. A hint has no close button; it goes away
+when its cause does. Put it in a `PageToolbar` or another row of controls.
+
 ### Why this one
 
 Three directions were drawn as working prototypes, each in every tone, with
@@ -122,11 +129,11 @@ Two earlier looks were rejected:
 | Prop / slot | Use |
 | --- | --- |
 | `tone` | `info` (default), `success`, `warning`, `danger` |
-| `variant` | `soft` (default) or `inline` |
+| `variant` | `soft` (default), `inline` or `hint` |
 | `title` | One line, the thing to know |
 | default slot | The message |
 | `#actions` | One action, at the end of the message |
-| `#details` + `v-model:expanded` | Longer text behind a "Learn more" toggle (`moreLabel`, `lessLabel`) |
+| `#details` + `v-model:expanded` | Longer text behind a "Learn more" toggle (`moreLabel`, `lessLabel`); in a hint, the tooltip of its info mark (named by `moreLabel`) |
 | `code` | A machine error code, shown quieter after the message |
 | `dismissible` (default `true`), `dismissKey`, `closeLabel`, `@close` | The close button; the callout returns when its text or `dismissKey` changes. `false` only for a state that must stay in view |
 | `fill` | Span the container instead of stopping at 720px |

package/docs/layout-rules.md

@@ -54,7 +54,7 @@ The setting is a form value, saved with the page's Apply action. It does not nav
 ## Settings pages
 
 - Use `<SectionTabs fill keep-mounted>` for settings with local unsaved drafts. `keep-mounted` mounts every supplied item panel immediately and hides inactive panels with `v-show`; their effects stay active. Without it, switching tabs unmounts the previous panel. `fill` alone only controls layout. Keep persistent business data and background work in the app when needed.
-- `SettingsPage` spaces direct sibling `SettingsSection`s by `--ui-space-6` (24px); place them directly in its default slot without a `Space` wrapper. `Fieldset` keeps its own DSM spacing.
+- `SettingsPage` stacks its body without a `Space` wrapper: each visible direct child sits `--ui-space-4` (16px) under the one before (a Callout, a skeleton, a section), and sibling `SettingsSection`s are `--ui-space-6` (24px) apart. Place them directly in its default slot. A `hidden` child (a closed Callout) takes no gap, and `Fieldset` keeps its own DSM spacing.
 - A settings page has one label column. `FormItem` (horizontal), `SettingsRow` and `KeyValueRow` share `--ui-label-column` (`--ui-label-width`, at most 40% of a narrow row) and `--ui-label-gap`, so SDK panels and App rows line up; `FormActions inset` starts at the same edge. Labels and `KeyValueRow` values break between words, not inside one. Do not pass a different `labelWidth` per section.
 - Labels sit left in the column, as on DSM's own settings pages: the eye runs down one edge, and a long label wraps instead of pushing the value.
 - Colours are fixed by role: section title `--ui-text` semibold 14px, label and value `--ui-text`, help text `--ui-text-secondary` 12px.
@@ -107,7 +107,7 @@ The setting is a form value, saved with the page's Apply action. It does not nav
 ## Page
 
 - `PageHeader` sticks to the top while the content scrolls.
-- A settings page with tabs is `SectionTabs fill` with one `SettingsPage` per panel, in a container with a height (a window, `AppLayout height="fill"`): the tab strip stays at the top, the footer at the bottom, and only the sections scroll. Without a height (a phone page), the page scrolls, the strip sticks to the top and the footer to the bottom, above the safe area. Under 520px of row width labels stack over their controls.
+- A settings page with tabs is `SectionTabs fill` with one `SettingsPage` per panel, in a container with a height (a window, `AppLayout height="fill"`; in a flex column it takes the height its siblings leave, with no override): the tab strip stays at the top, the footer at the bottom, and only the sections scroll. Without a height (a phone page), the page scrolls, the strip sticks to the top and the footer to the bottom, above the safe area. Under 520px of row width labels stack over their controls.
 - `DataGrid` and `DataTable` fill the height their flex-column container leaves by default (`fill`), as DSM's lists do: the header row stays, the rows scroll inside the table, and a DataGrid's footer ("3 items", the pager) sits at the container's bottom whatever the row count. A list page uses `AppLayout height="fill"` and `PageContent height="fill"` so the table, its last child, gets that height. Where the page itself scrolls (a phone), the footer sticks to the bottom of the viewport above the safe area. Give a short table inside a form, a settings section or a dialog `:fill="false"`: it is as tall as its rows. Do not let the whole page scroll past a 50-row page to reach the pager.
 - `PageHeader` keeps the title and its `meta` slot (an info button, a chip) on one line. Actions that would crowd the title move under it, at the right edge; a title longer than its line ends in "…" and shows in full on hover.
 - `EmptyState` fills the remaining height and centres its content. Do not add footnotes below it.

package/docs/theme-hooks.md

@@ -79,20 +79,35 @@ here stay implementation details and can change in any release.
 
 | Attribute | On | Values |
 | --- | --- | --- |
-| `data-variant` | `Button` | `primary`, `secondary`, `ghost`, `danger` |
+| `data-variant` | `Button` | `primary`, `secondary`, `ghost`, `danger`, `danger-outline` |
 | `data-variant` | `IconButton` | `primary`, `secondary`, `ghost` |
 | `data-variant` | `SplitButton`'s outer group | `primary`, `secondary` |
 | `data-kind` | `Button` | `tool`, `action` |
 | `data-loading`, `data-disabled` | `Button` | present while loading / explicitly disabled |
+| `data-lead`, `data-trail` | `Button`'s label | present when an element (icon, `StatusDot`) sits before / after the text |
 | `data-split-main`, `data-split-arrow` | `SplitButton`'s two halves | present |
 | `data-ui-surface` | `Surface` and every `Card` frame | present |
 | `data-variant` | `Surface` / `Card` frame | `default`, `inset` |
 | `data-ui-dialog`, `data-ui-sheet` | `Dialog` / `Sheet` panels | present |
+| `data-modal` | a `Sheet` panel | `false` on a non-modal sheet |
+| `data-ui-badge-dot` | `Badge`'s leading dot | present |
+| `data-menu-description` | a `DropdownMenu` entry's second line | present |
+| `data-ui-segment-count` | a `SegmentItem`'s count pill | 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-page-toolbar`, `-start`, `-actions` | `PageToolbar` and its two sides | present |
+| `data-ui-summary-card` | `SummaryCard` (`data-state` `loading`, `error`, `ready`; `data-wide`) | present |
+| `data-ui-summary-card-title`, `-state`, `-figures`, `-figure`, `-body`, `-note`, `-error` | `SummaryCard` parts | present |
+| `data-ui-skeleton` | `SectionSkeleton` | `lines`, `figures`, `rows` (parts `data-ui-skeleton-line`, `-figure`, `-row`) |
+| `data-ui-timeline-row` | `TimelineRow` (class `ui-timeline-row`, `data-tone`, `data-expanded`); under a 600px container the chip and time move under the meta | present |
+| `data-ui-timeline-row-leading`, `-icon`, `-title`, `-meta`, `-chip`, `-time`, `-actions`, `-toggle`, `-detail` | `TimelineRow` parts | present |
+| `data-ui-new-items-pill` | `NewItemsPill` (`data-edge` `top`, `bottom`) | present |
+| `data-ui-facet-panel` | `FacetPanel` (`data-presentation` `panel`, `sheet`) | present |
+| `data-ui-facet-group` (`data-key`), `-group-toggle`, `data-ui-facet-value` (`aria-pressed`), `data-ui-facet-count`, `data-ui-facet-panel-clear`, `-trigger`, `-count` | `FacetPanel` parts | present |
+| `data-ui-tag-editor` (`data-editing`), `-read`, `-field`, `-input`, `-list`, `-option` (`data-kind` `option`, `create`) | `TagEditor` parts | present |
 | `data-ui-fieldset` | `Fieldset` | present |
 | `data-fieldset-description` | `Fieldset` description under the title | present |
 | `data-ui-form-group` | `FormGroup` (`data-disabled` while disabled) | present |

package/package.json

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