@ctrl-ui/react 0.9.11 → 0.9.13

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

@@ -181,6 +181,36 @@
     opacity: var(--disabled-opacity);
   }
 
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="label"][data-variant="card"]) {
+    padding-block: var(--cui-field-label-padding-block);
+    padding-inline: var(--cui-field-label-padding-inline);
+    border: var(--cui-field-label-border-width) solid var(--cui-field-label-border-color);
+    border-radius: var(--cui-field-label-radius);
+    background-color: var(--cui-field-label-background);
+    transition-property: background-color, border-color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where(
+        [data-control-family="field"][data-field-kind="field"][data-slot="label"][data-variant="card"]:hover:not(
+          :has([data-control-family="choice"]:is([data-checked], [data-disabled]))
+        )
+      ) {
+      background-color: var(--cui-field-label-hover-background);
+    }
+  }
+
+  :where(
+    [data-control-family="field"][data-field-kind="field"][data-slot="label"][data-variant="card"]:has(
+      [data-control-family="choice"][data-checked]
+    )
+  ) {
+    border-color: var(--cui-field-label-checked-border-color);
+    background-color: var(--cui-field-label-checked-background);
+  }
+
   :where([data-control-family="field"][data-field-kind="field"][data-slot="description"]) {
     color: var(--muted-foreground);
     font-size: var(--cui-field-description-font-size);
@@ -210,12 +240,22 @@
   }
 
   :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);
+    --cui-field-label-background: transparent;
+    --cui-field-label-hover-background: var(--hover-fill);
+    --cui-field-label-checked-background: oklch(from var(--primary) l c h / 0.06);
+    --cui-field-label-border-color: var(--border);
+    --cui-field-label-checked-border-color: var(--primary);
+    --cui-field-label-border-width: var(--control-rim-width);
+    --cui-field-label-padding-block: calc(var(--spacing) * 3);
+    --cui-field-label-padding-inline: calc(var(--spacing) * 3);
   }
 
   :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);
   }
@@ -275,6 +315,66 @@
   }
 }
 
+@property --cui-field-label-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-label-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-label-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-label-checked-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-label-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-label-checked-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-label-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-label-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-label-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  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/page-layout.css

@@ -9,6 +9,7 @@
     --cui-page-layout-header-gap: calc(var(--spacing) * 8);
     --cui-page-layout-header-column-gap: calc(var(--spacing) * 4);
     --cui-page-layout-header-row-gap: calc(var(--spacing) * 2);
+    --cui-page-layout-title-font-size: var(--text-heading-1);
     --cui-page-layout-sticky-gap: 0px;
     --cui-page-layout-floating-inset: calc(var(--spacing) * 2);
     --cui-page-layout-background: var(--canvas);
@@ -76,7 +77,7 @@
 
   :where([data-control-family="page-layout"][data-slot="title"]) {
     grid-area: title;
-    font-size: var(--text-heading-1);
+    font-size: var(--cui-page-layout-title-font-size);
     line-height: var(--text-heading-1--line-height);
     font-weight: var(--text-heading-1--font-weight);
     letter-spacing: var(--text-heading-1--letter-spacing);
@@ -231,6 +232,12 @@
   initial-value: 0px;
 }
 
+@property --cui-page-layout-title-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-page-layout-header-row-gap {
   syntax: "<length-percentage>";
   inherits: true;

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

@@ -26,7 +26,7 @@
   :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="description"]),
   :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="description"]) {
     color: var(--cui-popup-description-foreground);
-    font-size: var(--text-body);
+    font-size: var(--cui-popup-description-font-size);
     text-wrap: pretty;
   }
 
@@ -265,6 +265,12 @@
   initial-value: transparent;
 }
 
+@property --cui-popup-description-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-popup-close-inset {
   syntax: "<length-percentage>";
   inherits: true;

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

@@ -112,11 +112,13 @@
     color: var(--muted-foreground);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="dialog-root"]) {
-    transition-property: grid-template-rows;
-    transition-duration: var(--duration-slow);
-    transition-timing-function: var(--ease-emphasized);
-    transition-delay: var(--duration-fast);
+  :where([data-control-family="popup"][data-popup-part="surface"]:has(> [data-popup-kind="command"][data-slot="dialog-root"])),
+  :where(
+    [data-control-family="popup"][data-popup-part="backdrop"]:has(
+      ~ [data-popup-part="surface"] > [data-popup-kind="command"][data-slot="dialog-root"]
+    )
+  ) {
+    transition: none;
   }
 
   :where([data-control-family="popup"][data-popup-kind="autocomplete"][data-slot="group-label"]) {
@@ -167,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);
   }
