@ctrl-ui/react 0.9.9 → 0.9.11

package/dist/blocks/design-canvas-inspector.js

@@ -1,11 +1,11 @@
 "use client";
 import { Button } from "../ui/button.js";
 import { Heading } from "../ui/typography.js";
+import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Separator } from "../ui/separator.js";
 import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
 import { ColorPickerArea } from "../ui/color-picker-area.js";
 import { ColorPickerHue } from "../ui/color-picker-sliders.js";
-import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea } from "../ui/number-field.js";
 import { ColorPickerEyeDropper, ColorPickerInput } from "../ui/color-picker-values.js";
 import { ColorPicker, ColorPickerContent, ColorPickerTrigger } from "../ui/color-picker.js";

package/dist/blocks/file-explorer.js

@@ -4,11 +4,11 @@ import { Button } from "../ui/button.js";
 import { LiveStatus } from "../ui/live-status.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { Heading, Text } from "../ui/typography.js";
+import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Drawer, DrawerBody, DrawerContent, DrawerTitle, DrawerTrigger } from "../ui/drawer.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
-import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Input } from "../ui/input.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";

package/dist/blocks/settings.js

@@ -5,10 +5,10 @@ import { LiveStatus } from "../ui/live-status.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { Heading, Text } from "../ui/typography.js";
 import { prefersReducedMotion } from "../lib/motion.js";
+import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarHeader, SidebarInset, SidebarTrigger } from "../ui/sidebar.js";
-import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Input } from "../ui/input.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { searchSettings } from "./settings-data.js";

package/dist/control-variants.d.ts

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

package/dist/control-variants.js

@@ -1,9 +1,10 @@
 //#region src/control-variants.ts
