@ctrl-ui/react 0.8.20 → 0.9.0

package/dist/styles/recipes/popup.css

@@ -89,9 +89,9 @@
   :where([data-control-family="popup"][data-popup-part="backdrop"]) {
     --cui-popup-backdrop-background: oklch(from var(--foreground) l c h / var(--overlay-opacity));
     background-color: var(--cui-popup-backdrop-background);
-    --cui-popup-backdrop-blur: blur(var(--backdrop-blur-overlay));
-    -webkit-backdrop-filter: var(--cui-popup-backdrop-blur);
-    backdrop-filter: var(--cui-popup-backdrop-blur);
+    --cui-popup-backdrop-blur: var(--backdrop-blur-overlay);
+    -webkit-backdrop-filter: blur(var(--cui-popup-backdrop-blur));
+    backdrop-filter: blur(var(--cui-popup-backdrop-blur));
     transition: opacity var(--duration-base) var(--ease-emphasized);
   }
   :where(.dark [data-control-family="popup"][data-popup-part="backdrop"]) {
@@ -255,8 +255,9 @@
 }
 
 @property --cui-popup-radius {
-  syntax: "*";
+  syntax: "<length-percentage>";
   inherits: true;
+  initial-value: 0px;
 }
 
 @property --cui-popup-background {
@@ -300,8 +301,9 @@
 }
 
 @property --cui-popup-backdrop-blur {
-  syntax: "*";
+  syntax: "<length>";
   inherits: true;
+  initial-value: 0px;
 }
 
 @property --cui-popup-item-radius {
@@ -311,15 +313,15 @@
 }
 
 @property --cui-popup-item-font-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-popup-item-icon-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 16px;
+  initial-value: 0px;
 }
 
 @property --cui-popup-item-padding-block {
@@ -335,7 +337,7 @@
 }
 
 @property --cui-popup-item-min-height {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/range.css

@@ -51,7 +51,7 @@
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="track"][data-dragging]) {
-    background: oklch(from var(--foreground) l c h / 0.1);
+    --cui-range-track-background: oklch(from var(--foreground) l c h / 0.1);
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="indicator"]),
@@ -109,7 +109,7 @@
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-dragging]) {
     scale: 1.1;
-    box-shadow: var(--shadow-md);
+    --cui-range-thumb-shadow: var(--shadow-md);
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="plain"]) {
@@ -314,7 +314,7 @@
 @property --cui-range-indeterminate-size {
   syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 40%;
+  initial-value: 0px;
 }
 
 @property --cui-range-track-radius {
@@ -348,7 +348,7 @@
 }
 
 @property --cui-range-thumb-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
@@ -362,5 +362,4 @@
 @property --cui-range-thumb-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }

package/dist/styles/recipes/resizable.css

@@ -4,10 +4,10 @@
     --cui-resizable-group-radius: var(--radius-panel);
     --cui-resizable-group-border-color: var(--border);
     --cui-resizable-group-border-width: var(--control-rim-width);
-    --cui-resizable-handle-color: var(--foreground);
+    --cui-resizable-handle-background: transparent;
     --cui-resizable-handle-hover-background: oklch(from var(--foreground) l c h / 0.25);
     --cui-resizable-handle-active-background: oklch(from var(--foreground) l c h / 0.4);
-    --cui-resizable-grip-radius: var(--radius-control);
+    --cui-resizable-grip-radius: var(--radius-sm);
     --cui-resizable-grip-background: var(--card);
     --cui-resizable-grip-foreground: var(--muted-foreground);
     background-color: var(--cui-resizable-group-background);
@@ -26,7 +26,12 @@
   }
 
   :where([data-control-family="resizable"][data-slot="handle"]) {
-    --_resizable-gradient-color: var(--cui-resizable-handle-color);
+    --_resizable-gradient-color: var(--cui-resizable-handle-hover-background);
+    background-color: var(--cui-resizable-handle-background);
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-separator="active"]) {
+    --_resizable-gradient-color: var(--cui-resizable-handle-active-background);
   }
 
   :where([data-control-family="resizable"][data-slot="handle"][data-axis="vertical"]:not([data-cursor="none"])) {
@@ -38,7 +43,7 @@
   }
 
   :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"]) {
-    background-color: var(--border);
+    --cui-resizable-handle-background: var(--border);
   }
 
   :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"][data-separator="hover"]),
@@ -134,12 +139,6 @@
   initial-value: 0px;
 }
 
