@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/styles/recipes/switch.css

@@ -16,49 +16,63 @@
     user-select: none;
     --cui-switch-background: oklch(from var(--foreground) l c h / 0.14);
     --cui-switch-hover-background: oklch(from var(--foreground) l c h / 0.2);
+    --cui-switch-border-color: var(--control-boundary);
+    --cui-switch-border-width: var(--control-rim-width);
     --cui-switch-checked-background: var(--primary);
-    --cui-switch-checked-hover-background: oklch(from var(--primary) l c h / 0.9);
+    --cui-switch-checked-hover-background: color-mix(in oklch, var(--primary) 90%, var(--foreground));
+    --cui-switch-checked-border-color: transparent;
+    --cui-switch-radius: 9999px;
+    --cui-switch-shadow: 0 0 transparent;
     --cui-switch-thumb-radius: 9999px;
     --cui-switch-thumb-background: var(--background);
     --cui-switch-thumb-shadow: var(--shadow-sm);
-    border-radius: calc(infinity * 1px);
-    background: var(--cui-switch-background);
-    outline: none;
-  }
-
-  :where([data-control-family="switch"][data-slot="root"]:hover) {
-    background: var(--cui-switch-hover-background);
-  }
-
-  :where([data-control-family="switch"][data-slot="root"]:active) {
-    --cui-switch-background: oklch(from var(--foreground) l c h / 0.25);
+    --_switch-border-color: var(--cui-switch-border-color);
+    border-radius: var(--cui-switch-radius);
     background: var(--cui-switch-background);
+    box-shadow:
+      inset 0 0 0 var(--cui-switch-border-width) var(--_switch-border-color),
+      var(--cui-switch-shadow);
   }
 
   :where([data-control-family="switch"][data-slot="root"][data-checked]) {
     --_switch-progress: 1;
+    --_switch-border-color: var(--cui-switch-checked-border-color);
     background: var(--cui-switch-checked-background);
   }
 
