vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VSlideGroup/helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.mjs","names":["bias","val","c","x","Math","abs","sign","calculateUpdatedOffset","_ref","selectedElement","containerSize","contentSize","isRtl","currentScrollOffset","isHorizontal","clientSize","clientWidth","clientHeight","offsetStart","offsetLeft","offsetTop","adjustedOffsetStart","totalSize","itemOffset","additionalOffset","max","min","calculateCenteredOffset","_ref2","offsetCentered"],"sources":["../../../src/components/VSlideGroup/helpers.ts"],"sourcesContent":["export function bias (val: number) {\n  const c = 0.501\n  const x = Math.abs(val)\n  return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1))\n}\n\nexport function calculateUpdatedOffset ({\n  selectedElement,\n  containerSize,\n  contentSize,\n  isRtl,\n  currentScrollOffset,\n  isHorizontal,\n}: {\n  selectedElement: HTMLElement\n  containerSize: number\n  contentSize: number\n  isRtl: boolean\n  currentScrollOffset: number\n  isHorizontal: boolean\n}): number {\n  const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight\n  const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop\n  const adjustedOffsetStart = isRtl && isHorizontal ? (contentSize - offsetStart - clientSize) : offsetStart\n\n  const totalSize = containerSize + currentScrollOffset\n  const itemOffset = clientSize + adjustedOffsetStart\n  const additionalOffset = clientSize * 0.4\n\n  if (adjustedOffsetStart <= currentScrollOffset) {\n    currentScrollOffset = Math.max(adjustedOffsetStart - additionalOffset, 0)\n  } else if (totalSize <= itemOffset) {\n    currentScrollOffset = Math.min(currentScrollOffset - (totalSize - itemOffset - additionalOffset), contentSize - containerSize)\n  }\n\n  return currentScrollOffset\n}\n\nexport function calculateCenteredOffset ({\n  selectedElement,\n  containerSize,\n  contentSize,\n  isRtl,\n  isHorizontal,\n}: {\n  selectedElement: HTMLElement\n  containerSize: number\n  contentSize: number\n  isRtl: boolean\n  isHorizontal: boolean\n}): number {\n  const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight\n  const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop\n\n  const offsetCentered = isRtl && isHorizontal\n    ? contentSize - offsetStart - clientSize / 2 - containerSize / 2\n    : offsetStart + clientSize / 2 - containerSize / 2\n\n  return Math.min(contentSize - containerSize, Math.max(0, offsetCentered))\n}\n"],"mappings":"AAAA,OAAO,SAASA,IAAIA,CAAEC,GAAW,EAAE;EACjC,MAAMC,CAAC,GAAG,KAAK;EACf,MAAMC,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,GAAG,CAAC;EACvB,OAAOG,IAAI,CAACE,IAAI,CAACL,GAAG,CAAC,IAAIE,CAAC,IAAI,CAAC,CAAC,GAAGD,CAAC,GAAG,CAAC,KAAK,CAAC,GAAGC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC3D;AAEA,OAAO,SAASI,sBAAsBA,CAAAC,IAAA,EAc3B;EAAA,IAd6B;IACtCC,eAAe;IACfC,aAAa;IACbC,WAAW;IACXC,KAAK;IACLC,mBAAmB;IACnBC;EAQF,CAAC,GAAAN,IAAA;EACC,MAAMO,UAAU,GAAGD,YAAY,GAAGL,eAAe,CAACO,WAAW,GAAGP,eAAe,CAACQ,YAAY;EAC5F,MAAMC,WAAW,GAAGJ,YAAY,GAAGL,eAAe,CAACU,UAAU,GAAGV,eAAe,CAACW,SAAS;EACzF,MAAMC,mBAAmB,GAAGT,KAAK,IAAIE,YAAY,GAAIH,WAAW,GAAGO,WAAW,GAAGH,UAAU,GAAIG,WAAW;EAE1G,MAAMI,SAAS,GAAGZ,aAAa,GAAGG,mBAAmB;EACrD,MAAMU,UAAU,GAAGR,UAAU,GAAGM,mBAAmB;EACnD,MAAMG,gBAAgB,GAAGT,UAAU,GAAG,GAAG;EAEzC,IAAIM,mBAAmB,IAAIR,mBAAmB,EAAE;IAC9CA,mBAAmB,GAAGT,IAAI,CAACqB,GAAG,CAACJ,mBAAmB,GAAGG,gBAAgB,EAAE,CAAC,CAAC;EAC3E,CAAC,MAAM,IAAIF,SAAS,IAAIC,UAAU,EAAE;IAClCV,mBAAmB,GAAGT,IAAI,CAACsB,GAAG,CAACb,mBAAmB,IAAIS,SAAS,GAAGC,UAAU,GAAGC,gBAAgB,CAAC,EAAEb,WAAW,GAAGD,aAAa,CAAC;EAChI;EAEA,OAAOG,mBAAmB;AAC5B;AAEA,OAAO,SAASc,uBAAuBA,CAAAC,KAAA,EAY5B;EAAA,IAZ8B;IACvCnB,eAAe;IACfC,aAAa;IACbC,WAAW;IACXC,KAAK;IACLE;EAOF,CAAC,GAAAc,KAAA;EACC,MAAMb,UAAU,GAAGD,YAAY,GAAGL,eAAe,CAACO,WAAW,GAAGP,eAAe,CAACQ,YAAY;EAC5F,MAAMC,WAAW,GAAGJ,YAAY,GAAGL,eAAe,CAACU,UAAU,GAAGV,eAAe,CAACW,SAAS;EAEzF,MAAMS,cAAc,GAAGjB,KAAK,IAAIE,YAAY,GACxCH,WAAW,GAAGO,WAAW,GAAGH,UAAU,GAAG,CAAC,GAAGL,aAAa,GAAG,CAAC,GAC9DQ,WAAW,GAAGH,UAAU,GAAG,CAAC,GAAGL,aAAa,GAAG,CAAC;EAEpD,OAAON,IAAI,CAACsB,GAAG,CAACf,WAAW,GAAGD,aAAa,EAAEN,IAAI,CAACqB,GAAG,CAAC,CAAC,EAAEI,cAAc,CAAC,CAAC;AAC3E","ignoreList":[]}
+{"version":3,"file":"helpers.mjs","names":["calculateUpdatedTarget","_ref","selectedElement","containerElement","isRtl","isHorizontal","containerSize","getOffsetSize","scrollPosition","getScrollPosition","childrenSize","childrenStartPosition","getOffsetPosition","additionalOffset","calculateCenteredTarget","_ref2","containerOffsetSize","childrenOffsetPosition","childrenOffsetSize","getScrollSize","element","key","getClientSize","rtl","scrollLeft","offsetWidth","scrollWidth","scrollTop"],"sources":["../../../src/components/VSlideGroup/helpers.ts"],"sourcesContent":["export function calculateUpdatedTarget ({\n  selectedElement,\n  containerElement,\n  isRtl,\n  isHorizontal,\n}: {\n  selectedElement: HTMLElement\n  containerElement: HTMLElement\n  isRtl: boolean\n  isHorizontal: boolean\n}): number {\n  const containerSize = getOffsetSize(isHorizontal, containerElement)\n  const scrollPosition = getScrollPosition(isHorizontal, isRtl, containerElement)\n\n  const childrenSize = getOffsetSize(isHorizontal, selectedElement)\n  const childrenStartPosition = getOffsetPosition(isHorizontal, selectedElement)\n\n  const additionalOffset = childrenSize * 0.4\n\n  if (scrollPosition > childrenStartPosition) {\n    return childrenStartPosition - additionalOffset\n  } else if (scrollPosition + containerSize < childrenStartPosition + childrenSize) {\n    return childrenStartPosition - containerSize + childrenSize + additionalOffset\n  }\n\n  return scrollPosition\n}\n\nexport function calculateCenteredTarget ({\n  selectedElement,\n  containerElement,\n  isHorizontal,\n}: {\n  selectedElement: HTMLElement\n  containerElement: HTMLElement\n  isHorizontal: boolean\n}): number {\n  const containerOffsetSize = getOffsetSize(isHorizontal, containerElement)\n  const childrenOffsetPosition = getOffsetPosition(isHorizontal, selectedElement)\n  const childrenOffsetSize = getOffsetSize(isHorizontal, selectedElement)\n\n  return childrenOffsetPosition - (containerOffsetSize / 2) + (childrenOffsetSize / 2)\n}\n\nexport function getScrollSize (isHorizontal: boolean, element?: HTMLElement) {\n  const key = isHorizontal ? 'scrollWidth' : 'scrollHeight'\n  return element?.[key] || 0\n}\n\nexport function getClientSize (isHorizontal: boolean, element?: HTMLElement) {\n  const key = isHorizontal ? 'clientWidth' : 'clientHeight'\n  return element?.[key] || 0\n}\n\nexport function getScrollPosition (isHorizontal: boolean, rtl: boolean, element?: HTMLElement) {\n  if (!element) {\n    return 0\n  }\n\n  const {\n    scrollLeft,\n    offsetWidth,\n    scrollWidth,\n  } = element\n\n  if (isHorizontal) {\n    return rtl\n      ? scrollWidth - offsetWidth + scrollLeft\n      : scrollLeft\n  }\n\n  return element.scrollTop\n}\n\nexport function getOffsetSize (isHorizontal: boolean, element?: HTMLElement) {\n  const key = isHorizontal ? 'offsetWidth' : 'offsetHeight'\n  return element?.[key] || 0\n}\n\nexport function getOffsetPosition (isHorizontal: boolean, element?: HTMLElement) {\n  const key = isHorizontal ? 'offsetLeft' : 'offsetTop'\n  return element?.[key] || 0\n}\n"],"mappings":"AAAA,OAAO,SAASA,sBAAsBA,CAAAC,IAAA,EAU3B;EAAA,IAV6B;IACtCC,eAAe;IACfC,gBAAgB;IAChBC,KAAK;IACLC;EAMF,CAAC,GAAAJ,IAAA;EACC,MAAMK,aAAa,GAAGC,aAAa,CAACF,YAAY,EAAEF,gBAAgB,CAAC;EACnE,MAAMK,cAAc,GAAGC,iBAAiB,CAACJ,YAAY,EAAED,KAAK,EAAED,gBAAgB,CAAC;EAE/E,MAAMO,YAAY,GAAGH,aAAa,CAACF,YAAY,EAAEH,eAAe,CAAC;EACjE,MAAMS,qBAAqB,GAAGC,iBAAiB,CAACP,YAAY,EAAEH,eAAe,CAAC;EAE9E,MAAMW,gBAAgB,GAAGH,YAAY,GAAG,GAAG;EAE3C,IAAIF,cAAc,GAAGG,qBAAqB,EAAE;IAC1C,OAAOA,qBAAqB,GAAGE,gBAAgB;EACjD,CAAC,MAAM,IAAIL,cAAc,GAAGF,aAAa,GAAGK,qBAAqB,GAAGD,YAAY,EAAE;IAChF,OAAOC,qBAAqB,GAAGL,aAAa,GAAGI,YAAY,GAAGG,gBAAgB;EAChF;EAEA,OAAOL,cAAc;AACvB;AAEA,OAAO,SAASM,uBAAuBA,CAAAC,KAAA,EAQ5B;EAAA,IAR8B;IACvCb,eAAe;IACfC,gBAAgB;IAChBE;EAKF,CAAC,GAAAU,KAAA;EACC,MAAMC,mBAAmB,GAAGT,aAAa,CAACF,YAAY,EAAEF,gBAAgB,CAAC;EACzE,MAAMc,sBAAsB,GAAGL,iBAAiB,CAACP,YAAY,EAAEH,eAAe,CAAC;EAC/E,MAAMgB,kBAAkB,GAAGX,aAAa,CAACF,YAAY,EAAEH,eAAe,CAAC;EAEvE,OAAOe,sBAAsB,GAAID,mBAAmB,GAAG,CAAE,GAAIE,kBAAkB,GAAG,CAAE;AACtF;AAEA,OAAO,SAASC,aAAaA,CAAEd,YAAqB,EAAEe,OAAqB,EAAE;EAC3E,MAAMC,GAAG,GAAGhB,YAAY,GAAG,aAAa,GAAG,cAAc;EACzD,OAAOe,OAAO,GAAGC,GAAG,CAAC,IAAI,CAAC;AAC5B;AAEA,OAAO,SAASC,aAAaA,CAAEjB,YAAqB,EAAEe,OAAqB,EAAE;EAC3E,MAAMC,GAAG,GAAGhB,YAAY,GAAG,aAAa,GAAG,cAAc;EACzD,OAAOe,OAAO,GAAGC,GAAG,CAAC,IAAI,CAAC;AAC5B;AAEA,OAAO,SAASZ,iBAAiBA,CAAEJ,YAAqB,EAAEkB,GAAY,EAAEH,OAAqB,EAAE;EAC7F,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO,CAAC;EACV;EAEA,MAAM;IACJI,UAAU;IACVC,WAAW;IACXC;EACF,CAAC,GAAGN,OAAO;EAEX,IAAIf,YAAY,EAAE;IAChB,OAAOkB,GAAG,GACNG,WAAW,GAAGD,WAAW,GAAGD,UAAU,GACtCA,UAAU;EAChB;EAEA,OAAOJ,OAAO,CAACO,SAAS;AAC1B;AAEA,OAAO,SAASpB,aAAaA,CAAEF,YAAqB,EAAEe,OAAqB,EAAE;EAC3E,MAAMC,GAAG,GAAGhB,YAAY,GAAG,aAAa,GAAG,cAAc;EACzD,OAAOe,OAAO,GAAGC,GAAG,CAAC,IAAI,CAAC;AAC5B;AAEA,OAAO,SAAST,iBAAiBA,CAAEP,YAAqB,EAAEe,OAAqB,EAAE;EAC/E,MAAMC,GAAG,GAAGhB,YAAY,GAAG,YAAY,GAAG,WAAW;EACrD,OAAOe,OAAO,GAAGC,GAAG,CAAC,IAAI,CAAC;AAC5B","ignoreList":[]}

