@synopackageland/ui 0.9.1 → 0.9.3

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 0.9.3 (2026-10-13)
+
+Behavior changes: `Checkbox` renders its root as a `span` with a `label` for its text, `Input type="password"` adds a show/hide button, number inputs are 128px wide, `PageHeader` is sticky by default, and disabled primary and danger buttons are tinted instead of faded. Layout rules are in `docs/layout-rules.md`.
+行為變化：`Checkbox` 根元素改為 `span`，文字用 `label`；`Input type="password"` 加上顯示／隱藏按鈕；數字欄位寬 128px；`PageHeader` 預設 sticky；停用的主要與危險按鈕改為淡色底而非半透明。版面規則見 `docs/layout-rules.md`。
+
+- **Behavior change.** `Checkbox` keeps its box and text on one line even when App CSS sets `label { display: grid }`: the root is a `span` and only the text is a `label` bound to the box.
+- **行為變化。** App CSS 設 `label { display: grid }` 時，`Checkbox` 的方塊與文字仍在同一行：根元素改為 `span`，只有文字是綁定方塊的 `label`。
+- **Behavior change.** `Input type="password"` has a show/hide button (`data-ui-password-toggle`, `aria-pressed`). `Input type="number"` is 128px wide instead of the full row.
+- **行為變化。** `Input type="password"` 加上顯示／隱藏按鈕（`data-ui-password-toggle`、`aria-pressed`）。`Input type="number"` 寬 128px，不再撐滿整列。
+- **Behavior change.** `PageHeader` sticks to the top while the page scrolls; `:sticky="false"` turns it off. `EmptyState` fills the remaining height so its content is centred.
+- **行為變化。** `PageHeader` 捲動時固定在頂端，`:sticky="false"` 可關閉。`EmptyState` 撐滿剩餘高度，內容垂直置中。
+- **Behavior change.** Disabled primary and danger buttons use a pale tint of their colour with readable text (4.5:1) instead of 40% opacity.
+- **行為變化。** 停用的主要與危險按鈕改用淡色底與可讀文字（4.5:1），不再是 40% 透明度。
+- `SettingsSection` takes a `description` (one paragraph, at most 72ch) and a `#footer` slot for its actions; its title is body-colour text over a solid divider. `SettingsSection` and `Card` take `loading`, which keeps the title and shows the new `SectionSkeleton` in place of the content and actions.
+- `SettingsSection` 新增 `description`（一段，最寬 72ch）與放動作的 `#footer` slot；標題改為內文色、下方實線分隔。`SettingsSection` 與 `Card` 新增 `loading`：保留標題，內容與動作改顯示新的 `SectionSkeleton`。
+- `PathDisplay` shows a NAS path read-only: folder icon, truncated from the start with the full path as its tooltip, and a copy button. It emits `copied` and `copy-failed`.
+- 新增 `PathDisplay`：唯讀顯示 NAS 路徑，含資料夾圖示，從開頭截斷並以 tooltip 顯示完整路徑，附複製按鈕；發出 `copied`、`copy-failed`。
+- Fix: `SectionTabs` spans the full toolbar width and its first tab starts at the content edge. The `Select` chevron is vertically centred.
+- 修正：`SectionTabs` 撐滿整個 toolbar，第一個分頁與內容左緣對齊。`Select` 的箭頭垂直置中。
+- `pnpm check:polish` checks these rules in Chrome against a DSM host page.
+- `pnpm check:polish` 在 Chrome 中以 DSM 主機頁檢查上述規則。
+
+## 0.9.2 (2026-10-12)
+
+One behavior change: while a Dialog floats outside its window (`dialog-bounds="viewport"`), focus that lands on the owning DSM window returns to the top Dialog, so Escape closes that Dialog instead of the window. Everything else is additive: Badge looks the same in the DSM 7 theme.
+一項行為變化：Dialog 浮出視窗外（`dialog-bounds="viewport"`）期間，落到所屬 DSM 視窗的焦點會回到最上層 Dialog，Esc 因此只關該 Dialog，不再關掉視窗。其餘皆為新增；DSM 7 主題下 Badge 外觀不變。
+
+- `ConnectionTopology` draws paths from several sources, each through an optional relay, to one shared target, with no product wording built in. Each link is one of `active`, `pending`, `attention`, `error`, `idle` or `unknown`, shown with colour, a glyph and a word: working links flow dots toward the target, changing ones move slow dashes with a pulsing dot. Lanes are buttons that emit `select-lane` (Enter/Space; arrow keys, Home and End move between lanes); `lane-footer-<id>` and `node-<id>` slots add content. Below 600px of container width, or with `compact`, lanes stack with their own target. `pnpm check:topology` checks it in Chrome.
+- 新增 `ConnectionTopology`：畫出多個來源各自經過（可省略的）中繼、連到同一個目標的路徑，元件本身不含產品用語。每段連線是 `active`、`pending`、`attention`、`error`、`idle`、`unknown` 之一，以顏色、圖示與文字表示：運作中的連線有點點流向目標，變化中的連線是慢速虛線加脈動圓點。每條 lane 是按鈕，發出 `select-lane`（Enter／Space；方向鍵、Home、End 在 lane 間移動）；`lane-footer-<id>`、`node-<id>` slot 可加內容。容器寬度小於 600px 或設 `compact` 時改為直向堆疊、每條 lane 各帶目標。`pnpm check:topology` 在 Chrome 中檢查。
+- `StatusDot` is a tone dot; `pulse` ripples a ring out of it. `StepList` is a static numbered list of instructions or checklist items, each with an optional status (`done`, `current`, `pending`, `error`, `warning`) and `#description`/`#action` slots.
+- 新增 `StatusDot`（色調圓點，`pulse` 會向外擴散光圈）與 `StepList`（靜態編號步驟清單，可作操作說明或檢查清單；每項可帶狀態 `done`、`current`、`pending`、`error`、`warning`，並有 `#description`／`#action` slot）。
+- Theme tokens `--ui-{neutral,info,success,warning,danger}-soft` and `-text` give each status tone a soft fill and the text that reads on it; `Badge` now uses them (same colours in the DSM 7 theme), so a theme recolours every tone. New keyframes `ui-flow` and `ui-pulse`; both stop under `prefers-reduced-motion`.
+- 新增主題 token `--ui-{neutral,info,success,warning,danger}-soft` 與 `-text`，為每個狀態色提供淡底色與其上的文字色；`Badge` 改用它們（DSM 7 主題下顏色不變），主題可一次改掉所有色調。新增 keyframe `ui-flow`、`ui-pulse`，在 `prefers-reduced-motion` 下皆停止。
+- **Behavior change.** Fix: with `dialog-bounds="viewport"`, Escape after pressing a floating Dialog no longer closes the whole DSM window. The `activate` handler's `toFront()` moved focus to the window's own anchor, so Escape skipped the Dialog and reached the window's keymap. Focus that lands on the owning window while a Dialog floats now returns to the top Dialog, so Escape closes only that Dialog. Apps need no change.
+- **行為變化。** 修正：`dialog-bounds="viewport"` 下，按過浮出的 Dialog 後再按 Esc，不再關掉整個 DSM 視窗。`activate` 處理中的 `toFront()` 會把焦點移到視窗自己的錨點，Esc 因此繞過 Dialog、由視窗 keymap 處理。現在 Dialog 浮出期間，落到所屬視窗的焦點會回到最上層 Dialog，Esc 只關該 Dialog。App 不需修改。
+
 ## 0.9.1 (2026-10-12)
 
 Two behavior changes: a Dialog without `width` is 520px wide inside `AppRoot`, and Breadcrumb's last level no longer emits `click-item`.

