@ctrl-ui/react 0.9.6 → 0.9.9

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

@@ -10,6 +10,7 @@
     --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-floating-inset: calc(var(--spacing) * 2);
     --cui-page-layout-background: var(--canvas);
     --cui-page-layout-sticky-header-background: oklch(from var(--cui-page-layout-background) l c h / 0.85);
     --cui-page-layout-sticky-header-backdrop-filter: blur(12px);
@@ -28,6 +29,12 @@
     --cui-page-layout-article-size: 80rem;
   }
 
+  @media (width >= 48rem) {
+    :where([data-control-family="page-layout"][data-slot="root"]) {
+      --cui-page-layout-padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+
   :where([data-control-family="page-layout"][data-slot="root"][data-width="full"]) {
     --cui-page-layout-size: none;
     --cui-page-layout-padding-inline: calc(var(--spacing) * 6);
@@ -117,14 +124,17 @@
     }
   }
 
-  /* Zero height: the band hangs over the body instead of displacing it. */
+  /* Zero height: the band hangs over the body instead of displacing it, pinned to the container corner. */
   :where([data-control-family="page-layout"][data-slot="header"][data-variant="floating"]) {
     position: sticky;
-    inset-block-start: var(--cui-page-layout-sticky-gap);
+    inset-block-start: var(--cui-page-layout-floating-inset);
     z-index: 20;
     align-items: start;
+    max-width: none;
     height: 0;
+    row-gap: 0;
     padding-block: 0;
+    padding-inline: var(--cui-page-layout-floating-inset);
     pointer-events: none;
   }
 
@@ -239,6 +249,12 @@
   initial-value: 0px;
 }
 
+@property --cui-page-layout-floating-inset {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-page-layout-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/pagination.css

@@ -5,6 +5,7 @@
     --cui-pagination-link-hover-background: var(--hover-fill);
     --cui-pagination-link-foreground: var(--foreground);
     --cui-pagination-link-shadow: none;
+    --cui-pagination-link-font-size: 1em;
   }
   :where([data-control-family="pagination"][data-slot="content"]) {
     gap: calc(var(--spacing) * 1);
@@ -20,6 +21,7 @@
       inset 0 0 0 var(--control-rim-width) var(--_pagination-link-border-color),
       var(--cui-pagination-link-shadow);
     color: var(--cui-pagination-link-foreground);
+    font-size: var(--cui-pagination-link-font-size);
     font-variant-numeric: tabular-nums;
   }
 
@@ -102,3 +104,9 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-pagination-link-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

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

@@ -1,4 +1,10 @@
 @layer components {
+  :where([data-control-family="popup"][data-popup-part="item"][data-tone="danger"]) {
+    --cui-popup-item-foreground: var(--destructive-text);
+    --cui-popup-item-highlight-background: oklch(from var(--destructive-text) l c h / 0.12);
+    --cui-popup-item-highlight-foreground: var(--destructive-text);
+  }
+
   :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"]),
   :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="title"]),
@@ -75,6 +81,15 @@
     gap: calc(var(--spacing) * 4);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-popup-part="surface"]) {
+    max-inline-size: var(--cui-popup-dialog-max-inline-size);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-popup-part="surface"]) {
+    --cui-popup-dialog-max-inline-size: 28rem;
+    max-inline-size: var(--cui-popup-dialog-max-inline-size);
+  }
+
   :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);
@@ -103,6 +118,32 @@
     padding: calc(var(--spacing) * 4);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="content"]:has(> [data-slot="body"])) {
+    gap: 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="body"]) {
+    gap: calc(var(--spacing) * 4);
+    overscroll-behavior: contain;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="body"][data-padding="default"]) {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="header"]:has(+ [data-slot="body"])) {
+    border-block-end: 1px solid var(--cui-popup-separator-color);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="body"] + [data-slot="footer"]) {
+    border-block-start: 1px solid var(--cui-popup-separator-color);
+  }
+
   :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);

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

