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

package/lib/components/VBtn/VBtn.sass

@@ -88,8 +88,9 @@
           opacity: $button-disabled-opacity
       @else
         opacity: 1
-        @include tools.layer('trumps')
-          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
+        &.v-btn
+          // specificity has to be higher to override theme !important
+          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important
 
       &.v-btn--variant-elevated,
       &.v-btn--variant-flat
@@ -100,8 +101,7 @@
           color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
           background: rgb(var(--v-theme-surface))
         @else
-          @include tools.layer('trumps')
-            background: rgb(var(--v-theme-surface))
+          background: rgb(var(--v-theme-surface)) !important
 
         .v-btn__overlay
           // __overlay uses currentColor, so we need to divide

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

@@ -16,22 +16,22 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 }
 
 interface GroupItem {
-    id: number;
+    id: string;
     value: Ref<unknown>;
     disabled: Ref<boolean | undefined>;
     useIndexAsValue?: boolean;
 }
 interface GroupProvide {
     register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
-    unregister: (id: number) => void;
-    select: (id: number, value: boolean) => void;
-    selected: Ref<Readonly<number[]>>;
-    isSelected: (id: number) => boolean;
+    unregister: (id: string) => void;
+    select: (id: string, value: boolean) => void;
+    selected: Ref<Readonly<string[]>>;
+    isSelected: (id: string) => boolean;
     prev: () => void;
     next: () => void;
     selectedClass: Ref<string | undefined>;
     items: ComputedRef<{
-        id: number;
+        id: string;
         value: unknown;
         disabled: boolean | undefined;
     }[]>;
@@ -39,7 +39,7 @@ interface GroupProvide {
     getItemIndex: (value: unknown) => number;
 }
 interface GroupItemProvide {
-    id: number;
+    id: string;
     isSelected: Ref<boolean>;
     isFirst: Ref<boolean>;
     isLast: Ref<boolean>;

package/lib/components/VBtnGroup/VBtnGroup.css

@@ -1,64 +1,65 @@
-@layer vuetify.components {
-  .v-btn-group {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    max-width: 100%;
-    min-width: 0;
-    overflow: hidden;
-    vertical-align: middle;
-  }
-  .v-btn-group {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    border-style: solid;
-    border-width: 0;
-  }
-  .v-btn-group--border {
-    border-width: thin;
-    box-shadow: none;
-  }
-  .v-btn-group {
-    box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  }
-  .v-btn-group {
-    border-radius: 4px;
-  }
-  .v-btn-group {
-    background: transparent;
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-  }
-  .v-btn-group--density-default.v-btn-group {
-    height: 48px;
-  }
-  .v-btn-group--density-comfortable.v-btn-group {
-    height: 40px;
-  }
-  .v-btn-group--density-compact.v-btn-group {
-    height: 36px;
-  }
-  .v-btn-group .v-btn {
-    border-radius: 0;
-    border-color: inherit;
-  }
-  .v-btn-group .v-btn:not(:last-child) {
-    border-inline-end: none;
-  }
-  .v-btn-group .v-btn:not(:first-child) {
-    border-inline-start: none;
-  }
-  .v-btn-group .v-btn:first-child {
-    border-start-start-radius: inherit;
-    border-end-start-radius: inherit;
-  }
-  .v-btn-group .v-btn:last-child {
-    border-start-end-radius: inherit;
-    border-end-end-radius: inherit;
-  }
-  .v-btn-group--divided .v-btn:not(:last-child) {
-    border-inline-end-width: thin;
-    border-inline-end-style: solid;
-    border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-  .v-btn-group--tile {
-    border-radius: 0;
-  }
+.v-btn-group {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.v-btn-group {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+}
+.v-btn-group--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-btn-group {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-btn-group {
+  border-radius: 4px;
+}
+.v-btn-group {
+  background: transparent;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-btn-group--density-default.v-btn-group {
+  height: 48px;
+}
+
+.v-btn-group--density-comfortable.v-btn-group {
+  height: 40px;
+}
+
+.v-btn-group--density-compact.v-btn-group {
+  height: 36px;
+}
+
+.v-btn-group .v-btn {
+  border-radius: 0;
+  border-color: inherit;
+}
+.v-btn-group .v-btn:not(:last-child) {
+  border-inline-end: none;
+}
+.v-btn-group .v-btn:not(:first-child) {
+  border-inline-start: none;
+}
+.v-btn-group .v-btn:first-child {
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
+}
+.v-btn-group .v-btn:last-child {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+.v-btn-group--divided .v-btn:not(:last-child) {
+  border-inline-end-width: thin;
+  border-inline-end-style: solid;
+  border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-btn-group--tile {
+  border-radius: 0;
 }

package/lib/components/VBtnToggle/VBtnToggle.css

@@ -1,19 +1,17 @@
-@layer vuetify.components {
-  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled) > .v-btn__overlay {
-    opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
-  }
-  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):hover > .v-btn__overlay {
-    opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-  }
-  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus-visible > .v-btn__overlay {
+.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled) > .v-btn__overlay {
+  opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
+}
+.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):hover > .v-btn__overlay {
+  opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+}
+.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus-visible > .v-btn__overlay {
+  opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+}
+@supports not selector(:focus-visible) {
+  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus > .v-btn__overlay {
     opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
   }
-  @supports not selector(:focus-visible) {
-    .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus > .v-btn__overlay {
-      opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
-    }
-  }
-  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled).v-btn--variant-plain {
-    opacity: 1;
-  }
+}
+.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled).v-btn--variant-plain {
+  opacity: 1;
 }

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

@@ -38,22 +38,22 @@ declare const allowedVariants: readonly ["elevated", "flat", "tonal", "outlined"
 type Variant = typeof allowedVariants[number];
 
 interface GroupItem {
-    id: number;
+    id: string;
     value: Ref<unknown>;
     disabled: Ref<boolean | undefined>;
     useIndexAsValue?: boolean;
 }
 interface GroupProvide {
     register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
-    unregister: (id: number) => void;
-    select: (id: number, value: boolean) => void;
-    selected: Ref<Readonly<number[]>>;
-    isSelected: (id: number) => boolean;
+    unregister: (id: string) => void;
+    select: (id: string, value: boolean) => void;
+    selected: Ref<Readonly<string[]>>;
+    isSelected: (id: string) => boolean;
     prev: () => void;
     next: () => void;
     selectedClass: Ref<string | undefined>;
     items: ComputedRef<{
-        id: number;
+        id: string;
         value: unknown;
         disabled: boolean | undefined;
     }[]>;
@@ -91,7 +91,7 @@ declare const VBtnToggle: {
     } & {}, {
         next: () => void;
         prev: () => void;
-        select: (id: number, value: boolean) => void;
+        select: (id: string, value: boolean) => void;
     }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
         'update:modelValue': (value: any) => true;
     }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
@@ -136,7 +136,7 @@ declare const VBtnToggle: {
     } & {}, {
         next: () => void;
         prev: () => void;
-        select: (id: number, value: boolean) => void;
+        select: (id: string, value: boolean) => void;
     }, {}, {}, {}, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
         style: vue.StyleValue;
@@ -174,7 +174,7 @@ declare const VBtnToggle: {
 } & {}, {
     next: () => void;
     prev: () => void;
-    select: (id: number, value: boolean) => void;
+    select: (id: string, value: boolean) => void;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
     'update:modelValue': (value: any) => true;
 }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue">, string, {