@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/styles/recipes/range.css

@@ -8,6 +8,7 @@
     --cui-range-thumb-background: var(--background);
     --cui-range-thumb-border-color: var(--control-rim);
     --cui-range-thumb-shadow: var(--shadow-sm);
+    --cui-range-indeterminate-size: 40%;
     --_range-thumb-border-width: var(--control-rim-width);
   }
 
@@ -41,7 +42,7 @@
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="root"][data-variant="plain"]) {
     --cui-range-track-radius: 3px;
     --cui-range-track-background: var(--hover-fill);
-    --cui-range-indicator-radius: 0px;
+    --cui-range-indicator-radius: var(--cui-range-track-radius);
     --cui-range-indicator-background: oklch(from var(--foreground) l c h / 0.14);
     --cui-range-thumb-radius: 1px;
     --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.3);
@@ -94,19 +95,14 @@
     border-radius: var(--cui-range-thumb-radius);
     background: var(--cui-range-thumb-background);
     box-shadow: var(--cui-range-thumb-shadow);
-    outline: none;
     touch-action: pan-y;
     transition-property: scale, box-shadow, height, width;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }
 
-  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]:focus-visible) {
-    --cui-range-thumb-shadow: var(--shadow-sm);
-  }
-
   @media (hover: hover) and (pointer: fine) {
-    :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]:hover) {
+    :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]:hover:not([data-disabled])) {
       scale: 1.1;
     }
   }
@@ -121,13 +117,16 @@
     width: 0.125rem;
   }
 
-  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="plain"]:where(:hover, [data-dragging])) {
-    --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.5);
-    scale: 1;
+  @media (hover: hover) {
+    :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="plain"]:hover:not([data-disabled])) {
+      --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.5);
+      scale: 1;
+    }
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="plain"][data-dragging]) {
     --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.7);
+    scale: 1;
     height: 1.25rem;
   }
 
@@ -176,7 +175,7 @@
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="root"][data-disabled]) {
-    opacity: 50%;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="control"]) {
@@ -222,7 +221,7 @@
   :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="root"] [data-slot="tick"]) {
     inline-size: calc(var(--spacing) * 1.5);
     block-size: 1px;
-    left: 0;
+    inset-inline-start: 0;
   }
 
   :where(
@@ -239,6 +238,23 @@
     transition-timing-function: var(--ease-emphasized);
   }
 
+  :where([data-control-family="range"][data-range-kind="progress"][data-slot="indicator"][data-indeterminate]) {
+    inline-size: var(--cui-range-indeterminate-size);
+    animation: cui-range-indeterminate calc(var(--duration-loop) * 1.5) var(--ease-standard) infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-control-family="range"][data-range-kind="progress"][data-slot="indicator"][data-indeterminate]) {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+
+  :where([data-motion="reduced"] [data-control-family="range"][data-range-kind="progress"][data-slot="indicator"][data-indeterminate]) {
+    animation: none;
+    opacity: 0.6;
+  }
+
   :where([data-control-family="range"][data-range-kind="progress"][data-slot="value"]) {
     font-size: var(--text-label);
     color: var(--muted-foreground);
@@ -269,18 +285,38 @@
     color: var(--foreground);
   }
 
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"])::after {
+    content: "";
+    position: absolute;
+    inset: 50%;
+    translate: -50% -50%;
+    inline-size: max(100%, var(--target-min));
+    block-size: max(100%, var(--target-min));
+  }
+
   @media (pointer: coarse) {
-    :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="default"])::after {
-      content: "";
-      position: absolute;
-      inset: 50% 50%;
-      translate: -50% -50%;
-      inline-size: max(100%, 44px);
-      block-size: max(100%, 44px);
+    :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"])::after {
+      inline-size: max(100%, var(--touch-target));
+      block-size: max(100%, var(--touch-target));
     }
   }
 }
 
