@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VBtn/index.d.ts

@@ -0,0 +1,210 @@
+import * as vue from 'vue';
+import { ComponentInternalInstance, Ref, ComputedRef, JSXComponent, PropType } from 'vue';
+import * as vue_router from 'vue-router';
+
+interface GroupItem {
+    id: number;
+    value: Ref<unknown>;
+    disabled: Ref<boolean | undefined>;
+}
+interface GroupProvide {
+    register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
+    unregister: (id: number) => void;
+    select: (id: number, value: boolean) => void;
+    selected: Ref<Readonly<number[]>>;
+    isSelected: (id: number) => boolean;
+    prev: () => void;
+    next: () => void;
+    selectedClass: Ref<string | undefined>;
+    items: ComputedRef<{
+        id: number;
+        value: unknown;
+        disabled: boolean | undefined;
+    }[]>;
+    disabled: Ref<boolean | undefined>;
+    getItemIndex: (value: unknown) => number;
+}
+
+declare const block: readonly ["top", "bottom"];
+declare const inline: readonly ["start", "end", "left", "right"];
+declare type Tblock = typeof block[number];
+declare type Tinline = typeof inline[number];
+declare type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VBtn: vue.DefineComponent<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<string>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    href: StringConstructor;
+    replace: BooleanConstructor;
+    to: PropType<vue_router.RouteLocationRaw>;
+    exact: BooleanConstructor;
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
+    location: PropType<Anchor>;
+    loading: BooleanConstructor;
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: StringConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    symbol: {
+        type: null;
+        default: vue.InjectionKey<GroupProvide>;
+    };
+    flat: BooleanConstructor;
+    icon: PropType<boolean | IconValue>;
+    prependIcon: PropType<IconValue>;
+    appendIcon: PropType<IconValue>;
+    block: BooleanConstructor;
+    stacked: BooleanConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'group:selected': (val: {
+        value: boolean;
+    }) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<string>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    href: StringConstructor;
+    replace: BooleanConstructor;
+    to: PropType<vue_router.RouteLocationRaw>;
+    exact: BooleanConstructor;
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
+    location: PropType<Anchor>;
+    loading: BooleanConstructor;
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: StringConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    symbol: {
+        type: null;
+        default: vue.InjectionKey<GroupProvide>;
+    };
+    flat: BooleanConstructor;
+    icon: PropType<boolean | IconValue>;
+    prependIcon: PropType<IconValue>;
+    appendIcon: PropType<IconValue>;
+    block: BooleanConstructor;
+    stacked: BooleanConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onGroup:selected"?: ((val: {
+        value: boolean;
+    }) => any) | undefined;
+}, {
+    symbol: any;
+    replace: boolean;
+    flat: boolean;
+    exact: boolean;
+    active: boolean;
+    block: boolean;
+    loading: boolean;
+    disabled: boolean;
+    size: string | number;
+    tag: string;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "comfortable" | null;
+    variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    stacked: boolean;
+    ripple: boolean;
+}>;
+declare type VBtn = InstanceType<typeof VBtn>;
+
+export { VBtn };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBtn/index.ts"],"names":["VBtn"],"mappings":"SAASA,I","sourcesContent":["export { VBtn } from './VBtn'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VBtn"],"sources":["../../../src/components/VBtn/index.ts"],"sourcesContent":["export { VBtn } from './VBtn'\n"],"mappings":"SAASA,I"}

package/lib/components/VBtnGroup/VBtnGroup.css

