@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/styles/recipes/sidebar.css

@@ -5,10 +5,43 @@
     --cui-sidebar-inset-background: var(--background);
     --cui-sidebar-inset-background-image: none;
     --cui-sidebar-inset-shadow: var(--shadow-sm);
+    --cui-sidebar-inset-border-color: var(--sidebar-border);
+    --cui-sidebar-inset-border-width: 0px;
+    --cui-sidebar-inset-radius: var(--radius-xl);
+    --cui-sidebar-inset-inset: calc(var(--spacing) * 2);
+    --cui-sidebar-skip-link-background: var(--background);
+    --cui-sidebar-skip-link-foreground: var(--foreground);
+    --cui-sidebar-skip-link-radius: var(--radius-control);
+    --cui-sidebar-skip-link-shadow: var(--shadow-md);
     background-color: var(--cui-sidebar-wrapper-background);
     background-image: var(--cui-sidebar-wrapper-background-image);
   }
 
+  :where([data-control-family="sidebar"][data-slot="skip-link"]) {
+    position: absolute;
+    inset-block-start: calc(var(--spacing) * 3);
+    inset-inline-start: calc(var(--spacing) * 3);
+    z-index: var(--z-popup);
+    padding-block: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    border-radius: var(--cui-sidebar-skip-link-radius);
+    background-color: var(--cui-sidebar-skip-link-background);
+    color: var(--cui-sidebar-skip-link-foreground);
+    box-shadow: var(--cui-sidebar-skip-link-shadow);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="skip-link"]:not(:focus)) {
+    overflow: hidden;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
   :where([data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-variant="inset"][data-state])) {
     --cui-sidebar-wrapper-background: var(--sidebar);
   }
@@ -25,16 +58,33 @@
     --cui-sidebar-inner-border-width: 0px;
     --cui-sidebar-inner-radius: 0px;
     --cui-sidebar-inner-shadow: none;
+    --cui-sidebar-header-background: transparent;
+    --cui-sidebar-header-shadow: 0 0 transparent;
     --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);
+    --cui-sidebar-group-label-font-weight: 500;
+    --cui-sidebar-group-label-letter-spacing: 0em;
+    --cui-sidebar-group-label-text-transform: none;
+    --cui-sidebar-group-label-padding: 0px calc(var(--spacing) * 2);
+    --cui-sidebar-menu-button-height: var(--control-h-md);
+    --cui-sidebar-menu-button-padding-block: 0px;
+    --cui-sidebar-menu-button-padding-inline: var(--padding-x);
+    --cui-sidebar-menu-button-font-size: var(--text-body);
+    --cui-sidebar-menu-button-font-weight: 400;
+    --cui-sidebar-menu-button-active-font-weight: 500;
     --cui-sidebar-menu-button-radius: var(--radius-popup-item);
     --cui-sidebar-menu-button-foreground: var(--sidebar-foreground);
+    --cui-sidebar-menu-badge-height: calc(var(--spacing) * 5);
+    --cui-sidebar-menu-badge-background: oklch(from var(--sidebar-foreground) l c h / 0.08);
+    --cui-sidebar-menu-badge-foreground: var(--sidebar-foreground);
     --cui-sidebar-menu-button-hover-background: var(--hover-fill);
     --cui-sidebar-menu-button-hover-foreground: var(--foreground);
     --cui-sidebar-menu-button-hover-shadow: 0 0 transparent;
     --cui-sidebar-menu-button-active-background: var(--active-fill);
     --cui-sidebar-menu-button-active-shadow: 0 0 transparent;
     --cui-sidebar-menu-button-active-foreground: var(--foreground);
+    --cui-sidebar-menu-button-track-active-foreground: var(--foreground);
     background-color: var(--sidebar);
     color: var(--sidebar-foreground);
   }
@@ -79,132 +129,11 @@
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="floating"][data-state]) {
-    --cui-sidebar-inner-border-width: 1px;
+    --cui-sidebar-inner-border-width: var(--control-rim-width);
     --cui-sidebar-inner-radius: var(--radius-panel);
     --cui-sidebar-inner-shadow: var(--shadow-md);
   }
 
