@ctrl-ui/react 0.8.5 → 0.8.7

package/dist/styles/recipes/page-layout.css

@@ -5,10 +5,14 @@
     --cui-page-layout-padding-inline: calc(var(--spacing) * 5);
     --cui-page-layout-padding-block: calc(var(--spacing) * 10) calc(var(--spacing) * 24);
     --cui-page-layout-column-gap: calc(var(--spacing) * 5);
+    --cui-page-layout-header-start-gap: calc(var(--spacing) * 10);
     --cui-page-layout-header-gap: calc(var(--spacing) * 8);
     --cui-page-layout-header-column-gap: calc(var(--spacing) * 4);
     --cui-page-layout-header-row-gap: calc(var(--spacing) * 2);
     --cui-page-layout-sticky-gap: 0px;
+    --cui-page-layout-background: var(--canvas);
+    --cui-page-layout-sticky-header-background: oklch(from var(--cui-page-layout-background) l c h / 0.85);
+    background: var(--cui-page-layout-background);
 
     /* Header and body both read this, so they stop at the same right edge. */
     --cui-page-layout-size: calc(var(--cui-page-layout-article-size) + var(--cui-page-layout-padding-inline) * 2);
@@ -38,7 +42,7 @@
     column-gap: var(--cui-page-layout-header-column-gap);
     row-gap: var(--cui-page-layout-header-row-gap);
     padding-inline: var(--cui-page-layout-padding-inline);
-    padding-block-end: var(--cui-page-layout-header-gap);
+    padding-block: var(--cui-page-layout-header-start-gap) var(--cui-page-layout-header-gap);
   }
 
   :where([data-control-family="page-layout"][data-slot="body"]) {
@@ -52,6 +56,15 @@
     padding-block: var(--cui-page-layout-padding-block);
   }
 
+  /* A flow or sticky header owns the leading space, so header-gap stays the only gap above the body.
+     A floating header is zero-height and overlays the body, so the body keeps its own lead. */
+  :where(
+    [data-control-family="page-layout"][data-slot="header"]:not([data-variant="floating"])
+      + [data-control-family="page-layout"][data-slot="body"]
+  ) {
+    padding-block-start: 0;
+  }
+
   :where([data-control-family="page-layout"][data-slot="title"]) {
     grid-area: title;
     font-size: var(--text-heading-1);
@@ -87,6 +100,9 @@
     position: sticky;
     top: var(--cui-page-layout-sticky-gap);
     z-index: 20;
+    background: var(--cui-page-layout-sticky-header-background);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
   }
 
   /* Zero height: the band hangs over the body instead of displacing it. */
@@ -96,7 +112,7 @@
     z-index: 20;
     align-items: start;
     height: 0;
-    padding-block-end: 0;
+    padding-block: 0;
     pointer-events: none;
   }
 
@@ -173,6 +189,12 @@
   initial-value: 0px;
 }
 
+@property --cui-page-layout-header-start-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-page-layout-header-gap {
   syntax: "<length>";
   inherits: true;
@@ -201,3 +223,15 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-page-layout-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-page-layout-sticky-header-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/pagination.css

@@ -25,7 +25,7 @@
   }
 
   :where([data-control-family="pagination"][data-slot="link"][data-active="true"]) {
-    --cui-pagination-link-background: oklch(from var(--card) l c h / 0.72);
+    --cui-pagination-link-background: var(--control-fill);
     --_pagination-link-border-color: var(--border);
     --cui-pagination-link-shadow: var(--shadow-sm);
   }

package/dist/styles/recipes/popup-controls.css

@@ -7,6 +7,22 @@
     outline-style: none;
   }
 
+  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a)) {
+    border-radius: var(--radius-sm);
+    color: var(--foreground);
+    font-weight: var(--font-weight-medium);
+    text-decoration-line: underline;
+    text-decoration-color: var(--border);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    cursor: pointer;
+    transition: text-decoration-color var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a):is(:hover, [data-popup-open])) {
+    text-decoration-color: var(--foreground);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="link"]) {
     text-decoration-line: none;
   }

package/dist/styles/recipes/popup-drawer.css