-  :where([data-control-family="switch"][data-slot="root"][data-checked]:hover) {
-    background: var(--cui-switch-checked-hover-background);
+  @media (hover: hover) {
+    :where([data-control-family="switch"][data-slot="root"]:hover:not([data-checked], [data-disabled], [data-readonly])) {
+      background: var(--cui-switch-hover-background);
+    }
+
+    :where([data-control-family="switch"][data-slot="root"][data-checked]:hover:not([data-disabled], [data-readonly])) {
+      background: var(--cui-switch-checked-hover-background);
+    }
   }
 
-  :where([data-control-family="switch"][data-slot="root"][data-checked]:active) {
-    --cui-switch-checked-background: oklch(from var(--primary) l c h / 0.8);
-    background: var(--cui-switch-checked-background);
+  :where([data-control-family="switch"][data-slot="root"]:active:not([data-checked], [data-disabled], [data-readonly])) {
+    --cui-switch-background: oklch(from var(--foreground) l c h / 0.25);
+    background: var(--cui-switch-background);
   }
 
-  :where([data-control-family="switch"][data-slot="root"][data-disabled]) {
-    opacity: 0.5;
+  :where([data-control-family="switch"][data-slot="root"][data-checked]:active:not([data-disabled], [data-readonly])) {
+    --cui-switch-checked-background: color-mix(in oklch, var(--primary) 80%, var(--foreground));
+    background: var(--cui-switch-checked-background);
   }
 
-  :where([data-control-family="switch"][data-slot="root"][data-disabled]:hover) {
-    background: var(--cui-switch-background);
+  :where([data-control-family="switch"][data-slot="root"][data-disabled]) {
+    opacity: var(--disabled-opacity);
   }
 
-  :where([data-control-family="switch"][data-slot="root"][data-disabled][data-checked]:hover) {
-    background: var(--cui-switch-checked-background);
+  @media (pointer: coarse) {
+    :where([data-control-family="switch"][data-slot="root"])::after {
+      content: "";
+      position: absolute;
+      inset: 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, var(--touch-target));
+      block-size: max(100%, var(--touch-target));
+    }
   }
 
   :where([data-control-family="switch"][data-slot="thumb"]) {
@@ -133,10 +147,12 @@
   }
 
   :where([data-control-family="switch"][data-slot="root"][data-drag-checked="false"]) {
+    --_switch-border-color: var(--cui-switch-border-color);
     background: var(--cui-switch-background);
   }
 
   :where([data-control-family="switch"][data-slot="root"][data-drag-checked="true"]) {
+    --_switch-border-color: var(--cui-switch-checked-border-color);
     background: var(--cui-switch-checked-background);
   }
 
@@ -150,12 +166,41 @@
   inherits: true;
 }
 
+@property --cui-switch-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-switch-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-switch-background {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
 
+@property --cui-switch-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-switch-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-switch-checked-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-switch-hover-background {
   syntax: "<color>";
   inherits: true;

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

@@ -2,7 +2,7 @@
   :where([data-control-family="table-of-contents"][data-slot="root"]) {
     --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-border-width: var(--control-rim-width);
     --cui-table-of-contents-radius: var(--radius-panel);
     --cui-table-of-contents-shadow: var(--shadow-sm);
     --cui-table-of-contents-backdrop-filter: none;
@@ -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,12 @@
     --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);
+    --cui-table-of-contents-scroll-inset: calc(var(--spacing) * 20);
     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);
@@ -37,6 +36,7 @@
     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);
+    scroll-margin-block-start: var(--cui-table-of-contents-scroll-inset);
   }
 
   :where([data-control-family="table-of-contents"][data-slot="label"]) {
@@ -47,8 +47,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 +116,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 +244,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 +256,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,20 +268,14 @@
   initial-value: 0px;
 }
 
-@property --cui-table-of-contents-trail-radius {
-  syntax: "<length-percentage>";
+@property --cui-table-of-contents-indicator-foreground {
+  syntax: "<color>";
   inherits: true;
-  initial-value: 0px;
+  initial-value: transparent;
 }
 
-@property --cui-table-of-contents-highlight-radius {
-  syntax: "<length-percentage>";
+@property --cui-table-of-contents-scroll-inset {
+  syntax: "<length>";
   inherits: true;
   initial-value: 0px;
 }
-
-@property --cui-table-of-contents-highlight-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}

package/dist/styles/recipes/table.css

@@ -31,15 +31,17 @@
     border-bottom-width: 1px;
   }
 
-  :where(
-    [data-control-family="table"][data-slot="row"]:is(
-      [data-interactive],
-      [tabindex],
-      [role="button"],
-      :has(a, button, [role="checkbox"])
-    ):hover
-  ) {
-    background: var(--cui-table-row-hover-background);
+  @media (hover: hover) {
+    :where(
+        [data-control-family="table"][data-slot="row"]:is(
+          [data-interactive],
+          [tabindex],
+          [role="button"],
+          :has(a, button, [role="checkbox"])
+        ):hover
+      ) {
+      background: var(--cui-table-row-hover-background);
+    }
   }
 
   :where([data-control-family="table"][data-slot="row"][data-state="selected"]) {
@@ -50,7 +52,7 @@
     block-size: calc(var(--spacing) * 10);
     padding-inline: calc(var(--spacing) * 2);
     color: var(--cui-table-header-foreground);
-    text-align: left;
+    text-align: start;
     font-weight: var(--font-weight-medium);
   }
 
@@ -58,6 +60,7 @@
     margin-block-start: calc(var(--spacing) * 4);
     color: var(--muted-foreground);
     font-size: var(--text-body);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="table"][data-slot="footer"] > tr:last-child) {
@@ -77,6 +80,7 @@
 
   :where([data-control-family="table"][data-slot="cell"]) {
     padding: calc(var(--spacing) * 2);
+    font-variant-numeric: tabular-nums;
   }
 }
 

package/dist/styles/recipes/tabs.css

@@ -12,10 +12,17 @@
     --cui-tabs-indicator-background: var(--background);
     --cui-tabs-foreground: var(--muted-foreground);
     --cui-tabs-active-foreground: var(--foreground);
+    --cui-tabs-hover-foreground: var(--foreground);
     --cui-tabs-indicator-shadow: var(--shadow-sm);
     --cui-tabs-border-color: var(--border);
-    --cui-tabs-border-width: 1px;
+    --cui-tabs-border-width: var(--control-rim-width);
   }
+
+  :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;
@@ -43,7 +50,7 @@
     border-radius: var(--_tabs-trigger-radius-fit);
     background: var(--cui-tabs-indicator-background);
     box-shadow: var(--cui-tabs-indicator-shadow);
