vuetify 3.1.4 → 3.1.6

package/lib/components/VSwitch/VSwitch.mjs

@@ -10,8 +10,8 @@ import { LoaderSlot, useLoader } from "../../composables/loader.mjs";
 import { useFocus } from "../../composables/focus.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
 import { computed, ref } from 'vue';
-import { defineComponent, filterInputAttrs, getUid, useRender } from "../../util/index.mjs";
-export const VSwitch = defineComponent({
+import { filterInputAttrs, genericComponent, getUid, useRender } from "../../util/index.mjs"; // Types
+export const VSwitch = genericComponent()({
   name: 'VSwitch',
   inheritAttrs: false,
   props: {
@@ -61,8 +61,7 @@ export const VSwitch = defineComponent({
       const [controlProps, _2] = filterControlProps(props);
       const control = ref();
       function onClick() {
-        var _control$value, _control$value$input;
-        (_control$value = control.value) == null ? void 0 : (_control$value$input = _control$value.input) == null ? void 0 : _control$value$input.click();
+        control.value?.input?.click();
       }
       return _createVNode(VInput, _mergeProps({
         "class": ['v-switch', {

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

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.mjs","names":["filterControlProps","makeSelectionControlProps","VSelectionControl","filterInputProps","makeVInputProps","VInput","VProgressCircular","LoaderSlot","useLoader","useFocus","useProxiedModel","computed","ref","defineComponent","filterInputAttrs","getUid","useRender","VSwitch","name","inheritAttrs","props","indeterminate","Boolean","inset","flat","loading","type","String","default","emits","focused","val","setup","attrs","slots","model","loaderClasses","isFocused","focus","blur","loaderColor","color","uid","id","onChange","value","inputAttrs","controlAttrs","inputProps","_1","controlProps","_2","control","onClick","input","click","messagesId","isDisabled","isReadonly","isValid","undefined","textColorClasses","textColorStyles","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { filterControlProps, makeSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, ref } from 'vue'\nimport { defineComponent, filterInputAttrs, getUid, useRender } from '@/util'\n\nexport const VSwitch = defineComponent({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: {\n    indeterminate: Boolean,\n    inset: Boolean,\n    flat: Boolean,\n    loading: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    ...makeVInputProps(),\n    ...makeSelectionControlProps(),\n  },\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = filterInputProps(props)\n      const [controlProps, _2] = filterControlProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick () {\n        control.value?.input?.click()\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n          ]}\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ textColorClasses, textColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__thumb',\n                        textColorClasses.value,\n                      ]}\n                      style={ textColorStyles.value }\n                    >\n                      { props.loading && (\n                        <LoaderSlot\n                          name=\"v-switch\"\n                          active\n                          color={ isValid.value === false ? undefined : loaderColor.value }\n                        >\n                          { slotProps => (\n                            slots.loader\n                              ? slots.loader(slotProps)\n                              : (\n                                  <VProgressCircular\n                                    active={ slotProps.isActive }\n                                    color={ slotProps.color }\n                                    indeterminate\n                                    size=\"16\"\n                                    width=\"2\"\n                                  />\n                              )\n                          )}\n                        </LoaderSlot>\n                      ) }\n                    </div>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}
+{"version":3,"file":"VSwitch.mjs","names":["filterControlProps","makeSelectionControlProps","VSelectionControl","filterInputProps","makeVInputProps","VInput","VProgressCircular","LoaderSlot","useLoader","useFocus","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","useRender","VSwitch","name","inheritAttrs","props","indeterminate","Boolean","inset","flat","loading","type","String","default","emits","focused","val","setup","attrs","slots","model","loaderClasses","isFocused","focus","blur","loaderColor","color","uid","id","onChange","value","inputAttrs","controlAttrs","inputProps","_1","controlProps","_2","control","onClick","input","click","messagesId","isDisabled","isReadonly","isValid","undefined","textColorClasses","textColorStyles","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { filterControlProps, makeSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\n\nexport type VSwitchSlots = VInputSlots & VSelectionControlSlots\n\nexport const VSwitch = genericComponent<VSwitchSlots>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: {\n    indeterminate: Boolean,\n    inset: Boolean,\n    flat: Boolean,\n    loading: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    ...makeVInputProps(),\n    ...makeSelectionControlProps(),\n  },\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = filterInputProps(props)\n      const [controlProps, _2] = filterControlProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick () {\n        control.value?.input?.click()\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n          ]}\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ textColorClasses, textColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__thumb',\n                        textColorClasses.value,\n                      ]}\n                      style={ textColorStyles.value }\n                    >\n                      { props.loading && (\n                        <LoaderSlot\n                          name=\"v-switch\"\n                          active\n                          color={ isValid.value === false ? undefined : loaderColor.value }\n                        >\n                          { slotProps => (\n                            slots.loader\n                              ? slots.loader(slotProps)\n                              : (\n                                  <VProgressCircular\n                                    active={ slotProps.isActive }\n                                    color={ slotProps.color }\n                                    indeterminate\n                                    size=\"16\"\n                                    width=\"2\"\n                                  />\n                              )\n                          )}\n                        </LoaderSlot>\n                      ) }\n                    </div>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,yBAAyB,EAAEC,iBAAiB;AAAA,SAChEC,gBAAgB,EAAEC,eAAe,EAAEC,MAAM;AAAA,SACzCC,iBAAiB,0CAE1B;AAAA,SACSC,UAAU,EAAEC,SAAS;AAAA,SACrBC,QAAQ;AAAA,SACRC,eAAe,8CAExB;AACA,SAASC,QAAQ,EAAEC,GAAG,QAAQ,KAAK;AAAA,SAC1BC,gBAAgB,EAAEC,gBAAgB,EAAEC,MAAM,EAAEC,SAAS,gCAE9D;AAMA,OAAO,MAAMC,OAAO,GAAGH,gBAAgB,EAAgB,CAAC;EACtDI,IAAI,EAAE,SAAS;EAEfC,YAAY,EAAE,KAAK;EAEnBC,KAAK,EAAE;IACLC,aAAa,EAAEC,OAAO;IACtBC,KAAK,EAAED,OAAO;IACdE,IAAI,EAAEF,OAAO;IACbG,OAAO,EAAE;MACPC,IAAI,EAAE,CAACJ,OAAO,EAAEK,MAAM,CAAC;MACvBC,OAAO,EAAE;IACX,CAAC;IAED,GAAGxB,eAAe,EAAE;IACpB,GAAGH,yBAAyB;EAC9B,CAAC;EAED4B,KAAK,EAAE;IACL,gBAAgB,EAAGC,OAAgB,IAAK,IAAI;IAC5C,mBAAmB,EAAE,MAAM,IAAI;IAC/B,sBAAsB,EAAGC,GAAY,IAAK;EAC5C,CAAC;EAEDC,KAAK,CAAEZ,KAAK,QAAoB;IAAA,IAAlB;MAAEa,KAAK;MAAEC;IAAM,CAAC;IAC5B,MAAMb,aAAa,GAAGX,eAAe,CAACU,KAAK,EAAE,eAAe,CAAC;IAC7D,MAAMe,KAAK,GAAGzB,eAAe,CAACU,KAAK,EAAE,YAAY,CAAC;IAClD,MAAM;MAAEgB;IAAc,CAAC,GAAG5B,SAAS,CAACY,KAAK,CAAC;IAC1C,MAAM;MAAEiB,SAAS;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAG9B,QAAQ,CAACW,KAAK,CAAC;IAElD,MAAMoB,WAAW,GAAG7B,QAAQ,CAAC,MAAM;MACjC,OAAO,OAAOS,KAAK,CAACK,OAAO,KAAK,QAAQ,IAAIL,KAAK,CAACK,OAAO,KAAK,EAAE,GAC5DL,KAAK,CAACK,OAAO,GACbL,KAAK,CAACqB,KAAK;IACjB,CAAC,CAAC;IAEF,MAAMC,GAAG,GAAG3B,MAAM,EAAE;IACpB,MAAM4B,EAAE,GAAGhC,QAAQ,CAAC,MAAMS,KAAK,CAACuB,EAAE,IAAK,UAASD,GAAI,EAAC,CAAC;IAEtD,SAASE,QAAQ,GAAI;MACnB,IAAIvB,aAAa,CAACwB,KAAK,EAAE;QACvBxB,aAAa,CAACwB,KAAK,GAAG,KAAK;MAC7B;IACF;IAEA7B,SAAS,CAAC,MAAM;MACd,MAAM,CAAC8B,UAAU,EAAEC,YAAY,CAAC,GAAGlC,gBAAgB,CAACoB,KAAK,CAAC;MAC1D,MAAM,CAACe,UAAU,EAAEC,EAAE,CAAC,GAAG9C,gBAAgB,CAACiB,KAAK,CAAC;MAChD,MAAM,CAAC8B,YAAY,EAAEC,EAAE,CAAC,GAAGnD,kBAAkB,CAACoB,KAAK,CAAC;MACpD,MAAMgC,OAAO,GAAGxC,GAAG,EAAqB;MAExC,SAASyC,OAAO,GAAI;QAClBD,OAAO,CAACP,KAAK,EAAES,KAAK,EAAEC,KAAK,EAAE;MAC/B;MAEA;QAAA,SAEW,CACL,UAAU,EACV;UAAE,iBAAiB,EAAEnC,KAAK,CAACG;QAAM,CAAC,EAClC;UAAE,yBAAyB,EAAEF,aAAa,CAACwB;QAAM,CAAC,EAClDT,aAAa,CAACS,KAAK;MACpB,GACIC,UAAU,EACVE,UAAU;QAAA,MACVL,EAAE,CAACE,KAAK;QAAA,WACHR,SAAS,CAACQ;MAAK;QAGvB,GAAGX,KAAK;QACRN,OAAO,EAAE;UAAA,IAAC;YACRe,EAAE;YACFa,UAAU;YACVC,UAAU;YACVC,UAAU;YACVC;UACF,CAAC;UAAA;YAAA,OAESP;UAAO,GACRF,YAAY;YAAA,cACPf,KAAK,CAACU,KAAK;YAAA,kCAAXV,KAAK,CAACU,KAAK,WAICD,QAAQ;YAAA,MAHzBD,EAAE,CAACE,KAAK;YAAA,oBACMW,UAAU,CAACX,KAAK;YAAA,QAC9B,UAAU;YAAA,gBAEAxB,aAAa,CAACwB,KAAK,GAAG,OAAO,GAAGe,SAAS;YAAA,YAC7CH,UAAU,CAACZ,KAAK;YAAA,YAChBa,UAAU,CAACb,KAAK;YAAA,WACjBP,KAAK;YAAA,UACNC;UAAI,GACRQ,YAAY;YAGf,GAAGb,KAAK;YACRN,OAAO,EAAE;cAAA,SAAkB,iBAAiB;cAAA,WAAWyB;YAAO,QAAU;YACxEC,KAAK,EAAE;cAAA,IAAC;gBAAEO,gBAAgB;gBAAEC;cAAgB,CAAC;cAAA;gBAAA,SAElC,CACL,iBAAiB,EACjBD,gBAAgB,CAAChB,KAAK,CACvB;gBAAA,SACOiB,eAAe,CAACjB;cAAK,IAE3BzB,KAAK,CAACK,OAAO;gBAAA,QAEN,UAAU;gBAAA;gBAAA,SAEPkC,OAAO,CAACd,KAAK,KAAK,KAAK,GAAGe,SAAS,GAAGpB,WAAW,CAACK;cAAK;gBAAA,SAE7DkB,SAAS,IACT7B,KAAK,CAAC8B,MAAM,GACR9B,KAAK,CAAC8B,MAAM,CAACD,SAAS,CAAC;kBAAA,UAGVA,SAAS,CAACE,QAAQ;kBAAA,SACnBF,SAAS,CAACtB,KAAK;kBAAA;kBAAA,QAElB,IAAI;kBAAA,SACH;gBAAG;cAGlB,EAEJ;YAAA;UAEJ;QAAA;MAGN;IAIT,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

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

@@ -1,163 +1,192 @@
 import * as vue from 'vue';
-import { PropType, JSXComponent } from 'vue';
+import { JSXComponent, PropType, WritableComputedRef, Ref, CSSProperties, ComputedRef } from 'vue';
+
+type Density = null | 'default' | 'comfortable' | 'compact';
+
+type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
 
 declare function deepEqual(a: any, b: any): boolean;
-declare type EventProp<T = (...args: any[]) => any> = T | T[];
+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>);
+type SelectionControlSlot = {
+    model: WritableComputedRef<any>;
+    textColorClasses: Ref<string[]>;
+    textColorStyles: Ref<CSSProperties>;
+    props: {
+        onBlur: (e: Event) => void;
+        onFocus: (e: FocusEvent) => void;
+        id: string;
+    };
+};
 
-declare type IconValue = string | JSXComponent;
-declare const IconValue: PropType<IconValue>;
+type ValidationResult = string | boolean;
+type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
 
-declare type Density = null | 'default' | 'comfortable' | 'compact';
+interface VInputSlot {
+    id: ComputedRef<string>;
+    messagesId: ComputedRef<string>;
+    isDirty: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    isReadonly: ComputedRef<boolean>;
+    isPristine: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+    isValidating: Ref<boolean>;
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => void;
+}
 
 declare const VSwitch: vue.DefineComponent<{
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    theme: StringConstructor;
-    color: StringConstructor;
-    disabled: BooleanConstructor;
-    error: BooleanConstructor;
-    id: StringConstructor;
-    inline: BooleanConstructor;
-    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;
-    modelValue: null;
-    type: StringConstructor;
-    valueComparator: {
-        type: vue.PropType<typeof deepEqual>;
-        default: typeof deepEqual;
-    };
-    label: StringConstructor;
-    trueValue: null;
-    falseValue: null;
-    value: null;
-    focused: BooleanConstructor;
-    errorMessages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    maxErrors: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    rules: {
-        type: vue.PropType<ValidationRule[]>;
-        default: () => never[];
-    };
-    validateOn: vue.PropType<"input" | "blur" | "submit" | undefined>;
-    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;
-    };
+    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: Density;
+    ripple: boolean;
+    focused: boolean;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    valueComparator: typeof deepEqual;
+} & {
+    type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
+    value?: any;
+    label?: string | undefined;
+    theme?: string | undefined;
+    modelValue?: any;
+    prependIcon?: IconValue | undefined;
+    appendIcon?: IconValue | undefined;
+    'onClick:append'?: EventProp<(...args: any[]) => any> | undefined;
+    'onClick:prepend'?: EventProp<(...args: any[]) => any> | undefined;
+    validateOn?: "input" | "blur" | "submit" | undefined;
+    validationValue?: any;
+    hideDetails?: boolean | "auto" | undefined;
+    falseIcon?: IconValue | undefined;
+    trueIcon?: IconValue | undefined;
+    trueValue?: any;
+    falseValue?: any;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: false | ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:label"?: false | ((args_0: {
+        label: string | undefined;
+        props: Record<string, unknown>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:focused': (focused: boolean) => true;
-    'update:modelValue': () => true;
-    'update:indeterminate': (val: boolean) => true;
-}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    theme: StringConstructor;
-    color: StringConstructor;
-    disabled: BooleanConstructor;
-    error: BooleanConstructor;
-    id: StringConstructor;
-    inline: BooleanConstructor;
-    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;
-    modelValue: null;
-    type: StringConstructor;
-    valueComparator: {
-        type: vue.PropType<typeof deepEqual>;
-        default: typeof deepEqual;
-    };
-    label: StringConstructor;
-    trueValue: null;
-    falseValue: null;
-    value: null;
-    focused: BooleanConstructor;
-    errorMessages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    maxErrors: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    rules: {
-        type: vue.PropType<ValidationRule[]>;
-        default: () => never[];
-    };
-    validateOn: vue.PropType<"input" | "blur" | "submit" | undefined>;
-    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;
-    };
-}>> & {
+    'update:focused': (focused: boolean) => boolean;
+    'update:modelValue': () => boolean;
+    'update:indeterminate': (val: boolean) => boolean;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+    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: Density;
+    ripple: boolean;
+    focused: boolean;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    valueComparator: typeof deepEqual;
+} & {
+    type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
+    value?: any;
+    label?: string | undefined;
+    theme?: string | undefined;
+    modelValue?: any;
+    prependIcon?: IconValue | undefined;
+    appendIcon?: IconValue | undefined;
+    'onClick:append'?: EventProp<(...args: any[]) => any> | undefined;
+    'onClick:prepend'?: EventProp<(...args: any[]) => any> | undefined;
+    validateOn?: "input" | "blur" | "submit" | undefined;
+    validationValue?: any;
+    hideDetails?: boolean | "auto" | undefined;
+    falseIcon?: IconValue | undefined;
+    trueIcon?: IconValue | undefined;
+    trueValue?: any;
+    falseValue?: any;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: false | ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:label"?: false | ((args_0: {
+        label: string | undefined;
+        props: Record<string, unknown>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+} & {
     "onUpdate:modelValue"?: (() => any) | undefined;
     "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
     "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;
@@ -181,6 +210,6 @@ declare const VSwitch: vue.DefineComponent<{
     rules: ValidationRule[];
     valueComparator: typeof deepEqual;
 }>;
-declare type VSwitch = InstanceType<typeof VSwitch>;
+type VSwitch = InstanceType<typeof VSwitch>;
 
 export { VSwitch };

package/lib/components/VSystemBar/VSystemBar.css

@@ -5,7 +5,8 @@
   height: 24px;
   justify-content: flex-end;
   max-width: 100%;
-  padding: 0 8px;
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
   position: relative;
   text-align: end;
   width: 100%;
@@ -32,4 +33,7 @@
 }
 .v-system-bar--window {
   height: 32px;
+}
+.v-system-bar:not(.v-system-bar--absolute) {
+  padding-inline-end: calc(var(--v-scrollbar-offset) + 8px);
 }

package/lib/components/VSystemBar/VSystemBar.mjs

@@ -8,10 +8,11 @@ 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 { useBackgroundColor } from "../../composables/color.mjs";
+import { useSsrBoot } from "../../composables/ssrBoot.mjs"; // Utilities
 import { computed, ref, toRef } from 'vue';
-import { defineComponent, useRender } from "../../util/index.mjs";
-export const VSystemBar = defineComponent({
+import { genericComponent, useRender } from "../../util/index.mjs";
+export const VSystemBar = genericComponent()({
   name: 'VSystemBar',
   props: {
     color: String,
@@ -40,6 +41,9 @@ export const VSystemBar = defineComponent({
     const {
       roundedClasses
     } = useRounded(props);
+    const {
+      ssrBootStyles
+    } = useSsrBoot();
     const height = computed(() => props.height ?? (props.window ? 32 : 24));
     const {
       layoutItemStyles
@@ -56,7 +60,7 @@ export const VSystemBar = defineComponent({
       "class": ['v-system-bar', {
         'v-system-bar--window': props.window
       }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, layoutItemStyles.value]
+      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value]
     }, slots));
     return {};
   }

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

@@ -1 +1 @@
-{"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\nexport type VSystemBar = InstanceType<typeof VSystemBar>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,mBAAmB,EAAEC,aAAa;AAAA,SAClCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,kBAAkB,uCAE3B;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACjCC,eAAe,EAAEC,SAAS;AAEnC,OAAO,MAAMC,UAAU,GAAGF,eAAe,CAAC;EACxCG,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,MAAM,EAAE,CAACC,MAAM,EAAEF,MAAM,CAAC;IACxBG,MAAM,EAAEC,OAAO;IAEf,GAAGvB,kBAAkB,EAAE;IACvB,GAAGE,mBAAmB,EAAE;IACxB,GAAGE,gBAAgB,EAAE;IACrB,GAAGE,YAAY,EAAE;IACjB,GAAGC,cAAc;EACnB,CAAC;EAEDiB,KAAK,CAAEP,KAAK,QAAa;IAAA,IAAX;MAAEQ;IAAM,CAAC;IACrB,MAAM;MAAEC;IAAa,CAAC,GAAGlB,YAAY,CAACS,KAAK,CAAC;IAC5C,MAAM;MAAEU,sBAAsB;MAAEC;IAAsB,CAAC,GAAGnB,kBAAkB,CAACG,KAAK,CAACK,KAAK,EAAE,OAAO,CAAC,CAAC;IACnG,MAAM;MAAEY;IAAiB,CAAC,GAAG5B,YAAY,CAACgB,KAAK,CAAC;IAChD,MAAM;MAAEa;IAAe,CAAC,GAAGzB,UAAU,CAACY,KAAK,CAAC;IAC5C,MAAMG,MAAM,GAAGV,QAAQ,CAAC,MAAMO,KAAK,CAACG,MAAM,KAAKH,KAAK,CAACK,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IACvE,MAAM;MAAES;IAAiB,CAAC,GAAG5B,aAAa,CAAC;MACzC6B,EAAE,EAAEf,KAAK,CAACD,IAAI;MACdiB,KAAK,EAAEvB,QAAQ,CAAC,MAAMwB,QAAQ,CAACjB,KAAK,CAACgB,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDE,QAAQ,EAAExB,GAAG,CAAC,KAAK,CAAC;MACpByB,UAAU,EAAEhB,MAAM;MAClBiB,WAAW,EAAEjB,MAAM;MACnBkB,MAAM,EAAE5B,QAAQ,CAAC,MAAM,IAAI,CAAC;MAC5B6B,QAAQ,EAAE3B,KAAK,CAACK,KAAK,EAAE,UAAU;IACnC,CAAC,CAAC;IAEFH,SAAS,CAAC;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAEG,KAAK,CAACK;MAAO,CAAC,EACxCI,YAAY,CAACc,KAAK,EAClBb,sBAAsB,CAACa,KAAK,EAC5BX,gBAAgB,CAACW,KAAK,EACtBV,cAAc,CAACU,KAAK,CACrB;MAAA,SACM,CACLZ,qBAAqB,CAACY,KAAK,EAC3BT,gBAAgB,CAACS,KAAK;IACvB,GACSf,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VSystemBar.mjs","names":["makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useSsrBoot","computed","ref","toRef","genericComponent","useRender","VSystemBar","name","props","color","String","height","Number","window","Boolean","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","ssrBootStyles","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'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\nexport const VSystemBar = genericComponent()({\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 { ssrBootStyles } = useSsrBoot()\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          ssrBootStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VSystemBar = InstanceType<typeof VSystemBar>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,mBAAmB,EAAEC,aAAa;AAAA,SAClCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,kBAAkB;AAAA,SAClBC,UAAU,yCAEnB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACjCC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,UAAU,GAAGF,gBAAgB,EAAE,CAAC;EAC3CG,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,MAAM,EAAE,CAACC,MAAM,EAAEF,MAAM,CAAC;IACxBG,MAAM,EAAEC,OAAO;IAEf,GAAGxB,kBAAkB,EAAE;IACvB,GAAGE,mBAAmB,EAAE;IACxB,GAAGE,gBAAgB,EAAE;IACrB,GAAGE,YAAY,EAAE;IACjB,GAAGC,cAAc;EACnB,CAAC;EAEDkB,KAAK,CAAEP,KAAK,QAAa;IAAA,IAAX;MAAEQ;IAAM,CAAC;IACrB,MAAM;MAAEC;IAAa,CAAC,GAAGnB,YAAY,CAACU,KAAK,CAAC;IAC5C,MAAM;MAAEU,sBAAsB;MAAEC;IAAsB,CAAC,GAAGpB,kBAAkB,CAACI,KAAK,CAACK,KAAK,EAAE,OAAO,CAAC,CAAC;IACnG,MAAM;MAAEY;IAAiB,CAAC,GAAG7B,YAAY,CAACiB,KAAK,CAAC;IAChD,MAAM;MAAEa;IAAe,CAAC,GAAG1B,UAAU,CAACa,KAAK,CAAC;IAC5C,MAAM;MAAEc;IAAc,CAAC,GAAGtB,UAAU,EAAE;IACtC,MAAMW,MAAM,GAAGV,QAAQ,CAAC,MAAMO,KAAK,CAACG,MAAM,KAAKH,KAAK,CAACK,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IACvE,MAAM;MAAEU;IAAiB,CAAC,GAAG9B,aAAa,CAAC;MACzC+B,EAAE,EAAEhB,KAAK,CAACD,IAAI;MACdkB,KAAK,EAAExB,QAAQ,CAAC,MAAMyB,QAAQ,CAAClB,KAAK,CAACiB,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDE,QAAQ,EAAEzB,GAAG,CAAC,KAAK,CAAC;MACpB0B,UAAU,EAAEjB,MAAM;MAClBkB,WAAW,EAAElB,MAAM;MACnBmB,MAAM,EAAE7B,QAAQ,CAAC,MAAM,IAAI,CAAC;MAC5B8B,QAAQ,EAAE5B,KAAK,CAACK,KAAK,EAAE,UAAU;IACnC,CAAC,CAAC;IAEFH,SAAS,CAAC;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAEG,KAAK,CAACK;MAAO,CAAC,EACxCI,YAAY,CAACe,KAAK,EAClBd,sBAAsB,CAACc,KAAK,EAC5BZ,gBAAgB,CAACY,KAAK,EACtBX,cAAc,CAACW,KAAK,CACrB;MAAA,SACM,CACLb,qBAAqB,CAACa,KAAK,EAC3BT,gBAAgB,CAACS,KAAK,EACtBV,aAAa,CAACU,KAAK;IACpB,GACShB,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VSystemBar/VSystemBar.sass

@@ -8,7 +8,8 @@
   height: $system-bar-height
   justify-content: $system-bar-justify-content
   max-width: 100%
-  padding: $system-bar-padding
+  padding-inline-start: $system-bar-padding-x
+  padding-inline-end: $system-bar-padding-x
   position: relative
   text-align: $system-bar-text-align
   width: 100%
@@ -26,3 +27,6 @@
 
   &--window
     height: $system-bar-window-height
+
+  &:not(.v-system-bar--absolute)
+    padding-inline-end: calc(var(--v-scrollbar-offset) + #{$system-bar-padding-x})

package/lib/components/VSystemBar/_variables.scss

@@ -16,7 +16,7 @@ $system-bar-justify-content: flex-end !default;
 $system-bar-letter-spacing: tools.map-deep-get(settings.$typography, 'caption', 'letter-spacing') !default;
 $system-bar-lights-out-background: rgba(var(--v-theme-background), 0.7) !default;
 $system-bar-line-height: tools.map-deep-get(settings.$typography, 'caption', 'line-height') !default;
-$system-bar-padding: 0 8px !default;
+$system-bar-padding-x: 8px !default;
 $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;
@@ -35,3 +35,6 @@ $system-bar-typography: (
   $system-bar-line-height,
   $system-bar-text-transform
 );
+
+// Deprecated
+$system-bar-padding: 0 8px !default;