@kushagradhawan/kookie-ui 0.1.37 → 0.1.38

package/components.css

@@ -2713,6 +2713,10 @@
     --avatar-image-hover-filter: brightness(0.95) saturate(1.05);
     --avatar-image-active-filter: brightness(0.9) saturate(1.1);
     --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
+    --base-button-solid-active-filter: brightness(0.9) contrast(1.03);
+    --base-button-solid-open-filter: brightness(0.96) contrast(1.02);
+    --base-button-solid-high-contrast-active-filter: brightness(0.92);
+    --base-button-solid-high-contrast-open-filter: brightness(0.96);
     --segmented-control-indicator-background-color: var(--color-background);
     --slider-range-high-contrast-background-image: linear-gradient(var(--black-a8), var(--black-a8));
 }
@@ -2721,6 +2725,10 @@
     --avatar-image-hover-filter: brightness(1.05) saturate(1.05);
     --avatar-image-active-filter: brightness(1.1) saturate(1.1);
     --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
+    --base-button-solid-active-filter: brightness(0.88) contrast(1.03);
+    --base-button-solid-open-filter: brightness(0.95) contrast(1.02);
+    --base-button-solid-high-contrast-active-filter: brightness(0.9);
+    --base-button-solid-high-contrast-open-filter: brightness(0.95);
     --slider-range-high-contrast-background-image: none;
 }
 .rt-Badge {
@@ -3238,7 +3246,7 @@
     isolation: isolate;
     height: var(--base-button-height);
 }
-:where([dir="rtl"]) .rt-BaseButton {
+:where([dir='rtl']) .rt-BaseButton {
     flex-direction: row-reverse;
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton {
@@ -3292,138 +3300,113 @@
     width: 100%;
 }
 .rt-BaseButton:where(.rt-r-size-1) {
-    --base-button-classic-active-padding-top: 1px;
     --base-button-height: var(--space-5);
     border-radius: max(var(--radius-1), var(--radius-full));
 }
 .rt-BaseButton:where(.rt-r-size-2) {
-    --base-button-classic-active-padding-top: 2px;
     --base-button-height: var(--space-6);
     border-radius: max(var(--radius-2), var(--radius-full));
 }
 .rt-BaseButton:where(.rt-r-size-3) {
-    --base-button-classic-active-padding-top: 2px;
     --base-button-height: var(--space-7);
     border-radius: max(var(--radius-3), var(--radius-full));
 }
 .rt-BaseButton:where(.rt-r-size-4) {
-    --base-button-classic-active-padding-top: 2px;
     --base-button-height: var(--space-8);
     border-radius: max(var(--radius-4), var(--radius-full));
 }
 @media (min-width: 520px) {
     .rt-BaseButton:where(.xs\:rt-r-size-1) {
-        --base-button-classic-active-padding-top: 1px;
         --base-button-height: var(--space-5);
         border-radius: max(var(--radius-1), var(--radius-full));
     }
     .rt-BaseButton:where(.xs\:rt-r-size-2) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-6);
         border-radius: max(var(--radius-2), var(--radius-full));
     }
     .rt-BaseButton:where(.xs\:rt-r-size-3) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-7);
         border-radius: max(var(--radius-3), var(--radius-full));
     }
     .rt-BaseButton:where(.xs\:rt-r-size-4) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-8);
         border-radius: max(var(--radius-4), var(--radius-full));
     }
 }
 @media (min-width: 768px) {
     .rt-BaseButton:where(.sm\:rt-r-size-1) {
-        --base-button-classic-active-padding-top: 1px;
         --base-button-height: var(--space-5);
         border-radius: max(var(--radius-1), var(--radius-full));
     }
     .rt-BaseButton:where(.sm\:rt-r-size-2) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-6);
         border-radius: max(var(--radius-2), var(--radius-full));
     }
     .rt-BaseButton:where(.sm\:rt-r-size-3) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-7);
         border-radius: max(var(--radius-3), var(--radius-full));
     }
     .rt-BaseButton:where(.sm\:rt-r-size-4) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-8);
         border-radius: max(var(--radius-4), var(--radius-full));
     }
 }
 @media (min-width: 1024px) {
     .rt-BaseButton:where(.md\:rt-r-size-1) {
-        --base-button-classic-active-padding-top: 1px;
         --base-button-height: var(--space-5);
         border-radius: max(var(--radius-1), var(--radius-full));
     }
     .rt-BaseButton:where(.md\:rt-r-size-2) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-6);
         border-radius: max(var(--radius-2), var(--radius-full));
     }
     .rt-BaseButton:where(.md\:rt-r-size-3) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-7);
         border-radius: max(var(--radius-3), var(--radius-full));
     }
     .rt-BaseButton:where(.md\:rt-r-size-4) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-8);
         border-radius: max(var(--radius-4), var(--radius-full));
     }
 }
 @media (min-width: 1280px) {
     .rt-BaseButton:where(.lg\:rt-r-size-1) {
-        --base-button-classic-active-padding-top: 1px;
         --base-button-height: var(--space-5);
         border-radius: max(var(--radius-1), var(--radius-full));
     }
     .rt-BaseButton:where(.lg\:rt-r-size-2) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-6);
         border-radius: max(var(--radius-2), var(--radius-full));
     }
     .rt-BaseButton:where(.lg\:rt-r-size-3) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-7);
         border-radius: max(var(--radius-3), var(--radius-full));
     }
     .rt-BaseButton:where(.lg\:rt-r-size-4) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-8);
         border-radius: max(var(--radius-4), var(--radius-full));
     }
 }
 @media (min-width: 1640px) {
     .rt-BaseButton:where(.xl\:rt-r-size-1) {
-        --base-button-classic-active-padding-top: 1px;
         --base-button-height: var(--space-5);
         border-radius: max(var(--radius-1), var(--radius-full));
     }
     .rt-BaseButton:where(.xl\:rt-r-size-2) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-6);
         border-radius: max(var(--radius-2), var(--radius-full));
     }
     .rt-BaseButton:where(.xl\:rt-r-size-3) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-7);
         border-radius: max(var(--radius-3), var(--radius-full));
     }
     .rt-BaseButton:where(.xl\:rt-r-size-4) {
-        --base-button-classic-active-padding-top: 2px;
         --base-button-height: var(--space-8);
         border-radius: max(var(--radius-4), var(--radius-full));
     }
 }
 .rt-BaseButton:where(.rt-variant-classic) {
     position: relative;
-    top: var(--classic-elevation-offset);
     color: var(--accent-a11);
     background-color: var(--color-surface-solid);
     box-shadow: var(--shadow-2);
@@ -3483,17 +3466,29 @@
 .rt-BaseButton:where(.rt-variant-classic):where([data-state='open']):where([data-panel-background='translucent'], [data-material='translucent']) {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
 }
-.rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled]), [data-state='on']:not([data-disabled])) {
+.rt-BaseButton:where(.rt-variant-classic):where(
+      :active:not([data-state='open'], [data-disabled]),
+      [data-state='on']:not([data-disabled])
+    ) {
     background-color: var(--gray-3);
     box-shadow: var(--shadow-1);
 }
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled]), [data-state='on']:not([data-disabled])) {
+:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-classic):where(
+      :active:not([data-state='open'], [data-disabled]),
+      [data-state='on']:not([data-disabled])
+    ) {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
 }
