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

package/lib/components/VGrid/VGrid.sass

@@ -1,8 +1,9 @@
-@import './index'
+@use '../../styles/settings'
+@use './mixins' as *
 
 .v-container
-  +make-container
-  +make-container-max-widths
+  @include make-container
+  @include make-container-max-widths
 
   &--fluid
     max-width: 100%
@@ -14,17 +15,17 @@
   +make-row
 
   & + .row
-    margin-top: $grid-gutter / 2
+    margin-top: settings.$grid-gutter * .5
 
     &--dense
-      margin-top: $form-grid-gutter / 2
+      margin-top: settings.$form-grid-gutter * .5
 
   &--dense
-    margin: -$form-grid-gutter / 2
+    margin: -(settings.$form-grid-gutter) * .5
 
     > .v-col,
     > [class*="v-col-"]
-      padding: $form-grid-gutter / 2
+      padding: settings.$form-grid-gutter * .5
 
   // Remove the negative margin from default .v-row, then the horizontal padding
   // from all immediate children columns (to prevent runaway style inheritance).
@@ -37,4 +38,4 @@
 // Columns
 //
 // Common styles for small and large grid columns
-+make-grid-columns
+@include make-grid-columns

package/lib/components/VGrid/VRow.mjs

@@ -1,10 +1,10 @@
 // Styles
-import "./VGrid.sass"; // Composables
+import "./VGrid.css"; // Composables
 
 import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
 
-import { capitalize, computed, defineComponent, h } from 'vue';
-import { makeProps } from "../../util/index.mjs"; // Types
+import { capitalize, computed, h } from 'vue';
+import { defineComponent } from "../../util/index.mjs"; // Types
 
 const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
 
@@ -69,9 +69,9 @@ function breakpointClass(type, prop, val) {
   return className.toLowerCase();
 }
 
