@synopackageland/ui 0.5.4 → 0.5.6

package/README.md

@@ -465,3 +465,94 @@ The public npm package is `@synopackageland/ui`. Both release targets are built
 from the same source and share runtime files, exports, MIT license and notices.
 Public repository and issue tracker links will be added once those are selected.
 See the [documentation](https://www.varvis.me/docs/) for usage.
+
+
+## Form controls and compact settings (0.5.6)
+
+`Form` and standalone `FormItem` default to `direction="auto"`. They use the
+container's width, including a DSM package window, and stack labels below 520px.
+Set `direction="horizontal"` to keep the previous layout or `direction="vertical"`
+to stack at every width. An item can override its form. Controls bind their
+FormItem id and ARIA state automatically; remove Select `role="group"` workarounds
+and manual `field.controlId` bindings unless an application deliberately chooses
+an explicit id. Explicit descriptions are merged with the field's help/error ids.
+
+Use one FormItem for each primary control. For rows containing multiple fields,
+put each labelled field in its own FormItem inside a FieldCell; use `text-only`
+on an outer item that is only a layout heading. Multiple siblings do not reuse
+the primary id. Native/custom controls can still use the `field.controlProps`
+slot or `useFormField()` contract. If mounting independent Vue apps in the same
+document, set a distinct `app.config.idPrefix` for each app.
+
+```vue
+<ConfigProvider :locale="locale">
+  <Form>
+    <FormItem label="Protocol" description="Transport protocol">
+      <Select v-model="protocol" :options="protocols" />
+    </FormItem>
+    <FormItem label="Upload" field-width="full">
+      <FilePicker v-model="files" variant="compact" :max-size="524288" />
+    </FormItem>
+  </Form>
+  <KeyValueRow label="Version" value="0.5.6" />
+  <KeyValueRow label="Download">
+    <Link :href="downloadUrl" download="notes.txt" :download-label="t('download')">{{ t('download') }}</Link>
+  </KeyValueRow>
+  <Link href="https://example.com/docs" external :external-label="t('opensNewTab')">{{ t('docs') }}</Link>
+</ConfigProvider>
+```
+
+FilePicker retains browser `File[]` semantics. Built-in `locale` values are
+`en`, `zh-TW`, `zh-CN`, `ja`, `ko`, `de`, `fr`, `es`, `it`; an explicit picker
+locale overrides ConfigProvider. Its `text` accepts partial overrides of
+`title`, `description`, `chooseFiles`, `chooseFolder`, `maxSize`, `maxFiles`,
+`remove`, `typeRejected`, `sizeRejected`, `countRejected`, `duplicateRejected`.
+The messages use `{name}`, `{size}` and `{count}` placeholders. Existing
+`title`/`description` props still win. Other controls retain their exposed text
+props; the provider locale currently localizes FilePicker only.
+
+`KeyValueRow` renders a `dl` with `dt`/`dd`; its default slot accepts rich values,
+including Link. `Wizard show-steps` shows registered step headlines and does not
+permit jumping past guards. Localize its `aria-label`, `footer` labels (including
+`startLabel`) and `progressText(current,total)`. `RepeatRow` places wrapped cells
+inside `[data-repeat-fields]` and keeps its remove action beside the first control;
+`removeDisabled` disables the action. Use wrapping rows for adjacent controls.
+
+DOM attrs on controls target the focusable control (a Reka checkbox is a button
+with `role="checkbox"`), while class/style target the layout wrapper. Overlay attrs
+target content, except Tooltip, whose attrs target the slotted trigger. Renderless
+providers without a rendered surface do not provide an attr destination.
+
+The scoped preflight removes browser heading/paragraph/list margins and bare
+button chrome inside library roots. Use explicit classes or Typo components for
+intentional typography. Restore EmptyState's former spacing with
+`class="min-h-48 py-10"`. The supplied DSM theme is light; forced-colors keyboard
+focus has an outline. A dark theme is not part of this release.
+
+### Testing Select with jsdom
+
+Mount with `attachTo: document.body` and unmount after each test. Reka uses
+keyboard interaction reliably in jsdom; pointer simulation depends on the
+PointerEvent implementation. This helper works without synthesizing pointer
+positions or exposing component internals:
+
+```ts
+import { flushPromises } from '@vue/test-utils'
+
+async function chooseSelect(selectWrapper, label: string) {
+  await selectWrapper.get('[role="combobox"]').trigger('keydown', { key: 'ArrowDown' })
+  await flushPromises()
+  // Options may be portalled into AppRoot or document.body.
+  const option = [...document.querySelectorAll<HTMLElement>('[role="option"]')]
+    .find(node => node.textContent?.trim() === label)
+  if (!option || option.getAttribute('aria-disabled') === 'true') throw new Error(`No enabled option: ${label}`)
+  option.focus()
+  option.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }))
+  await flushPromises()
+}
+```
+
+Assert the emitted model value and label/ARIA links. For browser checks, use
+actual ArrowDown/ArrowUp/Enter/Escape input and verify the selected value and focus.
+`pnpm check` is valid without existing dist; `release:stage` requires a complete
+build and refuses missing/empty exported artifacts before copying files.

package/dist/PageLayoutDemo.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    page: 'dashboard' | 'form';
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/UiDefectsDemo.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/advanced-panel/AdvancePanelGrid.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     columns: AdvancePanelGridColumn[];
     data: AdvancePanelGridRow[];
     /** Custom comparator per column; falls back to a numeric/locale compare. */
+    sortLabel?: (title: string) => string;
     localSortFunc?: AdvancePanelGridSortResolver;
 };
 declare function deactivateRow(): void;

