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

package/lib/components/VBanner/VBanner.sass

@@ -1,16 +1,20 @@
-@forward './variables'
+@use 'sass:math'
 @use '../../styles/tools'
 @use './variables' as *
 
 .v-banner
-  $root: &
-
-  display: flex
-  flex-wrap: wrap
+  display: grid
+  flex: 1 1
   font-size: $banner-font-size
-  padding-bottom: $banner-padding-bottom
-  padding-inline-end: $banner-padding-end
-  padding-inline-start: $banner-padding-start
+  grid-template-areas: "prepend content actions"
+  grid-template-columns: max-content auto max-content
+  grid-template-rows: max-content max-content
+  line-height: $banner-line-height
+  overflow: hidden
+  padding-inline-start: $banner-padding-inline-start
+  padding-inline-end: $banner-padding-inline-end
+  padding-top: $banner-padding * 2
+  padding-bottom: $banner-padding * 2
   position: relative
   width: $banner-width
 
@@ -20,82 +24,83 @@
   @include tools.rounded($banner-border-radius)
   @include tools.theme($banner-theme...)
 
-  &--border
-    border-width: $banner-border-thin-width
-
-  &--mobile
-    align-items: center
-    padding-inline-end: $banner-mobile-padding-end
-    padding-inline-start: $banner-mobile-padding-start
-
   &--rounded
     @include tools.rounded($banner-rounded-border-radius)
 
+  &--stacked
+    &:not(.v-banner--one-line)
+      grid-template-areas: "prepend content" ". actions"
+
+    .v-banner-text
+      padding-inline-end: $banner-stacked-padding-inline-end
+
   @at-root
     @include tools.density('v-banner', $banner-density) using ($modifier)
-      padding-top: $banner-padding-top + $modifier
+      .v-banner-actions
+        margin-bottom: -($banner-padding + $modifier)
+
+      &.v-banner--one-line
+        padding-top: $banner-padding + $modifier
+        padding-bottom: $banner-padding + $modifier
+
+        .v-banner-actions
+          margin-bottom: 0
+
+      @if ($modifier == 0px)
+        &.v-banner--one-line
+          padding-top: $banner-padding + $modifier + 2
 
       &.v-banner--two-line
-        padding-top: $banner-two-line-padding-top + $modifier
+        padding-top: $banner-padding * 2 + $modifier
+        padding-bottom: $banner-padding * 2 + $modifier
+
+      &.v-banner--three-line
+        padding-top: $banner-padding * 3 + $modifier
+        padding-bottom: $banner-padding * 2 + $modifier
 
+      &:not(.v-banner--one-line),
+      &.v-banner--two-line,
       &.v-banner--three-line
-        padding-top: $banner-three-line-padding-top + $modifier
+        .v-banner-actions
+          margin-top: $banner-action-margin + $modifier
 
   &--sticky
     top: $banner-sticky-top
 
+.v-banner__content
+  grid-area: content
+
+.v-banner__prepend
+  align-self: flex-start
+  grid-area: prepend
+  margin-inline-end: $banner-prepend-margin-end
+
 .v-banner-actions
-  align-items: flex-end
+  align-self: flex-end
   display: flex
   flex: 0 1
+  grid-area: actions
   justify-content: flex-end
 
-  .v-banner--mobile &
-    flex: 1 0
-
-.v-banner__content
-  display: flex
-  flex: 1 1
-  min-width: 0
-  padding-inline-end: $banner-content-padding-end
-
-  .v-banner--mobile &
-    flex: 1 1 auto
-    padding-inline-end: $banner-mobile-content-padding-end
-
-  .v-banner--two-line &
-    margin-bottom: $banner-two-line-content-margin-bottom
-
+  .v-banner--two-line &,
   .v-banner--three-line &
-    margin-bottom: $banner-three-line-content-margin-bottom
-
-.v-banner__avatar
-  align-self: flex-start
-  border-radius: $banner-avatar-border-radius
-  margin-inline-end: $banner-avatar-margin-end
-  margin-inline-start: $banner-avatar-margin-start
-  position: relative
-
-  .v-banner--mobile &
-    margin-inline-end: $banner-mobile-avatar-margin-end
-
-  .v-banner--one-line &
-    align-self: center
+    margin-top: $banner-actions-line-margin-top
 
 .v-banner-text
   -webkit-box-orient: vertical
