@vuetify/nightly 3.0.0-beta.4 → 3.0.0-beta.9

package/lib/components/VList/VListItem.sass

@@ -4,18 +4,31 @@
 
 .v-list-item
   align-items: center
-  display: flex
+  display: grid
+  flex: none
+  grid-template-areas: "prepend content append"
+  grid-template-columns: max-content auto max-content
+  outline: none
   padding: $list-item-padding
   position: relative
-  outline: none
   text-decoration: none
-  transition: $list-item-transition
 
   @include tools.border($list-item-border...)
   @include tools.states('.v-list-item__overlay')
   @include tools.rounded($list-item-border-radius)
   @include tools.variant($list-item-variants...)
 
+  &__prepend,
+  &__append
+    > .v-icon
+      opacity: #{$list-item-icon-opacity}
+
+  &--active
+    .v-list-item__prepend,
+    .v-list-item__append
+      > .v-icon
+        opacity: #{$list-item-icon-active-opacity}
+
   &--rounded
     @include tools.rounded($list-item-rounded-border-radius)
 
@@ -27,41 +40,52 @@
   &--link
     cursor: pointer
 
-.v-list-item-action,
-.v-list-item-avatar,
-.v-list-item-icon
+.v-list-item__prepend
+  align-items: center
   align-self: center
   display: flex
-  align-items: center
-  flex: none
-  transition: inherit
-  transition-property: height, width
+  grid-area: prepend
 
-  .v-list-item--three-line &
-    align-self: flex-start
+  > .v-avatar
+    margin-inline-end: $list-item-avatar-margin-end
 
-.v-list-item-avatar
-  $root: &
+  > .v-icon
+    margin-inline-end: $list-item-icon-margin-end
 
-  &--start
-    margin-inline-end: $list-item-avatar-margin-end
+  .v-list-item--two-line &,
+  .v-list-item--three-line &
+    align-self: start
 
-  &--end
+.v-list-item__append
+  align-self: center
+  display: flex
+  align-items: center
+  grid-area: append
+
+  > .v-avatar
     margin-inline-start: $list-item-avatar-margin-start
 
-  @at-root
-    @include tools.density('v-list-item', $list-density) using ($modifier)
-      &.v-list-item--three-line #{$root}
-        margin-top: $list-item-avatar-margin-y - $modifier
+  > .v-icon
+    margin-inline-start: $list-item-icon-margin-start
 
-.v-list-item-icon
-  &--start
-    margin-inline-end: $list-item-icon-margin-end
+  .v-list-item--two-line &,
+  .v-list-item--three-line &
+    align-self: start
 
-  &--end
-    margin-inline-start: $list-item-icon-margin-start
+.v-list-item__content
+  align-self: center
+  grid-area: content
+  overflow: hidden
 
 .v-list-item-action
+  align-self: center
+  display: flex
+  align-items: center
+  grid-area: prepend
+  flex: none
+  transition: inherit
+  transition-property: height, width
+
   &--start
     margin-inline-end: $list-item-action-margin-start
 
@@ -86,10 +110,6 @@
     margin-top: $list-item-media-three-line-margin-top
     margin-bottom: $list-item-media-three-line-margin-bottom
 
-.v-list-item-header
-  flex: 1 1 auto
-  min-width: 0
-
 .v-list-item-subtitle
   -webkit-box-orient: vertical
   display: -webkit-box
@@ -130,10 +150,12 @@
 .v-list-item
   @at-root
     @include tools.density('v-list-item', $list-density) using ($modifier)
+      min-height: $list-item-min-height + $modifier
+
       &.v-list-item--one-line
         $one-line-padding: (list.nth($list-item-padding, 1) + $modifier)
 
-        min-height: $list-item-min-height + $modifier
+        min-height: $list-item-one-line-min-height + $modifier
         padding-top: $one-line-padding
         padding-bottom: $one-line-padding
 
@@ -172,6 +194,9 @@
       &:not(:last-child):not(:only-child)
         margin-bottom: $list-item-nav-margin-top
 
+.v-list-item__underlay
+  position: absolute
+
 .v-list-item__overlay
   background-color: currentColor
   border-radius: inherit
@@ -195,21 +220,25 @@ $base-padding: list.nth($list-item-padding, 2)
     --indent-padding: -#{$list-nav-padding}
 
 .v-list-group
+  --list-indent-size: #{$list-indent-size}
   --parent-padding: var(--indent-padding)
+  --prepend-width: #{$list-item-prepend-size}
+
+  &--fluid
+    --list-indent-size: 0px
+
   &--prepend