package/dist/components/app/app-sidebar/AppSidebar.vue.d.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
     modelValue?: string;
     groups: AppSidebarGroup[];
     /** Show the DSM search field above the list; it filters items by label. */
+    ariaLabel?: string;
+    clearSearchLabel?: string;
     searchable?: boolean;
     searchPlaceholder?: string;
     /** Section headers get a chevron and fold their items. */
@@ -23,10 +25,12 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:expandedKeys"?: ((value: string[]) => any) | undefined;
     onBranchToggle?: ((key: string, expanded: boolean) => any) | undefined;
 }>, {
+    ariaLabel: string;
     searchPlaceholder: string;
     collapsible: boolean;
     expandedKeys: string[];
     defaultExpandedKeys: string[];
+    clearSearchLabel: string;
     searchable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /**
+     * `'fill'` uses the whole content area; `'readable'` caps the width at
+     * `--ui-page-readable-width`; any other value is a CSS maximum width.
+     */
+    width?: 'fill' | 'readable' | (string & {});
+};
+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<{}>, {
+    width: "fill" | "readable" | (string & {});
+}, {}, {}, {}, 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/app/section-tabs/SectionTabs.vue.d.ts

@@ -4,6 +4,7 @@ export type SectionTab = {
     disabled?: boolean;
 };
 type __VLS_Props = {
+    ariaLabel?: string;
     modelValue: string;
     items: SectionTab[];
 };

package/dist/components/composite/about-dialog/AboutDialog.vue.d.ts

