@quidgest/ui 0.14.13 → 0.14.15

package/dist/ui.css

@@ -267,7 +267,7 @@ body {
   caret-color: var(--q-theme-on-background);
 }
 body * {
-  scrollbar-color: var(--q-theme-neutral-light) rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  scrollbar-color: var(--q-theme-neutral-light) rgb(var(--q-theme-neutral-light-rgb)/25%);
   scrollbar-width: thin;
 }
 body *::-webkit-scrollbar {
@@ -279,7 +279,7 @@ body *::-webkit-scrollbar-thumb {
   border-radius: var(--border-radius);
 }
 body *::-webkit-scrollbar-track {
-  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
   border-radius: var(--border-radius);
 }
 
@@ -298,7 +298,6 @@ body *::-webkit-scrollbar-track {
   transition: opacity 0.2s;
 }
 
-/* Internal components */
 .q-chevron {
   transition: all 0.2s;
 }
@@ -322,7 +321,6 @@ body *::-webkit-scrollbar-track {
   opacity: 1;
 }
 
-/* Components */
 .q-accordion {
   display: flex;
   flex-direction: column;
@@ -334,18 +332,20 @@ body *::-webkit-scrollbar-track {
   border-width: 1px;
   border-color: transparent;
   border-radius: var(--border-radius);
-  padding: 0.25em 0.5em;
-  line-height: 1rem;
+  padding: 0.4em 0.5em;
   font-size: 0.75rem;
+  line-height: 1;
   position: relative;
   color: var(--q-badge-text-color);
+  transition-property: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
+  transition-duration: 0.15s;
 }
 .q-badge__underlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  top: -1px;
+  left: -1px;
+  width: calc(100% + 2px);
+  height: calc(100% + 2px);
   border-radius: inherit;
   background-color: var(--q-badge-color);
   opacity: 0.1;
@@ -353,10 +353,12 @@ body *::-webkit-scrollbar-track {
 .q-badge__content {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  min-height: 1rem;
+  gap: 0.25em;
   z-index: 1;
 }
+.q-badge__remove .q-btn__content {
+  font-size: inherit;
+}
 .q-badge__remove.q-btn:not(:disabled) {
   padding: 0;
   border-radius: 9999px;
@@ -365,20 +367,8 @@ body *::-webkit-scrollbar-track {
 .q-badge__remove.q-btn:not(:disabled):hover {
   background-color: var(--q-badge-color);
 }
-.q-badge--clickable {
-  cursor: pointer;
-}
-.q-badge--clickable:hover {
-  color: var(--q-badge-text-hover-color, var(--q-badge-text-color));
-}
-.q-badge--clickable:hover .q-badge__underlay {
-  background-color: var(--q-badge-hover-color, var(--q-badge-color));
-}
-.q-badge--clickable:focus {
-  outline: 2px solid rgb(var(--q-theme-info-rgb)/0.5);
-}
-.q-badge--clickable:focus:not(:focus-visible) {
-  outline: 0;
+.q-badge--large {
+  font-size: 0.9rem;
 }
 .q-badge--pill {
   border-radius: 9999px;
@@ -390,7 +380,7 @@ body *::-webkit-scrollbar-track {
   opacity: 1;
 }
 .q-badge--outlined {
-  border-color: currentColor;
+  border-color: currentcolor;
 }
 .q-badge--outlined .q-badge__underlay {
   opacity: 0;
@@ -399,6 +389,21 @@ body *::-webkit-scrollbar-track {
   background-color: var(--q-badge-color);
   opacity: 1;
 }
+.q-badge--clickable {
+  cursor: pointer;
+}
+.q-badge--clickable:hover {
+  color: var(--q-badge-text-hover-color, var(--q-badge-text-color));
+}
+.q-badge--clickable:hover .q-badge__underlay {
+  background-color: var(--q-badge-hover-color, var(--q-badge-color));
+}
+.q-badge--clickable:focus {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
+}
+.q-badge--clickable:focus:not(:focus-visible) {
+  outline: 0;
+}
 .q-badge--primary {
   --q-badge-color: var(--q-theme-primary);
 }
@@ -497,34 +502,74 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-badge-indicator {
+  flex-wrap: wrap;
+  place-content: center center;
+  align-items: center;
   position: absolute;
-  padding: 0.1rem 0.5em;
-  border: 0;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0.25rem;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0;
 }
 .q-badge-indicator__wrapper {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  flex-shrink: 0;
 }
 .q-badge-indicator--dot {
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
+  border-radius: 4px;
+  height: 8px;
+  min-width: 8px;
+  padding: 0;
 }
 .q-badge-indicator--top-right {
-  bottom: calc(100% - 0.5rem);
-  left: calc(100% - 0.5rem);
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
 }
 .q-badge-indicator--top-left {
-  bottom: calc(100% - 0.5rem);
-  right: calc(100% - 0.5rem);
+  top: 0;
+  left: 0;
+  transform: scale(1) translate(-50%, -50%);
+  transform-origin: 0% 0%;
 }
-.q-badge-indicator--bottom-right {
-  top: calc(100% - 0.5rem);
-  left: calc(100% - 0.5rem);
+.q-badge-indicator--top-center {
+  top: 0;
+  left: 50%;
+  transform: scale(1) translate(-50%, -50%);
+  transform-origin: 50% 0%;
+}
+.q-badge-indicator--middle-left {
+  top: 50%;
+  left: 0;
+  transform: scale(1) translate(-50%, -50%);
+  transform-origin: 0% 50%;
+}
+.q-badge-indicator--middle-right {
+  top: 50%;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 50%;
 }
 .q-badge-indicator--bottom-left {
-  top: calc(100% - 0.5rem);
-  right: calc(100% - 0.5rem);
+  bottom: 0;
+  left: 0;
+  transform: scale(1) translate(-50%, 50%);
+  transform-origin: 0% 100%;
+}
+.q-badge-indicator--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: scale(1) translate(-50%, 50%);
+  transform-origin: 50% 100%;
+}
+.q-badge-indicator--bottom-right {
+  bottom: 0;
+  right: 0;
+  transform: scale(1) translate(50%, 50%);
+  transform-origin: 100% 100%;
 }
 
 .q-btn {
@@ -533,7 +578,7 @@ body *::-webkit-scrollbar-track {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.4rem;
+  padding: 0.4em;
   border-width: 1px;
   background-color: transparent;
   user-select: none;
@@ -541,19 +586,21 @@ body *::-webkit-scrollbar-track {
   -moz-user-select: none;
   border-radius: var(--border-radius);
   transition-property: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 0.15s;
 }
-.q-btn:hover:not(:disabled) {
-  cursor: pointer;
+.q-btn:disabled {
+  opacity: 0.6;
 }
 .q-btn:focus {
-  outline: 2px solid rgb(var(--q-theme-info-rgb)/0.5);
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
   z-index: 3;
 }
 .q-btn:focus:not(:focus-visible) {
   outline: 0;
 }
+.q-btn:hover:not(:disabled) {
+  cursor: pointer;
+}
 .q-btn__content {
   position: relative;
   display: flex;
@@ -562,13 +609,12 @@ body *::-webkit-scrollbar-track {
   justify-content: center;
   font-size: 0.9rem;
   white-space: nowrap;
-  gap: 0.25rem;
+  gap: 0.25em;
   pointer-events: none;
-  line-height: 15px;
-  min-width: 15px;
+  line-height: 1;
 }
 .q-btn .q-spinner-loader {
-  color: currentColor;
+  color: currentcolor;
 }
 .q-btn--primary {
   --box-shadow-tint: var(--q-theme-primary-dark-rgb);
@@ -583,7 +629,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-btn--secondary {
   --box-shadow-tint: var(--q-theme-primary-dark-rgb);
-  border-color: currentColor;
+  border-color: currentcolor;
   color: var(--q-theme-primary);
 }
 .q-btn--secondary:hover:not(:disabled) {
@@ -615,16 +661,13 @@ body *::-webkit-scrollbar-track {
   color: var(--q-theme-on-background);
 }
 .q-btn--plain:hover:not(:disabled) {
-  background-color: rgb(var(--q-theme-neutral-rgb)/0.1);
+  background-color: rgb(var(--q-theme-neutral-rgb)/10%);
 }
 .q-btn--active {
   z-index: 2;
   color: var(--q-theme-primary-dark);
   border-color: var(--q-theme-primary);
-  background-color: rgb(var(--q-theme-primary-light-rgb)/0.5);
-}
-.q-btn:disabled {
-  opacity: 0.6;
+  background-color: rgb(var(--q-theme-primary-light-rgb)/50%);
 }
 .q-btn--loading:hover {
   cursor: not-allowed;
@@ -633,18 +676,16 @@ body *::-webkit-scrollbar-track {
   visibility: hidden;
 }
 .q-btn--small {
-  padding: 0.25rem;
-  line-height: 14px;
+  padding: 0.25em;
 }
 .q-btn--small span {
   font-size: 0.75rem;
-  line-height: 14px;
 }
 .q-btn--borderless {
   border-color: transparent !important;
 }
 .q-btn--elevated {
-  box-shadow: 0 2px 4px -1px rgb(var(--box-shadow-tint)/0.2), 0 4px 5px 0 rgb(var(--box-shadow-tint)/0.14), 0 1px 10px 0 rgb(var(--box-shadow-tint)/0.12);
+  box-shadow: 0 2px 4px -1px rgb(var(--box-shadow-tint)/20%), 0 4px 5px 0 rgb(var(--box-shadow-tint)/14%), 0 1px 10px 0 rgb(var(--box-shadow-tint)/12%);
 }
 .q-btn--block {
   display: block;
@@ -667,7 +708,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-btn-group--elevated {
   --box-shadow-tint: var(--q-theme-primary-rgb);
-  box-shadow: 0 2px 4px -1px rgb(var(--box-shadow-tint)/0.2), 0 4px 5px 0 rgb(var(--box-shadow-tint)/0.14), 0 1px 10px 0 rgb(var(--box-shadow-tint)/0.12);
+  box-shadow: 0 2px 4px -1px rgb(var(--box-shadow-tint)/20%), 0 4px 5px 0 rgb(var(--box-shadow-tint)/14%), 0 1px 10px 0 rgb(var(--box-shadow-tint)/12%);
 }
 .q-btn-group > .q-btn {
   position: relative;
@@ -691,7 +732,7 @@ body *::-webkit-scrollbar-track {
   --card-padding: 1rem;
   --card-border: 1px solid var(--q-theme-neutral-light);
   --card-width: fit-content;
-  --card-hover: 0 5px 15px rgb(var(--q-theme-neutral-rgb) / 0.25);
+  --card-hover: 0 5px 15px rgb(var(--q-theme-neutral-rgb) / 25%);
   --card-scale: 1;
   --card-shadow: none;
   --card-background: var(--q-theme-container);
@@ -748,22 +789,22 @@ body *::-webkit-scrollbar-track {
   display: flex;
 }
 .q-card--elevation-low {
-  --card-shadow: 0 4px 6px rgb(var(--q-theme-neutral-dark-rgb) / 0.15);
+  --card-shadow: 0 4px 6px rgb(var(--q-theme-neutral-dark-rgb) / 15%);
 }
 .q-card--elevation-medium {
-  --card-shadow: 0 6px 9px rgb(var(--q-theme-neutral-dark-rgb) / 0.2);
+  --card-shadow: 0 6px 9px rgb(var(--q-theme-neutral-dark-rgb) / 20%);
 }
 .q-card--elevation-high {
-  --card-shadow: 0 8px 12px rgb(var(--q-theme-neutral-dark-rgb) / 0.25);
+  --card-shadow: 0 8px 12px rgb(var(--q-theme-neutral-dark-rgb) / 25%);
 }
 .q-card--background {
-  --card-background: rgb(var(--q-theme-primary-light-rgb) / 0.5);
+  --card-background: rgb(var(--q-theme-primary-light-rgb) / 50%);
 }
 .q-card--background .q-field__control {
   background-color: var(--q-theme-container);
 }
 .q-card--title-background .q-card__header-content {
-  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
   padding-bottom: 0.75rem;
 }
 .q-card--title-background .q-card__title {
@@ -781,7 +822,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-card--minor .q-card__subtitle {
   font-size: 0.75rem;
-  color: rgb(var(--q-theme-neutral-rgb)/0.8);
+  color: rgb(var(--q-theme-neutral-rgb)/80%);
 }
 .q-card--borderless {
   --card-border: 1px solid transparent;
@@ -853,7 +894,7 @@ body *::-webkit-scrollbar-track {
   outline: 0;
 }
 .q-checkbox__input:focus-visible:not(:disabled) {
-  outline: 2px solid rgb(var(--q-theme-info-rgb)/0.5);
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
 }
 .q-checkbox__input-icon.q-icon {
   color: var(--icon-color);
@@ -913,7 +954,7 @@ body *::-webkit-scrollbar-track {
   cursor: default;
 }
 .q-checkbox--readonly:not(.q-checkbox--checked):not(.q-checkbox--indeterminate) .q-checkbox__input {
-  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1054,7 +1095,7 @@ body *::-webkit-scrollbar-track {
   border-width: 1px;
 }
 .q-color-picker__swatch:focus-visible {
-  outline: 2px solid rgb(var(--q-theme-info-rgb)/0.5);
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
 }
 .q-color-picker__swatch:not(:disabled) {
   cursor: pointer;
@@ -2434,7 +2475,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-dialog__underlay {
-  background-color: rgb(var(--q-theme-on-background-rgb)/0.3);
+  background-color: rgb(var(--q-theme-on-background-rgb)/30%);
 }
 
 .q-dialog__header {
@@ -2546,7 +2587,7 @@ body *::-webkit-scrollbar-track {
   color: var(--q-theme-danger);
 }
 .q-field--readonly > .q-field__control {
-  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
 }
 .q-field--disabled > .q-field__control {
   opacity: 0.5;
@@ -2555,7 +2596,7 @@ body *::-webkit-scrollbar-track {
   cursor: not-allowed;
 }
 .q-field:not(.q-field--disabled) .q-field__control:focus-within {
-  outline: 2px solid rgb(var(--q-theme-info-rgb)/0.5);
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
 }
 .q-field--mini > .q-field__control {
   width: calc(1 * 5em + 0 * 0.25rem);
@@ -2580,13 +2621,13 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-file-input {
-  --q-file-input__preview-side: 3rem;
-  --q-file-input__preview-padding: 0.75rem;
+  --q-file-input-preview-side: 3rem;
+  --q-file-input-preview-padding: 0.75rem;
   justify-content: center;
   flex-direction: column;
   border-width: 2px; /* Make dashes more visible */
   border-style: dashed;
-  padding: var(--q-file-input__preview-padding);
+  padding: var(--q-file-input-preview-padding);
   transition: border-color 0.2s ease, background-color 0.2s ease;
 }
 .q-file-input__drop-area {
@@ -2594,7 +2635,7 @@ body *::-webkit-scrollbar-track {
   gap: 0.5rem;
   align-items: center;
   color: var(--q-theme-neutral);
-  min-height: var(--q-file-input__preview-side);
+  min-height: var(--q-file-input-preview-side);
 }
 .q-file-input__file-details {
   display: flex;
@@ -2605,7 +2646,7 @@ body *::-webkit-scrollbar-track {
 .q-file-input__attached-file {
   display: flex;
   align-items: center;
-  gap: var(--q-file-input__preview-padding);
+  gap: var(--q-file-input-preview-padding);
   width: 100%;
 }
 .q-file-input__file-input {
@@ -2613,8 +2654,8 @@ body *::-webkit-scrollbar-track {
 }
 .q-file-input__preview, .q-file-input__preview.q-icon {
   color: var(--q-theme-neutral);
-  width: var(--q-file-input__preview-side);
-  height: var(--q-file-input__preview-side);
+  width: var(--q-file-input-preview-side);
+  height: var(--q-file-input-preview-side);
   flex-shrink: 0;
 }
 .q-file-input__image-preview {
@@ -2655,7 +2696,7 @@ body *::-webkit-scrollbar-track {
   align-items: center;
   gap: 0.25rem;
   color: var(--q-theme-neutral);
-  min-height: var(--q-file-input__preview-side);
+  min-height: var(--q-file-input-preview-side);
 }
 .q-file-input--highlighted {
   border-color: var(--q-theme-primary);
@@ -2672,7 +2713,7 @@ body *::-webkit-scrollbar-track {
   display: inline-block;
 }
 .q-icon__svg {
-  fill: currentColor;
+  fill: currentcolor;
 }
 .q-icon__svg, .q-icon__img {
   width: 1em;
@@ -2705,7 +2746,7 @@ body *::-webkit-scrollbar-track {
   line-height: 1.5;
   font-size: 0.9rem;
   border-width: 1px;
-  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
   color: var(--q-theme-primary);
   white-space: nowrap;
   padding: 0 0.4rem;
@@ -2721,6 +2762,9 @@ body *::-webkit-scrollbar-track {
   padding: 0;
   outline: none !important;
 }
+.q-input-group > .q-field__control > * + * {
+  margin-left: -1px;
+}
 .q-input-group > .q-field__control > * {
   border-radius: 0;
 }
@@ -2735,9 +2779,6 @@ body *::-webkit-scrollbar-track {
   border-top-right-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
 }
-.q-input-group > .q-field__control > * + * {
-  margin-left: -1px;
-}
 
 .q-line-loader {
   width: 100%;
@@ -2776,8 +2817,7 @@ body *::-webkit-scrollbar-track {
   flex-direction: column;
   align-items: center;
   position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   margin: 0;
   padding: 0;
   -webkit-overflow-scrolling: touch;
@@ -2824,7 +2864,7 @@ body *::-webkit-scrollbar-track {
   cursor: pointer;
 }
 .q-list-item:hover, .q-list-item:focus-visible, .q-list-item--highlighted {
-  background-color: rgb(var(--q-theme-primary-light-rgb)/0.5);
+  background-color: rgb(var(--q-theme-primary-light-rgb)/50%);
 }
 .q-list-item--disabled {
   pointer-events: none;
@@ -2842,8 +2882,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-list-item__container {
   display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
+  flex-flow: column wrap;
   flex-grow: 1;
   gap: 0.25rem;
 }
@@ -2938,10 +2977,7 @@ body *::-webkit-scrollbar-track {
   border-bottom-width: 1px;
 }
 .q-overlay--independent {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
   margin: auto;
   width: -moz-max-content;
   width: max-content;
@@ -2970,7 +3006,7 @@ body *::-webkit-scrollbar-track {
   padding: 0.5rem 1rem;
   margin: 0;
   font-size: 0.9rem;
-  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
   border-bottom: 1px solid var(--q-overlay-border-color);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
@@ -2980,7 +3016,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-popover.q-overlay--bottom .q-overlay__arrow::after {
-  border-bottom-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  border-bottom-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
 }
 
 .q-property-list {
@@ -2990,20 +3026,20 @@ body *::-webkit-scrollbar-track {
   flex-direction: column;
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
-.q-property-list--side-panel {
-  flex-direction: row;
-}
-.q-property-list--side-panel .q-property-list-panel__container {
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  width: 20%;
-}
-.q-property-list-panel__container {
+.q-property-list-panel {
   padding: 0.4rem;
   display: flex;
   flex-direction: column;
   min-height: 50px;
   gap: 1rem;
 }
+.q-property-list--side-panel {
+  flex-direction: row;
+}
+.q-property-list--side-panel .q-property-list-panel {
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  width: 20%;
+}
 .q-property-list-panel__label {
   font-weight: bold;
 }
@@ -3013,11 +3049,11 @@ body *::-webkit-scrollbar-track {
   margin: 0;
 }
 .q-property-list__header {
-  background: rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  background: rgb(var(--q-theme-neutral-light-rgb)/25%);
   height: 25px;
 }
 .q-property-list__row:hover {
-  background-color: rgb(var(--q-theme-primary-light-rgb)/0.5);
+  background-color: rgb(var(--q-theme-primary-light-rgb)/50%);
 }
 .q-property-list__row .q-field:not(.q-field--readonly) .q-field__control {
   background-color: var(--q-theme-background);
@@ -3026,7 +3062,7 @@ body *::-webkit-scrollbar-track {
   display: none;
 }
 .q-property-list__row--selected {
-  background-color: rgb(var(--q-theme-primary-rgb)/0.15);
+  background-color: rgb(var(--q-theme-primary-rgb)/15%);
 }
 .q-property-list__cell {
   padding: 0.1rem 0.5rem;
@@ -3037,9 +3073,6 @@ body *::-webkit-scrollbar-track {
   text-wrap: nowrap;
   opacity: 0.8;
 }
-.q-property-list tbody td {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
 .q-property-list-group {
   cursor: pointer;
 }
@@ -3059,6 +3092,9 @@ body *::-webkit-scrollbar-track {
 .q-property-list-group--no-toggle td {
   padding: 0.5rem 1rem;
 }
+.q-property-list tbody td {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
 
 .q-select {
   /* Icon of the selected item */
@@ -3134,18 +3170,15 @@ body *::-webkit-scrollbar-track {
   position: relative;
   overflow: hidden;
   background-color: var(--q-theme-neutral-light);
-  animation: fadeIn 1s;
+  animation: fade-in 1s;
   border-radius: var(--border-radius);
 }
 .q-skeleton-loader__bone::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   transform: translateX(-100%);
   /* stylelint-disable @stylistic/function-parentheses-space-inside */
-  background-image: linear-gradient(90deg, rgb(var(--q-theme-background-rgb)/0) 0, rgb(var(--q-theme-background-rgb)/0.2) 20%, rgb(var(--q-theme-background-rgb)/0.5) 60%, rgb(var(--q-theme-background-rgb)/0));
+  background-image: linear-gradient(90deg, rgb(var(--q-theme-background-rgb)/0%) 0, rgb(var(--q-theme-background-rgb)/20%) 20%, rgb(var(--q-theme-background-rgb)/50%) 60%, rgb(var(--q-theme-background-rgb)/0%));
   /* stylelint-enable @stylistic/function-parentheses-space-inside */
   animation: shimmer 2s infinite;
   content: "";
@@ -3165,7 +3198,7 @@ body *::-webkit-scrollbar-track {
     transform: translateX(100%);
   }
 }
-@keyframes fadeIn {
+@keyframes fade-in {
   0% {
     opacity: 0;
   }
@@ -3181,10 +3214,10 @@ body *::-webkit-scrollbar-track {
   aspect-ratio: 1;
   border-radius: 50%;
   color: var(--q-theme-primary);
-  background: currentColor;
-  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
-  -webkit-mask: var(--_m);
-  mask: var(--_m);
+  background: currentcolor;
+  --q-spinner-loader-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--q-spinner-loader-mask);
+  mask: var(--q-spinner-loader-mask);
   -webkit-mask-composite: source-out;
   mask-composite: subtract;
   animation: q-rotate 1s infinite linear;