@maxsteinwender/sort-ui 1.0.7 → 1.1.0

package/dist/styles.css

@@ -13907,9 +13907,14 @@ video {
   --bg-muted: #f4f4f5;
   --bg-card: #ffffff;
   --bg-inverted: #18181b;
-  --bg-state-primary: #437dfc;
-  --bg-state-primary-hover: #65a0fd;
-  --bg-state-primary-press: #437dfc;
+  /* WCAG AA — primary states meet 4.5:1 against white text.
+       Was #437dfc (3.76:1) — failed AA. Tailwind blue-600/700/800. */
+  --bg-state-primary: #2563eb;
+  /* 5.05:1 */
+  --bg-state-primary-hover: #1d4ed8;
+  /* 6.85:1 — darker on hover */
+  --bg-state-primary-press: #1e40af;
+  /* 9.0:1 — darker on press */
   --bg-state-disabled: rgba(39, 39, 42, 0.08);
   --bg-state-secondary: #ffffff;
   --bg-state-secondary-hover: #fafafa;
@@ -14065,6 +14070,16 @@ video {
   --social-brand-linkedin: #0077B5;
   --social-brand-dribbble: #D95889;
   --social-brand-dropbox: #2860F5;
+  /* ===== Web Interface Guidelines — motion & interaction tokens ===== */
+  /* #22 Animation duration ≤ 200ms — soft enforced inside SortUI components */
+  --duration-fast: 100ms;
+  --duration-base: 150ms;
+  --duration-slow: 200ms;
+  /* #24 Button press scale — proportional to trigger size, never 1 → 0.8 */
+  --press-scale: 0.97;
+  /* #42 Focus ring — box-shadow based (respects border-radius) */
+  --focus-ring-width: 3px;
+  --focus-ring-offset: 1px;
 }
 
 /* ===== Sort UI Theme 1 — Dark ===== */
@@ -14204,9 +14219,14 @@ video {
   --bg-muted: #09090b;
   --bg-card: #222225;
   --bg-inverted: #ffffff;
+  /* WCAG AA — primary default already passed (5.30:1). Hover was #437dfc (3.76:1) — failed.
+       Switch to "darker on hover" pattern using Tailwind blue-700/800. */
   --bg-state-primary: #2b5df3;
-  --bg-state-primary-hover: #437dfc;
-  --bg-state-primary-press: #2b5df3;
+  /* 5.30:1 — kept */
+  --bg-state-primary-hover: #1d4ed8;
+  /* 6.85:1 — darker on hover */
+  --bg-state-primary-press: #1e40af;
+  /* 9.0:1 — darker on press */
   --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);
@@ -14493,9 +14513,14 @@ video {
   --bg-muted: #f5f5f4;
   --bg-card: #ffffff;
   --bg-inverted: #24211e;
-  --bg-state-primary: #f27313;
-  --bg-state-primary-hover: #f38f36;
-  --bg-state-primary-press: #f27313;
+  /* WCAG AA — primary states meet 4.5:1 against white text.
+       Was #f27313 (2.90:1) — critical fail. Tailwind orange-700/800/900. */
+  --bg-state-primary: #c2410c;
+  /* 6.50:1 */
+  --bg-state-primary-hover: #9a3412;
+  /* 8.50:1 — darker on hover */
+  --bg-state-primary-press: #7c2d12;
+  /* 11.0:1 — darker on press */
   --bg-state-disabled: rgba(39, 39, 42, 0.08);
   --bg-state-secondary: #ffffff;
   --bg-state-secondary-hover: #fafaf9;
@@ -14781,9 +14806,14 @@ video {
   --bg-muted: #0c0a09;
   --bg-card: #301108;
   --bg-inverted: #ffffff;
-  --bg-state-primary: #e35706;
-  --bg-state-primary-hover: #f27313;
-  --bg-state-primary-press: #e35706;
+  /* WCAG AA — primary states meet 4.5:1 against white text.
+       Was #e35706 (3.73:1) — failed AA. Tailwind orange-700/800/900. */
+  --bg-state-primary: #c2410c;
+  /* 6.50:1 */
+  --bg-state-primary-hover: #9a3412;
+  /* 8.50:1 — darker on hover */
+  --bg-state-primary-press: #7c2d12;
+  /* 11.0:1 — darker on press */
   --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);
@@ -14949,14 +14979,81 @@ video {
 
 /* ===== Sort UI Radius Mode — None ===== */
 
+/* Web Interface Guidelines — base defaults
+     Source: interfaces.rauno.me / web-interface-guidelines.md */
+
 * {
   border-color: hsl(var(--border));
+  /* #33 Disable iOS tap highlight — replaced by focus-visible:shadow-focus on interactive elements */
+  -webkit-tap-highlight-color: transparent;
+}
+
+html {
+  /* #20 Prevent unexpected text resizing in landscape on iOS */
+  -webkit-text-size-adjust: 100%;
+  /* #27 Smooth scroll for in-page anchors */
+  scroll-behavior: smooth;
 }
 
 body {
   background-color: hsl(var(--background));
   font-family: var(--font-body), system-ui, sans-serif;
   color: hsl(var(--foreground));
+  /* #12 #13 Better typography rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* #55 Document selection styling */
+
+::-moz-selection {
+  background-color: hsl(var(--primary) / 0.18);
+  color: hsl(var(--foreground));
+  /* #51 Reset gradient text on selection so highlighted state is readable */
+  -webkit-text-fill-color: hsl(var(--foreground));
+  background-clip: initial;
+  -webkit-background-clip: initial;
+}
+
+::selection {
+  background-color: hsl(var(--primary) / 0.18);
+  color: hsl(var(--foreground));
+  /* #51 Reset gradient text on selection so highlighted state is readable */
+  -webkit-text-fill-color: hsl(var(--foreground));
+  background-clip: initial;
+  -webkit-background-clip: initial;
+}
+
+/* #9 Disable user-select on interactive element inner content */
+
+button,
+  [role="button"],
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  [role="tab"],
+  [role="option"],
+  [role="checkbox"],
+  [role="radio"],
+  [role="switch"],
+  summary {
+  -moz-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Honor user's reduced-motion preference */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+    *::before,
+    *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
 .container {
@@ -16493,6 +16590,12 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-press {
+  --tw-scale-x: var(--press-scale);
+  --tw-scale-y: var(--press-scale);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -18895,12 +18998,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-\[inset_0px_-1px_0px_0px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
-  --tw-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.1);
-  --tw-shadow-colored: inset 0px -1px 0px 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-default {
   --tw-shadow: 0px 1px 2px rgba(0,0,0,0.08), inset 0px -2px 0px rgba(0,0,0,0.20);
   --tw-shadow-colored: 0px 1px 2px var(--tw-shadow-color), inset 0px -2px 0px var(--tw-shadow-color);
@@ -19130,6 +19227,11 @@ body {
   --tw-ring-offset-color: var(--bg-default);
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -19226,6 +19328,18 @@ body {
   transition-duration: 300ms;
 }
 
+.duration-base {
+  transition-duration: var(--duration-base);
+}
+
+.duration-fast {
+  transition-duration: var(--duration-fast);
+}
+
+.duration-slow {
+  transition-duration: var(--duration-slow);
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -19286,6 +19400,18 @@ body {
   animation-duration: 300ms;
 }
 
+.duration-base {
+  animation-duration: var(--duration-base);
+}
+
+.duration-fast {
+  animation-duration: var(--duration-fast);
+}
+
+.duration-slow {
+  animation-duration: var(--duration-slow);
+}
+
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -19661,101 +19787,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:cursor-pointer:hover {
-  cursor: pointer;
-}
-
-.hover\:border-sui-border-darker:hover {
-  border-color: var(--border-darker);
-}
-
-.hover\:border-sui-border-default:hover {
-  border-color: var(--border-default);
-}
-
-.hover\:border-sui-border-strong:hover {
-  border-color: var(--border-strong);
-}
-
-.hover\:bg-sidebar-accent:hover {
-  background-color: hsl(var(--sidebar-accent));
-}
-
-.hover\:bg-sui-bg-basic-gray-alpha-2:hover {
-  background-color: var(--bg-basic-gray-alpha-2);
-}
-
-.hover\:bg-sui-bg-input-soft:hover {
-  background-color: var(--bg-input-soft);
-}
-
-.hover\:bg-sui-bg-state-destructive-hover:hover {
-  background-color: var(--bg-state-destructive-hover);
-}
-
-.hover\:bg-sui-bg-state-ghost-hover:hover {
-  background-color: var(--bg-state-ghost-hover);
-}
-
-.hover\:bg-sui-bg-state-ghost-hover-inverted:hover {
-  background-color: var(--bg-state-ghost-hover-inverted);
-}
-
-.hover\:bg-sui-bg-state-secondary-hover:hover {
-  background-color: var(--bg-state-secondary-hover);
-}
-
-.hover\:bg-sui-bg-state-soft-hover:hover {
-  background-color: var(--bg-state-soft-hover);
-}
-
-.hover\:bg-sui-border-highlight:hover {
-  background-color: var(--border-highlight);
-}
-
-.hover\:text-icon-default-subtle:hover {
-  color: var(--icon-default-subtle);
-}
-
-.hover\:text-sidebar-accent-foreground:hover {
-  color: hsl(var(--sidebar-accent-foreground));
-}
-
-.hover\:text-sui-text-default:hover {
-  color: var(--text-default);
-}
-
-.hover\:text-sui-text-informative:hover {
-  color: var(--text-informative);
-}
-
-.hover\:text-sui-text-muted:hover {
-  color: var(--text-muted);
-}
-
-.hover\:text-sui-text-subtle:hover {
-  color: var(--text-subtle);
-}
-
-.hover\:underline:hover {
-  text-decoration-line: underline;
-}
-
-.hover\:opacity-100:hover {
-  opacity: 1;
-}
-
-.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
-  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
-  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.hover\:after\:bg-sidebar-border:hover::after {
-  content: var(--tw-content);
-  background-color: hsl(var(--sidebar-border));
-}
-
 .focus\:bg-sui-bg-state-ghost-hover:focus {
   background-color: var(--bg-state-ghost-hover);
 }
@@ -19834,34 +19865,6 @@ body {
   outline-style: solid;
 }
 
-.focus-visible\:outline-2:focus-visible {
-  outline-width: 2px;
-}
-
-.focus-visible\:outline-\[3px\]:focus-visible {
-  outline-width: 3px;
-}
-
-.focus-visible\:outline-offset-2:focus-visible {
-  outline-offset: 2px;
-}
-
-.focus-visible\:outline-offset-\[1px\]:focus-visible {
-  outline-offset: 1px;
-}
-
-.focus-visible\:outline-\[var\(--border-informative\)\]:focus-visible {
-  outline-color: var(--border-informative);
-}
-
-.focus-visible\:outline-ring:focus-visible {
-  outline-color: hsl(var(--ring));
-}
-
-.focus-visible\:outline-sui-border-highlight:focus-visible {
-  outline-color: var(--border-highlight);
-}
-
 .focus-visible\:ring-0:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -19884,6 +19887,10 @@ body {
   --tw-ring-inset: inset;
 }
 
+.focus-visible\:ring-\[var\(--border-informative\)\]:focus-visible {
+  --tw-ring-color: var(--border-informative);
+}
+
 .focus-visible\:ring-sidebar-ring:focus-visible {
   --tw-ring-color: hsl(var(--sidebar-ring));
 }
@@ -19908,14 +19915,16 @@ body {
   --tw-ring-offset-width: 1px;
 }
 
-.focus-visible\:ring-offset-background:focus-visible {
-  --tw-ring-offset-color: hsl(var(--background));
-}
-
 .focus-visible\:ring-offset-sui-bg-default:focus-visible {
   --tw-ring-offset-color: var(--bg-default);
 }
 
+.active\:scale-press:active {
+  --tw-scale-x: var(--press-scale);
+  --tw-scale-y: var(--press-scale);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .active\:cursor-grabbing:active {
   cursor: grabbing;
 }
@@ -20121,14 +20130,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.group.destructive .group-\[\.destructive\]\:hover\:bg-sui-bg-state-destructive:hover {
-  background-color: var(--bg-state-destructive);
-}
-
-.group.destructive .group-\[\.destructive\]\:hover\:text-sui-text-white-default:hover {
-  color: var(--text-white-default);
-}
-
 .group.destructive .group-\[\.destructive\]\:focus\:ring-sui-border-highlight:focus {
   --tw-ring-color: var(--border-highlight);
 }
@@ -20762,54 +20763,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:data-\[state\=checked\]\:border-sui-bg-checkbox-active-hover[data-state="checked"]:hover {
-  border-color: var(--bg-checkbox-active-hover);
-}
-
-.hover\:data-\[state\=indeterminate\]\:border-sui-bg-checkbox-active-hover[data-state="indeterminate"]:hover {
-  border-color: var(--bg-checkbox-active-hover);
-}
-
-.hover\:data-\[state\=unchecked\]\:border-sui-border-strong[data-state="unchecked"]:hover {
-  border-color: var(--border-strong);
-}
-
-.data-\[range-middle\=true\]\:hover\:bg-sui-bg-state-soft-hover:hover[data-range-middle="true"] {
-  background-color: var(--bg-state-soft-hover);
-}
-
-.data-\[selected-single\=true\]\:hover\:bg-sui-bg-state-brand-hover:hover[data-selected-single="true"] {
-  background-color: var(--bg-state-brand-hover);
-}
-
-.data-\[state\=checked\]\:hover\:bg-sui-bg-switch-active-hover:hover[data-state="checked"] {
-  background-color: var(--bg-switch-active-hover);
-}
-
-.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
-  background-color: hsl(var(--sidebar-accent));
-}
-
-.data-\[state\=open\]\:hover\:bg-sui-bg-state-secondary-hover:hover[data-state="open"] {
-  background-color: var(--bg-state-secondary-hover);
-}
-
-.data-\[state\=unchecked\]\:hover\:bg-sui-bg-switch-default-hover:hover[data-state="unchecked"] {
-  background-color: var(--bg-switch-default-hover);
-}
-
-.hover\:data-\[state\=checked\]\:bg-sui-bg-checkbox-active-hover[data-state="checked"]:hover {
-  background-color: var(--bg-checkbox-active-hover);
-}
-
-.hover\:data-\[state\=indeterminate\]\:bg-sui-bg-checkbox-active-hover[data-state="indeterminate"]:hover {
-  background-color: var(--bg-checkbox-active-hover);
-}
-
-.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
-  color: hsl(var(--sidebar-accent-foreground));
-}
-
 .disabled\:data-\[state\=checked\]\:border-sui-border-default[data-state="checked"]:disabled {
   border-color: var(--border-default);
 }
@@ -21020,10 +20973,6 @@ body {
   left: 100%;
 }
 
-.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:hover {
-  background-color: hsl(var(--sidebar-background));
-}
-
 .peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
   top: 0.375rem;
 }
@@ -21682,10 +21631,6 @@ body {
   text-shadow: none;
 }
 
-.hover\:\[\&_i\]\:text-icon-default-subtle i:hover {
-  color: var(--icon-default-subtle);
-}
-
 .active\:\[\&_i\]\:text-icon-default-subtle i:active {
   color: var(--icon-default-subtle);
 }
@@ -21791,10 +21736,6 @@ body {
   text-shadow: none;
 }
 
-.hover\:\[\&_svg\]\:text-icon-default-subtle svg:hover {
-  color: var(--icon-default-subtle);
-}
-
 .active\:\[\&_svg\]\:text-icon-default-subtle svg:active {
   color: var(--icon-default-subtle);
 }
@@ -21832,14 +21773,42 @@ body {
 }
 
 @media(hover:hover) {
+  .\[\@media\(hover\:hover\)\]\:hover\:cursor-pointer:hover {
+    cursor: pointer;
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:border-sui-border-darker:hover {
+    border-color: var(--border-darker);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:border-sui-border-default:hover {
+    border-color: var(--border-default);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:border-sui-border-strong:hover {
+    border-color: var(--border-strong);
+  }
+
   .\[\@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-sidebar-accent:hover {
+    background-color: hsl(var(--sidebar-accent));
+  }
+
   .\[\@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-basic-gray-alpha-2:hover {
+    background-color: var(--bg-basic-gray-alpha-2);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-input-soft:hover {
+    background-color: var(--bg-input-soft);
+  }
+
   .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-destructive-hover:hover {
     background-color: var(--bg-state-destructive-hover);
   }
@@ -21852,6 +21821,10 @@ body {
     background-color: var(--bg-state-ghost-hover);
   }
 
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-ghost-hover-inverted:hover {
+    background-color: var(--bg-state-ghost-hover-inverted);
+  }
+
   .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-primary-hover:hover {
     background-color: var(--bg-state-primary-hover);
   }
@@ -21864,10 +21837,30 @@ body {
     background-color: var(--bg-state-soft-hover);
   }
 
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-border-highlight:hover {
+    background-color: var(--border-highlight);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:text-icon-default-subtle:hover {
+    color: var(--icon-default-subtle);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:text-sidebar-accent-foreground:hover {
+    color: hsl(var(--sidebar-accent-foreground));
+  }
+
   .\[\@media\(hover\:hover\)\]\:hover\:text-sui-bg-basic-blue-strong:hover {
     color: var(--bg-basic-blue-strong);
   }
 
+  .\[\@media\(hover\:hover\)\]\:hover\:text-sui-text-default:hover {
+    color: var(--text-default);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:text-sui-text-informative:hover {
+    color: var(--text-informative);
+  }
+
   .\[\@media\(hover\:hover\)\]\:hover\:text-sui-text-muted:hover {
     color: var(--text-muted);
   }
@@ -21876,9 +21869,98 @@ body {
     color: var(--text-subtle);
   }
 
+  .\[\@media\(hover\:hover\)\]\:hover\:underline:hover {
+    text-decoration-line: underline;
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:opacity-100:hover {
+    opacity: 1;
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
+    --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
+    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:shadow-modal-sm:hover {
+    --tw-shadow: var(--shadow-modal-sm);
+    --tw-shadow-colored: var(--shadow-modal-sm);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:after\:bg-sidebar-border:hover::after {
+    content: var(--tw-content);
+    background-color: hsl(var(--sidebar-border));
+  }
+
+  .group.destructive .group-\[\.destructive\]\:\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-destructive:hover {
+    background-color: var(--bg-state-destructive);
+  }
+
+  .group.destructive .group-\[\.destructive\]\:\[\@media\(hover\:hover\)\]\:hover\:text-sui-text-white-default:hover {
+    color: var(--text-white-default);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:data-\[state\=checked\]\:border-sui-bg-checkbox-active-hover[data-state="checked"]:hover {
+    border-color: var(--bg-checkbox-active-hover);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:data-\[state\=indeterminate\]\:border-sui-bg-checkbox-active-hover[data-state="indeterminate"]:hover {
+    border-color: var(--bg-checkbox-active-hover);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:data-\[state\=unchecked\]\:border-sui-border-strong[data-state="unchecked"]:hover {
+    border-color: var(--border-strong);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:data-\[state\=checked\]\:bg-sui-bg-checkbox-active-hover[data-state="checked"]:hover {
+    background-color: var(--bg-checkbox-active-hover);
+  }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:data-\[state\=indeterminate\]\:bg-sui-bg-checkbox-active-hover[data-state="indeterminate"]:hover {
+    background-color: var(--bg-checkbox-active-hover);
+  }
+
+  .data-\[range-middle\=true\]\:\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-soft-hover:hover[data-range-middle="true"] {
+    background-color: var(--bg-state-soft-hover);
+  }
+
+  .data-\[selected-single\=true\]\:\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-brand-hover:hover[data-selected-single="true"] {
+    background-color: var(--bg-state-brand-hover);
+  }
+
+  .data-\[state\=checked\]\:\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-switch-active-hover:hover[data-state="checked"] {
+    background-color: var(--bg-switch-active-hover);
+  }
+
+  .data-\[state\=open\]\:\[\@media\(hover\:hover\)\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
+    background-color: hsl(var(--sidebar-accent));
+  }
+
+  .data-\[state\=open\]\:\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-state-secondary-hover:hover[data-state="open"] {
+    background-color: var(--bg-state-secondary-hover);
+  }
+
+  .data-\[state\=unchecked\]\:\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-switch-default-hover:hover[data-state="unchecked"] {
+    background-color: var(--bg-switch-default-hover);
+  }
+
+  .data-\[state\=open\]\:\[\@media\(hover\:hover\)\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
+    color: hsl(var(--sidebar-accent-foreground));
+  }
+
+  .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:\[\@media\(hover\:hover\)\]\:hover\:bg-sidebar:hover {
+    background-color: hsl(var(--sidebar-background));
+  }
+
   .\[\@media\(hover\:hover\)\]\:hover\:\[\&_i\]\:text-icon-default-subtle i:hover {
     color: var(--icon-default-subtle);
   }
+
+  .\[\@media\(hover\:hover\)\]\:hover\:\[\&_svg\]\:text-icon-default-subtle svg:hover {
+    color: var(--icon-default-subtle);
+  }
 }
 
 [data-disabled] .\[\[data-disabled\]_\&\]\:hidden {