@quidgest/ui 0.25.0 → 0.27.0

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.25.0
+ * Quidgest UI v0.27.0
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -444,13 +444,13 @@ $breakpoint-xxl: 1400px;
   --q-focus-ring: var(--q-focus-ring-width) solid var(--q-focus-ring-color);
   
   --q-shadow-sm: 0 calc(1px * var(--q-density-scale)) calc(2px * var(--q-density-scale)) 0
-    rgb(0 0 0 / 5%);
+    rgb(var(--q-theme-neutral-dark-rgb) / 5%);
   
   --q-shadow-md:
     0 calc(4px * var(--q-density-scale)) calc(6px * var(--q-density-scale))
-      calc(-1px * var(--q-density-scale)) rgb(0 0 0 / 10%),
+      calc(-1px * var(--q-density-scale)) rgb(var(--q-theme-neutral-dark-rgb) / 10%),
     0 calc(2px * var(--q-density-scale)) calc(4px * var(--q-density-scale))
-      calc(-2px * var(--q-density-scale)) rgb(0 0 0 / 10%);
+      calc(-2px * var(--q-density-scale)) rgb(var(--q-theme-neutral-dark-rgb) / 10%);
   
   --q-shadow-lg: 0 calc(8px * var(--q-density-scale)) calc(12px * var(--q-density-scale))
     rgb(var(--q-theme-neutral-dark-rgb) / 25%);
