@ctrl-ui/react 0.9.5 → 0.9.8

package/dist/blocks/theme-toggle.js

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "../ui/button.js";
+import { Text } from "../ui/typography.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Switch } from "../ui/switch.js";
 import { useId } from "react";
@@ -57,9 +58,12 @@ function ThemeSwitch({ value, onValueChange, onValue = "dark", offValue = "light
 		...props
 	});
 }
-function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOptions, showLabels = false, name, className, style, "aria-label": ariaLabel = "Theme", ...props }) {
+function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOptions, showLabels = false, disabled = false, name, className, style, "aria-label": ariaLabel = "Theme", ...props }) {
 	const generatedName = useId();
-	const choices = controlOptions(options);
+	const choices = controlOptions(options).map((option) => disabled ? {
+		...option,
+		disabled: true
+	} : option);
 	const currentValue = effectiveThemeValue(value, choices);
 	const indicatorStyle = {
 		"--_theme-switch-index": Math.max(0, choices.findIndex((option) => option.value === currentValue)),
@@ -68,6 +72,7 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 	return /* @__PURE__ */ jsxs("div", {
 		role: "radiogroup",
 		"aria-label": ariaLabel,
+		"aria-disabled": disabled || void 0,
 		"data-control-ui": "theme-toggle",
 		"data-control-family": "theme-toggle",
 		"data-slot": "root",
@@ -91,7 +96,7 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 				"data-control": "true",
 				"data-selected": selected ? "true" : void 0,
 				"data-disabled": option.disabled ? "true" : void 0,
-				className: classes("relative z-[1] inline-flex h-(--control-h-xs) cursor-pointer items-center justify-center gap-1.5 rounded-(--_theme-switch-radius) px-1.5 text-label font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard) not-data-[disabled=true]:hover:text-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-(--disabled-opacity) data-[selected=true]:text-foreground", showLabels ? "min-w-20" : "w-(--control-h-xs)"),
+				className: classes("relative z-[1] inline-flex h-(--control-h-xs) cursor-pointer items-center justify-center gap-1.5 rounded-(--_theme-switch-radius) px-1.5 transition-colors duration-(--duration-fast) ease-(--ease-standard) not-data-[disabled=true]:hover:text-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-(--disabled-opacity) data-[selected=true]:text-foreground", showLabels ? "min-w-20" : "w-(--control-h-xs)"),
 				children: [
 					/* @__PURE__ */ jsx("input", {
 						type: "radio",
@@ -109,7 +114,11 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 						className: "size-3.5",
 						"aria-hidden": true
 					}),
-					showLabels ? /* @__PURE__ */ jsx("span", { children: option.label }) : null
+					showLabels ? /* @__PURE__ */ jsx(Text, {
+						size: "label",
+						weight: "medium",
+						children: option.label
+					}) : null
 				]
 			}, option.value);
 		})]

package/dist/chat-message.js