-.rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled]), [data-state='on']:not([data-disabled])):where([data-panel-background='solid'], [data-material='solid']) {
+.rt-BaseButton:where(.rt-variant-classic):where(
+      :active:not([data-state='open'], [data-disabled]),
+      [data-state='on']:not([data-disabled])
+    ):where([data-panel-background='solid'], [data-material='solid']) {
     background-color: var(--gray-3);
 }
-.rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled]), [data-state='on']:not([data-disabled])):where([data-panel-background='translucent'], [data-material='translucent']) {
+.rt-BaseButton:where(.rt-variant-classic):where(
+      :active:not([data-state='open'], [data-disabled]),
+      [data-state='on']:not([data-disabled])
+    ):where([data-panel-background='translucent'], [data-material='translucent']) {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
 }
 @media (pointer: coarse) {
@@ -3511,6 +3506,62 @@
     pointer-events: none;
     top: 0;
 }
+.rt-BaseButton:where(.rt-variant-override) {
+    color: var(--button-override-color, inherit);
+    background: var(--button-override-background, transparent);
+    background-color: var(--button-override-background-color, initial);
+    box-shadow: var(--button-override-box-shadow, none);
+    filter: var(--button-override-filter, none);
+    outline: var(--button-override-outline, none);
+}
+@media (hover: hover) {
+    .rt-BaseButton:where(.rt-variant-override):where(:hover) {
+        color: var(--button-override-hover-color, var(--button-override-color, inherit));
+        background: var(--button-override-hover-background, var(--button-override-background, transparent));
+        background-color: var(--button-override-hover-background-color, var(--button-override-background-color, initial));
+        box-shadow: var(--button-override-hover-box-shadow, var(--button-override-box-shadow, none));
+        filter: var(--button-override-hover-filter, var(--button-override-filter, none));
+        outline: var(--button-override-hover-outline, var(--button-override-outline, none));
+    }
+}
+.rt-BaseButton:where(.rt-variant-override):where([data-state='open']) {
+    color: var(--button-override-open-color, var(--button-override-color, inherit));
+    background: var(--button-override-open-background, var(--button-override-background, transparent));
+    background-color: var(--button-override-open-background-color, var(--button-override-background-color, initial));
+    box-shadow: var(--button-override-open-box-shadow, var(--button-override-box-shadow, none));
+    filter: var(--button-override-open-filter, var(--button-override-filter, none));
+    outline: var(--button-override-open-outline, var(--button-override-outline, none));
+}
+.rt-BaseButton:where(.rt-variant-override):where(:active:not([data-state='open'])) {
+    color: var(--button-override-active-color, var(--button-override-color, inherit));
+    background: var(--button-override-active-background, var(--button-override-background, transparent));
+    background-color: var(--button-override-active-background-color, var(--button-override-background-color, initial));
+    box-shadow: var(--button-override-active-box-shadow, var(--button-override-box-shadow, none));
+    filter: var(--button-override-active-filter, var(--button-override-filter, none));
+    outline: var(--button-override-active-outline, var(--button-override-outline, none));
+}
+.rt-BaseButton:where(.rt-variant-override):where(:focus-visible) {
+    outline: var(--button-override-focus-outline, var(--focus-ring, 2px solid var(--focus-8)));
+    outline-offset: var(--button-override-focus-outline-offset, 2px);
+}
+.rt-BaseButton:where(.rt-variant-override):where([data-state='on']) {
+    color: var(--button-override-pressed-color, var(--button-override-active-color, var(--button-override-color, inherit)));
+    background: var(--button-override-pressed-background, var(--button-override-active-background, var(--button-override-background, transparent)));
+    background-color: var(--button-override-pressed-background-color, var(--button-override-active-background-color, var(--button-override-background-color, initial)));
+    box-shadow: var(--button-override-pressed-box-shadow, var(--button-override-active-box-shadow, var(--button-override-box-shadow, none)));
+    filter: var(--button-override-pressed-filter, var(--button-override-active-filter, var(--button-override-filter, none)));
+    outline: var(--button-override-pressed-outline, var(--button-override-active-outline, var(--button-override-outline, none)));
+}
+.rt-BaseButton:where(.rt-variant-override):where([data-disabled]) {
+    color: var(--button-override-disabled-color, var(--gray-a8));
+    background: var(--button-override-disabled-background, var(--gray-a3));
+    background-color: var(--button-override-disabled-background-color, var(--gray-a3));
+    box-shadow: var(--button-override-disabled-box-shadow, none);
+    filter: var(--button-override-disabled-filter, none);
+    outline: var(--button-override-disabled-outline, none);
+    cursor: not-allowed;
+    pointer-events: none;
+}
 .rt-BaseButton:where(.rt-variant-solid) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
@@ -3527,6 +3578,7 @@
 @media (hover: hover) {
     .rt-BaseButton:where(.rt-variant-solid):where(:hover) {
         background-color: var(--accent-10);
+        box-shadow: var(--shadow-2);
     }
     :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where(:hover) {
         background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
@@ -3540,6 +3592,8 @@
 }
 .rt-BaseButton:where(.rt-variant-solid):where([data-state='open']) {
     background-color: var(--accent-10);
+    filter: var(--base-button-solid-open-filter);
+    box-shadow: var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
@@ -3551,16 +3605,8 @@
     background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
 }
 .rt-BaseButton:where(.rt-variant-solid):where(:active:not([data-state='open'])) {
-    background-color: var(--accent-11);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where(:active:not([data-state='open'])) {
-    background-color: color-mix(in srgb, var(--accent-a11), var(--accent-11) 10%);
-}
-.rt-BaseButton:where(.rt-variant-solid):where(:active:not([data-state='open'])):where([data-panel-background='solid'], [data-material='solid']) {
-    background-color: var(--accent-11);
-}
-.rt-BaseButton:where(.rt-variant-solid):where(:active:not([data-state='open'])):where([data-panel-background='translucent'], [data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--accent-a11), var(--accent-11) 10%);
+    filter: var(--base-button-solid-active-filter);
+    box-shadow: var(--shadow-1);
 }
 @media (pointer: coarse) {
     .rt-BaseButton:where(.rt-variant-solid):where(:active:not([data-state='open'])) {
@@ -3589,6 +3635,7 @@
     .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:hover) {
         background-color: var(--accent-12);
         filter: var(--base-button-solid-high-contrast-hover-filter);
+        box-shadow: var(--shadow-2);
     }
     :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:hover) {
         background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
@@ -3602,7 +3649,8 @@
 }
 .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where([data-state='open']) {
     background-color: var(--accent-12);
-    filter: var(--base-button-solid-high-contrast-hover-filter);
+    filter: var(--base-button-solid-high-contrast-open-filter);
+    box-shadow: var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
@@ -3614,17 +3662,8 @@
     background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
 }
 .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:active:not([data-state='open'])) {
-    background-color: var(--accent-11);
     filter: var(--base-button-solid-high-contrast-active-filter);
-}
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:active:not([data-state='open'])) {
-    background-color: color-mix(in srgb, var(--accent-a11), var(--accent-11) 10%);
-}
-.rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:active:not([data-state='open'])):where([data-panel-background='solid'], [data-material='solid']) {
-    background-color: var(--accent-11);
-}
-.rt-BaseButton:where(.rt-variant-solid):where(.rt-high-contrast):where(:active:not([data-state='open'])):where([data-panel-background='translucent'], [data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--accent-a11), var(--accent-11) 10%);
+    box-shadow: var(--shadow-1);
 }
 .rt-BaseButton:where(.rt-variant-solid):where([data-disabled]) {
     color: var(--gray-a8);
@@ -3665,6 +3704,7 @@
 @media (hover: hover) {
     .rt-BaseButton:where(.rt-variant-soft):where(:hover) {
         background-color: var(--accent-4);
+        box-shadow: var(--shadow-2);
     }
     :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-soft):where(:hover) {
         background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
@@ -3678,6 +3718,7 @@
 }
 .rt-BaseButton:where(.rt-variant-soft):where([data-state='open']) {
     background-color: var(--accent-4);
+    box-shadow: var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-soft):where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
@@ -3690,6 +3731,7 @@
 }
 .rt-BaseButton:where(.rt-variant-soft):where(:active:not([data-state='open'])) {
     background-color: var(--accent-5);
+    box-shadow: var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-soft):where(:active:not([data-state='open'])) {
     background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
@@ -3748,6 +3790,7 @@
 }
 .rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']) {
     background-color: var(--accent-3);
