@synopackageland/ui 0.17.14 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 0.18.0 (2026-10-31)
+
+New page pieces for list-and-detail Apps. Nothing existing changes.
+
+- Add `PageToolbar`: the row under a page header, one control high on every page, with the default slot at the start (a sub-view switch, counts, filters) and `#actions` at the end; it wraps instead of clipping and shares the page's side padding.
+- Add `SummaryCard`: a section summary that is one button (`open`) with a title, a state `Badge` (`state`, `stateTone`), one to three `figures` (`{ label, value, tone }`), an optional default slot (a meter) and `note`. `loading` draws figure-shaped placeholders and `error` a line in place of the figures, never zeros; `wide` spans every column of a `CardGrid`.
+- `SectionSkeleton` takes `variant`: `figures` (a value bar over a label bar per figure) and `rows` (an icon, two text lines, a chip and a time per row) with `count`, beside the default `lines`.
+- Add `TimelineRow`: one event in a list, with `#leading` (a checkbox), a severity-tinted icon (`tone`, `icon` or `#icon`), a one-line `title` and `meta`, a `chip` (or `#chip`), `time` with `datetime`, `#actions`, and `#expand` behind a chevron (`v-model:expanded`). Under a 600px container the chip and time move under the meta.
+- Add `NewItemsPill`: a pill floating over a scroll container's top or bottom edge (`edge`), with the caller's `label` ("3 new events") and `click`.
+- Add `FacetPanel`: filter `groups` of values with counts, single or `multiple` per group, collapsible, with Clear filters once something is picked (`v-model` is `{ [group]: values[] }`). In the App's phone layout, or with `presentation="sheet"`, it is a Filters button with the picked count that opens the groups in a bottom sheet.
+- Add `TagEditor`: tags edited in place. It reads as chips; a click or Enter opens the editor; typing filters `options`, Enter adds the highlighted one or creates what was typed (`allow-create`), × removes, Backspace in the empty field removes the last chip, and Escape or a press outside closes it. Each change shows at once and goes to `save(next, previous)`; a rejection rolls the tags back and emits `error`.
+- `Callout` takes `variant="hint"`: the icon and a short message on one toolbar-high line, the `#details` in an info mark's tooltip that also opens on a tap; no close button.
+
+## 0.17.16 (2026-10-31)
+
+- `Popover` and `DropdownMenu` take `v-model:open`, so a caller can close one after a pick or open it from a link. Without `open` they keep their own state as before.
+- A `DropdownMenu` entry (item, checkbox or radio) takes `description`: a second, quieter 12px line under the label (`data-menu-description`).
+- `Button` takes `variant="danger-outline"`: the grey control with a red border and label, for a destructive choice beside the main action (Replace theirs next to Save as copy). It does not count as a footer's main action.
+- `Button` spaces any element before or after its text 8px from it, a `StatusDot` as well as an icon (`data-lead`, `data-trail` on the label); an element between two texts is left alone.
+- `Sheet` takes `:modal="false"`: a side panel over the page with no overlay, scroll lock, focus trap or `aria-hidden` on the page (`data-modal="false"`). A press outside leaves it open unless `close-on-outside`; Escape and the close button close it.
+- `Badge` takes `dot`: `true` leads every tone with the dot, so a neutral Paused or Pending lines up with Normal beside it; `false` drops it. By default only a non-neutral tone has one.
+- `SegmentItem` takes `count`: a pill after the label (`data-ui-segment-count`), zero included, tinted on the selected item. Toolbar items keep their width: a row of more views than fit scrolls sideways without a scrollbar instead of cutting labels, and the selected item scrolls into view.
+
+- `SettingsPage` spaces every visible direct child of its body 16px (`--ui-space-4`) after the one before, so a page drops its own `Space direction="column"` wrapper around callouts, skeletons and sections. Sibling `SettingsSection`s stay 24px apart, `Fieldset`s keep their DSM gap, and a `hidden` child (a closed Callout) takes no gap.
+- `SectionTabs fill` takes the height its siblings leave in a flex column (`flex: 1 1 0%`), so a consumer no longer needs `flex: 1 1 0; height: auto`. In a column without a height (a phone page) it still sizes to its content.
+
+## 0.17.15 (2026-10-31)
+
+- `RadioGroup` takes `variant="card"`: each option is a choice card with an optional `icon` tile (`RadioOption.icon`), its label and description, and the radio dot. The whole card picks it; the chosen card takes the primary border and a soft fill (`data-ui-choice-card`, `data-state`). Horizontal cards share the row, at least 180px each, and wrap. Use it for a wizard step's 2–4 options (docs/wizard.md, Choices). The default variant is unchanged.
+
 ## 0.17.14 (2026-10-30)
 
 - `SectionTabs keep-mounted` retains all supplied item panels with `v-show`, preserving component-local drafts across tab switches, with or without `fill`. Inactive panels are hidden; the default still unmounts them.

