@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/styles/recipes/field.css

@@ -26,7 +26,7 @@
       [data-control-family="field"][data-field-kind="combobox"]
     )
   ) {
-    transition-property: color, background-color, border-color, box-shadow, opacity, backdrop-filter;
+    transition-property: color, border-color, box-shadow, opacity, backdrop-filter;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }
@@ -59,10 +59,10 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="field"][data-field-kind="autocomplete"]:hover),
-    :where([data-control-family="field"][data-field-kind="combobox"]:hover),
-    :where([data-control-family="field"][data-field-kind="native-select"]:hover),
-    :where([data-control-family="field"][data-field-kind="number-field"]:hover) {
+    :where([data-control-family="field"][data-control="true"][data-field-kind="autocomplete"]:hover),
+    :where([data-control-family="field"][data-control="true"][data-field-kind="combobox"]:hover),
+    :where([data-control-family="field"][data-control="true"][data-field-kind="native-select"]:hover),
+    :where([data-control-family="field"][data-control="true"][data-field-kind="number-field"]:hover) {
       background: var(--hover-fill);
     }
   }
@@ -102,6 +102,10 @@
     appearance: none;
   }
 
+  :where([data-control-family="field"][data-field-kind="native-select"][data-slot="icon"]) {
+    right: calc(var(--padding-x) * 0.6);
+  }
+
   :where([data-control-family="field"][data-field-kind="number-field"][data-slot="drag-icon"]) {
     color: var(--foreground);
   }

package/dist/styles/recipes/gradient-editor.css

@@ -6,10 +6,12 @@
   :where([data-control-family="gradient-editor"][data-slot="root"]) {
     gap: calc(var(--spacing) * 3);
     --cui-gradient-editor-add-border-color: var(--border);
+    --cui-gradient-editor-add-border-width: 1px;
     --cui-gradient-editor-add-radius: 9999px;
     --cui-gradient-editor-preview-radius: var(--radius-field);
     --cui-gradient-editor-preview-ring-color: oklch(from var(--border) l c h / 0.6);
     --cui-gradient-editor-stop-border-color: oklch(1 0 0);
+    --cui-gradient-editor-stop-border-width: 2px;
     --cui-gradient-editor-stop-radius: 9999px;
     --cui-gradient-editor-stop-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.4);
     --cui-gradient-editor-track-radius: 9999px;
@@ -30,7 +32,7 @@
   :where([data-control-family="gradient-editor"][data-slot="stop"]) {
     inline-size: calc(var(--spacing) * 5);
     block-size: calc(var(--spacing) * 5);
-    border: 2px solid var(--cui-gradient-editor-stop-border-color);
+    border: var(--cui-gradient-editor-stop-border-width) solid var(--cui-gradient-editor-stop-border-color);
     border-radius: var(--cui-gradient-editor-stop-radius);
     box-shadow: var(--cui-gradient-editor-stop-shadow);
     outline: none;
@@ -40,13 +42,10 @@
   :where([data-control-family="gradient-editor"][data-slot="stop-add"]) {
     inline-size: calc(var(--spacing) * 7);
     block-size: calc(var(--spacing) * 7);
-    border: 1px dashed var(--cui-gradient-editor-add-border-color);
+    border: var(--cui-gradient-editor-add-border-width) dashed var(--cui-gradient-editor-add-border-color);
     border-radius: var(--cui-gradient-editor-add-radius);
     color: var(--muted-foreground);
     outline: none;
-    transition:
-      border-color var(--duration-fast) var(--ease-standard),
-      color var(--duration-fast) var(--ease-standard);
   }
 
   @media (hover: hover) {
@@ -91,6 +90,12 @@
   initial-value: transparent;
 }
 
+@property --cui-gradient-editor-stop-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-gradient-editor-stop-shadow {
   syntax: "*";
   inherits: true;
@@ -107,3 +112,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-gradient-editor-add-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/inline-attachment.css

@@ -4,18 +4,17 @@
     --cui-inline-attachment-hover-shadow: var(--shadow-md);
     --cui-inline-attachment-radius: var(--radius-scene);
     --cui-inline-attachment-ring-color: var(--border);
+    --cui-inline-attachment-image-outline-color: oklch(from var(--foreground) l c h / 0.1);
     --cui-inline-attachment-shadow: var(--shadow-sm);
     --cui-inline-attachment-content-background: oklch(from var(--background) l c h / 0.85);
     --cui-inline-attachment-content-foreground: var(--foreground);
     --cui-inline-attachment-content-radius: var(--radius-control);
     --cui-inline-attachment-content-shadow: var(--shadow-sm);
-    --_inline-attachment-media-hover-scale: 1.02;
     border-radius: var(--cui-inline-attachment-radius);
     background: var(--cui-inline-attachment-background);
     box-shadow:
       inset 0 0 0 1px var(--cui-inline-attachment-ring-color),
       var(--cui-inline-attachment-shadow);
-    transition: box-shadow var(--duration-fast) var(--ease-standard);
     text-align: left;
   }
 
@@ -33,14 +32,14 @@
     }
   }
 