+    box-shadow: var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
@@ -3762,6 +3805,7 @@
 }
 .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])) {
     background-color: var(--accent-4);
+    box-shadow: var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])) {
     background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
@@ -3815,7 +3859,7 @@
 }
 .rt-BaseButton:where(.rt-variant-outline):where([data-state='open']) {
     background-color: var(--accent-2);
-    box-shadow: inset 0 0 0 1px var(--accent-7);
+    box-shadow: inset 0 0 0 1px var(--accent-7), var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-outline):where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
@@ -3831,7 +3875,7 @@
 }
 .rt-BaseButton:where(.rt-variant-outline):where(:active:not([data-state='open'])) {
     background-color: var(--accent-3);
-    box-shadow: inset 0 0 0 1px var(--accent-8);
+    box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-outline):where(:active:not([data-state='open'])) {
     background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
@@ -3898,7 +3942,7 @@
 }
 .rt-BaseButton:where(.rt-variant-surface):where([data-state='open']) {
     background-color: var(--accent-3);
-    box-shadow: inset 0 0 0 1px var(--accent-8);
+    box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-surface):where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
@@ -3914,7 +3958,7 @@
 }
 .rt-BaseButton:where(.rt-variant-surface):where(:active:not([data-state='open'])) {
     background-color: var(--accent-4);
-    box-shadow: inset 0 0 0 1px var(--accent-8);
+    box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where(.rt-variant-surface):where(:active:not([data-state='open'])) {
     background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
@@ -3958,7 +4002,7 @@
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid) {
     background-color: var(--accent-10);
     opacity: 0.9;
-    transform: translateY(1px);
+    box-shadow: var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid) {
     background-color: color-mix(in srgb, var(--accent-a10), var(--accent-10) 10%);
@@ -3972,10 +4016,10 @@
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid):where(.rt-high-contrast) {
     background-color: var(--accent-12);
     opacity: 0.85;
-    transform: translateY(1px);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-soft) {
     background-color: var(--accent-5);
+    box-shadow: var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-soft) {
     background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
@@ -3988,6 +4032,7 @@
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-ghost) {
     background-color: var(--accent-4);
+    box-shadow: var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-ghost) {
     background-color: var(--accent-a4);
@@ -4000,7 +4045,7 @@
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-outline) {
     background-color: var(--accent-3);
-    box-shadow: inset 0 0 0 1px var(--accent-8);
+    box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-outline) {
     background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
@@ -4016,7 +4061,7 @@
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-surface) {
     background-color: var(--accent-4);
-    box-shadow: inset 0 0 0 1px var(--accent-8);
+    box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-1);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseButton:where([data-state='on']):where(.rt-variant-surface) {
     background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
@@ -4073,9 +4118,6 @@
     background-color: var(--gray-a3);
     box-shadow: none;
 }
-.rt-Button:where(:not(.rt-variant-ghost)) :where(svg) {
-    opacity: 0.9;
-}
 .rt-Button:where(.rt-variant-ghost) {
     padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
 }
@@ -4147,8 +4189,8 @@
     height: var(--content-icon-size-4);
 }
 .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