package/README.md

@@ -8,7 +8,8 @@ Import the components you need into your Vue application.
 For DSM window / full-page Portal / phone layouts, see
 [Responsive DSM application layout](docs/adaptive-layout.md). To generate UI
 as JSON (including with an AI and the `syno-pkg-land-ui` validate/render CLI), see
-[Declarative DSM UI](docs/json-ui.md).
+[Declarative DSM UI](docs/json-ui.md). For page layout rules, see
+[Layout rules](docs/layout-rules.md).
 
 Synology Package Land UI provides Vue components for Synology package applications,
 including an embedded theme and AppRoot for shared DSM desktop windows.
@@ -227,6 +228,9 @@ packed-consumer Chromium acceptance run (requires ego-browser).
 
 ## Common component patterns
 
+Spacing, action rows, field widths, status display and section loading follow
+[Layout rules](docs/layout-rules.md).
+
 ### Dialog
 
 Use `v-model:open` to control visibility. The default slot contains the body;
@@ -328,6 +332,19 @@ Components use semantic CSS tokens. Import your override stylesheet after the li
 }
 ```
 
+Status tones come in pairs, a soft fill and the text that reads on it:
+`--ui-{neutral,info,success,warning,danger}-soft` and `-text`. `Badge`,
+`StatusDot`, `StepList` and `ConnectionTopology` use only these and the base
+tones (`--ui-success`, …), so a dark theme overrides the pairs once:
+
+```css
+[data-ui-theme='dark'] {
+  --ui-success-soft: #173222;
+  --ui-success-text: #6fdc8a;
+  /* … the other tones, and the surface and text tokens */
+}
+```
+
 Density can be switched per application subtree:
 
 ```html
