@ctrl-ui/react 0.8.1 → 0.8.4

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

@@ -1,72 +1,87 @@
 @layer components {
   :where([data-control-family="table-of-contents"][data-slot="root"]) {
-    --cui-table-of-contents-rail-background: oklch(from var(--border) l c h / 0.6);
-    --cui-table-of-contents-highlight-radius: var(--radius-md);
-    --cui-table-of-contents-highlight-background: oklch(from var(--foreground) l c h / 0.04);
-    border: 1px solid oklch(from var(--border) l c h / 0.7);
-    border-radius: var(--radius-panel);
-    background-color: oklch(from var(--card) l c h / 0.8);
-    box-shadow: var(--shadow-sm);
-    backdrop-filter: blur(var(--blur-sm));
-    padding: calc(var(--spacing) * 4);
-    font-size: var(--text-sm);
+    --cui-table-of-contents-background: var(--card);
+    --cui-table-of-contents-border-color: var(--border);
+    --cui-table-of-contents-border-width: 1px;
+    --cui-table-of-contents-radius: var(--radius-panel);
+    --cui-table-of-contents-shadow: var(--shadow-sm);
+    --cui-table-of-contents-backdrop-filter: none;
+    --cui-table-of-contents-padding: calc(var(--spacing) * 4);
+    --cui-table-of-contents-label-foreground: var(--muted-foreground);
+    --cui-table-of-contents-label-font-size: var(--text-caption);
+    --cui-table-of-contents-label-font-weight: var(--font-weight-medium);
+    --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-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);
+    --cui-table-of-contents-item-root-font-weight: var(--font-weight-medium);
+    --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: calc(var(--spacing) * 2);
+    --cui-table-of-contents-rail-background: var(--border);
+    --cui-table-of-contents-rail-width: 1px;
+    --cui-table-of-contents-trail-background: var(--foreground);
+    --cui-table-of-contents-trail-width: 2px;
+    --cui-table-of-contents-trail-radius: var(--cui-table-of-contents-trail-width);
+    --cui-table-of-contents-highlight-radius: var(--radius-popup-item);
+    --cui-table-of-contents-highlight-background: var(--active-fill);
+    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);
+    box-shadow: var(--cui-table-of-contents-shadow);
+    -webkit-backdrop-filter: var(--cui-table-of-contents-backdrop-filter);
+    backdrop-filter: var(--cui-table-of-contents-backdrop-filter);
+    padding: var(--cui-table-of-contents-padding);
+    font-size: var(--cui-table-of-contents-item-font-size);
+    line-height: var(--cui-table-of-contents-item-line-height);
   }
 
   :where([data-control-family="table-of-contents"][data-slot="label"]) {
-    margin-block-end: calc(var(--spacing) * 3);
-    color: var(--muted-foreground);
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
+    margin-block-end: var(--cui-table-of-contents-label-gap);
+    color: var(--cui-table-of-contents-label-foreground);
+    font-size: var(--cui-table-of-contents-label-font-size);
+    font-weight: var(--cui-table-of-contents-label-font-weight);
   }
 
   :where([data-control-family="table-of-contents"][data-slot="rail"]) {
+    inline-size: var(--cui-table-of-contents-rail-width);
     background-color: var(--cui-table-of-contents-rail-background);
   }
 
   :where([data-control-family="table-of-contents"][data-slot="item"]) {
-    padding-block: calc(var(--spacing) * 1.5);
-    padding-inline-start: calc(var(--spacing) * 14);
-    color: var(--muted-foreground);
-    font-size: var(--text-sm);
-    font-weight: var(--font-weight-normal);
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
-  }
-
-  :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="1"]) {
-    padding-inline-start: calc(var(--spacing) * 5);
-  }
-
-  :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="2"]) {
-    padding-inline-start: calc(var(--spacing) * 7);
-  }
-
-  :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="3"]) {
-    padding-inline-start: calc(var(--spacing) * 9);
-  }
-
-  :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="4"]) {
-    padding-inline-start: calc(var(--spacing) * 11);
+    padding-block: var(--cui-table-of-contents-item-padding-block);
+    padding-inline: var(--cui-table-of-contents-item-padding-inline);
+    padding-inline-start: calc(
+      var(--cui-table-of-contents-item-padding-inline) +
+      var(--_toc-depth) *
+      var(--cui-table-of-contents-item-indent)
+    );
+    color: var(--cui-table-of-contents-item-foreground);
+    font-size: var(--cui-table-of-contents-item-font-size);
+    font-weight: var(--cui-table-of-contents-item-font-weight);
+    line-height: var(--cui-table-of-contents-item-line-height);
+    overflow-wrap: anywhere;
   }
 
   :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="0"]) {
-    padding-inline-start: calc(var(--spacing) * 3);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-table-of-contents-item-root-font-weight);
   }
 
   @media (hover: hover) {
     :where([data-control-family="table-of-contents"][data-slot="item"]:hover) {
-      color: var(--foreground);
+      color: var(--cui-table-of-contents-item-hover-foreground);
     }
   }
 
   :where([data-control-family="table-of-contents"][data-slot="item"]:focus-visible) {
-    color: var(--foreground);
+    color: var(--cui-table-of-contents-item-hover-foreground);
   }
 
   :where([data-control-family="table-of-contents"][data-slot="item"][data-active]) {
-    color: var(--foreground);
+    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"]) {
@@ -83,17 +98,168 @@
   }
 
   :where([data-control-family="table-of-contents"][data-slot="trail"]) {
-    border-radius: 9999px;
-    background-color: var(--foreground);
+    inline-size: var(--cui-table-of-contents-trail-width);
+    border-radius: var(--cui-table-of-contents-trail-radius);
+    background-color: var(--cui-table-of-contents-trail-background);
   }
 }
 