package/README.md

@@ -506,14 +506,14 @@ Density can be switched per application subtree:
 
 Primitives:
 
-- Button / IconButton / CopyButton
+- Button (`danger-outline` for a destructive choice beside the main action) / IconButton / CopyButton
 - Input / Textarea
-- Checkbox / CheckboxGroup / RadioGroup / Switch — use RadioGroup for 2–4 mutually exclusive settings; Checkbox for independent options; Switch for immediate on/off. Reserve primary-filled, capsule-shaped SegmentControl for toolbar views ([choice policy](docs/layout-rules.md)).
+- Checkbox / CheckboxGroup / RadioGroup / Switch — use RadioGroup for 2–4 mutually exclusive settings; Checkbox for independent options; Switch for immediate on/off. Reserve primary-filled, capsule-shaped SegmentControl for toolbar views ([choice policy](docs/layout-rules.md)); a `SegmentItem` takes a `count`, and a row of more views than fit scrolls sideways.
 - Select
-- Badge / StatusDot / Separator / Spinner / LoadingMask / LoadingArea / Progress / SizeBar / Skeleton / Surface
+- Badge (`dot` leads any tone with the dot) / StatusDot / Separator / Spinner / LoadingMask / LoadingArea / Progress / SizeBar / Skeleton / Surface
 - SplitButton
-- Tooltip / Popover / DropdownMenu / ContextMenu / Dialog
-- Sheet / Drawer
+- Tooltip / Popover / DropdownMenu / ContextMenu / Dialog — Popover and DropdownMenu take `v-model:open`; a menu entry takes a `description` line
+- Sheet / Drawer — `:modal="false"` overlays the page without blocking it
 - DatePicker
 - ToastProvider + `useToast()`
 - Tabs / Accordion
@@ -530,8 +530,10 @@ DSM-style application building blocks:
 - FilePicker
 - AppRoot (DSM-embedded app root)
 - AppLayout / AppSidebar / AppToolbar / AppActionBar / AppTabBar
-- PageHeader / SectionTabs
-- Statistic / StatTile / StatTileGroup
+- PageHeader / PageToolbar (the row under the header: views and filters at the start, actions at the end) / SectionTabs
+- Statistic / StatTile / StatTileGroup / SummaryCard (a section summary that opens its detail, with loading and error states)
+- TimelineRow (one event in a list) / NewItemsPill (a floating "N new" pill) / SectionSkeleton `variant="lines" | "figures" | "rows"`
+- FacetPanel (filter groups with counts; a bottom sheet on a phone) / TagEditor (tags edited in place, saved optimistically)
 - 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

package/dist/components/app/page-toolbar/PageToolbar.vue.d.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/callout/Callout.vue.d.ts

