@ctrl-ui/react 0.9.8 → 0.9.10

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-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,10 @@
 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-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/item-knobs.d.ts

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

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

@@ -2,6 +2,7 @@
 const itemKnobs = [
 	"--cui-item-radius",
 	"--cui-item-hover-background",
+	"--cui-item-current-background",
 	"--cui-item-hover-border-color",
 	"--cui-item-border-width",
 	"--cui-item-active-scale",

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,9 @@
     --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);
   }
 
   :where([data-control-family="collapsible"][data-slot="trigger"]) {
@@ -12,8 +15,9 @@
     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);
+    color: var(--cui-collapsible-trigger-foreground);
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
     text-align: start;
@@ -22,11 +26,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 +92,21 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-collapsible-trigger-padding-block {
+  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/empty.css

@@ -33,6 +33,11 @@
     overflow-wrap: anywhere;
   }
 
+  :where([data-control-family="empty"][data-slot="root"][data-variant="outline"]) {
+    --cui-empty-border-color: var(--border);
+    --cui-empty-border-style: dashed;
+  }
+
   :where([data-control-family="empty"][data-slot="media"]) {
     inline-size: var(--cui-empty-media-size);
     block-size: var(--cui-empty-media-size);

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/item.css

@@ -2,6 +2,7 @@
   :where([data-control-family="item"][data-slot="root"]) {
     --cui-item-radius: var(--radius-lg);
     --cui-item-hover-background: var(--hover-fill);
+    --cui-item-current-background: var(--active-fill);
     --cui-item-hover-border-color: var(--_item-border-color);
     --cui-item-border-width: 0px;
     --cui-item-active-scale: 0.99;
@@ -65,6 +66,10 @@
     --_item-background: oklch(from var(--muted) l c h / 0.5);
   }
 
+  :where([data-control-family="item"][data-slot="root"][aria-current]:not([aria-current="false"])) {
+    --_item-background: var(--cui-item-current-background);
+  }
+
   @media (hover: hover) {
     :where(
         [data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):not(
@@ -127,6 +132,12 @@
   initial-value: transparent;
 }
 
+@property --cui-item-current-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-item-hover-border-color {
   syntax: "<color>";
   inherits: true;

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

@@ -1,4 +1,10 @@
 @layer components {
+  :where([data-control-family="popup"][data-popup-part="item"][data-tone="danger"]) {
+    --cui-popup-item-foreground: var(--destructive-text);
+    --cui-popup-item-highlight-background: oklch(from var(--destructive-text) l c h / 0.12);
+    --cui-popup-item-highlight-foreground: var(--destructive-text);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="title"]),
   :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="title"]),
   :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="title"]),
@@ -112,6 +118,32 @@
     padding: calc(var(--spacing) * 4);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="content"]:has(> [data-slot="body"])) {
+    gap: 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="body"]) {
+    gap: calc(var(--spacing) * 4);
+    overscroll-behavior: contain;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="body"][data-padding="default"]) {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="header"]:has(+ [data-slot="body"])) {
+    border-block-end: 1px solid var(--cui-popup-separator-color);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="body"] + [data-slot="footer"]) {
+    border-block-start: 1px solid var(--cui-popup-separator-color);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="header"]) {
     gap: calc(var(--spacing) * 1.5);
     padding-block-end: calc(var(--spacing) * 3);
@@ -122,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/skeleton.css

@@ -15,6 +15,14 @@
     background-image: var(--cui-skeleton-background-image);
   }
 
+  :where([data-control-family="skeleton"][data-slot="root"][data-shape="circle"]) {
+    --cui-skeleton-radius: 9999px;
+  }
+
+  :where([data-control-family="skeleton"][data-slot="root"][data-shape="panel"]) {
+    --cui-skeleton-radius: var(--radius-panel);
+  }
+
   :where([data-control-family="skeleton"][data-slot="root"][data-variant="shimmer"]) {
     --cui-skeleton-easing: linear;
   }

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/surface-variants.d.ts

