@quidgest/ui 0.27.0 → 0.28.0

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.27.0
+ * Quidgest UI v0.28.0
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -496,6 +496,7 @@ $breakpoint-xxl: 1400px;
   --q-group-border-bottom: var(--q-border-width) solid var(--q-border-color);
   --q-transition-duration: 0.2s;
   --q-transition-timing-function: ease;
+  --q-disabled-opacity: 0.6;
   
   --q-space-1-base: 0.25rem;
   --q-space-2-base: 0.5rem;
@@ -691,6 +692,13 @@ body {
     opacity: 1;
   }
 }
+.q-help-popover {
+  flex-shrink: 0;
+}
+.q-help-popover__paragraph {
+  margin: 0;
+  white-space: pre-line;
+}
 .q-required-indicator {
   display: contents;
   &__mark {
@@ -715,6 +723,108 @@ body {
   gap: var(--q-space-1);
   height: fit-content;
 }
+.q-alert {
+  $this: &;
+  --q-alert-main-color: var(--q-theme-info);
+  --q-alert-main-color-rgb: var(--q-theme-info-rgb);
+  --q-alert-on-main-color: var(--q-theme-on-info);
+  --q-alert-text-color: var(--q-theme-info-dark);
+  --q-alert-line-height: calc(var(--q-font-size-md) * 1.5);
+  
+  
+  --q-alert-row-inset: calc((var(--q-interactive-height) - var(--q-alert-line-height)) / 2);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--q-space-2);
+  padding: var(--q-space-3) var(--q-space-4);
+  border: var(--q-border-width, 1px) solid transparent;
+  border-radius: var(--q-border-radius);
+  font-size: var(--q-font-size-md);
+  line-height: var(--q-alert-line-height);
+  &__icon {
+    display: flex;
+    flex: none;
+    align-items: center;
+    height: var(--q-interactive-height);
+    .q-icon {
+      color: currentcolor;
+    }
+  }
+  &__content {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-block: var(--q-alert-row-inset);
+    
+    overflow-wrap: anywhere;
+  }
+  &__title {
+    
+    margin: 0;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: var(--q-font-weight-bold);
+  }
+  
+  
+  
+  &__text a:not(.q-button) {
+    color: inherit;
+    text-decoration: underline;
+  }
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--q-space-2);
+    margin-top: var(--q-space-2);
+  }
+  &__dismiss.q-button {
+    flex: none;
+  }
+  &--dismissible {
+    
+    padding-inline-end: var(--q-space-2);
+  }
+  
+  &--banner {
+    
+    #{$this}__content {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      
+      gap: calc(var(--q-space-2) + var(--q-alert-row-inset)) var(--q-space-3);
+    }
+    #{$this}__text {
+      flex: 1 1 auto;
+    }
+    #{$this}__actions {
+      
+      
+      margin-block: calc(-1 * var(--q-alert-row-inset));
+    }
+  }
+  
+  &--tonal {
+    
+    background-color: rgb(var(--q-alert-main-color-rgb) / 12%);
+    color: var(--q-alert-text-color);
+  }
+  &--bold {
+    
+    
+    
+    --q-focus-ring-color: var(--q-alert-on-main-color);
+    --q-focus-ring: var(--q-focus-ring-width) solid var(--q-focus-ring-color);
+    background-color: var(--q-alert-main-color);
+    border-color: var(--q-alert-main-color);
+    color: var(--q-alert-on-main-color);
+  }
+  &--outlined {
+    border-color: var(--q-alert-main-color);
+    color: var(--q-alert-text-color);
+  }
+}
 .q-avatar {
   --q-avatar-size: calc(var(--q-space-1) * 12);
   display: flex;
@@ -1056,6 +1166,15 @@ body {
     opacity: 0;
   }
 }
