@ctrl-ui/react 0.9.5 → 0.9.8

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

@@ -75,6 +75,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);

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/swap.css

@@ -0,0 +1,143 @@
+@layer components {
+  :where([data-control-family="swap"][data-slot="root"]) {
+    --cui-swap-animation-duration: var(--duration-slow);
+    --cui-swap-easing: var(--ease-emphasized);
+    --cui-swap-label-inset: 60%;
+    --cui-swap-icon-scale: 0.5;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: inherit;
+    inline-size: var(--_swap-inline-size, auto);
+    transition: inline-size var(--cui-swap-animation-duration) var(--cui-swap-easing);
+  }
+
+  :where([data-control-family="swap"][data-slot="item"]) {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: inherit;
+    white-space: nowrap;
+  }
+
+  :where([data-control-family="swap"][data-slot="item"]:not([data-state="active"])) {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :where([data-control-family="swap"][data-slot="item"][data-state="inactive"]) {
+    visibility: hidden;
+  }
+
+  :where([data-control-family="swap"][data-slot="label"]) {
+    display: inline-block;
+  }
+
+  :where([data-control-family="swap"][data-swapped] > [data-slot="item"][data-state="active"]) {
+    animation: cui-swap-item-enter var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where([data-control-family="swap"][data-swapped] > [data-slot="item"][data-state="exiting"]) {
+    animation: cui-swap-item-exit var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="active"]
+      > :not(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-label-enter var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="exiting"]
+      > :not(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-label-exit var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="active"]
+      > :is(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-icon-enter var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="exiting"]
+      > :is(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-icon-exit var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+}
+
+@keyframes cui-swap-item-enter {
+  from {
+    opacity: 0;
+    filter: blur(var(--blur-xs));
+  }
+}
+
+@keyframes cui-swap-item-exit {
+  from {
+    opacity: 1;
+    filter: blur(0);
+  }
+  to {
+    opacity: 0;
+    filter: blur(var(--blur-xs));
+  }
+}
+
+@keyframes cui-swap-label-enter {
+  from {
+    translate: 0 var(--cui-swap-label-inset);
+  }
+}
+
+@keyframes cui-swap-label-exit {
+  to {
+    translate: 0 calc(var(--cui-swap-label-inset) * -1);
+  }
+}
+
+@keyframes cui-swap-icon-enter {
+  from {
+    scale: var(--cui-swap-icon-scale);
+  }
+}
+
+@keyframes cui-swap-icon-exit {
+  to {
+    scale: var(--cui-swap-icon-scale);
+  }
+}
+
+@property --cui-swap-animation-duration {
+  syntax: "<time>";
+  inherits: true;
+  initial-value: 0s;
+}
+
+@property --cui-swap-easing {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-swap-label-inset {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-swap-icon-scale {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}

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

@@ -3,14 +3,18 @@
     --cui-timeline-indicator-background: var(--background);
     --cui-timeline-indicator-foreground: var(--muted-foreground);
     --cui-timeline-running-foreground: var(--primary-text);
+    --cui-timeline-waiting-foreground: var(--warning-text);
     --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) {
@@ -38,6 +42,10 @@
     color: var(--cui-timeline-running-foreground);
   }
 
+  :where([data-control-family="timeline"][data-slot="item"][data-state="waiting"] [data-control-family="timeline"][data-slot="indicator"]) {
+    color: var(--cui-timeline-waiting-foreground);
+  }
+
   :where([data-control-family="timeline"][data-slot="item"][data-state="success"] [data-control-family="timeline"][data-slot="indicator"]) {
     color: var(--cui-timeline-success-foreground);
   }
@@ -47,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;
   }
@@ -84,6 +94,12 @@
   initial-value: transparent;
 }
 
+@property --cui-timeline-waiting-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-timeline-success-foreground {
   syntax: "<color>";
   inherits: true;
@@ -107,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;
+}