@ctrl-ui/react 0.9.13 → 0.9.15

package/README.md

@@ -49,12 +49,14 @@ Controls size their own text: pick the control's `size`, or set its `--cui-*-fon
 
 ## Lint rules
 
-Two rules keep call sites honest, shipped for Biome, ESLint, and oxlint from one policy (`lint/class-policy.mjs`):
+These rules keep call sites honest. They come from one policy (`lint/class-policy.mjs`) and ship for Biome, ESLint, and oxlint, except the stylesheet rule, which is Biome only:
 
-- `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, state styles such as `hover:` and `data-[…]:`, 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. Layout classes (`flex`, `gap-*`, widths, heights, margins, placement) stay allowed. Restyle through the component's props or its `--cui-*` knobs instead.
+- `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`.
 - `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.4.11 or later; older versions fail with "Failed to compile the Grit plugin".
+The Biome rules need Biome 2.5.0 or later: the preset scopes the stylesheet rule with plugin `includes`.
 
 Biome, extending the shipped preset so rules added later arrive with the package update:
 
@@ -70,22 +72,31 @@ ESLint flat config:
 ```js
 import controlUi from "@ctrl-ui/react/eslint-plugin";
 
-export default [{ plugins: { "control-ui": controlUi }, rules: { "control-ui/no-component-style-classes": "error" } }];
+export default [
+  {
+    plugins: { "control-ui": controlUi },
+    rules: { "control-ui/no-component-style-classes": "error", "control-ui/no-component-style-props": "error" },
+  },
+];
 ```
 
 oxlint, through its JS plugin support:
 
 ```json
-{ "jsPlugins": ["@ctrl-ui/react/eslint-plugin"], "rules": { "control-ui/no-component-style-classes": "error" } }
+{
+  "jsPlugins": ["@ctrl-ui/react/eslint-plugin"],
+  "rules": { "control-ui/no-component-style-classes": "error", "control-ui/no-component-style-props": "error" }
+}
 ```
 
-When your app imports components through its own wrapper package or folder, declare that path so the rule follows those imports too:
+When your app imports components through its own wrapper package or folder, declare that path so the rules follow those imports too:
 
 ```js
-rules: { "control-ui/no-component-style-classes": ["error", { importSources: ["@acme/ui/components/"] }] }
+const options = { importSources: ["@acme/ui/components/"] };
+rules: { "control-ui/no-component-style-classes": ["error", options], "control-ui/no-component-style-props": ["error", options] }
 ```
 
