@synopackageland/ui 0.9.12 → 0.10.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 0.10.2 (2026-10-16)
+
+- A `PageHeader` inside `PageContent` no longer gets the section gap on top of its own bottom padding: the title sits 12 px above the content in a DSM window again (16 px on a phone, 24 px in the web layout), not 24 px.
+- Buttons in `SettingsSection` `#footer`, `Card` `#footer`, `Panel` `#fbar`, `Sheet` `#footer` and `AppActionBar` become `action` automatically, like `FormActions`, `Footbar`, `Dialog` and `Wizard` footers. An explicit `kind` still wins.
+- **Behavior change:** `Tag` `removable` now defaults to `false`. DSM status and label tags are display-only, so the remove control must be opted into with `removable`; a Tag that relied on the old default loses its ×.
+- Visible changes for apps: less space under page titles, and these footers draw capsule buttons. An app can drop the `kind="action"` it added to such footers, and the `:removable="false"` it set on Tags.
+
+繁中摘要：PageContent 裡的 PageHeader 不再把段落間距疊在自己的下方 padding 上，DSM 視窗中標題到內容回到 12px（手機 16px、web 版面 24px）。SettingsSection `#footer`、Card `#footer`、Panel `#fbar`、Sheet `#footer`、AppActionBar 的按鈕跟 FormActions／Footbar／Dialog／Wizard 頁尾一樣自動用 action；明確寫的 `kind` 仍優先。**行為變更：**Tag 的 `removable` 預設改為 `false`（DSM 狀態／標籤 Tag 只供顯示），需要移除鈕時要明確寫 `removable`；依賴舊預設的 Tag 會失去 ×。App 可刪掉自己在這些頁尾加的 `kind="action"`，以及 Tag 上的 `:removable="false"`。
+
+## 0.10.1 (2026-10-16)
+
+- Components follow measured DSM 7 metrics (see `docs/dsm-native-metrics.md`).
+- `Button` takes `kind="tool" | "action"` (default `tool`): tool buttons are 28 px, 3 px radius, borderless grey; action buttons are pills with an 80 px minimum width (120 px for primary). Buttons inside `Dialog` and `Wizard` footers, `FormActions` and `Footbar` become `action` automatically.
+- `Dialog` without `width` sizes to its content between 420 px and 760 px; `maxWidth` raises the cap. Header, body and footer use DSM sizes. A dialog with no title and no close button uses the message-box layout. `MessageBox` also sizes to content.
+- Native scrollbars inside the UI root use the DSM style: thin, rounded, faint until hovered.
+- `Surface` takes `variant="inset"` for a borderless grey block inside a card; the default border is subtler. `Card` titles are bold.
+- `PageContent` spaces its direct children with `--ui-section-gap`, so pages need no hand-written margins.
+- Radius tokens (`sm` 3, `md` 4, `lg` 5, `dialog` 8, `pill`) replace hard-coded values; menus and popovers use `md`, menu rows `sm`.
+- On a phone-width DSM window a dialog is a bottom sheet as wide as the window, also when it sizes to its content.
+- Visible changes for apps: footer buttons get wider, dialogs without `width` resize to content, and hand-written margins under `PageContent` add to the new gap.
+
+繁中摘要：元件依實測 DSM 7 數值對齊。Button 分 tool（小圓角灰底）與 action（膠囊、最小寬 80/120px），Dialog／Wizard 頁尾等自動用 action；Dialog 未指定寬度時依內容在 420–760px 之間，`maxWidth` 可放寬；捲軸改 DSM 樣式；Surface 新增 inset 灰底區塊；Card 標題粗體；PageContent 自動段落間距；圓角統一為 token。手機寬度的 DSM 視窗中，Dialog（含依內容決定寬度者）以與視窗同寬的底部面板呈現。App 升級後頁尾按鈕變寬、Dialog 寬度隨內容、PageContent 下手寫 margin 會與新間距疊加。
+
 ## 0.9.12 (2026-10-16)
 
 - Fix InfoTip first-click toggling inside AppRoot app modal scope when an ancestor focuses the trigger during pointerdown capture. Keyboard focus still opens the bubble; pointer clicks and adaptive touch toggle it once. AppRoot focus ownership and modal isolation remain intact.