-  :where([data-control-family="inline-attachment"][data-slot="media-image"]) {
-    transition: scale var(--duration-slow) var(--ease-standard);
+  :where([data-control-family="inline-attachment"][data-slot="image"]) {
+    border-radius: inherit;
   }
 
-  @media (hover: hover) {
-    :where([data-control-family="inline-attachment"][data-slot="root"]:hover [data-slot="media-image"]) {
-      scale: var(--_inline-attachment-media-hover-scale);
-    }
+  :where([data-control-family="inline-attachment"][data-slot="media-image"]) {
+    border-radius: inherit;
+    outline: 1px solid var(--cui-inline-attachment-image-outline-color);
+    outline-offset: -1px;
   }
 
   :where([data-control-family="inline-attachment"][data-slot="document"]) {
@@ -180,3 +179,9 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-inline-attachment-image-outline-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/inline-citation.css

@@ -6,6 +6,7 @@
     --cui-inline-citation-quote-radius: var(--radius-control);
     --cui-inline-citation-trigger-background: oklch(from var(--muted) l c h / 0.55);
     --cui-inline-citation-trigger-border-color: var(--border);
+    --cui-inline-citation-trigger-border-width: 1px;
     --cui-inline-citation-trigger-foreground: var(--muted-foreground);
     --cui-inline-citation-trigger-hover-background: var(--muted);
     --cui-inline-citation-trigger-hover-foreground: var(--foreground);
@@ -17,16 +18,13 @@
     max-inline-size: calc(var(--spacing) * 52);
     gap: calc(var(--spacing) * 1.5);
     padding-inline: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    border: 1px solid var(--cui-inline-citation-trigger-border-color);
+    border: var(--cui-inline-citation-trigger-border-width) solid var(--cui-inline-citation-trigger-border-color);
     border-radius: var(--cui-inline-citation-trigger-radius);
     background: var(--cui-inline-citation-trigger-background);
     color: var(--cui-inline-citation-trigger-foreground);
     font-size: var(--text-caption);
     font-weight: var(--font-weight-normal);
     outline-style: none;
-    transition-property: background-color, color, box-shadow;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
   }
 
   @media (hover: hover) {
@@ -143,6 +141,12 @@
   initial-value: transparent;
 }
 
+@property --cui-inline-citation-trigger-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-inline-citation-trigger-hover-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/item.css

@@ -13,7 +13,7 @@
     background: var(--_item-background);
     box-shadow: none;
     color: var(--foreground);
-    transition-property: background-color, box-shadow, color, outline-color, scale;
+    transition-property: scale;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
     gap: calc(var(--spacing) * 3);

package/dist/styles/recipes/kbd.css

@@ -20,6 +20,14 @@
     font-weight: var(--font-weight-medium);
   }
 
+  :where([data-control-family="kbd"][data-slot="root"][data-variant="ghost"]) {
+    min-inline-size: 0;
+    padding-inline: 0;
+    --cui-kbd-background: transparent;
+    --cui-kbd-border-color: transparent;
+    --cui-kbd-shadow: 0 0 transparent;
+  }
+
   :where([data-control-family="kbd"][data-slot="group"]) {
     gap: calc(var(--spacing) * 1);
   }

package/dist/styles/recipes/markdown-block.css

@@ -4,11 +4,13 @@
     --cui-markdown-block-radius: var(--radius-panel);
     --cui-markdown-block-background: var(--background);
     --cui-markdown-block-border-color: var(--border);
+    --cui-markdown-block-border-width: 1px;
     --cui-markdown-block-shadow: var(--shadow-sm);
     --cui-markdown-block-header-border-color: var(--border);
+    --cui-markdown-block-header-border-width: 1px;
     --cui-markdown-block-icon-background: oklch(from var(--foreground) l c h / 0.08);
     background: var(--cui-markdown-block-background);
-    border: 1px solid var(--cui-markdown-block-border-color);
+    border: var(--cui-markdown-block-border-width) solid var(--cui-markdown-block-border-color);
     border-radius: var(--cui-markdown-block-radius);
     box-shadow: var(--cui-markdown-block-shadow);
   }