+@keyframes cui-range-indeterminate {
+  from {
+    margin-inline-start: calc(var(--cui-range-indeterminate-size) * -1);
+  }
+  to {
+    margin-inline-start: 100%;
+  }
+}
+
+@property --cui-range-indeterminate-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 40%;
+}
+
 @property --cui-range-track-radius {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/styles/recipes/resizable.css

@@ -3,7 +3,7 @@
     --cui-resizable-group-background: var(--card);
     --cui-resizable-group-radius: var(--radius-panel);
     --cui-resizable-group-border-color: var(--border);
-    --cui-resizable-group-border-width: 1px;
+    --cui-resizable-group-border-width: var(--control-rim-width);
     --cui-resizable-handle-color: var(--foreground);
     --cui-resizable-handle-hover-background: oklch(from var(--foreground) l c h / 0.25);
     --cui-resizable-handle-active-background: oklch(from var(--foreground) l c h / 0.4);
@@ -27,9 +27,42 @@
 
   :where([data-control-family="resizable"][data-slot="handle"]) {
     --_resizable-gradient-color: var(--cui-resizable-handle-color);
-    outline-style: none;
   }
 
+  :where([data-control-family="resizable"][data-slot="handle"][data-axis="vertical"]:not([data-cursor="none"])) {
+    cursor: col-resize;
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-axis="horizontal"]:not([data-cursor="none"])) {
+    cursor: row-resize;
+  }
+
+  /* biome-ignore-start lint/complexity/noImportantStyles: Resize drag cursor must beat every cursor under the pointer. */
+  :where(
+    :root:has(
+        [data-control-family="resizable"][data-slot="handle"][data-axis="vertical"]:not([data-cursor="none"]):is(
+            [data-separator="hover"],
+            [data-separator="active"]
+          )
+      )
+      *
+  ) {
+    cursor: col-resize !important;
+  }
+
+  :where(
+    :root:has(
+        [data-control-family="resizable"][data-slot="handle"][data-axis="horizontal"]:not([data-cursor="none"]):is(
+            [data-separator="hover"],
+            [data-separator="active"]
+          )
+      )
+      *
+  ) {
+    cursor: row-resize !important;
+  }
+  /* biome-ignore-end lint/complexity/noImportantStyles: Resize drag cursor must beat every cursor under the pointer. */
+
   :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"]) {
     background-color: var(--border);
   }
@@ -43,12 +76,8 @@
     background-color: var(--cui-resizable-handle-active-background);
   }
 
