@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/styles/recipes/toolbar.css

@@ -2,13 +2,17 @@
   :where([data-control-family="toolbar"][data-slot="root"]) {
     --cui-toolbar-radius: calc(
       min(var(--cui-toolbar-item-radius), calc(var(--control-h-sm) / 2)) +
-      clamp(0px, calc(min(var(--cui-toolbar-item-radius), calc(var(--control-h-sm) / 2)) * 1000), var(--cui-toolbar-padding))
+      clamp(
+        0px,
+        calc(min(var(--cui-toolbar-item-radius), calc(var(--control-h-sm) / 2)) * 1000),
+        calc(var(--cui-toolbar-padding) + var(--cui-toolbar-border-width))
+      )
     );
     --cui-toolbar-padding: calc(var(--spacing) * 1);
-    --cui-toolbar-background: oklch(from var(--card) l c h / 0.72);
+    --cui-toolbar-background: var(--control-fill);
     --cui-toolbar-foreground: var(--foreground);
     --cui-toolbar-border-color: var(--border);
-    --cui-toolbar-border-width: 1px;
+    --cui-toolbar-border-width: var(--control-rim-width);
     --cui-toolbar-shadow: var(--shadow-sm);
     --cui-toolbar-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
     --cui-toolbar-item-background: transparent;
@@ -51,6 +55,23 @@
     --cui-toolbar-separator-background: oklch(from var(--background) l c h / 0.2);
   }
 
+  :where([data-control-family="toolbar"][data-slot="root"][data-variant="inverse"] [data-control-family="button"][data-control="true"]) {
+    --cui-button-background: var(--cui-toolbar-item-background);
+    --cui-button-foreground: var(--cui-toolbar-item-foreground);
+    --cui-button-shadow: var(--cui-toolbar-item-shadow);
+    --cui-button-hover-background: var(--cui-toolbar-item-hover-background);
+    --cui-button-hover-foreground: var(--cui-toolbar-item-hover-foreground);
+    --cui-button-hover-shadow: var(--cui-toolbar-item-shadow);
+    --cui-button-press-background: var(--cui-toolbar-item-hover-background);
+    --cui-button-open-background: var(--cui-toolbar-item-hover-background);
+    --cui-button-open-foreground: var(--cui-toolbar-item-hover-foreground);
+    --cui-button-open-shadow: var(--cui-toolbar-item-shadow);
+    --cui-button-active-background: var(--cui-toolbar-item-active-background);
+    --cui-button-active-hover-background: var(--cui-toolbar-item-active-background);
+    --cui-button-active-foreground: var(--cui-toolbar-item-active-foreground);
+    --cui-button-active-shadow: var(--cui-toolbar-item-shadow);
+  }
+
   :where([data-control-family="toolbar"][data-slot="button"]),
   :where([data-control-family="toolbar"][data-slot="link"]),
   :where([data-control-family="toolbar"][data-slot="input"]) {
@@ -99,7 +120,7 @@
 
   :where([data-control-family="toolbar"][data-slot="button"][data-disabled]),
   :where([data-control-family="toolbar"][data-slot="input"][data-disabled]) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="toolbar"][data-slot="input"]) {
@@ -107,7 +128,6 @@
     --_toolbar-input-placeholder-foreground: var(--muted-foreground);
     background-color: transparent;
     color: var(--_toolbar-input-foreground);
-    outline-style: none;
   }
 
   :where([data-control-family="toolbar"][data-slot="input"])::placeholder {
@@ -139,19 +159,6 @@
     }
   }
 
-  :where([data-control-family="toolbar"][data-slot="root"][data-variant="inverse"] [data-control-family="button"][data-slot="root"]) {
-    --cui-button-background: transparent;
-    --cui-button-foreground: oklch(from var(--background) l c h / 0.7);
-    --cui-button-hover-background: oklch(from var(--background) l c h / 0.1);
-    --cui-button-hover-foreground: var(--background);
-    --cui-button-press-background: oklch(from var(--background) l c h / 0.12);
-    --cui-button-active-background: var(--background);
-    --cui-button-active-foreground: var(--foreground);
-    --cui-button-active-hover-background: var(--background);
-    --cui-button-shadow: 0 0 transparent;
-    --cui-button-active-shadow: 0 0 transparent;
-  }
-
   :where([data-control-family="toolbar"][data-slot="root"][data-variant="inverse"] [data-slot="link"][data-variant="track"]) {
     --_toolbar-track-active-hover-foreground: oklch(from var(--background) l c h / 0.7);
   }
@@ -171,11 +178,6 @@
 
   :where([data-control-family="toolbar"][data-slot="link"]) {
     text-decoration-line: none;
-    outline-style: none;
-  }
-
-  :where([data-control-family="toolbar"][data-slot="button"]) {
-    outline-style: none;
   }
 
   @media (pointer: coarse) {
@@ -191,11 +193,11 @@
       inset: 50% 50%;
       translate: -50% -50%;
       inline-size: 100%;
-      block-size: max(100%, 44px);
+      block-size: max(100%, var(--touch-target));
     }
 
     :where([data-control-family="toolbar"][data-slot="input"]) {
-      font-size: max(16px, var(--text-label));
+      font-size: max(var(--text-input-min), var(--text-label));
     }
   }
 }

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

