@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/styles/recipes/popup.css

@@ -9,25 +9,46 @@
     --cui-popup-border-width: var(--control-rim-width);
     --cui-popup-shadow: var(--shadow-pop);
     --cui-popup-backdrop-filter: blur(var(--backdrop-blur-popover));
+    --cui-popup-title-foreground: var(--cui-popup-foreground);
+    --cui-popup-title-font-size: var(--text-heading-3);
+    --cui-popup-title-font-weight: var(--font-weight-semibold);
+    --cui-popup-title-line-height: var(--text-heading-3--line-height);
+    --cui-popup-title-letter-spacing: -0.025em;
+    --cui-popup-description-foreground: var(--muted-foreground);
+    --cui-popup-close-inset: calc(var(--spacing) * 3);
     --cui-popup-item-radius: var(--radius-popup-item-fit);
     --cui-popup-item-foreground: var(--foreground);
+    --cui-popup-item-font-size: var(--text-body);
+    --cui-popup-item-icon-size: 1rem;
+    --cui-popup-item-padding-block: calc(var(--spacing) * 1);
+    --cui-popup-item-padding-inline: calc(var(--padding-x) * 0.5);
+    --cui-popup-item-inset: calc(var(--spacing) * 8);
+    --cui-popup-item-min-height: max(var(--target-min), var(--control-h-xs));
     --cui-popup-item-highlight-background: var(--hover-fill);
     --cui-popup-item-highlight-foreground: var(--cui-popup-item-foreground);
     --cui-popup-item-highlight-muted-foreground: var(--muted-foreground);
-    --cui-popup-item-disabled-opacity: 0.4;
+    --cui-popup-item-highlight-shadow: inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.35);
+    --cui-popup-item-disabled-opacity: var(--disabled-opacity);
+    --cui-popup-label-padding-block: var(--cui-popup-item-padding-block);
+    --cui-popup-label-padding-inline: var(--cui-popup-item-padding-inline);
+    --cui-popup-label-font-size: var(--text-micro);
+    --cui-popup-label-font-weight: var(--font-weight-medium);
+    --cui-popup-label-letter-spacing: 0.08em;
+    --cui-popup-label-text-transform: uppercase;
     --cui-popup-separator-color: var(--border);
+    --cui-popup-separator-inset: calc(var(--popover-padding) * -1);
     --cui-popup-shortcut-foreground: var(--muted-foreground);
-    --_popup-transform-origin: var(--transform-origin);
+    --cui-popup-shortcut-font-size: var(--text-body);
+    --cui-popup-shortcut-letter-spacing: 0.02em;
     border-radius: var(--cui-popup-radius);
     background-color: var(--cui-popup-background);
     box-shadow:
       inset 0 0 0 var(--cui-popup-border-width) var(--cui-popup-border-color),
       var(--cui-popup-shadow);
     color: var(--cui-popup-foreground);
-    outline: none;
     -webkit-backdrop-filter: var(--cui-popup-backdrop-filter, none);
     backdrop-filter: var(--cui-popup-backdrop-filter, none);
-    transform-origin: var(--_popup-transform-origin);
+    transform-origin: var(--transform-origin);
   }
   :where([data-control-family="popup"][data-popup-part="surface"]:not([data-popup-static]):not([data-slot="viewport"])),
   :where([data-control-family="popup"][data-popup-part="list-surface"]) {
@@ -39,12 +60,21 @@
   :where(
     [data-control-family="popup"][data-popup-part="surface"]:not(
       :is([data-popup-kind="sheet"], [data-popup-kind="drawer"], [data-popup-kind="toast"])
-    ):not([data-slot="viewport"]):where([data-starting-style], [data-ending-style])
+    ):not([data-slot="viewport"])[data-starting-style]
   ),
