@synopackageland/ui 0.12.4 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 0.13.0 (2026-10-20)
+
+- Fix `SegmentControl variant="sheet"`: the selected tab keeps the content surface and accent text. Unselected background and text classes now apply only to unselected tabs, so stylesheet order cannot make the selected tab grey again (#16).
+- Component visual audit (#17): address 194 findings across controls, navigation, menus, feedback, containers and app layouts, and add a state gallery and checklist. The changes include clearer focus, disabled, invalid and selected states, long-label handling, spacing and narrow layouts. The audit's fixes passed automated checks; they were not rechecked with screenshots.
+- Add opt-in `Spinner inline`, `TypoHeader anchorPlacement`, `ScrollEdges axis`, `ConnectionTopology selectedLane` and `Tooltip openOnTap`; add `#empty` slots to `VirtualList` and `TreeView`. `DataTable mobileView="container"` chooses cards from its measured container width, with `containerBreakpoint` (default 480px). Existing defaults for these additions stay unchanged.
+- `AboutDialog fetchVersion` can return `{ upToDate: true }` for a successful check with no newer version; the message is available in all nine built-in languages. An empty result still means the check failed.
+- Fix DSM-window CSS rescoping: selectors beginning with a tag name, such as `label:has(...)`, remain valid instead of losing their rules during the build.
+
+### Visible changes for apps
+
+These defaults change from 0.12.5, so this release advances the minor version. Existing opt-outs are listed below; changes without a compatibility switch need an app-owned layout, event handler or CSS override.
+
+- `Pagination` groups numbers using the active locale. Use `:group-digits="false"` for ungrouped digits.
+- `DropdownMenu` radio entries use a dot. Set `radio-indicator="check"` to keep the previous check mark.
+- `OverflowTooltip` opens the full text on a touch or pen tap on truncated text; a second tap or a tap elsewhere closes it. Use `:open-on-tap="false"` to keep hover and keyboard focus only. Plain `Tooltip` still defaults to `openOnTap: false`.
+- Vertical `ToggleButtonGroup` buttons stretch to equal widths. Add `class="items-start"` to restore content-sized buttons.
+- `Dialog` initially focuses the first enabled focusable element other than its header close button, or the panel when none exists. To restore close-button focus, handle `@open-auto-focus`, call `event.preventDefault()` and focus `event.target.querySelector('[data-dialog-close]')` in the handler.
+- `Combobox` with `allowCreate` creates a typed label without an exact match on Enter instead of accepting the automatically highlighted first result. Moving the highlight deliberately still selects that result. There is no legacy Enter switch; use `:allow-create="false"` to disable creation, or provide app-owned keyboard handling when both creation and the old selection rule are required. Reopening a selected combobox also shows the full list instead of filtering by its mirrored label.
+- Empty `AdvancePanelGrid` now displays the localized “No data” message. Supply `<template #empty-body><span /></template>` to retain a blank message area, or put an app-owned empty message in that slot.
+- Height-constrained `Panel` bodies scroll even with `scrollable` unset or false. There is no legacy switch; app code can use the exposed `getScrollEl()` to restore `overflow: visible; min-height: auto` if an outer container must own scrolling.
+- In a collapsed `AppSidebar`, rows without icons are hidden and a hidden selection marks its nearest visible ancestor. Supply an icon on every row that must remain reachable in the rail, or keep the sidebar expanded. Group headings now use `--ui-text-secondary`; an app stylesheet can restore `color: rgba(65,75,85,0.5)` on its `[data-nav-group-label]` elements.
+- `DataGrid` cells reserve `calc(var(--ui-grid-row-height) + 1px)`, changing the default desktop row from 28px to 29px. To retain a 28px minimum, set `--ui-grid-row-height: 27px` on the grid; rows with taller content can still grow. The theme token itself remains 28px by default.
+- `Button` wraps its slot in a label span and truncates long labels. Update selectors that assumed a direct-child label or icon. There is no legacy DOM switch; app CSS can restore label `overflow: visible; text-overflow: clip` and override the button's `max-width` when overflow is intentional.
+- With a coarse pointer and no explicit `data-ui-density`, small/medium control tokens become 32px and grid row/header tokens become 36px; text inputs and textareas use the 16px title font tier. Set `data-ui-density="default"` on the theme root to retain desktop control/grid tokens and input font sizing. Slider touch padding and mobile Dialog/Sheet header/footer hit areas have separate rules; those need targeted app CSS if the old sizes are required.
+- `Footbar` stacks its three regions below 28rem of container width and lets buttons wrap. There is no legacy layout prop; use app-owned footer markup to retain three columns at narrow widths.
+- The popups changed by the audit (including menus, selects, date/color pickers, popovers, tooltips and validation tips) use `z-index: 1450` to share a layer. There is no global legacy-layer token; adjust the specific popup in app CSS if it must interleave with app-owned overlays. This is not a change to every overlay: `ContextMenu`, Dialog/Sheet, notifications and toasts retain their separate layers.
+
+## 0.12.5 (2026-10-20)
+
+- `DropdownMenu` label column: a plain action menu no longer reserves an empty check-mark slot before every label, so its labels start at the left edge. The slot is kept, for every entry of that level, when any entry can show a check mark, an indicator or an icon; an unchecked checkbox or radio now keeps its slot, so its label lines up with the rest. All entries share the same 10px side padding. The menu's 11rem minimum width now holds (it resolved against a content-sized popper and collapsed short menus to their labels), still capped by the viewport.
+- `DropdownMenuEntry.icon`: an optional leading icon component for an item or submenu entry (pencil, copy, trash). It sits in the label slot in secondary text, or the danger colour on a `danger` entry; a check mark takes precedence.
+- `SegmentControl variant="sheet"`: joined sheet tabs on a rule, for the views and forms over a table. Unselected tabs sit on the subtle surface in secondary text; the selected tab takes the content's surface over the rule, accent text and an accent line on top. Keyboard, `aria-selected` and the `segment` default are unchanged.
+- Fix DatePicker calendar clipping in app-local modal scope: mark the calendar as a popup so Dialog width constraints do not shrink it. Date and date-time popups stay within the app/viewport collision bounds, use the available width and height, and scroll when space is limited. Portals, calendar selection and Escape behavior are preserved.
+- Add `PageContent surface="none"` (also JSON `Page`): no page surface or horizontal gutters at any presentation width, for full-bleed editors and standalone app content. Width limits, fill height and child spacing still work; `auto`, `card` and `flat` retain their existing behavior.
+- Add a full-bleed Histoire example and `pnpm check:date-picker` browser regression coverage for popup geometry, clipped containers, viewport edges, nested Dialog Escape and page surfaces.
+
 ## 0.12.4 (2026-10-20)
 
 - Full-page (`web`) layout is flush and compact: the page content sits straight beside the sidebar and under the toolbar, with the same page padding as a DSM window (16px), the DSM window section and field gaps, and the page header's bottom space. The rounded page card around `PageContent` (its border, background, shadow, outer margin and inner padding) is gone for `surface="auto"` and `surface="card"`, and content starts at the left edge instead of centring when capped by `width`. An `AppToolbar` lines up with the page content. `surface="flat"` keeps the canvas behind its own cards. DSM-window and phone layouts are unchanged.

package/README.md

@@ -350,6 +350,23 @@ import { AppLayout, Button, PageHeader } from '@synopackageland/ui'
 
 `AppLayout` also accepts `sidebar`, `toolbar`, and `footer` slots.
 
+For standalone content that owns its layout, use `<PageContent surface="none" height="fill">`.
+It removes the page's horizontal gutters and adds no surface in web, DSM-window
+or phone layouts. The default `surface="auto"` remains unchanged; `flat` keeps
+the dashboard canvas. In 0.12.4+, `auto` already has no outer page card in web
+mode. Child components keep their own styling and spacing. The JSON `Page`
+component accepts the same `surface="none"` option. SDK `AppShell` is a separate
+package: if it creates `PageContent` internally, it must expose/forward this
+option before an application can select it through that shell.
+
+```vue
+<AppLayout wide-layout="web" height="fill" min-height="0">
+  <PageContent surface="none" height="fill">
+    <MyEditor />
+  </PageContent>
+</AppLayout>
+```
+
 `PageContent` stacks its direct children (a search row, a toolbar, cards) at
 `--ui-section-gap`, so a page needs no margins between them. Under a
 `PageHeader` the space is the header's own bottom padding (12px in a DSM
@@ -611,6 +628,7 @@ pnpm check       # production build, then lint, typecheck and tests in parallel,
 pnpm check:fast  # as check, but only the tests the changes since origin/master reach (vitest --changed)
 pnpm story:build # build the component workbench
 pnpm check:host  # after pnpm build: DSM host simulation screenshots (Chrome)
+pnpm check:date-picker # after pnpm build: app-local calendars, Dialog Escape and full-bleed pages (ego-browser)
 pnpm check:switch # after pnpm build: Switch knob geometry and click toggling (Chrome)
 pnpm check:topology # after pnpm build: ConnectionTopology motion, keyboard and narrow layout (Chrome)
 ```

package/dist/components/advanced-panel/AdvancePanelGrid.vue.d.ts

@@ -9,12 +9,12 @@ type __VLS_Props = {
 declare function deactivateRow(): void;
 declare var __VLS_2: `header-${string}`, __VLS_3: {
     column: AdvancePanelGridColumn;
-}, __VLS_25: {}, __VLS_28: string, __VLS_29: {
+}, __VLS_36: {}, __VLS_39: string, __VLS_40: {
     cell: AdvancePanelGridCell;
     item: AdvancePanelGridRow;
     column: AdvancePanelGridColumn;
     index: number;
-}, __VLS_31: {
+}, __VLS_42: {
     item: AdvancePanelGridRow;
     column: AdvancePanelGridColumn;
     index: number;
@@ -24,11 +24,11 @@ declare var __VLS_2: `header-${string}`, __VLS_3: {
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
 } & {
-    [K in NonNullable<typeof __VLS_28>]?: (props: typeof __VLS_29) => any;
+    [K in NonNullable<typeof __VLS_39>]?: (props: typeof __VLS_40) => any;
 } & {
-    'empty-body'?: (props: typeof __VLS_25) => any;
+    'empty-body'?: (props: typeof __VLS_36) => any;
 } & {
-    'row-hover-action'?: (props: typeof __VLS_31) => any;
+    'row-hover-action'?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:sort": (sort: AdvancePanelGridSort) => any;

package/dist/components/app/page-content/PageContent.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Props = {
      * `--ui-page-readable-width`; any other value is a CSS maximum width.
      */
     width?: 'fill' | 'readable' | (string & {});
-    /** Web/portal mode puts the page flush on a white content area (`auto`, `card`). Set flat for card-based dashboards on the canvas. */
-    surface?: 'auto' | 'flat' | 'card';
+    /** Web/portal: auto/card use the white content area; flat uses the dashboard canvas. none adds no surface or horizontal gutters, for content that owns its layout at every width. */
+    surface?: 'auto' | 'flat' | 'card' | 'none';
     /**
      * `'fill'` takes the container's height and does not scroll: the header,
      * tabs and toolbar stay, and the last child (a DataGrid, or a flex column
@@ -20,7 +20,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<{}>, {
     height: "auto" | "fill";
     width: "fill" | "readable" | (string & {});
-    surface: "auto" | "flat" | "card";
+    surface: "auto" | "flat" | "card" | "none";
 }, {}, {}, {}, 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/about-dialog/AboutDialog.vue.d.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
         checking: string;
         available: string;
         betaAvailable: string;
+        upToDate: string;
         failed: string;
         retry: string;
         releaseNotes: string;
@@ -27,22 +28,22 @@ type __VLS_Props = {
     /** App-provided Privacy Policy URL. Omitted or empty hides the link. */
     privacyUrl?: string;
     releaseNotesUrl?: string;
-    /** Runs on open. Return `newVersion` for an update, `betaVersion` for beta info, `{}`/undefined for failure. */
+    /** Runs on open. Return `newVersion` for an update, `betaVersion` for beta info, `upToDate: true` when nothing newer exists, `{}`/undefined for failure. */
     fetchVersion?: () => Promise<AboutVersionInfo>;
     checkUpdates?: boolean;
     width?: string;
     closeLabel?: string;
 };
 declare function checkForUpdates(): Promise<AboutVersionInfo | null>;
-declare var __VLS_11: {}, __VLS_13: {}, __VLS_58: {}, __VLS_61: {};
+declare var __VLS_11: {}, __VLS_13: {}, __VLS_63: {}, __VLS_66: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_11) => any;
 } & {
     icon?: (props: typeof __VLS_13) => any;
 } & {
-    default?: (props: typeof __VLS_58) => any;
+    default?: (props: typeof __VLS_63) => any;
 } & {
-    copyright?: (props: typeof __VLS_61) => any;
+    copyright?: (props: typeof __VLS_66) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     checkForUpdates: typeof checkForUpdates;

package/dist/components/composite/about-dialog/types.d.ts

@@ -1,6 +1,7 @@
-/** Result of the optional `fetchVersion` request. An empty result means the check failed. */
+/** Result of the optional `fetchVersion` request. An empty result means the check failed; `upToDate` reports a successful check with nothing newer. */
 export type AboutVersionInfo = {
     newVersion?: string;
     betaVersion?: string;
+    upToDate?: boolean;
 };
-export type AboutCheckState = 'idle' | 'checking' | 'update-available' | 'beta-available' | 'failed';
+export type AboutCheckState = 'idle' | 'checking' | 'update-available' | 'beta-available' | 'up-to-date' | 'failed';

package/dist/components/composite/connection-topology/ConnectionTopology.vue.d.ts

@@ -14,6 +14,8 @@ type __VLS_Props = {
     /** Render lanes as buttons that emit `select-lane`. */
     selectable?: boolean;
     emptyLabel?: string;
+    /** The `id` of the lane shown as selected (a pressed button); `select-lane` still only reports clicks. */
+    selectedLane?: string | number;
     /** State words for links without a label. */
     text?: Partial<Record<LinkState, string>>;
 };
@@ -29,6 +31,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     compact: boolean;
     selectable: boolean;
+    selectedLane: string | number;
 }, {}, {}, {}, 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

@@ -30,7 +30,7 @@ export type DataGridColumn = {
     /**
      * Leaves the column out when the grid is too narrow for every column's
      * minimum width: the lowest priority goes first. Without one the column
-     * always shows. The column chooser still lists it, to show it anyway.
+     * always shows (a `hideable: false` column only drops with an explicit one). The column chooser still lists it, to show it anyway.
      */
     priority?: number;
     /** `false` leaves the column out of the quick filter. */

package/dist/components/composite/data-table/DataTable.vue.d.ts

@@ -14,8 +14,10 @@ type __VLS_Props = {
     rowKey?: string;
     emptyText?: string;
     compact?: boolean;
-    /** Simple tables become fully labeled cards in mobile mode unless set to table. */
-    mobileView?: 'auto' | 'cards' | 'table';
+    /** Simple tables become fully labeled cards in mobile mode unless set to table. `container` picks cards from the measured width (see `containerBreakpoint`) whatever the app presentation. */
+    mobileView?: 'auto' | 'cards' | 'table' | 'container';
+    /** Width in px under which `mobileView="container"` shows cards. */
+    containerBreakpoint?: number;
 };
 declare var __VLS_2: `cell-${string}`, __VLS_3: {
     row: Record<string, unknown>;
@@ -40,7 +42,8 @@ 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<{}>, {
     compact: boolean;
     rowKey: string;
-    mobileView: "auto" | "cards" | "table";
+    mobileView: "auto" | "cards" | "table" | "container";
+    containerBreakpoint: number;
 }, {}, {}, {}, 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/overflow-toolbar/overflow.d.ts

@@ -9,6 +9,8 @@ export type OverflowFitInput = {
     moreWidth: number;
     gap: number;
     minVisibleItems: number;
+    /** Which items are dividers; a divider never ends the visible run, since it would separate nothing from More. */
+    dividers?: boolean[];
 };
 export type OverflowFit = {
     visibleCount: number;
@@ -22,4 +24,4 @@ export type OverflowFit = {
  * `More` is reserved as soon as the row cannot hold everything, and at least
  * `minVisibleItems` items stay out of it even when they do not fit.
  */
-export declare function computeOverflowFit({ widths, availableWidth, moreWidth, gap, minVisibleItems }: OverflowFitInput): OverflowFit;
+export declare function computeOverflowFit({ widths, availableWidth, moreWidth, gap, minVisibleItems, dividers }: OverflowFitInput): OverflowFit;

package/dist/components/composite/scroll-edges/ScrollEdges.vue.d.ts

@@ -1,7 +1,10 @@
 import { StyleValue } from 'vue';
+import { ScrollEdgesAxis } from '../../../composables/scrollEdges';
 type __VLS_Props = {
     viewportClass?: string;
     viewportStyle?: StyleValue;
+    /** Which edges are shaded: the left and right (`x`, default), the top and bottom (`y`) or all four. */
+    axis?: ScrollEdgesAxis;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -9,7 +12,11 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     viewport: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    axis: ScrollEdgesAxis;
+    viewportClass: string;
+    viewportStyle: string | false | import('vue').CSSProperties | StyleValue[] | null;
+}, {}, {}, {}, 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;

package/dist/components/composite/tree-view/TreeView.vue.d.ts

@@ -24,12 +24,14 @@ declare function getCheckedNodes(includeHalf?: boolean): TreeNode[];
 /** Moves a node among its siblings; used by the Alt+Arrow keys and the exposed API. */
 declare function moveSiblingBy(node: TreeNode, delta: number): void;
 declare function moveNode(sourceId: string, targetId: string, position: TreeViewPosition): void;
-declare var __VLS_63: {
+declare var __VLS_64: {
     node: TreeNode;
     selected: boolean;
-};
+}, __VLS_66: {};
 type __VLS_Slots = {} & {
-    trailing?: (props: typeof __VLS_63) => any;
+    trailing?: (props: typeof __VLS_64) => any;
+} & {
+    empty?: (props: typeof __VLS_66) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     getNodes: () => TreeNode[];
@@ -46,6 +48,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
         node: TreeNode;
         children: TreeNode[];
     }) => any;
+    check: (payload: TreeViewCheckPayload) => any;
     "update:checkedKeys": (value: string[]) => any;
     reorder: (payload: {
         node: TreeNode;
@@ -56,7 +59,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     expand: (node: TreeNode) => any;
     "update:expanded": (value: string[]) => any;
     "update:nodes": (value: TreeNode[]) => any;
-    check: (payload: TreeViewCheckPayload) => any;
     collapse: (node: TreeNode) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((node: TreeNode) => any) | undefined;
@@ -65,6 +67,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
         node: TreeNode;
         children: TreeNode[];
     }) => any) | undefined;
+    onCheck?: ((payload: TreeViewCheckPayload) => any) | undefined;
     "onUpdate:checkedKeys"?: ((value: string[]) => any) | undefined;
     onReorder?: ((payload: {
         node: TreeNode;
@@ -75,7 +78,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     onExpand?: ((node: TreeNode) => any) | undefined;
     "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
     "onUpdate:nodes"?: ((value: TreeNode[]) => any) | undefined;
-    onCheck?: ((payload: TreeViewCheckPayload) => any) | undefined;
     onCollapse?: ((node: TreeNode) => any) | undefined;
 }>, {
     multiple: boolean;

package/dist/components/composite/virtual-list/VirtualList.vue.d.ts

@@ -30,6 +30,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             item: T;
             index: number | string;
         }) => unknown;
+        /** Shown when `items` is empty. */
+        empty?: () => unknown;
     };
     emit: {};
 }>) => import('vue').VNode & {

package/dist/components/containers/card-grid/cardGrid.d.ts

@@ -1,8 +1,8 @@
 /**
  * Columns for `count` cards in a `width`-wide grid, all in px: as many as fit
  * at the minimum width, or one more if every card keeps 90% of it, then spread
- * evenly over the rows it takes, so no row is left with a lone card
- * (3 → 3, 4 → 2 + 2, 5 → 3 + 2). Unknown without a width or cards.
+ * evenly over the rows it takes, which avoids a lone card when the count
+ * allows it (3 → 3, 4 → 2 + 2, 5 → 3 + 2); 7 cards may still leave one orphan. Unknown without a width or cards.
  */
 export declare function cardGridColumns({ width, count, minItemWidth, gap }: {
     width: number;

package/dist/components/containers/expandable-item/ExpandableItem.vue.d.ts

@@ -31,23 +31,23 @@ type __VLS_Props = {
     /** Emits `select` when the summary row is clicked. */
     selectable?: boolean;
 };
-declare var __VLS_1: {}, __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_20: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {}, __VLS_28: {}, __VLS_30: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;
 } & {
     'icon-status'?: (props: typeof __VLS_8) => any;
 } & {
-    title?: (props: typeof __VLS_15) => any;
+    title?: (props: typeof __VLS_20) => any;
 } & {
-    status?: (props: typeof __VLS_17) => any;
+    status?: (props: typeof __VLS_22) => any;
 } & {
-    label?: (props: typeof __VLS_19) => any;
+    label?: (props: typeof __VLS_24) => any;
 } & {
-    block?: (props: typeof __VLS_21) => any;
+    block?: (props: typeof __VLS_26) => any;
 } & {
-    detail?: (props: typeof __VLS_23) => any;
+    detail?: (props: typeof __VLS_28) => any;
 } & {
-    'toggle-icon'?: (props: typeof __VLS_25) => any;
+    'toggle-icon'?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (event: MouseEvent) => any;

package/dist/components/primitives/color-picker/ColorPicker.vue.d.ts

@@ -34,13 +34,13 @@ type __VLS_Props = {
 declare function reset(): void;
 declare function showCustom(): void;
 declare function closeDropdown(): void;
-declare var __VLS_34: {}, __VLS_36: {}, __VLS_38: {};
+declare var __VLS_36: {}, __VLS_38: {}, __VLS_40: {};
 type __VLS_Slots = {} & {
-    'top-custom'?: (props: typeof __VLS_34) => any;
+    'top-custom'?: (props: typeof __VLS_36) => any;
 } & {
-    'bottom-custom'?: (props: typeof __VLS_36) => any;
+    'bottom-custom'?: (props: typeof __VLS_38) => any;
 } & {
-    bottom?: (props: typeof __VLS_38) => any;
+    bottom?: (props: typeof __VLS_40) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     reset: typeof reset;

package/dist/components/primitives/context-menu/ContextMenu.vue.d.ts

@@ -3,9 +3,9 @@ type __VLS_Props = {
     items: ContextMenuEntry[];
     disabled?: boolean;
 };
-declare var __VLS_14: {};
+declare var __VLS_18: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (key: string) => any;

package/dist/components/primitives/context-menu/ContextMenuItems.vue.d.ts

@@ -1,6 +1,8 @@
 import { ContextMenuEntry } from './types';
 type __VLS_Props = {
     items: ContextMenuEntry[];
+    /** Where submenus must stay; see useCollisionBoundary. */
+    collisionBoundary?: HTMLElement | HTMLElement[];
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (key: string) => any;
@@ -8,6 +10,8 @@ declare const __VLS_export: 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;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    collisionBoundary: HTMLElement | HTMLElement[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -9,6 +9,8 @@ type __VLS_Props = {
     radioValue?: string;
     /** Controlled values of named radio groups, keyed by `group`. */
     radioValues?: Record<string, string>;
+    /** Mark of the selected radio entry: a filled dot (default) or a check. */
+    radioIndicator?: 'dot' | 'check';
 };
 declare var __VLS_16: {};
 type __VLS_Slots = {} & {
@@ -30,6 +32,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     onRadioSelect?: ((value: string, key: string, group: string) => any) | undefined;
 }>, {
     align: "start" | "center" | "end";
+    radioIndicator: "dot" | "check";
 }, {}, {}, {}, 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/dropdown-menu/DropdownMenuItems.vue.d.ts

@@ -5,6 +5,8 @@ type __VLS_Props = {
     radioValues?: Record<string, string>;
     /** Where submenus must stay; see useCollisionBoundary. */
     collisionBoundary?: HTMLElement | HTMLElement[];
+    /** Mark of the selected radio entry: a filled dot (default) or a check. */
+    radioIndicator?: 'dot' | 'check';
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (key: string) => any;
@@ -18,6 +20,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     collisionBoundary: HTMLElement | HTMLElement[];
     checkedKeys: string[];
     radioValues: Record<string, string>;
+    radioIndicator: "dot" | "check";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import { Component } from 'vue';
 export type DropdownMenuSubEntry = {
     type?: 'item';
     key: string;
@@ -6,6 +7,8 @@ export type DropdownMenuSubEntry = {
     /** Legacy visual check mark. Use `type: 'checkbox'` for a real, togglable item. */
     checked?: boolean;
     danger?: boolean;
+    /** A small leading icon, such as a pencil for "Rename". Takes the place of the check mark. */
+    icon?: Component;
     shortcut?: string;
     /** @deprecated A real submenu is rendered when `children` is present. */
     submenu?: boolean;

package/dist/components/primitives/pagination/Pagination.vue.d.ts

@@ -40,6 +40,8 @@ type __VLS_Props = {
     maxPageButtons?: number;
     /** Shows the refresh control, which emits `refresh`. */
     refresh?: boolean;
+    /** Groups thousands in the total text and page numbers (`1,234,567`); false prints plain digits. */
+    groupDigits?: boolean;
     totalTextMode?: PaginationTotalTextMode;
     totalTextFormat?: Partial<Record<PaginationTotalTextMode, string>>;
     labels?: Partial<PaginationLabels>;
@@ -98,6 +100,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     autoLess: boolean;
     lessWidth: number;
     maxPageButtons: number;
+    groupDigits: boolean;
     totalTextMode: PaginationTotalTextMode;
     totalTextFormat: Partial<Record<PaginationTotalTextMode, string>>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -1,3 +1,4 @@
+import { SegmentVariant } from './context';
 type __VLS_Props = {
     /** Selected item value. */
     modelValue?: string;
@@ -7,6 +8,8 @@ type __VLS_Props = {
     ariaLabelledby?: string;
     /** Disables every item of the group. */
     disabled?: boolean;
+    /** `sheet` draws joined sheet tabs on a rule, as above a table, instead of a segmented control. */
+    variant?: SegmentVariant;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -19,6 +22,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    variant: SegmentVariant;
     disabled: boolean;
     modelValue: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -19,8 +19,8 @@ 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<{}>, {
     disabled: boolean;
-    tooltip: string | boolean | Record<string, unknown>;
     dot: string | boolean;
+    tooltip: string | boolean | Record<string, unknown>;
 }, {}, {}, {}, 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/segment-control/context.d.ts

@@ -6,9 +6,12 @@ export type SegmentItemHandle = {
     element: () => HTMLElement | undefined;
 };
 export type SegmentMove = 'previous' | 'next' | 'first' | 'last';
+/** `segment`: a segmented control; `sheet`: joined sheet tabs on a rule, the selected one open to the content below. */
+export type SegmentVariant = 'segment' | 'sheet';
 export type SegmentControlContext = {
     selected: Ref<string>;
     groupDisabled: Ref<boolean>;
+    variant: Ref<SegmentVariant>;
     select: (value: string) => void;
     register: (handle: SegmentItemHandle) => void;
     unregister: (handle: SegmentItemHandle) => void;

package/dist/components/primitives/spinner/Spinner.vue.d.ts

@@ -1,9 +1,12 @@
 type __VLS_Props = {
     label?: string;
     size?: number;
+    /** The ring fills the whole `size` box (an 16px ring beside text) instead of DSM's 2/3 ring in a 24px box. */
+    inline?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: number;
+    inline: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/primitives/tooltip/OverflowTooltip.vue.d.ts

@@ -8,6 +8,8 @@ type __VLS_Props = {
     delay?: number;
     /** Replaces the whole text of a cut element; `false` shows nothing for it. */
     resolve?: (found: CutText) => string | false | undefined;
+    /** Touch and pen taps on cut text toggle the tooltip. */
+    openOnTap?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -19,6 +21,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     align: "start" | "center" | "end";
     delay: number;
     resolve: (found: CutText) => string | false | undefined;
+    openOnTap: 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/tooltip/Tooltip.vue.d.ts

@@ -4,15 +4,18 @@ type __VLS_Props = {
     delay?: number;
     /** Keeps the trigger from opening a tooltip at all. */
     disabled?: boolean;
+    /** A tap on the trigger toggles the tooltip (touch has no hover). Off by default so an icon button's tap only acts. */
+    openOnTap?: boolean;
 };
-declare var __VLS_20: {};
+declare var __VLS_25: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     side: "top" | "right" | "bottom" | "left";
     delay: number;
+    openOnTap: 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/tooltip/tooltipStyle.d.ts

@@ -1 +1 @@
-export declare const TOOLTIP_CONTENT_CLASS = "z-[1100] max-w-72 rounded-[var(--ui-radius-sm)] bg-[var(--ui-tooltip-bg)] px-2.5 py-1.5 text-[12px] leading-4 text-[var(--ui-tooltip-fg)] whitespace-pre-line shadow-[var(--ui-shadow-menu)] [overflow-wrap:anywhere] animate-[ui-fade-in_var(--ui-motion-fast)_var(--ui-motion-ease)]";
+export declare const TOOLTIP_CONTENT_CLASS = "z-[1450] max-w-72 rounded-[var(--ui-radius-sm)] bg-[var(--ui-tooltip-bg)] px-2.5 py-1.5 text-[12px] leading-4 text-[var(--ui-tooltip-fg)] whitespace-pre-line shadow-[var(--ui-shadow-menu)] [overflow-wrap:anywhere] animate-[ui-fade-in_var(--ui-motion-fast)_var(--ui-motion-ease)]";

package/dist/components/primitives/typography/TypoHeader.vue.d.ts

@@ -11,6 +11,8 @@ type __VLS_Props = {
     /** Render the permalink anchor. */
     anchor?: boolean;
     anchorLabel?: string;
+    /** `end` puts the anchor after the text; `start` hangs it in the left margin (it is cut at a container's edge). */
+    anchorPlacement?: 'start' | 'end';
 };
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
@@ -22,6 +24,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     href: string;
     level: HeaderLevel;
     baseUrl: string;
+    anchorPlacement: "start" | "end";
 }, {}, {}, {}, 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/composables/formControl.d.ts

@@ -18,4 +18,5 @@ export declare function useFormControl(options: {
         style: import('vue').StyleValue;
     };
     changed: (value: unknown) => void;
+    invalid: import('vue').ComputedRef<boolean>;
 };