vuetify 3.3.4 → 3.3.6

package/lib/components/VAppBar/VAppBar.mjs

@@ -7,7 +7,8 @@ import { makeVToolbarProps, VToolbar } from "../VToolbar/VToolbar.mjs"; // Compo
 import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { makeScrollProps, useScroll } from "../../composables/scroll.mjs";
-import { useSsrBoot } from "../../composables/ssrBoot.mjs"; // Utilities
+import { useSsrBoot } from "../../composables/ssrBoot.mjs";
+import { useToggleScope } from "../../composables/toggleScope.mjs"; // Utilities
 import { computed, ref, shallowRef, toRef, watchEffect } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVAppBarProps = propsFactory({
@@ -79,16 +80,18 @@ export const VAppBar = genericComponent()({
       const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
       return height + extensionHeight;
     });
-    watchEffect(() => {
-      if (scrollBehavior.value.hide) {
-        if (scrollBehavior.value.inverted) {
-          isActive.value = currentScroll.value > scrollThreshold.value;
+    useToggleScope(computed(() => !!props.scrollBehavior), () => {
+      watchEffect(() => {
+        if (scrollBehavior.value.hide) {
+          if (scrollBehavior.value.inverted) {
+            isActive.value = currentScroll.value > scrollThreshold.value;
+          } else {
+            isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
+          }
         } else {
-          isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
+          isActive.value = true;
         }
-      } else {
-        isActive.value = true;
-      }
+      });
     });
     const {
       ssrBootStyles

package/lib/components/VAppBar/VAppBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VAppBar.mjs","names":["makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","useProxiedModel","makeScrollProps","useScroll","useSsrBoot","computed","ref","shallowRef","toRef","watchEffect","genericComponent","propsFactory","useRender","makeVAppBarProps","scrollBehavior","String","modelValue","type","Boolean","default","location","validator","value","includes","height","Number","VAppBar","name","props","emits","setup","_ref","slots","vToolbarRef","isActive","behavior","Set","split","hide","has","inverted","collapse","elevate","fadeImage","canScroll","currentScroll","scrollThreshold","isScrollingUp","scrollRatio","isCollapsed","isFlat","flat","opacity","undefined","contentHeight","extensionHeight","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","toolbarProps","filterProps","_createVNode","_mergeProps","class","style"],"sources":["../../../src/components/VAppBar/VAppBar.tsx"],"sourcesContent":["// Styles\nimport './VAppBar.sass'\n\n// Components\nimport { makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeScrollProps, useScroll } from '@/composables/scroll'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, ref, shallowRef, toRef, watchEffect } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VToolbarSlots } from '@/components/VToolbar/VToolbar'\n\nexport const makeVAppBarProps = propsFactory({\n  scrollBehavior: String,\n  modelValue: {\n    type: Boolean,\n    default: true,\n  },\n  location: {\n    type: String as PropType<'top' | 'bottom'>,\n    default: 'top',\n    validator: (value: any) => ['top', 'bottom'].includes(value),\n  },\n\n  ...makeVToolbarProps(),\n  ...makeLayoutItemProps(),\n  ...makeScrollProps(),\n\n  height: {\n    type: [Number, String],\n    default: 64,\n  },\n}, 'VAppBar')\n\nexport const VAppBar = genericComponent<VToolbarSlots>()({\n  name: 'VAppBar',\n\n  props: makeVAppBarProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const vToolbarRef = ref<VToolbar>()\n    const isActive = useProxiedModel(props, 'modelValue')\n    const scrollBehavior = computed(() => {\n      const behavior = new Set(props.scrollBehavior?.split(' ') ?? [])\n      return {\n        hide: behavior.has('hide'),\n        // fullyHide: behavior.has('fully-hide'),\n        inverted: behavior.has('inverted'),\n        collapse: behavior.has('collapse'),\n        elevate: behavior.has('elevate'),\n        fadeImage: behavior.has('fade-image'),\n        // shrink: behavior.has('shrink'),\n      }\n    })\n    const canScroll = computed(() => {\n      const behavior = scrollBehavior.value\n      return (\n        behavior.hide ||\n        // behavior.fullyHide ||\n        behavior.inverted ||\n        behavior.collapse ||\n        behavior.elevate ||\n        behavior.fadeImage ||\n        // behavior.shrink ||\n        !isActive.value\n      )\n    })\n    const {\n      currentScroll,\n      scrollThreshold,\n      isScrollingUp,\n      scrollRatio,\n    } = useScroll(props, { canScroll })\n\n    const isCollapsed = computed(() => props.collapse || (\n      scrollBehavior.value.collapse &&\n      (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0)\n    ))\n    const isFlat = computed(() => props.flat || (\n      scrollBehavior.value.elevate &&\n      (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0)\n    ))\n    const opacity = computed(() => (\n      scrollBehavior.value.fadeImage\n        ? (scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value)\n        : undefined\n    ))\n    const height = computed(() => {\n      if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0\n\n      const height = vToolbarRef.value?.contentHeight ?? 0\n      const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0\n\n      return (height + extensionHeight)\n    })\n\n    watchEffect(() => {\n      if (scrollBehavior.value.hide) {\n        if (scrollBehavior.value.inverted) {\n          isActive.value = currentScroll.value > scrollThreshold.value\n        } else {\n          isActive.value = isScrollingUp.value || (currentScroll.value < scrollThreshold.value)\n        }\n      } else {\n        isActive.value = true\n      }\n    })\n\n    const { ssrBootStyles } = useSsrBoot()\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: toRef(props, 'location'),\n      layoutSize: height,\n      elementSize: shallowRef(undefined),\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => {\n      const [toolbarProps] = VToolbar.filterProps(props)\n\n      return (\n        <VToolbar\n          ref={ vToolbarRef }\n          class={[\n            'v-app-bar',\n            {\n              'v-app-bar--bottom': props.location === 'bottom',\n            },\n            props.class,\n          ]}\n          style={[\n            {\n              ...layoutItemStyles.value,\n              '--v-toolbar-image-opacity': opacity.value,\n              height: undefined,\n              ...ssrBootStyles.value,\n            },\n            props.style,\n          ]}\n          { ...toolbarProps }\n          collapse={ isCollapsed.value }\n          flat={ isFlat.value }\n          v-slots={ slots }\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VAppBar = InstanceType<typeof VAppBar>\n"],"mappings":"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"}
+{"version":3,"file":"VAppBar.mjs","names":["makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","useProxiedModel","makeScrollProps","useScroll","useSsrBoot","useToggleScope","computed","ref","shallowRef","toRef","watchEffect","genericComponent","propsFactory","useRender","makeVAppBarProps","scrollBehavior","String","modelValue","type","Boolean","default","location","validator","value","includes","height","Number","VAppBar","name","props","emits","setup","_ref","slots","vToolbarRef","isActive","behavior","Set","split","hide","has","inverted","collapse","elevate","fadeImage","canScroll","currentScroll","scrollThreshold","isScrollingUp","scrollRatio","isCollapsed","isFlat","flat","opacity","undefined","contentHeight","extensionHeight","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","toolbarProps","filterProps","_createVNode","_mergeProps","class","style"],"sources":["../../../src/components/VAppBar/VAppBar.tsx"],"sourcesContent":["// Styles\nimport './VAppBar.sass'\n\n// Components\nimport { makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeScrollProps, useScroll } from '@/composables/scroll'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { computed, ref, shallowRef, toRef, watchEffect } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VToolbarSlots } from '@/components/VToolbar/VToolbar'\n\nexport const makeVAppBarProps = propsFactory({\n  scrollBehavior: String,\n  modelValue: {\n    type: Boolean,\n    default: true,\n  },\n  location: {\n    type: String as PropType<'top' | 'bottom'>,\n    default: 'top',\n    validator: (value: any) => ['top', 'bottom'].includes(value),\n  },\n\n  ...makeVToolbarProps(),\n  ...makeLayoutItemProps(),\n  ...makeScrollProps(),\n\n  height: {\n    type: [Number, String],\n    default: 64,\n  },\n}, 'VAppBar')\n\nexport const VAppBar = genericComponent<VToolbarSlots>()({\n  name: 'VAppBar',\n\n  props: makeVAppBarProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const vToolbarRef = ref<VToolbar>()\n    const isActive = useProxiedModel(props, 'modelValue')\n    const scrollBehavior = computed(() => {\n      const behavior = new Set(props.scrollBehavior?.split(' ') ?? [])\n      return {\n        hide: behavior.has('hide'),\n        // fullyHide: behavior.has('fully-hide'),\n        inverted: behavior.has('inverted'),\n        collapse: behavior.has('collapse'),\n        elevate: behavior.has('elevate'),\n        fadeImage: behavior.has('fade-image'),\n        // shrink: behavior.has('shrink'),\n      }\n    })\n    const canScroll = computed(() => {\n      const behavior = scrollBehavior.value\n      return (\n        behavior.hide ||\n        // behavior.fullyHide ||\n        behavior.inverted ||\n        behavior.collapse ||\n        behavior.elevate ||\n        behavior.fadeImage ||\n        // behavior.shrink ||\n        !isActive.value\n      )\n    })\n    const {\n      currentScroll,\n      scrollThreshold,\n      isScrollingUp,\n      scrollRatio,\n    } = useScroll(props, { canScroll })\n\n    const isCollapsed = computed(() => props.collapse || (\n      scrollBehavior.value.collapse &&\n      (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0)\n    ))\n    const isFlat = computed(() => props.flat || (\n      scrollBehavior.value.elevate &&\n      (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0)\n    ))\n    const opacity = computed(() => (\n      scrollBehavior.value.fadeImage\n        ? (scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value)\n        : undefined\n    ))\n    const height = computed(() => {\n      if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0\n\n      const height = vToolbarRef.value?.contentHeight ?? 0\n      const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0\n\n      return (height + extensionHeight)\n    })\n\n    useToggleScope(computed(() => !!props.scrollBehavior), () => {\n      watchEffect(() => {\n        if (scrollBehavior.value.hide) {\n          if (scrollBehavior.value.inverted) {\n            isActive.value = currentScroll.value > scrollThreshold.value\n          } else {\n            isActive.value = isScrollingUp.value || (currentScroll.value < scrollThreshold.value)\n          }\n        } else {\n          isActive.value = true\n        }\n      })\n    })\n\n    const { ssrBootStyles } = useSsrBoot()\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: toRef(props, 'location'),\n      layoutSize: height,\n      elementSize: shallowRef(undefined),\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => {\n      const [toolbarProps] = VToolbar.filterProps(props)\n\n      return (\n        <VToolbar\n          ref={ vToolbarRef }\n          class={[\n            'v-app-bar',\n            {\n              'v-app-bar--bottom': props.location === 'bottom',\n            },\n            props.class,\n          ]}\n          style={[\n            {\n              ...layoutItemStyles.value,\n              '--v-toolbar-image-opacity': opacity.value,\n              height: undefined,\n              ...ssrBootStyles.value,\n            },\n            props.style,\n          ]}\n          { ...toolbarProps }\n          collapse={ isCollapsed.value }\n          flat={ isFlat.value }\n          v-slots={ slots }\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VAppBar = InstanceType<typeof VAppBar>\n"],"mappings":"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"}

package/lib/components/VAutocomplete/VAutocomplete.css

@@ -7,13 +7,16 @@
   align-self: flex-start;
   flex: 1 1;
 }
+.v-autocomplete .v-field input {
+  min-width: 64px;
+}
 .v-autocomplete .v-field:not(.v-field--focused) input {
   min-width: 0;
 }
 .v-autocomplete .v-field--dirty .v-autocomplete__selection {
   margin-inline-end: 2px;
 }
-.v-autocomplete .v-field--single-line .v-autocomplete__selection-text {
+.v-autocomplete .v-autocomplete__selection-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -29,15 +32,16 @@
 }
 .v-autocomplete__selection {
   display: inline-flex;
+  align-items: center;
   letter-spacing: inherit;
   line-height: inherit;
-  max-width: 100%;
+  max-width: 90%;
 }
-.v-autocomplete input, .v-autocomplete__selection {
+.v-autocomplete__selection {
   margin-top: var(--v-input-chips-margin-top);
   margin-bottom: var(--v-input-chips-margin-bottom);
 }
-.v-autocomplete input:first-child, .v-autocomplete__selection:first-child {
+.v-autocomplete__selection:first-child {
   margin-inline-start: 0;
 }
 .v-autocomplete--selecting-index .v-autocomplete__selection {
@@ -58,6 +62,10 @@
   padding-inline-start: inherit;
   padding-inline-end: inherit;
 }
+.v-autocomplete--single .v-field--variant-outlined input {
+  top: calc(50% - var(--v-input-chips-margin-top));
+  transform: translateY(-50%);
+}
 .v-autocomplete--single .v-field--active input {
   transition: none;
 }

package/lib/components/VAutocomplete/VAutocomplete.sass

@@ -18,19 +18,22 @@
         align-self: flex-start
         flex: 1 1
 
-  .v-field:not(.v-field--focused)
+  .v-field
     input
-      min-width: 0
+      min-width: $autocomplete-focused-input
+
+    &:not(.v-field--focused)
+      input
+        min-width: 0
 
   .v-field--dirty
     .v-autocomplete__selection
       margin-inline-end: 2px
 
-  .v-field--single-line
-    .v-autocomplete__selection-text
-      overflow: hidden
-      text-overflow: ellipsis
-      white-space: nowrap
+  .v-autocomplete__selection-text
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
 
 .v-autocomplete
   &__content
@@ -44,11 +47,11 @@
 
   &__selection
     display: inline-flex
+    align-items: center
     letter-spacing: inherit
     line-height: inherit
-    max-width: 100%
+    max-width: 90%
 
-  input,
   &__selection
     margin-top: var(--v-input-chips-margin-top)
     margin-bottom: var(--v-input-chips-margin-bottom)
@@ -76,6 +79,11 @@
       padding-inline-start: inherit
       padding-inline-end: inherit
 
+    .v-field--variant-outlined
+      input
+        top: calc(50% - var(--v-input-chips-margin-top))
+        transform: translateY(-50%)
+
     .v-field--active
       input
         transition: none

package/lib/components/VAutocomplete/_variables.scss

@@ -3,6 +3,7 @@
 // Defaults
 $autocomplete-content-border-radius: 4px !default;
 $autocomplete-content-elevation: 4 !default;
+$autocomplete-focused-input: 64px !default;
 $autocomplete-line-height: 1.75 !default;
 $autocomplete-transition: .2s settings.$standard-easing !default;
 $autocomplete-chips-control-min-height: 64px !default;

package/lib/components/VBreadcrumbs/VBreadcrumbs.css

@@ -39,6 +39,10 @@
   opacity: var(--v-disabled-opacity);
   pointer-events: none;
 }
+.v-breadcrumbs-item--link {
+  color: inherit;
+  text-decoration: none;
+}
 .v-breadcrumbs-item--link:hover {
   text-decoration: underline;
 }

package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs

@@ -83,7 +83,7 @@ export const VBreadcrumbs = genericComponent()({
         "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
         "style": [backgroundColorStyles.value, props.style]
       }, {
-        default: () => [hasPrepend && _createVNode("div", {
+        default: () => [hasPrepend && _createVNode("li", {
           "key": "prepend",
           "class": "v-breadcrumbs__prepend"
         }, [!slots.prepend ? _createVNode(VIcon, {

package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBreadcrumbs.mjs","names":["VBreadcrumbsDivider","VBreadcrumbsItem","VDefaultsProvider","VIcon","useBackgroundColor","makeComponentProps","provideDefaults","makeDensityProps","useDensity","IconValue","makeRoundedProps","useRounded","makeTagProps","computed","toRef","genericComponent","propsFactory","useRender","makeVBreadcrumbsProps","activeClass","String","activeColor","bgColor","color","disabled","Boolean","divider","type","default","icon","items","Array","tag","VBreadcrumbs","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","densityClasses","roundedClasses","map","item","title","raw","hasPrepend","prepend","_createVNode","value","class","style","start","_ref2","index","array","_Fragment","_mergeProps","length","undefined"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbs.tsx"],"sourcesContent":["// Styles\nimport './VBreadcrumbs.sass'\n\n// Components\nimport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\nimport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { LinkProps } from '@/composables/router'\nimport type { GenericProps } from '@/util'\n\nexport type BreadcrumbItem = string | (Partial<LinkProps> & {\n  title: string\n  disabled?: boolean\n})\n\nexport const makeVBreadcrumbsProps = propsFactory({\n  activeClass: String,\n  activeColor: String,\n  bgColor: String,\n  color: String,\n  disabled: Boolean,\n  divider: {\n    type: String,\n    default: '/',\n  },\n  icon: IconValue,\n  items: {\n    type: Array as PropType<readonly BreadcrumbItem[]>,\n    default: () => ([]),\n  },\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'ul' }),\n}, 'VBreadcrumbs')\n\nexport const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(\n  props: {\n    items?: T[]\n  },\n  slots: {\n    prepend: never\n    title: { item: T, index: number }\n    divider: { item: T, index: number }\n    default: never\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VBreadcrumbs',\n\n  props: makeVBreadcrumbsProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBreadcrumbsDivider: {\n        divider: toRef(props, 'divider'),\n      },\n      VBreadcrumbsItem: {\n        activeClass: toRef(props, 'activeClass'),\n        activeColor: toRef(props, 'activeColor'),\n        color: toRef(props, 'color'),\n        disabled: toRef(props, 'disabled'),\n      },\n    })\n\n    const items = computed(() => props.items.map(item => {\n      return typeof item === 'string' ? { item: { title: item }, raw: item } : { item, raw: item }\n    }))\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.icon)\n\n      return (\n        <props.tag\n          class={[\n            'v-breadcrumbs',\n            backgroundColorClasses.value,\n            densityClasses.value,\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            props.style,\n          ]}\n        >\n          { hasPrepend && (\n            <div key=\"prepend\" class=\"v-breadcrumbs__prepend\">\n              { !slots.prepend ? (\n                <VIcon\n                  key=\"prepend-icon\"\n                  start\n                  icon={ props.icon }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"prepend-defaults\"\n                  disabled={ !props.icon }\n                  defaults={{\n                    VIcon: {\n                      icon: props.icon,\n                      start: true,\n                    },\n                  }}\n                  v-slots:default={ slots.prepend }\n                />\n              )}\n            </div>\n          )}\n\n          { items.value.map(({ item, raw }, index, array) => (\n            <>\n              <VBreadcrumbsItem\n                key={ item.title }\n                disabled={ index >= array.length - 1 }\n                { ...item }\n                v-slots={{\n                  default: slots.title ? () => slots.title?.({ item: raw, index }) : undefined,\n                }}\n              />\n\n              { index < array.length - 1 && (\n                <VBreadcrumbsDivider\n                  v-slots={{\n                    default: slots.divider ? () => slots.divider?.({ item: raw, index }) : undefined,\n                  }}\n                />\n              )}\n            </>\n          ))}\n\n          { slots.default?.() }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbs = InstanceType<typeof VBreadcrumbs>\n"],"mappings":"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"}
+{"version":3,"file":"VBreadcrumbs.mjs","names":["VBreadcrumbsDivider","VBreadcrumbsItem","VDefaultsProvider","VIcon","useBackgroundColor","makeComponentProps","provideDefaults","makeDensityProps","useDensity","IconValue","makeRoundedProps","useRounded","makeTagProps","computed","toRef","genericComponent","propsFactory","useRender","makeVBreadcrumbsProps","activeClass","String","activeColor","bgColor","color","disabled","Boolean","divider","type","default","icon","items","Array","tag","VBreadcrumbs","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","densityClasses","roundedClasses","map","item","title","raw","hasPrepend","prepend","_createVNode","value","class","style","start","_ref2","index","array","_Fragment","_mergeProps","length","undefined"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbs.tsx"],"sourcesContent":["// Styles\nimport './VBreadcrumbs.sass'\n\n// Components\nimport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\nimport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { LinkProps } from '@/composables/router'\nimport type { GenericProps } from '@/util'\n\nexport type BreadcrumbItem = string | (Partial<LinkProps> & {\n  title: string\n  disabled?: boolean\n})\n\nexport const makeVBreadcrumbsProps = propsFactory({\n  activeClass: String,\n  activeColor: String,\n  bgColor: String,\n  color: String,\n  disabled: Boolean,\n  divider: {\n    type: String,\n    default: '/',\n  },\n  icon: IconValue,\n  items: {\n    type: Array as PropType<readonly BreadcrumbItem[]>,\n    default: () => ([]),\n  },\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'ul' }),\n}, 'VBreadcrumbs')\n\nexport const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(\n  props: {\n    items?: T[]\n  },\n  slots: {\n    prepend: never\n    title: { item: T, index: number }\n    divider: { item: T, index: number }\n    default: never\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VBreadcrumbs',\n\n  props: makeVBreadcrumbsProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBreadcrumbsDivider: {\n        divider: toRef(props, 'divider'),\n      },\n      VBreadcrumbsItem: {\n        activeClass: toRef(props, 'activeClass'),\n        activeColor: toRef(props, 'activeColor'),\n        color: toRef(props, 'color'),\n        disabled: toRef(props, 'disabled'),\n      },\n    })\n\n    const items = computed(() => props.items.map(item => {\n      return typeof item === 'string' ? { item: { title: item }, raw: item } : { item, raw: item }\n    }))\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.icon)\n\n      return (\n        <props.tag\n          class={[\n            'v-breadcrumbs',\n            backgroundColorClasses.value,\n            densityClasses.value,\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            props.style,\n          ]}\n        >\n          { hasPrepend && (\n            <li key=\"prepend\" class=\"v-breadcrumbs__prepend\">\n              { !slots.prepend ? (\n                <VIcon\n                  key=\"prepend-icon\"\n                  start\n                  icon={ props.icon }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"prepend-defaults\"\n                  disabled={ !props.icon }\n                  defaults={{\n                    VIcon: {\n                      icon: props.icon,\n                      start: true,\n                    },\n                  }}\n                  v-slots:default={ slots.prepend }\n                />\n              )}\n            </li>\n          )}\n\n          { items.value.map(({ item, raw }, index, array) => (\n            <>\n              <VBreadcrumbsItem\n                key={ item.title }\n                disabled={ index >= array.length - 1 }\n                { ...item }\n                v-slots={{\n                  default: slots.title ? () => slots.title?.({ item: raw, index }) : undefined,\n                }}\n              />\n\n              { index < array.length - 1 && (\n                <VBreadcrumbsDivider\n                  v-slots={{\n                    default: slots.divider ? () => slots.divider?.({ item: raw, index }) : undefined,\n                  }}\n                />\n              )}\n            </>\n          ))}\n\n          { slots.default?.() }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbs = InstanceType<typeof VBreadcrumbs>\n"],"mappings":"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"}

package/lib/components/VBreadcrumbs/VBreadcrumbs.sass

@@ -31,6 +31,10 @@
     opacity: $breadcrumbs-item-disabled-opacity
     pointer-events: none
 
+  &--link
+    color: inherit
+    text-decoration: none
+
   &--link:hover
     text-decoration: $breadcrumbs-item-link-text-decoration
 

package/lib/components/VBreadcrumbs/VBreadcrumbsItem.mjs

@@ -35,20 +35,21 @@ export const VBreadcrumbsItem = genericComponent()({
       textColorStyles
     } = useTextColor(color);
     useRender(() => {
-      const Tag = link.isLink.value ? 'a' : props.tag;
-      return _createVNode(Tag, {
+      return _createVNode(props.tag, {
         "class": ['v-breadcrumbs-item', {
           'v-breadcrumbs-item--active': isActive.value,
           'v-breadcrumbs-item--disabled': props.disabled,
-          'v-breadcrumbs-item--link': link.isLink.value,
           [`${props.activeClass}`]: isActive.value && props.activeClass
         }, textColorClasses.value, props.class],
         "style": [textColorStyles.value, props.style],
-        "href": link.href.value,
-        "aria-current": isActive.value ? 'page' : undefined,
-        "onClick": link.navigate
+        "aria-current": isActive.value ? 'page' : undefined
       }, {
-        default: () => [slots.default?.() ?? props.title]
+        default: () => [!link.isLink.value ? slots.default?.() ?? props.title : _createVNode("a", {
+          "class": "v-breadcrumbs-item--link",
+          "href": link.href.value,
+          "aria-current": isActive.value ? 'page' : undefined,
+          "onClick": link.navigate
+        }, [slots.default?.() ?? props.title])]
       });
     });
     return {};

package/lib/components/VBreadcrumbs/VBreadcrumbsItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBreadcrumbsItem.mjs","names":["useTextColor","makeComponentProps","makeRouterProps","useLink","makeTagProps","computed","genericComponent","propsFactory","useRender","makeVBreadcrumbsItemProps","active","Boolean","activeClass","String","activeColor","color","disabled","title","tag","VBreadcrumbsItem","name","props","setup","_ref","slots","attrs","link","isActive","value","textColorClasses","textColorStyles","Tag","isLink","_createVNode","class","style","href","undefined","navigate","default"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsItem.tsx"],"sourcesContent":["// Composables\nimport { useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVBreadcrumbsItemProps = propsFactory({\n  active: Boolean,\n  activeClass: String,\n  activeColor: String,\n  color: String,\n  disabled: Boolean,\n  title: String,\n\n  ...makeComponentProps(),\n  ...makeRouterProps(),\n  ...makeTagProps({ tag: 'li' }),\n}, 'VBreadcrumbsItem')\n\nexport const VBreadcrumbsItem = genericComponent()({\n  name: 'VBreadcrumbsItem',\n\n  props: makeVBreadcrumbsItemProps(),\n\n  setup (props, { slots, attrs }) {\n    const link = useLink(props, attrs)\n    const isActive = computed(() => props.active || link.isActive?.value)\n    const color = computed(() => isActive.value ? props.activeColor : props.color)\n\n    const { textColorClasses, textColorStyles } = useTextColor(color)\n\n    useRender(() => {\n      const Tag = link.isLink.value ? 'a' : props.tag\n\n      return (\n        <Tag\n          class={[\n            'v-breadcrumbs-item',\n            {\n              'v-breadcrumbs-item--active': isActive.value,\n              'v-breadcrumbs-item--disabled': props.disabled,\n              'v-breadcrumbs-item--link': link.isLink.value,\n              [`${props.activeClass}`]: isActive.value && props.activeClass,\n            },\n            textColorClasses.value,\n            props.class,\n          ]}\n          style={[\n            textColorStyles.value,\n            props.style,\n          ]}\n          href={ link.href.value }\n          aria-current={ isActive.value ? 'page' : undefined }\n          onClick={ link.navigate }\n        >\n          { slots.default?.() ?? props.title }\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbsItem = InstanceType<typeof VBreadcrumbsItem>\n"],"mappings":";AAAA;AAAA,SACSA,YAAY;AAAA,SACZC,kBAAkB;AAAA,SAClBC,eAAe,EAAEC,OAAO;AAAA,SACxBC,YAAY,qCAErB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,yBAAyB,GAAGF,YAAY,CAAC;EACpDG,MAAM,EAAEC,OAAO;EACfC,WAAW,EAAEC,MAAM;EACnBC,WAAW,EAAED,MAAM;EACnBE,KAAK,EAAEF,MAAM;EACbG,QAAQ,EAAEL,OAAO;EACjBM,KAAK,EAAEJ,MAAM;EAEb,GAAGZ,kBAAkB,EAAE;EACvB,GAAGC,eAAe,EAAE;EACpB,GAAGE,YAAY,CAAC;IAAEc,GAAG,EAAE;EAAK,CAAC;AAC/B,CAAC,EAAE,kBAAkB,CAAC;AAEtB,OAAO,MAAMC,gBAAgB,GAAGb,gBAAgB,EAAE,CAAC;EACjDc,IAAI,EAAE,kBAAkB;EAExBC,KAAK,EAAEZ,yBAAyB,EAAE;EAElCa,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAMG,IAAI,GAAGvB,OAAO,CAACkB,KAAK,EAAEI,KAAK,CAAC;IAClC,MAAME,QAAQ,GAAGtB,QAAQ,CAAC,MAAMgB,KAAK,CAACX,MAAM,IAAIgB,IAAI,CAACC,QAAQ,EAAEC,KAAK,CAAC;IACrE,MAAMb,KAAK,GAAGV,QAAQ,CAAC,MAAMsB,QAAQ,CAACC,KAAK,GAAGP,KAAK,CAACP,WAAW,GAAGO,KAAK,CAACN,KAAK,CAAC;IAE9E,MAAM;MAAEc,gBAAgB;MAAEC;IAAgB,CAAC,GAAG9B,YAAY,CAACe,KAAK,CAAC;IAEjEP,SAAS,CAAC,MAAM;MACd,MAAMuB,GAAG,GAAGL,IAAI,CAACM,MAAM,CAACJ,KAAK,GAAG,GAAG,GAAGP,KAAK,CAACH,GAAG;MAE/C,OAAAe,YAAA,CAAAF,GAAA;QAAA,SAEW,CACL,oBAAoB,EACpB;UACE,4BAA4B,EAAEJ,QAAQ,CAACC,KAAK;UAC5C,8BAA8B,EAAEP,KAAK,CAACL,QAAQ;UAC9C,0BAA0B,EAAEU,IAAI,CAACM,MAAM,CAACJ,KAAK;UAC7C,CAAE,GAAEP,KAAK,CAACT,WAAY,EAAC,GAAGe,QAAQ,CAACC,KAAK,IAAIP,KAAK,CAACT;QACpD,CAAC,EACDiB,gBAAgB,CAACD,KAAK,EACtBP,KAAK,CAACa,KAAK,CACZ;QAAA,SACM,CACLJ,eAAe,CAACF,KAAK,EACrBP,KAAK,CAACc,KAAK,CACZ;QAAA,QACMT,IAAI,CAACU,IAAI,CAACR,KAAK;QAAA,gBACPD,QAAQ,CAACC,KAAK,GAAG,MAAM,GAAGS,SAAS;QAAA,WACxCX,IAAI,CAACY;MAAQ;QAAAC,OAAA,EAAAA,CAAA,MAErBf,KAAK,CAACe,OAAO,IAAI,IAAIlB,KAAK,CAACJ,KAAK;MAAA;IAGxC,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VBreadcrumbsItem.mjs","names":["useTextColor","makeComponentProps","makeRouterProps","useLink","makeTagProps","computed","genericComponent","propsFactory","useRender","makeVBreadcrumbsItemProps","active","Boolean","activeClass","String","activeColor","color","disabled","title","tag","VBreadcrumbsItem","name","props","setup","_ref","slots","attrs","link","isActive","value","textColorClasses","textColorStyles","_createVNode","class","style","undefined","default","isLink","href","navigate"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsItem.tsx"],"sourcesContent":["// Composables\nimport { useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVBreadcrumbsItemProps = propsFactory({\n  active: Boolean,\n  activeClass: String,\n  activeColor: String,\n  color: String,\n  disabled: Boolean,\n  title: String,\n\n  ...makeComponentProps(),\n  ...makeRouterProps(),\n  ...makeTagProps({ tag: 'li' }),\n}, 'VBreadcrumbsItem')\n\nexport const VBreadcrumbsItem = genericComponent()({\n  name: 'VBreadcrumbsItem',\n\n  props: makeVBreadcrumbsItemProps(),\n\n  setup (props, { slots, attrs }) {\n    const link = useLink(props, attrs)\n    const isActive = computed(() => props.active || link.isActive?.value)\n    const color = computed(() => isActive.value ? props.activeColor : props.color)\n\n    const { textColorClasses, textColorStyles } = useTextColor(color)\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-breadcrumbs-item',\n            {\n              'v-breadcrumbs-item--active': isActive.value,\n              'v-breadcrumbs-item--disabled': props.disabled,\n              [`${props.activeClass}`]: isActive.value && props.activeClass,\n            },\n            textColorClasses.value,\n            props.class,\n          ]}\n          style={[\n            textColorStyles.value,\n            props.style,\n          ]}\n          aria-current={ isActive.value ? 'page' : undefined }\n        >\n          { !link.isLink.value ? slots.default?.() ?? props.title : (\n            <a\n              class=\"v-breadcrumbs-item--link\"\n              href={ link.href.value }\n              aria-current={ isActive.value ? 'page' : undefined }\n              onClick={ link.navigate }\n            >\n              { slots.default?.() ?? props.title }\n            </a>\n          )}\n        </props.tag>\n      )\n    })\n    return {}\n  },\n})\n\nexport type VBreadcrumbsItem = InstanceType<typeof VBreadcrumbsItem>\n"],"mappings":";AAAA;AAAA,SACSA,YAAY;AAAA,SACZC,kBAAkB;AAAA,SAClBC,eAAe,EAAEC,OAAO;AAAA,SACxBC,YAAY,qCAErB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,yBAAyB,GAAGF,YAAY,CAAC;EACpDG,MAAM,EAAEC,OAAO;EACfC,WAAW,EAAEC,MAAM;EACnBC,WAAW,EAAED,MAAM;EACnBE,KAAK,EAAEF,MAAM;EACbG,QAAQ,EAAEL,OAAO;EACjBM,KAAK,EAAEJ,MAAM;EAEb,GAAGZ,kBAAkB,EAAE;EACvB,GAAGC,eAAe,EAAE;EACpB,GAAGE,YAAY,CAAC;IAAEc,GAAG,EAAE;EAAK,CAAC;AAC/B,CAAC,EAAE,kBAAkB,CAAC;AAEtB,OAAO,MAAMC,gBAAgB,GAAGb,gBAAgB,EAAE,CAAC;EACjDc,IAAI,EAAE,kBAAkB;EAExBC,KAAK,EAAEZ,yBAAyB,EAAE;EAElCa,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAMG,IAAI,GAAGvB,OAAO,CAACkB,KAAK,EAAEI,KAAK,CAAC;IAClC,MAAME,QAAQ,GAAGtB,QAAQ,CAAC,MAAMgB,KAAK,CAACX,MAAM,IAAIgB,IAAI,CAACC,QAAQ,EAAEC,KAAK,CAAC;IACrE,MAAMb,KAAK,GAAGV,QAAQ,CAAC,MAAMsB,QAAQ,CAACC,KAAK,GAAGP,KAAK,CAACP,WAAW,GAAGO,KAAK,CAACN,KAAK,CAAC;IAE9E,MAAM;MAAEc,gBAAgB;MAAEC;IAAgB,CAAC,GAAG9B,YAAY,CAACe,KAAK,CAAC;IAEjEP,SAAS,CAAC,MAAM;MACd,OAAAuB,YAAA,CAAAV,KAAA,CAAAH,GAAA;QAAA,SAEW,CACL,oBAAoB,EACpB;UACE,4BAA4B,EAAES,QAAQ,CAACC,KAAK;UAC5C,8BAA8B,EAAEP,KAAK,CAACL,QAAQ;UAC9C,CAAE,GAAEK,KAAK,CAACT,WAAY,EAAC,GAAGe,QAAQ,CAACC,KAAK,IAAIP,KAAK,CAACT;QACpD,CAAC,EACDiB,gBAAgB,CAACD,KAAK,EACtBP,KAAK,CAACW,KAAK,CACZ;QAAA,SACM,CACLF,eAAe,CAACF,KAAK,EACrBP,KAAK,CAACY,KAAK,CACZ;QAAA,gBACcN,QAAQ,CAACC,KAAK,GAAG,MAAM,GAAGM;MAAS;QAAAC,OAAA,EAAAA,CAAA,MAEhD,CAACT,IAAI,CAACU,MAAM,CAACR,KAAK,GAAGJ,KAAK,CAACW,OAAO,IAAI,IAAId,KAAK,CAACJ,KAAK,GAAAc,YAAA;UAAA,SAE7C,0BAA0B;UAAA,QACzBL,IAAI,CAACW,IAAI,CAACT,KAAK;UAAA,gBACPD,QAAQ,CAACC,KAAK,GAAG,MAAM,GAAGM,SAAS;UAAA,WACxCR,IAAI,CAACY;QAAQ,IAErBd,KAAK,CAACW,OAAO,IAAI,IAAId,KAAK,CAACJ,KAAK,EAErC;MAAA;IAGP,CAAC,CAAC;IACF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VBtn/VBtn.css

@@ -385,7 +385,7 @@
 .v-card-actions .v-btn {
   padding: 0 8px;
 }
-.v-card-actions .v-btn ~ .v-btn {
+.v-card-actions .v-btn ~ .v-btn:not(.v-btn-toggle .v-btn) {
   margin-inline-start: 0.5rem;
 }
 

package/lib/components/VBtn/VBtn.sass

@@ -216,7 +216,7 @@
   .v-card-actions &
     padding: $button-card-actions-padding
 
-  ~ .v-btn
+  ~ .v-btn:not(.v-btn-toggle .v-btn)
     .v-card-actions &
       margin-inline-start: $button-card-actions-margin
 

package/lib/components/VCombobox/VCombobox.css

@@ -7,13 +7,16 @@
   align-self: flex-start;
   flex: 1 1;
 }
+.v-combobox .v-field input {
+  min-width: 64px;
+}
 .v-combobox .v-field:not(.v-field--focused) input {
   min-width: 0;
 }
 .v-combobox .v-field--dirty .v-combobox__selection {
   margin-inline-end: 2px;
 }
-.v-combobox .v-field--single-line .v-combobox__selection-text {
+.v-combobox .v-combobox__selection-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -29,15 +32,16 @@
 }
 .v-combobox__selection {
   display: inline-flex;
+  align-items: center;
   letter-spacing: inherit;
   line-height: inherit;
-  max-width: 100%;
+  max-width: 90%;
 }
-.v-combobox input, .v-combobox__selection {
+.v-combobox__selection {
   margin-top: var(--v-input-chips-margin-top);
   margin-bottom: var(--v-input-chips-margin-bottom);
 }
-.v-combobox input:first-child, .v-combobox__selection:first-child {
+.v-combobox__selection:first-child {
   margin-inline-start: 0;
 }
 .v-combobox--selecting-index .v-combobox__selection {
@@ -58,6 +62,10 @@
   padding-inline-start: inherit;
   padding-inline-end: inherit;
 }
+.v-combobox--single .v-field--variant-outlined input {
+  top: calc(50% - var(--v-input-chips-margin-top));
+  transform: translateY(-50%);
+}
 .v-combobox--single .v-field--active input {
   transition: none;
 }

package/lib/components/VCombobox/VCombobox.sass

@@ -18,19 +18,22 @@
         align-self: flex-start
         flex: 1 1
 
-  .v-field:not(.v-field--focused)
+  .v-field
     input
-      min-width: 0
+      min-width: $combobox-focused-input
+
+    &:not(.v-field--focused)
+      input
+        min-width: 0
 
   .v-field--dirty
     .v-combobox__selection
       margin-inline-end: 2px
 
-  .v-field--single-line
-    .v-combobox__selection-text
-      overflow: hidden
-      text-overflow: ellipsis
-      white-space: nowrap
+  .v-combobox__selection-text
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
 
 .v-combobox
   &__content
@@ -44,11 +47,11 @@
 
   &__selection
     display: inline-flex
+    align-items: center
     letter-spacing: inherit
     line-height: inherit
-    max-width: 100%
+    max-width: 90%
 
-  input,
   &__selection
     margin-top: var(--v-input-chips-margin-top)
     margin-bottom: var(--v-input-chips-margin-bottom)
@@ -76,6 +79,11 @@
       padding-inline-start: inherit
       padding-inline-end: inherit
 
+    .v-field--variant-outlined
+      input
+        top: calc(50% - var(--v-input-chips-margin-top))
+        transform: translateY(-50%)
+
     .v-field--active
       input
         transition: none

package/lib/components/VCombobox/_variables.scss

@@ -3,6 +3,7 @@
 // Defaults
 $combobox-content-border-radius: 4px !default;
 $combobox-content-elevation: 4 !default;
+$combobox-focused-input: 64px !default;
 $combobox-line-height: 1.75 !default;
 $combobox-transition: .2s settings.$standard-easing !default;
 $combobox-chips-control-min-height: null !default;

package/lib/components/VFooter/VFooter.mjs

@@ -13,7 +13,7 @@ import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
 import { computed, shallowRef, toRef } from 'vue';
-import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
+import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
 export const makeVFooterProps = propsFactory({
   app: Boolean,
   color: String,
@@ -76,7 +76,9 @@ export const VFooter = genericComponent()({
     useRender(() => _createVNode(props.tag, {
       "ref": resizeRef,
       "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : undefined, props.style]
+      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
+        height: convertToUnit(props.height)
+      }, props.style]
     }, slots));
     return {};
   }

package/lib/components/VFooter/VFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VFooter.mjs","names":["makeBorderProps","useBorder","useBackgroundColor","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","useResizeObserver","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","computed","shallowRef","toRef","genericComponent","propsFactory","useRender","makeVFooterProps","app","Boolean","color","String","height","type","Number","default","tag","VFooter","name","props","setup","_ref","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","autoHeight","resizeRef","entries","length","value","target","clientHeight","parseInt","layoutItemStyles","id","order","position","layoutSize","elementSize","undefined","active","absolute","_createVNode","class","style"],"sources":["../../../src/components/VFooter/VFooter.tsx"],"sourcesContent":["// Styles\nimport './VFooter.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, shallowRef, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVFooterProps = propsFactory({\n  app: Boolean,\n  color: String,\n  height: {\n    type: [Number, String],\n    default: 'auto',\n  },\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeLayoutItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'footer' }),\n  ...makeThemeProps(),\n}, 'VFooter')\n\nexport const VFooter = genericComponent()({\n  name: 'VFooter',\n\n  props: makeVFooterProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    const autoHeight = shallowRef(32)\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!entries.length) return\n      autoHeight.value = entries[0].target.clientHeight\n    })\n    const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: computed(() => 'bottom'),\n      layoutSize: height,\n      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),\n      active: computed(() => props.app),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ resizeRef }\n        class={[\n          'v-footer',\n          themeClasses.value,\n          backgroundColorClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n          props.class,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          props.app ? layoutItemStyles.value : undefined,\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VFooter = InstanceType<typeof VFooter>\n"],"mappings":"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"}
+{"version":3,"file":"VFooter.mjs","names":["makeBorderProps","useBorder","useBackgroundColor","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","useResizeObserver","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","computed","shallowRef","toRef","convertToUnit","genericComponent","propsFactory","useRender","makeVFooterProps","app","Boolean","color","String","height","type","Number","default","tag","VFooter","name","props","setup","_ref","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","autoHeight","resizeRef","entries","length","value","target","clientHeight","parseInt","layoutItemStyles","id","order","position","layoutSize","elementSize","undefined","active","absolute","_createVNode","class","style"],"sources":["../../../src/components/VFooter/VFooter.tsx"],"sourcesContent":["// Styles\nimport './VFooter.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, shallowRef, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVFooterProps = propsFactory({\n  app: Boolean,\n  color: String,\n  height: {\n    type: [Number, String],\n    default: 'auto',\n  },\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeLayoutItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'footer' }),\n  ...makeThemeProps(),\n}, 'VFooter')\n\nexport const VFooter = genericComponent()({\n  name: 'VFooter',\n\n  props: makeVFooterProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    const autoHeight = shallowRef(32)\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!entries.length) return\n      autoHeight.value = entries[0].target.clientHeight\n    })\n    const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: computed(() => 'bottom'),\n      layoutSize: height,\n      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),\n      active: computed(() => props.app),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ resizeRef }\n        class={[\n          'v-footer',\n          themeClasses.value,\n          backgroundColorClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n          props.class,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          props.app ? layoutItemStyles.value : {\n            height: convertToUnit(props.height),\n          },\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VFooter = InstanceType<typeof VFooter>\n"],"mappings":"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"}

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs

@@ -43,7 +43,7 @@ export const makeVNavigationDrawerProps = propsFactory({
     default: 56
   },
   scrim: {
-    type: [String, Boolean],
+    type: [Boolean, String],
     default: true
   },
   image: String,