@ctrl-ui/react 0.8.0 → 0.8.2

package/dist/skin.config.js

@@ -1,4 +1,12 @@
 //#region src/skin.config.tsx
-const skin = { id: "refined" };
+const skin = {
+	id: "refined",
+	indicators: {
+		sidebar: "hover",
+		"button-group": "hover",
+		"toggle-group": "hover",
+		"checkbox-group": "hover"
+	}
+};
 //#endregion
 export { skin };

package/dist/skin.d.ts

@@ -1,4 +1,4 @@
-import { SelectionIndicator } from "./control-props.js";
+import { HoverIndicator, SelectionIndicator } from "./control-props.js";
 import { ControlTone, ControlVariant } from "./control-variants.js";
 import { ReactNode } from "react";
 //#region src/skin.d.ts
@@ -28,6 +28,13 @@ type SkinAdornmentContexts = {
 type SkinAdornmentScope = keyof SkinAdornmentContexts;
 type SkinAdornmentPart<Scope extends SkinAdornmentScope> = keyof SkinAdornmentContexts[Scope];
 type AdornmentEntry<Ctx> = ReactNode | ((ctx: Ctx) => ReactNode);
+type SkinIndicators = {
+  sidebar?: SelectionIndicator | HoverIndicator;
+  tree?: SelectionIndicator;
+  "button-group"?: HoverIndicator;
+  "toggle-group"?: HoverIndicator;
+  "checkbox-group"?: HoverIndicator;
+};
 type ControlUiSkin = {
   /** Scopes theme.css/skin.css via data-skin; components stamp it on portal containers. */
   id: string;
@@ -37,11 +44,7 @@ type ControlUiSkin = {
   colorScheme?: "light" | "dark";
   /** Geometry, not slot restyle — padding, gap, rounding, and shadow across sidebar gap/container/inner. explicit `variant` prop wins; undefined keeps "sidebar". */
   sidebarLayout?: SidebarLayout;
-  /** App-wide choice: sidebars and trees all glide or none do. Explicit `indicator` still wins; undefined also skips highlight engine's lazy chunk. */
-  indicators?: {
-    sidebar?: SelectionIndicator;
-    tree?: SelectionIndicator;
-  };
+  indicators?: SkinIndicators;
   /** Any CSS length. Seeds --sidebar-width; caller's own value still wins. Undefined keeps shadcn's 16rem. */
   sidebarWidth?: string;
   /** effects.css keys off data-effects ancestor attribute. top-shine is CSS-only; ripple needs runtime's document pointer listener. */
@@ -57,8 +60,7 @@ declare function activeSkin(): ControlUiSkin;
 declare function skinId(): string;
 /** Sidebar falls back: variant prop → this → "sidebar". */
 declare function skinSidebarLayout(): SidebarLayout | undefined;
-/** Component falls back: indicator prop → this → "none". */
-declare function skinIndicator(component: "sidebar" | "tree"): SelectionIndicator | undefined;
+declare function skinIndicator<Component extends keyof SkinIndicators>(component: Component): SkinIndicators[Component];
 /** SidebarProvider seeds --sidebar-width from this; caller-provided value still wins. */
 declare function skinSidebarWidth(): string | undefined;
 /** Portals stamp result next to data-skin; ControlEffectsRuntime mirrors it on <html>. */
@@ -66,4 +68,4 @@ declare function skinEffects(): string | undefined;
 declare function skinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(scope: Scope, part: Part, ctx: SkinAdornmentContexts[Scope][Part]): ReactNode | undefined;
 declare function hasSkinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(scope: Scope, part: Part): boolean;
 //#endregion
-export { ControlEffect, ControlEffectValue, ControlUiSkin, SidebarLayout, SkinAdornmentContexts, SkinAdornmentPart, SkinAdornmentScope, activeSkin, controlEffectsAttribute, hasSkinAdornment, skinAdornment, skinEffects, skinId, skinIndicator, skinSidebarLayout, skinSidebarWidth };
+export { ControlEffect, ControlEffectValue, ControlUiSkin, SidebarLayout, SkinAdornmentContexts, SkinAdornmentPart, SkinAdornmentScope, SkinIndicators, activeSkin, controlEffectsAttribute, hasSkinAdornment, skinAdornment, skinEffects, skinId, skinIndicator, skinSidebarLayout, skinSidebarWidth };

package/dist/skin.js

@@ -36,7 +36,6 @@ function skinId() {
 function skinSidebarLayout() {
 	return skin.sidebarLayout;
 }
-/** Component falls back: indicator prop → this → "none". */
 function skinIndicator(component) {
 	return skin.indicators?.[component];
 }

package/dist/styles/index.css

@@ -3,6 +3,7 @@
 @import "./recipes/button.css";
 @import "./recipes/action-bar.css";
 @import "./recipes/collapsible.css";
+@import "./recipes/progressive-blur.css";
 @import "./recipes/scroll-area.css";
 @import "./recipes/activity.css";
 @import "./recipes/alert.css";
@@ -16,6 +17,7 @@
 @import "./recipes/field-parts.css";
 @import "./recipes/avatar.css";
 @import "./recipes/badge.css";
+@import "./recipes/track-highlight.css";
 @import "./recipes/button-group.css";
 @import "./recipes/calendar.css";
 @import "./recipes/card.css";
@@ -30,8 +32,8 @@
 @import "./recipes/code.css";
 @import "./recipes/code-block-editor.css";
 @import "./recipes/code-diff.css";
-@import "./recipes/track-highlight.css";
 @import "./recipes/sidebar.css";
+@import "./recipes/sidebar-menu.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";

package/dist/styles/recipes/button-group.css

@@ -5,6 +5,7 @@
     --cui-button-group-text-foreground: var(--muted-foreground);
     --cui-button-group-separator-background: var(--border);
   }
+
   :where([data-control-family="button-group"][data-slot="text"]) {
     block-size: var(--control-h-md);
     border: 1px solid var(--border);
@@ -37,6 +38,51 @@
   :where([data-control-family="button-group"][data-slot="separator"]) {
     background: var(--cui-button-group-separator-background);
   }
+  :where([data-control-family="button-group"][data-slot="root"] > :not([data-control-family="track-highlight"])) {
+    position: relative;
+  }
+
+  :where(
+    [data-control-family="button-group"][data-orientation="horizontal"]
+      > :not([data-control-family="track-highlight"])
+      + :not([data-control-family="track-highlight"])
+  ) {
+    margin-inline-start: -1px;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :where([data-control-family="button-group"][data-orientation="horizontal"] > :has(~ :not([data-control-family="track-highlight"]))) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :where(
+    [data-control-family="button-group"][data-orientation="vertical"]
+      > :not([data-control-family="track-highlight"])
+      + :not([data-control-family="track-highlight"])
+  ) {
+    margin-block-start: -1px;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  :where([data-control-family="button-group"][data-orientation="vertical"] > :has(~ :not([data-control-family="track-highlight"]))) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :where([data-control-family="button-group"][data-slot="root"] > :focus-within) {
+    z-index: 1;
+  }
+
+  :where([data-control-family="button-group"][data-slot="root"] > [data-active="true"]) {
+    z-index: 2;
+  }
+
+  :where([data-control-family="button-group"][data-slot="root"] > [data-active="true"]:focus-within) {
+    z-index: 3;
+  }
 }
 
 @property --cui-button-group-text-radius {

package/dist/styles/recipes/button.css

@@ -20,6 +20,9 @@
     --cui-button-shadow: 0 0 transparent;
     --cui-button-hover-shadow: var(--cui-button-shadow);
     --cui-button-press-shadow: var(--cui-button-hover-shadow);
+    --cui-button-open-background: var(--cui-button-hover-background);
+    --cui-button-open-foreground: var(--cui-button-hover-foreground);
+    --cui-button-open-shadow: var(--cui-button-shadow);
     border-radius: var(--cui-button-radius);
     background-color: var(--cui-button-background);
     background-image: var(--cui-button-background-image);
@@ -33,7 +36,6 @@
     transition-duration: var(--duration-fast);
   }
 
-  /* Keyed on the family alone so every trigger owns the knob. */
   :where([data-control-family="button"]) {
     gap: var(--cui-button-gap);
   }
@@ -68,7 +70,6 @@
     padding-inline: 0;
   }
 
-  /* Default clamp for unclassed icons (lucide ships width/height 24); zero specificity, so any utility on the svg wins. */
   :where([data-control-family="button"][data-control="true"] svg) {
     pointer-events: none;
     flex-shrink: 0;
@@ -110,9 +111,8 @@
     --cui-button-active-hover-background: oklch(from var(--primary) l c h / 0.1);
   }
 
-  :where([data-control-family="button"]:is([data-variant="surface"], [data-variant="ghost"], [data-variant="quiet"])[data-popup-open]) {
-    background-color: oklch(from var(--foreground) l c h / 0.07);
-    color: var(--cui-button-hover-foreground);
+  :where([data-control-family="button"]:is([data-variant="surface"], [data-variant="ghost"], [data-variant="quiet"])) {
+    --cui-button-open-background: oklch(from var(--foreground) l c h / 0.07);
   }
 
   :where([data-control-family="button"][data-tone="primary"]:not([data-variant="solid"])) {
@@ -147,6 +147,12 @@
     }
   }
 
+  :where([data-control-family="button"][data-popup-open]) {
+    background-color: var(--cui-button-open-background);
+    color: var(--cui-button-open-foreground);
+    box-shadow: var(--cui-button-open-shadow);
+  }
+
   :where([data-control-family="button"][data-active="true"]) {
     background-color: var(--cui-button-active-background);
     box-shadow: var(--cui-button-active-shadow);
@@ -160,6 +166,30 @@
     }
   }
 
+  @scope ([data-track="hover"]) to ([data-track]) {
+    @media (hover: hover) {
+      :where(
+          [data-track="hover"] [data-control-family="button"][data-track-item]:hover:not([data-active="true"], [data-popup-open], :active)
+        ) {
+        background-color: var(--cui-button-background);
+        box-shadow: var(--cui-button-shadow);
+      }
+
+      :where(
+          [data-track="hover"] [data-control-family="button"][data-track-item][data-active="true"]:hover:not([data-popup-open], :active)
+        ) {
+        background-color: var(--cui-button-active-background);
+      }
+    }
+  }
+
+  @scope ([data-track="slide"]) to ([data-track]) {
+    :where([data-track="slide"] [data-control-family="button"][data-track-item]:not([data-popup-open], :active)) {
+      background-color: var(--cui-button-background);
+      box-shadow: var(--cui-button-shadow);
+    }
+  }
+
   :where([data-control-family="button"][data-control="true"]:active) {
     background-color: var(--cui-button-press-background);
     box-shadow: var(--cui-button-press-shadow);
@@ -303,3 +333,21 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-button-open-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-open-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-open-shadow {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}

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

@@ -0,0 +1,145 @@
+@layer components {
+  :where([data-control-family="progressive-blur"][data-slot="root"]) {
+    --cui-progressive-blur-size: 3rem;
+    --cui-progressive-blur-backdrop-blur: 16px;
+    --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;
+    display: none;
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="root"][data-visible]) {
+    --_progressive-blur-visibility: visible;
+    --_progressive-blur-enter: 1;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="root"]:is([data-side="top"], [data-side="bottom"])) {
+    inset-inline: 0;
+    height: min(50%, max(0px, var(--cui-progressive-blur-size)));
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="root"][data-side="top"]) {
+    top: 0;
+    --_progressive-blur-direction: to top;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="root"][data-side="bottom"]) {
+    bottom: 0;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="root"]:is([data-side="inline-start"], [data-side="inline-end"])) {
+    inset-block: 0;
+    width: min(50%, max(0px, var(--cui-progressive-blur-size)));
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="root"][data-side="inline-start"]) {
+    inset-inline-start: 0;
+    --_progressive-blur-direction: to left;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="root"][data-side="inline-end"]) {
+    inset-inline-end: 0;
+    --_progressive-blur-direction: to right;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="root"][data-side="inline-start"]:dir(rtl)) {
+    --_progressive-blur-direction: to right;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="root"][data-side="inline-end"]:dir(rtl)) {
+    --_progressive-blur-direction: to left;
+  }
+
+  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (mask-image: linear-gradient(black, transparent)) {
+    :where([data-control-family="progressive-blur"][data-slot="root"]) {
+      display: block;
+    }
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="layer"]) {
+    --_progressive-blur-index: 0;
+    --_progressive-blur-divisor: 32;
+    --_progressive-blur-duration: calc(var(--cui-progressive-blur-transition-duration) * (0.65 + var(--_progressive-blur-enter, 0) * 0.35));
+    position: absolute;
+    inset: 0;
+    opacity: var(--_progressive-blur-enter, 0);
+    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)
+    );
+    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)),
+      visibility calc(var(--duration-fast) * 0) var(--ease-standard)
+      calc((1 - var(--_progressive-blur-enter, 0)) * var(--_progressive-blur-duration));
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="layer"]:nth-child(2)) {
+    --_progressive-blur-index: 1;
+    --_progressive-blur-divisor: 16;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="layer"]:nth-child(3)) {
+    --_progressive-blur-index: 2;
+    --_progressive-blur-divisor: 8;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="layer"]:nth-child(4)) {
+    --_progressive-blur-index: 3;
+    --_progressive-blur-divisor: 4;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="layer"]:nth-child(5)) {
+    --_progressive-blur-index: 4;
+    --_progressive-blur-divisor: 2;
+  }
+
+  :where([data-control-family="progressive-blur"][data-slot="layer"]:nth-child(6)) {
+    --_progressive-blur-index: 5;
+    --_progressive-blur-divisor: 1;
+  }
+
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    :where([data-control-family="progressive-blur"][data-slot="root"]) {
+      display: none;
+    }
+  }
+}
+
+@property --cui-progressive-blur-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-progressive-blur-backdrop-blur {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-progressive-blur-transition-duration {
+  syntax: "<time>";
+  inherits: true;
+  initial-value: 0s;
+}
+
+@property --cui-progressive-blur-transition-delay {
+  syntax: "<time>";
+  inherits: true;
+  initial-value: 0s;
+}

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

@@ -5,6 +5,121 @@
     --cui-scroll-area-corner-background: transparent;
   }
 
