@vuetify/nightly 3.9.0-master.2025-07-09 → 3.9.0-next.2025-07-09

package/lib/components/VSwitch/VSwitch.css

@@ -1,143 +1,133 @@
-.v-switch .v-label {
-  padding-inline-start: 10px;
-}
-
-.v-switch__loader {
-  display: flex;
-}
-.v-switch__loader .v-progress-circular {
-  color: rgb(var(--v-theme-surface));
-}
-
-.v-switch__track,
-.v-switch__thumb {
-  transition: none;
-}
-.v-selection-control--error:not(.v-selection-control--disabled) .v-switch__track,
-.v-selection-control--error:not(.v-selection-control--disabled) .v-switch__thumb {
-  background-color: rgb(var(--v-theme-error));
-  color: rgb(var(--v-theme-on-error));
-}
-
-.v-switch__track-true {
-  margin-inline-end: auto;
-}
-.v-selection-control:not(.v-selection-control--dirty) .v-switch__track-true {
-  opacity: 0;
-}
-
-.v-switch__track-false {
-  margin-inline-start: auto;
-}
-.v-selection-control--dirty .v-switch__track-false {
-  opacity: 0;
-}
-
-.v-switch__track {
-  display: inline-flex;
-  align-items: center;
-  font-size: 0.5rem;
-  padding: 0 5px;
-  background-color: rgb(var(--v-theme-surface-variant));
-  border-radius: 9999px;
-  height: 14px;
-  opacity: 0.6;
-  min-width: 36px;
-  cursor: pointer;
-  transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-switch--inset .v-switch__track {
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  height: 32px;
-  min-width: 52px;
-}
-
-.v-switch__thumb {
-  align-items: center;
-  background-color: rgb(var(--v-theme-surface-bright));
-  color: rgb(var(--v-theme-on-surface-bright));
-  border-radius: 50%;
-  display: flex;
-  font-size: 0.75rem;
-  height: 20px;
-  justify-content: center;
-  width: 20px;
-  pointer-events: none;
-  transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-}
-.v-switch:not(.v-switch--inset) .v-switch__thumb {
-  box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-}
-.v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
-  background: rgb(var(--v-theme-surface-variant));
-  color: rgb(var(--v-theme-on-surface-variant));
-}
-.v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
-  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-switch--inset .v-switch__thumb {
-  height: 24px;
-  width: 24px;
-  transform: scale(0.6666666667);
-}
-.v-switch--inset .v-switch__thumb--filled {
-  transform: none;
-}
-.v-switch--inset .v-selection-control--dirty .v-switch__thumb {
-  transform: none;
-  transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
-}
-
-.v-switch.v-input {
-  flex: 0 1 auto;
-}
-.v-switch .v-selection-control {
-  min-height: var(--v-input-control-height);
-}
-.v-switch .v-selection-control__input {
-  border-radius: 50%;
-  transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);
-  position: absolute;
-}
-.v-locale--is-ltr.v-switch .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control__input {
-  transform: translateX(-10px);
-}
-
-.v-locale--is-rtl.v-switch .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control__input {
-  transform: translateX(10px);
-}
-
-.v-switch .v-selection-control__input .v-icon {
-  position: absolute;
-}
-.v-locale--is-ltr.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control--dirty .v-selection-control__input {
-  transform: translateX(10px);
-}
-
-.v-locale--is-rtl.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control--dirty .v-selection-control__input {
-  transform: translateX(-10px);
-}
-
-.v-switch.v-switch--indeterminate .v-selection-control__input {
-  transform: scale(0.8);
-}
-.v-switch.v-switch--indeterminate .v-switch__thumb {
-  transform: scale(0.75);
-  box-shadow: none;
-}
-.v-switch.v-switch--inset .v-selection-control__wrapper {
-  width: auto;
-}
-.v-switch.v-input--vertical .v-label {
-  min-width: max-content;
-}
-.v-switch.v-input--vertical .v-selection-control__wrapper {
-  transform: rotate(-90deg);
+@layer vuetify.components {
+  .v-switch .v-label {
+    padding-inline-start: 10px;
+  }
+  .v-switch__loader {
+    display: flex;
+  }
+  .v-switch__loader .v-progress-circular {
+    color: rgb(var(--v-theme-surface));
+  }
+  .v-switch__track,
+  .v-switch__thumb {
+    transition: none;
+  }
+  .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__track,
+  .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__thumb {
+    background-color: rgb(var(--v-theme-error));
+    color: rgb(var(--v-theme-on-error));
+  }
+  .v-switch__track-true {
+    margin-inline-end: auto;
+  }
+  .v-selection-control:not(.v-selection-control--dirty) .v-switch__track-true {
+    opacity: 0;
+  }
+  .v-switch__track-false {
+    margin-inline-start: auto;
+  }
+  .v-selection-control--dirty .v-switch__track-false {
+    opacity: 0;
+  }
+  .v-switch__track {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.5rem;
+    padding: 0 5px;
+    background-color: rgb(var(--v-theme-surface-variant));
+    border-radius: 9999px;
+    height: 14px;
+    opacity: 0.6;
+    min-width: 36px;
+    cursor: pointer;
+    transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-switch--inset .v-switch__track {
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    height: 32px;
+    min-width: 52px;
+  }
+  .v-switch__thumb {
+    align-items: center;
+    background-color: rgb(var(--v-theme-surface-bright));
+    color: rgb(var(--v-theme-on-surface-bright));
+    border-radius: 50%;
+    display: flex;
+    font-size: 0.75rem;
+    height: 20px;
+    justify-content: center;
+    width: 20px;
+    pointer-events: none;
+    transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+  }
+  .v-switch:not(.v-switch--inset) .v-switch__thumb {
+    box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+  }
+  .v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
+    background: rgb(var(--v-theme-surface-variant));
+    color: rgb(var(--v-theme-on-surface-variant));
+  }
+  .v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
+    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-switch--inset .v-switch__thumb {
+    height: 24px;
+    width: 24px;
+    transform: scale(0.6666666667);
+  }
+  .v-switch--inset .v-switch__thumb--filled {
+    transform: none;
+  }
+  .v-switch--inset .v-selection-control--dirty .v-switch__thumb {
+    transform: none;
+    transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
+  }
+  .v-switch.v-input {
+    flex: 0 1 auto;
+  }
+  .v-switch .v-selection-control {
+    min-height: var(--v-input-control-height);
+  }
+  .v-switch .v-selection-control__input {
+    border-radius: 50%;
+    transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);
+    position: absolute;
+  }
+  .v-locale--is-ltr.v-switch .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control__input {
+    transform: translateX(-10px);
+  }
+  .v-locale--is-rtl.v-switch .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control__input {
+    transform: translateX(10px);
+  }
+  .v-switch .v-selection-control__input .v-icon {
+    position: absolute;
+  }
+  .v-locale--is-ltr.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control--dirty .v-selection-control__input {
+    transform: translateX(10px);
+  }
+  .v-locale--is-rtl.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control--dirty .v-selection-control__input {
+    transform: translateX(-10px);
+  }
+  .v-switch.v-switch--indeterminate .v-selection-control__input {
+    transform: scale(0.8);
+  }
+  .v-switch.v-switch--indeterminate .v-switch__thumb {
+    transform: scale(0.75);
+    box-shadow: none;
+  }
+  .v-switch.v-switch--inset .v-selection-control__wrapper {
+    width: auto;
+  }
+  .v-switch.v-input--vertical .v-label {
+    min-width: max-content;
+  }
+  .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;

package/lib/components/VSystemBar/VSystemBar.css

@@ -1,44 +1,46 @@
-.v-system-bar {
-  align-items: center;
-  display: flex;
-  flex: 1 1 auto;
-  height: 24px;
-  justify-content: flex-end;
-  max-width: 100%;
-  padding-inline: 8px;
-  position: relative;
-  text-align: end;
-  width: 100%;
-}
-.v-system-bar .v-icon {
-  opacity: var(--v-medium-emphasis-opacity);
-}
-.v-system-bar {
-  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-system-bar--absolute {
-  position: absolute;
-}
-.v-system-bar--fixed {
-  position: fixed;
-}
-.v-system-bar {
-  background: rgba(var(--v-theme-surface-light));
-  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
-}
-.v-system-bar {
-  font-size: 0.75rem;
-  font-weight: 400;
-  letter-spacing: 0.0333333333em;
-  line-height: 1.667;
-  text-transform: none;
-}
-.v-system-bar--rounded {
-  border-radius: 0;
-}
-.v-system-bar--window {
-  height: 32px;
-}
-.v-system-bar:not(.v-system-bar--absolute) {
-  padding-inline-end: calc(var(--v-scrollbar-offset) + 8px);
+@layer vuetify.components {
+  .v-system-bar {
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    height: 24px;
+    justify-content: flex-end;
+    max-width: 100%;
+    padding-inline: 8px;
+    position: relative;
+    text-align: end;
+    width: 100%;
+  }
+  .v-system-bar .v-icon {
+    opacity: var(--v-medium-emphasis-opacity);
+  }
+  .v-system-bar {
+    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-system-bar--absolute {
+    position: absolute;
+  }
+  .v-system-bar--fixed {
+    position: fixed;
+  }
+  .v-system-bar {
+    background: rgba(var(--v-theme-surface-light));
+    color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
+  }
+  .v-system-bar {
+    font-size: 0.75rem;
+    font-weight: 400;
+    letter-spacing: 0.0333333333em;
+    line-height: 1.667;
+    text-transform: none;
+  }
+  .v-system-bar--rounded {
+    border-radius: 0;
+  }
+  .v-system-bar--window {
+    height: 32px;
+  }
+  .v-system-bar:not(.v-system-bar--absolute) {
+    padding-inline-end: calc(var(--v-scrollbar-offset) + 8px);
+  }
 }