package/README.md

@@ -257,7 +257,12 @@ const open = ref(false)
 </template>
 ```
 
-`width` (default `520px`) is the panel's maximum width. `height` or
+Without `width` the dialog sizes to its content between
+`--ui-dialog-min-width` (420px) and `--ui-dialog-max-width` (760px, or the
+`max-width` prop); a long paragraph wraps at the maximum. `width` sets a fixed
+width, capped to the viewport. A dialog with no title and no close button is a
+question and takes DSM's message-box layout. Buttons in the `footer` slot are
+capsule `action` buttons (`kind="tool"` opts one out). `height` or
 `min-height` (for example `min-height="420px"`) keeps a panel with little
 content from collapsing. In a DSM window, `<AppRoot dialog-bounds="viewport">`
 lets dialogs be dragged out of the window, within the browser viewport. See
@@ -318,6 +323,14 @@ import { AppLayout, Button, PageHeader } from '@synopackageland/ui'
 
 `AppLayout` also accepts `sidebar`, `toolbar`, and `footer` slots.
 
+`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
+window), with no section gap added.
+
+To set a block apart inside a card, use `<Surface variant="inset">`. DSM draws it as a
+faint grey block with no border of its own, at 12px × 16px padding.
+
 ## Theme override
 
 Components use semantic CSS tokens. Import your override stylesheet after the library stylesheet to customize branding:

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_23: {};
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_21: {}, __VLS_29: {};
 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_23) => any;
+    footer?: (props: typeof __VLS_29) => 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/wizard/Wizard.vue.d.ts

@@ -13,7 +13,7 @@ declare function toNextStep(): Promise<void>;
 declare function toPreviousStep(): Promise<void>;
 declare function finish(): Promise<void>;
 declare function cancel(): void;
