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

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

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

package/lib/components/VSelectionControl/VSelectionControl.mjs

@@ -1,53 +1,24 @@
 import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Styles
-import "./VSelectionControl.css"; // Components
+import "./VSelectionControl.css";
 
+// Components
 import { VIcon } from "../VIcon/index.mjs";
 import { VLabel } from "../VLabel/index.mjs";
-import { VSelectionControlGroupSymbol } from "../VSelectionControlGroup/VSelectionControlGroup.mjs"; // Directives
-
+import { makeSelectionControlGroupProps, VSelectionControlGroupSymbol } from "../VSelectionControlGroup/VSelectionControlGroup.mjs"; // Directives
 import { Ripple } from "../../directives/ripple/index.mjs"; // Composables
-
-import { IconValue } from "../../composables/icons.mjs";
-import { makeDensityProps, useDensity } from "../../composables/density.mjs";
-import { makeThemeProps } from "../../composables/theme.mjs";
+import { useDensity } from "../../composables/density.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utilities
-
 import { computed, inject, ref } from 'vue';
-import { deepEqual, filterInputAttrs, genericComponent, getUid, pick, propsFactory, SUPPORTS_FOCUS_VISIBLE, useRender, wrapInArray } from "../../util/index.mjs"; // Types
-
+import { filterInputAttrs, genericComponent, getUid, pick, propsFactory, SUPPORTS_FOCUS_VISIBLE, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 export const makeSelectionControlProps = propsFactory({
-  color: String,
-  disabled: Boolean,
-  error: Boolean,
-  id: String,
-  inline: Boolean,
   label: String,
-  falseIcon: IconValue,
-  trueIcon: IconValue,
-  ripple: {
-    type: Boolean,
-    default: true
-  },
-  multiple: {
-    type: Boolean,
-    default: null
-  },
-  name: String,
-  readonly: Boolean,
   trueValue: null,
   falseValue: null,
-  modelValue: null,
-  type: String,
   value: null,
-  valueComparator: {
-    type: Function,
-    default: deepEqual
-  },
-  ...makeThemeProps(),
-  ...makeDensityProps()
-});
+  ...makeSelectionControlGroupProps()
+}, 'VSelectionControl');
 export function useSelectionControl(props) {
   const group = inject(VSelectionControlGroupSymbol, undefined);
   const {
@@ -56,29 +27,25 @@ export function useSelectionControl(props) {
   const modelValue = useProxiedModel(props, 'modelValue');
   const trueValue = computed(() => props.trueValue !== undefined ? props.trueValue : props.value !== undefined ? props.value : true);
   const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false);
-  const isMultiple = computed(() => (group == null ? void 0 : group.multiple.value) || !!props.multiple || props.multiple == null && Array.isArray(modelValue.value));
+  const isMultiple = computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value));
   const model = computed({
     get() {
       const val = group ? group.modelValue.value : modelValue.value;
       return isMultiple.value ? val.some(v => props.valueComparator(v, trueValue.value)) : props.valueComparator(val, trueValue.value);
     },
-
     set(val) {
       if (props.readonly) return;
       const currentValue = val ? trueValue.value : falseValue.value;
       let newVal = currentValue;
-
       if (isMultiple.value) {
         newVal = val ? [...wrapInArray(modelValue.value), currentValue] : wrapInArray(modelValue.value).filter(item => !props.valueComparator(item, trueValue.value));
       }
-
       if (group) {
         group.modelValue.value = newVal;
       } else {
         modelValue.value = newVal;
       }
     }
-
   });
   const {
     textColorClasses,
@@ -86,9 +53,7 @@ export function useSelectionControl(props) {
   } = useTextColor(computed(() => {
     return model.value && !props.error && !props.disabled ? props.color : undefined;
   }));
-  const icon = computed(() => {
-    return model.value ? (group == null ? void 0 : group.trueIcon.value) ?? props.trueIcon : (group == null ? void 0 : group.falseIcon.value) ?? props.falseIcon;
-  });
+  const icon = computed(() => model.value ? props.trueIcon : props.falseIcon);
   return {
     group,
     densityClasses,
@@ -110,7 +75,6 @@ export const VSelectionControl = genericComponent()({
   emits: {
     'update:modelValue': val => true
   },
-
   setup(props, _ref) {
     let {
       attrs,
@@ -118,7 +82,6 @@ export const VSelectionControl = genericComponent()({
     } = _ref;
     const {
       densityClasses,
-      group,
       icon,
       model,
       textColorClasses,
@@ -130,34 +93,27 @@ export const VSelectionControl = genericComponent()({
     const isFocused = ref(false);
     const isFocusVisible = ref(false);
     const input = ref();
-
     function onFocus(e) {
       isFocused.value = true;
-
       if (!SUPPORTS_FOCUS_VISIBLE || SUPPORTS_FOCUS_VISIBLE && e.target.matches(':focus-visible')) {
         isFocusVisible.value = true;
       }
     }
-
     function onBlur() {
       isFocused.value = false;
       isFocusVisible.value = false;
     }
-
     function onInput(e) {
       model.value = e.target.checked;
     }
-
     useRender(() => {
       var _slots$default, _slots$input;
-
       const label = slots.label ? slots.label({
         label: props.label,
         props: {
           for: id.value
         }
       }) : props.label;
-      const type = (group == null ? void 0 : group.type.value) ?? props.type;
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
       return _createVNode("div", _mergeProps({
         "class": ['v-selection-control', {
@@ -166,7 +122,7 @@ export const VSelectionControl = genericComponent()({
           'v-selection-control--error': props.error,
           'v-selection-control--focused': isFocused.value,
           'v-selection-control--focus-visible': isFocusVisible.value,
-          'v-selection-control--inline': (group == null ? void 0 : group.inline.value) || props.inline
+          'v-selection-control--inline': props.inline
         }, densityClasses.value]
       }, rootAttrs), [_createVNode("div", {
         "class": ['v-selection-control__wrapper', textColorClasses.value],
@@ -185,13 +141,14 @@ export const VSelectionControl = genericComponent()({
         "onFocus": onFocus,
         "onInput": onInput,
         "aria-readonly": props.readonly,
-        "type": type,
+        "type": props.type,
         "value": trueValue.value,
-        "name": (group == null ? void 0 : group.name.value) ?? props.name,
-        "aria-checked": type === 'checkbox' ? model.value : undefined
+        "name": props.name,
+        "aria-checked": props.type === 'checkbox' ? model.value : undefined
       }, inputAttrs), null), (_slots$input = slots.input) == null ? void 0 : _slots$input.call(slots, {
         model,
         textColorClasses,
+        textColorStyles,
         props: {
           onFocus,
           onBlur,
@@ -209,7 +166,6 @@ export const VSelectionControl = genericComponent()({
       input
     };
   }
-
 });
 export function filterControlProps(props) {
   return pick(props, Object.keys(VSelectionControl.props));

package/lib/components/VSelectionControl/VSelectionControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSelectionControl.mjs","names":["VIcon","VLabel","VSelectionControlGroupSymbol","Ripple","IconValue","makeDensityProps","useDensity","makeThemeProps","useProxiedModel","useTextColor","computed","inject","ref","deepEqual","filterInputAttrs","genericComponent","getUid","pick","propsFactory","SUPPORTS_FOCUS_VISIBLE","useRender","wrapInArray","makeSelectionControlProps","color","String","disabled","Boolean","error","id","inline","label","falseIcon","trueIcon","ripple","type","default","multiple","name","readonly","trueValue","falseValue","modelValue","value","valueComparator","Function","useSelectionControl","props","group","undefined","densityClasses","isMultiple","Array","isArray","model","get","val","some","v","set","currentValue","newVal","filter","item","textColorClasses","textColorStyles","icon","VSelectionControl","directives","inheritAttrs","emits","setup","attrs","slots","uid","isFocused","isFocusVisible","input","onFocus","e","target","matches","onBlur","onInput","checked","for","rootAttrs","inputAttrs","filterControlProps","Object","keys"],"sources":["../../../src/components/VSelectionControl/VSelectionControl.tsx"],"sourcesContent":["// Styles\nimport './VSelectionControl.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VLabel } from '@/components/VLabel'\nimport { VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject, ref } from 'vue'\nimport {\n  deepEqual,\n  filterInputAttrs,\n  genericComponent,\n  getUid,\n  pick,\n  propsFactory,\n  SUPPORTS_FOCUS_VISIBLE,\n  useRender,\n  wrapInArray,\n} from '@/util'\n\n// Types\nimport type { ComputedRef, ExtractPropTypes, PropType, Ref, WritableComputedRef } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<any>\n  isReadonly: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  textColorClasses: Ref<string[]>\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport const makeSelectionControlProps = propsFactory({\n  color: String,\n  disabled: Boolean,\n  error: Boolean,\n  id: String,\n  inline: Boolean,\n  label: String,\n  falseIcon: IconValue,\n  trueIcon: IconValue,\n  ripple: {\n    type: Boolean,\n    default: true,\n  },\n  multiple: {\n    type: Boolean as PropType<boolean | null>,\n    default: null,\n  },\n  name: String,\n  readonly: Boolean,\n  trueValue: null,\n  falseValue: null,\n  modelValue: null,\n  type: String,\n  value: null,\n  valueComparator: {\n    type: Function as PropType<typeof deepEqual>,\n    default: deepEqual,\n  },\n\n  ...makeThemeProps(),\n  ...makeDensityProps(),\n})\n\nexport function useSelectionControl (\n  props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>> & {\n    'onUpdate:modelValue': ((val: any) => void) | undefined\n  }\n) {\n  const group = inject(VSelectionControlGroupSymbol, undefined)\n  const { densityClasses } = useDensity(props)\n  const modelValue = useProxiedModel(props, 'modelValue')\n  const trueValue = computed(() => (\n    props.trueValue !== undefined ? props.trueValue\n    : props.value !== undefined ? props.value\n    : true\n  ))\n  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false)\n  const isMultiple = computed(() => (\n    group?.multiple.value ||\n    !!props.multiple ||\n    (props.multiple == null && Array.isArray(modelValue.value))\n  ))\n  const model = computed({\n    get () {\n      const val = group ? group.modelValue.value : modelValue.value\n\n      return isMultiple.value\n        ? val.some((v: any) => props.valueComparator(v, trueValue.value))\n        : props.valueComparator(val, trueValue.value)\n    },\n    set (val: boolean) {\n      if (props.readonly) return\n\n      const currentValue = val ? trueValue.value : falseValue.value\n\n      let newVal = currentValue\n\n      if (isMultiple.value) {\n        newVal = val\n          ? [...wrapInArray(modelValue.value), currentValue]\n          : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value))\n      }\n\n      if (group) {\n        group.modelValue.value = newVal\n      } else {\n        modelValue.value = newVal\n      }\n    },\n  })\n  const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n    return (\n      model.value &&\n      !props.error &&\n      !props.disabled\n    ) ? props.color : undefined\n  }))\n  const icon = computed(() => {\n    return model.value\n      ? group?.trueIcon.value ?? props.trueIcon\n      : group?.falseIcon.value ?? props.falseIcon\n  })\n\n  return {\n    group,\n    densityClasses,\n    trueValue,\n    falseValue,\n    model,\n    textColorClasses,\n    textColorStyles,\n    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>() => {\n  $props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (val: T) => any\n  }\n  $slots: MakeSlots<{\n    default: []\n    input: [SelectionControlSlot]\n  }>\n}>()({\n  name: 'VSelectionControl',\n\n  directives: { Ripple },\n\n  inheritAttrs: false,\n\n  props: makeSelectionControlProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      densityClasses,\n      group,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isFocused = ref(false)\n    const isFocusVisible = ref(false)\n    const input = ref<HTMLInputElement>()\n\n    function onFocus (e: FocusEvent) {\n      isFocused.value = true\n      if (\n        !SUPPORTS_FOCUS_VISIBLE ||\n        (SUPPORTS_FOCUS_VISIBLE && (e.target as HTMLElement).matches(':focus-visible'))\n      ) {\n        isFocusVisible.value = true\n      }\n    }\n\n    function onBlur () {\n      isFocused.value = false\n      isFocusVisible.value = false\n    }\n\n    function onInput (e: Event) {\n      model.value = (e.target as HTMLInputElement).checked\n    }\n\n    useRender(() => {\n      const label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n      const type = group?.type.value ?? props.type\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n      return (\n        <div\n          class={[\n            'v-selection-control',\n            {\n              'v-selection-control--dirty': model.value,\n              'v-selection-control--disabled': props.disabled,\n              'v-selection-control--error': props.error,\n              'v-selection-control--focused': isFocused.value,\n              'v-selection-control--focus-visible': isFocusVisible.value,\n              'v-selection-control--inline': group?.inline.value || props.inline,\n            },\n            densityClasses.value,\n          ]}\n          { ...rootAttrs }\n        >\n          <div\n            class={[\n              'v-selection-control__wrapper',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n          >\n            { slots.default?.() }\n\n            <div\n              class={[\n                'v-selection-control__input',\n              ]}\n              v-ripple={ props.ripple && [\n                !props.disabled && !props.readonly,\n                null,\n                ['center', 'circle'],\n              ]}\n            >\n              { icon.value && <VIcon key=\"icon\" icon={ icon.value } /> }\n\n              <input\n                ref={ input }\n                checked={ model.value }\n                disabled={ props.disabled }\n                id={ id.value }\n                onBlur={ onBlur }\n                onFocus={ onFocus }\n                onInput={ onInput }\n                aria-readonly={ props.readonly }\n                type={ type }\n                value={ trueValue.value }\n                name={ group?.name.value ?? props.name }\n                aria-checked={ type === 'checkbox' ? model.value : undefined }\n                { ...inputAttrs }\n              />\n\n              { slots.input?.({\n                model,\n                textColorClasses,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              }) }\n            </div>\n          </div>\n\n          { label && (\n            <VLabel for={ id.value } clickable>\n              { label }\n            </VLabel>\n          ) }\n        </div>\n      )\n    })\n\n    return {\n      isFocused,\n      input,\n    }\n  },\n})\n\nexport type VSelectionControl = InstanceType<typeof VSelectionControl>\n\nexport function filterControlProps (props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>>) {\n  return pick(props, Object.keys(VSelectionControl.props) as any)\n}\n"],"mappings":"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"}
+{"version":3,"file":"VSelectionControl.mjs","names":["VIcon","VLabel","makeSelectionControlGroupProps","VSelectionControlGroupSymbol","Ripple","useDensity","useProxiedModel","useTextColor","computed","inject","ref","filterInputAttrs","genericComponent","getUid","pick","propsFactory","SUPPORTS_FOCUS_VISIBLE","useRender","wrapInArray","makeSelectionControlProps","label","String","trueValue","falseValue","value","useSelectionControl","props","group","undefined","densityClasses","modelValue","isMultiple","multiple","Array","isArray","model","get","val","some","v","valueComparator","set","readonly","currentValue","newVal","filter","item","textColorClasses","textColorStyles","error","disabled","color","icon","trueIcon","falseIcon","VSelectionControl","name","directives","inheritAttrs","emits","setup","attrs","slots","uid","id","isFocused","isFocusVisible","input","onFocus","e","target","matches","onBlur","onInput","checked","for","rootAttrs","inputAttrs","inline","default","type","ripple","filterControlProps","Object","keys"],"sources":["../../../src/components/VSelectionControl/VSelectionControl.tsx"],"sourcesContent":["// Styles\nimport './VSelectionControl.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VLabel } from '@/components/VLabel'\nimport { makeSelectionControlGroupProps, VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { useDensity } from '@/composables/density'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject, ref } from 'vue'\nimport {\n  filterInputAttrs,\n  genericComponent,\n  getUid,\n  pick,\n  propsFactory,\n  SUPPORTS_FOCUS_VISIBLE,\n  useRender,\n  wrapInArray,\n} from '@/util'\n\n// Types\nimport type { CSSProperties, ExtractPropTypes, Ref, WritableComputedRef } from 'vue'\nimport type { SlotsToProps } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<any>\n  textColorClasses: Ref<string[]>\n  textColorStyles: Ref<CSSProperties>\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport const makeSelectionControlProps = propsFactory({\n  label: String,\n  trueValue: null,\n  falseValue: null,\n  value: null,\n\n  ...makeSelectionControlGroupProps(),\n}, 'VSelectionControl')\n\nexport function useSelectionControl (\n  props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>> & {\n    'onUpdate:modelValue': ((val: any) => void) | undefined\n  }\n) {\n  const group = inject(VSelectionControlGroupSymbol, undefined)\n  const { densityClasses } = useDensity(props)\n  const modelValue = useProxiedModel(props, 'modelValue')\n  const trueValue = computed(() => (\n    props.trueValue !== undefined ? props.trueValue\n    : props.value !== undefined ? props.value\n    : true\n  ))\n  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false)\n  const isMultiple = computed(() => (\n    !!props.multiple ||\n    (props.multiple == null && Array.isArray(modelValue.value))\n  ))\n  const model = computed({\n    get () {\n      const val = group ? group.modelValue.value : modelValue.value\n\n      return isMultiple.value\n        ? val.some((v: any) => props.valueComparator(v, trueValue.value))\n        : props.valueComparator(val, trueValue.value)\n    },\n    set (val: boolean) {\n      if (props.readonly) return\n\n      const currentValue = val ? trueValue.value : falseValue.value\n\n      let newVal = currentValue\n\n      if (isMultiple.value) {\n        newVal = val\n          ? [...wrapInArray(modelValue.value), currentValue]\n          : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value))\n      }\n\n      if (group) {\n        group.modelValue.value = newVal\n      } else {\n        modelValue.value = newVal\n      }\n    },\n  })\n  const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n    return (\n      model.value &&\n      !props.error &&\n      !props.disabled\n    ) ? props.color : undefined\n  }))\n  const icon = computed(() => model.value ? props.trueIcon : props.falseIcon)\n\n  return {\n    group,\n    densityClasses,\n    trueValue,\n    falseValue,\n    model,\n    textColorClasses,\n    textColorStyles,\n    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>() => {\n  $props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (val: T) => any\n  } & SlotsToProps<{\n    default: []\n    input: [SelectionControlSlot]\n  }>\n}>()({\n  name: 'VSelectionControl',\n\n  directives: { Ripple },\n\n  inheritAttrs: false,\n\n  props: makeSelectionControlProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      densityClasses,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isFocused = ref(false)\n    const isFocusVisible = ref(false)\n    const input = ref<HTMLInputElement>()\n\n    function onFocus (e: FocusEvent) {\n      isFocused.value = true\n      if (\n        !SUPPORTS_FOCUS_VISIBLE ||\n        (SUPPORTS_FOCUS_VISIBLE && (e.target as HTMLElement).matches(':focus-visible'))\n      ) {\n        isFocusVisible.value = true\n      }\n    }\n\n    function onBlur () {\n      isFocused.value = false\n      isFocusVisible.value = false\n    }\n\n    function onInput (e: Event) {\n      model.value = (e.target as HTMLInputElement).checked\n    }\n\n    useRender(() => {\n      const label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n      return (\n        <div\n          class={[\n            'v-selection-control',\n            {\n              'v-selection-control--dirty': model.value,\n              'v-selection-control--disabled': props.disabled,\n              'v-selection-control--error': props.error,\n              'v-selection-control--focused': isFocused.value,\n              'v-selection-control--focus-visible': isFocusVisible.value,\n              'v-selection-control--inline': props.inline,\n            },\n            densityClasses.value,\n          ]}\n          { ...rootAttrs }\n        >\n          <div\n            class={[\n              'v-selection-control__wrapper',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n          >\n            { slots.default?.() }\n\n            <div\n              class={[\n                'v-selection-control__input',\n              ]}\n              v-ripple={ props.ripple && [\n                !props.disabled && !props.readonly,\n                null,\n                ['center', 'circle'],\n              ]}\n            >\n              { icon.value && <VIcon key=\"icon\" icon={ icon.value } /> }\n\n              <input\n                ref={ input }\n                checked={ model.value }\n                disabled={ props.disabled }\n                id={ id.value }\n                onBlur={ onBlur }\n                onFocus={ onFocus }\n                onInput={ onInput }\n                aria-readonly={ props.readonly }\n                type={ props.type }\n                value={ trueValue.value }\n                name={ props.name }\n                aria-checked={ props.type === 'checkbox' ? model.value : undefined }\n                { ...inputAttrs }\n              />\n\n              { slots.input?.({\n                model,\n                textColorClasses,\n                textColorStyles,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              } as SelectionControlSlot) }\n            </div>\n          </div>\n\n          { label && (\n            <VLabel for={ id.value } clickable>\n              { label }\n            </VLabel>\n          ) }\n        </div>\n      )\n    })\n\n    return {\n      isFocused,\n      input,\n    }\n  },\n})\n\nexport type VSelectionControl = InstanceType<typeof VSelectionControl>\n\nexport function filterControlProps (props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>>) {\n  return pick(props, Object.keys(VSelectionControl.props) as any)\n}\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,KAAK;AAAA,SACLC,MAAM;AAAA,SACNC,8BAA8B,EAAEC,4BAA4B,gEAErE;AAAA,SACSC,MAAM,6CAEf;AAAA,SACSC,UAAU;AAAA,SACVC,eAAe;AAAA,SACfC,YAAY,uCAErB;AACA,SAASC,QAAQ,EAAEC,MAAM,EAAEC,GAAG,QAAQ,KAAK;AAAA,SAEzCC,gBAAgB,EAChBC,gBAAgB,EAChBC,MAAM,EACNC,IAAI,EACJC,YAAY,EACZC,sBAAsB,EACtBC,SAAS,EACTC,WAAW,gCAGb;AAeA,OAAO,MAAMC,yBAAyB,GAAGJ,YAAY,CAAC;EACpDK,KAAK,EAAEC,MAAM;EACbC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAE,IAAI;EAEX,GAAGtB,8BAA8B;AACnC,CAAC,EAAE,mBAAmB,CAAC;AAEvB,OAAO,SAASuB,mBAAmB,CACjCC,KAEC,EACD;EACA,MAAMC,KAAK,GAAGlB,MAAM,CAACN,4BAA4B,EAAEyB,SAAS,CAAC;EAC7D,MAAM;IAAEC;EAAe,CAAC,GAAGxB,UAAU,CAACqB,KAAK,CAAC;EAC5C,MAAMI,UAAU,GAAGxB,eAAe,CAACoB,KAAK,EAAE,YAAY,CAAC;EACvD,MAAMJ,SAAS,GAAGd,QAAQ,CAAC,MACzBkB,KAAK,CAACJ,SAAS,KAAKM,SAAS,GAAGF,KAAK,CAACJ,SAAS,GAC7CI,KAAK,CAACF,KAAK,KAAKI,SAAS,GAAGF,KAAK,CAACF,KAAK,GACvC,IACH,CAAC;EACF,MAAMD,UAAU,GAAGf,QAAQ,CAAC,MAAMkB,KAAK,CAACH,UAAU,KAAKK,SAAS,GAAGF,KAAK,CAACH,UAAU,GAAG,KAAK,CAAC;EAC5F,MAAMQ,UAAU,GAAGvB,QAAQ,CAAC,MAC1B,CAAC,CAACkB,KAAK,CAACM,QAAQ,IACfN,KAAK,CAACM,QAAQ,IAAI,IAAI,IAAIC,KAAK,CAACC,OAAO,CAACJ,UAAU,CAACN,KAAK,CAC1D,CAAC;EACF,MAAMW,KAAK,GAAG3B,QAAQ,CAAC;IACrB4B,GAAG,GAAI;MACL,MAAMC,GAAG,GAAGV,KAAK,GAAGA,KAAK,CAACG,UAAU,CAACN,KAAK,GAAGM,UAAU,CAACN,KAAK;MAE7D,OAAOO,UAAU,CAACP,KAAK,GACnBa,GAAG,CAACC,IAAI,CAAEC,CAAM,IAAKb,KAAK,CAACc,eAAe,CAACD,CAAC,EAAEjB,SAAS,CAACE,KAAK,CAAC,CAAC,GAC/DE,KAAK,CAACc,eAAe,CAACH,GAAG,EAAEf,SAAS,CAACE,KAAK,CAAC;IACjD,CAAC;IACDiB,GAAG,CAAEJ,GAAY,EAAE;MACjB,IAAIX,KAAK,CAACgB,QAAQ,EAAE;MAEpB,MAAMC,YAAY,GAAGN,GAAG,GAAGf,SAAS,CAACE,KAAK,GAAGD,UAAU,CAACC,KAAK;MAE7D,IAAIoB,MAAM,GAAGD,YAAY;MAEzB,IAAIZ,UAAU,CAACP,KAAK,EAAE;QACpBoB,MAAM,GAAGP,GAAG,GACR,CAAC,GAAGnB,WAAW,CAACY,UAAU,CAACN,KAAK,CAAC,EAAEmB,YAAY,CAAC,GAChDzB,WAAW,CAACY,UAAU,CAACN,KAAK,CAAC,CAACqB,MAAM,CAAEC,IAAS,IAAK,CAACpB,KAAK,CAACc,eAAe,CAACM,IAAI,EAAExB,SAAS,CAACE,KAAK,CAAC,CAAC;MACxG;MAEA,IAAIG,KAAK,EAAE;QACTA,KAAK,CAACG,UAAU,CAACN,KAAK,GAAGoB,MAAM;MACjC,CAAC,MAAM;QACLd,UAAU,CAACN,KAAK,GAAGoB,MAAM;MAC3B;IACF;EACF,CAAC,CAAC;EACF,MAAM;IAAEG,gBAAgB;IAAEC;EAAgB,CAAC,GAAGzC,YAAY,CAACC,QAAQ,CAAC,MAAM;IACxE,OACE2B,KAAK,CAACX,KAAK,IACX,CAACE,KAAK,CAACuB,KAAK,IACZ,CAACvB,KAAK,CAACwB,QAAQ,GACbxB,KAAK,CAACyB,KAAK,GAAGvB,SAAS;EAC7B,CAAC,CAAC,CAAC;EACH,MAAMwB,IAAI,GAAG5C,QAAQ,CAAC,MAAM2B,KAAK,CAACX,KAAK,GAAGE,KAAK,CAAC2B,QAAQ,GAAG3B,KAAK,CAAC4B,SAAS,CAAC;EAE3E,OAAO;IACL3B,KAAK;IACLE,cAAc;IACdP,SAAS;IACTC,UAAU;IACVY,KAAK;IACLY,gBAAgB;IAChBC,eAAe;IACfI;EACF,CAAC;AACH;AAEA,OAAO,MAAMG,iBAAiB,GAAG3C,gBAAgB,EAQ7C,CAAC;EACH4C,IAAI,EAAE,mBAAmB;EAEzBC,UAAU,EAAE;IAAErD;EAAO,CAAC;EAEtBsD,YAAY,EAAE,KAAK;EAEnBhC,KAAK,EAAEP,yBAAyB,EAAE;EAElCwC,KAAK,EAAE;IACL,mBAAmB,EAAGtB,GAAQ,IAAK;EACrC,CAAC;EAEDuB,KAAK,CAAElC,KAAK,QAAoB;IAAA,IAAlB;MAAEmC,KAAK;MAAEC;IAAM,CAAC;IAC5B,MAAM;MACJjC,cAAc;MACduB,IAAI;MACJjB,KAAK;MACLY,gBAAgB;MAChBC,eAAe;MACf1B;IACF,CAAC,GAAGG,mBAAmB,CAACC,KAAK,CAAC;IAC9B,MAAMqC,GAAG,GAAGlD,MAAM,EAAE;IACpB,MAAMmD,EAAE,GAAGxD,QAAQ,CAAC,MAAMkB,KAAK,CAACsC,EAAE,IAAK,SAAQD,GAAI,EAAC,CAAC;IACrD,MAAME,SAAS,GAAGvD,GAAG,CAAC,KAAK,CAAC;IAC5B,MAAMwD,cAAc,GAAGxD,GAAG,CAAC,KAAK,CAAC;IACjC,MAAMyD,KAAK,GAAGzD,GAAG,EAAoB;IAErC,SAAS0D,OAAO,CAAEC,CAAa,EAAE;MAC/BJ,SAAS,CAACzC,KAAK,GAAG,IAAI;MACtB,IACE,CAACR,sBAAsB,IACtBA,sBAAsB,IAAKqD,CAAC,CAACC,MAAM,CAAiBC,OAAO,CAAC,gBAAgB,CAAE,EAC/E;QACAL,cAAc,CAAC1C,KAAK,GAAG,IAAI;MAC7B;IACF;IAEA,SAASgD,MAAM,GAAI;MACjBP,SAAS,CAACzC,KAAK,GAAG,KAAK;MACvB0C,cAAc,CAAC1C,KAAK,GAAG,KAAK;IAC9B;IAEA,SAASiD,OAAO,CAAEJ,CAAQ,EAAE;MAC1BlC,KAAK,CAACX,KAAK,GAAI6C,CAAC,CAACC,MAAM,CAAsBI,OAAO;IACtD;IAEAzD,SAAS,CAAC,MAAM;MAAA;MACd,MAAMG,KAAK,GAAG0C,KAAK,CAAC1C,KAAK,GACrB0C,KAAK,CAAC1C,KAAK,CAAC;QACZA,KAAK,EAAEM,KAAK,CAACN,KAAK;QAClBM,KAAK,EAAE;UAAEiD,GAAG,EAAEX,EAAE,CAACxC;QAAM;MACzB,CAAC,CAAC,GACAE,KAAK,CAACN,KAAK;MACf,MAAM,CAACwD,SAAS,EAAEC,UAAU,CAAC,GAAGlE,gBAAgB,CAACkD,KAAK,CAAC;MAEvD;QAAA,SAEW,CACL,qBAAqB,EACrB;UACE,4BAA4B,EAAE1B,KAAK,CAACX,KAAK;UACzC,+BAA+B,EAAEE,KAAK,CAACwB,QAAQ;UAC/C,4BAA4B,EAAExB,KAAK,CAACuB,KAAK;UACzC,8BAA8B,EAAEgB,SAAS,CAACzC,KAAK;UAC/C,oCAAoC,EAAE0C,cAAc,CAAC1C,KAAK;UAC1D,6BAA6B,EAAEE,KAAK,CAACoD;QACvC,CAAC,EACDjD,cAAc,CAACL,KAAK;MACrB,GACIoD,SAAS;QAAA,SAGL,CACL,8BAA8B,EAC9B7B,gBAAgB,CAACvB,KAAK,CACvB;QAAA,SACOwB,eAAe,CAACxB;MAAK,sBAE3BsC,KAAK,CAACiB,OAAO,qBAAb,oBAAAjB,KAAK,CAAY;QAAA,SAGV,CACL,4BAA4B;MAC7B,IAOCV,IAAI,CAAC5B,KAAK;QAAA,OAAe,MAAM;QAAA,QAAQ4B,IAAI,CAAC5B;MAAK,QAAK;QAAA,OAGhD2C,KAAK;QAAA,WACDhC,KAAK,CAACX,KAAK;QAAA,YACVE,KAAK,CAACwB,QAAQ;QAAA,MACpBc,EAAE,CAACxC,KAAK;QAAA,UACJgD,MAAM;QAAA,WACLJ,OAAO;QAAA,WACPK,OAAO;QAAA,iBACD/C,KAAK,CAACgB,QAAQ;QAAA,QACvBhB,KAAK,CAACsD,IAAI;QAAA,SACT1D,SAAS,CAACE,KAAK;QAAA,QAChBE,KAAK,CAAC8B,IAAI;QAAA,gBACF9B,KAAK,CAACsD,IAAI,KAAK,UAAU,GAAG7C,KAAK,CAACX,KAAK,GAAGI;MAAS,GAC7DiD,UAAU,0BAGff,KAAK,CAACK,KAAK,qBAAX,kBAAAL,KAAK,EAAS;QACd3B,KAAK;QACLY,gBAAgB;QAChBC,eAAe;QACftB,KAAK,EAAE;UACL0C,OAAO;UACPI,MAAM;UACNR,EAAE,EAAEA,EAAE,CAACxC;QACT;MACF,CAAC,CAAyB,mCAjCfE,KAAK,CAACuD,MAAM,IAAI,CACzB,CAACvD,KAAK,CAACwB,QAAQ,IAAI,CAACxB,KAAK,CAACgB,QAAQ,EAClC,IAAI,EACJ,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,OAiCHtB,KAAK;QAAA,OACS4C,EAAE,CAACxC,KAAK;QAAA;MAAA;QAAA,gBAClBJ,KAAK;MAAA,EAEV;IAGP,CAAC,CAAC;IAEF,OAAO;MACL6C,SAAS;MACTE;IACF,CAAC;EACH;AACF,CAAC,CAAC;AAIF,OAAO,SAASe,kBAAkB,CAAExD,KAAqE,EAAE;EACzG,OAAOZ,IAAI,CAACY,KAAK,EAAEyD,MAAM,CAACC,IAAI,CAAC7B,iBAAiB,CAAC7B,KAAK,CAAC,CAAQ;AACjE"}

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

@@ -1,29 +1,17 @@
 import * as vue from 'vue';
-import { VNodeChild, JSXComponent, PropType, ExtractPropTypes, Ref, WritableComputedRef, ComputedRef } from 'vue';
+import { JSXComponent, PropType, ExtractPropTypes, Ref, WritableComputedRef, CSSProperties } from 'vue';
 
-declare type SlotsToProps<T extends Record<string, Slot>> = {
-    $children: () => (T['default'] | VNodeChild | {
-        [K in keyof T]?: T[K];
-    });
-    'v-slots': new () => {
-        [K in keyof T]?: T[K] | false;
-    };
-};
-declare type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
-declare type MakeSlots<T extends Record<string, any[]>> = {
-    [K in keyof T]?: Slot<T[K]>;
-};
-
-declare function deepEqual(a: any, b: any): boolean;
+declare type Density = null | 'default' | 'comfortable' | 'compact';
 
 declare type IconValue = string | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
+declare function deepEqual(a: any, b: any): boolean;
+
 declare type SelectionControlSlot = {
     model: WritableComputedRef<any>;
-    isReadonly: ComputedRef<boolean>;
-    isDisabled: ComputedRef<boolean>;
     textColorClasses: Ref<string[]>;
+    textColorStyles: Ref<CSSProperties>;
     props: {
         onBlur: (e: Event) => void;
         onFocus: (e: FocusEvent) => void;
@@ -40,12 +28,12 @@ declare const VSelectionControl: {
             disabled: boolean;
             multiple: boolean | null;
             readonly: boolean;
-            density: "default" | "compact" | "comfortable" | null;
+            density: Density;
             ripple: boolean;
             valueComparator: typeof deepEqual;
         }> & Omit<Readonly<ExtractPropTypes<Omit<{
             density: {
-                type: PropType<"default" | "compact" | "comfortable" | null>;
+                type: vue.PropType<Density>;
                 default: string;
                 validator: (v: any) => boolean;
             };
@@ -55,32 +43,29 @@ declare const VSelectionControl: {
             error: BooleanConstructor;
             id: StringConstructor;
             inline: BooleanConstructor;
-            label: StringConstructor;
-            falseIcon: PropType<IconValue>;
-            trueIcon: PropType<IconValue>;
+            falseIcon: vue.PropType<IconValue>;
+            trueIcon: vue.PropType<IconValue>;
             ripple: {
                 type: BooleanConstructor;
                 default: boolean;
             };
             multiple: {
-                type: PropType<boolean | null>;
+                type: vue.PropType<boolean | null>;
                 default: null;
             };
             name: StringConstructor;
             readonly: BooleanConstructor;
-            trueValue: null;
-            falseValue: null;
             modelValue: null;
             type: StringConstructor;
-            value: null;
             valueComparator: {
-                type: PropType<typeof deepEqual>;
+                type: vue.PropType<typeof deepEqual>;
                 default: typeof deepEqual;
             };
-        }, "onUpdate:modelValue" | "modelValue"> & SlotsToProps<MakeSlots<{
-            default: [];
-            input: [SelectionControlSlot];
-        }>>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "inline" | "error" | "disabled" | "multiple" | "readonly" | "density" | "ripple" | "valueComparator">;
+            label: StringConstructor;
+            trueValue: null;
+            falseValue: null;
+            value: null;
+        }, "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "modelValue" | "v-slot:input">>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "inline" | "error" | "disabled" | "multiple" | "readonly" | "density" | "ripple" | "valueComparator">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -96,7 +81,7 @@ declare const VSelectionControl: {
         $el: any;
         $options: vue.ComponentOptionsBase<Readonly<ExtractPropTypes<Omit<{
             density: {
-                type: PropType<"default" | "compact" | "comfortable" | null>;
+                type: vue.PropType<Density>;
                 default: string;
                 validator: (v: any) => boolean;
             };
@@ -106,43 +91,40 @@ declare const VSelectionControl: {
             error: BooleanConstructor;
             id: StringConstructor;
             inline: BooleanConstructor;
-            label: StringConstructor;
-            falseIcon: PropType<IconValue>;
-            trueIcon: PropType<IconValue>;
+            falseIcon: vue.PropType<IconValue>;
+            trueIcon: vue.PropType<IconValue>;
             ripple: {
                 type: BooleanConstructor;
                 default: boolean;
             };
             multiple: {
-                type: PropType<boolean | null>;
+                type: vue.PropType<boolean | null>;
                 default: null;
             };
             name: StringConstructor;
             readonly: BooleanConstructor;
-            trueValue: null;
-            falseValue: null;
             modelValue: null;
             type: StringConstructor;
-            value: null;
             valueComparator: {
-                type: PropType<typeof deepEqual>;
+                type: vue.PropType<typeof deepEqual>;
                 default: typeof deepEqual;
             };
-        }, "onUpdate:modelValue" | "modelValue"> & SlotsToProps<MakeSlots<{
-            default: [];
-            input: [SelectionControlSlot];
-        }>>>>, {
+            label: StringConstructor;
+            trueValue: null;
+            falseValue: null;
+            value: null;
+        }, "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "modelValue" | "v-slot:input">>>, {
             isFocused: Ref<boolean>;
             input: Ref<HTMLInputElement | undefined>;
         }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
             'update:modelValue': (val: any) => boolean;
-        }, "update:modelValue" | "modelValue">, string, {
+        }, "$children" | "v-slots" | "v-slot:default" | "update:modelValue" | "modelValue" | "v-slot:input">, string, {
             inline: boolean;
             error: boolean;
             disabled: boolean;
             multiple: boolean | null;
             readonly: boolean;
-            density: "default" | "compact" | "comfortable" | null;
+            density: Density;
             ripple: boolean;
             valueComparator: typeof deepEqual;
         }> & {
@@ -167,7 +149,7 @@ declare const VSelectionControl: {
         $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & Readonly<ExtractPropTypes<Omit<{
         density: {
-            type: PropType<"default" | "compact" | "comfortable" | null>;
+            type: vue.PropType<Density>;
             default: string;
             validator: (v: any) => boolean;
         };
@@ -177,32 +159,29 @@ declare const VSelectionControl: {
         error: BooleanConstructor;
         id: StringConstructor;
         inline: BooleanConstructor;
-        label: StringConstructor;
-        falseIcon: PropType<IconValue>;
-        trueIcon: PropType<IconValue>;
+        falseIcon: vue.PropType<IconValue>;
+        trueIcon: vue.PropType<IconValue>;
         ripple: {
             type: BooleanConstructor;
             default: boolean;
         };
         multiple: {
-            type: PropType<boolean | null>;
+            type: vue.PropType<boolean | null>;
             default: null;
         };
         name: StringConstructor;
         readonly: BooleanConstructor;
-        trueValue: null;
-        falseValue: null;
         modelValue: null;
         type: StringConstructor;
-        value: null;
         valueComparator: {
-            type: PropType<typeof deepEqual>;
+            type: vue.PropType<typeof deepEqual>;
             default: typeof deepEqual;
         };
-    }, "onUpdate:modelValue" | "modelValue"> & SlotsToProps<MakeSlots<{
-        default: [];
-        input: [SelectionControlSlot];
-    }>>>> & vue.ShallowUnwrapRef<{
+        label: StringConstructor;
+        trueValue: null;
+        falseValue: null;
+        value: null;
+    }, "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "modelValue" | "v-slot:input">>> & vue.ShallowUnwrapRef<{
         isFocused: Ref<boolean>;
         input: Ref<HTMLInputElement | undefined>;
     }> & {} & vue.ComponentCustomProperties;
@@ -211,7 +190,7 @@ declare const VSelectionControl: {
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<Readonly<ExtractPropTypes<Omit<{
     density: {
-        type: PropType<"default" | "compact" | "comfortable" | null>;
+        type: vue.PropType<Density>;
         default: string;
         validator: (v: any) => boolean;
     };
@@ -221,54 +200,59 @@ declare const VSelectionControl: {
     error: BooleanConstructor;
     id: StringConstructor;
     inline: BooleanConstructor;
-    label: StringConstructor;
-    falseIcon: PropType<IconValue>;
-    trueIcon: PropType<IconValue>;
+    falseIcon: vue.PropType<IconValue>;
+    trueIcon: vue.PropType<IconValue>;
     ripple: {
         type: BooleanConstructor;
         default: boolean;
     };
     multiple: {
-        type: PropType<boolean | null>;
+        type: vue.PropType<boolean | null>;
         default: null;
     };
     name: StringConstructor;
     readonly: BooleanConstructor;
-    trueValue: null;
-    falseValue: null;
     modelValue: null;
     type: StringConstructor;
-    value: null;
     valueComparator: {
-        type: PropType<typeof deepEqual>;
+        type: vue.PropType<typeof deepEqual>;
         default: typeof deepEqual;
     };
-}, "onUpdate:modelValue" | "modelValue"> & SlotsToProps<MakeSlots<{
-    default: [];
-    input: [SelectionControlSlot];
-}>>>>, {
+    label: StringConstructor;
+    trueValue: null;
+    falseValue: null;
+    value: null;
+}, "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "modelValue" | "v-slot:input">>>, {
     isFocused: Ref<boolean>;
     input: Ref<HTMLInputElement | undefined>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
     'update:modelValue': (val: any) => boolean;
-}, "update:modelValue" | "modelValue">, string, {
+}, "$children" | "v-slots" | "v-slot:default" | "update:modelValue" | "modelValue" | "v-slot:input">, string, {
     inline: boolean;
     error: boolean;
     disabled: boolean;
     multiple: boolean | null;
     readonly: boolean;
-    density: "default" | "compact" | "comfortable" | null;
+    density: Density;
     ripple: boolean;
     valueComparator: typeof deepEqual;
 }> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>() => {
     $props: {
         modelValue?: T | undefined;
         'onUpdate:modelValue'?: ((val: T) => any) | undefined;
+    } & {
+        $children?: {} | vue.VNodeChild | {
+            default?: (() => vue.VNodeChild) | undefined;
+            input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+        };
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+            input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
     };
-    $slots: MakeSlots<{
-        default: [];
-        input: [SelectionControlSlot];
-    }>;
 });
 declare type VSelectionControl = InstanceType<typeof VSelectionControl>;
 

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

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

package/lib/components/VSelectionControlGroup/VSelectionControlGroup.css

@@ -5,4 +5,5 @@
 }
 .v-selection-control-group--inline {
   flex-direction: row;
+  flex-wrap: wrap;
 }