-    padding-left: var(--space-5);
-    padding-right: var(--space-5);
+    padding-left: calc(var(--space-4) + (4px * var(--scaling)));
+    padding-right: calc(var(--space-4) + (4px * var(--scaling)));
 }
 .rt-Button:where(.rt-r-size-4):where(.rt-variant-ghost) {
     gap: var(--component-gap-ghost-4);
@@ -4224,8 +4266,8 @@
         height: var(--content-icon-size-4);
     }
     .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
+        padding-left: calc(var(--space-4) + (4px * var(--scaling)));
+        padding-right: calc(var(--space-4) + (4px * var(--scaling)));
     }
     .rt-Button:where(.xs\:rt-r-size-4):where(.rt-variant-ghost) {
         gap: var(--component-gap-ghost-4);
@@ -4302,8 +4344,8 @@
         height: var(--content-icon-size-4);
     }
     .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
+        padding-left: calc(var(--space-4) + (4px * var(--scaling)));
+        padding-right: calc(var(--space-4) + (4px * var(--scaling)));
     }
     .rt-Button:where(.sm\:rt-r-size-4):where(.rt-variant-ghost) {
         gap: var(--component-gap-ghost-4);
@@ -4380,8 +4422,8 @@
         height: var(--content-icon-size-4);
     }
     .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
