@ctrl-ui/react 0.9.14 → 0.9.16

package/README.md

@@ -54,6 +54,7 @@ These rules keep call sites honest. They come from one policy (`lint/class-polic
 - `no-component-style-classes` errors when `className` on a component imported from `@ctrl-ui/react` (or a `components/control-ui` directory) sets what the component owns: colors, type, padding, borders, radius, shadows, filters, state styles such as `hover:` and `data-[…]:`, arbitrary properties that paint (`[background:…]`), or `!important`. Every `text-*` class counts except alignment and wrapping (`text-center`, `text-pretty`, `text-ellipsis`…). The rule also reads string constants the `className` references in the same file, and the `className` of the element passed to the component's `render` prop. On any other element, it errors on classes that reach into a component's parts, such as `[&_[data-slot=trigger]]:` or `*:data-[slot=icon]:`. Layout classes (`flex`, `gap-*`, widths, heights, margins, placement) stay allowed. Restyle through the component's props or its `--cui-*` knobs instead.
 - `no-component-style-props` applies the same boundary to `style`: `--cui-*` knobs and layout keys pass, while paint keys error (`color`, `background`, `font*`, `padding*`, `border*`, `boxShadow`, `opacity`, `filter`…). It also checks same-file constant objects and the element passed to `render`. When the paint is data, such as a user-picked fill, put it on a plain element of your own and let the component inherit it.
 - `no-component-part-css` errors when a stylesheet paints a component part: a rule whose subject is `[data-slot]`, `[data-control-family]`, or another `[data-control…]` attribute, including nested `&` rules and `@apply`. Setting the part's `--cui-*` knobs and layout there stays allowed. The preset skips installed Control UI source under `components/control-ui`.
+- Paint-free components own no look, so both component rules treat them like plain elements: `RevealScope` can be the painted row or card itself, through `className`, `style`, or its `render` element. Part selectors on it still error, and `Reveal` keeps the full rule because its recipe owns opacity.
 - `no-raw-type-classes` errors on text sizes in any `className`: the type rungs, Tailwind's `text-xs`…`text-9xl`, and arbitrary `text-[13px]`. It reaches beyond Control UI, so adopt it folder by folder while you migrate.
 
 The Biome rules need Biome 2.5.0 or later: the preset scopes the stylesheet rule with plugin `includes`.

package/dist/control-variants.d.ts

@@ -1,6 +1,6 @@
 //#region src/control-variants.d.ts
 export type ControlSize = "xs" | "sm" | "md" | "lg";
-export declare const buttonVariants: readonly ["solid", "surface", "ghost", "quiet", "dashed", "link"];
+export declare const buttonVariants: readonly ["solid", "surface", "ghost", "quiet", "dashed", "link", "scrim"];
 export type ButtonVariant = (typeof buttonVariants)[number];
 export declare const controlTones: readonly ["neutral", "primary", "danger"];
 export type ControlTone = (typeof controlTones)[number];

package/dist/control-variants.js

@@ -5,7 +5,8 @@ const buttonVariants = [
 	"ghost",
 	"quiet",
 	"dashed",
-	"link"
+	"link",
+	"scrim"
 ];
 const controlTones = [
 	"neutral",

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/button-knobs.d.ts
-export declare const buttonKnobs: readonly ["--cui-button-press-background", "--cui-button-press-scale", "--cui-button-hover-border-color", "--cui-button-open-border-color", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow", "--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-padding-block", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-font-weight", "--cui-button-background", "--cui-button-background-image", "--cui-button-hover-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-border-width", "--cui-button-border-style", "--cui-button-border-color"];
+export declare const buttonKnobs: readonly ["--cui-button-press-background", "--cui-button-press-scale", "--cui-button-hover-border-color", "--cui-button-open-border-color", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow", "--cui-button-hover-background-image", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-padding-block", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-font-weight", "--cui-button-background", "--cui-button-background-image", "--cui-button-foreground", "--cui-button-shadow", "--cui-button-border-width", "--cui-button-border-style", "--cui-button-border-color", "--cui-button-backdrop-filter"];
 export type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
 //#endregion

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

@@ -7,6 +7,15 @@ const buttonKnobs = [
 	"--cui-button-open-background",
 	"--cui-button-open-foreground",
 	"--cui-button-open-shadow",
+	"--cui-button-hover-background-image",
+	"--cui-button-hover-background",
+	"--cui-button-hover-foreground",
+	"--cui-button-active-background",
+	"--cui-button-active-foreground",
+	"--cui-button-active-hover-background",
+	"--cui-button-hover-shadow",
+	"--cui-button-press-shadow",
+	"--cui-button-active-shadow",
 	"--cui-button-radius",
 	"--cui-button-gap",
 	"--cui-button-icon",
@@ -18,20 +27,12 @@ const buttonKnobs = [
 	"--cui-button-font-weight",
 	"--cui-button-background",
 	"--cui-button-background-image",
-	"--cui-button-hover-background-image",
 	"--cui-button-foreground",
-	"--cui-button-hover-background",
-	"--cui-button-hover-foreground",
-	"--cui-button-active-background",
-	"--cui-button-active-foreground",
-	"--cui-button-active-hover-background",
 	"--cui-button-shadow",
-	"--cui-button-hover-shadow",
-	"--cui-button-press-shadow",
-	"--cui-button-active-shadow",
 	"--cui-button-border-width",
 	"--cui-button-border-style",
-	"--cui-button-border-color"
+	"--cui-button-border-color",
+	"--cui-button-backdrop-filter"
 ];
 //#endregion
 export { buttonKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/item-knobs.d.ts
-export declare const itemKnobs: readonly ["--cui-item-radius", "--cui-item-hover-background", "--cui-item-current-background", "--cui-item-hover-border-color", "--cui-item-border-width", "--cui-item-active-scale", "--cui-item-gap", "--cui-item-padding-block", "--cui-item-padding-inline", "--cui-item-description-font-size", "--cui-item-description-line-height", "--cui-item-description-foreground", "--cui-item-media-foreground"];
+export declare const itemKnobs: readonly ["--cui-item-radius", "--cui-item-hover-background", "--cui-item-current-background", "--cui-item-foreground", "--cui-item-selected-background", "--cui-item-selected-foreground", "--cui-item-dragging-opacity", "--cui-item-drop-target-shadow", "--cui-item-hover-border-color", "--cui-item-border-width", "--cui-item-active-scale", "--cui-item-gap", "--cui-item-padding-block", "--cui-item-padding-inline", "--cui-item-description-font-size", "--cui-item-description-line-height", "--cui-item-description-foreground", "--cui-item-media-foreground"];
 export type ItemKnobStyle = Partial<Record<(typeof itemKnobs)[number], string>>;
 //#endregion

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

@@ -3,6 +3,11 @@ const itemKnobs = [
 	"--cui-item-radius",
 	"--cui-item-hover-background",
 	"--cui-item-current-background",
+	"--cui-item-foreground",
+	"--cui-item-selected-background",
+	"--cui-item-selected-foreground",
+	"--cui-item-dragging-opacity",
+	"--cui-item-drop-target-shadow",
 	"--cui-item-hover-border-color",
 	"--cui-item-border-width",
 	"--cui-item-active-scale",

package/dist/knob-contracts/resize-handle-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/resize-handle-knobs.d.ts
-export declare const resizeHandleKnobs: readonly ["--cui-resize-handle-size", "--cui-resize-handle-hit-size", "--cui-resize-handle-background", "--cui-resize-handle-hover-background", "--cui-resize-handle-border-color", "--cui-resize-handle-border-width", "--cui-resize-handle-radius"];
+export declare const resizeHandleKnobs: readonly ["--cui-resize-handle-size", "--cui-resize-handle-hit-size", "--cui-resize-handle-background", "--cui-resize-handle-hover-background", "--cui-resize-handle-border-color", "--cui-resize-handle-border-width", "--cui-resize-handle-radius", "--cui-resize-handle-shadow"];
 export type ResizeHandleKnobStyle = Partial<Record<(typeof resizeHandleKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/resize-handle-knobs.js

@@ -6,7 +6,8 @@ const resizeHandleKnobs = [
 	"--cui-resize-handle-hover-background",
 	"--cui-resize-handle-border-color",
 	"--cui-resize-handle-border-width",
-	"--cui-resize-handle-radius"
+	"--cui-resize-handle-radius",
+	"--cui-resize-handle-shadow"
 ];
 //#endregion
 export { resizeHandleKnobs };

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/reveal-knobs.d.ts
+export declare const revealKnobs: readonly ["--cui-reveal-hidden-opacity"];
+export type RevealKnobStyle = Partial<Record<(typeof revealKnobs)[number], string>>;
+//#endregion

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/reveal-knobs.ts
+const revealKnobs = ["--cui-reveal-hidden-opacity"];
+//#endregion
+export { revealKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/tabs-knobs.d.ts
-export declare const tabsKnobs: readonly ["--cui-tabs-surface-background", "--cui-tabs-surface-radius", "--cui-tabs-trigger-padding-inline", "--cui-tabs-trigger-radius", "--cui-tabs-trigger-height", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-font-size", "--cui-tabs-font-weight", "--cui-tabs-active-foreground", "--cui-tabs-hover-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width", "--cui-tabs-indicator-background-image"];
+export declare const tabsKnobs: readonly ["--cui-tabs-surface-background", "--cui-tabs-surface-radius", "--cui-tabs-trigger-padding-inline", "--cui-tabs-trigger-padding-inline-start", "--cui-tabs-trigger-padding-inline-end", "--cui-tabs-trigger-radius", "--cui-tabs-trigger-height", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-font-size", "--cui-tabs-font-weight", "--cui-tabs-active-foreground", "--cui-tabs-hover-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width", "--cui-tabs-indicator-background-image"];
 export type TabsKnobStyle = Partial<Record<(typeof tabsKnobs)[number], string>>;
 //#endregion

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

@@ -3,6 +3,8 @@ const tabsKnobs = [
 	"--cui-tabs-surface-background",
 	"--cui-tabs-surface-radius",
 	"--cui-tabs-trigger-padding-inline",
+	"--cui-tabs-trigger-padding-inline-start",
+	"--cui-tabs-trigger-padding-inline-end",
 	"--cui-tabs-trigger-radius",
 	"--cui-tabs-trigger-height",
 	"--cui-tabs-list-padding",

package/dist/styles/index.css

@@ -84,6 +84,7 @@
 @import "./recipes/pagination.css";
 @import "./recipes/phone-input.css";
 @import "./recipes/resize-handle.css";
+@import "./recipes/reveal.css";
 @import "./recipes/rich-tooltip.css";
 @import "./recipes/skeleton.css";
 @import "./recipes/stepper.css";

package/dist/styles/recipes/badge.css

@@ -46,6 +46,18 @@
     }
   }
 
+  :where([data-control-family="badge"][data-slot="root"][data-color="primary"]) {
+    --_badge-color-background: var(--primary);
+    --_badge-color-foreground: var(--primary-foreground);
+    --_badge-color-border: var(--primary);
+    --_badge-color-background-hover: oklch(from var(--primary) calc(l - 0.05) c h);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-color="primary"][data-variant="outline"]) {
+    --_badge-color-background: oklch(from var(--primary) l c h / var(--badge-fill-alpha));
+    --_badge-color-foreground: var(--primary-text);
+  }
+
   :where([data-control-family="badge"][data-slot="root"][data-color="red"]) {
     --_badge-color-background: var(--badge-red);
     --_badge-color-foreground: var(--badge-red-foreground);

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

@@ -125,3 +125,53 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-button-hover-background-image {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-button-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-active-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-hover-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-button-press-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-button-active-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/button.css

@@ -56,10 +56,12 @@
     --cui-button-border-color: var(--control-rim);
     --cui-button-hover-border-color: var(--cui-button-border-color);
     --cui-button-open-border-color: var(--cui-button-hover-border-color);
+    --cui-button-backdrop-filter: none;
     border: var(--cui-button-border-width) var(--cui-button-border-style) var(--cui-button-border-color);
     border-radius: var(--cui-button-radius);
     background-color: var(--cui-button-background);
     background-image: var(--cui-button-background-image);
+    backdrop-filter: var(--cui-button-backdrop-filter);
     box-shadow: var(--cui-button-shadow);
     color: var(--cui-button-foreground);
     cursor: pointer;
@@ -193,6 +195,16 @@
     --cui-button-hover-background: transparent;
   }
 
+  :where([data-control-family="button"][data-variant="scrim"]) {
+    --cui-button-background: oklch(0 0 0 / 0.6);
+    --cui-button-foreground: oklch(1 0 0);
+    --cui-button-hover-background: oklch(0 0 0 / 0.8);
+    --cui-button-hover-foreground: var(--cui-button-foreground);
+    --cui-button-active-background: var(--cui-button-foreground);
+    --cui-button-active-foreground: oklch(0 0 0);
+    --cui-button-backdrop-filter: blur(8px);
+  }
+
   :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);
   }
@@ -210,7 +222,7 @@
     }
   }
 
-  :where([data-control-family="button"][data-tone="primary"]:not([data-variant="solid"])) {
+  :where([data-control-family="button"][data-tone="primary"]:not([data-variant="solid"], [data-variant="scrim"])) {
     --cui-button-foreground: var(--primary-text);
     --cui-button-hover-foreground: var(--primary-text);
     --cui-button-active-foreground: var(--primary-text);
@@ -226,7 +238,7 @@
     --cui-button-active-hover-background: var(--cui-button-hover-background);
   }
 
-  :where([data-control-family="button"][data-tone="danger"]:not([data-variant="solid"])) {
+  :where([data-control-family="button"][data-tone="danger"]:not([data-variant="solid"], [data-variant="scrim"])) {
     --cui-button-foreground: var(--destructive-text);
     --cui-button-hover-foreground: var(--destructive-text);
     --cui-button-active-foreground: var(--destructive-text);
@@ -316,67 +328,17 @@
   inherits: true;
 }
 
-@property --cui-button-hover-background-image {
-  syntax: "*";
-  inherits: true;
-}
-
 @property --cui-button-foreground {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
 
-@property --cui-button-hover-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-button-hover-foreground {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-button-active-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-button-active-foreground {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-button-active-hover-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
 @property --cui-button-shadow {
   syntax: "*";
   inherits: true;
 }
 
-@property --cui-button-hover-shadow {
-  syntax: "*";
-  inherits: true;
-}
-
-@property --cui-button-press-shadow {
-  syntax: "*";
-  inherits: true;
-}
-
-@property --cui-button-active-shadow {
-  syntax: "*";
-  inherits: true;
-}
-
 @property --cui-button-border-width {
   syntax: "<length>";
   inherits: true;
@@ -393,3 +355,8 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-button-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/card.css

@@ -84,11 +84,11 @@
   }
 
   :where([data-control-family="card"][data-slot="root"][data-variant="sectioned"] > [data-slot="content"]) {
-    padding-block: calc(var(--spacing) * 6);
+    padding-block: var(--cui-card-padding-block);
   }
 
   :where([data-control-family="card"][data-slot="root"][data-variant="sectioned"] > [data-slot="header"]) {
-    padding-block: calc(var(--spacing) * 5);
+    padding-block: calc(var(--cui-card-padding-block) - var(--spacing));
     border-block-end: 1px solid oklch(from var(--border) l c h / 0.7);
   }
 

package/dist/styles/recipes/infinite-canvas.css

@@ -26,6 +26,14 @@
     --focus-ring-offset: calc(var(--focus-ring-width) * -1);
   }
 
+  :where([data-control-family="infinite-canvas"][data-slot="root"][data-pan-ready]:not([data-panning])) {
+    cursor: grab;
+  }
+
+  :where([data-control-family="infinite-canvas"][data-slot="root"][data-panning]) {
+    cursor: grabbing;
+  }
+
   :where([data-control-family="infinite-canvas"][data-slot="root"][data-easing]) {
     transition-property: background-position, background-size;
     transition-duration: var(--duration-base);

package/dist/styles/recipes/item.css

@@ -1,8 +1,13 @@
 @layer components {
   :where([data-control-family="item"][data-slot="root"]) {
     --cui-item-radius: var(--radius-lg);
+    --cui-item-foreground: var(--foreground);
     --cui-item-hover-background: var(--hover-fill);
     --cui-item-current-background: var(--active-fill);
+    --cui-item-selected-background: var(--cui-item-current-background);
+    --cui-item-selected-foreground: var(--cui-item-foreground);
+    --cui-item-dragging-opacity: 0.5;
+    --cui-item-drop-target-shadow: inset 0 0 0 var(--focus-ring-width) var(--primary);
     --cui-item-hover-border-color: var(--_item-border-color);
     --cui-item-border-width: 0px;
     --cui-item-active-scale: 0.99;
@@ -20,7 +25,7 @@
     border-radius: var(--cui-item-radius);
     background: var(--_item-background);
     box-shadow: none;
-    color: var(--foreground);
+    color: var(--cui-item-foreground);
     transition-property: scale;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
@@ -72,11 +77,16 @@
 
   @media (hover: hover) {
     :where(
-        [data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):not(
-          :disabled,
-          [data-disabled],
-          [aria-disabled="true"]
-        ):hover
+        [data-control-family="item"][data-slot="root"]:is(
+          a,
+          button,
+          [href],
+          [role="button"],
+          [role="treeitem"],
+          [role="option"],
+          [role="row"],
+          [role="menuitem"]
+        ):not(:disabled, [data-disabled], [aria-disabled="true"]):hover
       ) {
       outline-color: var(--cui-item-hover-border-color);
       background: var(--cui-item-hover-background);
@@ -84,6 +94,34 @@
     }
   }
 
+  :where([data-control-family="item"][data-slot="root"][aria-selected="true"]) {
+    background: var(--cui-item-selected-background);
+    color: var(--cui-item-selected-foreground);
+  }
+
+  :where([data-control-family="item"][data-slot="root"][data-dragging]) {
+    opacity: var(--cui-item-dragging-opacity);
+  }
+
+  :where([data-control-family="item"][data-slot="root"][data-drop-target]) {
+    box-shadow: var(--cui-item-drop-target-shadow);
+  }
+
+  @media (forced-colors: active) {
+    :where([data-control-family="item"][data-slot="root"][aria-selected="true"]) {
+      --cui-item-description-foreground: HighlightText;
+      --cui-item-media-foreground: HighlightText;
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    :where([data-control-family="item"][data-slot="root"][data-drop-target]) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where(
     [data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):not(
       :disabled,
@@ -138,6 +176,35 @@
   initial-value: transparent;
 }
 
+@property --cui-item-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-item-selected-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-item-selected-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-item-dragging-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --cui-item-drop-target-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-item-hover-border-color {
   syntax: "<color>";
   inherits: true;

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

@@ -7,11 +7,13 @@
     --cui-resize-handle-border-color: var(--primary);
     --cui-resize-handle-border-width: var(--control-rim-width);
     --cui-resize-handle-radius: 0px;
+    --cui-resize-handle-shadow: none;
     inline-size: var(--cui-resize-handle-hit-size);
     block-size: var(--cui-resize-handle-hit-size);
     translate: -50% -50%;
     padding: 0;
     border: 0;
+    border-radius: var(--cui-resize-handle-radius);
     background: transparent;
   }
 
@@ -25,6 +27,7 @@
     border: var(--cui-resize-handle-border-width) solid var(--cui-resize-handle-border-color);
     border-radius: var(--cui-resize-handle-radius);
     background: var(--cui-resize-handle-background);
+    box-shadow: var(--cui-resize-handle-shadow);
     transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
@@ -124,3 +127,8 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-resize-handle-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/reveal.css

@@ -0,0 +1,26 @@
+@layer components {
+  :where([data-control-family="reveal"][data-slot="scope"]) {
+    --cui-reveal-hidden-opacity: 0;
+  }
+
+  :where([data-control-family="reveal"][data-slot="content"]) {
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where(
+        [data-control-family="reveal"][data-slot="scope"]:not(:hover, :focus-within, :has([data-popup-open]))
+          [data-control-family="reveal"][data-slot="content"]
+      ) {
+      opacity: var(--cui-reveal-hidden-opacity);
+    }
+  }
+}
+
+@property --cui-reveal-hidden-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}

package/dist/styles/recipes/tabs.css

@@ -34,6 +34,8 @@
 
   :where([data-control-family="tabs"][data-slot="list"]) {
     --cui-tabs-trigger-height: var(--control-h-sm);
+    --cui-tabs-trigger-padding-inline-start: var(--cui-tabs-trigger-padding-inline);
+    --cui-tabs-trigger-padding-inline-end: var(--cui-tabs-trigger-padding-inline);
     --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--cui-tabs-trigger-height) / 2));
     position: relative;
     display: flex;
@@ -105,7 +107,7 @@
     gap: calc(var(--spacing) * 1.5);
     white-space: nowrap;
     border-radius: var(--_tabs-trigger-radius-fit);
-    padding-inline: var(--cui-tabs-trigger-padding-inline);
+    padding-inline: var(--cui-tabs-trigger-padding-inline-start) var(--cui-tabs-trigger-padding-inline-end);
     color: var(--cui-tabs-foreground);
     font-size: var(--cui-tabs-font-size);
     font-weight: var(--cui-tabs-font-weight);
@@ -285,6 +287,18 @@
   initial-value: 0px;
 }
 
+@property --cui-tabs-trigger-padding-inline-start {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tabs-trigger-padding-inline-end {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-tabs-trigger-radius {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/ui/badge.d.ts

@@ -7,7 +7,7 @@ export type BadgeVariant = (typeof badgeVariants)[number];
 export declare const badgeSizes: readonly ["sm", "md"];
 export type BadgeSize = (typeof badgeSizes)[number];
 export declare const BADGE_COLORS: readonly ["neutral", "red", "orange", "yellow", "green", "blue", "purple", "pink"];
-export type BadgeColor = (typeof BADGE_COLORS)[number];
+export type BadgeColor = (typeof BADGE_COLORS)[number] | "primary";
 export type BadgeProps = Omit<ComponentProps<"span">, "style"> & {
   variant?: BadgeVariant;
   size?: BadgeSize;

package/dist/ui/dropdown-menu.d.ts

@@ -9,10 +9,12 @@ type DropdownMenuStyledProps<PrimitiveProps> = Omit<PrimitiveProps, "className"
   className?: string;
   style?: CSSProperties & PopupKnobStyle;
 };
-export type DropdownMenuProps = Menu.Root.Props;
+export type DropdownMenuProps<Payload = unknown> = Menu.Root.Props<Payload>;
+export type DropdownMenuHandle<Payload = unknown> = Menu.Handle<Payload>;
+export declare const createDropdownMenuHandle: typeof Menu.createHandle;
 export declare const dropdownMenuTriggerVariants: readonly ["surface", "ghost"];
 export type DropdownMenuTriggerVariant = (typeof dropdownMenuTriggerVariants)[number];
-export type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & Pick<ComponentProps<typeof Menu.Trigger>, "nativeButton" | "render"> & {
+export type DropdownMenuTriggerProps<Payload = unknown> = Omit<ComponentProps<"button">, "style"> & Pick<Menu.Trigger.Props<Payload>, "nativeButton" | "render" | "handle" | "payload"> & {
   style?: CSSProperties & ButtonKnobStyle;
 } & {
   size?: ControlSize;
@@ -37,8 +39,8 @@ export type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> &
 export type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-export declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
-export declare function DropdownMenuTrigger({ size, iconOnly, variant, className, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
+export declare function DropdownMenu<Payload>({ children, ...props }: DropdownMenuProps<Payload>): import("react").JSX.Element;
+export declare function DropdownMenuTrigger<Payload>({ size, iconOnly, variant, className, ...props }: DropdownMenuTriggerProps<Payload>): import("react").JSX.Element;
 export declare function DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
 export declare function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
 export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;

package/dist/ui/dropdown-menu.js

@@ -9,6 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.tsx
+const createDropdownMenuHandle = Menu.createHandle;
 const dropdownMenuTriggerVariants = ["surface", "ghost"];
 function DropdownMenu({ children, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Root, {
@@ -209,4 +210,4 @@ function DropdownMenuShortcut(props) {
 	});
 }
 //#endregion
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuTriggerVariants };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, createDropdownMenuHandle, dropdownMenuTriggerVariants };

package/dist/ui/reveal.d.ts

@@ -0,0 +1,15 @@
+import { RenderProp } from "../control-props.js";
+import { RevealKnobStyle } from "../knob-contracts/reveal-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/reveal.d.ts
+export type RevealScopeProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
+  style?: CSSProperties & RevealKnobStyle;
+};
+export type RevealProps = Omit<ComponentProps<"span">, "style"> & {
+  render?: RenderProp<ComponentProps<"span">>;
+  style?: CSSProperties & RevealKnobStyle;
+};
+export declare function RevealScope({ render, ...props }: RevealScopeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function Reveal({ render, ...props }: RevealProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/ui/reveal.js

@@ -0,0 +1,29 @@
+"use client";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/ui/reveal.tsx
+function RevealScope({ render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "reveal",
+			"data-control-family": "reveal",
+			"data-slot": "scope"
+		}
+	});
+}
+function Reveal({ render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "reveal",
+			"data-control-family": "reveal",
+			"data-slot": "content"
+		}
+	});
+}
+//#endregion
+export { Reveal, RevealScope };

package/dist/ui/typography.d.ts

@@ -25,6 +25,7 @@ declare const weightClassNames: {
   readonly normal: "font-normal";
   readonly medium: "font-medium";
   readonly semibold: "font-semibold";
+  readonly bold: "font-bold";
 };
 export type TypeSize = keyof typeof sizeClassNames;
 export type TypeTone = keyof typeof toneClassNames;

package/dist/ui/typography.js

@@ -25,7 +25,8 @@ const toneClassNames = {
 const weightClassNames = {
 	normal: "font-normal",
 	medium: "font-medium",
-	semibold: "font-semibold"
+	semibold: "font-semibold",
+	bold: "font-bold"
 };
 const headingSizeByLevel = {
 	1: "heading-1",

package/lint/class-policy.mjs

@@ -1,5 +1,7 @@
 const controlUiImportPath = `(?:@ctrl-ui/react|[^'"]*components/control-ui)/`;
 
+export const paintFreeComponents = ["RevealScope"];
+
 const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
 export function controlUiImportPattern(importSources = []) {

package/lint/eslint-plugin.mjs

@@ -6,6 +6,7 @@ import {
   componentStyleMessage,
   componentStylePropMessage,
   controlUiImportPattern,
+  paintFreeComponents,
   rawTypeClass,
   rawTypeMessage,
 } from "./class-policy.mjs";
@@ -77,7 +78,9 @@ function controlUiLocalNames(program, controlUiImport) {
   for (const statement of program.body) {
     if (statement.type !== "ImportDeclaration" || statement.importKind === "type") continue;
     if (!controlUiImport.test(statement.source.value)) continue;
-    for (const specifier of statement.specifiers) names.add(specifier.local.name);
+    for (const specifier of statement.specifiers) {
+      if (!paintFreeComponents.includes(specifier.imported?.name)) names.add(specifier.local.name);
+    }
   }
   return names;
 }

package/lint/grit-rules.mjs

@@ -8,6 +8,7 @@ import {
   componentStyleMessage,
   componentStylePropMessage,
   controlUiImportPattern,
+  paintFreeComponents,
   paintProperty,
   rawTypeClass,
   rawTypeMessage,
@@ -30,6 +31,7 @@ const stringTexts = (name) =>
 const classLiterals = "or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }";
 const renderedTag = "or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }";
 const componentName = `r"([A-Z]\\w*)(?:\\.[\\w.]+)?"`;
+const paintFreeComponent = gritExactRegex(`(?:${paintFreeComponents.join("|")})`);
 
 function constantMatches(reference, literals, offends) {
   return `contains JsReferenceIdentifier() as $${reference} where {
@@ -97,6 +99,7 @@ function componentAttributePattern({ attribute, offends, message, importSources
     }
   } where {
     $name <: ${componentName}($component),
+    not $component <: ${paintFreeComponent},
     $attr <: within JsModule() as $module,
     ${offends("$attr")},
     ${importedFromControlUi("$component", importSources)},
@@ -115,6 +118,7 @@ function partClassPattern(importSources) {
     ${classNameMatches("$plainAttr", componentPartClass)},
     not and {
       $plainName <: ${componentName}($plainComponent),
+      not $plainComponent <: ${paintFreeComponent},
       ${importedFromControlUi("$plainComponent", importSources, "Plain")}
     },
     register_diagnostic(span=$plainAttr, message=${gritString(componentPartMessage)}, severity="error")

package/lint/no-component-style-classes.grit

@@ -31,6 +31,7 @@ or {
     }
   } where {
     $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
+    not $component <: r"(?:RevealScope)",
     $attr <: within JsModule() as $module,
     $attr <: or {
     contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $attrMember where { $attrMember <: r"(?s)[\"'].*" } } as $attrText where { $attrText <: r"(?s).*(?:[^\s\"'\x60]!(?:[\s\"'\x60]|$)|(?:^|[\s\"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:(?:[\s\"'\x60]|$)|[^lcrjsewnbp\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60]))))|c(?:(?:[\s\"'\x60]|$)|[^el\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:[^\s\"'\x60])))))|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|r(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^g\s\"'\x60]|g(?:(?:[\s\"'\x60]|$)|[^h\s\"'\x60]|h(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|j(?:(?:[\s\"'\x60]|$)|[^u\s\"'\x60]|u(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|e(?:(?:[\s\"'\x60]|$)|[^nl\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^d\s\"'\x60]|d(?:[^\s\"'\x60]))|l(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:[^\s\"'\x60]))))))))|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|n(?:(?:[\s\"'\x60]|$)|[^o\s\"'\x60]|o(?:(?:[\s\"'\x60]|$)|[^w\s\"'\x60]|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))))|b(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^c\s\"'\x60]|c(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:[^\s\"'\x60])))))))|p(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|blur(?:-|(?:[\s\"'\x60]|$))|brightness-|contrast-[\d\[]|grayscale|hue-rotate-|invert|saturate-|sepia|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)|(?:^|[^\w-])\[(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?:).*" },
@@ -71,6 +72,7 @@ or {
   },
     not and {
       $plainName <: r"([A-Z]\w*)(?:\.[\w.]+)?"($plainComponent),
+      not $plainComponent <: r"(?:RevealScope)",
       $module <: contains JsImport() as $importPlain where {
     $importPlain <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
     $importPlain <: contains JsIdentifierBinding() as $bindingPlain where { $bindingPlain <: $plainComponent }

package/lint/no-component-style-props.grit

@@ -30,6 +30,7 @@ or {
     }
   } where {
     $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
+    not $component <: r"(?:RevealScope)",
     $attr <: within JsModule() as $module,
     $attr <: or {
     contains or { JsPropertyObjectMember(name=$attrKey), JsShorthandPropertyObjectMember(name=$attrKey) } where { $attrKey <: r"[\"']?(?:(?:padding|background|color|font|lineHeight|letterSpacing|border|outline|boxShadow|textShadow|textDecoration|textUnderline|textTransform|opacity|filter|backdropFilter|fill|stroke|caretColor|accentColor|mask|WebkitMask|WebkitFontSmoothing|MozOsxFontSmoothing)(?:[A-Z]\w*)?|(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?)[\"']?" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "description": "100+ React components for Tailwind CSS and shadcn/ui: pickers, trees, editors, canvases, app templates, and AI chat surfaces, with neutral defaults and consumer-owned themes.",
   "keywords": [
     "react",