@ctrl-ui/react 0.8.4 → 0.8.5

package/dist/styles/recipes/popup.css

@@ -61,7 +61,7 @@
     background-color: var(--cui-popup-backdrop-background);
     -webkit-backdrop-filter: blur(var(--backdrop-blur-overlay));
     backdrop-filter: blur(var(--backdrop-blur-overlay));
-    transition: opacity var(--duration-base) var(--ease-standard);
+    transition: opacity var(--duration-base) var(--ease-emphasized);
   }
   :where(.dark [data-control-family="popup"][data-popup-part="backdrop"]) {
     --cui-popup-backdrop-background: oklch(from var(--background) l c h / var(--overlay-opacity));
@@ -99,21 +99,21 @@
     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="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);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="description"]) {
-    color: var(--muted-foreground);
-    font-size: var(--text-body);
+    text-wrap: balance;
   }
 
   :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"]) {
@@ -242,11 +242,7 @@
     font-weight: var(--font-weight-semibold);
     line-height: 1;
     letter-spacing: -0.01em;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="description"]) {
-    color: var(--muted-foreground);
-    font-size: var(--text-body);
+    text-wrap: balance;
   }
 
   :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="positioner"]) {

package/dist/styles/recipes/range.css

@@ -34,6 +34,7 @@
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="track"]) {
     block-size: calc(var(--spacing) * 1.5);
+    touch-action: pan-y;
     transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
@@ -94,19 +95,24 @@
     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);
   }
 
-  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]:where(:hover, [data-dragging])) {
-    scale: 1.1;
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]:hover) {
+      scale: 1.1;
+    }
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-dragging]) {
+    scale: 1.1;
     box-shadow: var(--shadow-md);
   }
 
@@ -184,6 +190,11 @@
     padding-inline: 0;
   }
 
+  :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="track"]),
+  :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="thumb"]) {
+    touch-action: pan-x;
+  }
+
   :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="track"]) {
     inline-size: calc(var(--spacing) * 1.5);
     block-size: 100%;
@@ -257,6 +268,17 @@
     font-weight: var(--font-weight-medium);
     color: var(--foreground);
   }
+
+  @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);
+    }
+  }
 }
 
 @property --cui-range-track-radius {

package/dist/styles/recipes/rich-tooltip.css

@@ -56,6 +56,7 @@
     line-height: var(--_rich-tooltip-title-line-height);
     --_rich-tooltip-title-letter-spacing: var(--_rich-tooltip-content-title-letter-spacing);
     letter-spacing: var(--_rich-tooltip-title-letter-spacing);
+    text-wrap: balance;
   }
 
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"]) {

package/dist/styles/recipes/source-badge.css

@@ -22,6 +22,26 @@
     }
   }
 
+  :where([data-control-family="badge"][data-source-badge][data-slot="root"]:focus-visible) {
+    background: var(--cui-source-badge-hover-background);
+    color: var(--cui-source-badge-hover-foreground);
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="badge"][data-source-badge][data-slot="root"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="badge"][data-source-badge][data-slot="root"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
+
   :where([data-control-family="badge"][data-source-badge][data-slot="root"] [data-slot="label"]) {
     max-inline-size: calc(var(--spacing) * 44);
   }

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

@@ -20,12 +20,12 @@
     --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-item-indent-size: calc(var(--spacing) * 2);
     --cui-table-of-contents-rail-background: var(--border);
-    --cui-table-of-contents-rail-width: 1px;
+    --cui-table-of-contents-rail-size: 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-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);
     border: var(--cui-table-of-contents-border-width) solid var(--cui-table-of-contents-border-color);
@@ -47,7 +47,7 @@
   }
 
   :where([data-control-family="table-of-contents"][data-slot="rail"]) {
-    inline-size: var(--cui-table-of-contents-rail-width);
+    inline-size: var(--cui-table-of-contents-rail-size);
     background-color: var(--cui-table-of-contents-rail-background);
   }
 
@@ -57,7 +57,7 @@
     padding-inline-start: calc(
       var(--cui-table-of-contents-item-padding-inline) +
       var(--_toc-depth) *
-      var(--cui-table-of-contents-item-indent)
+      var(--cui-table-of-contents-item-indent-size)
     );
     color: var(--cui-table-of-contents-item-foreground);
     font-size: var(--cui-table-of-contents-item-font-size);
@@ -98,7 +98,7 @@
   }
 
   :where([data-control-family="table-of-contents"][data-slot="trail"]) {
-    inline-size: var(--cui-table-of-contents-trail-width);
+    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);
   }
@@ -224,7 +224,7 @@
   initial-value: 0px;
 }
 