@@ -1,43 +1,46 @@
 @layer components {
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-popup-part="surface"]) {
-    /* The sheet sits on the page surface, and its edge is a real border the variants size per side. */
+    /* The edge is a real border drawn only on the sides the variant exposes, so the popup's inset ring stays off. */
     --cui-popup-radius: var(--radius-panel);
     --cui-popup-background: var(--background);
     --cui-popup-foreground: var(--foreground);
-    --cui-popup-border-width: 0px;
-    --cui-popup-shadow: var(--shadow-modal);
+    --cui-popup-shadow: var(--shadow-overlay);
+    --cui-popup-backdrop-filter: none;
     --_drawer-content-closed-translate: 0 100%;
+    --_drawer-edge-inset-end: calc(var(--spacing) * 4);
     border: 0 solid var(--cui-popup-border-color);
     border-radius: 0;
+    box-shadow: var(--cui-popup-shadow);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-popup-part="surface"][data-surface-variant="card"]) {
     --cui-popup-background: var(--card);
+    --cui-popup-foreground: var(--card-foreground);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="floating"]) {
-    border-width: 1px;
+    border-width: var(--cui-popup-border-width);
     border-radius: var(--cui-popup-radius);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="bottom"]) {
-    border-top-width: 1px;
+    border-top-width: var(--cui-popup-border-width);
     border-radius: var(--cui-popup-radius) var(--cui-popup-radius) 0 0;
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="top"]) {
-    border-bottom-width: 1px;
+    border-bottom-width: var(--cui-popup-border-width);
     --_drawer-content-closed-translate: 0 -100%;
     border-radius: 0 0 var(--cui-popup-radius) var(--cui-popup-radius);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="right"]) {
-    border-left-width: 1px;
+    border-left-width: var(--cui-popup-border-width);
     --_drawer-content-closed-translate: 100% 0;
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="left"]) {
-    border-right-width: 1px;
+    border-right-width: var(--cui-popup-border-width);
     --_drawer-content-closed-translate: -100% 0;
   }
 
@@ -74,10 +77,19 @@
     margin-block: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="scroll"]) {
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"]) {
     gap: calc(var(--spacing) * 4);
   }
 
+  /* Block padding lives inside the scroller, never on the popup: the scroll edge would clip a focus ring on the first or last row. */
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"][data-padding="default"]) {
+    padding-block: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"][data-padding="default"]:last-child) {
+    padding-block-end: var(--_drawer-edge-inset-end);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="viewport"][data-variant="floating"]) {
     padding: calc(var(--spacing) * 2);
   }
@@ -94,35 +106,22 @@
     text-wrap: pretty;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-padding="default"][data-side="bottom"]) {
-    padding-block-end: calc(var(--spacing) * 4);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-padding="default"][data-side="top"]) {
-    padding-block-start: calc(var(--spacing) * 4);
-  }
-
-  :where(
-    [data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-padding="default"]:is(
-      [data-side="left"],
-      [data-side="right"]
-    )
-  ) {
-    padding-block: calc(var(--spacing) * 4);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="footer"]) {
-    gap: calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 4);
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-side="bottom"]) {
+    --_drawer-edge-inset-end: max(calc(var(--spacing) * 4), env(safe-area-inset-bottom));
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="header"]) {
     gap: calc(var(--spacing) * 1.5);
-    padding-inline: calc(var(--spacing) * 4);
+    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) 0;
     --_drawer-header-text-align: center;
     text-align: var(--_drawer-header-text-align);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    padding: 0 calc(var(--spacing) * 4) var(--_drawer-edge-inset-end);
+  }
+
   @media (width >= 40rem) {
     :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="header"]) {
       --_drawer-header-text-align: left;
@@ -131,15 +130,18 @@
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"]) {
-    gap: calc(var(--spacing) * 4);
     outline-style: none;
     transform: translate(var(--drawer-swipe-movement-x, 0), var(--drawer-swipe-movement-y, 0));
-    transition-property: transform, translate, scale, rotate;
+    transition-property: transform, translate, scale, rotate, filter;
     --_drawer-content-transition-duration: var(--duration-base);
     transition-duration: var(--_drawer-content-transition-duration);
     transition-timing-function: var(--ease-emphasized);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-nested-drawer-open]) {
+    filter: brightness(0.95);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-starting-style]),
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-ending-style]) {
     translate: var(--_drawer-content-closed-translate);

package/dist/styles/recipes/popup-lists.css

@@ -144,7 +144,7 @@
     outline-style: none;
   }
 
-  :where([data-control-family="popup"][data-popup-part="item"] > span:first-child) {
+  :where([data-control-family="popup"][data-slot="item-text"]) {
     gap: calc(var(--spacing) * 2);
   }
 
@@ -190,8 +190,17 @@
   }
 
   :where([data-control-family="popup"][data-popup-part="bar"]) {
+    --_popup-bar-item-radius: min(var(--cui-popup-item-radius), calc(var(--control-h-sm) / 2));
+    --_popup-bar-padding: calc(var(--spacing) * 1);
+    --cui-popup-radius: calc(
+      var(--_popup-bar-item-radius) +
+      clamp(0px, calc(var(--_popup-bar-item-radius) * 1000), var(--_popup-bar-padding))
+    );
+    --nest-radius: var(--_popup-bar-item-radius);
+    padding: var(--_popup-bar-padding);
     gap: calc(var(--spacing) * 0.5);
-    padding: calc(var(--spacing) * 1);
+    --cui-popup-background: var(--card);
+    --cui-popup-shadow: var(--shadow-xs);
   }
 
   :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="list"]) {

package/dist/styles/recipes/popup.css

@@ -59,8 +59,9 @@
   :where([data-control-family="popup"][data-popup-part="backdrop"]) {
     --cui-popup-backdrop-background: oklch(from var(--foreground) l c h / var(--overlay-opacity));
     background-color: var(--cui-popup-backdrop-background);
-    -webkit-backdrop-filter: blur(var(--backdrop-blur-overlay));
-    backdrop-filter: blur(var(--backdrop-blur-overlay));
+    --cui-popup-backdrop-blur: blur(var(--backdrop-blur-overlay));
+    -webkit-backdrop-filter: var(--cui-popup-backdrop-blur);
+    backdrop-filter: var(--cui-popup-backdrop-blur);
     transition: opacity var(--duration-base) var(--ease-emphasized);
   }
   :where(.dark [data-control-family="popup"][data-popup-part="backdrop"]) {
@@ -72,11 +73,6 @@
   :where([data-control-family="popup"][data-popup-part="list-surface"]) {
     padding: var(--popover-padding);
   }
-  :where([data-control-family="popup"][data-popup-part="bar"]) {
-    --cui-popup-radius: var(--radius-control);
-    --cui-popup-background: var(--card);
-    --cui-popup-shadow: var(--shadow-xs);
-  }
   :where([data-control-family="popup"][data-popup-part="surface"][data-surface="modal"]) {
     --cui-popup-radius: var(--radius-panel);
     --cui-popup-shadow: var(--shadow-modal);
@@ -90,7 +86,7 @@
 
   :where([data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"]) {
     --cui-popup-radius: 0px;
-    --cui-popup-shadow: var(--shadow-modal);
+    --cui-popup-shadow: var(--shadow-overlay);
   }
 
   :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="title"]),
@@ -217,10 +213,7 @@
     transition-timing-function: var(--ease-emphasized);
   }
 
-  :where(
-    [data-control-family="button"][data-popup-kind="select"][data-slot="trigger"][data-popup-open]
-      [data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]
-  ),
+  :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"])
@@ -343,6 +336,11 @@
   initial-value: transparent;
 }
 
+@property --cui-popup-backdrop-blur {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-popup-item-radius {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/styles/recipes/range.css

@@ -41,7 +41,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);

package/dist/styles/recipes/resizable.css

@@ -30,6 +30,40 @@
     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);
   }

package/dist/styles/recipes/spinner.css

@@ -4,6 +4,10 @@
     color: var(--cui-spinner-foreground);
   }
 
+  :where([data-control-family="button"] [data-control-family="spinner"][data-slot="root"]) {
+    --cui-spinner-foreground: currentColor;
+  }
+
   :where([data-control-family="spinner"][data-slot="indicator"]) {
     inline-size: calc(var(--spacing) * 4);
     block-size: calc(var(--spacing) * 4);

package/dist/styles/recipes/table-of-contents.css

@@ -13,7 +13,7 @@
     --cui-table-of-contents-label-gap: calc(var(--spacing) * 3);
     --cui-table-of-contents-item-foreground: var(--muted-foreground);
     --cui-table-of-contents-item-hover-foreground: var(--foreground);
-    --cui-table-of-contents-item-active-foreground: var(--foreground);
+    --cui-table-of-contents-item-active-foreground: var(--primary-text);
     --cui-table-of-contents-item-font-size: var(--text-body);
     --cui-table-of-contents-item-line-height: var(--leading-normal);
     --cui-table-of-contents-item-font-weight: var(--font-weight-normal);
@@ -21,13 +21,11 @@
     --cui-table-of-contents-item-padding-block: calc(var(--spacing) * 1.5);
     --cui-table-of-contents-item-padding-inline: calc(var(--spacing) * 3);
     --cui-table-of-contents-item-indent-size: calc(var(--spacing) * 2);
-    --cui-table-of-contents-rail-background: var(--border);
+    --cui-table-of-contents-rail-stroke: var(--border);
     --cui-table-of-contents-rail-size: 1px;
-    --cui-table-of-contents-trail-background: var(--foreground);
+    --cui-table-of-contents-trail-stroke: var(--primary-text);
     --cui-table-of-contents-trail-size: 2px;
-    --cui-table-of-contents-trail-radius: var(--cui-table-of-contents-trail-size);
-    --cui-table-of-contents-highlight-radius: var(--radius-popup-item);
-    --cui-table-of-contents-highlight-background: var(--active-fill);
+    --cui-table-of-contents-indicator-foreground: var(--cui-table-of-contents-trail-stroke);
     border: var(--cui-table-of-contents-border-width) solid var(--cui-table-of-contents-border-color);
     border-radius: var(--cui-table-of-contents-radius);
     background-color: var(--cui-table-of-contents-background);
@@ -47,8 +45,41 @@
   }
 
   :where([data-control-family="table-of-contents"][data-slot="rail"]) {
-    inline-size: var(--cui-table-of-contents-rail-size);
-    background-color: var(--cui-table-of-contents-rail-background);
+    fill: none;
+    stroke: var(--cui-table-of-contents-rail-stroke);
+    stroke-width: var(--cui-table-of-contents-rail-size);
+    stroke-linejoin: round;
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="trail"]) {
+    fill: none;
+    stroke: var(--cui-table-of-contents-trail-stroke);
+    stroke-width: var(--cui-table-of-contents-trail-size);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: var(--_toc-trail-length) var(--_toc-rail-length);
+    stroke-dashoffset: calc(-1 * var(--_toc-trail-start));
+    opacity: 0;
+    transition-property: stroke-dasharray, stroke-dashoffset, opacity;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="indicator"]) {
+    display: grid;
+    place-items: center;
+    color: var(--cui-table-of-contents-indicator-foreground);
+    offset-distance: var(--_toc-indicator-distance);
+    offset-rotate: 0deg;
+    opacity: 0;
+    transition-property: offset-distance, opacity;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="trail"][data-visible]),
+  :where([data-control-family="table-of-contents"][data-slot="indicator"][data-visible]) {
+    opacity: 1;
   }
 
   :where([data-control-family="table-of-contents"][data-slot="item"]) {
@@ -83,25 +114,6 @@
   :where([data-control-family="table-of-contents"][data-slot="item"][data-active]) {
     color: var(--cui-table-of-contents-item-active-foreground);
   }
-
-  :where([data-control-family="table-of-contents"][data-slot="root"] [data-control-family="track-highlight"][data-slot="root"]) {
-    --cui-track-highlight-transition-duration: var(--duration-base);
-    --cui-track-highlight-radius: var(--cui-table-of-contents-highlight-radius);
-    --cui-track-highlight-background: var(--cui-table-of-contents-highlight-background);
-    --cui-track-highlight-ring-color: transparent;
-    --cui-track-highlight-shadow: none;
-  }
-
-  :where([data-control-family="table-of-contents"][data-slot="root"][data-variant="trail"]) {
-    --cui-table-of-contents-highlight-radius: 0px;
-    --cui-table-of-contents-highlight-background: transparent;
-  }
-
-  :where([data-control-family="table-of-contents"][data-slot="trail"]) {
-    inline-size: var(--cui-table-of-contents-trail-size);
-    border-radius: var(--cui-table-of-contents-trail-radius);
-    background-color: var(--cui-table-of-contents-trail-background);
-  }
 }
 
 @property --cui-table-of-contents-background {
@@ -230,7 +242,7 @@
   initial-value: 0px;
 }
 