-    --parent-padding: calc(var(--indent-padding) + #{$list-item-avatar-size})
+    --parent-padding: calc(var(--indent-padding) + var(--prepend-width))
+
+  &--fluid.v-list-group--prepend
+    --parent-padding: var(--indent-padding)
 
 .v-list-group__items
-  --indent-padding: calc(var(--parent-padding) + #{$list-indent-size})
+  --indent-padding: calc(var(--parent-padding) + var(--list-indent-size))
 
 .v-list-group__items .v-list-item
   padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important
 
-.v-list-item--prepend,
-.v-list-group__items .v-list-item--prepend
-  .v-list-item-avatar
-    padding-inline-start: calc(#{$base-padding} + var(--indent-padding) + #{$list-item-avatar-size} + #{$list-item-avatar-margin-start}) !important
-
 .v-list-group__header.v-list-item--active
   .v-list-item__overlay
     display: none

package/lib/components/VList/VListItemAction.mjs

@@ -2,7 +2,7 @@ import { createVNode as _createVNode, resolveDirective as _resolveDirective } fr
 // Composables
 import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 export const VListItemAction = defineComponent({
   name: 'VListItemAction',
   props: {
@@ -15,14 +15,13 @@ export const VListItemAction = defineComponent({
     let {
       slots
     } = _ref;
-    return () => {
-      return _createVNode(props.tag, {
-        "class": ['v-list-item-action', {
-          'v-list-item-action--start': props.start,
-          'v-list-item-action--end': props.end
-        }]
-      }, slots);
-    };
+    useRender(() => _createVNode(props.tag, {
+      "class": ['v-list-item-action', {
+        'v-list-item-action--start': props.start,
+        'v-list-item-action--end': props.end
+      }]
+    }, slots));
+    return {};
   }
 
 });

package/lib/components/VList/VListItemAction.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VListItemAction.mjs","names":["makeTagProps","defineComponent","VListItemAction","name","props","start","Boolean","end","setup","slots"],"sources":["../../../src/components/VList/VListItemAction.tsx"],"sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VListItemAction = defineComponent({\n  name: 'VListItemAction',\n\n  props: {\n    start: Boolean,\n    end: Boolean,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    return () => {\n      return (\n        <props.tag\n          class={[\n            'v-list-item-action',\n            {\n              'v-list-item-action--start': props.start,\n              'v-list-item-action--end': props.end,\n            },\n          ]}\n          v-slots={ slots }\n        />\n      )\n    }\n  },\n})\n"],"mappings":";AAAA;SACSA,Y,qCAET;;SACSC,e;AAET,OAAO,MAAMC,eAAe,GAAGD,eAAe,CAAC;EAC7CE,IAAI,EAAE,iBADuC;EAG7CC,KAAK,EAAE;IACLC,KAAK,EAAEC,OADF;IAELC,GAAG,EAAED,OAFA;IAIL,GAAGN,YAAY;EAJV,CAHsC;;EAU7CQ,KAAK,CAAEJ,KAAF,QAAoB;IAAA,IAAX;MAAEK;IAAF,CAAW;IACvB,OAAO,MAAM;MACX;QAAA,SAEW,CACL,oBADK,EAEL;UACE,6BAA6BL,KAAK,CAACC,KADrC;UAEE,2BAA2BD,KAAK,CAACG;QAFnC,CAFK;MAFX,GAScE,KATd;IAYD,CAbD;EAcD;;AAzB4C,CAAD,CAAvC"}
+{"version":3,"file":"VListItemAction.mjs","names":["makeTagProps","defineComponent","useRender","VListItemAction","name","props","start","Boolean","end","setup","slots"],"sources":["../../../src/components/VList/VListItemAction.tsx"],"sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VListItemAction = defineComponent({\n  name: 'VListItemAction',\n\n  props: {\n    start: Boolean,\n    end: Boolean,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-list-item-action',\n          {\n            'v-list-item-action--start': props.start,\n            'v-list-item-action--end': props.end,\n          },\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,Y,qCAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,eAAe,GAAGF,eAAe,CAAC;EAC7CG,IAAI,EAAE,iBADuC;EAG7CC,KAAK,EAAE;IACLC,KAAK,EAAEC,OADF;IAELC,GAAG,EAAED,OAFA;IAIL,GAAGP,YAAY;EAJV,CAHsC;;EAU7CS,KAAK,CAAEJ,KAAF,QAAoB;IAAA,IAAX;MAAEK;IAAF,CAAW;IACvBR,SAAS,CAAC;MAAA,SAEC,CACL,oBADK,EAEL;QACE,6BAA6BG,KAAK,CAACC,KADrC;QAEE,2BAA2BD,KAAK,CAACG;MAFnC,CAFK;IAFD,GASIE,KATJ,CAAD,CAAT;IAaA,OAAO,EAAP;EACD;;AAzB4C,CAAD,CAAvC"}

package/lib/components/VList/VListItemMedia.mjs

@@ -2,7 +2,7 @@ import { createVNode as _createVNode, resolveDirective as _resolveDirective } fr
 // Composables
 import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 export const VListItemMedia = defineComponent({
   name: 'VListItemMedia',
   props: {
@@ -15,14 +15,15 @@ export const VListItemMedia = defineComponent({
     let {
       slots
     } = _ref;
-    return () => {
+    useRender(() => {
       return _createVNode(props.tag, {
         "class": ['v-list-item-media', {
           'v-list-item-media--start': props.start,
           'v-list-item-media--end': props.end
         }]
       }, slots);
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VList/VListItemMedia.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VListItemMedia.mjs","names":["makeTagProps","defineComponent","VListItemMedia","name","props","start","Boolean","end","setup","slots"],"sources":["../../../src/components/VList/VListItemMedia.tsx"],"sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VListItemMedia = defineComponent({\n  name: 'VListItemMedia',\n\n  props: {\n    start: Boolean,\n    end: Boolean,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    return () => {\n      return (\n        <props.tag\n          class={[\n            'v-list-item-media',\n            {\n              'v-list-item-media--start': props.start,\n              'v-list-item-media--end': props.end,\n            },\n          ]}\n          v-slots={ slots }\n        />\n      )\n    }\n  },\n})\n"],"mappings":";AAAA;SACSA,Y,qCAET;;SACSC,e;AAET,OAAO,MAAMC,cAAc,GAAGD,eAAe,CAAC;EAC5CE,IAAI,EAAE,gBADsC;EAG5CC,KAAK,EAAE;IACLC,KAAK,EAAEC,OADF;IAELC,GAAG,EAAED,OAFA;IAIL,GAAGN,YAAY;EAJV,CAHqC;;EAU5CQ,KAAK,CAAEJ,KAAF,QAAoB;IAAA,IAAX;MAAEK;IAAF,CAAW;IACvB,OAAO,MAAM;MACX;QAAA,SAEW,CACL,mBADK,EAEL;UACE,4BAA4BL,KAAK,CAACC,KADpC;UAEE,0BAA0BD,KAAK,CAACG;QAFlC,CAFK;MAFX,GAScE,KATd;IAYD,CAbD;EAcD;;AAzB2C,CAAD,CAAtC"}
+{"version":3,"file":"VListItemMedia.mjs","names":["makeTagProps","defineComponent","useRender","VListItemMedia","name","props","start","Boolean","end","setup","slots"],"sources":["../../../src/components/VList/VListItemMedia.tsx"],"sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VListItemMedia = defineComponent({\n  name: 'VListItemMedia',\n\n  props: {\n    start: Boolean,\n    end: Boolean,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-list-item-media',\n            {\n              'v-list-item-media--start': props.start,\n              'v-list-item-media--end': props.end,\n            },\n          ]}\n          v-slots={ slots }\n        />\n      )\n    })\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,Y,qCAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBADsC;EAG5CC,KAAK,EAAE;IACLC,KAAK,EAAEC,OADF;IAELC,GAAG,EAAED,OAFA;IAIL,GAAGP,YAAY;EAJV,CAHqC;;EAU5CS,KAAK,CAAEJ,KAAF,QAAoB;IAAA,IAAX;MAAEK;IAAF,CAAW;IACvBR,SAAS,CAAC,MAAM;MACd;QAAA,SAEW,CACL,mBADK,EAEL;UACE,4BAA4BG,KAAK,CAACC,KADpC;UAEE,0BAA0BD,KAAK,CAACG;QAFlC,CAFK;MAFX,GAScE,KATd;IAYD,CAbQ,CAAT;IAeA,OAAO,EAAP;EACD;;AA3B2C,CAAD,CAAtC"}

package/lib/components/VList/VListSubheader.mjs

@@ -4,7 +4,7 @@ import { makeTagProps } from "../../composables/tag.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utilities
 
 import { toRef } from 'vue';
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 export const VListSubheader = defineComponent({
   name: 'VListSubheader',
   props: {
@@ -23,7 +23,7 @@ export const VListSubheader = defineComponent({
       textColorClasses,
       textColorStyles
     } = useTextColor(toRef(props, 'color'));
-    return () => {
+    useRender(() => {
       var _slots$default, _slots$default2;
 
       const hasText = !!(slots.default || props.title);
@@ -40,7 +40,8 @@ export const VListSubheader = defineComponent({
           "class": "v-list-subheader__text"
         }, [(_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : props.title])]
       });
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VList/VListSubheader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VListSubheader.mjs","names":["makeTagProps","useTextColor","toRef","defineComponent","VListSubheader","name","props","color","String","inset","Boolean","sticky","title","setup","slots","textColorClasses","textColorStyles","hasText","default","value"],"sources":["../../../src/components/VList/VListSubheader.tsx"],"sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\nexport const VListSubheader = defineComponent({\n  name: 'VListSubheader',\n\n  props: {\n    color: String,\n    inset: Boolean,\n    sticky: Boolean,\n    title: String,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n\n    return () => {\n      const hasText = !!(slots.default || props.title)\n\n      return (\n        <props.tag\n          class={[\n            'v-list-subheader',\n            {\n              'v-list-subheader--inset': props.inset,\n              'v-list-subheader--sticky': props.sticky,\n            },\n            textColorClasses.value,\n          ]}\n          style={{ textColorStyles }}\n        >\n          { hasText && (\n            <div class=\"v-list-subheader__text\">\n              { slots.default?.() ?? props.title }\n            </div>\n          ) }\n        </props.tag>\n      )\n    }\n  },\n})\n"],"mappings":";AAAA;SACSA,Y;SACAC,Y,uCAET;;AACA,SAASC,KAAT,QAAsB,KAAtB;SACSC,e;AAET,OAAO,MAAMC,cAAc,GAAGD,eAAe,CAAC;EAC5CE,IAAI,EAAE,gBADsC;EAG5CC,KAAK,EAAE;IACLC,KAAK,EAAEC,MADF;IAELC,KAAK,EAAEC,OAFF;IAGLC,MAAM,EAAED,OAHH;IAILE,KAAK,EAAEJ,MAJF;IAML,GAAGR,YAAY;EANV,CAHqC;;EAY5Ca,KAAK,CAAEP,KAAF,QAAoB;IAAA,IAAX;MAAEQ;IAAF,CAAW;IACvB,MAAM;MAAEC,gBAAF;MAAoBC;IAApB,IAAwCf,YAAY,CAACC,KAAK,CAACI,KAAD,EAAQ,OAAR,CAAN,CAA1D;IAEA,OAAO,MAAM;MAAA;;MACX,MAAMW,OAAO,GAAG,CAAC,EAAEH,KAAK,CAACI,OAAN,IAAiBZ,KAAK,CAACM,KAAzB,CAAjB;MAEA;QAAA,SAEW,CACL,kBADK,EAEL;UACE,2BAA2BN,KAAK,CAACG,KADnC;UAEE,4BAA4BH,KAAK,CAACK;QAFpC,CAFK,EAMLI,gBAAgB,CAACI,KANZ,CAFX;QAAA,SAUW;UAAEH;QAAF;MAVX;QAAA,gBAYMC,OAAO;UAAA,SACI;QADJ,yCAEHH,KAAK,CAACI,OAFH,qBAEH,qBAAAJ,KAAK,CAFF,6BAEkBR,KAAK,CAACM,KAFxB,EAZb;MAAA;IAmBD,CAtBD;EAuBD;;AAtC2C,CAAD,CAAtC"}
+{"version":3,"file":"VListSubheader.mjs","names":["makeTagProps","useTextColor","toRef","defineComponent","useRender","VListSubheader","name","props","color","String","inset","Boolean","sticky","title","setup","slots","textColorClasses","textColorStyles","hasText","default","value"],"sources":["../../../src/components/VList/VListSubheader.tsx"],"sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VListSubheader = defineComponent({\n  name: 'VListSubheader',\n\n  props: {\n    color: String,\n    inset: Boolean,\n    sticky: Boolean,\n    title: String,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n\n    useRender(() => {\n      const hasText = !!(slots.default || props.title)\n\n      return (\n        <props.tag\n          class={[\n            'v-list-subheader',\n            {\n              'v-list-subheader--inset': props.inset,\n              'v-list-subheader--sticky': props.sticky,\n            },\n            textColorClasses.value,\n          ]}\n          style={{ textColorStyles }}\n        >\n          { hasText && (\n            <div class=\"v-list-subheader__text\">\n              { slots.default?.() ?? props.title }\n            </div>\n          ) }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,Y;SACAC,Y,uCAET;;AACA,SAASC,KAAT,QAAsB,KAAtB;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBADsC;EAG5CC,KAAK,EAAE;IACLC,KAAK,EAAEC,MADF;IAELC,KAAK,EAAEC,OAFF;IAGLC,MAAM,EAAED,OAHH;IAILE,KAAK,EAAEJ,MAJF;IAML,GAAGT,YAAY;EANV,CAHqC;;EAY5Cc,KAAK,CAAEP,KAAF,QAAoB;IAAA,IAAX;MAAEQ;IAAF,CAAW;IACvB,MAAM;MAAEC,gBAAF;MAAoBC;IAApB,IAAwChB,YAAY,CAACC,KAAK,CAACK,KAAD,EAAQ,OAAR,CAAN,CAA1D;IAEAH,SAAS,CAAC,MAAM;MAAA;;MACd,MAAMc,OAAO,GAAG,CAAC,EAAEH,KAAK,CAACI,OAAN,IAAiBZ,KAAK,CAACM,KAAzB,CAAjB;MAEA;QAAA,SAEW,CACL,kBADK,EAEL;UACE,2BAA2BN,KAAK,CAACG,KADnC;UAEE,4BAA4BH,KAAK,CAACK;QAFpC,CAFK,EAMLI,gBAAgB,CAACI,KANZ,CAFX;QAAA,SAUW;UAAEH;QAAF;MAVX;QAAA,gBAYMC,OAAO;UAAA,SACI;QADJ,yCAEHH,KAAK,CAACI,OAFH,qBAEH,qBAAAJ,KAAK,CAFF,6BAEkBR,KAAK,CAACM,KAFxB,EAZb;MAAA;IAmBD,CAtBQ,CAAT;IAwBA,OAAO,EAAP;EACD;;AAxC2C,CAAD,CAAtC"}

package/lib/components/VList/_variables.scss

@@ -2,7 +2,7 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
-// Defaults
+// VList
 $list-background: rgba(var(--v-theme-surface)) !default;
 $list-border-color: settings.$border-color-root !default;
 $list-border-radius: 0 !default;
@@ -19,10 +19,12 @@ $list-indent-size: 16px !default;
 $list-nav-padding: 8px !default;
 $list-nav-subheader-font-size: .75rem !default;
 
+// VListSubheader
+$list-subheader-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $list-subheader-font-size: .875rem !default;
-$list-subheader-font-weight: 500 !default;
+$list-subheader-font-weight: 400 !default;
 $list-subheader-inset-margin: 56px !default;
-$list-subheader-inset-padding-start: 72px !default;
+$list-subheader-inset-padding-start: 56px !default;
 $list-subheader-line-height: 1.375rem !default;
 $list-subheader-min-height: 40px !default;
 $list-subheader-padding-end: 16px !default;
@@ -32,17 +34,22 @@ $list-subheader-min-height-multiplier: 1 !default;
 $list-subheader-text-opacity: var(--v-medium-emphasis-opacity) !default;
 $list-subheader-transition: 0.2s min-height settings.$standard-easing !default;
 
+// VListItem
 $list-item-border-color: settings.$border-color-root !default;
 $list-item-border-radius: 0 !default;
 $list-item-border-style: settings.$border-style-root !default;
 $list-item-border-width: 0 !default;
 $list-item-border-thin-width: thin !default;
 $list-item-elevation: 1 !default;
+$list-item-icon-opacity: var(--v-medium-emphasis-opacity) !default;
+$list-item-icon-active-opacity: 1 !default;
 $list-item-min-height: 40px !default;
-$list-item-padding: 8px 16px !default;
+$list-item-padding: 4px 16px !default;
+$list-item-prepend-size: 40px !default;
 $list-item-plain-opacity: .62 !default;
 $list-item-rounded-border-radius: map.get(settings.$rounded, null) !default;
-$list-item-transition: .2s settings.$standard-easing !default;
+$list-item-one-line-min-height: 48px !default;
+$list-item-one-line-padding: 8px 16px !default;
 $list-item-two-line-min-height: 64px !default;
 $list-item-two-line-padding: 12px 16px !default;
 $list-item-three-line-min-height: 88px !default;

package/lib/components/VList/index.mjs

@@ -1,13 +1,10 @@
 export { VList } from "./VList.mjs";
-export { VListSubheader } from "./VListSubheader.mjs";
+export { VListGroup } from "./VListGroup.mjs";
 export { VListImg } from "./VListImg.mjs";
 export { VListItem } from "./VListItem.mjs";
 export { VListItemAction } from "./VListItemAction.mjs";
-export { VListItemAvatar } from "./VListItemAvatar.mjs";
-export { VListItemHeader } from "./VListItemHeader.mjs";
-export { VListItemIcon } from "./VListItemIcon.mjs";
 export { VListItemMedia } from "./VListItemMedia.mjs";
 export { VListItemSubtitle } from "./VListItemSubtitle.mjs";
 export { VListItemTitle } from "./VListItemTitle.mjs";
-export { VListGroup } from "./VListGroup.mjs";
+export { VListSubheader } from "./VListSubheader.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["VList","VListSubheader","VListImg","VListItem","VListItemAction","VListItemAvatar","VListItemHeader","VListItemIcon","VListItemMedia","VListItemSubtitle","VListItemTitle","VListGroup"],"sources":["../../../src/components/VList/index.ts"],"sourcesContent":["export { VList } from './VList'\nexport { VListSubheader } from './VListSubheader'\nexport { VListImg } from './VListImg'\nexport { VListItem } from './VListItem'\nexport { VListItemAction } from './VListItemAction'\nexport { VListItemAvatar } from './VListItemAvatar'\nexport { VListItemHeader } from './VListItemHeader'\nexport { VListItemIcon } from './VListItemIcon'\nexport { VListItemMedia } from './VListItemMedia'\nexport { VListItemSubtitle } from './VListItemSubtitle'\nexport { VListItemTitle } from './VListItemTitle'\nexport { VListGroup } from './VListGroup'\n"],"mappings":"SAASA,K;SACAC,c;SACAC,Q;SACAC,S;SACAC,e;SACAC,e;SACAC,e;SACAC,a;SACAC,c;SACAC,iB;SACAC,c;SACAC,U"}
+{"version":3,"file":"index.mjs","names":["VList","VListGroup","VListImg","VListItem","VListItemAction","VListItemMedia","VListItemSubtitle","VListItemTitle","VListSubheader"],"sources":["../../../src/components/VList/index.ts"],"sourcesContent":["export { VList } from './VList'\nexport { VListGroup } from './VListGroup'\nexport { VListImg } from './VListImg'\nexport { VListItem } from './VListItem'\nexport { VListItemAction } from './VListItemAction'\nexport { VListItemMedia } from './VListItemMedia'\nexport { VListItemSubtitle } from './VListItemSubtitle'\nexport { VListItemTitle } from './VListItemTitle'\nexport { VListSubheader } from './VListSubheader'\n"],"mappings":"SAASA,K;SACAC,U;SACAC,Q;SACAC,S;SACAC,e;SACAC,c;SACAC,iB;SACAC,c;SACAC,c"}

package/lib/components/VLocaleProvider/VLocaleProvider.mjs

@@ -1,10 +1,11 @@
 import { createVNode as _createVNode } from "vue";
+// Styles
 import "./VLocaleProvider.css"; // Composables
 
 import { provideLocale } from "../../composables/locale.mjs";
 import { provideRtl } from "../../composables/rtl.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 export const VLocaleProvider = defineComponent({
   name: 'VLocaleProvider',
   props: {
@@ -25,13 +26,14 @@ export const VLocaleProvider = defineComponent({
     const {
       rtlClasses
     } = provideRtl(props, localeInstance);
-    return () => {
+    useRender(() => {
       var _slots$default;
 
       return _createVNode("div", {
         "class": ['v-locale-provider', rtlClasses.value]
       }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VLocaleProvider/VLocaleProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VLocaleProvider.mjs","names":["provideLocale","provideRtl","defineComponent","VLocaleProvider","name","props","locale","String","fallbackLocale","messages","Object","rtl","type","Boolean","default","undefined","setup","slots","localeInstance","rtlClasses","value"],"sources":["../../../src/components/VLocaleProvider/VLocaleProvider.tsx"],"sourcesContent":["import './VLocaleProvider.sass'\n\n// Composables\nimport { provideLocale } from '@/composables/locale'\nimport { provideRtl } from '@/composables/rtl'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VLocaleProvider = defineComponent({\n  name: 'VLocaleProvider',\n\n  props: {\n    locale: String,\n    fallbackLocale: String,\n    messages: Object,\n    rtl: {\n      type: Boolean,\n      default: undefined,\n    },\n  },\n\n  setup (props, { slots }) {\n    const localeInstance = provideLocale(props)\n    const { rtlClasses } = provideRtl(props, localeInstance)\n\n    return () => (\n      <div\n        class={[\n          'v-locale-provider',\n          rtlClasses.value,\n        ]}\n      >\n        { slots.default?.() }\n      </div>\n    )\n  },\n})\n"],"mappings":";AAAA,+B,CAEA;;SACSA,a;SACAC,U,qCAET;;SACSC,e;AAET,OAAO,MAAMC,eAAe,GAAGD,eAAe,CAAC;EAC7CE,IAAI,EAAE,iBADuC;EAG7CC,KAAK,EAAE;IACLC,MAAM,EAAEC,MADH;IAELC,cAAc,EAAED,MAFX;IAGLE,QAAQ,EAAEC,MAHL;IAILC,GAAG,EAAE;MACHC,IAAI,EAAEC,OADH;MAEHC,OAAO,EAAEC;IAFN;EAJA,CAHsC;;EAa7CC,KAAK,CAAEX,KAAF,QAAoB;IAAA,IAAX;MAAEY;IAAF,CAAW;IACvB,MAAMC,cAAc,GAAGlB,aAAa,CAACK,KAAD,CAApC;IACA,MAAM;MAAEc;IAAF,IAAiBlB,UAAU,CAACI,KAAD,EAAQa,cAAR,CAAjC;IAEA,OAAO;MAAA;;MAAA;QAAA,SAEI,CACL,mBADK,EAELC,UAAU,CAACC,KAFN;MAFJ,sBAODH,KAAK,CAACH,OAPL,qBAOD,oBAAAG,KAAK,CAPJ;IAAA,CAAP;EAUD;;AA3B4C,CAAD,CAAvC"}
+{"version":3,"file":"VLocaleProvider.mjs","names":["provideLocale","provideRtl","defineComponent","useRender","VLocaleProvider","name","props","locale","String","fallbackLocale","messages","Object","rtl","type","Boolean","default","undefined","setup","slots","localeInstance","rtlClasses","value"],"sources":["../../../src/components/VLocaleProvider/VLocaleProvider.tsx"],"sourcesContent":["// Styles\nimport './VLocaleProvider.sass'\n\n// Composables\nimport { provideLocale } from '@/composables/locale'\nimport { provideRtl } from '@/composables/rtl'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VLocaleProvider = defineComponent({\n  name: 'VLocaleProvider',\n\n  props: {\n    locale: String,\n    fallbackLocale: String,\n    messages: Object,\n    rtl: {\n      type: Boolean,\n      default: undefined,\n    },\n  },\n\n  setup (props, { slots }) {\n    const localeInstance = provideLocale(props)\n    const { rtlClasses } = provideRtl(props, localeInstance)\n\n    useRender(() => (\n      <div\n        class={[\n          'v-locale-provider',\n          rtlClasses.value,\n        ]}\n      >\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;AACA,+B,CAEA;;SACSA,a;SACAC,U,qCAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,eAAe,GAAGF,eAAe,CAAC;EAC7CG,IAAI,EAAE,iBADuC;EAG7CC,KAAK,EAAE;IACLC,MAAM,EAAEC,MADH;IAELC,cAAc,EAAED,MAFX;IAGLE,QAAQ,EAAEC,MAHL;IAILC,GAAG,EAAE;MACHC,IAAI,EAAEC,OADH;MAEHC,OAAO,EAAEC;IAFN;EAJA,CAHsC;;EAa7CC,KAAK,CAAEX,KAAF,QAAoB;IAAA,IAAX;MAAEY;IAAF,CAAW;IACvB,MAAMC,cAAc,GAAGnB,aAAa,CAACM,KAAD,CAApC;IACA,MAAM;MAAEc;IAAF,IAAiBnB,UAAU,CAACK,KAAD,EAAQa,cAAR,CAAjC;IAEAhB,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,mBADK,EAELiB,UAAU,CAACC,KAFN;MAFD,sBAOJH,KAAK,CAACH,OAPF,qBAOJ,oBAAAG,KAAK,CAPD;IAAA,CAAD,CAAT;IAWA,OAAO,EAAP;EACD;;AA7B4C,CAAD,CAAvC"}

package/lib/components/VMain/VMain.css

@@ -1,14 +1,32 @@
 .v-main {
-  display: flex;
   flex: 1 0 auto;
   max-width: 100%;
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  padding-left: var(--v-layout-left);
+  padding-right: var(--v-layout-right);
+  padding-top: var(--v-layout-top);
+  padding-bottom: var(--v-layout-bottom);
 }
-.v-main__wrap {
-  flex: 1 1 auto;
+.v-main__scroller {
   max-width: 100%;
   position: relative;
 }
+.v-main--scrollable {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.v-main--scrollable > .v-main__scroller {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  --v-layout-left: 0px;
+  --v-layout-right: 0px;
+  --v-layout-top: 0px;
+  --v-layout-bottom: 0px;
+}
 @-moz-document url-prefix() {
   @media print {
     .v-main {

package/lib/components/VMain/VMain.mjs

@@ -6,12 +6,15 @@ import { makeTagProps } from "../../composables/tag.mjs";
 import { useLayout } from "../../composables/layout.mjs";
 import { useSsrBoot } from "../../composables/ssrBoot.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 export const VMain = defineComponent({
   name: 'VMain',
-  props: makeTagProps({
-    tag: 'main'
-  }),
+  props: {
+    scrollable: Boolean,
+    ...makeTagProps({
+      tag: 'main'
+    })
+  },
 
   setup(props, _ref) {
     let {
@@ -23,18 +26,21 @@ export const VMain = defineComponent({
     const {
       ssrBootStyles
     } = useSsrBoot();
-    return () => {
-      var _slots$default;
+    useRender(() => {
+      var _slots$default, _slots$default2;
 
       return _createVNode(props.tag, {
-        "class": "v-main",
+        "class": ['v-main', {
+          'v-main--scrollable': props.scrollable
+        }],
         "style": [mainStyles.value, ssrBootStyles.value]
       }, {
-        default: () => [_createVNode("div", {
-          "class": "v-main__wrap"
-        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)])]
+        default: () => [props.scrollable ? _createVNode("div", {
+          "class": "v-main__scroller"
+        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]) : (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)]
       });
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VMain/VMain.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VMain.mjs","names":["makeTagProps","useLayout","useSsrBoot","defineComponent","VMain","name","props","tag","setup","slots","mainStyles","ssrBootStyles","value","default"],"sources":["../../../src/components/VMain/VMain.tsx"],"sourcesContent":["// Styles\nimport './VMain.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { useLayout } from '@/composables/layout'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VMain = defineComponent({\n  name: 'VMain',\n\n  props: makeTagProps({ tag: 'main' }),\n\n  setup (props, { slots }) {\n    const { mainStyles } = useLayout()\n    const { ssrBootStyles } = useSsrBoot()\n\n    return () => (\n      <props.tag\n        class=\"v-main\"\n        style={[\n          mainStyles.value,\n          ssrBootStyles.value,\n        ]}\n      >\n        <div class=\"v-main__wrap\">\n          { slots.default?.() }\n        </div>\n      </props.tag>\n    )\n  },\n})\n"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,Y;SACAC,S;SACAC,U,yCAET;;SACSC,e;AAET,OAAO,MAAMC,KAAK,GAAGD,eAAe,CAAC;EACnCE,IAAI,EAAE,OAD6B;EAGnCC,KAAK,EAAEN,YAAY,CAAC;IAAEO,GAAG,EAAE;EAAP,CAAD,CAHgB;;EAKnCC,KAAK,CAAEF,KAAF,QAAoB;IAAA,IAAX;MAAEG;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAiBT,SAAS,EAAhC;IACA,MAAM;MAAEU;IAAF,IAAoBT,UAAU,EAApC;IAEA,OAAO;MAAA;;MAAA;QAAA,SAEG,QAFH;QAAA,SAGI,CACLQ,UAAU,CAACE,KADN,EAELD,aAAa,CAACC,KAFT;MAHJ;QAAA;UAAA,SAQQ;QARR,sBASCH,KAAK,CAACI,OATP,qBASC,oBAAAJ,KAAK,CATN;MAAA;IAAA,CAAP;EAaD;;AAtBkC,CAAD,CAA7B"}
+{"version":3,"file":"VMain.mjs","names":["makeTagProps","useLayout","useSsrBoot","defineComponent","useRender","VMain","name","props","scrollable","Boolean","tag","setup","slots","mainStyles","ssrBootStyles","value","default"],"sources":["../../../src/components/VMain/VMain.tsx"],"sourcesContent":["// Styles\nimport './VMain.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { useLayout } from '@/composables/layout'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VMain = defineComponent({\n  name: 'VMain',\n\n  props: {\n    scrollable: Boolean,\n\n    ...makeTagProps({ tag: 'main' }),\n  },\n\n  setup (props, { slots }) {\n    const { mainStyles } = useLayout()\n    const { ssrBootStyles } = useSsrBoot()\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-main',\n          { 'v-main--scrollable': props.scrollable },\n        ]}\n        style={[\n          mainStyles.value,\n          ssrBootStyles.value,\n        ]}\n      >\n        { props.scrollable\n          ? (\n            <div class=\"v-main__scroller\">\n              { slots.default?.() }\n            </div>\n          )\n          : slots.default?.()\n        }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,Y;SACAC,S;SACAC,U,yCAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAAC;EACnCG,IAAI,EAAE,OAD6B;EAGnCC,KAAK,EAAE;IACLC,UAAU,EAAEC,OADP;IAGL,GAAGT,YAAY,CAAC;MAAEU,GAAG,EAAE;IAAP,CAAD;EAHV,CAH4B;;EASnCC,KAAK,CAAEJ,KAAF,QAAoB;IAAA,IAAX;MAAEK;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAiBZ,SAAS,EAAhC;IACA,MAAM;MAAEa;IAAF,IAAoBZ,UAAU,EAApC;IAEAE,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,QADK,EAEL;UAAE,sBAAsBG,KAAK,CAACC;QAA9B,CAFK,CAFD;QAAA,SAMC,CACLK,UAAU,CAACE,KADN,EAELD,aAAa,CAACC,KAFT;MAND;QAAA,gBAWJR,KAAK,CAACC,UAAN;UAAA,SAEa;QAFb,sBAGMI,KAAK,CAACI,OAHZ,qBAGM,oBAAAJ,KAAK,CAHX,wBAMEA,KAAK,CAACI,OANR,qBAME,qBAAAJ,KAAK,CAjBH;MAAA;IAAA,CAAD,CAAT;IAsBA,OAAO,EAAP;EACD;;AApCkC,CAAD,CAA7B"}

package/lib/components/VMain/VMain.sass

@@ -1,3 +1,4 @@
+@use '../../styles/tools'
 @use './variables' as *
 
 @mixin firefox()
@@ -5,16 +6,30 @@
     @content
 
 .v-main
-  display: flex
   flex: 1 0 auto
   max-width: 100%
   transition: $main-transition
+  padding-left: var(--v-layout-left)
+  padding-right: var(--v-layout-right)
+  padding-top: var(--v-layout-top)
+  padding-bottom: var(--v-layout-bottom)
 
-  &__wrap
-    flex: 1 1 auto
+  &__scroller
     max-width: 100%
     position: relative
 
+  &--scrollable
+    display: flex
+    @include tools.absolute()
+
+    & > .v-main__scroller
+      flex: 1 1 auto
+      overflow-y: auto
+      --v-layout-left: 0px
+      --v-layout-right: 0px
+      --v-layout-top: 0px
+      --v-layout-bottom: 0px
+
   +firefox()
     @media print
       display: block

package/lib/components/VMain/_variables.scss

@@ -1,4 +1,4 @@
 @use '../../styles/settings';
 
-// Defaults
+// VMain
 $main-transition: 0.2s settings.$standard-easing !default;

package/lib/components/VMenu/VMenu.mjs

@@ -2,18 +2,18 @@ import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirectiv
 // Styles
 import "./VMenu.css"; // Components
 
-import { VOverlay } from "../VOverlay/index.mjs";
-import { VDialogTransition } from "../transitions/index.mjs"; // Composables
+import { VDialogTransition } from "../transitions/index.mjs";
+import { VOverlay } from "../VOverlay/index.mjs"; // Composables
 
 import { makeTransitionProps } from "../../composables/transition.mjs";
-import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
+import { forwardRefs } from "../../composables/forwardRefs.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { useScopeId } from "../../composables/scopeId.mjs"; // Utilities
 
 import { computed, inject, provide, ref, watch } from 'vue';
 import { genericComponent, getUid, useRender } from "../../util/index.mjs";
 import { VMenuSymbol } from "./shared.mjs"; // Types
 
-import { useForwardRef } from "../../composables/forwardRef.mjs";
-import { useScopeId } from "../../composables/scopeId.mjs";
 export const VMenu = genericComponent()({
   name: 'VMenu',
   inheritAttrs: false,
@@ -96,7 +96,7 @@ export const VMenu = genericComponent()({
       default: slots.default,
       activator: slots.activator
     }));
-    return useForwardRef({
+    return forwardRefs({
       id
     }, overlay);
   }

package/lib/components/VMenu/VMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VMenu.mjs","names":["VOverlay","VDialogTransition","makeTransitionProps","useProxiedModel","computed","inject","provide","ref","watch","genericComponent","getUid","useRender","VMenuSymbol","useForwardRef","useScopeId","VMenu","name","inheritAttrs","props","modelValue","Boolean","id","String","transition","component","emits","value","setup","attrs","slots","isActive","scopeId","uid","overlay","parent","openChildren","register","unregister","closeParents","setTimeout","val","onClickOutside","default","activator"],"sources":["../../../src/components/VMenu/VMenu.tsx"],"sourcesContent":["// Styles\nimport './VMenu.sass'\n\n// Components\nimport { VOverlay } from '@/components/VOverlay'\nimport { VDialogTransition } from '@/components/transitions'\n\n// Composables\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, inject, provide, ref, watch } from 'vue'\nimport { genericComponent, getUid, useRender } from '@/util'\nimport { VMenuSymbol } from './shared'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\nimport { useForwardRef } from '@/composables/forwardRef'\nimport { useScopeId } from '@/composables/scopeId'\n\nexport const VMenu = genericComponent<new () => {\n  $slots: OverlaySlots\n}>()({\n  name: 'VMenu',\n\n  inheritAttrs: false,\n\n  props: {\n    // TODO\n    // disableKeys: Boolean,\n    modelValue: Boolean,\n    id: String,\n\n    ...makeTransitionProps({\n      transition: { component: VDialogTransition },\n    } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const uid = getUid()\n    const id = computed(() => props.id || `v-menu-${uid}`)\n\n    const overlay = ref<VOverlay>()\n\n    const parent = inject(VMenuSymbol, null)\n    let openChildren = 0\n    provide(VMenuSymbol, {\n      register () {\n        ++openChildren\n      },\n      unregister () {\n        --openChildren\n      },\n      closeParents () {\n        setTimeout(() => {\n          if (!openChildren) {\n            isActive.value = false\n            parent?.closeParents()\n          }\n        }, 40)\n      },\n    })\n\n    watch(isActive, val => {\n      val ? parent?.register() : parent?.unregister()\n    })\n\n    function onClickOutside () {\n      parent?.closeParents()\n    }\n\n    useRender(() => (\n      <VOverlay\n        ref={ overlay }\n        v-model={ isActive.value }\n        class={[\n          'v-menu',\n        ]}\n        transition={ props.transition }\n        absolute\n        closeOnContentClick\n        locationStrategy=\"connected\"\n        scrollStrategy=\"reposition\"\n        scrim={ false }\n        openDelay=\"300\"\n        closeDelay=\"250\"\n        activatorProps={{\n          'aria-haspopup': 'menu',\n          'aria-expanded': String(isActive.value),\n          'aria-owns': id.value,\n        }}\n        onClick:outside={ onClickOutside }\n        { ...scopeId }\n        { ...attrs }\n        v-slots={{\n          default: slots.default,\n          activator: slots.activator,\n        }}\n      />\n    ))\n\n    return useForwardRef({ id }, overlay)\n  },\n})\n\nexport type VMenu = InstanceType<typeof VMenu>\n"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,Q;SACAC,iB,oCAET;;SACSC,mB;SACAC,e,8CAET;;AACA,SAASC,QAAT,EAAmBC,MAAnB,EAA2BC,OAA3B,EAAoCC,GAApC,EAAyCC,KAAzC,QAAsD,KAAtD;SACSC,gB,EAAkBC,M,EAAQC,S;SAC1BC,W,wBAET;;SAESC,a;SACAC,U;AAET,OAAO,MAAMC,KAAK,GAAGN,gBAAgB,GAEhC;EACHO,IAAI,EAAE,OADH;EAGHC,YAAY,EAAE,KAHX;EAKHC,KAAK,EAAE;IACL;IACA;IACAC,UAAU,EAAEC,OAHP;IAILC,EAAE,EAAEC,MAJC;IAML,GAAGpB,mBAAmB,CAAC;MACrBqB,UAAU,EAAE;QAAEC,SAAS,EAAEvB;MAAb;IADS,CAAD;EANjB,CALJ;EAgBHwB,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAoB;EADpC,CAhBJ;;EAoBHC,KAAK,CAAET,KAAF,QAA2B;IAAA,IAAlB;MAAEU,KAAF;MAASC;IAAT,CAAkB;IAC9B,MAAMC,QAAQ,GAAG3B,eAAe,CAACe,KAAD,EAAQ,YAAR,CAAhC;IACA,MAAM;MAAEa;IAAF,IAAcjB,UAAU,EAA9B;IAEA,MAAMkB,GAAG,GAAGtB,MAAM,EAAlB;IACA,MAAMW,EAAE,GAAGjB,QAAQ,CAAC,MAAMc,KAAK,CAACG,EAAN,IAAa,UAASW,GAAI,EAAjC,CAAnB;IAEA,MAAMC,OAAO,GAAG1B,GAAG,EAAnB;IAEA,MAAM2B,MAAM,GAAG7B,MAAM,CAACO,WAAD,EAAc,IAAd,CAArB;IACA,IAAIuB,YAAY,GAAG,CAAnB;IACA7B,OAAO,CAACM,WAAD,EAAc;MACnBwB,QAAQ,GAAI;QACV,EAAED,YAAF;MACD,CAHkB;;MAInBE,UAAU,GAAI;QACZ,EAAEF,YAAF;MACD,CANkB;;MAOnBG,YAAY,GAAI;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACJ,YAAL,EAAmB;YACjBL,QAAQ,CAACJ,KAAT,GAAiB,KAAjB;YACAQ,MAAM,QAAN,YAAAA,MAAM,CAAEI,YAAR;UACD;QACF,CALS,EAKP,EALO,CAAV;MAMD;;IAdkB,CAAd,CAAP;IAiBA9B,KAAK,CAACsB,QAAD,EAAWU,GAAG,IAAI;MACrBA,GAAG,GAAGN,MAAH,oBAAGA,MAAM,CAAEE,QAAR,EAAH,GAAwBF,MAAxB,oBAAwBA,MAAM,CAAEG,UAAR,EAA3B;IACD,CAFI,CAAL;;IAIA,SAASI,cAAT,GAA2B;MACzBP,MAAM,QAAN,YAAAA,MAAM,CAAEI,YAAR;IACD;;IAED3B,SAAS,CAAC;MAAA,OAEAsB,OAFA;MAAA,cAGIH,QAAQ,CAACJ,KAHb;MAAA,iCAGII,QAAQ,CAACJ,KAHb;MAAA,SAIC,CACL,QADK,CAJD;MAAA,cAOOR,KAAK,CAACK,UAPb;MAAA;MAAA;MAAA,oBAUW,WAVX;MAAA,kBAWS,YAXT;MAAA,SAYE,KAZF;MAAA,aAaI,KAbJ;MAAA,cAcK,KAdL;MAAA,kBAeU;QACd,iBAAiB,MADH;QAEd,iBAAiBD,MAAM,CAACQ,QAAQ,CAACJ,KAAV,CAFT;QAGd,aAAaL,EAAE,CAACK;MAHF,CAfV;MAAA,mBAoBYe;IApBZ,GAqBDV,OArBC,EAsBDH,KAtBC,GAuBG;MACPc,OAAO,EAAEb,KAAK,CAACa,OADR;MAEPC,SAAS,EAAEd,KAAK,CAACc;IAFV,CAvBH,CAAD,CAAT;IA8BA,OAAO9B,aAAa,CAAC;MAAEQ;IAAF,CAAD,EAASY,OAAT,CAApB;EACD;;AAvFE,CAFgC,CAA9B"}
+{"version":3,"file":"VMenu.mjs","names":["VDialogTransition","VOverlay","makeTransitionProps","forwardRefs","useProxiedModel","useScopeId","computed","inject","provide","ref","watch","genericComponent","getUid","useRender","VMenuSymbol","VMenu","name","inheritAttrs","props","modelValue","Boolean","id","String","transition","component","emits","value","setup","attrs","slots","isActive","scopeId","uid","overlay","parent","openChildren","register","unregister","closeParents","setTimeout","val","onClickOutside","default","activator"],"sources":["../../../src/components/VMenu/VMenu.tsx"],"sourcesContent":["// Styles\nimport './VMenu.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { makeTransitionProps } from '@/composables/transition'\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\n\n// Utilities\nimport { computed, inject, provide, ref, watch } from 'vue'\nimport { genericComponent, getUid, useRender } from '@/util'\nimport { VMenuSymbol } from './shared'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const VMenu = genericComponent<new () => {\n  $slots: OverlaySlots\n}>()({\n  name: 'VMenu',\n\n  inheritAttrs: false,\n\n  props: {\n    // TODO\n    // disableKeys: Boolean,\n    modelValue: Boolean,\n    id: String,\n\n    ...makeTransitionProps({\n      transition: { component: VDialogTransition },\n    } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const uid = getUid()\n    const id = computed(() => props.id || `v-menu-${uid}`)\n\n    const overlay = ref<VOverlay>()\n\n    const parent = inject(VMenuSymbol, null)\n    let openChildren = 0\n    provide(VMenuSymbol, {\n      register () {\n        ++openChildren\n      },\n      unregister () {\n        --openChildren\n      },\n      closeParents () {\n        setTimeout(() => {\n          if (!openChildren) {\n            isActive.value = false\n            parent?.closeParents()\n          }\n        }, 40)\n      },\n    })\n\n    watch(isActive, val => {\n      val ? parent?.register() : parent?.unregister()\n    })\n\n    function onClickOutside () {\n      parent?.closeParents()\n    }\n\n    useRender(() => (\n      <VOverlay\n        ref={ overlay }\n        v-model={ isActive.value }\n        class={[\n          'v-menu',\n        ]}\n        transition={ props.transition }\n        absolute\n        closeOnContentClick\n        locationStrategy=\"connected\"\n        scrollStrategy=\"reposition\"\n        scrim={ false }\n        openDelay=\"300\"\n        closeDelay=\"250\"\n        activatorProps={{\n          'aria-haspopup': 'menu',\n          'aria-expanded': String(isActive.value),\n          'aria-owns': id.value,\n        }}\n        onClick:outside={ onClickOutside }\n        { ...scopeId }\n        { ...attrs }\n        v-slots={{\n          default: slots.default,\n          activator: slots.activator,\n        }}\n      />\n    ))\n\n    return forwardRefs({ id }, overlay)\n  },\n})\n\nexport type VMenu = InstanceType<typeof VMenu>\n"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,iB;SACAC,Q,iCAET;;SACSC,mB;SACAC,W;SACAC,e;SACAC,U,yCAET;;AACA,SAASC,QAAT,EAAmBC,MAAnB,EAA2BC,OAA3B,EAAoCC,GAApC,EAAyCC,KAAzC,QAAsD,KAAtD;SACSC,gB,EAAkBC,M,EAAQC,S;SAC1BC,W,wBAET;;AAGA,OAAO,MAAMC,KAAK,GAAGJ,gBAAgB,GAEhC;EACHK,IAAI,EAAE,OADH;EAGHC,YAAY,EAAE,KAHX;EAKHC,KAAK,EAAE;IACL;IACA;IACAC,UAAU,EAAEC,OAHP;IAILC,EAAE,EAAEC,MAJC;IAML,GAAGpB,mBAAmB,CAAC;MACrBqB,UAAU,EAAE;QAAEC,SAAS,EAAExB;MAAb;IADS,CAAD;EANjB,CALJ;EAgBHyB,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAoB;EADpC,CAhBJ;;EAoBHC,KAAK,CAAET,KAAF,QAA2B;IAAA,IAAlB;MAAEU,KAAF;MAASC;IAAT,CAAkB;IAC9B,MAAMC,QAAQ,GAAG1B,eAAe,CAACc,KAAD,EAAQ,YAAR,CAAhC;IACA,MAAM;MAAEa;IAAF,IAAc1B,UAAU,EAA9B;IAEA,MAAM2B,GAAG,GAAGpB,MAAM,EAAlB;IACA,MAAMS,EAAE,GAAGf,QAAQ,CAAC,MAAMY,KAAK,CAACG,EAAN,IAAa,UAASW,GAAI,EAAjC,CAAnB;IAEA,MAAMC,OAAO,GAAGxB,GAAG,EAAnB;IAEA,MAAMyB,MAAM,GAAG3B,MAAM,CAACO,WAAD,EAAc,IAAd,CAArB;IACA,IAAIqB,YAAY,GAAG,CAAnB;IACA3B,OAAO,CAACM,WAAD,EAAc;MACnBsB,QAAQ,GAAI;QACV,EAAED,YAAF;MACD,CAHkB;;MAInBE,UAAU,GAAI;QACZ,EAAEF,YAAF;MACD,CANkB;;MAOnBG,YAAY,GAAI;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACJ,YAAL,EAAmB;YACjBL,QAAQ,CAACJ,KAAT,GAAiB,KAAjB;YACAQ,MAAM,QAAN,YAAAA,MAAM,CAAEI,YAAR;UACD;QACF,CALS,EAKP,EALO,CAAV;MAMD;;IAdkB,CAAd,CAAP;IAiBA5B,KAAK,CAACoB,QAAD,EAAWU,GAAG,IAAI;MACrBA,GAAG,GAAGN,MAAH,oBAAGA,MAAM,CAAEE,QAAR,EAAH,GAAwBF,MAAxB,oBAAwBA,MAAM,CAAEG,UAAR,EAA3B;IACD,CAFI,CAAL;;IAIA,SAASI,cAAT,GAA2B;MACzBP,MAAM,QAAN,YAAAA,MAAM,CAAEI,YAAR;IACD;;IAEDzB,SAAS,CAAC;MAAA,OAEAoB,OAFA;MAAA,cAGIH,QAAQ,CAACJ,KAHb;MAAA,iCAGII,QAAQ,CAACJ,KAHb;MAAA,SAIC,CACL,QADK,CAJD;MAAA,cAOOR,KAAK,CAACK,UAPb;MAAA;MAAA;MAAA,oBAUW,WAVX;MAAA,kBAWS,YAXT;MAAA,SAYE,KAZF;MAAA,aAaI,KAbJ;MAAA,cAcK,KAdL;MAAA,kBAeU;QACd,iBAAiB,MADH;QAEd,iBAAiBD,MAAM,CAACQ,QAAQ,CAACJ,KAAV,CAFT;QAGd,aAAaL,EAAE,CAACK;MAHF,CAfV;MAAA,mBAoBYe;IApBZ,GAqBDV,OArBC,EAsBDH,KAtBC,GAuBG;MACPc,OAAO,EAAEb,KAAK,CAACa,OADR;MAEPC,SAAS,EAAEd,KAAK,CAACc;IAFV,CAvBH,CAAD,CAAT;IA8BA,OAAOxC,WAAW,CAAC;MAAEkB;IAAF,CAAD,EAASY,OAAT,CAAlB;EACD;;AAvFE,CAFgC,CAA9B"}