@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/inline-citation.js

@@ -1,12 +1,21 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { SourceFavicon, sourceHostname } from "./source-badge.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight, ExternalLink } from "lucide-react";
 //#region src/inline-citation.tsx
+const defaultViewSourcesLabel = (count) => count === 1 ? "view 1 source" : `view ${count} sources`;
+const defaultPositionLabel = (position, count) => `Source ${position} of ${count}`;
+function citationLabel(sources, emptyLabel = "No sources") {
+	const firstSource = sources[0];
+	if (!firstSource) return emptyLabel;
+	const additional = sources.length - 1;
+	return `${sourceHostname(firstSource.href)}${additional > 0 ? ` +${additional}` : ""}`;
+}
 const InlineCitationContext = createContext(null);
 function useInlineCitation() {
 	const context = useContext(InlineCitationContext);
@@ -16,10 +25,11 @@ function useInlineCitation() {
 function supportsCrossSlide() {
 	return typeof CSS !== "undefined" && CSS.supports("(anchor-name: --aui-slide-panel) and (anchor-scope: --aui-slide-panel)");
 }
-function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, children, ...props }) {
+function InlineCitation({ sources, open, defaultOpen, onOpenChange, positionLabel = defaultPositionLabel, className, children, ...props }) {
 	const [selectedIndex, setSelectedIndex] = useState(0);
 	const [entering, setEntering] = useState(null);
 	const [exiting, setExiting] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
 	const sourceRef = useRef(null);
 	const exitCount = useRef(0);
 	const clearEntering = useRef(0);
@@ -34,6 +44,7 @@ function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, c
 		const direction = step > 0 ? "right" : "left";
 		const leaving = sources[currentIndex];
 		setSelectedIndex(nextIndex);
+		setAnnouncement(positionLabel(nextIndex + 1, sources.length));
 		setEntering({
 			direction,
 			previousHeight: sourceRef.current?.getBoundingClientRect().height
@@ -56,10 +67,12 @@ function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, c
 		if (!nextOpen) {
 			setEntering(null);
 			setExiting(null);
+			setAnnouncement("");
 		}
 		onOpenChange?.(...args);
 	};
 	const context = {
+		announcement,
 		currentIndex,
 		currentSource,
 		entering,
@@ -89,11 +102,10 @@ function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, c
 		})
 	});
 }
-function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, disabled, render, ...props }) {
+function InlineCitationTrigger({ "aria-label": ariaLabel, emptyLabel, viewSourcesLabel = defaultViewSourcesLabel, className, children, disabled, render, ...props }) {
 	const { sources } = useInlineCitation();
 	const firstSource = sources[0];
-	const sourceCount = sources.length;
-	const accessibleLabel = sourceCount === 1 ? "View 1 source" : `View ${sourceCount} sources`;
+	const accessibleLabel = `${citationLabel(sources, emptyLabel)}, ${viewSourcesLabel(sources.length)}`;
 	return /* @__PURE__ */ jsx(PopoverTrigger, {
 		render: render ?? /* @__PURE__ */ jsx("button", { type: "button" }),
 		"aria-label": ariaLabel ?? accessibleLabel,
@@ -103,7 +115,7 @@ function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, d
 		"data-control-family": "inline-citation",
 		"data-slot": "trigger",
 		className: cn("inline-flex items-center align-baseline", className),
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(InlineCitationFavicons, {}), /* @__PURE__ */ jsx(InlineCitationLabel, {})] })
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(InlineCitationFavicons, {}), /* @__PURE__ */ jsx(InlineCitationLabel, { emptyLabel })] })
 	});
 }
 function InlineCitationFavicons({ limit = 3, className, ...props }) {
@@ -123,17 +135,17 @@ function InlineCitationFavicons({ limit = 3, className, ...props }) {
 		}, source.href))
 	});
 }