+@property --cui-table-of-contents-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-of-contents-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-of-contents-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-table-of-contents-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-table-of-contents-shadow {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-table-of-contents-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-table-of-contents-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-table-of-contents-label-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-of-contents-label-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --cui-table-of-contents-label-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-table-of-contents-label-gap {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-table-of-contents-item-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-of-contents-item-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-of-contents-item-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-of-contents-item-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --cui-table-of-contents-item-line-height {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1.5;
+}
+
+@property --cui-table-of-contents-item-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-table-of-contents-item-root-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-table-of-contents-item-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-table-of-contents-item-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-table-of-contents-item-indent {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-table-of-contents-rail-background {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
 
+@property --cui-table-of-contents-rail-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-table-of-contents-trail-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-of-contents-trail-width {
+  syntax: "<length>";
+  inherits: true;
+  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;

package/dist/styles/recipes/table.css

@@ -27,7 +27,6 @@
 
   :where([data-control-family="table"][data-slot="row"]) {
     border-bottom-color: var(--cui-table-border-color);
-    transition: background-color var(--duration-fast) var(--ease-standard);
     border-bottom-style: solid;
     border-bottom-width: 1px;
   }

package/dist/styles/recipes/tabs.css

@@ -14,6 +14,7 @@
     --cui-tabs-active-foreground: var(--foreground);
     --cui-tabs-indicator-shadow: var(--shadow-sm);
     --cui-tabs-border-color: var(--border);
+    --cui-tabs-border-width: 1px;
   }
   :where([data-control-family="tabs"][data-slot="list"]) {
     --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--_tabs-trigger-h) / 2));
@@ -51,6 +52,17 @@
       box-shadow var(--duration-fast) var(--ease-standard);
   }
 
+  :where([data-control-family="tabs"][data-slot="list"][data-orientation="vertical"]) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-orientation="vertical"] [data-slot="indicator"]) {
+    top: 0;
+    height: var(--active-tab-height);
+    transform: translate(var(--active-tab-left), var(--active-tab-top));
+  }
+
   :where([data-control-family="tabs"][data-slot="tab"]) {
     position: relative;
     z-index: 1;
@@ -68,7 +80,6 @@
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
     outline: none;
-    transition: color var(--duration-fast) var(--ease-standard);
   }
 
   :where([data-control-family="tabs"][data-slot="tab"]:hover) {
@@ -111,7 +122,7 @@
     content: "";
     position: absolute;
     inset: 0 var(--_tabs-trigger-radius-fit);
-    border: 1px solid var(--cui-tabs-border-color);
+    border: var(--cui-tabs-border-width) solid var(--cui-tabs-border-color);
     border-bottom: none;
     border-radius: var(--_tabs-trigger-radius-fit) var(--_tabs-trigger-radius-fit) 0 0;
     background: var(--cui-tabs-indicator-background);
@@ -233,3 +244,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-tabs-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/task-list.css

@@ -2,6 +2,7 @@
   :where([data-control-family="task-list"][data-slot="root"]) {
     --cui-task-list-background: oklch(from var(--card) l c h / 0.9);
     --cui-task-list-border-color: var(--border);
+    --cui-task-list-border-width: 1px;
     --cui-task-list-foreground: var(--foreground);
     --cui-task-list-radius: var(--radius-field);
     --cui-task-list-shadow: var(--shadow-md);
@@ -9,7 +10,7 @@
     --cui-task-list-indicator-foreground: oklch(from var(--muted-foreground) l c h / 0.7);
     --cui-task-list-item-foreground: var(--foreground);
     --cui-task-list-item-pending-foreground: var(--muted-foreground);
-    border: 1px solid var(--cui-task-list-border-color);
+    border: var(--cui-task-list-border-width) solid var(--cui-task-list-border-color);
     border-radius: var(--cui-task-list-radius);
     background: var(--cui-task-list-background);
     color: var(--cui-task-list-foreground);
@@ -25,7 +26,6 @@
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
     font-size: var(--text-sm);
-    transition: background-color var(--duration-fast) var(--ease-standard);
     text-align: left;
   }
 
@@ -116,6 +116,12 @@
   initial-value: transparent;
 }
 
