@synopackageland/ui 0.14.6 → 0.14.8

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.14.8 (2026-10-23)
+
+Visual change: the page behind cards, corners and shadows. Props, slots and exports stay as they were.
+
+- `--ui-bg` is a cool page grey (`#f0f2f5`, the hue of Storage Manager's Overview one step deeper) instead of white. A page of cards sits on it in every presentation: `PageContent surface="flat"`, and now `surface="auto"` when the page holds a `Card` or `Surface`; those top-level cards keep a 1px frame (`--ui-border`, the same grey as the web border) and take `--ui-shadow-card`. Pages without cards (lists, Control Panel style forms) and `surface="card"` stay white. The web canvas defaults to `--ui-bg`.
+- Shadows are one soft, layered set: `--ui-shadow-card`, `--ui-shadow-menu` and `--ui-shadow-dialog` use a low-opacity blue-grey instead of 16% / 30% / 60% black. The web card shadow, the phone drawer and the `Slider` and `Switch` thumbs use these tokens instead of their own values.
+- Corners stay within 2px of a card: a message box is 6px (was 8px). The web and phone presentations use 6px for cards and navigation rows (were 10px and 8px) and 8px for dialogs and bottom sheets (were 3px/8px and 12px). Literal 2px and 8px radii now use the radius tokens.
+- `InfoMask` keeps DSM's white mask (it was drawn from `--ui-bg`).
+- Workbench dark mode: three layers (page `#11161c`, card `#1f2832`, menu and dialog `#2b3541`), quieter card frames (`--ui-border-subtle`), a dark inset fill and a dark shadow set.
+
+## 0.14.7 (2026-10-23)
+
+Visual change: buttons in `SettingsSection` and `Card` footers and `Notification` actions change shape. Props, slots and exports stay as they were.
+
+- Add [docs/button-policy.md](docs/button-policy.md), measured on DSM 7.4: a capsule belongs only to the bar that closes a dialog, form or wizard, with one main action placed last; every other button is a grey tool button, Delete included.
+- `SettingsSection` and `Card` `#footer` buttons are tool buttons (3px radius) instead of capsules. Put a Save / Cancel row there in `FormActions` to keep capsules.
+- `Notification` confirm and cancel buttons are default-size footer capsules instead of small tool buttons.
+- In development, `Button` warns in the console when `kind="action"` is set outside a footer, when a footer has more than one primary or danger button, or when the main action is not last. Production builds do not check.
+
 ## 0.14.6 (2026-10-23)
 
 - `AppLayout` uses its navigation drawer at container widths up to 640px, giving narrow windows the full content width. The window layout starts at 641px; `:responsive="false"` still opts out.

package/README.md

@@ -9,7 +9,8 @@ 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). For page layout rules, see
-[Layout rules](docs/layout-rules.md).
+[Layout rules](docs/layout-rules.md); for which button goes where, see
+[Button policy](docs/button-policy.md).
 
 Synology Package Land UI provides Vue components for Synology package applications,
 including an embedded theme and AppRoot for shared DSM desktop windows.

package/dist/ButtonPolicyDemo.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -4,7 +4,7 @@ type __VLS_Props = {
      * `--ui-page-readable-width`; any other value is a CSS maximum width.
      */
     width?: 'fill' | 'readable' | (string & {});
-    /** 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. */
+    /** card uses the white content area; flat uses the page grey; auto is white unless the page holds a card, then grey like flat. 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,

package/dist/components/composite/settings-section/SettingsSection.vue.d.ts

@@ -10,7 +10,7 @@ type __VLS_Props = {
     /** Bound with `v-model:open` for controlled collapse. */
     open?: boolean;
 };
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_21: {}, __VLS_29: {};
+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;
 } & {
@@ -24,7 +24,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_21) => any;
 } & {
-    footer?: (props: typeof __VLS_29) => 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/containers/card/Card.vue.d.ts

@@ -14,7 +14,7 @@ type __VLS_Props = {
     /** Shows a skeleton in place of the body and footer while they load. */
     loading?: boolean;
 };
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_22: {}, __VLS_24: {}, __VLS_32: {};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_8) => any;
 } & {
@@ -24,7 +24,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_24) => any;
 } & {
-    footer?: (props: typeof __VLS_32) => 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/primitives/button/Button.vue.d.ts

@@ -6,9 +6,10 @@ type __VLS_Props = {
     variant?: ButtonVariant;
     size?: ButtonSize;
     /**
-     * `tool` (toolbar and in-form commands) or `action` (a footer's capsule
-     * with a minimum width). Defaults to what the surrounding footer provides,
-     * else `tool`.
+     * `tool` (toolbar, page and in-form commands) or `action` (the capsule with
+     * a minimum width that DSM keeps for a dialog, wizard or form footer).
+     * Defaults to what the surrounding footer provides, else `tool`; set it
+     * only to opt one footer button out with `tool`.
      */
     kind?: ButtonKind;
     loading?: boolean;

package/dist/composables/buttonKind.d.ts

@@ -1,9 +1,17 @@
+import { Ref } from 'vue';
 /**
- * DSM draws two button shapes: a `tool` button (toolbar, in-form commands) with
- * the small control radius, and an `action` button (dialog, wizard and page
- * footers) as a capsule with a minimum width.
+ * DSM draws two button shapes: a `tool` button (toolbar, page and in-form
+ * commands) with the small control radius, and an `action` button as a capsule
+ * with a minimum width. DSM keeps the capsule for the bar that closes a window,
+ * dialog or form: Apply / Reset, OK / Cancel, a wizard's Next. See
+ * docs/button-policy.md.
  */
 export type ButtonKind = 'tool' | 'action';
 /** Makes `kind` the default for every Button rendered below the caller. */
 export declare function provideButtonKind(kind: ButtonKind): void;
-export declare function injectButtonKind(): ButtonKind;
+/**
+ * Resolves a Button's kind from its prop and the surrounding footer. In
+ * development it also checks the button against the policy: a capsule outside a
+ * footer, two main actions in one footer, or a main action that is not last.
+ */
+export declare function useButtonKind(explicit: () => ButtonKind | undefined, main: () => boolean, el: Ref<HTMLElement | null>): import('vue').ComputedRef<ButtonKind>;