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

package/lib/components/VSelect/VSelect.css

@@ -1,53 +1,55 @@
-.v-select .v-field .v-text-field__prefix,
-.v-select .v-field .v-text-field__suffix,
-.v-select .v-field .v-field__input, .v-select .v-field.v-field {
-  cursor: pointer;
-}
-.v-select .v-field .v-field__input > input {
-  align-self: flex-start;
-  opacity: 1;
-  flex: 0 0;
-  position: absolute;
-  width: 100%;
-  transition: none;
-  pointer-events: none;
-  caret-color: transparent;
-}
-.v-select .v-field--dirty .v-select__selection {
-  margin-inline-end: 2px;
-}
-.v-select .v-select__selection-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.v-select__content {
-  overflow: hidden;
-}
-.v-select__content {
-  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-select__content {
-  border-radius: 4px;
-}
-.v-select__selection {
-  display: inline-flex;
-  align-items: center;
-  letter-spacing: inherit;
-  line-height: inherit;
-  max-width: 100%;
-}
-.v-select .v-select__selection:first-child {
-  margin-inline-start: 0;
-}
-.v-select--selected .v-field .v-field__input > input {
-  opacity: 0;
-}
-.v-select__menu-icon {
-  margin-inline-start: 4px;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-select--active-menu .v-select__menu-icon {
-  opacity: var(--v-high-emphasis-opacity);
-  transform: rotate(180deg);
+@layer vuetify.components {
+  .v-select .v-field .v-text-field__prefix,
+  .v-select .v-field .v-text-field__suffix,
+  .v-select .v-field .v-field__input, .v-select .v-field.v-field {
+    cursor: pointer;
+  }
+  .v-select .v-field .v-field__input > input {
+    align-self: flex-start;
+    opacity: 1;
+    flex: 0 0;
+    position: absolute;
+    width: 100%;
+    transition: none;
+    pointer-events: none;
+    caret-color: transparent;
+  }
+  .v-select .v-field--dirty .v-select__selection {
+    margin-inline-end: 2px;
+  }
+  .v-select .v-select__selection-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .v-select__content {
+    overflow: hidden;
+  }
+  .v-select__content {
+    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-select__content {
+    border-radius: 4px;
+  }
+  .v-select__selection {
+    display: inline-flex;
+    align-items: center;
+    letter-spacing: inherit;
+    line-height: inherit;
+    max-width: 100%;
+  }
+  .v-select .v-select__selection:first-child {
+    margin-inline-start: 0;
+  }
+  .v-select--selected .v-field .v-field__input > input {
+    opacity: 0;
+  }
+  .v-select__menu-icon {
+    margin-inline-start: 4px;
+    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-select--active-menu .v-select__menu-icon {
+    opacity: var(--v-high-emphasis-opacity);
+    transform: rotate(180deg);
+  }
 }

package/lib/components/VSelectionControl/VSelectionControl.css

@@ -1,103 +1,101 @@
-.v-selection-control {
-  align-items: center;
-  contain: layout;
-  display: flex;
-  flex: 1 0;
-  grid-area: control;
-  position: relative;
-  user-select: none;
-}
-.v-selection-control .v-label {
-  white-space: normal;
-  word-break: break-word;
-  height: 100%;
-}
-.v-selection-control--disabled {
-  opacity: var(--v-disabled-opacity);
-  pointer-events: none;
-}
-.v-selection-control--error .v-label, .v-selection-control--disabled .v-label {
-  opacity: 1;
-}
-.v-selection-control--error:not(.v-selection-control--disabled) .v-label {
-  color: rgb(var(--v-theme-error));
-}
-.v-selection-control--inline {
-  display: inline-flex;
-  flex: 0 0 auto;
-  min-width: 0;
-  max-width: 100%;
-}
-.v-selection-control--inline .v-label {
-  width: auto;
-}
-.v-selection-control--density-default {
-  --v-selection-control-size: 40px;
-}
-
-.v-selection-control--density-comfortable {
-  --v-selection-control-size: 36px;
-}
-
-.v-selection-control--density-compact {
-  --v-selection-control-size: 28px;
-}
-
-.v-selection-control__wrapper {
-  width: var(--v-selection-control-size);
-  height: var(--v-selection-control-size);
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  justify-content: center;
-  flex: none;
-}
-
-.v-selection-control__input {
-  width: var(--v-selection-control-size);
-  height: var(--v-selection-control-size);
-  align-items: center;
-  display: flex;
-  flex: none;
-  justify-content: center;
-  position: relative;
-  border-radius: 50%;
-}
-.v-selection-control__input input {
-  cursor: pointer;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-}
-.v-selection-control__input::before {
-  border-radius: 100%;
-  background-color: currentColor;
-  opacity: 0;
-  pointer-events: none;
-}
-.v-selection-control__input::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.v-selection-control__input:hover::before {
-  opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
-}
-.v-selection-control__input > .v-icon {
-  opacity: var(--v-medium-emphasis-opacity);
-}
-.v-selection-control--disabled .v-selection-control__input > .v-icon, .v-selection-control--dirty .v-selection-control__input > .v-icon, .v-selection-control--error .v-selection-control__input > .v-icon {
-  opacity: 1;
-}
-.v-selection-control--error:not(.v-selection-control--disabled) .v-selection-control__input > .v-icon {
-  color: rgb(var(--v-theme-error));
-}
-.v-selection-control--focus-visible .v-selection-control__input::before {
-  opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+@layer vuetify.components {
+  .v-selection-control {
+    align-items: center;
+    contain: layout;
+    display: flex;
+    flex: 1 0;
+    grid-area: control;
+    position: relative;
+    user-select: none;
+  }
+  .v-selection-control .v-label {
+    white-space: normal;
+    word-break: break-word;
+    height: 100%;
+  }
+  .v-selection-control--disabled {
+    opacity: var(--v-disabled-opacity);
+    pointer-events: none;
+  }
+  .v-selection-control--error .v-label, .v-selection-control--disabled .v-label {
+    opacity: 1;
+  }
+  .v-selection-control--error:not(.v-selection-control--disabled) .v-label {
+    color: rgb(var(--v-theme-error));
+  }
+  .v-selection-control--inline {
+    display: inline-flex;
+    flex: 0 0 auto;
+    min-width: 0;
+    max-width: 100%;
+  }
+  .v-selection-control--inline .v-label {
+    width: auto;
+  }
+  .v-selection-control--density-default {
+    --v-selection-control-size: 40px;
+  }
+  .v-selection-control--density-comfortable {
+    --v-selection-control-size: 36px;
+  }
+  .v-selection-control--density-compact {
+    --v-selection-control-size: 28px;
+  }
+  .v-selection-control__wrapper {
+    width: var(--v-selection-control-size);
+    height: var(--v-selection-control-size);
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    justify-content: center;
+    flex: none;
+  }
+  .v-selection-control__input {
+    width: var(--v-selection-control-size);
+    height: var(--v-selection-control-size);
+    align-items: center;
+    display: flex;
+    flex: none;
+    justify-content: center;
+    position: relative;
+    border-radius: 50%;
+  }
+  .v-selection-control__input input {
+    cursor: pointer;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+  .v-selection-control__input::before {
+    border-radius: 100%;
+    background-color: currentColor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .v-selection-control__input::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .v-selection-control__input:hover::before {
+    opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+  }
+  .v-selection-control__input > .v-icon {
+    opacity: var(--v-medium-emphasis-opacity);
+  }
+  .v-selection-control--disabled .v-selection-control__input > .v-icon, .v-selection-control--dirty .v-selection-control__input > .v-icon, .v-selection-control--error .v-selection-control__input > .v-icon {
+    opacity: 1;
+  }
+  .v-selection-control--error:not(.v-selection-control--disabled) .v-selection-control__input > .v-icon {
+    color: rgb(var(--v-theme-error));
+  }
+  .v-selection-control--focus-visible .v-selection-control__input::before {
+    opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+  }
 }

package/lib/components/VSelectionControlGroup/VSelectionControlGroup.css

@@ -1,9 +1,11 @@
-.v-selection-control-group {
-  grid-area: control;
-  display: flex;
-  flex-direction: column;
-}
-.v-selection-control-group--inline {
-  flex-direction: row;
-  flex-wrap: wrap;
+@layer vuetify.components {
+  .v-selection-control-group {
+    grid-area: control;
+    display: flex;
+    flex-direction: column;
+  }
+  .v-selection-control-group--inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }

package/lib/components/VSheet/VSheet.css

@@ -1,37 +1,39 @@
-.v-sheet {
-  display: block;
-}
-.v-sheet {
-  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  border-style: solid;
-  border-width: 0;
-}
-.v-sheet--border {
-  border-width: thin;
-  box-shadow: none;
-}
-.v-sheet {
-  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-sheet--absolute {
-  position: absolute;
-}
-.v-sheet--fixed {
-  position: fixed;
-}
-.v-sheet--relative {
-  position: relative;
-}
-.v-sheet--sticky {
-  position: sticky;
-}
-.v-sheet {
-  border-radius: 0;
-}
-.v-sheet {
-  background: rgb(var(--v-theme-surface));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-}
-.v-sheet--rounded {
-  border-radius: 4px;
+@layer vuetify.components {
+  .v-sheet {
+    display: block;
+  }
+  .v-sheet {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    border-style: solid;
+    border-width: 0;
+  }
+  .v-sheet--border {
+    border-width: thin;
+    box-shadow: none;
+  }
+  .v-sheet {
+    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-sheet--absolute {
+    position: absolute;
+  }
+  .v-sheet--fixed {
+    position: fixed;
+  }
+  .v-sheet--relative {
+    position: relative;
+  }
+  .v-sheet--sticky {
+    position: sticky;
+  }
+  .v-sheet {
+    border-radius: 0;
+  }
+  .v-sheet {
+    background: rgb(var(--v-theme-surface));
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+  .v-sheet--rounded {
+    border-radius: 4px;
+  }
 }