-@property --cui-table-of-contents-item-indent {
+@property --cui-table-of-contents-item-indent-size {
   syntax: "<length>";
   inherits: true;
   initial-value: 0px;
@@ -236,7 +236,7 @@
   initial-value: transparent;
 }
 
-@property --cui-table-of-contents-rail-width {
+@property --cui-table-of-contents-rail-size {
   syntax: "<length>";
   inherits: true;
   initial-value: 0px;
@@ -248,7 +248,7 @@
   initial-value: transparent;
 }
 
-@property --cui-table-of-contents-trail-width {
+@property --cui-table-of-contents-trail-size {
   syntax: "<length>";
   inherits: true;
   initial-value: 0px;

package/dist/styles/recipes/tabs.css

@@ -178,6 +178,22 @@
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="tabs"][data-slot="list"]:not([data-single="true"]) [data-slot="tab"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+
+    :where([data-control-family="tabs"][data-slot="list"][data-orientation="vertical"]:not([data-single="true"]) [data-slot="tab"])::after {
+      inline-size: max(100%, 44px);
+      block-size: 100%;
+    }
+  }
 }
 
 @property --cui-tabs-trigger-radius {

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

@@ -2,20 +2,27 @@
   :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-border-width: var(--control-rim-width);
     --cui-task-list-foreground: var(--foreground);
     --cui-task-list-radius: var(--radius-field);
+    --cui-task-list-ring-color: oklch(from var(--foreground) l c h / 0.04);
     --cui-task-list-shadow: var(--shadow-md);
     --cui-task-list-indicator-active-foreground: var(--primary-text);
     --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);
+    --cui-task-list-items-padding: calc(var(--spacing) * 2);
+    --cui-task-list-item-radius: max(
+      var(--radius-sm),
+      min(var(--radius-popup-item-fit), calc(var(--cui-task-list-radius) - var(--cui-task-list-items-padding)))
+    );
+    --cui-task-list-trigger-hover-background: oklch(from var(--muted) l c h / 0.4);
     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);
     box-shadow:
-      inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.04),
+      inset 0 0 0 var(--control-rim-width) var(--cui-task-list-ring-color),
       var(--cui-task-list-shadow);
     backdrop-filter: blur(var(--backdrop-blur-popover));
     font-size: var(--text-body);
@@ -25,13 +32,31 @@
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
-    font-size: var(--text-sm);
     text-align: left;
   }
 
   @media (hover: hover) {
     :where([data-control-family="task-list"][data-slot="trigger"]:hover) {
-      background: oklch(from var(--muted) l c h / 0.4);
+      background: var(--cui-task-list-trigger-hover-background);
+    }
+  }
+
+  :where([data-control-family="task-list"][data-slot="trigger"]:focus-visible) {
+    background: var(--cui-task-list-trigger-hover-background);
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="task-list"][data-slot="trigger"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="task-list"][data-slot="trigger"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
     }
   }
 
@@ -46,21 +71,25 @@
   :where([data-control-family="task-list"][data-slot="chevron"]) {
     inline-size: calc(var(--spacing) * 3.5);
     block-size: calc(var(--spacing) * 3.5);
+    transition: rotate var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="task-list"][data-slot="trigger"][data-state="open"] [data-slot="chevron"]) {
+    rotate: 90deg;
   }
 
   :where([data-control-family="task-list"][data-slot="items"]) {
     gap: calc(var(--spacing) * 0.5);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block-end: calc(var(--spacing) * 2);
+    padding-inline: var(--cui-task-list-items-padding);
+    padding-block-end: var(--cui-task-list-items-padding);
   }
 
   :where([data-control-family="task-list"][data-slot="item"]) {
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 1.5);
     padding-block: calc(var(--spacing) * 1);
-    border-radius: var(--radius-popup-item);
+    border-radius: var(--cui-task-list-item-radius);
     color: var(--cui-task-list-item-foreground);
-    font-size: var(--text-sm);
   }
 
   :where([data-control-family="task-list"][data-slot="item"][data-status="pending"]) {
@@ -98,6 +127,30 @@
   initial-value: 0px;
 }
 
+@property --cui-task-list-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-task-list-items-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-task-list-item-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-task-list-trigger-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-task-list-background {
   syntax: "<color>";
   inherits: true;

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

@@ -6,11 +6,11 @@
     --cui-thread-rail-popover-radius: var(--radius-popover);
     --cui-thread-rail-popover-background: var(--popover);
     --cui-thread-rail-popover-border-color: var(--border);
-    --cui-thread-rail-popover-border-width: 1px;
+    --cui-thread-rail-popover-border-width: var(--control-rim-width);
     --cui-thread-rail-popover-shadow: var(--shadow-pop);
     --cui-thread-rail-popover-backdrop-blur: var(--backdrop-blur-popover);
-    --aui-rail-pitch: 9px;
-    --aui-rail-inset: 12.5px;
+    --_thread-rail-pitch: calc(var(--spacing) * 2 + 1px);
+    --_thread-rail-inset: calc(var(--spacing) * 2 + var(--_thread-rail-pitch) / 2);
     position: relative;
     inline-size: calc(var(--spacing) * 4);
   }