@@ -1,4 +1,13 @@
 @layer components {
+  :where([data-control-family="track-highlight"]) {
+    --cui-track-highlight-background: var(--card);
+    --cui-track-highlight-hover-background: color-mix(in oklab, var(--card) 92%, var(--foreground) 8%);
+    --cui-track-highlight-radius: var(--radius-popup-item);
+    --cui-track-highlight-ring-color: oklch(from var(--foreground) l c h / 0.05);
+    --cui-track-highlight-shadow: var(--shadow-sm);
+    --cui-track-highlight-transition-duration: var(--duration-fast);
+  }
+
   :where([data-control-family="track-highlight"][data-slot="root"]),
   :where([data-control-family="track-highlight"][data-slot="hover"]) {
     --_track-highlight-opacity: 0;
@@ -10,12 +19,6 @@
   }
 
   :where([data-control-family="track-highlight"][data-slot="root"]) {
-    --cui-track-highlight-background: var(--card);
-    --cui-track-highlight-hover-background: color-mix(in oklab, var(--card) 92%, var(--foreground) 8%);
-    --cui-track-highlight-radius: var(--radius-popup-item);
-    --cui-track-highlight-ring-color: oklch(from var(--foreground) l c h / 0.05);
-    --cui-track-highlight-shadow: var(--shadow-sm);
-    --cui-track-highlight-transition-duration: var(--duration-fast);
     --_track-highlight-fill: var(--cui-track-highlight-background);
     background: var(--_track-highlight-fill);
     box-shadow:
@@ -48,7 +51,7 @@
     [data-track="hover"]:is([data-control-family="button-group"], [data-control-family="button"][data-slot="group"])
       > [data-control-family="track-highlight"]
   ) {
-    --cui-track-highlight-hover-background: oklch(from var(--foreground) l c h / 0.06);
+    --cui-track-highlight-hover-background: var(--hover-fill);
   }
 
   :where([data-track]:has(> [data-control-family="button"][data-track-item]) > [data-control-family="track-highlight"]),
@@ -59,7 +62,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);

package/dist/styles/recipes/tree.css

@@ -8,11 +8,20 @@
     --cui-tree-item-trigger-selected-foreground: var(--foreground);
     --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;
+  }
+
+  :where([data-control-family="tree"][data-slot="list"]) {
+    --_tree-focus-ring-width: var(--focus-ring-width);
   }
 
-  :where([data-control-family="tree"][data-slot="root"]),
   :where([data-control-family="tree"][data-slot="item"]) {
-    outline: none;
+    --focus-ring-width: 0px;
+  }
+
+  :where([data-control-family="tree"][data-slot="item"]:focus-visible > [data-slot="item-trigger"]) {
+    outline: var(--_tree-focus-ring-width) var(--focus-ring-style) var(--focus-ring);
+    outline-offset: calc(var(--_tree-focus-ring-width) * -1);
   }
 
   :where([data-control-family="tree"][data-slot="root"] > [data-control-family="track-highlight"]) {
@@ -24,13 +33,13 @@
   :where([data-control-family="tree"][data-slot="item-trigger"]) {
     gap: calc(var(--spacing) * 1.5);
     padding-block: calc(var(--spacing) * 1);
+    padding-inline-start: calc(var(--_tree-level, 1) * var(--cui-tree-indent-inset));
     padding-inline-end: calc(var(--spacing) * 2);
     border-radius: var(--cui-tree-item-trigger-radius);
     background-color: transparent;
     color: var(--cui-tree-item-trigger-foreground);
     font-size: var(--cui-tree-item-trigger-font-size);
     font-weight: var(--font-weight-normal);
-    outline: none;
   }
 
   @media (hover: hover) {
@@ -47,7 +56,7 @@
   }
 
   :where([data-control-family="tree"][data-slot="item-trigger"][aria-disabled="true"]) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where(
@@ -70,6 +79,18 @@
     rotate: 90deg;
   }
 
+  :where([data-control-family="tree"][data-slot="item-indicator"][data-state="open"]:has(> [data-icon-dir="inline"]):dir(rtl)) {
+    rotate: -90deg;
+  }
+
+  @media (forced-colors: active) {
+    :where([data-control-family="tree"][data-slot="item-trigger"][data-selected]) {
+      forced-color-adjust: none;
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+
   :where([data-control-family="tree"][data-slot="item-content"]) {
     height: var(--collapsible-panel-height);
     overflow: hidden;
@@ -141,3 +162,9 @@
   inherits: true;
   initial-value: 400;
 }
+
+@property --cui-tree-indent-inset {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/user-ask-details.css

@@ -11,7 +11,6 @@
 
   :where([data-control-family="user-ask"][data-slot="option-input"]) {
     font-weight: var(--font-weight-medium);
-    outline-style: none;
   }
 
   :where([data-control-family="user-ask"][data-slot="option-indicator"]) {

package/dist/styles/recipes/user-ask.css

@@ -68,7 +68,7 @@
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 1.5);
     border-radius: var(--cui-user-ask-option-radius);
-    text-align: left;
+    text-align: start;
   }
 
   :where([data-control-family="user-ask"][data-slot="option"][data-selected]) {
@@ -76,7 +76,7 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="user-ask"][data-slot="option"]:hover) {
+    :where([data-control-family="user-ask"][data-slot="option"]:not(:disabled):hover) {
       background: var(--cui-user-ask-option-hover-background);
     }
   }
@@ -87,12 +87,12 @@
 
   @media (pointer: coarse) {
     :where([data-control-family="user-ask"][data-slot="option"]) {
-      min-block-size: 44px;
+      min-block-size: var(--touch-target);
     }
   }
 
   :where([data-control-family="user-ask"][data-slot="option"]:disabled) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="user-ask"][data-slot="option-indicator"]) {