+  :where([data-control-family="scroll-area"][data-slot="root"] > [data-scroll-area-viewport]) {
+    position: relative;
+    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(
+    [data-control-family="scroll-area"][data-slot="root"][data-mask]:is(
+        [data-overflow-x-start],
+        [data-overflow-x-end],
+        [data-overflow-y-start],
+        [data-overflow-y-end]
+      )
+      > [data-scroll-area-viewport]
+  ) {
+    mask-image:
+      linear-gradient(
+        to bottom,
+        oklch(0 0 0 / 0),
+        oklch(0 0 0) min(50%, var(--_scroll-area-fade-top)),
+        oklch(0 0 0) calc(100% - min(50%, var(--_scroll-area-fade-bottom))),
+        oklch(0 0 0 / 0)
+      ),
+      linear-gradient(
+        to right,
+        oklch(0 0 0 / 0),
+        oklch(0 0 0) min(50%, var(--_scroll-area-fade-left)),
+        oklch(0 0 0) calc(100% - min(50%, var(--_scroll-area-fade-right))),
+        oklch(0 0 0 / 0)
+      );
+    mask-composite: intersect;
+  }
+
+  :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]
+  ) {
+    --_scroll-area-fade-bottom: var(--scroll-fade-size);
+  }
+
+  :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-scroll-area-viewport]
+  ) {
+    --_scroll-area-fade-left: var(--scroll-fade-size);
+  }
+
+  :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-scroll-area-viewport]
+  ) {
+    --_scroll-area-fade-right: var(--scroll-fade-size);
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-overflow-y-start] > [data-control-family="progressive-blur"][data-side="top"]
+  ),
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-overflow-y-end]
+      > [data-control-family="progressive-blur"][data-side="bottom"]
+  ),
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-start]
+      > [data-control-family="progressive-blur"][data-side="inline-start"]
+  ),
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-end]
+      > [data-control-family="progressive-blur"][data-side="inline-end"]
+  ) {
+    --_progressive-blur-visibility: visible;
+    --_progressive-blur-enter: 1;
+  }
+
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    :where([data-control-family="scroll-area"][data-slot="root"][data-mask] > [data-scroll-area-viewport]) {
+      mask-image: none;
+    }
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-mask] > [data-scroll-area-viewport]:is(:focus-visible, :has(:focus-visible))
+  ) {
+    mask-image: none;
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"]
+      > [data-scroll-area-viewport]:is(:focus-visible, :has(:focus-visible))
+      ~ [data-control-family="progressive-blur"]
+  ) {
+    --_progressive-blur-visibility: hidden;
+    --_progressive-blur-enter: 0;
+  }
+
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-orientation="vertical"]) {
     inline-size: calc(var(--spacing) * 1.5);
   }
@@ -14,6 +129,7 @@
   }
 
   :where([data-control-family="scroll-area"][data-slot="scrollbar"]) {
+    z-index: 1;
     opacity: 0;
     transition: opacity var(--duration-fast) var(--ease-standard);
   }
@@ -30,16 +146,35 @@
     transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
-  :where([data-control-family="scroll-area"][data-slot="viewport"]) {
-    border-radius: inherit;
-    outline: none;
-  }
-
   :where([data-control-family="scroll-area"][data-slot="corner"]) {
     background: var(--cui-scroll-area-corner-background);
   }
 }
 
+@property --_scroll-area-fade-top {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_scroll-area-fade-bottom {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_scroll-area-fade-left {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_scroll-area-fade-right {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
 @property --cui-scroll-area-thumb-radius {
   syntax: "<length-percentage>";
   inherits: true;