-function InlineCitationLabel({ className, children, ...props }) {
+function InlineCitationLabel({ emptyLabel, className, children, ...props }) {
 	const { sources } = useInlineCitation();
-	const firstSource = sources[0];
-	const additionalSourceCount = Math.max(0, sources.length - 1);
+	const label = citationLabel(sources, emptyLabel);
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "inline-citation",
 		"data-control-family": "inline-citation",
 		"data-slot": "label",
+		title: children === void 0 ? label : void 0,
 		...props,
 		className: cn("min-w-0 truncate", className),
-		children: children ?? (firstSource ? `${sourceHostname(firstSource.href)}${additionalSourceCount > 0 ? ` +${additionalSourceCount}` : ""}` : "No sources")
+		children: children ?? label
 	});
 }
 function InlineCitationContent({ className, children, align = "start", padding = "none", ...props }) {
@@ -201,18 +213,15 @@ function InlineCitationNext({ className, children, disabled, onClick, ...props }
 	});
 }
 function InlineCitationPosition({ className, children, ...props }) {
-	const { currentIndex, sources } = useInlineCitation();
-	return /* @__PURE__ */ jsx("span", {
-		role: "status",
-		"aria-live": "polite",
-		"aria-atomic": "true",
+	const { announcement, currentIndex, sources } = useInlineCitation();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		"data-control-ui": "inline-citation",
 		"data-control-family": "inline-citation",
 		"data-slot": "position",
 		...props,
 		className: cn(className),
 		children: children ?? `${sources.length === 0 ? 0 : currentIndex + 1}/${sources.length}`
-	});
+	}), /* @__PURE__ */ jsx(LiveStatus, { message: announcement })] });
 }
 function InlineCitationSourceDetails({ source }) {
 	const hostname = sourceHostname(source.href);
@@ -316,4 +325,4 @@ function InlineCitationSource({ source: sourceProp, className, children, style,
 	}, `exit-${exiting.id}`) : null] });
 }
 //#endregion
-export { InlineCitation, InlineCitationContent, InlineCitationFavicons, InlineCitationLabel, InlineCitationNavigation, InlineCitationNext, InlineCitationPosition, InlineCitationPrevious, InlineCitationSource, InlineCitationTrigger };
+export { InlineCitation, InlineCitationContent, InlineCitationFavicons, InlineCitationLabel, InlineCitationNavigation, InlineCitationNext, InlineCitationPosition, InlineCitationPrevious, InlineCitationSource, InlineCitationTrigger, citationLabel };

