@ctrl-ui/react 0.8.6 → 0.8.8

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

@@ -0,0 +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"];
+export type FilterBarKnobStyle = Partial<Record<(typeof filterBarKnobs)[number], string>>;
+//#endregion

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

@@ -0,0 +1,15 @@
+//#region src/knob-contracts/filter-bar-knobs.ts
+const filterBarKnobs = [
+	"--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"
+];
+//#endregion
+export { filterBarKnobs };

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

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

@@ -4,6 +4,9 @@ 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",

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"];
+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

@@ -10,7 +10,10 @@ const pageLayoutKnobs = [
 	"--cui-page-layout-header-column-gap",
 	"--cui-page-layout-header-row-gap",
 	"--cui-page-layout-size",
-	"--cui-page-layout-sticky-gap"
+	"--cui-page-layout-sticky-gap",
+	"--cui-page-layout-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-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",
@@ -8,7 +29,14 @@ const popupKnobs = [
 	"--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",

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

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

@@ -6,7 +6,10 @@ const stepperKnobs = [
 	"--cui-stepper-indicator-border-color",
 	"--cui-stepper-indicator-border-width",
 	"--cui-stepper-separator-background",
-	"--cui-stepper-title-foreground"
+	"--cui-stepper-title-foreground",
+	"--cui-stepper-indicator-size",
+	"--cui-stepper-indicator-current-border-width",
+	"--cui-stepper-title-current-font-weight"
 ];
 //#endregion
 export { stepperKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/switch-knobs.d.ts
-export declare const switchKnobs: readonly ["--cui-switch-thumb-shadow", "--cui-switch-background", "--cui-switch-hover-background", "--cui-switch-checked-background", "--cui-switch-checked-hover-background", "--cui-switch-thumb-radius", "--cui-switch-thumb-background", "--cui-switch-inline-size", "--cui-switch-height", "--cui-switch-padding", "--cui-switch-thumb-inline-size", "--cui-switch-thumb-press-scale", "--cui-switch-thumb-backdrop-filter"];
+export declare const switchKnobs: readonly ["--cui-switch-thumb-shadow", "--cui-switch-radius", "--cui-switch-shadow", "--cui-switch-background", "--cui-switch-border-color", "--cui-switch-border-width", "--cui-switch-checked-border-color", "--cui-switch-hover-background", "--cui-switch-checked-background", "--cui-switch-checked-hover-background", "--cui-switch-thumb-radius", "--cui-switch-thumb-background", "--cui-switch-inline-size", "--cui-switch-height", "--cui-switch-padding", "--cui-switch-thumb-inline-size", "--cui-switch-thumb-press-scale", "--cui-switch-thumb-backdrop-filter"];
 export type SwitchKnobStyle = Partial<Record<(typeof switchKnobs)[number], string>>;
 //#endregion

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

@@ -1,7 +1,12 @@
 //#region src/knob-contracts/switch-knobs.ts
 const switchKnobs = [
 	"--cui-switch-thumb-shadow",
+	"--cui-switch-radius",
+	"--cui-switch-shadow",
 	"--cui-switch-background",
+	"--cui-switch-border-color",
+	"--cui-switch-border-width",
+	"--cui-switch-checked-border-color",
 	"--cui-switch-hover-background",
 	"--cui-switch-checked-background",
 	"--cui-switch-checked-hover-background",

package/dist/knob-contracts/table-of-contents-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/table-of-contents-knobs.d.ts
-export declare const tableOfContentsKnobs: readonly ["--cui-table-of-contents-background", "--cui-table-of-contents-border-color", "--cui-table-of-contents-border-width", "--cui-table-of-contents-radius", "--cui-table-of-contents-shadow", "--cui-table-of-contents-backdrop-filter", "--cui-table-of-contents-padding", "--cui-table-of-contents-label-foreground", "--cui-table-of-contents-label-font-size", "--cui-table-of-contents-label-font-weight", "--cui-table-of-contents-label-gap", "--cui-table-of-contents-item-foreground", "--cui-table-of-contents-item-hover-foreground", "--cui-table-of-contents-item-active-foreground", "--cui-table-of-contents-item-font-size", "--cui-table-of-contents-item-line-height", "--cui-table-of-contents-item-font-weight", "--cui-table-of-contents-item-root-font-weight", "--cui-table-of-contents-item-padding-block", "--cui-table-of-contents-item-padding-inline", "--cui-table-of-contents-item-indent-size", "--cui-table-of-contents-rail-background", "--cui-table-of-contents-rail-size", "--cui-table-of-contents-trail-background", "--cui-table-of-contents-trail-size", "--cui-table-of-contents-trail-radius", "--cui-table-of-contents-highlight-radius", "--cui-table-of-contents-highlight-background"];
+export declare const tableOfContentsKnobs: readonly ["--cui-table-of-contents-background", "--cui-table-of-contents-border-color", "--cui-table-of-contents-border-width", "--cui-table-of-contents-radius", "--cui-table-of-contents-shadow", "--cui-table-of-contents-backdrop-filter", "--cui-table-of-contents-padding", "--cui-table-of-contents-label-foreground", "--cui-table-of-contents-label-font-size", "--cui-table-of-contents-label-font-weight", "--cui-table-of-contents-label-gap", "--cui-table-of-contents-item-foreground", "--cui-table-of-contents-item-hover-foreground", "--cui-table-of-contents-item-active-foreground", "--cui-table-of-contents-item-font-size", "--cui-table-of-contents-item-line-height", "--cui-table-of-contents-item-font-weight", "--cui-table-of-contents-item-root-font-weight", "--cui-table-of-contents-item-padding-block", "--cui-table-of-contents-item-padding-inline", "--cui-table-of-contents-item-indent-size", "--cui-table-of-contents-rail-stroke", "--cui-table-of-contents-rail-size", "--cui-table-of-contents-trail-stroke", "--cui-table-of-contents-trail-size", "--cui-table-of-contents-indicator-foreground", "--cui-table-of-contents-scroll-inset"];
 export type TableOfContentsKnobStyle = Partial<Record<(typeof tableOfContentsKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/table-of-contents-knobs.js

@@ -21,13 +21,12 @@ const tableOfContentsKnobs = [
 	"--cui-table-of-contents-item-padding-block",
 	"--cui-table-of-contents-item-padding-inline",
 	"--cui-table-of-contents-item-indent-size",
-	"--cui-table-of-contents-rail-background",
+	"--cui-table-of-contents-rail-stroke",
 	"--cui-table-of-contents-rail-size",
-	"--cui-table-of-contents-trail-background",
+	"--cui-table-of-contents-trail-stroke",
 	"--cui-table-of-contents-trail-size",
-	"--cui-table-of-contents-trail-radius",
-	"--cui-table-of-contents-highlight-radius",
-	"--cui-table-of-contents-highlight-background"
+	"--cui-table-of-contents-indicator-foreground",
+	"--cui-table-of-contents-scroll-inset"
 ];
 //#endregion
 export { tableOfContentsKnobs };

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-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-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width"];
+export declare const tabsKnobs: readonly ["--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"];
 export type TabsKnobStyle = Partial<Record<(typeof tabsKnobs)[number], string>>;
 //#endregion

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

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

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/tree-knobs.d.ts
-export declare const treeKnobs: readonly ["--cui-tree-item-trigger-radius", "--cui-tree-item-trigger-foreground", "--cui-tree-item-trigger-hover-background", "--cui-tree-item-trigger-hover-foreground", "--cui-tree-item-trigger-selected-background", "--cui-tree-item-trigger-selected-foreground", "--cui-tree-item-trigger-font-size", "--cui-tree-item-trigger-selected-font-weight"];
+export declare const treeKnobs: readonly ["--cui-tree-item-trigger-radius", "--cui-tree-item-trigger-foreground", "--cui-tree-item-trigger-hover-background", "--cui-tree-item-trigger-hover-foreground", "--cui-tree-item-trigger-selected-background", "--cui-tree-item-trigger-selected-foreground", "--cui-tree-item-trigger-font-size", "--cui-tree-item-trigger-selected-font-weight", "--cui-tree-indent-inset"];
 export type TreeKnobStyle = Partial<Record<(typeof treeKnobs)[number], string>>;
 //#endregion

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

@@ -7,7 +7,8 @@ const treeKnobs = [
 	"--cui-tree-item-trigger-selected-background",
 	"--cui-tree-item-trigger-selected-foreground",
 	"--cui-tree-item-trigger-font-size",
-	"--cui-tree-item-trigger-selected-font-weight"
+	"--cui-tree-item-trigger-selected-font-weight",
+	"--cui-tree-indent-inset"
 ];
 //#endregion
 export { treeKnobs };

package/dist/lib/cn.js

@@ -13,10 +13,6 @@ const twMerge = extendTailwindMerge({
 			"heading-2",
 			"heading-3",
 			"heading-4",
-			"meta",
-			"title-sm",
-			"title-md",
-			"title-lg",
 			"display"
 		] }],
 		shadow: [{ shadow: [

package/dist/lib/contrast.d.ts

@@ -25,5 +25,6 @@ export declare function contrastRatio(a: {
 export declare function wcagLevels(ratio: number): WcagLevels;
 export declare function nextFixLevel(levels: WcagLevels): WcagLevel | null;
 export declare function contrastOf(color: Hsva, background: Rgba): number;
+export declare function formatContrastRatio(ratio: number): string;
 export declare function fixColorForContrast(color: Hsva, background: Rgba, target?: number): Hsva | null;
 //#endregion

package/dist/lib/contrast.js

@@ -29,17 +29,29 @@ function nextFixLevel(levels) {
 	if (!levels.AAA) return "AAA";
 	return null;
 }
+function paintedOver(color, background) {
+	const blend = (channel) => color[channel] * color.a + background[channel] * (1 - color.a);
+	return {
+		r: blend("r"),
+		g: blend("g"),
+		b: blend("b"),
+		a: 1
+	};
+}
 function contrastOf(color, background) {
-	return contrastRatio(hsvaToRgba(color), background);
+	return contrastRatio(paintedOver(hsvaToRgba(color), background), background);
+}
+function formatContrastRatio(ratio) {
+	return (Math.floor(ratio * 100) / 100).toFixed(2);
 }
 function fixColorForContrast(color, background, target = AA_RATIO) {
 	const ok = hsvaToOklcha(color);
-	const ratioAtL = (L) => contrastRatio(hsvaToRgba(oklchaToHsva({
+	const ratioAtL = (L) => contrastOf(oklchaToHsva({
 		L,
 		C: ok.C,
 		H: ok.H,
-		a: 1
-	})), background);
+		a: color.a
+	}), background);
 	if (ratioAtL(ok.L) >= target) return null;
 	let best = null;
 	for (let step = 0; step <= 100; step++) {
@@ -61,4 +73,4 @@ function fixColorForContrast(color, background, target = AA_RATIO) {
 	return ratioAtL(0) >= ratioAtL(1) ? pick(0) : pick(1);
 }
 //#endregion
-export { AAA_RATIO, AA_RATIO, TARGET_RATIO, contrastOf, contrastRatio, fixColorForContrast, luminanceFromRgb, nextFixLevel, wcagLevels };
+export { AAA_RATIO, AA_RATIO, TARGET_RATIO, contrastOf, contrastRatio, fixColorForContrast, formatContrastRatio, luminanceFromRgb, nextFixLevel, wcagLevels };

package/dist/lib/dropzone-validation.js

@@ -60,17 +60,20 @@ async function validateDropzoneFile(file, policy, signal) {
 	const errors = [];
 	const minSize = policy?.minSize ?? DEFAULT_POLICY.minSize;
 	const maxSize = policy?.maxSize ?? DEFAULT_POLICY.maxSize;
-	if (!isDropzoneFileAccepted(file, policy?.accept)) errors.push({
-		code: DropzoneErrorCode.FileInvalidType,
-		message: "File type is not accepted."
-	});
+	if (!isDropzoneFileAccepted(file, policy?.accept)) {
+		const accepted = compileDropzoneAccept(policy?.accept)?.split(",").join(", ");
+		errors.push({
+			code: DropzoneErrorCode.FileInvalidType,
+			message: accepted ? `File type is not accepted. Use ${accepted}.` : "File type is not accepted."
+		});
+	}
 	if (file.size < minSize) errors.push({
 		code: DropzoneErrorCode.FileTooSmall,
-		message: `File is smaller than the ${formatDropzoneFileSize(minSize)} minimum.`
+		message: `File is smaller than the ${formatDropzoneFileSize(minSize)} minimum. Choose a larger file.`
 	});
 	if (file.size > maxSize) errors.push({
 		code: DropzoneErrorCode.FileTooLarge,
-		message: `File is larger than the ${formatDropzoneFileSize(maxSize)} limit.`
+		message: `File is larger than the ${formatDropzoneFileSize(maxSize)} limit. Choose a smaller file.`
 	});
 	if (policy?.validator) {
 		signal.throwIfAborted();
@@ -80,6 +83,30 @@ async function validateDropzoneFile(file, policy, signal) {
 	}
 	return errors;
 }
+function createDropzoneSelection(currentValue, policy) {
+	const appended = getDropzoneSelectionMode(policy) === "append" ? currentValue : [];
+	const allowDuplicates = policy?.allowDuplicates ?? false;
+	return {
+		files: [...appended],
+		identities: new Set(allowDuplicates ? [] : appended.map(getDropzoneFileIdentity)),
+		allowDuplicates,
+		capacity: getDropzoneCapacity(policy)
+	};
+}
+function getDropzoneSelectionErrors(file, identity, selection) {
+	if (!selection.allowDuplicates && selection.identities.has(identity)) return [{
+		code: DropzoneErrorCode.FileAlreadySelected,
+		message: `File "${file.name}" is already selected.`
+	}];
+	if (selection.files.length >= selection.capacity) {
+		const { capacity } = selection;
+		return [{
+			code: DropzoneErrorCode.TooManyFiles,
+			message: `Too many files. Choose up to ${capacity} ${capacity === 1 ? "file" : "files"}.`
+		}];
+	}
+	return [];
+}
 async function processDropzoneFiles(files, currentValue, policy, signal) {
 	signal.throwIfAborted();
 	const validatedFiles = await Promise.all(files.map(async (file) => ({
@@ -90,9 +117,7 @@ async function processDropzoneFiles(files, currentValue, policy, signal) {
 	const acceptedFiles = [];
 	const fileRejections = [];
 	const selectionMode = getDropzoneSelectionMode(policy);
-	const capacity = getDropzoneCapacity(policy);
-	const selectedFiles = selectionMode === "append" ? [...currentValue] : [];
-	const selectedIdentities = new Set(policy?.allowDuplicates ? [] : (selectionMode === "append" ? currentValue : []).map(getDropzoneFileIdentity));
+	const selection = createDropzoneSelection(currentValue, policy);
 	for (const { file, errors } of validatedFiles) {
 		if (errors.length > 0) {
 			fileRejections.push({
@@ -102,29 +127,17 @@ async function processDropzoneFiles(files, currentValue, policy, signal) {
 			continue;
 		}
 		const identity = getDropzoneFileIdentity(file);
-		if (!policy?.allowDuplicates && selectedIdentities.has(identity)) {
+		const selectionErrors = getDropzoneSelectionErrors(file, identity, selection);
+		if (selectionErrors.length > 0) {
 			fileRejections.push({
 				file,
-				errors: [{
-					code: DropzoneErrorCode.FileAlreadySelected,
-					message: `File "${file.name}" is already selected.`
-				}]
-			});
-			continue;
-		}
-		if (selectedFiles.length >= capacity) {
-			fileRejections.push({
-				file,
-				errors: [{
-					code: DropzoneErrorCode.TooManyFiles,
-					message: "Too many files."
-				}]
+				errors: selectionErrors
 			});
 			continue;
 		}
 		acceptedFiles.push(file);
-		selectedFiles.push(file);
-		selectedIdentities.add(identity);
+		selection.files.push(file);
+		selection.identities.add(identity);
 	}
 	if (selectionMode === "replace" && acceptedFiles.length === 0) return {
 		acceptedFiles,
@@ -135,8 +148,8 @@ async function processDropzoneFiles(files, currentValue, policy, signal) {
 	return {
 		acceptedFiles,
 		fileRejections,
-		value: selectedFiles,
-		removedFiles: selectionMode === "replace" ? getRemovedFiles(currentValue, selectedFiles) : []
+		value: selection.files,
+		removedFiles: selectionMode === "replace" ? getRemovedFiles(currentValue, selection.files) : []
 	};
 }
 function getDropzoneDragVerdict(files, currentValue, policy, options = {}) {

package/dist/lib/env-file.d.ts

@@ -4,7 +4,7 @@ export interface EnvironmentVariableEntry {
   value: string;
 }
 export declare const ENV_FILE_MAX_SIZE: number;
-export declare const DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE = "Environment variable keys must be unique";
+export declare const DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE = "Rename or remove the duplicate key.";
 export declare class DuplicateEnvironmentVariableKeyError extends Error {
   readonly key: string;
   constructor(key: string);