-declare var __VLS_1: {}, __VLS_3: {
+declare var __VLS_1: {}, __VLS_9: {
     nextStep: typeof toNextStep;
     previousStep: typeof toPreviousStep;
     finish: typeof finish;
@@ -25,7 +25,7 @@ declare var __VLS_1: {}, __VLS_3: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    footer?: (props: typeof __VLS_3) => any;
+    footer?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     activeStepKey: import('vue').ComputedRef<string>;

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_26: {};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_22: {}, __VLS_24: {}, __VLS_32: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_8) => any;
 } & {
@@ -24,17 +24,17 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_24) => any;
 } & {
-    footer?: (props: typeof __VLS_26) => any;
+    footer?: (props: typeof __VLS_32) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:expanded": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
 }>, {
+    hasHeader: boolean;
     expandable: boolean;
     expanded: boolean;
     layoutType: "regular" | "compact";
-    hasHeader: boolean;
     footerAlign: "start" | "end" | "between";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/containers/panel/Panel.vue.d.ts

@@ -18,7 +18,7 @@ type __VLS_Props = {
     /** Make the default body slot scroll when its content overflows. */
     scrollable?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_18: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_15: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
     tbar?: (props: typeof __VLS_1) => any;
 } & {
@@ -28,9 +28,9 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_7) => any;
 } & {
-    fbar?: (props: typeof __VLS_9) => any;
+    fbar?: (props: typeof __VLS_15) => any;
 } & {
-    'spin-inner'?: (props: typeof __VLS_18) => any;
+    'spin-inner'?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     getScrollEl: () => HTMLElement | null;

package/dist/components/primitives/button/Button.vue.d.ts

@@ -1,9 +1,16 @@
 import { ClickHandlers } from '../../../composables/pendingClick';
+import { ButtonKind } from '../../../composables/buttonKind';
 type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg';
 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`.
+     */
+    kind?: ButtonKind;
     loading?: boolean;
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset';

package/dist/components/primitives/button/ButtonKindScope.vue.d.ts

@@ -0,0 +1,17 @@
+import { ButtonKind } from '../../../composables/buttonKind';
+type __VLS_Props = {
+    kind: ButtonKind;
+};
+declare var __VLS_1: {};
+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/primitives/dialog/Dialog.vue.d.ts

@@ -3,7 +3,10 @@ type __VLS_Props = {
     defaultOpen?: boolean;
     title?: string;
     description?: string;
+    /** A fixed width, capped to the viewport. Without it the dialog sizes to its content. */
     width?: string;
+    /** The widest a content-sized dialog grows (default `--ui-dialog-max-width`). */
+    maxWidth?: string;
     /** A fixed panel height, capped to the available height. */
     height?: string;
     /** Keeps the panel from shrinking with short content, capped to the available height. */
@@ -12,13 +15,13 @@ type __VLS_Props = {
     /** Hides the header close affordance for fixed-flow dialogs that own their dismiss path. */
     showClose?: boolean;
 };
-declare var __VLS_14: {}, __VLS_71: {}, __VLS_73: {};
+declare var __VLS_14: {}, __VLS_71: {}, __VLS_79: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_14) => any;
 } & {
     default?: (props: typeof __VLS_71) => any;
 } & {
-    footer?: (props: typeof __VLS_73) => any;
+    footer?: (props: typeof __VLS_79) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;
@@ -35,7 +38,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-    width: string;
     defaultOpen: boolean;
     open: boolean;
     showClose: boolean;

package/dist/components/primitives/icon/FileTypeIcon.vue.d.ts

@@ -9,9 +9,9 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: IconSize;
+    kind: "folder" | "file";
     name: string;
     open: boolean;
-    kind: "folder" | "file";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/primitives/sheet/Sheet.vue.d.ts

@@ -8,13 +8,13 @@ type __VLS_Props = {
     description?: string;
     closeLabel?: string;
 };
-declare var __VLS_14: {}, __VLS_62: {}, __VLS_64: {};
+declare var __VLS_14: {}, __VLS_62: {}, __VLS_70: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_14) => any;
 } & {
     default?: (props: typeof __VLS_62) => any;
 } & {
-    footer?: (props: typeof __VLS_64) => any;
+    footer?: (props: typeof __VLS_70) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;

package/dist/components/primitives/surface/Surface.vue.d.ts

@@ -1,4 +1,7 @@
 type __VLS_Props = {
+    /** `'inset'` is a grey block inside a card, with no border of its own. */
+    variant?: 'default' | 'inset';
+    /** Defaults to `'md'`; an inset area defaults to DSM's 12px by 16px. */
     padding?: 'none' | 'sm' | 'md' | 'lg';
     border?: boolean;
     raised?: boolean;
@@ -8,6 +11,7 @@ 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<{}>, {
+    variant: "default" | "inset";
     padding: "none" | "sm" | "md" | "lg";
     border: boolean;
     raised: boolean;

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

@@ -10,7 +10,10 @@ export interface TagVisual {
 type __VLS_Props = {
     label?: string;
     appearance?: TagAppearance;
-    /** Shows the remove control; the caller handles the actual removal. */
+    /**
+     * Shows the remove control; the caller handles the actual removal. Off by
+     * default: DSM status and label tags are display-only.
+     */
     removable?: boolean;
     selected?: boolean;
     disabled?: boolean;

package/dist/composables/buttonKind.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+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;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Button } from './components/primitives/button/Button.vue';
 export { default as IconButton } from './components/primitives/button/IconButton.vue';
+export type { ButtonKind } from './composables/buttonKind';
 export { default as Input } from './components/primitives/input/Input.vue';
 export { default as Textarea } from './components/primitives/input/Textarea.vue';
 export { default as InputGroup } from './components/primitives/input-group/InputGroup.vue';