package/dist/knob-contracts/audio-recorder-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/audio-recorder-knobs.d.ts
-export declare const audioRecorderKnobs: readonly ["--cui-audio-recorder-foreground", "--cui-audio-recorder-active-foreground", "--cui-audio-recorder-recording-ring-color", "--cui-audio-recorder-error-foreground"];
+export declare const audioRecorderKnobs: readonly ["--cui-audio-recorder-foreground", "--cui-audio-recorder-active-foreground", "--cui-audio-recorder-recording-ring-color", "--cui-audio-recorder-error-foreground", "--cui-audio-recorder-meta-foreground"];
 export type AudioRecorderKnobStyle = Partial<Record<(typeof audioRecorderKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/audio-recorder-knobs.js

@@ -3,7 +3,8 @@ const audioRecorderKnobs = [
 	"--cui-audio-recorder-foreground",
 	"--cui-audio-recorder-active-foreground",
 	"--cui-audio-recorder-recording-ring-color",
-	"--cui-audio-recorder-error-foreground"
+	"--cui-audio-recorder-error-foreground",
+	"--cui-audio-recorder-meta-foreground"
 ];
 //#endregion
 export { audioRecorderKnobs };

package/dist/knob-contracts/audio-visualizer-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/audio-visualizer-knobs.d.ts
-export declare const audioVisualizerKnobs: readonly ["--cui-audio-visualizer-radius", "--cui-audio-visualizer-bar-radius", "--cui-audio-visualizer-bar-background", "--cui-audio-visualizer-line-fill", "--cui-audio-visualizer-line-stroke"];
+export declare const audioVisualizerKnobs: readonly ["--cui-audio-visualizer-radius", "--cui-audio-visualizer-bar-radius", "--cui-audio-visualizer-bar-background", "--cui-audio-visualizer-line-fill", "--cui-audio-visualizer-line-stroke", "--cui-audio-visualizer-baseline-stroke"];
 export type AudioVisualizerKnobStyle = Partial<Record<(typeof audioVisualizerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/audio-visualizer-knobs.js

@@ -4,7 +4,8 @@ const audioVisualizerKnobs = [
 	"--cui-audio-visualizer-bar-radius",
 	"--cui-audio-visualizer-bar-background",
 	"--cui-audio-visualizer-line-fill",
-	"--cui-audio-visualizer-line-stroke"
+	"--cui-audio-visualizer-line-stroke",
+	"--cui-audio-visualizer-baseline-stroke"
 ];
 //#endregion
 export { audioVisualizerKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/avatar-knobs.d.ts
-export declare const avatarKnobs: readonly ["--cui-avatar-radius", "--cui-avatar-group-ring-color", "--cui-avatar-fallback-background", "--cui-avatar-fallback-foreground", "--cui-avatar-image-outline-color"];
+export declare const avatarKnobs: readonly ["--cui-avatar-radius", "--cui-avatar-group-ring-color", "--cui-avatar-fallback-background", "--cui-avatar-fallback-foreground", "--cui-avatar-image-outline-color", "--cui-avatar-badge-size", "--cui-avatar-badge-ring-size", "--cui-avatar-badge-ring-color", "--cui-avatar-badge-background", "--cui-avatar-badge-foreground"];
 export type AvatarKnobStyle = Partial<Record<(typeof avatarKnobs)[number], string>>;
 //#endregion

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

@@ -4,7 +4,12 @@ const avatarKnobs = [
 	"--cui-avatar-group-ring-color",
 	"--cui-avatar-fallback-background",
 	"--cui-avatar-fallback-foreground",
-	"--cui-avatar-image-outline-color"
+	"--cui-avatar-image-outline-color",
+	"--cui-avatar-badge-size",
+	"--cui-avatar-badge-ring-size",
+	"--cui-avatar-badge-ring-color",
+	"--cui-avatar-badge-background",
+	"--cui-avatar-badge-foreground"
 ];
 //#endregion
 export { avatarKnobs };

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"];
+export declare const badgeKnobs: readonly ["--cui-badge-radius", "--cui-badge-background", "--cui-badge-foreground", "--cui-badge-border-color", "--cui-badge-font-size"];
 export type BadgeKnobStyle = Partial<Record<(typeof badgeKnobs)[number], string>>;
 //#endregion

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

@@ -3,7 +3,8 @@ const badgeKnobs = [
 	"--cui-badge-radius",
 	"--cui-badge-background",
 	"--cui-badge-foreground",
-	"--cui-badge-border-color"
+	"--cui-badge-border-color",
+	"--cui-badge-font-size"
 ];
 //#endregion
 export { badgeKnobs };

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/breadcrumb-knobs.d.ts
+export declare const breadcrumbKnobs: readonly ["--cui-breadcrumb-list-foreground", "--cui-breadcrumb-page-foreground", "--cui-breadcrumb-link-hover-foreground"];
+export type BreadcrumbKnobStyle = Partial<Record<(typeof breadcrumbKnobs)[number], string>>;
+//#endregion

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

@@ -0,0 +1,8 @@
+//#region src/knob-contracts/breadcrumb-knobs.ts
+const breadcrumbKnobs = [
+	"--cui-breadcrumb-list-foreground",
+	"--cui-breadcrumb-page-foreground",
+	"--cui-breadcrumb-link-hover-foreground"
+];
+//#endregion
+export { breadcrumbKnobs };

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

@@ -9,6 +9,7 @@ const buttonKnobs = [
 	"--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",

package/dist/knob-contracts/chat-message-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/chat-message-knobs.d.ts
-export declare const chatMessageKnobs: readonly ["--cui-chat-message-avatar-radius", "--cui-chat-message-avatar-background", "--cui-chat-message-avatar-border-color", "--cui-chat-message-avatar-border-width", "--cui-chat-message-radius", "--cui-chat-message-corner-radius", "--cui-chat-message-background", "--cui-chat-message-background-image", "--cui-chat-message-foreground", "--cui-chat-message-border-color", "--cui-chat-message-border-width", "--cui-chat-message-shadow", "--cui-chat-message-pending-dot-color", "--cui-chat-message-pending-dot-size"];
+export declare const chatMessageKnobs: readonly ["--cui-chat-message-avatar-radius", "--cui-chat-message-avatar-background", "--cui-chat-message-avatar-border-color", "--cui-chat-message-avatar-border-width", "--cui-chat-message-radius", "--cui-chat-message-corner-radius", "--cui-chat-message-background", "--cui-chat-message-background-image", "--cui-chat-message-foreground", "--cui-chat-message-border-color", "--cui-chat-message-border-width", "--cui-chat-message-shadow", "--cui-chat-message-pending-dot-color", "--cui-chat-message-pending-dot-size", "--cui-chat-message-row-hover-background", "--cui-chat-message-reaction-radius", "--cui-chat-message-reaction-background", "--cui-chat-message-reaction-border-color", "--cui-chat-message-reaction-border-width", "--cui-chat-message-reaction-pressed-background", "--cui-chat-message-reaction-pressed-border-color"];
 export type ChatMessageKnobStyle = Partial<Record<(typeof chatMessageKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/chat-message-knobs.js

@@ -13,7 +13,14 @@ const chatMessageKnobs = [
 	"--cui-chat-message-border-width",
 	"--cui-chat-message-shadow",
 	"--cui-chat-message-pending-dot-color",
-	"--cui-chat-message-pending-dot-size"
+	"--cui-chat-message-pending-dot-size",
+	"--cui-chat-message-row-hover-background",
+	"--cui-chat-message-reaction-radius",
+	"--cui-chat-message-reaction-background",
+	"--cui-chat-message-reaction-border-color",
+	"--cui-chat-message-reaction-border-width",
+	"--cui-chat-message-reaction-pressed-background",
+	"--cui-chat-message-reaction-pressed-border-color"
 ];
 //#endregion
 export { chatMessageKnobs };

package/dist/knob-contracts/code-diff-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/code-diff-knobs.d.ts
-export declare const codeDiffKnobs: readonly ["--cui-code-diff-radius", "--cui-code-diff-shadow", "--cui-code-diff-background", "--cui-code-diff-border-color", "--cui-code-diff-border-width", "--cui-code-diff-foreground", "--cui-code-diff-add-background", "--cui-code-diff-del-background", "--cui-code-diff-expand-button-radius", "--cui-code-diff-expand-button-background", "--cui-code-diff-expand-button-foreground", "--cui-code-diff-expand-button-shadow", "--cui-code-diff-expand-button-hover-background", "--cui-code-diff-expand-button-hover-foreground"];
+export declare const codeDiffKnobs: readonly ["--cui-code-diff-radius", "--cui-code-diff-shadow", "--cui-code-diff-background", "--cui-code-diff-border-color", "--cui-code-diff-border-width", "--cui-code-diff-header-background", "--cui-code-diff-header-border-color", "--cui-code-diff-foreground", "--cui-code-diff-add-background", "--cui-code-diff-del-background", "--cui-code-diff-expand-button-radius", "--cui-code-diff-expand-button-background", "--cui-code-diff-expand-button-foreground", "--cui-code-diff-expand-button-shadow", "--cui-code-diff-expand-button-hover-background", "--cui-code-diff-expand-button-hover-foreground"];
 export type CodeDiffKnobStyle = Partial<Record<(typeof codeDiffKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/code-diff-knobs.js

@@ -5,6 +5,8 @@ const codeDiffKnobs = [
 	"--cui-code-diff-background",
 	"--cui-code-diff-border-color",
 	"--cui-code-diff-border-width",
+	"--cui-code-diff-header-background",
+	"--cui-code-diff-header-border-color",
 	"--cui-code-diff-foreground",
 	"--cui-code-diff-add-background",
 	"--cui-code-diff-del-background",

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/code-knobs.d.ts
-export declare const codeKnobs: readonly ["--cui-code-radius", "--cui-code-background", "--cui-code-border-color", "--cui-code-border-width", "--cui-code-shadow", "--cui-code-title-foreground", "--cui-code-text-foreground", "--cui-code-line-highlight-background"];
+export declare const codeKnobs: readonly ["--cui-code-radius", "--cui-code-background", "--cui-code-border-color", "--cui-code-border-width", "--cui-code-shadow", "--cui-code-title-foreground", "--cui-code-text-foreground", "--cui-code-line-highlight-background", "--cui-code-header-background"];
 export type CodeKnobStyle = Partial<Record<(typeof codeKnobs)[number], string>>;
 //#endregion

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

@@ -7,7 +7,8 @@ const codeKnobs = [
 	"--cui-code-shadow",
 	"--cui-code-title-foreground",
 	"--cui-code-text-foreground",
-	"--cui-code-line-highlight-background"
+	"--cui-code-line-highlight-background",
+	"--cui-code-header-background"
 ];
 //#endregion
 export { codeKnobs };

package/dist/knob-contracts/dynamic-notification-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/dynamic-notification-knobs.d.ts
-export declare const dynamicNotificationKnobs: readonly ["--cui-dynamic-notification-content-easing", "--cui-dynamic-notification-expanded-radius", "--cui-dynamic-notification-morph-easing", "--cui-dynamic-notification-glass-foreground", "--cui-dynamic-notification-glass-ring-color", "--cui-dynamic-notification-liquid-foreground", "--cui-dynamic-notification-surface-background", "--cui-dynamic-notification-surface-foreground", "--cui-dynamic-notification-surface-ring-color", "--cui-dynamic-notification-surface-shadow", "--cui-dynamic-notification-indicator-end", "--cui-dynamic-notification-indicator-middle", "--cui-dynamic-notification-indicator-start"];
+export declare const dynamicNotificationKnobs: readonly ["--cui-dynamic-notification-content-easing", "--cui-dynamic-notification-expanded-radius", "--cui-dynamic-notification-morph-easing", "--cui-dynamic-notification-glass-foreground", "--cui-dynamic-notification-glass-ring-color", "--cui-dynamic-notification-liquid-foreground", "--cui-dynamic-notification-liquid-text-shadow", "--cui-dynamic-notification-surface-background", "--cui-dynamic-notification-title-foreground", "--cui-dynamic-notification-surface-foreground", "--cui-dynamic-notification-surface-ring-color", "--cui-dynamic-notification-surface-shadow", "--cui-dynamic-notification-indicator-end", "--cui-dynamic-notification-indicator-middle", "--cui-dynamic-notification-indicator-start"];
 export type DynamicNotificationKnobStyle = Partial<Record<(typeof dynamicNotificationKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/dynamic-notification-knobs.js

@@ -6,7 +6,9 @@ const dynamicNotificationKnobs = [
 	"--cui-dynamic-notification-glass-foreground",
 	"--cui-dynamic-notification-glass-ring-color",
 	"--cui-dynamic-notification-liquid-foreground",
+	"--cui-dynamic-notification-liquid-text-shadow",
 	"--cui-dynamic-notification-surface-background",
+	"--cui-dynamic-notification-title-foreground",
 	"--cui-dynamic-notification-surface-foreground",
 	"--cui-dynamic-notification-surface-ring-color",
 	"--cui-dynamic-notification-surface-shadow",

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

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

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

@@ -0,0 +1,10 @@
+//#region src/knob-contracts/emoji-picker-knobs.ts
+const emojiPickerKnobs = [
+	"--cui-emoji-picker-cell-size",
+	"--cui-emoji-picker-cell-radius",
+	"--cui-emoji-picker-active-background",
+	"--cui-emoji-picker-header-background",
+	"--cui-emoji-picker-header-foreground"
+];
+//#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-foreground", "--cui-field-border-color", "--cui-field-border-width", "--cui-field-shadow", "--cui-field-backdrop-filter", "--cui-field-focus-border-color", "--cui-field-height", "--cui-field-padding-inline", "--cui-field-font-size"];
+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 type FieldKnobStyle = Partial<Record<(typeof fieldKnobs)[number], string>>;
 //#endregion

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

@@ -2,12 +2,16 @@
 const fieldKnobs = [
 	"--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-focus-border-color",
 	"--cui-field-height",
 	"--cui-field-padding-inline",
 	"--cui-field-font-size"

package/dist/knob-contracts/filter-bar-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/filter-bar-knobs.d.ts
-export declare const filterBarKnobs: readonly ["--cui-filter-bar-background", "--cui-filter-bar-foreground", "--cui-filter-bar-border-color", "--cui-filter-bar-border-width", "--cui-filter-bar-radius", "--cui-filter-bar-height", "--cui-filter-bar-gap", "--cui-filter-bar-padding-inline", "--cui-filter-bar-font-size", "--cui-filter-bar-hover-background", "--cui-filter-bar-focus-ring-color"];
+export declare const filterBarKnobs: readonly ["--cui-filter-bar-background", "--cui-filter-bar-foreground", "--cui-filter-bar-border-color", "--cui-filter-bar-border-width", "--cui-filter-bar-radius", "--cui-filter-bar-height", "--cui-filter-bar-gap", "--cui-filter-bar-padding-inline", "--cui-filter-bar-font-size", "--cui-filter-bar-hover-background"];
 export type FilterBarKnobStyle = Partial<Record<(typeof filterBarKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/filter-bar-knobs.js

@@ -9,8 +9,7 @@ const filterBarKnobs = [
 	"--cui-filter-bar-gap",
 	"--cui-filter-bar-padding-inline",
 	"--cui-filter-bar-font-size",
-	"--cui-filter-bar-hover-background",
-	"--cui-filter-bar-focus-ring-color"
+	"--cui-filter-bar-hover-background"
 ];
 //#endregion
 export { filterBarKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/markdown-knobs.d.ts
-export declare const markdownKnobs: readonly ["--cui-markdown-foreground", "--cui-markdown-blockquote-border-color", "--cui-markdown-blockquote-foreground", "--cui-markdown-inline-code-background", "--cui-markdown-inline-code-foreground", "--cui-markdown-inline-code-radius", "--cui-markdown-link-foreground", "--cui-markdown-image-outline-color", "--cui-markdown-table-cell-border-color", "--cui-markdown-table-header-background"];
+export declare const markdownKnobs: readonly ["--cui-markdown-foreground", "--cui-markdown-blockquote-border-color", "--cui-markdown-blockquote-foreground", "--cui-markdown-inline-code-background", "--cui-markdown-inline-code-foreground", "--cui-markdown-inline-code-radius", "--cui-markdown-link-foreground", "--cui-markdown-image-outline-color", "--cui-markdown-table-cell-border-color", "--cui-markdown-table-header-background", "--cui-markdown-font-size", "--cui-markdown-line-height"];
 export type MarkdownKnobStyle = Partial<Record<(typeof markdownKnobs)[number], string>>;
 //#endregion

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

@@ -9,7 +9,9 @@ const markdownKnobs = [
 	"--cui-markdown-link-foreground",
 	"--cui-markdown-image-outline-color",
 	"--cui-markdown-table-cell-border-color",
-	"--cui-markdown-table-header-background"
+	"--cui-markdown-table-header-background",
+	"--cui-markdown-font-size",
+	"--cui-markdown-line-height"
 ];
 //#endregion
 export { markdownKnobs };

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

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

@@ -12,7 +12,8 @@ const pageLayoutKnobs = [
 	"--cui-page-layout-size",
 	"--cui-page-layout-sticky-gap",
 	"--cui-page-layout-background",
-	"--cui-page-layout-sticky-header-background"
+	"--cui-page-layout-sticky-header-background",
+	"--cui-page-layout-sticky-header-backdrop-filter"
 ];
 //#endregion
 export { pageLayoutKnobs };

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

@@ -1,5 +1,26 @@
 //#region src/knob-contracts/popup-knobs.ts
 const popupKnobs = [
+	"--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",
@@ -10,6 +31,12 @@ const popupKnobs = [
 	"--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",

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

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

@@ -1,5 +1,6 @@
 //#region src/knob-contracts/range-knobs.ts
 const rangeKnobs = [
+	"--cui-range-indeterminate-size",
 	"--cui-range-track-radius",
 	"--cui-range-track-background",
 	"--cui-range-indicator-radius",

package/dist/knob-contracts/rich-tooltip-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/rich-tooltip-knobs.d.ts
-export declare const richTooltipKnobs: readonly ["--cui-rich-tooltip-content-background", "--cui-rich-tooltip-content-foreground", "--cui-rich-tooltip-content-radius", "--cui-rich-tooltip-content-shadow", "--cui-rich-tooltip-dot-background", "--cui-rich-tooltip-action-radius", "--cui-rich-tooltip-action-background", "--cui-rich-tooltip-action-foreground"];
+export declare const richTooltipKnobs: readonly ["--cui-rich-tooltip-content-background", "--cui-rich-tooltip-content-foreground", "--cui-rich-tooltip-content-radius", "--cui-rich-tooltip-content-shadow", "--cui-rich-tooltip-dot-background", "--cui-rich-tooltip-action-radius", "--cui-rich-tooltip-action-background", "--cui-rich-tooltip-action-foreground", "--cui-rich-tooltip-focus-ring-color"];
 export type RichTooltipKnobStyle = Partial<Record<(typeof richTooltipKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/rich-tooltip-knobs.js

@@ -7,7 +7,8 @@ const richTooltipKnobs = [
 	"--cui-rich-tooltip-dot-background",
 	"--cui-rich-tooltip-action-radius",
 	"--cui-rich-tooltip-action-background",
-	"--cui-rich-tooltip-action-foreground"
+	"--cui-rich-tooltip-action-foreground",
+	"--cui-rich-tooltip-focus-ring-color"
 ];
 //#endregion
 export { richTooltipKnobs };

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-rail-divider-background", "--cui-sidebar-wrapper-background", "--cui-sidebar-wrapper-background-image", "--cui-sidebar-menu-button-radius", "--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-inset-background", "--cui-sidebar-inset-background-image", "--cui-sidebar-inset-shadow", "--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"];
+export declare const sidebarKnobs: readonly ["--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"];
 export type SidebarKnobStyle = Partial<Record<(typeof sidebarKnobs)[number], string>>;
 //#endregion

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

@@ -1,9 +1,11 @@
 //#region src/knob-contracts/sidebar-knobs.ts
 const sidebarKnobs = [
+	"--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-menu-button-radius",
 	"--cui-sidebar-inner-background",
 	"--cui-sidebar-inner-border-color",
 	"--cui-sidebar-inner-background-image",
@@ -11,9 +13,16 @@ const sidebarKnobs = [
 	"--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",
@@ -21,7 +30,23 @@ const sidebarKnobs = [
 	"--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-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"
 ];
 //#endregion
 export { sidebarKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/spinner-knobs.d.ts
-export declare const spinnerKnobs: readonly ["--cui-spinner-foreground"];
+export declare const spinnerKnobs: readonly ["--cui-spinner-foreground", "--cui-spinner-animation-duration"];
 export type SpinnerKnobStyle = Partial<Record<(typeof spinnerKnobs)[number], string>>;
 //#endregion

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/spinner-knobs.ts
-const spinnerKnobs = ["--cui-spinner-foreground"];
+const spinnerKnobs = ["--cui-spinner-foreground", "--cui-spinner-animation-duration"];
 //#endregion
 export { spinnerKnobs };

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

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