-Biome's Grit plugins take no options, so the package ships `control-ui-grit` to write the rules with your paths. Run it on install so a package update regenerates them, gitignore `.control-ui`, and list `./.control-ui/no-component-style-classes.grit` under `plugins` in place of the preset:
+Biome's Grit plugins take no options, so the package ships `control-ui-grit` to write the rules with your paths. Run it on install so a package update regenerates them, gitignore `.control-ui`, and list the generated `no-component-style-classes.grit`, `no-component-style-props.grit`, and `no-component-part-css.grit` from `./.control-ui/` under `plugins` in place of the preset:
 
 ```json
 { "scripts": { "postinstall": "control-ui-grit --import-source=@acme/ui/components/ --out=.control-ui" } }

package/dist/blocks/design-canvas.js

@@ -412,8 +412,7 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerCh
 		style: {
 			width: layer.width,
 			height: layer.height,
-			rotate: `${layer.rotation}deg`,
-			opacity: layer.opacity / 100
+			rotate: `${layer.rotation}deg`
 		},
 		onPointerDown: onSelect,
 		onKeyDown,
@@ -429,18 +428,25 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerCh
 				className: "absolute start-0 bottom-full mb-1 whitespace-nowrap",
 				children: layer.name
 			}) : null,
-			layer.kind === "text" ? /* @__PURE__ */ jsx(Text, {
-				as: "p",
-				size: "heading-2",
-				weight: "normal",
-				className: "size-full overflow-hidden whitespace-nowrap",
-				style: { color: fillColor },
-				children: layer.text
+			layer.kind === "text" ? /* @__PURE__ */ jsx("div", {
+				className: "size-full",
+				style: {
+					color: fillColor,
+					opacity: layer.opacity / 100
+				},
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					size: "heading-2",
+					weight: "normal",
+					className: "size-full overflow-hidden whitespace-nowrap",
+					children: layer.text
+				})
 			}) : /* @__PURE__ */ jsx("div", {
 				className: "size-full",
 				style: {
 					background: fillColor,
-					borderRadius: layer.kind === "ellipse" ? "50%" : layer.cornerRadius
+					borderRadius: layer.kind === "ellipse" ? "50%" : layer.cornerRadius,
+					opacity: layer.opacity / 100
 				}
 			}),
 			selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {

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/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/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/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/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/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/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/lint/biome-preset.json

@@ -1,3 +1,10 @@
 {
-  "plugins": ["./node_modules/@ctrl-ui/react/lint/no-component-style-classes.grit"]
+  "plugins": [
+    "./node_modules/@ctrl-ui/react/lint/no-component-style-classes.grit",
+    "./node_modules/@ctrl-ui/react/lint/no-component-style-props.grit",
+    {
+      "path": "./node_modules/@ctrl-ui/react/lint/no-component-part-css.grit",
+      "includes": ["**/*.css", "!**/components/control-ui/**"]
+    }
+  ]
 }

package/lint/class-policy.mjs

@@ -36,7 +36,47 @@ const textLayoutSuffixes = [
   "clip",
 ];
 
-export const componentStyleClass = String.raw`[^${classDelimiter}]!${classEnd}|(?:^|[${classDelimiter}])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-${classSuffixOtherThan(textLayoutSuffixes)}|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|(?: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]*?\]):)`;
+const paintProperties = [
+  "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",
+];
+
+const camelCase = (property) =>
+  property.replace(/^-(\w)/, (_, first) => first.toUpperCase()).replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
+
+export const paintProperty = String.raw`(?:${paintProperties.join("|")})(?:-[\w-]*)?`;
+
+export const componentStyleKey = String.raw`["']?(?:(?:${paintProperties.map(camelCase).join("|")})(?:[A-Z]\w*)?|${paintProperty})["']?`;
+
+const partAttribute = String.raw`data-(?:control|slot)\b`;
+
+export const componentPartClass = String.raw`\[&[^${classDelimiter}]*?${partAttribute}|(?:^|[${classDelimiter}:])\*{1,2}:data-\[(?:control|slot)\b`;
+
+export const componentPartSelector = String.raw`(?s).*\[${partAttribute}[^\s>+~]*\s*`;
+
+export const componentStyleClass = String.raw`[^${classDelimiter}]!${classEnd}|(?:^|[${classDelimiter}])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-${classSuffixOtherThan(textLayoutSuffixes)}|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(?:-|${classEnd})|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-])\[${paintProperty}:`;
 
 export const rawTypeClass = String.raw`(?:^|[^\w-])text-(?:micro|caption|label|body|body-lg|heading-[1-4]|display|xs|sm|base|lg|xl|[2-9]xl)\b|(?:^|[^\w-])text-\[\d[^\]]*\]`;
 
@@ -45,3 +85,12 @@ export const componentStyleMessage =
 
 export const rawTypeMessage =
   "Text size in className: render text through <Text>/<Heading> on the type scale, or size the control with its size prop or --cui-*-font-size knob.";
+
+export const componentPartMessage =
+  "className styles a Control UI component's parts from outside through a data-slot or data-control selector. The component owns its parts: use its props, compose its parts, or set a --cui-* knob on it.";
+
+export const componentStylePropMessage =
+  "Control UI component painted through style: color, type, padding, borders, radius, shadows and opacity belong to the component. Set a --cui-* knob in style or use its props; keep other style keys for layout.";
+
+export const componentPartCssMessage =
+  "Stylesheet paints a Control UI part: color, type, padding, borders, radius, shadows and opacity belong to the component recipe. Set the part's --cui-* knobs here instead, or use the component's props.";

package/lint/eslint-plugin.mjs

@@ -1,6 +1,18 @@
-import { componentStyleClass, componentStyleMessage, controlUiImportPattern, rawTypeClass, rawTypeMessage } from "./class-policy.mjs";
+import {
+  componentPartClass,
+  componentPartMessage,
+  componentStyleClass,
+  componentStyleKey,
+  componentStyleMessage,
+  componentStylePropMessage,
+  controlUiImportPattern,
+  rawTypeClass,
+  rawTypeMessage,
+} from "./class-policy.mjs";
 
 const componentStyle = new RegExp(componentStyleClass);
+const componentPart = new RegExp(componentPartClass);
+const componentStyleProperty = new RegExp(`^(?:${componentStyleKey})$`);
 const rawType = new RegExp(rawTypeClass);
 
 function stringsIn(node) {
@@ -20,19 +32,30 @@ function referencedNames(node) {
   return Object.entries(node).flatMap(([key, child]) => (key === "parent" ? [] : referencedNames(child)));
 }
 
+function propertyKeysIn(node) {
+  if (Array.isArray(node)) return node.flatMap(propertyKeysIn);
+  if (!node || typeof node !== "object") return [];
+  const key = node.type === "Property" && !node.computed ? [node.key.name ?? node.key.value] : [];
+  return [...key, ...Object.entries(node).flatMap(([name, child]) => (name === "parent" ? [] : propertyKeysIn(child)))];
+}
+
 const classLiteralTypes = new Set(["Literal", "TemplateLiteral", "ObjectExpression"]);
+const styleLiteralTypes = new Set(["ObjectExpression"]);
 
-function classLiteral(init) {
+function literalOf(init, types) {
   const value = init?.type === "TSAsExpression" || init?.type === "TSSatisfiesExpression" ? init.expression : init;
-  return classLiteralTypes.has(value?.type) ? value : undefined;
+  return types.has(value?.type) ? value : undefined;
 }
 
-function isClassName(attribute) {
-  return attribute.name.name === "className" && Boolean(attribute.value);
+function insideRenderProp(node) {
+  for (let parent = node.parent; parent; parent = parent.parent) {
+    if (parent.type === "JSXAttribute" && parent.name.name === "render") return true;
+  }
+  return false;
 }
 
 function classNameMatches(attribute, pattern) {
-  return isClassName(attribute) && stringsIn(attribute.value).some((text) => pattern.test(text));
+  return attribute.name.name === "className" && Boolean(attribute.value) && stringsIn(attribute.value).some((text) => pattern.test(text));
 }
 
 function elementRootName(name) {
@@ -59,50 +82,75 @@ function controlUiLocalNames(program, controlUiImport) {
   return names;
 }
 
-const noComponentStyleClasses = {
-  meta: {
-    type: "problem",
-    docs: { description: "Keep className on Control UI components to layout; the component owns its look." },
-    messages: { componentStyle: componentStyleMessage },
-    schema: [
-      {
-        type: "object",
-        properties: { importSources: { type: "array", items: { type: "string" } } },
-        additionalProperties: false,
-      },
-    ],
-  },
-  create(context) {
-    const controlUiImport = new RegExp(`^${controlUiImportPattern(context.options[0]?.importSources)}`);
-    let controlUiNames = new Set();
-    const isControlUi = (element) => element !== undefined && controlUiNames.has(elementRootName(element.name));
-    const constantClasses = new Map();
-    const componentClassNames = [];
-    return {
-      Program(program) {
-        controlUiNames = controlUiLocalNames(program, controlUiImport);
-      },
-      VariableDeclarator(declarator) {
-        const literal = classLiteral(declarator.init);
-        if (declarator.parent.kind !== "const" || declarator.id.type !== "Identifier" || !literal) return;
-        constantClasses.set(declarator.id.name, [...(constantClasses.get(declarator.id.name) ?? []), ...stringsIn(literal)]);
-      },
-      JSXAttribute(attribute) {
-        if (!isClassName(attribute)) return;
-        const element = attribute.parent;
-        if (isControlUi(element) || isControlUi(renderPropOwner(element.parent))) componentClassNames.push(attribute);
-      },
-      "Program:exit"() {
-        for (const attribute of componentClassNames) {
-          const constants = referencedNames(attribute.value).flatMap((name) => constantClasses.get(name) ?? []);
-          if ([...stringsIn(attribute.value), ...constants].some((text) => componentStyle.test(text))) {
-            context.report({ node: attribute, messageId: "componentStyle" });
+function componentAttributeRule({ attribute, description, message, literalTypes, valuesIn, pattern, part }) {
+  return {
+    meta: {
+      type: "problem",
+      docs: { description },
+      messages: { component: message, ...(part && { part: part.message }) },
+      schema: [
+        {
+          type: "object",
+          properties: { importSources: { type: "array", items: { type: "string" } } },
+          additionalProperties: false,
+        },
+      ],
+    },
+    create(context) {
+      const controlUiImport = new RegExp(`^${controlUiImportPattern(context.options[0]?.importSources)}`);
+      let controlUiNames = new Set();
+      const isControlUi = (element) => element !== undefined && controlUiNames.has(elementRootName(element.name));
+      const constants = new Map();
+      const checks = [];
+      return {
+        Program(program) {
+          controlUiNames = controlUiLocalNames(program, controlUiImport);
+        },
+        VariableDeclarator(declarator) {
+          const literal = literalOf(declarator.init, literalTypes);
+          if (declarator.parent.kind !== "const" || declarator.id.type !== "Identifier" || !literal) return;
+          constants.set(declarator.id.name, [...(constants.get(declarator.id.name) ?? []), ...valuesIn(literal)]);
+        },
+        JSXAttribute(node) {
+          if (node.name.name !== attribute || !node.value) return;
+          const element = node.parent;
+          if (isControlUi(element) || isControlUi(renderPropOwner(element.parent))) {
+            checks.push({ node, messageId: "component", pattern });
+          } else if (part && !insideRenderProp(node)) {
+            checks.push({ node, messageId: "part", pattern: part.pattern });
           }
-        }
-      },
-    };
-  },
-};
+        },
+        "Program:exit"() {
+          for (const check of checks) {
+            const referenced = referencedNames(check.node.value).flatMap((name) => constants.get(name) ?? []);
+            if ([...valuesIn(check.node.value), ...referenced].some((value) => check.pattern.test(value))) {
+              context.report({ node: check.node, messageId: check.messageId });
+            }
+          }
+        },
+      };
+    },
+  };
+}
+
+const noComponentStyleClasses = componentAttributeRule({
+  attribute: "className",
+  description: "Keep className on Control UI components to layout, and off their parts; the component owns its look.",
+  message: componentStyleMessage,
+  literalTypes: classLiteralTypes,
+  valuesIn: stringsIn,
+  pattern: componentStyle,
+  part: { message: componentPartMessage, pattern: componentPart },
+});
+
+const noComponentStyleProps = componentAttributeRule({
+  attribute: "style",
+  description: "Keep style on Control UI components to --cui-* knobs and layout; the component owns its look.",
+  message: componentStylePropMessage,
+  literalTypes: styleLiteralTypes,
+  valuesIn: propertyKeysIn,
+  pattern: componentStyleProperty,
+});
 
 const noRawTypeClasses = {
   meta: {
@@ -124,6 +172,7 @@ const plugin = {
   meta: { name: "control-ui" },
   rules: {
     "no-component-style-classes": noComponentStyleClasses,
+    "no-component-style-props": noComponentStyleProps,
     "no-raw-type-classes": noRawTypeClasses,
   },
 };

package/lint/grit-rules.mjs

@@ -1,30 +1,66 @@
-import { componentStyleClass, componentStyleMessage, controlUiImportPattern, rawTypeClass, rawTypeMessage } from "./class-policy.mjs";
+import {
+  componentPartClass,
+  componentPartCssMessage,
+  componentPartMessage,
+  componentPartSelector,
+  componentStyleClass,
+  componentStyleKey,
+  componentStyleMessage,
+  componentStylePropMessage,
+  controlUiImportPattern,
+  paintProperty,
+  rawTypeClass,
+  rawTypeMessage,
+} from "./class-policy.mjs";
 
 function gritRegex(pattern) {
   return `r"(?s).*(?:${pattern.replaceAll('"', '\\"')}).*"`;
 }
 
+function gritExactRegex(pattern) {
+  return `r"${pattern.replaceAll('"', '\\"')}"`;
+}
+
 function gritString(text) {
   return JSON.stringify(text);
 }
 
-const stringTexts = `or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\\"'].*" } }`;
+const stringTexts = (name) =>
+  `or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $${name}Member where { $${name}Member <: r"(?s)[\\"'].*" } }`;
 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 styled = gritRegex(componentStyleClass);
-const styledClassName = `$attr <: or {
-    contains ${stringTexts} as $text where { $text <: ${styled} },
-    contains JsReferenceIdentifier() as $reference where {
-      $reference <: r"(.+)"($referenced),
-      $module <: contains JsVariableDeclaration(declarators=$declarators) as $declaration where {
-        $declaration <: r"(?s)const\\s.*",
-        $declarators <: some JsVariableDeclarator(id=$referenced, initializer=JsInitializerClause(expression=$value)),
-        $value <: or { ${classLiterals}, TsAsExpression(expression=${classLiterals}), TsSatisfiesExpression(expression=${classLiterals}) },
-        $value <: contains ${stringTexts} as $constText where { $constText <: ${styled} }
+function constantMatches(reference, literals, offends) {
+  return `contains JsReferenceIdentifier() as $${reference} where {
+      $${reference} <: r"(.+)"($${reference}Name),
+      $module <: contains JsVariableDeclaration(declarators=$${reference}Declarators) as $${reference}Declaration where {
+        $${reference}Declaration <: r"(?s)const\\s.*",
+        $${reference}Declarators <: some JsVariableDeclarator(id=$${reference}Name, initializer=JsInitializerClause(expression=$${reference}Value)),
+        $${reference}Value <: or { ${literals}, TsAsExpression(expression=${literals}), TsSatisfiesExpression(expression=${literals}) },
+        $${reference}Value <: ${offends}
       }
-    }
+    }`;
+}
+
+function classNameMatches(attribute, pattern) {
+  const offending = (prefix) => `contains ${stringTexts(prefix)} as $${prefix}Text where { $${prefix}Text <: ${gritRegex(pattern)} }`;
+  const name = attribute.slice(1);
+  return `${attribute} <: or {
+    ${offending(name)},
+    ${constantMatches(`${name}Constant`, classLiterals, offending(`${name}Constant`))}
   }`;
+}
+
+function styleMatches(attribute) {
+  const offending = (prefix) =>
+    `contains or { JsPropertyObjectMember(name=$${prefix}Key), JsShorthandPropertyObjectMember(name=$${prefix}Key) } where { $${prefix}Key <: ${gritExactRegex(componentStyleKey)} }`;
+  const name = attribute.slice(1);
+  return `${attribute} <: or {
+    ${offending(name)},
+    ${constantMatches(`${name}Constant`, "JsObjectExpression()", offending(`${name}Constant`))}
+  }`;
+}
 
 function importedFromControlUi(component, importSources, suffix = "") {
   return `$module <: contains JsImport() as $import${suffix} where {
@@ -33,47 +69,100 @@ function importedFromControlUi(component, importSources, suffix = "") {
   }`;
 }
 
+function componentAttributePattern({ attribute, offends, message, importSources }) {
+  return `or {
+    or {
+      JsxSelfClosingElement(name=$name, attributes=$attributes),
+      JsxOpeningElement(name=$name, attributes=$attributes)
+    } where {
+      $attributes <: some JsxAttribute(name=\`${attribute}\`) as $attr
+    },
+    JsxAttribute(name=\`render\`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
+      $rendered <: or {
+        JsxTagExpression(tag=$tag),
+        JsArrowFunctionExpression(body=or {
+          ${renderedTag},
+          JsFunctionBody(statements=some JsReturnStatement(argument=${renderedTag}))
+        })
+      },
+      $tag <: or {
+        JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
+        JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
+      },
+      $renderedAttributes <: some JsxAttribute(name=\`${attribute}\`) as $attr,
+      $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
+      $render <: within JsModule() as $module,
+      $renderedName <: r"([^.]+).*"($renderedComponent),
+      not ${importedFromControlUi("$renderedComponent", importSources, "Rendered")}
+    }
+  } where {
+    $name <: ${componentName}($component),
+    $attr <: within JsModule() as $module,
+    ${offends("$attr")},
+    ${importedFromControlUi("$component", importSources)},
+    register_diagnostic(span=$attr, message=${gritString(message)}, severity="error")
+  }`;
+}
+
+function partClassPattern(importSources) {
+  return `or {
+    JsxSelfClosingElement(name=$plainName, attributes=$plainAttributes),
+    JsxOpeningElement(name=$plainName, attributes=$plainAttributes)
+  } where {
+    $plainAttributes <: some JsxAttribute(name=\`className\`) as $plainAttr,
+    not $plainAttr <: within JsxAttribute(name=\`render\`),
+    $plainAttr <: within JsModule() as $module,
+    ${classNameMatches("$plainAttr", componentPartClass)},
+    not and {
+      $plainName <: ${componentName}($plainComponent),
+      ${importedFromControlUi("$plainComponent", importSources, "Plain")}
+    },
+    register_diagnostic(span=$plainAttr, message=${gritString(componentPartMessage)}, severity="error")
+  }`;
+}
+
+const partSubject = gritExactRegex(componentPartSelector);
+const enclosingRule = (selectors) => `or { CssQualifiedRule(prelude=${selectors}), CssNestedQualifiedRule(prelude=${selectors}) }`;
+
 export function gritRules(importSources = []) {
   return {
     "no-component-style-classes.grit": `language js(typescript, jsx)
 
 or {
+  ${componentAttributePattern({
+    attribute: "className",
+    offends: (attribute) => classNameMatches(attribute, componentStyleClass),
+    message: componentStyleMessage,
+    importSources,
+  })},
+  ${partClassPattern(importSources)}
+}
+`,
+    "no-component-style-props.grit": `language js(typescript, jsx)
+
+${componentAttributePattern({ attribute: "style", offends: styleMatches, message: componentStylePropMessage, importSources })}
+`,
+    "no-component-part-css.grit": `language css
+
+or {
+  CssGenericProperty(name=$property) as $paint where { $property <: ${gritExactRegex(`(?i)${paintProperty}`)} },
+  CssAtRule() as $paint where { $paint <: r"(?s)@apply\\s.*", $paint <: ${gritRegex(componentStyleClass)} }
+} where {
+  $paint <: within ${enclosingRule("$selectors")} as $rule,
   or {
-    JsxSelfClosingElement(name=$name, attributes=$attributes),
-    JsxOpeningElement(name=$name, attributes=$attributes)
-  } where {
-    $attributes <: some JsxAttribute(name=\`className\`) as $attr
+    $selectors <: some ${partSubject},
+    and {
+      $selectors <: some r"\\s*&[^\\s>+~]*\\s*",
+      $rule <: within ${enclosingRule("$outer")} where { $outer <: some ${partSubject} }
+    }
   },
-  JsxAttribute(name=\`render\`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
-    $rendered <: or {
-      JsxTagExpression(tag=$tag),
-      JsArrowFunctionExpression(body=or {
-        ${renderedTag},
-        JsFunctionBody(statements=some JsReturnStatement(argument=${renderedTag}))
-      })
-    },
-    $tag <: or {
-      JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
-      JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
-    },
-    $renderedAttributes <: some JsxAttribute(name=\`className\`) as $attr,
-    $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
-    $render <: within JsModule() as $module,
-    $renderedName <: r"([^.]+).*"($renderedComponent),
-    not ${importedFromControlUi("$renderedComponent", importSources, "Rendered")}
-  }
-} where {
-  $name <: r"([A-Z]\\w*)(?:\\.[\\w.]+)?"($component),
-  $attr <: within JsModule() as $module,
-  ${styledClassName},
-  ${importedFromControlUi("$component", importSources)},
-  register_diagnostic(span=$attr, message=${gritString(componentStyleMessage)}, severity="error")
+  register_diagnostic(span=$paint, message=${gritString(componentPartCssMessage)}, severity="error")
 }
 `,
     "no-raw-type-classes.grit": `language js(typescript, jsx)
 
 JsxAttribute(name=\`className\`) as $attr where {
-  $attr <: contains ${stringTexts} as $text where { $text <: ${gritRegex(rawTypeClass)} },
+  $attr <: contains ${stringTexts("attr")} as $text where { $text <: ${gritRegex(rawTypeClass)} },
   register_diagnostic(span=$attr, message=${gritString(rawTypeMessage)}, severity="error")
 }
 `,

package/lint/no-component-part-css.grit

@@ -0,0 +1,16 @@
+language css
+
+or {
+  CssGenericProperty(name=$property) as $paint where { $property <: r"(?i)(?: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-]*)?" },
+  CssAtRule() as $paint where { $paint <: r"(?s)@apply\s.*", $paint <: 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-]*)?:).*" }
+} where {
+  $paint <: within or { CssQualifiedRule(prelude=$selectors), CssNestedQualifiedRule(prelude=$selectors) } as $rule,
+  or {
+    $selectors <: some r"(?s).*\[data-(?:control|slot)\b[^\s>+~]*\s*",
+    and {
+      $selectors <: some r"\s*&[^\s>+~]*\s*",
+      $rule <: within or { CssQualifiedRule(prelude=$outer), CssNestedQualifiedRule(prelude=$outer) } where { $outer <: some r"(?s).*\[data-(?:control|slot)\b[^\s>+~]*\s*" }
+    }
+  },
+  register_diagnostic(span=$paint, message="Stylesheet paints a Control UI part: color, type, padding, borders, radius, shadows and opacity belong to the component recipe. Set the part's --cui-* knobs here instead, or use the component's props.", severity="error")
+}

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

@@ -2,50 +2,80 @@ language js(typescript, jsx)
 
 or {
   or {
-    JsxSelfClosingElement(name=$name, attributes=$attributes),
-    JsxOpeningElement(name=$name, attributes=$attributes)
-  } where {
-    $attributes <: some JsxAttribute(name=`className`) as $attr
-  },
-  JsxAttribute(name=`render`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
-    $rendered <: or {
-      JsxTagExpression(tag=$tag),
-      JsArrowFunctionExpression(body=or {
-        or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) },
-        JsFunctionBody(statements=some JsReturnStatement(argument=or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }))
-      })
+    or {
+      JsxSelfClosingElement(name=$name, attributes=$attributes),
+      JsxOpeningElement(name=$name, attributes=$attributes)
+    } where {
+      $attributes <: some JsxAttribute(name=`className`) as $attr
     },
-    $tag <: or {
-      JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
-      JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
-    },
-    $renderedAttributes <: some JsxAttribute(name=`className`) as $attr,
-    $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
-    $render <: within JsModule() as $module,
-    $renderedName <: r"([^.]+).*"($renderedComponent),
-    not $module <: contains JsImport() as $importRendered where {
+    JsxAttribute(name=`render`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
+      $rendered <: or {
+        JsxTagExpression(tag=$tag),
+        JsArrowFunctionExpression(body=or {
+          or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) },
+          JsFunctionBody(statements=some JsReturnStatement(argument=or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }))
+        })
+      },
+      $tag <: or {
+        JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
+        JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
+      },
+      $renderedAttributes <: some JsxAttribute(name=`className`) as $attr,
+      $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
+      $render <: within JsModule() as $module,
+      $renderedName <: r"([^.]+).*"($renderedComponent),
+      not $module <: contains JsImport() as $importRendered where {
     $importRendered <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
     $importRendered <: contains JsIdentifierBinding() as $bindingRendered where { $bindingRendered <: $renderedComponent }
   }
-  }
-} where {
-  $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
-  $attr <: within JsModule() as $module,
-  $attr <: or {
-    contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\"'].*" } } as $text where { $text <: 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|(?: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]*?\]):)).*" },
-    contains JsReferenceIdentifier() as $reference where {
-      $reference <: r"(.+)"($referenced),
-      $module <: contains JsVariableDeclaration(declarators=$declarators) as $declaration where {
-        $declaration <: r"(?s)const\s.*",
-        $declarators <: some JsVariableDeclarator(id=$referenced, initializer=JsInitializerClause(expression=$value)),
-        $value <: or { or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }, TsAsExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }), TsSatisfiesExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }) },
-        $value <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\"'].*" } } as $constText where { $constText <: 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|(?: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]*?\]):)).*" }
+    }
+  } where {
+    $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
+    $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-]*)?:).*" },
+    contains JsReferenceIdentifier() as $attrConstant where {
+      $attrConstant <: r"(.+)"($attrConstantName),
+      $module <: contains JsVariableDeclaration(declarators=$attrConstantDeclarators) as $attrConstantDeclaration where {
+        $attrConstantDeclaration <: r"(?s)const\s.*",
+        $attrConstantDeclarators <: some JsVariableDeclarator(id=$attrConstantName, initializer=JsInitializerClause(expression=$attrConstantValue)),
+        $attrConstantValue <: or { or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }, TsAsExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }), TsSatisfiesExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }) },
+        $attrConstantValue <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $attrConstantMember where { $attrConstantMember <: r"(?s)[\"'].*" } } as $attrConstantText where { $attrConstantText <: 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-]*)?:).*" }
       }
     }
   },
