@ctrl-ui/react 0.9.12 → 0.9.14

package/README.md

@@ -49,11 +49,15 @@ 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.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:
 
 ```json
@@ -68,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/knob-contracts/field-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/field-knobs.d.ts
-export declare const fieldKnobs: readonly ["--cui-field-label-radius", "--cui-field-label-background", "--cui-field-label-hover-background", "--cui-field-label-checked-background", "--cui-field-label-border-color", "--cui-field-label-checked-border-color", "--cui-field-label-border-width", "--cui-field-label-padding-block", "--cui-field-label-padding-inline", "--cui-field-legend-font-size", "--cui-field-legend-font-weight", "--cui-field-radius", "--cui-field-background", "--cui-field-hover-background", "--cui-field-affordance-background", "--cui-field-affordance-shadow", "--cui-field-affordance-foreground", "--cui-field-affordance-hover-background", "--cui-field-foreground", "--cui-field-border-color", "--cui-field-border-width", "--cui-field-shadow", "--cui-field-backdrop-filter", "--cui-field-height", "--cui-field-padding-inline", "--cui-field-font-size", "--cui-field-font-weight", "--cui-field-font-family", "--cui-field-group-radius", "--cui-field-group-background", "--cui-field-group-border-color", "--cui-field-group-border-width", "--cui-field-group-shadow", "--cui-field-group-padding-block", "--cui-field-group-padding-inline", "--cui-field-group-separator-color", "--cui-field-group-separator-inset", "--cui-field-label-font-size", "--cui-field-label-font-weight", "--cui-field-description-font-size"];
+export declare const fieldKnobs: readonly ["--cui-field-label-radius", "--cui-field-label-background", "--cui-field-label-hover-background", "--cui-field-label-checked-background", "--cui-field-label-border-color", "--cui-field-label-checked-border-color", "--cui-field-label-border-width", "--cui-field-label-padding-block", "--cui-field-label-padding-inline", "--cui-field-legend-foreground", "--cui-field-legend-font-size", "--cui-field-legend-font-weight", "--cui-field-radius", "--cui-field-background", "--cui-field-hover-background", "--cui-field-affordance-background", "--cui-field-affordance-shadow", "--cui-field-affordance-foreground", "--cui-field-affordance-hover-background", "--cui-field-foreground", "--cui-field-border-color", "--cui-field-border-width", "--cui-field-shadow", "--cui-field-backdrop-filter", "--cui-field-height", "--cui-field-padding-inline", "--cui-field-font-size", "--cui-field-font-weight", "--cui-field-font-family", "--cui-field-group-radius", "--cui-field-group-background", "--cui-field-group-border-color", "--cui-field-group-border-width", "--cui-field-group-shadow", "--cui-field-group-padding-block", "--cui-field-group-padding-inline", "--cui-field-group-separator-color", "--cui-field-group-separator-inset", "--cui-field-label-font-size", "--cui-field-label-font-weight", "--cui-field-description-font-size"];
 export type FieldKnobStyle = Partial<Record<(typeof fieldKnobs)[number], string>>;
 //#endregion

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

@@ -9,6 +9,7 @@ const fieldKnobs = [
 	"--cui-field-label-border-width",
 	"--cui-field-label-padding-block",
 	"--cui-field-label-padding-inline",
+	"--cui-field-legend-foreground",
 	"--cui-field-legend-font-size",
 	"--cui-field-legend-font-weight",
 	"--cui-field-radius",

package/dist/knob-contracts/gradient-editor-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/gradient-editor-knobs.d.ts
-export declare const gradientEditorKnobs: readonly ["--cui-gradient-editor-preview-radius", "--cui-gradient-editor-preview-ring-color", "--cui-gradient-editor-track-radius", "--cui-gradient-editor-stop-radius", "--cui-gradient-editor-stop-border-color", "--cui-gradient-editor-stop-border-width", "--cui-gradient-editor-stop-shadow", "--cui-gradient-editor-add-radius", "--cui-gradient-editor-add-border-color", "--cui-gradient-editor-add-border-width"];
+export declare const gradientEditorKnobs: readonly ["--cui-gradient-editor-preview-radius", "--cui-gradient-editor-preview-ring-color", "--cui-gradient-editor-track-radius", "--cui-gradient-editor-stop-radius", "--cui-gradient-editor-stop-border-color", "--cui-gradient-editor-stop-border-width", "--cui-gradient-editor-stop-shadow"];
 export type GradientEditorKnobStyle = Partial<Record<(typeof gradientEditorKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/gradient-editor-knobs.js

@@ -6,10 +6,7 @@ const gradientEditorKnobs = [
 	"--cui-gradient-editor-stop-radius",
 	"--cui-gradient-editor-stop-border-color",
 	"--cui-gradient-editor-stop-border-width",
-	"--cui-gradient-editor-stop-shadow",
-	"--cui-gradient-editor-add-radius",
-	"--cui-gradient-editor-add-border-color",
-	"--cui-gradient-editor-add-border-width"
+	"--cui-gradient-editor-stop-shadow"
 ];
 //#endregion
 export { gradientEditorKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/popup-knobs.d.ts
-export declare const popupKnobs: readonly ["--cui-popup-title-foreground", "--cui-popup-title-font-size", "--cui-popup-title-font-weight", "--cui-popup-title-line-height", "--cui-popup-title-letter-spacing", "--cui-popup-description-foreground", "--cui-popup-description-font-size", "--cui-popup-close-inset", "--cui-popup-item-inset", "--cui-popup-label-padding-block", "--cui-popup-label-padding-inline", "--cui-popup-label-font-size", "--cui-popup-label-font-weight", "--cui-popup-label-letter-spacing", "--cui-popup-label-text-transform", "--cui-popup-separator-inset", "--cui-popup-shortcut-font-size", "--cui-popup-shortcut-letter-spacing", "--cui-popup-separator-gap", "--cui-popup-submenu-indicator-foreground", "--cui-popup-command-heading-padding-block", "--cui-popup-command-heading-padding-inline", "--cui-popup-command-heading-font-size", "--cui-popup-command-heading-letter-spacing", "--cui-popup-command-heading-text-transform", "--cui-popup-dialog-max-inline-size", "--cui-popup-shortcut-foreground", "--cui-popup-tooltip-arrow-radius", "--cui-popup-status-success-foreground", "--cui-popup-status-warning-foreground", "--cui-popup-status-info-foreground", "--cui-popup-status-error-foreground", "--cui-popup-radius", "--cui-popup-background", "--cui-popup-foreground", "--cui-popup-border-color", "--cui-popup-border-width", "--cui-popup-shadow", "--cui-popup-backdrop-filter", "--cui-popup-backdrop-background", "--cui-popup-backdrop-blur", "--cui-popup-item-radius", "--cui-popup-item-font-size", "--cui-popup-item-icon-size", "--cui-popup-item-padding-block", "--cui-popup-item-padding-inline", "--cui-popup-item-min-height", "--cui-popup-item-highlight-shadow", "--cui-popup-item-foreground", "--cui-popup-item-highlight-background", "--cui-popup-item-highlight-foreground", "--cui-popup-item-highlight-muted-foreground", "--cui-popup-item-disabled-opacity", "--cui-popup-separator-color"];
+export declare const popupKnobs: readonly ["--cui-popup-title-foreground", "--cui-popup-title-font-size", "--cui-popup-title-font-weight", "--cui-popup-title-line-height", "--cui-popup-title-letter-spacing", "--cui-popup-description-foreground", "--cui-popup-description-font-size", "--cui-popup-close-inset", "--cui-popup-item-inset", "--cui-popup-label-padding-block", "--cui-popup-label-padding-inline", "--cui-popup-label-font-size", "--cui-popup-label-font-weight", "--cui-popup-label-letter-spacing", "--cui-popup-label-text-transform", "--cui-popup-separator-inset", "--cui-popup-shortcut-font-size", "--cui-popup-shortcut-letter-spacing", "--cui-popup-separator-gap", "--cui-popup-submenu-indicator-foreground", "--cui-popup-command-heading-padding-block", "--cui-popup-command-heading-padding-inline", "--cui-popup-command-heading-font-size", "--cui-popup-command-heading-letter-spacing", "--cui-popup-command-heading-text-transform", "--cui-popup-dialog-max-inline-size", "--cui-popup-item-description-foreground", "--cui-popup-item-description-font-size", "--cui-popup-shortcut-foreground", "--cui-popup-tooltip-arrow-radius", "--cui-popup-status-success-foreground", "--cui-popup-status-warning-foreground", "--cui-popup-status-info-foreground", "--cui-popup-status-error-foreground", "--cui-popup-radius", "--cui-popup-background", "--cui-popup-foreground", "--cui-popup-border-color", "--cui-popup-border-width", "--cui-popup-shadow", "--cui-popup-backdrop-filter", "--cui-popup-backdrop-background", "--cui-popup-backdrop-blur", "--cui-popup-item-radius", "--cui-popup-item-font-size", "--cui-popup-item-icon-size", "--cui-popup-item-padding-block", "--cui-popup-item-padding-inline", "--cui-popup-item-min-height", "--cui-popup-item-highlight-shadow", "--cui-popup-item-foreground", "--cui-popup-item-highlight-background", "--cui-popup-item-highlight-foreground", "--cui-popup-item-highlight-muted-foreground", "--cui-popup-item-disabled-opacity", "--cui-popup-separator-color"];
 export type PopupKnobStyle = Partial<Record<(typeof popupKnobs)[number], string>>;
 //#endregion

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

@@ -26,6 +26,8 @@ const popupKnobs = [
 	"--cui-popup-command-heading-letter-spacing",
 	"--cui-popup-command-heading-text-transform",
 	"--cui-popup-dialog-max-inline-size",
+	"--cui-popup-item-description-foreground",
+	"--cui-popup-item-description-font-size",
 	"--cui-popup-shortcut-foreground",
 	"--cui-popup-tooltip-arrow-radius",
 	"--cui-popup-status-success-foreground",

package/dist/lib/phone-input-format.js

@@ -1,5 +1,5 @@
-import { getCountryCallingCode } from "react-phone-number-input/max";
 import { AsYouType } from "libphonenumber-js/max";
+import { getCountryCallingCode } from "react-phone-number-input/max";
 //#region src/lib/phone-input-format.ts
 function normalizePhoneInputText(value, country) {
 	if (!country) return value;

package/dist/styles/recipes/card.css

@@ -63,6 +63,14 @@
     border-radius: var(--cui-card-radius);
   }
 
+  :where(
+    [data-control-family="card"][data-slot="root"]:has([data-control-family="card"][data-slot="link"])
+      :is(a[href], button, input, select, textarea, [role="checkbox"]):not([data-control-family="card"][data-slot="link"])
+  ) {
+    position: relative;
+    z-index: 1;
+  }
+
   :where([data-control-family="card"][data-slot="root"][data-size="sm"]) {
     --cui-card-padding-block: calc(var(--spacing) * 3);
     --cui-card-padding-inline: calc(var(--spacing) * 4);

package/dist/styles/recipes/color-picker-values.css

@@ -53,23 +53,9 @@
     font-size: var(--text-caption);
   }
 
-  :where([data-control-family="color-picker"][data-slot="swatch-add"]) {
-    border-radius: var(--radius-md);
-    border-width: var(--control-rim-width);
-    border-style: dashed;
-    --_color-picker-swatch-add-border-color: var(--border);
-    border-color: var(--_color-picker-swatch-add-border-color);
-    --_color-picker-swatch-add-foreground: var(--muted-foreground);
-    color: var(--_color-picker-swatch-add-foreground);
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="color-picker"][data-slot="swatch-add"]:hover:not(:disabled)) {
-      --_color-picker-swatch-add-border-color: oklch(from var(--foreground) l c h / 0.4);
-      border-color: var(--_color-picker-swatch-add-border-color);
-      --_color-picker-swatch-add-foreground: var(--foreground);
-      color: var(--_color-picker-swatch-add-foreground);
-    }
+  :where([data-control-family="button"][data-color-picker-swatch-add="true"]) {
+    --nest-radius: var(--radius-md);
+    --cui-button-height: calc(var(--spacing) * 6);
   }
 
   :where([data-control-family="color-picker"][data-slot="swatch"]) {
@@ -91,7 +77,7 @@
     transition: box-shadow var(--duration-fast) var(--ease-standard);
   }
 
-  :where([data-control-family="color-picker"]:is([data-slot="swatch"], [data-slot="swatch-add"], [data-slot="contrast-fix"]):disabled) {
+  :where([data-control-family="color-picker"]:is([data-slot="swatch"], [data-slot="contrast-fix"]):disabled) {
     opacity: var(--disabled-opacity);
   }
 

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

@@ -59,8 +59,7 @@
     border-radius: 9999px;
   }
 
-  :where([data-control-family="color-picker"][data-slot="swatch"]),
-  :where([data-control-family="color-picker"][data-slot="swatch-add"]) {
+  :where([data-control-family="color-picker"][data-slot="swatch"]) {
     inline-size: calc(var(--spacing) * 6);
     block-size: calc(var(--spacing) * 6);
   }
@@ -125,7 +124,7 @@
     --_color-picker-thumb-elevation: var(--shadow-md);
   }
 
-  :where([data-control-family="color-picker"]:is([data-slot="slider-thumb"], [data-slot="swatch-add"]))::after {
+  :where([data-control-family="color-picker"][data-slot="slider-thumb"])::after {
     content: "";
     position: absolute;
     inset: 50%;
@@ -135,7 +134,7 @@
   }
 
   @media (pointer: coarse) {
-    :where([data-control-family="color-picker"]:is([data-slot="slider-thumb"], [data-slot="swatch-add"]))::after {
+    :where([data-control-family="color-picker"][data-slot="slider-thumb"])::after {
       inline-size: max(100%, var(--touch-target));
       block-size: max(100%, var(--touch-target));
     }

package/dist/styles/recipes/field-parts.css

@@ -240,6 +240,7 @@
   }
 
   :where([data-control-family="field"][data-field-kind="field"]) {
+    --cui-field-legend-foreground: var(--foreground);
     --cui-field-legend-font-size: var(--text-label);
     --cui-field-legend-font-weight: var(--font-weight-semibold);
     --cui-field-label-radius: var(--radius-lg);
@@ -254,7 +255,7 @@
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="legend"]) {
-    color: var(--foreground);
+    color: var(--cui-field-legend-foreground);
     font-size: var(--cui-field-legend-font-size);
     font-weight: var(--cui-field-legend-font-weight);
   }
@@ -368,6 +369,12 @@
   initial-value: 0px;
 }
 
+@property --cui-field-legend-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-field-legend-font-size {
   syntax: "<length-percentage>";
   inherits: true;

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

@@ -5,9 +5,6 @@
 
   :where([data-control-family="gradient-editor"][data-slot="root"]) {
     gap: calc(var(--spacing) * 3);
-    --cui-gradient-editor-add-border-color: var(--border);
-    --cui-gradient-editor-add-border-width: var(--control-rim-width);
-    --cui-gradient-editor-add-radius: 9999px;
     --cui-gradient-editor-preview-radius: var(--radius-field);
     --cui-gradient-editor-preview-ring-color: oklch(from var(--border) l c h / 0.6);
     --cui-gradient-editor-stop-border-color: oklch(1 0 0);
@@ -48,19 +45,9 @@
     transition: scale var(--duration-fast) var(--ease-standard);
   }
 
-  :where([data-control-family="gradient-editor"][data-slot="stop-add"]) {
-    inline-size: calc(var(--spacing) * 7);
-    block-size: calc(var(--spacing) * 7);
-    border: var(--cui-gradient-editor-add-border-width) dashed var(--cui-gradient-editor-add-border-color);
-    border-radius: var(--cui-gradient-editor-add-radius);
-    color: var(--muted-foreground);
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="gradient-editor"][data-slot="stop-add"]:hover:not(:disabled)) {
-      border-color: oklch(from var(--foreground) l c h / 0.4);
-      color: var(--foreground);
-    }
+  :where([data-control-family="button"][data-gradient-editor-stop-add="true"]) {
+    --nest-radius: 9999px;
+    --cui-button-height: calc(var(--spacing) * 7);
   }
 
   :where([data-control-family="gradient-editor"][data-slot="stop"][data-selected="true"]) {
@@ -77,19 +64,6 @@
   }
 
   @media (pointer: coarse) {
-    :where([data-control-family="gradient-editor"][data-slot="stop-add"]) {
-      position: relative;
-    }
-
-    :where([data-control-family="gradient-editor"][data-slot="stop-add"])::after {
-      content: "";
-      position: absolute;
-      inset: 50%;
-      translate: -50% -50%;
-      inline-size: max(100%, var(--touch-target));
-      block-size: max(100%, var(--touch-target));
-    }
-
     :where([data-control-family="gradient-editor"][data-slot="stop"])::after {
       block-size: max(100%, var(--touch-target));
     }
@@ -136,21 +110,3 @@
   syntax: "*";
   inherits: true;
 }
-
-@property --cui-gradient-editor-add-radius {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-gradient-editor-add-border-color {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-gradient-editor-add-border-width {
-  syntax: "<length>";
-  inherits: true;
-  initial-value: 0px;
-}

package/dist/styles/recipes/markdown.css

@@ -1,5 +1,6 @@
 @layer components {
-  :where([data-control-family="markdown"][data-slot="root"]) {
+  :where([data-control-family="markdown"][data-slot="root"]),
+  :where([data-control-family="markdown"]:not([data-control-family="markdown"][data-slot="root"] *)) {
     --cui-markdown-foreground: oklch(from var(--foreground) l c h / 0.9);
     --cui-markdown-blockquote-border-color: var(--border);
     --cui-markdown-blockquote-foreground: var(--muted-foreground);
@@ -14,6 +15,9 @@
     --cui-markdown-line-height: var(--leading-relaxed);
     --cui-markdown-flow-gap: calc(var(--spacing) * 4);
     --cui-markdown-heading-gap: calc(var(--spacing) * 6);
+  }
+
+  :where([data-control-family="markdown"][data-slot="root"]) {
     color: var(--cui-markdown-foreground);
     font-size: var(--cui-markdown-font-size);
     overflow-wrap: break-word;

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

@@ -169,6 +169,11 @@
     letter-spacing: var(--cui-popup-shortcut-letter-spacing);
   }
 
+  :where([data-control-family="popup"][data-slot="item-description"]) {
+    color: var(--cui-popup-item-description-foreground);
+    font-size: var(--cui-popup-item-description-font-size);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="shortcut"]) {
     --cui-popup-shortcut-font-size: var(--text-label);
   }
@@ -369,6 +374,18 @@
   initial-value: 0px;
 }
 
+@property --cui-popup-item-description-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-item-description-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-popup-shortcut-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/popup.css

@@ -28,6 +28,8 @@
     --cui-popup-item-highlight-background: var(--hover-fill);
     --cui-popup-item-highlight-foreground: var(--cui-popup-item-foreground);
     --cui-popup-item-highlight-muted-foreground: var(--muted-foreground);
+    --cui-popup-item-description-foreground: var(--muted-foreground);
+    --cui-popup-item-description-font-size: var(--text-label);
     --cui-popup-item-highlight-shadow: inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.35);
     --cui-popup-item-disabled-opacity: var(--disabled-opacity);
     --cui-popup-label-padding-block: var(--cui-popup-item-padding-block);
@@ -209,6 +211,7 @@
   ) {
     --cui-popup-shortcut-foreground: var(--cui-popup-item-highlight-foreground);
     --cui-popup-submenu-indicator-foreground: var(--cui-popup-item-highlight-foreground);
+    --cui-popup-item-description-foreground: var(--cui-popup-item-highlight-muted-foreground);
     --muted-foreground: var(--cui-popup-item-highlight-muted-foreground);
     background-color: var(--cui-popup-item-highlight-background);
     color: var(--cui-popup-item-highlight-foreground);

package/dist/styles/theme.css

@@ -710,6 +710,10 @@
     outline-width: 0;
   }
 
+  :where([data-control-family][data-focus-ring="none"]):focus-visible {
+    outline-style: none;
+  }
+
   :where([data-control-family][data-highlighted]):focus-visible {
     outline-offset: calc(var(--focus-ring-width) * -1);
   }

package/dist/ui/autocomplete.d.ts

@@ -2,6 +2,7 @@ import { OpenChangeEventDetails } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { InputGroupProps } from "./input-group.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/autocomplete.d.ts
 export type AutocompleteProps<Value = string> = {
@@ -29,6 +30,7 @@ export type AutocompleteInputProps = Omit<Omit<ComponentProps<"input">, "size">,
 } & {
   size?: ControlSize;
 };
+export type AutocompleteInputGroupProps = Omit<InputGroupProps, "render">;
 export type AutocompleteClearProps = ComponentProps<"button"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
@@ -59,6 +61,7 @@ export type AutocompleteGroupLabelProps = Omit<ComponentProps<"div">, "style"> &
 };
 export declare function Autocomplete<Value = string>({ children, autoHighlight, ...props }: AutocompleteProps<Value>): import("react").JSX.Element;
 export declare function AutocompleteClear({ className, children, ...props }: AutocompleteClearProps): import("react").JSX.Element;
+export declare function AutocompleteInputGroup(props: AutocompleteInputGroupProps): import("react").JSX.Element;
 export declare function AutocompleteInput({ size, className, ...props }: AutocompleteInputProps): import("react").JSX.Element;
 export declare function AutocompleteContent({ className, children, sideOffset, ...props }: AutocompleteContentProps): import("react").JSX.Element;
 export declare function AutocompleteList<Value = unknown>({ className, children, ...props }: AutocompleteListProps<Value>): import("react").JSX.Element;

package/dist/ui/autocomplete.js

@@ -4,7 +4,8 @@ import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { InputGroup, InputGroupAddon, useIsInsideInputGroup } from "./input-group.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
 //#region src/ui/autocomplete.tsx
 function Autocomplete({ children, autoHighlight = true, ...props }) {
@@ -38,7 +39,21 @@ function AutocompleteClear({ className, children, ...props }) {
 		})
 	});
 }
+function AutocompleteInputGroup(props) {
+	return /* @__PURE__ */ jsx(InputGroup, {
+		...props,
+		render: /* @__PURE__ */ jsx(Autocomplete$1.InputGroup, {})
+	});
+}
 function AutocompleteInput({ size = "md", className, ...props }) {
+	if (useIsInsideInputGroup()) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Autocomplete$1.Input, {
+		...props,
+		"data-control-ui": "input-group",
+		"data-control-family": "field",
+		"data-field-kind": "input-group",
+		"data-slot": "input",
+		className: cn("h-full min-w-0 flex-1", className)
+	}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(AutocompleteClear, {}) })] });
 	return /* @__PURE__ */ jsxs(Autocomplete$1.InputGroup, {
 		"data-control-ui": "autocomplete",
 		"data-field-kind": "autocomplete",
@@ -155,4 +170,4 @@ function AutocompleteGroupLabel({ className, children, ...props }) {
 	});
 }
 //#endregion
-export { Autocomplete, AutocompleteClear, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList };
+export { Autocomplete, AutocompleteClear, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteInputGroup, AutocompleteItem, AutocompleteList };