@ctrl-ui/react 0.9.6 → 0.9.8

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

@@ -7,7 +7,10 @@ const timelineKnobs = [
 	"--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/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", "--cui-tree-indent-inset", "--cui-tree-item-trigger-background"];
+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", "--cui-tree-item-trigger-background", "--cui-tree-guide-background", "--cui-tree-guide-inline-size"];
 export type TreeKnobStyle = Partial<Record<(typeof treeKnobs)[number], string>>;
 //#endregion

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

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

package/dist/skin.d.ts

@@ -40,6 +40,8 @@ export type ControlUiSkin = {
   scrollAreaBlur?: boolean;
   scrollAreaScrollbarVisibility?: "scroll" | "hover" | "always";
   scrollAreaScrollbarGutter?: "auto" | "stable";
+  selectAlignItemWithTrigger?: boolean;
+  calendarShowOutsideDays?: boolean;
   indicators?: SkinIndicators;
   effects?: ControlEffect[];
   adornments?: { [Scope in SkinAdornmentScope]?: { [Part in SkinAdornmentPart<Scope>]?: AdornmentEntry<SkinAdornmentContexts[Scope][Part]>; }; };

package/dist/styles/index.css

@@ -22,7 +22,6 @@
 @import "./recipes/sidebar-mobile.css";
 @import "./recipes/sidebar-parts.css";
 @import "./recipes/timeline.css";
-@import "./type-scale.css";
 @import "./recipes/alert.css";
 @import "./recipes/page-layout.css";
 @import "./recipes/app-shell-header.css";
@@ -49,6 +48,8 @@
 @import "./code.css";
 @import "./recipes/code.css";
 @import "./recipes/code-diff.css";
+@import "./recipes/separator.css";
+@import "./recipes/item.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
@@ -58,13 +59,11 @@
 @import "./recipes/toolbar.css";
 @import "./recipes/infinite-canvas.css";
 @import "./recipes/resizable.css";
-@import "./recipes/separator.css";
 @import "./recipes/kbd.css";
 @import "./recipes/markdown.css";
 @import "./recipes/label.css";
 @import "./recipes/markdown-editor.css";
 @import "./recipes/dockable-panel.css";
-@import "./recipes/item.css";
 @import "./recipes/dropzone.css";
 @import "./recipes/dynamic-notification.css";
 @import "./recipes/dynamic-notification-input.css";

package/dist/styles/recipes/activity.css

@@ -109,6 +109,10 @@
     font-family: var(--font-mono);
   }
 
+  :where([data-control-family="activity"][data-slot="detail-content"][data-tone="destructive"]) {
+    color: var(--destructive-text);
+  }
+
   :where([data-control-family="activity"][data-slot="detail-content"][data-format="code"]) {
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 1.5);

package/dist/styles/recipes/avatar.css

@@ -8,6 +8,7 @@
     --cui-avatar-badge-foreground: var(--primary-foreground);
     inline-size: calc(var(--spacing) * 9);
     block-size: calc(var(--spacing) * 9);
+    font-size: var(--text-caption);
   }
 
   :where([data-control-family="avatar"][data-slot="root"]),
@@ -79,7 +80,6 @@
     border-radius: inherit;
     background: var(--cui-avatar-fallback-background);
     color: var(--cui-avatar-fallback-foreground);
-    font-size: var(--text-caption);
     font-weight: var(--font-weight-medium);
   }
 }

package/dist/styles/recipes/badge.css

@@ -6,17 +6,22 @@
     --cui-badge-background: var(--_badge-color-background);
     --cui-badge-foreground: var(--_badge-color-foreground);
     --cui-badge-border-color: transparent;
+    --cui-badge-border-width: 1px;
     --cui-badge-font-size: var(--text-caption);
+    --cui-badge-font-weight: var(--font-weight-medium);
     --_badge-color-background: var(--badge-neutral);
     --_badge-color-foreground: var(--badge-neutral-foreground);
     --_badge-color-border: var(--badge-neutral-border);
     --_badge-color-background-hover: var(--badge-neutral-hover);
     --_badge-hover-background: var(--_badge-color-background-hover);
+    border-style: solid;
+    border-width: var(--cui-badge-border-width);
     border-color: var(--cui-badge-border-color);
     border-radius: var(--cui-badge-radius);
     background: var(--cui-badge-background);
     color: var(--cui-badge-foreground);
     font-size: var(--cui-badge-font-size);
