@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

package/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VColorPicker.ts should change canvas height 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
+<div class="v-sheet theme--light v-color-picker theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -23,15 +23,16 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="0"
-                       id="input-15"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-16"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__hue"
+                       value="0"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -43,15 +44,15 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 0%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="360"
                      aria-valuenow="0"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 0%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -60,15 +61,16 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="1"
-                       id="input-16"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-17"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__alpha"
+                       value="1"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -80,15 +82,15 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 100%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="1"
                      aria-valuenow="1"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 100%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -105,6 +107,7 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
                min="0"
                max="255"
                step="1"
+               value="255"
         >
         <span>
           R
@@ -115,6 +118,7 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           G
@@ -125,6 +129,7 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           B
@@ -135,19 +140,19 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
                min="0"
                max="1"
                step="0.01"
+               value="1"
         >
         <span>
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
              class="v-icon notranslate material-icons theme--light"
           >
-            $unfold
           </i>
         </span>
       </button>
@@ -157,7 +162,7 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
 `;
 
 exports[`VColorPicker.ts should hide canvas 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
+<div class="v-sheet theme--light v-color-picker theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__controls">
@@ -167,15 +172,16 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="0"
-                       id="input-35"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-38"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__hue"
+                       value="0"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -187,15 +193,15 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 0%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="360"
                      aria-valuenow="0"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 0%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -204,15 +210,16 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="1"
-                       id="input-36"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-39"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__alpha"
+                       value="1"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -224,15 +231,15 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 100%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="1"
                      aria-valuenow="1"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 100%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -249,6 +256,7 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
                min="0"
                max="255"
                step="1"
+               value="255"
         >
         <span>
           R
@@ -259,6 +267,7 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           G
@@ -269,6 +278,7 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           B
@@ -279,19 +289,19 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
                min="0"
                max="1"
                step="0.01"
+               value="1"
         >
         <span>
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
              class="v-icon notranslate material-icons theme--light"
           >
-            $unfold
           </i>
         </span>
       </button>
@@ -301,7 +311,7 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
 `;
 
 exports[`VColorPicker.ts should hide controls 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
+<div class="v-sheet theme--light v-color-picker theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -320,7 +330,7 @@ exports[`VColorPicker.ts should hide controls 1`] = `
 `;
 
 exports[`VColorPicker.ts should hide inputs 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
+<div class="v-sheet theme--light v-color-picker theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -342,15 +352,16 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="0"
-                       id="input-52"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-57"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__hue"
+                       value="0"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -362,15 +373,15 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 0%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="360"
                      aria-valuenow="0"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 0%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -379,15 +390,16 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="1"
-                       id="input-53"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-58"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__alpha"
+                       value="1"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -399,15 +411,15 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 100%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="1"
                      aria-valuenow="1"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 100%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -423,7 +435,7 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
 `;
 
 exports[`VColorPicker.ts should hide sliders 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
+<div class="v-sheet theme--light v-color-picker theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -445,6 +457,7 @@ exports[`VColorPicker.ts should hide sliders 1`] = `
                min="0"
                max="255"
                step="1"
+               value="255"
         >
         <span>
           R