-    /* left, not transform, in the browser variant: transform slides on the compositor while width resizes on the main thread — the ends tear apart. */
+    /* Compositor transforms tear the strip while its width resizes. */
     transition:
       width var(--duration-base) var(--ease-standard),
       left var(--duration-base) var(--ease-standard),
@@ -79,11 +86,12 @@
     color: var(--cui-tabs-foreground);
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
-    outline: none;
   }
 
-  :where([data-control-family="tabs"][data-slot="tab"]:hover) {
-    color: var(--foreground);
+  @media (hover: hover) {
+    :where([data-control-family="tabs"][data-slot="tab"]:hover:not([data-disabled])) {
+      color: var(--cui-tabs-hover-foreground);
+    }
   }
 
   :where([data-control-family="tabs"][data-slot="tab"]:is([aria-selected="true"], [data-active])) {
@@ -92,22 +100,21 @@
 
   :where([data-control-family="tabs"][data-slot="tab"][data-disabled]) {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :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));
-    /* 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. */
     z-index: 1;
-    /* Bare-surface chrome: re-pin the pill knobs so a skin's pill styling can't leak in. */
     --cui-tabs-list-background: transparent;
     --cui-tabs-list-shadow: inset 0 -1px 0 var(--cui-tabs-border-color);
     --cui-tabs-indicator-background: var(--background);
+    --cui-tabs-active-foreground: var(--foreground);
     border-radius: var(--cui-tabs-list-radius) var(--cui-tabs-list-radius) 0 0;
   }
 
@@ -128,7 +135,6 @@
     background: var(--cui-tabs-indicator-background);
   }
 
-  /* Flares: the side walls scoop outward into the surface line — an arc no border can draw. */
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] [data-slot="indicator"])::after {
     content: "";
     position: absolute;
@@ -172,6 +178,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);
@@ -186,11 +206,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="tabs"][data-slot="list"][data-orientation="vertical"]:not([data-single="true"]) [data-slot="tab"])::after {
-      inline-size: max(100%, 44px);
+      inline-size: max(100%, var(--touch-target));
       block-size: 100%;
     }
   }
@@ -244,6 +264,12 @@
   initial-value: transparent;
 }
 
+@property --cui-tabs-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-tabs-indicator-shadow {
   syntax: "*";
   inherits: true;

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

@@ -8,7 +8,7 @@
     --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-indicator-foreground: var(--muted-foreground);
     --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);
@@ -32,7 +32,7 @@
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
-    text-align: left;
+    text-align: start;
   }
 
   @media (hover: hover) {
@@ -53,10 +53,10 @@
     :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);
+      inset-inline: 0;
+      inset-block-start: 50%;
+      translate: 0 -50%;
+      block-size: max(100%, var(--touch-target));
     }
   }
 
@@ -94,7 +94,6 @@
 
   :where([data-control-family="task-list"][data-slot="item"][data-status="pending"]) {
     color: var(--cui-task-list-item-pending-foreground);
-    opacity: 0.7;
   }
 
   :where([data-control-family="task-list"][data-slot="item-indicator"]) {
@@ -106,7 +105,7 @@
   }
 
   :where([data-control-family="task-list"][data-slot="item-indicator"][data-status="active"] > svg) {
-    animation: task-list-spin calc(var(--duration-slow) * 2) linear infinite;
+    animation: cui-spin var(--duration-loop) linear infinite;
   }
 
   :where([data-control-family="task-list"][data-slot="progress"]) {
@@ -115,12 +114,6 @@
   }
 }
 
-@keyframes task-list-spin {
-  to {
-    rotate: 360deg;
-  }
-}
-
 @property --cui-task-list-radius {
   syntax: "<length>";
   inherits: true;

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

@@ -26,22 +26,20 @@
     inline-size: calc(var(--spacing) * 2);
     border-radius: var(--cui-thread-rail-line-radius);
     background: oklch(from var(--foreground) l c h / 0.2);
-    outline: none;
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="line"])::before {
+    content: "";
+    position: absolute;
+    inset-block: calc(var(--spacing) * -1);
+    inset-inline-start: 0;
+    inline-size: calc(var(--spacing) * 4);
   }
 
   :where([data-control-family="thread-rail"][data-slot="item"][data-in-view] [data-control-family="thread-rail"][data-slot="line"]) {
     background: oklch(from var(--foreground) l c h / 0.6);
   }
 
