@synopackageland/ui 0.25.13 → 0.25.15

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ## Unreleased
 
+## 0.25.15 (2026-11-13)
+
+### Tags
+
+- **A new Tag look, for every app.** `Tag` is now a soft chip with no border, 20px high (was 24px with a grey border): a neutral fill by default, the soft fill of its `appearance` otherwise. Only `selected` and `invalid` keep a 1px inset ring. Hover and press lay the theme's state layer over the fill, so interactive tags work on every tone. It reads theme tokens, so the dark theme follows. The chips in MultipleSelect, SuperboxSelect and Combobox take the same look; TagEditor uses Tag already. The API is unchanged
+- **TagPicker: a searchable multi-select for tags.** Options come from the caller (values, or `{ value, label?, disabled? }`). Type to filter; only the rows in view render, so 1000 tags draw about a dozen rows. `max` shows a counter, disables the rest and shows a `#limit` slot; `allow-create` adds a Create row (`create-filter` refuses names); `single` picks one and closes. `variant="inline"` draws chips with a quiet "+ Add tag" and mounts no popover until first used, for a table cell; `save` persists each change and rolls back on failure. Full keyboard support (the search is a combobox over a multiselectable listbox); on a phone the list opens as a bottom sheet. `TagPickerList` is the list alone, to embed in another panel. Exported with `tagPickerRows`, `tagPickerWindow`, `normalizeTagOption` and the `TagPickerOption` types
+
+### Tables
+
+- **ExpandAllButtons: Expand all and Collapse all for a table whose rows expand.** Two icon buttons with tooltips for the table's toolbar; they act on the rows shown and each is disabled when it would change nothing. Pass a DataGrid's ref as `grid`, or bind `v-model` to another table's expanded keys with `shown`. `expandAll`, `collapseAll` and `expandState` are exported too
+- **DataGrid `collapseAllRows` closes only the rows shown**, as `expandAllRows` opens only them; rows on other pages or filtered out keep their state. The grid also exposes `visibleRowKeys`, `expandedRowKeys` and `setExpandedKeys`
+
+## 0.25.14 (2026-11-13)
+
+### Aside panel
+
+- **`AsidePanel header-layout="inline"`: tabs in the header row.** The `tabs` slot moves into the row with the header actions (tabs at the start, expand and collapse at the end), and the title is hidden visually while it stays the panel's accessible name and an `h2` for screen readers; on a phone the tabs share the sheet's header row. Without a `tabs` slot the title stays visible. The default, `stacked`, is unchanged. The header carries `data-ui-aside-header-layout`
+
 ## 0.25.13 (2026-11-13)
 
 ### Lists

package/README.md

@@ -556,7 +556,7 @@ DSM-style application building blocks:
 - 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)