@@ -455,6 +468,7 @@ exports[`VColorPicker.ts should hide sliders 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           G
@@ -465,6 +479,7 @@ exports[`VColorPicker.ts should hide sliders 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           B
@@ -475,19 +490,19 @@ exports[`VColorPicker.ts should hide sliders 1`] = `
                min="0"
                max="1"
                step="0.01"
+               value="1"
         >
         <span>
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
              class="v-icon notranslate material-icons theme--light"
           >
-            $unfold
           </i>
         </span>
       </button>
@@ -497,7 +512,7 @@ exports[`VColorPicker.ts should hide sliders 1`] = `
 `;
 
 exports[`VColorPicker.ts should not show alpha controls if given hex value without alpha 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
+<div class="v-sheet theme--light v-color-picker theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -519,15 +534,16 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="120"
-                       id="input-81"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-88"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__hue"
+                       value="120"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -539,15 +555,15 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 33.33333333333333%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="360"
                      aria-valuenow="120"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 33.33333333333333%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -564,6 +580,7 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           R
@@ -574,6 +591,7 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
                min="0"
                max="255"
                step="1"
+               value="255"
         >
         <span>
           G
@@ -584,19 +602,19 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           B
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
              class="v-icon notranslate material-icons theme--light"
           >
-            $unfold
           </i>
         </span>
       </button>
@@ -606,7 +624,7 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
 `;
 
 exports[`VColorPicker.ts should render color picker 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
+<div class="v-sheet theme--light v-color-picker theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -628,15 +646,16 @@ exports[`VColorPicker.ts should render color picker 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="0"
-                       id="input-5"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-5"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__hue"
+                       value="0"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -648,15 +667,15 @@ exports[`VColorPicker.ts should render color picker 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 0%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="360"
                      aria-valuenow="0"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 0%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -665,15 +684,16 @@ exports[`VColorPicker.ts should render color picker 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="1"
-                       id="input-6"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-6"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__alpha"
+                       value="1"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -685,15 +705,15 @@ exports[`VColorPicker.ts should render color picker 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 100%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="1"
                      aria-valuenow="1"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 100%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -710,6 +730,7 @@ exports[`VColorPicker.ts should render color picker 1`] = `
                min="0"
                max="255"
                step="1"
+               value="255"
         >
         <span>
           R
@@ -720,6 +741,7 @@ exports[`VColorPicker.ts should render color picker 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           G
@@ -730,6 +752,7 @@ exports[`VColorPicker.ts should render color picker 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           B
@@ -740,19 +763,19 @@ exports[`VColorPicker.ts should render color picker 1`] = `
                min="0"
                max="1"
                step="0.01"
+               value="1"
         >
         <span>
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
              class="v-icon notranslate material-icons theme--light"
           >
-            $unfold
           </i>
         </span>
       </button>
@@ -762,7 +785,7 @@ exports[`VColorPicker.ts should render color picker 1`] = `
 `;
 
 exports[`VColorPicker.ts should render flat picker 1`] = `
-<div class="v-color-picker v-sheet theme--light v-color-picker--flat theme--light"
+<div class="v-sheet theme--light v-color-picker v-color-picker--flat theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -784,15 +807,16 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="0"
-                       id="input-100"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-109"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__hue"
+                       value="0"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -804,15 +828,15 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 0%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="360"
                      aria-valuenow="0"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 0%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -821,15 +845,16 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="1"
-                       id="input-101"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-110"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__alpha"
+                       value="1"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -841,15 +866,15 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 100%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="1"
                      aria-valuenow="1"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 100%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -866,6 +891,7 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
                min="0"
                max="255"
                step="1"
+               value="255"
         >
         <span>
           R
@@ -876,6 +902,7 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           G
@@ -886,6 +913,7 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           B
@@ -896,19 +924,19 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
                min="0"
                max="1"
                step="0.01"
+               value="1"
         >
         <span>
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
              class="v-icon notranslate material-icons theme--light"
           >
-            $unfold
           </i>
         </span>
       </button>
@@ -918,7 +946,7 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
 `;
 
 exports[`VColorPicker.ts should render picker with elevation 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light elevation-15"
+<div class="v-sheet theme--light v-color-picker theme--light elevation-15"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -940,15 +968,16 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="0"
-                       id="input-110"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-120"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__hue"
+                       value="0"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -960,15 +989,15 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 0%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="360"
                      aria-valuenow="0"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 0%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -977,15 +1006,16 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="1"
-                       id="input-111"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-121"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__alpha"
+                       value="1"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -997,15 +1027,15 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 100%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="1"
                      aria-valuenow="1"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 100%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -1022,6 +1052,7 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
                min="0"
                max="255"
                step="1"
+               value="255"
         >
         <span>
           R
@@ -1032,6 +1063,7 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           G
@@ -1042,6 +1074,7 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           B
@@ -1052,19 +1085,19 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
                min="0"
                max="1"
                step="0.01"
+               value="1"
         >
         <span>
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
              class="v-icon notranslate material-icons theme--light"
           >
-            $unfold
           </i>
         </span>
       </button>
@@ -1074,7 +1107,7 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
 `;
 
 exports[`VColorPicker.ts should show swatches 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
+<div class="v-sheet theme--light v-color-picker theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -1096,15 +1129,16 @@ exports[`VColorPicker.ts should show swatches 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="0"
-                       id="input-25"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-27"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__hue"
+                       value="0"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -1116,15 +1150,15 @@ exports[`VColorPicker.ts should show swatches 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 0%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="360"
                      aria-valuenow="0"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 0%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -1133,15 +1167,16 @@ exports[`VColorPicker.ts should show swatches 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="1"
-                       id="input-26"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-28"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__alpha"
+                       value="1"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -1153,15 +1188,15 @@ exports[`VColorPicker.ts should show swatches 1`] = `
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 100%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="1"
                      aria-valuenow="1"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 100%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -1178,6 +1213,7 @@ exports[`VColorPicker.ts should show swatches 1`] = `
                min="0"
                max="255"
                step="1"
+               value="255"
         >
         <span>
           R
@@ -1188,6 +1224,7 @@ exports[`VColorPicker.ts should show swatches 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           G
@@ -1198,6 +1235,7 @@ exports[`VColorPicker.ts should show swatches 1`] = `
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           B
@@ -1208,25 +1246,25 @@ exports[`VColorPicker.ts should show swatches 1`] = `
                min="0"
                max="1"
                step="0.01"
+               value="1"
         >
         <span>
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
              class="v-icon notranslate material-icons theme--light"
           >
-            $unfold
           </i>
         </span>
       </button>
     </div>
   </div>
-  <div class="v-color-picker__swatches"
+  <div class="v-color-picker__swatches theme--light"
        style="max-height: 150px;"
   >
     <div>
@@ -2048,7 +2086,7 @@ exports[`VColorPicker.ts should show swatches 1`] = `
 `;
 
 exports[`VColorPicker.ts should work correctly when initial value is null 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
+<div class="v-sheet theme--light v-color-picker theme--light"
      style="max-width: 300px;"
 >
   <div class="v-color-picker__canvas"
@@ -2070,15 +2108,16 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="0"
-                       id="input-90"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-98"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__hue"
+                       value="0"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -2090,15 +2129,15 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 0%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="360"
                      aria-valuenow="0"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 0%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -2107,15 +2146,16 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
             </div>
           </div>
         </div>
-        <div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
-                <input value="1"
-                       id="input-91"
-                       disabled="disabled"
-                       readonly="readonly"
+                <input id="input-99"
+                       disabled
+                       readonly
                        tabindex="-1"
+                       class="v-color-picker__alpha"
+                       value="1"
                 >
                 <div class="v-slider__track-container">
                   <div class="v-slider__track-background primary lighten-3"
@@ -2127,15 +2167,15 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
                   >
                   </div>
                 </div>
-                <div role="slider"
+                <div class="v-slider__thumb-container grey--text text--lighten-2"
+                     style="left: 100%;"
+                     role="slider"
                      tabindex="0"
                      aria-valuemin="0"
                      aria-valuemax="1"
                      aria-valuenow="1"
                      aria-readonly="false"
                      aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 100%;"
                 >
                   <div class="v-slider__thumb grey lighten-2">
                   </div>
@@ -2152,6 +2192,7 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
                min="0"
                max="255"
                step="1"
+               value="255"
         >
         <span>
           R
@@ -2162,6 +2203,7 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           G
@@ -2172,6 +2214,7 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
                min="0"
                max="255"
                step="1"
+               value="0"
         >
         <span>
           B
@@ -2182,19 +2225,19 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
                min="0"
                max="1"
                step="0.01"
+               value="1"
         >
         <span>
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
              class="v-icon notranslate material-icons theme--light"
           >
-            $unfold
           </i>
         </span>
       </button>