+    font-weight: var(--cui-badge-font-weight);
     font-variant-numeric: tabular-nums;
   }
 
@@ -113,8 +118,20 @@
   initial-value: transparent;
 }
 
+@property --cui-badge-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-badge-font-size {
   syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-badge-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}

package/dist/styles/recipes/button.css

@@ -31,6 +31,7 @@
     --cui-button-padding-inline: var(--padding-x);
     --cui-button-icon-padding-inline: max(0px, calc(var(--cui-button-padding-inline) - var(--spacing) * 0.5));
     --cui-button-font-size: var(--text-body);
+    --cui-button-font-weight: var(--font-weight-medium);
     --cui-button-background: transparent;
     --cui-button-background-image: none;
     --cui-button-foreground: var(--muted-foreground);
@@ -55,7 +56,7 @@
     box-shadow: var(--cui-button-shadow);
     color: var(--cui-button-foreground);
     cursor: pointer;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-button-font-weight);
     transition-property: scale, translate;
     transition-timing-function: var(--ease-standard);
     transition-duration: var(--duration-fast);
@@ -257,6 +258,12 @@
   initial-value: 0px;
 }
 
+@property --cui-button-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
 @property --cui-button-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/calendar.css

@@ -6,12 +6,20 @@
     --cui-calendar-selected-background: var(--primary);
     --cui-calendar-selected-foreground: var(--primary-foreground);
     --cui-calendar-range-background: var(--accent);
+    --cui-calendar-day-size: calc(var(--spacing) * 9);
+    --cui-calendar-cell-padding: 0px;
+    --cui-calendar-today-shadow: none;
+    --cui-calendar-weekend-foreground: var(--foreground);
+    --cui-calendar-weekend-background: transparent;
+    --cui-calendar-caption-font-size: var(--text-body);
+    --cui-calendar-caption-font-weight: var(--font-weight-medium);
+    --cui-calendar-weekday-font-size: var(--text-caption);
   }
 
   :where([data-control-family="calendar"][data-slot="caption-label"]) {
     color: var(--foreground);
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--cui-calendar-caption-font-size);
+    font-weight: var(--cui-calendar-caption-font-weight);
     line-height: 1.4;
   }
 
@@ -31,7 +39,7 @@
   :where([data-control-family="calendar"][data-slot="weekday"]) {
     padding-block-end: calc(var(--spacing) * 1.5);
     color: var(--muted-foreground);
-    font-size: var(--text-caption);
+    font-size: var(--cui-calendar-weekday-font-size);
     font-weight: var(--font-weight-normal);
   }
 
@@ -54,8 +62,8 @@
   }
 
   :where([data-control-family="calendar"][data-slot="day"]) {
-    block-size: calc(var(--spacing) * 9);
-    min-inline-size: calc(var(--spacing) * 9);
+    block-size: var(--cui-calendar-day-size);
+    min-inline-size: var(--cui-calendar-day-size);
     border-radius: var(--cui-calendar-day-radius);
     color: var(--foreground);
     font-size: var(--text-body);
@@ -64,6 +72,10 @@
     font-variant-numeric: tabular-nums;
   }
 