-const controlVariants = [
+const buttonVariants = [
 	"solid",
 	"surface",
 	"ghost",
-	"quiet"
+	"quiet",
+	"link"
 ];
 const controlTones = [
 	"neutral",
@@ -11,4 +12,4 @@ const controlTones = [
 	"danger"
 ];
 //#endregion
-export { controlTones, controlVariants };
+export { buttonVariants, controlTones };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/badge-knobs.d.ts
-export declare const badgeKnobs: readonly ["--cui-badge-radius", "--cui-badge-background", "--cui-badge-foreground", "--cui-badge-border-color", "--cui-badge-border-width", "--cui-badge-font-size", "--cui-badge-font-weight"];
+export declare const badgeKnobs: readonly ["--cui-badge-radius", "--cui-badge-background", "--cui-badge-foreground", "--cui-badge-border-color", "--cui-badge-border-width", "--cui-badge-font-family", "--cui-badge-font-size", "--cui-badge-font-weight"];
 export type BadgeKnobStyle = Partial<Record<(typeof badgeKnobs)[number], string>>;
 //#endregion

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

@@ -5,6 +5,7 @@ const badgeKnobs = [
 	"--cui-badge-foreground",
 	"--cui-badge-border-color",
 	"--cui-badge-border-width",
+	"--cui-badge-font-family",
 	"--cui-badge-font-size",
 	"--cui-badge-font-weight"
 ];

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/card-knobs.d.ts
-export declare const cardKnobs: readonly ["--cui-card-radius", "--cui-card-background", "--cui-card-border-color", "--cui-card-border-width", "--cui-card-shadow", "--cui-card-backdrop-filter", "--cui-card-padding-block", "--cui-card-padding-inline", "--cui-card-gap", "--cui-card-title-font-size"];
+export declare const cardKnobs: readonly ["--cui-card-radius", "--cui-card-background", "--cui-card-hover-background", "--cui-card-border-color", "--cui-card-border-width", "--cui-card-shadow", "--cui-card-backdrop-filter", "--cui-card-padding-block", "--cui-card-padding-inline", "--cui-card-gap", "--cui-card-title-font-size"];
 export type CardKnobStyle = Partial<Record<(typeof cardKnobs)[number], string>>;
 //#endregion

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

@@ -2,6 +2,7 @@
 const cardKnobs = [
 	"--cui-card-radius",
 	"--cui-card-background",
+	"--cui-card-hover-background",
 	"--cui-card-border-color",
 	"--cui-card-border-width",
 	"--cui-card-shadow",

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/collapsible-knobs.d.ts
-export declare const collapsibleKnobs: readonly ["--cui-collapsible-trigger-radius", "--cui-collapsible-trigger-hover-background", "--cui-collapsible-trigger-padding-inline"];
+export declare const collapsibleKnobs: readonly ["--cui-collapsible-trigger-radius", "--cui-collapsible-trigger-hover-background", "--cui-collapsible-trigger-padding-inline", "--cui-collapsible-trigger-padding-block", "--cui-collapsible-trigger-font-size", "--cui-collapsible-trigger-foreground", "--cui-collapsible-trigger-hover-foreground"];
 export type CollapsibleKnobStyle = Partial<Record<(typeof collapsibleKnobs)[number], string>>;
 //#endregion

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

@@ -2,7 +2,11 @@
 const collapsibleKnobs = [
 	"--cui-collapsible-trigger-radius",
 	"--cui-collapsible-trigger-hover-background",
-	"--cui-collapsible-trigger-padding-inline"
+	"--cui-collapsible-trigger-padding-inline",
+	"--cui-collapsible-trigger-padding-block",
+	"--cui-collapsible-trigger-font-size",
+	"--cui-collapsible-trigger-foreground",
+	"--cui-collapsible-trigger-hover-foreground"
 ];
 //#endregion
 export { collapsibleKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/flow-knobs.d.ts
-export declare const flowKnobs: readonly ["--cui-flow-background", "--cui-flow-grid-dot-color", "--cui-flow-edge-stroke", "--cui-flow-selected-edge-stroke", "--cui-flow-edge-size", "--cui-flow-node-background", "--cui-flow-node-foreground", "--cui-flow-node-border-color", "--cui-flow-node-hover-border-color", "--cui-flow-node-selected-border-color", "--cui-flow-node-border-width", "--cui-flow-node-radius", "--cui-flow-node-shadow", "--cui-flow-handle-size", "--cui-flow-handle-background", "--cui-flow-handle-border-color", "--cui-flow-handle-border-width", "--cui-flow-edge-label-background", "--cui-flow-edge-label-foreground", "--cui-flow-edge-label-border-color", "--cui-flow-edge-label-border-width", "--cui-flow-controls-item-radius", "--cui-flow-controls-padding", "--cui-flow-controls-radius", "--cui-flow-controls-background", "--cui-flow-controls-border-color", "--cui-flow-controls-shadow"];
+export declare const flowKnobs: readonly ["--cui-flow-background", "--cui-flow-grid-dot-color", "--cui-flow-edge-stroke", "--cui-flow-selected-edge-stroke", "--cui-flow-edge-size", "--cui-flow-node-background", "--cui-flow-node-foreground", "--cui-flow-node-border-color", "--cui-flow-node-hover-border-color", "--cui-flow-node-selected-border-color", "--cui-flow-node-border-width", "--cui-flow-node-body-background", "--cui-flow-node-body-radius", "--cui-flow-node-body-padding-inline", "--cui-flow-node-body-padding-block", "--cui-flow-node-radius", "--cui-flow-node-shadow", "--cui-flow-handle-size", "--cui-flow-handle-background", "--cui-flow-handle-border-color", "--cui-flow-handle-border-width", "--cui-flow-edge-label-background", "--cui-flow-edge-label-foreground", "--cui-flow-edge-label-border-color", "--cui-flow-edge-label-border-width", "--cui-flow-controls-item-radius", "--cui-flow-controls-padding", "--cui-flow-controls-radius", "--cui-flow-controls-background", "--cui-flow-controls-border-color", "--cui-flow-controls-shadow"];
 export type FlowKnobStyle = Partial<Record<(typeof flowKnobs)[number], string>>;
 //#endregion

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

@@ -11,6 +11,10 @@ const flowKnobs = [
 	"--cui-flow-node-hover-border-color",
 	"--cui-flow-node-selected-border-color",
 	"--cui-flow-node-border-width",
+	"--cui-flow-node-body-background",
+	"--cui-flow-node-body-radius",
+	"--cui-flow-node-body-padding-inline",
+	"--cui-flow-node-body-padding-block",
 	"--cui-flow-node-radius",
 	"--cui-flow-node-shadow",
 	"--cui-flow-handle-size",

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

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

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

@@ -2,6 +2,7 @@
 const tabsKnobs = [
 	"--cui-tabs-surface-background",
 	"--cui-tabs-surface-radius",
+	"--cui-tabs-trigger-padding-inline",
 	"--cui-tabs-trigger-radius",
 	"--cui-tabs-trigger-height",
 	"--cui-tabs-list-padding",

package/dist/skin.d.ts

@@ -1,12 +1,12 @@
 import { HoverIndicator, SelectionIndicator } from "./control-props.js";
-import { ControlTone, ControlVariant } from "./control-variants.js";
+import { ButtonVariant, ControlTone } from "./control-variants.js";
 import { ReactNode } from "react";
 //#region src/skin.d.ts
 type StatelessPart = Record<never, never>;
 export type SkinAdornmentContexts = {
   button: {
     layer: {
-      variant: ControlVariant;
+      variant: ButtonVariant;
       tone: ControlTone;
     };
   };

package/dist/styles/recipes/alert.css

@@ -39,6 +39,18 @@
     column-gap: var(--cui-alert-icon-gap);
   }
 
+  :where([data-control-family="alert"][data-slot="root"]:has(> [data-slot="action"])) {
+    grid-template-columns: 0 minmax(0, 1fr) auto;
+  }
+
+  :where([data-control-family="alert"][data-slot="root"]:has(> svg):has(> [data-slot="action"])) {
+    grid-template-columns: var(--cui-alert-icon-size) minmax(0, 1fr) auto;
+  }
+
+  :where([data-control-family="alert"][data-slot="root"]:not(:has(> svg)) > [data-slot="action"]) {
+    margin-inline-start: var(--cui-alert-icon-gap);
+  }
+
   :where([data-control-family="alert"][data-slot="description"]) {
     gap: var(--cui-alert-description-gap);
     color: var(--cui-alert-description-foreground);

package/dist/styles/recipes/badge.css

@@ -9,6 +9,7 @@
     --cui-badge-border-width: 1px;
     --cui-badge-font-size: var(--text-caption);
     --cui-badge-font-weight: var(--font-weight-medium);
+    --cui-badge-font-family: var(--font-body);
     --_badge-color-background: var(--badge-neutral);
     --_badge-color-foreground: var(--badge-neutral-foreground);
     --_badge-color-border: var(--badge-neutral-border);
@@ -20,6 +21,7 @@
     border-radius: var(--cui-badge-radius);
     background: var(--cui-badge-background);
     color: var(--cui-badge-foreground);
+    font-family: var(--cui-badge-font-family);
     font-size: var(--cui-badge-font-size);
     font-weight: var(--cui-badge-font-weight);
     font-variant-numeric: tabular-nums;
@@ -124,6 +126,11 @@
   initial-value: 0px;
 }
 
+@property --cui-badge-font-family {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-badge-font-size {
   syntax: "<length-percentage>";
   inherits: true;

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

@@ -59,6 +59,12 @@
     scale: var(--cui-button-press-scale);
   }
 
+  :where([data-control-family="button"][data-variant="link"]) {
+    background: none;
+    box-shadow: none;
+    scale: none;
+  }
+
   :where([data-control-family="button"]:is(:disabled, [data-disabled], [aria-disabled="true"])) {
     cursor: not-allowed;
     opacity: var(--disabled-opacity);

package/dist/styles/recipes/button.css

@@ -183,9 +183,23 @@
     --cui-button-open-background: oklch(from var(--foreground) l c h / 0.07);
   }
 
+  :where([data-control-family="button"][data-variant="link"]) {
+    --cui-button-active-foreground: var(--cui-button-hover-foreground);
+    block-size: auto;
+    padding-inline: 0;
+    text-underline-offset: 0.2em;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="button"][data-variant="link"]:not(:disabled, [data-disabled]):hover) {
+      text-decoration-line: underline;
+    }
+  }
+
   :where([data-control-family="button"][data-tone="primary"]:not([data-variant="solid"])) {
     --cui-button-foreground: var(--primary-text);
     --cui-button-hover-foreground: var(--primary-text);
+    --cui-button-active-foreground: var(--primary-text);
   }
 
   :where([data-control-family="button"][data-tone="danger"][data-variant="solid"]) {
@@ -201,6 +215,13 @@
   :where([data-control-family="button"][data-tone="danger"]:not([data-variant="solid"])) {
     --cui-button-foreground: var(--destructive-text);
     --cui-button-hover-foreground: var(--destructive-text);
+    --cui-button-active-foreground: var(--destructive-text);
+  }
+
+  :where([data-control-family="button"][data-tone="danger"][data-variant="surface"]) {
+    --cui-button-active-background: oklch(from var(--destructive) l c h / 0.08);
+    --cui-button-active-hover-background: oklch(from var(--destructive) l c h / 0.1);
+    --cui-button-active-shadow: inset 0 0 0 var(--control-rim-width) oklch(from var(--destructive) l c h / 0.6), var(--shadow-sm);
   }
 
   :where([data-control-family="button"][data-shape="circle"]) {

package/dist/styles/recipes/card.css

@@ -2,6 +2,7 @@
   :where([data-control-family="card"][data-slot="root"]) {
     --cui-card-radius: var(--radius-lg);
     --cui-card-background: var(--card);
+    --cui-card-hover-background: var(--accent);
     --cui-card-border-color: var(--border);
     --cui-card-border-width: var(--control-rim-width);
     --cui-card-shadow: var(--shadow-sm);
@@ -34,6 +35,34 @@
     padding-inline: var(--cui-card-padding-inline);
   }
 
+  :where([data-control-family="card"][data-slot="root"]:has([data-control-family="card"][data-slot="link"])) {
+    position: relative;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="card"][data-slot="root"]:has([data-control-family="card"][data-slot="link"]:hover)) {
+      background: var(--cui-card-hover-background);
+    }
+  }
+
+  :where([data-control-family="card"][data-slot="root"]:has([data-control-family="card"][data-slot="link"]:focus-visible)) {
+    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  :where([data-control-family="card"][data-slot="link"]) {
+    text-align: start;
+    cursor: pointer;
+    outline: none;
+  }
+
+  :where([data-control-family="card"][data-slot="link"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: var(--cui-card-radius);
+  }
+
   :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);
@@ -81,6 +110,12 @@
   initial-value: transparent;
 }
 
+@property --cui-card-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-card-border-color {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/collapsible.css

@@ -3,6 +3,10 @@
     --cui-collapsible-trigger-radius: var(--radius-control);
     --cui-collapsible-trigger-hover-background: var(--hover-fill);
     --cui-collapsible-trigger-padding-inline: calc(var(--spacing) * 2);
+    --cui-collapsible-trigger-padding-block: 0px;
+    --cui-collapsible-trigger-foreground: var(--foreground);
+    --cui-collapsible-trigger-hover-foreground: var(--foreground);
+    --cui-collapsible-trigger-font-size: var(--text-label);
   }
 
   :where([data-control-family="collapsible"][data-slot="trigger"]) {
@@ -12,9 +16,10 @@
     align-items: center;
     gap: calc(var(--spacing) * 2);
     border-radius: var(--cui-collapsible-trigger-radius);
+    padding-block: var(--cui-collapsible-trigger-padding-block);
     padding-inline: var(--cui-collapsible-trigger-padding-inline);
-    color: var(--foreground);
-    font-size: var(--text-label);
+    color: var(--cui-collapsible-trigger-foreground);
+    font-size: var(--cui-collapsible-trigger-font-size);
     font-weight: var(--font-weight-medium);
     text-align: start;
     transition: background-color var(--duration-fast) var(--ease-standard);
@@ -22,11 +27,13 @@
 
   :where([data-control-family="collapsible"][data-slot="trigger"]:focus-visible) {
     background: var(--cui-collapsible-trigger-hover-background);
+    color: var(--cui-collapsible-trigger-hover-foreground);
   }
 
   @media (hover: hover) {
     :where([data-control-family="collapsible"][data-slot="trigger"]:not(:disabled, [data-disabled]):hover) {
       background: var(--cui-collapsible-trigger-hover-background);
+      color: var(--cui-collapsible-trigger-hover-foreground);
     }
   }
 
@@ -86,3 +93,27 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-collapsible-trigger-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-collapsible-trigger-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-collapsible-trigger-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-collapsible-trigger-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/flow.css

@@ -13,6 +13,10 @@
     --cui-flow-node-border-width: var(--control-rim-width);
     --cui-flow-node-radius: var(--radius-lg);
     --cui-flow-node-shadow: var(--shadow-sm);
+    --cui-flow-node-body-background: transparent;
+    --cui-flow-node-body-radius: 0px;
+    --cui-flow-node-body-padding-inline: calc(var(--spacing) * 3);
+    --cui-flow-node-body-padding-block: 0px;
     --cui-flow-handle-size: calc(var(--spacing) * 2);
     --cui-flow-handle-background: var(--background);
     --cui-flow-handle-border-color: var(--muted-foreground);
@@ -101,8 +105,11 @@
 
   :where([data-control-family="flow"][data-slot="node-body"]) {
     gap: calc(var(--spacing) * 1.5);
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block-end: calc(var(--spacing) * 3);
+    margin-block-end: calc(var(--spacing) * 3);
+    border-radius: var(--cui-flow-node-body-radius);
+    background-color: var(--cui-flow-node-body-background);
+    padding-block: var(--cui-flow-node-body-padding-block);
+    padding-inline: var(--cui-flow-node-body-padding-inline);
     font-size: var(--text-caption);
   }
 
@@ -211,6 +218,30 @@
   initial-value: 0px;
 }
 
+@property --cui-flow-node-body-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-body-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-node-body-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-node-body-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-flow-node-radius {
   syntax: "<length-percentage>";
   inherits: true;

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

@@ -154,6 +154,18 @@
     padding: calc(var(--spacing) * 4);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-popup-part="surface"][data-padding="sm"]) {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-padding="none"] > [data-slot="header"]) {
+    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-padding="none"] > [data-slot="header"]:not(:last-child)) {
+    border-block-end: 1px solid var(--cui-popup-separator-color);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a)) {
     border-radius: var(--radius-sm);
     color: var(--foreground);

package/dist/styles/recipes/tabs.css

@@ -4,6 +4,7 @@
     display: flex;
     flex-direction: column;
     --cui-tabs-trigger-radius: var(--radius-control);
+    --cui-tabs-trigger-padding-inline: calc(var(--spacing) * 3.5);
     --cui-tabs-list-padding: calc(var(--spacing) * 1);
     --cui-tabs-list-radius: calc(
       var(--cui-tabs-trigger-radius) +
@@ -104,7 +105,7 @@
     gap: calc(var(--spacing) * 1.5);
     white-space: nowrap;
     border-radius: var(--_tabs-trigger-radius-fit);
-    padding-inline: calc(var(--spacing) * 3.5);
+    padding-inline: var(--cui-tabs-trigger-padding-inline);
     color: var(--cui-tabs-foreground);
     font-size: var(--cui-tabs-font-size);
     font-weight: var(--cui-tabs-font-weight);
@@ -278,6 +279,12 @@
   initial-value: 0px;
 }
 
+@property --cui-tabs-trigger-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-tabs-trigger-radius {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/ui/alert.d.ts

@@ -16,7 +16,11 @@ export type AlertTitleProps = Omit<ComponentProps<"div">, "style"> & {
 export type AlertDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & AlertKnobStyle;
 };
+export type AlertActionProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & AlertKnobStyle;
+};
 export declare function Alert({ variant, className, ...props }: AlertProps): import("react").JSX.Element;
 export declare function AlertTitle({ render, className, ...props }: AlertTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function AlertDescription({ className, ...props }: AlertDescriptionProps): import("react").JSX.Element;
+export declare function AlertAction({ className, ...props }: AlertActionProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/alert.js

@@ -38,5 +38,14 @@ function AlertDescription({ className, ...props }) {
 		...props
 	});
 }
+function AlertAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "alert",
+		"data-control-family": "alert",
+		"data-slot": "action",
+		className: cn("col-start-3 row-span-2 row-start-1 flex items-center gap-1 self-start", className),
+		...props
+	});
+}
 //#endregion