-  :where([data-control-family="popup"][data-popup-part="list-surface"]:where([data-starting-style], [data-ending-style])) {
+  :where([data-control-family="popup"][data-popup-part="list-surface"][data-starting-style]) {
     scale: 0.95;
     opacity: 0;
   }
+  :where(
+    [data-control-family="popup"][data-popup-part="surface"]:not(
+      :is([data-popup-kind="sheet"], [data-popup-kind="drawer"], [data-popup-kind="toast"])
+    ):not([data-slot="viewport"])[data-ending-style]
+  ),
+  :where([data-control-family="popup"][data-popup-part="list-surface"][data-ending-style]) {
+    opacity: 0;
+    transition-duration: var(--duration-fast);
+  }
   @starting-style {
     :where(
         [data-control-family="popup"][data-popup-part="surface"]:not(
@@ -71,13 +101,23 @@
     opacity: 0;
   }
   :where([data-control-family="popup"][data-popup-part="list-surface"]) {
+    max-block-size: var(--available-height);
     padding: var(--popover-padding);
+    overflow-y: auto;
+    overscroll-behavior: contain;
   }
   :where([data-control-family="popup"][data-popup-part="surface"][data-surface="modal"]) {
     --cui-popup-radius: var(--radius-panel);
     --cui-popup-shadow: var(--shadow-modal);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-popup-part="surface"]),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-popup-part="surface"]) {
+    max-block-size: calc(100dvh - 24vh);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
   :where([data-control-family="popup"][data-popup-kind="tooltip"][data-popup-part="surface"]) {
     --cui-popup-radius: var(--radius-control);
     --cui-popup-background: var(--foreground);
@@ -87,75 +127,32 @@
   :where([data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"]) {
     --cui-popup-radius: 0px;
     --cui-popup-shadow: var(--shadow-overlay);
+    max-block-size: 100dvh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="title"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="title"]) {
-    font-size: var(--text-heading-3);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1;
-    letter-spacing: -0.025em;
-    text-wrap: balance;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="description"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="description"]),
-  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="description"]),
-  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="description"]) {
-    color: var(--muted-foreground);
-    font-size: var(--text-body);
-    text-wrap: pretty;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="title"]) {
-    font-weight: var(--font-weight-semibold);
-    text-wrap: balance;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"]) {
-    color: var(--cui-popup-background);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"]) {
-    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="content"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="content"]),
-  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="content"]) {
-    gap: calc(var(--spacing) * 4);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="header"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="header"]) {
-    gap: calc(var(--spacing) * 1.5);
-    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) 0;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="footer"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="footer"]) {
-    gap: calc(var(--spacing) * 2);
-    padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="header"]) {
-    gap: calc(var(--spacing) * 1.5);
-    padding: calc(var(--spacing) * 4);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="header"]) {
-    gap: calc(var(--spacing) * 1.5);
-    padding-block-end: calc(var(--spacing) * 3);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="popover"][data-popup-part="surface"][data-padding="default"]),
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-popup-part="surface"]),
   :where([data-control-family="popup"][data-popup-kind="hover-card"][data-popup-part="surface"]) {
-    padding: calc(var(--spacing) * 4);
+    --cui-popup-title-font-size: var(--text-body);
+    --cui-popup-title-line-height: 1.35;
+    --cui-popup-title-letter-spacing: -0.01em;
+    max-block-size: var(--available-height);
+    max-inline-size: var(--available-width);
+    overflow: auto;
+    overscroll-behavior: contain;
   }
 
   :where([data-control-family="popup"][data-popup-part="item"]) {
     gap: calc(var(--spacing) * 2);
-    min-block-size: var(--control-h-xs);
+    min-block-size: var(--cui-popup-item-min-height);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="item"] > svg) {
+    width: var(--cui-popup-item-icon-size);
+    height: var(--cui-popup-item-icon-size);
+    flex-shrink: 0;
+    pointer-events: none;
   }
 
   :where([data-control-family="popup"][data-popup-part="item"]),
@@ -163,15 +160,13 @@
     cursor: pointer;
     border-radius: var(--cui-popup-item-radius);
     color: var(--cui-popup-item-foreground);
-    font-size: var(--text-body);
-    outline: none;
-    padding-block: calc(var(--spacing) * 1);
-    padding-inline: calc(var(--padding-x) * 0.5);
+    font-size: var(--cui-popup-item-font-size);
+    padding-block: var(--cui-popup-item-padding-block);
+    padding-inline: var(--cui-popup-item-padding-inline);
   }
 
   :where([data-control-family="popup"][data-popup-part="navigation-link"]) {
-    font-size: var(--text-body);
-    transition-property: translate;
+    transition-property: background-color, color;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }
@@ -182,15 +177,22 @@
     font-weight: var(--font-weight-medium);
   }
 
