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

package/lib/components/VLayout/VLayout.sass

@@ -3,6 +3,7 @@
   position: relative
   display: flex
   flex: 1 1 auto
+  overflow: hidden
 
   &--full-height
     --v-scrollbar-offset: inherit

package/lib/components/VLayout/VLayoutItem.css

@@ -1,5 +1,5 @@
 .v-layout-item {
-  position: fixed;
+  position: absolute;
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 

package/lib/components/VLayout/VLayoutItem.mjs

@@ -4,10 +4,10 @@ import "./VLayoutItem.css"; // Composables
 
 import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs"; // Utilities
 
-import { toRef } from 'vue';
+import { computed, toRef } from 'vue';
 import { defineComponent } from "../../util/index.mjs"; // Types
 
-export default defineComponent({
+export const VLayoutItem = defineComponent({
   name: 'VLayoutItem',
   props: {
     position: {
@@ -22,19 +22,28 @@ export default defineComponent({
     ...makeLayoutItemProps()
   },
 
-  setup(props, {
-    slots
-  }) {
-    const styles = useLayoutItem(props.name, toRef(props, 'priority'), toRef(props, 'position'), toRef(props, 'size'), toRef(props, 'size'), toRef(props, 'modelValue'));
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      priority: computed(() => parseInt(props.priority, 10)),
+      position: toRef(props, 'position'),
+      elementSize: toRef(props, 'size'),
+      layoutSize: toRef(props, 'size'),
+      active: toRef(props, 'modelValue'),
+      absolute: toRef(props, 'absolute')
+    });
     return () => {
       var _slots$default;
 
       return _createVNode("div", {
-        "class": ['v-layout-item', {
-          'v-layout-item--absolute': props.absolute
-        }],
-        "style": styles.value
-      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)], 6);
+        "class": ['v-layout-item'],
+        "style": layoutItemStyles.value
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
     };
   }
 

package/lib/components/VLayout/VLayoutItem.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLayout/VLayoutItem.tsx"],"names":["makeLayoutItemProps","useLayoutItem","toRef","defineComponent","name","props","position","type","String","required","size","Number","default","modelValue","Boolean","setup","slots","styles","absolute","value"],"mappings":";AAAA;AACA,2B,CAEA;;SACSA,mB,EAAqBC,a,wCAE9B;;AACA,SAASC,KAAT,QAAsB,KAAtB;SACSC,e,gCAET;;AAGA,eAAeA,eAAe,CAAC;AAC7BC,EAAAA,IAAI,EAAE,aADuB;AAG7BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAEC,MADE;AAERC,MAAAA,QAAQ,EAAE;AAFF,KADL;AAKLC,IAAAA,IAAI,EAAE;AACJH,MAAAA,IAAI,EAAE,CAACI,MAAD,EAASH,MAAT,CADF;AAEJI,MAAAA,OAAO,EAAE;AAFL,KALD;AASLC,IAAAA,UAAU,EAAEC,OATP;AAUL,OAAGd,mBAAmB;AAVjB,GAHsB;;AAgB7Be,EAAAA,KAAK,CAAEV,KAAF,EAAS;AAAEW,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAMC,MAAM,GAAGhB,aAAa,CAC1BI,KAAK,CAACD,IADoB,EAE1BF,KAAK,CAACG,KAAD,EAAQ,UAAR,CAFqB,EAG1BH,KAAK,CAACG,KAAD,EAAQ,UAAR,CAHqB,EAI1BH,KAAK,CAACG,KAAD,EAAQ,MAAR,CAJqB,EAK1BH,KAAK,CAACG,KAAD,EAAQ,MAAR,CALqB,EAM1BH,KAAK,CAACG,KAAD,EAAQ,YAAR,CANqB,CAA5B;AASA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,eADK,EAEL;AACE,qCAA2BA,KAAK,CAACa;AADnC,SAFK,CAFJ;AAAA,iBAQKD,MAAM,CAACE;AARZ,4BAUDH,KAAK,CAACJ,OAVL,qBAUD,oBAAAI,KAAK,CAVJ;AAAA,KAAP;AAaD;;AAvC4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VLayoutItem.sass'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'VLayoutItem',\n\n  props: {\n    position: {\n      type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,\n      required: true,\n    },\n    size: {\n      type: [Number, String],\n      default: 300,\n    },\n    modelValue: Boolean,\n    ...makeLayoutItemProps(),\n  },\n\n  setup (props, { slots }) {\n    const styles = useLayoutItem(\n      props.name,\n      toRef(props, 'priority'),\n      toRef(props, 'position'),\n      toRef(props, 'size'),\n      toRef(props, 'size'),\n      toRef(props, 'modelValue')\n    )\n\n    return () => (\n      <div\n        class={[\n          'v-layout-item',\n          {\n            'v-layout-item--absolute': props.absolute,\n          },\n        ]}\n        style={ styles.value }\n      >\n        { slots.default?.() }\n      </div>\n    )\n  },\n})\n"],"file":"VLayoutItem.mjs"}
+{"version":3,"sources":["../../../src/components/VLayout/VLayoutItem.tsx"],"names":["makeLayoutItemProps","useLayoutItem","computed","toRef","defineComponent","VLayoutItem","name","props","position","type","String","required","size","Number","default","modelValue","Boolean","setup","slots","layoutItemStyles","id","priority","parseInt","elementSize","layoutSize","active","absolute","value"],"mappings":";AAAA;AACA,2B,CAEA;;SACSA,mB,EAAqBC,a,wCAE9B;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,e,gCAET;;AAGA,OAAO,MAAMC,WAAW,GAAGD,eAAe,CAAC;AACzCE,EAAAA,IAAI,EAAE,aADmC;AAGzCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAEC,MADE;AAERC,MAAAA,QAAQ,EAAE;AAFF,KADL;AAKLC,IAAAA,IAAI,EAAE;AACJH,MAAAA,IAAI,EAAE,CAACI,MAAD,EAASH,MAAT,CADF;AAEJI,MAAAA,OAAO,EAAE;AAFL,KALD;AASLC,IAAAA,UAAU,EAAEC,OATP;AAUL,OAAGhB,mBAAmB;AAVjB,GAHkC;;AAgBzCiB,EAAAA,KAAK,CAAEV,KAAF,QAAoB;AAAA,QAAX;AAAEW,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAuBlB,aAAa,CAAC;AACzCmB,MAAAA,EAAE,EAAEb,KAAK,CAACD,IAD+B;AAEzCe,MAAAA,QAAQ,EAAEnB,QAAQ,CAAC,MAAMoB,QAAQ,CAACf,KAAK,CAACc,QAAP,EAAiB,EAAjB,CAAf,CAFuB;AAGzCb,MAAAA,QAAQ,EAAEL,KAAK,CAACI,KAAD,EAAQ,UAAR,CAH0B;AAIzCgB,MAAAA,WAAW,EAAEpB,KAAK,CAACI,KAAD,EAAQ,MAAR,CAJuB;AAKzCiB,MAAAA,UAAU,EAAErB,KAAK,CAACI,KAAD,EAAQ,MAAR,CALwB;AAMzCkB,MAAAA,MAAM,EAAEtB,KAAK,CAACI,KAAD,EAAQ,YAAR,CAN4B;AAOzCmB,MAAAA,QAAQ,EAAEvB,KAAK,CAACI,KAAD,EAAQ,UAAR;AAP0B,KAAD,CAA1C;AAUA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,eADK,CAFJ;AAAA,iBAKKY,gBAAgB,CAACQ;AALtB,4BAODT,KAAK,CAACJ,OAPL,qBAOD,oBAAAI,KAAK,CAPJ;AAAA,KAAP;AAUD;;AArCwC,CAAD,CAAnC","sourcesContent":["// Styles\nimport './VLayoutItem.sass'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VLayoutItem = defineComponent({\n  name: 'VLayoutItem',\n\n  props: {\n    position: {\n      type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,\n      required: true,\n    },\n    size: {\n      type: [Number, String],\n      default: 300,\n    },\n    modelValue: Boolean,\n    ...makeLayoutItemProps(),\n  },\n\n  setup (props, { slots }) {\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      priority: computed(() => parseInt(props.priority, 10)),\n      position: toRef(props, 'position'),\n      elementSize: toRef(props, 'size'),\n      layoutSize: toRef(props, 'size'),\n      active: toRef(props, 'modelValue'),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    return () => (\n      <div\n        class={[\n          'v-layout-item',\n        ]}\n        style={ layoutItemStyles.value }\n      >\n        { slots.default?.() }\n      </div>\n    )\n  },\n})\n"],"file":"VLayoutItem.mjs"}

package/lib/components/VLayout/VLayoutItem.sass

@@ -1,7 +1,7 @@
 @use '../../styles/settings'
 
 .v-layout-item
-  position: fixed
+  position: absolute
   transition: 0.2s settings.$standard-easing
 
 .v-layout-item--absolute

package/lib/components/VLayout/index.mjs

@@ -1,3 +1,3 @@
-export { default as VLayout } from "./VLayout.mjs";
-export { default as VLayoutItem } from "./VLayoutItem.mjs";
+export { VLayout } from "./VLayout.mjs";
+export { VLayoutItem } from "./VLayoutItem.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLayout/index.ts"],"names":["default","VLayout","VLayoutItem"],"mappings":"SAASA,OAAO,IAAIC,O;SACXD,OAAO,IAAIE,W","sourcesContent":["export { default as VLayout } from './VLayout'\nexport { default as VLayoutItem } from './VLayoutItem'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VLayout/index.ts"],"names":["VLayout","VLayoutItem"],"mappings":"SAASA,O;SACAC,W","sourcesContent":["export { VLayout } from './VLayout'\nexport { VLayoutItem } from './VLayoutItem'\n"],"file":"index.mjs"}

package/lib/components/VLazy/VLazy.mjs

@@ -8,7 +8,7 @@ import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Directi
 import intersect from "../../directives/intersect/index.mjs"; // Utilities
 
 import { defineComponent } from "../../util/index.mjs";
-export default defineComponent({
+export const VLazy = defineComponent({
   name: 'VLazy',
   directives: {
     intersect
@@ -35,9 +35,10 @@ export default defineComponent({
     'update:modelValue': value => true
   },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       dimensionStyles
     } = useDimension(props);
@@ -59,8 +60,8 @@ export default defineComponent({
           "transition": props.transition
         }, {
           default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
-        }, 8, ["transition"])]
-      }, 8, ["style"]), [[_resolveDirective("intersect"), onIntersect, props.options]]);
+        })]
+      }), [[_resolveDirective("intersect"), onIntersect, props.options]]);
     };
   }
 

