@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VExpansionPanel/index.d.ts

@@ -0,0 +1,206 @@
+import * as vue from 'vue';
+import { PropType, JSXComponent } from 'vue';
+
+declare const VExpansionPanels: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: null;
+        default: undefined;
+    };
+    multiple: BooleanConstructor;
+    mandatory: PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: StringConstructor;
+    disabled: BooleanConstructor;
+    color: StringConstructor;
+    variant: {
+        type: PropType<"default" | "inset" | "accordion" | "popout">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    readonly: BooleanConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (val: unknown) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: null;
+        default: undefined;
+    };
+    multiple: BooleanConstructor;
+    mandatory: PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: StringConstructor;
+    disabled: BooleanConstructor;
+    color: StringConstructor;
+    variant: {
+        type: PropType<"default" | "inset" | "accordion" | "popout">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    readonly: BooleanConstructor;
+}>> & {
+    "onUpdate:modelValue"?: ((val: unknown) => any) | undefined;
+}, {
+    disabled: boolean;
+    multiple: boolean;
+    readonly: boolean;
+    tag: string;
+    variant: "default" | "inset" | "accordion" | "popout";
+    modelValue: any;
+}>;
+declare type VExpansionPanels = InstanceType<typeof VExpansionPanels>;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VExpansionPanel: vue.DefineComponent<{
+    color: StringConstructor;
+    expandIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    collapseIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    hideActions: BooleanConstructor;
+    ripple: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    readonly: BooleanConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    eager: BooleanConstructor;
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: StringConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    title: StringConstructor;
+    text: StringConstructor;
+    bgColor: StringConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'group:selected': (val: {
+        value: boolean;
+    }) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    expandIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    collapseIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    hideActions: BooleanConstructor;
+    ripple: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    readonly: BooleanConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    eager: BooleanConstructor;
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: StringConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    title: StringConstructor;
+    text: StringConstructor;
+    bgColor: StringConstructor;
+}>> & {
+    "onGroup:selected"?: ((val: {
+        value: boolean;
+    }) => any) | undefined;
+}, {
+    eager: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    tag: string;
+    rounded: string | number | boolean;
+    ripple: boolean | Record<string, any>;
+    collapseIcon: IconValue;
+    expandIcon: IconValue;
+    hideActions: boolean;
+}>;
+declare type VExpansionPanel = InstanceType<typeof VExpansionPanel>;
+
+declare const VExpansionPanelText: vue.DefineComponent<{
+    eager: BooleanConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    eager: BooleanConstructor;
+}>>, {
+    eager: boolean;
+}>;
+declare type VExpansionPanelText = InstanceType<typeof VExpansionPanelText>;
+
+declare const VExpansionPanelTitle: vue.DefineComponent<{
+    color: StringConstructor;
+    expandIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    collapseIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    hideActions: BooleanConstructor;
+    ripple: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    readonly: BooleanConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    expandIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    collapseIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    hideActions: BooleanConstructor;
+    ripple: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    readonly: BooleanConstructor;
+}>>, {
+    readonly: boolean;
+    ripple: boolean | Record<string, any>;
+    collapseIcon: IconValue;
+    expandIcon: IconValue;
+    hideActions: boolean;
+}>;
+declare type VExpansionPanelTitle = InstanceType<typeof VExpansionPanelTitle>;
+
+export { VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels };

package/lib/components/VExpansionPanel/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VExpansionPanel/index.ts"],"names":["VExpansionPanels","VExpansionPanel","VExpansionPanelText","VExpansionPanelTitle"],"mappings":"SAASA,gB;SACAC,e;SACAC,mB;SACAC,oB","sourcesContent":["export { VExpansionPanels } from './VExpansionPanels'\nexport { VExpansionPanel } from './VExpansionPanel'\nexport { VExpansionPanelText } from './VExpansionPanelText'\nexport { VExpansionPanelTitle } from './VExpansionPanelTitle'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VExpansionPanels","VExpansionPanel","VExpansionPanelText","VExpansionPanelTitle"],"sources":["../../../src/components/VExpansionPanel/index.ts"],"sourcesContent":["export { VExpansionPanels } from './VExpansionPanels'\nexport { VExpansionPanel } from './VExpansionPanel'\nexport { VExpansionPanelText } from './VExpansionPanelText'\nexport { VExpansionPanelTitle } from './VExpansionPanelTitle'\n"],"mappings":"SAASA,gB;SACAC,e;SACAC,mB;SACAC,oB"}

