@vuetify/nightly 3.7.4-next.2024-11-06 → 3.7.5-dev.2024-12-03

package/lib/components/VDatePicker/VDatePickerHeader.css

@@ -1,57 +1,61 @@
-@layer vuetify.components {
-  .v-date-picker-header {
-    align-items: flex-end;
-    height: 70px;
-    display: grid;
-    grid-template-areas: "prepend content append";
-    grid-template-columns: min-content minmax(0, 1fr) min-content;
-    overflow: hidden;
-    padding-inline: 24px 12px;
-    padding-bottom: 12px;
-  }
-  .v-date-picker-header__append {
-    grid-area: append;
-  }
-  .v-date-picker-header__prepend {
-    grid-area: prepend;
-    padding-inline-start: 8px;
-  }
-  .v-date-picker-header__content {
-    align-items: center;
-    display: inline-flex;
-    font-size: 32px;
-    line-height: 40px;
-    grid-area: content;
-    justify-content: space-between;
-  }
-  .v-date-picker-header--clickable .v-date-picker-header__content {
-    cursor: pointer;
-  }
-  .v-date-picker-header--clickable .v-date-picker-header__content:not(:hover) {
-    opacity: 0.7;
-  }
-  .date-picker-header-transition-enter-active,
-  .date-picker-header-reverse-transition-enter-active {
-    transition-duration: 0.3s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .date-picker-header-transition-leave-active,
-  .date-picker-header-reverse-transition-leave-active {
-    transition-duration: 0.3s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .date-picker-header-transition-enter-from {
-    transform: translate(0, 100%);
-  }
-  .date-picker-header-transition-leave-to {
-    opacity: 0;
-    transform: translate(0, -100%);
-  }
-  .date-picker-header-reverse-transition-enter-from {
-    transform: translate(0, -100%);
-  }
-  .date-picker-header-reverse-transition-leave-to {
-    opacity: 0;
-    transform: translate(0, 100%);
-  }
+.v-date-picker-header {
+  align-items: flex-end;
+  height: 70px;
+  display: grid;
+  grid-template-areas: "prepend content append";
+  grid-template-columns: min-content minmax(0, 1fr) min-content;
+  overflow: hidden;
+  padding-inline: 24px 12px;
+  padding-bottom: 12px;
+}
+
+.v-date-picker-header__append {
+  grid-area: append;
+}
+
+.v-date-picker-header__prepend {
+  grid-area: prepend;
+  padding-inline-start: 8px;
+}
+
+.v-date-picker-header__content {
+  align-items: center;
+  display: inline-flex;
+  font-size: 32px;
+  line-height: 40px;
+  grid-area: content;
+  justify-content: space-between;
+}
+.v-date-picker-header--clickable .v-date-picker-header__content {
+  cursor: pointer;
+}
+.v-date-picker-header--clickable .v-date-picker-header__content:not(:hover) {
+  opacity: 0.7;
+}
+
+.date-picker-header-transition-enter-active,
+.date-picker-header-reverse-transition-enter-active {
+  transition-duration: 0.3s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.date-picker-header-transition-leave-active,
+.date-picker-header-reverse-transition-leave-active {
+  transition-duration: 0.3s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.date-picker-header-transition-enter-from {
+  transform: translate(0, 100%);
+}
+.date-picker-header-transition-leave-to {
+  opacity: 0;
+  transform: translate(0, -100%);
+}
+
+.date-picker-header-reverse-transition-enter-from {
+  transform: translate(0, -100%);
+}
+.date-picker-header-reverse-transition-leave-to {
+  opacity: 0;
+  transform: translate(0, 100%);
 }

package/lib/components/VDatePicker/VDatePickerHeader.mjs

@@ -6,10 +6,11 @@ import "./VDatePickerHeader.css";
 import { VBtn } from "../VBtn/index.mjs";
 import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
 import { useBackgroundColor } from "../../composables/color.mjs";
+import { IconValue } from "../../composables/icons.mjs";
 import { MaybeTransition } from "../../composables/transition.mjs"; // Utilities
 import { EventProp, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVDatePickerHeaderProps = propsFactory({
-  appendIcon: String,
+  appendIcon: IconValue,
   color: String,
   header: String,
   transition: String,

package/lib/components/VDatePicker/VDatePickerHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDatePickerHeader.mjs","names":["VBtn","VDefaultsProvider","useBackgroundColor","MaybeTransition","EventProp","genericComponent","propsFactory","useRender","makeVDatePickerHeaderProps","appendIcon","String","color","header","transition","onClick","VDatePickerHeader","name","props","emits","click","click:append","setup","_ref","emit","slots","backgroundColorClasses","backgroundColorStyles","onClickAppend","hasContent","default","hasAppend","append","_createVNode","value","prepend","icon","variant"],"sources":["../../../src/components/VDatePicker/VDatePickerHeader.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerHeader.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { EventProp, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nexport type VDatePickerHeaderSlots = {\n  prepend: never\n  default: never\n  append: never\n}\n\nexport const makeVDatePickerHeaderProps = propsFactory({\n  appendIcon: String,\n  color: String,\n  header: String,\n  transition: String,\n  onClick: EventProp<[MouseEvent]>(),\n}, 'VDatePickerHeader')\n\nexport const VDatePickerHeader = genericComponent<VDatePickerHeaderSlots>()({\n  name: 'VDatePickerHeader',\n\n  props: makeVDatePickerHeaderProps(),\n\n  emits: {\n    click: () => true,\n    'click:append': () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    function onClick () {\n      emit('click')\n    }\n\n    function onClickAppend () {\n      emit('click:append')\n    }\n\n    useRender(() => {\n      const hasContent = !!(slots.default || props.header)\n      const hasAppend = !!(slots.append || props.appendIcon)\n\n      return (\n        <div\n          class={[\n            'v-date-picker-header',\n            {\n              'v-date-picker-header--clickable': !!props.onClick,\n            },\n            backgroundColorClasses.value,\n          ]}\n          style={ backgroundColorStyles.value }\n          onClick={ onClick }\n        >\n          { slots.prepend && (\n            <div key=\"prepend\" class=\"v-date-picker-header__prepend\">\n              { slots.prepend() }\n            </div>\n          )}\n\n          { hasContent && (\n            <MaybeTransition key=\"content\" name={ props.transition }>\n              <div key={ props.header } class=\"v-date-picker-header__content\">\n                { slots.default?.() ?? props.header }\n              </div>\n            </MaybeTransition>\n          )}\n\n          { hasAppend && (\n            <div class=\"v-date-picker-header__append\">\n              { !slots.append ? (\n                <VBtn\n                  key=\"append-btn\"\n                  icon={ props.appendIcon }\n                  variant=\"text\"\n                  onClick={ onClickAppend }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"append-defaults\"\n                  disabled={ !props.appendIcon }\n                  defaults={{\n                    VBtn: {\n                      icon: props.appendIcon,\n                      variant: 'text',\n                    },\n                  }}\n                >\n                  { slots.append?.() }\n                </VDefaultsProvider>\n              )}\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDatePickerHeader = InstanceType<typeof VDatePickerHeader>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI;AAAA,SACJC,iBAAiB,0CAE1B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,eAAe,4CAExB;AAAA,SACSC,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAE7D;AAOA,OAAO,MAAMC,0BAA0B,GAAGF,YAAY,CAAC;EACrDG,UAAU,EAAEC,MAAM;EAClBC,KAAK,EAAED,MAAM;EACbE,MAAM,EAAEF,MAAM;EACdG,UAAU,EAAEH,MAAM;EAClBI,OAAO,EAAEV,SAAS,CAAe;AACnC,CAAC,EAAE,mBAAmB,CAAC;AAEvB,OAAO,MAAMW,iBAAiB,GAAGV,gBAAgB,CAAyB,CAAC,CAAC;EAC1EW,IAAI,EAAE,mBAAmB;EAEzBC,KAAK,EAAET,0BAA0B,CAAC,CAAC;EAEnCU,KAAK,EAAE;IACLC,KAAK,EAAEA,CAAA,KAAM,IAAI;IACjB,cAAc,EAAEC,CAAA,KAAM;EACxB,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG,sBAAsB;MAAEC;IAAsB,CAAC,GAAGxB,kBAAkB,CAACe,KAAK,EAAE,OAAO,CAAC;IAE5F,SAASH,OAAOA,CAAA,EAAI;MAClBS,IAAI,CAAC,OAAO,CAAC;IACf;IAEA,SAASI,aAAaA,CAAA,EAAI;MACxBJ,IAAI,CAAC,cAAc,CAAC;IACtB;IAEAhB,SAAS,CAAC,MAAM;MACd,MAAMqB,UAAU,GAAG,CAAC,EAAEJ,KAAK,CAACK,OAAO,IAAIZ,KAAK,CAACL,MAAM,CAAC;MACpD,MAAMkB,SAAS,GAAG,CAAC,EAAEN,KAAK,CAACO,MAAM,IAAId,KAAK,CAACR,UAAU,CAAC;MAEtD,OAAAuB,YAAA;QAAA,SAEW,CACL,sBAAsB,EACtB;UACE,iCAAiC,EAAE,CAAC,CAACf,KAAK,CAACH;QAC7C,CAAC,EACDW,sBAAsB,CAACQ,KAAK,CAC7B;QAAA,SACOP,qBAAqB,CAACO,KAAK;QAAA,WACzBnB;MAAO,IAEfU,KAAK,CAACU,OAAO,IAAAF,YAAA;QAAA;QAAA;MAAA,IAETR,KAAK,CAACU,OAAO,CAAC,CAAC,EAEpB,EAECN,UAAU,IAAAI,YAAA,CAAA7B,eAAA;QAAA;QAAA,QAC4Bc,KAAK,CAACJ;MAAU;QAAAgB,OAAA,EAAAA,CAAA,MAAAG,YAAA;UAAA,OACzCf,KAAK,CAACL,MAAM;UAAA;QAAA,IACnBY,KAAK,CAACK,OAAO,GAAG,CAAC,IAAIZ,KAAK,CAACL,MAAM;MAAA,EAGxC,EAECkB,SAAS,IAAAE,YAAA;QAAA;MAAA,IAEL,CAACR,KAAK,CAACO,MAAM,GAAAC,YAAA,CAAAhC,IAAA;QAAA;QAAA,QAGJiB,KAAK,CAACR,UAAU;QAAA;QAAA,WAEbkB;MAAa,WAAAK,YAAA,CAAA/B,iBAAA;QAAA;QAAA,YAKZ,CAACgB,KAAK,CAACR,UAAU;QAAA,YAClB;UACRT,IAAI,EAAE;YACJmC,IAAI,EAAElB,KAAK,CAACR,UAAU;YACtB2B,OAAO,EAAE;UACX;QACF;MAAC;QAAAP,OAAA,EAAAA,CAAA,MAECL,KAAK,CAACO,MAAM,GAAG,CAAC;MAAA,EAErB,EAEJ;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VDatePickerHeader.mjs","names":["VBtn","VDefaultsProvider","useBackgroundColor","IconValue","MaybeTransition","EventProp","genericComponent","propsFactory","useRender","makeVDatePickerHeaderProps","appendIcon","color","String","header","transition","onClick","VDatePickerHeader","name","props","emits","click","click:append","setup","_ref","emit","slots","backgroundColorClasses","backgroundColorStyles","onClickAppend","hasContent","default","hasAppend","append","_createVNode","value","prepend","icon","variant"],"sources":["../../../src/components/VDatePicker/VDatePickerHeader.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerHeader.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { IconValue } from '@/composables/icons'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { EventProp, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nexport type VDatePickerHeaderSlots = {\n  prepend: never\n  default: never\n  append: never\n}\n\nexport const makeVDatePickerHeaderProps = propsFactory({\n  appendIcon: IconValue,\n  color: String,\n  header: String,\n  transition: String,\n  onClick: EventProp<[MouseEvent]>(),\n}, 'VDatePickerHeader')\n\nexport const VDatePickerHeader = genericComponent<VDatePickerHeaderSlots>()({\n  name: 'VDatePickerHeader',\n\n  props: makeVDatePickerHeaderProps(),\n\n  emits: {\n    click: () => true,\n    'click:append': () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    function onClick () {\n      emit('click')\n    }\n\n    function onClickAppend () {\n      emit('click:append')\n    }\n\n    useRender(() => {\n      const hasContent = !!(slots.default || props.header)\n      const hasAppend = !!(slots.append || props.appendIcon)\n\n      return (\n        <div\n          class={[\n            'v-date-picker-header',\n            {\n              'v-date-picker-header--clickable': !!props.onClick,\n            },\n            backgroundColorClasses.value,\n          ]}\n          style={ backgroundColorStyles.value }\n          onClick={ onClick }\n        >\n          { slots.prepend && (\n            <div key=\"prepend\" class=\"v-date-picker-header__prepend\">\n              { slots.prepend() }\n            </div>\n          )}\n\n          { hasContent && (\n            <MaybeTransition key=\"content\" name={ props.transition }>\n              <div key={ props.header } class=\"v-date-picker-header__content\">\n                { slots.default?.() ?? props.header }\n              </div>\n            </MaybeTransition>\n          )}\n\n          { hasAppend && (\n            <div class=\"v-date-picker-header__append\">\n              { !slots.append ? (\n                <VBtn\n                  key=\"append-btn\"\n                  icon={ props.appendIcon }\n                  variant=\"text\"\n                  onClick={ onClickAppend }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"append-defaults\"\n                  disabled={ !props.appendIcon }\n                  defaults={{\n                    VBtn: {\n                      icon: props.appendIcon,\n                      variant: 'text',\n                    },\n                  }}\n                >\n                  { slots.append?.() }\n                </VDefaultsProvider>\n              )}\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDatePickerHeader = InstanceType<typeof VDatePickerHeader>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI;AAAA,SACJC,iBAAiB,0CAE1B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,SAAS;AAAA,SACTC,eAAe,4CAExB;AAAA,SACSC,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAE7D;AAOA,OAAO,MAAMC,0BAA0B,GAAGF,YAAY,CAAC;EACrDG,UAAU,EAAEP,SAAS;EACrBQ,KAAK,EAAEC,MAAM;EACbC,MAAM,EAAED,MAAM;EACdE,UAAU,EAAEF,MAAM;EAClBG,OAAO,EAAEV,SAAS,CAAe;AACnC,CAAC,EAAE,mBAAmB,CAAC;AAEvB,OAAO,MAAMW,iBAAiB,GAAGV,gBAAgB,CAAyB,CAAC,CAAC;EAC1EW,IAAI,EAAE,mBAAmB;EAEzBC,KAAK,EAAET,0BAA0B,CAAC,CAAC;EAEnCU,KAAK,EAAE;IACLC,KAAK,EAAEA,CAAA,KAAM,IAAI;IACjB,cAAc,EAAEC,CAAA,KAAM;EACxB,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG,sBAAsB;MAAEC;IAAsB,CAAC,GAAGzB,kBAAkB,CAACgB,KAAK,EAAE,OAAO,CAAC;IAE5F,SAASH,OAAOA,CAAA,EAAI;MAClBS,IAAI,CAAC,OAAO,CAAC;IACf;IAEA,SAASI,aAAaA,CAAA,EAAI;MACxBJ,IAAI,CAAC,cAAc,CAAC;IACtB;IAEAhB,SAAS,CAAC,MAAM;MACd,MAAMqB,UAAU,GAAG,CAAC,EAAEJ,KAAK,CAACK,OAAO,IAAIZ,KAAK,CAACL,MAAM,CAAC;MACpD,MAAMkB,SAAS,GAAG,CAAC,EAAEN,KAAK,CAACO,MAAM,IAAId,KAAK,CAACR,UAAU,CAAC;MAEtD,OAAAuB,YAAA;QAAA,SAEW,CACL,sBAAsB,EACtB;UACE,iCAAiC,EAAE,CAAC,CAACf,KAAK,CAACH;QAC7C,CAAC,EACDW,sBAAsB,CAACQ,KAAK,CAC7B;QAAA,SACOP,qBAAqB,CAACO,KAAK;QAAA,WACzBnB;MAAO,IAEfU,KAAK,CAACU,OAAO,IAAAF,YAAA;QAAA;QAAA;MAAA,IAETR,KAAK,CAACU,OAAO,CAAC,CAAC,EAEpB,EAECN,UAAU,IAAAI,YAAA,CAAA7B,eAAA;QAAA;QAAA,QAC4Bc,KAAK,CAACJ;MAAU;QAAAgB,OAAA,EAAAA,CAAA,MAAAG,YAAA;UAAA,OACzCf,KAAK,CAACL,MAAM;UAAA;QAAA,IACnBY,KAAK,CAACK,OAAO,GAAG,CAAC,IAAIZ,KAAK,CAACL,MAAM;MAAA,EAGxC,EAECkB,SAAS,IAAAE,YAAA;QAAA;MAAA,IAEL,CAACR,KAAK,CAACO,MAAM,GAAAC,YAAA,CAAAjC,IAAA;QAAA;QAAA,QAGJkB,KAAK,CAACR,UAAU;QAAA;QAAA,WAEbkB;MAAa,WAAAK,YAAA,CAAAhC,iBAAA;QAAA;QAAA,YAKZ,CAACiB,KAAK,CAACR,UAAU;QAAA,YAClB;UACRV,IAAI,EAAE;YACJoC,IAAI,EAAElB,KAAK,CAACR,UAAU;YACtB2B,OAAO,EAAE;UACX;QACF;MAAC;QAAAP,OAAA,EAAAA,CAAA,MAECL,KAAK,CAACO,MAAM,GAAG,CAAC;MAAA,EAErB,EAEJ;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VDatePicker/VDatePickerMonth.css

@@ -1,52 +1,56 @@
-@layer vuetify.components {
-  .v-date-picker-month {
-    display: flex;
-    justify-content: center;
-    padding: 0 12px 8px;
-    --v-date-picker-month-day-diff: 4px;
-  }
-  .v-date-picker-month__weeks {
-    display: grid;
-    grid-template-rows: min-content min-content min-content min-content min-content min-content min-content;
-    column-gap: 4px;
-    font-size: 0.85rem;
-  }
-  .v-date-picker-month__weeks + .v-date-picker-month__days {
-    grid-row-gap: 0;
-  }
-  .v-date-picker-month__weekday {
-    font-size: 0.85rem;
-  }
-  .v-date-picker-month__days {
-    display: grid;
-    grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
-    column-gap: 4px;
-    flex: 1 1;
-    justify-content: space-around;
-  }
-  .v-date-picker-month__day {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    position: relative;
-    height: 40px;
-    width: 40px;
-  }
-  .v-date-picker-month__day--selected .v-btn {
-    background-color: rgb(var(--v-theme-surface-variant));
-    color: rgb(var(--v-theme-on-surface-variant));
-  }
-  .v-date-picker-month__day .v-btn.v-date-picker-month__day-btn {
-    --v-btn-height: 24px;
-    --v-btn-size: 0.85rem;
-  }
-  .v-date-picker-month__day--week {
-    font-size: var(--v-btn-size);
-  }
-  .v-date-picker-month__day--adjacent {
-    opacity: 0.5;
-  }
-  .v-date-picker-month__day--hide-adjacent {
-    opacity: 0;
-  }
+.v-date-picker-month {
+  display: flex;
+  justify-content: center;
+  padding: 0 12px 8px;
+  --v-date-picker-month-day-diff: 4px;
+}
+
+.v-date-picker-month__weeks {
+  display: grid;
+  grid-template-rows: min-content min-content min-content min-content min-content min-content min-content;
+  column-gap: 4px;
+  font-size: 0.85rem;
+}
+.v-date-picker-month__weeks + .v-date-picker-month__days {
+  grid-row-gap: 0;
+}
+
+.v-date-picker-month__weekday {
+  font-size: 0.85rem;
+}
+
+.v-date-picker-month__days {
+  display: grid;
+  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
+  column-gap: 4px;
+  flex: 1 1;
+  justify-content: space-around;
+}
+
+.v-date-picker-month__day {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  height: 40px;
+  width: 40px;
+}
+.v-date-picker-month__day--selected .v-btn {
+  background-color: rgb(var(--v-theme-surface-variant));
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+.v-date-picker-month__day .v-btn.v-date-picker-month__day-btn {
+  --v-btn-height: 24px;
+  --v-btn-size: 0.85rem;
+}
+.v-date-picker-month__day--week {
+  font-size: var(--v-btn-size);
+}
+
+.v-date-picker-month__day--adjacent {
+  opacity: 0.5;
+}
+
+.v-date-picker-month__day--hide-adjacent {
+  opacity: 0;
 }

package/lib/components/VDatePicker/VDatePickerMonths.css

@@ -1,21 +1,20 @@
-@layer vuetify.components {
-  .v-date-picker-months {
-    height: 288px;
-  }
-  .v-date-picker-months__content {
-    align-items: center;
-    display: grid;
-    flex: 1 1;
-    height: inherit;
-    justify-content: space-around;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 0px 24px;
-    padding-inline-start: 36px;
-    padding-inline-end: 36px;
-  }
-  .v-date-picker-months__content .v-btn {
-    text-transform: none;
-    padding-inline-start: 8px;
-    padding-inline-end: 8px;
-  }
+.v-date-picker-months {
+  height: 288px;
+}
+
+.v-date-picker-months__content {
+  align-items: center;
+  display: grid;
+  flex: 1 1;
+  height: inherit;
+  justify-content: space-around;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0px 24px;
+  padding-inline-start: 36px;
+  padding-inline-end: 36px;
+}
+.v-date-picker-months__content .v-btn {
+  text-transform: none;
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
 }

package/lib/components/VDatePicker/VDatePickerYears.css

@@ -1,17 +1,16 @@
-@layer vuetify.components {
-  .v-date-picker-years {
-    height: 288px;
-    overflow-y: scroll;
-  }
-  .v-date-picker-years__content {
-    display: grid;
-    flex: 1 1;
-    justify-content: space-around;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px 24px;
-    padding-inline: 32px;
-  }
-  .v-date-picker-years__content .v-btn {
-    padding-inline: 8px;
-  }
+.v-date-picker-years {
+  height: 288px;
+  overflow-y: scroll;
+}
+
+.v-date-picker-years__content {
+  display: grid;
+  flex: 1 1;
+  justify-content: space-around;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px 24px;
+  padding-inline: 32px;
+}
+.v-date-picker-years__content .v-btn {
+  padding-inline: 8px;
 }

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

@@ -721,7 +721,7 @@ declare const VDatePickerHeader: {
         transition?: string | undefined;
         header?: string | undefined;
         onClick?: ((args_0: MouseEvent) => void) | undefined;
-        appendIcon?: string | undefined;
+        appendIcon?: IconValue | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             prepend?: (() => vue.VNodeChild) | undefined;
@@ -759,7 +759,7 @@ declare const VDatePickerHeader: {
         transition?: string | undefined;
         header?: string | undefined;
         onClick?: ((args_0: MouseEvent) => void) | undefined;
-        appendIcon?: string | undefined;
+        appendIcon?: IconValue | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             prepend?: (() => vue.VNodeChild) | undefined;
@@ -787,7 +787,7 @@ declare const VDatePickerHeader: {
     transition?: string | undefined;
     header?: string | undefined;
     onClick?: ((args_0: MouseEvent) => void) | undefined;
-    appendIcon?: string | undefined;
+    appendIcon?: IconValue | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         prepend?: (() => vue.VNodeChild) | undefined;
@@ -814,13 +814,13 @@ declare const VDatePickerHeader: {
     default: () => vue.VNode[];
     append: () => vue.VNode[];
 }>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
-    appendIcon: StringConstructor;
+    appendIcon: vue.PropType<IconValue>;
     color: StringConstructor;
     header: StringConstructor;
     transition: StringConstructor;
     onClick: vue.PropType<(args_0: MouseEvent) => void>;
 }, vue.ExtractPropTypes<{
-    appendIcon: StringConstructor;
+    appendIcon: vue.PropType<IconValue>;
     color: StringConstructor;
     header: StringConstructor;
     transition: StringConstructor;

package/lib/components/VDialog/VDialog.css

@@ -1,96 +1,96 @@
-@layer vuetify.components {
-  .v-dialog {
-    align-items: center;
-    justify-content: center;
-    margin: auto;
-  }
-  .v-dialog > .v-overlay__content {
-    max-height: calc(100% - 48px);
-    width: calc(100% - 48px);
-    max-width: calc(100% - 48px);
-    margin: 24px;
-  }
-  .v-dialog > .v-overlay__content,
-  .v-dialog > .v-overlay__content > form {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-  .v-dialog > .v-overlay__content > .v-card,
-  .v-dialog > .v-overlay__content > .v-sheet,
-  .v-dialog > .v-overlay__content > form > .v-card,
-  .v-dialog > .v-overlay__content > form > .v-sheet {
-    --v-scrollbar-offset: 0px;
-    border-radius: 4px;
-    overflow-y: auto;
-    flex: 1 1 100%;
-  }
-  .v-dialog > .v-overlay__content > .v-card,
-  .v-dialog > .v-overlay__content > .v-sheet,
-  .v-dialog > .v-overlay__content > form > .v-card,
-  .v-dialog > .v-overlay__content > form > .v-sheet {
-    box-shadow: 0px 11px 15px -7px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 24px 38px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 9px 46px 8px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  }
-  .v-dialog > .v-overlay__content > .v-card,
-  .v-dialog > .v-overlay__content > form > .v-card {
-    display: flex;
-    flex-direction: column;
-  }
-  .v-dialog > .v-overlay__content > .v-card > .v-card-item,
-  .v-dialog > .v-overlay__content > form > .v-card > .v-card-item {
-    padding: 16px 24px;
-  }
-  .v-dialog > .v-overlay__content > .v-card > .v-card-item + .v-card-text,
-  .v-dialog > .v-overlay__content > form > .v-card > .v-card-item + .v-card-text {
-    padding-top: 0;
-  }
-  .v-dialog > .v-overlay__content > .v-card > .v-card-text,
-  .v-dialog > .v-overlay__content > form > .v-card > .v-card-text {
-    font-size: inherit;
-    letter-spacing: 0.03125em;
-    line-height: inherit;
-    padding: 16px 24px 24px;
-  }
-  .v-dialog > .v-overlay__content > .v-card > .v-card-actions,
-  .v-dialog > .v-overlay__content > form > .v-card > .v-card-actions {
-    justify-content: flex-end;
-  }
-  .v-dialog--fullscreen {
-    --v-scrollbar-offset: 0px;
-  }
-  .v-dialog--fullscreen > .v-overlay__content {
-    border-radius: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-    top: 0;
-    left: 0;
-  }
-  .v-dialog--fullscreen > .v-overlay__content > .v-card,
-  .v-dialog--fullscreen > .v-overlay__content > .v-sheet,
-  .v-dialog--fullscreen > .v-overlay__content > form > .v-card,
-  .v-dialog--fullscreen > .v-overlay__content > form > .v-sheet {
-    min-height: 100%;
-    min-width: 100%;
-    border-radius: 0;
-  }
-  .v-dialog--scrollable > .v-overlay__content,
-  .v-dialog--scrollable > .v-overlay__content > .v-card,
-  .v-dialog--scrollable > .v-overlay__content > form,
-  .v-dialog--scrollable > .v-overlay__content > form > .v-card {
-    display: flex;
-    flex: 1 1 100%;
-    flex-direction: column;
-    max-height: 100%;
-    max-width: 100%;
-  }
-  .v-dialog--scrollable > .v-overlay__content > .v-card > .v-card-text,
-  .v-dialog--scrollable > .v-overlay__content > form > .v-card > .v-card-text {
-    backface-visibility: hidden;
-    overflow-y: auto;
-  }
+.v-dialog {
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
+.v-dialog > .v-overlay__content {
+  max-height: calc(100% - 48px);
+  width: calc(100% - 48px);
+  max-width: calc(100% - 48px);
+  margin: 24px;
+}
+.v-dialog > .v-overlay__content,
+.v-dialog > .v-overlay__content > form {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.v-dialog > .v-overlay__content > .v-card,
+.v-dialog > .v-overlay__content > .v-sheet,
+.v-dialog > .v-overlay__content > form > .v-card,
+.v-dialog > .v-overlay__content > form > .v-sheet {
+  --v-scrollbar-offset: 0px;
+  border-radius: 4px;
+  overflow-y: auto;
+  flex: 1 1 100%;
+}
+.v-dialog > .v-overlay__content > .v-card,
+.v-dialog > .v-overlay__content > .v-sheet,
+.v-dialog > .v-overlay__content > form > .v-card,
+.v-dialog > .v-overlay__content > form > .v-sheet {
+  box-shadow: 0px 11px 15px -7px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 24px 38px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 9px 46px 8px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-dialog > .v-overlay__content > .v-card,
+.v-dialog > .v-overlay__content > form > .v-card {
+  display: flex;
+  flex-direction: column;
+}
+.v-dialog > .v-overlay__content > .v-card > .v-card-item,
+.v-dialog > .v-overlay__content > form > .v-card > .v-card-item {
+  padding: 16px 24px;
+}
+.v-dialog > .v-overlay__content > .v-card > .v-card-item + .v-card-text,
+.v-dialog > .v-overlay__content > form > .v-card > .v-card-item + .v-card-text {
+  padding-top: 0;
+}
+.v-dialog > .v-overlay__content > .v-card > .v-card-text,
+.v-dialog > .v-overlay__content > form > .v-card > .v-card-text {
+  font-size: inherit;
+  letter-spacing: 0.03125em;
+  line-height: inherit;
+  padding: 16px 24px 24px;
+}
+.v-dialog > .v-overlay__content > .v-card > .v-card-actions,
+.v-dialog > .v-overlay__content > form > .v-card > .v-card-actions {
+  justify-content: flex-end;
+}
+
+.v-dialog--fullscreen {
+  --v-scrollbar-offset: 0px;
+}
+.v-dialog--fullscreen > .v-overlay__content {
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+  top: 0;
+  left: 0;
+}
+.v-dialog--fullscreen > .v-overlay__content > .v-card,
+.v-dialog--fullscreen > .v-overlay__content > .v-sheet,
+.v-dialog--fullscreen > .v-overlay__content > form > .v-card,
+.v-dialog--fullscreen > .v-overlay__content > form > .v-sheet {
+  min-height: 100%;
+  min-width: 100%;
+  border-radius: 0;
+}
+
+.v-dialog--scrollable > .v-overlay__content,
+.v-dialog--scrollable > .v-overlay__content > .v-card,
+.v-dialog--scrollable > .v-overlay__content > form,
+.v-dialog--scrollable > .v-overlay__content > form > .v-card {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+}
+.v-dialog--scrollable > .v-overlay__content > .v-card > .v-card-text,
+.v-dialog--scrollable > .v-overlay__content > form > .v-card > .v-card-text {
+  backface-visibility: hidden;
+  overflow-y: auto;
 }