+.q-button__root {
+  display: contents;
+}
+.q-button__help {
+  display: block;
+  color: var(--q-theme-neutral);
+  margin-top: var(--q-space-1);
+  font-size: var(--q-font-size-sm);
+}
 .q-button {
   $this: &;
   --q-button-main-color: var(--q-theme-primary);
@@ -1124,7 +1243,7 @@ body {
     display: contents;
   }
   &:disabled {
-    opacity: 0.6;
+    opacity: var(--q-disabled-opacity);
   }
   &:focus {
     outline: var(--q-focus-ring);
@@ -1230,16 +1349,6 @@ body {
     border-radius: 9999px;
   }
   
-  
-  &--background {
-    --q-button-main-color: var(--q-theme-background);
-    --q-button-on-main-color: var(--q-theme-on-background);
-    --q-button-text-color: var(--q-theme-background);
-    --q-button-hover-text-color: var(--q-theme-background);
-    --q-button-hover-color: var(--q-theme-primary-dark);
-    --q-button-on-hover-color: var(--q-theme-on-primary-dark);
-  }
-  
   &--loading {
     &:hover {
       cursor: not-allowed;
@@ -1332,6 +1441,8 @@ body {
   --q-card-subtitle-font-size: var(--q-font-size-sm);
   --q-card-min-width: calc(var(--q-space-1) * 28);
   --q-card-min-height: calc(var(--q-space-1) * 20);
+  
+  --q-card-tint-color-rgb: var(--q-theme-primary-light-rgb);
   min-width: var(--q-card-min-width);
   min-height: var(--q-card-min-height);
   height: 100%;
@@ -1398,7 +1509,7 @@ body {
     --q-card-shadow: var(--q-shadow-lg);
   }
   &--background {
-    --q-card-background: rgb(var(--q-theme-primary-light-rgb) / 50%);
+    --q-card-background: rgb(var(--q-card-tint-color-rgb) / 50%);
     .q-field__control {
       background-color: var(--q-theme-container);
     }
@@ -1675,7 +1786,11 @@ body {
 .q-checkbox {
   $this: &;
   --q-box-size: var(--q-selection-control-size);
-  --q-icon-color: var(--q-theme-on-primary);
+  
+  --q-checkbox-main-color: var(--q-theme-primary);
+  --q-checkbox-on-main-color: var(--q-theme-on-primary);
+  --q-active-color: var(--q-checkbox-main-color);
+  --q-icon-color: var(--q-checkbox-on-main-color);
   --q-icon-opacity: 0;
   --q-transition-duration: 0.15s;
   display: flex;
@@ -1689,12 +1804,6 @@ body {
   border-radius: var(--q-border-radius);
   color: var(--q-theme-neutral-dark);
   cursor: pointer;
-  &--focus-style:focus-within {
-    outline: var(--q-focus-ring);
-  }
-  label {
-    cursor: pointer;
-  }
   &__input {
     display: flex;
     align-items: center;
@@ -1742,25 +1851,9 @@ body {
     width: 0;
     height: 0;
   }
-  &__label.q-label {
-    user-select: none;
-    font-size: var(--q-font-size-md);
-    
-    line-height: var(--q-box-size);
-  }
   
   @include q-size-modifiers;
   
-  @mixin q-color-variant($color) {
-    &--#{$color} {
-      --q-active-color: var(--q-theme-#{$color});
-      --q-icon-color: var(--q-theme-on-#{$color});
-    }
-  }
-  @each $color in (primary, info, success, warning, danger) {
-    @include q-color-variant($color);
-  }
-  
   &--checked,
   &--indeterminate {
     --q-icon-opacity: 1;
@@ -1770,11 +1863,8 @@ body {
     }
   }
   &--disabled {
-    opacity: 0.6;
+    opacity: var(--q-disabled-opacity);
     cursor: not-allowed;
-    label {
-      cursor: not-allowed;
-    }
   }
   &--readonly {
     --q-active-color: var(--q-theme-neutral-light);
@@ -1784,9 +1874,6 @@ body {
         background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       }
     }
-    label {
-      cursor: default;
-    }
   }
   &--borderless {
     --q-active-color: transparent;
@@ -1803,12 +1890,51 @@ body {
     &:not(#{$this}--readonly) {
       #{$this}__input {
         &-icon.q-icon {
-          --q-icon-color: var(--q-theme-primary);
+          --q-icon-color: var(--q-checkbox-main-color);
         }
       }
     }
   }
 }
+.q-checkbox-field {
+  @include q-size-modifiers;
+}
+.q-field.q-checkbox-field {
+  width: fit-content;
+  max-width: 100%;
+  > .q-field__label {
+    align-self: stretch;
+    user-select: none;
+    font-size: var(--q-font-size-md);
+    line-height: var(--q-selection-control-size);
+    
+    label {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      cursor: pointer;
+    }
+  }
+  &:hover .q-checkbox__input:not(:disabled) {
+    border-color: var(--q-active-color);
+  }
+  &:has(.q-checkbox__input:focus):has(.q-checkbox--focus-style):not(:has(.q-checkbox--borderless)) {
+    outline: var(--q-focus-ring);
+    border-radius: var(--q-border-radius);
+  }
+  &.q-field--disabled > .q-field__label {
+    opacity: var(--q-disabled-opacity);
+    label {
+      cursor: not-allowed;
+    }
+  }
+  &.q-field--readonly > .q-field__label label {
+    cursor: default;
+  }
+  &.q-field--label-right {
+    justify-content: flex-end;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .q-checkbox__input,
   .q-checkbox__input .q-icon {
@@ -2386,6 +2512,20 @@ body {
   max-width: 100%;
   &__label {
     font-size: var(--q-field-font-size);
+    
+    
+    min-height: calc(var(--q-control-height-md-base) * var(--q-density-scale-base) * 0.8);
+  }
+  
+  
+  &__slot {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    border-radius: inherit;
   }
   &__control {
     display: flex;
@@ -2402,10 +2542,16 @@ body {
     line-height: var(--q-field-line-height);
     transition: color var(--q-transition-duration) var(--q-transition-timing-function);
   }
+  &__help {
+    flex: 1 0 100%;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
   &__extras {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--q-space-1);
-    align-items: center;
+    align-items: flex-start;
     color: var(--q-theme-neutral);
     margin-top: var(--q-space-1);
     font-size: var(--q-font-size-sm);
@@ -2413,6 +2559,18 @@ body {
       color: currentcolor;
     }
   }
+  
+  
+  &:not(&--label-left, &--label-right) > &__extras {
+    align-self: stretch;
+    width: 0;
+    min-width: 100%;
+    box-sizing: border-box;
+  }
+  &--label-left > &__extras,
+  &--label-right > &__extras {
+    align-items: center;
+  }
   &__prepend,
   &__append {
     display: flex;
@@ -2429,13 +2587,15 @@ body {
   }
   
   &--readonly {
-    > #{$this}__control {
+    > #{$this}__control,
+    > #{$this}__slot > #{$this}__control {
       background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     }
   }
   &--disabled {
-    > #{$this}__control {
-      opacity: 0.5;
+    > #{$this}__control,
+    > #{$this}__slot > #{$this}__control {
+      opacity: var(--q-disabled-opacity);
       &:hover {
         cursor: not-allowed;
       }
@@ -2456,6 +2616,73 @@ body {
     flex-direction: row-reverse;
     gap: var(--q-space-1);
   }
+  
+  &--row {
+    display: grid;
+    align-items: center;
+    gap: var(--q-space-1) var(--q-space-1);
+    > .q-field__extras {
+      width: auto;
+      min-width: 0;
+      max-width: 100%;
+      margin-top: 0;
+    }
+    > .q-field__slot {
+      width: fit-content;
+    }
+    &.q-field--label-left {
+      
+      grid-template-columns: minmax(0, max-content) max-content;
+      > .q-field__label {
+        grid-area: 1 / 1;
+      }
+      > .q-field__control,
+      > .q-field__slot {
+        grid-area: 1 / 2 / -1 / 3;
+        align-self: center;
+      }
+      > .q-field__extras {
+        grid-area: 2 / 1;
+      }
+    }
+    &.q-field--label-right {
+      grid-template-columns: max-content minmax(0, max-content);
+      justify-content: end;
+      > .q-field__control,
+      > .q-field__slot {
+        grid-area: 1 / 1 / -1 / 2;
+        align-self: center;
+      }
+      > .q-field__label {
+        grid-area: 1 / 2;
+      }
+      > .q-field__extras {
+        grid-area: 2 / 2;
+      }
+    }
+  }
+  
+  &__help-trigger {
+    place-self: center start;
+    width: fit-content;
+  }
+  &:not(&--row):has(> &__help-trigger) {
+    display: grid;
+    grid-template-columns: max-content max-content;
+    align-items: center;
+    justify-content: start;
+    column-gap: var(--q-space-1);
+    > #{$this}__control,
+    > #{$this}__slot {
+      grid-area: 1 / 1;
+    }
+    > #{$this}__help-trigger {
+      grid-area: 1 / 2;
+    }
+    > #{$this}__extras {
+      grid-column: 1 / -1;
+    }
+  }
   &:not(#{$this}--disabled) {
     #{$this}__control {
       &:focus-within {
@@ -2466,7 +2693,8 @@ body {
   
   @mixin q-field-size($size, $multiplier: 1) {
     &--#{$size} {
-      > #{$this}__control {
+      > #{$this}__control,
+      > #{$this}__slot > #{$this}__control {
         width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * var(--q-space-1));
         max-width: 100%;
       }
@@ -2487,6 +2715,8 @@ body {
   --q-file-input-preview-side: calc(var(--q-space-1) * 12);
   --q-file-input-preview-padding: var(--q-space-3);
   
+  --q-file-input-tint-color: var(--q-theme-primary-light);
+  
   &.q-field__control {
     height: auto;
     min-height: auto;
@@ -2568,7 +2798,7 @@ body {
   
   &--highlighted {
     border-color: var(--q-theme-primary);
-    background-color: var(--q-theme-primary-light);
+    background-color: var(--q-file-input-tint-color);
   }
   &--readonly,
   &--disabled {
@@ -3150,6 +3380,9 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
   }
 }
 .q-list {
+  
+  --q-list-tint-color: var(--q-theme-primary-light);
+  --q-list-tint-color-rgb: var(--q-theme-primary-light-rgb);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3208,7 +3441,7 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
   &:hover,
   &:focus,
   &--highlighted {
-    background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
+    background-color: rgb(var(--q-list-tint-color-rgb) / 50%);
     
     
     .q-checkbox:not(.q-checkbox--disabled) .q-checkbox__input {
@@ -3217,17 +3450,17 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
   }
   &--disabled {
     pointer-events: none;
-    opacity: 0.5;
+    opacity: var(--q-disabled-opacity);
     &:hover {
       cursor: not-allowed;
     }
   }
   
   &--selected {
-    background-color: var(--q-theme-primary-light);
+    background-color: var(--q-list-tint-color);
     &:hover,
     &:focus {
-      background-color: var(--q-theme-primary-light);
+      background-color: var(--q-list-tint-color);
     }
   }
   em {
@@ -3330,13 +3563,16 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       color: inherit;
     }
   }
+  
+  
   &__action.q-button {
     justify-content: flex-start;
     margin: 0;
     padding: 0;
     border-width: 0;
     width: 100%;
-    min-height: 1.5em;
+    height: 100%;
+    min-height: 0;
     line-height: inherit;
     &:hover,
     &:focus-visible {
@@ -3365,33 +3601,11 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     min-width: 0;
   }
   
-  
-  & &__label-action.q-button {
-    --q-button-height: 1lh;
-    height: 1lh;
-    min-height: 0;
-    min-width: auto;
-    padding: 0;
-    border-width: 0;
-    line-height: inherit;
-    vertical-align: middle;
+  &__label-action.q-button {
     &:focus-visible {
       
       outline-offset: 2px;
     }
-    &.q-button--text {
-      color: var(--q-theme-primary);
-      
-      @media (hover: hover) {
-        &:hover:not(:disabled) {
-          text-decoration: none;
-        }
-      }
-    }
-    .q-obfuscation__icon.q-icon {
-      width: var(--q-icon-size-sm);
-      height: var(--q-icon-size-sm);
-    }
   }
   &__icon.q-icon {
     flex-shrink: 0;
@@ -4017,6 +4231,8 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 }
 .q-property-list {
   $base-border: var(--q-border-width) solid var(--q-border-color);
+  
+  --q-property-list-tint-color-rgb: var(--q-theme-primary-light-rgb);
   margin: 0;
   font-size: var(--q-font-size-md);
   display: inline-flex;
@@ -4032,7 +4248,7 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     overflow-y: auto;
     min-height: calc(var(--q-space-1) * 12.5);
     max-height: calc(var(--q-space-1) * 20);
-    gap: var(--q-space-4);
+    gap: var(--q-space-1);
   }
   &--side-panel {
     flex-direction: row;
@@ -4065,7 +4281,7 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
   }
   &__row {
     &:hover {
-      background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
+      background-color: rgb(var(--q-property-list-tint-color-rgb) / 50%);
     }
     .q-field:not(.q-field--readonly) .q-field__control {
       background-color: var(--q-theme-background);
@@ -4083,6 +4299,10 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       max-width: 100%;
       width: 100%;
       box-sizing: border-box;
+      &.q-checkbox-field,
+      &.q-switch-field {
+        width: fit-content;
+      }
     }
   }
   &-field__container {
@@ -4220,17 +4440,8 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     }
   }
   
-  @mixin q-color-variant($color) {
-    &--#{$color} {
-      --q-radio-button-checked-color: var(--q-theme-#{$color});
-    }
-  }
-  @each $color in (primary, info, success, warning, danger) {
-    @include q-color-variant($color);
-  }
-  
   &--disabled {
-    opacity: 0.5;
+    opacity: var(--q-disabled-opacity);
     cursor: not-allowed;
     .q-radio-button__input:disabled,
     label {
@@ -4284,6 +4495,8 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
   --q-section-padding-bottom: var(--q-space-4);
   --q-section-title-size: calc(var(--q-font-size-lg) * 1.2);
   --q-section-minor-title-size: var(--q-font-size-md);
+  
+  --q-section-tint-color-rgb: var(--q-theme-primary-light-rgb);
   display: inline-block;
   overflow-wrap: break-word;
   background-color: var(--q-theme-container);
@@ -4297,6 +4510,12 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     outline: var(--q-focus-ring);
     border-radius: var(--q-border-radius);
   }
+  &__subtitle {
+    margin: 0 0 var(--q-space-2);
+    color: var(--q-theme-neutral);
+    font-size: var(--q-font-size-sm);
+    line-height: var(--q-line-height-sm);
+  }
   &__title {
     font-size: var(--q-section-title-size);
     line-height: var(--q-line-height-md);
@@ -4313,7 +4532,7 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
   }
   
   &--background {
-    background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
+    background-color: rgb(var(--q-section-tint-color-rgb) / 50%);
     padding: var(--q-section-padding-y) var(--q-section-padding-x) var(--q-section-padding-bottom);
   }
   &--minor {
@@ -4367,6 +4586,11 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       z-index: 10;
       position: relative;
     }
+    
+    > #{$this}__subtitle {
+      margin: 0;
+      padding: var(--q-space-1) var(--q-space-4);
+    }
     > #{$this}__content {
       padding: var(--q-space-1) var(--q-space-4) var(--q-space-4);
     }
@@ -4531,6 +4755,8 @@ $sidebar-sizes: (
 }
 .q-sidebar {
   --q-sidebar-border-color: rgb(var(--q-theme-neutral-rgb) / 25%);
+  
+  --q-sidebar-indicator-color: var(--q-theme-primary-dark);
   height: 100%;
   display: flex;
   overflow: hidden;
@@ -4585,7 +4811,7 @@ $sidebar-sizes: (
 .q-sidebar__indicator {
   position: absolute;
   width: 2px;
-  background-color: var(--q-theme-primary-dark);
+  background-color: var(--q-sidebar-indicator-color);
   opacity: 0;
   z-index: 10;
   transition:
@@ -4752,6 +4978,15 @@ $spinner-color: var(--q-theme-primary);
   }
 }
 .q-steps {
+  
+  
+  --q-steps-on-neutral-color: var(--q-theme-on-neutral);
+  --q-steps-on-primary-color: var(--q-theme-on-primary);
+  --q-steps-neutral-hover-color: var(--q-theme-neutral-dark);
+  --q-steps-on-neutral-hover-color: var(--q-theme-on-neutral-dark);
+  --q-steps-primary-hover-color: var(--q-theme-primary-dark);
+  --q-steps-on-primary-hover-color: var(--q-theme-on-primary-dark);
+  --q-steps-success-hover-color: var(--q-theme-success-dark);
   --q-steps-indicator-size: calc(var(--q-space-1) * 8);
   --q-steps-arrow-size: var(--q-space-3);
   --q-steps-connector-width: calc(var(--q-space-1) * 0.5);
@@ -4759,6 +4994,12 @@ $spinner-color: var(--q-theme-primary);
   display: flex;
   flex-direction: column;
   gap: var(--q-space-4);
+  .q-steps__help {
+    margin: 0 0 var(--q-space-2);
+    color: var(--q-theme-neutral);
+    font-size: var(--q-font-size-sm);
+    line-height: var(--q-line-height-sm);
+  }
   
   .q-step__indicator-content .q-icon,
   .q-steps__panel-header-icon .q-icon,
@@ -4860,7 +5101,7 @@ $spinner-color: var(--q-theme-primary);
       gap: var(--q-space-2);
       padding: var(--q-space-3) var(--q-space-4);
       background-color: var(--q-theme-primary);
-      color: var(--q-theme-on-primary);
+      color: var(--q-steps-on-primary-color);
       font-weight: var(--q-font-weight-bold);
     }
     .q-steps__panel-header-icon {
@@ -4919,7 +5160,7 @@ $spinner-color: var(--q-theme-primary);
       border: var(--q-border-width) solid transparent;
       border-radius: 50%;
       background-color: var(--q-theme-neutral);
-      color: var(--q-theme-on-primary);
+      color: var(--q-steps-on-neutral-color);
       font-weight: var(--q-font-weight-bold);
       line-height: 1;
     }
@@ -4952,7 +5193,7 @@ $spinner-color: var(--q-theme-primary);
       .q-step__indicator {
         background-color: var(--q-theme-primary);
         border-color: var(--q-theme-primary);
-        color: var(--q-theme-on-primary);
+        color: var(--q-steps-on-primary-color);
         box-shadow: var(--q-shadow-sm);
       }
       .q-step__title {
@@ -4971,16 +5212,16 @@ $spinner-color: var(--q-theme-primary);
     @media (hover: hover) {
       .q-step__header:not(.q-step--active, .q-step--visited):hover:not(:disabled)
         .q-step__indicator {
-        background-color: var(--q-theme-neutral-dark);
+        background-color: var(--q-steps-neutral-hover-color);
       }
       .q-step__header.q-step--active:hover:not(:disabled) .q-step__indicator {
-        background-color: var(--q-theme-primary-dark);
-        border-color: var(--q-theme-primary-dark);
+        background-color: var(--q-steps-primary-hover-color);
+        border-color: var(--q-steps-primary-hover-color);
       }
       .q-step__header.q-step--visited:hover:not(:disabled) .q-step__indicator {
-        background-color: var(--q-theme-primary-dark);
-        border-color: var(--q-theme-primary-dark);
-        color: var(--q-theme-on-primary-dark);
+        background-color: var(--q-steps-primary-hover-color);
+        border-color: var(--q-steps-primary-hover-color);
+        color: var(--q-steps-on-primary-hover-color);
       }
     }
     &.q-steps--horizontal {
@@ -5185,14 +5426,14 @@ $spinner-color: var(--q-theme-primary);
     @media (hover: hover) {
       .q-step__header:not(.q-step--active, .q-step--visited):hover:not(:disabled)
         .q-step__indicator::after {
-        background-color: var(--q-theme-neutral-dark);
+        background-color: var(--q-steps-neutral-hover-color);
       }
       .q-step__header.q-step--active:hover:not(:disabled) .q-step__indicator::after,
       .q-step__header.q-step--visited:hover:not(:disabled) .q-step__indicator::after {
-        background-color: var(--q-theme-primary-dark);
+        background-color: var(--q-steps-primary-hover-color);
       }
       .q-step__header.q-step--completed:hover:not(:disabled) .q-step__indicator::after {
-        background-color: var(--q-theme-success-dark);
+        background-color: var(--q-steps-success-hover-color);
       }
     }
     &.q-steps--horizontal {
@@ -5396,7 +5637,7 @@ $spinner-color: var(--q-theme-primary);
     .q-step__header.q-step--active {
       background-color: var(--q-theme-primary);
       border-color: var(--q-theme-primary);
-      color: var(--q-theme-on-primary);
+      color: var(--q-steps-on-primary-color);
       box-shadow: var(--q-shadow-md);
     }
     .q-step__header.q-step--visited {
@@ -5409,17 +5650,17 @@ $spinner-color: var(--q-theme-primary);
     
     @media (hover: hover) {
       .q-step__header:not(.q-step--active, .q-step--visited):hover:not(:disabled) {
-        background-color: var(--q-theme-neutral-dark);
-        color: var(--q-theme-on-neutral-dark);
+        background-color: var(--q-steps-neutral-hover-color);
+        color: var(--q-steps-on-neutral-hover-color);
       }
       .q-step__header.q-step--active:hover:not(:disabled) {
-        background-color: var(--q-theme-primary-dark);
-        border-color: var(--q-theme-primary-dark);
+        background-color: var(--q-steps-primary-hover-color);
+        border-color: var(--q-steps-primary-hover-color);
       }
       .q-step__header.q-step--visited:hover:not(:disabled) {
-        background-color: var(--q-theme-primary-dark);
-        border-color: var(--q-theme-primary-dark);
-        color: var(--q-theme-on-primary-dark);
+        background-color: var(--q-steps-primary-hover-color);
+        border-color: var(--q-steps-primary-hover-color);
+        color: var(--q-steps-on-primary-hover-color);
       }
     }
     &.q-steps--horizontal {
@@ -5530,7 +5771,7 @@ $spinner-color: var(--q-theme-primary);
     }
     .q-step__header.q-step--active {
       background-color: var(--q-theme-primary);
-      color: var(--q-theme-on-primary);
+      color: var(--q-steps-on-primary-color);
     }
     
     
@@ -5543,15 +5784,15 @@ $spinner-color: var(--q-theme-primary);
     
     @media (hover: hover) {
       .q-step__header:not(.q-step--active, .q-step--visited):hover:not(:disabled) {
-        background-color: var(--q-theme-neutral-dark);
-        color: var(--q-theme-on-neutral-dark);
+        background-color: var(--q-steps-neutral-hover-color);
+        color: var(--q-steps-on-neutral-hover-color);
       }
       .q-step__header.q-step--active:hover:not(:disabled) {
-        background-color: var(--q-theme-primary-dark);
+        background-color: var(--q-steps-primary-hover-color);
       }
       .q-step__header.q-step--visited:hover:not(:disabled) {
-        background-color: var(--q-theme-primary-dark);
-        color: var(--q-theme-on-primary-dark);
+        background-color: var(--q-steps-primary-hover-color);
+        color: var(--q-steps-on-primary-hover-color);
       }
     }
     
@@ -5719,7 +5960,7 @@ $spinner-color: var(--q-theme-primary);
     transition: background-color var(--q-transition-duration) var(--q-transition-timing-function);
   }
   &--disabled .q-step__header {
-    opacity: 0.6;
+    opacity: var(--q-disabled-opacity);
   }
 }
 .q-switch {
@@ -5758,7 +5999,6 @@ $spinner-color: var(--q-theme-primary);
   --q-switch-shadow-offset-y-hover: calc(var(--q-space-1) * 0.5);
   --q-switch-shadow-spread-hover: var(--q-space-1);
   
-  --q-switch-disabled-opacity: 0.5;
   --q-switch-hover-background-opacity: 0.5;
   
   --q-switch-checked-background: var(--q-theme-primary);
@@ -5788,7 +6028,7 @@ $spinner-color: var(--q-theme-primary);
   
   
   &--disabled {
-    opacity: var(--q-switch-disabled-opacity);
+    opacity: var(--q-disabled-opacity);
     pointer-events: none;
     cursor: not-allowed;
   }
@@ -5803,6 +6043,23 @@ $spinner-color: var(--q-theme-primary);
   justify-content: center;
   gap: 0.5em;
 }
+.q-switch-field {
+  @include q-size-modifiers;
+}
+.q-field.q-switch-field {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  &.q-field--row {
+    display: inline-grid;
+  }
+  &.q-field--disabled > .q-field__label {
+    opacity: var(--q-disabled-opacity);
+    label {
+      cursor: not-allowed;
+    }
+  }
+}
 .q-switch__input {
   position: absolute;
   inset: var(--q-switch-hit-padding-block) 0 var(--q-switch-hit-padding-block) 0;
@@ -5891,9 +6148,6 @@ $spinner-color: var(--q-theme-primary);
       var(--q-switch-shadow-spread);
   padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h);
 }
-.q-switch--with-labels.q-switch--checked:not(.q-switch--readonly) .q-switch__label--off {
-  color: var(--q-theme-primary-light);
-}
 .q-switch--readonly {
   cursor: default;
   pointer-events: none;
@@ -6187,6 +6441,12 @@ $spinner-color: var(--q-theme-primary);
     }
   }
 }
+.q-tab__help {
+  margin: 0 0 var(--q-space-2);
+  color: var(--q-theme-neutral);
+  font-size: var(--q-font-size-sm);
+  line-height: var(--q-line-height-sm);
+}
 .q-tab {
   background: transparent;
   border: 0;
@@ -6363,6 +6623,14 @@ $spinner-color: var(--q-theme-primary);
   &__container {
     pointer-events: auto;
   }
+  &__icon {
+    display: flex;
+    align-items: center;
+    
+    .q-icon {
+      color: currentcolor;
+    }
+  }
   &__title {
     display: flex;
     gap: var(--q-space-1);
@@ -6378,6 +6646,10 @@ $spinner-color: var(--q-theme-primary);
     padding-right: 0;
   }
   
+  .q-col:has(> .q-toast__icon) {
+    padding-right: 0;
+  }
+  
   &--block {
     max-width: unset;
   }
@@ -6478,10 +6750,13 @@ $spinner-color: var(--q-theme-primary);
 .q-toggle {
   &.q-button.q-toggle--active {
     z-index: 2;
-    color: var(--q-theme-primary-dark);
-    background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
+    
+    
+    
+    color: var(--q-button-text-color);
+    background-color: rgb(var(--q-button-main-color-rgb) / 12%);
     &:not(.q-button--borderless) {
-      border-color: var(--q-theme-primary);
+      border-color: var(--q-button-main-color);
     }
   }
 }