@@ -17,7 +19,7 @@
     gap: calc(var(--spacing) * 3);
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 2);
-    border-bottom: 1px solid var(--cui-markdown-block-header-border-color);
+    border-bottom: var(--cui-markdown-block-header-border-width) solid var(--cui-markdown-block-header-border-color);
   }
 
   :where([data-control-family="markdown-block"][data-slot="title"]) {
@@ -57,6 +59,12 @@
   initial-value: transparent;
 }
 
+@property --cui-markdown-block-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-markdown-block-shadow {
   syntax: "*";
   inherits: true;
@@ -68,6 +76,12 @@
   initial-value: transparent;
 }
 
+@property --cui-markdown-block-header-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-markdown-block-icon-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/markdown.css

@@ -6,6 +6,7 @@
     --cui-markdown-inline-code-background: color-mix(in oklab, var(--foreground) 8%, transparent);
     --cui-markdown-inline-code-foreground: var(--foreground);
     --cui-markdown-inline-code-radius: 0.25rem;
+    --cui-markdown-image-outline-color: oklch(from var(--foreground) l c h / 0.1);
     --cui-markdown-link-foreground: var(--primary-text);
     --cui-markdown-table-cell-border-color: var(--border);
     --cui-markdown-table-header-background: var(--muted);
@@ -13,6 +14,11 @@
     font-size: var(--text-label);
   }
 
+  :where([data-control-family="markdown"][data-slot="root"] img[data-streamdown="image"]) {
+    outline: 1px solid var(--cui-markdown-image-outline-color);
+    outline-offset: -1px;
+  }
+
   :where([data-control-family="markdown"][data-slot="table-cell"]) {
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 1.5);
@@ -191,6 +197,12 @@
   initial-value: transparent;
 }
 
+@property --cui-markdown-image-outline-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-markdown-table-cell-border-color {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/morphing-panel.css

@@ -32,7 +32,7 @@
     color: currentColor;
     font-size: var(--text-body);
     font-weight: var(--font-weight-medium);
-    transition-property: top, right, width, height, border-radius, padding, color, background-color, box-shadow;
+    transition-property: top, right, width, height, border-radius, padding, color, box-shadow;
     transition-duration: var(--duration-slow);
     transition-timing-function: var(--ease-emphasized);
   }

package/dist/styles/recipes/pagination.css

@@ -21,10 +21,6 @@
       var(--cui-pagination-link-shadow);
     color: var(--cui-pagination-link-foreground);
     outline: none;