+        padding-left: calc(var(--space-4) + (4px * var(--scaling)));
+        padding-right: calc(var(--space-4) + (4px * var(--scaling)));
     }
     .rt-Button:where(.md\:rt-r-size-4):where(.rt-variant-ghost) {
         gap: var(--component-gap-ghost-4);
@@ -4458,8 +4500,8 @@
         height: var(--content-icon-size-4);
     }
     .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
+        padding-left: calc(var(--space-4) + (4px * var(--scaling)));
+        padding-right: calc(var(--space-4) + (4px * var(--scaling)));
     }
     .rt-Button:where(.lg\:rt-r-size-4):where(.rt-variant-ghost) {
         gap: var(--component-gap-ghost-4);
@@ -4536,8 +4578,8 @@
         height: var(--content-icon-size-4);
     }
     .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
+        padding-left: calc(var(--space-4) + (4px * var(--scaling)));
+        padding-right: calc(var(--space-4) + (4px * var(--scaling)));
     }
     .rt-Button:where(.xl\:rt-r-size-4):where(.rt-variant-ghost) {
         gap: var(--component-gap-ghost-4);
@@ -12304,6 +12346,13 @@
             user-select: none;
     cursor: var(--cursor-menu-item);
 }
+.rt-SelectItem:where(.rt-SelectItemRich) {
+    height: auto;
+    min-height: var(--select-item-height);
+    align-items: flex-start;
+    padding-top: var(--space-2);
+    padding-bottom: var(--space-2);
+}
 .rt-SelectItemIndicator {
     position: absolute;
     left: 0;
@@ -13930,10 +13979,12 @@
     margin-top: calc(var(--space-1) / 2);
     margin-bottom: calc(var(--space-1) / 2);
 }
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarContent),
 .rt-ShellSidebarRail :where(.rt-SidebarContent),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarContent) {
     padding: var(--space-2);
 }
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuButton),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuButton),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuButton) {
     justify-content: center;
@@ -13942,12 +13993,15 @@
     gap: var(--space-1);
     padding: var(--space-2) var(--space-1);
 }
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuBadge),
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuShortcut),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuBadge),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuShortcut),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuBadge),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuShortcut) {
     display: none;
 }
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarGroupLabel),
 .rt-ShellSidebarRail :where(.rt-SidebarGroupLabel),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarGroupLabel) {
     display: block;
@@ -13957,10 +14011,12 @@
     color: var(--gray-a9);
     font-weight: var(--font-weight-medium);
 }
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubTriggerIcon),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuSubTriggerIcon),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubTriggerIcon) {
     display: none;
 }
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubList),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuSubList),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubList) {
     padding-left: 0;

package/dist/cjs/components/_internal/base-button.props.d.ts

@@ -104,7 +104,7 @@ declare const baseButtonPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["classic", "solid", "soft", "surface", "outline", "ghost"];
+        values: readonly ["classic", "solid", "soft", "surface", "outline", "ghost", "override"];
         default: "solid";
     };
     asChild: {

package/dist/cjs/components/_internal/base-button.props.js

@@ -1,2 +1,2 @@
-"use strict";var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var c=(a,e)=>{for(var s in e)t(a,s,{get:e[s],enumerable:!0})},D=(a,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of d(e))!m.call(a,o)&&o!==s&&t(a,o,{get:()=>e[o],enumerable:!(n=u(e,o))||n.enumerable});return a};var P=a=>D(t({},"__esModule",{value:!0}),a);var h={};c(h,{baseButtonPropDefs:()=>p});module.exports=P(h);var r=require("../../props/as-child.prop.js"),l=require("../../props/color.prop.js"),f=require("../../props/high-contrast.prop.js"),i=require("../../props/radius.prop.js");const y=["1","2","3","4"],b=["classic","solid","soft","surface","outline","ghost"],v=["solid","translucent"],g=["solid","translucent"],p={...r.asChildPropDef,size:{type:"enum",className:"rt-r-size",values:y,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:b,default:"solid"},...l.accentColorPropDef,...f.highContrastPropDef,...i.radiusPropDef,loading:{type:"boolean",className:"rt-loading",default:!1},fullWidth:{type:"boolean",className:"rt-full-width",default:!1},material:{type:"enum",values:g,default:void 0},panelBackground:{type:"enum",values:v,default:void 0},flush:{type:"boolean",default:!1}};
+"use strict";var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var c=(a,e)=>{for(var s in e)t(a,s,{get:e[s],enumerable:!0})},D=(a,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of d(e))!m.call(a,o)&&o!==s&&t(a,o,{get:()=>e[o],enumerable:!(r=u(e,o))||r.enumerable});return a};var P=a=>D(t({},"__esModule",{value:!0}),a);var h={};c(h,{baseButtonPropDefs:()=>p});module.exports=P(h);var n=require("../../props/as-child.prop.js"),l=require("../../props/color.prop.js"),f=require("../../props/high-contrast.prop.js"),i=require("../../props/radius.prop.js");const y=["1","2","3","4"],b=["classic","solid","soft","surface","outline","ghost","override"],v=["solid","translucent"],g=["solid","translucent"],p={...n.asChildPropDef,size:{type:"enum",className:"rt-r-size",values:y,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:b,default:"solid"},...l.accentColorPropDef,...f.highContrastPropDef,...i.radiusPropDef,loading:{type:"boolean",className:"rt-loading",default:!1},fullWidth:{type:"boolean",className:"rt-full-width",default:!1},material:{type:"enum",values:g,default:void 0},panelBackground:{type:"enum",values:v,default:void 0},flush:{type:"boolean",default:!1}};
 //# sourceMappingURL=base-button.props.js.map