@@ -224,6 +224,7 @@ function ChatMessageEditable({ value, onSave, onSaveError, editorLabel = "Edit m
 		children: [
 			/* @__PURE__ */ jsxs(ChatMessageContent, {
 				"data-editable": "",
+				"data-focus-ring": "within",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						"data-control-ui": "chat-message",
@@ -268,47 +269,40 @@ function ChatMessageEditable({ value, onSave, onSaveError, editorLabel = "Edit m
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx("div", {
 				"data-control-ui": "chat-message",
 				"data-control-family": "chat-message",
-				"data-slot": "edit-toolbars",
-				children: [/* @__PURE__ */ jsx("div", {
-					"data-control-ui": "chat-message",
-					"data-control-family": "chat-message",
-					"data-slot": "edit-toolbar",
-					"data-active": !editing ? "" : void 0,
-					inert: editing,
-					"aria-hidden": editing,
-					children: /* @__PURE__ */ jsx(ActionBar, {
-						align: message.isEndAligned ? "end" : "start",
-						copyValue: value,
-						onEdit: startEditing,
-						children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionBarCopy, {}), /* @__PURE__ */ jsx(ActionBarEdit, {})] })
-					})
-				}), /* @__PURE__ */ jsx("div", {
-					"data-control-ui": "chat-message",
-					"data-control-family": "chat-message",
-					"data-slot": "edit-toolbar",
-					"data-active": editing ? "" : void 0,
-					inert: !editing,
-					"aria-hidden": !editing,
-					children: /* @__PURE__ */ jsxs(ActionBar, {
-						align: message.isEndAligned ? "end" : "start",
-						label: "Edit actions",
-						"aria-busy": saving,
-						children: [/* @__PURE__ */ jsx(ActionBarItem, {
-							type: "button",
-							disabled: saving || !draft.trim(),
-							onClick: () => void save(),
-							children: saveLabel
-						}), /* @__PURE__ */ jsx(ActionBarItem, {
-							type: "button",
-							disabled: saving,
-							onClick: cancelEditing,
-							children: cancelLabel
-						})]
-					})
-				})]
+				"data-slot": "read-actions",
+				children: /* @__PURE__ */ jsx(ActionBar, {
+					align: message.isEndAligned ? "end" : "start",
+					copyValue: value,
+					onEdit: startEditing,
+					children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionBarCopy, {}), /* @__PURE__ */ jsx(ActionBarEdit, {})] })
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-control-ui": "chat-message",
+				"data-control-family": "chat-message",
+				"data-slot": "edit-actions",
+				children: /* @__PURE__ */ jsxs(ActionBar, {
+					align: message.isEndAligned ? "end" : "start",
+					label: "Edit actions",
+					"aria-busy": saving,
+					style: { "--cui-action-bar-hidden-opacity": "1" },
+					children: [/* @__PURE__ */ jsx(ActionBarItem, {
+						type: "button",
+						variant: "surface",
+						disabled: saving,
+						onClick: cancelEditing,
+						children: cancelLabel
+					}), /* @__PURE__ */ jsx(ActionBarItem, {
+						type: "button",
+						variant: "solid",
+						disabled: saving || !draft.trim(),
+						onClick: () => void save(),
+						children: saveLabel
+					})]
+				})
 			}),
 			/* @__PURE__ */ jsx(LiveStatus, { message: saving ? savingLabel : "" }),
 			/* @__PURE__ */ jsx("span", {

package/dist/hooks/use-mobile.d.ts

@@ -1,5 +1,5 @@
 //#region src/hooks/use-mobile.d.ts
 type Breakpoint = number | `--${string}`;
-/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-lg`, so JS and the matching Tailwind variant share one value. */
+/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-sidebar`, so JS and the matching Tailwind variant share one value. */
 export declare function useIsMobile(breakpoint?: Breakpoint): boolean;
 //#endregion

package/dist/hooks/use-mobile.js

@@ -24,7 +24,7 @@ function viewportStore(breakpoint) {
 function getServerViewportSnapshot() {
 	return false;
 }
-/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-lg`, so JS and the matching Tailwind variant share one value. */
+/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-sidebar`, so JS and the matching Tailwind variant share one value. */
 function useIsMobile(breakpoint = MOBILE_BREAKPOINT) {
 	const store = viewportStore(breakpoint);
 	return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerViewportSnapshot);

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-font-size"];
+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 type BadgeKnobStyle = Partial<Record<(typeof badgeKnobs)[number], string>>;
 //#endregion

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

@@ -4,7 +4,9 @@ const badgeKnobs = [
 	"--cui-badge-background",
 	"--cui-badge-foreground",
 	"--cui-badge-border-color",
-	"--cui-badge-font-size"
+	"--cui-badge-border-width",
+	"--cui-badge-font-size",
+	"--cui-badge-font-weight"
 ];
 //#endregion
 export { badgeKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/button-knobs.d.ts
-export declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-background", "--cui-button-background-image", "--cui-button-hover-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
+export declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-font-weight", "--cui-button-background", "--cui-button-background-image", "--cui-button-hover-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
 export type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
 //#endregion

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

@@ -7,6 +7,7 @@ const buttonKnobs = [
 	"--cui-button-padding-inline",
 	"--cui-button-icon-padding-inline",
 	"--cui-button-font-size",
+	"--cui-button-font-weight",
 	"--cui-button-background",
 	"--cui-button-background-image",
 	"--cui-button-hover-background-image",

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/calendar-knobs.d.ts
-export declare const calendarKnobs: readonly ["--cui-calendar-day-radius", "--cui-calendar-today-background", "--cui-calendar-selected-background", "--cui-calendar-selected-foreground", "--cui-calendar-range-background"];
+export declare const calendarKnobs: readonly ["--cui-calendar-day-radius", "--cui-calendar-today-background", "--cui-calendar-selected-background", "--cui-calendar-selected-foreground", "--cui-calendar-range-background", "--cui-calendar-day-size", "--cui-calendar-cell-padding", "--cui-calendar-today-shadow", "--cui-calendar-weekend-foreground", "--cui-calendar-weekend-background", "--cui-calendar-caption-font-size", "--cui-calendar-caption-font-weight", "--cui-calendar-weekday-font-size"];
 export type CalendarKnobStyle = Partial<Record<(typeof calendarKnobs)[number], string>>;
 //#endregion

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

@@ -4,7 +4,15 @@ const calendarKnobs = [
 	"--cui-calendar-today-background",
 	"--cui-calendar-selected-background",
 	"--cui-calendar-selected-foreground",
-	"--cui-calendar-range-background"
+	"--cui-calendar-range-background",
+	"--cui-calendar-day-size",
+	"--cui-calendar-cell-padding",
+	"--cui-calendar-today-shadow",
+	"--cui-calendar-weekend-foreground",
+	"--cui-calendar-weekend-background",
+	"--cui-calendar-caption-font-size",
+	"--cui-calendar-caption-font-weight",
+	"--cui-calendar-weekday-font-size"
 ];
 //#endregion
 export { calendarKnobs };

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"];
+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 type CardKnobStyle = Partial<Record<(typeof cardKnobs)[number], string>>;
 //#endregion

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

@@ -5,7 +5,11 @@ const cardKnobs = [
 	"--cui-card-border-color",
 	"--cui-card-border-width",
 	"--cui-card-shadow",
-	"--cui-card-backdrop-filter"
+	"--cui-card-backdrop-filter",
+	"--cui-card-padding-block",
+	"--cui-card-padding-inline",
+	"--cui-card-gap",
+	"--cui-card-title-font-size"
 ];
 //#endregion
 export { cardKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/choice-knobs.d.ts
-export declare const choiceKnobs: readonly ["--cui-choice-radius", "--cui-choice-border-color", "--cui-choice-border-width", "--cui-choice-background", "--cui-choice-checked-background", "--cui-choice-checked-border-color", "--cui-choice-shadow"];
+export declare const choiceKnobs: readonly ["--cui-choice-size", "--cui-choice-radius", "--cui-choice-border-color", "--cui-choice-border-width", "--cui-choice-background", "--cui-choice-checked-background", "--cui-choice-checked-border-color", "--cui-choice-shadow"];
 export type ChoiceKnobStyle = Partial<Record<(typeof choiceKnobs)[number], string>>;
 //#endregion

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

@@ -1,5 +1,6 @@
 //#region src/knob-contracts/choice-knobs.ts
 const choiceKnobs = [
+	"--cui-choice-size",
 	"--cui-choice-radius",
 	"--cui-choice-border-color",
 	"--cui-choice-border-width",

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"];
+export declare const collapsibleKnobs: readonly ["--cui-collapsible-trigger-radius", "--cui-collapsible-trigger-hover-background", "--cui-collapsible-trigger-padding-inline"];
 export type CollapsibleKnobStyle = Partial<Record<(typeof collapsibleKnobs)[number], string>>;
 //#endregion

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

@@ -1,4 +1,8 @@
 //#region src/knob-contracts/collapsible-knobs.ts
-const collapsibleKnobs = ["--cui-collapsible-trigger-radius", "--cui-collapsible-trigger-hover-background"];
+const collapsibleKnobs = [
+	"--cui-collapsible-trigger-radius",
+	"--cui-collapsible-trigger-hover-background",
+	"--cui-collapsible-trigger-padding-inline"
+];
 //#endregion
 export { collapsibleKnobs };

package/dist/knob-contracts/emoji-picker-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/emoji-picker-knobs.d.ts
-export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-height", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-glyph-size", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground"];
+export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-height", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-glyph-size", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground", "--cui-emoji-picker-header-font-size", "--cui-emoji-picker-search-font-size"];
 export type EmojiPickerKnobStyle = Partial<Record<(typeof emojiPickerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/emoji-picker-knobs.js

@@ -6,7 +6,9 @@ const emojiPickerKnobs = [
 	"--cui-emoji-picker-glyph-size",
 	"--cui-emoji-picker-active-background",
 	"--cui-emoji-picker-header-background",
-	"--cui-emoji-picker-header-foreground"
+	"--cui-emoji-picker-header-foreground",
+	"--cui-emoji-picker-header-font-size",
+	"--cui-emoji-picker-search-font-size"
 ];
 //#endregion
 export { emojiPickerKnobs };

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

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

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

@@ -1,5 +1,7 @@
 //#region src/knob-contracts/field-knobs.ts
 const fieldKnobs = [
+	"--cui-field-legend-font-size",
+	"--cui-field-legend-font-weight",
 	"--cui-field-radius",
 	"--cui-field-background",
 	"--cui-field-hover-background",
@@ -14,7 +16,21 @@ const fieldKnobs = [
 	"--cui-field-backdrop-filter",
 	"--cui-field-height",
 	"--cui-field-padding-inline",
-	"--cui-field-font-size"
+	"--cui-field-font-size",
+	"--cui-field-font-weight",
+	"--cui-field-font-family",
+	"--cui-field-group-radius",
+	"--cui-field-group-background",
+	"--cui-field-group-border-color",
+	"--cui-field-group-border-width",
+	"--cui-field-group-shadow",
+	"--cui-field-group-padding-block",
+	"--cui-field-group-padding-inline",
+	"--cui-field-group-separator-color",
+	"--cui-field-group-separator-inset",
+	"--cui-field-label-font-size",
+	"--cui-field-label-font-weight",
+	"--cui-field-description-font-size"
 ];
 //#endregion
 export { fieldKnobs };

package/dist/knob-contracts/infinite-canvas-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/infinite-canvas-knobs.d.ts
-export declare const infiniteCanvasKnobs: readonly ["--cui-infinite-canvas-radius", "--cui-infinite-canvas-background", "--cui-infinite-canvas-grid-dot-color", "--cui-infinite-canvas-border-color", "--cui-infinite-canvas-padding", "--cui-infinite-canvas-controls-item-radius", "--cui-infinite-canvas-controls-padding", "--cui-infinite-canvas-controls-radius", "--cui-infinite-canvas-controls-background", "--cui-infinite-canvas-controls-border-color", "--cui-infinite-canvas-controls-shadow"];
+export declare const infiniteCanvasKnobs: readonly ["--cui-infinite-canvas-radius", "--cui-infinite-canvas-background", "--cui-infinite-canvas-grid-dot-color", "--cui-infinite-canvas-border-color", "--cui-infinite-canvas-padding"];
 export type InfiniteCanvasKnobStyle = Partial<Record<(typeof infiniteCanvasKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/infinite-canvas-knobs.js

@@ -4,13 +4,7 @@ const infiniteCanvasKnobs = [
 	"--cui-infinite-canvas-background",
 	"--cui-infinite-canvas-grid-dot-color",
 	"--cui-infinite-canvas-border-color",
-	"--cui-infinite-canvas-padding",
-	"--cui-infinite-canvas-controls-item-radius",
-	"--cui-infinite-canvas-controls-padding",
-	"--cui-infinite-canvas-controls-radius",
-	"--cui-infinite-canvas-controls-background",
-	"--cui-infinite-canvas-controls-border-color",
-	"--cui-infinite-canvas-controls-shadow"
+	"--cui-infinite-canvas-padding"
 ];
 //#endregion
 export { infiniteCanvasKnobs };

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"];
+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 type ItemKnobStyle = Partial<Record<(typeof itemKnobs)[number], string>>;
 //#endregion

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

@@ -7,7 +7,11 @@ const itemKnobs = [
 	"--cui-item-active-scale",
 	"--cui-item-gap",
 	"--cui-item-padding-block",
-	"--cui-item-padding-inline"
+	"--cui-item-padding-inline",
+	"--cui-item-description-font-size",
+	"--cui-item-description-line-height",
+	"--cui-item-description-foreground",
+	"--cui-item-media-foreground"
 ];
 //#endregion
 export { itemKnobs };

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

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

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

@@ -4,7 +4,10 @@ const kbdKnobs = [
 	"--cui-kbd-background",
 	"--cui-kbd-foreground",
 	"--cui-kbd-border-color",
-	"--cui-kbd-shadow"
+	"--cui-kbd-shadow",
+	"--cui-kbd-padding-inline",
+	"--cui-kbd-font-size",
+	"--cui-kbd-font-weight"
 ];
 //#endregion
 export { kbdKnobs };

package/dist/knob-contracts/page-layout-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/page-layout-knobs.d.ts
-export declare const pageLayoutKnobs: readonly ["--cui-page-layout-article-size", "--cui-page-layout-aside-size", "--cui-page-layout-padding-inline", "--cui-page-layout-padding-block", "--cui-page-layout-column-gap", "--cui-page-layout-header-start-gap", "--cui-page-layout-header-gap", "--cui-page-layout-header-column-gap", "--cui-page-layout-header-row-gap", "--cui-page-layout-size", "--cui-page-layout-sticky-gap", "--cui-page-layout-background", "--cui-page-layout-sticky-header-background", "--cui-page-layout-sticky-header-backdrop-filter"];
+export declare const pageLayoutKnobs: readonly ["--cui-page-layout-article-size", "--cui-page-layout-aside-size", "--cui-page-layout-padding-inline", "--cui-page-layout-padding-block", "--cui-page-layout-column-gap", "--cui-page-layout-header-start-gap", "--cui-page-layout-header-gap", "--cui-page-layout-header-column-gap", "--cui-page-layout-header-row-gap", "--cui-page-layout-size", "--cui-page-layout-sticky-gap", "--cui-page-layout-floating-inset", "--cui-page-layout-background", "--cui-page-layout-sticky-header-background", "--cui-page-layout-sticky-header-backdrop-filter"];
 export type PageLayoutKnobStyle = Partial<Record<(typeof pageLayoutKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/page-layout-knobs.js

@@ -11,6 +11,7 @@ const pageLayoutKnobs = [
 	"--cui-page-layout-header-row-gap",
 	"--cui-page-layout-size",
 	"--cui-page-layout-sticky-gap",
+	"--cui-page-layout-floating-inset",
 	"--cui-page-layout-background",
 	"--cui-page-layout-sticky-header-background",
 	"--cui-page-layout-sticky-header-backdrop-filter"

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/pagination-knobs.d.ts
-export declare const paginationKnobs: readonly ["--cui-pagination-link-radius", "--cui-pagination-link-background", "--cui-pagination-link-hover-background", "--cui-pagination-link-foreground", "--cui-pagination-link-shadow"];
+export declare const paginationKnobs: readonly ["--cui-pagination-link-radius", "--cui-pagination-link-background", "--cui-pagination-link-hover-background", "--cui-pagination-link-foreground", "--cui-pagination-link-shadow", "--cui-pagination-link-font-size"];
 export type PaginationKnobStyle = Partial<Record<(typeof paginationKnobs)[number], string>>;
 //#endregion

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

@@ -4,7 +4,8 @@ const paginationKnobs = [
 	"--cui-pagination-link-background",
 	"--cui-pagination-link-hover-background",
 	"--cui-pagination-link-foreground",
-	"--cui-pagination-link-shadow"
+	"--cui-pagination-link-shadow",
+	"--cui-pagination-link-font-size"
 ];
 //#endregion
 export { paginationKnobs };

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

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

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

@@ -17,6 +17,15 @@ const popupKnobs = [
 	"--cui-popup-separator-inset",
 	"--cui-popup-shortcut-font-size",
 	"--cui-popup-shortcut-letter-spacing",
+	"--cui-popup-separator-gap",
+	"--cui-popup-submenu-indicator-foreground",
+	"--cui-popup-command-heading-padding-block",
+	"--cui-popup-command-heading-padding-inline",
+	"--cui-popup-command-heading-font-size",
+	"--cui-popup-command-heading-letter-spacing",
+	"--cui-popup-command-heading-text-transform",
+	"--cui-popup-dialog-max-inline-size",
+	"--cui-popup-tooltip-arrow-radius",
 	"--cui-popup-status-success-foreground",
 	"--cui-popup-status-warning-foreground",
 	"--cui-popup-status-info-foreground",

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/range-knobs.d.ts
-export declare const rangeKnobs: readonly ["--cui-range-level-warning-background", "--cui-range-level-clip-background", "--cui-range-level-muted-background", "--cui-range-level-size", "--cui-range-level-scale-foreground", "--cui-range-indeterminate-size", "--cui-range-track-radius", "--cui-range-track-background", "--cui-range-indicator-radius", "--cui-range-indicator-background", "--cui-range-thumb-radius", "--cui-range-thumb-background", "--cui-range-thumb-border-color", "--cui-range-thumb-shadow"];
+export declare const rangeKnobs: readonly ["--cui-range-level-warning-background", "--cui-range-level-clip-background", "--cui-range-level-muted-background", "--cui-range-level-size", "--cui-range-level-scale-foreground", "--cui-range-indeterminate-size", "--cui-range-track-radius", "--cui-range-track-background", "--cui-range-indicator-radius", "--cui-range-indicator-background", "--cui-range-thumb-radius", "--cui-range-thumb-inline-size", "--cui-range-thumb-block-size", "--cui-range-thumb-background", "--cui-range-thumb-border-color", "--cui-range-thumb-shadow"];
 export type RangeKnobStyle = Partial<Record<(typeof rangeKnobs)[number], string>>;
 //#endregion

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

@@ -11,6 +11,8 @@ const rangeKnobs = [
 	"--cui-range-indicator-radius",
 	"--cui-range-indicator-background",
 	"--cui-range-thumb-radius",
+	"--cui-range-thumb-inline-size",
+	"--cui-range-thumb-block-size",
 	"--cui-range-thumb-background",
 	"--cui-range-thumb-border-color",
 	"--cui-range-thumb-shadow"

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/sidebar-knobs.d.ts
-export declare const sidebarKnobs: readonly ["--cui-sidebar-nav-height", "--cui-sidebar-nav-background", "--cui-sidebar-nav-foreground", "--cui-sidebar-nav-border-color", "--cui-sidebar-nav-border-width", "--cui-sidebar-nav-shadow", "--cui-sidebar-nav-item-radius", "--cui-sidebar-nav-item-active-background", "--cui-sidebar-nav-item-active-foreground", "--cui-sidebar-nav-gap", "--cui-sidebar-menu-badge-height", "--cui-sidebar-menu-badge-background", "--cui-sidebar-menu-badge-foreground", "--cui-sidebar-rail-divider-background", "--cui-sidebar-wrapper-background", "--cui-sidebar-wrapper-background-image", "--cui-sidebar-inner-background", "--cui-sidebar-inner-border-color", "--cui-sidebar-inner-background-image", "--cui-sidebar-inner-backdrop-filter", "--cui-sidebar-inner-border-width", "--cui-sidebar-inner-radius", "--cui-sidebar-inner-shadow", "--cui-sidebar-header-background", "--cui-sidebar-header-shadow", "--cui-sidebar-inset-background", "--cui-sidebar-inset-background-image", "--cui-sidebar-inset-shadow", "--cui-sidebar-inset-border-color", "--cui-sidebar-inset-border-width", "--cui-sidebar-inset-radius", "--cui-sidebar-inset-inset", "--cui-sidebar-menu-button-radius", "--cui-sidebar-group-label-foreground", "--cui-sidebar-menu-button-foreground", "--cui-sidebar-menu-button-hover-background", "--cui-sidebar-menu-button-hover-foreground", "--cui-sidebar-menu-button-hover-shadow", "--cui-sidebar-menu-button-active-background", "--cui-sidebar-menu-button-active-foreground", "--cui-sidebar-menu-button-active-shadow", "--cui-sidebar-menu-button-track-active-foreground", "--cui-sidebar-menu-button-height", "--cui-sidebar-menu-button-padding-block", "--cui-sidebar-menu-button-padding-inline", "--cui-sidebar-menu-button-font-size", "--cui-sidebar-menu-button-font-weight", "--cui-sidebar-menu-button-active-font-weight", "--cui-sidebar-group-label-font-size", "--cui-sidebar-group-label-font-weight", "--cui-sidebar-group-label-letter-spacing", "--cui-sidebar-group-label-text-transform", "--cui-sidebar-group-label-padding", "--cui-sidebar-skip-link-background", "--cui-sidebar-skip-link-foreground", "--cui-sidebar-skip-link-radius", "--cui-sidebar-skip-link-shadow", "--cui-sidebar-menu-button-background", "--cui-sidebar-menu-button-shadow"];
+export declare const sidebarKnobs: readonly ["--cui-sidebar-nav-height", "--cui-sidebar-nav-background", "--cui-sidebar-nav-foreground", "--cui-sidebar-nav-border-color", "--cui-sidebar-nav-border-width", "--cui-sidebar-nav-shadow", "--cui-sidebar-nav-item-radius", "--cui-sidebar-nav-item-active-background", "--cui-sidebar-nav-item-active-foreground", "--cui-sidebar-nav-gap", "--cui-sidebar-menu-badge-height", "--cui-sidebar-menu-badge-background", "--cui-sidebar-menu-badge-foreground", "--cui-sidebar-header-border-width", "--cui-sidebar-header-border-color", "--cui-sidebar-rail-divider-background", "--cui-sidebar-wrapper-background", "--cui-sidebar-wrapper-background-image", "--cui-sidebar-inner-background", "--cui-sidebar-inner-border-color", "--cui-sidebar-inner-background-image", "--cui-sidebar-inner-backdrop-filter", "--cui-sidebar-inner-border-width", "--cui-sidebar-inner-radius", "--cui-sidebar-inner-shadow", "--cui-sidebar-header-background", "--cui-sidebar-header-shadow", "--cui-sidebar-inset-background", "--cui-sidebar-inset-background-image", "--cui-sidebar-inset-shadow", "--cui-sidebar-inset-border-color", "--cui-sidebar-inset-border-width", "--cui-sidebar-inset-radius", "--cui-sidebar-inset-inset", "--cui-sidebar-menu-button-radius", "--cui-sidebar-group-label-foreground", "--cui-sidebar-menu-button-foreground", "--cui-sidebar-menu-button-hover-background", "--cui-sidebar-menu-button-hover-foreground", "--cui-sidebar-menu-button-hover-shadow", "--cui-sidebar-menu-button-active-background", "--cui-sidebar-menu-button-active-foreground", "--cui-sidebar-menu-button-active-shadow", "--cui-sidebar-menu-button-track-active-foreground", "--cui-sidebar-menu-button-height", "--cui-sidebar-menu-button-padding-block", "--cui-sidebar-menu-button-padding-inline", "--cui-sidebar-menu-button-font-size", "--cui-sidebar-menu-button-font-weight", "--cui-sidebar-menu-button-active-font-weight", "--cui-sidebar-group-label-font-size", "--cui-sidebar-group-label-font-weight", "--cui-sidebar-group-label-letter-spacing", "--cui-sidebar-group-label-text-transform", "--cui-sidebar-group-label-padding", "--cui-sidebar-skip-link-background", "--cui-sidebar-skip-link-foreground", "--cui-sidebar-skip-link-radius", "--cui-sidebar-skip-link-shadow", "--cui-sidebar-menu-button-background", "--cui-sidebar-menu-button-shadow"];
 export type SidebarKnobStyle = Partial<Record<(typeof sidebarKnobs)[number], string>>;
 //#endregion

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

@@ -13,6 +13,8 @@ const sidebarKnobs = [
 	"--cui-sidebar-menu-badge-height",
 	"--cui-sidebar-menu-badge-background",
 	"--cui-sidebar-menu-badge-foreground",
+	"--cui-sidebar-header-border-width",
+	"--cui-sidebar-header-border-color",
 	"--cui-sidebar-rail-divider-background",
 	"--cui-sidebar-wrapper-background",
 	"--cui-sidebar-wrapper-background-image",

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/swap-knobs.d.ts
+export declare const swapKnobs: readonly ["--cui-swap-animation-duration", "--cui-swap-easing", "--cui-swap-label-inset", "--cui-swap-icon-scale"];
+export type SwapKnobStyle = Partial<Record<(typeof swapKnobs)[number], string>>;
+//#endregion

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

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/swap-knobs.ts
+const swapKnobs = [
+	"--cui-swap-animation-duration",
+	"--cui-swap-easing",
+	"--cui-swap-label-inset",
+	"--cui-swap-icon-scale"
+];
+//#endregion
+export { swapKnobs };

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-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--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-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

@@ -3,12 +3,15 @@ const tabsKnobs = [
 	"--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",

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/timeline-knobs.d.ts
-export declare const timelineKnobs: readonly ["--cui-timeline-indicator-background", "--cui-timeline-indicator-foreground", "--cui-timeline-running-foreground", "--cui-timeline-success-foreground", "--cui-timeline-error-foreground", "--cui-timeline-separator-background", "--cui-timeline-title-foreground"];
+export declare const timelineKnobs: readonly ["--cui-timeline-indicator-background", "--cui-timeline-indicator-foreground", "--cui-timeline-running-foreground", "--cui-timeline-waiting-foreground", "--cui-timeline-success-foreground", "--cui-timeline-error-foreground", "--cui-timeline-separator-background", "--cui-timeline-title-foreground", "--cui-timeline-title-font-weight", "--cui-timeline-item-padding-block", "--cui-timeline-separator-inline-size"];
 export type TimelineKnobStyle = Partial<Record<(typeof timelineKnobs)[number], string>>;
 //#endregion

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

@@ -3,10 +3,14 @@ const timelineKnobs = [
 	"--cui-timeline-indicator-background",
 	"--cui-timeline-indicator-foreground",
 	"--cui-timeline-running-foreground",
+	"--cui-timeline-waiting-foreground",
 	"--cui-timeline-success-foreground",
 	"--cui-timeline-error-foreground",
 	"--cui-timeline-separator-background",
-	"--cui-timeline-title-foreground"
+	"--cui-timeline-title-foreground",
+	"--cui-timeline-title-font-weight",
+	"--cui-timeline-item-padding-block",
+	"--cui-timeline-separator-inline-size"
 ];
 //#endregion
 export { timelineKnobs };

package/dist/knob-contracts/tool-approval-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/tool-approval-knobs.d.ts
+export declare const toolApprovalKnobs: readonly ["--cui-tool-approval-background", "--cui-tool-approval-foreground", "--cui-tool-approval-border-color", "--cui-tool-approval-border-width", "--cui-tool-approval-radius", "--cui-tool-approval-shadow", "--cui-tool-approval-padding", "--cui-tool-approval-body-background", "--cui-tool-approval-body-border-color", "--cui-tool-approval-body-border-width", "--cui-tool-approval-body-radius", "--cui-tool-approval-body-shadow", "--cui-tool-approval-body-padding", "--cui-tool-approval-body-gap", "--cui-tool-approval-footer-border-color", "--cui-tool-approval-footer-border-width", "--cui-tool-approval-footer-padding", "--cui-tool-approval-footer-gap", "--cui-tool-approval-preview-background", "--cui-tool-approval-preview-border-color", "--cui-tool-approval-preview-border-width", "--cui-tool-approval-preview-radius", "--cui-tool-approval-preview-padding", "--cui-tool-approval-preview-gap", "--cui-tool-approval-label-foreground", "--cui-tool-approval-description-foreground", "--cui-tool-approval-status-foreground"];
+export type ToolApprovalKnobStyle = Partial<Record<(typeof toolApprovalKnobs)[number], string>>;
+//#endregion