+@property --cui-task-list-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-task-list-shadow {
   syntax: "*";
   inherits: true;

package/dist/styles/recipes/thread-rail.css

@@ -27,10 +27,6 @@
     border-radius: var(--cui-thread-rail-line-radius);
     background: oklch(from var(--foreground) l c h / 0.2);
     outline: none;
-    transition:
-      width var(--duration-base) var(--ease-standard),
-      background-color var(--duration-base) var(--ease-standard),
-      box-shadow var(--duration-base) var(--ease-standard);
   }
 
   :where([data-control-family="thread-rail"][data-slot="item"][data-in-view] [data-control-family="thread-rail"][data-slot="line"]) {

package/dist/styles/recipes/toolbar.css

@@ -8,6 +8,7 @@
     --cui-toolbar-background: oklch(from var(--card) l c h / 0.72);
     --cui-toolbar-foreground: var(--foreground);
     --cui-toolbar-border-color: var(--border);
+    --cui-toolbar-border-width: 1px;
     --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;
@@ -18,7 +19,7 @@
     --cui-toolbar-item-active-background: var(--active-fill);
     --cui-toolbar-item-active-foreground: var(--foreground);
     --cui-toolbar-separator-background: var(--border);
-    border: 1px solid var(--cui-toolbar-border-color);
+    border: var(--cui-toolbar-border-width) solid var(--cui-toolbar-border-color);
     padding: var(--cui-toolbar-padding);
     border-radius: var(--cui-toolbar-radius);
     background-color: var(--cui-toolbar-background);
@@ -27,6 +28,16 @@
     gap: calc(var(--spacing) * 1);
   }
 