package/dist/cjs/components/_internal/base-button.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/_internal/base-button.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../props/as-child.prop.js';\nimport { accentColorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\nimport { radiusPropDef } from '../../props/radius.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\n/**\n * Available button sizes for responsive design\n * Size 1: 24px - Compact for toolbars and dense interfaces\n * Size 2: 32px - Standard for most interface contexts\n * Size 3: 40px - Large for important actions and mobile touch targets\n * Size 4: 48px - Extra large for hero sections and maximum impact\n */\nconst sizes = ['1', '2', '3', '4'] as const;\n\n/**\n * Available button variants for different visual contexts\n * - classic: Premium, sophisticated appearance\n * - solid: Primary actions that should be noticed first\n * - soft: Content-heavy interfaces, natural integration\n * - surface: Elevated appearance with subtle depth\n * - outline: Secondary actions that support primary actions\n * - ghost: Utility functions that don't compete for attention\n */\nconst variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;\n\n/**\n * Available panel background options (deprecated)\n * @deprecated Use `materials` instead\n */\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\n/**\n * Available material options for visual rendering\n * - solid: Opaque backgrounds and borders\n * - translucent: Elevated effects with depth and visual separation\n */\nconst materials = ['solid', 'translucent'] as const;\n\n/**\n * Base button prop definitions that define the component's API\n * \n * These props are used by all button variants (Button, IconButton, etc.)\n * to ensure consistent behavior and styling across the design system.\n * \n * Key features:\n * - Responsive sizing with mobile-first approach\n * - Six visual variants for different interface contexts\n * - Comprehensive color system with semantic meanings\n * - Loading states with automatic accessibility\n * - Material system for visual depth and elevation\n * - Polymorphic rendering support via asChild\n * \n * @example\n * ```tsx\n * // Basic button with default props\n * <BaseButton>Click me</BaseButton>\n * \n * // Button with custom size and variant\n * <BaseButton size=\"3\" variant=\"solid\">Primary Action</BaseButton>\n * \n * // Button with loading state\n * <BaseButton loading>Processing...</BaseButton>\n * \n * // Button with material and high contrast\n * <BaseButton material=\"translucent\" highContrast>Elevated Button</BaseButton>\n * ```\n */\nconst baseButtonPropDefs = {\n  ...asChildPropDef,\n  /**\n   * Button size for responsive design and interface density\n   * Supports responsive objects: { initial: '1', sm: '2', md: '3', lg: '4' }\n   */\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  /**\n   * Visual variant that determines the button's appearance and context\n   */\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n  ...radiusPropDef,\n  /**\n   * Loading state that shows a spinner and disables interaction\n   * Automatically sets disabled=true and provides accessibility announcements\n   */\n  loading: { type: 'boolean', className: 'rt-loading', default: false },\n  /**\n   * Full width mode that expands the button to fill its container\n   * Useful for mobile layouts and form submissions\n   */\n  fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },\n  /**\n   * Material type for visual rendering and depth effects\n   * Controls how the button renders its visual elements\n   */\n  material: { type: 'enum', values: materials, default: undefined },\n  /**\n   * Panel background type (deprecated)\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  /**\n   * Flush mode that removes visual padding for seamless text integration\n   * Only effective with ghost variant\n   */\n  flush: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  loading: PropDef<boolean>;\n  fullWidth: PropDef<boolean>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  flush: PropDef<boolean>;\n};\n\nexport { baseButtonPropDefs };\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,wCAC/BC,EAAmC,qCACnCC,EAAoC,6CACpCC,EAA8B,sCAW9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAW3BC,EAAW,CAAC,UAAW,QAAS,OAAQ,UAAW,UAAW,OAAO,EAMrEC,EAAmB,CAAC,QAAS,aAAa,EAO1CC,EAAY,CAAC,QAAS,aAAa,EA+BnCT,EAAqB,CACzB,GAAG,iBAKH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQM,EAAO,QAAS,IAAK,WAAY,EAAK,EAI5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,OAAQ,EACrF,GAAG,qBACH,GAAG,sBACH,GAAG,gBAKH,QAAS,CAAE,KAAM,UAAW,UAAW,aAAc,QAAS,EAAM,EAKpE,UAAW,CAAE,KAAM,UAAW,UAAW,gBAAiB,QAAS,EAAM,EAKzE,SAAU,CAAE,KAAM,OAAQ,OAAQE,EAAW,QAAS,MAAU,EAKhE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,MAAU,EAK9E,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
+  "sourcesContent": ["import { asChildPropDef } from '../../props/as-child.prop.js';\nimport { accentColorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\nimport { radiusPropDef } from '../../props/radius.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\n/**\n * Available button sizes for responsive design\n * Size 1: 24px - Compact for toolbars and dense interfaces\n * Size 2: 32px - Standard for most interface contexts\n * Size 3: 40px - Large for important actions and mobile touch targets\n * Size 4: 48px - Extra large for hero sections and maximum impact\n */\nconst sizes = ['1', '2', '3', '4'] as const;\n\n/**\n * Available button variants for different visual contexts\n * - classic: Premium, sophisticated appearance\n * - solid: Primary actions that should be noticed first\n * - soft: Content-heavy interfaces, natural integration\n * - surface: Elevated appearance with subtle depth\n * - outline: Secondary actions that support primary actions\n * - ghost: Utility functions that don't compete for attention\n */\nconst variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override'] as const;\n\n/**\n * Available panel background options (deprecated)\n * @deprecated Use `materials` instead\n */\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\n/**\n * Available material options for visual rendering\n * - solid: Opaque backgrounds and borders\n * - translucent: Elevated effects with depth and visual separation\n */\nconst materials = ['solid', 'translucent'] as const;\n\n/**\n * Base button prop definitions that define the component's API\n * \n * These props are used by all button variants (Button, IconButton, etc.)\n * to ensure consistent behavior and styling across the design system.\n * \n * Key features:\n * - Responsive sizing with mobile-first approach\n * - Six visual variants for different interface contexts\n * - Comprehensive color system with semantic meanings\n * - Loading states with automatic accessibility\n * - Material system for visual depth and elevation\n * - Polymorphic rendering support via asChild\n * \n * @example\n * ```tsx\n * // Basic button with default props\n * <BaseButton>Click me</BaseButton>\n * \n * // Button with custom size and variant\n * <BaseButton size=\"3\" variant=\"solid\">Primary Action</BaseButton>\n * \n * // Button with loading state\n * <BaseButton loading>Processing...</BaseButton>\n * \n * // Button with material and high contrast\n * <BaseButton material=\"translucent\" highContrast>Elevated Button</BaseButton>\n * ```\n */\nconst baseButtonPropDefs = {\n  ...asChildPropDef,\n  /**\n   * Button size for responsive design and interface density\n   * Supports responsive objects: { initial: '1', sm: '2', md: '3', lg: '4' }\n   */\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  /**\n   * Visual variant that determines the button's appearance and context\n   */\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n  ...radiusPropDef,\n  /**\n   * Loading state that shows a spinner and disables interaction\n   * Automatically sets disabled=true and provides accessibility announcements\n   */\n  loading: { type: 'boolean', className: 'rt-loading', default: false },\n  /**\n   * Full width mode that expands the button to fill its container\n   * Useful for mobile layouts and form submissions\n   */\n  fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },\n  /**\n   * Material type for visual rendering and depth effects\n   * Controls how the button renders its visual elements\n   */\n  material: { type: 'enum', values: materials, default: undefined },\n  /**\n   * Panel background type (deprecated)\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  /**\n   * Flush mode that removes visual padding for seamless text integration\n   * Only effective with ghost variant\n   */\n  flush: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  loading: PropDef<boolean>;\n  fullWidth: PropDef<boolean>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  flush: PropDef<boolean>;\n};\n\nexport { baseButtonPropDefs };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,wCAC/BC,EAAmC,qCACnCC,EAAoC,6CACpCC,EAA8B,sCAW9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAW3BC,EAAW,CAAC,UAAW,QAAS,OAAQ,UAAW,UAAW,QAAS,UAAU,EAMjFC,EAAmB,CAAC,QAAS,aAAa,EAO1CC,EAAY,CAAC,QAAS,aAAa,EA+BnCT,EAAqB,CACzB,GAAG,iBAKH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQM,EAAO,QAAS,IAAK,WAAY,EAAK,EAI5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,OAAQ,EACrF,GAAG,qBACH,GAAG,sBACH,GAAG,gBAKH,QAAS,CAAE,KAAM,UAAW,UAAW,aAAc,QAAS,EAAM,EAKpE,UAAW,CAAE,KAAM,UAAW,UAAW,gBAAiB,QAAS,EAAM,EAKzE,SAAU,CAAE,KAAM,OAAQ,OAAQE,EAAW,QAAS,MAAU,EAKhE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,MAAU,EAK9E,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
   "names": ["base_button_props_exports", "__export", "baseButtonPropDefs", "__toCommonJS", "import_as_child_prop", "import_color_prop", "import_high_contrast_prop", "import_radius_prop", "sizes", "variants", "panelBackgrounds", "materials"]
 }

package/dist/cjs/components/_internal/base-checkbox.props.d.ts

@@ -12,7 +12,7 @@ declare const baseCheckboxPropDefs: {
     size: {
         type: "enum";
         className: string;
-        values: readonly ["1", "2", "3"];
+        values: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
         default: "2";
         responsive: true;
     };