nuxt-ui-tools 1.17.1 → 1.19.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.17.1",
+  "version": "1.19.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -35,6 +35,7 @@ function getPublicComponents(runtimeDir, options) {
       "ColumnPanel",
       "SortMenu",
       "LayoutSwitch",
+      "ViewToggle",
       "Content",
       "ErrorState",
       "Table",

package/dist/runtime/form/components/page/form-page-header.d.vue.ts

@@ -3,7 +3,9 @@
  * badge while a form with `controls.dirtyCheck` is modified, and the page actions. It stays
  * pinned while the page scrolls on wide layouts, and sections scroll to just below it. The badge
  * keeps its place while the form is unmodified, hidden, and does not grow its line, so the first
- * edit neither shifts the page nor resizes the pinned header.
+ * edit neither shifts the page nor resizes the pinned header. The header spans the page, but on a
+ * page without a navigation its row takes the centered column of the body, so both share their
+ * edges.
  */
 type __VLS_Slots = {
     /** Before the heading, e.g. an avatar of the record. */

package/dist/runtime/form/components/page/form-page-header.vue

@@ -6,6 +6,7 @@ import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { useFormPageContext } from "../../composables/use-form-page";
 import { useFormUi } from "../../composables/use-form-ui";
 import { getFormHeader } from "../../utils/overlay";
+import { FORM_PAGE_COLUMN } from "../../utils/page-surface";
 import { isRecord } from "../../utils/path";
 import { resolveFormBoundaryText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
@@ -20,6 +21,12 @@ const eyebrow = computed(() => headerText(header.value, "eyebrow"));
 const title = computed(() => headerText(header.value, "title"));
 const description = computed(() => headerText(header.value, "description"));
 const unsaved = computed(() => page.dirtyCheck.value && page.root.runtime.isDirty.value);
+const ROW = "flex flex-col gap-3 @3xl/form-page:flex-row @3xl/form-page:items-center @3xl/form-page:justify-between @3xl/form-page:gap-5";
+const PADDING_X = "px-4 @3xl/form-page:px-7";
+const headerClass = computed(() => page.navigationVisible.value ? `${ROW} ${PADDING_X}` : "");
+const rowClass = computed(
+  () => page.navigationVisible.value ? "contents" : `${ROW} ${PADDING_X} ${FORM_PAGE_COLUMN}`
+);
 const element = useTemplateRef("element");
 useResizeObserver(element, () => {
   const node = element.value;
@@ -38,62 +45,65 @@ function headerText(config, key) {
     ref="element"
     :class="
   mergeFormUiClass(
-    'z-10 flex flex-col gap-3 border-b border-default bg-default px-4 py-4 @3xl/form-page:sticky @3xl/form-page:top-0 @3xl/form-page:flex-row @3xl/form-page:items-center @3xl/form-page:justify-between @3xl/form-page:gap-5 @3xl/form-page:px-7 @3xl/form-page:pt-[18px] @3xl/form-page:pb-4',
+    'z-10 border-b border-default bg-default py-4 @3xl/form-page:sticky @3xl/form-page:top-0 @3xl/form-page:pt-[18px] @3xl/form-page:pb-4',
+    headerClass,
     pageUi?.header
   )
 "
     data-form-page-header
   >
-    <div :class="mergeFormUiClass('flex min-w-0 items-center gap-3.5', pageUi?.headerContent)">
-      <slot name="leading" />
-      <div :class="mergeFormUiClass('grid min-w-0 gap-1.5', pageUi?.heading)">
-        <p
-          v-if="eyebrow || $slots.eyebrow"
-          :class="
+    <div :class="mergeFormUiClass(rowClass, pageUi?.headerRow)" data-form-page-header-row>
+      <div :class="mergeFormUiClass('flex min-w-0 items-center gap-3.5', pageUi?.headerContent)">
+        <slot name="leading" />
+        <div :class="mergeFormUiClass('grid min-w-0 gap-1.5', pageUi?.heading)">
+          <p
+            v-if="eyebrow || $slots.eyebrow"
+            :class="
   mergeFormUiClass(
     'text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase',
     pageUi?.eyebrow
   )
 "
-        >
-          <slot name="eyebrow">{{ eyebrow }}</slot>
-        </p>
-        <h1
-          v-if="title || $slots.title"
-          :class="
+          >
+            <slot name="eyebrow">{{ eyebrow }}</slot>
+          </p>
+          <h1
+            v-if="title || $slots.title"
+            :class="
   mergeFormUiClass(
     'm-0 truncate text-[22px] leading-[1.1] font-semibold tracking-[-0.025em] text-highlighted @3xl/form-page:text-[28px]',
     pageUi?.title
   )
 "
-        >
-          <slot name="title">{{ title }}</slot>
-        </h1>
-        <div
-          v-if="description || page.dirtyCheck.value || $slots.description"
-          :class="
+          >
+            <slot name="title">{{ title }}</slot>
+          </h1>
+          <div
+            v-if="description || page.dirtyCheck.value || $slots.description"
+            :class="
   mergeFormUiClass(
     'flex flex-wrap items-center gap-2.5 text-[13.5px] text-muted',
     pageUi?.meta
   )
 "
-        >
-          <slot name="description">
-            <span v-if="description">{{ description }}</span>
-          </slot>
-          <UBadge
-            v-if="page.dirtyCheck.value"
-            color="warning"
-            variant="soft"
-            :label="t('form.page.unsavedChanges')"
-            :class="mergeFormUiClass(unsaved ? '-my-1' : '-my-1 invisible', pageUi?.unsaved)"
-            :data-form-page-unsaved="unsaved ? '' : void 0"
-          />
+          >
+            <slot name="description">
+              <span v-if="description">{{ description }}</span>
+            </slot>
+            <UBadge
+              v-if="page.dirtyCheck.value"
+              color="warning"
+              variant="soft"
+              :label="t('form.page.unsavedChanges')"
+              :class="mergeFormUiClass(unsaved ? '-my-1' : '-my-1 invisible', pageUi?.unsaved)"
+              :data-form-page-unsaved="unsaved ? '' : void 0"
+            />
+          </div>
         </div>
       </div>
+      <slot name="actions">
+        <FormPageActions />
+      </slot>
     </div>
-    <slot name="actions">
-      <FormPageActions />
-    </slot>
   </header>
 </template>

package/dist/runtime/form/components/page/form-page-header.vue.d.ts

@@ -3,7 +3,9 @@
  * badge while a form with `controls.dirtyCheck` is modified, and the page actions. It stays
  * pinned while the page scrolls on wide layouts, and sections scroll to just below it. The badge
  * keeps its place while the form is unmodified, hidden, and does not grow its line, so the first
- * edit neither shifts the page nor resizes the pinned header.
+ * edit neither shifts the page nor resizes the pinned header. The header spans the page, but on a
+ * page without a navigation its row takes the centered column of the body, so both share their
+ * edges.
  */
 type __VLS_Slots = {
     /** Before the heading, e.g. an avatar of the record. */

package/dist/runtime/form/components/page/form-page-navigation.d.vue.ts

@@ -1,11 +1,13 @@
 import type { FormPageSectionState } from '../../types/index.js';
 /**
  * Navigation of a form page: one entry per visible section, following the section in view.
- * An entry shows whether its section is complete, invalid, or still to fill, marks optional
- * sections, and, with `controls.dirtyCheck`, a dot on modified sections. The footer sums up
- * the sections left to complete, or the modified ones with dirty checking.
+ * An entry shows whether its section is complete, to fix, to complete, or optional with nothing
+ * entered (a dashed circle and an "Optional" tag, never "to complete"), and, with
+ * `controls.dirtyCheck`, a dot on modified sections. The footer sums up the sections left to
+ * complete, which leaves out untouched optional ones, or the modified ones with dirty checking.
  *
  * From 768px of page width it is a pinned column; below, a row of chips that scrolls sideways.
+ * It renders nothing while the page has fewer visible sections than `navigation.minSections`.
  */
 type __VLS_Slots = {
     /** Replaces the heading, which comes from the schema `navigation.title`. */

package/dist/runtime/form/components/page/form-page-navigation.vue

@@ -73,6 +73,7 @@ function select(event, key) {
 
 <template>
   <nav
+    v-if="page.navigationVisible.value"
     :aria-labelledby="page.navigationTitle.value || $slots.title ? titleId : void 0"
     :aria-label="page.navigationTitle.value || $slots.title ? void 0 : t('form.page.navigation')"
     :style="{ '--nut-form-page-header': `${page.stickyOffset.value}px` }"
@@ -138,7 +139,7 @@ function select(event, key) {
                 aria-hidden="true"
                 :class="
   mergeFormUiClass(
-    'grid size-4 shrink-0 place-items-center rounded-full border-[1.5px] border-accented text-[10px] leading-none font-bold group-data-[active]:border-primary data-[state=complete]:border-(--ui-text-highlighted) data-[state=complete]:bg-(--ui-text-highlighted) data-[state=complete]:text-(--ui-bg) data-[state=invalid]:border-error data-[state=invalid]:bg-error data-[state=invalid]:text-inverted group-data-[active]:data-[state=complete]:border-primary group-data-[active]:data-[state=complete]:bg-primary group-data-[active]:data-[state=complete]:text-inverted',
+    'grid size-4 shrink-0 place-items-center rounded-full border-[1.5px] border-accented text-[10px] leading-none font-bold group-data-[active]:border-primary data-[state=optional]:border-dashed data-[state=complete]:border-(--ui-text-highlighted) data-[state=complete]:bg-(--ui-text-highlighted) data-[state=complete]:text-(--ui-bg) data-[state=invalid]:border-error data-[state=invalid]:bg-error data-[state=invalid]:text-inverted group-data-[active]:data-[state=complete]:border-primary group-data-[active]:data-[state=complete]:bg-primary group-data-[active]:data-[state=complete]:text-inverted',
     pageUi?.navigationIndicator
   )
 "
@@ -182,15 +183,17 @@ function select(event, key) {
                 data-form-page-dirty
               />
               <span
-                v-else-if="section.optional && section.status !== 'complete'"
+                v-else-if="section.status === 'optional'"
+                aria-hidden="true"
                 :class="
   mergeFormUiClass(
     'hidden shrink-0 text-[11px] font-normal text-dimmed @3xl/form-page:inline',
     pageUi?.navigationOptional
   )
 "
+                data-form-page-optional
               >
-                {{ t("form.page.optional") }}
+                {{ t("form.page.status.optional") }}
               </span>
             </a>
           </slot>

package/dist/runtime/form/components/page/form-page-navigation.vue.d.ts

@@ -1,11 +1,13 @@
 import type { FormPageSectionState } from '../../types/index.js';
 /**
  * Navigation of a form page: one entry per visible section, following the section in view.
- * An entry shows whether its section is complete, invalid, or still to fill, marks optional
- * sections, and, with `controls.dirtyCheck`, a dot on modified sections. The footer sums up
- * the sections left to complete, or the modified ones with dirty checking.
+ * An entry shows whether its section is complete, to fix, to complete, or optional with nothing
+ * entered (a dashed circle and an "Optional" tag, never "to complete"), and, with
+ * `controls.dirtyCheck`, a dot on modified sections. The footer sums up the sections left to
+ * complete, which leaves out untouched optional ones, or the modified ones with dirty checking.
  *
  * From 768px of page width it is a pinned column; below, a row of chips that scrolls sideways.
+ * It renders nothing while the page has fewer visible sections than `navigation.minSections`.
  */
 type __VLS_Slots = {
     /** Replaces the heading, which comes from the schema `navigation.title`. */

package/dist/runtime/form/components/page/form-page-section.vue

@@ -50,7 +50,7 @@ onBeforeUnmount(() => unregister?.());
 }"
     :class="
   mergeFormUiClass(
-    'flex min-w-0 flex-col gap-[18px] rounded-xl border border-default bg-default px-5 pt-5 pb-6 transition-[border-color,box-shadow] duration-200 @3xl/form-page:px-6 @3xl/form-page:pt-[22px] data-[dirty]:border-primary data-[dirty]:ring-4 data-[dirty]:ring-primary/20 data-[dirty]:ring-inset',
+    `flex min-w-0 flex-col ${page.surfaceClasses.value.section}`,
     pageUi?.section
   )
 "
@@ -77,7 +77,7 @@ onBeforeUnmount(() => unregister?.());
         v-if="section.description"
         :class="
   mergeFormUiClass(
-    'order-last m-0 basis-full text-[13px] text-muted @3xl/form-page:order-none @3xl/form-page:basis-auto',
+    `m-0 text-[13px] text-muted ${page.surfaceClasses.value.sectionDescription}`,
     pageUi?.sectionDescription
   )
 "
@@ -85,11 +85,12 @@ onBeforeUnmount(() => unregister?.());
         {{ section.description }}
       </p>
       <UBadge
-        v-if="section.optional"
+        v-if="section.status === 'optional'"
         color="neutral"
         variant="soft"
-        :label="t('form.page.optional')"
-        :class="mergeFormUiClass('capitalize', pageUi?.sectionOptional)"
+        :label="t('form.page.status.optional')"
+        :class="pageUi?.sectionOptional"
+        data-form-page-optional
       />
       <div
         v-if="page.dirtyCheck.value || $slots.actions"

package/dist/runtime/form/components/page/form-page-sections.d.vue.ts

@@ -1,8 +1,9 @@
 import type { FormPageSectionState } from '../../types/index.js';
 /**
- * Cards of a form page, one per visible section, each with its title, description, fields, and,
- * with `controls.dirtyCheck`, a ring and a reset button while it is modified. Skeleton cards
- * stand in while the schema context loads.
+ * Sections of a form page, one per visible section, each with its title, description, fields, and,
+ * with `controls.dirtyCheck`, a mark and a reset button while it is modified. They are cards, or
+ * plain blocks with the `page.surface` UI option. Skeletons stand in while the schema context
+ * loads.
  */
 type __VLS_Slots = {
     /** Extra buttons in a section header, before its reset button. */

package/dist/runtime/form/components/page/form-page-sections.vue

@@ -18,7 +18,12 @@ const { contextError, contextLoading, contextPending, refreshContext } = page.ro
 
 <template>
   <div
-    :class="mergeFormUiClass('flex min-w-0 flex-col gap-[18px]', pageUi?.sections)"
+    :class="
+  mergeFormUiClass(
+    `flex min-w-0 flex-col ${page.surfaceClasses.value.sections}`,
+    pageUi?.sections
+  )
+"
     data-form-page-sections
   >
     <UAlert
@@ -48,7 +53,7 @@ const { contextError, contextLoading, contextPending, refreshContext } = page.ro
         :key="section.key"
         :class="
   mergeFormUiClass(
-    'grid gap-4 rounded-xl border border-default bg-default px-6 pt-[22px] pb-6',
+    `grid gap-4 ${page.surfaceClasses.value.sectionSkeleton}`,
     pageUi?.sectionSkeleton
   )
 "

package/dist/runtime/form/components/page/form-page-sections.vue.d.ts

@@ -1,8 +1,9 @@
 import type { FormPageSectionState } from '../../types/index.js';
 /**
- * Cards of a form page, one per visible section, each with its title, description, fields, and,
- * with `controls.dirtyCheck`, a ring and a reset button while it is modified. Skeleton cards
- * stand in while the schema context loads.
+ * Sections of a form page, one per visible section, each with its title, description, fields, and,
+ * with `controls.dirtyCheck`, a mark and a reset button while it is modified. They are cards, or
+ * plain blocks with the `page.surface` UI option. Skeletons stand in while the schema context
+ * loads.
  */
 type __VLS_Slots = {
     /** Extra buttons in a section header, before its reset button. */

package/dist/runtime/form/components/page/form-page.d.vue.ts

@@ -2,6 +2,8 @@ import type { FormPageSectionState, FormRendererController, FormUiConfig, FormVa
 /**
  * A form laid out as a page: a header with the title and the actions, a navigation that follows
  * the section in view, and one card per section. Render a schema from `defineFormPageSchema`.
+ * The `page.surface` UI option draws the sections as `plain` blocks instead of cards, and the
+ * schema `navigation.minSections` leaves the navigation out of a page with few sections.
  *
  * The page scrolls on its own, so give it a height (`h-full` in a layout that sizes its main
  * area). Put parts in the default slot to compose another layout: `FormPageHeader`,

package/dist/runtime/form/components/page/form-page.vue

@@ -2,6 +2,7 @@
 import { computed, useTemplateRef } from "vue";
 import { provideFormPage, useFormPage } from "../../composables/use-form-page";
 import { useFormRoot } from "../../composables/use-form-root";
+import { FORM_PAGE_COLUMN } from "../../utils/page-surface";
 import { mergeFormUiClass } from "../../utils/ui";
 import FormPageHeader from "./form-page-header.vue";
 import FormPageNavigation from "./form-page-navigation.vue";
@@ -30,6 +31,10 @@ const root = useFormRoot({
 });
 const page = provideFormPage(useFormPage({ element: () => element.value, hash: () => hash, root }));
 const pageUi = computed(() => root.formUi.ui.value.page?.ui);
+const BODY_UI = {
+  beside: "grid gap-4 px-4 pt-4 pb-16 @3xl/form-page:grid-cols-[200px_minmax(0,1fr)] @3xl/form-page:items-start @3xl/form-page:gap-7 @3xl/form-page:px-7 @3xl/form-page:pt-6 @3xl/form-page:pb-20 @5xl/form-page:grid-cols-[230px_minmax(0,760px)]",
+  single: `${FORM_PAGE_COLUMN} grid gap-4 px-4 pt-4 pb-16 @3xl/form-page:gap-7 @3xl/form-page:px-7 @3xl/form-page:pt-6 @3xl/form-page:pb-20`
+};
 </script>
 
 <template>
@@ -37,8 +42,12 @@ const pageUi = computed(() => root.formUi.ui.value.page?.ui);
     ref="element"
     novalidate
     :class="
-  mergeFormUiClass('@container/form-page h-full min-w-0 overflow-y-auto bg-muted', pageUi?.root)
+  mergeFormUiClass(
+    `@container/form-page h-full min-w-0 overflow-y-auto ${page.surfaceClasses.value.root}`,
+    pageUi?.root
+  )
 "
+    :data-surface="page.surface.value"
     data-form-page
     @submit.prevent="root.submit"
   >
@@ -63,7 +72,7 @@ const pageUi = computed(() => root.formUi.ui.value.page?.ui);
       <div
         :class="
   mergeFormUiClass(
-    'grid gap-4 px-4 pt-4 pb-16 @3xl/form-page:grid-cols-[200px_minmax(0,1fr)] @3xl/form-page:items-start @3xl/form-page:gap-7 @3xl/form-page:px-7 @3xl/form-page:pt-6 @3xl/form-page:pb-20 @5xl/form-page:grid-cols-[230px_minmax(0,760px)]',
+    page.navigationVisible.value ? BODY_UI.beside : BODY_UI.single,
     pageUi?.body
   )
 "

package/dist/runtime/form/components/page/form-page.vue.d.ts

@@ -2,6 +2,8 @@ import type { FormPageSectionState, FormRendererController, FormUiConfig, FormVa
 /**
  * A form laid out as a page: a header with the title and the actions, a navigation that follows
  * the section in view, and one card per section. Render a schema from `defineFormPageSchema`.
+ * The `page.surface` UI option draws the sections as `plain` blocks instead of cards, and the
+ * schema `navigation.minSections` leaves the navigation out of a page with few sections.
  *
  * The page scrolls on its own, so give it a height (`h-full` in a layout that sizes its main
  * area). Put parts in the default slot to compose another layout: `FormPageHeader`,

package/dist/runtime/form/components/renderer/form-field-renderer.vue

@@ -1,6 +1,7 @@
 <script setup>
 import UAlert from "@nuxt/ui/components/Alert.vue";
 import { computed, ref, useId, watchEffect } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { useFieldEffects } from "../../composables/use-field-effects";
 import {
   provideFormFieldBare,
@@ -67,6 +68,7 @@ const props = defineProps({
   controlAttrs: { type: null, required: false }
 });
 const form = useFormRuntimeContext();
+const { t } = useUiToolsLocale();
 const element = ref(null);
 const bare = computed(() => props.bare === true);
 const controlId = useId();
@@ -208,8 +210,8 @@ function resolveControlLabel(controlField) {
       color="neutral"
       variant="soft"
       icon="i-lucide-construction"
-      title="Unsupported field"
-      :description="`The ${field.type.value} field renderer is not implemented in this slice.`"
+      :title="t('form.fields.unsupported.title')"
+      :description="t('form.fields.unsupported.description', { type: field.type.value })"
     />
   </template>
 
@@ -225,8 +227,8 @@ function resolveControlLabel(controlField) {
       color="neutral"
       variant="soft"
       icon="i-lucide-construction"
-      title="Unsupported field"
-      :description="`The ${field.type.value} field renderer is not implemented in this slice.`"
+      :title="t('form.fields.unsupported.title')"
+      :description="t('form.fields.unsupported.description', { type: field.type.value })"
     />
   </div>
 </template>

package/dist/runtime/form/components/renderer/form-field-shell.d.vue.ts

@@ -9,12 +9,12 @@ declare var __VLS_1: {
     description: string | undefined;
     hint: string | undefined;
     required: any;
-}, __VLS_61: {
+}, __VLS_67: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
     required: any;
-}, __VLS_75: {
+}, __VLS_81: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
@@ -23,9 +23,9 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_61) => any;
+    default?: (props: typeof __VLS_67) => any;
 } & {
-    default?: (props: typeof __VLS_75) => any;
+    default?: (props: typeof __VLS_81) => 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/runtime/form/components/renderer/form-field-shell.vue

@@ -11,6 +11,7 @@ import { useFormFieldBare } from "../../composables/use-form-field-chrome";
 import { useFormRuntimeContext } from "../../composables/use-form-runtime";
 import { useFormUi } from "../../composables/use-form-ui";
 import { getSchemaDirtyCheck } from "../../utils/controls";
+import { resolveFieldDisabledReason } from "../../utils/disabled";
 import { createFormFieldInstance } from "../../utils/field-instance";
 import { isFunction, isNumber, isString } from "../../utils/predicate";
 import { resolveRequired } from "../../utils/state";
@@ -85,6 +86,9 @@ const help = computed(
   () => field.value.capability.has("hint") && "help" in props.field ? resolveFieldText(props.field.help, params.value) : void 0
 );
 const shellHelp = computed(() => props.inlineLabel ? void 0 : help.value);
+const disabledReason = computed(
+  () => field.value.capability.has("hint") ? resolveFieldDisabledReason(props.field, params.value) : void 0
+);
 const dirty = computed(
   () => "dirtyCheck" in props.field && (props.field.dirtyCheck === true || getSchemaDirtyCheck(form.schema.value)) && form.dirtyPaths.value.includes(props.path.join("."))
 );
@@ -130,7 +134,7 @@ function renderLabelExtra() {
     :description="shellDescription"
     :hint="shellLabelExtra === void 0 || shellLabelExtra === null ? shellHint : void 0"
     :error="error"
-    :help="shellHelp"
+    :help="shellHelp ?? disabledReason"
     :required="required"
     :size="formUi.controlSize.value"
     :orientation="orientation"
@@ -183,6 +187,26 @@ function renderLabelExtra() {
         <component :is="renderLabelExtra" />
       </span>
     </template>
+    <template v-if="disabledReason" #help>
+      <span v-if="shellHelp" class="block">{{ shellHelp }}</span>
+      <span
+        :class="
+  mergeFormUiClass(
+    'flex items-start gap-1.5',
+    shellHelp ? 'mt-1' : void 0,
+    fieldUi?.disabledReason
+  )
+"
+        data-form-disabled-reason=""
+      >
+        <UIcon
+          name="i-lucide-lock"
+          aria-hidden="true"
+          :class="mergeFormUiClass('mt-0.5 size-3.5 shrink-0', fieldUi?.disabledReasonIcon)"
+        />
+        <span>{{ disabledReason }}</span>
+      </span>
+    </template>
     <UCollapsible
       v-if="collapsible"
       v-model:open="open"
@@ -195,7 +219,7 @@ function renderLabelExtra() {
         :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
         :class="mergeFormUiClass('justify-self-start', fieldUi?.collapseTrigger)"
       >
-        {{ open ? "Collapse" : "Expand" }}
+        {{ open ? t("form.fields.shell.collapse") : t("form.fields.shell.expand") }}
       </UButton>
       <template #content>
         <div :class="mergeFormUiClass('flex items-start gap-2', fieldUi?.body)">
@@ -216,7 +240,7 @@ function renderLabelExtra() {
             color="neutral"
             variant="ghost"
             size="xs"
-            aria-label="Reset field"
+            :aria-label="t('form.fields.shell.reset')"
             :class="fieldUi?.reset"
             @click="resetField"
           />
@@ -239,7 +263,7 @@ function renderLabelExtra() {
         color="neutral"
         variant="ghost"
         size="xs"
-        aria-label="Reset field"
+        :aria-label="t('form.fields.shell.reset')"
         :class="fieldUi?.reset"
         @click="resetField"
       />

package/dist/runtime/form/components/renderer/form-field-shell.vue.d.ts

@@ -9,12 +9,12 @@ declare var __VLS_1: {
     description: string | undefined;
     hint: string | undefined;
     required: any;
-}, __VLS_61: {
+}, __VLS_67: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
     required: any;
-}, __VLS_75: {
+}, __VLS_81: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
@@ -23,9 +23,9 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_61) => any;
+    default?: (props: typeof __VLS_67) => any;
 } & {
-    default?: (props: typeof __VLS_75) => any;
+    default?: (props: typeof __VLS_81) => 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/runtime/form/components/root/form.vue

@@ -143,7 +143,7 @@ defineExpose({
   validate: runtime.validate
 });
 function stepLabel(index) {
-  return runtime.steps.value[index]?.label ?? `Step ${index + 1}`;
+  return runtime.steps.value[index]?.label ?? t("form.steps.fallback", { number: index + 1 });
 }
 function getHeaderText(headerConfig, key) {
   if (!isRecord(headerConfig)) {
@@ -245,7 +245,7 @@ function getSchemaShowStepper(schema) {
           :size="formUi.controlSize.value"
           icon="i-lucide-x"
           :disabled="runtime.actionPending.value !== null"
-          aria-label="Close form"
+          :aria-label="t('form.actions.closeButton')"
           :class="formUi.ui.value.root?.ui?.close"
           @click="cancel"
         />

package/dist/runtime/form/components/utils/form-option-choice-label.d.vue.ts

@@ -0,0 +1,16 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Label of an option in a radio or checkbox list: the leading visual, the label, and the suffix at
+ * the end of the row. The description stays with the Nuxt UI group, under the row. An option with a
+ * `renderOption` function shows what it returns instead, and a plain option shows its label as it
+ * always did.
+ */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+    selected?: boolean;
+    render?: (context: FormOptionRenderContext) => VNodeChild;
+};
+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/runtime/form/components/utils/form-option-choice-label.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { resolveOptionLeading } from "../../utils/options";
+import FormOptionLeading from "./form-option-leading.vue";
+import FormOptionRender from "./form-option-render";
+import FormOptionSuffix from "./form-option-suffix.vue";
+const props = defineProps({
+  option: { type: Object, required: true },
+  selected: { type: Boolean, required: false },
+  render: { type: Function, required: false }
+});
+function content() {
+  const { item } = props.option;
+  if (item === void 0) return null;
+  return props.render?.({
+    disabled: props.option.disabled === true,
+    item,
+    option: props.option,
+    selected: props.selected === true
+  });
+}
+</script>
+
+<template>
+  <span v-if="render" class="block whitespace-normal" data-form-option-custom>
+    <FormOptionRender :content="content" />
+  </span>
+  <span
+    v-else-if="resolveOptionLeading(option) || option.suffix"
+    class="flex min-w-0 items-center gap-2"
+    data-form-option-row
+  >
+    <FormOptionLeading :option="option" />
+    <span class="min-w-0 flex-1 break-words">{{ option.label }}</span>
+    <FormOptionSuffix :option="option" class="ps-2 font-normal" />
+  </span>
+  <template v-else>{{ option.label }}</template>
+</template>