@vuetify/nightly 3.3.11-dev.2023-08-07 → 3.3.11-dev.2023-08-09

package/CHANGELOG.md

@@ -1,8 +1,8 @@
-# [](https://github.com/vuetifyjs/vuetify/compare/v3.3.11-dev.2023-08-07...v) (2023-08-07)
+# [](https://github.com/vuetifyjs/vuetify/compare/v3.3.11-dev.2023-08-09...v) (2023-08-09)
 
 
 
-## [3.3.11-dev.2023-08-07](https://github.com/vuetifyjs/vuetify/compare/v3.3.11...v3.3.11-dev.2023-08-07) (2023-08-07)
+## [3.3.11-dev.2023-08-09](https://github.com/vuetifyjs/vuetify/compare/v3.3.11...v3.3.11-dev.2023-08-09) (2023-08-09)
 
 
 ### Bug Fixes
@@ -18,7 +18,9 @@
 
 * **VAvatar:** add text prop ([68b2ab4](https://github.com/vuetifyjs/vuetify/commit/68b2ab46aa6ec2e6f5b84fcbf6e442611037854d))
 * **VBreadcrumbs:** add item slot ([#15743](https://github.com/vuetifyjs/vuetify/issues/15743)) ([5fce8d1](https://github.com/vuetifyjs/vuetify/commit/5fce8d19865c460ba7be75cd8e9ebdab0fa4f516)), closes [#15742](https://github.com/vuetifyjs/vuetify/issues/15742)
+* **VColorPicker:** add eyedropper button when supported ([#17952](https://github.com/vuetifyjs/vuetify/issues/17952)) ([3559698](https://github.com/vuetifyjs/vuetify/commit/3559698e0536dedfee78fee6e1699ef37e04d93a)), closes [#14790](https://github.com/vuetifyjs/vuetify/issues/14790)
 * **VImg:** Add prop to set crossorigin attr on v-img ([#17927](https://github.com/vuetifyjs/vuetify/issues/17927)) ([a959159](https://github.com/vuetifyjs/vuetify/commit/a959159c549895b9912918307ba243cc9082f2f6)), closes [#17848](https://github.com/vuetifyjs/vuetify/issues/17848)
+* **VImg:** support draggable attribute ([#17976](https://github.com/vuetifyjs/vuetify/issues/17976)) ([afeb6c0](https://github.com/vuetifyjs/vuetify/commit/afeb6c0b8538810198aee0250d0cd5e1ab3ce096)), closes [#17973](https://github.com/vuetifyjs/vuetify/issues/17973)
 * **VImg:** support referrerpolicy attribute ([d923ed8](https://github.com/vuetifyjs/vuetify/commit/d923ed8058b82c6cfa38dd67fc5b20295aaba4be)), closes [#15396](https://github.com/vuetifyjs/vuetify/issues/15396)
 * **VSelectionControl:** add base-color support ([5657a1e](https://github.com/vuetifyjs/vuetify/commit/5657a1e4520af572023f3013604bc7d92db6a25a)), closes [#7284](https://github.com/vuetifyjs/vuetify/issues/7284)
 * add gap utility classes ([#17715](https://github.com/vuetifyjs/vuetify/issues/17715)) ([5290bfc](https://github.com/vuetifyjs/vuetify/commit/5290bfc7515585b0836e59935d756ddc389f0e20)), closes [#15282](https://github.com/vuetifyjs/vuetify/issues/15282)

package/dist/json/attributes.json

@@ -1759,6 +1759,10 @@
     "type": "boolean\n",
     "description": "Resizes the background image to cover the entire container."
   },
+  "v-carousel-item/draggable": {
+    "type": "boolean | 'true' | 'false'\n",
+    "description": "Controls the `draggable` behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable)."
+  },
   "v-carousel-item/gradient": {
     "type": "string\n",
     "description": "The gradient to apply to the image. This can be any valid CSS gradient declaration. You can find more information on the [MDN documentation for gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient)."
@@ -4671,6 +4675,10 @@
     "type": "boolean\n",
     "description": "Resizes the background image to cover the entire container."
   },
+  "v-img/draggable": {
+    "type": "boolean | 'true' | 'false'\n",
+    "description": "Controls the `draggable` behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable)."
+  },
   "v-img/gradient": {
     "type": "string\n",
     "description": "The gradient to apply to the image. This can be any valid CSS gradient declaration. You can find more information on the [MDN documentation for gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient)."

package/dist/json/importMap.json

@@ -132,14 +132,14 @@
       "from": "components/VColorPicker/index.mjs",
       "styles": []
     },
-    "VCounter": {
-      "from": "components/VCounter/index.mjs",
-      "styles": []
-    },
     "VCombobox": {
       "from": "components/VCombobox/index.mjs",
       "styles": []
     },
+    "VCounter": {
+      "from": "components/VCounter/index.mjs",
+      "styles": []
+    },
     "VDialog": {
       "from": "components/VDialog/index.mjs",
       "styles": []

package/dist/json/tags.json

@@ -565,6 +565,7 @@
       "cover",
       "crossorigin",
       "disabled",
+      "draggable",
       "eager",
       "gradient",
       "height",
@@ -1529,6 +1530,7 @@
       "content-class",
       "cover",
       "crossorigin",
+      "draggable",
       "eager",
       "gradient",
       "height",

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "vuetify",
-  "version": "3.3.11-dev.2023-08-07",
+  "version": "3.3.11-dev.2023-08-09",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -5676,6 +5676,16 @@
                 "type": "boolean\n"
               }
             },
+            {
+              "name": "draggable",
+              "description": "Controls the `draggable` behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable).",
+              "doc-url": "https://vuetifyjs.com/api/v-carousel-item#props",
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean | 'true' | 'false'\n"
+              }
+            },
             {
               "name": "gradient",
               "description": "The gradient to apply to the image. This can be any valid CSS gradient declaration. You can find more information on the [MDN documentation for gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient).",
@@ -19317,6 +19327,16 @@
                 "type": "boolean\n"
               }
             },
+            {
+              "name": "draggable",
+              "description": "Controls the `draggable` behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable).",
+              "doc-url": "https://vuetifyjs.com/api/v-img#props",
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean | 'true' | 'false'\n"
+              }
+            },
             {
               "name": "gradient",
               "description": "The gradient to apply to the image. This can be any valid CSS gradient declaration. You can find more information on the [MDN documentation for gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient).",

package/dist/vuetify-labs.css

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.11-dev.2023-08-07
+* Vuetify v3.3.11-dev.2023-08-09
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -18084,6 +18084,90 @@ html.overflow-y-hidden {
   text-transform: none;
   word-break: normal;
   word-wrap: break-word;
+}.v-autocomplete .v-field .v-text-field__prefix,
+.v-autocomplete .v-field .v-text-field__suffix,
+.v-autocomplete .v-field .v-field__input, .v-autocomplete .v-field.v-field {
+  cursor: text;
+}
+.v-autocomplete .v-field .v-field__input > input {
+  align-self: flex-start;
+  flex: 1 1;
+}
+.v-autocomplete .v-field input {
+  min-width: 64px;
+}
+.v-autocomplete .v-field:not(.v-field--focused) input {
+  min-width: 0;
+}
+.v-autocomplete .v-field--dirty .v-autocomplete__selection {
+  margin-inline-end: 2px;
+}
+.v-autocomplete .v-autocomplete__selection-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v-autocomplete__content {
+  overflow: hidden;
+  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));
+  border-radius: 4px;
+}
+.v-autocomplete__mask {
+  background: rgb(var(--v-theme-on-surface-variant));
+}
+.v-autocomplete__selection {
+  display: inline-flex;
+  align-items: center;
+  letter-spacing: inherit;
+  line-height: inherit;
+  max-width: 90%;
+}
+.v-autocomplete__selection {
+  margin-top: var(--v-input-chips-margin-top);
+  margin-bottom: var(--v-input-chips-margin-bottom);
+}
+.v-autocomplete__selection:first-child {
+  margin-inline-start: 0;
+}
+.v-autocomplete--selecting-index .v-autocomplete__selection {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.v-autocomplete--selecting-index .v-autocomplete__selection--selected {
+  opacity: 1;
+}
+.v-autocomplete--selecting-index .v-field__input > input {
+  caret-color: transparent;
+}
+.v-autocomplete--single.v-text-field input {
+  flex: 1 1;
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding-inline-start: inherit;
+  padding-inline-end: inherit;
+}
+.v-autocomplete--single .v-field--variant-outlined input {
+  top: 50%;
+  transform: translateY(calc(-50% - (var(--v-input-chips-margin-top) + var(--v-input-chips-margin-bottom)) / 2));
+}
+.v-autocomplete--single .v-field--active input {
+  transition: none;
+}
+.v-autocomplete--single .v-field--dirty:not(.v-field--focused) input {
+  opacity: 0;
+}
+.v-autocomplete--single .v-field--focused .v-autocomplete__selection {
+  opacity: 0;
+}
+.v-autocomplete__menu-icon {
+  margin-inline-start: 4px;
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-autocomplete--active-menu .v-autocomplete__menu-icon {
+  opacity: var(--v-high-emphasis-opacity);
+  transform: rotate(180deg);
 }.v-avatar {
   flex: none;
   align-items: center;
@@ -19267,68 +19351,6 @@ html.overflow-y-hidden {
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
-}.v-carousel {
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
-.v-carousel__controls {
-  align-items: center;
-  background: rgba(var(--v-theme-surface-variant), 0.3);
-  bottom: 0;
-  display: flex;
-  height: 50px;
-  justify-content: center;
-  list-style-type: none;
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-}
-.v-carousel__controls > .v-item-group {
-  flex: 0 1 auto;
-}
-.v-carousel__controls__item {
-  margin: 0 8px;
-}
-.v-carousel__controls__item .v-icon {
-  opacity: 0.5;
-}
-.v-carousel__controls__item--active .v-icon {
-  opacity: 1;
-  vertical-align: middle;
-}
-.v-carousel__controls__item:hover {
-  background: none;
-}
-.v-carousel__controls__item:hover .v-icon {
-  opacity: 0.8;
-}
-
-.v-carousel__progress {
-  margin: 0;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.v-carousel-item {
-  display: block;
-  height: inherit;
-  text-decoration: none;
-}
-.v-carousel-item > .v-img {
-  height: inherit;
-}
-
-.v-carousel--hide-delimiter-background .v-carousel__controls {
-  background: transparent;
-}
-
-.v-carousel--vertical-delimiters .v-carousel__controls {
-  flex-direction: column;
-  height: 100% !important;
-  width: 50px;
 }.v-checkbox .v-selection-control {
   min-height: var(--v-input-control-height);
 }.v-chip {
@@ -19777,6 +19799,68 @@ html.overflow-y-hidden {
 }
 .v-color-picker--flat .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb {
   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-carousel {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.v-carousel__controls {
+  align-items: center;
+  background: rgba(var(--v-theme-surface-variant), 0.3);
+  bottom: 0;
+  display: flex;
+  height: 50px;
+  justify-content: center;
+  list-style-type: none;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+.v-carousel__controls > .v-item-group {
+  flex: 0 1 auto;
+}
+.v-carousel__controls__item {
+  margin: 0 8px;
+}
+.v-carousel__controls__item .v-icon {
+  opacity: 0.5;
+}
+.v-carousel__controls__item--active .v-icon {
+  opacity: 1;
+  vertical-align: middle;
+}
+.v-carousel__controls__item:hover {
+  background: none;
+}
+.v-carousel__controls__item:hover .v-icon {
+  opacity: 0.8;
+}
+
+.v-carousel__progress {
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.v-carousel-item {
+  display: block;
+  height: inherit;
+  text-decoration: none;
+}
+.v-carousel-item > .v-img {
+  height: inherit;
+}
+
+.v-carousel--hide-delimiter-background .v-carousel__controls {
+  background: transparent;
+}
+
+.v-carousel--vertical-delimiters .v-carousel__controls {
+  flex-direction: column;
+  height: 100% !important;
+  width: 50px;
 }.v-combobox .v-field .v-text-field__prefix,
 .v-combobox .v-field .v-text-field__suffix,
 .v-combobox .v-field .v-field__input, .v-combobox .v-field.v-field {
@@ -19861,11 +19945,6 @@ html.overflow-y-hidden {
 .v-combobox--active-menu .v-combobox__menu-icon {
   opacity: var(--v-high-emphasis-opacity);
   transform: rotate(180deg);
-}.v-counter {
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  flex: 0 1 auto;
-  font-size: 12px;
-  transition-duration: 150ms;
 }.v-container {
   width: 100%;
   padding: 16px;
@@ -20747,6 +20826,11 @@ html.overflow-y-hidden {
   .offset-xxl-11.v-locale--is-rtl, .v-locale--is-rtl .offset-xxl-11 {
     margin-right: 91.6666666667%;
   }
+}.v-counter {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  flex: 0 1 auto;
+  font-size: 12px;
+  transition-duration: 150ms;
 }.v-dialog {
   align-items: center;
   justify-content: center;
@@ -21843,90 +21927,6 @@ textarea.v-field__input::placeholder {
   max-width: 100%;
   position: relative;
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}.v-autocomplete .v-field .v-text-field__prefix,
-.v-autocomplete .v-field .v-text-field__suffix,
-.v-autocomplete .v-field .v-field__input, .v-autocomplete .v-field.v-field {
-  cursor: text;
-}
-.v-autocomplete .v-field .v-field__input > input {
-  align-self: flex-start;
-  flex: 1 1;
-}
-.v-autocomplete .v-field input {
-  min-width: 64px;
-}
-.v-autocomplete .v-field:not(.v-field--focused) input {
-  min-width: 0;
-}
-.v-autocomplete .v-field--dirty .v-autocomplete__selection {
-  margin-inline-end: 2px;
-}
-.v-autocomplete .v-autocomplete__selection-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.v-autocomplete__content {
-  overflow: hidden;
-  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));
-  border-radius: 4px;
-}
-.v-autocomplete__mask {
-  background: rgb(var(--v-theme-on-surface-variant));
-}
-.v-autocomplete__selection {
-  display: inline-flex;
-  align-items: center;
-  letter-spacing: inherit;
-  line-height: inherit;
-  max-width: 90%;
-}
-.v-autocomplete__selection {
-  margin-top: var(--v-input-chips-margin-top);
-  margin-bottom: var(--v-input-chips-margin-bottom);
-}
-.v-autocomplete__selection:first-child {
-  margin-inline-start: 0;
-}
-.v-autocomplete--selecting-index .v-autocomplete__selection {
-  opacity: var(--v-medium-emphasis-opacity);
-}
-.v-autocomplete--selecting-index .v-autocomplete__selection--selected {
-  opacity: 1;
-}
-.v-autocomplete--selecting-index .v-field__input > input {
-  caret-color: transparent;
-}
-.v-autocomplete--single.v-text-field input {
-  flex: 1 1;
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-  padding-inline-start: inherit;
-  padding-inline-end: inherit;
-}
-.v-autocomplete--single .v-field--variant-outlined input {
-  top: 50%;
-  transform: translateY(calc(-50% - (var(--v-input-chips-margin-top) + var(--v-input-chips-margin-bottom)) / 2));
-}
-.v-autocomplete--single .v-field--active input {
-  transition: none;
-}
-.v-autocomplete--single .v-field--dirty:not(.v-field--focused) input {
-  opacity: 0;
-}
-.v-autocomplete--single .v-field--focused .v-autocomplete__selection {
-  opacity: 0;
-}
-.v-autocomplete__menu-icon {
-  margin-inline-start: 4px;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-autocomplete--active-menu .v-autocomplete__menu-icon {
-  opacity: var(--v-high-emphasis-opacity);
-  transform: rotate(180deg);
 }.v-label {
   align-items: center;
   display: inline-flex;
@@ -21956,36 +21956,6 @@ textarea.v-field__input::placeholder {
 
 .v-layout-item--absolute {
   position: absolute;
-}.v-locale-provider {
-  display: contents;
-}.v-main {
-  flex: 1 0 auto;
-  max-width: 100%;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  padding-left: var(--v-layout-left);
-  padding-right: var(--v-layout-right);
-  padding-top: var(--v-layout-top);
-  padding-bottom: var(--v-layout-bottom);
-}
-.v-main__scroller {
-  max-width: 100%;
-  position: relative;
-}
-.v-main--scrollable {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.v-main--scrollable > .v-main__scroller {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  --v-layout-left: 0px;
-  --v-layout-right: 0px;
-  --v-layout-top: 0px;
-  --v-layout-bottom: 0px;
 }.v-list {
   overflow: auto;
   padding: 8px 0;
@@ -22503,6 +22473,36 @@ textarea.v-field__input::placeholder {
 }
 .v-list-group__header.v-list-item--active:hover .v-list-item__overlay {
   opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+}.v-locale-provider {
+  display: contents;
+}.v-main {
+  flex: 1 0 auto;
+  max-width: 100%;
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  padding-left: var(--v-layout-left);
+  padding-right: var(--v-layout-right);
+  padding-top: var(--v-layout-top);
+  padding-bottom: var(--v-layout-bottom);
+}
+.v-main__scroller {
+  max-width: 100%;
+  position: relative;
+}
+.v-main--scrollable {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.v-main--scrollable > .v-main__scroller {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  --v-layout-left: 0px;
+  --v-layout-right: 0px;
+  --v-layout-top: 0px;
+  --v-layout-bottom: 0px;
 }.v-menu > .v-overlay__content {
   display: flex;
   flex-direction: column;
@@ -24579,15 +24579,6 @@ html.v-overlay-scroll-blocked {
 .v-tooltip > .v-overlay__content[class*=leave-active] {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
   transition-duration: 75ms;
-}.v-virtual-scroll {
-  display: block;
-  flex: 1 1 auto;
-  max-width: 100%;
-  overflow: auto;
-  position: relative;
-}
-.v-virtual-scroll__container {
-  display: block;
 }.v-window {
   overflow: hidden;
 }
@@ -24657,27 +24648,15 @@ html.v-overlay-scroll-blocked {
 }
 .v-window-y-reverse-transition-leave-to {
   transform: translateY(100%);
-}.v-color-picker-canvas {
-  display: flex;
+}.v-virtual-scroll {
+  display: block;
+  flex: 1 1 auto;
+  max-width: 100%;
+  overflow: auto;
   position: relative;
-  overflow: hidden;
-  contain: content;
-}
-.v-color-picker-canvas__dot {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 15px;
-  height: 15px;
-  background: transparent;
-  border-radius: 50%;
-  box-shadow: 0px 0px 0px 1.5px rgb(255, 255, 255), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
-}
-.v-color-picker-canvas__dot--disabled {
-  box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
 }
-.v-color-picker-canvas:hover .v-color-picker-canvas__dot {
-  will-change: transform;
+.v-virtual-scroll__container {
+  display: block;
 }.v-color-picker-edit {
   display: flex;
   margin-top: 24px;
@@ -24709,6 +24688,27 @@ html.v-overlay-scroll-blocked {
 }
 .v-color-picker-edit__input span {
   font-size: 0.75rem;
+}.v-color-picker-canvas {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  contain: content;
+}
+.v-color-picker-canvas__dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 15px;
+  height: 15px;
+  background: transparent;
+  border-radius: 50%;
+  box-shadow: 0px 0px 0px 1.5px rgb(255, 255, 255), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
+}
+.v-color-picker-canvas__dot--disabled {
+  box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
+}
+.v-color-picker-canvas:hover .v-color-picker-canvas__dot {
+  will-change: transform;
 }.v-color-picker-preview__alpha .v-slider-track__background {
   background-color: transparent !important;
 }
@@ -24775,6 +24775,11 @@ html.v-overlay-scroll-blocked {
   align-items: center;
   display: flex;
   margin-bottom: 0;
+}
+
+.v-color-picker-preview__eye-dropper {
+  position: relative;
+  margin-right: 12px;
 }.v-color-picker-swatches {
   overflow-y: auto;
 }