@ctrl-ui/react 0.8.10 → 0.8.11

package/dist/knob-contracts/emoji-picker-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/emoji-picker-knobs.d.ts
-export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground"];
+export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-height", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground"];
 export type EmojiPickerKnobStyle = Partial<Record<(typeof emojiPickerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/emoji-picker-knobs.js

@@ -1,6 +1,7 @@
 //#region src/knob-contracts/emoji-picker-knobs.ts
 const emojiPickerKnobs = [
 	"--cui-emoji-picker-cell-size",
+	"--cui-emoji-picker-height",
 	"--cui-emoji-picker-cell-radius",
 	"--cui-emoji-picker-active-background",
 	"--cui-emoji-picker-header-background",

package/dist/knob-contracts/icon-picker-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/icon-picker-knobs.d.ts
+export declare const iconPickerKnobs: readonly ["--cui-icon-picker-cell-size", "--cui-icon-picker-cell-radius", "--cui-icon-picker-foreground", "--cui-icon-picker-active-background"];
+export type IconPickerKnobStyle = Partial<Record<(typeof iconPickerKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/icon-picker-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/icon-picker-knobs.ts
+const iconPickerKnobs = [
+	"--cui-icon-picker-cell-size",
+	"--cui-icon-picker-cell-radius",
+	"--cui-icon-picker-foreground",
+	"--cui-icon-picker-active-background"
+];
+//#endregion
+export { iconPickerKnobs };

package/dist/knob-contracts/markdown-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/markdown-knobs.d.ts
-export declare const markdownKnobs: readonly ["--cui-markdown-foreground", "--cui-markdown-blockquote-border-color", "--cui-markdown-blockquote-foreground", "--cui-markdown-inline-code-background", "--cui-markdown-inline-code-foreground", "--cui-markdown-inline-code-radius", "--cui-markdown-link-foreground", "--cui-markdown-image-outline-color", "--cui-markdown-table-cell-border-color", "--cui-markdown-table-header-background", "--cui-markdown-font-size", "--cui-markdown-line-height"];
+export declare const markdownKnobs: readonly ["--cui-markdown-foreground", "--cui-markdown-blockquote-border-color", "--cui-markdown-blockquote-foreground", "--cui-markdown-inline-code-background", "--cui-markdown-inline-code-foreground", "--cui-markdown-inline-code-radius", "--cui-markdown-link-foreground", "--cui-markdown-image-outline-color", "--cui-markdown-table-cell-border-color", "--cui-markdown-table-header-background", "--cui-markdown-font-size", "--cui-markdown-line-height", "--cui-markdown-flow-gap", "--cui-markdown-heading-gap"];
 export type MarkdownKnobStyle = Partial<Record<(typeof markdownKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/markdown-knobs.js

@@ -11,7 +11,9 @@ const markdownKnobs = [
 	"--cui-markdown-table-cell-border-color",
 	"--cui-markdown-table-header-background",
 	"--cui-markdown-font-size",
-	"--cui-markdown-line-height"
+	"--cui-markdown-line-height",
+	"--cui-markdown-flow-gap",
+	"--cui-markdown-heading-gap"
 ];
 //#endregion
 export { markdownKnobs };

package/dist/skin.d.ts

@@ -38,6 +38,8 @@ export type ControlUiSkin = {
   colorScheme?: "light" | "dark";
   sidebarLayout?: SidebarLayout;
   scrollAreaBlur?: boolean;
+  scrollAreaScrollbarVisibility?: "scroll" | "hover" | "always";
+  scrollAreaScrollbarGutter?: "auto" | "stable";
   indicators?: SkinIndicators;
   sidebarWidth?: string;
   effects?: ControlEffect[];

package/dist/styles/index.css

@@ -58,6 +58,8 @@
 @import "./recipes/dynamic-notification-input.css";
 @import "./recipes/dynamic-notification-motion.css";
 @import "./recipes/emoji-picker.css";
+@import "./recipes/icon-picker.css";
+@import "./recipes/tabs.css";
 @import "./recipes/environment-variables.css";
 @import "./recipes/filter-bar.css";
 @import "./recipes/gradient-editor.css";
@@ -76,7 +78,6 @@
 @import "./recipes/switch.css";
 @import "./recipes/table.css";
 @import "./recipes/table-of-contents.css";
-@import "./recipes/tabs.css";
 @import "./recipes/task-list.css";
 @import "./recipes/thread-rail.css";
 @import "./recipes/timeline.css";

package/dist/styles/recipes/accordion.css

@@ -55,13 +55,25 @@
     font-size: var(--text-body);
     text-wrap: pretty;
     height: var(--accordion-panel-height);
-    overflow: hidden;
     transition: height var(--duration-base) var(--ease-emphasized);
   }
 
   :where([data-control-family="accordion"][data-slot="panel"][data-starting-style]),
   :where([data-control-family="accordion"][data-slot="panel"][data-ending-style]) {
     height: 0;
+    overflow: clip;
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    :where([data-control-family="accordion"][data-slot="panel"]) {
+      transition-property: height, overflow;
+      transition-timing-function: var(--ease-emphasized), step-end;
+      transition-behavior: normal, allow-discrete;
+    }
+
+    :where([data-control-family="accordion"][data-slot="panel"][data-ending-style]) {
+      transition-timing-function: var(--ease-emphasized), step-start;
+    }
   }
 }
 

package/dist/styles/recipes/collapsible.css

@@ -38,6 +38,7 @@
   }
 
   :where([data-control-family="collapsible"][data-slot="content"]) {
+    height: var(--collapsible-panel-height);
     transition-property: height, opacity;
     transition-duration: var(--duration-slow);
     transition-timing-function: var(--ease-standard);
@@ -45,9 +46,23 @@
 
   :where([data-control-family="collapsible"][data-slot="content"][data-starting-style]),
   :where([data-control-family="collapsible"][data-slot="content"][data-ending-style]) {
+    height: 0;
+    overflow: clip;
     opacity: 0;
   }
 
+  @supports (transition-behavior: allow-discrete) {
+    :where([data-control-family="collapsible"][data-slot="content"]) {
+      transition-property: height, opacity, overflow;
+      transition-timing-function: var(--ease-standard), var(--ease-standard), step-end;
+      transition-behavior: normal, normal, allow-discrete;
+    }
+
+    :where([data-control-family="collapsible"][data-slot="content"][data-ending-style]) {
+      transition-timing-function: var(--ease-standard), var(--ease-standard), step-start;
+    }
+  }
+
   :where([data-control-family="collapsible"][data-slot="trigger"][data-state="open"] > svg) {
     rotate: 90deg;
   }

package/dist/styles/recipes/emoji-picker.css

@@ -1,14 +1,78 @@
 @layer components {
   :where([data-control-family="emoji-picker"][data-slot="root"]) {
-    --cui-emoji-picker-cell-size: calc(var(--spacing) * 8);
+    --cui-emoji-picker-cell-size: calc(var(--spacing) * 10);
     --cui-emoji-picker-cell-radius: var(--radius-control);
     --cui-emoji-picker-active-background: var(--accent);
     --cui-emoji-picker-header-background: var(--popover);
     --cui-emoji-picker-header-foreground: var(--muted-foreground);
+    --cui-emoji-picker-height: 22rem;
+  }
+  :where([data-control-family="emoji-picker"][data-slot="root"]:not([data-variant="reactions"])) {
+    inline-size: calc(var(--_emoji-picker-columns) * var(--cui-emoji-picker-cell-size) + var(--spacing) * 4);
+    max-inline-size: 100%;
+    block-size: var(--cui-emoji-picker-height);
     color: var(--foreground);
     font-family: var(--font-sans);
   }
 
+  :where([data-control-family="emoji-picker"][data-slot="categories"]) {
+    display: flex;
+    justify-content: space-between;
+    flex-shrink: 0;
+    overflow-x: auto;
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="category"]) {
+    display: grid;
+    place-items: center;
+    flex: 0 0 calc(var(--spacing) * 9);
+    block-size: calc(var(--spacing) * 9);
+    border-radius: var(--cui-emoji-picker-cell-radius);
+    color: var(--muted-foreground);
+    cursor: pointer;
+  }
+  :where([data-control-family="emoji-picker"][data-slot="category"]:hover) {
+    color: var(--foreground);
+    background: var(--cui-emoji-picker-active-background);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="category"] svg) {
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="recent"]) {
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="recent-label"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-caption);
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  :where([data-control-family="emoji-picker"]:is([data-slot="recent-grid"], [data-variant="reactions"])) {
+    display: flex;
+  }
+  :where(
+    [data-control-family="emoji-picker"][data-slot="root"]:has(input:not(:placeholder-shown))
+      :is([data-slot="categories"], [data-slot="recent"])
+  ) {
+    display: none;
+  }
+  :where([data-control-family="emoji-picker"][data-slot="error"]) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 2);
+    block-size: 100%;
+    color: var(--muted-foreground);
+    font-size: var(--text-label);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="error"] button) {
+    color: var(--foreground);
+    text-decoration: underline;
+    min-block-size: 44px;
+    cursor: pointer;
+  }
   :where([data-control-family="emoji-picker"][data-slot="search"]) {
     position: relative;
     margin: calc(var(--spacing) * 2);
@@ -99,6 +163,19 @@
   :where([data-control-family="emoji-picker"][data-slot="footer-label"]) {
     color: var(--foreground);
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="emoji-picker"][data-slot="root"]) {
+      --cui-emoji-picker-cell-size: 44px;
+    }
+    :where([data-control-family="emoji-picker"][data-slot="category"]) {
+      flex-basis: 44px;
+      block-size: 44px;
+    }
+    :where([data-control-family="emoji-picker"][data-slot="search-input"]) {
+      font-size: 16px;
+    }
+  }
 }
 
 @property --cui-emoji-picker-cell-size {
@@ -107,6 +184,12 @@
   initial-value: 0px;
 }
 