-  $module <: contains JsImport() as $import where {
+    $module <: contains JsImport() as $import where {
     $import <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
     $import <: contains JsIdentifierBinding() as $binding where { $binding <: $component }
   },
-  register_diagnostic(span=$attr, message="Control UI component styled through className: color, type, padding, borders, radius, shadows, state styles and !important belong to the component. Use its props or a --cui-* knob; keep className for layout (flex, gap, width, margin, placement).", severity="error")
+    register_diagnostic(span=$attr, message="Control UI component styled through className: color, type, padding, borders, radius, shadows, state styles and !important belong to the component. Use its props or a --cui-* knob; keep className for layout (flex, gap, width, margin, placement).", severity="error")
+  },
+  or {
+    JsxSelfClosingElement(name=$plainName, attributes=$plainAttributes),
+    JsxOpeningElement(name=$plainName, attributes=$plainAttributes)
+  } where {
+    $plainAttributes <: some JsxAttribute(name=`className`) as $plainAttr,
+    not $plainAttr <: within JsxAttribute(name=`render`),
+    $plainAttr <: within JsModule() as $module,
+    $plainAttr <: or {
+    contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $plainAttrMember where { $plainAttrMember <: r"(?s)[\"'].*" } } as $plainAttrText where { $plainAttrText <: r"(?s).*(?:\[&[^\s\"'\x60]*?data-(?:control|slot)\b|(?:^|[\s\"'\x60:])\*{1,2}:data-\[(?:control|slot)\b).*" },
+    contains JsReferenceIdentifier() as $plainAttrConstant where {
+      $plainAttrConstant <: r"(.+)"($plainAttrConstantName),
+      $module <: contains JsVariableDeclaration(declarators=$plainAttrConstantDeclarators) as $plainAttrConstantDeclaration where {
+        $plainAttrConstantDeclaration <: r"(?s)const\s.*",
+        $plainAttrConstantDeclarators <: some JsVariableDeclarator(id=$plainAttrConstantName, initializer=JsInitializerClause(expression=$plainAttrConstantValue)),
+        $plainAttrConstantValue <: or { or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }, TsAsExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }), TsSatisfiesExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }) },
+        $plainAttrConstantValue <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $plainAttrConstantMember where { $plainAttrConstantMember <: r"(?s)[\"'].*" } } as $plainAttrConstantText where { $plainAttrConstantText <: r"(?s).*(?:\[&[^\s\"'\x60]*?data-(?:control|slot)\b|(?:^|[\s\"'\x60:])\*{1,2}:data-\[(?:control|slot)\b).*" }
+      }
+    }
+  },
+    not and {
+      $plainName <: r"([A-Z]\w*)(?:\.[\w.]+)?"($plainComponent),
+      $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 }
+  }
+    },
+    register_diagnostic(span=$plainAttr, message="className styles a Control UI component's parts from outside through a data-slot or data-control selector. The component owns its parts: use its props, compose its parts, or set a --cui-* knob on it.", severity="error")
+  }
 }

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