-export { Alert, AlertDescription, AlertTitle, alertVariants };
+export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants };

package/dist/ui/button.d.ts

@@ -1,9 +1,8 @@
 import { RenderProp } from "../control-props.js";
-import { ControlSize, ControlTone, ControlVariant } from "../control-variants.js";
+import { ButtonVariant, ControlSize, ControlTone } from "../control-variants.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/button.d.ts
-export type ButtonVariant = ControlVariant;
 export type ButtonSize = ControlSize;
 export type ButtonTone = ControlTone;
 export declare const ButtonTrackContext: import("react").Context<boolean>;
@@ -38,4 +37,5 @@ export declare const buttonContentClasses = "relative z-[1] inline-flex min-w-0
 export declare function Button({ variant, size, tone, active, iconOnly, shape, layout, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;
 export declare function ButtonLink({ variant, size, tone, active, iconOnly, shape, layout, render, className, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function ButtonLabel({ variant, size, tone, active, iconOnly, shape, layout, className, children, ...props }: ButtonLabelProps): import("react").JSX.Element;
-//#endregion
+//#endregion
+export type { ButtonVariant };

package/dist/ui/card.d.ts

@@ -29,6 +29,10 @@ export type CardContentProps = ComponentProps<"div"> & {
 export type CardFooterProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
+export type CardLinkProps = Omit<ComponentProps<"button">, "style"> & {
+  render?: RenderProp<ComponentProps<"button">>;
+  style?: CSSProperties & CardKnobStyle;
+};
 export declare function Card({ variant, size, className, ...props }: CardProps): import("react").JSX.Element;
 export declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
 export declare function CardTitle({ render, ...props }: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
@@ -36,4 +40,5 @@ export declare function CardDescription({ className, ...props }: CardDescription
 export declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
 export declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
 export declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;
+export declare function CardLink({ render, ...props }: CardLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/ui/card.js

@@ -72,5 +72,19 @@ function CardFooter({ className, ...props }) {
 		...props
 	});
 }
+function CardLink({ render, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: {
+			type: render ? void 0 : "button",
+			...props,
+			"data-control-ui": "card",
+			"data-control-family": "card",
+			"data-slot": "link",
+			"data-focus-ring": "none"
+		}
+	});
+}
 //#endregion
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardLink, CardTitle };

package/dist/ui/combobox.d.ts

@@ -1,6 +1,7 @@
 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";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/ui/combobox.d.ts
@@ -12,6 +13,7 @@ export type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "st
 } & {
   size?: ControlSize;
 };
+export type ComboboxInputGroupProps = Omit<InputGroupProps, "render">;
 export type ComboboxTriggerProps = ComponentProps<"button"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
@@ -43,6 +45,7 @@ export type ComboboxGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
 };
 export declare function Combobox<Value = string, Multiple extends boolean | undefined = false>({ children, onValueChange, autoHighlight, ...props }: ComboboxProps<Value, Multiple>): import("react").JSX.Element;
 export declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
+export declare function ComboboxInputGroup(props: ComboboxInputGroupProps): import("react").JSX.Element;
 export declare function ComboboxInput({ size, className, ...props }: ComboboxInputProps): import("react").JSX.Element;
 export declare function ComboboxContent({ className, children, sideOffset, anchor, ...props }: ComboboxContentProps): import("react").JSX.Element;
 export declare function ComboboxList<Value = unknown>({ className, children, ...props }: ComboboxListProps<Value>): import("react").JSX.Element;

package/dist/ui/combobox.js

@@ -4,9 +4,10 @@ import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
+import { InputGroup, InputGroupAddon, useIsInsideInputGroup } from "./input-group.js";
 import { shouldAcceptComboboxValueChange } from "./combobox-disabled-selection.js";
 import { createContext, use, useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/ui/combobox.tsx
 const ComboboxDisabledValueContext = createContext(null);
@@ -66,7 +67,21 @@ function ComboboxTrigger({ className, children, ...props }) {
 		})
 	});
 }