+  :where([data-control-family="toolbar"][data-slot="root"][data-variant="floating"]) {
+    --cui-toolbar-background: transparent;
+    --cui-toolbar-border-color: transparent;
+    --cui-toolbar-shadow: none;
+    --cui-toolbar-item-foreground: var(--foreground);
+    position: relative;
+    isolation: isolate;
+    border-width: 0;
+  }
+
   :where([data-control-family="toolbar"][data-slot="root"][data-variant="inverse"]) {
     --cui-toolbar-background: var(--foreground);
     --cui-toolbar-foreground: var(--background);
@@ -52,9 +63,6 @@
     box-shadow: var(--cui-toolbar-item-shadow);
     color: var(--cui-toolbar-item-foreground);
     font-weight: var(--font-weight-medium);
-    transition-property: background-color, color, box-shadow;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
   }
 
   :where([data-control-family="toolbar"][data-slot="group"]) {
@@ -201,6 +209,12 @@
   initial-value: transparent;
 }
 
+@property --cui-toolbar-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-toolbar-shadow {
   syntax: "*";
   inherits: true;

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

@@ -4,7 +4,7 @@
     --_track-highlight-opacity: 0;
     border-radius: var(--cui-track-highlight-radius);
     opacity: var(--_track-highlight-opacity);
-    transition-property: top, left, right, bottom, width, height, opacity, background-color, box-shadow;
+    transition-property: top, left, right, bottom, width, height, opacity;
     transition-duration: var(--cui-track-highlight-transition-duration);
     transition-timing-function: var(--ease-emphasized);
   }
@@ -16,7 +16,8 @@
     --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);
-    background: var(--cui-track-highlight-background);
+    --_track-highlight-fill: var(--cui-track-highlight-background);
+    background: var(--_track-highlight-fill);
     box-shadow:
       0 0 0 1px var(--cui-track-highlight-ring-color),
       var(--cui-track-highlight-shadow);
@@ -24,7 +25,7 @@
 
   :where([data-control-family="track-highlight"][data-slot="root"][data-hover]),
   :where([data-track="hover"] > [data-control-family="track-highlight"][data-slot="root"]) {
-    --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
+    --_track-highlight-fill: var(--cui-track-highlight-hover-background);
     --cui-track-highlight-ring-color: transparent;
     --cui-track-highlight-shadow: none;
   }
@@ -33,6 +34,11 @@
     background: var(--cui-track-highlight-hover-background);
   }
 
+  :where([data-track="hover"] > [data-control-family="track-highlight"]),
+  :where([data-control-family="track-highlight"][data-slot="hover"]) {
+    transition: none;
+  }
+
   :where([data-control-family="track-highlight"][data-slot="root"][data-visible]),
   :where([data-control-family="track-highlight"][data-slot="hover"][data-visible]) {
     --_track-highlight-opacity: 1;
@@ -57,6 +63,58 @@
     --cui-track-highlight-radius: var(--radius-control);
   }
 