@@ -344,7 +361,7 @@ Primitives:
 - Input / Textarea
 - Checkbox / RadioGroup / Switch
 - Select
-- Badge / Separator / Spinner / LoadingMask / LoadingArea / Progress / Skeleton / Surface
+- Badge / StatusDot / Separator / Spinner / LoadingMask / LoadingArea / Progress / Skeleton / Surface
 - SplitButton
 - Tooltip / Popover / DropdownMenu / ContextMenu / Dialog
 - Sheet / Drawer
@@ -356,7 +373,8 @@ DSM-style application building blocks:
 
 - SearchField
 - SettingsRow / SettingsSection
-- Callout / EmptyState
+- Callout / EmptyState / StepList
+- ConnectionTopology
 - DataTable / DataGrid
 - TreeView
 - FilePicker
@@ -385,6 +403,54 @@ by the caller, add `class="ui-tab-panel"` to a panel keyed by the selected value
 to use the same short fade. These effects and the loading ring respect the
 system's reduced-motion preference.
 
+### Status: StatusDot, StepList, ConnectionTopology
+
+`StatusDot` is an 8px tone dot; `pulse` ripples a ring out of it for a state
+that is still changing. It is decorative unless it has a `label`.
+
+`StepList` is a static numbered list (`items: { title, description?, status? }[]`)
+for instructions or a checklist. `status` (`done`, `current`, `pending`, `error`,
+`warning`) recolours the marker and is read out to assistive technology;
+`#description` and `#action` scoped slots add content per step. It does not
+navigate; use `Wizard` for that.
+
+`ConnectionTopology` draws paths from several sources, each through an optional
+relay, to one shared target. It knows nothing about any product: the caller
+maps its own states to six link states.
+
+```vue
+<ConnectionTopology
+  aria-label="Connections"
+  :target="{ id: 'server', label: 'Server', caption: 'office-01', icon: Server }"
+  :lanes="[{
+    id: 'relay',
+    source: { id: 'browser', label: 'Any browser', icon: Globe },
+    via: { id: 'relay', label: 'Edge relay', icon: Cloud },
+    links: [{ state: 'active', label: 'Reachable' }, { state: 'active', label: 'Running' }],
+  }]"
+  @select-lane="open"
+>
+  <template #lane-footer-relay>https://office.example.com</template>
+</ConnectionTopology>
+```
+
+- **States.** `active` (green, dots flow toward the target), `pending` (amber,
+  slow dashes and a pulsing dot), `attention` (amber, waits for the user),
+  `error` (red), `idle` (grey dashes), `unknown` (grey dots). Every state but
+  `idle` has a glyph and every link a word, so colour is never the only cue;
+  `link.icon` replaces the glyph (a key for a sign-in, say). A missing `label`
+  shows the localized state word (`text` overrides them); `label: ''` hides it.
+- **Keyboard and screen readers.** Each lane is a button named after its nodes
+  and link states; Enter or Space emits `select-lane`, the arrow keys, Home and
+  End move between lanes. `selectable: false` renders plain rows.
+  `lane-footer-<id>` content sits below the lane button, so it may hold its own
+  buttons and links; `node-<id>` replaces a node's content.
+- **Layout.** Below 600px of container width (or with `compact`), each lane
+  stacks with its own copy of the target and the link words move to a caption
+  line. With no lanes, one idle line shows `empty-label`.
+- **Motion.** The keyframes `ui-flow` and `ui-pulse` stop under
+  `prefers-reduced-motion`; a working link then turns solid with an arrow.
+
 `FilePicker` owns file selection/validation/drop-zone UI only; applications remain responsible for upload transport.
 
 ### DataGrid
