@maxsteinwender/sort-ui 1.0.3 → 1.0.5

package/dist/styles.css

@@ -13865,6 +13865,7 @@ video {
   --text-dark-muted: #6f6f77;
   --text-dark-hint: rgba(39, 39, 42, 0.35);
   --text-destructive: #d42422;
+  --text-primary: #437dfc;
   --text-informative: #2b5df3;
   --text-success: #3ea44b;
   --text-warning: #e35706;
@@ -13906,9 +13907,9 @@ video {
   --bg-muted: #f4f4f5;
   --bg-card: #ffffff;
   --bg-inverted: #18181b;
-  --bg-state-primary: #2563eb;
-  --bg-state-primary-hover: #3b82f6;
-  --bg-state-primary-press: #2563eb;
+  --bg-state-primary: #437dfc;
+  --bg-state-primary-hover: #65a0fd;
+  --bg-state-primary-press: #437dfc;
   --bg-state-disabled: rgba(39, 39, 42, 0.08);
   --bg-state-secondary: #ffffff;
   --bg-state-secondary-hover: #fafafa;
@@ -13954,6 +13955,9 @@ video {
   --bg-switch-active: #4fc660;
   --bg-state-primary-loading: #9ac4fe;
   --bg-state-destructive-loading: #f4a6a5;
+  /* --bg-basic-* are color ramp primitives.
+       Actively used in components (slider, stepper, inline-tips, chip, page-item, table-row, etc.)
+       for semantic color variants. All 74 tokens are mapped to Tailwind and in use. */
   --bg-basic-red-subtle: #fae3e3;
   --bg-basic-red-accent: #e74341;
   --bg-basic-red-contrast: #77221f;
@@ -13974,7 +13978,7 @@ video {
   --bg-basic-green-contrast: #265330;
   --bg-basic-emerald-subtle: #d9f9e6;
   --bg-basic-emerald-accent: #44ba82;
-  --bg-basic-emerlad-contrast: #1e4e3c;
+  --bg-basic-emerald-contrast: #1e4e3c;
   --bg-basic-teal-subtle: #d5faf2;
   --bg-basic-teal-accent: #44b8a7;
   --bg-basic-teal-contrast: #234e4a;
@@ -14158,6 +14162,7 @@ video {
   --text-dark-muted: #6f6f77;
   --text-dark-hint: rgba(39, 39, 42, 0.35);
   --text-destructive: #ed6664;
+  --text-primary: #65a0fd;
   --text-informative: #65a0fd;
   --text-success: #66dc7e;
   --text-warning: #f38f36;
@@ -14267,7 +14272,7 @@ video {
   --bg-basic-green-contrast: #e2fbe8;
   --bg-basic-emerald-subtle: #1e4e3c;
   --bg-basic-emerald-accent: #44ba82;
-  --bg-basic-emerlad-contrast: #d9f9e6;
+  --bg-basic-emerald-contrast: #d9f9e6;
   --bg-basic-teal-subtle: #234e4a;
   --bg-basic-teal-accent: #44b8a7;
   --bg-basic-teal-contrast: #d5faf2;
@@ -14396,6 +14401,7 @@ video {
   --chart-3: 46 84.8% 49%;
   --chart-4: 350 81.2% 58.2%;
   --chart-5: 193 65.7% 54.3%;
+  /* Sidebar vars verified 2026-04-14 — Theme-2 uses warm neutral palette (hue ~26-30°) */
   /* Sidebar */
   --sidebar-background: 0 0% 100%;
   --sidebar-foreground: 30 9.1% 12.9%;
@@ -14445,6 +14451,7 @@ video {
   --text-dark-muted: #79716b;
   --text-dark-hint: rgba(39, 39, 42, 0.35);
   --text-destructive: #d91a45;
+  --text-primary: #f27313;
   --text-informative: #e35706;
   --text-success: #35966a;
   --text-warning: #c68b0b;
@@ -14486,9 +14493,9 @@ video {
   --bg-muted: #f5f5f4;
   --bg-card: #ffffff;
   --bg-inverted: #24211e;
-  --bg-state-primary: #c05621;
-  --bg-state-primary-hover: #d1692c;
-  --bg-state-primary-press: #c05621;
+  --bg-state-primary: #f27313;
+  --bg-state-primary-hover: #f38f36;
+  --bg-state-primary-press: #f27313;
   --bg-state-disabled: rgba(39, 39, 42, 0.08);
   --bg-state-secondary: #ffffff;
   --bg-state-secondary-hover: #fafaf9;
@@ -14554,7 +14561,7 @@ video {
   --bg-basic-green-contrast: #265330;
   --bg-basic-emerald-subtle: #d9f9e6;
   --bg-basic-emerald-accent: #44ba82;
-  --bg-basic-emerlad-contrast: #1e4e3c;
+  --bg-basic-emerald-contrast: #1e4e3c;
   --bg-basic-teal-subtle: #d5faf2;
   --bg-basic-teal-accent: #44b8a7;
   --bg-basic-teal-contrast: #234e4a;
@@ -14732,6 +14739,7 @@ video {
   --text-dark-muted: #79716b;
   --text-dark-hint: rgba(39, 39, 42, 0.35);
   --text-destructive: #f16e81;
+  --text-primary: #f38f36;
   --text-informative: #f38f36;
   --text-success: #56d197;
   --text-warning: #f5ca0f;
@@ -14773,9 +14781,9 @@ video {
   --bg-muted: #0c0a09;
   --bg-card: #301108;
   --bg-inverted: #ffffff;
-  --bg-state-primary: #c04b05;
-  --bg-state-primary-hover: #d15a06;
-  --bg-state-primary-press: #c04b05;
+  --bg-state-primary: #e35706;
+  --bg-state-primary-hover: #f27313;
+  --bg-state-primary-press: #e35706;
   --bg-state-disabled: rgba(255, 255, 255, 0.08);
   --bg-state-secondary: rgba(255, 255, 255, 0.04);
   --bg-state-secondary-hover: rgba(255, 255, 255, 0.08);
@@ -14841,7 +14849,7 @@ video {
   --bg-basic-green-contrast: #e2fbe8;
   --bg-basic-emerald-subtle: #1e4e3c;
   --bg-basic-emerald-accent: #44ba82;
-  --bg-basic-emerlad-contrast: #d9f9e6;
+  --bg-basic-emerald-contrast: #d9f9e6;
   --bg-basic-teal-subtle: #234e4a;
   --bg-basic-teal-accent: #44b8a7;
   --bg-basic-teal-contrast: #d5faf2;
@@ -15430,6 +15438,10 @@ body {
   margin-top: 1.5rem;
 }
 
+.mt-sui-24 {
+  margin-top: var(--spacing-24);
+}
+
 .mt-sui-8 {
   margin-top: var(--spacing-8);
 }
@@ -16902,6 +16914,10 @@ body {
   border-radius: var(--radius-2xs);
 }
 
+.rounded-3xl {
+  border-radius: var(--radius-3xl);
+}
+
 .rounded-\[12px\] {
   border-radius: 12px;
 }
@@ -16914,10 +16930,18 @@ body {
   border-radius: inherit;
 }
 
+.rounded-card-lg {
+  border-radius: var(--radius-card-lg);
+}
+
 .rounded-card-md {
   border-radius: var(--radius-card-md);
 }
 
+.rounded-card-none {
+  border-radius: var(--radius-card-none);
+}
+
 .rounded-card-sm {
   border-radius: var(--radius-card-sm);
 }
@@ -17073,10 +17097,22 @@ body {
   border-color: var(--border-accent);
 }
 
+.border-sui-border-accent-inverted {
+  border-color: var(--border-accent-inverted);
+}
+
+.border-sui-border-amber {
+  border-color: var(--border-amber);
+}
+
 .border-sui-border-blue {
   border-color: var(--border-blue);
 }
 
+.border-sui-border-cyan {
+  border-color: var(--border-cyan);
+}
+
 .border-sui-border-darker {
   border-color: var(--border-darker);
 }
@@ -17089,22 +17125,98 @@ body {
   border-color: var(--border-destructive);
 }
 
+.border-sui-border-emerald {
+  border-color: var(--border-emerald);
+}
+
+.border-sui-border-fuchsia {
+  border-color: var(--border-fuchsia);
+}
+
+.border-sui-border-green {
+  border-color: var(--border-green);
+}
+
+.border-sui-border-highlight {
+  border-color: var(--border-highlight);
+}
+
+.border-sui-border-highlight-destructive {
+  border-color: var(--border-highlight-destructive);
+}
+
+.border-sui-border-indigo {
+  border-color: var(--border-indigo);
+}
+
 .border-sui-border-informative {
   border-color: var(--border-informative);
 }
 
+.border-sui-border-input-highlight {
+  border-color: var(--border-input-highlight);
+}
+
+.border-sui-border-inverted {
+  border-color: var(--border-inverted);
+}
+
+.border-sui-border-lime {
+  border-color: var(--border-lime);
+}
+
+.border-sui-border-orange {
+  border-color: var(--border-orange);
+}
+
 .border-sui-border-pink {
   border-color: var(--border-pink);
 }
 
+.border-sui-border-purple {
+  border-color: var(--border-purple);
+}
+
+.border-sui-border-red {
+  border-color: var(--border-red);
+}
+
+.border-sui-border-rose {
+  border-color: var(--border-rose);
+}
+
+.border-sui-border-sky {
+  border-color: var(--border-sky);
+}
+
+.border-sui-border-strong {
+  border-color: var(--border-strong);
+}
+
 .border-sui-border-success {
   border-color: var(--border-success);
 }
 
+.border-sui-border-teal {
+  border-color: var(--border-teal);
+}
+
+.border-sui-border-violet {
+  border-color: var(--border-violet);
+}
+
 .border-sui-border-warning {
   border-color: var(--border-warning);
 }
 
+.border-sui-border-white {
+  border-color: var(--border-white);
+}
+
+.border-sui-border-yellow {
+  border-color: var(--border-yellow);
+}
+
 .border-transparent {
   border-color: transparent;
 }
@@ -17171,6 +17283,10 @@ body {
   background-color: hsl(var(--card));
 }
 
+.bg-destructive {
+  background-color: hsl(var(--destructive));
+}
+
 .bg-emerald-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -17201,6 +17317,10 @@ body {
   background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
 }
 
+.bg-muted {
+  background-color: hsl(var(--muted));
+}
+
 .bg-primary {
   background-color: hsl(var(--primary));
 }
@@ -17215,6 +17335,10 @@ body {
   background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
 }
 
+.bg-secondary {
+  background-color: hsl(var(--secondary));
+}
+
 .bg-sidebar {
   background-color: hsl(var(--sidebar-background));
 }
@@ -17223,6 +17347,10 @@ body {
   background-color: hsl(var(--sidebar-border));
 }
 
+.bg-sui-bg-badge-amber {
+  background-color: var(--bg-badge-amber);
+}
+
 .bg-sui-bg-badge-blue {
   background-color: var(--bg-badge-blue);
 }
@@ -17235,6 +17363,10 @@ body {
   background-color: var(--bg-badge-default);
 }
 
+.bg-sui-bg-badge-emerald {
+  background-color: var(--bg-badge-emerald);
+}
+
 .bg-sui-bg-badge-fuchsia {
   background-color: var(--bg-badge-fuchsia);
 }
@@ -17247,6 +17379,14 @@ body {
   background-color: var(--bg-badge-green);
 }
 
+.bg-sui-bg-badge-indigo {
+  background-color: var(--bg-badge-indigo);
+}
+
+.bg-sui-bg-badge-inverted {
+  background-color: var(--bg-badge-inverted);
+}
+
 .bg-sui-bg-badge-lime {
   background-color: var(--bg-badge-lime);
 }
@@ -17259,14 +17399,38 @@ body {
   background-color: var(--bg-badge-pink);
 }
 
+.bg-sui-bg-badge-purple {
+  background-color: var(--bg-badge-purple);
+}
+
 .bg-sui-bg-badge-red {
   background-color: var(--bg-badge-red);
 }
 
+.bg-sui-bg-badge-rose {
+  background-color: var(--bg-badge-rose);
+}
+
+.bg-sui-bg-badge-sky {
+  background-color: var(--bg-badge-sky);
+}
+
+.bg-sui-bg-badge-teal {
+  background-color: var(--bg-badge-teal);
+}
+
 .bg-sui-bg-badge-violet {
   background-color: var(--bg-badge-violet);
 }
 
+.bg-sui-bg-badge-white {
+  background-color: var(--bg-badge-white);
+}
+
+.bg-sui-bg-badge-yellow {
+  background-color: var(--bg-badge-yellow);
+}
+
 .bg-sui-bg-basic-amber-accent {
   background-color: var(--bg-basic-amber-accent);
 }
@@ -17423,6 +17587,18 @@ body {
   background-color: var(--bg-muted);
 }
 
+.bg-sui-bg-overlay {
+  background-color: var(--bg-overlay);
+}
+
+.bg-sui-bg-sidebar {
+  background-color: var(--bg-sidebar);
+}
+
+.bg-sui-bg-sidebar-subtle {
+  background-color: var(--bg-sidebar-subtle);
+}
+
 .bg-sui-bg-state-brand {
   background-color: var(--bg-state-brand);
 }
@@ -17431,10 +17607,18 @@ body {
   background-color: var(--bg-state-destructive);
 }
 
+.bg-sui-bg-state-destructive-hover {
+  background-color: var(--bg-state-destructive-hover);
+}
+
 .bg-sui-bg-state-destructive-loading {
   background-color: var(--bg-state-destructive-loading);
 }
 
+.bg-sui-bg-state-destructive-press {
+  background-color: var(--bg-state-destructive-press);
+}
+
 .bg-sui-bg-state-disabled {
   background-color: var(--bg-state-disabled);
 }
@@ -17451,14 +17635,26 @@ body {
   background-color: var(--bg-state-ghost-loading);
 }
 
+.bg-sui-bg-state-gray {
+  background-color: var(--bg-state-gray);
+}
+
 .bg-sui-bg-state-primary {
   background-color: var(--bg-state-primary);
 }
 
+.bg-sui-bg-state-primary-hover {
+  background-color: var(--bg-state-primary-hover);
+}
+
 .bg-sui-bg-state-primary-loading {
   background-color: var(--bg-state-primary-loading);
 }
 
+.bg-sui-bg-state-primary-press {
+  background-color: var(--bg-state-primary-press);
+}
+
 .bg-sui-bg-state-secondary {
   background-color: var(--bg-state-secondary);
 }
@@ -17475,6 +17671,10 @@ body {
   background-color: var(--bg-state-soft);
 }
 
+.bg-sui-bg-state-soft-hover {
+  background-color: var(--bg-state-soft-hover);
+}
+
 .bg-sui-bg-state-soft-loading {
   background-color: var(--bg-state-soft-loading);
 }
@@ -18172,6 +18372,16 @@ body {
   line-height: var(--leading-13);
 }
 
+.text-8xl {
+  font-size: var(--font-size-8xl);
+  line-height: var(--leading-14);
+}
+
+.text-9xl {
+  font-size: var(--font-size-9xl);
+  line-height: var(--leading-15);
+}
+
 .text-\[0\.875em\] {
   font-size: 0.875em;
 }
@@ -18222,10 +18432,22 @@ body {
   line-height: var(--leading-4);
 }
 
+.font-black {
+  font-weight: var(--font-weight-black);
+}
+
 .font-bold {
   font-weight: var(--font-weight-bold);
 }
 
+.font-extrabold {
+  font-weight: var(--font-weight-extrabold);
+}
+
+.font-light {
+  font-weight: var(--font-weight-light);
+}
+
 .font-medium {
   font-weight: var(--font-weight-medium);
 }
@@ -18259,6 +18481,34 @@ body {
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
+.leading-10 {
+  line-height: var(--leading-10);
+}
+
+.leading-11 {
+  line-height: var(--leading-11);
+}
+
+.leading-12 {
+  line-height: var(--leading-12);
+}
+
+.leading-13 {
+  line-height: var(--leading-13);
+}
+
+.leading-14 {
+  line-height: var(--leading-14);
+}
+
+.leading-15 {
+  line-height: var(--leading-15);
+}
+
+.leading-3 {
+  line-height: var(--leading-3);
+}
+
 .leading-4 {
   line-height: var(--leading-4);
 }
@@ -18275,6 +18525,10 @@ body {
   line-height: var(--leading-7);
 }
 
+.leading-8 {
+  line-height: var(--leading-8);
+}
+
 .leading-9 {
   line-height: var(--leading-9);
 }
@@ -18333,6 +18587,22 @@ body {
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
 
+.text-icon-black-default {
+  color: var(--icon-black-default);
+}
+
+.text-icon-black-disabled {
+  color: var(--icon-black-disabled);
+}
+
+.text-icon-black-muted {
+  color: var(--icon-black-muted);
+}
+
+.text-icon-black-subtle {
+  color: var(--icon-black-subtle);
+}
+
 .text-icon-default {
   color: var(--icon-default);
 }
@@ -18361,6 +18631,18 @@ body {
   color: var(--icon-inverted-default);
 }
 
+.text-icon-inverted-disabled {
+  color: var(--icon-inverted-disabled);
+}
+
+.text-icon-inverted-muted {
+  color: var(--icon-inverted-muted);
+}
+
+.text-icon-inverted-subtle {
+  color: var(--icon-inverted-subtle);
+}
+
 .text-icon-success {
   color: var(--icon-success);
 }
@@ -18373,6 +18655,18 @@ body {
   color: var(--icon-white-default);
 }
 
+.text-icon-white-disabled {
+  color: var(--icon-white-disabled);
+}
+
+.text-icon-white-muted {
+  color: var(--icon-white-muted);
+}
+
+.text-icon-white-subtle {
+  color: var(--icon-white-subtle);
+}
+
 .text-informative {
   color: hsl(var(--informative));
 }
@@ -18441,6 +18735,22 @@ body {
   color: var(--bg-basic-violet-strong);
 }
 
+.text-sui-text-dark-default {
+  color: var(--text-dark-default);
+}
+
+.text-sui-text-dark-hint {
+  color: var(--text-dark-hint);
+}
+
+.text-sui-text-dark-muted {
+  color: var(--text-dark-muted);
+}
+
+.text-sui-text-dark-subtle {
+  color: var(--text-dark-subtle);
+}
+
 .text-sui-text-default {
   color: var(--text-default);
 }
@@ -18461,10 +18771,26 @@ body {
   color: var(--text-inverted-default);
 }
 
+.text-sui-text-inverted-hint {
+  color: var(--text-inverted-hint);
+}
+
+.text-sui-text-inverted-muted {
+  color: var(--text-inverted-muted);
+}
+
+.text-sui-text-inverted-subtle {
+  color: var(--text-inverted-subtle);
+}
+
 .text-sui-text-muted {
   color: var(--text-muted);
 }
 
+.text-sui-text-primary {
+  color: var(--text-primary);
+}
+
 .text-sui-text-subtle {
   color: var(--text-subtle);
 }
@@ -18481,6 +18807,14 @@ body {
   color: var(--text-white-default);
 }
 
+.text-sui-text-white-hint {
+  color: var(--text-white-hint);
+}
+
+.text-sui-text-white-muted {
+  color: var(--text-white-muted);
+}
+
 .text-sui-text-white-subtle {
   color: var(--text-white-subtle);
 }
@@ -18573,12 +18907,24 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-button-press {
+  --tw-shadow: inset 0px 2px 0px rgba(0,0,0,0.20);
+  --tw-shadow-colored: inset 0px 2px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-button-secondary {
   --tw-shadow: 0px 1px 2px rgba(0,0,0,0.06), inset 0px -1px 0px rgba(0,0,0,0.08);
   --tw-shadow-colored: 0px 1px 2px var(--tw-shadow-color), inset 0px -1px 0px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-button-secondary-press {
+  --tw-shadow: inset 0px 1px 0px rgba(0,0,0,0.08);
+  --tw-shadow-colored: inset 0px 1px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-card {
   --tw-shadow: var(--shadow-card);
   --tw-shadow-colored: var(--shadow-card);
@@ -18609,6 +18955,24 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-destructive-focus {
+  --tw-shadow: var(--shadow-destructive-focus);
+  --tw-shadow-colored: var(--shadow-destructive-focus);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-focus {
+  --tw-shadow: var(--shadow-focus);
+  --tw-shadow-colored: var(--shadow-focus);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-input-focus {
+  --tw-shadow: var(--shadow-input-focus);
+  --tw-shadow-colored: var(--shadow-input-focus);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-inset-bottom {
   --tw-shadow: var(--shadow-inset-bottom);
   --tw-shadow-colored: var(--shadow-inset-bottom);
@@ -18633,6 +18997,30 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-misc-focus {
+  --tw-shadow: var(--shadow-misc-focus);
+  --tw-shadow-colored: var(--shadow-misc-focus);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-modal-lg {
+  --tw-shadow: var(--shadow-modal-lg);
+  --tw-shadow-colored: var(--shadow-modal-lg);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-modal-md {
+  --tw-shadow: var(--shadow-modal-md);
+  --tw-shadow-colored: var(--shadow-modal-md);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-modal-sm {
   --tw-shadow: var(--shadow-modal-sm);
   --tw-shadow-colored: var(--shadow-modal-sm);
@@ -18651,12 +19039,29 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-switch-destructive {
+  --tw-shadow: var(--shadow-switch-destructive);
+  --tw-shadow-colored: var(--shadow-switch-destructive);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-switch-handle {
   --tw-shadow: var(--shadow-switch-handle);
   --tw-shadow-colored: var(--shadow-switch-handle);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-tab-active {
+  --tw-shadow: var(--shadow-tab-active);
+  --tw-shadow-colored: var(--shadow-tab-active);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-\[\2026\] {
+  --tw-shadow-color: …;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-card {
   --tw-shadow-color: hsl(var(--card));
   --tw-shadow: var(--tw-shadow-colored);
@@ -19272,18 +19677,10 @@ body {
   border-color: var(--border-strong);
 }
 
-.hover\:bg-\[color-mix\(in_srgb\2c \#fff_15\%\2c var\(--sb-bg\2c var\(--social-brand-default\)\)\)\]:hover {
-  background-color: color-mix(in srgb,#fff 15%,var(--sb-bg,var(--social-brand-default)));
-}
-
 .hover\:bg-sidebar-accent:hover {
   background-color: hsl(var(--sidebar-accent));
 }
 
-.hover\:bg-sui-bg-basic-blue-accent:hover {
-  background-color: var(--bg-basic-blue-accent);
-}
-
 .hover\:bg-sui-bg-basic-gray-alpha-2:hover {
   background-color: var(--bg-basic-gray-alpha-2);
 }
@@ -19296,10 +19693,6 @@ body {
   background-color: var(--bg-state-destructive-hover);
 }
 
-.hover\:bg-sui-bg-state-ghost:hover {
-  background-color: var(--bg-state-ghost);
-}
-
 .hover\:bg-sui-bg-state-ghost-hover:hover {
   background-color: var(--bg-state-ghost-hover);
 }
@@ -19308,10 +19701,6 @@ body {
   background-color: var(--bg-state-ghost-hover-inverted);
 }
 
-.hover\:bg-sui-bg-state-primary-hover:hover {
-  background-color: var(--bg-state-primary-hover);
-}
-
 .hover\:bg-sui-bg-state-secondary-hover:hover {
   background-color: var(--bg-state-secondary-hover);
 }
@@ -19332,10 +19721,6 @@ body {
   color: hsl(var(--sidebar-accent-foreground));
 }
 
-.hover\:text-sui-bg-basic-blue-strong:hover {
-  color: var(--bg-basic-blue-strong);
-}
-
 .hover\:text-sui-text-default:hover {
   color: var(--text-default);
 }
@@ -21446,6 +21831,56 @@ body {
   border-color: var(--border-default);
 }
 
+@media(hover:hover) {
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-\[color-mix\(in_srgb\2c \#fff_15\%\2c var\(--sb-bg\2c var\(--social-brand-default\)\)\)\]:hover {
+    background-color: color-mix(in srgb,#fff 15%,var(--sb-bg,var(--social-brand-default)));
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-basic-blue-accent:hover {
+    background-color: var(--bg-basic-blue-accent);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-destructive-hover:hover {
+    background-color: var(--bg-state-destructive-hover);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-ghost:hover {
+    background-color: var(--bg-state-ghost);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-ghost-hover:hover {
+    background-color: var(--bg-state-ghost-hover);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-primary-hover:hover {
+    background-color: var(--bg-state-primary-hover);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-secondary-hover:hover {
+    background-color: var(--bg-state-secondary-hover);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-soft-hover:hover {
+    background-color: var(--bg-state-soft-hover);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:text-sui-bg-basic-blue-strong:hover {
+    color: var(--bg-basic-blue-strong);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:text-sui-text-muted:hover {
+    color: var(--text-muted);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:text-sui-text-subtle:hover {
+    color: var(--text-subtle);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:\[\&_i\]\:text-icon-default-subtle i:hover {
+    color: var(--icon-default-subtle);
+  }
+}
+
 [data-disabled] .\[\[data-disabled\]_\&\]\:hidden {
   display: none;
 }