+  :where([data-control-family="button-group"][data-track="hover"]) {
+    --_button-group-leading-cap: 0;
+    --_button-group-trailing-cap: 0;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="button-group"][data-track="hover"]:has(> :first-child:hover)) {
+      --_button-group-leading-cap: 1;
+    }
+
+    :where(
+        [data-control-family="button-group"][data-track="hover"]:has(
+          > :nth-last-child(1 of :not([data-control-family="track-highlight"])):hover
+        )
+      ) {
+      --_button-group-trailing-cap: 1;
+    }
+  }
+
+  :where([data-control-family="button-group"][data-track="hover"]:has(:focus-visible)) {
+    --_button-group-leading-cap: 0;
+    --_button-group-trailing-cap: 0;
+  }
+
+  :where([data-control-family="button-group"][data-track="hover"]:has(> :first-child:is(:focus-visible, :has(:focus-visible)))) {
+    --_button-group-leading-cap: 1;
+  }
+
+  :where(
+    [data-control-family="button-group"][data-track="hover"]:has(
+      > :nth-last-child(1 of :not([data-control-family="track-highlight"])):is(:focus-visible, :has(:focus-visible))
+    )
+  ) {
+    --_button-group-trailing-cap: 1;
+  }
+
+  :where(
+    [data-control-family="button-group"][data-track="hover"][data-orientation="horizontal"] > [data-control-family="track-highlight"]
+  ) {
+    border-start-start-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-leading-cap));
+    border-end-start-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-leading-cap));
+    border-start-end-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-trailing-cap));
+    border-end-end-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-trailing-cap));
+  }
+
+  :where([data-control-family="button-group"][data-track="hover"][data-orientation="vertical"] > [data-control-family="track-highlight"]) {
+    border-start-start-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-leading-cap));
+    border-start-end-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-leading-cap));
+    border-end-start-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-trailing-cap));
+    border-end-end-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-trailing-cap));
+  }
+
   @supports ((anchor-name: --cui-track) and (anchor-scope: --cui-track)) {
     :where([data-track]:has(> [data-control-family="track-highlight"])) {
       anchor-scope: --cui-track-active, --cui-track-hover, --cui-track-focus;
@@ -120,7 +178,7 @@
             ):not(:has(:focus-visible, [data-track] [data-track-item]:hover))
             > [data-control-family="track-highlight"][data-positioning="anchor"]:not([data-measured])
         ) {
-        --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
+        --_track-highlight-fill: var(--cui-track-highlight-hover-background);
         --cui-track-highlight-ring-color: transparent;
         --cui-track-highlight-shadow: none;
       }
@@ -155,7 +213,7 @@
           ):not(:has([data-track] :focus-visible))
           > [data-control-family="track-highlight"][data-positioning="anchor"]:not([data-measured])
       ) {
-      --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
+      --_track-highlight-fill: var(--cui-track-highlight-hover-background);
       --cui-track-highlight-ring-color: transparent;
       --cui-track-highlight-shadow: none;
     }

package/dist/styles/recipes/tree.css

@@ -17,6 +17,8 @@
 
   :where([data-control-family="tree"][data-slot="root"] > [data-control-family="track-highlight"]) {
     --cui-track-highlight-radius: var(--cui-tree-item-trigger-radius);
+    --cui-track-highlight-background: var(--cui-tree-item-trigger-selected-background);
+    --cui-track-highlight-hover-background: var(--cui-tree-item-trigger-hover-background);
   }
 
   :where([data-control-family="tree"][data-slot="item-trigger"]) {

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

@@ -2,6 +2,7 @@
   :where([data-control-family="user-ask"][data-slot="root"]) {
     --cui-user-ask-background: oklch(from var(--card) l c h / 0.9);
     --cui-user-ask-border-color: var(--border);
+    --cui-user-ask-border-width: 1px;
     --cui-user-ask-foreground: var(--foreground);
     --cui-user-ask-radius: var(--radius-field);
     --cui-user-ask-shadow: var(--shadow-md);
@@ -12,7 +13,7 @@
     --cui-user-ask-option-hover-background: oklch(from var(--muted) l c h / 0.5);
     --cui-user-ask-option-radius: var(--radius-popup-item);
     --cui-user-ask-option-selected-background: oklch(from var(--muted) l c h / 0.7);
-    border: 1px solid var(--cui-user-ask-border-color);
+    border: var(--cui-user-ask-border-width) solid var(--cui-user-ask-border-color);
     border-radius: var(--cui-user-ask-radius);
     background: var(--cui-user-ask-background);
     color: var(--cui-user-ask-foreground);
@@ -61,9 +62,6 @@
     padding-block: calc(var(--spacing) * 1.5);
     border-radius: var(--cui-user-ask-option-radius);
     font-size: var(--text-sm);
-    transition-property: background-color, box-shadow;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
     text-align: left;
   }
 
@@ -156,6 +154,12 @@
   initial-value: transparent;
 }
 
+@property --cui-user-ask-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-user-ask-shadow {
   syntax: "*";
   inherits: true;