-  :where([data-control-family="resizable"][data-slot="handle"][data-separator="focus"]) {
-    box-shadow: 0 0 0 2px oklch(from var(--foreground) l c h / 0.2);
-  }
-
   :where([data-control-family="resizable"][data-slot="handle"][data-separator="disabled"]) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="resizable"][data-slot="handle"][data-variant="hover"])::before {

package/dist/styles/recipes/rich-tooltip.css

@@ -122,7 +122,7 @@
     --_rich-tooltip-content-progress-font-size: var(--_rich-tooltip-progress-font-size);
     --_rich-tooltip-progress-foreground: var(--muted-foreground);
     --_rich-tooltip-content-progress-foreground: var(--_rich-tooltip-progress-foreground);
-    --_rich-tooltip-title-font-size: var(--text-label);
+    --_rich-tooltip-title-font-size: var(--text-body);
     --_rich-tooltip-content-title-font-size: var(--_rich-tooltip-title-font-size);
     --_rich-tooltip-title-font-weight: var(--font-weight-semibold);
     --_rich-tooltip-content-title-font-weight: var(--_rich-tooltip-title-font-weight);
@@ -130,34 +130,24 @@
     --_rich-tooltip-content-title-line-height: var(--_rich-tooltip-title-line-height);
     --_rich-tooltip-title-letter-spacing: var(--tracking-tight);
     --_rich-tooltip-content-title-letter-spacing: var(--_rich-tooltip-title-letter-spacing);
-    --_rich-tooltip-arrow-rotate: 0deg;
-    --_rich-tooltip-action-outline: none;
+    --cui-rich-tooltip-focus-ring-color: var(--cui-rich-tooltip-content-foreground);
   }
 
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-tone="accent"]) {
-    --_rich-tooltip-arrow-path-fill: var(--primary);
+    --focus-ring: var(--cui-rich-tooltip-focus-ring-color);
     --_rich-tooltip-description-foreground: var(--primary-foreground);
     --_rich-tooltip-progress-foreground: var(--primary-foreground);
     border-radius: var(--cui-rich-tooltip-content-radius);
     background-color: var(--cui-rich-tooltip-content-background);
     color: var(--cui-rich-tooltip-content-foreground);
-    outline-style: none;
     transition-property: opacity, scale;
     transition-duration: var(--duration-base);
     transition-timing-function: var(--ease-emphasized);
     box-shadow: var(--cui-rich-tooltip-content-shadow);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-tone="surface"]) {
-    --_rich-tooltip-arrow-path-fill: oklch(from var(--popover) l c h / var(--popover-opacity));
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="arrow"]) {
-    rotate: var(--_rich-tooltip-arrow-rotate);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="arrow"] path) {
-    fill: var(--_rich-tooltip-arrow-path-fill);
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="arrow"][data-tone="accent"]) {
+    color: var(--cui-rich-tooltip-content-background);
   }
 
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="media"]) {
@@ -168,18 +158,6 @@
     border-start-end-radius: inherit;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-side="top"]) {
-    --_rich-tooltip-arrow-rotate: 180deg;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-side="left"]) {
-    --_rich-tooltip-arrow-rotate: 90deg;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-side="right"]) {
-    --_rich-tooltip-arrow-rotate: calc(90deg * -1);
-  }
-
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-tone="accent"][data-starting-style]) {
     --_rich-tooltip-content-scale: 95% 95%;
     scale: var(--_rich-tooltip-content-scale);
@@ -194,22 +172,28 @@
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="next"]),
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="close"]) {
     block-size: calc(var(--spacing) * 7);
-    inline-size: calc(var(--spacing) * 7);
+    min-inline-size: calc(var(--spacing) * 7);
     margin-inline-end: calc(var(--spacing) * -1);
     gap: calc(var(--spacing) * 1);
-    padding-inline: 0;
+    padding-inline: calc(var(--spacing) * 2);
     border-radius: var(--cui-rich-tooltip-action-radius);
     background: var(--cui-rich-tooltip-action-background);
     color: var(--cui-rich-tooltip-action-foreground);
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
-    outline-style: var(--_rich-tooltip-action-outline);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="previous"][data-icon-only="true"]),
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="next"][data-icon-only="true"]),
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="close"][data-icon-only="true"]) {
+    inline-size: calc(var(--spacing) * 7);
+    padding-inline: 0;
   }
 
   @media (hover: hover) {
-    :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="previous"]:hover),
-    :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="next"]:hover),
-    :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="close"]:hover) {
+    :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="previous"]:hover:not(:disabled)),
+    :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="next"]:hover:not(:disabled)),
+    :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="close"]:hover:not(:disabled)) {
       background: oklch(from currentColor l c h / 0.15);
     }
   }
@@ -217,7 +201,7 @@
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="previous"]:disabled),
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="next"]:disabled),
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="close"]:disabled) {
-    opacity: 0.4;
+    opacity: var(--disabled-opacity);
   }
 }
 
@@ -267,3 +251,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-rich-tooltip-focus-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/scroll-area.css

@@ -143,10 +143,17 @@
 
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="always"]),
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="hover"]:is([data-hovering], [data-scrolling])),
-  :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="scroll"][data-scrolling]) {
+  :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="scroll"][data-scrolling]),
+  :where([data-control-family="scroll-area"][data-slot="root"]:has(> [data-scroll-area-viewport]:focus-visible) > [data-slot="scrollbar"]) {
     opacity: 1;
   }
 