package/lib/components/VLazy/VLazy.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLazy/VLazy.tsx"],"names":["makeDimensionProps","useDimension","makeTagProps","makeTransitionProps","MaybeTransition","useProxiedModel","intersect","defineComponent","name","directives","props","modelValue","Boolean","options","type","Object","default","root","undefined","rootMargin","threshold","transition","emits","value","setup","slots","dimensionStyles","isActive","onIntersect","isIntersecting"],"mappings":";AAAA;SACSA,kB,EAAoBC,Y;SACpBC,Y;SACAC,mB,EAAqBC,e;SACrBC,e,8CAET;;OACOC,S,8CAEP;;SAESC,e;AAET,eAAeA,eAAe,CAAC;AAC7BC,EAAAA,IAAI,EAAE,OADuB;AAG7BC,EAAAA,UAAU,EAAE;AAAEH,IAAAA;AAAF,GAHiB;AAK7BI,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAEC,OADP;AAELC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,EAAEC,MADC;AAEP;AACA;AACAC,MAAAA,OAAO,EAAE,OAAO;AACdC,QAAAA,IAAI,EAAEC,SADQ;AAEdC,QAAAA,UAAU,EAAED,SAFE;AAGdE,QAAAA,SAAS,EAAEF;AAHG,OAAP;AAJF,KAFJ;AAaL,OAAGlB,kBAAkB,EAbhB;AAcL,OAAGE,YAAY,EAdV;AAeL,OAAGC,mBAAmB,CAAC;AAAEkB,MAAAA,UAAU,EAAE;AAAd,KAAD;AAfjB,GALsB;AAuB7BC,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAoB;AADpC,GAvBsB;;AA2B7BC,EAAAA,KAAK,CAAEd,KAAF,EAAS;AAAEe,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAsBzB,YAAY,CAACS,KAAD,CAAxC;AACA,UAAMiB,QAAQ,GAAGtB,eAAe,CAACK,KAAD,EAAQ,YAAR,CAAhC;;AAEA,aAASkB,WAAT,CAAsBC,cAAtB,EAA+C;AAC7C,UAAIF,QAAQ,CAACJ,KAAb,EAAoB;AAEpBI,MAAAA,QAAQ,CAACJ,KAAT,GAAiBM,cAAjB;AACD;;AAED,WAAO;AAAA;;AAAA;AAAA,iBAEG,QAFH;AAAA,iBAQKH,eAAe,CAACH;AARrB;AAAA,wBAUDI,QAAQ,CAACJ,KAAT;AAAA,wBAC8Bb,KAAK,CAACW;AADpC;AAAA,4CAEII,KAAK,CAACT,OAFV,qBAEI,oBAAAS,KAAK,CAFT;AAAA,6BAVC;AAAA,0DAIDG,WAJC,EAKDlB,KAAK,CAACG,OALL;AAAA,KAAP;AAiBD;;AAtD4B,CAAD,CAA9B","sourcesContent":["// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Directives\nimport intersect from '@/directives/intersect'\n\n// Utilities\nimport type { PropType } from 'vue'\nimport { defineComponent } from '@/util'\n\nexport default defineComponent({\n  name: 'VLazy',\n\n  directives: { intersect },\n\n  props: {\n    modelValue: Boolean,\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    },\n\n    ...makeDimensionProps(),\n    ...makeTagProps(),\n    ...makeTransitionProps({ transition: 'fade-transition' }),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n    const isActive = useProxiedModel(props, 'modelValue')\n\n    function onIntersect (isIntersecting: boolean) {\n      if (isActive.value) return\n\n      isActive.value = isIntersecting\n    }\n\n    return () => (\n      <props.tag\n        class=\"v-lazy\"\n        v-intersect={[\n          onIntersect,\n          props.options,\n          isActive.value ? [] : ['once'],\n        ]}\n        style={ dimensionStyles.value }\n      >\n        { isActive.value && (\n          <MaybeTransition transition={ props.transition }>\n            { slots.default?.() }\n          </MaybeTransition>\n        )}\n      </props.tag>\n    )\n  },\n})\n"],"file":"VLazy.mjs"}
+{"version":3,"sources":["../../../src/components/VLazy/VLazy.tsx"],"names":["makeDimensionProps","useDimension","makeTagProps","makeTransitionProps","MaybeTransition","useProxiedModel","intersect","defineComponent","VLazy","name","directives","props","modelValue","Boolean","options","type","Object","default","root","undefined","rootMargin","threshold","transition","emits","value","setup","slots","dimensionStyles","isActive","onIntersect","isIntersecting"],"mappings":";AAAA;SACSA,kB,EAAoBC,Y;SACpBC,Y;SACAC,mB,EAAqBC,e;SACrBC,e,8CAET;;OACOC,S,8CAEP;;SAESC,e;AAET,OAAO,MAAMC,KAAK,GAAGD,eAAe,CAAC;AACnCE,EAAAA,IAAI,EAAE,OAD6B;AAGnCC,EAAAA,UAAU,EAAE;AAAEJ,IAAAA;AAAF,GAHuB;AAKnCK,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAEC,OADP;AAELC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,EAAEC,MADC;AAEP;AACA;AACAC,MAAAA,OAAO,EAAE,OAAO;AACdC,QAAAA,IAAI,EAAEC,SADQ;AAEdC,QAAAA,UAAU,EAAED,SAFE;AAGdE,QAAAA,SAAS,EAAEF;AAHG,OAAP;AAJF,KAFJ;AAaL,OAAGnB,kBAAkB,EAbhB;AAcL,OAAGE,YAAY,EAdV;AAeL,OAAGC,mBAAmB,CAAC;AAAEmB,MAAAA,UAAU,EAAE;AAAd,KAAD;AAfjB,GAL4B;AAuBnCC,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAoB;AADpC,GAvB4B;;AA2BnCC,EAAAA,KAAK,CAAEd,KAAF,QAAoB;AAAA,QAAX;AAAEe,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAsB1B,YAAY,CAACU,KAAD,CAAxC;AACA,UAAMiB,QAAQ,GAAGvB,eAAe,CAACM,KAAD,EAAQ,YAAR,CAAhC;;AAEA,aAASkB,WAAT,CAAsBC,cAAtB,EAA+C;AAC7C,UAAIF,QAAQ,CAACJ,KAAb,EAAoB;AAEpBI,MAAAA,QAAQ,CAACJ,KAAT,GAAiBM,cAAjB;AACD;;AAED,WAAO;AAAA;;AAAA;AAAA,iBAEG,QAFH;AAAA,iBAQKH,eAAe,CAACH;AARrB;AAAA,wBAUDI,QAAQ,CAACJ,KAAT;AAAA,wBAC8Bb,KAAK,CAACW;AADpC;AAAA,4CAEII,KAAK,CAACT,OAFV,qBAEI,oBAAAS,KAAK,CAFT;AAAA,UAVC;AAAA,4CAIDG,WAJC,EAKDlB,KAAK,CAACG,OALL;AAAA,KAAP;AAiBD;;AAtDkC,CAAD,CAA7B","sourcesContent":["// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Directives\nimport intersect from '@/directives/intersect'\n\n// Utilities\nimport type { PropType } from 'vue'\nimport { defineComponent } from '@/util'\n\nexport const VLazy = defineComponent({\n  name: 'VLazy',\n\n  directives: { intersect },\n\n  props: {\n    modelValue: Boolean,\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    },\n\n    ...makeDimensionProps(),\n    ...makeTagProps(),\n    ...makeTransitionProps({ transition: 'fade-transition' }),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n    const isActive = useProxiedModel(props, 'modelValue')\n\n    function onIntersect (isIntersecting: boolean) {\n      if (isActive.value) return\n\n      isActive.value = isIntersecting\n    }\n\n    return () => (\n      <props.tag\n        class=\"v-lazy\"\n        v-intersect={[\n          onIntersect,\n          props.options,\n          isActive.value ? [] : ['once'],\n        ]}\n        style={ dimensionStyles.value }\n      >\n        { isActive.value && (\n          <MaybeTransition transition={ props.transition }>\n            { slots.default?.() }\n          </MaybeTransition>\n        )}\n      </props.tag>\n    )\n  },\n})\n"],"file":"VLazy.mjs"}