+@property --cui-emoji-picker-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-emoji-picker-cell-radius {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/styles/recipes/icon-picker.css

@@ -0,0 +1,101 @@
+@layer components {
+  :where([data-control-family="icon-picker"][data-slot="root"]) {
+    --cui-icon-picker-cell-size: calc(var(--spacing) * 10);
+    --cui-icon-picker-cell-radius: var(--radius-control);
+    --cui-icon-picker-foreground: var(--foreground);
+    --cui-icon-picker-active-background: var(--accent);
+    inline-size: calc(var(--_icon-picker-columns) * var(--cui-icon-picker-cell-size) + var(--spacing) * 4);
+    max-inline-size: 100%;
+    color: var(--cui-icon-picker-foreground);
+  }
+  :where([data-control-family="icon-picker"][data-slot="content"]) {
+    padding: calc(var(--spacing) * 2);
+    max-block-size: 16rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+  :where([data-control-family="icon-picker"][data-slot="grid"]) {
+    display: grid;
+    grid-template-columns: repeat(var(--_icon-picker-columns), minmax(0, 1fr));
+  }
+  :where([data-control-family="icon-picker"][data-slot="icon"]) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--cui-icon-picker-cell-size);
+    min-inline-size: 0;
+    border-radius: var(--cui-icon-picker-cell-radius);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+  :where([data-control-family="icon-picker"][data-slot="icon"]:is(:hover, [aria-pressed="true"])) {
+    background: var(--cui-icon-picker-active-background);
+  }
+  :where([data-control-family="icon-picker"][data-slot="icon"] svg) {
+    inline-size: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 5);
+  }
+  :where([data-control-family="icon-picker"][data-slot="colors"]) {
+    display: flex;
+    gap: calc(var(--spacing) * 1);
+    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2) 0;
+    overflow-x: auto;
+  }
+  :where([data-control-family="icon-picker"][data-slot="color"]) {
+    display: grid;
+    place-items: center;
+    flex: 1 0 calc(var(--spacing) * 9);
+    block-size: calc(var(--spacing) * 10);
+    border-radius: var(--cui-icon-picker-cell-radius, var(--radius-control));
+    cursor: pointer;
+  }
+  :where([data-control-family="icon-picker"][data-slot="color"] > span) {
+    inline-size: calc(var(--spacing) * 6);
+    block-size: calc(var(--spacing) * 6);
+    border-radius: 50%;
+    background: currentColor;
+  }
+  :where([data-control-family="icon-picker"][data-slot="color"][data-checked] > span) {
+    outline: 2px solid var(--foreground);
+    outline-offset: 3px;
+  }
+  :where([data-control-family="icon-picker"][data-slot="empty"]) {
+    display: grid;
+    place-items: center;
+    min-block-size: calc(var(--spacing) * 20);
+    color: var(--muted-foreground);
+    font-size: var(--text-label);
+  }
+  @media (pointer: coarse) {
+    :where([data-control-family="icon-picker"][data-slot="root"]) {
+      --cui-icon-picker-cell-size: 44px;
+    }
+    :where([data-control-family="icon-picker"][data-slot="color"]) {
+      min-inline-size: 44px;
+      block-size: 44px;
+    }
+  }
+}
+@property --cui-icon-picker-cell-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+@property --cui-icon-picker-cell-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+@property --cui-icon-picker-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --cui-icon-picker-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/markdown.css