+  @media (hover: none) {
+    :where([data-control-family="scroll-area"][data-slot="scrollbar"]) {
+      opacity: 1;
+    }
+  }
+
   :where([data-control-family="scroll-area"][data-slot="thumb"]) {
     border-radius: var(--cui-scroll-area-thumb-radius);
     background: var(--cui-scroll-area-thumb-background);

package/dist/styles/recipes/sidebar-menu.css

@@ -1,47 +1,97 @@
 @layer components {
   :where([data-control-family="sidebar"][data-slot="group-label"]) {
     gap: calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 2);
+    padding: var(--cui-sidebar-group-label-padding);
     border-radius: var(--radius-md);
     color: var(--cui-sidebar-group-label-foreground);
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
-    outline: none;
+    font-size: var(--cui-sidebar-group-label-font-size);
+    font-weight: var(--cui-sidebar-group-label-font-weight);
+    letter-spacing: var(--cui-sidebar-group-label-letter-spacing);
+    text-transform: var(--cui-sidebar-group-label-text-transform);
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-button"]),
-  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+  :where([data-control-family="sidebar"][data-slot="menu-button"]) {
     gap: calc(var(--spacing) * 1.5);
-    block-size: var(--control-h-md);
+    block-size: var(--cui-sidebar-menu-button-height);
     border-radius: var(--cui-sidebar-menu-button-radius);
-    padding-inline: var(--padding-x);
-    font-size: var(--text-body);
+    padding-block: var(--cui-sidebar-menu-button-padding-block);
+    padding-inline: var(--cui-sidebar-menu-button-padding-inline);
+    font-size: var(--cui-sidebar-menu-button-font-size);
+    font-weight: var(--cui-sidebar-menu-button-font-weight);
     background-color: transparent;
     color: var(--cui-sidebar-menu-button-foreground);
-    outline: none;
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
-    block-size: var(--control-h-sm);
-    padding-inline: calc(var(--padding-x) * 0.75);
-    font-size: var(--text-label);
+    --cui-sidebar-menu-button-height: var(--control-h-sm);
+    --cui-sidebar-menu-button-padding-inline: calc(var(--padding-x) * 0.75);
+    --cui-sidebar-menu-button-font-size: var(--text-label);
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
+    --cui-sidebar-menu-button-height: var(--control-h-lg);
+    --cui-sidebar-menu-button-padding-inline: calc(var(--padding-x) * 1.25);
     gap: calc(var(--spacing) * 2);
-    block-size: var(--control-h-lg);
-    padding-inline: calc(var(--padding-x) * 1.25);
+  }
+
+  :where([data-control-family="sidebar"][data-collapsible="icon"] [data-control-family="sidebar"][data-slot="menu-button"]) {
+    --cui-sidebar-menu-button-padding-inline: 0px;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-md) / 2);
+    padding: 0;
+    border-radius: var(--cui-sidebar-menu-button-radius);
+    background-color: transparent;
+    color: var(--cui-sidebar-menu-button-foreground);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active] ~ [data-slot="menu-action"]) {
+    color: var(--cui-sidebar-menu-button-active-foreground);
+  }
+
+  :where(
+    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
+      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+      ~ [data-slot="menu-action"]
+  ) {
+    color: var(--cui-sidebar-menu-button-track-active-foreground);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"])::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    inline-size: max(100%, var(--target-min));
+    block-size: max(100%, var(--target-min));
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:dir(rtl))::before {
+    translate: 50% -50%;
   }
 
   @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"]:hover),
-    :where([data-control-family="sidebar"][data-slot="menu-action"]:hover) {
+    :where(
+        [data-control-family="sidebar"]:is([data-slot="menu-button"], [data-slot="menu-action"]):hover:not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        )
+      ) {
       background-color: var(--cui-sidebar-menu-button-hover-background);
       color: var(--cui-sidebar-menu-button-hover-foreground);
       box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
     }
 
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover) {
+    :where(
+        [data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover:not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        )
+      ) {
       background-color: var(--cui-sidebar-menu-button-active-background);
       color: var(--cui-sidebar-menu-button-active-foreground);
     }
@@ -56,7 +106,7 @@
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-sidebar-menu-button-active-font-weight);
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
@@ -65,7 +115,13 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover) {
+    :where(
+        [data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover:not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        )
+      ) {
       box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
     }
   }
@@ -77,6 +133,13 @@
     background-color: transparent;
   }
 