-  :where([data-control-family="popup"][data-popup-part="navigation-link"]:where(:hover, :focus-visible, [data-active])) {
+  :where([data-control-family="popup"][data-popup-part="navigation-link"]:where(:focus-visible, [data-active])) {
     background-color: var(--cui-popup-item-highlight-background);
     color: var(--foreground);
   }
 
+  @media (hover: hover) {
+    :where([data-control-family="popup"][data-popup-part="navigation-link"]:hover) {
+      background-color: var(--cui-popup-item-highlight-background);
+      color: var(--foreground);
+    }
+  }
+
   :where(
     [data-control-family="popup"][data-popup-part="item"]:where(
       [data-highlighted],
-      [data-selected]:not([data-selected="false"]),
+      [data-popup-kind="command"][data-selected="true"],
       [data-popup-open]
     )
   ) {
@@ -200,24 +202,45 @@
     color: var(--cui-popup-item-highlight-foreground);
   }
 
+  :where(
+    [data-control-family="popup"][data-popup-part="item"]:where([data-highlighted], [data-popup-kind="command"][data-selected="true"]):not(
+      :focus
+    )
+  ) {
+    box-shadow: var(--cui-popup-item-highlight-shadow);
+  }
+
+  @media (forced-colors: active) {
+    :where(
+        [data-control-family="popup"][data-popup-part="item"]:where([data-highlighted], [data-popup-kind="command"][data-selected="true"])
+      ) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where([data-control-family="popup"][data-popup-part="item"]:is([data-disabled]:not([data-disabled="false"]), [data-disabled="true"])) {
     cursor: not-allowed;
     opacity: var(--cui-popup-item-disabled-opacity);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]),
+  :where([data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]) {
+    color: var(--cui-field-affordance-foreground);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"]) {
     color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]),
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"]) {
     transition-property: rotate;
     transition-duration: var(--duration-base);
     transition-timing-function: var(--ease-emphasized);
   }
 
   :where([data-control-family="popup"][data-popup-kind="select"][data-slot="icon"][data-popup-open]),
-  :where(
-    [data-control-family="button"][data-popup-kind="navigation-menu"][data-slot="trigger"][data-popup-open]
-      :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"])
-  ) {
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"][data-popup-open]) {
     rotate: 180deg;
   }
 
@@ -229,66 +252,6 @@
     border-radius: 9999px;
     background-color: currentColor;
   }
-
-  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="title"]) {
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1;
-    letter-spacing: -0.01em;
-    text-wrap: balance;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="positioner"]) {
-    transition-property: inset-block-start, inset-inline-start, inset-block-end, inset-inline-end;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-emphasized);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="popup"]) {
-    outline: none;
-    --_popup-transform-origin: var(--transform-origin);
-    transform-origin: var(--_popup-transform-origin);
-    transition-property: opacity, inline-size, block-size, scale;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-emphasized);
-  }
-
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="popup"]:is([data-starting-style], [data-ending-style])
-  ) {
-    scale: 0.95;
-    opacity: 0;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"]) {
-    transition-property: opacity, translate;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-emphasized);
-  }
-
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"]:is([data-starting-style], [data-ending-style])
-  ) {
-    opacity: 0;
-  }
-
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-starting-style][data-activation-direction="left"]
-  ),
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-ending-style][data-activation-direction="right"]
-  ) {
-    translate: calc(var(--spacing) * -3) 0;
-  }
-
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-starting-style][data-activation-direction="right"]
-  ),
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-ending-style][data-activation-direction="left"]
-  ) {
-    translate: calc(var(--spacing) * 3) 0;
-  }
 }
 
 @property --cui-popup-radius {
@@ -347,6 +310,41 @@
   initial-value: 0px;
 }
 
+@property --cui-popup-item-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-item-icon-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+
+@property --cui-popup-item-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-item-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-item-min-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-item-highlight-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-popup-item-foreground {
   syntax: "<color>";
   inherits: true;

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);
   }
 
@@ -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,7 +27,6 @@
 
   :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"])) {
@@ -77,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;
+}