@@ -0,0 +1,51 @@
+language js(typescript, jsx)
+
+or {
+    or {
+      JsxSelfClosingElement(name=$name, attributes=$attributes),
+      JsxOpeningElement(name=$name, attributes=$attributes)
+    } where {
+      $attributes <: some JsxAttribute(name=`style`) as $attr
+    },
+    JsxAttribute(name=`render`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
+      $rendered <: or {
+        JsxTagExpression(tag=$tag),
+        JsArrowFunctionExpression(body=or {
+          or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) },
+          JsFunctionBody(statements=some JsReturnStatement(argument=or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }))
+        })
+      },
+      $tag <: or {
+        JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
+        JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
+      },
+      $renderedAttributes <: some JsxAttribute(name=`style`) as $attr,
+      $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
+      $render <: within JsModule() as $module,
+      $renderedName <: r"([^.]+).*"($renderedComponent),
+      not $module <: contains JsImport() as $importRendered where {
+    $importRendered <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
+    $importRendered <: contains JsIdentifierBinding() as $bindingRendered where { $bindingRendered <: $renderedComponent }
+  }
+    }
+  } where {
+    $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
+    $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-]*)?)[\"']?" },
+    contains JsReferenceIdentifier() as $attrConstant where {
+      $attrConstant <: r"(.+)"($attrConstantName),
+      $module <: contains JsVariableDeclaration(declarators=$attrConstantDeclarators) as $attrConstantDeclaration where {
+        $attrConstantDeclaration <: r"(?s)const\s.*",
+        $attrConstantDeclarators <: some JsVariableDeclarator(id=$attrConstantName, initializer=JsInitializerClause(expression=$attrConstantValue)),
+        $attrConstantValue <: or { JsObjectExpression(), TsAsExpression(expression=JsObjectExpression()), TsSatisfiesExpression(expression=JsObjectExpression()) },
+        $attrConstantValue <: contains or { JsPropertyObjectMember(name=$attrConstantKey), JsShorthandPropertyObjectMember(name=$attrConstantKey) } where { $attrConstantKey <: 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-]*)?)[\"']?" }
+      }
+    }
+  },
+    $module <: contains JsImport() as $import where {
+    $import <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
+    $import <: contains JsIdentifierBinding() as $binding where { $binding <: $component }
+  },
+    register_diagnostic(span=$attr, message="Control UI component painted through style: color, type, padding, borders, radius, shadows and opacity belong to the component. Set a --cui-* knob in style or use its props; keep other style keys for layout.", severity="error")
+  }

