vuetify 3.6.4 → 3.6.6

package/lib/components/VSlideGroup/index.d.mts

@@ -63,6 +63,8 @@ interface GroupProvide {
 interface GroupItemProvide {
     id: number;
     isSelected: Ref<boolean>;
+    isFirst: Ref<boolean>;
+    isLast: Ref<boolean>;
     toggle: () => void;
     select: (value: boolean) => void;
     selectedClass: Ref<(string | undefined)[] | false>;
@@ -88,7 +90,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
-        mobile: boolean | null;
+        mobile: NonNullable<boolean | null> | null;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -113,7 +115,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
-        mobile: boolean | null;
+        mobile: NonNullable<boolean | null> | null;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -131,7 +133,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
-        mobile: boolean | null;
+        mobile: NonNullable<boolean | null> | null;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -160,7 +162,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
-        mobile: boolean | null;
+        mobile: NonNullable<boolean | null> | null;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -183,7 +185,7 @@ declare const VSlideGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
-        mobile: boolean | null;
+        mobile: NonNullable<boolean | null> | null;
         multiple: boolean;
         direction: "horizontal" | "vertical";
         selectedClass: string;
@@ -199,7 +201,7 @@ declare const VSlideGroup: {
     style: vue.StyleValue;
     disabled: boolean;
     tag: string;
-    mobile: boolean | null;
+    mobile: NonNullable<boolean | null> | null;
     multiple: boolean;
     direction: "horizontal" | "vertical";
     selectedClass: string;
@@ -224,7 +226,7 @@ declare const VSlideGroup: {
     style: vue.StyleValue;
     disabled: boolean;
     tag: string;
-    mobile: boolean | null;
+    mobile: NonNullable<boolean | null> | null;
     multiple: boolean;
     direction: "horizontal" | "vertical";
     selectedClass: string;
@@ -264,9 +266,12 @@ declare const VSlideGroup: {
         type: StringConstructor;
         default: string;
     };
-    mobile: {
+    mobile: Omit<{
         type: PropType<boolean | null>;
         default: boolean;
+    }, "default" | "type"> & {
+        type: PropType<NonNullable<boolean | null> | null>;
+        default: NonNullable<boolean | null> | null;
     };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;
@@ -312,9 +317,12 @@ declare const VSlideGroup: {
         type: StringConstructor;
         default: string;
     };
-    mobile: {
+    mobile: Omit<{
         type: PropType<boolean | null>;
         default: boolean;
+    }, "default" | "type"> & {
+        type: PropType<NonNullable<boolean | null> | null>;
+        default: NonNullable<boolean | null> | null;
     };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     class: PropType<any>;

package/lib/components/VStepper/VStepper.mjs

@@ -15,7 +15,7 @@ import { makeGroupProps, useGroup } from "../../composables/group.mjs"; // Utili
 import { computed, toRefs } from 'vue';
 import { genericComponent, getPropertyFromItem, only, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const VStepperSymbol = Symbol.for('vuetify:v-stepper');
-export const makeVStepperProps = propsFactory({
+export const makeStepperProps = propsFactory({
   altLabels: Boolean,
   bgColor: String,
   editable: Boolean,
@@ -34,7 +34,10 @@ export const makeVStepperProps = propsFactory({
   },
   mobile: Boolean,
   nonLinear: Boolean,
-  flat: Boolean,
+  flat: Boolean
+}, 'Stepper');
+export const makeVStepperProps = propsFactory({
+  ...makeStepperProps(),
   ...makeGroupProps({
     mandatory: 'force',
     selectedClass: 'v-stepper-item--selected'
@@ -113,12 +116,18 @@ export const VStepper = genericComponent()({
         default: () => [hasHeader && _createVNode(VStepperHeader, {
           "key": "stepper-header"
         }, {
-          default: () => [items.value.map((item, index) => _createVNode(_Fragment, null, [!!index && _createVNode(VDivider, null, null), _createVNode(VStepperItem, item, {
-            default: slots[`header-item.${item.value}`] ?? slots.header,
-            icon: slots.icon,
-            title: slots.title,
-            subtitle: slots.subtitle
-          })]))]
+          default: () => [items.value.map((_ref2, index) => {
+            let {
+              raw,
+              ...item
+            } = _ref2;
+            return _createVNode(_Fragment, null, [!!index && _createVNode(VDivider, null, null), _createVNode(VStepperItem, item, {
+              default: slots[`header-item.${item.value}`] ?? slots.header,
+              icon: slots.icon,
+              title: slots.title,
+              subtitle: slots.subtitle
+            })]);
+          })]
         }), hasWindow && _createVNode(VStepperWindow, {
           "key": "stepper-window"
         }, {

package/lib/components/VStepper/VStepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VStepper.mjs","names":["makeVStepperActionsProps","VStepperActions","VStepperHeader","VStepperItem","VStepperWindow","VStepperWindowItem","VDivider","makeVSheetProps","VSheet","provideDefaults","makeGroupProps","useGroup","computed","toRefs","genericComponent","getPropertyFromItem","only","propsFactory","useRender","VStepperSymbol","Symbol","for","makeVStepperProps","altLabels","Boolean","bgColor","String","editable","hideActions","items","type","Array","default","itemTitle","itemValue","mobile","nonLinear","flat","mandatory","selectedClass","VStepper","name","props","emits","v","setup","_ref","slots","_items","next","prev","selected","color","prevText","nextText","map","item","index","title","value","raw","activeIndex","findIndex","includes","id","disabled","length","sheetProps","filterProps","hasHeader","header","hasWindow","hasActions","actions","_createVNode","_mergeProps","class","style","_Fragment","icon","subtitle"],"sources":["../../../src/components/VStepper/VStepper.tsx"],"sourcesContent":["// Styles\nimport './VStepper.sass'\n\n// Components\nimport { makeVStepperActionsProps, VStepperActions } from './VStepperActions'\nimport { VStepperHeader } from './VStepperHeader'\nimport { VStepperItem } from './VStepperItem'\nimport { VStepperWindow } from './VStepperWindow'\nimport { VStepperWindowItem } from './VStepperWindowItem'\nimport { VDivider } from '@/components/VDivider'\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utilities\nimport { computed, toRefs } from 'vue'\nimport { genericComponent, getPropertyFromItem, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType } from 'vue'\nimport type { StepperItemSlot } from './VStepperItem'\nimport type { GroupItemProvide } from '@/composables/group'\n\nexport const VStepperSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-stepper')\n\nexport type StepperItem = string | Record<string, any>\n\nexport type VStepperSlot = {\n  prev: () => void\n  next: () => void\n}\n\nexport type VStepperSlots = {\n  actions: VStepperSlot\n  default: VStepperSlot\n  header: StepperItem\n  'header-item': StepperItemSlot\n  icon: StepperItemSlot\n  title: StepperItemSlot\n  subtitle: StepperItemSlot\n  item: StepperItem\n  prev: never\n  next: never\n} & {\n  [key: `header-item.${string}`]: StepperItemSlot\n  [key: `item.${string}`]: StepperItem\n}\n\nexport const makeVStepperProps = propsFactory({\n  altLabels: Boolean,\n  bgColor: String,\n  editable: Boolean,\n  hideActions: Boolean,\n  items: {\n    type: Array as PropType<readonly StepperItem[]>,\n    default: () => ([]),\n  },\n  itemTitle: {\n    type: String,\n    default: 'title',\n  },\n  itemValue: {\n    type: String,\n    default: 'value',\n  },\n  mobile: Boolean,\n  nonLinear: Boolean,\n  flat: Boolean,\n\n  ...makeGroupProps({\n    mandatory: 'force' as const,\n    selectedClass: 'v-stepper-item--selected',\n  }),\n  ...makeVSheetProps(),\n  ...only(makeVStepperActionsProps(), ['prevText', 'nextText']),\n}, 'VStepper')\n\nexport const VStepper = genericComponent<VStepperSlots>()({\n  name: 'VStepper',\n\n  props: makeVStepperProps(),\n\n  emits: {\n    'update:modelValue': (v: unknown) => true,\n  },\n\n  setup (props, { slots }) {\n    const { items: _items, next, prev, selected } = useGroup(props, VStepperSymbol)\n    const { color, editable, prevText, nextText } = toRefs(props)\n\n    const items = computed(() => props.items.map((item, index) => {\n      const title = getPropertyFromItem(item, props.itemTitle, item)\n      const value = getPropertyFromItem(item, props.itemValue, index + 1)\n\n      return {\n        title,\n        value,\n        raw: item,\n      }\n    }))\n    const activeIndex = computed(() => {\n      return _items.value.findIndex(item => selected.value.includes(item.id))\n    })\n    const disabled = computed(() => {\n      if (props.disabled) return props.disabled\n      if (activeIndex.value === 0) return 'prev'\n      if (activeIndex.value === _items.value.length - 1) return 'next'\n\n      return false\n    })\n\n    provideDefaults({\n      VStepperItem: {\n        editable,\n        prevText,\n        nextText,\n      },\n      VStepperActions: {\n        color,\n        disabled,\n        prevText,\n        nextText,\n      },\n    })\n\n    useRender(() => {\n      const sheetProps = VSheet.filterProps(props)\n\n      const hasHeader = !!(slots.header || props.items.length)\n      const hasWindow = props.items.length > 0\n      const hasActions = !props.hideActions && !!(hasWindow || slots.actions)\n\n      return (\n        <VSheet\n          { ...sheetProps }\n          color={ props.bgColor }\n          class={[\n            'v-stepper',\n            {\n              'v-stepper--alt-labels': props.altLabels,\n              'v-stepper--flat': props.flat,\n              'v-stepper--non-linear': props.nonLinear,\n              'v-stepper--mobile': props.mobile,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          { hasHeader && (\n            <VStepperHeader key=\"stepper-header\">\n              { items.value.map((item, index) => (\n                <>\n                  { !!index && (<VDivider />) }\n\n                  <VStepperItem\n                    { ...item }\n                    v-slots={{\n                      default: slots[`header-item.${item.value}`] ?? slots.header,\n                      icon: slots.icon,\n                      title: slots.title,\n                      subtitle: slots.subtitle,\n                    }}\n                  />\n                </>\n              ))}\n            </VStepperHeader>\n          )}\n\n          { hasWindow && (\n            <VStepperWindow key=\"stepper-window\">\n              { items.value.map(item => (\n                <VStepperWindowItem\n                  value={ item.value }\n                  v-slots={{\n                    default: () => slots[`item.${item.value}`]?.(item) ?? slots.item?.(item),\n                  }}\n                />\n              ))}\n            </VStepperWindow>\n          )}\n\n          { slots.default?.({ prev, next }) }\n\n          { hasActions && (\n            slots.actions?.({ next, prev }) ?? (\n              <VStepperActions\n                key=\"stepper-actions\"\n                onClick:prev={ prev }\n                onClick:next={ next }\n                v-slots={ slots }\n              />\n            )\n          )}\n        </VSheet>\n      )\n    })\n\n    return {\n      prev,\n      next,\n    }\n  },\n})\n\nexport type VStepper = InstanceType<typeof VStepper>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VStepper.mjs","names":["makeVStepperActionsProps","VStepperActions","VStepperHeader","VStepperItem","VStepperWindow","VStepperWindowItem","VDivider","makeVSheetProps","VSheet","provideDefaults","makeGroupProps","useGroup","computed","toRefs","genericComponent","getPropertyFromItem","only","propsFactory","useRender","VStepperSymbol","Symbol","for","makeStepperProps","altLabels","Boolean","bgColor","String","editable","hideActions","items","type","Array","default","itemTitle","itemValue","mobile","nonLinear","flat","makeVStepperProps","mandatory","selectedClass","VStepper","name","props","emits","v","setup","_ref","slots","_items","next","prev","selected","color","prevText","nextText","map","item","index","title","value","raw","activeIndex","findIndex","includes","id","disabled","length","sheetProps","filterProps","hasHeader","header","hasWindow","hasActions","actions","_createVNode","_mergeProps","class","style","_ref2","_Fragment","icon","subtitle"],"sources":["../../../src/components/VStepper/VStepper.tsx"],"sourcesContent":["// Styles\nimport './VStepper.sass'\n\n// Components\nimport { makeVStepperActionsProps, VStepperActions } from './VStepperActions'\nimport { VStepperHeader } from './VStepperHeader'\nimport { VStepperItem } from './VStepperItem'\nimport { VStepperWindow } from './VStepperWindow'\nimport { VStepperWindowItem } from './VStepperWindowItem'\nimport { VDivider } from '@/components/VDivider'\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utilities\nimport { computed, toRefs } from 'vue'\nimport { genericComponent, getPropertyFromItem, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType } from 'vue'\nimport type { StepperItem, StepperItemSlot } from './VStepperItem'\nimport type { GroupItemProvide } from '@/composables/group'\n\nexport const VStepperSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-stepper')\n\nexport type VStepperSlot = {\n  prev: () => void\n  next: () => void\n}\n\nexport type VStepperSlots = {\n  actions: VStepperSlot\n  default: VStepperSlot\n  header: StepperItem\n  'header-item': StepperItemSlot\n  icon: StepperItemSlot\n  title: StepperItemSlot\n  subtitle: StepperItemSlot\n  item: StepperItem\n  prev: never\n  next: never\n} & {\n  [key: `header-item.${string}`]: StepperItemSlot\n  [key: `item.${string}`]: StepperItem\n}\n\nexport const makeStepperProps = propsFactory({\n  altLabels: Boolean,\n  bgColor: String,\n  editable: Boolean,\n  hideActions: Boolean,\n  items: {\n    type: Array as PropType<readonly StepperItem[]>,\n    default: () => ([]),\n  },\n  itemTitle: {\n    type: String,\n    default: 'title',\n  },\n  itemValue: {\n    type: String,\n    default: 'value',\n  },\n  mobile: Boolean,\n  nonLinear: Boolean,\n  flat: Boolean,\n}, 'Stepper')\n\nexport const makeVStepperProps = propsFactory({\n  ...makeStepperProps(),\n  ...makeGroupProps({\n    mandatory: 'force' as const,\n    selectedClass: 'v-stepper-item--selected',\n  }),\n  ...makeVSheetProps(),\n  ...only(makeVStepperActionsProps(), ['prevText', 'nextText']),\n}, 'VStepper')\n\nexport const VStepper = genericComponent<VStepperSlots>()({\n  name: 'VStepper',\n\n  props: makeVStepperProps(),\n\n  emits: {\n    'update:modelValue': (v: unknown) => true,\n  },\n\n  setup (props, { slots }) {\n    const { items: _items, next, prev, selected } = useGroup(props, VStepperSymbol)\n    const { color, editable, prevText, nextText } = toRefs(props)\n\n    const items = computed(() => props.items.map((item, index) => {\n      const title = getPropertyFromItem(item, props.itemTitle, item)\n      const value = getPropertyFromItem(item, props.itemValue, index + 1)\n\n      return {\n        title,\n        value,\n        raw: item,\n      }\n    }))\n    const activeIndex = computed(() => {\n      return _items.value.findIndex(item => selected.value.includes(item.id))\n    })\n    const disabled = computed(() => {\n      if (props.disabled) return props.disabled\n      if (activeIndex.value === 0) return 'prev'\n      if (activeIndex.value === _items.value.length - 1) return 'next'\n\n      return false\n    })\n\n    provideDefaults({\n      VStepperItem: {\n        editable,\n        prevText,\n        nextText,\n      },\n      VStepperActions: {\n        color,\n        disabled,\n        prevText,\n        nextText,\n      },\n    })\n\n    useRender(() => {\n      const sheetProps = VSheet.filterProps(props)\n\n      const hasHeader = !!(slots.header || props.items.length)\n      const hasWindow = props.items.length > 0\n      const hasActions = !props.hideActions && !!(hasWindow || slots.actions)\n\n      return (\n        <VSheet\n          { ...sheetProps }\n          color={ props.bgColor }\n          class={[\n            'v-stepper',\n            {\n              'v-stepper--alt-labels': props.altLabels,\n              'v-stepper--flat': props.flat,\n              'v-stepper--non-linear': props.nonLinear,\n              'v-stepper--mobile': props.mobile,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          { hasHeader && (\n            <VStepperHeader key=\"stepper-header\">\n              { items.value.map(({ raw, ...item }, index) => (\n                <>\n                  { !!index && (<VDivider />) }\n\n                  <VStepperItem\n                    { ...item }\n                    v-slots={{\n                      default: slots[`header-item.${item.value}`] ?? slots.header,\n                      icon: slots.icon,\n                      title: slots.title,\n                      subtitle: slots.subtitle,\n                    }}\n                  />\n                </>\n              ))}\n            </VStepperHeader>\n          )}\n\n          { hasWindow && (\n            <VStepperWindow key=\"stepper-window\">\n              { items.value.map(item => (\n                <VStepperWindowItem\n                  value={ item.value }\n                  v-slots={{\n                    default: () => slots[`item.${item.value}`]?.(item) ?? slots.item?.(item),\n                  }}\n                />\n              ))}\n            </VStepperWindow>\n          )}\n\n          { slots.default?.({ prev, next }) }\n\n          { hasActions && (\n            slots.actions?.({ next, prev }) ?? (\n              <VStepperActions\n                key=\"stepper-actions\"\n                onClick:prev={ prev }\n                onClick:next={ next }\n                v-slots={ slots }\n              />\n            )\n          )}\n        </VSheet>\n      )\n    })\n\n    return {\n      prev,\n      next,\n    }\n  },\n})\n\nexport type VStepper = InstanceType<typeof VStepper>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VStepper/VStepperItem.css

@@ -3,12 +3,42 @@
   align-self: stretch;
   display: inline-flex;
   flex: none;
+  outline: none;
   opacity: var(--v-medium-emphasis-opacity);
   padding: 1.5rem;
+  position: relative;
   transition-duration: 0.2s;
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+.v-stepper-item:hover > .v-stepper-item__overlay {
+  opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+}
+.v-stepper-item:focus-visible > .v-stepper-item__overlay {
+  opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+}
+@supports not selector(:focus-visible) {
+  .v-stepper-item:focus > .v-stepper-item__overlay {
+    opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+  }
+}
+.v-stepper-item--active > .v-stepper-item__overlay, .v-stepper-item[aria-haspopup=menu][aria-expanded=true] > .v-stepper-item__overlay {
+  opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
+}
+.v-stepper-item--active:hover > .v-stepper-item__overlay, .v-stepper-item[aria-haspopup=menu][aria-expanded=true]:hover > .v-stepper-item__overlay {
+  opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+}
+.v-stepper-item--active:focus-visible > .v-stepper-item__overlay, .v-stepper-item[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-stepper-item__overlay {
+  opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+}
+@supports not selector(:focus-visible) {
+  .v-stepper-item--active:focus > .v-stepper-item__overlay, .v-stepper-item[aria-haspopup=menu][aria-expanded=true]:focus > .v-stepper-item__overlay {
+    opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+  }
+}
+.v-stepper--non-linear .v-stepper-item {
+  opacity: var(--v-high-emphasis-opacity);
+}
 .v-stepper-item--selected {
   opacity: 1;
 }
@@ -64,4 +94,21 @@
 }
 .v-stepper--mobile .v-stepper-item__subtitle {
   display: none;
+}
+
+.v-stepper-item__overlay {
+  background-color: currentColor;
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.v-stepper-item__overlay,
+.v-stepper-item__underlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }

package/lib/components/VStepper/VStepperItem.mjs

@@ -5,12 +5,13 @@ import "./VStepperItem.css";
 // Components
 import { VAvatar } from "../VAvatar/VAvatar.mjs";
 import { VIcon } from "../VIcon/VIcon.mjs"; // Composables
-import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs"; // Directives
+import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
+import { genOverlays } from "../../composables/variant.mjs"; // Directives
 import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
 import { computed } from 'vue';
 import { VStepperSymbol } from "./VStepper.mjs";
 import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
-export const makeVStepperItemProps = propsFactory({
+export const makeStepperItemProps = propsFactory({
   color: String,
   title: String,
   subtitle: String,
@@ -37,7 +38,10 @@ export const makeVStepperItemProps = propsFactory({
   rules: {
     type: Array,
     default: () => []
-  },
+  }
+}, 'StepperItem');
+export const makeVStepperItemProps = propsFactory({
+  ...makeStepperItemProps(),
   ...makeGroupItemProps()
 }, 'VStepperItem');
 export const VStepperItem = genericComponent()({
@@ -56,13 +60,14 @@ export const VStepperItem = genericComponent()({
     const group = useGroupItem(props, VStepperSymbol, true);
     const step = computed(() => group?.value.value ?? props.value);
     const isValid = computed(() => props.rules.every(handler => handler() === true));
+    const isClickable = computed(() => !props.disabled && props.editable);
     const canEdit = computed(() => !props.disabled && props.editable);
     const hasError = computed(() => props.error || !isValid.value);
     const hasCompleted = computed(() => props.complete || props.rules.length > 0 && isValid.value);
     const icon = computed(() => {
       if (hasError.value) return props.errorIcon;
       if (hasCompleted.value) return props.completeIcon;
-      if (props.editable) return props.editIcon;
+      if (group.isSelected.value && props.editable) return props.editIcon;
       return props.icon;
     });
     const slotProps = computed(() => ({
@@ -89,7 +94,7 @@ export const VStepperItem = genericComponent()({
         }, group?.selectedClass.value],
         "disabled": !props.editable,
         "onClick": onClick
-      }, [_createVNode(VAvatar, {
+      }, [isClickable.value && genOverlays(true, 'v-stepper-item'), _createVNode(VAvatar, {
         "key": "stepper-avatar",
         "class": "v-stepper-item__avatar",
         "color": hasColor ? props.color : undefined,

package/lib/components/VStepper/VStepperItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VStepperItem.mjs","names":["VAvatar","VIcon","makeGroupItemProps","useGroupItem","Ripple","computed","VStepperSymbol","genericComponent","propsFactory","useRender","makeVStepperItemProps","color","String","title","subtitle","complete","Boolean","completeIcon","type","default","editable","editIcon","error","errorIcon","icon","ripple","Object","rules","Array","VStepperItem","name","directives","props","emits","val","setup","_ref","slots","group","step","value","isValid","every","handler","canEdit","disabled","hasError","hasCompleted","length","slotProps","hasColor","isSelected","hasTitle","hasSubtitle","onClick","toggle","_withDirectives","_createVNode","selectedClass","undefined","_resolveDirective"],"sources":["../../../src/components/VStepper/VStepperItem.tsx"],"sourcesContent":["// Styles\nimport './VStepperItem.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar/VAvatar'\nimport { VIcon } from '@/components/VIcon/VIcon'\n\n// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed } from 'vue'\nimport { VStepperSymbol } from './VStepper'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\nexport type StepperItemSlot = {\n  canEdit: boolean\n  hasError: boolean\n  hasCompleted: boolean\n  title?: string | number\n  subtitle?: string | number\n  step: any\n}\n\nexport type VStepperItemSlots = {\n  default: StepperItemSlot\n  icon: StepperItemSlot\n  title: StepperItemSlot\n  subtitle: StepperItemSlot\n}\n\nexport type ValidationRule = () => string | boolean\n\nexport const makeVStepperItemProps = propsFactory({\n  color: String,\n  title: String,\n  subtitle: String,\n  complete: Boolean,\n  completeIcon: {\n    type: String,\n    default: '$complete',\n  },\n  editable: Boolean,\n  editIcon: {\n    type: String,\n    default: '$edit',\n  },\n  error: Boolean,\n  errorIcon: {\n    type: String,\n    default: '$error',\n  },\n  icon: String,\n  ripple: {\n    type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,\n    default: true,\n  },\n  rules: {\n    type: Array as PropType<readonly ValidationRule[]>,\n    default: () => ([]),\n  },\n\n  ...makeGroupItemProps(),\n}, 'VStepperItem')\n\nexport const VStepperItem = genericComponent<VStepperItemSlots>()({\n  name: 'VStepperItem',\n\n  directives: { Ripple },\n\n  props: makeVStepperItemProps(),\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { slots }) {\n    const group = useGroupItem(props, VStepperSymbol, true)\n    const step = computed(() => group?.value.value ?? props.value)\n    const isValid = computed(() => props.rules.every(handler => handler() === true))\n    const canEdit = computed(() => !props.disabled && props.editable)\n    const hasError = computed(() => props.error || !isValid.value)\n    const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value))\n    const icon = computed(() => {\n      if (hasError.value) return props.errorIcon\n      if (hasCompleted.value) return props.completeIcon\n      if (props.editable) return props.editIcon\n\n      return props.icon\n    })\n    const slotProps = computed(() => ({\n      canEdit: canEdit.value,\n      hasError: hasError.value,\n      hasCompleted: hasCompleted.value,\n      title: props.title,\n      subtitle: props.subtitle,\n      step: step.value,\n      value: props.value,\n    }))\n\n    useRender(() => {\n      const hasColor = (\n        !group ||\n        group.isSelected.value ||\n        hasCompleted.value ||\n        canEdit.value\n      ) && (\n        !hasError.value &&\n        !props.disabled\n      )\n      const hasTitle = !!(props.title != null || slots.title)\n      const hasSubtitle = !!(props.subtitle != null || slots.subtitle)\n\n      function onClick () {\n        group?.toggle()\n      }\n\n      return (\n        <button\n          class={[\n            'v-stepper-item',\n            {\n              'v-stepper-item--complete': hasCompleted.value,\n              'v-stepper-item--disabled': props.disabled,\n              'v-stepper-item--error': hasError.value,\n            },\n            group?.selectedClass.value,\n          ]}\n          disabled={ !props.editable }\n          v-ripple={[\n            props.ripple && props.editable,\n            null,\n            null,\n          ]}\n          onClick={ onClick }\n        >\n          <VAvatar\n            key=\"stepper-avatar\"\n            class=\"v-stepper-item__avatar\"\n            color={ hasColor ? props.color : undefined }\n            size={ 24 }\n          >\n            { slots.icon?.(slotProps.value) ?? (\n              icon.value ? (\n                <VIcon icon={ icon.value }></VIcon>\n              ) : step.value\n            )}\n          </VAvatar>\n\n          <div class=\"v-stepper-item__content\">\n            { hasTitle && (\n              <div\n                key=\"title\"\n                class=\"v-stepper-item__title\"\n              >\n                { slots.title?.(slotProps.value) ?? props.title }\n              </div>\n            )}\n\n            { hasSubtitle && (\n              <div\n                key=\"subtitle\"\n                class=\"v-stepper-item__subtitle\"\n              >\n                { slots.subtitle?.(slotProps.value) ?? props.subtitle }\n              </div>\n            )}\n\n            { slots.default?.(slotProps.value) }\n          </div>\n        </button>\n      )\n    })\n    return {}\n  },\n})\n\nexport type VStepperItem = InstanceType<typeof VStepperItem>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VStepperItem.mjs","names":["VAvatar","VIcon","makeGroupItemProps","useGroupItem","genOverlays","Ripple","computed","VStepperSymbol","genericComponent","propsFactory","useRender","makeStepperItemProps","color","String","title","subtitle","complete","Boolean","completeIcon","type","default","editable","editIcon","error","errorIcon","icon","ripple","Object","rules","Array","makeVStepperItemProps","VStepperItem","name","directives","props","emits","val","setup","_ref","slots","group","step","value","isValid","every","handler","isClickable","disabled","canEdit","hasError","hasCompleted","length","isSelected","slotProps","hasColor","hasTitle","hasSubtitle","onClick","toggle","_withDirectives","_createVNode","selectedClass","undefined","_resolveDirective"],"sources":["../../../src/components/VStepper/VStepperItem.tsx"],"sourcesContent":["// Styles\nimport './VStepperItem.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar/VAvatar'\nimport { VIcon } from '@/components/VIcon/VIcon'\n\n// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { genOverlays } from '@/composables/variant'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed } from 'vue'\nimport { VStepperSymbol } from './VStepper'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\nexport type StepperItem = string | Record<string, any>\n\nexport type StepperItemSlot = {\n  canEdit: boolean\n  hasError: boolean\n  hasCompleted: boolean\n  title?: string | number\n  subtitle?: string | number\n  step: any\n}\n\nexport type VStepperItemSlots = {\n  default: StepperItemSlot\n  icon: StepperItemSlot\n  title: StepperItemSlot\n  subtitle: StepperItemSlot\n}\n\nexport type ValidationRule = () => string | boolean\n\nexport const makeStepperItemProps = propsFactory({\n  color: String,\n  title: String,\n  subtitle: String,\n  complete: Boolean,\n  completeIcon: {\n    type: String,\n    default: '$complete',\n  },\n  editable: Boolean,\n  editIcon: {\n    type: String,\n    default: '$edit',\n  },\n  error: Boolean,\n  errorIcon: {\n    type: String,\n    default: '$error',\n  },\n  icon: String,\n  ripple: {\n    type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,\n    default: true,\n  },\n  rules: {\n    type: Array as PropType<readonly ValidationRule[]>,\n    default: () => ([]),\n  },\n}, 'StepperItem')\n\nexport const makeVStepperItemProps = propsFactory({\n  ...makeStepperItemProps(),\n  ...makeGroupItemProps(),\n}, 'VStepperItem')\n\nexport const VStepperItem = genericComponent<VStepperItemSlots>()({\n  name: 'VStepperItem',\n\n  directives: { Ripple },\n\n  props: makeVStepperItemProps(),\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { slots }) {\n    const group = useGroupItem(props, VStepperSymbol, true)\n    const step = computed(() => group?.value.value ?? props.value)\n    const isValid = computed(() => props.rules.every(handler => handler() === true))\n    const isClickable = computed(() => !props.disabled && props.editable)\n    const canEdit = computed(() => !props.disabled && props.editable)\n    const hasError = computed(() => props.error || !isValid.value)\n    const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value))\n    const icon = computed(() => {\n      if (hasError.value) return props.errorIcon\n      if (hasCompleted.value) return props.completeIcon\n      if (group.isSelected.value && props.editable) return props.editIcon\n\n      return props.icon\n    })\n    const slotProps = computed(() => ({\n      canEdit: canEdit.value,\n      hasError: hasError.value,\n      hasCompleted: hasCompleted.value,\n      title: props.title,\n      subtitle: props.subtitle,\n      step: step.value,\n      value: props.value,\n    }))\n\n    useRender(() => {\n      const hasColor = (\n        !group ||\n        group.isSelected.value ||\n        hasCompleted.value ||\n        canEdit.value\n      ) && (\n        !hasError.value &&\n        !props.disabled\n      )\n      const hasTitle = !!(props.title != null || slots.title)\n      const hasSubtitle = !!(props.subtitle != null || slots.subtitle)\n\n      function onClick () {\n        group?.toggle()\n      }\n\n      return (\n        <button\n          class={[\n            'v-stepper-item',\n            {\n              'v-stepper-item--complete': hasCompleted.value,\n              'v-stepper-item--disabled': props.disabled,\n              'v-stepper-item--error': hasError.value,\n            },\n            group?.selectedClass.value,\n          ]}\n          disabled={ !props.editable }\n          v-ripple={[\n            props.ripple && props.editable,\n            null,\n            null,\n          ]}\n          onClick={ onClick }\n        >\n          { isClickable.value && genOverlays(true, 'v-stepper-item') }\n\n          <VAvatar\n            key=\"stepper-avatar\"\n            class=\"v-stepper-item__avatar\"\n            color={ hasColor ? props.color : undefined }\n            size={ 24 }\n          >\n            { slots.icon?.(slotProps.value) ?? (\n              icon.value ? (\n                <VIcon icon={ icon.value }></VIcon>\n              ) : step.value\n            )}\n          </VAvatar>\n\n          <div class=\"v-stepper-item__content\">\n            { hasTitle && (\n              <div\n                key=\"title\"\n                class=\"v-stepper-item__title\"\n              >\n                { slots.title?.(slotProps.value) ?? props.title }\n              </div>\n            )}\n\n            { hasSubtitle && (\n              <div\n                key=\"subtitle\"\n                class=\"v-stepper-item__subtitle\"\n              >\n                { slots.subtitle?.(slotProps.value) ?? props.subtitle }\n              </div>\n            )}\n\n            { slots.default?.(slotProps.value) }\n          </div>\n        </button>\n      )\n    })\n    return {}\n  },\n})\n\nexport type VStepperItem = InstanceType<typeof VStepperItem>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VStepper/VStepperItem.sass

@@ -8,12 +8,19 @@
     align-self: stretch
     display: inline-flex
     flex: none
+    outline: none
     opacity: $stepper-item-opacity
     padding: $stepper-item-padding
+    position: relative
     transition-duration: $stepper-item-transition-duration
     transition-property: $stepper-item-transition-property
     transition-timing-function: $stepper-item-transition-timing-function
 
+    @include tools.states('.v-stepper-item__overlay')
+
+    .v-stepper--non-linear &
+      opacity: var(--v-high-emphasis-opacity)
+
     &--selected
       opacity: 1
 
@@ -71,3 +78,14 @@
 
     .v-stepper--mobile &
       display: none
+
+  .v-stepper-item__overlay
+    background-color: currentColor
+    border-radius: inherit
+    opacity: 0
+    transition: opacity .2s ease-in-out
+
+  .v-stepper-item__overlay,
+  .v-stepper-item__underlay
+    @include tools.absolute()
+    pointer-events: none

package/lib/components/VStepper/index.d.mts

@@ -11,6 +11,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
     filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): Partial<Pick<T, U>>;
 }
 
+type StepperItem = string | Record<string, any>;
 type StepperItemSlot = {
     canEdit: boolean;
     hasError: boolean;
@@ -335,7 +336,6 @@ declare const VStepperItem: {
 }>>;
 type VStepperItem = InstanceType<typeof VStepperItem>;
 
-type StepperItem = string | Record<string, any>;
 type VStepperSlot = {
     prev: () => void;
     next: () => void;

package/lib/components/VSwitch/VSwitch.css

@@ -134,4 +134,48 @@
 }
 .v-switch.v-input--vertical .v-selection-control__wrapper {
   transform: rotate(-90deg);
+}
+
+@media (forced-colors: active) {
+  .v-switch .v-switch__loader .v-progress-circular {
+    color: currentColor;
+  }
+  .v-switch .v-switch__thumb {
+    background-color: buttontext;
+  }
+  .v-switch .v-switch__track,
+  .v-switch .v-switch__thumb {
+    border: 1px solid;
+    color: buttontext;
+  }
+  .v-switch:not(.v-switch--loading):not(.v-input--disabled) .v-selection-control--dirty .v-switch__thumb {
+    background-color: highlight;
+  }
+  .v-switch:not(.v-input--disabled) .v-selection-control--dirty .v-switch__track {
+    background-color: highlight;
+  }
+  .v-switch:not(.v-input--disabled) .v-selection-control--dirty .v-switch__track,
+  .v-switch:not(.v-input--disabled) .v-selection-control--dirty .v-switch__thumb {
+    color: highlight;
+  }
+  .v-switch.v-switch--inset .v-switch__track {
+    border-width: 2px;
+  }
+  .v-switch.v-switch--inset:not(.v-switch--loading):not(.v-input--disabled) .v-selection-control--dirty .v-switch__thumb {
+    background-color: highlighttext;
+    color: highlighttext;
+  }
+  .v-switch.v-input--disabled .v-switch__thumb {
+    background-color: graytext;
+  }
+  .v-switch.v-input--disabled .v-switch__track,
+  .v-switch.v-input--disabled .v-switch__thumb {
+    color: graytext;
+  }
+  .v-switch.v-switch--loading .v-switch__thumb {
+    background-color: canvas;
+  }
+  .v-switch.v-switch--loading.v-switch--inset .v-switch__thumb, .v-switch.v-switch--loading.v-switch--indeterminate .v-switch__thumb {
+    border-width: 0;
+  }
 }

package/lib/components/VSwitch/VSwitch.mjs

@@ -13,7 +13,7 @@ import { useFocus } from "../../composables/focus.mjs";
 import { LoaderSlot, useLoader } from "../../composables/loader.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 import { computed, ref } from 'vue';
-import { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { filterInputAttrs, genericComponent, getUid, IN_BROWSER, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVSwitchProps = propsFactory({
   indeterminate: Boolean,
   inset: Boolean,
@@ -50,6 +50,7 @@ export const VSwitch = genericComponent()({
       blur
     } = useFocus(props);
     const control = ref();
+    const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches;
     const loaderColor = computed(() => {
       return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
     });
@@ -118,7 +119,7 @@ export const VSwitch = genericComponent()({
                 backgroundColorStyles
               } = _ref3;
               return _createVNode("div", {
-                "class": ['v-switch__track', ...backgroundColorClasses.value],
+                "class": ['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
                 "style": backgroundColorStyles.value,
                 "onClick": onTrackClick
               }, [slots['track-true'] && _createVNode("div", {
@@ -139,7 +140,7 @@ export const VSwitch = genericComponent()({
               return _createVNode(_Fragment, null, [inputNode, _createVNode("div", {
                 "class": ['v-switch__thumb', {
                   'v-switch__thumb--filled': icon || props.loading
-                }, props.inset ? undefined : backgroundColorClasses.value],
+                }, props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value],
                 "style": props.inset ? undefined : backgroundColorStyles.value
               }, [slots.thumb ? _createVNode(VDefaultsProvider, {
                 "defaults": {

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

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.mjs","names":["VScaleTransition","VDefaultsProvider","VIcon","makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","value","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","control","loaderColor","color","uid","id","onChange","onTrackClick","e","stopPropagation","preventDefault","input","click","rootAttrs","controlAttrs","inputProps","filterProps","controlProps","_createVNode","_mergeProps","class","$event","style","_ref2","messagesId","isDisabled","isReadonly","isValid","slotProps","undefined","_ref3","backgroundColorClasses","backgroundColorStyles","_ref4","inputNode","icon","_Fragment","thumb","size","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { VScaleTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, Ref } from 'vue'\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { IconValue } from '@/composables/icons'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\nexport type VSwitchSlot = {\n  model: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n}\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & {\n    loader: LoaderSlotProps\n    thumb: { icon: IconValue | undefined } & VSwitchSlot\n    'track-false': VSwitchSlot\n    'track-true': VSwitchSlot\n  }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VSwitchSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (value: 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    const control = ref<VSelectionControl>()\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    function onTrackClick (e: Event) {\n      e.stopPropagation()\n      e.preventDefault()\n      control.value?.input?.click()\n    }\n\n    useRender(() => {\n      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const inputProps = VInput.filterProps(props)\n      const controlProps = VSelectionControl.filterProps(props)\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--flat': props.flat },\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => {\n              const slotProps = {\n                model,\n                isValid,\n              }\n\n              return (\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: ({ backgroundColorClasses, backgroundColorStyles }) => (\n                      <div\n                        class={[\n                          'v-switch__track',\n                          ...backgroundColorClasses.value,\n                        ]}\n                        style={ backgroundColorStyles.value }\n                        onClick={ onTrackClick }\n                      >\n                        { slots['track-true'] && (\n                          <div key=\"prepend\" class=\"v-switch__track-true\">\n                            { slots['track-true'](slotProps) }\n                          </div>\n                        )}\n\n                        { slots['track-false'] && (\n                          <div key=\"append\" class=\"v-switch__track-false\">\n                            { slots['track-false'](slotProps) }\n                          </div>\n                        )}\n                      </div>\n                    ),\n                    input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => (\n                      <>\n                        { inputNode }\n                        <div\n                          class={[\n                            'v-switch__thumb',\n                            { 'v-switch__thumb--filled': icon || props.loading },\n                            props.inset ? undefined : backgroundColorClasses.value,\n                          ]}\n                          style={ props.inset ? undefined : backgroundColorStyles.value }\n                        >\n                          { slots.thumb ? (\n                            <VDefaultsProvider\n                              defaults={{\n                                VIcon: {\n                                  icon,\n                                  size: 'x-small',\n                                },\n                              }}\n                            >\n                              { slots.thumb({ ...slotProps, icon }) }\n                            </VDefaultsProvider>\n                          ) : (\n                            <VScaleTransition>\n                              { !props.loading ? (\n                                (icon && (\n                                  <VIcon\n                                    key={ String(icon) }\n                                    icon={ icon }\n                                    size=\"x-small\"\n                                  />\n                                ))) : (\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                            </VScaleTransition>\n                          )}\n                        </div>\n                      </>\n                    ),\n                  }}\n                </VSelectionControl>\n              )\n            },\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VSwitch.mjs","names":["VScaleTransition","VDefaultsProvider","VIcon","makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","IN_BROWSER","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","value","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","control","isForcedColorsModeActive","window","matchMedia","matches","loaderColor","color","uid","id","onChange","onTrackClick","e","stopPropagation","preventDefault","input","click","rootAttrs","controlAttrs","inputProps","filterProps","controlProps","_createVNode","_mergeProps","class","$event","style","_ref2","messagesId","isDisabled","isReadonly","isValid","slotProps","undefined","_ref3","backgroundColorClasses","backgroundColorStyles","_ref4","inputNode","icon","_Fragment","thumb","size","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { VScaleTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, IN_BROWSER, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, Ref } from 'vue'\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { IconValue } from '@/composables/icons'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\nexport type VSwitchSlot = {\n  model: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n}\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & {\n    loader: LoaderSlotProps\n    thumb: { icon: IconValue | undefined } & VSwitchSlot\n    'track-false': VSwitchSlot\n    'track-true': VSwitchSlot\n  }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VSwitchSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (value: 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    const control = ref<VSelectionControl>()\n    const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches\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    function onTrackClick (e: Event) {\n      e.stopPropagation()\n      e.preventDefault()\n      control.value?.input?.click()\n    }\n\n    useRender(() => {\n      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const inputProps = VInput.filterProps(props)\n      const controlProps = VSelectionControl.filterProps(props)\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--flat': props.flat },\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => {\n              const slotProps = {\n                model,\n                isValid,\n              }\n\n              return (\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: ({ backgroundColorClasses, backgroundColorStyles }) => (\n                      <div\n                        class={[\n                          'v-switch__track',\n                          !isForcedColorsModeActive ? backgroundColorClasses.value : undefined,\n                        ]}\n                        style={ backgroundColorStyles.value }\n                        onClick={ onTrackClick }\n                      >\n                        { slots['track-true'] && (\n                          <div key=\"prepend\" class=\"v-switch__track-true\">\n                            { slots['track-true'](slotProps) }\n                          </div>\n                        )}\n\n                        { slots['track-false'] && (\n                          <div key=\"append\" class=\"v-switch__track-false\">\n                            { slots['track-false'](slotProps) }\n                          </div>\n                        )}\n                      </div>\n                    ),\n                    input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => (\n                      <>\n                        { inputNode }\n                        <div\n                          class={[\n                            'v-switch__thumb',\n                            { 'v-switch__thumb--filled': icon || props.loading },\n                            props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value,\n                          ]}\n                          style={ props.inset ? undefined : backgroundColorStyles.value }\n                        >\n                          { slots.thumb ? (\n                            <VDefaultsProvider\n                              defaults={{\n                                VIcon: {\n                                  icon,\n                                  size: 'x-small',\n                                },\n                              }}\n                            >\n                              { slots.thumb({ ...slotProps, icon }) }\n                            </VDefaultsProvider>\n                          ) : (\n                            <VScaleTransition>\n                              { !props.loading ? (\n                                (icon && (\n                                  <VIcon\n                                    key={ String(icon) }\n                                    icon={ icon }\n                                    size=\"x-small\"\n                                  />\n                                ))) : (\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                            </VScaleTransition>\n                          )}\n                        </div>\n                      </>\n                    ),\n                  }}\n                </VSelectionControl>\n              )\n            },\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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","ignoreList":[]}