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

package/lib/components/VBadge/VBadge.css

@@ -6,13 +6,12 @@
 .v-badge__badge {
   align-items: center;
   border-radius: 10px;
-  display: flex;
   font-size: 0.75rem;
   font-weight: 500;
   height: 1.25rem;
   justify-content: center;
   min-width: 20px;
-  padding: 4px;
+  padding: 4px 6px;
   pointer-events: auto;
   position: absolute;
   text-align: center;
@@ -51,6 +50,8 @@
 }
 .v-badge__badge .v-icon {
   color: inherit;
+  font-size: 0.75rem;
+  margin: 0 -2px;
 }
 .v-badge__badge img,
 .v-badge__badge .v-img {
@@ -58,10 +59,6 @@
   width: 100%;
 }
 
-.v-badge__content {
-  padding: 0 2px;
-}
-
 .v-badge__wrapper {
   display: flex;
   position: relative;

package/lib/components/VBadge/VBadge.mjs

@@ -4,16 +4,17 @@ import "./VBadge.css"; // Components
 
 import { VIcon } from "../VIcon/index.mjs"; // Composables
 
+import { IconValue } from "../../composables/icons.mjs";
+import { makeLocationProps, useLocation } from "../../composables/location.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
 import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
 import { useBackgroundColor, useTextColor } from "../../composables/color.mjs";
-import { useLocale } from "../../composables/locale.mjs";
-import { useRtl } from "../../composables/rtl.mjs"; // Utilities
+import { useLocale } from "../../composables/locale.mjs"; // Utilities
 
-import { computed, toRef } from 'vue';
-import { convertToUnit, defineComponent, pick } from "../../util/index.mjs";
+import { defineComponent, pick, useRender } from "../../util/index.mjs";
+import { toRef } from 'vue';
 export const VBadge = defineComponent({
   name: 'VBadge',
   inheritAttrs: false,
@@ -23,20 +24,12 @@ export const VBadge = defineComponent({
     content: [Number, String],
     dot: Boolean,
     floating: Boolean,
-    icon: String,
+    icon: IconValue,
     inline: Boolean,
     label: {
       type: String,
       default: '$vuetify.badge'
     },
-    location: {
-      type: String,
-      default: 'top-end',
-      validator: value => {
-        const [vertical, horizontal] = (value != null ? value : '').split('-');
-        return ['top', 'bottom'].includes(vertical) && ['start', 'end'].includes(horizontal);
-      }
-    },
     max: [Number, String],
     modelValue: {
       type: Boolean,
@@ -45,6 +38,9 @@ export const VBadge = defineComponent({
     offsetX: [Number, String],
     offsetY: [Number, String],
     textColor: String,
+    ...makeLocationProps({
+      location: 'top end'
+    }),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps(),
@@ -58,9 +54,6 @@ export const VBadge = defineComponent({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'color'));
-    const {
-      isRtl
-    } = useRtl();
     const {
       roundedClasses
     } = useRounded(props);
@@ -74,34 +67,13 @@ export const VBadge = defineComponent({
     const {
       themeClasses
     } = useTheme();
-    const position = computed(() => {
-      return props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;
-    });
-
-    function calculatePosition(offset) {
-      return `calc(100% - ${convertToUnit(position.value + parseInt(offset != null ? offset : 0, 10))})`;
-    }
-
-    const locationStyles = computed(() => {
-      var _props$location;
-
-      const [vertical, horizontal] = ((_props$location = props.location) != null ? _props$location : '').split('-');
-      const styles = {
-        bottom: 'auto',
-        left: 'auto',
-        right: 'auto',
-        top: 'auto'
-      };
-
-      if (!props.inline) {
-        const isRight = isRtl.value && horizontal === 'end' || !isRtl.value && horizontal === 'start';
-        styles[isRight ? 'right' : 'left'] = calculatePosition(props.offsetX);
-        styles[vertical === 'top' ? 'bottom' : 'top'] = calculatePosition(props.offsetY);
-      }
-
-      return styles;
+    const {
+      locationStyles
+    } = useLocation(props, true, side => {
+      const base = props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;
+      return base + (['top', 'bottom'].includes(side) ? +(props.offsetY ?? 0) : ['left', 'right'].includes(side) ? +(props.offsetX ?? 0) : 0);
     });
-    return () => {
+    useRender(() => {
       var _ctx$slots$default, _ctx$slots, _ctx$slots$badge, _ctx$slots2;
 
       const value = Number(props.content);
@@ -121,20 +93,19 @@ export const VBadge = defineComponent({
           "transition": props.transition
         }, {
           default: () => [_withDirectives(_createVNode("span", _mergeProps({
-            "class": ['v-badge__badge', backgroundColorClasses.value, roundedClasses.value, textColorClasses.value, themeClasses.value],
-            "style": [backgroundColorStyles.value, locationStyles.value, textColorStyles.value],
+            "class": ['v-badge__badge', themeClasses.value, backgroundColorClasses.value, roundedClasses.value, textColorClasses.value],
+            "style": [backgroundColorStyles.value, textColorStyles.value, props.inline ? {} : locationStyles.value],
             "aria-atomic": "true",
             "aria-label": t(props.label, value),
             "aria-live": "polite",
             "role": "status"
           }, badgeAttrs), [props.dot ? undefined : ctx.slots.badge ? (_ctx$slots$badge = (_ctx$slots2 = ctx.slots).badge) == null ? void 0 : _ctx$slots$badge.call(_ctx$slots2) : props.icon ? _createVNode(VIcon, {
             "icon": props.icon
-          }, null) : _createVNode("span", {
-            "class": "v-badge__content"
-          }, [content])]), [[_vShow, props.modelValue]])]
+          }, null) : content]), [[_vShow, props.modelValue]])]
         })])]
       });
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VBadge/VBadge.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBadge/VBadge.tsx"],"names":["VIcon","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","makeTransitionProps","MaybeTransition","useBackgroundColor","useTextColor","useLocale","useRtl","computed","toRef","convertToUnit","defineComponent","pick","VBadge","name","inheritAttrs","props","bordered","Boolean","color","String","content","Number","dot","floating","icon","inline","label","type","default","location","validator","value","vertical","horizontal","split","includes","max","modelValue","offsetX","offsetY","textColor","transition","setup","ctx","backgroundColorClasses","backgroundColorStyles","isRtl","roundedClasses","t","textColorClasses","textColorStyles","themeClasses","position","calculatePosition","offset","parseInt","locationStyles","styles","bottom","left","right","top","isRight","isNaN","badgeAttrs","attrs","slots","undefined","badge"],"mappings":"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","sourcesContent":["// Styles\nimport './VBadge.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\nimport { useLocale } from '@/composables/locale'\nimport { useRtl } from '@/composables/rtl'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent, pick } from '@/util'\n\nexport const VBadge = defineComponent({\n  name: 'VBadge',\n\n  inheritAttrs: false,\n\n  props: {\n    bordered: Boolean,\n    color: String,\n    content: [Number, String],\n    dot: Boolean,\n    floating: Boolean,\n    icon: String,\n    inline: Boolean,\n    label: {\n      type: String,\n      default: '$vuetify.badge',\n    },\n    location: {\n      type: String,\n      default: 'top-end',\n      validator: (value: string) => {\n        const [vertical, horizontal] = (value ?? '').split('-')\n\n        return (\n          ['top', 'bottom'].includes(vertical) &&\n          ['start', 'end'].includes(horizontal)\n        )\n      },\n    },\n    max: [Number, String],\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n    offsetX: [Number, String],\n    offsetY: [Number, String],\n    textColor: String,\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeTransitionProps({ transition: 'scale-rotate-transition' }),\n  },\n\n  setup (props, ctx) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { isRtl } = useRtl()\n    const { roundedClasses } = useRounded(props)\n    const { t } = useLocale()\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'textColor'))\n    const { themeClasses } = useTheme()\n\n    const position = computed(() => {\n      return props.floating\n        ? (props.dot ? 2 : 4)\n        : (props.dot ? 8 : 12)\n    })\n\n    function calculatePosition (offset?: number | string) {\n      return `calc(100% - ${convertToUnit(position.value + parseInt(offset ?? 0, 10))})`\n    }\n\n    const locationStyles = computed(() => {\n      const [vertical, horizontal] = (props.location ?? '').split('-')\n\n      const styles = {\n        bottom: 'auto',\n        left: 'auto',\n        right: 'auto',\n        top: 'auto',\n      }\n\n      if (!props.inline) {\n        const isRight = (isRtl.value && horizontal === 'end') || (!isRtl.value && horizontal === 'start')\n\n        styles[isRight ? 'right' : 'left'] = calculatePosition(props.offsetX)\n        styles[vertical === 'top' ? 'bottom' : 'top'] = calculatePosition(props.offsetY)\n      }\n\n      return styles\n    })\n\n    return () => {\n      const value = Number(props.content)\n      const content = (!props.max || isNaN(value)) ? props.content\n        : value <= props.max ? value\n        : `${props.max}+`\n\n      const [badgeAttrs, attrs] = pick(ctx.attrs as Record<string, any>, [\n        'aria-atomic',\n        'aria-label',\n        'aria-live',\n        'role',\n        'title',\n      ])\n\n      return (\n        <props.tag\n          class={[\n            'v-badge',\n            {\n              'v-badge--bordered': props.bordered,\n              'v-badge--dot': props.dot,\n              'v-badge--floating': props.floating,\n              'v-badge--inline': props.inline,\n            },\n          ]}\n          { ...attrs }\n        >\n          <div class=\"v-badge__wrapper\">\n            { ctx.slots.default?.() }\n\n            <MaybeTransition transition={ props.transition }>\n              <span\n                v-show={ props.modelValue }\n                class={[\n                  'v-badge__badge',\n                  backgroundColorClasses.value,\n                  roundedClasses.value,\n                  textColorClasses.value,\n                  themeClasses.value,\n                ]}\n                style={[\n                  backgroundColorStyles.value,\n                  locationStyles.value,\n                  textColorStyles.value,\n                ]}\n                aria-atomic=\"true\"\n                aria-label={ t(props.label, value) }\n                aria-live=\"polite\"\n                role=\"status\"\n                { ...badgeAttrs }\n              >\n                {\n                  props.dot ? undefined\n                  : ctx.slots.badge ? ctx.slots.badge?.()\n                  : props.icon ? <VIcon icon={props.icon} />\n                  : <span class=\"v-badge__content\">{content}</span>\n                }\n              </span>\n            </MaybeTransition>\n          </div>\n        </props.tag>\n      )\n    }\n  },\n})\n\nexport type VBadge = InstanceType<typeof VBadge>\n"],"file":"VBadge.mjs"}
+{"version":3,"file":"VBadge.mjs","names":["VIcon","IconValue","makeLocationProps","useLocation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","makeTransitionProps","MaybeTransition","useBackgroundColor","useTextColor","useLocale","defineComponent","pick","useRender","toRef","VBadge","name","inheritAttrs","props","bordered","Boolean","color","String","content","Number","dot","floating","icon","inline","label","type","default","max","modelValue","offsetX","offsetY","textColor","location","transition","setup","ctx","backgroundColorClasses","backgroundColorStyles","roundedClasses","t","textColorClasses","textColorStyles","themeClasses","locationStyles","side","base","includes","value","isNaN","badgeAttrs","attrs","slots","undefined","badge"],"sources":["../../../src/components/VBadge/VBadge.tsx"],"sourcesContent":["// Styles\nimport './VBadge.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { defineComponent, pick, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VBadge = defineComponent({\n  name: 'VBadge',\n\n  inheritAttrs: false,\n\n  props: {\n    bordered: Boolean,\n    color: String,\n    content: [Number, String],\n    dot: Boolean,\n    floating: Boolean,\n    icon: IconValue,\n    inline: Boolean,\n    label: {\n      type: String,\n      default: '$vuetify.badge',\n    },\n    max: [Number, String],\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n    offsetX: [Number, String],\n    offsetY: [Number, String],\n    textColor: String,\n\n    ...makeLocationProps({ location: 'top end' } as const),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeTransitionProps({ transition: 'scale-rotate-transition' }),\n  },\n\n  setup (props, ctx) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { roundedClasses } = useRounded(props)\n    const { t } = useLocale()\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'textColor'))\n    const { themeClasses } = useTheme()\n\n    const { locationStyles } = useLocation(props, true, side => {\n      const base = props.floating\n        ? (props.dot ? 2 : 4)\n        : (props.dot ? 8 : 12)\n\n      return base + (\n        ['top', 'bottom'].includes(side) ? +(props.offsetY ?? 0)\n        : ['left', 'right'].includes(side) ? +(props.offsetX ?? 0)\n        : 0\n      )\n    })\n\n    useRender(() => {\n      const value = Number(props.content)\n      const content = (!props.max || isNaN(value)) ? props.content\n        : value <= props.max ? value\n        : `${props.max}+`\n\n      const [badgeAttrs, attrs] = pick(ctx.attrs as Record<string, any>, [\n        'aria-atomic',\n        'aria-label',\n        'aria-live',\n        'role',\n        'title',\n      ])\n\n      return (\n        <props.tag\n          class={[\n            'v-badge',\n            {\n              'v-badge--bordered': props.bordered,\n              'v-badge--dot': props.dot,\n              'v-badge--floating': props.floating,\n              'v-badge--inline': props.inline,\n            },\n          ]}\n          { ...attrs }\n        >\n          <div class=\"v-badge__wrapper\">\n            { ctx.slots.default?.() }\n\n            <MaybeTransition transition={ props.transition }>\n              <span\n                v-show={ props.modelValue }\n                class={[\n                  'v-badge__badge',\n                  themeClasses.value,\n                  backgroundColorClasses.value,\n                  roundedClasses.value,\n                  textColorClasses.value,\n                ]}\n                style={[\n                  backgroundColorStyles.value,\n                  textColorStyles.value,\n                  props.inline ? {} : locationStyles.value,\n                ]}\n                aria-atomic=\"true\"\n                aria-label={ t(props.label, value) }\n                aria-live=\"polite\"\n                role=\"status\"\n                { ...badgeAttrs }\n              >\n                {\n                  props.dot ? undefined\n                  : ctx.slots.badge ? ctx.slots.badge?.()\n                  : props.icon ? <VIcon icon={ props.icon } />\n                  : content\n                }\n              </span>\n            </MaybeTransition>\n          </div>\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBadge = InstanceType<typeof VBadge>\n"],"mappings":"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"}

package/lib/components/VBadge/VBadge.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 
@@ -9,7 +8,6 @@
 .v-badge__badge
   align-items: center
   border-radius: $badge-border-radius
-  display: flex
   font-size: $badge-font-size
   font-weight: $badge-font-weight
   height: $badge-height
@@ -55,15 +53,14 @@
 
   .v-icon
     color: inherit
+    font-size: $badge-font-size
+    margin: $badge-icon-margin
 
   img,
   .v-img
     height: 100%
     width: 100%
 
-.v-badge__content
-  padding: $badge-content-padding
-
 .v-badge__wrapper
   display: flex
   position: relative

package/lib/components/VBadge/_variables.scss

@@ -1,7 +1,6 @@
 @use '../../styles/settings';
 
-// Defaults
-
+// VBadge
 $badge-background: rgb(var(--v-theme-surface-variant)) !default;
 $badge-color: rgba(var(--v-theme-on-surface-variant), var(--v-high-emphasis-opacity)) !default;
 $badge-border-color: rgb(var(--v-theme-background)) !default;
@@ -9,7 +8,6 @@ $badge-border-radius: 10px !default;
 $badge-border-style: solid !default;
 $badge-border-transform: scale(1.20) !default;
 $badge-border-width: 2px !default;
-$badge-content-padding: 0 2px !default;
 $badge-dot-border-radius: 4.5px;
 $badge-dot-border-width: 1.5px !default;
 $badge-dot-height: 9px !default;
@@ -23,10 +21,11 @@ $badge-icon-padding: 4px 6px !default;
 $badge-inline-vertical-align: middle !default;
 $badge-line-height: 1 !default;
 $badge-min-width: 20px !default;
-$badge-padding: 4px !default;
+$badge-padding: 4px 6px !default;
 $badge-transition: .225s settings.$standard-easing !default;
 $badge-wrapper-margin: 0 4px !default;
 
+// Lists
 $badge-theme: (
   $badge-background,
   $badge-color

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBadge/index.ts"],"names":["VBadge"],"mappings":"SAASA,M","sourcesContent":["export { VBadge } from './VBadge'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VBadge"],"sources":["../../../src/components/VBadge/index.ts"],"sourcesContent":["export { VBadge } from './VBadge'\n"],"mappings":"SAASA,M"}

package/lib/components/VBanner/VBanner.css

@@ -1,16 +1,22 @@
 .v-banner {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  flex: 1 1;
   font-size: 0.875rem;
-  padding-bottom: 8px;
+  grid-template-areas: "prepend content actions";
+  grid-template-columns: max-content auto max-content;
+  grid-template-rows: max-content max-content;
+  line-height: 1.375rem;
+  overflow: hidden;
+  padding-inline-start: 16px;
   padding-inline-end: 8px;
-  padding-inline-start: 24px;
+  padding-top: 16px;
+  padding-bottom: 16px;
   position: relative;
   width: 100%;
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0 0 thin 0;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
   border-radius: 0;
   background: rgb(var(--v-theme-surface));
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
@@ -28,106 +34,124 @@
 .v-banner--sticky {
   position: sticky;
 }
-.v-banner--border {
-  border-width: thin;
-}
-.v-banner--mobile {
-  align-items: center;
-  padding-inline-end: 8px;
-  padding-inline-start: 16px;
-}
 .v-banner--rounded {
   border-radius: 4px;
 }
-.v-banner--density-default {
+.v-banner--stacked:not(.v-banner--one-line) {
+  grid-template-areas: "prepend content" ". actions";
+}
+.v-banner--stacked .v-banner-text {
+  padding-inline-end: 36px;
+}
+.v-banner--density-default .v-banner-actions {
+  margin-bottom: -8px;
+}
+.v-banner--density-default.v-banner--one-line {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.v-banner--density-default.v-banner--one-line .v-banner-actions {
+  margin-bottom: 0;
+}
+.v-banner--density-default.v-banner--one-line {
   padding-top: 10px;
 }
 .v-banner--density-default.v-banner--two-line {
-  padding-top: 24px;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
 .v-banner--density-default.v-banner--three-line {
   padding-top: 24px;
+  padding-bottom: 16px;
+}
+.v-banner--density-default:not(.v-banner--one-line) .v-banner-actions, .v-banner--density-default.v-banner--two-line .v-banner-actions, .v-banner--density-default.v-banner--three-line .v-banner-actions {
+  margin-top: 20px;
 }
 
-.v-banner--density-comfortable {
-  padding-top: 6px;
+.v-banner--density-comfortable .v-banner-actions {
+  margin-bottom: -4px;
+}
+.v-banner--density-comfortable.v-banner--one-line {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.v-banner--density-comfortable.v-banner--one-line .v-banner-actions {
+  margin-bottom: 0;
 }
 .v-banner--density-comfortable.v-banner--two-line {
-  padding-top: 20px;
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 .v-banner--density-comfortable.v-banner--three-line {
   padding-top: 20px;
+  padding-bottom: 12px;
+}
+.v-banner--density-comfortable:not(.v-banner--one-line) .v-banner-actions, .v-banner--density-comfortable.v-banner--two-line .v-banner-actions, .v-banner--density-comfortable.v-banner--three-line .v-banner-actions {
+  margin-top: 16px;
 }
 
-.v-banner--density-compact {
-  padding-top: 2px;
+.v-banner--density-compact .v-banner-actions {
+  margin-bottom: 0px;
+}
+.v-banner--density-compact.v-banner--one-line {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.v-banner--density-compact.v-banner--one-line .v-banner-actions {
+  margin-bottom: 0;
 }
 .v-banner--density-compact.v-banner--two-line {
-  padding-top: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 .v-banner--density-compact.v-banner--three-line {
   padding-top: 16px;
+  padding-bottom: 8px;
+}
+.v-banner--density-compact:not(.v-banner--one-line) .v-banner-actions, .v-banner--density-compact.v-banner--two-line .v-banner-actions, .v-banner--density-compact.v-banner--three-line .v-banner-actions {
+  margin-top: 12px;
 }
 
 .v-banner--sticky {
   top: 0;
 }
 
-.v-banner-actions {
-  align-items: flex-end;
-  display: flex;
-  flex: 0 1;
-  justify-content: flex-end;
-}
-.v-banner--mobile .v-banner-actions {
-  flex: 1 0;
-}
-
 .v-banner__content {
-  display: flex;
-  flex: 1 1;
-  min-width: 0;
-  padding-inline-end: 90px;
-}
-.v-banner--mobile .v-banner__content {
-  flex: 1 1 auto;
-  padding-inline-end: 8px;
-}
-.v-banner--two-line .v-banner__content {
-  margin-bottom: 4px;
-}
-.v-banner--three-line .v-banner__content {
-  margin-bottom: 8px;
+  grid-area: content;
 }
 
-.v-banner__avatar {
+.v-banner__prepend {
   align-self: flex-start;
-  border-radius: 50%;
+  grid-area: prepend;
   margin-inline-end: 24px;
-  margin-inline-start: 0;
-  position: relative;
 }
-.v-banner--mobile .v-banner__avatar {
-  margin-inline-end: 16px;
+
+.v-banner-actions {
+  align-self: flex-end;
+  display: flex;
+  flex: 0 1;
+  grid-area: actions;
+  justify-content: flex-end;
 }
-.v-banner--one-line .v-banner__avatar {
-  align-self: center;
+.v-banner--two-line .v-banner-actions, .v-banner--three-line .v-banner-actions {
+  margin-top: 20px;
 }
 
 .v-banner-text {
   -webkit-box-orient: vertical;
-  align-self: center;
   display: -webkit-box;
-  line-height: 1.375rem;
+  padding-inline-end: 90px;
   overflow: hidden;
 }
 .v-banner--one-line .v-banner-text {
   -webkit-line-clamp: 1;
 }
-.v-banner--two-line .v-banner-text, .v-banner--three-line .v-banner-text {
-  align-self: flex-start;
+.v-banner--two-line .v-banner-text {
   -webkit-line-clamp: 2;
 }
 .v-banner--three-line .v-banner-text {
   -webkit-line-clamp: 3;
+}
+.v-banner--two-line .v-banner-text, .v-banner--three-line .v-banner-text {
+  align-self: flex-start;
 }

package/lib/components/VBanner/VBanner.mjs

@@ -1,4 +1,4 @@
-import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VBanner.css"; // Components
 
@@ -11,27 +11,33 @@ import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeLocationProps, useLocation } from "../../composables/location.mjs";
 import { makePositionProps, usePosition } from "../../composables/position.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { useDisplay } from "../../composables/display.mjs"; // Utilities
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useDisplay } from "../../composables/display.mjs";
+import { IconValue } from "../../composables/icons.mjs"; // Utilities
 
-import { defineComponent, useRender } from "../../util/index.mjs"; // Types
+import { defineComponent, useRender } from "../../util/index.mjs";
+import { toRef } from 'vue'; // Types
 
 export const VBanner = defineComponent({
   name: 'VBanner',
   props: {
     avatar: String,
     color: String,
-    icon: String,
+    icon: IconValue,
     lines: String,
+    stacked: Boolean,
     sticky: Boolean,
     text: String,
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
+    ...makeLocationProps(),
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
@@ -42,75 +48,77 @@ export const VBanner = defineComponent({
     let {
       slots
     } = _ref;
-    const {
-      themeClasses
-    } = provideTheme(props);
     const {
       borderClasses
     } = useBorder(props);
     const {
       densityClasses
     } = useDensity(props);
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       mobile
     } = useDisplay();
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const {
       elevationClasses
     } = useElevation(props);
     const {
-      positionClasses,
-      positionStyles
+      locationStyles
+    } = useLocation(props);
+    const {
+      positionClasses
     } = usePosition(props);
     const {
       roundedClasses
     } = useRounded(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const color = toRef(props, 'color');
+    const density = toRef(props, 'density');
+    provideDefaults({
+      VBannerActions: {
+        color,
+        density
+      }
+    });
     useRender(() => {
       var _slots$default;
 
-      const hasAvatar = !!(props.avatar || props.icon || slots.avatar || slots.icon);
       const hasText = !!(props.text || slots.text);
-      const hasContent = hasAvatar || hasText || slots.default;
+      const hasPrepend = !!(slots.prepend || props.avatar || props.icon);
       return _createVNode(props.tag, {
         "class": ['v-banner', {
-          'v-banner--mobile': mobile.value,
+          'v-banner--stacked': props.stacked || mobile.value,
           'v-banner--sticky': props.sticky,
-          [`v-banner--${props.lines}-line`]: true
+          [`v-banner--${props.lines}-line`]: !!props.lines
         }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value],
-        "style": [dimensionStyles.value, positionStyles.value],
+        "style": [dimensionStyles.value, locationStyles.value],
         "role": "banner"
       }, {
-        default: () => [hasContent && _createVNode("div", {
-          "class": "v-banner__content"
-        }, [hasAvatar && _createVNode(VDefaultsProvider, {
+        default: () => [hasPrepend && _createVNode(VDefaultsProvider, {
+          "key": "prepend",
           "defaults": {
             VAvatar: {
-              color: props.color,
-              density: props.density,
+              color: color.value,
+              density: density.value,
               icon: props.icon,
               image: props.avatar
             }
           }
         }, {
           default: () => [_createVNode("div", {
-            "class": "v-banner__avatar"
-          }, [slots.avatar ? slots.avatar() : _createVNode(VAvatar, null, null)])]
-        }), hasText && _createVNode(VBannerText, null, {
-          default: () => [slots.text ? slots.text() : props.text]
-        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.actions && _createVNode(VDefaultsProvider, {
-          "defaults": {
-            VBtn: {
-              color: props.color,
-              density: props.density,
-              variant: 'text'
-            }
-          }
+            "class": "v-banner__prepend"
+          }, [slots.prepend ? slots.prepend() : (props.avatar || props.icon) && _createVNode(VAvatar, null, null)])]
+        }), _createVNode("div", {
+          "class": "v-banner__content"
+        }, [hasText && _createVNode(VBannerText, {
+          "key": "text"
         }, {
-          default: () => [_createVNode(VBannerActions, null, {
-            default: slots.actions
-          })]
+          default: () => [slots.text ? slots.text() : props.text]
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.actions && _createVNode(VBannerActions, null, {
+          default: () => [slots.actions()]
         })]
       });
     });