package/lib/components/VSlideGroup/index.d.mts

@@ -41,6 +41,7 @@ interface GroupItem {
     id: number;
     value: Ref<unknown>;
     disabled: Ref<boolean | undefined>;
+    useIndexAsValue?: boolean;
 }
 interface GroupProvide {
     register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
@@ -87,6 +88,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -111,6 +113,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -128,6 +131,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -156,6 +160,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -178,6 +183,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -193,6 +199,7 @@ declare const VSlideGroup: {
     style: vue.StyleValue;
     disabled: boolean;
     tag: string;
+    mobile: boolean;
     multiple: boolean;
     direction: "horizontal" | "vertical";
     selectedClass: string;
@@ -217,6 +224,7 @@ declare const VSlideGroup: {
     style: vue.StyleValue;
     disabled: boolean;
     tag: string;
+    mobile: boolean;
     multiple: boolean;
     direction: "horizontal" | "vertical";
     selectedClass: string;
@@ -256,6 +264,10 @@ declare const VSlideGroup: {
         type: StringConstructor;
         default: string;
     };
+    mobile: {
+        type: BooleanConstructor;
+        default: null;
+    };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;
     style: {
@@ -300,6 +312,10 @@ declare const VSlideGroup: {
         type: StringConstructor;
         default: string;
     };
+    mobile: {
+        type: BooleanConstructor;
+        default: null;
+    };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;
     style: {

package/lib/components/VSlider/VSlider.sass

@@ -4,59 +4,60 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-// Block
-.v-slider
-  .v-slider__container
-    input
-      cursor: default
+@include tools.layer('components')
+  // Block
+  .v-slider
+    .v-slider__container
+      input
+        cursor: default
+        padding: 0
+        width: 100%
+        display: none
+
+    > .v-input__append,
+    > .v-input__prepend
       padding: 0
-      width: 100%
-      display: none
-
-  > .v-input__append,
-  > .v-input__prepend
-    padding: 0
-
-// Elements
-.v-slider__container
-  position: relative
-  min-height: inherit
-  width: 100%
-  height: 100%
-  display: flex
-  justify-content: center
-  align-items: center
-  cursor: pointer
-
-  .v-input--disabled &
-    opacity: var(--v-disabled-opacity)
-
-  .v-input--error:not(.v-input--disabled) &
-    color: rgb(var(--v-theme-error))
-
-// Modifiers
-.v-slider.v-input--horizontal
-  align-items: center
-  margin-inline: $slider-horizontal-start $slider-horizontal-end
-
-  > .v-input__control
-    min-height: $slider-horizontal-min-height
+
+  // Elements
+  .v-slider__container
+    position: relative
+    min-height: inherit
+    width: 100%
+    height: 100%
     display: flex
+    justify-content: center
+    align-items: center
+    cursor: pointer
+
+    .v-input--disabled &
+      opacity: var(--v-disabled-opacity)
+
+    .v-input--error:not(.v-input--disabled) &
+      color: rgb(var(--v-theme-error))
+
+  // Modifiers
+  .v-slider.v-input--horizontal
     align-items: center
+    margin-inline: $slider-horizontal-start $slider-horizontal-end
+
+    > .v-input__control
+      min-height: $slider-horizontal-min-height
+      display: flex
+      align-items: center
 
-.v-slider.v-input--vertical
-  justify-content: center
-  margin-top: $slider-vertical-margin-top
-  margin-bottom: $slider-vertical-margin-bottom
+  .v-slider.v-input--vertical
+    justify-content: center
+    margin-top: $slider-vertical-margin-top
+    margin-bottom: $slider-vertical-margin-bottom
 
-  > .v-input__control
-    min-height: $slider-vertical-min-height
+    > .v-input__control
+      min-height: $slider-vertical-min-height
 
-.v-slider.v-input--disabled
-  pointer-events: none
+  .v-slider.v-input--disabled
+    pointer-events: none
 
-.v-slider--has-labels > .v-input__control
-  margin-bottom: $slider-tick-label-margin-top * .5
+  .v-slider--has-labels > .v-input__control
+    margin-bottom: $slider-tick-label-margin-top * .5
 
-.v-slider__label
-  margin-inline-end: $slider-label-margin-end
+  .v-slider__label
+    margin-inline-end: $slider-label-margin-end

package/lib/components/VSlider/VSliderThumb.sass

@@ -5,150 +5,151 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-// Theme
-.v-slider-thumb
-  touch-action: none
-  color: rgb(var(--v-theme-surface-variant))
-
-  .v-input--error:not(.v-input--disabled) &
-    color: inherit
-
-.v-slider-thumb__label
-  background: rgba(var(--v-theme-surface-variant), .7)
-  color: rgb(var(--v-theme-on-surface-variant))
-
-  &::before
-    color: rgba(var(--v-theme-surface-variant), .7)
-
-// Block
-.v-slider-thumb
-  outline: none
-  position: absolute
-  transition: $slider-transition
-
-.v-slider-thumb__surface
-  cursor: pointer
-  width: var(--v-slider-thumb-size)
-  height: var(--v-slider-thumb-size)
-  border-radius: $slider-thumb-border-radius
-  user-select: none
-  background-color: currentColor
-
-  &::before
-    transition: 0.3s settings.$standard-easing
-    content: ''
-    color: inherit
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    border-radius: $slider-thumb-border-radius
-    background: currentColor
-    position: absolute
-    pointer-events: none
-    opacity: 0
-
-  &::after
-    content: ''
-    width: $slider-thumb-touch-size
-    height: $slider-thumb-touch-size
-    position: absolute
-    top: 50%
-    left: 50%
-    transform: translate(-50%, -50%)
-
-.v-slider-thumb__label-container
-  position: absolute
-  transition: $slider-thumb-label-transition
-
-.v-slider-thumb__label
-  display: flex
-  align-items: center
-  justify-content: center
-  font-size: $slider-thumb-label-font-size
-  min-width: $slider-thumb-label-min-width
-  height: $slider-thumb-label-height
-  border-radius: $slider-thumb-label-border-radius
-  padding: $slider-thumb-label-padding
-  position: absolute
-  user-select: none
-  transition: $slider-thumb-label-transition
-
-  &::before
-    content: ''
-    width: 0
-    height: 0
-    position: absolute
-
-.v-slider-thumb__ripple
-  position: absolute
-  left: calc(var(--v-slider-thumb-size) / -2)
-  top: calc(var(--v-slider-thumb-size) / -2)
-  width: calc(var(--v-slider-thumb-size) * 2)
-  height: calc(var(--v-slider-thumb-size) * 2)
-  background: inherit
-
-// Horizontal
-.v-slider.v-input--horizontal
+@include tools.layer('components')
+  // Theme
   .v-slider-thumb
-    top: 50%
-    transform: translateY(-50%)
-    inset-inline-start: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
+    touch-action: none
+    color: rgb(var(--v-theme-surface-variant))
 
-  .v-slider-thumb__label-container
-    left: calc(var(--v-slider-thumb-size) / 2)
-    top: 0
+    .v-input--error:not(.v-input--disabled) &
+      color: inherit
 
   .v-slider-thumb__label
-    bottom: $slider-thumb-label-offset
-
-    +tools.ltr()
-      transform: translateX(-50%)
-    +tools.rtl()
-      transform: translateX(50%)
+    background: rgba(var(--v-theme-surface-variant), .7)
+    color: rgb(var(--v-theme-on-surface-variant))
 
     &::before
-      border-left: $slider-thumb-label-wedge-size solid transparent
-      border-right: $slider-thumb-label-wedge-size solid transparent
-      border-top: $slider-thumb-label-wedge-size solid currentColor
-      bottom: -$slider-thumb-label-wedge-size
+      color: rgba(var(--v-theme-surface-variant), .7)
 
-// Vertical
-.v-slider.v-input--vertical
+  // Block
   .v-slider-thumb
-    top: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
-
-  .v-slider-thumb__label-container
-    top: calc(var(--v-slider-thumb-size) / 2)
-    right: 0
+    outline: none
+    position: absolute
+    transition: $slider-transition
 
-  .v-slider-thumb__label
-    top: math.div($slider-thumb-label-height, -2)
-    left: $slider-thumb-label-offset
+  .v-slider-thumb__surface
+    cursor: pointer
+    width: var(--v-slider-thumb-size)
+    height: var(--v-slider-thumb-size)
+    border-radius: $slider-thumb-border-radius
+    user-select: none
+    background-color: currentColor
 
     &::before
-      border-right: $slider-thumb-label-wedge-size solid currentColor
-      border-top: $slider-thumb-label-wedge-size solid transparent
-      border-bottom: $slider-thumb-label-wedge-size solid transparent
-      left: -$slider-thumb-label-wedge-size
+      transition: 0.3s settings.$standard-easing
+      content: ''
+      color: inherit
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      border-radius: $slider-thumb-border-radius
+      background: currentColor
+      position: absolute
+      pointer-events: none
+      opacity: 0
+
+    &::after
+      content: ''
+      width: $slider-thumb-touch-size
+      height: $slider-thumb-touch-size
+      position: absolute
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
 
-// Modifiers
-.v-slider-thumb--focused
-  .v-slider-thumb__surface::before
-    transform: scale(2)
-    opacity: $slider-thumb-focus-opacity
+  .v-slider-thumb__label-container
+    position: absolute
+    transition: $slider-thumb-label-transition
 
-.v-slider-thumb--pressed
-  transition: none
+  .v-slider-thumb__label
+    display: flex
+    align-items: center
+    justify-content: center
+    font-size: $slider-thumb-label-font-size
+    min-width: $slider-thumb-label-min-width
+    height: $slider-thumb-label-height
+    border-radius: $slider-thumb-label-border-radius
+    padding: $slider-thumb-label-padding
+    position: absolute
+    user-select: none
+    transition: $slider-thumb-label-transition
 
-  .v-slider-thumb__surface::before
-    opacity: $slider-thumb-pressed-opacity
+    &::before
+      content: ''
+      width: 0
+      height: 0
+      position: absolute
 
-@media (hover: hover)
-  .v-slider-thumb:hover
+  .v-slider-thumb__ripple
+    position: absolute
+    left: calc(var(--v-slider-thumb-size) / -2)
+    top: calc(var(--v-slider-thumb-size) / -2)
+    width: calc(var(--v-slider-thumb-size) * 2)
+    height: calc(var(--v-slider-thumb-size) * 2)
+    background: inherit
+
+  // Horizontal
+  .v-slider.v-input--horizontal
+    .v-slider-thumb
+      top: 50%
+      transform: translateY(-50%)
+      inset-inline-start: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
+
+    .v-slider-thumb__label-container
+      left: calc(var(--v-slider-thumb-size) / 2)
+      top: 0
+
+    .v-slider-thumb__label
+      bottom: $slider-thumb-label-offset
+
+      +tools.ltr()
+        transform: translateX(-50%)
+      +tools.rtl()
+        transform: translateX(50%)
+
+      &::before
+        border-left: $slider-thumb-label-wedge-size solid transparent
+        border-right: $slider-thumb-label-wedge-size solid transparent
+        border-top: $slider-thumb-label-wedge-size solid currentColor
+        bottom: -$slider-thumb-label-wedge-size
+
+  // Vertical
+  .v-slider.v-input--vertical
+    .v-slider-thumb
+      top: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
+
+    .v-slider-thumb__label-container
+      top: calc(var(--v-slider-thumb-size) / 2)
+      right: 0
+
+    .v-slider-thumb__label
+      top: math.div($slider-thumb-label-height, -2)
+      left: $slider-thumb-label-offset
+
+      &::before
+        border-right: $slider-thumb-label-wedge-size solid currentColor
+        border-top: $slider-thumb-label-wedge-size solid transparent
+        border-bottom: $slider-thumb-label-wedge-size solid transparent
+        left: -$slider-thumb-label-wedge-size
+
+  // Modifiers
+  .v-slider-thumb--focused
     .v-slider-thumb__surface::before
       transform: scale(2)
+      opacity: $slider-thumb-focus-opacity
+
+  .v-slider-thumb--pressed
+    transition: none
 
-  .v-slider-thumb:hover:not(.v-slider-thumb--focused)
     .v-slider-thumb__surface::before
-      opacity: $slider-thumb-hover-opacity
+      opacity: $slider-thumb-pressed-opacity
+
+  @media (hover: hover)
+    .v-slider-thumb:hover
+      .v-slider-thumb__surface::before
+        transform: scale(2)
+
+    .v-slider-thumb:hover:not(.v-slider-thumb--focused)
+      .v-slider-thumb__surface::before
+        opacity: $slider-thumb-hover-opacity