@@ -12,6 +12,8 @@
     --cui-markdown-table-header-background: var(--muted);
     --cui-markdown-font-size: var(--text-body);
     --cui-markdown-line-height: var(--leading-relaxed);
+    --cui-markdown-flow-gap: calc(var(--spacing) * 4);
+    --cui-markdown-heading-gap: calc(var(--spacing) * 6);
     color: var(--cui-markdown-foreground);
     font-size: var(--cui-markdown-font-size);
     overflow-wrap: break-word;
@@ -180,6 +182,58 @@
     margin-block: calc(var(--spacing) * 4);
   }
 
+  :where([data-control-family="markdown"][data-slot="flow"] > .cui-markdown-streamdown) {
+    display: contents;
+  }
+
+  :where([data-control-family="markdown"][data-slot="flow"]) {
+    display: grid;
+    min-width: 0;
+    row-gap: var(--cui-markdown-flow-gap);
+  }
+
+  :where(
+    :is([data-control-family="markdown"][data-slot="flow"], .cui-markdown-streamdown)
+      > [data-control-family="markdown"]:is(
+        [data-slot="paragraph"],
+        [data-slot="unordered-list"],
+        [data-slot="ordered-list"],
+        [data-slot="blockquote"],
+        [data-slot="separator"],
+        [data-slot="table-scroll"]
+      )
+  ) {
+    margin-block: 0;
+  }
+
+  :where(
+    :is([data-control-family="markdown"][data-slot="flow"], .cui-markdown-streamdown)
+      > [data-control-family="markdown"]:is(
+        [data-slot="h1"],
+        [data-slot="h2"],
+        [data-slot="h3"],
+        [data-slot="h4"],
+        [data-slot="h5"],
+        [data-slot="h6"]
+      )
+  ) {
+    margin-block: max(0px, calc(var(--cui-markdown-heading-gap) - var(--cui-markdown-flow-gap))) 0;
+  }
+
+  :where(
+    :is([data-control-family="markdown"][data-slot="flow"], .cui-markdown-streamdown)
+      > [data-control-family="markdown"]:is(
+        [data-slot="h1"],
+        [data-slot="h2"],
+        [data-slot="h3"],
+        [data-slot="h4"],
+        [data-slot="h5"],
+        [data-slot="h6"]
+      ):first-child
+  ) {
+    margin-block-start: 0;
+  }
+
   :where([data-control-family="markdown"][data-slot="inline-code"]) {
     padding-inline: calc(var(--spacing) * 1);
     padding-block: calc(var(--spacing) * 0.5);
@@ -263,3 +317,15 @@
   inherits: true;
   initial-value: 1.5;
 }