package/lib/components/VLazy/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLazy/index.ts"],"names":["default","VLazy"],"mappings":"SAASA,OAAO,IAAIC,K","sourcesContent":["export { default as VLazy } from './VLazy'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VLazy/index.ts"],"names":["VLazy"],"mappings":"SAASA,K","sourcesContent":["export { VLazy } from './VLazy'\n"],"file":"index.mjs"}

package/lib/components/VList/VList.css

@@ -7,6 +7,8 @@
   border-width: 0;
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
   border-radius: 0;
+  background: rgba(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
 .v-list--border {
   border-width: thin;
@@ -52,7 +54,6 @@
   font-weight: 500;
   line-height: 1.375rem;
   padding-inline-end: 16px;
-  padding-inline-start: 16px;
   min-height: 48px;
   transition: 0.2s min-height cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -64,14 +65,17 @@
 }
 .v-list--density-default .v-list-subheader {
   min-height: 48px;
+  padding-inline-start: calc(16px + var(--indent-padding)) !important;
 }
 
 .v-list--density-comfortable .v-list-subheader {
   min-height: 44px;
+  padding-inline-start: calc(16px + var(--indent-padding)) !important;
 }
 
 .v-list--density-compact .v-list-subheader {
   min-height: 40px;
+  padding-inline-start: calc(16px + var(--indent-padding)) !important;
 }
 
 .v-list-subheader--inset {
@@ -80,7 +84,7 @@
 .v-list--nav .v-list-subheader {
   font-size: 0.75rem;
 }
-.v-list--subheader-sticky .v-list-subheader {
+.v-list-subheader--sticky {
   background: inherit;
   left: 0;
   position: sticky;

package/lib/components/VList/VList.mjs

@@ -1,9 +1,8 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VList.css"; // Components
-// import { VListItem } from '.'
 
-import VListSubheader from "./VListSubheader.mjs"; // Composables
+import { VListChildren } from "./VListChildren.mjs"; // Composables
 
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
@@ -12,11 +11,43 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.mj
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs"; // Utilities
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { makeNestedProps, useNested } from "../../composables/nested/nested.mjs";
+import { createList } from "./list.mjs"; // Utilities
 
-import { toRef } from 'vue';
-import { defineComponent } from "../../util/index.mjs";
-export default defineComponent({
+import { computed, toRef } from 'vue';
+import { genericComponent, useRender } from "../../util/index.mjs"; // Types
+
+const parseItems = items => {
+  if (!items) return undefined;
+  return items.map(item => {
+    if (typeof item === 'string') return {
+      type: 'item',
+      value: item,
+      title: item
+    };
+    const {
+      $type,
+      $children,
+      ...props
+    } = item;
+    if ($type === 'subheader') return {
+      type: 'subheader',
+      props
+    };
+    if ($type === 'divider') return {
+      type: 'divider',
+      props
+    };
+    return {
+      type: 'item',
+      props,
+      children: parseItems($children)
+    };
+  });
+};
+
+export const VList = genericComponent()({
   name: 'VList',
   props: {
     color: String,
@@ -26,10 +57,11 @@ export default defineComponent({
       default: 'one'
     },
     nav: Boolean,
-    subheader: {
-      type: [Boolean, String],
-      default: false
-    },
+    items: Array,
+    ...makeNestedProps({
+      selectStrategy: 'single-leaf',
+      openStrategy: 'multiple'
+    }),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
@@ -38,23 +70,31 @@ export default defineComponent({
     ...makeTagProps(),
     ...makeThemeProps()
   },
+  emits: {
+    'update:selected': val => true,
+    'update:opened': val => true,
+    'click:open': value => true,
+    'click:select': value => true
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const items = computed(() => parseItems(props.items));
     const {
       themeClasses
-    } = useTheme(props);
+    } = provideTheme(props);
     const {
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'color'));
     const {
       borderClasses
-    } = useBorder(props, 'v-list');
+    } = useBorder(props);
     const {
       densityClasses
-    } = useDensity(props, 'v-list');
+    } = useDensity(props);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -63,26 +103,35 @@ export default defineComponent({
     } = useElevation(props);
     const {
       roundedClasses
-    } = useRounded(props, 'v-list');
-    return () => {
-      var _slots$default;
-
-      const hasHeader = typeof props.subheader === 'string' || slots.subheader;
+    } = useRounded(props);
+    const {
+      open,
+      select
+    } = useNested(props);
+    createList();
+    useRender(() => {
       return _createVNode(props.tag, {
         "class": ['v-list', {
           'v-list--disabled': props.disabled,
           'v-list--nav': props.nav,
-          'v-list--subheader': props.subheader,
-          'v-list--subheader-sticky': props.subheader === 'sticky',
           [`v-list--${props.lines}-line`]: true
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
         "style": [backgroundColorStyles.value, dimensionStyles.value]
       }, {
-        default: () => [hasHeader && (slots.subheader ? slots.subheader() : _createVNode(VListSubheader, null, {
-          default: () => [props.subheader]
-        })), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)],
-        _: 1
-      }, 8, ["class", "style"]);
+        default: () => [_createVNode(VListChildren, {
+          "items": items.value
+        }, {
+          default: slots.default,
+          item: slots.item,
+          title: slots.title,
+          subtitle: slots.subtitle,
+          header: slots.header
+        })]
+      });
+    });
+    return {
+      open,
+      select
     };
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VList.tsx"],"names":["VListSubheader","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","useBackgroundColor","makeThemeProps","useTheme","toRef","defineComponent","name","props","color","String","disabled","Boolean","lines","type","default","nav","subheader","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","hasHeader","value"],"mappings":"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","sourcesContent":["// Styles\nimport './VList.sass'\n\n// Components\n// import { VListItem } from '.'\nimport VListSubheader from './VListSubheader'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\nexport default defineComponent({\n  name: 'VList',\n\n  props: {\n    color: String,\n    disabled: Boolean,\n    lines: {\n      type: String,\n      default: 'one',\n    },\n    nav: Boolean,\n    subheader: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props, 'v-list')\n    const { densityClasses } = useDensity(props, 'v-list')\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props, 'v-list')\n\n    return () => {\n      const hasHeader = typeof props.subheader === 'string' || slots.subheader\n\n      return (\n        <props.tag\n          class={[\n            'v-list',\n            {\n              'v-list--disabled': props.disabled,\n              'v-list--nav': props.nav,\n              'v-list--subheader': props.subheader,\n              'v-list--subheader-sticky': props.subheader === 'sticky',\n              [`v-list--${props.lines}-line`]: true,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            dimensionStyles.value,\n          ]}\n        >\n          { hasHeader && (\n            slots.subheader\n              ? slots.subheader()\n              : <VListSubheader>{ props.subheader }</VListSubheader>\n          ) }\n\n          { slots.default?.() }\n        </props.tag>\n      )\n    }\n  },\n})\n"],"file":"VList.mjs"}
+{"version":3,"sources":["../../../src/components/VList/VList.tsx"],"names":["VListChildren","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","useBackgroundColor","makeThemeProps","provideTheme","makeNestedProps","useNested","createList","computed","toRef","genericComponent","useRender","parseItems","items","undefined","map","item","type","value","title","$type","$children","props","children","VList","name","color","String","disabled","Boolean","lines","default","nav","Array","selectStrategy","openStrategy","emits","val","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","open","select","subtitle","header"],"mappings":"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","sourcesContent":["// Styles\nimport './VList.sass'\n\n// Components\nimport { VListChildren } from './VListChildren'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeNestedProps, useNested } from '@/composables/nested/nested'\nimport { createList } from './list'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport type { ListGroupActivatorSlot } from './VListGroup'\n\nexport type ListItem = {\n  [key: string]: any\n  $type?: 'item' | 'subheader' | 'divider'\n  $children?: (string | ListItem)[]\n}\n\nexport type InternalListItem = {\n  type?: 'item' | 'subheader' | 'divider'\n  props?: Record<string, any>\n  children?: InternalListItem[]\n}\n\nconst parseItems = (items?: (string | ListItem)[]): InternalListItem[] | undefined => {\n  if (!items) return undefined\n\n  return items.map(item => {\n    if (typeof item === 'string') return { type: 'item', value: item, title: item }\n\n    const { $type, $children, ...props } = item\n\n    if ($type === 'subheader') return { type: 'subheader', props }\n    if ($type === 'divider') return { type: 'divider', props }\n\n    return { type: 'item', props, children: parseItems($children) }\n  })\n}\n\nexport const VList = genericComponent<new <T>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    subheader: []\n    header: [ListGroupActivatorSlot]\n    item: [T]\n  }>\n}>()({\n  name: 'VList',\n\n  props: {\n    color: String,\n    disabled: Boolean,\n    lines: {\n      type: String,\n      default: 'one',\n    },\n    nav: Boolean,\n    items: Array as Prop<ListItem[]>,\n\n    ...makeNestedProps({\n      selectStrategy: 'single-leaf' as const,\n      openStrategy: 'multiple' as const,\n    }),\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:selected': (val: string[]) => true,\n    'update:opened': (val: string[]) => true,\n    'click:open': (value: { id: string, value: boolean, path: string[] }) => true,\n    'click:select': (value: { id: string, value: boolean, path: string[] }) => true,\n  },\n\n  setup (props, { slots }) {\n    const items = computed(() => parseItems(props.items))\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { open, select } = useNested(props)\n\n    createList()\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-list',\n            {\n              'v-list--disabled': props.disabled,\n              'v-list--nav': props.nav,\n              [`v-list--${props.lines}-line`]: true,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            dimensionStyles.value,\n          ]}\n        >\n          <VListChildren items={ items.value }>\n            {{\n              default: slots.default,\n              item: slots.item,\n              title: slots.title,\n              subtitle: slots.subtitle,\n              header: slots.header,\n            }}\n          </VListChildren>\n        </props.tag>\n      )\n    })\n\n    return {\n      open,\n      select,\n    }\n  },\n})\n\nexport type VList = InstanceType<typeof VList>\n"],"file":"VList.mjs"}

package/lib/components/VList/VList.sass

@@ -1,4 +1,5 @@
 @forward './variables'
+@use 'sass:list'
 @use '../../styles/tools'
 @use './variables' as *
 
@@ -11,6 +12,7 @@
   @include tools.elevation($list-elevation)
   @include tools.position($list-positions)
   @include tools.rounded($list-border-radius)
+  @include tools.theme($list-theme...)
 
   &--disabled
     pointer-events: none
@@ -46,7 +48,6 @@
   font-weight: $list-subheader-font-weight
   line-height: $list-subheader-line-height
   padding-inline-end: $list-subheader-padding-end
-  padding-inline-start: $list-subheader-padding-start
   min-height: $list-subheader-min-height
   transition: $list-subheader-transition
 
@@ -58,8 +59,11 @@
 
   @at-root
     @include tools.density('v-list', $list-density) using ($modifier)
+      $base-padding: list.nth($list-item-padding, 2)
+
       #{$root}
         min-height: $list-subheader-min-height + ($modifier * $list-subheader-min-height-multiplier)
+        padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important
 
   &--inset
     padding-inline-start: $list-subheader-inset-padding-start
@@ -67,7 +71,7 @@
   .v-list--nav &
     font-size: $list-nav-subheader-font-size
 
-  .v-list--subheader-sticky &
+  &--sticky
     background: inherit
     left: 0
     position: sticky

package/lib/components/VList/VListChildren.mjs

@@ -0,0 +1,53 @@
+import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+// Components
+import { VDivider } from "../VDivider/index.mjs";
+import { VListGroup } from "./VListGroup.mjs";
+import { VListItem } from "./VListItem.mjs";
+import { VListSubheader } from "./VListSubheader.mjs"; // Utilities
+
+import { genericComponent } from "../../util/index.mjs";
+import { createList } from "./list.mjs"; // Types
+
+export const VListChildren = genericComponent()({
+  name: 'VListChildren',
+  props: {
+    items: Array
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    createList();
+    return () => {
+      var _slots$default, _slots$default2, _props$items;
+
+      return (_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : (_props$items = props.items) == null ? void 0 : _props$items.map(_ref2 => {
+        let {
+          children,
+          props: itemProps,
+          type
+        } = _ref2;
+        if (type === 'divider') return _createVNode(VDivider, itemProps, null);
+        if (type === 'subheader') return _createVNode(VListSubheader, itemProps, slots);
+        return children ? _createVNode(VListGroup, {
+          "value": itemProps == null ? void 0 : itemProps.value
+        }, {
+          activator: _ref3 => {
+            let {
+              props: activatorProps
+            } = _ref3;
+            return slots.header ? slots.header({ ...itemProps,
+              ...activatorProps
+            }) : _createVNode(VListItem, _mergeProps(itemProps, activatorProps), null);
+          },
+          default: () => _createVNode(VListChildren, {
+            "items": children
+          }, slots)
+        }) : slots.item ? slots.item(itemProps) : _createVNode(VListItem, itemProps, slots);
+      });
+    };
+  }
+
+});
+//# sourceMappingURL=VListChildren.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VList/VListChildren.tsx"],"names":["VDivider","VListGroup","VListItem","VListSubheader","genericComponent","createList","VListChildren","name","props","items","Array","setup","slots","default","map","children","itemProps","type","value","activator","activatorProps","header","item"],"mappings":";AAAA;SACSA,Q;SACAC,U;SACAC,S;SACAC,c,gCAET;;SACSC,gB;SACAC,U,sBAET;;AAOA,OAAO,MAAMC,aAAa,GAAGF,gBAAgB,GAWxC;AACHG,EAAAA,IAAI,EAAE,eADH;AAGHC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC;AADF,GAHJ;;AAOHC,EAAAA,KAAK,CAAEH,KAAF,QAAoB;AAAA,QAAX;AAAEI,MAAAA;AAAF,KAAW;AACvBP,IAAAA,UAAU;AAEV,WAAO;AAAA;;AAAA,kDAAMO,KAAK,CAACC,OAAZ,qBAAM,qBAAAD,KAAK,CAAX,6CAA2BJ,KAAK,CAACC,KAAjC,qBAA2B,aAAaK,GAAb,CAAiB,SAA0C;AAAA,YAAzC;AAAEC,UAAAA,QAAF;AAAYP,UAAAA,KAAK,EAAEQ,SAAnB;AAA8BC,UAAAA;AAA9B,SAAyC;AAC3F,YAAIA,IAAI,KAAK,SAAb,EAAwB,8BAAqBD,SAArB;AAExB,YAAIC,IAAI,KAAK,WAAb,EAA0B,oCAA2BD,SAA3B,EAAgDJ,KAAhD;AAE1B,eAAOG,QAAQ;AAAA,mBAEHC,SAFG,oBAEHA,SAAS,CAAEE;AAFR;AAKTC,UAAAA,SAAS,EAAE;AAAA,gBAAC;AAAEX,cAAAA,KAAK,EAAEY;AAAT,aAAD;AAAA,mBAA+BR,KAAK,CAACS,MAAN,GACtCT,KAAK,CAACS,MAAN,CAAa,EAAE,GAAGL,SAAL;AAAgB,iBAAGI;AAAnB,aAAb,CADsC,uCAEtBJ,SAFsB,EAELI,cAFK,QAA/B;AAAA,WALF;AAQTP,UAAAA,OAAO,EAAE;AAAA,qBACgBE;AADhB,aACqCH,KADrC;AARA,aAcbA,KAAK,CAACU,IAAN,GAAaV,KAAK,CAACU,IAAN,CAAWN,SAAX,CAAb,2BAAqDA,SAArD,EAA2EJ,KAA3E,CAdF;AAgBD,OArBiC,CAA3B;AAAA,KAAP;AAsBD;;AAhCE,CAXwC,CAAtC","sourcesContent":["// Components\nimport { VDivider } from '../VDivider'\nimport { VListGroup } from './VListGroup'\nimport { VListItem } from './VListItem'\nimport { VListSubheader } from './VListSubheader'\n\n// Utilities\nimport { genericComponent } from '@/util'\nimport { createList } from './list'\n\n// Types\nimport type { InternalListItem } from './VList'\nimport type { ListItemSubtitleSlot, ListItemTitleSlot } from './VListItem'\nimport type { ListGroupActivatorSlot } from './VListGroup'\nimport type { MakeSlots } from '@/util'\nimport type { Prop } from 'vue'\n\nexport const VListChildren = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    default: []\n    header: [ListGroupActivatorSlot]\n    item: [T]\n    title: [ListItemTitleSlot]\n    subtitle: [ListItemSubtitleSlot]\n  }>\n}>()({\n  name: 'VListChildren',\n\n  props: {\n    items: Array as Prop<InternalListItem[]>,\n  },\n\n  setup (props, { slots }) {\n    createList()\n\n    return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, type }) => {\n      if (type === 'divider') return <VDivider {...itemProps} />\n\n      if (type === 'subheader') return <VListSubheader {...itemProps} v-slots={ slots } />\n\n      return children ? (\n        <VListGroup\n          value={ itemProps?.value }\n        >\n          {{\n            activator: ({ props: activatorProps }) => slots.header\n              ? slots.header({ ...itemProps, ...activatorProps })\n              : <VListItem { ...itemProps } { ...activatorProps } />,\n            default: () => (\n              <VListChildren items={ children } v-slots={ slots } />\n            ),\n          }}\n        </VListGroup>\n      ) : (\n        slots.item ? slots.item(itemProps) : <VListItem { ...itemProps } v-slots={ slots } />\n      )\n    })\n  },\n})\n"],"file":"VListChildren.mjs"}

package/lib/components/VList/VListGroup.mjs

@@ -0,0 +1,84 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+// Components
+import { VExpandTransition } from "../transitions/index.mjs"; // Composables
+
+import { useList } from "./list.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { useNestedGroupActivator, useNestedItem } from "../../composables/nested/nested.mjs"; // Utilities
+
+import { computed, defineComponent, toRef } from 'vue';
+import { genericComponent } from "../../util/index.mjs"; // Types
+
+const VListGroupActivator = defineComponent({
+  name: 'VListGroupActivator',
+
+  setup(_, _ref) {
+    let {
+      slots
+    } = _ref;
+    useNestedGroupActivator();
+    return () => {
+      var _slots$default;
+
+      return (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots);
+    };
+  }
+
+});
+export const VListGroup = genericComponent()({
+  name: 'VListGroup',
+  props: {
+    collapseIcon: {
+      type: String,
+      default: '$collapse'
+    },
+    expandIcon: {
+      type: String,
+      default: '$expand'
+    },
+    value: null,
+    ...makeTagProps()
+  },
+
+  setup(props, _ref2) {
+    let {
+      slots
+    } = _ref2;
+    const {
+      isOpen,
+      open
+    } = useNestedItem(toRef(props, 'value'), true);
+    const list = useList();
+
+    const onClick = e => {
+      open(!isOpen.value, e);
+    };
+
+    const activatorProps = computed(() => ({
+      onClick,
+      appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
+      class: 'v-list-group__header'
+    }));
+    return () => {
+      var _slots$default2;
+
+      return _createVNode(props.tag, {
+        "class": ['v-list-group', {
+          'v-list-group--prepend': list == null ? void 0 : list.hasPrepend.value
+        }]
+      }, {
+        default: () => [slots.activator && _createVNode(VListGroupActivator, null, {
+          default: () => [slots.activator({
+            props: activatorProps.value
+          })]
+        }), _createVNode(VExpandTransition, null, {
+          default: () => [_withDirectives(_createVNode("div", {
+            "class": "v-list-group__items"
+          }, [(_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)]), [[_vShow, isOpen.value]])]
+        })]
+      });
+    };
+  }
+
+});
+//# sourceMappingURL=VListGroup.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VList/VListGroup.tsx"],"names":["VExpandTransition","useList","makeTagProps","useNestedGroupActivator","useNestedItem","computed","defineComponent","toRef","genericComponent","VListGroupActivator","name","setup","_","slots","default","VListGroup","props","collapseIcon","type","String","expandIcon","value","isOpen","open","list","onClick","e","activatorProps","appendIcon","class","hasPrepend","activator"],"mappings":";AAAA;SACSA,iB,oCAET;;SACSC,O;SACAC,Y;SACAC,uB,EAAyBC,a,+CAElC;;AACA,SAASC,QAAT,EAAmBC,eAAnB,EAAoCC,KAApC,QAAiD,KAAjD;SACSC,gB,gCAET;;AAaA,MAAMC,mBAAmB,GAAGH,eAAe,CAAC;AAC1CI,EAAAA,IAAI,EAAE,qBADoC;;AAG1CC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnBV,IAAAA,uBAAuB;AAEvB,WAAO;AAAA;;AAAA,+BAAMU,KAAK,CAACC,OAAZ,qBAAM,oBAAAD,KAAK,CAAX;AAAA,KAAP;AACD;;AAPyC,CAAD,CAA3C;AAUA,OAAO,MAAME,UAAU,GAAGP,gBAAgB,GAQrC;AACHE,EAAAA,IAAI,EAAE,YADH;AAGHM,EAAAA,KAAK,EAAE;AACLC,IAAAA,YAAY,EAAE;AACZC,MAAAA,IAAI,EAAEC,MADM;AAEZL,MAAAA,OAAO,EAAE;AAFG,KADT;AAKLM,IAAAA,UAAU,EAAE;AACVF,MAAAA,IAAI,EAAEC,MADI;AAEVL,MAAAA,OAAO,EAAE;AAFC,KALP;AASLO,IAAAA,KAAK,EAAE,IATF;AAWL,OAAGnB,YAAY;AAXV,GAHJ;;AAiBHS,EAAAA,KAAK,CAAEK,KAAF,SAAoB;AAAA,QAAX;AAAEH,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAES,MAAAA,MAAF;AAAUC,MAAAA;AAAV,QAAmBnB,aAAa,CAACG,KAAK,CAACS,KAAD,EAAQ,OAAR,CAAN,EAAwB,IAAxB,CAAtC;AACA,UAAMQ,IAAI,GAAGvB,OAAO,EAApB;;AAEA,UAAMwB,OAAO,GAAIC,CAAD,IAAc;AAC5BH,MAAAA,IAAI,CAAC,CAACD,MAAM,CAACD,KAAT,EAAgBK,CAAhB,CAAJ;AACD,KAFD;;AAIA,UAAMC,cAAoD,GAAGtB,QAAQ,CAAC,OAAO;AAC3EoB,MAAAA,OAD2E;AAE3EG,MAAAA,UAAU,EAAEN,MAAM,CAACD,KAAP,GAAeL,KAAK,CAACC,YAArB,GAAoCD,KAAK,CAACI,UAFqB;AAG3ES,MAAAA,KAAK,EAAE;AAHoE,KAAP,CAAD,CAArE;AAMA,WAAO,MAAM;AAAA;;AACX;AAAA,iBAEW,CACL,cADK,EAEL;AACE,mCAAyBL,IAAzB,oBAAyBA,IAAI,CAAEM,UAAN,CAAiBT;AAD5C,SAFK;AAFX;AAAA,wBASMR,KAAK,CAACkB,SAAN;AAAA,0BAEIlB,KAAK,CAACkB,SAAN,CAAgB;AAAEf,YAAAA,KAAK,EAAEW,cAAc,CAACN;AAAxB,WAAhB,CAFJ;AAAA,UATN;AAAA;AAAA,qBAeiB;AAfjB,iCAgBUR,KAAK,CAACC,OAhBhB,qBAgBU,qBAAAD,KAAK,CAhBf,cAe+CS,MAAM,CAACD,KAftD;AAAA;AAAA;AAqBD,KAtBD;AAuBD;;AAtDE,CARqC,CAAnC","sourcesContent":["// Components\nimport { VExpandTransition } from '@/components/transitions'\n\n// Composables\nimport { useList } from './list'\nimport { makeTagProps } from '@/composables/tag'\nimport { useNestedGroupActivator, useNestedItem } from '@/composables/nested/nested'\n\n// Utilities\nimport { computed, defineComponent, toRef } from 'vue'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { Ref } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport type { InternalListItem } from './VList'\n\nexport type ListGroupActivatorSlot = {\n  props: {\n    onClick: (e: Event) => void\n    appendIcon: string\n    class: string\n  }\n}\n\nconst VListGroupActivator = defineComponent({\n  name: 'VListGroupActivator',\n\n  setup (_, { slots }) {\n    useNestedGroupActivator()\n\n    return () => slots.default?.()\n  },\n})\n\nexport const VListGroup = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    activator: [ListGroupActivatorSlot]\n    default: []\n  }>\n}>()({\n  name: 'VListGroup',\n\n  props: {\n    collapseIcon: {\n      type: String,\n      default: '$collapse',\n    },\n    expandIcon: {\n      type: String,\n      default: '$expand',\n    },\n    value: null,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { isOpen, open } = useNestedItem(toRef(props, 'value'), true)\n    const list = useList()\n\n    const onClick = (e: Event) => {\n      open(!isOpen.value, e)\n    }\n\n    const activatorProps: Ref<ListGroupActivatorSlot['props']> = computed(() => ({\n      onClick,\n      appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,\n      class: 'v-list-group__header',\n    }))\n\n    return () => {\n      return (\n        <props.tag\n          class={[\n            'v-list-group',\n            {\n              'v-list-group--prepend': list?.hasPrepend.value,\n            },\n          ]}\n        >\n          { slots.activator && (\n            <VListGroupActivator>\n              { slots.activator({ props: activatorProps.value }) }\n            </VListGroupActivator>\n          ) }\n          <VExpandTransition>\n            <div class=\"v-list-group__items\" v-show={isOpen.value}>\n              { slots.default?.() }\n            </div>\n          </VExpandTransition>\n        </props.tag>\n      )\n    }\n  },\n})\n"],"file":"VListGroup.mjs"}

package/lib/components/VList/VListImg.mjs

@@ -1,3 +1,3 @@
 import { createSimpleFunctional } from "../../util/index.mjs";
-export default createSimpleFunctional('v-list-img');
+export const VListImg = createSimpleFunctional('v-list-img');
 //# sourceMappingURL=VListImg.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VListImg.ts"],"names":["createSimpleFunctional"],"mappings":"SAASA,sB;AAET,eAAeA,sBAAsB,CAAC,YAAD,CAArC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport default createSimpleFunctional('v-list-img')\n"],"file":"VListImg.mjs"}
+{"version":3,"sources":["../../../src/components/VList/VListImg.ts"],"names":["createSimpleFunctional","VListImg"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,QAAQ,GAAGD,sBAAsB,CAAC,YAAD,CAAvC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VListImg = createSimpleFunctional('v-list-img')\n"],"file":"VListImg.mjs"}