@vuetify/nightly 3.8.9-master.2025-06-14 → 3.8.10-dev.2025-06-18

package/lib/components/VBtnGroup/VBtnGroup.css

@@ -3,7 +3,8 @@
   flex-wrap: nowrap;
   max-width: 100%;
   min-width: 0;
-  overflow: hidden;
+  overflow-y: hidden;
+  overflow-x: auto;
   vertical-align: middle;
 }
 .v-btn-group {
@@ -41,25 +42,48 @@
   border-radius: 0;
   border-color: inherit;
 }
-.v-btn-group .v-btn:not(:last-child) {
+.v-btn-group--tile {
+  border-radius: 0;
+}
+.v-btn-group--horizontal .v-btn:not(:last-child) {
   border-inline-end: none;
 }
-.v-btn-group .v-btn:not(:first-child) {
+.v-btn-group--horizontal .v-btn:not(:first-child) {
   border-inline-start: none;
 }
-.v-btn-group .v-btn:first-child {
+.v-btn-group--horizontal .v-btn:first-child {
   border-start-start-radius: inherit;
   border-end-start-radius: inherit;
 }
-.v-btn-group .v-btn:last-child {
+.v-btn-group--horizontal .v-btn:last-child {
   border-start-end-radius: inherit;
   border-end-end-radius: inherit;
 }
-.v-btn-group--divided .v-btn:not(:last-child) {
+.v-btn-group--horizontal.v-btn-group--divided .v-btn:not(:last-child) {
   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;
+.v-btn-group--vertical {
+  flex-direction: column;
+  height: auto !important;
+}
+.v-btn-group--vertical .v-btn:not(:last-child) {
+  border-block-end: none;
+}
+.v-btn-group--vertical .v-btn:not(:first-child) {
+  border-block-start: none;
+}
+.v-btn-group--vertical .v-btn:first-child {
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+.v-btn-group--vertical .v-btn:last-child {
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+}
+.v-btn-group--vertical.v-btn-group--divided .v-btn:not(:last-child) {
+  border-block-end-width: thin;
+  border-block-end-style: solid;
+  border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
 }

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

@@ -1,3 +1,4 @@
+import type { PropType } from 'vue';
 export declare const makeVBtnGroupProps: <Defaults extends {
     color?: unknown;
     variant?: unknown;
@@ -12,35 +13,36 @@ export declare const makeVBtnGroupProps: <Defaults extends {
     border?: unknown;
     baseColor?: unknown;
     divided?: unknown;
+    direction?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     color: unknown extends Defaults["color"] ? StringConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
+        type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
         default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
     };
     variant: unknown extends Defaults["variant"] ? {
-        type: import("vue").PropType<import("../../composables/variant.js").Variant>;
+        type: PropType<import("../../composables/variant.js").Variant>;
         default: string;
         validator: (v: any) => boolean;
     } : Omit<{
-        type: import("vue").PropType<import("../../composables/variant.js").Variant>;
+        type: PropType<import("../../composables/variant.js").Variant>;
         default: string;
         validator: (v: any) => boolean;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["variant"] ? "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" : "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" | Defaults["variant"]>;
+        type: PropType<unknown extends Defaults["variant"] ? "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" : "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" | Defaults["variant"]>;
         default: unknown extends Defaults["variant"] ? "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" : NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain"> | Defaults["variant"];
     };
     theme: unknown extends Defaults["theme"] ? StringConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
+        type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
         default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
     };
     tag: unknown extends Defaults["tag"] ? {
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     } : Omit<{
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | import("../../util/index.js").JSXComponent | Defaults["tag"]>;
+        type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | import("../../util/index.js").JSXComponent | Defaults["tag"]>;
         default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : NonNullable<string | import("../../util/index.js").JSXComponent> | Defaults["tag"];
     };
     rounded: unknown extends Defaults["rounded"] ? {
@@ -50,11 +52,11 @@ export declare const makeVBtnGroupProps: <Defaults extends {
         type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
+        type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
         default: unknown extends Defaults["rounded"] ? string | number | boolean : NonNullable<string | number | boolean> | Defaults["rounded"];
     };
     tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
+        type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
         default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
     };
     elevation: unknown extends Defaults["elevation"] ? {
@@ -64,51 +66,62 @@ export declare const makeVBtnGroupProps: <Defaults extends {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
+        type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
         default: unknown extends Defaults["elevation"] ? string | number : NonNullable<string | number> | Defaults["elevation"];
     };
     density: unknown extends Defaults["density"] ? {
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     } : Omit<{
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : import("../../composables/density.js").Density | Defaults["density"]>;
+        type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : import("../../composables/density.js").Density | Defaults["density"]>;
         default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : NonNullable<import("../../composables/density.js").Density> | Defaults["density"];
     };
-    class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
-        type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
+    class: unknown extends Defaults["class"] ? PropType<any> : {
+        type: PropType<unknown extends Defaults["class"] ? any : any>;
         default: unknown extends Defaults["class"] ? any : any;
     };
     style: unknown extends Defaults["style"] ? {
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     } : Omit<{
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     }, "type" | "default"> & {
-        type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : import("vue").StyleValue | Defaults["style"]>;
+        type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : import("vue").StyleValue | Defaults["style"]>;
         default: unknown extends Defaults["style"] ? import("vue").StyleValue : NonNullable<import("vue").StyleValue> | Defaults["style"];
     };
     border: unknown extends Defaults["border"] ? (StringConstructor | BooleanConstructor | NumberConstructor)[] : {
-        type: import("vue").PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
+        type: PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
         default: unknown extends Defaults["border"] ? string | number | boolean : NonNullable<string | number | boolean> | Defaults["border"];
     };
     baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
+        type: PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
         default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
     };
     divided: unknown extends Defaults["divided"] ? BooleanConstructor : {
-        type: import("vue").PropType<unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"]>;
+        type: PropType<unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"]>;
         default: unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"];
     };
+    direction: unknown extends Defaults["direction"] ? {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    } : Omit<{
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["direction"] ? "horizontal" | "vertical" : "horizontal" | "vertical" | Defaults["direction"]>;
+        default: unknown extends Defaults["direction"] ? "horizontal" | "vertical" : Defaults["direction"] | NonNullable<"horizontal" | "vertical">;
+    };
 };
 export declare const VBtnGroup: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
@@ -133,6 +146,7 @@ export declare const VBtnGroup: {
         "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
     }, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
@@ -150,6 +164,7 @@ export declare const VBtnGroup: {
         Defaults: {};
     }, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
@@ -174,6 +189,7 @@ export declare const VBtnGroup: {
         "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
     }, {}, {}, {}, {}, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         tag: string | import("../../util/index.js").JSXComponent;
         density: import("../../composables/density.js").Density;
@@ -186,6 +202,7 @@ export declare const VBtnGroup: {
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<{
     variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    direction: "horizontal" | "vertical";
     style: import("vue").StyleValue;
     tag: string | import("../../util/index.js").JSXComponent;
     density: import("../../composables/density.js").Density;
@@ -210,6 +227,7 @@ export declare const VBtnGroup: {
     "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
 }, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
     variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    direction: "horizontal" | "vertical";
     style: import("vue").StyleValue;
     tag: string | import("../../util/index.js").JSXComponent;
     density: import("../../composables/density.js").Density;
@@ -221,13 +239,13 @@ export declare const VBtnGroup: {
 }>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
     color: StringConstructor;
     variant: {
-        type: import("vue").PropType<import("../../composables/variant.js").Variant>;
+        type: PropType<import("../../composables/variant.js").Variant>;
         default: string;
         validator: (v: any) => boolean;
     };
     theme: StringConstructor;
     tag: {
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     };
     rounded: {
@@ -240,28 +258,32 @@ export declare const VBtnGroup: {
         validator(v: any): boolean;
     };
     density: {
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     };
-    class: import("vue").PropType<import("../../composables/component.js").ClassValue>;
+    class: PropType<import("../../composables/component.js").ClassValue>;
     style: {
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     baseColor: StringConstructor;
     divided: BooleanConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
 }, import("vue").ExtractPropTypes<{
     color: StringConstructor;
     variant: {
-        type: import("vue").PropType<import("../../composables/variant.js").Variant>;
+        type: PropType<import("../../composables/variant.js").Variant>;
         default: string;
         validator: (v: any) => boolean;
     };
     theme: StringConstructor;
     tag: {
-        type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
         default: string;
     };
     rounded: {
@@ -274,17 +296,21 @@ export declare const VBtnGroup: {
         validator(v: any): boolean;
     };
     density: {
-        type: import("vue").PropType<import("../../composables/density.js").Density>;
+        type: PropType<import("../../composables/density.js").Density>;
         default: string;
         validator: (v: any) => boolean;
     };
-    class: import("vue").PropType<import("../../composables/component.js").ClassValue>;
+    class: PropType<import("../../composables/component.js").ClassValue>;
     style: {
-        type: import("vue").PropType<import("vue").StyleValue>;
+        type: PropType<import("vue").StyleValue>;
         default: null;
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     baseColor: StringConstructor;
     divided: BooleanConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
 }>>;
 export type VBtnGroup = InstanceType<typeof VBtnGroup>;

package/lib/components/VBtnGroup/VBtnGroup.js

@@ -13,10 +13,14 @@ import { makeTagProps } from "../../composables/tag.js";
 import { makeThemeProps, provideTheme } from "../../composables/theme.js";
 import { makeVariantProps } from "../../composables/variant.js"; // Utilities
 import { toRef } from 'vue';
-import { genericComponent, propsFactory, useRender } from "../../util/index.js";
+import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 export const makeVBtnGroupProps = propsFactory({
   baseColor: String,
   divided: Boolean,
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -50,7 +54,7 @@ export const VBtnGroup = genericComponent()({
     } = useRounded(props);
     provideDefaults({
       VBtn: {
-        height: 'auto',
+        height: toRef(() => props.direction === 'horizontal' ? 'auto' : null),
         baseColor: toRef(() => props.baseColor),
         color: toRef(() => props.color),
         density: toRef(() => props.density),
@@ -60,7 +64,7 @@ export const VBtnGroup = genericComponent()({
     });
     useRender(() => {
       return _createVNode(props.tag, {
-        "class": _normalizeClass(['v-btn-group', {
+        "class": _normalizeClass(['v-btn-group', `v-btn-group--${props.direction}`, {
           'v-btn-group--divided': props.divided
         }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
         "style": _normalizeStyle(props.style)

package/lib/components/VBtnGroup/VBtnGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"VBtnGroup.js","names":["makeBorderProps","useBorder","makeComponentProps","provideDefaults","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","toRef","genericComponent","propsFactory","useRender","makeVBtnGroupProps","baseColor","String","divided","Boolean","VBtnGroup","name","props","setup","_ref","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","_createVNode","tag","_normalizeClass","value","class","_normalizeStyle","style"],"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"sourcesContent":["// Styles\nimport './VBtnGroup.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\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'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVBtnGroupProps = propsFactory({\n  baseColor: String,\n  divided: Boolean,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps(),\n}, 'VBtnGroup')\n\nexport const VBtnGroup = genericComponent()({\n  name: 'VBtnGroup',\n\n  props: makeVBtnGroupProps(),\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        baseColor: toRef(() => props.baseColor),\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            props.class,\n          ]}\n          style={ props.style }\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VBtnGroup = InstanceType<typeof VBtnGroup>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,SAAS;AAAA,SAC1BC,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,gBAAgB,wCAEzB;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,kBAAkB,GAAGF,YAAY,CAAC;EAC7CG,SAAS,EAAEC,MAAM;EACjBC,OAAO,EAAEC,OAAO;EAEhB,GAAGtB,eAAe,CAAC,CAAC;EACpB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC,CAAC;EACrB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC,CAAC;EACrB,GAAGE,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC,CAAC;EACnB,GAAGE,gBAAgB,CAAC;AACtB,CAAC,EAAE,WAAW,CAAC;AAEf,OAAO,MAAMU,SAAS,GAAGR,gBAAgB,CAAC,CAAC,CAAC;EAC1CS,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEP,kBAAkB,CAAC,CAAC;EAE3BQ,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGjB,YAAY,CAACa,KAAK,CAAC;IAC5C,MAAM;MAAEK;IAAe,CAAC,GAAGzB,UAAU,CAACoB,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAc,CAAC,GAAG9B,SAAS,CAACwB,KAAK,CAAC;IAC1C,MAAM;MAAEO;IAAiB,CAAC,GAAGzB,YAAY,CAACkB,KAAK,CAAC;IAChD,MAAM;MAAEQ;IAAe,CAAC,GAAGxB,UAAU,CAACgB,KAAK,CAAC;IAE5CtB,eAAe,CAAC;MACd+B,IAAI,EAAE;QACJC,MAAM,EAAE,MAAM;QACdhB,SAAS,EAAEL,KAAK,CAAC,MAAMW,KAAK,CAACN,SAAS,CAAC;QACvCiB,KAAK,EAAEtB,KAAK,CAAC,MAAMW,KAAK,CAACW,KAAK,CAAC;QAC/BC,OAAO,EAAEvB,KAAK,CAAC,MAAMW,KAAK,CAACY,OAAO,CAAC;QACnCC,IAAI,EAAE,IAAI;QACVC,OAAO,EAAEzB,KAAK,CAAC,MAAMW,KAAK,CAACc,OAAO;MACpC;IACF,CAAC,CAAC;IAEFtB,SAAS,CAAC,MAAM;MACd,OAAAuB,YAAA,CAAAf,KAAA,CAAAgB,GAAA;QAAA,SAAAC,eAAA,CAEW,CACL,aAAa,EACb;UACE,sBAAsB,EAAEjB,KAAK,CAACJ;QAChC,CAAC,EACDQ,YAAY,CAACc,KAAK,EAClBZ,aAAa,CAACY,KAAK,EACnBb,cAAc,CAACa,KAAK,EACpBX,gBAAgB,CAACW,KAAK,EACtBV,cAAc,CAACU,KAAK,EACpBlB,KAAK,CAACmB,KAAK,CACZ;QAAA,SAAAC,eAAA,CACOpB,KAAK,CAACqB,KAAK;MAAA,GACTlB,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VBtnGroup.js","names":["makeBorderProps","useBorder","makeComponentProps","provideDefaults","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","toRef","genericComponent","propsFactory","useRender","makeVBtnGroupProps","baseColor","String","divided","Boolean","direction","type","default","VBtnGroup","name","props","setup","_ref","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","_createVNode","tag","_normalizeClass","value","class","_normalizeStyle","style"],"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"sourcesContent":["// Styles\nimport './VBtnGroup.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\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'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVBtnGroupProps = propsFactory({\n  baseColor: String,\n  divided: Boolean,\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n  },\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps(),\n}, 'VBtnGroup')\n\nexport const VBtnGroup = genericComponent()({\n  name: 'VBtnGroup',\n\n  props: makeVBtnGroupProps(),\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: toRef(() => props.direction === 'horizontal' ? 'auto' : null),\n        baseColor: toRef(() => props.baseColor),\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            `v-btn-group--${props.direction}`,\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            props.class,\n          ]}\n          style={ props.style }\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VBtnGroup = InstanceType<typeof VBtnGroup>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,SAAS;AAAA,SAC1BC,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,gBAAgB,wCAEzB;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAElD;AAGA,OAAO,MAAMC,kBAAkB,GAAGF,YAAY,CAAC;EAC7CG,SAAS,EAAEC,MAAM;EACjBC,OAAO,EAAEC,OAAO;EAChBC,SAAS,EAAE;IACTC,IAAI,EAAEJ,MAA6C;IACnDK,OAAO,EAAE;EACX,CAAC;EAED,GAAGzB,eAAe,CAAC,CAAC;EACpB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC,CAAC;EACrB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC,CAAC;EACrB,GAAGE,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC,CAAC;EACnB,GAAGE,gBAAgB,CAAC;AACtB,CAAC,EAAE,WAAW,CAAC;AAEf,OAAO,MAAMa,SAAS,GAAGX,gBAAgB,CAAC,CAAC,CAAC;EAC1CY,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEV,kBAAkB,CAAC,CAAC;EAE3BW,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGpB,YAAY,CAACgB,KAAK,CAAC;IAC5C,MAAM;MAAEK;IAAe,CAAC,GAAG5B,UAAU,CAACuB,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAc,CAAC,GAAGjC,SAAS,CAAC2B,KAAK,CAAC;IAC1C,MAAM;MAAEO;IAAiB,CAAC,GAAG5B,YAAY,CAACqB,KAAK,CAAC;IAChD,MAAM;MAAEQ;IAAe,CAAC,GAAG3B,UAAU,CAACmB,KAAK,CAAC;IAE5CzB,eAAe,CAAC;MACdkC,IAAI,EAAE;QACJC,MAAM,EAAExB,KAAK,CAAC,MAAMc,KAAK,CAACL,SAAS,KAAK,YAAY,GAAG,MAAM,GAAG,IAAI,CAAC;QACrEJ,SAAS,EAAEL,KAAK,CAAC,MAAMc,KAAK,CAACT,SAAS,CAAC;QACvCoB,KAAK,EAAEzB,KAAK,CAAC,MAAMc,KAAK,CAACW,KAAK,CAAC;QAC/BC,OAAO,EAAE1B,KAAK,CAAC,MAAMc,KAAK,CAACY,OAAO,CAAC;QACnCC,IAAI,EAAE,IAAI;QACVC,OAAO,EAAE5B,KAAK,CAAC,MAAMc,KAAK,CAACc,OAAO;MACpC;IACF,CAAC,CAAC;IAEFzB,SAAS,CAAC,MAAM;MACd,OAAA0B,YAAA,CAAAf,KAAA,CAAAgB,GAAA;QAAA,SAAAC,eAAA,CAEW,CACL,aAAa,EACb,gBAAgBjB,KAAK,CAACL,SAAS,EAAE,EACjC;UACE,sBAAsB,EAAEK,KAAK,CAACP;QAChC,CAAC,EACDW,YAAY,CAACc,KAAK,EAClBZ,aAAa,CAACY,KAAK,EACnBb,cAAc,CAACa,KAAK,EACpBX,gBAAgB,CAACW,KAAK,EACtBV,cAAc,CAACU,KAAK,EACpBlB,KAAK,CAACmB,KAAK,CACZ;QAAA,SAAAC,eAAA,CACOpB,KAAK,CAACqB,KAAK;MAAA,GACTlB,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VBtnGroup/VBtnGroup.sass

@@ -11,7 +11,8 @@
     flex-wrap: nowrap
     max-width: 100%
     min-width: 0
-    overflow: hidden
+    overflow-y: hidden
+    overflow-x: auto
     vertical-align: middle
 
     @include tools.border($btn-group-border...)
@@ -28,25 +29,52 @@
       border-radius: 0
       border-color: inherit
 
-      &:not(:last-child)
-        border-inline-end: none
+    &--tile
+      @include tools.rounded($btn-group-tile-border-radius)
 
-      &:not(:first-child)
-        border-inline-start: none
+    &--horizontal
+      .v-btn
+        &:not(:last-child)
+          border-inline-end: none
 
-      &:first-child
-        border-start-start-radius: inherit
-        border-end-start-radius: inherit
+        &:not(:first-child)
+          border-inline-start: none
 
-      &:last-child
-        border-start-end-radius: inherit
-        border-end-end-radius: inherit
+        &:first-child
+          border-start-start-radius: inherit
+          border-end-start-radius: inherit
 
-    &--divided
-      .v-btn:not(:last-child)
-        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
+        &:last-child
+          border-start-end-radius: inherit
+          border-end-end-radius: inherit
 
-    &--tile
-      @include tools.rounded($btn-group-tile-border-radius)
+      &.v-btn-group--divided
+        .v-btn:not(:last-child)
+          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
+
+    &--vertical
+      flex-direction: column
+      height: auto !important
+
+      .v-btn
+        &:not(:last-child)
+          border-block-end: none
+
+        &:not(:first-child)
+          border-block-start: none
+
+        &:first-child
+          border-start-start-radius: inherit
+          border-start-end-radius: inherit
+
+        &:last-child
+          border-end-start-radius: inherit
+          border-end-end-radius: inherit
+
+      &.v-btn-group--divided
+        .v-btn:not(:last-child)
+          border-block-end-width: $btn-group-border-thin-width
+          border-block-end-style: $btn-group-border-style
+          border-block-end-color: $btn-group-border-color

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

@@ -28,6 +28,7 @@ export declare const makeVBtnToggleProps: <Defaults extends {
     border?: unknown;
     baseColor?: unknown;
     divided?: unknown;
+    direction?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     modelValue: unknown extends Defaults["modelValue"] ? {
         type: null;
@@ -151,10 +152,21 @@ export declare const makeVBtnToggleProps: <Defaults extends {
         type: import("vue").PropType<unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"]>;
         default: unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"];
     };
+    direction: unknown extends Defaults["direction"] ? {
+        type: import("vue").PropType<"horizontal" | "vertical">;
+        default: string;
+    } : Omit<{
+        type: import("vue").PropType<"horizontal" | "vertical">;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<unknown extends Defaults["direction"] ? "horizontal" | "vertical" : "horizontal" | "vertical" | Defaults["direction"]>;
+        default: unknown extends Defaults["direction"] ? "horizontal" | "vertical" : NonNullable<"horizontal" | "vertical"> | Defaults["direction"];
+    };
 };
 export declare const VBtnToggle: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         disabled: boolean;
         multiple: boolean;
@@ -181,6 +193,7 @@ export declare const VBtnToggle: {
         'update:modelValue': (value: any) => true;
     }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         disabled: boolean;
         multiple: boolean;
@@ -200,6 +213,7 @@ export declare const VBtnToggle: {
         Defaults: {};
     }, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         disabled: boolean;
         multiple: boolean;
@@ -224,6 +238,7 @@ export declare const VBtnToggle: {
         select: (id: string, value: boolean) => void;
     }, {}, {}, {}, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        direction: "horizontal" | "vertical";
         style: import("vue").StyleValue;
         disabled: boolean;
         multiple: boolean;
@@ -238,6 +253,7 @@ export declare const VBtnToggle: {
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<{
     variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    direction: "horizontal" | "vertical";
     style: import("vue").StyleValue;
     disabled: boolean;
     multiple: boolean;
@@ -264,6 +280,7 @@ export declare const VBtnToggle: {
     'update:modelValue': (value: any) => true;
 }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue">, string, {
     variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    direction: "horizontal" | "vertical";
     style: import("vue").StyleValue;
     disabled: boolean;
     multiple: boolean;
@@ -320,6 +337,10 @@ export declare const VBtnToggle: {
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     baseColor: StringConstructor;
     divided: BooleanConstructor;
+    direction: {
+        type: import("vue").PropType<"horizontal" | "vertical">;
+        default: string;
+    };
 }, import("vue").ExtractPropTypes<{
     modelValue: {
         type: null;
@@ -363,6 +384,10 @@ export declare const VBtnToggle: {
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     baseColor: StringConstructor;
     divided: BooleanConstructor;
+    direction: {
+        type: import("vue").PropType<"horizontal" | "vertical">;
+        default: string;
+    };
 }>>;
 export type VBtnToggle = InstanceType<typeof VBtnToggle>;
 

package/lib/components/VCard/VCard.d.ts

@@ -240,14 +240,18 @@ export declare const makeVCardProps: <Defaults extends {
         default: boolean;
     }, "type" | "default"> & {
         type: PropType<unknown extends Defaults["ripple"] ? boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined : boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | Defaults["ripple"] | undefined>;
         default: unknown extends Defaults["ripple"] ? boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined : NonNullable<boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined> | Defaults["ripple"];
     };
     subtitle: unknown extends Defaults["subtitle"] ? {
@@ -301,7 +305,8 @@ export declare const VCard: {
         density: import("../../composables/density.js").Density;
         tile: boolean;
         ripple: boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined;
         hover: boolean;
     } & {
@@ -382,7 +387,8 @@ export declare const VCard: {
         rounded: string | number | boolean;
         tile: boolean;
         ripple: boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined;
         subtitle: string | number | boolean;
         hover: boolean;
@@ -415,7 +421,8 @@ export declare const VCard: {
         density: import("../../composables/density.js").Density;
         tile: boolean;
         ripple: boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined;
         hover: boolean;
     } & {
@@ -496,7 +503,8 @@ export declare const VCard: {
         rounded: string | number | boolean;
         tile: boolean;
         ripple: boolean | {
-            class: string;
+            class?: string;
+            keys?: number[];
         } | undefined;
         subtitle: string | number | boolean;
         hover: boolean;
@@ -515,7 +523,8 @@ export declare const VCard: {
     density: import("../../composables/density.js").Density;
     tile: boolean;
     ripple: boolean | {
-        class: string;
+        class?: string;
+        keys?: number[];
     } | undefined;
     hover: boolean;
 } & {
@@ -596,7 +605,8 @@ export declare const VCard: {
     rounded: string | number | boolean;
     tile: boolean;
     ripple: boolean | {
-        class: string;
+        class?: string;
+        keys?: number[];
     } | undefined;
     subtitle: string | number | boolean;
     hover: boolean;