@synopackageland/ui 0.14.9 → 0.14.11

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.14.11 (2026-10-24)
+
+Visual change: the DSM7 light theme's page and neutral greys. Props, slots and exports stay as they were.
+
+- The DSM7 light theme's page and neutral greys are lighter and softer: the page behind cards is a pale sage mist (`--ui-bg` `#f4f6f3`, was `#f0f2f5`), and grey buttons, neutral badges, inset blocks, grid rules and card and field frames share that mist (new `--ui-mist-a2/a3/a6/a7/a8`) instead of DSM's blue-grey steps. Text, tones, the accent and the selection are unchanged; text keeps 4.5:1. The web frame fallback (`--ui-app-web-border`) follows `--ui-border`.
+- `ExpandableItem` opens and closes from a click anywhere on its header (icon, title, summary), not only the arrow. A click in the detail or on a control a slot puts in the header is left alone; a `selectable` row still selects on a click and expands on a double click. The arrow stays the keyboard stop (Enter/Space, focus ring).
+
+## 0.14.10 (2026-10-23)
+
+Visual change: `Callout` and `Toast`. Existing props, slots, events and the toast API keep working.
+
+- `Callout` and `Toast` share one look: a raised neutral surface with no frame or tinted fill, a soft shadow and a 1px ring, a light of the tone along the top edge, and a faint glow of the tone behind an 18px icon. Corners are 12px. Action buttons are capsules. A Callout fades in and rises; a toast slides in; reduced motion turns both off. The Callout's leading tone bar is gone.
+- `Callout` puts its actions at the end of the message (under it when the width runs out) and stops at 720px (`--ui-callout-max-width`); `fill` spans the container.
+- `Callout variant="inline"`: the same icon and tones as a line of text without the surface, for short risk notes.
+- `Callout` `#details` slot holds longer text behind a "Learn more" toggle (`v-model:expanded`, `moreLabel`, `lessLabel`; translated defaults).
+- New tokens: `--ui-callout-radius`, `--ui-callout-glow`, `--ui-callout-shadow`; the workbench dark theme raises the glow and deepens the shadow.
+- Add [docs/callout.md](docs/callout.md): a passing result is a toast, something to act on is a Callout with one title, one line and one action, a risk is a short inline note. Callout text has no closing period.
+- Inside a DSM window, app text can be selected and copied again: the theme sets `user-select: text` on the app root, overriding DSM's `html, body { user-select: none }`, and keeps buttons, tabs, menu items, sidebar and tree rows, choice labels and dividers unselectable. Text fields are unaffected. `pnpm check:text-select` checks it in a real browser.
+
 ## 0.14.9 (2026-10-23)
 
 - `Link` keeps short labels on one line inside content-sized wrappers, including inline-flex parents. Its horizontal hit padding and keyboard focus ring remain; long labels still wrap within the container.

package/README.md

@@ -157,6 +157,10 @@ import { AppRoot, ToastProvider } from '@synopackageland/ui'
   `body button:lang(…)` font rules;
 - makes the app root the containing block of fixed overlays, so dialogs,
   sheets and toasts stay inside the window.
+- turns text selection back on under the app root, which DSM's
+  `html, body { user-select: none }` turns off: content text can be selected
+  and copied, while buttons, tabs, menu items, sidebar and tree rows, choice
+  labels and dividers stay unselectable (a `select-*` utility still wins).
 
 `AppRoot` renders `<div data-ui-app data-syno-pkg-land-ui>` and routes every overlay
 portal (Dialog, Sheet, Toast, Popover, Select, DropdownMenu, ContextMenu,
@@ -503,7 +507,7 @@ DSM-style application building blocks:
 
 - SearchField
 - SettingsRow / SettingsSection
-- Callout / EmptyState / StepList
+- Callout (see [docs/callout.md](docs/callout.md) for when to use a Callout, a toast or an inline note) / EmptyState / StepList
 - ConnectionTopology
 - DataTable / DataGrid
 - TreeView

package/dist/components/composite/callout/Callout.vue.d.ts

@@ -1,22 +1,40 @@
 type __VLS_Props = {
     tone?: 'info' | 'success' | 'warning' | 'danger';
+    /** `soft`: a compact tinted panel. `inline`: a status line with no panel, for a short note under a field or a section. */
+    variant?: 'soft' | 'inline';
     title?: string;
     closable?: boolean;
     closeLabel?: string;
     /** A machine code (e.g. `login_wait_timeout`), shown after the message in a quieter style. */
     code?: string;
+    /** Span the container instead of stopping at `--ui-callout-max-width` (720px). */
+    fill?: boolean;
+    /** The toggle for the `details` slot. */
+    moreLabel?: string;
+    lessLabel?: string;
 };
-declare var __VLS_6: {}, __VLS_8: {};
+type __VLS_ModelProps = {
+    /** Whether the `details` slot is shown. */
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {}, __VLS_13: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 } & {
-    actions?: (props: typeof __VLS_8) => any;
+    details?: (props: typeof __VLS_13) => any;
+} & {
+    actions?: (props: typeof __VLS_15) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "update:expanded": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
 }>, {
+    fill: boolean;
+    variant: "soft" | "inline";
     tone: "info" | "success" | "warning" | "danger";
     closable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

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

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

@@ -32,8 +32,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
 }>, {
     hasHeader: boolean;
-    expandable: boolean;
     expanded: boolean;
+    expandable: boolean;
     layoutType: "regular" | "compact";
     footerAlign: "start" | "end" | "between";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -28,7 +28,7 @@ type __VLS_Props = {
     selected?: boolean;
     /** Enables native drag emission (`drag-start`, `drag-over`, `drop`, `drag-end`). */
     draggable?: boolean;
-    /** Emits `select` when the summary row is clicked. */
+    /** Emits `select` when the summary row is clicked; the row then expands on a double click instead. */
     selectable?: boolean;
 };
 declare var __VLS_1: {}, __VLS_8: {}, __VLS_20: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {}, __VLS_28: {}, __VLS_30: {};
@@ -65,9 +65,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     "onDrag-end"?: ((event: DragEvent) => any) | undefined;
 }>, {
     draggable: boolean;
+    expanded: boolean;
     selectable: boolean;
     expandable: boolean;
-    expanded: 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/i18n/text.d.ts

@@ -155,6 +155,8 @@ export declare const englishUiText: {
     readonly "Notifications ({hotkey})": "Notifications ({hotkey})";
     readonly "Show password": "Show password";
     readonly "Hide password": "Hide password";
+    readonly "Learn more": "Learn more";
+    readonly "Show less": "Show less";
     readonly "Copy path": "Copy path";
     readonly "Path: {path}": "Path: {path}";
     readonly Copied: "Copied";