-  align-self: center
   display: -webkit-box
-  line-height: $banner-text-line-height
+  padding-inline-end: $banner-text-padding-end
   overflow: hidden
 
   .v-banner--one-line &
     -webkit-line-clamp: 1
 
-  .v-banner--two-line &,
-  .v-banner--three-line &
-    align-self: flex-start
+  .v-banner--two-line &
     -webkit-line-clamp: 2
 
   .v-banner--three-line &
     -webkit-line-clamp: 3
+
+  .v-banner--two-line &,
+  .v-banner--three-line &
+    align-self: flex-start

package/lib/components/VBanner/VBannerActions.mjs

@@ -1,3 +1,35 @@
-import { createSimpleFunctional } from "../../util/index.mjs";
-export const VBannerActions = createSimpleFunctional('v-banner-actions');
+import { createVNode as _createVNode } from "vue";
+// Composables
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utility
+
+import { defineComponent, useRender } from "../../util/index.mjs";
+export const VBannerActions = defineComponent({
+  name: 'VBannerActions',
+  props: {
+    color: String,
+    density: String
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    provideDefaults({
+      VBtn: {
+        color: props.color,
+        density: props.density,
+        variant: 'text'
+      }
+    });
+    useRender(() => {
+      var _slots$default;
+
+      return _createVNode("div", {
+        "class": "v-banner-actions"
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
+    });
+    return {};
+  }
+
+});
 //# sourceMappingURL=VBannerActions.mjs.map

package/lib/components/VBanner/VBannerActions.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/VBannerActions.ts"],"names":["createSimpleFunctional","VBannerActions"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,cAAc,GAAGD,sBAAsB,CAAC,kBAAD,CAA7C","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VBannerActions = createSimpleFunctional('v-banner-actions')\n"],"file":"VBannerActions.mjs"}
+{"version":3,"file":"VBannerActions.mjs","names":["provideDefaults","defineComponent","useRender","VBannerActions","name","props","color","String","density","setup","slots","VBtn","variant","default"],"sources":["../../../src/components/VBanner/VBannerActions.tsx"],"sourcesContent":["// Composables\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { defineComponent, useRender } from '@/util'\n\nexport const VBannerActions = defineComponent({\n  name: 'VBannerActions',\n\n  props: {\n    color: String,\n    density: String,\n  },\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: props.color,\n        density: props.density,\n        variant: 'text',\n      },\n    })\n\n    useRender(() => (\n      <div class=\"v-banner-actions\">\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,e,0CAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBADsC;EAG5CC,KAAK,EAAE;IACLC,KAAK,EAAEC,MADF;IAELC,OAAO,EAAED;EAFJ,CAHqC;;EAQ5CE,KAAK,CAAEJ,KAAF,QAAoB;IAAA,IAAX;MAAEK;IAAF,CAAW;IACvBV,eAAe,CAAC;MACdW,IAAI,EAAE;QACJL,KAAK,EAAED,KAAK,CAACC,KADT;QAEJE,OAAO,EAAEH,KAAK,CAACG,OAFX;QAGJI,OAAO,EAAE;MAHL;IADQ,CAAD,CAAf;IAQAV,SAAS,CAAC;MAAA;;MAAA;QAAA,SACG;MADH,sBAEJQ,KAAK,CAACG,OAFF,qBAEJ,oBAAAH,KAAK,CAFD;IAAA,CAAD,CAAT;IAMA,OAAO,EAAP;EACD;;AAxB2C,CAAD,CAAtC"}

package/lib/components/VBanner/VBannerText.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/VBannerText.ts"],"names":["createSimpleFunctional","VBannerText"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,WAAW,GAAGD,sBAAsB,CAAC,eAAD,CAA1C","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VBannerText = createSimpleFunctional('v-banner-text')\n"],"file":"VBannerText.mjs"}
+{"version":3,"file":"VBannerText.mjs","names":["createSimpleFunctional","VBannerText"],"sources":["../../../src/components/VBanner/VBannerText.ts"],"sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VBannerText = createSimpleFunctional('v-banner-text')\n"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,WAAW,GAAGD,sBAAsB,CAAC,eAAD,CAA1C"}

package/lib/components/VBanner/_variables.scss

@@ -3,32 +3,28 @@
 @use '../../styles/tools';
 
 // Defaults
-$banner-avatar-border-radius: map.get(settings.$rounded, 'circle') !default;
-$banner-avatar-margin-end: 24px !default;
-$banner-avatar-margin-start: 0 !default;
+$banner-action-margin: 20px !default;
+$banner-actions-line-margin-top: 20px !default;
 $banner-background: rgb(var(--v-theme-surface)) !default;
-$banner-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $banner-border-color: settings.$border-color-root !default;
 $banner-border-radius: map.get(settings.$rounded, 0) !default;
 $banner-border-style: settings.$border-style-root !default;
 $banner-border-thin-width: thin !default;
 $banner-border-width: 0 0 thin 0 !default;
-$banner-content-padding-end: 90px !default;
+$banner-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $banner-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
 $banner-elevation: 0 !default;
 $banner-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
-$banner-padding-bottom: 8px !default;
-$banner-padding-end: 8px !default;
-$banner-padding-start: 24px !default;
-$banner-padding-top: 10px !default;
+$banner-line-height: tools.map-deep-get(settings.$typography, 'subtitle-2', 'line-height') !default;
+$banner-padding-inline-start: 16px !default;
+$banner-padding-inline-end: 8px !default;
+$banner-padding: 8px !default;
 $banner-positions: absolute fixed sticky !default;
+$banner-prepend-margin-end: 24px !default;
 $banner-rounded-border-radius: settings.$border-radius-root !default;
+$banner-stacked-padding-inline-end: 36px !default;
 $banner-sticky-top: 0 !default;
-$banner-text-line-height: tools.map-deep-get(settings.$typography, 'subtitle-2', 'line-height') !default;
-$banner-two-line-content-margin-bottom: 4px !default;
-$banner-two-line-padding-top: 24px !default;
-$banner-three-line-content-margin-bottom: 8px !default;
-$banner-three-line-padding-top: 24px !default;
+$banner-text-padding-end: 90px !default;
 $banner-width: 100% !default;
 
 // Mobile

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

@@ -0,0 +1,122 @@
+import * as vue from 'vue';
+import { JSXComponent, PropType } from 'vue';
+
+declare const block: readonly ["top", "bottom"];
+declare const inline: readonly ["start", "end", "left", "right"];
+declare type Tblock = typeof block[number];
+declare type Tinline = typeof inline[number];
+declare type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VBanner: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
+    location: PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    avatar: StringConstructor;
+    color: StringConstructor;
+    icon: PropType<IconValue>;
+    lines: PropType<"one" | "two" | "three">;
+    stacked: BooleanConstructor;
+    sticky: BooleanConstructor;
+    text: StringConstructor;
+}, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
+    location: PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    avatar: StringConstructor;
+    color: StringConstructor;
+    icon: PropType<IconValue>;
+    lines: PropType<"one" | "two" | "three">;
+    stacked: BooleanConstructor;
+    sticky: BooleanConstructor;
+    text: StringConstructor;
+}>>, {
+    tag: string;
+    sticky: boolean;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "comfortable" | null;
+    stacked: boolean;
+}>;
+declare type VBanner = InstanceType<typeof VBanner>;
+
+declare const VBannerActions: vue.DefineComponent<{
+    color: StringConstructor;
+    density: StringConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    density: StringConstructor;
+}>>, {}>;
+
+declare const VBannerText: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tag: string;
+}>;
+
+export { VBanner, VBannerActions, VBannerText };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/index.ts"],"names":["VBanner","VBannerActions","VBannerText"],"mappings":"SAASA,O;SACAC,c;SACAC,W","sourcesContent":["export { VBanner } from './VBanner'\nexport { VBannerActions } from './VBannerActions'\nexport { VBannerText } from './VBannerText'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VBanner","VBannerActions","VBannerText"],"sources":["../../../src/components/VBanner/index.ts"],"sourcesContent":["export { VBanner } from './VBanner'\nexport { VBannerActions } from './VBannerActions'\nexport { VBannerText } from './VBannerText'\n"],"mappings":"SAASA,O;SACAC,c;SACAC,W"}

