@leavepulse/ui 0.78.1 → 0.78.2

package/dist/components/LpLogViewer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLogViewer-umCZBapN.js";
+import { _ as _sfc_main } from "../chunks/LpLogViewer-CWu49Dko.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModalNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModalNav-gOi1Giz1.js";
+import { _ as _sfc_main } from "../chunks/LpModalNav-DI3BW5ff.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNumberField.vue.d.ts

@@ -43,6 +43,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** A leading icon, as on LpInput; the `leading` slot replaces it. */
     icon?: string;
     invalid?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     /** Control height, matching LpInput. */
     size?: "sm" | "md" | "lg";
     labels?: Partial<NumberFieldLabels>;
@@ -87,6 +89,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** A leading icon, as on LpInput; the `leading` slot replaces it. */
     icon?: string;
     invalid?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     /** Control height, matching LpInput. */
     size?: "sm" | "md" | "lg";
     labels?: Partial<NumberFieldLabels>;

package/dist/components/LpNumberField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNumberField-Csg-1Zh_.js";
+import { _ as _sfc_main } from "../chunks/LpNumberField-C8LfUz_R.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpOtpInput.vue.d.ts

@@ -24,6 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     group?: number | number[];
     /** Error state — tints the cells red (e.g. wrong code). */
     invalid?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     size?: "sm" | "md" | "lg";
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
@@ -52,6 +54,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     group?: number | number[];
     /** Error state — tints the cells red (e.g. wrong code). */
     invalid?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     size?: "sm" | "md" | "lg";
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;

package/dist/components/LpOtpInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpOtpInput-BRpLBbOD.js";
+import { _ as _sfc_main } from "../chunks/LpOtpInput-B1X9l9no.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPaletteTheme.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPaletteTheme-BIXpZLGe.js";
+import { _ as _sfc_main } from "../chunks/LpPaletteTheme-B-xuZiKK.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPasswordInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPasswordInput-D4HPhqfV.js";
+import { _ as _sfc_main } from "../chunks/LpPasswordInput-Duc_3wPv.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPhoneInput.vue.d.ts

@@ -44,6 +44,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     size?: "sm" | "md" | "lg";
     emptyText?: string;
     searchPlaceholder?: string;
@@ -62,6 +64,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     size?: "sm" | "md" | "lg";
     emptyText?: string;
     searchPlaceholder?: string;

package/dist/components/LpPhoneInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPhoneInput-BSL7NX4z.js";
+import { _ as _sfc_main } from "../chunks/LpPhoneInput-CctcRK9K.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpRadioGroup.vue.d.ts

@@ -10,6 +10,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     modelValue?: string;
     options?: RadioOption[];
     disabled?: boolean;
+    /** A message under the group, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<{
@@ -17,6 +19,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     modelValue?: string;
     options?: RadioOption[];
     disabled?: boolean;
+    /** A message under the group, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {

package/dist/components/LpRadioGroup.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpRadioGroup-BrazjLY_.js";
+import { _ as _sfc_main } from "../chunks/LpRadioGroup-DTM0nd9G.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpRangeSlider.vue.d.ts

@@ -11,6 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     /** The least distance the two ends keep between them, in model units. */
     minGap?: number;
     disabled?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     /** Accessible names for the two thumbs when there's no visible label. */
     ariaLabels?: [string, string];
     /** Label over each thumb while it is in use: `(value) => "1:05"`. */
@@ -28,6 +30,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     /** The least distance the two ends keep between them, in model units. */
     minGap?: number;
     disabled?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     /** Accessible names for the two thumbs when there's no visible label. */
     ariaLabels?: [string, string];
     /** Label over each thumb while it is in use: `(value) => "1:05"`. */

package/dist/components/LpRangeSlider.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpRangeSlider-fz61tzc-.js";
+import { _ as _sfc_main } from "../chunks/LpRangeSlider-DJsEZXad.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpRepeater.vue.d.ts

@@ -7,6 +7,8 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
         itemKey?: RepeaterItemKey<T>;
         label?: string;
         disabled?: boolean;
+        /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+        error?: string;
         labels?: Partial<{
             add: string;
             remove: string;

package/dist/components/LpRepeater.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpRepeater-BkJHSPI1.js";
+import { _ as _sfc_main } from "../chunks/LpRepeater-Czib3rmv.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpScrollArea.vue.d.ts

@@ -16,8 +16,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onScroll?: ((event: Event) => any) | undefined;
 }>, {
-    fade: boolean;
     instant: boolean;
+    fade: boolean;
     floating: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/LpSecretField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSecretField-B2roc4Iz.js";
+import { _ as _sfc_main } from "../chunks/LpSecretField-BtlCk3IH.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSegmented.vue.d.ts

@@ -21,6 +21,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     /** Stretch to fill the container with equal-width segments. */
     block?: boolean;
     disabled?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     /**
      * The pill glides under the hovered segment and springs back on leave (the
      * default, as in LpTabs). False pins it to the selected segment and hover
@@ -38,6 +40,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     /** Stretch to fill the container with equal-width segments. */
     block?: boolean;
     disabled?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     /**
      * The pill glides under the hovered segment and springs back on leave (the
      * default, as in LpTabs). False pins it to the selected segment and hover

package/dist/components/LpSegmented.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSegmented-DbEJhbv-.js";
+import { _ as _sfc_main } from "../chunks/LpSegmented-sskrJKJJ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSelect.vue.d.ts

@@ -30,6 +30,8 @@ declare const __VLS_export: <V extends SelectValue = string>(__VLS_props: NonNul
         clearable?: boolean;
         disabled?: boolean;
         invalid?: boolean;
+        /** A message under the select, as on LpInput: it marks the select invalid (what `form.field()` hands it). */
+        error?: string;
         emptyText?: string;
         searchTerm?: string;
         loading?: boolean;

package/dist/components/LpSelect.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSelect-Y-iuSymW.js";
+import { _ as _sfc_main } from "../chunks/LpSelect-JFZehOkd.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpShinyText.vue.d.ts

@@ -26,9 +26,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }> & Readonly<{}>, {
     as: string;
     speed: number;
+    paused: boolean;
     variant: "shine" | "gradient";
     tone: ToneName | "ink";
-    paused: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

package/dist/components/LpSidebar.vue.d.ts

@@ -191,8 +191,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     maxWidth: number;
     minWidth: number;
-    variant: "rail" | "panel";
     compact: boolean;
+    variant: "rail" | "panel";
     previewDelay: number;
     skeletonRows: number;
     skeletonHeader: boolean;

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-DDNJzb69.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-CvRvVBTt.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSlider.vue.d.ts

@@ -9,6 +9,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     max?: number;
     step?: number;
     disabled?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     /** Accessible name for the thumb when there's no visible label. */
     ariaLabel?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
@@ -22,6 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     max?: number;
     step?: number;
     disabled?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     /** Accessible name for the thumb when there's no visible label. */
     ariaLabel?: string;
 }> & Readonly<{

package/dist/components/LpSlider.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSlider-A4ixovgS.js";
+import { _ as _sfc_main } from "../chunks/LpSlider-C4ilCtZX.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSwitch.vue.d.ts

@@ -6,6 +6,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     palette?: PaletteControlOptions;
     modelValue?: boolean;
     disabled?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     label?: string;
     /** Secondary line under the label. */
     description?: string;
@@ -31,6 +33,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     palette?: PaletteControlOptions;
     modelValue?: boolean;
     disabled?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     label?: string;
     /** Secondary line under the label. */
     description?: string;

package/dist/components/LpSwitch.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSwitch-DnC2-0aV.js";
+import { _ as _sfc_main } from "../chunks/LpSwitch-DyAYTchz.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTable.vue.js

@@ -2,7 +2,7 @@ import { defineComponent, computed, useAttrs, ref, shallowRef, watch, onMounted,
 import { usePaletteScope, suppressPaletteDiscovery, usePaletteCommands } from "../composables/usePaletteCommands.js";
 import { menuPaletteCommands } from "./commandPalette.js";
 import { _ as _sfc_main$1 } from "../chunks/LpDataList-CaVfsozH.js";
-import { _ as _sfc_main$9 } from "../chunks/LpCheckbox-D6RuDW4X.js";
+import { _ as _sfc_main$9 } from "../chunks/LpCheckbox-CCWCwD0y.js";
 import { _ as _sfc_main$8 } from "../chunks/LpContextMenu-Bx_IhQDS.js";
 import { _ as _sfc_main$e } from "../chunks/LpEditable-DVT0Rh8F.js";
 import { _ as _sfc_main$d } from "../chunks/LpEmptyState-DurPF001.js";
@@ -14,7 +14,7 @@ import { _ as _sfc_main$a } from "../chunks/LpPopover-BQSuxtai.js";
 import { _ as _sfc_main$7 } from "../chunks/LpScrollArea-CqvwfZs2.js";
 import { _ as _sfc_main$6 } from "../chunks/LpRollingText-B54Pje7P.js";
 import { _ as _sfc_main$4 } from "../chunks/LpShift-DAgS_d2x.js";
-import { _ as _sfc_main$b } from "../chunks/LpTableFilter-B_XMOeAh.js";
+import { _ as _sfc_main$b } from "../chunks/LpTableFilter-CJg5eIcV.js";
 import { useKitStorage } from "../composables/usePersisted.js";
 import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { useTableFacets } from "./tableFacets.js";

package/dist/components/LpTableFilter.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTableFilter-B_XMOeAh.js";
+import { _ as _sfc_main } from "../chunks/LpTableFilter-CJg5eIcV.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTabs.vue.d.ts

@@ -76,9 +76,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     history: boolean;
     block: boolean;
-    variant: "contained" | "plain" | "underline" | "bottom";
     accent: boolean;
     compact: boolean;
+    variant: "contained" | "plain" | "underline" | "bottom";
     hoverFollow: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/LpTagsInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTagsInput-Dt0mteSj.js";
+import { _ as _sfc_main } from "../chunks/LpTagsInput-CkNxpNYa.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTextarea.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTextarea-Co0b9PVx.js";
+import { _ as _sfc_main } from "../chunks/LpTextarea-CFK_5QB8.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeStudio.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeStudio-ChU0_Ga8.js";
+import { _ as _sfc_main } from "../chunks/LpThemeStudio-R-wohbCY.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-DmCZ21P_.js";
+import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-Bzy15MCP.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTimeField.vue.d.ts

@@ -8,6 +8,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     modelValue?: string;
     disabled?: boolean;
     invalid?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     size?: "sm" | "md" | "lg";
     /** 24 or 12-hour clock, independent of the browser locale. */
     hourCycle?: 12 | 24;
@@ -25,6 +27,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     modelValue?: string;
     disabled?: boolean;
     invalid?: boolean;
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     size?: "sm" | "md" | "lg";
     /** 24 or 12-hour clock, independent of the browser locale. */
     hourCycle?: 12 | 24;

package/dist/components/LpTimeField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTimeField-DeOcKWJq.js";
+import { _ as _sfc_main } from "../chunks/LpTimeField-B5n0m8m0.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTopologyCanvas.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTopologyCanvas-jqz1KCq2.js";
+import { _ as _sfc_main } from "../chunks/LpTopologyCanvas-BNgw9RyZ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpWorkspaceSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpWorkspaceSwitcher-BeNHCLd5.js";
+import { _ as _sfc_main } from "../chunks/LpWorkspaceSwitcher-ugv-fyig.js";
 export {
   _sfc_main as default
 };

package/dist/components/calendar.d.ts

@@ -23,6 +23,8 @@ export interface PickerFieldProps {
     clearable?: boolean;
     disabled?: boolean;
     invalid?: boolean;
+    /** A message under the picker, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string;
     size?: "sm" | "md" | "lg";
     /** Locale of the shown date and the calendar; defaults to reka's ConfigProvider, then the browser. */
     locale?: string;

package/dist/composables/useField.d.ts

@@ -80,6 +80,56 @@ export declare function fieldWrapperBinds(wrapped: boolean, field: {
     class: unknown;
     style: unknown;
 };
+/**
+ * Whether a control with these props draws its own LpFormField. A label or a
+ * hint is its own; an error alone is, except inside an outer LpFormField, which
+ * owns the label (its `for` points at the control) and the message line: a
+ * second field in it showed the message twice and took the label's control id.
+ * There the error only marks the control invalid.
+ */
+export declare function wrapsItself(own: {
+    label?: string;
+    hint?: string;
+    error?: string;
+}, outer: ComputedRef<FieldContext> | null): boolean;
+/**
+ * A control that takes `label`, `hint` and `error` the way LpInput does: given
+ * any of them it wraps itself in LpFormField (FieldWrapper, bound to
+ * `wrapper`), an error marks it invalid, and the consumer's class and style lay
+ * out that field instead of the control (`ownAttrs` says whether the control's
+ * root still takes them). Without them it is the bare control, as before. So
+ * `v-bind="form.field('x')"`, which hands every control `error`, shows the
+ * message on any of them.
+ * Inside an outer LpFormField an error alone does not wrap (wrapsItself).
+ */
+export declare function useOwnField(state: () => {
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+}): {
+    wrapped: ComputedRef<boolean>;
+    field: ComputedRef<Omit<FieldContext, "id"> & {
+        id?: string;
+    }>;
+    wrapper: ComputedRef<{
+        wrapped: boolean;
+        id: string | undefined;
+        label: string | undefined;
+        hint: string | undefined;
+        error: string | undefined;
+        required: boolean | undefined;
+        class: unknown;
+        style: unknown;
+    }>;
+    controlAttrs: ComputedRef<{
+        [x: string]: unknown;
+    }>;
+    ownAttrs: () => boolean;
+};
 /** The state of a control that takes its id from the app and draws no wrapper of its own. */
 export declare function useAttrsField(state: () => {
     invalid?: boolean;

package/dist/composables/useField.js

@@ -1,4 +1,4 @@
-import { useId, computed, provide, inject, useAttrs, onScopeDispose } from "vue";
+import { inject, useId, computed, provide, useAttrs, onScopeDispose } from "vue";
 import { isElement } from "./realm.js";
 const LP_FIELD = /* @__PURE__ */ Symbol.for("lp-field");
 function provideField(context) {
@@ -74,6 +74,33 @@ function fieldWrapperBinds(wrapped, field, props, attrs) {
   const { label, hint, error, required } = props;
   return { wrapped, id: field.id, label, hint, error, required, class: attrs.class, style: attrs.style };
 }
+function wrapsItself(own, outer) {
+  if (own.label || own.hint) return true;
+  return !!own.error && !outer?.value;
+}
+function useOwnField(state) {
+  const attrs = useAttrs();
+  const outer = useField();
+  const wrapped = computed(() => wrapsItself(state(), outer));
+  const field = useFieldControl(() => {
+    const own = state();
+    return {
+      wrapped: wrapped.value,
+      hasMessage: !!own.error || !!own.hint,
+      id: own.id ?? (typeof attrs.id === "string" ? attrs.id : void 0),
+      invalid: !!own.invalid || !!own.error,
+      required: own.required,
+      disabled: own.disabled
+    };
+  });
+  const wrapper = computed(() => fieldWrapperBinds(wrapped.value, field.value, state(), attrs));
+  const controlAttrs = computed(() => {
+    if (!wrapped.value) return attrs;
+    const { class: _class, style: _style, ...rest } = attrs;
+    return rest;
+  });
+  return { wrapped, field, wrapper, controlAttrs, ownAttrs: () => !wrapped.value };
+}
 function useAttrsField(state) {
   const attrs = useAttrs();
   const field = useFieldControl(() => ({
@@ -94,5 +121,7 @@ export {
   useAttrsField,
   useField,
   useFieldBlur,
-  useFieldControl
+  useFieldControl,
+  useOwnField,
+  wrapsItself
 };

package/dist/composables/useMergedClass.d.ts

@@ -13,7 +13,9 @@ import { type ComputedRef, type MaybeRefOrGetter } from "vue";
  * Pair it with `inheritAttrs: false` (and bind the rest of `$attrs` yourself)
  * so the raw `class` does not land on the element a second time, unmerged.
  */
-export declare function useMergedClass(own: MaybeRefOrGetter<string | undefined>): ComputedRef<string>;
+export declare function useMergedClass(own: MaybeRefOrGetter<string | undefined>, 
+/** False while something else takes the consumer's class (a field wrapper). */
+takesAttrs?: () => boolean): ComputedRef<string>;
 /**
  * `useMergedClass` plus the rest of `$attrs`, for the common `inheritAttrs:
  * false` shape: bind `class` and `attrs` and the consumer's `class` lands once,
@@ -30,7 +32,9 @@ export declare function useMergedClass(own: MaybeRefOrGetter<string | undefined>
  * Vue appends that second `class` to the merged one, and stylesheet order —
  * not the caller — decides which wins.
  */
-export declare function useMergedAttrs(own: MaybeRefOrGetter<string | undefined>): {
+export declare function useMergedAttrs(own: MaybeRefOrGetter<string | undefined>, 
+/** False while a field wrapper takes the consumer's class and style (useOwnField's `ownAttrs`). */
+takesAttrs?: () => boolean): {
     class: ComputedRef<string>;
     attrs: ComputedRef<Record<string, unknown>>;
 };

package/dist/composables/useMergedClass.js

@@ -14,17 +14,17 @@ function merge(...classes) {
   const joined = cx(...classes);
   return joined ? kitMerge(joined) : "";
 }
-function useMergedClass(own) {
+function useMergedClass(own, takesAttrs = () => true) {
   const attrs = useAttrs();
-  return computed(() => merge(toValue(own), attrs.class));
+  return computed(() => merge(toValue(own), takesAttrs() ? attrs.class : void 0));
 }
-function useMergedAttrs(own) {
+function useMergedAttrs(own, takesAttrs = () => true) {
   const attrs = useAttrs();
   return {
-    class: useMergedClass(own),
+    class: useMergedClass(own, takesAttrs),
     attrs: computed(() => {
-      const { class: _omitted, ...rest } = attrs;
-      return rest;
+      const { class: _omitted, style, ...rest } = attrs;
+      return takesAttrs() ? { ...rest, ...style === void 0 ? {} : { style } } : rest;
     })
   };
 }