@@ -1,7 +1,11 @@
 type __VLS_Props = {
     tone?: 'info' | 'success' | 'warning' | 'danger';
-    /** `soft`: a compact tinted panel. `inline`: a status line with no panel, for a short note under a field or a section. */
-    variant?: 'soft' | 'inline';
+    /**
+     * `soft`: a compact tinted panel. `inline`: a status line with no panel, for a short note under a field or a section.
+     * `hint`: the icon and a short message that fit a toolbar row; the `details` slot opens in a tooltip on hover,
+     * focus or tap. A hint has no close button.
+     */
+    variant?: 'soft' | 'inline' | 'hint';
     title?: string;
     /**
      * Shows a close button (default). Closing hides the callout until its
@@ -25,13 +29,17 @@ type __VLS_ModelProps = {
     'expanded'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_6: {}, __VLS_13: {}, __VLS_15: {};
+declare var __VLS_6: {}, __VLS_14: {}, __VLS_21: {}, __VLS_28: {}, __VLS_30: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 } & {
-    details?: (props: typeof __VLS_13) => any;
+    details?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+} & {
+    details?: (props: typeof __VLS_28) => any;
 } & {
-    actions?: (props: typeof __VLS_15) => any;
+    actions?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => any;
@@ -41,7 +49,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
 }>, {
     fill: boolean;
-    variant: "soft" | "inline";
+    variant: "soft" | "inline" | "hint";
     tone: "info" | "success" | "warning" | "danger";
     dismissible: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/composite/comment-item/CommentItem.vue.d.ts

@@ -32,13 +32,13 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     body: string;
     time: string;
     avatar: string;
+    datetime: string;
+    highlighted: boolean;
     mentions: MentionCandidate[];
     files: (id: string) => FileItem | undefined;
     authorId: string;
-    datetime: string;
     edited: boolean;
     deleted: boolean;
-    highlighted: 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/components/composite/facet-panel/FacetPanel.vue.d.ts

@@ -0,0 +1,34 @@
+export interface FacetValue {
+    value: string;
+    label: string;
+    /** The items this value would show; the app counts them. */
+    count?: number;
+}
+export interface FacetGroup {
+    key: string;
+    label: string;
+    values: FacetValue[];
+    /** Pick several values (any of them matches); otherwise one, and pressing it again clears it. */
+    multiple?: boolean;
+    /** Starts collapsed. */
+    collapsed?: boolean;
+}
+export type FacetSelection = Record<string, string[]>;
+type __VLS_Props = {
+    groups: FacetGroup[];
+    modelValue?: FacetSelection;
+    /** `auto` (default): a sheet in the App's phone layout, else a panel. */
+    presentation?: 'auto' | 'panel' | 'sheet';
+    title?: string;
+    clearLabel?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: FacetSelection) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+}>, {
+    modelValue: FacetSelection;
+    presentation: "auto" | "panel" | "sheet";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/new-items-pill/NewItemsPill.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    label: string;
+    /** The edge where the new rows arrive; the arrow points there. */
+    edge?: 'top' | 'bottom';
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    edge: "top" | "bottom";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/summary-card/SummaryCard.vue.d.ts

@@ -0,0 +1,48 @@
+export type SummaryCardTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export interface SummaryCardFigure {
+    label: string;
+    /** Formatted by the app, as for `Statistic`. */
+    value: string | number;
+    /** Colours the value, for a figure that needs attention. */
+    tone?: SummaryCardTone;
+}
+type __VLS_Props = {
+    title: string;
+    /** A state badge after the title, such as Normal or Paused. */
+    state?: string;
+    stateTone?: SummaryCardTone;
+    figures?: SummaryCardFigure[];
+    note?: string;
+    loading?: boolean;
+    /** The line shown instead of the figures when the read failed. */
+    error?: string;
+    /** Span every column of a `CardGrid`. */
+    wide?: boolean;
+    disabled?: boolean;
+};
+declare var __VLS_22: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    loading: boolean;
+    disabled: boolean;
+    error: string;
+    figures: SummaryCardFigure[];
+    note: string;
+    state: string;
+    stateTone: SummaryCardTone;
+    wide: boolean;
+}, {}, {}, {}, 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/tag-editor/TagEditor.vue.d.ts