package/lib/components/VField/VField.css

@@ -2,7 +2,7 @@
 .v-field {
   display: grid;
   grid-template-areas: "prepend-inner field clear append-inner";
-  grid-template-columns: min-content auto min-content min-content;
+  grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
   font-size: 16px;
   letter-spacing: 0.009375em;
   max-width: 100%;
@@ -13,7 +13,7 @@
   position: relative;
   --v-field-padding-start: 16px;
   --v-field-padding-end: 16px;
-  --v-field-padding-top: 8px;
+  --v-field-padding-top: 10px;
   --v-field-padding-bottom: 6px;
 }
 .v-field--disabled {
@@ -25,82 +25,104 @@
 /* region MODIFIERS */
 .v-field--prepended {
   padding-inline-start: 12px;
-  --v-field-padding-start: 6px;
-  --v-field-padding-end: 6px;
 }
 .v-field--appended {
   padding-inline-end: 12px;
 }
-.v-field--variant-contained {
+.v-field--variant-solo {
   background: rgb(var(--v-theme-surface));
   border-color: transparent;
-  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
-.v-field--variant-contained, .v-field--variant-filled {
+.v-field--variant-filled {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-.v-field--variant-plain, .v-field--variant-underlined {
-  border-radius: 0;
-  padding: 0;
-  --v-field-padding-start: 0;
-  --v-field-padding-end: 0;
-  --v-field-padding-top: 0;
-}
-.v-field--variant-plain.v-field--single-line, .v-field--variant-underlined.v-field--single-line {
-  --v-field-padding-top: 0;
-}
-.v-field--variant-outlined, .v-field--single-line {
-  --v-field-padding-top: 0;
-}
-.v-input--density-default .v-field--variant-contained, .v-input--density-default .v-field--variant-filled {
+.v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-filled {
   --v-input-control-height: 56px;
   --v-field-padding-bottom: 6px;
 }
 
-.v-input--density-comfortable .v-field--variant-contained, .v-input--density-comfortable .v-field--variant-filled {
+.v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-filled {
   --v-input-control-height: 48px;
   --v-field-padding-bottom: 2px;
 }
 
-.v-input--density-compact .v-field--variant-contained, .v-input--density-compact .v-field--variant-filled {
+.v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-filled {
   --v-input-control-height: 40px;
   --v-field-padding-bottom: -2px;
 }
 
-.v-input--density-default .v-field--variant-underlined {
+.v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
+  --v-field-padding-top: 0px;
+}
+.v-input--density-default .v-field--variant-outlined, .v-input--density-default .v-field--single-line, .v-input--density-default .v-field--no-label {
+  --v-field-padding-bottom: 16px;
+}
+
+.v-input--density-comfortable .v-field--variant-outlined, .v-input--density-comfortable .v-field--single-line, .v-input--density-comfortable .v-field--no-label {
+  --v-field-padding-bottom: 12px;
+}
+
+.v-input--density-compact .v-field--variant-outlined, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--no-label {
+  --v-field-padding-bottom: 8px;
+}
+
+.v-field--variant-plain, .v-field--variant-underlined {
+  border-radius: 0;
+  padding: 0;
+}
+.v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
+  --v-field-padding-start: 0px;
+  --v-field-padding-end: 0px;
+  --v-field-padding-top: 6px;
+  --v-field-padding-bottom: 2px;
+}
+.v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
+  --v-input-control-height: 48px;
+}
+
+.v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
   --v-input-control-height: 40px;
-  --v-field-padding-bottom: 6px;
 }
 
-.v-input--density-comfortable .v-field--variant-underlined {
+.v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
   --v-input-control-height: 32px;
-  --v-field-padding-bottom: 4px;
 }
 
-.v-input--density-compact .v-field--variant-underlined {
-  --v-input-control-height: 24px;
-  --v-field-padding-bottom: 2px;
+.v-field.v-field--prepended {
+  --v-field-padding-start: 6px;
+}
+.v-field.v-field--appended {
+  --v-field-padding-end: 6px;
 }
 
 /* endregion */
 /* region ELEMENTS */
 .v-field__input {
-  align-self: stretch;
   color: inherit;
   display: flex;
   flex-wrap: wrap;
   letter-spacing: 0.009375em;
   opacity: var(--v-high-emphasis-opacity);
+  min-height: var(--v-input-control-height, 56px);
   padding-inline-start: var(--v-field-padding-start);
   padding-inline-end: var(--v-field-padding-end);
-  padding-top: var(--v-field-padding-top, 8px);
+  padding-top: calc(var(--v-field-padding-top, 10px) + var(--v-input-padding-top, 0));
+  padding-bottom: var(--v-field-padding-bottom, 6px);
   width: 100%;
 }
 .v-field__input input {
   letter-spacing: inherit;
 }
+.v-field__input input::placeholder,
+input.v-field__input::placeholder,
+textarea.v-field__input::placeholder {
+  color: currentColor;
+  opacity: var(--v-disabled-opacity);
+}
+
 .v-field__input:focus, .v-field__input:active {
   outline: none;
 }
@@ -110,10 +132,10 @@
 
 .v-field__field {
   flex: 1 0;
-  min-height: var(--v-input-control-height, 56px);
   grid-area: field;
-  padding-bottom: var(--v-field-padding-bottom, 6px);
   position: relative;
+  align-items: flex-start;
+  display: flex;
 }
 
 /* endregion */
@@ -132,13 +154,12 @@
   padding-inline-start: var(--v-field-padding-after);
 }
 
-.v-field__field,
 .v-field__prepend-inner,
 .v-field__append-inner,
 .v-field__clearable {
   align-items: flex-start;
   display: flex;
-  padding-top: var(--v-input-padding-top, 8px);
+  padding-top: var(--v-input-padding-top, 10px);
 }
 
 .v-field--focused .v-field__prepend-inner,
@@ -190,6 +211,7 @@
   max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
   pointer-events: none;
   position: absolute;
+  top: var(--v-input-padding-top, 10px);
   transform-origin: left center;
   transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   transition-property: opacity, transform;
@@ -212,20 +234,20 @@
 .v-field.v-field--active .v-label.v-field-label--floating {
   visibility: visible;
 }
-.v-input--density-default .v-field--variant-contained .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating {
+.v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating {
   top: 7px;
 }
 
-.v-input--density-comfortable .v-field--variant-contained .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating {
+.v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating {
   top: 5px;
 }
 
-.v-input--density-compact .v-field--variant-contained .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating {
+.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating {
   top: 3px;
 }
 
 .v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
-  transform: translateY(-6px);
+  transform: translateY(-16px);
   margin: 0;
 }
 .v-field--variant-outlined .v-label.v-field-label--floating {

package/lib/components/VField/VField.mjs

@@ -3,24 +3,25 @@ import { mergeProps as _mergeProps, Fragment as _Fragment, withDirectives as _wi
 import "./VField.css"; // Components
 
 import { VExpandXTransition } from "../transitions/index.mjs";
-import { VIcon } from "../VIcon/index.mjs";
+import { useInputIcon } from "../VInput/InputIcon.mjs";
 import { VFieldLabel } from "./VFieldLabel.mjs"; // Composables
 
+import { IconValue } from "../../composables/icons.mjs";
 import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.mjs";
+import { makeFocusProps, useFocus } from "../../composables/focus.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { useBackgroundColor, useTextColor } from "../../composables/color.mjs";
-import { makeFocusProps, useFocus } from "../../composables/focus.mjs"; // Utilities
+import { useBackgroundColor, useTextColor } from "../../composables/color.mjs"; // Utilities
 
 import { computed, ref, toRef, watch } from 'vue';
-import { convertToUnit, genericComponent, getUid, nullifyTransforms, pick, propsFactory, standardEasing, useRender } from "../../util/index.mjs"; // Types
+import { animate, convertToUnit, EventProp, genericComponent, getUid, isOn, nullifyTransforms, pick, propsFactory, standardEasing, useRender } from "../../util/index.mjs"; // Types
 
-const allowedVariants = ['underlined', 'outlined', 'filled', 'contained', 'plain'];
+const allowedVariants = ['underlined', 'outlined', 'filled', 'solo', 'plain'];
 export const makeVFieldProps = propsFactory({
-  appendInnerIcon: String,
+  appendInnerIcon: IconValue,
   bgColor: String,
   clearable: Boolean,
   clearIcon: {
-    type: String,
+    type: IconValue,
     default: '$clear'
   },
   active: Boolean,
@@ -30,7 +31,7 @@ export const makeVFieldProps = propsFactory({
   error: Boolean,
   label: String,
   persistentClear: Boolean,
-  prependInnerIcon: String,
+  prependInnerIcon: IconValue,
   reverse: Boolean,
   singleLine: Boolean,
   variant: {
@@ -38,6 +39,9 @@ export const makeVFieldProps = propsFactory({
     default: 'filled',
     validator: v => allowedVariants.includes(v)
   },
+  'onClick:clear': EventProp,
+  'onClick:appendInner': EventProp,
+  'onClick:prependInner': EventProp,
   ...makeThemeProps(),
   ...makeLoaderProps()
 }, 'v-field');
@@ -50,9 +54,6 @@ export const VField = genericComponent()({
     ...makeVFieldProps()
   },
   emits: {
-    'click:clear': e => true,
-    'click:prepend-inner': e => true,
-    'click:append-inner': e => true,
     'click:control': e => true,
     'update:focused': focused => true,
     'update:modelValue': val => true
@@ -76,6 +77,9 @@ export const VField = genericComponent()({
       focus,
       blur
     } = useFocus(props);
+    const {
+      InputIcon
+    } = useInputIcon(props);
     const isActive = computed(() => props.dirty || props.active);
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
     const uid = getUid();
@@ -105,16 +109,18 @@ export const VField = genericComponent()({
         const width = Math.abs(targetWidth - rect.width) > 1 ? {
           maxWidth: convertToUnit(targetWidth)
         } : undefined;
-        const duration = parseFloat(getComputedStyle(el).transitionDuration) * 1000;
-        const scale = parseFloat(getComputedStyle(targetEl).getPropertyValue('--v-field-label-scale'));
+        const style = getComputedStyle(el);
+        const targetStyle = getComputedStyle(targetEl);
+        const duration = parseFloat(style.transitionDuration) * 1000 || 150;
+        const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale'));
+        const color = targetStyle.getPropertyValue('color');
         el.style.visibility = 'visible';
         targetEl.style.visibility = 'hidden';
-        el.animate([{
-          transform: 'translate(0)'
-        }, {
+        animate(el, {
           transform: `translate(${x}px, ${y}px) scale(${scale})`,
+          color,
           ...width
-        }], {
+        }, {
           duration,
           easing: standardEasing,
           direction: val ? 'normal' : 'reverse'
@@ -146,9 +152,9 @@ export const VField = genericComponent()({
       var _slots$prependInner, _slots$default, _slots$appendInner;
 
       const isOutlined = props.variant === 'outlined';
-      const hasPrepend = slots.prependInner || props.prependInnerIcon;
+      const hasPrepend = slots['prepend-inner'] || props.prependInnerIcon;
       const hasClear = !!(props.clearable || slots.clear);
-      const hasAppend = !!(slots.appendInner || props.appendInnerIcon || hasClear);
+      const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear);
       const label = slots.label ? slots.label({
         label: props.label,
         props: {
@@ -167,6 +173,7 @@ export const VField = genericComponent()({
           'v-field--prepended': hasPrepend,
           'v-field--reverse': props.reverse,
           'v-field--single-line': props.singleLine,
+          'v-field--no-label': !label,
           [`v-field--variant-${props.variant}`]: true
         }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value],
         "style": [backgroundColorStyles.value, textColorStyles.value],
@@ -180,16 +187,20 @@ export const VField = genericComponent()({
       }, {
         default: slots.loader
       }), hasPrepend && _createVNode("div", {
+        "key": "prepend",
         "class": "v-field__prepend-inner"
-      }, [props.prependInnerIcon && _createVNode(VIcon, {
-        "onClick": e => emit('click:prepend-inner', e),
-        "icon": props.prependInnerIcon
-      }, null), slots == null ? void 0 : (_slots$prependInner = slots.prependInner) == null ? void 0 : _slots$prependInner.call(slots, slotProps.value)]), _createVNode("div", {
-        "class": "v-field__field"
-      }, [['contained', 'filled'].includes(props.variant) && hasLabel.value && _createVNode(VFieldLabel, {
+      }, [props.prependInnerIcon && _createVNode(InputIcon, {
+        "key": "prepend-icon",
+        "name": "prependInner"
+      }, null), (_slots$prependInner = slots['prepend-inner']) == null ? void 0 : _slots$prependInner.call(slots, slotProps.value)]), _createVNode("div", {
+        "class": "v-field__field",
+        "data-no-activator": ""
+      }, [['solo', 'filled'].includes(props.variant) && hasLabel.value && _createVNode(VFieldLabel, {
+        "key": "floating-label",
         "ref": floatingLabelRef,
         "class": [textColorClasses.value],
-        "floating": true
+        "floating": true,
+        "for": id.value
       }, {
         default: () => [label]
       }), _createVNode(VFieldLabel, {
@@ -204,18 +215,20 @@ export const VField = genericComponent()({
         },
         focus,
         blur
-      })]), hasClear && _createVNode(VExpandXTransition, null, {
+      })]), hasClear && _createVNode(VExpandXTransition, {
+        "key": "clear"
+      }, {
         default: () => [_withDirectives(_createVNode("div", {
           "class": "v-field__clearable"
-        }, [slots.clear ? slots.clear() : _createVNode(VIcon, {
-          "onClick": e => emit('click:clear', e),
-          "icon": props.clearIcon
+        }, [slots.clear ? slots.clear() : _createVNode(InputIcon, {
+          "name": "clear"
         }, null)]), [[_vShow, props.dirty]])]
       }), hasAppend && _createVNode("div", {
+        "key": "append",
         "class": "v-field__append-inner"
-      }, [slots == null ? void 0 : (_slots$appendInner = slots.appendInner) == null ? void 0 : _slots$appendInner.call(slots, slotProps.value), props.appendInnerIcon && _createVNode(VIcon, {
-        "onClick": e => emit('click:append-inner', e),
-        "icon": props.appendInnerIcon
+      }, [(_slots$appendInner = slots['append-inner']) == null ? void 0 : _slots$appendInner.call(slots, slotProps.value), props.appendInnerIcon && _createVNode(InputIcon, {
+        "key": "append-icon",
+        "name": "appendInner"
       }, null)]), _createVNode("div", {
         "class": ['v-field__outline', textColorClasses.value]
       }, [isOutlined && _createVNode(_Fragment, null, [_createVNode("div", {
@@ -224,14 +237,16 @@ export const VField = genericComponent()({
         "class": "v-field__outline__notch"
       }, [_createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
-        "floating": true
+        "floating": true,
+        "for": id.value
       }, {
         default: () => [label]
       })]), _createVNode("div", {
         "class": "v-field__outline__end"
       }, null)]), ['plain', 'underlined'].includes(props.variant) && hasLabel.value && _createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
-        "floating": true
+        "floating": true,
+        "for": id.value
       }, {
         default: () => [label]
       })])]);
@@ -244,6 +259,7 @@ export const VField = genericComponent()({
 });
 // TODO: this is kinda slow, might be better to implicitly inherit props instead
 export function filterFieldProps(attrs) {
-  return pick(attrs, Object.keys(VField.props));
+  const keys = Object.keys(VField.props).filter(k => !isOn(k));
+  return pick(attrs, keys);
 }
 //# sourceMappingURL=VField.mjs.map