@synopackageland/ui 0.10.1 → 0.10.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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`).

package/README.md

@@ -324,7 +324,9 @@ 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.
+`--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.

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/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,7 +24,7 @@ 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;

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/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/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;