@@ -1,7 +1,7 @@
+/** if false, disabled buttons will be greyed out */
 .v-btn-group {
   display: inline-flex;
   flex-wrap: nowrap;
-  flex: 1 1;
   max-width: 100%;
   min-width: 0;
   overflow: hidden;
@@ -9,7 +9,7 @@
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   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);
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
   border-radius: 4px;
   background: transparent;
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
@@ -32,17 +32,26 @@
 
 .v-btn-group .v-btn {
   border-radius: 0;
+  border-color: inherit;
 }
 .v-btn-group .v-btn:not(:last-child) {
-  border-right: none;
+  border-inline-end: none;
 }
 .v-btn-group .v-btn:not(:first-child) {
-  border-left: none;
+  border-inline-start: none;
+}
+.v-btn-group .v-btn:first-child {
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
+}
+.v-btn-group .v-btn:last-child {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
 }
 .v-btn-group--divided .v-btn:not(:last-child) {
-  border-right-width: thin;
-  border-right-style: solid;
-  border-right-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-inline-end-width: thin;
+  border-inline-end-style: solid;
+  border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
 }
 .v-btn-group--tile {
   border-radius: 0;

package/lib/components/VBtnGroup/VBtnGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"names":["makeBorderProps","useBorder","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","defineComponent","useRender","toRef","VBtnGroup","name","props","divided","Boolean","setup","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","value"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,e,EAAiBC,S;SACjBC,gB,EAAkBC,U;SAClBC,kB,EAAoBC,Y;SACpBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,gB;SACAC,e,0CAET;;SACSC,e,EAAiBC,S;AAC1B,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,SAAS,GAAGH,eAAe,CAAC;AACvCI,EAAAA,IAAI,EAAE,WADiC;AAGvCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAEC,OADJ;AAGL,OAAGpB,eAAe,EAHb;AAIL,OAAGE,gBAAgB,EAJd;AAKL,OAAGE,kBAAkB,EALhB;AAML,OAAGE,gBAAgB,EANd;AAOL,OAAGE,YAAY,EAPV;AAQL,OAAGC,cAAc,EARZ;AASL,OAAGE,gBAAgB;AATd,GAHgC;;AAevCU,EAAAA,KAAK,CAAEH,KAAF,QAAoB;AAAA,QAAX;AAAEI,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBb,YAAY,CAACQ,KAAD,CAArC;AACA,UAAM;AAAEM,MAAAA;AAAF,QAAqBrB,UAAU,CAACe,KAAD,CAArC;AACA,UAAM;AAAEO,MAAAA;AAAF,QAAoBxB,SAAS,CAACiB,KAAD,CAAnC;AACA,UAAM;AAAEQ,MAAAA;AAAF,QAAuBrB,YAAY,CAACa,KAAD,CAAzC;AACA,UAAM;AAAES,MAAAA;AAAF,QAAqBpB,UAAU,CAACW,KAAD,CAArC;AAEAN,IAAAA,eAAe,CAAC;AACdgB,MAAAA,IAAI,EAAE;AACJC,QAAAA,MAAM,EAAE,MADJ;AAEJC,QAAAA,KAAK,EAAEf,KAAK,CAACG,KAAD,EAAQ,OAAR,CAFR;AAGJa,QAAAA,OAAO,EAAEhB,KAAK,CAACG,KAAD,EAAQ,SAAR,CAHV;AAIJc,QAAAA,IAAI,EAAE,IAJF;AAKJC,QAAAA,OAAO,EAAElB,KAAK,CAACG,KAAD,EAAQ,SAAR;AALV;AADQ,KAAD,CAAf;AAUAJ,IAAAA,SAAS,CAAC,MAAM;AACd;AAAA,iBAEW,CACL,aADK,EAEL;AACE,kCAAwBI,KAAK,CAACC;AADhC,SAFK,EAKLI,YAAY,CAACW,KALR,EAMLT,aAAa,CAACS,KANT,EAOLV,cAAc,CAACU,KAPV,EAQLR,gBAAgB,CAACQ,KARZ,EASLP,cAAc,CAACO,KATV;AAFX,SAacZ,KAbd;AAgBD,KAjBQ,CAAT;AAkBD;;AAlDsC,CAAD,CAAjC","sourcesContent":["// Styles\nimport './VBtnGroup.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VBtnGroup = defineComponent({\n  name: 'VBtnGroup',\n\n  props: {\n    divided: Boolean,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBtn: {\n        height: 'auto',\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        flat: true,\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-btn-group',\n            {\n              'v-btn-group--divided': props.divided,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n"],"file":"VBtnGroup.mjs"}
+{"version":3,"file":"VBtnGroup.mjs","names":["makeBorderProps","useBorder","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","defineComponent","useRender","toRef","VBtnGroup","name","props","divided","Boolean","setup","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","value"],"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"sourcesContent":["// Styles\nimport './VBtnGroup.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VBtnGroup = defineComponent({\n  name: 'VBtnGroup',\n\n  props: {\n    divided: Boolean,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBtn: {\n        height: 'auto',\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        flat: true,\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-btn-group',\n            {\n              'v-btn-group--divided': props.divided,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,e,EAAiBC,S;SACjBC,gB,EAAkBC,U;SAClBC,kB,EAAoBC,Y;SACpBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,gB;SACAC,e,0CAET;;SACSC,e,EAAiBC,S;AAC1B,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,SAAS,GAAGH,eAAe,CAAC;EACvCI,IAAI,EAAE,WADiC;EAGvCC,KAAK,EAAE;IACLC,OAAO,EAAEC,OADJ;IAGL,GAAGpB,eAAe,EAHb;IAIL,GAAGE,gBAAgB,EAJd;IAKL,GAAGE,kBAAkB,EALhB;IAML,GAAGE,gBAAgB,EANd;IAOL,GAAGE,YAAY,EAPV;IAQL,GAAGC,cAAc,EARZ;IASL,GAAGE,gBAAgB;EATd,CAHgC;;EAevCU,KAAK,CAAEH,KAAF,QAAoB;IAAA,IAAX;MAAEI;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmBb,YAAY,CAACQ,KAAD,CAArC;IACA,MAAM;MAAEM;IAAF,IAAqBrB,UAAU,CAACe,KAAD,CAArC;IACA,MAAM;MAAEO;IAAF,IAAoBxB,SAAS,CAACiB,KAAD,CAAnC;IACA,MAAM;MAAEQ;IAAF,IAAuBrB,YAAY,CAACa,KAAD,CAAzC;IACA,MAAM;MAAES;IAAF,IAAqBpB,UAAU,CAACW,KAAD,CAArC;IAEAN,eAAe,CAAC;MACdgB,IAAI,EAAE;QACJC,MAAM,EAAE,MADJ;QAEJC,KAAK,EAAEf,KAAK,CAACG,KAAD,EAAQ,OAAR,CAFR;QAGJa,OAAO,EAAEhB,KAAK,CAACG,KAAD,EAAQ,SAAR,CAHV;QAIJc,IAAI,EAAE,IAJF;QAKJC,OAAO,EAAElB,KAAK,CAACG,KAAD,EAAQ,SAAR;MALV;IADQ,CAAD,CAAf;IAUAJ,SAAS,CAAC,MAAM;MACd;QAAA,SAEW,CACL,aADK,EAEL;UACE,wBAAwBI,KAAK,CAACC;QADhC,CAFK,EAKLI,YAAY,CAACW,KALR,EAMLT,aAAa,CAACS,KANT,EAOLV,cAAc,CAACU,KAPV,EAQLR,gBAAgB,CAACQ,KARZ,EASLP,cAAc,CAACO,KATV;MAFX,GAacZ,KAbd;IAgBD,CAjBQ,CAAT;EAkBD;;AAlDsC,CAAD,CAAjC"}

package/lib/components/VBtnGroup/VBtnGroup.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use 'sass:selector'
 @use '../../styles/tools'
 @use '../VBtn/variables' as *
@@ -9,7 +8,6 @@
 
   display: inline-flex
   flex-wrap: nowrap
-  flex: 1 1
   max-width: 100%
   min-width: 0
   overflow: hidden
@@ -27,18 +25,27 @@
 
   .v-btn
     border-radius: 0
+    border-color: inherit
 
     &:not(:last-child)
-      border-right: none
+      border-inline-end: none
 
     &:not(:first-child)
-      border-left: none
+      border-inline-start: none
+
+    &:first-child
+      border-start-start-radius: inherit
+      border-end-start-radius: inherit
+
+    &:last-child
+      border-start-end-radius: inherit
+      border-end-end-radius: inherit
 
   &--divided
     .v-btn:not(:last-child)
-      border-right-width: $btn-group-border-thin-width
-      border-right-style: $btn-group-border-style
-      border-right-color: $btn-group-border-color
+      border-inline-end-width: $btn-group-border-thin-width
+      border-inline-end-style: $btn-group-border-style
+      border-inline-end-color: $btn-group-border-color
 
   &--tile
     @include tools.rounded($btn-group-tile-border-radius)

package/lib/components/VBtnGroup/_variables.scss

@@ -1,6 +1,7 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
+// VBtnGroup
 $btn-group-background: transparent !default;
 $btn-group-border-color: settings.$border-color-root !default;
 $btn-group-border-radius: settings.$border-radius-root !default;
@@ -12,6 +13,7 @@ $btn-group-height: 48px !default;
 $btn-group-elevation: 0 !default;
 $btn-group-tile-border-radius: 0 !default;
 
+// Lists
 $btn-group-border: (
   $btn-group-border-color,
   $btn-group-border-style,

package/lib/components/VBtnGroup/index.d.ts

@@ -0,0 +1,65 @@
+import * as vue from 'vue';
+
+declare const VBtnGroup: vue.DefineComponent<{
+    color: StringConstructor;
+    variant: {
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    divided: BooleanConstructor;
+}, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    variant: {
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    divided: BooleanConstructor;
+}>>, {
+    tag: string;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "comfortable" | null;
+    variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    divided: boolean;
+}>;
+
+export { VBtnGroup };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBtnGroup/index.ts"],"names":["VBtnGroup"],"mappings":"SAASA,S","sourcesContent":["export { VBtnGroup } from './VBtnGroup'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VBtnGroup"],"sources":["../../../src/components/VBtnGroup/index.ts"],"sourcesContent":["export { VBtnGroup } from './VBtnGroup'\n"],"mappings":"SAASA,S"}

package/lib/components/VBtnToggle/VBtnToggle.mjs

@@ -11,9 +11,7 @@ import { genericComponent, useRender } from "../../util/index.mjs"; // Types
 export const VBtnToggleSymbol = Symbol.for('vuetify:v-btn-toggle');
 export const VBtnToggle = genericComponent()({
   name: 'VBtnToggle',
-  props: makeGroupProps({
-    selectedClass: 'v-btn--selected'
-  }),
+  props: makeGroupProps(),
   emits: {
     'update:modelValue': value => true
   },

package/lib/components/VBtnToggle/VBtnToggle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBtnToggle/VBtnToggle.tsx"],"names":["VBtnGroup","makeGroupProps","useGroup","genericComponent","useRender","VBtnToggleSymbol","Symbol","for","VBtnToggle","name","props","selectedClass","emits","value","setup","slots","isSelected","next","prev","select","selected","default"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,S,kCAET;;SACSC,c,EAAgBC,Q,uCAEzB;;SACSC,gB,EAAkBC,S,gCAE3B;;AAQA,OAAO,MAAMC,gBAA4C,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAArD;AAEP,OAAO,MAAMC,UAAU,GAAGL,gBAAgB,GAIrC;AACHM,EAAAA,IAAI,EAAE,YADH;AAGHC,EAAAA,KAAK,EAAET,cAAc,CAAC;AAAEU,IAAAA,aAAa,EAAE;AAAjB,GAAD,CAHlB;AAKHC,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAgB;AADhC,GALJ;;AASHC,EAAAA,KAAK,CAAEJ,KAAF,QAAoB;AAAA,QAAX;AAAEK,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA,UAAF;AAAcC,MAAAA,IAAd;AAAoBC,MAAAA,IAApB;AAA0BC,MAAAA,MAA1B;AAAkCC,MAAAA;AAAlC,QAA+ClB,QAAQ,CAACQ,KAAD,EAAQL,gBAAR,CAA7D;AAEAD,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,iBACS;AADT;AAAA,0CAEJW,KAAK,CAACM,OAFF,qBAEJ,oBAAAN,KAAK,EAAW;AAChBC,UAAAA,UADgB;AAEhBC,UAAAA,IAFgB;AAGhBC,UAAAA,IAHgB;AAIhBC,UAAAA,MAJgB;AAKhBC,UAAAA;AALgB,SAAX,CAFD;AAAA;AAAA,KAAD,CAAT;AAYA,WAAO;AACLH,MAAAA,IADK;AAELC,MAAAA,IAFK;AAGLC,MAAAA;AAHK,KAAP;AAKD;;AA7BE,CAJqC,CAAnC","sourcesContent":["// Styles\nimport './VBtnToggle.sass'\n\n// Components\nimport { VBtnGroup } from '@/components/VBtnGroup'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utility\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { GroupProvide } from '@/composables/group'\nimport type { InjectionKey } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nexport type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev'\nexport interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {}\n\nexport const VBtnToggleSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-btn-toggle')\n\nexport const VBtnToggle = genericComponent<new <T>() => {\n  $slots: MakeSlots<{\n    default: [DefaultBtnToggleSlot]\n  }>\n}>()({\n  name: 'VBtnToggle',\n\n  props: makeGroupProps({ selectedClass: 'v-btn--selected' }),\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol)\n\n    useRender(() => (\n      <VBtnGroup class=\"v-btn-toggle\">\n        { slots.default?.({\n          isSelected,\n          next,\n          prev,\n          select,\n          selected,\n        } as DefaultBtnToggleSlot) }\n      </VBtnGroup>\n    ))\n\n    return {\n      next,\n      prev,\n      select,\n    }\n  },\n})\n"],"file":"VBtnToggle.mjs"}
+{"version":3,"file":"VBtnToggle.mjs","names":["VBtnGroup","makeGroupProps","useGroup","genericComponent","useRender","VBtnToggleSymbol","Symbol","for","VBtnToggle","name","props","emits","value","setup","slots","isSelected","next","prev","select","selected","default"],"sources":["../../../src/components/VBtnToggle/VBtnToggle.tsx"],"sourcesContent":["// Styles\nimport './VBtnToggle.sass'\n\n// Components\nimport { VBtnGroup } from '@/components/VBtnGroup'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utility\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { GroupProvide } from '@/composables/group'\nimport type { InjectionKey } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nexport type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev'\nexport interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {}\n\nexport const VBtnToggleSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-btn-toggle')\n\nexport const VBtnToggle = genericComponent<new <T>() => {\n  $slots: MakeSlots<{\n    default: [DefaultBtnToggleSlot]\n  }>\n}>()({\n  name: 'VBtnToggle',\n\n  props: makeGroupProps(),\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol)\n\n    useRender(() => (\n      <VBtnGroup class=\"v-btn-toggle\">\n        { slots.default?.({\n          isSelected,\n          next,\n          prev,\n          select,\n          selected,\n        } as DefaultBtnToggleSlot) }\n      </VBtnGroup>\n    ))\n\n    return {\n      next,\n      prev,\n      select,\n    }\n  },\n})\n"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,S,kCAET;;SACSC,c,EAAgBC,Q,uCAEzB;;SACSC,gB,EAAkBC,S,gCAE3B;;AAQA,OAAO,MAAMC,gBAA4C,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAArD;AAEP,OAAO,MAAMC,UAAU,GAAGL,gBAAgB,GAIrC;EACHM,IAAI,EAAE,YADH;EAGHC,KAAK,EAAET,cAAc,EAHlB;EAKHU,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAgB;EADhC,CALJ;;EASHC,KAAK,CAAEH,KAAF,QAAoB;IAAA,IAAX;MAAEI;IAAF,CAAW;IACvB,MAAM;MAAEC,UAAF;MAAcC,IAAd;MAAoBC,IAApB;MAA0BC,MAA1B;MAAkCC;IAAlC,IAA+CjB,QAAQ,CAACQ,KAAD,EAAQL,gBAAR,CAA7D;IAEAD,SAAS,CAAC;MAAA;;MAAA;QAAA,SACS;MADT;QAAA,kCAEJU,KAAK,CAACM,OAFF,qBAEJ,oBAAAN,KAAK,EAAW;UAChBC,UADgB;UAEhBC,IAFgB;UAGhBC,IAHgB;UAIhBC,MAJgB;UAKhBC;QALgB,CAAX,CAFD;MAAA;IAAA,CAAD,CAAT;IAYA,OAAO;MACLH,IADK;MAELC,IAFK;MAGLC;IAHK,CAAP;EAKD;;AA7BE,CAJqC,CAAnC"}

package/lib/components/VBtnToggle/VBtnToggle.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use './variables' as *
 
 .v-btn-toggle

package/lib/components/VBtnToggle/_variables.scss

@@ -1,4 +1,5 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
+// VBtnToggle
 $btn-toggle-selected-opacity: var(--v-activated-opacity) !default;

package/lib/components/VBtnToggle/index.d.ts

@@ -0,0 +1,175 @@
+import * as vue from 'vue';
+import { VNodeChild, ComponentInternalInstance, Ref, ComputedRef } from 'vue';
+
+declare type SlotsToProps<T extends Record<string, Slot>> = {
+    $children: () => (T['default'] | VNodeChild | {
+        [K in keyof T]?: T[K];
+    });
+    'v-slots': new () => {
+        [K in keyof T]?: T[K] | false;
+    };
+};
+declare type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
+declare type MakeSlots<T extends Record<string, any[]>> = {
+    [K in keyof T]?: Slot<T[K]>;
+};
+
+interface GroupItem {
+    id: number;
+    value: Ref<unknown>;
+    disabled: Ref<boolean | undefined>;
+}
+interface GroupProvide {
+    register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
+    unregister: (id: number) => void;
+    select: (id: number, value: boolean) => void;
+    selected: Ref<Readonly<number[]>>;
+    isSelected: (id: number) => boolean;
+    prev: () => void;
+    next: () => void;
+    selectedClass: Ref<string | undefined>;
+    items: ComputedRef<{
+        id: number;
+        value: unknown;
+        disabled: boolean | undefined;
+    }[]>;
+    disabled: Ref<boolean | undefined>;
+    getItemIndex: (value: unknown) => number;
+}
+
+declare type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev';
+interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {
+}
+declare const VBtnToggle: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            disabled: boolean;
+            multiple: boolean;
+            modelValue: any;
+        }> & Omit<Readonly<vue.ExtractPropTypes<{
+            modelValue: {
+                type: null;
+                default: undefined;
+            };
+            multiple: BooleanConstructor;
+            mandatory: vue.PropType<boolean | "force">;
+            max: NumberConstructor;
+            selectedClass: StringConstructor;
+            disabled: BooleanConstructor;
+        } & SlotsToProps<MakeSlots<{
+            default: [DefaultBtnToggleSlot];
+        }>>>> & {
+            "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "disabled" | "multiple" | "modelValue">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "update:modelValue", value: any) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+            modelValue: {
+                type: null;
+                default: undefined;
+            };
+            multiple: BooleanConstructor;
+            mandatory: vue.PropType<boolean | "force">;
+            max: NumberConstructor;
+            selectedClass: StringConstructor;
+            disabled: BooleanConstructor;
+        } & SlotsToProps<MakeSlots<{
+            default: [DefaultBtnToggleSlot];
+        }>>>> & {
+            "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        }, {
+            next: () => void;
+            prev: () => void;
+            select: (id: number, value: boolean) => void;
+        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            'update:modelValue': (value: any) => boolean;
+        }, string, {
+            disabled: boolean;
+            multiple: boolean;
+            modelValue: any;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<vue.ExtractPropTypes<{
+        modelValue: {
+            type: null;
+            default: undefined;
+        };
+        multiple: BooleanConstructor;
+        mandatory: vue.PropType<boolean | "force">;
+        max: NumberConstructor;
+        selectedClass: StringConstructor;
+        disabled: BooleanConstructor;
+    } & SlotsToProps<MakeSlots<{
+        default: [DefaultBtnToggleSlot];
+    }>>>> & {
+        "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{
+        next: () => void;
+        prev: () => void;
+        select: (id: number, value: boolean) => void;
+    }> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: null;
+        default: undefined;
+    };
+    multiple: BooleanConstructor;
+    mandatory: vue.PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: StringConstructor;
+    disabled: BooleanConstructor;
+} & SlotsToProps<MakeSlots<{
+    default: [DefaultBtnToggleSlot];
+}>>>> & {
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}, {
+    next: () => void;
+    prev: () => void;
+    select: (id: number, value: boolean) => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: any) => boolean;
+}, string, {
+    disabled: boolean;
+    multiple: boolean;
+    modelValue: any;
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>() => {
+    $slots: MakeSlots<{
+        default: [DefaultBtnToggleSlot];
+    }>;
+});
+
+export { VBtnToggle };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBtnToggle/index.ts"],"names":["VBtnToggle"],"mappings":"SAASA,U","sourcesContent":["export { VBtnToggle } from './VBtnToggle'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VBtnToggle"],"sources":["../../../src/components/VBtnToggle/index.ts"],"sourcesContent":["export { VBtnToggle } from './VBtnToggle'\n"],"mappings":"SAASA,U"}