@@ -1,5 +1,7 @@
 //#region src/surface-variants.d.ts
 export declare const popupItemStructureClasses = "flex select-none items-center";
+export declare const popupItemTones: readonly ["neutral", "danger"];
+export type PopupItemTone = (typeof popupItemTones)[number];
 export declare const popupParts: readonly ["backdrop", "surface", "list-surface", "list-content", "bar", "item", "navigation-link", "label", "separator", "shortcut"];
 export type PopupPart = (typeof popupParts)[number];
 //#endregion

package/dist/surface-variants.js

@@ -1,5 +1,6 @@
 //#region src/surface-variants.ts
 const popupItemStructureClasses = "flex select-none items-center";
+const popupItemTones = ["neutral", "danger"];
 const popupParts = [
 	"backdrop",
 	"surface",
@@ -13,4 +14,4 @@ const popupParts = [
 	"shortcut"
 ];
 //#endregion
-export { popupItemStructureClasses, popupParts };
+export { popupItemStructureClasses, popupItemTones, popupParts };

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/context-menu.d.ts

@@ -1,5 +1,6 @@
 import { ControlledChoice, OpenChangeEventDetails } from "../control-props.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { PopupItemTone } from "../surface-variants.js";
 import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
 //#region src/ui/context-menu.d.ts
@@ -23,6 +24,7 @@ export type ContextMenuItemProps = Omit<Omit<ComponentProps<"div">, "onClick">,
 } & {
   disabled?: boolean;
   inset?: boolean;
+  tone?: PopupItemTone;
   onClick?: (event: MouseEvent) => void;
 };
 export type ContextMenuCheckboxItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
@@ -72,7 +74,7 @@ export declare function ContextMenuTrigger({ className, ...props }: ContextMenuT
 export declare function ContextMenuPortal(props: ComponentProps<typeof ContextMenu$1.Portal>): import("react").JSX.Element;
 export declare function ContextMenuGroup({ className, ...props }: ContextMenuGroupProps): import("react").JSX.Element;
 export declare function ContextMenuContent({ className, children, ...props }: ContextMenuContentProps): import("react").JSX.Element;
-export declare function ContextMenuItem({ className, inset, ...props }: ContextMenuItemProps): import("react").JSX.Element;
+export declare function ContextMenuItem({ className, inset, tone, ...props }: ContextMenuItemProps): import("react").JSX.Element;
 export declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
 export declare function ContextMenuRadioGroup<TValue extends string = string>({ className, ...props }: ContextMenuRadioGroupProps<TValue>): import("react").JSX.Element;
 export declare function ContextMenuRadioItem({ className, children, value, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;

package/dist/ui/context-menu.js

@@ -56,13 +56,14 @@ function ContextMenuContent({ className, children, ...props }) {
 		})
 	}) });
 }
-function ContextMenuItem({ className, inset = false, ...props }) {
+function ContextMenuItem({ className, inset = false, tone = "neutral", ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
 		"data-control-ui": "context-menu",
 		"data-popup-kind": "context-menu",
 		"data-slot": "item",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
+		"data-tone": tone,
 		"data-inset": inset || void 0,
 		className: cn(itemClasses, className),
 		...mergeProps(popupItemFocusProps, props)

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

@@ -1,6 +1,7 @@
 import { ControlSize } from "../control-variants.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { PopupItemTone } from "../surface-variants.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.d.ts
@@ -19,7 +20,9 @@ export type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> &
   variant?: DropdownMenuTriggerVariant;
 };
 export type DropdownMenuContentProps = DropdownMenuStyledProps<Menu.Popup.Props> & Pick<Menu.Positioner.Props, "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance">;
-export type DropdownMenuItemProps = DropdownMenuStyledProps<Menu.Item.Props>;
+export type DropdownMenuItemProps = DropdownMenuStyledProps<Menu.Item.Props> & {
+  tone?: PopupItemTone;
+};
 export type DropdownMenuGroupProps = DropdownMenuStyledProps<Menu.Group.Props>;
 export type DropdownMenuCheckboxItemProps = DropdownMenuStyledProps<Menu.CheckboxItem.Props>;
 export type DropdownMenuRadioGroupProps = DropdownMenuStyledProps<Menu.RadioGroup.Props>;
@@ -37,7 +40,7 @@ export type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
 export declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
 export declare function DropdownMenuTrigger({ size, iconOnly, variant, className, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
 export declare function DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
-export declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
+export declare function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
 export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
 export declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
 export declare function DropdownMenuPortal(props: Menu.Portal.Props): import("react").JSX.Element;

package/dist/ui/dropdown-menu.js

@@ -74,12 +74,13 @@ function DropdownMenuContent({ className, children, side, sideOffset = 6, align
 		})
 	}) });
 }