-    transition:
-      background-color var(--duration-fast) var(--ease-standard),
-      color var(--duration-fast) var(--ease-standard),
-      box-shadow var(--duration-fast) var(--ease-standard);
   }
 
   :where([data-control-family="pagination"][data-slot="link"][data-active="true"]) {

package/dist/styles/recipes/phone-input.css

@@ -1,13 +1,14 @@
 @layer components {
   :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="root"]) {
     --cui-phone-input-country-border-color: var(--border);
+    --cui-phone-input-country-border-width: 1px;
     --cui-phone-input-trigger-hover-background: oklch(from var(--foreground) l c h / 0.06);
     --cui-phone-input-trigger-focus-background: oklch(from var(--foreground) l c h / 0.06);
     --cui-phone-input-metadata-foreground: var(--muted-foreground);
     --cui-phone-input-chevron-foreground: var(--muted-foreground);
   }
   :where([data-control-family="field"][data-phone-input-country]) {
-    border-inline-end: 1px solid var(--cui-phone-input-country-border-color);
+    border-inline-end: var(--cui-phone-input-country-border-width) solid var(--cui-phone-input-country-border-color);
   }
 
   @media (hover: hover) {
@@ -64,9 +65,6 @@
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 3);
     outline-style: none;
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-    transition-timing-function: var(--ease-standard);
-    transition-duration: var(--duration-fast);
   }
 
   :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="input"]) {
@@ -80,6 +78,12 @@
   initial-value: transparent;
 }
 
+@property --cui-phone-input-country-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-phone-input-trigger-hover-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/popup-lists.css

@@ -62,6 +62,15 @@
     outline-style: none;
   }
 
+  :where([data-control-family="popup"][data-popup-kind="command"][data-chrome="embedded"]) {
+    border-radius: inherit;
+    corner-shape: inherit;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"] > [data-control-family="scroll-area"][data-slot="root"]:last-child) {
+    border-radius: inherit;
+  }
+
   :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);