-@property --cui-resizable-handle-color {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
 @property --cui-resizable-handle-hover-background {
   syntax: "<color>";
   inherits: true;
@@ -169,3 +168,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-resizable-handle-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/resize-handle.css

@@ -84,13 +84,13 @@
 }
 
 @property --cui-resize-handle-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-resize-handle-hit-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/scroll-area.css

@@ -221,7 +221,7 @@
 }
 
 @property --cui-scroll-area-thumb-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }

package/dist/styles/recipes/sidebar-menu.css

@@ -19,7 +19,8 @@
     padding-inline: var(--cui-sidebar-menu-button-padding-inline);
     font-size: var(--cui-sidebar-menu-button-font-size);
     font-weight: var(--cui-sidebar-menu-button-font-weight);
-    background-color: transparent;
+    background-color: var(--cui-sidebar-menu-button-background);
+    box-shadow: var(--cui-sidebar-menu-button-shadow);
     color: var(--cui-sidebar-menu-button-foreground);
   }
 
@@ -116,20 +117,9 @@
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
-    background-color: var(--background);
-    box-shadow: 0 0 0 1px var(--sidebar-border);
-  }
-
-  @media (hover: hover) {
-    :where(
-        [data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover:not(
-          :disabled,
-          [data-disabled],
-          [aria-disabled="true"]
-        )
-      ) {
-      box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
-    }
+    --cui-sidebar-menu-button-background: var(--background);
+    --cui-sidebar-menu-button-shadow: 0 0 0 1px var(--sidebar-border);
+    --cui-sidebar-menu-button-hover-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
   }
 
   :where(

package/dist/styles/recipes/sidebar-mobile.css

@@ -112,9 +112,9 @@
 }
 
 @property --cui-sidebar-nav-height {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 72px;
+  initial-value: 0px;
 }
 
 @property --cui-sidebar-nav-background {
@@ -165,7 +165,7 @@
 }
 
 @property --cui-sidebar-nav-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 12px;
+  initial-value: 0px;
 }

package/dist/styles/recipes/sidebar-parts.css

@@ -175,10 +175,35 @@
   :where([data-control-family="sidebar"][data-slot="menu"]:is([data-indicator="hover"], [data-indicator="slide"])) {
     gap: 0;
   }
+
+  :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%);
+  }
 }
 
 @property --cui-sidebar-menu-badge-height {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/sidebar.css

@@ -17,31 +17,6 @@
     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);
   }
@@ -78,6 +53,8 @@
     --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-background: transparent;
+    --cui-sidebar-menu-button-shadow: 0 0 transparent;
     --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;
@@ -181,7 +158,6 @@
 @property --cui-sidebar-inner-backdrop-filter {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-sidebar-inner-border-width {
@@ -331,7 +307,7 @@
 @property --cui-sidebar-menu-button-font-size {
   syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 1rem;
+  initial-value: 0px;
 }
 
 @property --cui-sidebar-menu-button-font-weight {
@@ -343,25 +319,25 @@
 @property --cui-sidebar-menu-button-active-font-weight {
   syntax: "<number>";
   inherits: true;
-  initial-value: 500;
+  initial-value: 400;
 }
 
 @property --cui-sidebar-group-label-font-size {
   syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 1rem;
+  initial-value: 0px;
 }
 
 @property --cui-sidebar-group-label-font-weight {
   syntax: "<number>";
   inherits: true;
-  initial-value: 500;
+  initial-value: 400;
 }
 
 @property --cui-sidebar-group-label-letter-spacing {
   syntax: "<length>";
   inherits: true;
-  initial-value: 0em;
+  initial-value: 0px;
 }
 
 @property --cui-sidebar-group-label-text-transform {
@@ -398,3 +374,14 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-sidebar-menu-button-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-menu-button-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/skeleton.css

@@ -15,13 +15,17 @@
     background-image: var(--cui-skeleton-background-image);
   }
 
+  :where([data-control-family="skeleton"][data-slot="root"][data-variant="shimmer"]) {
+    --cui-skeleton-easing: linear;
+  }
+
   :where([data-control-family="skeleton"][data-slot="root"][data-variant="shimmer"])::after {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none;
     background-image: linear-gradient(90deg, transparent, var(--cui-skeleton-highlight-background), transparent);
-    transform: translateX(-100%);
+    transform: translateX(-125%);
     animation: cui-skeleton-shimmer var(--cui-skeleton-animation-duration) var(--cui-skeleton-easing) infinite;
   }
 
@@ -47,8 +51,11 @@
 }
 
 @keyframes cui-skeleton-shimmer {
+  from {
+    transform: translateX(-125%);
+  }
   to {
-    transform: translateX(100%);
+    transform: translateX(125%);
   }
 }
 
@@ -77,7 +84,6 @@
 @property --cui-skeleton-background-image {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-skeleton-highlight-background {
@@ -95,11 +101,10 @@
 @property --cui-skeleton-easing {
   syntax: "*";
   inherits: true;
-  initial-value: ease;
 }
 
 @property --cui-skeleton-pulse-opacity {
   syntax: "<number>";
   inherits: true;
-  initial-value: 0.5;
+  initial-value: 1;
 }

package/dist/styles/recipes/stepper.css

@@ -185,7 +185,7 @@
 }
 
 @property --cui-stepper-indicator-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/switch.css

@@ -238,38 +238,39 @@
 }
 
 @property --cui-switch-inline-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 36px;
+  initial-value: 0px;
 }
 
 @property --cui-switch-height {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 20px;
+  initial-value: 0px;
 }
 
 @property --cui-switch-padding {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 2px;
+  initial-value: 0px;
 }
 
 @property --cui-switch-thumb-inline-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 16px;
+  initial-value: 0px;
 }
 
 @property --cui-switch-thumb-press-inline-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 20px;