-@property --cui-table-of-contents-rail-background {
+@property --cui-table-of-contents-rail-stroke {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
@@ -242,7 +254,7 @@
   initial-value: 0px;
 }
 
-@property --cui-table-of-contents-trail-background {
+@property --cui-table-of-contents-trail-stroke {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
@@ -254,19 +266,7 @@
   initial-value: 0px;
 }
 
-@property --cui-table-of-contents-trail-radius {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-table-of-contents-highlight-radius {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-table-of-contents-highlight-background {
+@property --cui-table-of-contents-indicator-foreground {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;

package/dist/styles/recipes/tabs.css

@@ -16,6 +16,12 @@
     --cui-tabs-border-color: var(--border);
     --cui-tabs-border-width: 1px;
   }
+
+  :where([data-control-family="tabs"][data-slot="root"][data-orientation="vertical"]) {
+    display: flex;
+    gap: calc(var(--spacing) * 4);
+  }
+
   :where([data-control-family="tabs"][data-slot="list"]) {
     --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--_tabs-trigger-h) / 2));
     position: relative;
@@ -100,6 +106,7 @@
     /* One trigger radius for the flare, plus the surface corner arc it must clear. */
     --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--radius-panel));
     min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding));
+    width: auto;
     align-items: flex-end;
     isolation: isolate;
     /* The slide machinery promotes the surface wrapper mid-switch — the strip stays above it. */
@@ -172,6 +179,20 @@
     outline-style: none;
   }
 
+  :where(
+    [data-control-family="tabs"][data-slot="list"][data-orientation="horizontal"]:not([data-variant="browser"]) ~ [data-slot="panel"]
+  ) {
+    margin-block-start: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] ~ [data-slot="panel"]) {
+    border: var(--cui-tabs-border-width) solid var(--cui-tabs-border-color);
+    border-top: none;
+    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
+    background: var(--cui-tabs-indicator-background);
+    padding: calc(var(--spacing) * 4);
+  }
+
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] [data-control-family="tabs"][data-slot="tab"]) {
     border-top-left-radius: var(--_tabs-trigger-radius-fit);
     border-top-right-radius: var(--_tabs-trigger-radius-fit);

package/dist/styles/recipes/track-highlight.css

@@ -59,7 +59,8 @@
         [data-control-family="checkbox-group"]
       )
       > [data-control-family="track-highlight"]
-  ) {
+  ),
+  :where([data-track]:has(> [data-control-family="button"][data-track-item]) > [data-control-family="track-highlight"]) {
     --cui-track-highlight-radius: var(--radius-control);
   }
 

package/dist/styles/recipes/transcript-divider.css

@@ -3,8 +3,8 @@
     --cui-transcript-divider-foreground: var(--muted-foreground);
     --cui-transcript-divider-line-color: var(--border);
     --cui-transcript-divider-danger-foreground: var(--destructive-text);
-    --cui-transcript-divider-success-foreground: var(--badge-green-foreground);
-    --cui-transcript-divider-warning-foreground: var(--badge-yellow-foreground);
+    --cui-transcript-divider-success-foreground: var(--success-text);
+    --cui-transcript-divider-warning-foreground: var(--warning-text);
     margin-block: calc(var(--spacing) * 2);
     color: var(--cui-transcript-divider-foreground);
     font-size: var(--text-caption);