nuxt-ui-tools 1.18.0 → 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.18.0",
+  "version": "1.19.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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.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";
@@ -32,7 +33,7 @@ const page = provideFormPage(useFormPage({ element: () => element.value, hash: (
 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: "mx-auto grid w-full max-w-[816px] 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"
+  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>
 

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>

package/dist/runtime/form/components/utils/form-option-choice-label.vue.d.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-display-value.d.vue.ts

@@ -0,0 +1,14 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * The chosen option as the closed control of a select or auto-complete reads: what `renderValue`
+ * returns, or the label followed by the dimmed suffix. The leading visual belongs to the control's
+ * own leading slot.
+ */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => 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-display-value.vue

@@ -0,0 +1,20 @@
+<script setup>
+import FormOptionRender from "./form-option-render";
+import FormOptionSuffix from "./form-option-suffix.vue";
+const props = defineProps({
+  option: { type: Object, required: true },
+  render: { type: Function, required: false }
+});
+function content() {
+  const { item } = props.option;
+  return item === void 0 ? null : props.render?.({ item, option: props.option });
+}
+</script>
+
+<template>
+  <FormOptionRender v-if="render" :content="content" />
+  <template v-else>
+    {{ option.label }}
+    <FormOptionSuffix :option="option" class="ms-1.5" />
+  </template>
+</template>

package/dist/runtime/form/components/utils/form-option-display-value.vue.d.ts

@@ -0,0 +1,14 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * The chosen option as the closed control of a select or auto-complete reads: what `renderValue`
+ * returns, or the label followed by the dimmed suffix. The leading visual belongs to the control's
+ * own leading slot.
+ */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => 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-item-label.d.vue.ts

@@ -1,6 +1,13 @@
-import type { FormValue } from '../../types/index.js';
+import type { VNodeChild } from 'vue';
+import type { FormOptionRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Label of an option in a menu. The load-more row keeps its own loader, an option with a
+ * `renderOption` function shows what it returns, and any other option shows its label.
+ */
 type __VLS_Props = {
-    item: FormValue;
+    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;

package/dist/runtime/form/components/utils/form-option-item-label.vue

@@ -2,19 +2,23 @@
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed } from "vue";
 import { isLoadMoreOption } from "../../utils/options";
-import { isRecord } from "../../utils/path";
-import { isNumber, isString } from "../../utils/predicate";
+import FormOptionRender from "./form-option-render";
 const props = defineProps({
-  item: { type: null, required: true }
-});
-const loadMore = computed(() => isLoadMoreOption(props.item));
-const label = computed(() => {
-  if (isRecord(props.item)) {
-    const value = props.item.label;
-    return isString(value) || isNumber(value) ? String(value) : "";
-  }
-  return isString(props.item) || isNumber(props.item) ? String(props.item) : "";
+  option: { type: Object, required: true },
+  selected: { type: Boolean, required: false },
+  render: { type: Function, required: false }
 });
+const loadMore = computed(() => isLoadMoreOption(props.option));
+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>
@@ -24,7 +28,10 @@ const label = computed(() => {
     data-form-option-loading=""
   >
     <UIcon name="i-lucide-loader-circle" class="size-3.5 animate-spin" aria-hidden="true" />
-    {{ label }}
+    {{ option.label }}
+  </span>
+  <span v-else-if="render" class="block whitespace-normal" data-form-option-custom>
+    <FormOptionRender :content="content" />
   </span>
-  <template v-else>{{ label }}</template>
+  <template v-else>{{ option.label }}</template>
 </template>

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

@@ -1,6 +1,13 @@
-import type { FormValue } from '../../types/index.js';
+import type { VNodeChild } from 'vue';
+import type { FormOptionRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Label of an option in a menu. The load-more row keeps its own loader, an option with a
+ * `renderOption` function shows what it returns, and any other option shows its label.
+ */
 type __VLS_Props = {
-    item: FormValue;
+    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;

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

@@ -0,0 +1,23 @@
+import type { ResolvedFormOption } from '../../types/index.js';
+/**
+ * The one visual an option draws before its label: its icon, else its avatar, else its chip, the
+ * same order as Nuxt UI items. Draws nothing for an option that declares none, or for no option:
+ * a menu fills its leading slot with this component even when a `renderOption` function owns the
+ * content, because an empty slot would bring back the Nuxt UI icon.
+ */
+type __VLS_Props = {
+    option?: ResolvedFormOption;
+    /** Classes of the icon, so a control can match its own leading icon. */
+    iconClass?: string;
+    /** Nuxt UI avatar size; one the avatar does not know falls back to `xs`. */
+    avatarSize?: string;
+    /** Classes of the box the chip dot is centered in. */
+    chipClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    iconClass: string;
+    avatarSize: string;
+    chipClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/components/utils/form-option-leading.vue

@@ -0,0 +1,41 @@
+<script setup>
+import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UChip from "@nuxt/ui/components/Chip.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+const AVATAR_SIZES = ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+const props = defineProps({
+  option: { type: Object, required: false },
+  iconClass: { type: String, required: false, default: "size-4 text-muted" },
+  avatarSize: { type: String, required: false, default: "xs" },
+  chipClass: { type: String, required: false, default: "size-4" }
+});
+const size = computed(() => AVATAR_SIZES.find((entry) => entry === props.avatarSize) ?? "xs");
+</script>
+
+<template>
+  <UIcon
+    v-if="option?.icon"
+    :name="option.icon"
+    :class="['shrink-0', iconClass]"
+    aria-hidden="true"
+    data-form-option-leading="icon"
+  />
+  <UAvatar
+    v-else-if="option?.avatar"
+    :src="option.avatar.src"
+    :alt="option.avatar.alt ?? option.label"
+    :text="option.avatar.text"
+    :size="size"
+    class="shrink-0"
+    data-form-option-leading="avatar"
+  />
+  <span
+    v-else-if="option?.chip"
+    :class="['grid shrink-0 place-items-center', chipClass]"
+    aria-hidden="true"
+    data-form-option-leading="chip"
+  >
+    <UChip standalone inset size="md" :color="option.chip.color" />
+  </span>
+</template>

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

@@ -0,0 +1,23 @@
+import type { ResolvedFormOption } from '../../types/index.js';
+/**
+ * The one visual an option draws before its label: its icon, else its avatar, else its chip, the
+ * same order as Nuxt UI items. Draws nothing for an option that declares none, or for no option:
+ * a menu fills its leading slot with this component even when a `renderOption` function owns the
+ * content, because an empty slot would bring back the Nuxt UI icon.
+ */
+type __VLS_Props = {
+    option?: ResolvedFormOption;
+    /** Classes of the icon, so a control can match its own leading icon. */
+    iconClass?: string;
+    /** Nuxt UI avatar size; one the avatar does not know falls back to `xs`. */
+    avatarSize?: string;
+    /** Classes of the box the chip dot is centered in. */
+    chipClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    iconClass: string;
+    avatarSize: string;
+    chipClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/components/utils/form-option-render.d.ts

@@ -0,0 +1,11 @@
+import type { VNodeChild } from 'vue';
+/**
+ * Renders what a `renderOption` or `renderValue` function returned. The function is called inside
+ * this component's render, so the reactive state it reads re-renders only this option.
+ */
+declare const _default: import("vue").DefineSetupFnComponent<{
+    content: () => VNodeChild;
+}, {}, {}, {
+    content: () => VNodeChild;
+} & {}, import("vue").PublicProps>;
+export default _default;

package/dist/runtime/form/components/utils/form-option-render.js

@@ -0,0 +1,5 @@
+import { defineComponent } from "vue";
+export default defineComponent((props) => () => props.content(), {
+  name: "FormOptionRender",
+  props: ["content"]
+});

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

@@ -0,0 +1,8 @@
+import type { ResolvedFormOption } from '../../types/index.js';
+/** The secondary text at the end of an option, dimmed, with numbers that line up in a column. */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+};
+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-suffix.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  option: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <span
+    v-if="option.suffix"
+    class="shrink-0 whitespace-nowrap text-dimmed tabular-nums"
+    data-form-option-suffix
+  >
+    {{ option.suffix }}
+  </span>
+</template>

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

@@ -0,0 +1,8 @@
+import type { ResolvedFormOption } from '../../types/index.js';
+/** The secondary text at the end of an option, dimmed, with numbers that line up in a column. */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+};
+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-value-overlay.d.vue.ts

@@ -0,0 +1,30 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Draws the chosen option of an auto-complete over the text of its input, while the field rests.
+ * The input holds plain text, so a `renderValue` result or a suffix after the label can only sit
+ * on top of it: the input keeps its own text (made transparent by the field while `active`), its
+ * selection and its focus, and the overlay copies the input's padding and type so the value starts
+ * where the text would. It ignores the pointer, and is hidden from assistive technology because
+ * the input already announces the label.
+ */
+type __VLS_Props = {
+    /** The chosen option, or none. */
+    option?: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+    /** True while the overlay stands in for the text of the input. */
+    active: 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, {}, 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/runtime/form/components/utils/form-option-value-overlay.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
+import FormOptionDisplayValue from "./form-option-display-value.vue";
+const props = defineProps({
+  option: { type: Object, required: false },
+  render: { type: Function, required: false },
+  active: { type: Boolean, required: true }
+});
+const root = useTemplateRef("root");
+const inset = ref({});
+function measure() {
+  const input = root.value?.querySelector("input");
+  if (!input) return;
+  const style = getComputedStyle(input);
+  inset.value = {
+    fontSize: style.fontSize,
+    insetInlineEnd: style.paddingInlineEnd,
+    insetInlineStart: style.paddingInlineStart,
+    lineHeight: style.lineHeight
+  };
+}
+onMounted(measure);
+watch(
+  () => [props.option?.value, props.active],
+  () => nextTick(measure)
+);
+</script>
+
+<template>
+  <div ref="root" class="relative w-full min-w-0">
+    <slot />
+    <div
+      v-if="active && option"
+      class="pointer-events-none absolute inset-y-0 flex min-w-0 items-center overflow-hidden whitespace-nowrap text-highlighted"
+      :style="inset"
+      aria-hidden="true"
+      data-form-option-value-overlay
+    >
+      <span class="min-w-0 truncate">
+        <FormOptionDisplayValue :option="option" :render="render" />
+      </span>
+    </div>
+  </div>
+</template>

package/dist/runtime/form/components/utils/form-option-value-overlay.vue.d.ts

@@ -0,0 +1,30 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Draws the chosen option of an auto-complete over the text of its input, while the field rests.
+ * The input holds plain text, so a `renderValue` result or a suffix after the label can only sit
+ * on top of it: the input keeps its own text (made transparent by the field while `active`), its
+ * selection and its focus, and the overlay copies the input's padding and type so the value starts
+ * where the text would. It ignores the pointer, and is hidden from assistive technology because
+ * the input already announces the label.
+ */
+type __VLS_Props = {
+    /** The chosen option, or none. */
+    option?: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+    /** True while the overlay stands in for the text of the input. */
+    active: 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, {}, 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;
+    };
+};