@synopackageland/ui 0.17.10 → 0.17.11

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.17.11 (2026-10-30)
+
+Settings forms follow DSM's own Control Panel layout by default. Two DOM changes: `Fieldset`'s chevron points up while open and down while collapsed (it was down and right), and a `password` `Input` is now an outer `<span>` (layout attrs) around an inner one holding the field and its toggle.
+
+- `Fieldset` takes `description` (or `#description`): one line under the title across the whole section width (`data-fieldset-description`).
+- `Input` takes `unit` (or `#unit`): text such as s, MB or characters right after the field, a number's too, dimmed while disabled (`data-ui-input-unit`).
+- A `text-only` `FormItem` sets its value level with the label, so a read-only value and an `#after` button (Edit) line up with the rows around it.
+- `FormNote` with one remark reads "Note: …" on one line; two or more `items` keep the heading over a list. `inset` starts it on the field column (inside a `FormGroup` too), one field gap under the field it is about (`data-inset`).
+- docs/layout-rules.md describes the whole settings page: section description, read-only value with Edit, dependent options in a `FormGroup`, section buttons inside the group, units, notes and one Apply in the footer. The Control Panel story adds Network > General.
+
 ## 0.17.10 (2026-10-30)
 
 Breaking, with no compatibility layer: the comment Markdown functions are renamed, `MentionTextarea` is gone, and comment bodies read a little differently. A stored body that relied on the old reading needs a one-time conversion; the library keeps no old names or fallback.

package/dist/components/composite/form/FormItem.vue.d.ts

@@ -40,7 +40,7 @@ type __VLS_Props = {
     defaultValidateTrigger?: ValidateTrigger;
     /** Validates once on mount. */
     immediateValidate?: boolean;
-    /** The slot content is plain text, not a control. */
+    /** The slot content is plain text, not a control: a read-only value, set level with the label. An `#after` button follows the field column. */
     textOnly?: boolean;
     /** Indentation level (multiples of 28px) or any CSS length. */
     indent?: string | number;

package/dist/components/composite/form-note/FormNote.vue.d.ts

@@ -1,12 +1,16 @@
 type __VLS_Props = {
     /** Replaces the "Note:" heading. */
     title?: string;
-    /** One bullet each; the default slot follows them. */
+    /** One bullet each; a single item reads inline after the heading. The default slot follows them. */
     items?: string[];
+    /** Starts the note on the field column, past the label column (inside a FormGroup too). */
+    inset?: boolean;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => 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>;

package/dist/components/composite/stat-tile/StatTile.vue.d.ts

@@ -28,8 +28,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     disabled: boolean;
     value: string | number;
     modelValue: boolean;
-    tone: StatTileTone;
     unit: string;
+    tone: StatTileTone;
     note: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/containers/fieldset/Fieldset.vue.d.ts

@@ -5,6 +5,8 @@ export type FieldsetTitle = string | {
 export type FieldsetCollapseTrigger = 'click' | 'dblclick' | 'none';
 type __VLS_Props = {
     title?: FieldsetTitle;
+    /** One line under the title, across the whole width (DSM's "Enter the server name, ..."). */
+    description?: string;
     collapsible?: boolean;
     /** Mouse gesture that toggles; Enter/Space always works on the header. */
     collapseTriggerEvent?: FieldsetCollapseTrigger;
@@ -12,7 +14,7 @@ type __VLS_Props = {
     /** Bound with `v-model:collapsed`; defaults to expanded when left unbound. */
     collapsed?: boolean;
 };
-declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     'collapse-icon'?: (props: typeof __VLS_1) => any;
 } & {
@@ -20,7 +22,9 @@ type __VLS_Slots = {} & {
 } & {
     title?: (props: typeof __VLS_10) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    description?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     isCollapsed: import('vue').ComputedRef<boolean>;

package/dist/components/primitives/input/Input.vue.d.ts

@@ -10,8 +10,14 @@ type __VLS_Props = {
     name?: string;
     ariaLabel?: string;
     ariaLabelledby?: string;
+    /** Text right after the field, such as s, MB or characters; the `#unit` slot replaces it. */
+    unit?: string;
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    unit?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
@@ -23,5 +29,11 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     readonly: boolean;
     invalid: boolean;
 }, {}, {}, {}, 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;
+    };
+};