+function ComboboxInputGroup(props) {
+	return /* @__PURE__ */ jsx(InputGroup, {
+		...props,
+		render: /* @__PURE__ */ jsx(Combobox$1.InputGroup, {})
+	});
+}
 function ComboboxInput({ size = "md", className, ...props }) {
+	if (useIsInsideInputGroup()) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Combobox$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(ComboboxTrigger, {}) })] });
 	return /* @__PURE__ */ jsxs(Combobox$1.InputGroup, {
 		"data-control-ui": "combobox",
 		"data-control-family": "field",
@@ -213,4 +228,4 @@ function ComboboxGroupLabel({ className, children, ...props }) {
 	});
 }
 //#endregion
-export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger };
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxList, ComboboxTrigger };

package/dist/ui/popover.d.ts

@@ -2,7 +2,7 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/ui/popover.d.ts
-export declare const popoverContentPaddings: readonly ["default", "none"];
+export declare const popoverContentPaddings: readonly ["default", "sm", "none"];
 export type PopoverContentPadding = (typeof popoverContentPaddings)[number];
 type PopoverPopupProps = Omit<ComponentProps<typeof Popover$1.Popup>, "style"> & {
   side?: ComponentProps<typeof Popover$1.Positioner>["side"];

package/dist/ui/popover.js

@@ -6,7 +6,11 @@ import { useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/ui/popover.tsx
-const popoverContentPaddings = ["default", "none"];
+const popoverContentPaddings = [
+	"default",
+	"sm",
+	"none"
+];
 function Popover(props) {
 	return /* @__PURE__ */ jsx(Popover$1.Root, { ...props });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "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",