-function DropdownMenuItem({ className, ...props }) {
+function DropdownMenuItem({ tone = "neutral", className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		"data-control-ui": "dropdown-menu",
 		"data-slot": "item",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
+		"data-tone": tone,
 		className: cn(popupItemStructureClasses, className),
 		...mergeProps(popupItemFocusProps, props)
 	});

package/dist/ui/empty.d.ts

@@ -2,8 +2,11 @@ import { RenderProp } from "../control-props.js";
 import { EmptyKnobStyle } from "../knob-contracts/empty-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/empty.d.ts
+export declare const emptyVariants: readonly ["default", "outline"];
+export type EmptyVariant = (typeof emptyVariants)[number];
 export type EmptyProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
+  variant?: EmptyVariant;
 };
 export type EmptyHeaderProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
@@ -21,7 +24,7 @@ export type EmptyTitleProps = Omit<ComponentProps<"div">, "style"> & {
   render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & EmptyKnobStyle;
 };
-export declare function Empty({ className, ...props }: EmptyProps): import("react").JSX.Element;
+export declare function Empty({ variant, className, ...props }: EmptyProps): import("react").JSX.Element;
 export declare function EmptyHeader({ className, ...props }: EmptyHeaderProps): import("react").JSX.Element;
 export declare function EmptyMedia({ className, ...props }: EmptyMediaProps): import("react").JSX.Element;
 export declare function EmptyTitle({ render, ...props }: EmptyTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/ui/empty.js

@@ -3,11 +3,13 @@ import { cn } from "../lib/cn.js";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/empty.tsx
-function Empty({ className, ...props }) {
+const emptyVariants = ["default", "outline"];
+function Empty({ variant = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "empty",
 		"data-control-family": "empty",
 		"data-slot": "root",
+		"data-variant": variant,
 		className: cn("flex min-w-0 flex-1 flex-col items-center justify-center", className),
 		...props
 	});
@@ -61,4 +63,4 @@ function EmptyContent({ className, ...props }) {
 	});
 }
 //#endregion
-export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyVariants };

package/dist/ui/menubar.d.ts

@@ -1,6 +1,7 @@
 import { OpenChangeEventDetails } from "../control-props.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { PopupItemTone } from "../surface-variants.js";
 import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
 //#region src/ui/menubar.d.ts
 export type MenubarProps = Omit<ComponentProps<"div">, "style"> & {
@@ -30,6 +31,7 @@ export type MenubarItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "sty
   style?: CSSProperties & PopupKnobStyle;
 } & {
   disabled?: boolean;
+  tone?: PopupItemTone;
   onClick?: (event: MouseEvent) => void;
 };
 export type MenubarSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
@@ -63,7 +65,7 @@ export declare function MenubarMenu(props: MenubarMenuProps): import("react").JS
 export declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react").JSX.Element;
 export declare function MenubarContent({ className, children, ...props }: MenubarContentProps): import("react").JSX.Element;
 export declare function MenubarGroup({ className, ...props }: MenubarGroupProps): import("react").JSX.Element;