+
+@property --cui-markdown-flow-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-heading-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

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

@@ -1,4 +1,14 @@
 @layer components {
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="viewport"]) {
+    block-size: var(--_popover-viewport-height, auto);
+    overflow: clip;
+    transition: block-size var(--duration-base) var(--ease-emphasized);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="viewport-content"]) {
+    display: flow-root;
+  }
+
   :where([data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"]) {
     transition-property: translate;
     transition-duration: var(--duration-base);

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

@@ -5,6 +5,50 @@
     --cui-scroll-area-corner-background: transparent;
   }
 
+  :where([data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-scroll-area-viewport],
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-control-family="progressive-blur"]
+  ) {
+    grid-area: 1 / 1;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
+      > [data-slot="scrollbar"][data-orientation="vertical"]
+  ) {
+    grid-area: 1 / 2;
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
+      > [data-slot="scrollbar"][data-orientation="horizontal"]
+  ) {
+    grid-area: 2 / 1;
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-slot="corner"]) {
+    grid-area: 2 / 2;
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
+      > [data-slot="scrollbar"][data-orientation="vertical"]:not([data-has-overflow-y])
+      > [data-slot="thumb"],
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
+      > [data-slot="scrollbar"][data-orientation="horizontal"]:not([data-has-overflow-x])
+      > [data-slot="thumb"]
+  ) {
+    display: none;
+  }
+
   @supports (corner-shape: squircle) {
     @container not style(--corner-shape: round) {
       :where([data-control-family="scroll-area"][data-slot="root"] > [data-control-family="progressive-blur"]) {
@@ -18,11 +62,6 @@
     z-index: 0;
     border-radius: inherit;
     outline: none;
-    transition:
-      --_scroll-area-fade-top var(--duration-fast) var(--ease-standard),
-      --_scroll-area-fade-bottom var(--duration-fast) var(--ease-standard),
-      --_scroll-area-fade-left var(--duration-fast) var(--ease-standard),
-      --_scroll-area-fade-right var(--duration-fast) var(--ease-standard);
   }
 
   :where(
@@ -53,39 +92,26 @@
   }
 
   :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-y-start]:not([data-lock-axis="y"], [data-lock-axis="both"])
-      > [data-scroll-area-viewport]
-  ) {
-    --_scroll-area-fade-top: var(--scroll-fade-size);
-  }
-
-  :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-y-end]:not([data-lock-axis="y"], [data-lock-axis="both"])
-      > [data-scroll-area-viewport]
+    [data-control-family="scroll-area"][data-slot="root"]:not([data-lock-axis="y"], [data-lock-axis="both"]) > [data-scroll-area-viewport]
   ) {
-    --_scroll-area-fade-bottom: var(--scroll-fade-size);
+    --_scroll-area-fade-top: min(var(--scroll-fade-size), var(--scroll-area-overflow-y-start, 0px));
+    --_scroll-area-fade-bottom: min(var(--scroll-fade-size), var(--scroll-area-overflow-y-end, 0px));
   }
 
   :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-start]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(ltr)
-      > [data-scroll-area-viewport]
-  ),
-  :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-end]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(rtl)
+    [data-control-family="scroll-area"][data-slot="root"]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(ltr)
       > [data-scroll-area-viewport]
   ) {
-    --_scroll-area-fade-left: var(--scroll-fade-size);
+    --_scroll-area-fade-left: min(var(--scroll-fade-size), var(--scroll-area-overflow-x-start, 0px));
+    --_scroll-area-fade-right: min(var(--scroll-fade-size), var(--scroll-area-overflow-x-end, 0px));
   }
 
   :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-end]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(ltr)
-      > [data-scroll-area-viewport]
-  ),
-  :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-start]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(rtl)
+    [data-control-family="scroll-area"][data-slot="root"]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(rtl)
       > [data-scroll-area-viewport]
   ) {
-    --_scroll-area-fade-right: var(--scroll-fade-size);
+    --_scroll-area-fade-left: min(var(--scroll-fade-size), var(--scroll-area-overflow-x-end, 0px));
+    --_scroll-area-fade-right: min(var(--scroll-fade-size), var(--scroll-area-overflow-x-start, 0px));
   }
 
   :where(