@vuetify/nightly 3.4.0-alpha.1-dev.2023-09-15 → 3.4.0-alpha.1-dev.2023-09-20

package/CHANGELOG.md

@@ -1,12 +1,13 @@
-# [](https://github.com/vuetifyjs/vuetify/compare/v3.4.0-alpha.1-dev.2023-09-15...v) (2023-09-15)
+# [](https://github.com/vuetifyjs/vuetify/compare/v3.4.0-alpha.1-dev.2023-09-20...v) (2023-09-20)
 
 
 
-# [3.4.0-alpha.1-dev.2023-09-15](https://github.com/vuetifyjs/vuetify/compare/v3.4.0-alpha.1...v3.4.0-alpha.1-dev.2023-09-15) (2023-09-15)
+# [3.4.0-alpha.1-dev.2023-09-20](https://github.com/vuetifyjs/vuetify/compare/v3.4.0-alpha.1...v3.4.0-alpha.1-dev.2023-09-20) (2023-09-20)
 
 
 ### Features
 
+* **VBanner:** add `bg-color` prop ([#18094](https://github.com/vuetifyjs/vuetify/issues/18094)) ([511c9aa](https://github.com/vuetifyjs/vuetify/commit/511c9aa4a80ad3ba48cebf729c1de6d257a096e5)), closes [#17124](https://github.com/vuetifyjs/vuetify/issues/17124)
 * update browser support ([7f3c472](https://github.com/vuetifyjs/vuetify/commit/7f3c472fb02360e029574acbec885c3eb7819f30))
 * **VBtn|VListItem:** add new prop named slim ([#17562](https://github.com/vuetifyjs/vuetify/issues/17562)) ([788a583](https://github.com/vuetifyjs/vuetify/commit/788a5839beed07b901feac2ea8417d0c6b7d011c))
 * **VExpansionPanels:** add new prop named static ([#18014](https://github.com/vuetifyjs/vuetify/issues/18014)) ([51f3c14](https://github.com/vuetifyjs/vuetify/commit/51f3c143647737ed07388993ebec7985c1d79a10))

package/dist/json/attributes.json

@@ -863,6 +863,10 @@
     "type": "boolean\n",
     "description": "Forces the banner actions onto a new line. This is only applicable when the banner is not **single-line** or using the **actions** slot."
   },
+  "v-banner/bg-color": {
+    "type": "string\n",
+    "description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)"
+  },
   "v-banner/avatar": {
     "type": "string\n",
     "description": "Designates a specific src image to pass to the thumbnail."

package/dist/json/tags.json

@@ -244,6 +244,7 @@
   "v-banner": {
     "attributes": [
       "avatar",
+      "bg-color",
       "border",
       "color",
       "density",

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "vuetify",
-  "version": "3.4.0-alpha.1-dev.2023-09-15",
+  "version": "3.4.0-alpha.1-dev.2023-09-20",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -2813,6 +2813,15 @@
                 "type": "boolean\n"
               }
             },
+            {
+              "name": "bgColor",
+              "description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)",
+              "doc-url": "https://vuetifyjs.com/api/v-banner#props",
+              "value": {
+                "kind": "expression",
+                "type": "string\n"
+              }
+            },
             {
               "name": "avatar",
               "description": "Designates a specific src image to pass to the thumbnail.",

package/dist/vuetify-labs.css

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.0-alpha.1-dev.2023-09-15
+* Vuetify v3.4.0-alpha.1-dev.2023-09-20
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -23196,125 +23196,6 @@ html.v-overlay-scroll-blocked {
 .v-slide-group--vertical .v-slide-group__container,
 .v-slide-group--vertical .v-slide-group__content {
   flex-direction: column;
-}.v-snackbar {
-  justify-content: center;
-  z-index: 10000;
-  margin: 8px;
-  margin-inline-end: calc(8px + var(--v-scrollbar-offset));
-}
-.v-snackbar:not(.v-snackbar--centered):not(.v-snackbar--top) {
-  align-items: flex-end;
-}
-.v-snackbar__wrapper {
-  align-items: center;
-  display: flex;
-  max-width: 672px;
-  min-height: 48px;
-  min-width: 344px;
-  overflow: hidden;
-  padding: 0;
-  border-radius: 4px;
-}
-.v-snackbar--variant-plain, .v-snackbar--variant-outlined, .v-snackbar--variant-text, .v-snackbar--variant-tonal {
-  background: transparent;
-  color: inherit;
-}
-.v-snackbar--variant-plain {
-  opacity: 0.62;
-}
-.v-snackbar--variant-plain:focus, .v-snackbar--variant-plain:hover {
-  opacity: 1;
-}
-.v-snackbar--variant-plain .v-snackbar__overlay {
-  display: none;
-}
-.v-snackbar--variant-elevated, .v-snackbar--variant-flat {
-  background: rgb(var(--v-theme-surface-variant));
-  color: rgb(var(--v-theme-on-surface-variant));
-}
-.v-snackbar--variant-elevated {
-  box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 6px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 18px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
-}
-.v-snackbar--variant-flat {
-  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));
-}
-.v-snackbar--variant-outlined {
-  border: thin solid currentColor;
-}
-.v-snackbar--variant-text .v-snackbar__overlay {
-  background: currentColor;
-}
-.v-snackbar--variant-tonal .v-snackbar__underlay {
-  background: currentColor;
-  opacity: var(--v-activated-opacity);
-  border-radius: inherit;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-.v-snackbar__content {
-  flex-grow: 1;
-  font-size: 0.875rem;
-  font-weight: 400;
-  letter-spacing: 0.0178571429em;
-  line-height: 1.25rem;
-  margin-right: auto;
-  padding: 14px 16px;
-  text-align: initial;
-}
-.v-snackbar__actions {
-  align-items: center;
-  align-self: center;
-  display: flex;
-  margin-inline-end: 8px;
-}
-.v-snackbar__actions > .v-btn {
-  padding: 0 8px;
-  min-width: auto;
-}
-.v-snackbar__timer {
-  width: 100%;
-  position: absolute;
-  top: 0;
-}
-.v-snackbar__timer .v-progress-linear {
-  transition: 0.2s linear;
-}
-.v-snackbar--absolute {
-  position: absolute;
-  z-index: 1;
-}
-.v-snackbar--multi-line .v-snackbar__wrapper {
-  min-height: 68px;
-}
-.v-snackbar--vertical .v-snackbar__wrapper {
-  flex-direction: column;
-}
-.v-snackbar--vertical .v-snackbar__wrapper .v-snackbar__actions {
-  align-self: flex-end;
-  margin-bottom: 8px;
-}
-
-.v-snackbar-transition-enter-active, .v-snackbar-transition-leave-active {
-  transition-duration: 0.15s;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-.v-snackbar-transition-enter-active {
-  transition-property: opacity, transform;
-}
-.v-snackbar-transition-enter-from {
-  opacity: 0;
-  transform: scale(0.8);
-}
-.v-snackbar-transition-leave-active {
-  transition-property: opacity;
-}
-.v-snackbar-transition-leave-to {
-  opacity: 0;
 }.v-switch .v-label {
   padding-inline-start: 10px;
 }
@@ -23537,6 +23418,125 @@ html.v-overlay-scroll-blocked {
   top: 0;
   height: 100%;
   width: 2px;
+}.v-snackbar {
+  justify-content: center;
+  z-index: 10000;
+  margin: 8px;
+  margin-inline-end: calc(8px + var(--v-scrollbar-offset));
+}
+.v-snackbar:not(.v-snackbar--centered):not(.v-snackbar--top) {
+  align-items: flex-end;
+}
+.v-snackbar__wrapper {
+  align-items: center;
+  display: flex;
+  max-width: 672px;
+  min-height: 48px;
+  min-width: 344px;
+  overflow: hidden;
+  padding: 0;
+  border-radius: 4px;
+}
+.v-snackbar--variant-plain, .v-snackbar--variant-outlined, .v-snackbar--variant-text, .v-snackbar--variant-tonal {
+  background: transparent;
+  color: inherit;
+}
+.v-snackbar--variant-plain {
+  opacity: 0.62;
+}
+.v-snackbar--variant-plain:focus, .v-snackbar--variant-plain:hover {
+  opacity: 1;
+}
+.v-snackbar--variant-plain .v-snackbar__overlay {
+  display: none;
+}
+.v-snackbar--variant-elevated, .v-snackbar--variant-flat {
+  background: rgb(var(--v-theme-surface-variant));
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+.v-snackbar--variant-elevated {
+  box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 6px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 18px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-snackbar--variant-flat {
+  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));
+}
+.v-snackbar--variant-outlined {
+  border: thin solid currentColor;
+}
+.v-snackbar--variant-text .v-snackbar__overlay {
+  background: currentColor;
+}
+.v-snackbar--variant-tonal .v-snackbar__underlay {
+  background: currentColor;
+  opacity: var(--v-activated-opacity);
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.v-snackbar__content {
+  flex-grow: 1;
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.0178571429em;
+  line-height: 1.25rem;
+  margin-right: auto;
+  padding: 14px 16px;
+  text-align: initial;
+}
+.v-snackbar__actions {
+  align-items: center;
+  align-self: center;
+  display: flex;
+  margin-inline-end: 8px;
+}
+.v-snackbar__actions > .v-btn {
+  padding: 0 8px;
+  min-width: auto;
+}
+.v-snackbar__timer {
+  width: 100%;
+  position: absolute;
+  top: 0;
+}
+.v-snackbar__timer .v-progress-linear {
+  transition: 0.2s linear;
+}
+.v-snackbar--absolute {
+  position: absolute;
+  z-index: 1;
+}
+.v-snackbar--multi-line .v-snackbar__wrapper {
+  min-height: 68px;
+}
+.v-snackbar--vertical .v-snackbar__wrapper {
+  flex-direction: column;
+}
+.v-snackbar--vertical .v-snackbar__wrapper .v-snackbar__actions {
+  align-self: flex-end;
+  margin-bottom: 8px;
+}
+
+.v-snackbar-transition-enter-active, .v-snackbar-transition-leave-active {
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+.v-snackbar-transition-enter-active {
+  transition-property: opacity, transform;
+}
+.v-snackbar-transition-enter-from {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.v-snackbar-transition-leave-active {
+  transition-property: opacity;
+}
+.v-snackbar-transition-leave-to {
+  opacity: 0;
 }.v-table {
   background: rgb(var(--v-theme-surface));
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));

package/dist/vuetify-labs.d.ts

@@ -7662,6 +7662,7 @@ declare const VBanner: {
                 [key: string]: any;
             }>) => void)[] | undefined;
             "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
+            bgColor?: string | undefined;
             lines?: "one" | "two" | "three" | undefined;
             mobileBreakpoint?: number | DisplayBreakpoint | undefined;
             avatar?: string | undefined;
@@ -7714,6 +7715,7 @@ declare const VBanner: {
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
+            bgColor?: string | undefined;
             lines?: "one" | "two" | "three" | undefined;
             mobileBreakpoint?: number | DisplayBreakpoint | undefined;
             avatar?: string | undefined;
@@ -7798,6 +7800,7 @@ declare const VBanner: {
         elevation?: string | number | undefined;
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
+        bgColor?: string | undefined;
         lines?: "one" | "two" | "three" | undefined;
         mobileBreakpoint?: number | DisplayBreakpoint | undefined;
         avatar?: string | undefined;
@@ -7846,6 +7849,7 @@ declare const VBanner: {
     elevation?: string | number | undefined;
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
+    bgColor?: string | undefined;
     lines?: "one" | "two" | "three" | undefined;
     mobileBreakpoint?: number | DisplayBreakpoint | undefined;
     avatar?: string | undefined;
@@ -7925,6 +7929,7 @@ declare const VBanner: {
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     avatar: StringConstructor;
+    bgColor: StringConstructor;
     color: StringConstructor;
     icon: PropType<IconValue>;
     lines: PropType<"one" | "two" | "three">;
@@ -7969,6 +7974,7 @@ declare const VBanner: {
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     avatar: StringConstructor;
+    bgColor: StringConstructor;
     color: StringConstructor;
     icon: PropType<IconValue>;
     lines: PropType<"one" | "two" | "three">;

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.0-alpha.1-dev.2023-09-15
+* Vuetify v3.4.0-alpha.1-dev.2023-09-20
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -11970,6 +11970,7 @@ const VBannerText = createSimpleFunctional('v-banner-text');
 
 const makeVBannerProps = propsFactory({
   avatar: String,
+  bgColor: String,
   color: String,
   icon: IconValue,
   lines: String,
@@ -11995,6 +11996,10 @@ const VBanner = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(props, 'bgColor');
     const {
       borderClasses
     } = useBorder(props);
@@ -12040,8 +12045,8 @@ const VBanner = genericComponent()({
           'v-banner--stacked': props.stacked || mobile.value,
           'v-banner--sticky': props.sticky,
           [`v-banner--${props.lines}-line`]: !!props.lines
-        }, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value, props.class],
-        "style": [dimensionStyles.value, locationStyles.value, props.style],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
+        "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
         "role": "banner"
       }, {
         default: () => [hasPrepend && createVNode("div", {
@@ -24788,7 +24793,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.4.0-alpha.1-dev.2023-09-15";
+const version$1 = "3.4.0-alpha.1-dev.2023-09-20";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -24802,7 +24807,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.4.0-alpha.1-dev.2023-09-15";
+const version = "3.4.0-alpha.1-dev.2023-09-20";
 
 /* eslint-disable local-rules/sort-imports */