package/lib/components/VBottomNavigation/VBottomNavigation.css

@@ -15,7 +15,7 @@
   box-shadow: none;
 }
 .v-bottom-navigation--active {
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 
 .v-bottom-navigation__content {
@@ -43,19 +43,12 @@
 .v-bottom-navigation .v-bottom-navigation__content > .v-btn .v-btn__icon {
   font-size: 1.5rem;
 }
-.v-bottom-navigation .v-bottom-navigation__content > .v-btn:not(.v-btn--selected):not(.v-btn--disabled) {
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-}
 .v-bottom-navigation--grow .v-bottom-navigation__content > .v-btn {
-  width: 100%;
-}
-.v-bottom-navigation--shift .v-bottom-navigation__content > .v-btn .v-btn__icon {
-  top: 0.5rem;
-  transform: translateY(-0.5rem);
+  flex-grow: 1;
 }
-.v-bottom-navigation--shift .v-bottom-navigation__content > .v-btn:not(.v-btn--selected) .v-btn__content {
-  color: rgba(var(--v-theme-on-surface), 0);
+.v-bottom-navigation--shift .v-bottom-navigation__content .v-btn:not(.v-btn--selected) .v-btn__content > span {
+  opacity: 0;
 }
-.v-bottom-navigation--shift .v-bottom-navigation__content > .v-btn:not(.v-btn--selected) .v-btn__icon {
-  transform: translateY(0);
+.v-bottom-navigation--shift .v-bottom-navigation__content .v-btn:not(.v-btn--selected) .v-btn__content {
+  transform: translateY(0.5rem);
 }

package/lib/components/VBottomNavigation/VBottomNavigation.mjs

@@ -15,7 +15,7 @@ import { useBackgroundColor } from "../../composables/color.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
 import { computed, toRef } from 'vue';
-import { convertToUnit, defineComponent } from "../../util/index.mjs"; // Types
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs"; // Types
 
 import { VBtnToggleSymbol } from "../VBtnToggle/VBtnToggle.mjs";
 export const VBottomNavigation = defineComponent({
@@ -81,7 +81,7 @@ export const VBottomNavigation = defineComponent({
       layoutItemStyles
     } = useLayoutItem({
       id: props.name,
-      priority: computed(() => parseInt(props.priority, 10)),
+      order: computed(() => parseInt(props.order, 10)),
       position: computed(() => 'bottom'),
       layoutSize: computed(() => isActive.value ? height.value : 0),
       elementSize: height,
@@ -99,7 +99,7 @@ export const VBottomNavigation = defineComponent({
     }, {
       scoped: true
     });
-    return () => {
+    useRender(() => {
       return _createVNode(props.tag, {
         "class": ['v-bottom-navigation', {
           'v-bottom-navigation--active': isActive.value,
@@ -115,7 +115,8 @@ export const VBottomNavigation = defineComponent({
           "class": "v-bottom-navigation__content"
         }, [slots.default()])]
       });
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VBottomNavigation/VBottomNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBottomNavigation/VBottomNavigation.tsx"],"names":["makeBorderProps","useBorder","makeDensityProps","useDensity","makeElevationProps","useElevation","makeGroupProps","useGroup","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","provideDefaults","useBackgroundColor","useProxiedModel","computed","toRef","convertToUnit","defineComponent","VBtnToggleSymbol","VBottomNavigation","name","props","bgColor","String","color","grow","Boolean","mode","type","validator","v","includes","height","Number","default","tag","modelValue","selectedClass","emits","value","setup","slots","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","densityClasses","elevationClasses","roundedClasses","density","isActive","layoutItemStyles","id","priority","parseInt","position","layoutSize","elementSize","active","absolute","VBtn","stacked","variant","scoped","transform"],"mappings":"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","sourcesContent":["// Styles\nimport './VBottomNavigation.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\n\n// Types\nimport { VBtnToggleSymbol } from '../VBtnToggle/VBtnToggle'\n\nexport const VBottomNavigation = defineComponent({\n  name: 'VBottomNavigation',\n\n  props: {\n    bgColor: String,\n    color: String,\n    grow: Boolean,\n    mode: {\n      type: String,\n      validator: (v: any) => !v || ['horizontal', 'shift'].includes(v),\n    },\n    height: {\n      type: [Number, String],\n      default: 56,\n    },\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeLayoutItemProps({ name: 'bottom-navigation' }),\n    ...makeTagProps({ tag: 'header' }),\n    ...makeGroupProps({\n      modelValue: true,\n      selectedClass: 'v-btn--selected',\n    }),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme()\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { densityClasses } = useDensity(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const height = computed(() => (\n      Number(props.height) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ))\n    const isActive = useProxiedModel(props, 'modelValue', props.modelValue)\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      priority: computed(() => parseInt(props.priority, 10)),\n      position: computed(() => 'bottom'),\n      layoutSize: computed(() => isActive.value ? height.value : 0),\n      elementSize: height,\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useGroup(props, VBtnToggleSymbol)\n\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        stacked: computed(() => props.mode !== 'horizontal'),\n        variant: 'text',\n      },\n    }, { scoped: true })\n\n    return () => {\n      return (\n        <props.tag\n          class={[\n            'v-bottom-navigation',\n            {\n              'v-bottom-navigation--active': isActive.value,\n              'v-bottom-navigation--grow': props.grow,\n              'v-bottom-navigation--shift': props.mode === 'shift',\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            layoutItemStyles.value,\n            {\n              height: convertToUnit(height.value),\n              transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`,\n            },\n          ]}\n        >\n          { slots.default && (\n            <div class=\"v-bottom-navigation__content\">\n              { slots.default() }\n            </div>\n          ) }\n        </props.tag>\n      )\n    }\n  },\n})\n\nexport type VBottomNavigation = InstanceType<typeof VBottomNavigation>\n"],"file":"VBottomNavigation.mjs"}
+{"version":3,"file":"VBottomNavigation.mjs","names":["makeBorderProps","useBorder","makeDensityProps","useDensity","makeElevationProps","useElevation","makeGroupProps","useGroup","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","provideDefaults","useBackgroundColor","useProxiedModel","computed","toRef","convertToUnit","defineComponent","useRender","VBtnToggleSymbol","VBottomNavigation","name","props","bgColor","String","color","grow","Boolean","mode","type","validator","v","includes","height","Number","default","tag","modelValue","selectedClass","emits","value","setup","slots","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","densityClasses","elevationClasses","roundedClasses","density","isActive","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","VBtn","stacked","variant","scoped","transform"],"sources":["../../../src/components/VBottomNavigation/VBottomNavigation.tsx"],"sourcesContent":["// Styles\nimport './VBottomNavigation.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\n// Types\nimport { VBtnToggleSymbol } from '../VBtnToggle/VBtnToggle'\n\nexport const VBottomNavigation = defineComponent({\n  name: 'VBottomNavigation',\n\n  props: {\n    bgColor: String,\n    color: String,\n    grow: Boolean,\n    mode: {\n      type: String,\n      validator: (v: any) => !v || ['horizontal', 'shift'].includes(v),\n    },\n    height: {\n      type: [Number, String],\n      default: 56,\n    },\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeLayoutItemProps({ name: 'bottom-navigation' }),\n    ...makeTagProps({ tag: 'header' }),\n    ...makeGroupProps({\n      modelValue: true,\n      selectedClass: 'v-btn--selected',\n    }),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme()\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { densityClasses } = useDensity(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const height = computed(() => (\n      Number(props.height) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ))\n    const isActive = useProxiedModel(props, 'modelValue', props.modelValue)\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: computed(() => 'bottom'),\n      layoutSize: computed(() => isActive.value ? height.value : 0),\n      elementSize: height,\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useGroup(props, VBtnToggleSymbol)\n\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        stacked: computed(() => props.mode !== 'horizontal'),\n        variant: 'text',\n      },\n    }, { scoped: true })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-bottom-navigation',\n            {\n              'v-bottom-navigation--active': isActive.value,\n              'v-bottom-navigation--grow': props.grow,\n              'v-bottom-navigation--shift': props.mode === 'shift',\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            layoutItemStyles.value,\n            {\n              height: convertToUnit(height.value),\n              transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`,\n            },\n          ]}\n        >\n          { slots.default && (\n            <div class=\"v-bottom-navigation__content\">\n              { slots.default() }\n            </div>\n          ) }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBottomNavigation = InstanceType<typeof VBottomNavigation>\n"],"mappings":"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"}

package/lib/components/VBottomNavigation/VBottomNavigation.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 
@@ -42,22 +41,15 @@
       .v-btn__icon
         font-size: $bottom-navigation-icon-font-size
 
-      &:not(.v-btn--selected):not(.v-btn--disabled)
-        color: $bottom-navigation-button-color
-
   .v-bottom-navigation--grow &
     > .v-btn
-      width: 100%
+      flex-grow: 1
 
   .v-bottom-navigation--shift &
-    > .v-btn
-      .v-btn__icon
-        top: $bottom-navigation-shift-icon-top
-        transform: $bottom-navigation-shift-icon-transform
-
+    .v-btn
       &:not(.v-btn--selected)
-        .v-btn__content
-          color: $bottom-navigation-shift-content-color
+        .v-btn__content > span
+          opacity: 0
 
-        .v-btn__icon
-          transform: translateY(0)
+        .v-btn__content
+          transform: $bottom-navigation-shift-icon-transform

package/lib/components/VBottomNavigation/_variables.scss

@@ -4,7 +4,7 @@
 @use "../../styles/settings/variables";
 @use "../../styles/tools/functions";
 
-// Defaults
+// VBottomNavigation
 $bottom-navigation-background: rgb(var(--v-theme-surface)) !default;
 $bottom-navigation-border-color: settings.$border-color-root !default;
 $bottom-navigation-border-radius: 0 !default;
@@ -12,24 +12,23 @@ $bottom-navigation-border-radius: map.get(settings.$rounded, '0') !default;
 $bottom-navigation-border-style: settings.$border-style-root !default;
 $bottom-navigation-border-thin-width: thin !default;
 $bottom-navigation-border-width: 0 !default;
+$bottom-navigation-button-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
+$bottom-navigation-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $bottom-navigation-content-font-size: functions.map-deep-get(variables.$typography, 'caption', 'size') !default;
 $bottom-navigation-elevation: 4 !default;
 $bottom-navigation-flat-elevation: 0 !default;
 $bottom-navigation-height: 100% !default;
-$bottom-navigation-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $bottom-navigation-icon-font-size: 1.5rem !default;
 $bottom-navigation-max-width: 168px !default;
 $bottom-navigation-min-width: 80px !default;
 $bottom-navigation-opacity: var(--v-medium-emphasis-opacity) !default;
-$bottom-navigation-button-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
-$bottom-navigation-text-transform: none !default;
-$bottom-navigation-transition: transform, color .2s, .1s settings.$standard-easing !default;
-
-// Shift
 $bottom-navigation-shift-content-color: rgba(var(--v-theme-on-surface), 0) !default;
 $bottom-navigation-shift-icon-top: math.div($bottom-navigation-icon-font-size, 3) !default;
-$bottom-navigation-shift-icon-transform: translateY(-($bottom-navigation-shift-icon-top)) !default;
+$bottom-navigation-shift-icon-transform: translateY($bottom-navigation-shift-icon-top) !default;
+$bottom-navigation-text-transform: none !default;
+$bottom-navigation-transition: transform, color .2s, .1s settings.$standard-easing !default;
 
+// Lists
 $bottom-navigation-border: (
   $bottom-navigation-border-color,
   $bottom-navigation-border-style,