+  :where([data-control-family="calendar"][data-slot="day-cell"][data-weekend] > [data-slot="day"]) {
+    color: var(--cui-calendar-weekend-foreground);
+  }
+
   @media (hover: hover) {
     :where([data-control-family="calendar"][data-slot="day"]:hover:not(:disabled, [aria-disabled="true"])) {
       background-color: var(--accent);
@@ -74,6 +86,7 @@
   :where([data-control-family="calendar"][data-slot="day"][data-today]) {
     background-color: var(--cui-calendar-today-background);
     color: var(--accent-foreground);
+    box-shadow: var(--cui-calendar-today-shadow);
     font-weight: var(--font-weight-medium);
   }
 
@@ -101,12 +114,28 @@
   }
 
   :where([data-control-family="calendar"][data-slot="day-cell"]) {
+    padding: var(--cui-calendar-cell-padding);
     text-align: center;
   }
 
+  :where([data-control-family="calendar"][data-slot="day-cell"][data-weekend]) {
+    background-color: var(--cui-calendar-weekend-background);
+  }
+
+  :where([data-control-family="calendar"][data-slot="month-grid"] > tbody > tr:first-child > [data-slot="day-cell"][data-weekend]) {
+    border-start-start-radius: calc(var(--cui-calendar-cell-padding) * 2);
+    border-start-end-radius: calc(var(--cui-calendar-cell-padding) * 2);
+  }
+
+  :where([data-control-family="calendar"][data-slot="month-grid"] > tbody > tr:last-child > [data-slot="day-cell"][data-weekend]) {
+    border-end-start-radius: calc(var(--cui-calendar-cell-padding) * 2);
+    border-end-end-radius: calc(var(--cui-calendar-cell-padding) * 2);
+  }
+
   :where([data-control-family="calendar"][data-slot="month-grid"]) {
     margin-block-start: calc(var(--spacing) * 1);
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
   }
 
   @media (pointer: coarse) {
@@ -159,3 +188,50 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-calendar-day-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-calendar-cell-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-calendar-today-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-calendar-weekend-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-calendar-weekend-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-calendar-caption-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-calendar-caption-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-calendar-weekday-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/card.css

@@ -6,6 +6,10 @@
     --cui-card-border-width: var(--control-rim-width);
     --cui-card-shadow: var(--shadow-sm);
     --cui-card-backdrop-filter: none;
+    --cui-card-padding-block: calc(var(--spacing) * 6);
+    --cui-card-padding-inline: calc(var(--spacing) * 6);
+    --cui-card-gap: calc(var(--spacing) * 6);
+    --cui-card-title-font-size: 1em;
     border: var(--cui-card-border-width) solid var(--cui-card-border-color);
     border-radius: var(--cui-card-radius);
     background: var(--cui-card-background);
@@ -13,21 +17,27 @@
     box-shadow: var(--cui-card-shadow);
     -webkit-backdrop-filter: var(--cui-card-backdrop-filter);
     backdrop-filter: var(--cui-card-backdrop-filter);
-    gap: calc(var(--spacing) * 6);
-    padding-block: calc(var(--spacing) * 6);
+    gap: var(--cui-card-gap);
+    padding-block: var(--cui-card-padding-block);
   }
 
   :where([data-control-family="card"][data-slot="header"]) {
     gap: calc(var(--spacing) * 1.5);
-    padding-inline: calc(var(--spacing) * 6);
+    padding-inline: var(--cui-card-padding-inline);
   }
 
   :where([data-control-family="card"][data-slot="content"]) {
-    padding-inline: calc(var(--spacing) * 6);
+    padding-inline: var(--cui-card-padding-inline);
   }
 
   :where([data-control-family="card"][data-slot="footer"]) {
-    padding-inline: calc(var(--spacing) * 6);
+    padding-inline: var(--cui-card-padding-inline);
+  }
+
+  :where([data-control-family="card"][data-slot="root"][data-size="sm"]) {
+    --cui-card-padding-block: calc(var(--spacing) * 3);
+    --cui-card-padding-inline: calc(var(--spacing) * 4);
+    --cui-card-gap: calc(var(--spacing) * 3);
   }
 
   :where([data-control-family="card"][data-slot="root"][data-variant="sectioned"]) {
@@ -46,6 +56,7 @@
   }
 
   :where([data-control-family="card"][data-slot="title"]) {
+    font-size: var(--cui-card-title-font-size);
     font-weight: var(--font-weight-semibold);
     line-height: var(--leading-tight);
     text-wrap: balance;
@@ -91,3 +102,27 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-card-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-card-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-card-gap {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-card-title-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/choice.css

@@ -1,8 +1,9 @@
 @layer components {
   :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"]),
   :where([data-control-family="choice"][data-choice-kind="radio-group"][data-slot="item"]) {
-    inline-size: calc(var(--spacing) * 4);
-    block-size: calc(var(--spacing) * 4);
+    --cui-choice-size: calc(var(--spacing) * 4);
+    inline-size: var(--cui-choice-size);
+    block-size: var(--cui-choice-size);
     --cui-choice-radius: var(--radius-sm);
     --cui-choice-shadow: inset 0 0 0 var(--cui-choice-border-width) var(--cui-choice-border-color), var(--shadow-sm);
     --cui-choice-border-color: var(--control-boundary);
@@ -95,6 +96,12 @@
   }
 }
 
+@property --cui-choice-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-choice-radius {
   syntax: "<length-percentage>";
   inherits: true;