@@ -79,6 +88,8 @@
   }
 
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="input-wrapper"]) {
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
     gap: calc(var(--spacing) * 2);
     block-size: var(--control-h-lg);
     padding-inline: calc(var(--padding-x) * 1.25);

package/dist/styles/recipes/popup-toast.css

@@ -87,37 +87,9 @@
     font-size: var(--text-body);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="toast"]:where([data-slot="action"], [data-slot="close"])) {
-    --_toast-control-foreground: var(--foreground);
-    border-radius: var(--radius-control);
-    background: transparent;
-    color: var(--_toast-control-foreground);
-    outline: none;
-    transition:
-      color var(--duration-fast) var(--ease-standard),
-      background-color var(--duration-fast) var(--ease-standard),
-      opacity var(--duration-fast) var(--ease-standard);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="toast"]:where([data-slot="action"], [data-slot="close"]):hover) {
-    background: oklch(from var(--foreground) l c h / 0.06);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="action"]) {
-    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
-    box-shadow: inset 0 0 0 1px var(--border);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="close"]) {
+  :where([data-control-family="button"][data-popup-kind="toast"][data-popup-part="close"]) {
     margin-block-start: calc(var(--spacing) * -1);
     margin-inline-end: calc(var(--spacing) * -1);
-    padding: calc(var(--spacing) * 1);
-    --_toast-control-foreground: var(--muted-foreground);
-    opacity: 0.7;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="close"]:hover) {
-    opacity: 1;
   }
 
   :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="viewport"]) {

package/dist/styles/recipes/popup.css

@@ -9,7 +9,7 @@
     --cui-popup-border-width: var(--control-rim-width);
     --cui-popup-shadow: var(--shadow-pop);
     --cui-popup-backdrop-filter: blur(var(--backdrop-blur-popover));
-    --cui-popup-item-radius: var(--radius-popup-item);
+    --cui-popup-item-radius: var(--radius-popup-item-fit);
     --cui-popup-item-foreground: var(--foreground);
     --cui-popup-item-highlight-background: var(--hover-fill);
     --cui-popup-item-highlight-foreground: var(--cui-popup-item-foreground);
@@ -175,7 +175,7 @@
 
   :where([data-control-family="popup"][data-popup-part="navigation-link"]) {
     font-size: var(--text-body);
-    transition-property: color, background-color, box-shadow, translate;
+    transition-property: translate;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }

package/dist/styles/recipes/progressive-blur.css

@@ -2,6 +2,7 @@
   :where([data-control-family="progressive-blur"][data-slot="root"]) {
     --cui-progressive-blur-size: 3rem;
     --cui-progressive-blur-backdrop-blur: 16px;
+    --cui-progressive-blur-fade-size: 0.5rem;
     --cui-progressive-blur-transition-duration: var(--duration-base);
     --cui-progressive-blur-transition-delay: calc(var(--cui-progressive-blur-transition-duration) * 0.06);
     --_progressive-blur-direction: to bottom;
@@ -70,13 +71,20 @@
     visibility: var(--_progressive-blur-visibility, hidden);
     -webkit-backdrop-filter: blur(max(0px, calc(var(--cui-progressive-blur-backdrop-blur) / var(--_progressive-blur-divisor))));
     backdrop-filter: blur(max(0px, calc(var(--cui-progressive-blur-backdrop-blur) / var(--_progressive-blur-divisor))));
-    mask-image: linear-gradient(
-      var(--_progressive-blur-direction),
-      oklch(0 0 0 / 0) calc(var(--_progressive-blur-index) * 100% / 7),
-      oklch(0 0 0) calc((var(--_progressive-blur-index) + 1) * 100% / 7),
-      oklch(0 0 0) calc((var(--_progressive-blur-index) + 2) * 100% / 7),
-      oklch(0 0 0 / 0) calc((var(--_progressive-blur-index) + 3) * 100% / 7)
-    );
+    mask-image:
+      linear-gradient(
+        var(--_progressive-blur-direction),
+        oklch(0 0 0 / 0) calc(var(--_progressive-blur-index) * 100% / 7),
+        oklch(0 0 0) calc((var(--_progressive-blur-index) + 1) * 100% / 7),
+        oklch(0 0 0) calc((var(--_progressive-blur-index) + 2) * 100% / 7),
+        oklch(0 0 0 / 0) calc((var(--_progressive-blur-index) + 3) * 100% / 7)
+      ),
+      linear-gradient(
+        var(--_progressive-blur-direction),
+        oklch(0 0 0) calc(100% - min(50%, max(0px, var(--cui-progressive-blur-fade-size)))),
+        oklch(0 0 0 / 0)
+      );
+    mask-composite: intersect;
     transition:
       opacity var(--_progressive-blur-duration) var(--ease-standard)
       calc(var(--_progressive-blur-enter, 0) * var(--_progressive-blur-index) * var(--cui-progressive-blur-transition-delay)),
@@ -113,6 +121,13 @@
     --_progressive-blur-divisor: 1;
   }
 
+  @container style(--cui-progressive-blur-backdrop-blur: 0px) {
+    :where([data-control-family="progressive-blur"][data-slot="layer"]) {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
   @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
     :where([data-control-family="progressive-blur"][data-slot="root"]) {
       display: none;
@@ -132,6 +147,12 @@
   initial-value: 0px;
 }
 
+@property --cui-progressive-blur-fade-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-progressive-blur-transition-duration {
   syntax: "<time>";
   inherits: true;

package/dist/styles/recipes/range.css

@@ -94,7 +94,7 @@
     background: var(--cui-range-thumb-background);
     box-shadow: var(--cui-range-thumb-shadow);
     outline: none;
-    transition-property: scale, background-color, box-shadow, height, width;
+    transition-property: scale, box-shadow, height, width;
     transition-duration: var(--duration-fast);
   }
 
@@ -173,6 +173,55 @@
     opacity: 50%;
   }
 
+  :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="control"]) {
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: 0;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="control"][data-labeled]) {
+    inline-size: calc(var(--spacing) * 7.5);
+    block-size: 100%;
+    padding-inline: 0;
+  }
+
+  :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%;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="track"][data-labeled]) {
+    inline-size: 100%;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="indicator"]) {
+    width: 100%;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="thumb"][data-variant="plain"]) {
+    height: 0.125rem;
+    width: 1rem;
+  }
+
+  :where(
+    [data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="thumb"][data-variant="plain"][data-dragging]
+  ) {
+    width: 1.25rem;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="root"] [data-slot="tick"]) {
+    inline-size: calc(var(--spacing) * 1.5);
+    block-size: 1px;
+    left: 0;
+  }
+
+  :where(
+    [data-control-family="range"][data-range-kind="slider"][data-orientation="vertical"][data-slot="root"] [data-slot="label-overlay"]
+  ) {
+    flex-direction: column;
+    padding-inline: 0;
+    padding-block: calc(var(--spacing) * 2);
+  }
+
   :where([data-control-family="range"][data-range-kind="progress"][data-slot="indicator"]) {
     transition-property: width;
     transition-duration: var(--duration-slow);

package/dist/styles/recipes/resizable.css

@@ -3,6 +3,7 @@
     --cui-resizable-group-background: var(--card);
     --cui-resizable-group-radius: var(--radius-panel);
     --cui-resizable-group-border-color: var(--border);
+    --cui-resizable-group-border-width: 1px;
     --cui-resizable-handle-color: var(--foreground);
     --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);