-  :where([data-control-family="sidebar"][data-slot="rail"]) {
-    inline-size: calc(var(--spacing) * 4);
-    background-image: linear-gradient(var(--cui-sidebar-rail-divider-background), var(--cui-sidebar-rail-divider-background));
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 2px 100%;
-  }
-
-  :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]) {
-    background-position: right;
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="rail"]:hover) {
-      --cui-sidebar-rail-divider-background: var(--sidebar-border);
-    }
-
-    :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]:not([data-resizable]):hover) {
-      background-color: var(--sidebar);
-    }
-  }
-
-  :where([data-control-family="sidebar"][data-slot="rail"][data-resizable]) {
-    inline-size: calc(var(--spacing) * 2);
-    background: none;
-  }
-
-  :where([data-control-family="sidebar"][data-slot="rail"][data-resizable])::after {
-    content: "";
-    position: absolute;
-    inset-block: 12.5%;
-    inset-inline-start: 50%;
-    inline-size: 1px;
-    background-image: linear-gradient(transparent, var(--cui-sidebar-rail-divider-background), transparent);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="rail"]:is(:focus-visible, [data-resizing="true"])) {
-    --cui-sidebar-rail-divider-background: var(--ring);
-    outline: none;
-  }
-
-  :where([data-control-family="sidebar"][data-slot="inset"]) {
-    background-color: var(--cui-sidebar-inset-background);
-    background-image: var(--cui-sidebar-inset-background-image);
-  }
-
-  @media (width >= 64rem) {
-    :where(
-        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state]
-          ~ [data-control-family="sidebar"][data-slot="inset"]
-      ) {
-      margin: calc(var(--spacing) * 2);
-      margin-inline-start: 0;
-      border-radius: var(--radius-xl);
-      box-shadow: var(--cui-sidebar-inset-shadow);
-    }
-
-    :where(
-        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="collapsed"]
-          ~ [data-control-family="sidebar"][data-slot="inset"]
-      ) {
-      margin-inline-start: calc(var(--spacing) * 2);
-    }
-  }
-
-  :where([data-control-family="sidebar"][data-slot="header"]),
-  :where([data-control-family="sidebar"][data-slot="footer"]) {
-    gap: calc(var(--spacing) * 2);
-    padding: calc(var(--spacing) * 2);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="content-stack"]) {
-    gap: calc(var(--spacing) * 2);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="group"]) {
-    padding: calc(var(--spacing) * 2);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu"]) {
-    gap: calc(var(--spacing) * 1);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu"][data-submenu]) {
-    margin-block: calc(var(--spacing) * 1);
-    margin-inline-start: calc(var(--spacing) * 3);
-    padding-inline-start: calc(var(--spacing) * 2);
-    border-inline-start: 1px solid var(--sidebar-border);
-    width: auto;
-  }
-
-  :where([data-control-family="sidebar"]:is([data-slot="group-label"], [data-slot="menu-button"])[aria-expanded] > [data-slot="chevron"]) {
-    margin-inline-start: auto;
-    transition: rotate var(--duration-base) var(--ease-standard);
-  }
-
-  :where([data-control-family="sidebar"][aria-expanded="true"] > [data-slot="chevron"]) {
-    rotate: 90deg;
-  }
-
-  :where([data-control-family="sidebar"][data-slot="group-label"][aria-expanded]) {
-    cursor: pointer;
-    width: 100%;
-    text-align: start;
-  }
-
-  @media (pointer: coarse) {
-    :where([data-control-family="sidebar"]:is([data-slot="menu-button"], [data-slot="group-label"][aria-expanded])) {
-      min-block-size: 44px;
-    }
-
-    :where([data-control-family="button"][data-sidebar-trigger]) {
-      min-inline-size: 44px;
-      min-block-size: 44px;
-    }
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu"]:is([data-indicator="hover"], [data-indicator="slide"])) {
-    gap: 0;
-  }
-
   :where([data-control-family="sidebar"][data-slot="menu-track"] > [data-control-family="track-highlight"]) {
     --cui-track-highlight-radius: var(--cui-sidebar-menu-button-radius);
   }
@@ -231,12 +160,6 @@
   inherits: true;
 }
 