-  :where(
-    [data-control-family="thread-rail"][data-slot="item"]:has(+ [data-control-family="thread-rail"][data-slot="item"]:hover)
-      [data-control-family="thread-rail"][data-slot="line"]
-  ),
-  :where(
-    [data-control-family="thread-rail"][data-slot="item"]:hover
-      + [data-control-family="thread-rail"][data-slot="item"]
-      [data-control-family="thread-rail"][data-slot="line"]
-  ),
   :where(
     [data-control-family="thread-rail"][data-slot="item"]:has(+ [data-control-family="thread-rail"][data-slot="item"]:focus-within)
       [data-control-family="thread-rail"][data-slot="line"]
@@ -55,13 +53,33 @@
     background: oklch(from var(--foreground) l c h / 0.45);
   }
 
-  :where(
-    [data-control-family="thread-rail"][data-slot="item"]:where(:hover, :focus-within) [data-control-family="thread-rail"][data-slot="line"]
-  ) {
+  @media (hover: hover) {
+    :where(
+        [data-control-family="thread-rail"][data-slot="item"]:has(+ [data-control-family="thread-rail"][data-slot="item"]:hover)
+          [data-control-family="thread-rail"][data-slot="line"]
+      ),
+    :where(
+        [data-control-family="thread-rail"][data-slot="item"]:hover
+          + [data-control-family="thread-rail"][data-slot="item"]
+          [data-control-family="thread-rail"][data-slot="line"]
+      ) {
+      inline-size: calc(var(--spacing) * 3);
+      background: oklch(from var(--foreground) l c h / 0.45);
+    }
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="item"]:focus-within [data-control-family="thread-rail"][data-slot="line"]) {
     inline-size: calc(var(--spacing) * 4);
     background: var(--foreground);
   }
 
+  @media (hover: hover) {
+    :where([data-control-family="thread-rail"][data-slot="item"]:hover [data-control-family="thread-rail"][data-slot="line"]) {
+      inline-size: calc(var(--spacing) * 4);
+      background: var(--foreground);
+    }
+  }
+
   :where([data-control-family="thread-rail"][data-slot="item"][data-rail-current] [data-control-family="thread-rail"][data-slot="line"]) {
     anchor-name: --_thread-rail-active;
   }
@@ -70,7 +88,7 @@
     position: absolute;
     inset-inline-start: 100%;
     margin-inline-start: calc(var(--spacing) * 3);
-    top: 0;
+    inset-block-start: 0;
     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;
@@ -85,12 +103,17 @@
     -webkit-backdrop-filter: blur(var(--cui-thread-rail-popover-backdrop-blur));
     backdrop-filter: blur(var(--cui-thread-rail-popover-backdrop-blur));
     transition:
-      top var(--duration-slow) var(--ease-standard),
+      inset-block-start var(--duration-slow) var(--ease-standard),
       translate var(--duration-slow) var(--ease-standard),
       height var(--duration-slow) var(--ease-standard),
       opacity var(--duration-base) var(--ease-standard),
       scale var(--duration-base) var(--ease-standard);
-    text-align: left;
+    text-align: start;
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="popover"]:dir(rtl)),
+  :where([data-control-family="thread-rail"][data-slot="popover-layer"]:dir(rtl)) {
+    transform-origin: right center;
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -119,9 +142,9 @@
     }
   }
 
-  @supports (top: anchor(--_thread-rail-active center)) {
+  @supports (inset-block-start: anchor(--_thread-rail-active center)) {
     :where([data-control-family="thread-rail"][data-slot="popover"]) {
-      top: anchor(--_thread-rail-active center);
+      inset-block-start: anchor(--_thread-rail-active center);
       translate: 0 -50%;
     }
   }
@@ -130,7 +153,7 @@
     padding: calc(var(--spacing) * 3.5);
     position: absolute;
     inset-inline: 0;
-    top: 0;
+    inset-block-start: 0;
     transform-origin: left center;
     scale: 0.96;
     opacity: 0;

package/dist/styles/recipes/timeline.css

@@ -55,12 +55,14 @@
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
     line-height: calc(var(--spacing) * 5);
+    text-wrap: balance;
   }
 
   :where([data-control-family="timeline"][data-slot="description"]) {
     color: var(--muted-foreground);
     font-size: var(--text-label);
     line-height: calc(var(--spacing) * 5);
+    text-wrap: pretty;
   }
 }