@@ -14,7 +15,7 @@
   }
 
   :where([data-control-family="resizable"][data-slot="panel-group"][data-variant="framed"]) {
-    border: 1px solid var(--cui-resizable-group-border-color);
+    border: var(--cui-resizable-group-border-width) solid var(--cui-resizable-group-border-color);
     border-radius: var(--cui-resizable-group-radius);
     box-shadow: var(--shadow-sm);
   }
@@ -26,9 +27,6 @@
 
   :where([data-control-family="resizable"][data-slot="handle"]) {
     --_resizable-gradient-color: var(--cui-resizable-handle-color);
-    transition-property: background-color, box-shadow, opacity;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
     outline-style: none;
   }
 
@@ -58,9 +56,6 @@
     inset: 0;
     content: "";
     opacity: 0;
-    transition-property: opacity;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
   }
 
   :where([data-control-family="resizable"][data-slot="handle"][data-variant="hover"][data-axis="vertical"])::before {
@@ -88,9 +83,6 @@
     color: var(--cui-resizable-grip-foreground);
     box-shadow: var(--shadow-sm);
     opacity: 1;
-    transition-property: opacity;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
   }
 
   :where([data-control-family="resizable"][data-slot="handle-grip"][data-axis="vertical"]) {
@@ -133,6 +125,12 @@
   initial-value: transparent;
 }
 
+@property --cui-resizable-group-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-resizable-handle-color {
   syntax: "<color>";
   inherits: true;

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

@@ -131,7 +131,6 @@
     --_rich-tooltip-content-title-letter-spacing: var(--_rich-tooltip-title-letter-spacing);
     --_rich-tooltip-arrow-rotate: 0deg;
     --_rich-tooltip-action-outline: none;
-    --_rich-tooltip-action-transition-property: background-color, color, box-shadow;
   }
 
   :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-tone="accent"]) {
@@ -203,9 +202,6 @@
     color: var(--cui-rich-tooltip-action-foreground);
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
-    transition-property: var(--_rich-tooltip-action-transition-property);
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
     outline-style: var(--_rich-tooltip-action-outline);
   }
 

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

@@ -5,6 +5,14 @@
     --cui-scroll-area-corner-background: transparent;
   }
 
+  @supports (corner-shape: squircle) {
+    @container not style(--corner-shape: round) {
+      :where([data-control-family="scroll-area"][data-slot="root"] > [data-control-family="progressive-blur"]) {
+        display: none;
+      }
+    }
+  }
+
   :where([data-control-family="scroll-area"][data-slot="root"] > [data-scroll-area-viewport]) {
     position: relative;
     z-index: 0;
@@ -131,7 +139,6 @@
   :where([data-control-family="scroll-area"][data-slot="scrollbar"]) {
     z-index: 1;
     opacity: 0;
-    transition: opacity var(--duration-fast) var(--ease-standard);
   }
 
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="always"]),
@@ -143,7 +150,6 @@
   :where([data-control-family="scroll-area"][data-slot="thumb"]) {
     border-radius: var(--cui-scroll-area-thumb-radius);
     background: var(--cui-scroll-area-thumb-background);
-    transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
   :where([data-control-family="scroll-area"][data-slot="corner"]) {