@@ -11,6 +11,19 @@ import { AboutCheckState, AboutVersionInfo } from './types';
  * `checkForUpdates()`.
  */
 type __VLS_Props = {
+    text?: Partial<{
+        beta: string;
+        version: string;
+        checking: string;
+        available: string;
+        betaAvailable: string;
+        failed: string;
+        retry: string;
+        releaseNotes: string;
+        terms: string;
+        privacy: string;
+        legal: string;
+    }>;
     open?: boolean;
     defaultOpen?: boolean;
     title: string;

package/dist/components/composite/config-provider/ConfigProvider.vue.d.ts

@@ -1,6 +1,8 @@
+import { UiLocale } from '../../../i18n/locale';
 import { ConfigRecord } from '../../../composables/configCascade';
 type __VLS_Props = {
     config?: ConfigRecord;
+    locale?: UiLocale;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/composite/data-table/DataTable.vue.d.ts

@@ -20,9 +20,9 @@ type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (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<{}>, {
+    compact: boolean;
     rowKey: string;
     emptyText: string;
-    compact: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/file-picker/FilePicker.vue.d.ts

@@ -1,3 +1,5 @@
+import { FilePickerText } from '../../../i18n/filePicker';
+import { UiLocale } from '../../../i18n/locale';
 export type FileRejection = {
     file: File;
     reason: 'type' | 'size' | 'count' | 'duplicate';
@@ -12,15 +14,18 @@ type __VLS_Props = {
     maxSize?: number;
     directory?: boolean;
     showList?: boolean;
+    variant?: 'dropzone' | 'compact';
+    locale?: UiLocale;
+    text?: Partial<FilePickerText>;
     title?: string;
     description?: string;
 };
-declare var __VLS_19: {
+declare var __VLS_27: {
     file: File;
     index: number;
 };
 type __VLS_Slots = {} & {
-    'file-actions'?: (props: typeof __VLS_19) => any;
+    'file-actions'?: (props: typeof __VLS_27) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (files: File[]) => any;
@@ -29,10 +34,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((files: File[]) => any) | undefined;
     onRejected?: ((items: FileRejection[]) => any) | undefined;
 }>, {
-    title: string;
+    variant: "dropzone" | "compact";
     disabled: boolean;
     modelValue: File[];
-    description: string;
     multiple: boolean;
     maxFiles: number;
     maxSize: number;

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

@@ -1,3 +1,4 @@
+import { FieldWidth } from '../../../lib/fieldWidth';
 import { FormFieldHandle } from './context';
 import { FormDirection, FormRules, FormSpacing, FormValidatedResult, ValidateMessageDisplayMode, ValidateTrigger } from './types';
 type __VLS_Props = {
@@ -7,6 +8,8 @@ type __VLS_Props = {
     direction?: FormDirection;
     /** Gap between items; `'auto'` uses `dense` (horizontal) or `regular` (vertical). */
     spacing?: FormSpacing;
+    /** Maximum width of every control: `'xs'`–`'lg'`, `'full'` or a CSS length. A FormItem can override it. */
+    fieldWidth?: FieldWidth;
     /** Default message placement; a FormItem can override it. */
     validateMessageDisplayMode?: ValidateMessageDisplayMode;
 };

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

@@ -1,5 +1,6 @@
+import { FieldWidth } from '../../../lib/fieldWidth';
 import { FormFieldContext } from './context';
-import { FormItemValidateMessageDisplayMode, FormRule, ValidateStatus, ValidateTrigger } from './types';
+import { FormDirection, FormItemValidateMessageDisplayMode, FormRule, ValidateStatus, ValidateTrigger } from './types';
 type __VLS_Props = {
     /** Controlled field value; when `undefined` the value is reported by the control. */
     modelValue?: unknown;
@@ -43,8 +44,12 @@ type __VLS_Props = {
     textOnly?: boolean;
     /** Indentation level (multiples of 28px) or any CSS length. */
     indent?: string | number;
+    /** Auto follows the available width; explicit directions override the enclosing form. */
+    direction?: FormDirection;
     /** Width of the label column in the horizontal layout. */
     labelWidth?: string;
+    /** Maximum control width; inherits the form's `fieldWidth` (`'md'` by default). */
+    fieldWidth?: FieldWidth;
     /** Value restored by `resetFields()`; also the initial dirty baseline. */
     initialValue?: unknown;
 };
@@ -96,15 +101,15 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     setFieldDisabled: typeof setDisabled;
     ensureVisible: typeof ensureVisible;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: unknown) => any;
     validating: () => any;
+    "update:modelValue": (value: unknown) => any;
     validated: (result: {
         message: string;
         status: ValidateStatus;
     }) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
     onValidating?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
     onValidated?: ((result: {
         message: string;
         status: ValidateStatus;

package/dist/components/composite/form/context.d.ts

@@ -1,12 +1,14 @@
 import { InjectionKey } from 'vue';
+import { FieldWidth } from '../../../lib/fieldWidth';
 import { FormRules, FormDirection, FormSpacing, ValidateMessageDisplayMode, ValidateStatus, ValidateTrigger } from './types';
 export declare const FORM_CONTEXT_KEY: InjectionKey<FormContext>;
-export declare const FORM_FIELD_KEY: InjectionKey<FormFieldContext>;
+export declare const FORM_FIELD_KEY: InjectionKey<FormFieldContext | null>;
 /** What Form exposes to its FormItems. Values are unwrapped (the provided object is reactive). */
 export type FormContext = {
     rules: FormRules;
     direction: FormDirection;
     spacing: FormSpacing;
+    fieldWidth: FieldWidth;
     validateMessageDisplayMode: ValidateMessageDisplayMode;
     registerField: (field: FormFieldHandle) => void;
     unregisterField: (field: FormFieldHandle) => void;
@@ -29,6 +31,12 @@ export type FormFieldHandle = {
  */
 export type FormFieldContext = {
     controlId: string;
+    defaultControlId?: string;
+    isPrimaryControl?: (owner: symbol) => boolean;
+    claimControl?: (owner: symbol) => boolean;
+    releaseControl?: (owner: symbol) => void;
+    labelId?: string;
+    setControlId?: (id: string) => void;
     descriptionId: string | undefined;
     messageId: string | undefined;
     /** Value for `aria-describedby`, covering the rendered description and message. */

package/dist/components/composite/form/types.d.ts

@@ -5,7 +5,7 @@ export type ValidateStatus = '' | 'success' | 'error' | 'warning' | 'validating'
 export type ValidateMessageDisplayMode = 'popup' | 'text';
 /** FormItem-level value: `'form'` inherits the enclosing form's mode. */
 export type FormItemValidateMessageDisplayMode = ValidateMessageDisplayMode | 'form';
-export type FormDirection = 'horizontal' | 'vertical';
+export type FormDirection = 'auto' | 'horizontal' | 'vertical';
 export type FormSpacing = 'none' | 'dense' | 'compact' | 'regular' | 'relaxed' | number | 'auto';
 export type FormRuleType = 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'email' | 'url' | 'date';
 export type FormRuleCallback = (error?: Error | string | void) => void;

package/dist/components/composite/form-actions/FormActions.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    align?: 'start' | 'end';
+    /** Indents the actions past a horizontal form's label column, so they line up with the fields. */
+    labelWidth?: string;
+};
+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<{}>, {
+    align: "start" | "end";
+}, {}, {}, {}, 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/composite/key-value-row/KeyValueRow.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    label: string;
+    value?: string | number;
+    labelWidth?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    label?: (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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/composite/repeat-rows/FieldCell.vue.d.ts

@@ -0,0 +1,19 @@
+import { FieldWidth } from '../../../lib/fieldWidth';
+type __VLS_Props = {
+    width?: FieldWidth;
+};
+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<{}>, {
+    width: FieldWidth;
+}, {}, {}, {}, 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/composite/repeat-rows/RepeatRow.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    removable?: boolean;
+    removeLabel?: string;
+    removeDisabled?: boolean;
+};
+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, {
+    remove: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+}>, {
+    removeLabel: string;
+    removable: boolean;
+    removeDisabled: 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;
+    };
+};

package/dist/components/composite/repeat-rows/RepeatRows.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    addLabel: string;
+    addDisabled?: boolean;
+};
+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, {
+    add: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAdd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/composite/search-field/SearchField.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     clearLabel?: string;
     /** `filter` is the DSM toolbar filter box (funnel icon); `search` keeps the magnifier. */
     variant?: 'search' | 'filter';
+    disabled?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
@@ -11,6 +12,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     variant: "search" | "filter";
+    disabled: boolean;
     modelValue: string;
     placeholder: string;
     clearLabel: string;

package/dist/components/composite/settings-row/SettingsRow.vue.d.ts

@@ -1,8 +1,11 @@
+import { FieldWidth } from '../../../lib/fieldWidth';
 type __VLS_Props = {
     label: string;
     description?: string;
     required?: boolean;
     align?: 'start' | 'center';
+    /** Maximum control width: `'xs'`–`'lg'`, `'full'` or a CSS length. */
+    fieldWidth?: FieldWidth;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -11,6 +14,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     required: boolean;
     align: "start" | "center";
+    fieldWidth: FieldWidth;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/wizard/Wizard.vue.d.ts

@@ -11,6 +11,8 @@ type __VLS_Props = {
     /** Shows the Cancel action in the footer. */
     cancellable?: boolean;
     ariaLabel?: string;
+    showSteps?: boolean;
+    progressText?: (current: number, total: number) => string;
 };
 declare function toNextStep(): Promise<void>;
 declare function toPreviousStep(): Promise<void>;

package/dist/components/composite/wizard/types.d.ts

@@ -21,6 +21,7 @@ export type WizardStepProps = {
     footer?: boolean;
 };
 export type WizardFooterConfig = boolean | {
+    startLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
     applyLabel?: string;

package/dist/components/containers/card/Card.vue.d.ts

@@ -9,6 +9,8 @@ type __VLS_Props = {
     expanded?: boolean;
     /** Accessible name for the disclosure arrow when the card has no title. */
     toggleLabel?: string;
+    /** Where footer actions sit; DSM aligns them to a side, never the centre. */
+    footerAlign?: 'start' | 'end' | 'between';
 };
 declare var __VLS_8: {}, __VLS_10: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
@@ -31,6 +33,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     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>;
 declare const _default: typeof __VLS_export;

package/dist/components/containers/card-grid/CardGrid.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    /** Narrowest a card may get before the grid drops a column. */
+    minItemWidth?: string;
+    gap?: string;
+    /**
+     * `'stretch'` (auto-fit) grows the cards to use the whole row; `'fill'`
+     * (auto-fill) keeps empty tracks, so a few cards stay at column width.
+     */
+    fit?: 'stretch' | 'fill';
+};
+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<{}>, {
+    gap: string;
+    minItemWidth: string;
+    fit: "stretch" | "fill";
+}, {}, {}, {}, 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/feedback/info-mask/InfoMask.vue.d.ts

@@ -9,8 +9,8 @@ type __VLS_Slots = {} & {
     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<{}>, {
-    ariaLabel: string;
     active: boolean;
+    ariaLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/primitives/color-picker/ColorPicker.vue.d.ts

@@ -4,6 +4,12 @@ export type ColorSwatch = {
     hex?: string;
 };
 type __VLS_Props = {
+    text?: Partial<{
+        choose: string;
+        common: string;
+        palette: string;
+        custom: string;
+    }>;
     /** Current colour string, in the format selected by `colorFormat`. */
     modelValue?: string;
     colorFormat?: ColorPickerFormat;

package/dist/components/primitives/combobox/Combobox.vue.d.ts

@@ -5,20 +5,20 @@ type __VLS_Props = Omit<SelectFieldProps, 'multiple' | 'modelValue' | 'defaultVa
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (option: SelectOption) => any;
+    blur: (event: FocusEvent) => any;
     invalid: (text: string) => any;
     "update:modelValue": (value: string) => any;
     focus: (event: FocusEvent) => any;
-    blur: (event: FocusEvent) => any;
     "update:loading": (loading: boolean) => any;
     create: (value: string) => any;
     "open-dropdown": () => any;
     "close-dropdown": () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((option: SelectOption) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
     onInvalid?: ((text: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
-    onBlur?: ((event: FocusEvent) => any) | undefined;
     "onUpdate:loading"?: ((loading: boolean) => any) | undefined;
     onCreate?: ((value: string) => any) | undefined;
     "onOpen-dropdown"?: (() => any) | undefined;