+  :where(
+    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
+      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+  ) {
+    color: var(--cui-sidebar-menu-button-track-active-foreground);
+  }
+
   @media (hover: hover) {
     :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
       background-color: transparent;
@@ -87,18 +150,13 @@
   :where([data-control-family="sidebar"][data-slot="menu-action"]:is(:disabled, [aria-disabled="true"])),
   :where([data-control-family="sidebar"][data-slot="menu-button"]:disabled),
   :where([data-control-family="sidebar"][data-slot="menu-button"][aria-disabled="true"]) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="sidebar"][data-slot="group-content"]) {
     font-size: var(--text-body);
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
-    inset-block-start: calc(var(--control-h-md) / 2);
-    padding: 0;
-  }
-
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
     inset-block-start: calc(var(--control-h-sm) / 2);
   }
@@ -111,9 +169,46 @@
     padding-inline-end: calc(var(--spacing) * 8);
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-action"]:focus-visible) {
-    outline: 2px solid var(--sidebar-ring);
-    outline-offset: 2px;
+  :where([data-control-family="sidebar"][data-slot="menu-badge"]) {
+    inset-block-start: calc(var(--control-h-md) / 2);
+    inset-inline-end: calc(var(--spacing) * 1);
+    min-inline-size: var(--cui-sidebar-menu-badge-height);
+    block-size: var(--cui-sidebar-menu-badge-height);
+    padding-inline: calc(var(--spacing) * 1.5);
+    border-radius: 9999px;
+    background-color: var(--cui-sidebar-menu-badge-background);
+    color: var(--cui-sidebar-menu-badge-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-badge"]) {
+    inset-block-start: calc(var(--control-h-sm) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-badge"]) {
+    inset-block-start: calc(var(--control-h-lg) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-badge"])) {
+    padding-inline-end: calc(var(--spacing) * 10);
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-badge"]):has(
+      ~ [data-slot="menu-action"]:not([data-show-on-hover])
+    )
+  ) {
+    padding-inline-end: calc(var(--spacing) * 16);
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="menu-item"]:has(> [data-slot="menu-action"]:not([data-show-on-hover]))
+      > [data-slot="menu-badge"]
+  ) {
+    inset-inline-end: calc(var(--spacing) * 7);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -125,26 +220,46 @@
     :where([data-control-family="sidebar"][data-slot="menu-action"][data-popup-open]) {
       opacity: 1;
     }
+
+    :where(
+        [data-control-family="sidebar"][data-slot="menu-item"]:is(
+            :hover,
+            :focus-within,
+            :has(> [data-slot="menu-action"][data-popup-open])
+          ):has(> [data-slot="menu-action"][data-show-on-hover])
+          > [data-slot="menu-badge"]
+      ) {
+      opacity: 0;
+    }
   }
 
   @media (pointer: coarse) {
     :where([data-control-family="sidebar"][data-slot="menu-action"]) {
-      min-inline-size: 44px;
-      min-block-size: 44px;
+      min-inline-size: var(--touch-target);
+      min-block-size: var(--touch-target);
       inset-inline-end: 0;
-      inset-block-start: max(22px, calc(var(--control-h-md) / 2));
+      inset-block-start: max(calc(var(--touch-target) / 2), calc(var(--control-h-md) / 2));
     }
 
     :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
-      inset-block-start: max(22px, calc(var(--control-h-sm) / 2));
+      inset-block-start: max(calc(var(--touch-target) / 2), calc(var(--control-h-sm) / 2));
     }
 
     :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-action"]) {
-      inset-block-start: max(22px, calc(var(--control-h-lg) / 2));
+      inset-block-start: max(calc(var(--touch-target) / 2), calc(var(--control-h-lg) / 2));
     }
 
     :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-action"])) {
       padding-inline-end: calc(var(--spacing) * 12);
     }
+
+    :where([data-control-family="sidebar"][data-slot="menu-item"]:has(> [data-slot="menu-action"]) > [data-slot="menu-badge"]) {
+      inset-inline-end: var(--touch-target);
+      inset-block-start: max(calc(var(--touch-target) / 2), calc(var(--control-h-md) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-badge"]):has(~ [data-slot="menu-action"])) {
+      padding-inline-end: calc(var(--touch-target) + var(--spacing) * 10);
+    }
   }
 }