package/lint/no-raw-type-classes.grit

@@ -1,6 +1,6 @@
 language js(typescript, jsx)
 
 JsxAttribute(name=`className`) as $attr where {
-  $attr <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\"'].*" } } as $text where { $text <: r"(?s).*(?:(?:^|[^\w-])text-(?:micro|caption|label|body|body-lg|heading-[1-4]|display|xs|sm|base|lg|xl|[2-9]xl)\b|(?:^|[^\w-])text-\[\d[^\]]*\]).*" },
+  $attr <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $attrMember where { $attrMember <: r"(?s)[\"'].*" } } as $text where { $text <: r"(?s).*(?:(?:^|[^\w-])text-(?:micro|caption|label|body|body-lg|heading-[1-4]|display|xs|sm|base|lg|xl|[2-9]xl)\b|(?:^|[^\w-])text-\[\d[^\]]*\]).*" },
   register_diagnostic(span=$attr, message="Text size in className: render text through <Text>/<Heading> on the type scale, or size the control with its size prop or --cui-*-font-size knob.", severity="error")
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.13",
+  "version": "0.9.15",
   "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",
@@ -61,7 +61,7 @@
   },
   "peerDependencies": {
     "@base-ui/react": "^1.9.0",
-    "@biomejs/biome": ">=2.4.11",
+    "@biomejs/biome": ">=2.5.0",
     "@tanstack/charts": "^1.1.0",
     "@tanstack/react-virtual": "^3.14.13",
     "@tiptap/core": "3.31.4",