@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.3

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/VBanner.tsx"],"names":["VAvatar","VBannerActions","VBannerAvatar","VBannerContent","VBannerText","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","useDisplay","useTextColor","defineComponent","toRef","makeProps","name","props","avatar","String","color","icon","lines","type","default","sticky","Boolean","text","setup","slots","themeClasses","borderClasses","densityClasses","dimensionStyles","mobile","elevationClasses","positionClasses","positionStyles","roundedClasses","textColorClasses","textColorStyles","hasAvatar","hasText","hasContent","value","density","actions"],"mappings":";AAAA;AACA,wB,CAEA;;SACSA,O;OACFC,c;OACAC,a;OACAC,c;OACAC,W,2BAEP;;SACSC,e,EAAiBC,S;SACjBC,gB,EAAkBC,U;SAClBC,kB,EAAoBC,Y;SACpBC,kB,EAAoBC,Y;SACpBC,iB,EAAmBC,W;SACnBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Q;SAChBC,U;SACAC,Y,uCAET;;AACA,SAASC,eAAT,EAA0BC,KAA1B,QAAuC,KAAvC;SACSC,S;AAET,eAAeF,eAAe,CAAC;AAC7BG,EAAAA,IAAI,EAAE,SADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,MAAM,EAAEC,MADO;AAEfC,IAAAA,KAAK,EAAED,MAFQ;AAGfE,IAAAA,IAAI,EAAEF,MAHS;AAIfG,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEJ,MADD;AAELK,MAAAA,OAAO,EAAE;AAFJ,KAJQ;AAQfC,IAAAA,MAAM,EAAEC,OARO;AASfC,IAAAA,IAAI,EAAER,MATS;AAWf,OAAGvB,eAAe,EAXH;AAYf,OAAGE,gBAAgB,EAZJ;AAaf,OAAGE,kBAAkB,EAbN;AAcf,OAAGE,kBAAkB,EAdN;AAef,OAAGE,iBAAiB,EAfL;AAgBf,OAAGE,gBAAgB,EAhBJ;AAiBf,OAAGE,YAAY,EAjBA;AAkBf,OAAGC,cAAc;AAlBF,GAAD,CAHa;;AAwB7BmB,EAAAA,KAAK,CAAEX,KAAF,EAAS;AAAEY,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBpB,QAAQ,CAACO,KAAD,CAAjC;AACA,UAAM;AAAEc,MAAAA;AAAF,QAAoBlC,SAAS,CAACoB,KAAD,EAAQ,UAAR,CAAnC;AACA,UAAM;AAAEe,MAAAA;AAAF,QAAqBjC,UAAU,CAACkB,KAAD,EAAQ,UAAR,CAArC;AACA,UAAM;AAAEgB,MAAAA;AAAF,QAAsBhC,YAAY,CAACgB,KAAD,CAAxC;AACA,UAAM;AAAEiB,MAAAA;AAAF,QAAavB,UAAU,EAA7B;AACA,UAAM;AAAEwB,MAAAA;AAAF,QAAuBhC,YAAY,CAACc,KAAD,CAAzC;AACA,UAAM;AAAEmB,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAsChC,WAAW,CAACY,KAAD,EAAQ,UAAR,CAAvD;AACA,UAAM;AAAEqB,MAAAA;AAAF,QAAqB/B,UAAU,CAACU,KAAD,EAAQ,UAAR,CAArC;AACA,UAAM;AAAEsB,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAAwC5B,YAAY,CAACE,KAAK,CAACG,KAAD,EAAQ,OAAR,CAAN,CAA1D;AAEA,WAAO,MAAM;AAAA;;AACX,YAAMwB,SAAS,GAAG,CAAC,EAAExB,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACI,IAAtB,IAA8BQ,KAAK,CAACX,MAApC,IAA8CW,KAAK,CAACR,IAAtD,CAAnB;AACA,YAAMqB,OAAO,GAAG,CAAC,EAAEzB,KAAK,CAACU,IAAN,IAAcE,KAAK,CAACF,IAAtB,CAAjB;AACA,YAAMgB,UAAU,GAAGF,SAAS,IAAIC,OAAb,IAAwBb,KAAK,CAACL,OAAjD;AAEA;AAAA,iBAEW,CACL,UADK,EAEL;AACE,8BAAoBU,MAAM,CAACU,KAD7B;AAEE,8BAAoB3B,KAAK,CAACQ,MAF5B;AAGE,WAAE,aAAYR,KAAK,CAACK,KAAM,OAA1B,GAAmC;AAHrC,SAFK,EAOLS,aAAa,CAACa,KAPT,EAQLZ,cAAc,CAACY,KARV,EASLT,gBAAgB,CAACS,KATZ,EAULR,eAAe,CAACQ,KAVX,EAWLN,cAAc,CAACM,KAXV,EAYLL,gBAAgB,CAACK,KAZZ,EAaLd,YAAY,CAACc,KAbR,CAFX;AAAA,iBAiBW,CACLX,eAAe,CAACW,KADX,EAELP,cAAc,CAACO,KAFV,EAGLJ,eAAe,CAACI,KAHX,CAjBX;AAAA,gBAsBS;AAtBT;AAAA,wBAwBMD,UAAU;AAAA,0BAENF,SAAS;AAAA,4BAELZ,KAAK,CAACX,MAAN,GACEW,KAAK,CAACX,MAAN,EADF;AAAA,yBAIcD,KAAK,CAAC4B,OAJpB;AAAA,sBAKW5B,KAAK,CAACI,IALjB;AAAA,uBAMYJ,KAAK,CAACC;AANlB,qDAFK;AAAA,YAFH,EAiBNwB,OAAO;AAAA,4BAEHb,KAAK,CAACF,IAAN,GAAaE,KAAK,CAACF,IAAN,EAAb,GAA4BV,KAAK,CAACU,IAF/B;AAAA,YAjBD,oBAuBNE,KAAK,CAACL,OAvBA,qBAuBN,oBAAAK,KAAK,CAvBC;AAAA;AAAA,UAxBhB,EAmDMA,KAAK,CAACiB,OAAN,uCACyB;AAAEtB,UAAAA,OAAO,EAAEK,KAAK,CAACiB;AAAjB,SADzB,CAnDN;AAAA;AAAA;AAwDD,KA7DD;AA8DD;;AAjG4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VBanner.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport VBannerActions from './VBannerActions'\nimport VBannerAvatar from './VBannerAvatar'\nimport VBannerContent from './VBannerContent'\nimport VBannerText from './VBannerText'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { useDisplay } from '@/composables/display'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent, toRef } from 'vue'\nimport { makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VBanner',\n\n  props: makeProps({\n    avatar: String,\n    color: String,\n    icon: String,\n    lines: {\n      type: String,\n      default: 'one',\n    },\n    sticky: Boolean,\n    text: String,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  }),\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme(props)\n    const { borderClasses } = useBorder(props, 'v-banner')\n    const { densityClasses } = useDensity(props, 'v-banner')\n    const { dimensionStyles } = useDimension(props)\n    const { mobile } = useDisplay()\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props, 'v-banner')\n    const { roundedClasses } = useRounded(props, 'v-banner')\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n\n    return () => {\n      const hasAvatar = !!(props.avatar || props.icon || slots.avatar || slots.icon)\n      const hasText = !!(props.text || slots.text)\n      const hasContent = hasAvatar || hasText || slots.default\n\n      return (\n        <props.tag\n          class={[\n            'v-banner',\n            {\n              'v-banner--mobile': mobile.value,\n              'v-banner--sticky': props.sticky,\n              [`v-banner--${props.lines}-line`]: true,\n            },\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            textColorClasses.value,\n            themeClasses.value,\n          ]}\n          style={[\n            dimensionStyles.value,\n            positionStyles.value,\n            textColorStyles.value,\n          ]}\n          role=\"banner\"\n        >\n          { hasContent && (\n            <VBannerContent>\n              { hasAvatar && (\n                <VBannerAvatar>\n                  { slots.avatar\n                    ? slots.avatar()\n                    : (\n                      <VAvatar\n                        density={ props.density }\n                        icon={ props.icon }\n                        image={ props.avatar }\n                      />\n                    )\n                  }\n                </VBannerAvatar>\n              ) }\n\n              { hasText && (\n                <VBannerText>\n                  { slots.text ? slots.text() : props.text }\n                </VBannerText>\n              ) }\n\n              { slots.default?.() }\n            </VBannerContent>\n          ) }\n\n          { slots.actions && (\n            <VBannerActions v-slots={{ default: slots.actions }} />\n          ) }\n        </props.tag>\n      )\n    }\n  },\n})\n"],"file":"VBanner.mjs"}
+{"version":3,"file":"VBanner.mjs","names":["VBannerActions","VBannerAvatar","VBannerIcon","VBannerText","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useDisplay","IconValue","defineComponent","useRender","toRef","VBanner","name","props","avatar","String","color","icon","lines","stacked","Boolean","sticky","text","setup","slots","borderClasses","densityClasses","mobile","dimensionStyles","elevationClasses","locationStyles","positionClasses","roundedClasses","themeClasses","density","image","hasText","hasPrepend","prepend","value","undefined","default","actions"],"sources":["../../../src/components/VBanner/VBanner.tsx"],"sourcesContent":["// Styles\nimport './VBanner.sass'\n\n// Components\nimport { VBannerActions } from './VBannerActions'\nimport { VBannerAvatar } from './VBannerAvatar'\nimport { VBannerIcon } from './VBannerIcon'\nimport { VBannerText } from './VBannerText'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useDisplay } from '@/composables/display'\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VBanner = defineComponent({\n  name: 'VBanner',\n\n  props: {\n    avatar: String,\n    color: String,\n    icon: IconValue,\n    lines: String as PropType<'one' | 'two' | 'three'>,\n    stacked: Boolean,\n    sticky: Boolean,\n    text: String,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeLocationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { borderClasses } = useBorder(props)\n    const { densityClasses } = useDensity(props)\n    const { mobile } = useDisplay()\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { locationStyles } = useLocation(props)\n    const { positionClasses } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n\n    const { themeClasses } = provideTheme(props)\n\n    const color = toRef(props, 'color')\n    const density = toRef(props, 'density')\n\n    provideDefaults({\n      VBannerActions: { color, density },\n      VBannerAvatar: { density, image: toRef(props, 'avatar') },\n      VBannerIcon: { color, density, icon: toRef(props, 'icon') },\n    })\n\n    useRender(() => {\n      const hasText = !!(props.text || slots.text)\n      const hasPrepend = !!(slots.prepend || props.avatar || props.icon)\n\n      return (\n        <props.tag\n          class={[\n            'v-banner',\n            {\n              'v-banner--stacked': props.stacked || mobile.value,\n              'v-banner--sticky': props.sticky,\n              [`v-banner--${props.lines}-line`]: !!props.lines,\n            },\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            themeClasses.value,\n          ]}\n          style={[\n            dimensionStyles.value,\n            locationStyles.value,\n          ]}\n          role=\"banner\"\n        >\n          { hasPrepend && (\n            <>\n              { slots.prepend\n                ? (\n                  <div class=\"v-banner__prepend\">\n                    { slots.prepend() }\n                  </div>\n                )\n                : props.avatar ? (<VBannerAvatar />)\n                : props.icon ? (<VBannerIcon />)\n                : undefined\n              }\n            </>\n          ) }\n\n          { hasText && (\n            <VBannerText>\n              { slots.text ? slots.text() : props.text }\n            </VBannerText>\n          ) }\n\n          { slots.default?.() }\n\n          { slots.actions && (\n            <VBannerActions>\n              { slots.actions() }\n            </VBannerActions>\n          ) }\n        </props.tag>\n      )\n    })\n  },\n})\n\nexport type VBanner = InstanceType<typeof VBanner>\n"],"mappings":"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"}

package/lib/components/VBanner/VBanner.sass

@@ -1,112 +1,108 @@
-// Imports
-@import ./index
+@forward './variables'
+@use 'sass:math'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-banner
-  $root: &
-
-  background: $banner-background
-  display: flex
-  flex-wrap: wrap
+  align-items: center
+  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 text 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
 
-  @include border($banner-border...)
-  @include elevation($banner-elevation)
-  @include position($banner-positions)
-  @include rounded($banner-border-radius)
-  @include theme($banner-theme...)
+  @include tools.border($banner-border...)
+  @include tools.elevation($banner-elevation)
+  @include tools.position($banner-positions)
+  @include tools.rounded($banner-border-radius)
+  @include tools.theme($banner-theme...)
 
-  &--border
-    border-width: $banner-border-thin-width
+  &--rounded
+    @include tools.rounded($banner-rounded-border-radius)
 
-  &--mobile
-    align-items: center
-    padding-inline-end: $banner-mobile-padding-end
-    padding-inline-start: $banner-mobile-padding-start
+  &--stacked
+    &:not(.v-banner--one-line)
+      grid-template-areas: "prepend text" ". actions"
 
-  &--rounded
-    @include rounded($banner-rounded-border-radius)
+    .v-banner-text
+      padding-inline-end: $banner-stacked-padding-inline-end
 
   @at-root
-    @include density('v-banner', $banner-density) using ($modifier)
+    @include tools.density('v-banner', $banner-density) using ($modifier)
+      .v-banner-actions
+        margin-bottom: -($banner-padding + $modifier)
+
       &.v-banner--one-line
-        padding-top: $banner-padding-top + $modifier
+        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-avatar,
+.v-banner-icon,
+.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
-
-  &::after
-    background: currentColor
-    border-radius: inherit
-    bottom: 0
-    content: ''
-    left: 0
-    opacity: $banner-avatar-after-opacity
-    position: absolute
-    right: 0
-    top: 0
-
-  .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: flex-start
-  color: $banner-text-color
   display: -webkit-box
-  line-height: $banner-text-line-height
+  grid-area: text
   overflow: hidden
+  padding-inline-end: $banner-text-padding-end
 
   .v-banner--one-line &
-    align-self: center
+    -webkit-line-clamp: 1
 
   .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 default 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 == null ? void 0 : (_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"],"mappings":"SAASA,sB;AAET,eAAeA,sBAAsB,CAAC,kBAAD,CAArC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport default 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,IAEJQ,KAFI,sCAEJA,KAAK,CAAEG,OAFH,qBAEJ,oBAAAH,KAAK,CAFD;IAAA,CAAD,CAAT;IAMA,OAAO,EAAP;EACD;;AAxB2C,CAAD,CAAtC"}

package/lib/components/VBanner/VBannerAvatar.mjs

@@ -1,28 +1,19 @@
-import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
-// Composables
-import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+// Components
+import { makeVAvatarProps, VAvatar } from "../VAvatar/VAvatar.mjs"; // Utilities
 
-import { defineComponent } from 'vue';
-import { makeProps } from "../../util/index.mjs";
-export default defineComponent({
+import { defineComponent } from "../../util/index.mjs";
+export const VBannerAvatar = defineComponent({
   name: 'VBannerAvatar',
-  props: makeProps({
-    left: Boolean,
-    right: Boolean,
-    ...makeTagProps()
-  }),
+  props: makeVAvatarProps(),
 
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return _createVNode(props.tag, {
-        "class": ['v-banner-avatar', {
-          'v-banner-avatar--start': props.left,
-          'v-banner-avatar--end': props.right
-        }]
-      }, slots, 8, ["class"]);
-    };
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => _createVNode(VAvatar, _mergeProps({
+      "class": "v-banner-avatar"
+    }, props), slots);
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/VBannerAvatar.tsx"],"names":["makeTagProps","defineComponent","makeProps","name","props","left","Boolean","right","setup","slots"],"mappings":";AAAA;SACSA,Y,qCAET;;AACA,SAASC,eAAT,QAAgC,KAAhC;SACSC,S;AAET,eAAeD,eAAe,CAAC;AAC7BE,EAAAA,IAAI,EAAE,eADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,IAAI,EAAEC,OADS;AAEfC,IAAAA,KAAK,EAAED,OAFQ;AAGf,OAAGN,YAAY;AAHA,GAAD,CAHa;;AAS7BQ,EAAAA,KAAK,CAAEJ,KAAF,EAAS;AAAEK,IAAAA;AAAF,GAAT,EAAoB;AACvB,WAAO,MAAM;AACX;AAAA,iBAEW,CACL,iBADK,EAEL;AACE,oCAA0BL,KAAK,CAACC,IADlC;AAEE,kCAAwBD,KAAK,CAACG;AAFhC,SAFK;AAFX,SAScE,KATd;AAYD,KAbD;AAcD;;AAxB4B,CAAD,CAA9B","sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { defineComponent } from 'vue'\nimport { makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VBannerAvatar',\n\n  props: makeProps({\n    left: Boolean,\n    right: Boolean,\n    ...makeTagProps(),\n  }),\n\n  setup (props, { slots }) {\n    return () => {\n      return (\n        <props.tag\n          class={[\n            'v-banner-avatar',\n            {\n              'v-banner-avatar--start': props.left,\n              'v-banner-avatar--end': props.right,\n            },\n          ]}\n          v-slots={ slots }\n        />\n      )\n    }\n  },\n})\n"],"file":"VBannerAvatar.mjs"}
+{"version":3,"file":"VBannerAvatar.mjs","names":["makeVAvatarProps","VAvatar","defineComponent","VBannerAvatar","name","props","setup","slots"],"sources":["../../../src/components/VBanner/VBannerAvatar.tsx"],"sourcesContent":["// Components\nimport { makeVAvatarProps, VAvatar } from '@/components/VAvatar/VAvatar'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VBannerAvatar = defineComponent({\n  name: 'VBannerAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    return () => (\n      <VAvatar\n        class=\"v-banner-avatar\"\n        { ...props }\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"mappings":";AAAA;SACSA,gB,EAAkBC,O,kCAE3B;;SACSC,e;AAET,OAAO,MAAMC,aAAa,GAAGD,eAAe,CAAC;EAC3CE,IAAI,EAAE,eADqC;EAG3CC,KAAK,EAAEL,gBAAgB,EAHoB;;EAK3CM,KAAK,CAAED,KAAF,QAAoB;IAAA,IAAX;MAAEE;IAAF,CAAW;IACvB,OAAO;MAAA,SAEG;IAFH,GAGEF,KAHF,GAIOE,KAJP,CAAP;EAOD;;AAb0C,CAAD,CAArC"}

package/lib/components/VBanner/VBannerIcon.mjs

@@ -0,0 +1,20 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+// Components
+import { makeVAvatarProps, VAvatar } from "../VAvatar/VAvatar.mjs"; // Utilities
+
+import { defineComponent } from "../../util/index.mjs";
+export const VBannerIcon = defineComponent({
+  name: 'VBannerIcon',
+  props: makeVAvatarProps(),
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => _createVNode(VAvatar, _mergeProps({
+      "class": "v-banner-icon"
+    }, props), slots);
+  }
+
+});
+//# sourceMappingURL=VBannerIcon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VBannerIcon.mjs","names":["makeVAvatarProps","VAvatar","defineComponent","VBannerIcon","name","props","setup","slots"],"sources":["../../../src/components/VBanner/VBannerIcon.tsx"],"sourcesContent":["// Components\nimport { makeVAvatarProps, VAvatar } from '@/components/VAvatar/VAvatar'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VBannerIcon = defineComponent({\n  name: 'VBannerIcon',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    return () => (\n      <VAvatar\n        class=\"v-banner-icon\"\n        { ...props }\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"mappings":";AAAA;SACSA,gB,EAAkBC,O,kCAE3B;;SACSC,e;AAET,OAAO,MAAMC,WAAW,GAAGD,eAAe,CAAC;EACzCE,IAAI,EAAE,aADmC;EAGzCC,KAAK,EAAEL,gBAAgB,EAHkB;;EAKzCM,KAAK,CAAED,KAAF,QAAoB;IAAA,IAAX;MAAEE;IAAF,CAAW;IACvB,OAAO;MAAA,SAEG;IAFH,GAGEF,KAHF,GAIOE,KAJP,CAAP;EAOD;;AAbwC,CAAD,CAAnC"}

package/lib/components/VBanner/VBannerText.mjs

@@ -1,3 +1,3 @@
 import { createSimpleFunctional } from "../../util/index.mjs";
-export default createSimpleFunctional('v-banner-text');
+export const VBannerText = createSimpleFunctional('v-banner-text');
 //# sourceMappingURL=VBannerText.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/VBannerText.ts"],"names":["createSimpleFunctional"],"mappings":"SAASA,sB;AAET,eAAeA,sBAAsB,CAAC,eAAD,CAArC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport default 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

@@ -1,34 +1,30 @@
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
 // Defaults
-$banner-avatar-after-opacity: var(--v-border-opacity) !default;
-$banner-avatar-after-opacity: var(--v-border-opacity) !default;
-$banner-avatar-border-radius: map-get($rounded, 'circle') !default;
-$banner-avatar-margin-end: 24px !default;
-$banner-avatar-margin-start: 0 !default;
-$banner-background: rgb(var(--v-theme-background)) !default;
-$banner-color: rgb(var(--v-theme-on-surface)) !default;
-$banner-border-color: $border-color-root !default;
-$banner-border-radius: map-get($rounded, 0) !default;
-$banner-border-style: $border-style-root !default;
+$banner-action-margin: 20px !default;
+$banner-actions-line-margin-top: 20px !default;
+$banner-background: rgb(var(--v-theme-surface)) !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: map-deep-get($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-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !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-rounded-border-radius: $border-radius-root !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-color: rgb(var(--v-theme-on-surface)) !default;
-$banner-text-line-height: map-deep-get($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-margin-bottom: 24px !default;
-$banner-three-line-padding-top: 24px !default;
+$banner-text-padding-end: 90px !default;
 $banner-width: 100% !default;
 
 // Mobile

package/lib/components/VBanner/index.mjs

@@ -1,6 +1,6 @@
-export { default as VBanner } from "./VBanner.mjs";
-export { default as VBannerActions } from "./VBannerActions.mjs";
-export { default as VBannerAvatar } from "./VBannerAvatar.mjs";
-export { default as VBannerContent } from "./VBannerContent.mjs";
-export { default as VBannerText } from "./VBannerText.mjs";
+export { VBanner } from "./VBanner.mjs";
+export { VBannerActions } from "./VBannerActions.mjs";
+export { VBannerAvatar } from "./VBannerAvatar.mjs";
+export { VBannerIcon } from "./VBannerIcon.mjs";
+export { VBannerText } from "./VBannerText.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/index.ts"],"names":["default","VBanner","VBannerActions","VBannerAvatar","VBannerContent","VBannerText"],"mappings":"SAASA,OAAO,IAAIC,O;SACXD,OAAO,IAAIE,c;SACXF,OAAO,IAAIG,a;SACXH,OAAO,IAAII,c;SACXJ,OAAO,IAAIK,W","sourcesContent":["export { default as VBanner } from './VBanner'\nexport { default as VBannerActions } from './VBannerActions'\nexport { default as VBannerAvatar } from './VBannerAvatar'\nexport { default as VBannerContent } from './VBannerContent'\nexport { default as VBannerText } from './VBannerText'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VBanner","VBannerActions","VBannerAvatar","VBannerIcon","VBannerText"],"sources":["../../../src/components/VBanner/index.ts"],"sourcesContent":["export { VBanner } from './VBanner'\nexport { VBannerActions } from './VBannerActions'\nexport { VBannerAvatar } from './VBannerAvatar'\nexport { VBannerIcon } from './VBannerIcon'\nexport { VBannerText } from './VBannerText'\n"],"mappings":"SAASA,O;SACAC,c;SACAC,a;SACAC,W;SACAC,W"}

package/lib/components/VBottomNavigation/VBottomNavigation.css

@@ -0,0 +1,61 @@
+.v-bottom-navigation {
+  display: flex;
+  max-width: 100%;
+  overflow: hidden;
+  position: absolute;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+  border-radius: 0;
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-bottom-navigation--border {
+  border-width: thin;
+  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);
+}
+
+.v-bottom-navigation__content {
+  display: flex;
+  flex: none;
+  font-size: 0.75rem;
+  justify-content: center;
+  transition: transform, color 0.2s, 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+}
+.v-bottom-navigation .v-bottom-navigation__content > .v-btn {
+  font-size: inherit;
+  height: 100%;
+  max-width: 168px;
+  min-width: 80px;
+  text-transform: none;
+  transition: inherit;
+  width: auto;
+  border-radius: 0;
+}
+.v-bottom-navigation .v-bottom-navigation__content > .v-btn .v-btn__content,
+.v-bottom-navigation .v-bottom-navigation__content > .v-btn .v-btn__icon {
+  transition: inherit;
+}
+.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 {
+  flex-grow: 1;
+}
+.v-bottom-navigation--shift .v-bottom-navigation__content > .v-btn .v-btn__icon {
+  top: 0.5rem;
+  transform: translateY(-0.5rem);
+}
+.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__icon {
+  transform: translateY(0);
+}

package/lib/components/VBottomNavigation/VBottomNavigation.mjs

@@ -1,30 +1,29 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VBottomNavigation.sass"; // Composables
+import "./VBottomNavigation.css"; // Composables
 
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeGroupProps, useGroup } from "../../composables/group.mjs";
 import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { useBackgroundColor, useTextColor } from "../../composables/color.mjs";
-import { useProxiedModel } from "../../composables/proxiedModel.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs"; // Utilities
+import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
-import { computed, defineComponent } from 'vue';
-import { convertToUnit } from "../../util/index.mjs";
-import { makeProps } from "../../util/makeProps.mjs";
-export default defineComponent({
+import { computed, toRef } from 'vue';
+import { convertToUnit, defineComponent } from "../../util/index.mjs"; // Types
+
+import { VBtnToggleSymbol } from "../VBtnToggle/VBtnToggle.mjs";
+export const VBottomNavigation = defineComponent({
   name: 'VBottomNavigation',
-  props: makeProps({
+  props: {
     bgColor: String,
     color: String,
     grow: Boolean,
-    modelValue: {
-      type: Boolean,
-      default: true
-    },
     mode: {
       type: String,
       validator: v => !v || ['horizontal', 'shift'].includes(v)
@@ -43,51 +42,71 @@ export default defineComponent({
     ...makeTagProps({
       tag: 'header'
     }),
+    ...makeGroupProps({
+      modelValue: true,
+      selectedClass: 'v-btn--selected'
+    }),
     ...makeThemeProps()
-  }),
+  },
   emits: {
     'update:modelValue': value => true
   },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       themeClasses
-    } = useTheme(props);
+    } = useTheme();
     const {
       borderClasses
-    } = useBorder(props, 'v-bottom-navigation');
+    } = useBorder(props);
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(computed(() => props.bgColor));
-    const {
-      textColorClasses,
-      textColorStyles
-    } = useTextColor(computed(() => props.color));
+    } = useBackgroundColor(toRef(props, 'bgColor'));
     const {
       densityClasses
-    } = useDensity(props, 'v-bottom-navigation');
+    } = useDensity(props);
     const {
       elevationClasses
     } = useElevation(props);
     const {
       roundedClasses
-    } = useRounded(props, 'v-bottom-navigation');
+    } = useRounded(props);
     const height = computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
     const isActive = useProxiedModel(props, 'modelValue', props.modelValue);
-    const layoutStyles = useLayoutItem(props.name, computed(() => props.priority), computed(() => 'bottom'), computed(() => isActive.value ? height.value : 0), height, isActive);
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      order: computed(() => parseInt(props.order, 10)),
+      position: computed(() => 'bottom'),
+      layoutSize: computed(() => isActive.value ? height.value : 0),
+      elementSize: height,
+      active: isActive,
+      absolute: toRef(props, 'absolute')
+    });
+    useGroup(props, VBtnToggleSymbol);
+    provideDefaults({
+      VBtn: {
+        color: toRef(props, 'color'),
+        density: toRef(props, 'density'),
+        stacked: computed(() => props.mode !== 'horizontal'),
+        variant: 'text'
+      }
+    }, {
+      scoped: true
+    });
     return () => {
       return _createVNode(props.tag, {
         "class": ['v-bottom-navigation', {
+          'v-bottom-navigation--active': isActive.value,
           'v-bottom-navigation--grow': props.grow,
-          'v-bottom-navigation--horizontal': props.mode === 'horizontal',
-          'v-bottom-navigation--is-active': isActive.value,
-          'v-bottom-navigation--shift': props.mode === 'shift',
-          'v-bottom-navigation--absolute': props.absolute
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, textColorClasses.value],
-        "style": [backgroundColorStyles.value, layoutStyles.value, textColorStyles.value, {
+          'v-bottom-navigation--shift': props.mode === 'shift'
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, {
           height: convertToUnit(height.value),
           transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`
         }]
@@ -95,7 +114,7 @@ export default defineComponent({
         default: () => [slots.default && _createVNode("div", {
           "class": "v-bottom-navigation__content"
         }, [slots.default()])]
-      }, 8, ["class", "style"]);
+      });
     };
   }