@@ -366,3 +373,21 @@
   inherits: true;
   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;
+  initial-value: transparent;
+}

package/dist/styles/recipes/popup.css

@@ -15,6 +15,7 @@
     --cui-popup-title-line-height: var(--text-heading-3--line-height);
     --cui-popup-title-letter-spacing: -0.025em;
     --cui-popup-description-foreground: var(--muted-foreground);
+    --cui-popup-description-font-size: var(--text-body);
     --cui-popup-close-inset: calc(var(--spacing) * 3);
     --cui-popup-item-radius: var(--radius-popup-item-fit);
     --cui-popup-item-foreground: var(--foreground);
@@ -27,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);
@@ -146,6 +149,7 @@
     --cui-popup-title-font-size: var(--text-body);
     --cui-popup-title-line-height: 1.35;
     --cui-popup-title-letter-spacing: -0.01em;
+    --cui-popup-description-font-size: var(--text-label);
     max-block-size: var(--available-height);
     max-inline-size: var(--available-width);
     overflow: auto;
@@ -207,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);
@@ -392,9 +397,3 @@
   inherits: true;
   initial-value: transparent;
 }
-
-@property --cui-popup-shortcut-foreground {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}

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

@@ -235,3 +235,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-sidebar-rail-divider-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/sidebar.css

@@ -38,6 +38,7 @@
     --cui-sidebar-inner-border-width: 0px;
     --cui-sidebar-inner-radius: 0px;
     --cui-sidebar-inner-shadow: none;
+    --cui-sidebar-container-border-width: 1px;
     --cui-sidebar-header-background: transparent;
     --cui-sidebar-header-shadow: 0 0 transparent;
     --cui-sidebar-header-border-width: 1px;
@@ -88,11 +89,11 @@
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="left"] [data-slot="container"]) {
-    border-inline-end: 1px solid var(--sidebar-border);
+    border-inline-end: var(--cui-sidebar-container-border-width) solid var(--sidebar-border);
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="right"] [data-slot="container"]) {
-    border-inline-start: 1px solid var(--sidebar-border);
+    border-inline-start: var(--cui-sidebar-container-border-width) solid var(--sidebar-border);
   }
 
   :where([data-control-family="sidebar"][data-slot="inner"]) {
@@ -132,12 +133,6 @@
   }
 }
 
-@property --cui-sidebar-rail-divider-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
 @property --cui-sidebar-wrapper-background {
   syntax: "<color>";
   inherits: true;
@@ -171,6 +166,12 @@
   inherits: true;
 }
 
+@property --cui-sidebar-container-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-sidebar-inner-border-width {
   syntax: "<length>";
   inherits: true;

package/dist/styles/recipes/table.css

@@ -44,6 +44,35 @@
     }
   }
 
+  :where([data-control-family="table"][data-slot="row"]:has([data-control-family="table"][data-slot="row-link"])) {
+    position: relative;
+  }
+
+  :where([data-control-family="table"][data-slot="row-link"]) {
+    text-align: start;
+    cursor: pointer;
+    outline: none;
+  }
+
+  :where([data-control-family="table"][data-slot="row-link"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  :where([data-control-family="table"][data-slot="row-link"]:focus-visible)::after {
+    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
+    outline-offset: calc(var(--focus-ring-width) * -1);
+  }
+
+  :where(
+    [data-control-family="table"][data-slot="row"]:has([data-control-family="table"][data-slot="row-link"])
+      :is(a[href], button, input, select, textarea, [role="checkbox"]):not([data-slot="row-link"])
+  ) {
+    position: relative;
+    z-index: 1;
+  }
+
   :where([data-control-family="table"][data-slot="row"][data-state="selected"]) {
     background: var(--cui-table-row-selected-background);
   }

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 };