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

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

@@ -0,0 +1,175 @@
+import * as vue from 'vue';
+import { PropType, JSXComponent } from 'vue';
+
+declare function deepEqual(a: any, b: any): boolean;
+declare type EventProp<T = (...args: any[]) => any> = T | T[];
+declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
+
+declare type ValidationResult = string | boolean;
+declare type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VSwitch: vue.DefineComponent<{
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    theme: StringConstructor;
+    color: StringConstructor;
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    id: StringConstructor;
+    inline: BooleanConstructor;
+    label: StringConstructor;
+    falseIcon: vue.PropType<IconValue>;
+    trueIcon: vue.PropType<IconValue>;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: vue.PropType<boolean | null>;
+        default: null;
+    };
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    trueValue: null;
+    falseValue: null;
+    modelValue: null;
+    type: StringConstructor;
+    value: null;
+    valueComparator: {
+        type: vue.PropType<typeof deepEqual>;
+        default: typeof deepEqual;
+    };
+    errorMessages: {
+        type: vue.PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rules: {
+        type: vue.PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    validationValue: null;
+    appendIcon: vue.PropType<IconValue>;
+    prependIcon: vue.PropType<IconValue>;
+    hideDetails: vue.PropType<boolean | "auto">;
+    messages: {
+        type: vue.PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: vue.PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': vue.PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': vue.PropType<EventProp<(...args: any[]) => any>>;
+    indeterminate: BooleanConstructor;
+    inset: BooleanConstructor;
+    flat: BooleanConstructor;
+    loading: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:indeterminate': (val: boolean) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    theme: StringConstructor;
+    color: StringConstructor;
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    id: StringConstructor;
+    inline: BooleanConstructor;
+    label: StringConstructor;
+    falseIcon: vue.PropType<IconValue>;
+    trueIcon: vue.PropType<IconValue>;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: vue.PropType<boolean | null>;
+        default: null;
+    };
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    trueValue: null;
+    falseValue: null;
+    modelValue: null;
+    type: StringConstructor;
+    value: null;
+    valueComparator: {
+        type: vue.PropType<typeof deepEqual>;
+        default: typeof deepEqual;
+    };
+    errorMessages: {
+        type: vue.PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rules: {
+        type: vue.PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    validationValue: null;
+    appendIcon: vue.PropType<IconValue>;
+    prependIcon: vue.PropType<IconValue>;
+    hideDetails: vue.PropType<boolean | "auto">;
+    messages: {
+        type: vue.PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: vue.PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': vue.PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': vue.PropType<EventProp<(...args: any[]) => any>>;
+    indeterminate: BooleanConstructor;
+    inset: BooleanConstructor;
+    flat: BooleanConstructor;
+    loading: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;
+}, {
+    flat: boolean;
+    inline: boolean;
+    error: boolean;
+    direction: "horizontal" | "vertical";
+    inset: boolean;
+    loading: string | boolean;
+    disabled: boolean;
+    multiple: boolean | null;
+    readonly: boolean;
+    indeterminate: boolean;
+    messages: string | string[];
+    density: "default" | "compact" | "comfortable" | null;
+    ripple: boolean;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    valueComparator: typeof deepEqual;
+}>;
+declare type VSwitch = InstanceType<typeof VSwitch>;
+
+export { VSwitch };

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

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

package/lib/components/VSystemBar/VSystemBar.css

@@ -9,7 +9,7 @@
   position: relative;
   text-align: end;
   width: 100%;
-  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));
   background: rgba(var(--v-theme-on-surface-variant));
   color: rgba(var(--v-theme-on-variant), var(--v-medium-emphasis-opacity));
   font-size: 0.75rem;
@@ -19,8 +19,6 @@
   text-transform: none;
 }
 .v-system-bar .v-icon {
-  font-size: 0.75rem;
-  margin-inline-start: 8px;
   opacity: var(--v-medium-emphasis-opacity);
 }
 .v-system-bar--absolute {
@@ -34,7 +32,4 @@
 }
 .v-system-bar--window {
   height: 32px;
-}
-.v-system-bar--window .v-icon {
-  font-size: 1rem;
 }

package/lib/components/VSystemBar/VSystemBar.mjs

@@ -2,24 +2,23 @@ import { createVNode as _createVNode, resolveDirective as _resolveDirective } fr
 // Styles
 import "./VSystemBar.css"; // Composables
 
-import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
-import { makePositionProps, usePosition } from "../../composables/position.mjs";
+import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
-import { toRef } from 'vue';
+import { computed, ref, toRef } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs";
 export const VSystemBar = defineComponent({
   name: 'VSystemBar',
   props: {
     color: String,
+    height: [Number, String],
     window: Boolean,
-    ...makeDimensionProps(),
     ...makeElevationProps(),
-    ...makePositionProps(),
+    ...makeLayoutItemProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -36,25 +35,31 @@ export const VSystemBar = defineComponent({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'color'));
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       elevationClasses
     } = useElevation(props);
-    const {
-      positionClasses,
-      positionStyles
-    } = usePosition(props);
     const {
       roundedClasses
     } = useRounded(props);
-    return () => _createVNode(props.tag, {
+    const height = computed(() => props.height ?? (props.window ? 32 : 24));
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      order: computed(() => parseInt(props.order, 10)),
+      position: ref('top'),
+      layoutSize: height,
+      elementSize: height,
+      active: computed(() => true),
+      absolute: toRef(props, 'absolute')
+    });
+    useRender(() => _createVNode(props.tag, {
       "class": ['v-system-bar', {
         'v-system-bar--window': props.window
-      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, positionStyles.value]
-    }, slots);
+      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
+      "style": [backgroundColorStyles.value, layoutItemStyles.value]
+    }, slots));
+    return {};
   }
 
 });