-export default defineComponent({
+export const VRow = defineComponent({
   name: 'VRow',
-  props: makeProps({
+  props: {
     dense: Boolean,
     noGutters: Boolean,
     align: {
@@ -93,11 +93,12 @@ export default defineComponent({
     },
     ...alignContentProps,
     ...makeTagProps()
-  }),
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const classes = computed(() => {
       const classList = []; // Loop through `align`, `justify`, `alignContent` breakpoint props
 

package/lib/components/VGrid/VRow.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VGrid/VRow.ts"],"names":["makeTagProps","capitalize","computed","defineComponent","h","makeProps","breakpoints","ALIGNMENT","makeRowProps","prefix","def","reduce","props","val","alignValidator","str","includes","alignProps","type","String","default","validator","justifyValidator","justifyProps","alignContentValidator","alignContentProps","propMap","align","Object","keys","justify","alignContent","classMap","breakpointClass","prop","className","undefined","breakpoint","replace","toLowerCase","name","dense","Boolean","noGutters","setup","slots","classes","classList","forEach","value","push","tag","class"],"mappings":"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","sourcesContent":["// Styles\nimport './VGrid.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { capitalize, computed, defineComponent, h } from 'vue'\nimport { makeProps } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nconst breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs\n\nconst ALIGNMENT = ['start', 'end', 'center'] as const\n\nfunction makeRowProps (prefix: string, def: () => Prop<string, null>) {\n  return breakpoints.reduce((props, val) => {\n    props[prefix + capitalize(val)] = def()\n    return props\n  }, {} as Dictionary<Prop<string, null>>)\n}\n\nconst alignValidator = (str: any) => [...ALIGNMENT, 'baseline', 'stretch'].includes(str)\nconst alignProps = makeRowProps('align', () => ({\n  type: String,\n  default: null,\n  validator: alignValidator,\n}))\n\nconst justifyValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around'].includes(str)\nconst justifyProps = makeRowProps('justify', () => ({\n  type: String,\n  default: null,\n  validator: justifyValidator,\n}))\n\nconst alignContentValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around', 'stretch'].includes(str)\nconst alignContentProps = makeRowProps('alignContent', () => ({\n  type: String,\n  default: null,\n  validator: alignContentValidator,\n}))\n\nconst propMap = {\n  align: Object.keys(alignProps),\n  justify: Object.keys(justifyProps),\n  alignContent: Object.keys(alignContentProps),\n}\n\nconst classMap = {\n  align: 'align',\n  justify: 'justify',\n  alignContent: 'align-content',\n}\n\nfunction breakpointClass (type: keyof typeof propMap, prop: string, val: string) {\n  let className = classMap[type]\n  if (val == null) {\n    return undefined\n  }\n  if (prop) {\n    // alignSm -> Sm\n    const breakpoint = prop.replace(type, '')\n    className += `-${breakpoint}`\n  }\n  // .align-items-sm-center\n  className += `-${val}`\n  return className.toLowerCase()\n}\n\nexport default defineComponent({\n  name: 'VRow',\n\n  props: makeProps({\n    dense: Boolean,\n    noGutters: Boolean,\n    align: {\n      type: String,\n      default: null,\n      validator: alignValidator,\n    },\n    ...alignProps,\n    justify: {\n      type: String,\n      default: null,\n      validator: justifyValidator,\n    },\n    ...justifyProps,\n    alignContent: {\n      type: String,\n      default: null,\n      validator: alignContentValidator,\n    },\n    ...alignContentProps,\n    ...makeTagProps(),\n  }),\n\n  setup (props, { slots }) {\n    const classes = computed(() => {\n      const classList: any[] = []\n\n      // Loop through `align`, `justify`, `alignContent` breakpoint props\n      let type: keyof typeof propMap\n      for (type in propMap) {\n        propMap[type].forEach(prop => {\n          const value: string = (props as any)[prop]\n          const className = breakpointClass(type, prop, value)\n          if (className) classList!.push(className)\n        })\n      }\n\n      classList.push({\n        'v-row--no-gutters': props.noGutters,\n        'v-row--dense': props.dense,\n        [`align-${props.align}`]: props.align,\n        [`justify-${props.justify}`]: props.justify,\n        [`align-content-${props.alignContent}`]: props.alignContent,\n      })\n\n      return classList\n    })\n\n    return () => h(props.tag, {\n      class: ['v-row', classes.value],\n    }, slots.default?.())\n  },\n})\n"],"file":"VRow.mjs"}
+{"version":3,"sources":["../../../src/components/VGrid/VRow.ts"],"names":["makeTagProps","capitalize","computed","h","defineComponent","breakpoints","ALIGNMENT","makeRowProps","prefix","def","reduce","props","val","alignValidator","str","includes","alignProps","type","String","default","validator","justifyValidator","justifyProps","alignContentValidator","alignContentProps","propMap","align","Object","keys","justify","alignContent","classMap","breakpointClass","prop","className","undefined","breakpoint","replace","toLowerCase","VRow","name","dense","Boolean","noGutters","setup","slots","classes","classList","forEach","value","push","tag","class"],"mappings":"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","sourcesContent":["// Styles\nimport './VGrid.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { capitalize, computed, h } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nconst breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs\n\nconst ALIGNMENT = ['start', 'end', 'center'] as const\n\nfunction makeRowProps (prefix: string, def: () => Prop<string, null>) {\n  return breakpoints.reduce((props, val) => {\n    props[prefix + capitalize(val)] = def()\n    return props\n  }, {} as Record<string, Prop<string, null>>)\n}\n\nconst alignValidator = (str: any) => [...ALIGNMENT, 'baseline', 'stretch'].includes(str)\nconst alignProps = makeRowProps('align', () => ({\n  type: String,\n  default: null,\n  validator: alignValidator,\n}))\n\nconst justifyValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around'].includes(str)\nconst justifyProps = makeRowProps('justify', () => ({\n  type: String,\n  default: null,\n  validator: justifyValidator,\n}))\n\nconst alignContentValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around', 'stretch'].includes(str)\nconst alignContentProps = makeRowProps('alignContent', () => ({\n  type: String,\n  default: null,\n  validator: alignContentValidator,\n}))\n\nconst propMap = {\n  align: Object.keys(alignProps),\n  justify: Object.keys(justifyProps),\n  alignContent: Object.keys(alignContentProps),\n}\n\nconst classMap = {\n  align: 'align',\n  justify: 'justify',\n  alignContent: 'align-content',\n}\n\nfunction breakpointClass (type: keyof typeof propMap, prop: string, val: string) {\n  let className = classMap[type]\n  if (val == null) {\n    return undefined\n  }\n  if (prop) {\n    // alignSm -> Sm\n    const breakpoint = prop.replace(type, '')\n    className += `-${breakpoint}`\n  }\n  // .align-items-sm-center\n  className += `-${val}`\n  return className.toLowerCase()\n}\n\nexport const VRow = defineComponent({\n  name: 'VRow',\n\n  props: {\n    dense: Boolean,\n    noGutters: Boolean,\n    align: {\n      type: String,\n      default: null,\n      validator: alignValidator,\n    },\n    ...alignProps,\n    justify: {\n      type: String,\n      default: null,\n      validator: justifyValidator,\n    },\n    ...justifyProps,\n    alignContent: {\n      type: String,\n      default: null,\n      validator: alignContentValidator,\n    },\n    ...alignContentProps,\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const classes = computed(() => {\n      const classList: any[] = []\n\n      // Loop through `align`, `justify`, `alignContent` breakpoint props\n      let type: keyof typeof propMap\n      for (type in propMap) {\n        propMap[type].forEach(prop => {\n          const value: string = (props as any)[prop]\n          const className = breakpointClass(type, prop, value)\n          if (className) classList!.push(className)\n        })\n      }\n\n      classList.push({\n        'v-row--no-gutters': props.noGutters,\n        'v-row--dense': props.dense,\n        [`align-${props.align}`]: props.align,\n        [`justify-${props.justify}`]: props.justify,\n        [`align-content-${props.alignContent}`]: props.alignContent,\n      })\n\n      return classList\n    })\n\n    return () => h(props.tag, {\n      class: ['v-row', classes.value],\n    }, slots.default?.())\n  },\n})\n"],"file":"VRow.mjs"}

package/lib/components/VGrid/VSpacer.mjs

@@ -1,3 +1,3 @@
 import { createSimpleFunctional } from "../../util/index.mjs";
-export default createSimpleFunctional('flex-grow-1', 'div', 'VSpacer');
+export const VSpacer = createSimpleFunctional('flex-grow-1', 'div', 'VSpacer');
 //# sourceMappingURL=VSpacer.mjs.map

package/lib/components/VGrid/VSpacer.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VGrid/VSpacer.ts"],"names":["createSimpleFunctional"],"mappings":"SAASA,sB;AAET,eAAeA,sBAAsB,CAAC,aAAD,EAAgB,KAAhB,EAAuB,SAAvB,CAArC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport default createSimpleFunctional('flex-grow-1', 'div', 'VSpacer')\n"],"file":"VSpacer.mjs"}
+{"version":3,"sources":["../../../src/components/VGrid/VSpacer.ts"],"names":["createSimpleFunctional","VSpacer"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,OAAO,GAAGD,sBAAsB,CAAC,aAAD,EAAgB,KAAhB,EAAuB,SAAvB,CAAtC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VSpacer = createSimpleFunctional('flex-grow-1', 'div', 'VSpacer')\n"],"file":"VSpacer.mjs"}

package/lib/components/VGrid/_mixins.sass

@@ -1,49 +1,54 @@
-=make-container($padding-x: $container-padding-x)
+@use 'sass:map'
+@use 'sass:math'
+@use '../../styles/settings'
+@use '../../styles/tools'
+
+@mixin make-container($padding-x: settings.$container-padding-x)
   width: 100%
   padding: $padding-x
   margin-right: auto
   margin-left: auto
 
 // For each breakpoint, define the maximum width of the container in a media query
-=make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
+@mixin make-container-max-widths($max-widths: settings.$container-max-widths, $breakpoints: settings.$grid-breakpoints)
   @each $breakpoint, $container-max-width in $max-widths
-    +media-breakpoint-up($breakpoint, $breakpoints)
+    +tools.media-breakpoint-up($breakpoint, $breakpoints)
       max-width: $container-max-width
 
-=make-row($gutter: $grid-gutter)
+@mixin make-row($gutter: settings.$grid-gutter)
   display: flex
   flex-wrap: wrap
   flex: 1 1 auto
-  margin: -$gutter / 2
+  margin: -$gutter * .5
 
-=make-col-ready($gutter: $grid-gutter)
+@mixin make-col-ready($gutter: settings.$grid-gutter)
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%
-  padding: $gutter / 2
+  padding: $gutter * .5
 
-=make-col($size, $columns: $grid-columns)
-  flex: 0 0 percentage($size / $columns)
+@mixin make-col($size, $columns: settings.$grid-columns)
+  flex: 0 0 math.percentage(math.div($size, $columns))
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: percentage($size / $columns)
+  max-width: math.percentage(math.div($size, $columns))
 
-=make-col-offset($size, $columns: $grid-columns)
-  $num: $size / $columns
-  +ltr()
-    margin-left: if($num == 0, 0, percentage($num))
-  +rtl()
-    margin-right: if($num == 0, 0, percentage($num))
+@mixin make-col-offset($size, $columns: settings.$grid-columns)
+  $num: math.div($size, $columns)
+  +tools.ltr()
+    margin-left: if($num == 0, 0, math.percentage($num))
+  +tools.rtl()
+    margin-right: if($num == 0, 0, math.percentage($num))
 
-=make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter, $breakpoints: $grid-breakpoints)
+@mixin make-grid-columns($columns: settings.$grid-columns, $gutter: settings.$grid-gutter, $breakpoints: settings.$grid-breakpoints)
   // Common properties for all breakpoints
   %grid-column
     width: 100%
-    padding: $gutter / 2
-  @each $breakpoint in map-keys($breakpoints)
-    $infix: breakpoint-infix($breakpoint, $breakpoints)
+    padding: $gutter * .5
+  @each $breakpoint in map.keys($breakpoints)
+    $infix: tools.breakpoint-infix($breakpoint, $breakpoints)
     // Allow columns to stretch full width below their breakpoints
     @for $i from 1 through $columns
       .v-col#{$infix}-#{$i}
@@ -51,7 +56,7 @@
     .v-col#{$infix},
     .v-col#{$infix}-auto
       @extend %grid-column
-    +media-breakpoint-up($breakpoint, $breakpoints)
+    +tools.media-breakpoint-up($breakpoint, $breakpoints)
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .v-col#{$infix}
         flex-basis: 0

package/lib/components/VGrid/index.mjs

@@ -1,5 +1,5 @@
-export { default as VContainer } from "./VContainer.mjs";
-export { default as VCol } from "./VCol.mjs";
-export { default as VRow } from "./VRow.mjs";
-export { default as VSpacer } from "./VSpacer.mjs";
+export { VContainer } from "./VContainer.mjs";
+export { VCol } from "./VCol.mjs";
+export { VRow } from "./VRow.mjs";
+export { VSpacer } from "./VSpacer.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VGrid/index.ts"],"names":["default","VContainer","VCol","VRow","VSpacer"],"mappings":"SAASA,OAAO,IAAIC,U;SACXD,OAAO,IAAIE,I;SACXF,OAAO,IAAIG,I;SACXH,OAAO,IAAII,O","sourcesContent":["export { default as VContainer } from './VContainer'\nexport { default as VCol } from './VCol'\nexport { default as VRow } from './VRow'\nexport { default as VSpacer } from './VSpacer'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VGrid/index.ts"],"names":["VContainer","VCol","VRow","VSpacer"],"mappings":"SAASA,U;SACAC,I;SACAC,I;SACAC,O","sourcesContent":["export { VContainer } from './VContainer'\nexport { VCol } from './VCol'\nexport { VRow } from './VRow'\nexport { VSpacer } from './VSpacer'\n"],"file":"index.mjs"}

package/lib/components/VHover/VHover.mjs

@@ -1,72 +1,42 @@
-// @ts-nocheck
+// Composables
+import { makeDelayProps, useDelay } from "../../composables/delay.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
-/* eslint-disable */
-// Mixins
-import Delayable from "../../mixins/delayable.mjs";
-import Toggleable from "../../mixins/toggleable/index.mjs"; // Utilities
-
-import mixins from "../../util/mixins.mjs";
-import { consoleWarn } from "../../util/console.mjs"; // Types
-
-export default mixins(Delayable, Toggleable
-/* @vue/component */
-).extend({
-  name: 'v-hover',
+import { defineComponent } from "../../util/index.mjs";
+export const VHover = defineComponent({
+  name: 'VHover',
   props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    value: {
+    disabled: Boolean,
+    modelValue: {
       type: Boolean,
       default: undefined
-    }
-  },
-  methods: {
-    onMouseEnter() {
-      this.runDelay('open');
     },
-
-    onMouseLeave() {
-      this.runDelay('close');
-    }
-
+    ...makeDelayProps()
+  },
+  emits: {
+    'update:modelValue': value => true
   },
 
-  render() {
-    if (!this.$scopedSlots.default && this.value === undefined) {
-      consoleWarn('v-hover is missing a default scopedSlot or bound value', this);
-      return null;
-    }
-
-    let element;
-    /* istanbul ignore else */
-
-    if (this.$scopedSlots.default) {
-      element = this.$scopedSlots.default({
-        hover: this.isActive
-      });
-    }
-
-    if (Array.isArray(element) && element.length === 1) {
-      element = element[0];
-    }
-
-    if (!element || Array.isArray(element) || !element.tag) {
-      consoleWarn('v-hover should only contain a single element', this);
-      return element;
-    }
-
-    if (!this.disabled) {
-      element.data = element.data || {};
-
-      this._g(element.data, {
-        mouseenter: this.onMouseEnter,
-        mouseleave: this.onMouseLeave
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isHovering = useProxiedModel(props, 'modelValue');
+    const {
+      runOpenDelay,
+      runCloseDelay
+    } = useDelay(props, value => !props.disabled && (isHovering.value = value));
+    return () => {
+      var _slots$default;
+
+      return (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+        isHovering: isHovering.value,
+        props: {
+          onMouseenter: runOpenDelay,
+          onMouseleave: runCloseDelay
+        }
       });
-    }
-
-    return element;
+    };
   }
 
 });

package/lib/components/VHover/VHover.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VHover/VHover.ts"],"names":["Delayable","Toggleable","mixins","consoleWarn","extend","name","props","disabled","type","Boolean","default","value","undefined","methods","onMouseEnter","runDelay","onMouseLeave","render","$scopedSlots","element","hover","isActive","Array","isArray","length","tag","data","_g","mouseenter","mouseleave"],"mappings":"AAAA;;AACA;AAEA;OACOA,S;OACAC,U,2CAEP;;OACOC,M;SACEC,W,kCAET;;AAGA,eAAeD,MAAM,CACnBF,SADmB,EAEnBC;AACA;AAHmB,CAAN,CAIbG,MAJa,CAIN;AACPC,EAAAA,IAAI,EAAE,SADC;AAGPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAEC,OADE;AAERC,MAAAA,OAAO,EAAE;AAFD,KADL;AAKLC,IAAAA,KAAK,EAAE;AACLH,MAAAA,IAAI,EAAEC,OADD;AAELC,MAAAA,OAAO,EAAEE;AAFJ;AALF,GAHA;AAcPC,EAAAA,OAAO,EAAE;AACPC,IAAAA,YAAY,GAAI;AACd,WAAKC,QAAL,CAAc,MAAd;AACD,KAHM;;AAIPC,IAAAA,YAAY,GAAI;AACd,WAAKD,QAAL,CAAc,OAAd;AACD;;AANM,GAdF;;AAuBPE,EAAAA,MAAM,GAAW;AACf,QAAI,CAAC,KAAKC,YAAL,CAAkBR,OAAnB,IAA8B,KAAKC,KAAL,KAAeC,SAAjD,EAA4D;AAC1DT,MAAAA,WAAW,CAAC,wDAAD,EAA2D,IAA3D,CAAX;AAEA,aAAO,IAAP;AACD;;AAED,QAAIgB,OAAJ;AAEA;;AACA,QAAI,KAAKD,YAAL,CAAkBR,OAAtB,EAA+B;AAC7BS,MAAAA,OAAO,GAAG,KAAKD,YAAL,CAAkBR,OAAlB,CAA0B;AAAEU,QAAAA,KAAK,EAAE,KAAKC;AAAd,OAA1B,CAAV;AACD;;AAED,QAAIC,KAAK,CAACC,OAAN,CAAcJ,OAAd,KAA0BA,OAAO,CAACK,MAAR,KAAmB,CAAjD,EAAoD;AAClDL,MAAAA,OAAO,GAAGA,OAAO,CAAC,CAAD,CAAjB;AACD;;AAED,QAAI,CAACA,OAAD,IAAYG,KAAK,CAACC,OAAN,CAAcJ,OAAd,CAAZ,IAAsC,CAACA,OAAO,CAACM,GAAnD,EAAwD;AACtDtB,MAAAA,WAAW,CAAC,8CAAD,EAAiD,IAAjD,CAAX;AAEA,aAAOgB,OAAP;AACD;;AAED,QAAI,CAAC,KAAKZ,QAAV,EAAoB;AAClBY,MAAAA,OAAO,CAACO,IAAR,GAAeP,OAAO,CAACO,IAAR,IAAgB,EAA/B;;AACA,WAAKC,EAAL,CAAQR,OAAO,CAACO,IAAhB,EAAsB;AACpBE,QAAAA,UAAU,EAAE,KAAKd,YADG;AAEpBe,QAAAA,UAAU,EAAE,KAAKb;AAFG,OAAtB;AAID;;AAED,WAAOG,OAAP;AACD;;AAxDM,CAJM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Mixins\nimport Delayable from '../../mixins/delayable'\nimport Toggleable from '../../mixins/toggleable'\n\n// Utilities\nimport mixins from '../../util/mixins'\nimport { consoleWarn } from '../../util/console'\n\n// Types\nimport { VNode, ScopedSlotChildren } from 'vue/types/vnode'\n\nexport default mixins(\n  Delayable,\n  Toggleable\n  /* @vue/component */\n).extend({\n  name: 'v-hover',\n\n  props: {\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    value: {\n      type: Boolean,\n      default: undefined,\n    },\n  },\n\n  methods: {\n    onMouseEnter () {\n      this.runDelay('open')\n    },\n    onMouseLeave () {\n      this.runDelay('close')\n    },\n  },\n\n  render (): VNode {\n    if (!this.$scopedSlots.default && this.value === undefined) {\n      consoleWarn('v-hover is missing a default scopedSlot or bound value', this)\n\n      return null as any\n    }\n\n    let element: VNode | ScopedSlotChildren\n\n    /* istanbul ignore else */\n    if (this.$scopedSlots.default) {\n      element = this.$scopedSlots.default({ hover: this.isActive })\n    }\n\n    if (Array.isArray(element) && element.length === 1) {\n      element = element[0]\n    }\n\n    if (!element || Array.isArray(element) || !element.tag) {\n      consoleWarn('v-hover should only contain a single element', this)\n\n      return element as any\n    }\n\n    if (!this.disabled) {\n      element.data = element.data || {}\n      this._g(element.data, {\n        mouseenter: this.onMouseEnter,\n        mouseleave: this.onMouseLeave,\n      })\n    }\n\n    return element\n  },\n})\n"],"file":"VHover.mjs"}
+{"version":3,"sources":["../../../src/components/VHover/VHover.tsx"],"names":["makeDelayProps","useDelay","useProxiedModel","defineComponent","VHover","name","props","disabled","Boolean","modelValue","type","default","undefined","emits","value","setup","slots","isHovering","runOpenDelay","runCloseDelay","onMouseenter","onMouseleave"],"mappings":"AAAA;SACSA,c,EAAgBC,Q;SAChBC,e,8CAET;;SACSC,e;AAET,OAAO,MAAMC,MAAM,GAAGD,eAAe,CAAC;AACpCE,EAAAA,IAAI,EAAE,QAD8B;AAGpCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,UAAU,EAAE;AACVC,MAAAA,IAAI,EAAEF,OADI;AAEVG,MAAAA,OAAO,EAAEC;AAFC,KAFP;AAOL,OAAGZ,cAAc;AAPZ,GAH6B;AAapCa,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAoB;AADpC,GAb6B;;AAiBpCC,EAAAA,KAAK,CAAET,KAAF,QAAoB;AAAA,QAAX;AAAEU,MAAAA;AAAF,KAAW;AACvB,UAAMC,UAAU,GAAGf,eAAe,CAACI,KAAD,EAAQ,YAAR,CAAlC;AACA,UAAM;AAAEY,MAAAA,YAAF;AAAgBC,MAAAA;AAAhB,QAAkClB,QAAQ,CAACK,KAAD,EAAQQ,KAAK,IAAI,CAACR,KAAK,CAACC,QAAP,KAAoBU,UAAU,CAACH,KAAX,GAAmBA,KAAvC,CAAjB,CAAhD;AAEA,WAAO;AAAA;;AAAA,+BAAME,KAAK,CAACL,OAAZ,qBAAM,oBAAAK,KAAK,EAAW;AAC3BC,QAAAA,UAAU,EAAEA,UAAU,CAACH,KADI;AAE3BR,QAAAA,KAAK,EAAE;AACLc,UAAAA,YAAY,EAAEF,YADT;AAELG,UAAAA,YAAY,EAAEF;AAFT;AAFoB,OAAX,CAAX;AAAA,KAAP;AAOD;;AA5BmC,CAAD,CAA9B","sourcesContent":["// Composables\nimport { makeDelayProps, useDelay } from '@/composables/delay'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VHover = defineComponent({\n  name: 'VHover',\n\n  props: {\n    disabled: Boolean,\n    modelValue: {\n      type: Boolean,\n      default: undefined,\n    },\n\n    ...makeDelayProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isHovering = useProxiedModel(props, 'modelValue')\n    const { runOpenDelay, runCloseDelay } = useDelay(props, value => !props.disabled && (isHovering.value = value))\n\n    return () => slots.default?.({\n      isHovering: isHovering.value,\n      props: {\n        onMouseenter: runOpenDelay,\n        onMouseleave: runCloseDelay,\n      },\n    })\n  },\n})\n"],"file":"VHover.mjs"}

package/lib/components/VHover/index.mjs

@@ -1,4 +1,2 @@
-import VHover from "./VHover.mjs";
-export { VHover };
-export default VHover;
+export { VHover } from "./VHover.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VHover/index.ts"],"names":["VHover"],"mappings":"OAAOA,M;AAEP,SAASA,MAAT;AACA,eAAeA,MAAf","sourcesContent":["import VHover from './VHover'\n\nexport { VHover }\nexport default VHover\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VHover/index.ts"],"names":["VHover"],"mappings":"SAASA,M","sourcesContent":["export { VHover } from './VHover'\n"],"file":"index.mjs"}

package/lib/components/VIcon/VIcon.css

@@ -0,0 +1,50 @@
+.v-icon {
+  align-items: center;
+  display: inline-flex;
+  font-feature-settings: "liga";
+  height: 1em;
+  justify-content: center;
+  letter-spacing: normal;
+  line-height: 1;
+  position: relative;
+  text-indent: 0;
+  user-select: none;
+  vertical-align: middle;
+  width: 1em;
+}
+.v-icon--left {
+  margin-inline-end: 8px;
+}
+.v-icon--right {
+  margin-inline-start: 8px;
+}
+.v-icon--size-x-small {
+  font-size: 1em;
+}
+.v-icon--size-small {
+  font-size: 1.25em;
+}
+.v-icon--size-default {
+  font-size: 1.5em;
+}
+.v-icon--size-large {
+  font-size: 1.75em;
+}
+.v-icon--size-x-large {
+  font-size: 2em;
+}
+
+.v-icon__svg {
+  fill: currentColor;
+  width: 100%;
+  height: 100%;
+}
+
+.v-btn:not(.v-btn--icon) .v-icon--left {
+  margin-inline-start: calc(var(--v-btn-height) / -9);
+  margin-inline-end: calc(var(--v-btn-height) / 4.5);
+}
+.v-btn:not(.v-btn--icon) .v-icon--right {
+  margin-inline-start: calc(var(--v-btn-height) / 4.5);
+  margin-inline-end: calc(var(--v-btn-height) / -9);
+}

package/lib/components/VIcon/VIcon.mjs

@@ -1,18 +1,19 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VIcon.sass"; // Composables
+import "./VIcon.css"; // Composables
 
 import { makeSizeProps, useSize } from "../../composables/size.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { useIcon } from "../../composables/icons.mjs";
-import { useTextColor } from "../../composables/color.mjs"; // Utilities
+import { useTextColor } from "../../composables/color.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
 
-import { computed, defineComponent, toRef } from 'vue';
-import { convertToUnit, flattenFragments, makeProps } from "../../util/index.mjs"; // Types
+import { computed, toRef } from 'vue';
+import { convertToUnit, defineComponent, flattenFragments } from "../../util/index.mjs"; // Types
 
-export default defineComponent({
+export const VIcon = defineComponent({
   name: 'VIcon',
-  props: makeProps({
+  props: {
     color: String,
     left: Boolean,
     right: Boolean,
@@ -22,12 +23,14 @@ export default defineComponent({
     ...makeSizeProps(),
     ...makeTagProps({
       tag: 'i'
-    })
-  }),
+    }),
+    ...makeThemeProps()
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     let slotIcon;
 
     if (slots.default) {
@@ -40,12 +43,15 @@ export default defineComponent({
       });
     }
 
+    const {
+      themeClasses
+    } = provideTheme(props);
     const {
       iconData
     } = useIcon(slotIcon || props);
     const {
       sizeClasses
-    } = useSize(props, 'v-icon');
+    } = useSize(props);
     const {
       textColorClasses,
       textColorStyles
@@ -54,7 +60,7 @@ export default defineComponent({
       return _createVNode(iconData.value.component, {
         "tag": props.tag,
         "icon": iconData.value.icon,
-        "class": ['v-icon', 'notranslate', sizeClasses.value, textColorClasses.value, {
+        "class": ['v-icon', 'notranslate', sizeClasses.value, textColorClasses.value, themeClasses.value, {
           'v-icon--left': props.left,
           'v-icon--right': props.right
         }],
@@ -64,7 +70,7 @@ export default defineComponent({
           height: convertToUnit(props.size)
         } : undefined, textColorStyles.value],
         "aria-hidden": "true"
-      }, null, 8, ["tag", "icon", "class", "style"]);
+      }, null);
     };
   }
 

package/lib/components/VIcon/VIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VIcon/VIcon.tsx"],"names":["makeSizeProps","useSize","makeTagProps","useIcon","useTextColor","computed","defineComponent","toRef","convertToUnit","flattenFragments","makeProps","name","props","color","String","left","Boolean","right","icon","type","Object","tag","setup","slots","slotIcon","default","slot","filter","node","children","iconData","sizeClasses","textColorClasses","textColorStyles","value","fontSize","size","width","height","undefined"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,a,EAAeC,O;SACfC,Y;SACAC,O;SACAC,Y,uCAET;;AACA,SAASC,QAAT,EAAmBC,eAAnB,EAAoCC,KAApC,QAAiD,KAAjD;SACSC,a,EAAeC,gB,EAAkBC,S,gCAE1C;;AAIA,eAAeJ,eAAe,CAAC;AAC7BK,EAAAA,IAAI,EAAE,OADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,KAAK,EAAEC,MADQ;AAEfC,IAAAA,IAAI,EAAEC,OAFS;AAGfC,IAAAA,KAAK,EAAED,OAHQ;AAIfE,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAE,CAACL,MAAD,EAASM,MAAT;AADF,KAJS;AAOf,OAAGpB,aAAa,EAPD;AAQf,OAAGE,YAAY,CAAC;AAAEmB,MAAAA,GAAG,EAAE;AAAP,KAAD;AARA,GAAD,CAHa;;AAc7BC,EAAAA,KAAK,CAAEV,KAAF,EAAS;AAAEW,IAAAA;AAAF,GAAT,EAAoB;AACvB,QAAIC,QAAJ;;AACA,QAAID,KAAK,CAACE,OAAV,EAAmB;AACjBD,MAAAA,QAAQ,GAAGnB,QAAQ,CAAC,MAAM;AAAA;;AACxB,cAAMqB,IAAI,qBAAGH,KAAK,CAACE,OAAT,qBAAG,oBAAAF,KAAK,CAAlB;AACA,YAAI,CAACG,IAAL,EAAW;AAEX,wCAAOjB,gBAAgB,CAACiB,IAAD,CAAhB,CAAuBC,MAAvB,CAA8BC,IAAI,IACvCA,IAAI,CAACC,QAAL,IAAiB,OAAOD,IAAI,CAACC,QAAZ,KAAyB,QADrC,EAEL,CAFK,CAAP,qBAAO,sBAEDA,QAFN;AAGD,OAPkB,CAAnB;AAQD;;AAED,UAAM;AAAEC,MAAAA;AAAF,QAAe3B,OAAO,CAACqB,QAAQ,IAAIZ,KAAb,CAA5B;AACA,UAAM;AAAEmB,MAAAA;AAAF,QAAkB9B,OAAO,CAACW,KAAD,EAAQ,QAAR,CAA/B;AACA,UAAM;AAAEoB,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAAwC7B,YAAY,CAACG,KAAK,CAACK,KAAD,EAAQ,OAAR,CAAN,CAA1D;AAEA,WAAO,MAAM;AACX;AAAA,eAEUA,KAAK,CAACS,GAFhB;AAAA,gBAGWS,QAAQ,CAACI,KAAT,CAAehB,IAH1B;AAAA,iBAIW,CACL,QADK,EAEL,aAFK,EAGLa,WAAW,CAACG,KAHP,EAILF,gBAAgB,CAACE,KAJZ,EAKL;AACE,0BAAgBtB,KAAK,CAACG,IADxB;AAEE,2BAAiBH,KAAK,CAACK;AAFzB,SALK,CAJX;AAAA,iBAcW,CACL,CAACc,WAAW,CAACG,KAAb,GAAsB;AACpBC,UAAAA,QAAQ,EAAE3B,aAAa,CAACI,KAAK,CAACwB,IAAP,CADH;AAEpBC,UAAAA,KAAK,EAAE7B,aAAa,CAACI,KAAK,CAACwB,IAAP,CAFA;AAGpBE,UAAAA,MAAM,EAAE9B,aAAa,CAACI,KAAK,CAACwB,IAAP;AAHD,SAAtB,GAIKG,SALA,EAMLN,eAAe,CAACC,KANX,CAdX;AAAA,uBAsBgB;AAtBhB;AAyBD,KA1BD;AA2BD;;AA1D4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VIcon.sass'\n\n// Composables\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { useIcon } from '@/composables/icons'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, defineComponent, toRef } from 'vue'\nimport { convertToUnit, flattenFragments, makeProps } from '@/util'\n\n// Types\nimport type { IconValue } from '@/composables/icons'\nimport type { ComputedRef, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'VIcon',\n\n  props: makeProps({\n    color: String,\n    left: Boolean,\n    right: Boolean,\n    icon: {\n      type: [String, Object] as PropType<IconValue>,\n    },\n    ...makeSizeProps(),\n    ...makeTagProps({ tag: 'i' }),\n  }),\n\n  setup (props, { slots }) {\n    let slotIcon: ComputedRef<string | undefined> | undefined\n    if (slots.default) {\n      slotIcon = computed(() => {\n        const slot = slots.default?.()\n        if (!slot) return\n\n        return flattenFragments(slot).filter(node =>\n          node.children && typeof node.children === 'string'\n        )[0]?.children as string\n      })\n    }\n\n    const { iconData } = useIcon(slotIcon || props)\n    const { sizeClasses } = useSize(props, 'v-icon')\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n\n    return () => {\n      return (\n        <iconData.value.component\n          tag={ props.tag }\n          icon={ iconData.value.icon }\n          class={[\n            'v-icon',\n            'notranslate',\n            sizeClasses.value,\n            textColorClasses.value,\n            {\n              'v-icon--left': props.left,\n              'v-icon--right': props.right,\n            },\n          ]}\n          style={[\n            !sizeClasses.value ? ({\n              fontSize: convertToUnit(props.size),\n              width: convertToUnit(props.size),\n              height: convertToUnit(props.size),\n            }) : undefined,\n            textColorStyles.value,\n          ]}\n          aria-hidden=\"true\"\n        />\n      )\n    }\n  },\n})\n"],"file":"VIcon.mjs"}
+{"version":3,"sources":["../../../src/components/VIcon/VIcon.tsx"],"names":["makeSizeProps","useSize","makeTagProps","useIcon","useTextColor","makeThemeProps","provideTheme","computed","toRef","convertToUnit","defineComponent","flattenFragments","VIcon","name","props","color","String","left","Boolean","right","icon","type","Object","tag","setup","slots","slotIcon","default","slot","filter","node","children","themeClasses","iconData","sizeClasses","textColorClasses","textColorStyles","value","fontSize","size","width","height","undefined"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,a,EAAeC,O;SACfC,Y;SACAC,O;SACAC,Y;SACAC,c,EAAgBC,Y,uCAEzB;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,a,EAAeC,e,EAAiBC,gB,gCAEzC;;AAIA,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAAC;AACnCG,EAAAA,IAAI,EAAE,OAD6B;AAGnCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,MADF;AAELC,IAAAA,IAAI,EAAEC,OAFD;AAGLC,IAAAA,KAAK,EAAED,OAHF;AAILE,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAE,CAACL,MAAD,EAASM,MAAT;AADF,KAJD;AAOL,OAAGtB,aAAa,EAPX;AAQL,OAAGE,YAAY,CAAC;AAAEqB,MAAAA,GAAG,EAAE;AAAP,KAAD,CARV;AASL,OAAGlB,cAAc;AATZ,GAH4B;;AAenCmB,EAAAA,KAAK,CAAEV,KAAF,QAAoB;AAAA,QAAX;AAAEW,MAAAA;AAAF,KAAW;AACvB,QAAIC,QAAJ;;AACA,QAAID,KAAK,CAACE,OAAV,EAAmB;AACjBD,MAAAA,QAAQ,GAAGnB,QAAQ,CAAC,MAAM;AAAA;;AACxB,cAAMqB,IAAI,qBAAGH,KAAK,CAACE,OAAT,qBAAG,oBAAAF,KAAK,CAAlB;AACA,YAAI,CAACG,IAAL,EAAW;AAEX,wCAAOjB,gBAAgB,CAACiB,IAAD,CAAhB,CAAuBC,MAAvB,CAA8BC,IAAI,IACvCA,IAAI,CAACC,QAAL,IAAiB,OAAOD,IAAI,CAACC,QAAZ,KAAyB,QADrC,EAEL,CAFK,CAAP,qBAAO,sBAEDA,QAFN;AAGD,OAPkB,CAAnB;AAQD;;AAED,UAAM;AAAEC,MAAAA;AAAF,QAAmB1B,YAAY,CAACQ,KAAD,CAArC;AACA,UAAM;AAAEmB,MAAAA;AAAF,QAAe9B,OAAO,CAACuB,QAAQ,IAAIZ,KAAb,CAA5B;AACA,UAAM;AAAEoB,MAAAA;AAAF,QAAkBjC,OAAO,CAACa,KAAD,CAA/B;AACA,UAAM;AAAEqB,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAAwChC,YAAY,CAACI,KAAK,CAACM,KAAD,EAAQ,OAAR,CAAN,CAA1D;AAEA,WAAO,MAAM;AACX;AAAA,eAEUA,KAAK,CAACS,GAFhB;AAAA,gBAGWU,QAAQ,CAACI,KAAT,CAAejB,IAH1B;AAAA,iBAIW,CACL,QADK,EAEL,aAFK,EAGLc,WAAW,CAACG,KAHP,EAILF,gBAAgB,CAACE,KAJZ,EAKLL,YAAY,CAACK,KALR,EAML;AACE,0BAAgBvB,KAAK,CAACG,IADxB;AAEE,2BAAiBH,KAAK,CAACK;AAFzB,SANK,CAJX;AAAA,iBAeW,CACL,CAACe,WAAW,CAACG,KAAb,GAAsB;AACpBC,UAAAA,QAAQ,EAAE7B,aAAa,CAACK,KAAK,CAACyB,IAAP,CADH;AAEpBC,UAAAA,KAAK,EAAE/B,aAAa,CAACK,KAAK,CAACyB,IAAP,CAFA;AAGpBE,UAAAA,MAAM,EAAEhC,aAAa,CAACK,KAAK,CAACyB,IAAP;AAHD,SAAtB,GAIKG,SALA,EAMLN,eAAe,CAACC,KANX,CAfX;AAAA,uBAuBgB;AAvBhB;AA0BD,KA3BD;AA4BD;;AA7DkC,CAAD,CAA7B","sourcesContent":["// Styles\nimport './VIcon.sass'\n\n// Composables\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { useIcon } from '@/composables/icons'\nimport { useTextColor } from '@/composables/color'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent, flattenFragments } from '@/util'\n\n// Types\nimport type { IconValue } from '@/composables/icons'\nimport type { ComputedRef, PropType } from 'vue'\n\nexport const VIcon = defineComponent({\n  name: 'VIcon',\n\n  props: {\n    color: String,\n    left: Boolean,\n    right: Boolean,\n    icon: {\n      type: [String, Object] as PropType<IconValue>,\n    },\n    ...makeSizeProps(),\n    ...makeTagProps({ tag: 'i' }),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    let slotIcon: ComputedRef<string | undefined> | undefined\n    if (slots.default) {\n      slotIcon = computed(() => {\n        const slot = slots.default?.()\n        if (!slot) return\n\n        return flattenFragments(slot).filter(node =>\n          node.children && typeof node.children === 'string'\n        )[0]?.children as string\n      })\n    }\n\n    const { themeClasses } = provideTheme(props)\n    const { iconData } = useIcon(slotIcon || props)\n    const { sizeClasses } = useSize(props)\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n\n    return () => {\n      return (\n        <iconData.value.component\n          tag={ props.tag }\n          icon={ iconData.value.icon }\n          class={[\n            'v-icon',\n            'notranslate',\n            sizeClasses.value,\n            textColorClasses.value,\n            themeClasses.value,\n            {\n              'v-icon--left': props.left,\n              'v-icon--right': props.right,\n            },\n          ]}\n          style={[\n            !sizeClasses.value ? ({\n              fontSize: convertToUnit(props.size),\n              width: convertToUnit(props.size),\n              height: convertToUnit(props.size),\n            }) : undefined,\n            textColorStyles.value,\n          ]}\n          aria-hidden=\"true\"\n        />\n      )\n    }\n  },\n})\n"],"file":"VIcon.mjs"}

package/lib/components/VIcon/VIcon.sass

@@ -1,10 +1,13 @@
-// Imports
-@import './index'
+@forward './variables'
+@use 'sass:map'
+@use '../../styles/settings'
+@use './variables' as *
 
 .v-icon
   align-items: center
   display: inline-flex
   font-feature-settings: 'liga'
+  height: $icon-size
   justify-content: center
   letter-spacing: $icon-letter-spacing
   line-height: $icon-line-height
@@ -12,59 +15,30 @@
   text-indent: $icon-text-indent
   user-select: none
   vertical-align: $icon-vertical-align
+  width: $icon-size
 
   &--left
-    @include ltr()
-      margin-right: $icon-margin-start
-
-    @include rtl()
-      margin-left: $icon-margin-end
+    margin-inline-end: $icon-margin-start
 
   &--right
-    @include ltr()
-      margin-left: $icon-margin-start
-
-    @include rtl()
-      margin-right: $icon-margin-end
+    margin-inline-start: $icon-margin-end
 
-  @each $name in $sizes
+  @each $name in settings.$sizes
     &--size-#{$name}
-      font-size: map-get($icon-sizes, $name)
-      height: map-get($icon-sizes, $name)
-      width: map-get($icon-sizes, $name)
+      font-size: map.get($icon-sizes, $name)
 
 .v-icon__svg
   fill: currentColor
+  width: 100%
+  height: 100%
 
 .v-icon
-  &--size-default
-    .v-btn:not(.v-btn--icon):not(.v-btn--stacked) &
-      font-size: $icon-btn-font-size
-      height: $icon-btn-height
-      width: $icon-btn-width
-
-      .v-bottom-navigation &
-        font-size: $icon-btn-bottom-navigation-font-size
-
-      .v-bottom-navigation:not(.v-bottom-navigation--horizontal) &
-        margin: 0
-
   &--left
     .v-btn:not(.v-btn--icon) &
-      @include ltr()
-        margin-left: $icon-btn-margin-start
-        margin-right: $icon-btn-margin-end
-
-      @include rtl()
-        margin-left: $icon-btn-margin-end
-        margin-right: $icon-btn-margin-start
+      margin-inline-start: $icon-btn-margin-start
+      margin-inline-end: $icon-btn-margin-end
 
   &--right
     .v-btn:not(.v-btn--icon) &
-      @include ltr()
-        margin-left: $icon-btn-margin-end
-        margin-right: $icon-btn-margin-start
-
-      @include rtl()
-        margin-left: $icon-btn-margin-start
-        margin-right: $icon-btn-margin-end
+      margin-inline-start: $icon-btn-margin-end
+      margin-inline-end: $icon-btn-margin-start