+- FacetPanel (filter groups with counts; a bottom sheet on a phone) / TagEditor (tags edited in place, saved optimistically) / TagPicker (a searchable, virtualised multi-select of tags; see [Tags](#tags-tag-and-tagpicker))
 - SplitPane / StorageMeter / StackedBar (see [docs/size-and-split.md](docs/size-and-split.md))
 - ListDetail (a list with the selected item's detail beside it, the pane's width set by dragging and remembered; see [docs/list-detail.md](docs/list-detail.md))
 - AsidePanel (the right side region: rail, docked, floating, sheet) / RecordPanel (a non-modal record panel docked over the view) / AdaptivePanel (a popover on desktop, a bottom sheet on a phone) / StatusSlot
@@ -903,7 +903,7 @@ for one column.
 - **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, row)`, `resizeColumn(label)`, `columns`, `resetColumns`, `hiddenByWidth`. `emptyText` still works.
-- **Expanded rows.** `:expandable="{ type: 'row' }"` adds a chevron column (double click toggles too) and renders the `#expand` slot under an open row; bind `v-model:expanded-keys` or call the exposed `expandRow` / `collapseRow` / `expandAllRows`. `type: 'cell'` draws no chevron column and ignores double click: a `#cell-<key>` slot opens the row itself with its `toggleExpand` and `expanded` props, so give that control an `aria-expanded`. The slot gets `indent`, the pixels to the first data column's text, also set as `--ui-grid-detail-indent` on the expand row.
+- **Expanded rows.** `:expandable="{ type: 'row' }"` adds a chevron column (double click toggles too) and renders the `#expand` slot under an open row; bind `v-model:expanded-keys` or call the exposed `expandRow` / `collapseRow` / `expandAllRows` / `collapseAllRows` (both act on the rows shown: this page, after filtering). For an Expand all / Collapse all pair in the table's toolbar, put `<ExpandAllButtons :grid="gridRef" />` there: two icon buttons with tooltips that act on the rows the grid shows, each disabled when it would change nothing. With another table, bind `v-model` to its expanded keys and pass the shown rows' keys as `shown`. `type: 'cell'` draws no chevron column and ignores double click: a `#cell-<key>` slot opens the row itself with its `toggleExpand` and `expanded` props, so give that control an `aria-expanded`. The slot gets `indent`, the pixels to the first data column's text, also set as `--ui-grid-detail-indent` on the expand row.
 - **Detail rows.** For sub-rows in that slot (the copies of a file, the members of a group) use `DetailList`: it starts under the Name column's text, puts each line's `#leading` (a `Tag`) in a column as wide as the widest, then the item's `text` and `secondary` (or the default slot), then `#trailing` actions (an `IconButton` with a `label`, or a `variant="text"` Button). `max` shows that many lines and a summary line counts the rest ("3 more", or `summary` / `#summary`); `#summary-leading` and `#summary-trailing` fill that line, for example a "Show all 20 copies" button that opens a `Sheet`. A `#summary` slot keeps the line even when nothing is hidden. Under 448px the lead, text and actions stack.
 
   ```vue
@@ -923,6 +923,28 @@ for one column.
   remaining space and its rows scroll above the footer. Use `class="flex-none"`
   for a grid that should retain its content height.
 
+### Tags: Tag and TagPicker
+
+`Tag` is a soft chip with no border, 20px high: a neutral fill by default, or the soft fill of `appearance` (`info`, `success`, `warning`, `danger`, `theme`). Only `selected` and `invalid` add a 1px inset ring. It reads the theme's tokens, so it follows the light and the dark theme. Use it for labels and applied filters; a status with a dot is a `Badge`.
+
+`TagPicker` chooses tags from a list the caller supplies. It searches as you type, renders only the rows in view (1000 tags draw about a dozen rows), and on a phone opens as a bottom sheet.
+
+```vue
+<FormItem label="Tags">
+  <TagPicker v-model="tags" :options="allTags" :max="30" allow-create>
+    <template #limit="{ max }">A device has at most {{ max }} tags</template>
+  </TagPicker>
+</FormItem>
+```
+
+- `options` are values, or `{ value, label?, disabled? }`; the model holds values. A chosen value that `options` no longer lists still shows.
+- `max` shows "n / max" and, once reached, disables the other rows and shows the `#limit` slot (default "At most {max} tags").
+- `allow-create` adds a Create row for a name no tag has; picking it adds the name and emits `create`. `create-filter` refuses names (length, characters).
+- `single` picks one tag and closes. `loading` shows "Loading tags" while the list is empty.
+- `variant="inline"` draws chips in place with a quiet "+ Add tag", for a table cell or a detail panel. It mounts no popover until first used, so a table can render one per row. `chip-limit` (default 3 inline, 6 in a field) ends the chips in "+N"; `wrap` wraps them instead. `save` persists each change and rolls back when it rejects, emitting `error`.
+- Keyboard: Enter, Space or ArrowDown on the field opens it, and Backspace there removes the last tag. In the search, ArrowUp/ArrowDown/PageUp/PageDown move, Enter toggles, Backspace in an empty search removes the last tag, and Escape closes. The search is a combobox whose `aria-activedescendant` names the active option of a multiselectable listbox.
+- `TagPickerList` is the list on its own, to embed in another panel (a filter popover). It emits `pick`, `clear` and `remove-last`, and changes no value itself.
+
 ### Loading
 
 `Spinner` is the DSM ring (`size` is the box in px, default 24). `LoadingMask` wraps content and covers it with a white 60% mask and a centred message box while `loading` (`delay` in ms holds the mask back so a quick load never flashes it; the region is `aria-busy` at once, so disable the actions it gates yourself); `LoadingArea` fills its container (give the parent a height) and centres the indicator, for whole-page or whole-panel waits. `Button loading` shows the 16px ring inline. Do not place a bare `Spinner` in a block container and expect it to be centred: use `LoadingArea`.

package/dist/components/app/aside-panel/AsidePanel.vue.d.ts

@@ -9,6 +9,13 @@ type __VLS_Props = {
     unread?: boolean;
     /** The phone button that opens the sheet; without it the app opens the sheet itself. */
     fab?: boolean;
+    /**
+     * `stacked`: the tabs sit above a row with the title and the actions.
+     * `inline`: the tabs take the title's place in the actions' row and the
+     * title is kept for assistive technology only (it stays the panel's
+     * accessible name). Without a `tabs` slot the title stays visible.
+     */
+    headerLayout?: 'stacked' | 'inline';
     /** Offers `expanded` (the panel takes the content area). */
     expandable?: boolean;
     /** Where focus goes when the panel opens: `field` (the first field in the composer or body, not on touch), the `panel`, or `none`. */
@@ -28,7 +35,7 @@ type SlotProps = {
     restore: () => void;
 };
 type __VLS_Slots = {
-    /** Surface tabs above the header row (a SegmentControl size="sm"); shown only when given. */
+    /** Surface tabs above the header row, or in it with `header-layout="inline"` (a SegmentControl size="sm"); shown only when given. */
     tabs?: (props: SlotProps) => unknown;
     /** Extra header actions before expand and collapse (a ⋯ menu). */
     actions?: (props: SlotProps) => unknown;
@@ -58,6 +65,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     shortcut: string;
     expandable: boolean;
     unread: boolean;
+    headerLayout: "stacked" | "inline";
 }, {}, {}, {}, 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/data-grid/DataGrid.vue.d.ts

@@ -95,6 +95,7 @@ export type DataGridAdapter = {
     expandRow: (key: string) => void;
     collapseRow: (key: string) => void;
     expandAllRows: () => void;
+    /** Collapses the rows shown; rows on other pages or filtered out keep their state. */
     collapseAllRows: () => void;
     expandAllGroups: () => void;
     collapseAllGroups: () => void;
@@ -253,6 +254,11 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     collapseRow: (key: string) => void;
     expandAllRows: () => void;
     collapseAllRows: () => void;
+    /** Keys of the rows shown now (this page, after filtering and sorting). */
+    visibleRowKeys: import('vue').ComputedRef<string[]>;
+    /** Keys of the expanded rows. */
+    expandedRowKeys: import('vue').ComputedRef<string[]>;
+    setExpandedKeys: (keys: string[]) => void;
     expandAllGroups: () => void;
     collapseAllGroups: () => void;
     moveRowUp: (row: Record<string, unknown>) => void;

package/dist/components/composite/expand-all/ExpandAllButtons.vue.d.ts

@@ -0,0 +1,30 @@
+/** What the buttons need from a DataGrid: its exposed shown and expanded keys and setter. */
+export interface ExpandAllGrid {
+    visibleRowKeys: readonly string[];
+    expandedRowKeys: readonly string[];
+    setExpandedKeys: (keys: string[]) => void;
+}
+type __VLS_Props = {
+    /** Keys of the rows the table shows now (this page, after filtering). */
+    shown?: readonly string[];
+    /** A DataGrid instance (its template ref), instead of `shown` and `v-model`. */
+    grid?: ExpandAllGrid | null;
+    size?: 'sm' | 'md';
+    expandLabel?: string;
+    collapseLabel?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    size: "sm" | "md";
+    grid: ExpandAllGrid | null;
+    shown: readonly string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/expand-all/expandAll.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Expand all / collapse all over the rows a table shows. Only the shown rows
+ * change: rows another page or a search keeps out stay as they were, and a
+ * long list is never opened beyond what is on screen.
+ */
+export declare function expandAll(expanded: readonly string[], shown: readonly string[]): string[];
+export declare function collapseAll(expanded: readonly string[], shown: readonly string[]): string[];
+/** Which of the two buttons does something: none to open, or none to close. */
+export declare function expandState(expanded: readonly string[], shown: readonly string[]): {
+    canExpand: boolean;
+    canCollapse: boolean;
+};

package/dist/components/composite/tag-picker/TagPicker.vue.d.ts

@@ -0,0 +1,77 @@
+import { TagPickerOption } from './tagPicker';
+type __VLS_Props = {
+    /** The chosen values. */
+    modelValue?: readonly string[];
+    /** The tags offered: values, or `{ value, label?, disabled? }`. */
+    options?: readonly TagPickerOption[];
+    loading?: boolean;
+    /** Offers the search text as a new tag; picking it adds it and emits `create`. */
+    allowCreate?: boolean;
+    /** Accepts or refuses a new tag name (its length, its characters). */
+    createFilter?: (name: string) => boolean;
+    /** At most this many chosen: the rest turn disabled and the `limit` slot shows. */
+    max?: number;
+    /** Picks one tag and closes. */
+    single?: boolean;
+    variant?: 'field' | 'inline';
+    placeholder?: string;
+    /** Accessible name; inside a FormItem the item's label names it instead. */
+    label?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Chips shown before "+N"; default 6 in a field, 3 inline. */
+    chipLimit?: number;
+    /** Inline only: chips wrap onto more lines instead of one clipped line. */
+    wrap?: boolean;
+    /** Persists a change; a rejection rolls the value back to `previous`. */
+    save?: (next: string[], previous: string[]) => unknown;
+    /** Width of the dropdown. */
+    width?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    removeLabel?: string;
+};
+type __VLS_Slots = {
+    /** The line shown once `max` are chosen; defaults to "At most {max} tags". */
+    limit?: (props: {
+        max: number;
+        count: number;
+    }) => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (error: unknown) => any;
+    close: () => any;
+    open: () => any;
+    "update:modelValue": (value: string[]) => any;
+    create: (name: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: ((error: unknown) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onCreate?: ((name: string) => any) | undefined;
+}>, {
+    variant: "field" | "inline";
+    loading: boolean;
+    disabled: boolean;
+    max: number;
+    width: string;
+    invalid: boolean;
+    modelValue: readonly string[];
+    options: readonly TagPickerOption[];
+    allowCreate: boolean;
+    single: boolean;
+    wrap: boolean;
+    save: (next: string[], previous: string[]) => unknown;
+    createFilter: (name: string) => boolean;
+    chipLimit: number;
+}, {}, {}, {}, 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-picker/TagPickerList.vue.d.ts

@@ -0,0 +1,56 @@
+import { TagPickerOption } from './tagPicker';
+type __VLS_Props = {
+    /** The chosen values. */
+    modelValue: readonly string[];
+    options: readonly TagPickerOption[];
+    /** Shows the loading text while there are no rows yet. */
+    loading?: boolean;
+    allowCreate?: boolean;
+    createFilter?: (name: string) => boolean;
+    /** At most this many chosen; ignored with `single`. */
+    max?: number;
+    single?: boolean;
+    /** Accessible name of the list. */
+    label?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    clearText?: string;
+    /** Rows in view before the list scrolls. */
+    visibleRows?: number;
+};
+type __VLS_Slots = {
+    /** The line shown once `max` are chosen; defaults to "At most {max} tags". */
+    limit?: (props: {
+        max: number;
+        count: number;
+    }) => unknown;
+};
+/** Puts the caret in the search box (after the list is shown somewhere new). */
+declare function focus(): void;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    focus: typeof focus;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    pick: (value: string, kind: "create" | "tag") => any;
+    "remove-last": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onPick?: ((value: string, kind: "create" | "tag") => any) | undefined;
+    "onRemove-last"?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    max: number;
+    allowCreate: boolean;
+    single: boolean;
+    createFilter: (name: string) => boolean;
+    visibleRows: number;
+}, {}, {}, {}, 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-picker/tagPicker.d.ts

@@ -0,0 +1,44 @@
+/** A tag the picker offers: its value, or the value with a label and a disabled flag. */
+export type TagPickerOption = string | {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+};
+export interface TagPickerRow {
+    value: string;
+    label: string;
+    selected: boolean;
+    disabled: boolean;
+}
+export interface TagPickerRows {
+    rows: TagPickerRow[];
+    /** The trimmed search text when it may become a new tag, else `null`. */
+    create: string | null;
+}
+export interface TagPickerRowOptions {
+    /** Offer the search text as a new tag when no tag has that name. */
+    allowCreate?: boolean;
+    /** Unchosen rows turn disabled once this many are chosen, and nothing is created. */
+    max?: number;
+    /** Accepts or refuses a new tag name (length, characters); default accepts any. */
+    createFilter?: (name: string) => boolean;
+}
+/** The value and label of an option, whichever form it takes. */
+export declare function normalizeTagOption(option: TagPickerOption): {
+    value: string;
+    label: string;
+    disabled: boolean;
+};
+/**
+ * The list for `query`: every offered or chosen tag whose label contains the
+ * query (case-insensitive), chosen ones first while there is no query, then
+ * by label. Unchosen rows are disabled once `max` are chosen. A chosen value
+ * the options no longer list still shows, by its value. An empty value is
+ * never a row.
+ */
+export declare function tagPickerRows(options: readonly TagPickerOption[], selected: readonly string[], query: string, opts?: TagPickerRowOptions): TagPickerRows;
+/** The rows a fixed-height virtual list renders: what is in view plus `overscan` on each side. */
+export declare function visibleWindow(scrollTop: number, rowHeight: number, viewport: number, total: number, overscan?: number): {
+    start: number;
+    end: number;
+};