package/lib/components/VSystemBar/VSystemBar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"names":["makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","defineComponent","toRef","VSystemBar","name","props","color","String","window","Boolean","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","dimensionStyles","elevationClasses","positionClasses","positionStyles","roundedClasses","value"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,kB,EAAoBC,Y;SACpBC,kB,EAAoBC,Y;SACpBC,iB,EAAmBC,W;SACnBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,kB,uCAET;;SACSC,e;AACT,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,UAAU,GAAGF,eAAe,CAAC;AACxCG,EAAAA,IAAI,EAAE,YADkC;AAGxCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,MADF;AAELC,IAAAA,MAAM,EAAEC,OAFH;AAIL,OAAGpB,kBAAkB,EAJhB;AAKL,OAAGE,kBAAkB,EALhB;AAML,OAAGE,iBAAiB,EANf;AAOL,OAAGE,gBAAgB,EAPd;AAQL,OAAGE,YAAY,EARV;AASL,OAAGC,cAAc;AATZ,GAHiC;;AAexCY,EAAAA,KAAK,CAAEL,KAAF,QAAoB;AAAA,QAAX;AAAEM,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBb,YAAY,CAACM,KAAD,CAArC;AACA,UAAM;AAAEQ,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoDd,kBAAkB,CAACE,KAAK,CAACG,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAsBzB,YAAY,CAACe,KAAD,CAAxC;AACA,UAAM;AAAEW,MAAAA;AAAF,QAAuBxB,YAAY,CAACa,KAAD,CAAzC;AACA,UAAM;AAAEY,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAsCxB,WAAW,CAACW,KAAD,CAAvD;AACA,UAAM;AAAEc,MAAAA;AAAF,QAAqBvB,UAAU,CAACS,KAAD,CAArC;AAEA,WAAO;AAAA,eAEI,CACL,cADK,EAEL;AAAE,gCAAwBA,KAAK,CAACG;AAAhC,OAFK,EAGLI,YAAY,CAACQ,KAHR,EAILP,sBAAsB,CAACO,KAJlB,EAKLJ,gBAAgB,CAACI,KALZ,EAMLH,eAAe,CAACG,KANX,EAOLD,cAAc,CAACC,KAPV,CAFJ;AAAA,eAWI,CACLN,qBAAqB,CAACM,KADjB,EAELL,eAAe,CAACK,KAFX,EAGLF,cAAc,CAACE,KAHV;AAXJ,OAgBOT,KAhBP,CAAP;AAmBD;;AA1CuC,CAAD,CAAlC","sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VSystemBar = defineComponent({\n  name: 'VSystemBar',\n\n  props: {\n    color: String,\n    window: Boolean,\n\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n\n    return () => (\n      <props.tag\n        class={[\n          'v-system-bar',\n          { 'v-system-bar--window': props.window },\n          themeClasses.value,\n          backgroundColorClasses.value,\n          elevationClasses.value,\n          positionClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          dimensionStyles.value,\n          positionStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"file":"VSystemBar.mjs"}
+{"version":3,"file":"VSystemBar.mjs","names":["makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","computed","ref","toRef","defineComponent","useRender","VSystemBar","name","props","color","String","height","Number","window","Boolean","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","value"],"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VSystemBar = defineComponent({\n  name: 'VSystemBar',\n\n  props: {\n    color: String,\n    height: [Number, String],\n    window: Boolean,\n\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const height = computed(() => props.height ?? (props.window ? 32 : 24))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: ref('top'),\n      layoutSize: height,\n      elementSize: height,\n      active: computed(() => true),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-system-bar',\n          { 'v-system-bar--window': props.window },\n          themeClasses.value,\n          backgroundColorClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          layoutItemStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,kB,EAAoBC,Y;SACpBC,mB,EAAqBC,a;SACrBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,kB,uCAET;;AACA,SAASC,QAAT,EAAmBC,GAAnB,EAAwBC,KAAxB,QAAqC,KAArC;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,UAAU,GAAGF,eAAe,CAAC;EACxCG,IAAI,EAAE,YADkC;EAGxCC,KAAK,EAAE;IACLC,KAAK,EAAEC,MADF;IAELC,MAAM,EAAE,CAACC,MAAD,EAASF,MAAT,CAFH;IAGLG,MAAM,EAAEC,OAHH;IAKL,GAAGvB,kBAAkB,EALhB;IAML,GAAGE,mBAAmB,EANjB;IAOL,GAAGE,gBAAgB,EAPd;IAQL,GAAGE,YAAY,EARV;IASL,GAAGC,cAAc;EATZ,CAHiC;;EAexCiB,KAAK,CAAEP,KAAF,QAAoB;IAAA,IAAX;MAAEQ;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmBlB,YAAY,CAACS,KAAD,CAArC;IACA,MAAM;MAAEU,sBAAF;MAA0BC;IAA1B,IAAoDnB,kBAAkB,CAACG,KAAK,CAACK,KAAD,EAAQ,OAAR,CAAN,CAA5E;IACA,MAAM;MAAEY;IAAF,IAAuB5B,YAAY,CAACgB,KAAD,CAAzC;IACA,MAAM;MAAEa;IAAF,IAAqBzB,UAAU,CAACY,KAAD,CAArC;IACA,MAAMG,MAAM,GAAGV,QAAQ,CAAC,MAAMO,KAAK,CAACG,MAAN,KAAiBH,KAAK,CAACK,MAAN,GAAe,EAAf,GAAoB,EAArC,CAAP,CAAvB;IACA,MAAM;MAAES;IAAF,IAAuB5B,aAAa,CAAC;MACzC6B,EAAE,EAAEf,KAAK,CAACD,IAD+B;MAEzCiB,KAAK,EAAEvB,QAAQ,CAAC,MAAMwB,QAAQ,CAACjB,KAAK,CAACgB,KAAP,EAAc,EAAd,CAAf,CAF0B;MAGzCE,QAAQ,EAAExB,GAAG,CAAC,KAAD,CAH4B;MAIzCyB,UAAU,EAAEhB,MAJ6B;MAKzCiB,WAAW,EAAEjB,MAL4B;MAMzCkB,MAAM,EAAE5B,QAAQ,CAAC,MAAM,IAAP,CANyB;MAOzC6B,QAAQ,EAAE3B,KAAK,CAACK,KAAD,EAAQ,UAAR;IAP0B,CAAD,CAA1C;IAUAH,SAAS,CAAC;MAAA,SAEC,CACL,cADK,EAEL;QAAE,wBAAwBG,KAAK,CAACK;MAAhC,CAFK,EAGLI,YAAY,CAACc,KAHR,EAILb,sBAAsB,CAACa,KAJlB,EAKLX,gBAAgB,CAACW,KALZ,EAMLV,cAAc,CAACU,KANV,CAFD;MAAA,SAUC,CACLZ,qBAAqB,CAACY,KADjB,EAELT,gBAAgB,CAACS,KAFZ;IAVD,GAcIf,KAdJ,CAAD,CAAT;IAkBA,OAAO,EAAP;EACD;;AAlDuC,CAAD,CAAlC"}

package/lib/components/VSystemBar/VSystemBar.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 
@@ -15,8 +14,6 @@
   width: 100%
 
   .v-icon
-    font-size: $system-bar-icon-font-size
-    margin-inline-start: $system-bar-icon-margin-inline-start
     opacity: $system-bar-icon-opacity
 
   @include tools.elevation($system-bar-elevation)
@@ -29,6 +26,3 @@
 
   &--window
     height: $system-bar-window-height
-
-    .v-icon
-      font-size: $system-bar-window-icon-font-size

package/lib/components/VSystemBar/_variables.scss

@@ -2,7 +2,7 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
-// Defaults
+// VSystemBar
 $system-bar-background: rgba(var(--v-theme-on-surface-variant)) !default;
 $system-bar-border-radius: map.get(settings.$rounded, 0) !default;
 $system-bar-color: rgba(var(--v-theme-on-variant), var(--v-medium-emphasis-opacity)) !default;
@@ -11,8 +11,6 @@ $system-bar-flex: 1 1 auto !default;
 $system-bar-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default;
 $system-bar-font-weight: tools.map-deep-get(settings.$typography, 'caption', 'weight') !default;
 $system-bar-height: 24px !default;
-$system-bar-icon-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default;
-$system-bar-icon-margin-inline-start: 8px !default;
 $system-bar-icon-opacity: var(--v-medium-emphasis-opacity) !default;
 $system-bar-justify-content: flex-end !default;
 $system-bar-letter-spacing: tools.map-deep-get(settings.$typography, 'caption', 'letter-spacing') !default;
@@ -23,8 +21,8 @@ $system-bar-positions: absolute fixed !default;
 $system-bar-text-align: end !default;
 $system-bar-text-transform: tools.map-deep-get(settings.$typography, 'caption', 'text-transform') !default;
 $system-bar-window-height: 32px !default;
-$system-bar-window-icon-font-size: tools.map-deep-get(settings.$typography, 'body-1', 'size') !default;
 
+// Lists
 $system-bar-theme: (
   $system-bar-background,
   $system-bar-color

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

@@ -0,0 +1,61 @@
+import * as vue from 'vue';
+
+declare const VSystemBar: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    color: StringConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+    window: BooleanConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    color: StringConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+    window: BooleanConstructor;
+}>>, {
+    window: boolean;
+    absolute: boolean;
+    order: string | number;
+    tag: string;
+    rounded: string | number | boolean;
+}>;
+
+export { VSystemBar };

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

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

package/lib/components/VTable/VTable.css

@@ -22,6 +22,7 @@
 .v-table.v-table--fixed-header thead th {
   background: rgb(var(--v-theme-surface));
   box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
+  z-index: 1;
 }
 .v-table.v-table--fixed-footer tfoot th,
 .v-table.v-table--fixed-footer tfoot td {

package/lib/components/VTable/VTable.mjs

@@ -2,11 +2,11 @@ import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VTable.css"; // Composables
 
+import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
 
-import { convertToUnit, defineComponent } from "../../util/index.mjs";
-import { makeDensityProps, useDensity } from "../../composables/density.mjs";
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs";
 export const VTable = defineComponent({
   name: 'VTable',
   props: {
@@ -14,8 +14,8 @@ export const VTable = defineComponent({
     fixedFooter: Boolean,
     height: [Number, String],
     ...makeDensityProps(),
-    ...makeThemeProps(),
-    ...makeTagProps()
+    ...makeTagProps(),
+    ...makeThemeProps()
   },
 
   setup(props, _ref) {
@@ -28,8 +28,8 @@ export const VTable = defineComponent({
     const {
       densityClasses
     } = useDensity(props);
-    return () => {
-      var _slots$top, _slots$default, _slots$bottom;
+    useRender(() => {
+      var _slots$top, _slots$bottom;
 
       return _createVNode(props.tag, {
         "class": ['v-table', {
@@ -45,9 +45,10 @@ export const VTable = defineComponent({
           "style": {
             height: convertToUnit(props.height)
           }
-        }, [_createVNode("table", null, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)])]), (_slots$bottom = slots.bottom) == null ? void 0 : _slots$bottom.call(slots)]
+        }, [_createVNode("table", null, [slots.default()])]), (_slots$bottom = slots.bottom) == null ? void 0 : _slots$bottom.call(slots)]
       });
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VTable/VTable.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTable/VTable.tsx"],"names":["makeTagProps","makeThemeProps","provideTheme","convertToUnit","defineComponent","makeDensityProps","useDensity","VTable","name","props","fixedHeader","Boolean","fixedFooter","height","Number","String","setup","slots","themeClasses","densityClasses","top","bottom","value","default"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,Y;SACAC,c,EAAgBC,Y,uCAEzB;;SACSC,a,EAAeC,e;SACfC,gB,EAAkBC,U;AAE3B,OAAO,MAAMC,MAAM,GAAGH,eAAe,CAAC;AACpCI,EAAAA,IAAI,EAAE,QAD8B;AAGpCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAEC,OADR;AAELC,IAAAA,WAAW,EAAED,OAFR;AAGLE,IAAAA,MAAM,EAAE,CAACC,MAAD,EAASC,MAAT,CAHH;AAKL,OAAGV,gBAAgB,EALd;AAML,OAAGJ,cAAc,EANZ;AAOL,OAAGD,YAAY;AAPV,GAH6B;;AAapCgB,EAAAA,KAAK,CAAEP,KAAF,QAAoB;AAAA,QAAX;AAAEQ,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBhB,YAAY,CAACO,KAAD,CAArC;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAqBb,UAAU,CAACG,KAAD,CAArC;AAEA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,SADK,EAEL;AACE,mCAAyB,CAAC,CAACA,KAAK,CAACI,MADnC;AAEE,mCAAyBJ,KAAK,CAACC,WAFjC;AAGE,mCAAyBD,KAAK,CAACG,WAHjC;AAIE,8BAAoB,CAAC,CAACK,KAAK,CAACG,GAJ9B;AAKE,iCAAuB,CAAC,CAACH,KAAK,CAACI;AALjC,SAFK,EASLH,YAAY,CAACI,KATR,EAULH,cAAc,CAACG,KAVV;AAFJ;AAAA,sCAeDL,KAAK,CAACG,GAfL,qBAeD,gBAAAH,KAAK,CAfJ,EAiBDA,KAAK,CAACM,OAAN;AAAA,mBAEQ,kBAFR;AAAA,mBAGS;AAAEV,YAAAA,MAAM,EAAEV,aAAa,CAACM,KAAK,CAACI,MAAP;AAAvB;AAHT,2DAMMI,KAAK,CAACM,OANZ,qBAMM,oBAAAN,KAAK,CANX,IAjBC,mBA4BDA,KAAK,CAACI,MA5BL,qBA4BD,mBAAAJ,KAAK,CA5BJ;AAAA;AAAA,KAAP;AA+BD;;AAhDmC,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VTable.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { convertToUnit, defineComponent } from '@/util'\nimport { makeDensityProps, useDensity } from '@/composables/density'\n\nexport const VTable = defineComponent({\n  name: 'VTable',\n\n  props: {\n    fixedHeader: Boolean,\n    fixedFooter: Boolean,\n    height: [Number, String],\n\n    ...makeDensityProps(),\n    ...makeThemeProps(),\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    return () => (\n      <props.tag\n        class={[\n          'v-table',\n          {\n            'v-table--fixed-height': !!props.height,\n            'v-table--fixed-header': props.fixedHeader,\n            'v-table--fixed-footer': props.fixedFooter,\n            'v-table--has-top': !!slots.top,\n            'v-table--has-bottom': !!slots.bottom,\n          },\n          themeClasses.value,\n          densityClasses.value,\n        ]}\n      >\n        { slots.top?.() }\n\n        { slots.default && (\n          <div\n            class=\"v-table__wrapper\"\n            style={{ height: convertToUnit(props.height) }}\n          >\n            <table>\n              { slots.default?.() }\n            </table>\n          </div>\n        ) }\n\n        { slots.bottom?.() }\n      </props.tag>\n    )\n  },\n})\n"],"file":"VTable.mjs"}
+{"version":3,"file":"VTable.mjs","names":["makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","convertToUnit","defineComponent","useRender","VTable","name","props","fixedHeader","Boolean","fixedFooter","height","Number","String","setup","slots","themeClasses","densityClasses","top","bottom","value","default"],"sources":["../../../src/components/VTable/VTable.tsx"],"sourcesContent":["// Styles\nimport './VTable.sass'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\nexport const VTable = defineComponent({\n  name: 'VTable',\n\n  props: {\n    fixedHeader: Boolean,\n    fixedFooter: Boolean,\n    height: [Number, String],\n\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-table',\n          {\n            'v-table--fixed-height': !!props.height,\n            'v-table--fixed-header': props.fixedHeader,\n            'v-table--fixed-footer': props.fixedFooter,\n            'v-table--has-top': !!slots.top,\n            'v-table--has-bottom': !!slots.bottom,\n          },\n          themeClasses.value,\n          densityClasses.value,\n        ]}\n      >\n        { slots.top?.() }\n\n        { slots.default && (\n          <div\n            class=\"v-table__wrapper\"\n            style={{ height: convertToUnit(props.height) }}\n          >\n            <table>\n              { slots.default() }\n            </table>\n          </div>\n        ) }\n\n        { slots.bottom?.() }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTable = InstanceType<typeof VTable>\n"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y,uCAEzB;;SACSC,a,EAAeC,e,EAAiBC,S;AAEzC,OAAO,MAAMC,MAAM,GAAGF,eAAe,CAAC;EACpCG,IAAI,EAAE,QAD8B;EAGpCC,KAAK,EAAE;IACLC,WAAW,EAAEC,OADR;IAELC,WAAW,EAAED,OAFR;IAGLE,MAAM,EAAE,CAACC,MAAD,EAASC,MAAT,CAHH;IAKL,GAAGhB,gBAAgB,EALd;IAML,GAAGE,YAAY,EANV;IAOL,GAAGC,cAAc;EAPZ,CAH6B;;EAapCc,KAAK,CAAEP,KAAF,QAAoB;IAAA,IAAX;MAAEQ;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmBf,YAAY,CAACM,KAAD,CAArC;IACA,MAAM;MAAEU;IAAF,IAAqBnB,UAAU,CAACS,KAAD,CAArC;IAEAH,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,SADK,EAEL;UACE,yBAAyB,CAAC,CAACG,KAAK,CAACI,MADnC;UAEE,yBAAyBJ,KAAK,CAACC,WAFjC;UAGE,yBAAyBD,KAAK,CAACG,WAHjC;UAIE,oBAAoB,CAAC,CAACK,KAAK,CAACG,GAJ9B;UAKE,uBAAuB,CAAC,CAACH,KAAK,CAACI;QALjC,CAFK,EASLH,YAAY,CAACI,KATR,EAULH,cAAc,CAACG,KAVV;MAFD;QAAA,8BAeJL,KAAK,CAACG,GAfF,qBAeJ,gBAAAH,KAAK,CAfD,EAiBJA,KAAK,CAACM,OAAN;UAAA,SAEQ,kBAFR;UAAA,SAGS;YAAEV,MAAM,EAAET,aAAa,CAACK,KAAK,CAACI,MAAP;UAAvB;QAHT,iCAMMI,KAAK,CAACM,OAAN,EANN,IAjBI,mBA4BJN,KAAK,CAACI,MA5BF,qBA4BJ,mBAAAJ,KAAK,CA5BD;MAAA;IAAA,CAAD,CAAT;IAgCA,OAAO,EAAP;EACD;;AAlDmC,CAAD,CAA9B"}

package/lib/components/VTable/VTable.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use '../../styles/settings'
 @use './variables' as *
@@ -39,6 +38,7 @@
     thead th
       background: $table-background
       box-shadow: inset 0 -1px 0 $table-border-color
+      z-index: 1
 
   &.v-table--fixed-footer
     tfoot

package/lib/components/VTable/_variables.scss

@@ -3,6 +3,7 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
+// VTable
 $table-background: rgb(var(--v-theme-surface)) !default;
 $table-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $table-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default;
@@ -15,6 +16,7 @@ $table-border: thin solid $table-border-color !default;
 $table-hover-color: rgba(var(--v-border-color), var(--v-hover-opacity)) !default;
 $table-line-height: 1.5 !default;
 
+// Lists
 $table-theme: (
   $table-background,
   $table-color,

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

@@ -0,0 +1,39 @@
+import * as vue from 'vue';
+
+declare const VTable: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    fixedHeader: BooleanConstructor;
+    fixedFooter: BooleanConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    fixedHeader: BooleanConstructor;
+    fixedFooter: BooleanConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+}>>, {
+    tag: string;
+    density: "default" | "compact" | "comfortable" | null;
+    fixedHeader: boolean;
+    fixedFooter: boolean;
+}>;
+declare type VTable = InstanceType<typeof VTable>;
+
+export { VTable };

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

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

package/lib/components/VTabs/VTab.css

@@ -1,10 +1,13 @@
 .v-tab {
-  --v-btn-height: 100%;
-  display: inline-flex;
   position: relative;
-  max-width: 360px;
   min-width: 90px;
 }
+.v-slide-group--horizontal .v-tab {
+  max-width: 360px;
+}
+.v-tab.v-tab.v-tab {
+  height: var(--v-tabs-height);
+}
 .v-slide-group--vertical .v-tab {
   justify-content: start;
 }