@@ -0,0 +1,32 @@
+type __VLS_Props = {
+    modelValue?: string[];
+    /** Suggestions offered while typing. */
+    options?: string[];
+    /** Lets Enter add a tag that is not among the options. */
+    allowCreate?: boolean;
+    /** Persists a change; a rejection rolls the tags back to `previous`. */
+    save?: (next: string[], previous: string[]) => unknown;
+    disabled?: boolean;
+    /** Accessible name of the tags. */
+    label?: string;
+    placeholder?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (error: unknown) => any;
+    "update:modelValue": (value: string[]) => any;
+    open: () => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: ((error: unknown) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: string[];
+    options: string[];
+    allowCreate: boolean;
+    save: (next: string[], previous: string[]) => unknown;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/timeline-row/TimelineRow.vue.d.ts

@@ -0,0 +1,57 @@
+import { Component } from 'vue';
+export type TimelineRowTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+type __VLS_Props = {
+    title: string;
+    meta?: string;
+    /** Severity: tints the icon tile. */
+    tone?: TimelineRowTone;
+    icon?: Component;
+    chip?: string;
+    chipTone?: TimelineRowTone;
+    /** The time as the app formats it, such as "2 min ago". */
+    time?: string;
+    /** A full date for the time's tooltip and `datetime`. */
+    datetime?: string;
+    showLabel?: string;
+    hideLabel?: string;
+};
+type __VLS_ModelProps = {
+    /** Whether the `#expand` detail is shown. */
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_20: {}, __VLS_35: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_3) => any;
+} & {
+    meta?: (props: typeof __VLS_10) => any;
+} & {
+    chip?: (props: typeof __VLS_12) => any;
+} & {
+    actions?: (props: typeof __VLS_20) => any;
+} & {
+    expand?: (props: typeof __VLS_35) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {
+    meta: string;
+    time: string;
+    tone: TimelineRowTone;
+    icon: Component;
+    chip: string;
+    chipTone: TimelineRowTone;
+    datetime: 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/tree-view/TreeView.vue.d.ts

@@ -51,13 +51,13 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     check: (payload: TreeViewCheckPayload) => any;
     "update:checkedKeys": (value: string[]) => any;
     "update:expanded": (value: string[]) => any;
+    expand: (node: TreeNode) => any;
     reorder: (payload: {
         node: TreeNode;
         target: TreeNode;
         position: TreeViewPosition;
         nodes: TreeNode[];
     }) => any;
-    expand: (node: TreeNode) => any;
     "update:nodes": (value: TreeNode[]) => any;
     collapse: (node: TreeNode) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -70,13 +70,13 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     onCheck?: ((payload: TreeViewCheckPayload) => any) | undefined;
     "onUpdate:checkedKeys"?: ((value: string[]) => any) | undefined;
     "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+    onExpand?: ((node: TreeNode) => any) | undefined;
     onReorder?: ((payload: {
         node: TreeNode;
         target: TreeNode;
         position: TreeViewPosition;
         nodes: TreeNode[];
     }) => any) | undefined;
-    onExpand?: ((node: TreeNode) => any) | undefined;
     "onUpdate:nodes"?: ((value: TreeNode[]) => any) | undefined;
     onCollapse?: ((node: TreeNode) => any) | undefined;
 }>, {

package/dist/components/primitives/badge/Badge.vue.d.ts

@@ -1,5 +1,11 @@
 type __VLS_Props = {
     tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    /**
+     * `true` leads every tone with the dot, so a neutral state (Paused, Pending)
+     * lines up with the coloured ones beside it; `false` drops it. By default
+     * only a non-neutral tone has one.
+     */
+    dot?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -7,6 +13,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     tone: "neutral" | "info" | "success" | "warning" | "danger";
+    dot: 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/components/primitives/button/Button.vue.d.ts

@@ -1,6 +1,6 @@
 import { ClickHandlers } from '../../../composables/pendingClick';
 import { ButtonKind } from '../../../composables/buttonKind';
-type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline';
 type ButtonSize = 'sm' | 'md' | 'lg';
 type __VLS_Props = {
     variant?: ButtonVariant;

package/dist/components/primitives/dropdown-menu/DropdownMenu.vue.d.ts

@@ -2,6 +2,8 @@ import { DropdownMenuEntry } from './types';
 export type { DropdownMenuEntry } from './types';
 type __VLS_Props = {
     items: DropdownMenuEntry[];
+    /** Controlled open state (`v-model:open`), so the caller can close it after a pick or open it from elsewhere. */
+    open?: boolean;
     align?: 'start' | 'center' | 'end';
     /** Controlled checked keys for `type: 'checkbox'` entries. */
     checkedKeys?: string[];
@@ -19,6 +21,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (key: string) => any;
     toggle: (key: string, checked: boolean) => any;
+    "update:open": (value: boolean) => any;
     "update:checkedKeys": (value: string[]) => any;
     "update:radioValue": (value: string) => any;
     "update:radioValues": (value: Record<string, string>) => any;
@@ -26,12 +29,14 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((key: string) => any) | undefined;
     onToggle?: ((key: string, checked: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:checkedKeys"?: ((value: string[]) => any) | undefined;
     "onUpdate:radioValue"?: ((value: string) => any) | undefined;
     "onUpdate:radioValues"?: ((value: Record<string, string>) => any) | undefined;
     onRadioSelect?: ((value: string, key: string, group: string) => any) | undefined;
 }>, {
     align: "start" | "center" | "end";
+    open: boolean;
     radioIndicator: "dot" | "check";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/primitives/dropdown-menu/types.d.ts

@@ -3,6 +3,8 @@ export type DropdownMenuSubEntry = {
     type?: 'item';
     key: string;
     label: string;
+    /** A second, quieter line under the label, such as what the entry does. */
+    description?: string;
     disabled?: boolean;
     /** Legacy visual check mark. Use `type: 'checkbox'` for a real, togglable item. */
     checked?: boolean;
@@ -19,6 +21,8 @@ export type DropdownMenuCheckboxEntry = {
     type: 'checkbox';
     key: string;
     label: string;
+    /** A second, quieter line under the label, such as what the entry does. */
+    description?: string;
     disabled?: boolean;
     danger?: boolean;
     shortcut?: string;
@@ -29,6 +33,8 @@ export type DropdownMenuRadioEntry = {
     type: 'radio';
     key: string;
     label: string;
+    /** A second, quieter line under the label, such as what the entry does. */
+    description?: string;
     value: string;
     /** Radio entries that share a group are mutually exclusive. Defaults to the root group. */
     group?: string;

package/dist/components/primitives/popover/Popover.vue.d.ts

@@ -1,4 +1,6 @@
 type __VLS_Props = {
+    /** Controlled open state (`v-model:open`), so the caller can close it after a pick or open it from elsewhere. */
+    open?: boolean;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
     width?: string;
@@ -9,10 +11,15 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_30) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
     width: string;
     side: "top" | "right" | "bottom" | "left";
     align: "start" | "center" | "end";
+    open: 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/components/primitives/radio-group/RadioGroup.vue.d.ts

@@ -1,20 +1,26 @@
+import { Component } from 'vue';
 export type RadioOption = {
     label: string;
     value: string;
     description?: string;
     disabled?: boolean;
+    /** An icon in a tile at the top of the option; drawn by the `card` variant only. */
+    icon?: Component;
 };
 type __VLS_Props = {
     modelValue?: string;
     options: RadioOption[];
     orientation?: 'vertical' | 'horizontal';
     disabled?: boolean;
+    /** `card` draws each option as a choice card (a wizard step's options); the radio dot stays. */
+    variant?: 'default' | 'card';
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    variant: "default" | "card";
     disabled: boolean;
     orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/primitives/segment-control/SegmentItem.vue.d.ts

@@ -8,6 +8,8 @@ type __VLS_Props = {
     tooltip?: string | boolean | Record<string, unknown>;
     /** Accessible name; required for icon-only items. */
     ariaLabel?: string;
+    /** A count pill after the label, such as the items a view holds. */
+    count?: number | string;
 };
 declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
 type __VLS_Slots = {} & {

package/dist/components/primitives/sheet/Sheet.vue.d.ts

@@ -7,6 +7,14 @@ type __VLS_Props = {
     title?: string;
     description?: string;
     closeLabel?: string;
+    /**
+     * `false` opens a side panel over the page without blocking it: no overlay,
+     * no scroll lock, no focus trap, and the page stays readable to assistive
+     * technology. Escape and the close button still close it.
+     */
+    modal?: boolean;
+    /** Whether a press outside closes the sheet. Defaults to `modal`: a non-modal sheet stays while the page behind is used. */
+    closeOnOutside?: boolean;
 };
 declare var __VLS_14: {}, __VLS_62: {}, __VLS_70: {};
 type __VLS_Slots = {} & {
@@ -35,6 +43,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     side: SheetSide;
     defaultOpen: boolean;
     open: boolean;
+    modal: boolean;
+    closeOnOutside: 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/components/primitives/skeleton/SectionSkeleton.vue.d.ts

@@ -1,8 +1,14 @@
 type __VLS_Props = {
+    variant?: 'lines' | 'figures' | 'rows';
+    /** The number of lines (`lines`). */
     lines?: number;
+    /** The number of figures or rows (`figures`, `rows`). */
+    count?: number;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "lines" | "figures" | "rows";
     lines: number;
+    count: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/i18n/text.d.ts

@@ -227,6 +227,13 @@ export declare const englishUiText: {
     readonly Copied: "Copied";
     readonly "Couldn't copy. Select the text and copy it manually.": "Couldn't copy. Select the text and copy it manually.";
     readonly "Couldn't copy": "Couldn't copy";
+    readonly "Clear filters": "Clear filters";
+    readonly Filters: "Filters";
+    readonly Tags: "Tags";
+    readonly "Add tag": "Add tag";
+    readonly "Create \u201C{name}\u201D": "Create “{name}”";
+    readonly "Show details": "Show details";
+    readonly "Hide details": "Hide details";
 };
 export type UiTextKey = keyof typeof englishUiText;
 export type UiTranslator = (key: UiTextKey, values?: Record<string, string | number>) => string;

package/dist/index.d.ts

@@ -130,6 +130,14 @@ export { default as Statistic } from './components/composite/statistic/Statistic
 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 { default as SummaryCard } from './components/composite/summary-card/SummaryCard.vue';
+export type { SummaryCardFigure, SummaryCardTone } from './components/composite/summary-card/SummaryCard.vue';
+export { default as TimelineRow } from './components/composite/timeline-row/TimelineRow.vue';
+export type { TimelineRowTone } from './components/composite/timeline-row/TimelineRow.vue';
+export { default as NewItemsPill } from './components/composite/new-items-pill/NewItemsPill.vue';
+export { default as FacetPanel } from './components/composite/facet-panel/FacetPanel.vue';
+export type { FacetGroup, FacetSelection, FacetValue } from './components/composite/facet-panel/FacetPanel.vue';
+export { default as TagEditor } from './components/composite/tag-editor/TagEditor.vue';
 export { default as CompletionToggle } from './components/composite/completion-toggle/CompletionToggle.vue';
 export { default as CommentItem } from './components/composite/comment-item/CommentItem.vue';
 export { mentionParts } from './lib/mentions';
@@ -217,6 +225,7 @@ 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 PageToolbar } from './components/app/page-toolbar/PageToolbar.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';