@@ -63,7 +63,7 @@
   }
 
   :where([data-control-family="thread-rail"][data-slot="item"][data-rail-current] [data-control-family="thread-rail"][data-slot="line"]) {
-    anchor-name: --aui-rail-active;
+    anchor-name: --_thread-rail-active;
   }
 
   :where([data-control-family="thread-rail"][data-slot="popover"]) {
@@ -71,7 +71,8 @@
     inset-inline-start: 100%;
     margin-inline-start: calc(var(--spacing) * 3);
     top: 0;
-    translate: 0 calc(var(--aui-rail-inset) + var(--aui-rail-active-index, 0) * var(--aui-rail-pitch) - 50%);
+    translate: 0 calc(var(--_thread-rail-inset) + var(--_thread-rail-active-index, 0) * var(--_thread-rail-pitch) - 50%);
+    transform-origin: left center;
     scale: 0.98;
     opacity: 0;
     border-radius: var(--cui-thread-rail-popover-radius);
@@ -89,14 +90,19 @@
       height var(--duration-slow) var(--ease-standard),
       opacity var(--duration-base) var(--ease-standard),
       scale var(--duration-base) var(--ease-standard);
-    will-change: top, translate, height, opacity, scale;
     text-align: left;
   }
 
-  :where(
-    [data-control-family="thread-rail"][data-slot="root"]:has([data-control-family="thread-rail"][data-slot="item"]:hover)
-      [data-control-family="thread-rail"][data-slot="popover"]
-  ),
+  @media (hover: hover) and (pointer: fine) {
+    :where(
+        [data-control-family="thread-rail"][data-slot="root"]:has([data-control-family="thread-rail"][data-slot="item"]:hover)
+          [data-control-family="thread-rail"][data-slot="popover"]
+      ) {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+
   :where([data-control-family="thread-rail"][data-slot="root"]:focus-within [data-control-family="thread-rail"][data-slot="popover"]) {
     scale: 1;
     opacity: 1;
@@ -113,9 +119,9 @@
     }
   }
 
-  @supports (top: anchor(--aui-rail-active center)) {
+  @supports (top: anchor(--_thread-rail-active center)) {
     :where([data-control-family="thread-rail"][data-slot="popover"]) {
-      top: anchor(--aui-rail-active center);
+      top: anchor(--_thread-rail-active center);
       translate: 0 -50%;
     }
   }
@@ -180,7 +186,7 @@
     margin-block-start: calc(var(--spacing) * 3);
     gap: calc(var(--spacing) * 2);
     padding-block-start: calc(var(--spacing) * 2.5);
-    border-block-start: 1px solid oklch(from var(--border) l c h / 0.6);
+    border-block-start: var(--control-rim-width) solid oklch(from var(--border) l c h / 0.6);
   }
 
   :where([data-control-family="thread-rail"][data-slot="summary"]) {

package/dist/styles/recipes/toolbar.css

@@ -177,6 +177,27 @@
   :where([data-control-family="toolbar"][data-slot="button"]) {
     outline-style: none;
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="toolbar"][data-slot="button"]),
+    :where([data-control-family="toolbar"][data-slot="link"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="toolbar"][data-slot="button"])::after,
+    :where([data-control-family="toolbar"][data-slot="link"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+
+    :where([data-control-family="toolbar"][data-slot="input"]) {
+      font-size: max(16px, var(--text-label));
+    }
+  }
 }
 
 @property --cui-toolbar-radius {

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

@@ -18,6 +18,7 @@
 
   :where([data-control-family="transcript-divider"][data-slot="label"]) {
     padding-inline: calc(var(--spacing) * 2);
+    font-variant-numeric: tabular-nums;
   }
 
   :where([data-control-family="transcript-divider"][data-slot="root"][data-tone="success"]) {

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

@@ -1,27 +1,34 @@
 @layer components {
   :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);
+    --cui-user-ask-background: var(--popover);
+    --cui-user-ask-backdrop-filter: blur(var(--backdrop-blur-popover));
+    --cui-user-ask-border-color: var(--control-rim);
+    --cui-user-ask-border-width: var(--control-rim-width);
+    --cui-user-ask-foreground: var(--popover-foreground);
+    --cui-user-ask-padding: calc(var(--spacing) * 3);
+    --cui-user-ask-radius: var(--radius-popover);
+    --cui-user-ask-shadow: var(--shadow-pop);
     --cui-user-ask-indicator-background: var(--muted);
     --cui-user-ask-indicator-foreground: var(--muted-foreground);
+    --cui-user-ask-indicator-radius: 9999px;
+    --cui-user-ask-indicator-multiple-radius: var(--radius-sm);
     --cui-user-ask-input-background: transparent;
     --cui-user-ask-input-foreground: var(--foreground);
-    --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: var(--cui-user-ask-border-width) solid var(--cui-user-ask-border-color);
+    --cui-user-ask-option-hover-background: var(--hover-fill);
+    --cui-user-ask-option-radius: max(
+      var(--radius-sm),
+      min(var(--radius-popup-item-fit), calc(var(--cui-user-ask-radius) - var(--cui-user-ask-padding)))
+    );
+    --cui-user-ask-option-selected-background: var(--active-fill);
     border-radius: var(--cui-user-ask-radius);
     background: var(--cui-user-ask-background);
     color: var(--cui-user-ask-foreground);
     box-shadow:
-      inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.04),
+      inset 0 0 0 var(--cui-user-ask-border-width) var(--cui-user-ask-border-color),
       var(--cui-user-ask-shadow);
-    backdrop-filter: blur(var(--backdrop-blur-popover));
-    padding: calc(var(--spacing) * 3);
+    -webkit-backdrop-filter: var(--cui-user-ask-backdrop-filter);
+    backdrop-filter: var(--cui-user-ask-backdrop-filter);
+    padding: var(--cui-user-ask-padding);
     font-size: var(--text-body);
     transition-property: opacity, translate;
     transition-duration: var(--duration-base);
@@ -43,7 +50,7 @@
 
   :where([data-control-family="user-ask"][data-slot="title"]) {
     color: var(--foreground);
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
   }
 
   :where([data-control-family="user-ask"][data-slot="pagination"]) {
@@ -61,7 +68,6 @@
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 1.5);
     border-radius: var(--cui-user-ask-option-radius);
-    font-size: var(--text-sm);
     text-align: left;
   }
 
@@ -75,6 +81,16 @@
     }
   }
 
