@synopackageland/ui 0.14.6 → 0.14.7

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 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/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>;