@ecopages/radiant-ui 0.1.0-rc.8 → 0.1.0

package/dist/styles/styles.css

@@ -43,15 +43,18 @@
     visibility: hidden;
   }
   .rui-popover {
+    --rui-popover-radius: var(--radius-container);
+    --rui-popover-surface: var(--background);
+    --rui-popover-border-color: var(--border);
+    --rui-popover-shadow: var(--shadow-overlay);
     z-index: var(--z-index-popover, var(--z-popover));
     overflow: auto;
-    border-radius: var(--radius-container, var(--radius-container));
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border, var(--border));
-    background-color: var(--color-background, var(--background));
-    --tw-shadow: var(--shadow-overlay);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    max-height: var(--rui-popover-max-height, calc(100dvh - 1rem));
+    max-width: var(--rui-popover-max-width, calc(100vw - 1rem));
+    border-radius: var(--rui-popover-radius);
+    border: 1px solid var(--rui-popover-border-color);
+    background-color: var(--rui-popover-surface);
+    box-shadow: var(--rui-popover-shadow);
   }
   .rui-popover--listbox {
     display: flex;
@@ -237,11 +240,10 @@ rui-alert {
     background-color: var(--color-background, var(--background));
     padding-inline: var(--spacing-control-x, var(--space-control-x));
     padding-block: var(--spacing-control-y, var(--space-control-y));
-    font-size: var(--text-sm, var(--text-sm));
-    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
     color: var(--color-on-background, var(--on-background));
     --tw-outline-style: none;
     outline-style: none;
+    font-size: var(--text-control-input);
   }
   .rui-autocomplete__input:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -264,33 +266,35 @@ rui-alert {
     display: none;
   }
   .rui-avatar {
+    --rui-avatar-size: var(--space-10);
+    --rui-avatar-radius: var(--radius-pill);
+    --rui-avatar-surface: var(--surface-container);
     position: relative;
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    border-radius: var(--radius-pill, var(--radius-pill));
-    background-color: var(--color-surface-container, var(--surface-container));
     --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
     font-weight: var(--font-weight-medium, var(--weight-medium));
     color: var(--color-on-surface, var(--on-surface));
+    inline-size: var(--rui-avatar-size);
+    block-size: var(--rui-avatar-size);
+    border-radius: var(--rui-avatar-radius);
+    background-color: var(--rui-avatar-surface);
   }
   .rui-avatar--sm {
-    width: var(--spacing-8, var(--space-8));
-    height: var(--spacing-8, var(--space-8));
+    --rui-avatar-size: var(--space-8);
     font-size: var(--text-xs, var(--text-xs));
     line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
   }
   .rui-avatar--md {
-    width: calc(var(--spacing, 0.25rem) * 10);
-    height: calc(var(--spacing, 0.25rem) * 10);
+    --rui-avatar-size: var(--space-10);
     font-size: var(--text-sm, var(--text-sm));
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   }
   .rui-avatar--lg {
-    width: calc(var(--spacing, 0.25rem) * 12);
-    height: calc(var(--spacing, 0.25rem) * 12);
+    --rui-avatar-size: var(--space-12);
     font-size: var(--text-body, var(--text-body));
   }
   .rui-avatar__image {
@@ -630,6 +634,9 @@ rui-breadcrumb {
     @media (forced-colors: active) {
       background-image: none;
     }
+    @media (forced-colors: active) {
+      background-image: none;
+    }
     background-image: var(--sheen-image);
     @media (forced-colors: active) {
       background-image: none;
@@ -844,6 +851,9 @@ rui-breadcrumb {
     @media (forced-colors: active) {
       background-image: none;
     }
+    @media (forced-colors: active) {
+      background-image: none;
+    }
     background-image: var(--sheen-image);
     @media (forced-colors: active) {
       background-image: none;
@@ -1056,6 +1066,9 @@ rui-breadcrumb {
     @media (forced-colors: active) {
       background-image: none;
     }
+    @media (forced-colors: active) {
+      background-image: none;
+    }
     background-image: var(--sheen-image);
     @media (forced-colors: active) {
       background-image: none;
@@ -1298,6 +1311,9 @@ rui-breadcrumb {
     @media (forced-colors: active) {
       background-image: none;
     }
+    @media (forced-colors: active) {
+      background-image: none;
+    }
     background-image: var(--sheen-image);
     @media (forced-colors: active) {
       background-image: none;
@@ -1483,6 +1499,9 @@ rui-breadcrumb {
     @media (forced-colors: active) {
       background-image: none;
     }
+    @media (forced-colors: active) {
+      background-image: none;
+    }
     background-image: var(--sheen-image);
     @media (forced-colors: active) {
       background-image: none;
@@ -1668,6 +1687,9 @@ rui-breadcrumb {
     @media (forced-colors: active) {
       background-image: none;
     }
+    @media (forced-colors: active) {
+      background-image: none;
+    }
     background-image: var(--sheen-image);
     @media (forced-colors: active) {
       background-image: none;
@@ -1693,6 +1715,7 @@ rui-calendar {
 }
 @layer components {
   .rui-calendar {
+    max-width: 100%;
     border-radius: var(--radius-container, var(--radius-container));
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1720,15 +1743,15 @@ rui-calendar {
     }
   }
   .rui-calendar__month-panel {
-    width: calc(var(--spacing, 0.25rem) * 64);
     flex-shrink: 0;
+    width: min(var(--rui-calendar-month-width, 16rem), calc(100vw - 1rem));
   }
   .rui-calendar__header {
     margin-bottom: var(--spacing-2, var(--space-2));
-    display: flex;
+    display: grid;
+    grid-template-columns: 2rem 1fr 2rem;
     align-items: center;
-    justify-content: space-between;
-    gap: var(--spacing-inline, var(--space-inline));
+    gap: 0px;
   }
   .rui-calendar__nav-spacer {
     display: inline-flex;
@@ -1737,7 +1760,11 @@ rui-calendar {
     flex-shrink: 0;
   }
   .rui-calendar__month {
-    flex: 1;
+    min-width: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-inline: var(--spacing-1, var(--space-1));
     text-align: center;
     --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
     font-weight: var(--font-weight-medium, var(--weight-medium));
@@ -1909,6 +1936,11 @@ rui-calendar {
   }
 }
 rui-carousel {
+  --rui-carousel-gap: var(--space-inline);
+  --rui-carousel-radius: var(--radius-container);
+  --rui-carousel-border-color: var(--border);
+  --rui-carousel-surface: var(--surface);
+  --rui-carousel-padding: var(--space-inset);
   display: block;
   width: 100%;
   max-width: 100%;
@@ -1916,6 +1948,7 @@ rui-carousel {
 }
 @layer components {
   .rui-carousel {
+    --rui-carousel-track-gap: 0px;
     display: flex;
     width: 100%;
     max-width: 100%;
@@ -1923,8 +1956,10 @@ rui-carousel {
     flex-direction: column;
     gap: var(--spacing-stack, var(--space-stack));
   }
+  .rui-carousel[data-carousel-surface='cards'] {
+    --rui-carousel-track-gap: var(--rui-carousel-gap);
+  }
   .rui-carousel:focus-visible {
-    border-radius: var(--radius-container, var(--radius-container));
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
@@ -1934,6 +1969,7 @@ rui-carousel {
       outline: 2px solid transparent;
       outline-offset: 2px;
     }
+    border-radius: var(--rui-carousel-radius);
   }
   .rui-carousel__stage {
     position: relative;
@@ -1945,20 +1981,29 @@ rui-carousel {
     width: 100%;
     min-width: 0px;
     overflow: hidden;
-    border-radius: var(--radius-container, var(--radius-container));
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border, var(--border));
-    background-color: var(--color-surface, var(--surface));
     font-size: var(--text-sm, var(--text-sm));
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
     touch-action: pan-y;
   }
-  .rui-carousel--controls-toolbar .rui-carousel__viewport {
-    padding: var(--spacing-inset, var(--space-inset));
+  .rui-carousel[data-carousel-surface='shell'] .rui-carousel__viewport,	.rui-carousel:not([data-carousel-surface]) .rui-carousel__viewport {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--rui-carousel-border-color);
+    border-radius: var(--rui-carousel-radius);
+    background-color: var(--rui-carousel-surface);
+  }
+  .rui-carousel--controls-toolbar[data-carousel-surface='shell'] .rui-carousel__viewport,	.rui-carousel--controls-toolbar:not([data-carousel-surface]) .rui-carousel__viewport {
+    padding: var(--rui-carousel-padding);
   }
   .rui-carousel--controls-overlay .rui-carousel__viewport {
+    padding: 0;
+  }
+  .rui-carousel[data-carousel-surface='cards'] .rui-carousel__viewport {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
     padding: 0px;
+    border-radius: 0;
   }
   .rui-carousel__track {
     position: relative;
@@ -1973,6 +2018,14 @@ rui-carousel {
     align-items: center;
     justify-content: center;
   }
+  .rui-carousel[data-carousel-surface='cards'] .rui-carousel__slide {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--rui-carousel-border-color);
+    border-radius: var(--rui-carousel-radius);
+    background-color: var(--rui-carousel-surface);
+    padding: var(--rui-carousel-padding);
+  }
   .rui-carousel__footer {
     width: 100%;
     min-width: 0px;
@@ -2143,7 +2196,7 @@ rui-carousel {
       border-radius: var(--radius-full, var(--border-radius-full));
     }
   }
-  .rui-carousel__indicator[aria-selected='true'] {
+  .rui-carousel__indicator[aria-selected='true'],	.rui-carousel__indicator[aria-current='true'] {
     border-radius: var(--radius-full, var(--border-radius-full));
     border-color: var(--color-primary, var(--primary));
     background-color: var(--color-primary, var(--primary));
@@ -2163,12 +2216,30 @@ rui-carousel {
   .rui-carousel__indicator:active {
     border-radius: var(--radius-full, var(--border-radius-full));
   }
-  .rui-carousel--none .rui-carousel__slide[hidden] {
+  .rui-carousel--none .rui-carousel__slide[hidden],	.rui-carousel[data-carousel-track='swap'] .rui-carousel__slide[hidden] {
     display: none;
   }
-  .rui-carousel--slide .rui-carousel__track {
+  .rui-carousel--slide .rui-carousel__track,	.rui-carousel[data-carousel-track='window'] .rui-carousel__track {
+    --rui-carousel-slide-size: calc(
+			(100% - (var(--rui-carousel-track-gap) * var(--rui-carousel-gap-count, 0))) /
+				var(--rui-carousel-slides-per-view, 1)
+		);
+    --rui-carousel-step: calc(var(--rui-carousel-slide-size) + var(--rui-carousel-track-gap));
+    --rui-carousel-track-extent: calc(
+			var(--rui-carousel-slide-count, 1) * var(--rui-carousel-slide-size) +
+				(var(--rui-carousel-slide-count, 1) - 1) * var(--rui-carousel-track-gap)
+		);
+    --rui-carousel-max-shift: max(0px, var(--rui-carousel-track-extent) - 100%);
+    --rui-carousel-shift: min(
+			calc(var(--rui-carousel-index, 0) * var(--rui-carousel-step)),
+			var(--rui-carousel-max-shift)
+		);
     display: flex;
     width: 100%;
+    gap: var(--rui-carousel-track-gap);
+    transform: translateX(calc(-1 * var(--rui-carousel-shift)));
+  }
+  .rui-carousel--slide .rui-carousel__track {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
     transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
@@ -2176,18 +2247,18 @@ rui-carousel {
     transition-duration: var(--transition-duration-slow, var(--duration-slow));
     --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
     transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
-    transform: translateX(calc(var(--rui-carousel-index, 0) * -100%));
   }
-  .rui-carousel--slide .rui-carousel__slide {
-    width: 100%;
-    min-width: 100%;
+  .rui-carousel--slide .rui-carousel__slide,	.rui-carousel[data-carousel-track='window'] .rui-carousel__slide {
+    min-width: 0px;
     flex-shrink: 0;
+    flex: 0 0 var(--rui-carousel-slide-size, 100%);
+    width: var(--rui-carousel-slide-size, 100%);
   }
-  .rui-carousel--fade .rui-carousel__track {
+  .rui-carousel--fade[data-carousel-track='stack'] .rui-carousel__track,	.rui-carousel--fade:not([data-carousel-track]) .rui-carousel__track {
     display: grid;
     width: 100%;
   }
-  .rui-carousel--fade .rui-carousel__slide {
+  .rui-carousel--fade[data-carousel-track='stack'] .rui-carousel__slide,	.rui-carousel--fade:not([data-carousel-track]) .rui-carousel__slide {
     grid-column-start: 1;
     grid-row-start: 1;
     width: 100%;
@@ -2201,7 +2272,7 @@ rui-carousel {
     opacity: 0;
     pointer-events: none;
   }
-  .rui-carousel--fade .rui-carousel__slide[data-active='true'] {
+  .rui-carousel--fade[data-carousel-track='stack'] .rui-carousel__slide[data-active='true'],	.rui-carousel--fade:not([data-carousel-track]) .rui-carousel__slide[data-active='true'] {
     opacity: 1;
     pointer-events: auto;
   }
@@ -2388,7 +2459,7 @@ rui-combobox {
     --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
   }
   .rui-combobox__input {
-    min-width: 6rem;
+    min-width: 0px;
     flex: 1;
     border-style: var(--tw-border-style);
     border-width: 0px;
@@ -2398,7 +2469,7 @@ rui-combobox {
     outline-style: none;
     padding-inline: var(--space-control-x);
     padding-block: var(--space-control-y);
-    font-size: var(--text-control, 0.875rem);
+    font-size: var(--text-control-input);
   }
   .rui-combobox__input:disabled {
     cursor: not-allowed;
@@ -2440,7 +2511,7 @@ rui-date-field {
   .rui-date-field__group {
     display: flex;
     width: 100%;
-    min-width: calc(var(--spacing, 0.25rem) * 40);
+    min-width: 0px;
     align-items: center;
     gap: var(--spacing-1, var(--space-1));
     border-radius: var(--radius-control, var(--radius-control));
@@ -2461,30 +2532,75 @@ rui-date-field {
     border-style: var(--tw-border-style);
     border-width: 0px;
     background-color: transparent;
-    color: var(--color-on-background, var(--on-background));
+    padding: 0px;
     --tw-outline-style: none;
     outline-style: none;
+  }
+  .rui-date-field__popover {
+    box-sizing: border-box;
+    max-width: calc(100vw - 1rem);
+    min-width: 0px;
+    padding: 0px;
+  }
+  .rui-date-field__popover .rui-calendar {
+    width: auto;
+    max-width: 100%;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .rui-date-field__popover[hidden] {
+    display: none;
+  }
+}
+rui-date-input {
+  display: inline-flex;
+  min-width: 0px;
+  flex: 1;
+}
+@layer components {
+  .rui-date-input {
+    min-width: 0px;
+    flex: 1;
+  }
+  .rui-date-input__segments {
+    display: flex;
+    min-width: 0px;
+    flex: 1;
+    align-items: center;
+    overflow-x: clip;
+    overflow-y: clip;
+    white-space: nowrap;
     padding-inline: var(--space-control-x);
     padding-block: var(--space-control-y);
-    font-size: var(--text-control, 0.875rem);
+    font-size: var(--text-control-input);
     font-variant-numeric: tabular-nums;
+    cursor: text;
   }
-  .rui-date-field__input::placeholder {
+  .rui-date-input__segment {
+    border-radius: var(--radius-xs, var(--border-radius-xs));
+    padding-inline: calc(var(--spacing, 0.25rem) * 0.5);
+    text-align: end;
+    color: var(--color-on-background, var(--on-background));
+    --tw-outline-style: none;
+    outline-style: none;
+    caret-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .rui-date-input__segment--placeholder {
     color: var(--color-on-surface, var(--on-surface));
     opacity: var(--opacity-muted, var(--opacity-muted));
   }
-  .rui-date-field__input:disabled {
-    cursor: not-allowed;
-    opacity: var(--opacity-disabled, var(--opacity-disabled));
-  }
-  .rui-date-field__input[aria-invalid='true'] {
-    border-color: var(--color-error, var(--error));
-  }
-  .rui-date-field__popover {
-    padding: 0px;
+  .rui-date-input__segment[data-focused='true'] {
+    background-color: var(--focus-ring);
+    color: var(--on-focus-ring);
+    -webkit-text-fill-color: currentColor;
+    opacity: 1;
+    outline: none;
   }
-  .rui-date-field__popover[hidden] {
-    display: none;
+  .rui-date-input__literal {
+    color: var(--color-on-background, var(--on-background));
   }
 }
 rui-date-range-picker {
@@ -2501,9 +2617,10 @@ rui-date-range-picker {
   .rui-date-range-picker__group {
     display: flex;
     width: 100%;
-    min-width: calc(var(--spacing, 0.25rem) * 52);
+    min-width: 0px;
     align-items: center;
     gap: var(--spacing-1, var(--space-1));
+    overflow: hidden;
     border-radius: var(--radius-control, var(--radius-control));
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -2517,49 +2634,52 @@ rui-date-range-picker {
     --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
   }
   .rui-date-range-picker__values {
-    display: flex;
+    display: grid;
     min-width: 0px;
     flex: 1;
+    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
     align-items: center;
     gap: var(--spacing-inline, var(--space-inline));
   }
   .rui-date-range-picker__input {
-    width: auto;
-    max-width: calc(var(--spacing, 0.25rem) * 36);
-    min-width: calc(var(--spacing, 0.25rem) * 24);
-    flex-shrink: 1;
+    width: 100%;
+    min-width: 0px;
     border-style: var(--tw-border-style);
     border-width: 0px;
     background-color: transparent;
-    color: var(--color-on-background, var(--on-background));
+    padding: 0px;
     --tw-outline-style: none;
     outline-style: none;
-    padding-inline: var(--space-control-x);
-    padding-block: var(--space-control-y);
-    font-size: var(--text-control, 0.875rem);
-    font-variant-numeric: tabular-nums;
-  }
-  .rui-date-range-picker__input::placeholder {
-    color: var(--color-on-surface, var(--on-surface));
-    opacity: var(--opacity-muted, var(--opacity-muted));
-  }
-  .rui-date-range-picker__input:disabled {
-    cursor: not-allowed;
-    opacity: var(--opacity-disabled, var(--opacity-disabled));
   }
   .rui-date-range-picker__separator {
     flex-shrink: 0;
     color: var(--color-on-surface, var(--on-surface));
   }
   .rui-date-range-picker__popover {
+    box-sizing: border-box;
+    max-width: calc(100vw - 1rem);
+    min-width: 0px;
     padding: 0px;
   }
+  .rui-date-range-picker__popover .rui-calendar {
+    width: auto;
+    max-width: 100%;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .rui-date-range-picker__popover[hidden] {
     display: none;
   }
 }
 rui-dialog {
-  --dialog-offset-x: 16px;
+  --rui-dialog-max-width: 28rem;
+  --rui-dialog-padding: var(--space-inset);
+  --rui-dialog-radius: var(--radius-container);
+  --rui-dialog-surface: var(--background);
+  --rui-dialog-shadow: var(--shadow-modal);
+  --rui-dialog-inset-x: 1rem;
   display: contents;
 }
 @layer components {
@@ -2583,15 +2703,14 @@ rui-dialog {
     position: relative;
     z-index: var(--z-index-modal, var(--z-modal));
     width: 100%;
-    max-width: var(--container-md, 28rem);
-    border-radius: var(--radius-container, var(--radius-container));
-    background-color: var(--color-background, var(--background));
-    padding: var(--spacing-inset, var(--space-inset));
     color: var(--color-on-background, var(--on-background));
-    --tw-shadow: var(--shadow-modal);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     --tw-outline-style: none;
     outline-style: none;
+    max-inline-size: var(--rui-dialog-max-width);
+    padding: var(--rui-dialog-padding);
+    border-radius: var(--rui-dialog-radius);
+    background-color: var(--rui-dialog-surface);
+    box-shadow: var(--rui-dialog-shadow);
   }
   .rui-dialog__close {
     position: absolute;
@@ -2643,7 +2762,7 @@ rui-dialog {
 }
 @media (max-width: 600px) {
   .rui-dialog {
-    padding-inline: var(--dialog-offset-x);
+    padding-inline: var(--rui-dialog-inset-x);
   }
 }
 rui-disclosure {
@@ -2704,14 +2823,11 @@ rui-disclosure {
     transition: transform 150ms ease,	color 150ms ease;
   }
   .rui-disclosure__icon--chevron {
-    width: 0;
-    height: 0;
-    border-top: 4px solid transparent;
-    border-bottom: 4px solid transparent;
-    border-left: 6px solid currentColor;
+    width: var(--spacing-4, var(--space-4));
+    height: var(--spacing-4, var(--space-4));
   }
   .rui-disclosure__trigger[aria-expanded='true'] .rui-disclosure__icon--chevron {
-    transform: rotate(90deg);
+    transform: rotate(180deg);
   }
   .rui-disclosure__icon--plus {
     width: var(--spacing-5, var(--space-5));
@@ -3147,17 +3263,20 @@ rui-hover-card {
     display: inline-flex;
   }
   .rui-hover-card__content {
+    --rui-hover-card-width: 20rem;
+    --rui-hover-card-padding: var(--space-inset);
+    --rui-hover-card-radius: var(--radius-container);
+    --rui-hover-card-surface: var(--background);
+    --rui-hover-card-border-color: var(--border);
+    --rui-hover-card-shadow: var(--shadow-overlay);
     z-index: var(--z-index-overlay, var(--z-overlay));
-    width: calc(var(--spacing, 0.25rem) * 80);
-    border-radius: var(--radius-container, var(--radius-container));
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border, var(--border));
-    background-color: var(--color-background, var(--background));
-    padding: var(--spacing-4, var(--space-4));
     color: var(--color-on-background, var(--on-background));
-    --tw-shadow: var(--shadow-overlay);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    inline-size: var(--rui-hover-card-width);
+    padding: var(--rui-hover-card-padding);
+    border-radius: var(--rui-hover-card-radius);
+    border: 1px solid var(--rui-hover-card-border-color);
+    background-color: var(--rui-hover-card-surface);
+    box-shadow: var(--rui-hover-card-shadow);
   }
   .rui-hover-card__content[hidden] {
     display: none;
@@ -3175,7 +3294,7 @@ rui-hover-card {
     height: var(--size-control-md);
     padding-inline: var(--space-control-x);
     padding-block: 0;
-    font-size: var(--text-control, 0.875rem);
+    font-size: var(--text-control-input);
     transition-duration: var(--duration-normal);
   }
   .rui-input:focus-visible {
@@ -3260,6 +3379,11 @@ rui-hover-card {
 rui-knob {
   display: inline-block;
   --rui-knob-size: 3rem;
+  --rui-knob-track-color: var(--rui-track-color, var(--rui-track-fill));
+  --rui-knob-value-color: var(--primary);
+  --rui-knob-text-color: var(--on-surface);
+  --rui-knob-focus-ring: var(--focus-ring);
+  --rui-knob-focus-ring-width: 2px;
 }
 @layer components {
   .rui-knob {
@@ -3312,7 +3436,7 @@ rui-knob {
     block-size: var(--rui-knob-size);
   }
   .rui-knob__track {
-    stroke: var(--rui-knob-track-color, var(--surface));
+    stroke: var(--rui-knob-track-color, var(--rui-track-fill));
   }
   .rui-knob__progress {
     stroke: var(--rui-knob-value-color, var(--primary));
@@ -3568,6 +3692,9 @@ rui-listbox {
     @media (forced-colors: active) {
       background-image: none;
     }
+    @media (forced-colors: active) {
+      background-image: none;
+    }
     background-image: var(--sheen-image);
     @media (forced-colors: active) {
       background-image: none;
@@ -3787,6 +3914,11 @@ rui-menubar {
   }
 }
 rui-meter {
+  --rui-meter-track-color: var(--rui-track-color, var(--rui-track-fill));
+  --rui-meter-fill-color: var(--primary);
+  --rui-meter-radius: var(--radius-control);
+  --rui-meter-height: 0.75rem;
+  --rui-meter-width: 12rem;
   display: block;
 }
 @layer components {
@@ -3798,8 +3930,28 @@ rui-meter {
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   }
   .rui-meter__bar {
-    height: var(--spacing-3, var(--space-3));
-    width: calc(var(--spacing, 0.25rem) * 48);
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .rui-meter__track {
+    block-size: var(--rui-meter-height, 0.75rem);
+    inline-size: var(--rui-meter-width, 12rem);
+    overflow: hidden;
+    background: var(--rui-meter-track-color, var(--rui-track-fill));
+    border-radius: var(--rui-meter-radius, var(--radius-control));
+  }
+  .rui-meter__fill {
+    block-size: 100%;
+    inline-size: var(--rui-meter-percent, 0%);
+    background: var(--rui-meter-fill-color, var(--primary));
+    border-radius: var(--rui-meter-radius, var(--radius-control));
   }
   .rui-meter__value {
     color: var(--color-on-surface, var(--on-surface));
@@ -3808,41 +3960,40 @@ rui-meter {
   }
 }
 rui-navigation-menu {
+  --rui-navigation-menu-panel-min-width: 12rem;
+  --rui-navigation-menu-panel-padding: var(--space-inset);
+  --rui-navigation-menu-bar-surface: transparent;
+  --rui-navigation-menu-bar-border-color: transparent;
+  --rui-navigation-menu-bar-shadow: none;
+  --rui-navigation-menu-bar-radius: var(--radius-container);
+  --rui-navigation-menu-bar-padding-x: 0px;
+  --rui-navigation-menu-bar-padding-y: 0px;
+  position: relative;
   display: block;
   width: 100%;
 }
 @layer components {
   .rui-navigation-menu {
+    position: relative;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-    border-radius: var(--radius-container, var(--radius-container));
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border, var(--border));
-    background-color: var(--color-surface, var(--surface));
-    --tw-shadow: var(--shadow-control);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .rui-navigation-menu__bar {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--spacing-1, var(--space-1));
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-    border-color: var(--color-border, var(--border));
-    background-color: var(--color-background, var(--background));
-    padding-inline: var(--spacing-control-x, var(--space-control-x));
-    padding-block: var(--spacing-control-y, var(--space-control-y));
+    background-color: var(--rui-navigation-menu-bar-surface);
+    border: 1px solid var(--rui-navigation-menu-bar-border-color);
+    border-radius: var(--rui-navigation-menu-bar-radius);
+    box-shadow: var(--rui-navigation-menu-bar-shadow);
+    padding-inline: var(--rui-navigation-menu-bar-padding-x);
+    padding-block: var(--rui-navigation-menu-bar-padding-y);
   }
   .rui-navigation-menu__bar .rui-button,	.rui-navigation-menu__bar a.rui-button {
     border-radius: var(--radius-container, var(--radius-container));
     text-decoration-line: none;
   }
-  .rui-navigation-menu [data-navigation-trigger] {
-    position: relative;
-  }
   .rui-navigation-menu [data-navigation-trigger][aria-expanded='true'] {
     background-color: var(--color-primary-container, var(--primary-container));
     --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
@@ -3858,29 +4009,28 @@ rui-navigation-menu {
     --tw-ring-inset: inset;
   }
   .rui-navigation-menu__panels {
-    background-color: var(--color-background, var(--background));
+    display: contents;
   }
-  .rui-navigation-menu__panels [data-navigation-panel] {
-    display: block;
-    padding-inline: var(--spacing-5, var(--space-5));
-    padding-block: var(--spacing-5, var(--space-5));
+  .rui-navigation-menu__panel {
     font-size: var(--text-sm, var(--text-sm));
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
     color: var(--color-on-background, var(--on-background));
+    min-inline-size: var(--rui-navigation-menu-panel-min-width);
+    padding: var(--rui-navigation-menu-panel-padding);
   }
-  .rui-navigation-menu__panels [data-navigation-panel][hidden] {
+  .rui-navigation-menu__panel[hidden] {
     display: none;
   }
-  .rui-navigation-menu__panels [data-navigation-panel] > p {
+  .rui-navigation-menu__panel > p {
     margin: 0px;
     --tw-leading: var(--leading-relaxed, 1.625);
     line-height: var(--leading-relaxed, 1.625);
     color: var(--color-on-surface, var(--on-surface));
   }
-  .rui-navigation-menu__panels [data-navigation-panel] rui-grid {
+  .rui-navigation-menu__panel rui-grid {
     max-width: var(--container-3xl, 48rem);
   }
-  .rui-navigation-menu__panels [data-navigation-panel] rui-disclosure {
+  .rui-navigation-menu__panel rui-disclosure {
     margin-top: var(--spacing-4, var(--space-4));
     display: block;
     border-top-style: var(--tw-border-style);
@@ -3888,14 +4038,14 @@ rui-navigation-menu {
     border-color: var(--color-border, var(--border));
     padding-top: var(--spacing-3, var(--space-3));
   }
-  .rui-navigation-menu__panels [data-navigation-panel] rui-disclosure + rui-disclosure {
+  .rui-navigation-menu__panel rui-disclosure + rui-disclosure {
     margin-top: var(--spacing-1, var(--space-1));
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
     border-color: var(--color-border, var(--border));
     padding-top: var(--spacing-1, var(--space-1));
   }
-  .rui-navigation-menu__panels [data-navigation-panel] .rui-disclosure__panel:not([hidden]) {
+  .rui-navigation-menu__panel .rui-disclosure__panel:not([hidden]) {
     display: block;
   }
   .rui-navigation-menu__megamenu {
@@ -4019,7 +4169,7 @@ rui-number-field {
     outline-style: none;
     padding-inline: var(--space-control-x);
     padding-block: var(--space-control-y);
-    font-size: var(--text-control, 0.875rem);
+    font-size: var(--text-control-input);
     font-variant-numeric: tabular-nums;
   }
   .rui-number-field__input[data-readonly],	.rui-number-field__input:read-only {
@@ -4098,6 +4248,9 @@ rui-pagination {
     flex-shrink: 0;
     align-items: center;
   }
+  .rui-pagination__list > li.rui-pagination__status {
+    display: none;
+  }
   .rui-pagination__link {
     gap: var(--spacing-1, var(--space-1));
   }
@@ -4111,8 +4264,13 @@ rui-pagination {
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
     color: var(--color-on-surface, var(--on-surface));
   }
-  .rui-pagination__status {
-    display: none;
+  .rui-pagination__status-label {
+    font-size: var(--text-sm, var(--text-sm));
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    color: var(--color-on-surface, var(--on-surface));
+    opacity: var(--opacity-muted, var(--opacity-muted));
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
   }
   .rui-pagination__link .rui-icon {
     flex-shrink: 0;
@@ -4129,26 +4287,52 @@ rui-pagination {
       white-space: nowrap;
       border-width: 0;
     }
+  }
+  .rui-pagination--compact :is(.rui-pagination__link--previous span,	.rui-pagination__link--next span) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  @media (max-width: 40rem) {
     .rui-pagination__link--previous,	.rui-pagination__link--next {
       width: var(--size-control-sm);
       padding-inline: 0;
       aspect-ratio: 1;
     }
-    .rui-pagination__page,	.rui-pagination__ellipsis {
+  }
+  .rui-pagination--compact :is(.rui-pagination__link--previous,	.rui-pagination__link--next) {
+    width: var(--size-control-sm);
+    padding-inline: 0;
+    aspect-ratio: 1;
+  }
+  @media (max-width: 40rem) {
+    .rui-pagination__list > li.rui-pagination__page,	.rui-pagination__list > li.rui-pagination__ellipsis {
       display: none;
     }
-    .rui-pagination__status {
+  }
+  .rui-pagination--compact :is(.rui-pagination__list > li.rui-pagination__page,	.rui-pagination__list > li.rui-pagination__ellipsis) {
+    display: none;
+  }
+  @media (max-width: 40rem) {
+    .rui-pagination__list > li.rui-pagination__status {
       display: flex;
-      align-items: center;
       min-height: var(--size-control-sm);
       padding-inline: var(--space-control-x);
-      white-space: nowrap;
-      font-variant-numeric: tabular-nums;
-      font-size: var(--text-sm, var(--text-sm));
-      line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
-      color: var(--color-on-surface, var(--on-surface));
+      margin-inline: var(--space-1);
     }
   }
+  .rui-pagination--compact :is(.rui-pagination__list > li.rui-pagination__status) {
+    display: flex;
+    min-height: var(--size-control-sm);
+    padding-inline: var(--space-control-x);
+    margin-inline: var(--space-1);
+  }
 }
 rui-popover, rui-popover-trigger {
   display: inline-flex;
@@ -4243,7 +4427,6 @@ rui-select {
   }
   .rui-select__control {
     display: flex;
-    min-height: calc(var(--spacing, 0.25rem) * 10);
     width: 100%;
     min-width: 0px;
     align-items: center;
@@ -4254,6 +4437,7 @@ rui-select {
     border-color: var(--color-border, var(--border));
     background-color: var(--color-background, var(--background));
     padding-inline: var(--spacing-1, var(--space-1));
+    min-height: var(--size-control-md);
   }
   .rui-select__control:focus-within {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -4277,9 +4461,9 @@ rui-select {
     color: var(--color-on-background, var(--on-background));
     --tw-outline-style: none;
     outline-style: none;
-    font-size: var(--text-control, 0.875rem);
+    font-size: var(--text-control-input);
   }
-  .rui-select__trigger:disabled {
+  .rui-select__trigger[aria-disabled='true'] {
     cursor: not-allowed;
     opacity: var(--opacity-muted, var(--opacity-muted));
   }
@@ -4320,6 +4504,7 @@ rui-select {
     color: var(--color-on-background, var(--on-background));
     --tw-outline-style: none;
     outline-style: none;
+    font-size: var(--text-control-input);
   }
   .rui-select__search:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -4480,9 +4665,6 @@ rui-sidebar {
     rui-sidebar .rui-sidebar > .rui-sidebar__pane {
       height: 100%;
     }
-    rui-sidebar-trigger {
-      display: none;
-    }
   }
   @media (min-width: 1280px) {
     .rui-sidebar-provider__body {
@@ -4886,29 +5068,30 @@ rui-sidebar {
   height: var(--spacing-4, var(--space-4));
   flex-shrink: 0;
 }
-.rui-sidebar__trigger[data-sidebar-state='expanded']:not(.rui-sidebar__trigger--inset)	.rui-sidebar__trigger-glyph--collapse, .rui-sidebar__trigger--header .rui-sidebar__trigger-glyph--collapse {
-  display: block;
-}
-.rui-sidebar__trigger[data-sidebar-state='collapsed']:not(.rui-sidebar__trigger--header):not(	.rui-sidebar__trigger--inset	)	.rui-sidebar__trigger-glyph--expand {
-  display: block;
-}
-.rui-sidebar__trigger--inset[data-sidebar-state='expanded'] .rui-sidebar__trigger-glyph--close, .rui-sidebar__trigger--inset[data-sidebar-state='collapsed'] .rui-sidebar__trigger-glyph--menu {
+rui-sidebar-trigger[placement='header'] .rui-sidebar__trigger-glyph--collapse, rui-sidebar-trigger:not([placement='header'], [placement='inset'])[data-sidebar-state='expanded']	.rui-sidebar__trigger-glyph--collapse, rui-sidebar-trigger:not([placement='header'], [placement='inset'])[data-sidebar-state='collapsed']	.rui-sidebar__trigger-glyph--expand, rui-sidebar-trigger[placement='inset'][data-sidebar-state='expanded'] .rui-sidebar__trigger-glyph--close, rui-sidebar-trigger[placement='inset'][data-sidebar-state='collapsed'] .rui-sidebar__trigger-glyph--menu {
   display: block;
 }
-:is(.rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true'])), .rui-sidebar-provider:has(	> .rui-sidebar-provider__body > rui-sidebar[data-collapsible='off']:not([data-mobile='true']) )) rui-sidebar-trigger.rui-sidebar-trigger-placement--header, :is(.rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true'])), .rui-sidebar-provider:has(	> .rui-sidebar-provider__body > rui-sidebar[data-collapsible='off']:not([data-mobile='true']) )) 	rui-sidebar-trigger[data-placement='header'], :is(.rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true'])), .rui-sidebar-provider:has(	> .rui-sidebar-provider__body > rui-sidebar[data-collapsible='off']:not([data-mobile='true']) )) 	rui-sidebar-trigger.rui-sidebar-trigger-placement--inset, :is(.rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true'])), .rui-sidebar-provider:has(	> .rui-sidebar-provider__body > rui-sidebar[data-collapsible='off']:not([data-mobile='true']) )) 	rui-sidebar-trigger[data-placement='inset'] {
-  display: none;
-}
-:is(.rui-sidebar-provider:has(> rui-sidebar[data-state='expanded']:not([data-mobile='true'])), .rui-sidebar-provider:has(	> .rui-sidebar-provider__body > rui-sidebar[data-state='expanded']:not([data-mobile='true']) )) rui-sidebar-trigger.rui-sidebar-trigger-placement--inset, :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='expanded']:not([data-mobile='true'])), .rui-sidebar-provider:has(	> .rui-sidebar-provider__body > rui-sidebar[data-state='expanded']:not([data-mobile='true']) )) 	rui-sidebar-trigger[data-placement='inset'] {
-  display: none;
-}
-:is(.rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed']:not([data-mobile='true'])), .rui-sidebar-provider:has(	> .rui-sidebar-provider__body > rui-sidebar[data-state='collapsed']:not([data-mobile='true']) )) rui-sidebar-trigger.rui-sidebar-trigger-placement--header, :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed']:not([data-mobile='true'])), .rui-sidebar-provider:has(	> .rui-sidebar-provider__body > rui-sidebar[data-state='collapsed']:not([data-mobile='true']) )) 	rui-sidebar-trigger[data-placement='header'] {
+rui-sidebar-trigger[data-sidebar-mobile][data-sidebar-state='expanded'][placement='inset'], rui-sidebar-trigger[data-sidebar-mobile][data-sidebar-state='collapsed'][placement='header'], rui-sidebar-trigger[data-sidebar-mobile='false'][data-sidebar-collapsible='off'] {
   display: none;
 }
-:is(.rui-sidebar-provider:has(> rui-sidebar[data-state='expanded'][data-mobile='true']), .rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='expanded'][data-mobile='true'])) rui-sidebar-trigger.rui-sidebar-trigger-placement--inset, :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='expanded'][data-mobile='true']), .rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='expanded'][data-mobile='true'])) 	rui-sidebar-trigger[data-placement='inset'] {
-  display: none;
+@media (min-width: 768px) {
+  rui-sidebar[data-collapsible='off'] rui-sidebar-trigger:not([data-sidebar-mobile]),	rui-sidebar[data-state='expanded'] rui-sidebar-trigger:not([data-sidebar-mobile])[placement='inset'],	rui-sidebar[data-state='collapsed'] rui-sidebar-trigger:not([data-sidebar-mobile])[placement='header'],	.rui-sidebar-provider:has(	> rui-sidebar:only-of-type[data-collapsible='off'],	> .rui-sidebar-provider__body > rui-sidebar:only-of-type[data-collapsible='off']	)	> :is(.rui-sidebar__inset, .rui-sidebar-provider__site-header)	> rui-sidebar-trigger:not([data-sidebar-mobile]),	.rui-sidebar-provider:has(	> rui-sidebar:only-of-type[data-collapsible='off'],	> .rui-sidebar-provider__body > rui-sidebar:only-of-type[data-collapsible='off']	)	> .rui-sidebar-provider__body	> .rui-sidebar__inset	> rui-sidebar-trigger:not([data-sidebar-mobile]),	.rui-sidebar-provider:has(	> rui-sidebar:only-of-type[data-state='expanded'],	> .rui-sidebar-provider__body > rui-sidebar:only-of-type[data-state='expanded']	)	> :is(.rui-sidebar__inset, .rui-sidebar-provider__site-header)	> rui-sidebar-trigger:not([data-sidebar-mobile])[placement='inset'],	.rui-sidebar-provider:has(	> rui-sidebar:only-of-type[data-state='expanded'],	> .rui-sidebar-provider__body > rui-sidebar:only-of-type[data-state='expanded']	)	> .rui-sidebar-provider__body	> .rui-sidebar__inset	> rui-sidebar-trigger:not([data-sidebar-mobile])[placement='inset'],	.rui-sidebar-provider:has(	> rui-sidebar:only-of-type[data-state='collapsed'],	> .rui-sidebar-provider__body > rui-sidebar:only-of-type[data-state='collapsed']	)	> :is(.rui-sidebar__inset, .rui-sidebar-provider__site-header)	> rui-sidebar-trigger:not([data-sidebar-mobile])[placement='header'],	.rui-sidebar-provider:has(	> rui-sidebar:only-of-type[data-state='collapsed'],	> .rui-sidebar-provider__body > rui-sidebar:only-of-type[data-state='collapsed']	)	> .rui-sidebar-provider__body	> .rui-sidebar__inset	> rui-sidebar-trigger:not([data-sidebar-mobile])[placement='header'] {
+    display: none;
+  }
 }
-:is(.rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed'][data-mobile='true']), .rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='collapsed'][data-mobile='true'])) rui-sidebar-trigger.rui-sidebar-trigger-placement--header, :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed'][data-mobile='true']), .rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='collapsed'][data-mobile='true'])) 	rui-sidebar-trigger[data-placement='header'] {
-  display: none;
+@media (max-width: 767px) {
+  rui-sidebar-trigger:not([data-sidebar-mobile])[placement='header'] {
+    display: none;
+  }
+  rui-sidebar:not([data-mobile='true']) .rui-sidebar__pane {
+    pointer-events: none;
+    width: 0px;
+    min-width: 0px;
+    overflow: hidden;
+    opacity: 0%;
+    width: 0;
+    flex: 0 0 auto;
+  }
 }
 .rui-sidebar[data-mobile='true'] {
   position: fixed;
@@ -4978,14 +5161,14 @@ rui-slider {
   --rui-slider-width: 100%;
   --rui-slider-height: auto;
   --rui-slider-gap: var(--space-inline);
-  --rui-slider-track-color: var(--surface);
+  --rui-slider-track-color: var(--rui-track-color, var(--rui-track-fill));
   --rui-slider-fill-color: var(--primary);
   --rui-slider-track-radius: var(--radius-control);
   --rui-slider-thumb-size: 1.25rem;
   --rui-slider-thumb-border-width: 2px;
   --rui-slider-thumb-border-color: var(--primary);
   --rui-slider-thumb-background: var(--background);
-  --rui-slider-thumb-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+  --rui-slider-thumb-shadow: var(--shadow-control);
   --rui-slider-thumb-radius: var(--radius-control);
   --rui-slider-value-color: var(--on-surface);
   --rui-slider-focus-ring: var(--focus-ring);
@@ -5057,7 +5240,7 @@ rui-slider:has(.rui-slider--vertical) {
     position: relative;
     min-width: 0px;
     border-radius: var(--rui-slider-track-radius, var(--radius-control));
-    background: var(--rui-slider-track-color, var(--surface));
+    background: var(--rui-slider-track-color, var(--rui-track-fill));
     block-size: var(--rui-slider-track-size, 0.375rem);
     inline-size: 100%;
     max-inline-size: var(--rui-slider-track-length, 100%);
@@ -5094,7 +5277,7 @@ rui-slider:has(.rui-slider--vertical) {
     border: var(--rui-slider-thumb-border-width, 2px) solid var(--rui-slider-thumb-border-color, var(--primary));
     border-radius: var(--rui-slider-thumb-radius, var(--radius-control));
     background: var(--rui-slider-thumb-background, var(--background));
-    box-shadow: var(--rui-slider-thumb-shadow, 0 2px 8px rgb(0 0 0 / 0.12));
+    box-shadow: var(--rui-slider-thumb-shadow, var(--shadow-control));
   }
   .rui-slider__thumb::before {
     position: absolute;
@@ -5111,7 +5294,7 @@ rui-slider:has(.rui-slider--vertical) {
       outline: 2px solid transparent;
       outline-offset: 2px;
     }
-    box-shadow: var(--rui-slider-thumb-shadow, 0 2px 8px rgb(0 0 0 / 0.12)),	0 0 0 var(--rui-slider-focus-ring-width, 2px) var(--rui-slider-focus-ring, var(--focus-ring));
+    box-shadow: var(--rui-slider-thumb-shadow, var(--shadow-control)),	0 0 0 var(--rui-slider-focus-ring-width, 2px) var(--rui-slider-focus-ring, var(--focus-ring));
   }
   .rui-slider__thumb[data-thumb='min'] {
     left: var(--rui-slider-min, 0%);
@@ -5166,6 +5349,24 @@ rui-slider:has(.rui-slider--vertical) {
   }
 }
 rui-switch {
+  --rui-switch-width: 2.5rem;
+  --rui-switch-height: 1.5rem;
+  --rui-switch-thumb-size: 1rem;
+  --rui-switch-track: var(--on-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    --rui-switch-track: color-mix(in oklab, var(--on-background) 20%, transparent);
+  }
+  --rui-switch-track-hover: var(--on-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    --rui-switch-track-hover: color-mix(in oklab, var(--on-background) 30%, transparent);
+  }
+  --rui-switch-track-on: var(--primary);
+  --rui-switch-track-on-hover: var(--primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    --rui-switch-track-on-hover: color-mix(in oklab, var(--primary) 80%, transparent);
+  }
+  --rui-switch-thumb: var(--on-background);
+  --rui-switch-thumb-on: var(--on-primary);
   display: inline-flex;
 }
 @layer components {
@@ -5201,53 +5402,38 @@ rui-switch {
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
   .rui-switch__track {
-    --rui-switch-width: 2.5rem;
-    --rui-switch-height: 1.5rem;
-    --rui-switch-thumb-size: 1rem;
     position: relative;
     display: inline-flex;
-    height: var(--rui-switch-height);
-    width: var(--rui-switch-width);
     flex-shrink: 0;
     align-items: center;
     border-radius: var(--radius-pill, var(--radius-pill));
     padding: var(--spacing-1, var(--space-1));
-    background-color: var(--color-on-background, var(--on-background));
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-on-background, var(--on-background)) 20%, transparent);
-    }
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
     transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
     --tw-duration: var(--transition-duration-normal, var(--duration-normal));
     transition-duration: var(--transition-duration-normal, var(--duration-normal));
+    block-size: var(--rui-switch-height);
+    inline-size: var(--rui-switch-width);
+    background-color: var(--rui-switch-track);
   }
   .rui-switch__track:hover {
-    background-color: var(--color-on-background, var(--on-background));
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-on-background, var(--on-background)) 30%, transparent);
-    }
+    background-color: var(--rui-switch-track-hover);
   }
   .rui-switch__input:checked + .rui-switch__track {
-    background-color: var(--color-primary, var(--primary));
+    background-color: var(--rui-switch-track-on);
   }
   .rui-switch__input:checked + .rui-switch__track:hover {
-    background-color: var(--color-primary, var(--primary));
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary, var(--primary)) 80%, transparent);
-    }
+    background-color: var(--rui-switch-track-on-hover);
   }
   .rui-switch__thumb {
     pointer-events: none;
     position: absolute;
     top: calc(1 / 2 * 100%);
     left: var(--spacing-1, var(--space-1));
-    width: var(--rui-switch-thumb-size);
-    height: var(--rui-switch-thumb-size);
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
     border-radius: var(--radius-full, var(--border-radius-full));
-    background-color: var(--color-on-background, var(--on-background));
     transition-property: left,right,transform;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
     transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
@@ -5255,11 +5441,14 @@ rui-switch {
     transition-duration: var(--transition-duration-normal, var(--duration-normal));
     --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
     transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
+    inline-size: var(--rui-switch-thumb-size);
+    block-size: var(--rui-switch-thumb-size);
+    background-color: var(--rui-switch-thumb);
   }
   .rui-switch__input:checked + .rui-switch__track .rui-switch__thumb {
     right: var(--spacing-1, var(--space-1));
     left: auto;
-    background-color: var(--color-on-primary, var(--on-primary));
+    background-color: var(--rui-switch-thumb-on);
   }
   .rui-switch__label {
     -webkit-user-select: text;
@@ -5403,6 +5592,12 @@ rui-table {
   }
 }
 rui-tabs {
+  --rui-tabs-radius: var(--radius-container);
+  --rui-tabs-indicator-width: 2px;
+  --rui-tabs-indicator-color: var(--primary);
+  --rui-tabs-tab-padding-x: var(--space-control-x);
+  --rui-tabs-tab-padding-y: var(--space-control-y);
+  --rui-tabs-panel-padding: var(--space-inset);
   display: flex;
   width: 100%;
   max-width: 100%;
@@ -5429,8 +5624,6 @@ rui-tabs {
     justify-content: center;
     border-style: var(--tw-border-style);
     border-width: 0px;
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
     border-color: transparent;
     background-color: transparent;
     white-space: nowrap;
@@ -5438,12 +5631,14 @@ rui-tabs {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
     transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+    border-bottom-style: solid;
+    border-bottom-width: var(--rui-tabs-indicator-width);
   }
   .rui-tabs__tab[aria-selected='true'] {
-    border-color: var(--color-primary, var(--primary));
     --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
     font-weight: var(--font-weight-medium, var(--weight-medium));
     color: var(--color-on-background, var(--on-background));
+    border-bottom-color: var(--rui-tabs-indicator-color);
   }
   .rui-tabs__tab:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -5471,13 +5666,13 @@ rui-tabs {
   }
   rui-tabs[variant='boxed'] {
     overflow: hidden;
-    border-radius: var(--radius-container, var(--radius-container));
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-border, var(--border));
     background-color: var(--color-background, var(--background));
     --tw-shadow: var(--shadow-control);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-radius: var(--rui-tabs-radius);
   }
   rui-tabs[variant='boxed'] .rui-tabs__list {
     border-bottom-style: var(--tw-border-style);
@@ -5491,8 +5686,6 @@ rui-tabs {
     padding-top: var(--spacing-2, var(--space-2));
   }
   rui-tabs[variant='boxed'] .rui-tabs__tab {
-    padding-inline: var(--spacing-control-x, var(--space-control-x));
-    padding-block: var(--spacing-control-y, var(--space-control-y));
     text-align: center;
     font-size: var(--text-xs, var(--text-xs));
     line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
@@ -5502,20 +5695,22 @@ rui-tabs {
         opacity: 100%;
       }
     }
+    padding-inline: var(--rui-tabs-tab-padding-x);
+    padding-block: var(--rui-tabs-tab-padding-y);
   }
   rui-tabs[variant='boxed'] .rui-tabs__tab:not([aria-selected='true']) {
     opacity: 70%;
   }
   rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
-    border-color: var(--color-primary, var(--primary));
     --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
     font-weight: var(--font-weight-medium, var(--weight-medium));
     color: var(--color-on-surface-container-low, var(--on-surface-container-low));
     opacity: 100%;
+    border-bottom-color: var(--rui-tabs-indicator-color);
   }
   rui-tabs[variant='boxed'] .rui-tabs__panel {
     background-color: var(--color-background, var(--background));
-    padding: var(--spacing-inset, var(--space-inset));
+    padding: var(--rui-tabs-panel-padding);
   }
   rui-tabs[variant='ghost'] {
     gap: 0px;
@@ -5529,14 +5724,14 @@ rui-tabs {
   rui-tabs[variant='ghost'] .rui-tabs__tab {
     border-top-left-radius: var(--radius-control, var(--radius-control));
     border-top-right-radius: var(--radius-control, var(--radius-control));
-    padding-inline: var(--spacing-control-x, var(--space-control-x));
-    padding-block: var(--spacing-control-y, var(--space-control-y));
     font-size: var(--text-sm, var(--text-sm));
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    padding-inline: var(--rui-tabs-tab-padding-x);
+    padding-block: var(--rui-tabs-tab-padding-y);
   }
   rui-tabs[variant='ghost'] .rui-tabs__panel {
-    padding-inline: var(--spacing-1, var(--space-1));
-    padding-block: var(--spacing-inset, var(--space-inset));
+    padding-inline: var(--space-1);
+    padding-block: var(--rui-tabs-panel-padding);
   }
 }
 rui-tag-group {
@@ -5744,6 +5939,9 @@ rui-tag-group {
     @media (forced-colors: active) {
       background-image: none;
     }
+    @media (forced-colors: active) {
+      background-image: none;
+    }
     background-image: var(--sheen-image);
     @media (forced-colors: active) {
       background-image: none;
@@ -5805,7 +6003,7 @@ rui-tag-group {
     border-radius: var(--radius-control);
     padding-inline: var(--space-control-x);
     padding-block: var(--space-control-y);
-    font-size: var(--text-control, 0.875rem);
+    font-size: var(--text-control-input);
     min-height: calc(var(--space-control-y) * 2 + 1.25rem * 3);
     transition-duration: var(--duration-normal);
   }
@@ -5823,13 +6021,16 @@ rui-tag-group {
   }
 }
 rui-toaster {
-  --toast-offset-x: 16px;
-  --toast-offset-bottom: 16px;
+  --rui-toaster-width: 356px;
+  --rui-toaster-gap: 14px;
+  --rui-toaster-offset: 24px;
+  --rui-toaster-inset-x: 16px;
+  --rui-toaster-inset-bottom: 16px;
   position: fixed;
   z-index: var(--z-toast, 50);
   pointer-events: none;
   box-sizing: border-box;
-  width: var(--width, 356px);
+  width: var(--rui-toaster-width);
   margin: 0;
   padding: 0;
 }
@@ -5837,20 +6038,20 @@ rui-toaster[data-contained='true'] {
   position: absolute;
 }
 rui-toaster[data-y-position='top'] {
-  top: var(--viewport-offset, 24px);
+  top: var(--rui-toaster-offset, 24px);
   bottom: auto;
 }
 rui-toaster[data-y-position='bottom'] {
-  bottom: var(--viewport-offset, 24px);
+  bottom: var(--rui-toaster-offset, 24px);
   top: auto;
 }
 rui-toaster[data-x-position='end'] {
-  right: var(--viewport-offset, 24px);
+  right: var(--rui-toaster-offset, 24px);
   left: auto;
   transform: none;
 }
 rui-toaster[data-x-position='start'] {
-  left: var(--viewport-offset, 24px);
+  left: var(--rui-toaster-offset, 24px);
   right: auto;
   transform: none;
 }
@@ -5860,20 +6061,20 @@ rui-toaster[data-x-position='center'] {
   transform: translateX(-50%);
 }
 rui-toast {
-  --y: translateY(0);
-  --z-index: 1;
+  --rui-toast-y: translateY(0);
+  --rui-toast-z: 1;
   position: absolute;
   left: 0;
   width: 100%;
   opacity: 0;
-  transform: var(--y);
+  transform: var(--rui-toast-y);
   touch-action: none;
   box-sizing: border-box;
   outline: none;
   overflow-wrap: anywhere;
   overflow: hidden;
   pointer-events: auto;
-  z-index: var(--z-index);
+  z-index: var(--rui-toast-z);
   transition: transform 400ms ease,	opacity 400ms ease,	height 400ms ease;
 }
 rui-toaster[data-y-position='bottom'] rui-toast {
@@ -5890,10 +6091,10 @@ rui-toast:not([data-mounted='true']) {
   opacity: 0;
 }
 rui-toaster[data-y-position='bottom'] rui-toast:not([data-mounted='true']) {
-  --y: translateY(100%);
+  --rui-toast-y: translateY(100%);
 }
 rui-toaster[data-y-position='top'] rui-toast:not([data-mounted='true']) {
-  --y: translateY(-100%);
+  --rui-toast-y: translateY(-100%);
 }
 rui-toast[data-mounted='true'] {
   opacity: 1;
@@ -5906,7 +6107,7 @@ rui-toast[data-expanded='false'][data-front='false'] {
   pointer-events: none;
 }
 rui-toast[data-swiping='true'] {
-  transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
+  transform: var(--rui-toast-y) translateY(var(--rui-toast-swipe-y, 0px)) translateX(var(--rui-toast-swipe-x, 0px));
   transition: none;
 }
 rui-toast[data-removed='true'][data-swipe-out='false'] {
@@ -5914,10 +6115,10 @@ rui-toast[data-removed='true'][data-swipe-out='false'] {
   transition: transform 400ms ease,	opacity 200ms ease,	height 400ms ease;
 }
 rui-toaster[data-y-position='bottom'] rui-toast[data-removed='true'][data-swipe-out='false'] {
-  --y: translateY(100%);
+  --rui-toast-y: translateY(100%);
 }
 rui-toaster[data-y-position='top'] rui-toast[data-removed='true'][data-swipe-out='false'] {
-  --y: translateY(-100%);
+  --rui-toast-y: translateY(-100%);
 }
 rui-toast[data-swipe-out='true'] {
   animation-duration: 200ms;
@@ -5941,7 +6142,7 @@ rui-toaster[data-y-position='bottom'] rui-toast[data-expanded='true']::after {
   position: absolute;
   left: 0;
   width: 100%;
-  height: calc(var(--gap, 14px) + 1px);
+  height: calc(var(--rui-toaster-gap) + 1px);
   bottom: 100%;
 }
 rui-toaster[data-y-position='top'] rui-toast[data-expanded='true']::after {
@@ -5949,7 +6150,7 @@ rui-toaster[data-y-position='top'] rui-toast[data-expanded='true']::after {
   position: absolute;
   left: 0;
   width: 100%;
-  height: calc(var(--gap, 14px) + 1px);
+  height: calc(var(--rui-toaster-gap) + 1px);
   top: 100%;
 }
 @layer components {
@@ -6158,6 +6359,9 @@ rui-toaster[data-y-position='top'] rui-toast[data-expanded='true']::after {
     @media (forced-colors: active) {
       background-image: none;
     }
+    @media (forced-colors: active) {
+      background-image: none;
+    }
     background-image: var(--sheen-image);
     @media (forced-colors: active) {
       background-image: none;
@@ -6303,60 +6507,60 @@ rui-toaster[data-y-position='top'] rui-toast[data-expanded='true']::after {
 }
 @keyframes rui-toast-swipe-out-left {
   from {
-    transform: var(--y) translateX(var(--swipe-amount-x));
+    transform: var(--rui-toast-y) translateX(var(--rui-toast-swipe-x));
     opacity: 1;
   }
   to {
-    transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
+    transform: var(--rui-toast-y) translateX(calc(var(--rui-toast-swipe-x) - 100%));
     opacity: 0;
   }
 }
 @keyframes rui-toast-swipe-out-right {
   from {
-    transform: var(--y) translateX(var(--swipe-amount-x));
+    transform: var(--rui-toast-y) translateX(var(--rui-toast-swipe-x));
     opacity: 1;
   }
   to {
-    transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
+    transform: var(--rui-toast-y) translateX(calc(var(--rui-toast-swipe-x) + 100%));
     opacity: 0;
   }
 }
 @keyframes rui-toast-swipe-out-up {
   from {
-    transform: var(--y) translateY(var(--swipe-amount-y));
+    transform: var(--rui-toast-y) translateY(var(--rui-toast-swipe-y));
     opacity: 1;
   }
   to {
-    transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
+    transform: var(--rui-toast-y) translateY(calc(var(--rui-toast-swipe-y) - 100%));
     opacity: 0;
   }
 }
 @keyframes rui-toast-swipe-out-down {
   from {
-    transform: var(--y) translateY(var(--swipe-amount-y));
+    transform: var(--rui-toast-y) translateY(var(--rui-toast-swipe-y));
     opacity: 1;
   }
   to {
-    transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
+    transform: var(--rui-toast-y) translateY(calc(var(--rui-toast-swipe-y) + 100%));
     opacity: 0;
   }
 }
 @media (max-width: 600px) {
   rui-toaster {
-    left: var(--toast-offset-x);
-    right: var(--toast-offset-x);
+    left: var(--rui-toaster-inset-x);
+    right: var(--rui-toaster-inset-x);
     width: auto;
     transform: none;
   }
   rui-toaster[data-y-position='bottom'] {
-    bottom: var(--toast-offset-bottom);
+    bottom: var(--rui-toaster-inset-bottom);
   }
   rui-toaster[data-y-position='top'] {
-    top: var(--toast-offset-x);
+    top: var(--rui-toaster-inset-x);
   }
   rui-toaster[data-x-position='end'],	rui-toaster[data-x-position='start'],	rui-toaster[data-x-position='center'] {
-    left: var(--toast-offset-x);
-    right: var(--toast-offset-x);
+    left: var(--rui-toaster-inset-x);
+    right: var(--rui-toaster-inset-x);
     transform: none;
   }
 }
@@ -6479,6 +6683,13 @@ rui-toolbar {
   }
 }
 rui-tooltip {
+  --rui-tooltip-max-width: 20rem;
+  --rui-tooltip-padding-x: var(--space-2);
+  --rui-tooltip-padding-y: var(--space-1);
+  --rui-tooltip-radius: var(--radius-container);
+  --rui-tooltip-surface: var(--on-background);
+  --rui-tooltip-color: var(--background);
+  --rui-tooltip-shadow: var(--shadow-overlay);
   display: inline-flex;
 }
 @layer components {
@@ -6491,17 +6702,16 @@ rui-tooltip {
   }
   .rui-tooltip__content {
     z-index: var(--z-index-overlay, var(--z-overlay));
-    max-width: var(--container-xs, 20rem);
-    border-radius: var(--radius-container, var(--radius-container));
-    background-color: var(--color-on-background, var(--on-background));
-    padding-inline: var(--spacing-2, var(--space-2));
-    padding-block: var(--spacing-1, var(--space-1));
     font-size: var(--text-xs, var(--text-xs));
     line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
-    color: var(--color-background, var(--background));
-    --tw-shadow: var(--shadow-overlay);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     width: max-content;
+    max-inline-size: var(--rui-tooltip-max-width);
+    padding-inline: var(--rui-tooltip-padding-x);
+    padding-block: var(--rui-tooltip-padding-y);
+    border-radius: var(--rui-tooltip-radius);
+    background-color: var(--rui-tooltip-surface);
+    color: var(--rui-tooltip-color);
+    box-shadow: var(--rui-tooltip-shadow);
     pointer-events: none;
   }
   .rui-tooltip__content[hidden] {