-export declare function MenubarItem({ className, ...props }: MenubarItemProps): import("react").JSX.Element;
+export declare function MenubarItem({ tone, className, ...props }: MenubarItemProps): import("react").JSX.Element;
 export declare function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): import("react").JSX.Element;
 export declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react").JSX.Element;
 export declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react").JSX.Element;

package/dist/ui/menubar.js

@@ -69,13 +69,14 @@ function MenubarGroup({ className, ...props }) {
 		...props
 	});
 }
-function MenubarItem({ className, ...props }) {
+function MenubarItem({ tone = "neutral", className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		"data-control-ui": "menubar",
 		"data-popup-kind": "menubar",
 		"data-slot": "item",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
+		"data-tone": tone,
 		className: cn(itemClasses, className),
 		...props
 	});

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/dist/ui/sheet.d.ts

@@ -2,6 +2,8 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/ui/sheet.d.ts
+export declare const sheetBodyPaddings: readonly ["default", "none"];
+export type SheetBodyPadding = (typeof sheetBodyPaddings)[number];
 export declare function Sheet(props: ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
 export declare function SheetClose({ className, ...props }: ComponentProps<typeof Dialog.Close> & {
   style?: CSSProperties & PopupKnobStyle;
@@ -15,6 +17,13 @@ export declare function SheetContent({ className, children, side, ...props }: Sh
 export declare function SheetHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
+export declare function SheetBody({ padding, className, ...props }: ComponentProps<"div"> & {
+  padding?: SheetBodyPadding;
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+export declare function SheetFooter({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function SheetTitle({ className, ...props }: ComponentProps<typeof Dialog.Title> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/sheet.js

@@ -5,6 +5,7 @@ import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/ui/sheet.tsx
+const sheetBodyPaddings = ["default", "none"];
 function Sheet(props) {
 	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
 }
@@ -54,6 +55,27 @@ function SheetHeader({ className, ...props }) {
 		...props
 	});
 }
+function SheetBody({ padding = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sheet",
+		"data-control-family": "popup",
+		"data-popup-kind": "sheet",
+		"data-slot": "body",
+		"data-padding": padding,
+		className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sheet",
+		"data-control-family": "popup",
+		"data-popup-kind": "sheet",
+		"data-slot": "footer",
+		className: cn("mt-auto flex shrink-0 flex-col sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
 function SheetTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Title, {
 		"data-control-ui": "sheet",
@@ -75,4 +97,4 @@ function SheetDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, sheetBodyPaddings };

package/dist/ui/skeleton.d.ts

@@ -3,9 +3,12 @@ import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/skeleton.d.ts
 export declare const skeletonVariants: readonly ["shimmer", "pulse", "none"];
 export type SkeletonVariant = (typeof skeletonVariants)[number];
+export declare const skeletonShapes: readonly ["default", "circle", "panel"];
+export type SkeletonShape = (typeof skeletonShapes)[number];
 export type SkeletonProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & SkeletonKnobStyle;
   variant?: SkeletonVariant;
+  shape?: SkeletonShape;
 };
-export declare function Skeleton({ variant, className, ...props }: SkeletonProps): import("react").JSX.Element;
+export declare function Skeleton({ variant, shape, className, ...props }: SkeletonProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/skeleton.js

@@ -5,16 +5,22 @@ const skeletonVariants = [
 	"pulse",
 	"none"
 ];
-function Skeleton({ variant = "shimmer", className, ...props }) {
+const skeletonShapes = [
+	"default",
+	"circle",
+	"panel"
+];
+function Skeleton({ variant = "shimmer", shape = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",
 		"data-control-ui": "skeleton",
 		"data-control-family": "skeleton",
 		"data-slot": "root",
 		"data-variant": variant,
+		"data-shape": shape,
 		className,
 		...props
 	});
 }
 //#endregion
-export { Skeleton, skeletonVariants };
+export { Skeleton, skeletonShapes, skeletonVariants };

package/package.json

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