@@ -773,7 +773,8 @@ body {
     width: calc(100% + 2px);
     height: calc(100% + 2px);
     border-radius: inherit;
-    opacity: 0.1;
+    
+    opacity: 0.12;
   }
   &__content {
     white-space: normal;
@@ -804,6 +805,19 @@ body {
   .q-icon {
     color: currentcolor;
   }
+  
+  
+  &__content,
+  &__remove {
+    .q-icon__svg,
+    .q-icon__img {
+      width: var(--q-icon-size-sm);
+      height: var(--q-icon-size-sm);
+    }
+    .q-icon__font {
+      font-size: var(--q-icon-size-sm);
+    }
+  }
   &__remove.q-button {
     padding: var(--q-control-padding-y-sm);
     min-width: fit-content;
@@ -841,10 +855,10 @@ body {
   &--outlined {
     background-color: transparent;
     border-color: var(--q-badge-main-color);
-    color: var(--q-badge-main-color);
+    color: var(--q-badge-text-color);
   }
   &--tonal {
-    color: var(--q-badge-main-color);
+    color: var(--q-badge-text-color);
     #{$this}__underlay {
       background-color: var(--q-badge-main-color);
     }
@@ -861,7 +875,7 @@ body {
     }
   }
   &--disabled {
-    opacity: 0.6;
+    
     pointer-events: none;
   }
   
@@ -963,6 +977,75 @@ body {
     transform-origin: 100% 100%;
   }
 }
+.q-breadcrumbs {
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    min-height: var(--q-interactive-height);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  &__item {
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+    
+    
+    
+    
+    &--collapsed .q-breadcrumbs__link {
+      @include q-sr-only;
+    }
+  }
+  &__separator {
+    display: inline-flex;
+    align-items: center;
+    margin-inline: var(--q-space-1);
+    color: var(--q-theme-neutral-light);
+  }
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--q-space-1);
+    color: var(--q-theme-neutral-dark);
+    text-decoration: none;
+    border-radius: var(--q-border-radius);
+    min-width: 0;
+    &:focus-visible {
+      outline: var(--q-focus-ring);
+      outline-offset: var(--q-focus-ring-offset);
+    }
+    &[aria-current='page'] {
+      font-weight: var(--q-font-weight-bold);
+      cursor: default;
+    }
+    &:is(a):not([aria-current='page']) {
+      cursor: pointer;
+      @media (hover: hover) {
+        &:hover {
+          color: var(--q-theme-primary);
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__collapsed-trigger {
+    margin-inline: calc(var(--q-space-1) * -1);
+    
+    @media (hover: hover) {
+      &.q-button--text:hover:not(:disabled) {
+        text-decoration: none;
+      }
+    }
+  }
+}
 @keyframes q-button-ripple {
   0% {
     transform: scale(0);
@@ -979,6 +1062,8 @@ body {
   --q-button-main-color-rgb: var(--q-theme-primary-rgb);
   --q-button-on-main-color: var(--q-theme-on-primary);
   --q-button-on-main-color-rgb: var(--q-theme-on-primary-rgb);
+  --q-button-text-color: var(--q-theme-primary);
+  --q-button-hover-text-color: var(--q-theme-primary-dark);
   --q-button-hover-color: var(--q-theme-primary-dark);
   --q-button-hover-color-rgb: var(--q-theme-primary-dark-rgb);
   --q-button-on-hover-color: var(--q-theme-on-primary-dark);
@@ -1008,7 +1093,8 @@ body {
   text-decoration: none;
   white-space: nowrap;
   transition-property:
-    color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
+    color, background-color, border-color, box-shadow, text-decoration, text-decoration-color, fill,
+    stroke;
   transition-duration: 0.15s;
   &#{$this}--labeled {
     padding: var(--q-button-padding-y) var(--q-button-labeled-padding-x);
@@ -1090,9 +1176,10 @@ body {
     }
   }
   &--tonal {
+    
     background-color: rgb(var(--q-button-main-color-rgb) / 12%);
     border-color: transparent;
-    color: var(--q-button-main-color);
+    color: var(--q-button-text-color);
     @media (hover: hover) {
       &:hover:not(:disabled) {
         background-color: var(--q-button-hover-color);
@@ -1104,7 +1191,7 @@ body {
   &--outlined {
     background-color: transparent;
     border-color: var(--q-button-main-color);
-    color: var(--q-button-main-color);
+    color: var(--q-button-text-color);
     @media (hover: hover) {
       &:hover:not(:disabled) {
         background-color: var(--q-button-hover-color);
@@ -1116,24 +1203,26 @@ body {
   &--ghost {
     background-color: transparent;
     border-color: transparent;
-    color: var(--q-button-main-color);
+    color: var(--q-button-text-color);
     @media (hover: hover) {
       &:hover:not(:disabled) {
+        
         background-color: rgb(var(--q-button-hover-color-rgb) / 6%);
         border-color: transparent;
-        color: var(--q-button-hover-color);
+        color: var(--q-button-hover-text-color);
       }
     }
   }
   &--text {
     background-color: transparent;
     border-color: transparent;
-    color: var(--q-button-main-color);
+    color: var(--q-button-text-color);
     @media (hover: hover) {
       &:hover:not(:disabled) {
         background-color: transparent;
         border-color: transparent;
-        color: var(--q-button-hover-color);
+        color: var(--q-button-hover-text-color);
+        text-decoration: underline;
       }
     }
   }
@@ -1145,6 +1234,8 @@ body {
   &--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);
   }
@@ -1154,7 +1245,7 @@ body {
       cursor: not-allowed;
     }
     span {
-      visibility: hidden;
+      opacity: 0;
     }
   }
   
@@ -1455,10 +1546,17 @@ body {
   height: var(--q-carousel-indicator-height);
   border-radius: calc(var(--q-space-1) * 0.5);
   background-color: rgb(255 255 255 / 50%);
-  cursor: pointer;
   transition: all 0.3s ease;
   overflow: hidden; 
 }
+.q-carousel__indicator-button {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
 .q-carousel__indicator:hover {
   background-color: rgb(255 255 255 / 80%);
 }
@@ -1568,8 +1666,10 @@ body {
 .q-carousel:focus-visible {
   outline: var(--q-focus-ring);
 }
-.q-carousel__control:focus-visible,
-.q-carousel__indicator:focus-visible {
+.q-carousel__control:focus-visible {
+  outline: var(--q-focus-ring);
+}
+.q-carousel__indicator:has(.q-carousel__indicator-button:focus-visible) {
   outline: var(--q-focus-ring);
 }
 .q-checkbox {
@@ -1580,7 +1680,7 @@ body {
   --q-transition-duration: 0.15s;
   display: flex;
   align-items: center;
-  gap: var(--q-space-2);
+  gap: var(--q-space-1);
   width: fit-content;
   box-sizing: border-box;
   min-height: var(--q-interactive-height);
@@ -1764,6 +1864,12 @@ body {
     --q-button-font-size: var(--q-font-size-md);
     
     padding: var(--q-collapsible-header-padding);
+    
+    @media (hover: hover) {
+      &.q-button--text:hover:not(:disabled) {
+        text-decoration: none;
+      }
+    }
     .q-button__content {
       gap: 0;
       padding: var(--q-collapsible-btn-padding);
@@ -1975,7 +2081,7 @@ body {
       text-align: center;
       font-size: var(--q-font-size-sm);
       font-weight: 600;
-      opacity: 0.7;
+      color: var(--q-theme-neutral);
       padding: var(--q-space-2) 0;
     }
   }
@@ -1988,8 +2094,13 @@ body {
       aspect-ratio: 1;
       display: flex;
       transition-duration: 0s;
-      &.q-date-time-picker__day--other-month {
-        opacity: 0.5;
+      &.q-date-time-picker__day--other-month:not(
+          .q-date-time-picker__day--selected,
+          .q-date-time-picker__day--in-range,
+          .q-date-time-picker__day--range-start,
+          .q-date-time-picker__day--range-end
+        ) {
+        color: var(--q-theme-neutral);
       }
       &.q-date-time-picker__day--today {
         border-color: var(--q-button-main-color);
@@ -2128,6 +2239,12 @@ body {
     position: absolute;
     top: var(--q-space-2);
     right: var(--q-space-2);
+    
+    @media (hover: hover) {
+      &.q-button--text:hover:not(:disabled) {
+        text-decoration: none;
+      }
+    }
   }
   &__underlay {
     background-color: rgb(var(--q-theme-on-background-rgb) / 30%);
@@ -2173,12 +2290,12 @@ body {
 }
 .q-divider {
   --q-divider-thickness: 1px;
-  --q-divider-color: var(--q-theme-neutral-light);
+  --q-divider-color: var(--q-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  color: var(--q-divider-color);
+  color: var(--q-divider-label-color, var(--q-theme-neutral-dark));
   font-size: var(--q-font-size-md);
   
   &--horizontal {
@@ -2445,7 +2562,7 @@ body {
     display: flex;
     align-items: center;
     gap: var(--q-space-1);
-    color: var(--q-theme-neutral);
+    color: var(--q-theme-neutral-dark);
     min-height: var(--q-file-input-preview-side);
   }
   
@@ -2953,13 +3070,17 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       margin-left: -1px;
     }
   }
+  
+  
+  &.q-field:not(.q-field--disabled) > .q-field__control:focus-within {
+    outline: none;
+  }
   > .q-field__control {
     display: flex;
     align-items: stretch;
     height: auto;
     border-width: 0;
     padding: 0;
-    outline: none !important;
     > * + * {
       margin-left: -1px;
     }
@@ -3005,20 +3126,18 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     align-self: center;
   }
 }
-$q-line-loader-height: var(--q-line-loader-height);
-$q-line-loader-color: var(--q-line-loader-color);
 .q-line-loader {
   --q-line-loader-height: var(--q-space-1);
   --q-line-loader-color: var(--q-theme-primary-rgb);
   width: 100%;
-  height: $q-line-loader-height;
+  height: var(--q-line-loader-height);
   background: linear-gradient(
       90deg,
-      rgb(#{$q-line-loader-color} / 6.7%) 33%,
-      rgb(#{$q-line-loader-color} / 100%) 50%,
-      rgb(#{$q-line-loader-color} / 6.7%) 66%
+      rgb(var(--q-line-loader-color) / 6.7%) 33%,
+      rgb(var(--q-line-loader-color) / 100%) 50%,
+      rgb(var(--q-line-loader-color) / 6.7%) 66%
     )
-    #f2f2f2;
+    var(--q-theme-neutral-light);
   background-size: 300% 100%;
   animation: l1 1s infinite linear;
   &--rounded {
@@ -3090,6 +3209,11 @@ $q-line-loader-color: var(--q-line-loader-color);
   &:focus,
   &--highlighted {
     background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
+    
+    
+    .q-checkbox:not(.q-checkbox--disabled) .q-checkbox__input {
+      border-color: var(--q-active-color);
+    }
   }
   &--disabled {
     pointer-events: none;
@@ -3098,8 +3222,13 @@ $q-line-loader-color: var(--q-line-loader-color);
       cursor: not-allowed;
     }
   }
+  
   &--selected {
-    background-color: var(--q-theme-primary-light) !important;
+    background-color: var(--q-theme-primary-light);
+    &:hover,
+    &:focus {
+      background-color: var(--q-theme-primary-light);
+    }
   }
   em {
     font-style: normal;
@@ -3145,7 +3274,7 @@ $q-line-loader-color: var(--q-line-loader-color);
     gap: var(--q-space-1);
     align-items: flex-start;
     color: var(--q-theme-neutral);
-    font-size: 0.75em;
+    font-size: calc(var(--q-font-size-md) * 0.75);
     .q-icon {
       color: currentcolor;
       font-size: inherit;
@@ -3221,6 +3350,12 @@ $q-line-loader-color: var(--q-line-loader-color);
     }
     &.q-button--text {
       color: var(--q-theme-primary);
+      
+      @media (hover: hover) {
+        &:hover:not(:disabled) {
+          text-decoration: none;
+        }
+      }
     }
   }
   &__content {
@@ -3246,6 +3381,12 @@ $q-line-loader-color: var(--q-line-loader-color);
     }
     &.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);
@@ -3473,7 +3614,7 @@ $q-line-loader-color: var(--q-line-loader-color);
   
   --q-overlay-bg: var(--q-theme-container);
   --q-overlay-color: var(--q-theme-neutral-dark);
-  --q-overlay-border-color: var(--q-theme-neutral-light);
+  --q-overlay-border-color: var(--q-border-color);
   --q-overlay-arrow-gap: var(--q-space-2);
   --q-overlay-arrow-size: calc(var(--q-overlay-arrow-gap) * 1.4142);
   --q-overlay-arrow-tip-radius: calc(var(--q-space-1) * 0.4);
@@ -3667,13 +3808,13 @@ $q-line-loader-color: var(--q-line-loader-color);
     
     
     color: var(--CountryFlagIcon-height, var(--q-theme-neutral-dark));
-    font-size: 0.65em;
+    font-size: calc(var(--q-font-size-md) * 0.65);
     font-weight: var(--q-font-weight-bold);
   }
   &__flag-fallback {
     background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     color: var(--q-theme-neutral-dark);
-    font-size: 0.65em;
+    font-size: calc(var(--q-font-size-md) * 0.65);
     font-weight: var(--q-font-weight-bold);
   }
   &__validation-message {
@@ -3874,11 +4015,8 @@ $q-line-loader-color: var(--q-line-loader-color);
     }
   }
 }
-$table-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 25%);
-$row-hover-bg: rgb(var(--q-theme-primary-light-rgb) / 50%);
-$row-selected-bg: rgb(var(--q-theme-primary-rgb) / 15%);
-$base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
 .q-property-list {
+  $base-border: var(--q-border-width) solid var(--q-border-color);
   margin: 0;
   font-size: var(--q-font-size-md);
   display: inline-flex;
@@ -3922,12 +4060,12 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
     }
   }
   &__header {
-    background: $table-header-bg;
+    background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     height: calc(var(--q-space-1) * 6.25); 
   }
   &__row {
     &:hover {
-      background-color: $row-hover-bg;
+      background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
     }
     .q-field:not(.q-field--readonly) .q-field__control {
       background-color: var(--q-theme-background);
@@ -3936,17 +4074,11 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
       display: none;
     }
     &--selected {
-      background-color: $row-selected-bg;
+      background-color: rgb(var(--q-theme-primary-rgb) / 15%);
     }
   }
   &__cell {
     padding: var(--q-space-1) var(--q-space-2);
-    &--label {
-      width: 20%;
-      font-size: var(--q-font-size-sm);
-      text-wrap: nowrap;
-      opacity: 0.8;
-    }
     .q-field {
       max-width: 100%;
       width: 100%;
@@ -3965,6 +4097,12 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
     &__content {
       display: flex;
       align-items: center;
+      
+      @media (hover: hover) {
+        .q-button--text:hover:not(:disabled) {
+          text-decoration: none;
+        }
+      }
     }
     ~ .q-property-list__row .q-property-list__cell-label {
       padding: 0 calc(var(--q-space-1) * 8);
@@ -4015,7 +4153,7 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
   box-sizing: border-box;
   height: var(--q-interactive-height);
   min-height: var(--q-interactive-height);
-  gap: calc(var(--q-space-1) * 1.5);
+  gap: var(--q-space-1);
   font-size: var(--q-font-size-md);
   
   line-height: var(--q-radio-button-circle-size);
@@ -4168,7 +4306,7 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
     margin: 0;
     margin-top: var(--q-space-1);
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     width: fit-content;
     gap: var(--q-space-1);
     margin-bottom: var(--q-space-2);
@@ -4187,7 +4325,7 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
   &--minor-border-top {
     background-color: transparent;
     border: none;
-    border-top: var(--q-border-width) solid var(--q-theme-neutral-light);
+    border-top: var(--q-border-width) solid var(--q-border-color);
     border-radius: 0;
     margin-top: var(--q-space-2);
     padding: var(--q-space-1) 0;
@@ -4206,7 +4344,7 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
     }
   }
   &--title-background {
-    padding: 0 !important;
+    padding: 0;
     &::before {
       position: absolute;
       top: 0;
@@ -4433,8 +4571,13 @@ $sidebar-sizes: (
   border-radius: 0;
   border-width: 0;
   border-bottom-width: var(--q-border-width);
-  border-bottom-color: var(--q-sidebar-border-color) !important;
+  border-bottom-color: var(--q-sidebar-border-color);
   font-size: calc(var(--q-font-size-sm) * 0.8);
+  
+  
+  &:hover:not(:disabled) {
+    border-bottom-color: var(--q-sidebar-border-color);
+  }
   .q-icon {
     font-size: var(--q-icon-size-lg);
   }
@@ -4608,125 +4751,1096 @@ $spinner-color: var(--q-theme-primary);
     transform: rotate(1turn);
   }
 }
-.q-switch {
-  
-  
-  
-  --q-switch-inner-padding: calc(var(--q-space-1) * 0.5);
-  --q-switch-border-radius: 9999px; 
-  --q-switch-transition-duration: 0.15s;
-  --q-switch-transition-easing: ease-out;
-  
-  --q-switch-label-padding-v: calc(var(--q-space-1) * 2.5);
-  --q-switch-label-padding-h: calc(var(--q-space-1) * 3.75);
-  --q-switch-font-size: var(--q-font-size-sm);
-  
-  --q-switch-label-block-size: calc(
-    var(--q-switch-label-padding-v) * 2 + var(--q-switch-font-size)
-  );
-  --q-switch-drawn-height: calc(
-    var(--q-switch-inner-padding) * 2 + var(--q-switch-label-block-size)
-  );
-  --q-switch-hit-padding-block: max(
-    0px,
-    calc((var(--q-interactive-height) - var(--q-switch-drawn-height)) / 2)
-  );
-  
-  --q-switch-shadow-color-primary: rgb(var(--q-theme-on-background-rgb) / 20%);
-  --q-switch-shadow-color-secondary: rgb(var(--q-theme-on-background-rgb) / 10%);
-  --q-switch-shadow-blur-base: calc(var(--q-space-1) * 0.75);
-  --q-switch-shadow-offset-y: calc(var(--q-space-1) * 0.25);
-  --q-switch-shadow-spread: calc(var(--q-space-1) * 0.5);
-  
-  --q-switch-shadow-color-primary-hover: rgb(var(--q-theme-on-background-rgb) / 30%);
-  --q-switch-shadow-color-secondary-hover: rgb(var(--q-theme-on-background-rgb) / 15%);
-  --q-switch-shadow-blur-hover: calc(var(--q-space-1) * 1.5);
-  --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);
-  --q-switch-on-checked-background: var(--q-theme-on-primary);
-  --q-switch-unchecked-background: rgb(var(--q-theme-neutral-light-rgb) / 50%);
-  --q-switch-on-unchecked-background: var(--q-theme-neutral);
-  
-  
-  
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  white-space: nowrap;
-  box-sizing: border-box;
-  height: var(--q-interactive-height);
-  min-height: var(--q-interactive-height);
+.q-steps {
+  --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);
+  --q-steps-connector-gap: calc(var(--q-space-1) * 1.5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--q-space-4);
   
-  padding: var(--q-switch-hit-padding-block) 0;
-  background: transparent;
-  border-radius: var(--q-switch-border-radius);
-  cursor: pointer;
+  .q-step__indicator-content .q-icon,
+  .q-steps__panel-header-icon .q-icon,
+  .q-step__badge .q-icon {
+    color: currentcolor;
+    fill: currentcolor;
+    * {
+      fill: currentcolor;
+    }
+  }
   
   
   
-  @include q-size-modifiers;
+  .q-step__badge {
+    position: absolute;
+    top: var(--q-space-2);
+    z-index: 2;
+    box-sizing: border-box;
+    min-height: 0;
+    aspect-ratio: 1;
+    border: var(--q-border-width) solid var(--q-theme-background);
+  }
   
   
   
-  &--disabled {
-    opacity: var(--q-switch-disabled-opacity);
-    pointer-events: none;
-    cursor: not-allowed;
+  .q-step__badge .q-icon {
+    transform: scale(1.3);
   }
-}
-.q-switch:not(.q-switch--with-labels) {
-  --q-switch-label-padding-h: var(--q-switch-label-padding-v);
-}
-.q-switch__container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5em;
-}
-.q-switch__input {
-  position: absolute;
-  inset: var(--q-switch-hit-padding-block) 0 var(--q-switch-hit-padding-block) 0;
-  
-  width: auto;
-  height: auto;
-  margin: 0;
-  padding: 0;
-  appearance: none;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  border-radius: var(--q-switch-border-radius);
-  z-index: 2;
-  
-  &:focus-visible {
-    outline: var(--q-focus-ring);
+  &__list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
-  
-  &:disabled {
-    cursor: not-allowed;
-    &:focus-visible {
-      outline: none;
-    }
+  &__content {
+    min-width: 0;
   }
-}
-.q-switch__labels {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  position: relative;
-  box-sizing: border-box;
-  padding: var(--q-switch-inner-padding);
-  background: var(--q-switch-unchecked-background);
-  border-radius: var(--q-switch-border-radius);
-  transition: background var(--q-switch-transition-duration) var(--q-switch-transition-easing);
-}
-.q-switch__label {
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--q-space-2);
+    min-width: 0;
+  }
+  &__nav {
+    display: flex;
+    align-items: center;
+    gap: var(--q-space-2);
+  }
+  
+  &--horizontal {
+    
+    
+    
+    
+    
+    
+    
+    --q-steps-visible-count: 4;
+    @media (max-width: $breakpoint-md) {
+      --q-steps-visible-count: 3;
+    }
+    @media (max-width: $breakpoint-sm) {
+      
+      
+      .q-step:not(.q-step--active) .q-step__labels {
+        display: none;
+      }
+    }
+    @media (min-width: $breakpoint-xxl) {
+      --q-steps-visible-count: 5;
+    }
+    .q-steps__list {
+      width: 100%;
+    }
+    .q-steps__overflow {
+      width: 100%;
+    }
+    .q-steps__track {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+    }
+    .q-step {
+      display: flex;
+      flex: 1 0 calc(100% / var(--q-steps-visible-count));
+      min-width: 0;
+    }
+    .q-step__header {
+      width: 100%;
+    }
+    .q-steps__panel {
+      border: var(--q-border-width) solid var(--q-border-color);
+      border-radius: var(--q-border-radius);
+      overflow: hidden;
+    }
+    .q-steps__panel-header {
+      display: flex;
+      align-items: center;
+      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);
+      font-weight: var(--q-font-weight-bold);
+    }
+    .q-steps__panel-header-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .q-steps__content {
+      padding: var(--q-space-4);
+    }
+  }
+  &--vertical {
+    .q-steps__list {
+      flex-direction: column;
+      gap: 0;
+    }
+    .q-step {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  
+  &--circle {
+    .q-step__header {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      gap: var(--q-space-3);
+      margin: 0;
+      padding: var(--q-space-2);
+      border: 0;
+      border-radius: var(--q-border-radius);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      text-align: start;
+      cursor: pointer;
+      &:disabled {
+        cursor: not-allowed;
+      }
+      &:focus-visible {
+        outline: var(--q-focus-ring);
+      }
+    }
+    .q-step__indicator {
+      position: relative;
+      z-index: 1;
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: var(--q-steps-indicator-size);
+      height: var(--q-steps-indicator-size);
+      
+      
+      border: var(--q-border-width) solid transparent;
+      border-radius: 50%;
+      background-color: var(--q-theme-neutral);
+      color: var(--q-theme-on-primary);
+      font-weight: var(--q-font-weight-bold);
+      line-height: 1;
+    }
+    .q-step__indicator-content {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .q-step__labels {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--q-space-1) * 0.5);
+      min-width: 0;
+    }
+    .q-step__title {
+      display: inline-flex;
+      align-items: baseline;
+      gap: calc(var(--q-space-1) * 0.5);
+      font-weight: var(--q-font-weight-bold);
+      color: var(--q-theme-on-background);
+    }
+    .q-step__caption {
+      font-size: var(--q-font-size-sm);
+      color: var(--q-theme-neutral);
+    }
+    .q-step__header:not(.q-step--active, .q-step--visited) .q-step__title {
+      color: var(--q-theme-neutral);
+    }
+    .q-step--active {
+      .q-step__indicator {
+        background-color: var(--q-theme-primary);
+        border-color: var(--q-theme-primary);
+        color: var(--q-theme-on-primary);
+        box-shadow: var(--q-shadow-sm);
+      }
+      .q-step__title {
+        color: var(--q-theme-on-background);
+      }
+    }
+    .q-step--visited {
+      .q-step__indicator {
+        background-color: var(--q-theme-background);
+        border-color: var(--q-theme-primary);
+        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);
+      }
+      .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);
+      }
+      .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);
+      }
+    }
+    &.q-steps--horizontal {
+      .q-steps__track {
+        align-items: flex-start;
+      }
+      .q-step__header {
+        position: relative;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+      }
+      
+      
+      .q-step__badge {
+        inset-inline-start: calc(50% + (var(--q-steps-indicator-size) * 0.5));
+        transform: translate(-50%, -30%);
+      }
+      .q-step:not(:last-child) .q-step__header::after {
+        content: '';
+        position: absolute;
+        top: calc(var(--q-space-2) + (var(--q-steps-indicator-size) * 0.5));
+        inset-inline-start: calc(
+          50% + (var(--q-steps-indicator-size) * 0.5) + var(--q-steps-connector-gap)
+        );
+        width: calc(100% - var(--q-steps-indicator-size) - (var(--q-steps-connector-gap) * 2));
+        height: var(--q-steps-connector-width);
+        background-color: var(--q-theme-neutral);
+      }
+      .q-step--next-reached:not(:last-child) .q-step__header::after {
+        background-color: var(--q-theme-primary);
+      }
+      .q-step__labels {
+        align-items: center;
+        text-align: center;
+      }
+    }
+    &.q-steps--vertical {
+      
+      
+      
+      --q-steps-row-gap: var(--q-space-2);
+      .q-step {
+        position: relative;
+      }
+      .q-step__header {
+        align-items: flex-start;
+      }
+      
+      
+      .q-step__badge {
+        inset-inline-start: calc(var(--q-space-2) + var(--q-steps-indicator-size));
+        transform: translate(-50%, -40%);
+      }
+      .q-step:not(.q-step--last, .q-step--active) {
+        margin-block-end: var(--q-steps-row-gap);
+      }
+      
+      
+      
+      
+      .q-step:not(.q-step--last)::before {
+        content: '';
+        position: absolute;
+        top: calc(var(--q-space-2) + var(--q-steps-indicator-size) + var(--q-steps-connector-gap));
+        inset-inline-start: calc(
+          var(--q-space-2) + (var(--q-steps-indicator-size) * 0.5) -
+            (var(--q-steps-connector-width) * 0.5)
+        );
+        
+        
+        
+        bottom: calc(var(--q-steps-connector-gap) - var(--q-space-2) - var(--q-steps-row-gap));
+        width: var(--q-steps-connector-width);
+        background-color: var(--q-theme-neutral);
+      }
+      .q-step--next-reached:not(.q-step--last)::before {
+        background-color: var(--q-theme-primary);
+      }
+      .q-step--active:not(.q-step--last)::before {
+        bottom: 0;
+      }
+      .q-steps__body {
+        position: relative;
+        padding-inline-start: calc(var(--q-steps-indicator-size) + var(--q-space-5));
+        padding-block-start: var(--q-steps-row-gap);
+        &:not(:last-child) {
+          margin-block-end: var(--q-steps-row-gap);
+        }
+        &:not(:last-child)::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: calc(var(--q-steps-connector-gap) - var(--q-space-2) - var(--q-steps-row-gap));
+          inset-inline-start: calc(
+            var(--q-space-2) + (var(--q-steps-indicator-size) * 0.5) -
+              (var(--q-steps-connector-width) * 0.5)
+          );
+          width: var(--q-steps-connector-width);
+          background-color: var(--q-theme-neutral);
+        }
+        &.q-step--next-reached::before {
+          background-color: var(--q-theme-primary);
+        }
+      }
+    }
+  }
+  
+  &--dot {
+    --q-steps-dot-size: var(--q-space-2);
+    --q-steps-dot-size-active: var(--q-space-3);
+    
+    
+    
+    --q-steps-indicator-size: var(--q-steps-dot-size-active);
+    
+    
+    
+    
+    --q-steps-dot-current-size: var(--q-steps-dot-size);
+    .q-step__header {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--q-space-3);
+      margin: 0;
+      padding: var(--q-space-2);
+      border: 0;
+      border-radius: var(--q-border-radius);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      text-align: start;
+      cursor: pointer;
+      &:disabled {
+        cursor: not-allowed;
+      }
+      &:focus-visible {
+        outline: var(--q-focus-ring);
+      }
+    }
+    .q-step__indicator {
+      position: relative;
+      z-index: 1;
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: var(--q-steps-indicator-size);
+      height: var(--q-steps-indicator-size);
+      &::after {
+        content: '';
+        width: var(--q-steps-dot-size);
+        height: var(--q-steps-dot-size);
+        border-radius: 50%;
+        background-color: var(--q-theme-neutral);
+        transition:
+          width var(--q-transition-duration) var(--q-transition-timing-function),
+          height var(--q-transition-duration) var(--q-transition-timing-function),
+          background-color var(--q-transition-duration) var(--q-transition-timing-function);
+      }
+    }
+    .q-step__labels {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--q-space-1) * 0.5);
+      min-width: 0;
+    }
+    .q-step__title {
+      display: inline-flex;
+      align-items: baseline;
+      gap: calc(var(--q-space-1) * 0.5);
+      font-weight: var(--q-font-weight-bold);
+      color: var(--q-theme-on-background);
+      line-height: var(--q-line-height-md);
+    }
+    .q-step__caption {
+      font-size: var(--q-font-size-sm);
+      color: var(--q-theme-neutral);
+    }
+    .q-step__header:not(.q-step--active, .q-step--visited) .q-step__title {
+      color: var(--q-theme-neutral);
+    }
+    .q-step__header.q-step--active {
+      --q-steps-dot-current-size: var(--q-steps-dot-size-active);
+    }
+    .q-step--active .q-step__indicator::after {
+      width: var(--q-steps-dot-size-active);
+      height: var(--q-steps-dot-size-active);
+      background-color: var(--q-theme-primary);
+    }
+    .q-step--visited .q-step__indicator::after {
+      background-color: var(--q-theme-primary);
+    }
+    
+    
+    
+    .q-step--completed .q-step__indicator::after {
+      background-color: var(--q-theme-success);
+    }
+    
+    
+    @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);
+      }
+      .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);
+      }
+      .q-step__header.q-step--completed:hover:not(:disabled) .q-step__indicator::after {
+        background-color: var(--q-theme-success-dark);
+      }
+    }
+    &.q-steps--horizontal {
+      .q-steps__track {
+        align-items: flex-start;
+      }
+      .q-step__header {
+        position: relative;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+      }
+      
+      
+      
+      
+      
+      .q-step__badge {
+        top: calc(
+          var(--q-space-2) +
+            ((var(--q-steps-indicator-size) - var(--q-steps-dot-current-size)) * 0.5)
+        );
+        inset-inline-start: calc(50% + (var(--q-steps-dot-current-size) * 0.5));
+        transform: translate(-50%, -50%);
+      }
+      .q-step:not(:last-child) .q-step__header::after {
+        content: '';
+        position: absolute;
+        top: calc(var(--q-space-2) + (var(--q-steps-indicator-size) * 0.5));
+        inset-inline-start: calc(
+          50% + (var(--q-steps-indicator-size) * 0.5) + var(--q-steps-connector-gap)
+        );
+        width: calc(100% - var(--q-steps-indicator-size) - (var(--q-steps-connector-gap) * 2));
+        height: var(--q-steps-connector-width);
+        background-color: var(--q-theme-neutral);
+      }
+      .q-step--next-reached:not(:last-child) .q-step__header::after {
+        background-color: var(--q-theme-primary);
+      }
+      .q-step__labels {
+        align-items: center;
+        text-align: center;
+      }
+    }
+    &.q-steps--vertical {
+      --q-steps-row-gap: var(--q-space-2);
+      
+      
+      
+      
+      --q-steps-indicator-row-height: var(--q-line-height-md);
+      .q-step {
+        position: relative;
+      }
+      .q-step__header {
+        align-items: flex-start;
+      }
+      .q-step__indicator {
+        height: var(--q-steps-indicator-row-height);
+      }
+      
+      
+      
+      
+      
+      .q-step__badge {
+        top: calc(
+          var(--q-space-2) +
+            ((var(--q-steps-indicator-row-height) - var(--q-steps-dot-current-size)) * 0.5)
+        );
+        inset-inline-start: calc(
+          var(--q-space-2) +
+            ((var(--q-steps-indicator-size) + var(--q-steps-dot-current-size)) * 0.5)
+        );
+        transform: translate(-50%, -50%);
+      }
+      .q-step:not(.q-step--last, .q-step--active) {
+        margin-block-end: var(--q-steps-row-gap);
+      }
+      .q-step:not(.q-step--last)::before {
+        content: '';
+        position: absolute;
+        top: calc(
+          var(--q-space-2) +
+            ((var(--q-steps-indicator-row-height) + var(--q-steps-dot-size-active)) * 0.5) +
+            var(--q-steps-connector-gap)
+        );
+        inset-inline-start: calc(
+          var(--q-space-2) + (var(--q-steps-indicator-size) * 0.5) -
+            (var(--q-steps-connector-width) * 0.5)
+        );
+        
+        
+        
+        bottom: calc(
+          var(--q-steps-connector-gap) - var(--q-space-2) - var(--q-steps-row-gap) -
+            ((var(--q-steps-indicator-row-height) - var(--q-steps-dot-size-active)) * 0.5)
+        );
+        width: var(--q-steps-connector-width);
+        background-color: var(--q-theme-neutral);
+      }
+      .q-step--next-reached:not(.q-step--last)::before {
+        background-color: var(--q-theme-primary);
+      }
+      .q-step--active:not(.q-step--last)::before {
+        bottom: 0;
+      }
+      .q-steps__body {
+        position: relative;
+        padding-inline-start: calc(var(--q-steps-indicator-size) + var(--q-space-5));
+        padding-block-start: var(--q-steps-row-gap);
+        &:not(:last-child) {
+          margin-block-end: var(--q-steps-row-gap);
+        }
+        &:not(:last-child)::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: calc(
+            var(--q-steps-connector-gap) - var(--q-space-2) - var(--q-steps-row-gap) -
+              ((var(--q-steps-indicator-row-height) - var(--q-steps-dot-size-active)) * 0.5)
+          );
+          inset-inline-start: calc(
+            var(--q-space-2) + (var(--q-steps-indicator-size) * 0.5) -
+              (var(--q-steps-connector-width) * 0.5)
+          );
+          width: var(--q-steps-connector-width);
+          background-color: var(--q-theme-neutral);
+        }
+        &.q-step--next-reached::before {
+          background-color: var(--q-theme-primary);
+        }
+      }
+    }
+  }
+  
+  &--boxed {
+    .q-step__header {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--q-space-1);
+      margin: 0;
+      padding: var(--q-space-3) var(--q-space-2);
+      border: var(--q-border-width) solid transparent;
+      border-radius: var(--q-border-radius);
+      background-color: rgb(var(--q-theme-neutral-rgb) / 12%);
+      color: var(--q-theme-neutral-dark);
+      font: inherit;
+      text-align: center;
+      cursor: pointer;
+      box-shadow: none;
+      &:disabled {
+        cursor: not-allowed;
+      }
+      &:focus-visible {
+        outline: var(--q-focus-ring);
+      }
+    }
+    
+    
+    
+    
+    .q-step__badge {
+      top: var(--q-space-1);
+    }
+    .q-step__indicator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--q-space-5);
+      font-weight: var(--q-font-weight-bold);
+      line-height: 1;
+      color: inherit;
+    }
+    .q-step__indicator-content {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .q-step__labels {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: calc(var(--q-space-1) * 0.5);
+    }
+    .q-step__title {
+      display: inline-flex;
+      align-items: baseline;
+      gap: calc(var(--q-space-1) * 0.5);
+      font-weight: var(--q-font-weight-bold);
+      color: inherit;
+    }
+    .q-step__caption {
+      font-size: var(--q-font-size-sm);
+      color: inherit;
+      opacity: 0.9;
+    }
+    .q-step__header.q-step--active {
+      background-color: var(--q-theme-primary);
+      border-color: var(--q-theme-primary);
+      color: var(--q-theme-on-primary);
+      box-shadow: var(--q-shadow-md);
+    }
+    .q-step__header.q-step--visited {
+      background-color: rgb(var(--q-theme-primary-rgb) / 12%);
+      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);
+      }
+      .q-step__header.q-step--active:hover:not(:disabled) {
+        background-color: var(--q-theme-primary-dark);
+        border-color: var(--q-theme-primary-dark);
+      }
+      .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);
+      }
+    }
+    &.q-steps--horizontal {
+      .q-steps__track {
+        gap: var(--q-space-2);
+      }
+      .q-step__badge {
+        inset-inline-end: var(--q-space-1);
+      }
+    }
+    &.q-steps--vertical {
+      .q-steps__list {
+        gap: var(--q-space-2);
+      }
+      .q-step__header {
+        width: 100%;
+        flex-direction: row;
+        justify-content: flex-start;
+        text-align: start;
+        gap: var(--q-space-3);
+        padding-inline: var(--q-space-5) var(--q-space-4);
+      }
+      
+      
+      
+      .q-step__indicator {
+        flex-shrink: 0;
+        width: var(--q-steps-indicator-size);
+        height: var(--q-steps-indicator-size);
+      }
+      
+      
+      
+      
+      .q-step__badge {
+        position: static;
+        order: -1;
+        flex-shrink: 0;
+        transform: none;
+      }
+      .q-step__labels {
+        align-items: flex-start;
+      }
+      .q-steps__body {
+        padding-block: var(--q-space-2);
+      }
+    }
+  }
+  
+  &--arrow {
+    .q-step__header {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--q-space-1);
+      margin: 0;
+      padding: var(--q-space-3) var(--q-space-4);
+      border: 0;
+      border-radius: var(--q-border-radius);
+      background-color: rgb(var(--q-theme-neutral-rgb) / 12%);
+      color: var(--q-theme-neutral-dark);
+      font: inherit;
+      text-align: center;
+      cursor: pointer;
+      &:disabled {
+        cursor: not-allowed;
+      }
+      
+      
+      
+      &:focus-visible {
+        outline: none;
+      }
+    }
+    .q-step__indicator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--q-space-5);
+      font-weight: var(--q-font-weight-bold);
+      line-height: 1;
+      color: inherit;
+    }
+    .q-step__indicator-content {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .q-step__labels {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: calc(var(--q-space-1) * 0.5);
+    }
+    .q-step__title {
+      display: inline-flex;
+      align-items: baseline;
+      gap: calc(var(--q-space-1) * 0.5);
+      font-weight: var(--q-font-weight-bold);
+      color: inherit;
+    }
+    .q-step__caption {
+      font-size: var(--q-font-size-sm);
+      color: inherit;
+      opacity: 0.9;
+    }
+    .q-step__header.q-step--active {
+      background-color: var(--q-theme-primary);
+      color: var(--q-theme-on-primary);
+    }
+    
+    
+    
+    .q-step__header.q-step--visited {
+      background-color: rgb(var(--q-theme-primary-rgb) / 12%);
+      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);
+      }
+      .q-step__header.q-step--active:hover:not(:disabled) {
+        background-color: var(--q-theme-primary-dark);
+      }
+      .q-step__header.q-step--visited:hover:not(:disabled) {
+        background-color: var(--q-theme-primary-dark);
+        color: var(--q-theme-on-primary-dark);
+      }
+    }
+    
+    
+    
+    
+    
+    .q-step:has(.q-step__header:focus-visible) {
+      outline: var(--q-focus-ring);
+      border-radius: var(--q-border-radius);
+    }
+    
+    
+    
+    &.q-steps--horizontal {
+      .q-steps__track {
+        gap: 0;
+      }
+      .q-step__header {
+        position: relative;
+        min-width: 0;
+        
+        clip-path: polygon(
+          0 0,
+          calc(100% - var(--q-steps-arrow-size)) 0,
+          100% 50%,
+          calc(100% - var(--q-steps-arrow-size)) 100%,
+          0 100%,
+          var(--q-steps-arrow-size) 50%
+        );
+        padding-inline: calc(var(--q-space-4) + var(--q-steps-arrow-size));
+        margin-inline-end: calc(var(--q-steps-arrow-size) * -0.5);
+      }
+      
+      
+      
+      
+      .q-step__badge {
+        top: var(--q-space-1);
+        inset-inline-end: var(--q-steps-arrow-size);
+      }
+      .q-steps__track > .q-step:first-child .q-step__header {
+        clip-path: polygon(
+          0 0,
+          calc(100% - var(--q-steps-arrow-size)) 0,
+          100% 50%,
+          calc(100% - var(--q-steps-arrow-size)) 100%,
+          0 100%
+        );
+        padding-inline-start: var(--q-space-3);
+      }
+      
+      .q-steps__track > .q-step:last-child .q-step__header {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--q-steps-arrow-size) 50%);
+        padding-inline-end: var(--q-space-3);
+        margin-inline-end: 0;
+      }
+    }
+    &.q-steps--vertical {
+      .q-steps__list {
+        gap: 0;
+      }
+      
+      
+      
+      
+      
+      
+      .q-step__header {
+        width: 100%;
+        flex-direction: row;
+        justify-content: flex-start;
+        text-align: start;
+        gap: var(--q-space-3);
+        clip-path: polygon(
+          0 0,
+          calc(50% - var(--q-steps-arrow-size)) 0,
+          50% var(--q-steps-arrow-size),
+          calc(50% + var(--q-steps-arrow-size)) 0,
+          100% 0,
+          100% calc(100% - var(--q-steps-arrow-size)),
+          calc(50% + var(--q-steps-arrow-size)) calc(100% - var(--q-steps-arrow-size)),
+          50% 100%,
+          calc(50% - var(--q-steps-arrow-size)) calc(100% - var(--q-steps-arrow-size)),
+          0 calc(100% - var(--q-steps-arrow-size))
+        );
+        padding-inline-start: var(--q-space-5);
+        padding-block: var(--q-space-3) calc(var(--q-space-3) + var(--q-steps-arrow-size));
+        margin-block-end: calc(var(--q-steps-arrow-size) * -0.5);
+      }
+      
+      
+      
+      .q-step__indicator {
+        flex-shrink: 0;
+        width: var(--q-steps-indicator-size);
+        height: var(--q-steps-indicator-size);
+      }
+      
+      
+      
+      .q-step__badge {
+        position: static;
+        order: -1;
+        flex-shrink: 0;
+        transform: none;
+      }
+      .q-step:first-child .q-step__header {
+        clip-path: polygon(
+          0 0,
+          100% 0,
+          100% calc(100% - var(--q-steps-arrow-size)),
+          calc(50% + var(--q-steps-arrow-size)) calc(100% - var(--q-steps-arrow-size)),
+          50% 100%,
+          calc(50% - var(--q-steps-arrow-size)) calc(100% - var(--q-steps-arrow-size)),
+          0 calc(100% - var(--q-steps-arrow-size))
+        );
+      }
+      
+      
+      .q-step--last .q-step__header {
+        clip-path: polygon(
+          0 0,
+          calc(50% - var(--q-steps-arrow-size)) 0,
+          50% var(--q-steps-arrow-size),
+          calc(50% + var(--q-steps-arrow-size)) 0,
+          100% 0,
+          100% 100%,
+          0 100%
+        );
+        padding-block-end: var(--q-space-3);
+        margin-block-end: 0;
+      }
+      .q-step__labels {
+        align-items: flex-start;
+      }
+      .q-steps__body {
+        padding-block: var(--q-space-2);
+      }
+    }
+  }
+}
+.q-step {
+  &__indicator {
+    transition:
+      background-color var(--q-transition-duration) var(--q-transition-timing-function),
+      box-shadow var(--q-transition-duration) var(--q-transition-timing-function),
+      color var(--q-transition-duration) var(--q-transition-timing-function);
+  }
+  &__title,
+  &__caption {
+    transition: color var(--q-transition-duration) var(--q-transition-timing-function);
+  }
+  &__header {
+    transition:
+      background-color var(--q-transition-duration) var(--q-transition-timing-function),
+      box-shadow var(--q-transition-duration) var(--q-transition-timing-function),
+      color var(--q-transition-duration) var(--q-transition-timing-function),
+      opacity var(--q-transition-duration) var(--q-transition-timing-function);
+    &::after {
+      transition: background-color var(--q-transition-duration) var(--q-transition-timing-function);
+    }
+  }
+  &::before {
+    transition: background-color var(--q-transition-duration) var(--q-transition-timing-function);
+  }
+  &--disabled .q-step__header {
+    opacity: 0.6;
+  }
+}
+.q-switch {
+  
+  
+  
+  --q-switch-inner-padding: calc(var(--q-space-1) * 0.5);
+  --q-switch-border-radius: 9999px; 
+  --q-switch-transition-duration: 0.15s;
+  --q-switch-transition-easing: ease-out;
+  
+  --q-switch-label-padding-v: calc(var(--q-space-1) * 2.5);
+  --q-switch-label-padding-h: calc(var(--q-space-1) * 3.75);
+  --q-switch-font-size: var(--q-font-size-sm);
+  
+  --q-switch-label-block-size: calc(
+    var(--q-switch-label-padding-v) * 2 + var(--q-switch-font-size)
+  );
+  --q-switch-drawn-height: calc(
+    var(--q-switch-inner-padding) * 2 + var(--q-switch-label-block-size)
+  );
+  --q-switch-hit-padding-block: max(
+    0px,
+    calc((var(--q-interactive-height) - var(--q-switch-drawn-height)) / 2)
+  );
+  
+  --q-switch-shadow-color-primary: rgb(var(--q-theme-on-background-rgb) / 20%);
+  --q-switch-shadow-color-secondary: rgb(var(--q-theme-on-background-rgb) / 10%);
+  --q-switch-shadow-blur-base: calc(var(--q-space-1) * 0.75);
+  --q-switch-shadow-offset-y: calc(var(--q-space-1) * 0.25);
+  --q-switch-shadow-spread: calc(var(--q-space-1) * 0.5);
+  
+  --q-switch-shadow-color-primary-hover: rgb(var(--q-theme-on-background-rgb) / 30%);
+  --q-switch-shadow-color-secondary-hover: rgb(var(--q-theme-on-background-rgb) / 15%);
+  --q-switch-shadow-blur-hover: calc(var(--q-space-1) * 1.5);
+  --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);
+  --q-switch-on-checked-background: var(--q-theme-on-primary);
+  --q-switch-unchecked-background: rgb(var(--q-theme-neutral-light-rgb) / 50%);
+  --q-switch-on-unchecked-background: var(--q-theme-neutral);
+  
+  
+  
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  white-space: nowrap;
+  box-sizing: border-box;
+  height: var(--q-interactive-height);
+  min-height: var(--q-interactive-height);
+  
+  padding: var(--q-switch-hit-padding-block) 0;
+  background: transparent;
+  border-radius: var(--q-switch-border-radius);
+  cursor: pointer;
+  
+  
+  
+  @include q-size-modifiers;
+  
+  
+  
+  &--disabled {
+    opacity: var(--q-switch-disabled-opacity);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+}
+.q-switch:not(.q-switch--with-labels) {
+  --q-switch-label-padding-h: var(--q-switch-label-padding-v);
+}
+.q-switch__container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+}
+.q-switch__input {
+  position: absolute;
+  inset: var(--q-switch-hit-padding-block) 0 var(--q-switch-hit-padding-block) 0;
+  
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--q-switch-border-radius);
+  z-index: 2;
+  
+  &:focus-visible {
+    outline: var(--q-focus-ring);
+  }
+  
+  &:disabled {
+    cursor: not-allowed;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}
+.q-switch__labels {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--q-switch-inner-padding);
+  background: var(--q-switch-unchecked-background);
+  border-radius: var(--q-switch-border-radius);
+  transition: background var(--q-switch-transition-duration) var(--q-switch-transition-easing);
+}
+.q-switch__label {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5079,6 +6193,12 @@ $spinner-color: var(--q-theme-primary);
   padding: var(--q-control-padding-y-lg) var(--q-control-padding-x-lg);
   &.q-button.q-button--text {
     color: var(--q-theme-neutral-dark);
+    
+    @media (hover: hover) {
+      &:hover:not(:disabled) {
+        text-decoration: none;
+      }
+    }
   }
   &--active.q-button.q-button--text {
     color: var(--q-theme-primary);
@@ -5229,6 +6349,8 @@ $spinner-color: var(--q-theme-primary);
   $this: &;
   --q-toast-main-color: var(--q-theme-info);
   --q-toast-on-main-color: var(--q-theme-on-info);
+  --q-toast-text-color: var(--q-theme-info-dark);
+  --q-toast-tonal-text-color: var(--q-theme-info-dark);
   --q-toast-tonal-color: var(--q-theme-info-light);
   --q-toast-width: calc(8 * 5em + 7 * var(--q-space-1)); 
   max-width: var(--q-toast-width);
@@ -5272,12 +6394,23 @@ $spinner-color: var(--q-theme-primary);
   &--tonal {
     background-color: var(--q-toast-tonal-color);
     border-color: transparent;
-    color: var(--q-toast-hover-color);
+    color: var(--q-toast-tonal-text-color);
+    
+    
+    
+    .q-toast__dismiss.q-button {
+      color: var(--q-toast-tonal-text-color);
+      @media (hover: hover) {
+        &:hover:not(:disabled) {
+          color: var(--q-toast-tonal-text-color);
+        }
+      }
+    }
   }
   &--outlined {
     background-color: transparent;
     border-color: var(--q-toast-main-color);
-    color: var(--q-toast-main-color);
+    color: var(--q-toast-text-color);
   }
 }
 .q-toast-stack-enter-active {