@@ -443,6 +509,7 @@ pnpm check       # lint, typecheck, tests, and production build
 pnpm story:build # build the component workbench
 pnpm check:host  # after pnpm build: DSM host simulation screenshots (Chrome)
 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)
 ```
 
 `pnpm check:host` serves `tests/dsm-host` and screenshots each overlay scene in
@@ -457,6 +524,13 @@ embedded theme (also under `host-simulation.css`), checks in headless Chrome tha
 inside and centred in the track and that a real mouse click toggles an enabled switch. Screenshots
 are left in `.switch-shots/`.
 
+`pnpm check:topology` renders every link state wide, on dark tokens, at 360px and
+empty, on the standalone and the embedded theme. In headless Chrome it checks
+that working links flow and changing ones pulse, that reduced motion stills
+them, that the arrow keys and Enter select a lane with a visible focus ring, and
+that the narrow layout stacks without overflow. Screenshots are left in
+`.topology-shots/`.
+
 In the workbench, open `DSM 7 / App Interior` and `DSM 7 / Advanced Components`
 for reference compositions. See [SPEC.md](./SPEC.md) for architecture and
 contribution rules, and [src/index.ts](./src/index.ts) for public exports.

package/dist/components/app/page-header/PageHeader.vue.d.ts

@@ -1,12 +1,15 @@
 type __VLS_Props = {
     title: string;
     description?: string;
+    sticky?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     actions?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sticky: 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;

package/dist/components/composite/about-dialog/AboutDialog.vue.d.ts

@@ -58,9 +58,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     "onCheck-error"?: ((error: unknown) => any) | undefined;
 }>, {
     width: string;
+    version: string;
     defaultOpen: boolean;
     open: boolean;
-    version: string;
     tagline: string;
     iconSrc: string;
     beta: boolean;

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

@@ -0,0 +1,40 @@
+import { LinkState, TopologyLane, TopologyNode } from './types';
+/**
+ * Paths from several sources, each through an optional relay, to one shared
+ * target. Each link shows its state with colour, a glyph and text; working
+ * links flow toward the target. Every lane is a button that emits
+ * `select-lane`. Below 600px of container width the lanes stack compactly.
+ */
+type __VLS_Props = {
+    target: TopologyNode;
+    lanes: TopologyLane[];
+    ariaLabel?: string;
+    /** Always use the stacked narrow layout. */
+    compact?: boolean;
+    /** Render lanes as buttons that emit `select-lane`. */
+    selectable?: boolean;
+    emptyLabel?: string;
+    /** State words for links without a label. */
+    text?: Partial<Record<LinkState, string>>;
+};
+type __VLS_Slots = Record<`node-${string}`, (props: {
+    node: TopologyNode;
+}) => unknown> & Record<`lane-footer-${string}`, (props: {
+    lane: TopologyLane;
+}) => unknown>;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "select-lane": (id: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onSelect-lane"?: ((id: string) => any) | undefined;
+}>, {
+    compact: boolean;
+    selectable: 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/connection-topology/TopologyLink.vue.d.ts

@@ -0,0 +1,8 @@
+import { TopologyLink } from './types';
+type __VLS_Props = {
+    link: TopologyLink;
+    text: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+import { TopologyNode } from './types';
+type __VLS_Props = {
+    node: TopologyNode;
+};
+declare var __VLS_1: {
+    node: TopologyNode;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/connection-topology/types.d.ts

@@ -0,0 +1,30 @@
+import { Component } from 'vue';
+/**
+ * `active` works, `pending` is still changing, `attention` waits for the user,
+ * `error` failed, `idle` is not set up or turned off, `unknown` cannot be told.
+ */
+export type LinkState = 'active' | 'pending' | 'attention' | 'error' | 'idle' | 'unknown';
+export interface TopologyNode {
+    id: string;
+    label: string;
+    caption?: string;
+    icon?: Component;
+}
+export interface TopologyLink {
+    state: LinkState;
+    /** Short visible text; the state word stands in when it is missing, and an
+     * empty string shows none (the lane's accessible name keeps the state word). */
+    label?: string;
+    /** Replaces the state's glyph, e.g. a key for a sign-in. */
+    icon?: Component;
+}
+export interface TopologyLane {
+    id: string;
+    /** The far end, e.g. the people or devices that connect. */
+    source: TopologyNode;
+    /** The relay in between; without it the lane is a direct path. */
+    via?: TopologyNode;
+    /** Source to relay, then relay to the shared target. */
+    links: [TopologyLink, TopologyLink];
+    disabled?: boolean;
+}

package/dist/components/composite/data-grid/DataGrid.vue.d.ts

@@ -229,10 +229,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     draggable: boolean | DataGridDraggable;
     page: number;
     pageSize: number;
+    selectable: boolean;
     rowKey: string;
     defaultSort: DataGridSort | null;
     selectedKeys: string[];
-    selectable: boolean;
     selectOnRowClick: boolean;
     singleSelect: boolean;
     localSort: boolean;

package/dist/components/composite/path-display/PathDisplay.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    path: string;
+    copyable?: boolean;
+};
+declare var __VLS_16: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    copied: (path: string) => any;
+    copyFailed: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCopied?: ((path: string) => any) | undefined;
+    onCopyFailed?: (() => any) | undefined;
+}>, {
+    copyable: 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/settings-section/SettingsSection.vue.d.ts

@@ -1,11 +1,15 @@
 type __VLS_Props = {
     title: string;
+    /** One paragraph under the title; its width is capped for reading. */
+    description?: string;
+    /** Shows a skeleton in place of the content and actions while they load. */
+    loading?: boolean;
     collapsible?: boolean;
     defaultOpen?: boolean;
     /** Bound with `v-model:open` for controlled collapse. */
     open?: boolean;
 };
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_6) => any;
 } & {
@@ -15,7 +19,11 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_12) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    description?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+} & {
+    footer?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

package/dist/components/composite/step-list/StepList.vue.d.ts

@@ -0,0 +1,29 @@
+import { StepListItem, StepStatus } from './types';
+/**
+ * A static, numbered list of steps: instructions to follow or a checklist
+ * whose items each carry a status. It does not navigate; see Wizard for that.
+ */
+type __VLS_Props = {
+    items: StepListItem[];
+    /** Status words read to assistive technology. */
+    text?: Partial<Record<Exclude<StepStatus, 'pending'>, string>>;
+};
+type __VLS_Slots = {
+    description?: (props: {
+        item: StepListItem;
+        index: number;
+    }) => unknown;
+    action?: (props: {
+        item: StepListItem;
+        index: number;
+    }) => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/step-list/types.d.ts

@@ -0,0 +1,7 @@
+export type StepStatus = 'done' | 'current' | 'pending' | 'error' | 'warning';
+export interface StepListItem {
+    title: string;
+    description?: string;
+    /** Defaults to `pending`. */
+    status?: StepStatus;
+}

package/dist/components/containers/card/Card.vue.d.ts

@@ -11,18 +11,20 @@ type __VLS_Props = {
     toggleLabel?: string;
     /** Where footer actions sit; DSM aligns them to a side, never the centre. */
     footerAlign?: 'start' | 'end' | 'between';
+    /** Shows a skeleton in place of the body and footer while they load. */
+    loading?: boolean;
 };
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_8) => any;
 } & {
     'header-actions'?: (props: typeof __VLS_10) => any;
 } & {
-    body?: (props: typeof __VLS_17) => any;
+    body?: (props: typeof __VLS_22) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_24) => any;
 } & {
-    footer?: (props: typeof __VLS_21) => any;
+    footer?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:expanded": (value: boolean) => any;

package/dist/components/feedback/validation-popup/ValidationPopup.vue.d.ts

@@ -24,11 +24,11 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    offset: number;
     side: "top" | "right" | "bottom" | "left";
     align: "start" | "center" | "end";
     defaultOpen: boolean;
     open: boolean;
-    offset: number;
     disable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -77,9 +77,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     onChangePage?: ((payload: PaginationSwitch) => any) | undefined;
 }>, {
     modelValue: number;
-    labels: Partial<PaginationLabels>;
     end: string | number;
     mode: "normal" | "less";
+    labels: Partial<PaginationLabels>;
     start: string | number;
     refresh: boolean;
     total: string | number;

package/dist/components/primitives/rich-text/RichText.vue.d.ts

@@ -48,7 +48,7 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
         default: () => string[];
     };
 }>> & Readonly<{
-    "onClick-link"?: ((linkId: string, attrs: Record<string, string>, event: KeyboardEvent | MouseEvent) => any) | undefined;
+    "onClick-link"?: ((linkId: string, attrs: Record<string, string>, event: MouseEvent | KeyboardEvent) => any) | undefined;
 }>, {
     text: string;
     parseTags: string[];

package/dist/components/primitives/skeleton/SectionSkeleton.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    lines?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    lines: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/primitives/skeleton/Skeleton.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Props = {
     radius?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    width: string;
     height: string;
+    width: string;
     radius: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/primitives/status-dot/StatusDot.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    /** Ripple a ring out of the dot, for a state that is still changing. */
+    pulse?: boolean;
+    /** Names the state for assistive technology; without it the dot is decorative. */
+    label?: string;
+};
+declare const __VLS_export: 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";
+    pulse: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/primitives/tag/Tag.vue.d.ts

@@ -35,10 +35,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     measure: typeof measure;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     remove: () => any;
-    click: (event: KeyboardEvent | MouseEvent) => any;
+    click: (event: MouseEvent | KeyboardEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRemove?: (() => any) | undefined;
-    onClick?: ((event: KeyboardEvent | MouseEvent) => any) | undefined;
+    onClick?: ((event: MouseEvent | KeyboardEvent) => any) | undefined;
 }>, {
     label: string;
     disabled: boolean;

package/dist/i18n/text.d.ts

@@ -43,6 +43,15 @@ export declare const englishUiText: {
     readonly Info: "Info";
     readonly Warning: "Warning";
     readonly Error: "Error";
+    readonly Completed: "Completed";
+    readonly "Current step": "Current step";
+    readonly Connected: "Connected";
+    readonly Connecting: "Connecting";
+    readonly "Needs attention": "Needs attention";
+    readonly Failed: "Failed";
+    readonly "Not set up": "Not set up";
+    readonly Unknown: "Unknown";
+    readonly "No connections": "No connections";
     readonly Reset: "Reset";
     readonly Custom: "Custom";
     readonly Color: "Color";
@@ -129,6 +138,10 @@ export declare const englishUiText: {
     readonly "Pagination, {total} item total": "Pagination, {total} item total";
     readonly Notification: "Notification";
     readonly "Notifications ({hotkey})": "Notifications ({hotkey})";
+    readonly "Show password": "Show password";
+    readonly "Hide password": "Hide password";
+    readonly "Copy path": "Copy path";
+    readonly Copied: "Copied";
 };
 export type UiTextKey = keyof typeof englishUiText;
 export type UiTranslator = (key: UiTextKey, values?: Record<string, string | number>) => string;

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { default as MultipleSelect } from './components/primitives/multiple-sele
 export { default as SuperboxSelect } from './components/primitives/superbox-select/SuperboxSelect.vue';
 export type { SelectAllowCreate, SelectCreateOptions, SelectOptionGroup, SelectOptions, SelectOptionsRecord, SelectSearch, } from './components/primitives/select/internal/types';
 export { default as Badge } from './components/primitives/badge/Badge.vue';
+export { default as StatusDot } from './components/primitives/status-dot/StatusDot.vue';
 export { default as Separator } from './components/primitives/separator/Separator.vue';
 export { default as Spinner } from './components/primitives/spinner/Spinner.vue';
 export { default as LoadingMask } from './components/primitives/loading/LoadingMask.vue';
@@ -26,6 +27,7 @@ export { default as LoadingArea } from './components/primitives/loading/LoadingA
 export { default as LoadingIndicator } from './components/primitives/loading/LoadingIndicator.vue';
 export { default as Progress } from './components/primitives/progress/Progress.vue';
 export { default as Skeleton } from './components/primitives/skeleton/Skeleton.vue';
+export { default as SectionSkeleton } from './components/primitives/skeleton/SectionSkeleton.vue';
 export { default as Surface } from './components/primitives/surface/Surface.vue';
 export { default as Tooltip } from './components/primitives/tooltip/Tooltip.vue';
 export { default as Popover } from './components/primitives/popover/Popover.vue';
@@ -103,6 +105,10 @@ export { default as SettingsSection } from './components/composite/settings-sect
 export { default as Footbar } from './components/composite/footbar/Footbar.vue';
 export type { FootbarButton, FootbarButtonRegion, FootbarButtonSize, FootbarButtonVariant, } from './components/composite/footbar/types';
 export { default as Callout } from './components/composite/callout/Callout.vue';
+export { default as StepList } from './components/composite/step-list/StepList.vue';
+export type { StepListItem, StepStatus } from './components/composite/step-list/types';
+export { default as ConnectionTopology } from './components/composite/connection-topology/ConnectionTopology.vue';
+export type { LinkState, TopologyLane, TopologyLink, TopologyNode } from './components/composite/connection-topology/types';
 export { default as EmptyState } from './components/composite/empty-state/EmptyState.vue';
 export { default as DataTable } from './components/composite/data-table/DataTable.vue';
 export type { DataTableColumn } from './components/composite/data-table/DataTable.vue';
@@ -113,6 +119,7 @@ export type { TreeNode, TreeViewCheckPayload, TreeViewDraggableConfig, TreeViewP
 export { default as FilePicker } from './components/composite/file-picker/FilePicker.vue';
 export type { FileRejection } from './components/composite/file-picker/FilePicker.vue';
 export { default as CopyCutField } from './components/composite/copy-cut-field/CopyCutField.vue';
+export { default as PathDisplay } from './components/composite/path-display/PathDisplay.vue';
 export type { CopyCutFieldAutosize } from './components/composite/copy-cut-field/CopyCutField.vue';
 export { default as DataView } from './components/composite/data-view/DataView.vue';
 export { default as VirtualList } from './components/composite/virtual-list/VirtualList.vue';