@@ -85,6 +85,7 @@
   /* 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);
+    padding-inline: calc(var(--spacing) * 4);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"][data-padding="default"]:last-child) {

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

@@ -64,12 +64,12 @@
   }
 
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="group"] [cmdk-group-heading]) {
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1.5);
-    text-transform: uppercase;
-    font-size: var(--text-caption);
+    padding-inline: var(--cui-popup-command-heading-padding-inline);
+    padding-block: var(--cui-popup-command-heading-padding-block);
+    text-transform: var(--cui-popup-command-heading-text-transform);
+    font-size: var(--cui-popup-command-heading-font-size);
     font-weight: var(--font-weight-medium);
-    letter-spacing: 0.08em;
+    letter-spacing: var(--cui-popup-command-heading-letter-spacing);
   }
 
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="empty"]),
@@ -153,7 +153,7 @@
   }
 
   :where([data-control-family="popup"][data-popup-part="separator"]) {
-    margin-block: calc(var(--spacing) * 1);
+    margin-block: var(--cui-popup-separator-gap);
     margin-inline: var(--cui-popup-separator-inset);
     block-size: 1px;
     background-color: var(--cui-popup-separator-color);
@@ -175,6 +175,7 @@
     margin-inline-start: auto;
     padding-inline-start: calc(var(--spacing) * 4);
     line-height: 1;
+    color: var(--cui-popup-submenu-indicator-foreground);
   }
 
   :where([data-control-family="popup"][data-popup-part="bar"]) {
@@ -317,3 +318,51 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-popup-separator-gap {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-submenu-indicator-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-command-heading-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-command-heading-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-command-heading-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-command-heading-letter-spacing {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-command-heading-text-transform {
+  syntax: "none | uppercase | lowercase | capitalize";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-popup-dialog-max-inline-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

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

@@ -63,7 +63,13 @@
   }
 
   :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-popup-part="surface"][data-arrow="true"]) {
-    --_popup-tooltip-content-radius: clamp(0px, var(--cui-popup-radius), 3px);
+    --_popup-tooltip-content-radius: clamp(0px, var(--cui-popup-radius), var(--cui-popup-tooltip-arrow-radius));
     border-radius: var(--_popup-tooltip-content-radius);
   }
 }
+
+@property --cui-popup-tooltip-arrow-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/popup.css

@@ -37,6 +37,15 @@
     --cui-popup-label-text-transform: uppercase;
     --cui-popup-separator-color: var(--border);
     --cui-popup-separator-inset: calc(var(--popover-padding) * -1);
+    --cui-popup-separator-gap: calc(var(--spacing) * 1);
+    --cui-popup-submenu-indicator-foreground: var(--cui-popup-item-foreground);
+    --cui-popup-tooltip-arrow-radius: 3px;
+    --cui-popup-command-heading-padding-block: calc(var(--spacing) * 1.5);
+    --cui-popup-command-heading-padding-inline: calc(var(--spacing) * 2);
+    --cui-popup-command-heading-font-size: var(--text-caption);
+    --cui-popup-command-heading-letter-spacing: calc(var(--cui-popup-command-heading-font-size) * 0.08);
+    --cui-popup-command-heading-text-transform: uppercase;
+    --cui-popup-dialog-max-inline-size: 32rem;
     --cui-popup-shortcut-foreground: var(--muted-foreground);
     --cui-popup-shortcut-font-size: var(--text-body);
     --cui-popup-shortcut-letter-spacing: 0.02em;
@@ -197,6 +206,7 @@
     )
   ) {
     --cui-popup-shortcut-foreground: var(--cui-popup-item-highlight-foreground);
+    --cui-popup-submenu-indicator-foreground: var(--cui-popup-item-highlight-foreground);
     --muted-foreground: var(--cui-popup-item-highlight-muted-foreground);
     background-color: var(--cui-popup-item-highlight-background);
     color: var(--cui-popup-item-highlight-foreground);

package/dist/styles/recipes/range.css

@@ -5,6 +5,8 @@
     --cui-range-indicator-radius: 9999px;
     --cui-range-indicator-background: var(--primary);
     --cui-range-thumb-radius: 9999px;
+    --cui-range-thumb-inline-size: calc(var(--spacing) * 3.5);
+    --cui-range-thumb-block-size: calc(var(--spacing) * 3.5);
     --cui-range-thumb-background: var(--background);
     --cui-range-thumb-border-color: var(--control-rim);
     --cui-range-thumb-shadow: var(--shadow-sm);
@@ -85,8 +87,8 @@
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="default"]) {
-    inline-size: calc(var(--spacing) * 3.5);
-    block-size: calc(var(--spacing) * 3.5);
+    inline-size: var(--cui-range-thumb-inline-size);
+    block-size: var(--cui-range-thumb-block-size);
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]) {
@@ -347,6 +349,18 @@
   initial-value: 0px;
 }
 
+@property --cui-range-thumb-inline-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-range-thumb-block-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-range-thumb-background {
   syntax: "<color>";
   inherits: true;

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

@@ -93,7 +93,7 @@
     box-shadow: var(--cui-sidebar-nav-shadow);
   }
 
-  @media (width < 64rem) {
+  @variant max-sidebar {
     :where([data-control-family="sidebar"][data-slot="wrapper"]:has(> [data-slot="mobile-nav-container"])) {
       flex-direction: column;
     }

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

@@ -94,7 +94,7 @@
     --focus-ring-offset: calc(var(--focus-ring-width) * -1);
   }
 
-  @media (width >= 64rem) {
+  @variant sidebar {
     :where(
         [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state]
           ~ [data-control-family="sidebar"][data-slot="inset"]
@@ -122,6 +122,10 @@
     box-shadow: var(--cui-sidebar-header-shadow);
   }
 
+  :where([data-control-family="sidebar"][data-slot="header"][data-divider]) {
+    border-block-end: var(--cui-sidebar-header-border-width) solid var(--cui-sidebar-header-border-color);
+  }
+
   :where([data-control-family="sidebar"][data-slot="content-stack"]) {
     gap: calc(var(--spacing) * 2);
   }
@@ -219,3 +223,15 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-sidebar-header-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-header-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/sidebar.css

@@ -17,6 +17,11 @@
     background-image: var(--cui-sidebar-wrapper-background-image);
   }
 
+  :where([data-control-family="sidebar"][data-slot="wrapper"][data-surface="background"]) {
+    --cui-sidebar-wrapper-background: var(--background);
+    color: var(--foreground);
+  }
+
   :where([data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-variant="inset"][data-state])) {
     --cui-sidebar-wrapper-background: var(--sidebar);
   }
@@ -35,6 +40,8 @@
     --cui-sidebar-inner-shadow: none;
     --cui-sidebar-header-background: transparent;
     --cui-sidebar-header-shadow: 0 0 transparent;
+    --cui-sidebar-header-border-width: 1px;
+    --cui-sidebar-header-border-color: var(--sidebar-border);
     --cui-sidebar-rail-divider-background: transparent;
     --cui-sidebar-group-label-foreground: oklch(from var(--sidebar-foreground) l c h / 0.7);
     --cui-sidebar-group-label-font-size: var(--text-caption);
@@ -71,6 +78,10 @@
     background-color: transparent;
   }
 
+  :where([data-control-family="sidebar"][data-slot="root"]:is([data-variant="page"], [data-variant="inset"])[data-state]) {
+    --cui-sidebar-header-border-width: 0px;
+  }
+
   :where([data-control-family="sidebar"][data-slot="gap"]) {
     background-color: transparent;
     transition: width var(--_sidebar-transition-duration) var(--ease-standard);

package/dist/styles/recipes/skeleton.css

@@ -15,6 +15,14 @@
     background-image: var(--cui-skeleton-background-image);
   }
 
+  :where([data-control-family="skeleton"][data-slot="root"][data-shape="circle"]) {
+    --cui-skeleton-radius: 9999px;
+  }
+
+  :where([data-control-family="skeleton"][data-slot="root"][data-shape="panel"]) {
+    --cui-skeleton-radius: var(--radius-panel);
+  }
+
   :where([data-control-family="skeleton"][data-slot="root"][data-variant="shimmer"]) {
     --cui-skeleton-easing: linear;
   }

package/dist/styles/recipes/tabs.css

@@ -22,6 +22,8 @@
     --cui-tabs-indicator-shadow: var(--shadow-sm);
     --cui-tabs-border-color: var(--border);
     --cui-tabs-border-width: var(--control-rim-width);
+    --cui-tabs-font-size: var(--text-label);
+    --cui-tabs-font-weight: var(--font-weight-medium);
   }
 
   :where([data-control-family="tabs"][data-slot="root"][data-orientation="vertical"]) {
@@ -30,14 +32,15 @@
   }
 
   :where([data-control-family="tabs"][data-slot="list"]) {
-    --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--_tabs-trigger-h) / 2));
+    --cui-tabs-trigger-height: var(--control-h-sm);
+    --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--cui-tabs-trigger-height) / 2));
     position: relative;
     display: flex;
-    min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding) + var(--cui-tabs-list-padding));
+    min-height: calc(var(--cui-tabs-trigger-height) + var(--cui-tabs-list-padding) + var(--cui-tabs-list-padding));
     width: fit-content;
     align-items: center;
     gap: calc(var(--spacing) * 1);
-    border-radius: min(var(--cui-tabs-list-radius), calc(var(--_tabs-trigger-h) / 2 + var(--cui-tabs-list-padding)));
+    border-radius: min(var(--cui-tabs-list-radius), calc(var(--cui-tabs-trigger-height) / 2 + var(--cui-tabs-list-padding)));
     background: var(--cui-tabs-list-background);
     box-shadow: var(--cui-tabs-list-shadow);
     padding: var(--cui-tabs-list-padding);
@@ -45,12 +48,24 @@
     backdrop-filter: var(--cui-tabs-list-backdrop-filter);
   }
 
+  :where([data-control-family="tabs"][data-slot="list"][data-size="xs"]) {
+    --cui-tabs-trigger-height: var(--control-h-xs);
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-size="md"]) {
+    --cui-tabs-trigger-height: var(--control-h-md);
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-size="lg"]) {
+    --cui-tabs-trigger-height: var(--control-h-lg);
+  }
+
   :where([data-control-family="tabs"][data-slot="indicator"]) {
     position: absolute;
     top: 50%;
     left: 0;
     z-index: 0;
-    height: var(--_tabs-trigger-h);
+    height: var(--cui-tabs-trigger-height);
     width: var(--active-tab-width);
     transform: translateX(var(--active-tab-left)) translateY(-50%);
     border-radius: var(--_tabs-trigger-radius-fit);
@@ -81,7 +96,7 @@
     position: relative;
     z-index: 1;
     display: inline-flex;
-    height: var(--_tabs-trigger-h);
+    height: var(--cui-tabs-trigger-height);
     flex-shrink: 0;
     cursor: pointer;
     align-items: center;
@@ -91,8 +106,8 @@
     border-radius: var(--_tabs-trigger-radius-fit);
     padding-inline: calc(var(--spacing) * 3.5);
     color: var(--cui-tabs-foreground);
-    font-size: var(--text-label);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--cui-tabs-font-size);
+    font-weight: var(--cui-tabs-font-weight);
   }
 
   :where([data-control-family="tabs"][data-slot="list"]:not([data-orientation="vertical"], [data-variant="browser"]) [data-slot="tab"]) {
@@ -129,7 +144,7 @@
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"]) {
     --_tabs-browser-corner-double: calc(var(--_tabs-trigger-radius-fit) + var(--_tabs-trigger-radius-fit));
     --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--cui-tabs-surface-radius));
-    min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding));
+    min-height: calc(var(--cui-tabs-trigger-height) + var(--cui-tabs-list-padding));
     width: auto;
     align-items: flex-end;
     isolation: isolate;
@@ -269,6 +284,12 @@
   initial-value: 0px;
 }
 
+@property --cui-tabs-trigger-height {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-tabs-list-padding {
   syntax: "<length-percentage>";
   inherits: true;
@@ -304,6 +325,18 @@
   initial-value: transparent;
 }
 
+@property --cui-tabs-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tabs-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
 @property --cui-tabs-active-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/timeline.css

@@ -7,11 +7,14 @@
     --cui-timeline-success-foreground: var(--foreground);
     --cui-timeline-error-foreground: var(--destructive-text);
     --cui-timeline-separator-background: var(--border);
+    --cui-timeline-separator-inline-size: 1px;
     --cui-timeline-title-foreground: var(--foreground);
+    --cui-timeline-title-font-weight: var(--font-weight-medium);
+    --cui-timeline-item-padding-block: calc(var(--spacing) * 5);
   }
   :where([data-control-family="timeline"][data-slot="item"]) {
     column-gap: calc(var(--spacing) * 3);
-    padding-block-end: calc(var(--spacing) * 5);
+    padding-block-end: var(--cui-timeline-item-padding-block);
   }
 
   :where([data-control-family="timeline"][data-slot="item"]:last-child) {
@@ -52,13 +55,15 @@
   }
 
   :where([data-control-family="timeline"][data-slot="separator"]) {
+    inset-inline-start: calc(var(--spacing) * 2 - var(--cui-timeline-separator-inline-size) / 2);
+    inline-size: var(--cui-timeline-separator-inline-size);
     background: var(--cui-timeline-separator-background);
   }
 
   :where([data-control-family="timeline"][data-slot="title"]) {
     color: var(--cui-timeline-title-foreground);
     font-size: var(--text-label);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-timeline-title-font-weight);
     line-height: calc(var(--spacing) * 5);
     text-wrap: balance;
   }
@@ -118,3 +123,21 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-timeline-title-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-timeline-item-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-timeline-separator-inline-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/tree.css

@@ -10,6 +10,8 @@
     --cui-tree-item-trigger-font-size: var(--text-body);
     --cui-tree-item-trigger-selected-font-weight: var(--font-weight-normal);
     --cui-tree-indent-inset: 1.25rem;
+    --cui-tree-guide-background: transparent;
+    --cui-tree-guide-inline-size: 1px;
   }
 
   :where([data-control-family="tree"][data-slot="list"]) {
@@ -119,10 +121,29 @@
   }
 
   :where([data-control-family="tree"][data-slot="item-group"]) {
+    position: relative;
     translate: 0 0;
     transition: translate var(--duration-base) var(--ease-emphasized);
   }
 
+  :where([data-control-family="tree"][data-slot="item-group"])::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(
+      var(--_tree-level, 1) *
+      var(--cui-tree-indent-inset) +
+      var(--spacing) *
+      2 -
+      var(--cui-tree-guide-inline-size) /
+      2
+    );
+    inline-size: var(--cui-tree-guide-inline-size);
+    border-radius: var(--cui-tree-guide-inline-size);
+    background-color: var(--cui-tree-guide-background);
+    pointer-events: none;
+  }
+
   :where([data-control-family="tree"][data-slot="item-content"]:is([data-starting-style], [data-ending-style]) > [data-slot="item-group"]) {
     translate: 0 calc(var(--spacing) * -1);
   }
@@ -187,3 +208,15 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-tree-guide-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tree-guide-inline-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/theme.css

@@ -242,10 +242,15 @@
   --font-body: var(--font-sans);
   --font-display: var(--font-sans);
   --text-micro: 0.625rem;
+  --text-micro--line-height: 1.5;
   --text-caption: 0.6875rem;
+  --text-caption--line-height: 1.5;
   --text-label: 0.75rem;
+  --text-label--line-height: 1.5;
   --text-body: 0.875rem;
+  --text-body--line-height: 1.5;
   --text-body-lg: 1rem;
+  --text-body-lg--line-height: 1.5;
   --text-heading-4: 0.9375rem;
   --text-heading-4--line-height: 1.4;
   --text-heading-4--font-weight: 600;
@@ -421,7 +426,7 @@
 /* biome-ignore-end lint/complexity/noImportantStyles: Reduced motion must override skin and inline motion. */
 
 @theme static {
-  --breakpoint-lg: 64rem;
+  --breakpoint-sidebar: 64rem;
 }
 
 @theme inline {
@@ -485,10 +490,15 @@
   --spacing-control-lg: var(--control-h-lg);
 
   --text-micro: var(--text-micro);
+  --text-micro--line-height: var(--text-micro--line-height);
   --text-caption: var(--text-caption);
+  --text-caption--line-height: var(--text-caption--line-height);
   --text-label: var(--text-label);
+  --text-label--line-height: var(--text-label--line-height);
   --text-body: var(--text-body);
+  --text-body--line-height: var(--text-body--line-height);
   --text-body-lg: var(--text-body-lg);
+  --text-body-lg--line-height: var(--text-body-lg--line-height);
   --text-heading-4: var(--text-heading-4);
   --text-heading-4--line-height: var(--text-heading-4--line-height);
   --text-heading-4--font-weight: var(--text-heading-4--font-weight);

package/dist/surface-variants.d.ts

@@ -1,5 +1,7 @@
 //#region src/surface-variants.d.ts
 export declare const popupItemStructureClasses = "flex select-none items-center";
+export declare const popupItemTones: readonly ["neutral", "danger"];
+export type PopupItemTone = (typeof popupItemTones)[number];
 export declare const popupParts: readonly ["backdrop", "surface", "list-surface", "list-content", "bar", "item", "navigation-link", "label", "separator", "shortcut"];
 export type PopupPart = (typeof popupParts)[number];
 //#endregion