+  :where([data-control-family="user-ask"][data-slot="option"]:focus-visible) {
+    background: var(--cui-user-ask-option-hover-background);
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="user-ask"][data-slot="option"]) {
+      min-block-size: 44px;
+    }
+  }
+
   :where([data-control-family="user-ask"][data-slot="option"]:disabled) {
     opacity: 0.5;
   }
@@ -83,7 +99,7 @@
     margin-block-start: 1px;
     inline-size: calc(var(--spacing) * 5);
     block-size: calc(var(--spacing) * 5);
-    border-radius: var(--radius-control);
+    border-radius: var(--cui-user-ask-indicator-radius);
     background: var(--cui-user-ask-indicator-background);
     color: var(--cui-user-ask-indicator-foreground);
     font-size: var(--text-micro);
@@ -94,6 +110,10 @@
     color: var(--primary-foreground);
   }
 
+  :where([data-control-family="user-ask"][data-slot="option-indicator"][data-multiple]) {
+    border-radius: var(--cui-user-ask-indicator-multiple-radius);
+  }
+
   :where([data-control-family="user-ask"][data-slot="option-label"]) {
     color: var(--foreground);
   }
@@ -136,6 +156,29 @@
   initial-value: 0px;
 }
 
+@property --cui-user-ask-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-user-ask-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-user-ask-indicator-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-user-ask-indicator-multiple-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-user-ask-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/theme.css

@@ -49,6 +49,11 @@
   --duration-slow: 300ms;
   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --z-overlay: 70;
+  --z-modal: 71;
+  --z-popup: 80;
+  --z-tooltip: 90;
+  --z-toast: 95;
   --popover-padding: 0.25rem;
   --font-body: var(--font-sans);
   --font-display: var(--font-sans);
@@ -459,6 +464,35 @@
       }
     }
   }
+
+  body {
+    font-synthesis: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :where(
+    [data-control-family]:is(
+      a[href],
+      button,
+      input,
+      label,
+      select,
+      summary,
+      textarea,
+      [role="button"],
+      [role="checkbox"],
+      [role="menuitem"],
+      [role="menuitemcheckbox"],
+      [role="menuitemradio"],
+      [role="option"],
+      [role="radio"],
+      [role="switch"],
+      [role="tab"]
+    )
+  ) {
+    touch-action: manipulation;
+  }
 }
 
 @layer components {

package/dist/thread-rail.js

@@ -35,7 +35,7 @@ function ThreadRail({ className, children, style, ...props }) {
 	}, [hovered]);
 	const railStyle = {
 		...style,
-		"--aui-rail-active-index": hovered
+		"--_thread-rail-active-index": hovered
 	};
 	return /* @__PURE__ */ jsx(RailContext.Provider, {
 		value: {