-@property --cui-sidebar-menu-button-radius {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
 @property --cui-sidebar-inner-background {
   syntax: "<color>";
   inherits: true;
@@ -277,6 +200,17 @@
   inherits: true;
 }
 
+@property --cui-sidebar-header-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-header-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-sidebar-inset-background {
   syntax: "<color>";
   inherits: true;
@@ -293,6 +227,36 @@
   inherits: true;
 }
 
+@property --cui-sidebar-inset-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-inset-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-inset-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-inset-inset {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-menu-button-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-sidebar-group-label-foreground {
   syntax: "<color>";
   inherits: true;
@@ -338,3 +302,98 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-sidebar-menu-button-track-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-menu-button-height {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-menu-button-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-menu-button-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-menu-button-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --cui-sidebar-menu-button-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-sidebar-menu-button-active-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 500;
+}
+
+@property --cui-sidebar-group-label-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --cui-sidebar-group-label-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 500;
+}
+
+@property --cui-sidebar-group-label-letter-spacing {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0em;
+}
+
+@property --cui-sidebar-group-label-text-transform {
+  syntax: "none | uppercase | lowercase | capitalize";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-sidebar-group-label-padding {
+  syntax: "<length-percentage>+";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-skip-link-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-skip-link-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-skip-link-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-skip-link-shadow {
+  syntax: "*";
+  inherits: true;
+}

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

@@ -38,7 +38,7 @@
       inset: 50% 50%;
       translate: -50% -50%;
       inline-size: 100%;
-      block-size: max(100%, 44px);
+      block-size: max(100%, var(--touch-target));
     }
   }
 

package/dist/styles/recipes/spinner.css

@@ -1,6 +1,7 @@
 @layer components {
   :where([data-control-family="spinner"][data-slot="root"]) {
     --cui-spinner-foreground: var(--muted-foreground);
+    --cui-spinner-animation-duration: var(--duration-loop);
     color: var(--cui-spinner-foreground);
   }
 
@@ -11,7 +12,7 @@
   :where([data-control-family="spinner"][data-slot="indicator"]) {
     inline-size: calc(var(--spacing) * 4);
     block-size: calc(var(--spacing) * 4);
-    animation: spin calc(var(--duration-slow) * 3.333) linear infinite;
+    animation: cui-spin var(--cui-spinner-animation-duration) linear infinite;
   }
 
   :where([data-control-family="spinner"][data-slot="indicator"][data-size="xs"]) {
@@ -35,3 +36,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-spinner-animation-duration {
+  syntax: "<time>";
+  inherits: true;
+  initial-value: 0s;
+}

package/dist/styles/recipes/stepper.css

@@ -1,28 +1,29 @@
 @layer components {
   :where([data-control-family="stepper"][data-slot="root"]) {
+    --cui-stepper-indicator-size: calc(var(--spacing) * 8);
     --cui-stepper-indicator-radius: 9999px;
     --cui-stepper-indicator-background: var(--background);
     --cui-stepper-indicator-foreground: var(--muted-foreground);
     --cui-stepper-indicator-border-color: var(--border);
-    --cui-stepper-indicator-border-width: 1px;
+    --cui-stepper-indicator-border-width: var(--control-rim-width);
+    --cui-stepper-indicator-current-border-width: 2px;
     --cui-stepper-separator-background: var(--border);
     --cui-stepper-title-foreground: var(--foreground);
+    --cui-stepper-title-current-font-weight: var(--font-weight-semibold);
   }
   :where([data-control-family="stepper"][data-slot="trigger"]) {
     border-radius: var(--radius-control);
-    outline: none;
     transition: color var(--duration-fast) var(--ease-standard);
-    --_stepper-trigger-text-align: left;
-    text-align: var(--_stepper-trigger-text-align);
+    text-align: start;
   }
 
   :where([data-control-family="stepper"][data-slot="trigger"]:disabled) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="stepper"][data-slot="indicator"]) {
-    inline-size: calc(var(--spacing) * 8);
-    block-size: calc(var(--spacing) * 8);
+    inline-size: var(--cui-stepper-indicator-size);
+    block-size: var(--cui-stepper-indicator-size);
     --_stepper-indicator-shadow: 0 0 transparent;
     border: var(--cui-stepper-indicator-border-width) solid var(--cui-stepper-indicator-border-color);
     border-radius: var(--cui-stepper-indicator-radius);
@@ -46,6 +47,7 @@
   :where([data-control-family="stepper"][data-slot="indicator"][data-state="current"]:not([data-invalid])) {
     --cui-stepper-indicator-foreground: var(--primary-text);
     --cui-stepper-indicator-border-color: var(--primary);
+    --cui-stepper-indicator-border-width: var(--cui-stepper-indicator-current-border-width);
     --_stepper-indicator-shadow: 0 0 0 4px oklch(from var(--primary) l c h / 0.1);
   }
 
@@ -73,6 +75,10 @@
     line-height: var(--leading-tight);
   }
 
+  :where([data-control-family="stepper"][data-slot="item"][aria-current="step"] [data-slot="title"]) {
+    font-weight: var(--cui-stepper-title-current-font-weight);
+  }
+
   :where([data-control-family="stepper"][data-slot="description"]) {
     color: var(--muted-foreground);
     font-size: var(--text-body);
@@ -81,7 +87,6 @@
 
   :where([data-control-family="stepper"][data-slot="content"]) {
     margin-block-start: calc(var(--spacing) * 6);
-    outline: none;
   }
 
   :where([data-control-family="stepper"][data-slot="root"][data-orientation="vertical"] [data-slot="item"]) {
@@ -115,11 +120,6 @@
   }
 
   @container stepper (width < 28rem) {
-    :where([data-control-family="stepper"][data-slot="trigger"]) {
-      --_stepper-trigger-text-align: left;
-      text-align: var(--_stepper-trigger-text-align);
-    }
-
     :where([data-control-family="stepper"][data-slot="root"][data-orientation="horizontal"] [data-slot="item"]) {
       padding-block-end: calc(var(--spacing) * 6);
     }
@@ -183,3 +183,21 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-stepper-indicator-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-stepper-indicator-current-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-stepper-title-current-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}

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;
@@ -26,6 +26,7 @@
     --cui-table-of-contents-trail-stroke: var(--primary-text);
     --cui-table-of-contents-trail-size: 2px;
     --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);
@@ -35,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"]) {
@@ -271,3 +273,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-table-of-contents-scroll-inset {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}