+  initial-value: 0px;
 }
 
 @property --cui-switch-thumb-press-scale {
-  syntax: "*";
+  syntax: "<number>";
   inherits: true;
+  initial-value: 1;
 }
 
 @property --cui-switch-thumb-backdrop-filter {

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

@@ -145,13 +145,11 @@
 @property --cui-table-of-contents-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-table-of-contents-backdrop-filter {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-table-of-contents-padding {
@@ -169,7 +167,7 @@
 @property --cui-table-of-contents-label-font-size {
   syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 1rem;
+  initial-value: 0px;
 }
 
 @property --cui-table-of-contents-label-font-weight {
@@ -205,7 +203,7 @@
 @property --cui-table-of-contents-item-font-size {
   syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 1rem;
+  initial-value: 0px;
 }
 
 @property --cui-table-of-contents-item-line-height {
@@ -239,7 +237,7 @@
 }
 
 @property --cui-table-of-contents-item-indent-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -251,7 +249,7 @@
 }
 
 @property --cui-table-of-contents-rail-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -263,7 +261,7 @@
 }
 
 @property --cui-table-of-contents-trail-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -275,7 +273,7 @@
 }
 
 @property --cui-table-of-contents-scroll-inset {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/table.css

@@ -85,7 +85,7 @@
 }
 
 @property --cui-table-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
@@ -103,13 +103,13 @@
 }
 
 @property --cui-table-row-hover-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
 
 @property --cui-table-row-selected-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
@@ -121,7 +121,7 @@
 }
 
 @property --cui-table-footer-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }

package/dist/styles/recipes/tabs.css

@@ -13,6 +13,7 @@
     --cui-tabs-list-shadow: inset 0 0 0 var(--control-rim-width) var(--control-rim), var(--shadow-inset);
     --cui-tabs-list-backdrop-filter: none;
     --cui-tabs-indicator-background: var(--background);
+    --cui-tabs-indicator-background-image: none;
     --cui-tabs-surface-background: var(--background);
     --cui-tabs-surface-radius: var(--radius-panel);
     --cui-tabs-foreground: var(--muted-foreground);
@@ -53,7 +54,8 @@
     width: var(--active-tab-width);
     transform: translateX(var(--active-tab-left)) translateY(-50%);
     border-radius: var(--_tabs-trigger-radius-fit);
-    background: var(--cui-tabs-indicator-background);
+    background-color: var(--cui-tabs-indicator-background);
+    background-image: var(--cui-tabs-indicator-background-image);
     box-shadow: var(--cui-tabs-indicator-shadow);
     /* Compositor transforms tear the strip while its width resizes. */
     transition:
@@ -244,7 +246,7 @@
 }
 
 @property --cui-tabs-surface-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -276,11 +278,10 @@
 @property --cui-tabs-list-backdrop-filter {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-tabs-indicator-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
@@ -306,7 +307,6 @@
 @property --cui-tabs-indicator-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-tabs-list-shadow {
@@ -325,3 +325,8 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-tabs-indicator-background-image {
+  syntax: "*";
+  inherits: true;
+}

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

@@ -115,7 +115,7 @@
 }
 
 @property --cui-task-list-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -127,13 +127,13 @@
 }
 
 @property --cui-task-list-items-padding {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-task-list-item-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }