@ctrl-ui/react 0.9.11 → 0.9.13

package/README.md

@@ -51,9 +51,11 @@ Controls size their own text: pick the control's `size`, or set its `--cui-*-fon
 
 Two rules keep call sites honest, shipped for Biome, ESLint, and oxlint from one policy (`lint/class-policy.mjs`):
 
-- `no-component-style-classes` errors when `className` on a component imported from `@ctrl-ui/react` (or a `components/control-ui` directory) sets what the component owns: colors, type, padding, borders, radius, shadows, state styles such as `hover:` and `data-[…]:`, or `!important`. Layout classes (`flex`, `gap-*`, widths, heights, margins, placement) stay allowed. Restyle through the component's props or its `--cui-*` knobs instead.
+- `no-component-style-classes` errors when `className` on a component imported from `@ctrl-ui/react` (or a `components/control-ui` directory) sets what the component owns: colors, type, padding, borders, radius, shadows, state styles such as `hover:` and `data-[…]:`, or `!important`. Every `text-*` class counts except alignment and wrapping (`text-center`, `text-pretty`, `text-ellipsis`…). The rule also reads string constants the `className` references in the same file, and the `className` of the element passed to the component's `render` prop. Layout classes (`flex`, `gap-*`, widths, heights, margins, placement) stay allowed. Restyle through the component's props or its `--cui-*` knobs instead.
 - `no-raw-type-classes` errors on text sizes in any `className`: the type rungs, Tailwind's `text-xs`…`text-9xl`, and arbitrary `text-[13px]`. It reaches beyond Control UI, so adopt it folder by folder while you migrate.
 
+The Biome rules need Biome 2.4.11 or later; older versions fail with "Failed to compile the Grit plugin".
+
 Biome, extending the shipped preset so rules added later arrive with the package update:
 
 ```json

package/dist/control-variants.d.ts

@@ -1,6 +1,6 @@
 //#region src/control-variants.d.ts
 export type ControlSize = "xs" | "sm" | "md" | "lg";
-export declare const buttonVariants: readonly ["solid", "surface", "ghost", "quiet", "link"];
+export declare const buttonVariants: readonly ["solid", "surface", "ghost", "quiet", "dashed", "link"];
 export type ButtonVariant = (typeof buttonVariants)[number];
 export declare const controlTones: readonly ["neutral", "primary", "danger"];
 export type ControlTone = (typeof controlTones)[number];

package/dist/control-variants.js

@@ -4,6 +4,7 @@ const buttonVariants = [
 	"surface",
 	"ghost",
 	"quiet",
+	"dashed",
 	"link"
 ];
 const controlTones = [

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-font-weight", "--cui-button-background", "--cui-button-background-image", "--cui-button-hover-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
+export declare const buttonKnobs: readonly ["--cui-button-press-background", "--cui-button-press-scale", "--cui-button-hover-border-color", "--cui-button-open-border-color", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow", "--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-padding-block", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-font-weight", "--cui-button-background", "--cui-button-background-image", "--cui-button-hover-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-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-border-width", "--cui-button-border-style", "--cui-button-border-color"];
 export type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
 //#endregion

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

@@ -1,10 +1,18 @@
 //#region src/knob-contracts/button-knobs.ts
 const buttonKnobs = [
+	"--cui-button-press-background",
+	"--cui-button-press-scale",
+	"--cui-button-hover-border-color",
+	"--cui-button-open-border-color",
+	"--cui-button-open-background",
+	"--cui-button-open-foreground",
+	"--cui-button-open-shadow",
 	"--cui-button-radius",
 	"--cui-button-gap",
 	"--cui-button-icon",
 	"--cui-button-height",
 	"--cui-button-padding-inline",
+	"--cui-button-padding-block",
 	"--cui-button-icon-padding-inline",
 	"--cui-button-font-size",
 	"--cui-button-font-weight",
@@ -14,8 +22,6 @@ const buttonKnobs = [
 	"--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",
@@ -23,9 +29,9 @@ const buttonKnobs = [
 	"--cui-button-hover-shadow",
 	"--cui-button-press-shadow",
 	"--cui-button-active-shadow",
-	"--cui-button-open-background",
-	"--cui-button-open-foreground",
-	"--cui-button-open-shadow"
+	"--cui-button-border-width",
+	"--cui-button-border-style",
+	"--cui-button-border-color"
 ];
 //#endregion
 export { buttonKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/dropzone-knobs.d.ts
-export declare const dropzoneKnobs: readonly ["--cui-dropzone-surface-radius", "--cui-dropzone-surface-foreground", "--cui-dropzone-surface-border-color", "--cui-dropzone-surface-border-width", "--cui-dropzone-accept-border-color", "--cui-dropzone-reject-border-color", "--cui-dropzone-overlay-background"];
+export declare const dropzoneKnobs: readonly ["--cui-dropzone-surface-radius", "--cui-dropzone-surface-foreground", "--cui-dropzone-surface-border-color", "--cui-dropzone-surface-border-width", "--cui-dropzone-accept-border-color", "--cui-dropzone-reject-border-color", "--cui-dropzone-overlay-background", "--cui-dropzone-surface-min-block-size", "--cui-dropzone-surface-padding-block", "--cui-dropzone-surface-padding-inline", "--cui-dropzone-surface-gap"];
 export type DropzoneKnobStyle = Partial<Record<(typeof dropzoneKnobs)[number], string>>;
 //#endregion

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

@@ -6,7 +6,11 @@ const dropzoneKnobs = [
 	"--cui-dropzone-surface-border-width",
 	"--cui-dropzone-accept-border-color",
 	"--cui-dropzone-reject-border-color",
-	"--cui-dropzone-overlay-background"
+	"--cui-dropzone-overlay-background",
+	"--cui-dropzone-surface-min-block-size",
+	"--cui-dropzone-surface-padding-block",
+	"--cui-dropzone-surface-padding-inline",
+	"--cui-dropzone-surface-gap"
 ];
 //#endregion
 export { dropzoneKnobs };

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-legend-font-size", "--cui-field-legend-font-weight", "--cui-field-radius", "--cui-field-background", "--cui-field-hover-background", "--cui-field-affordance-background", "--cui-field-affordance-shadow", "--cui-field-affordance-foreground", "--cui-field-affordance-hover-background", "--cui-field-foreground", "--cui-field-border-color", "--cui-field-border-width", "--cui-field-shadow", "--cui-field-backdrop-filter", "--cui-field-height", "--cui-field-padding-inline", "--cui-field-font-size", "--cui-field-font-weight", "--cui-field-font-family", "--cui-field-group-radius", "--cui-field-group-background", "--cui-field-group-border-color", "--cui-field-group-border-width", "--cui-field-group-shadow", "--cui-field-group-padding-block", "--cui-field-group-padding-inline", "--cui-field-group-separator-color", "--cui-field-group-separator-inset", "--cui-field-label-font-size", "--cui-field-label-font-weight", "--cui-field-description-font-size"];
+export declare const fieldKnobs: readonly ["--cui-field-label-radius", "--cui-field-label-background", "--cui-field-label-hover-background", "--cui-field-label-checked-background", "--cui-field-label-border-color", "--cui-field-label-checked-border-color", "--cui-field-label-border-width", "--cui-field-label-padding-block", "--cui-field-label-padding-inline", "--cui-field-legend-foreground", "--cui-field-legend-font-size", "--cui-field-legend-font-weight", "--cui-field-radius", "--cui-field-background", "--cui-field-hover-background", "--cui-field-affordance-background", "--cui-field-affordance-shadow", "--cui-field-affordance-foreground", "--cui-field-affordance-hover-background", "--cui-field-foreground", "--cui-field-border-color", "--cui-field-border-width", "--cui-field-shadow", "--cui-field-backdrop-filter", "--cui-field-height", "--cui-field-padding-inline", "--cui-field-font-size", "--cui-field-font-weight", "--cui-field-font-family", "--cui-field-group-radius", "--cui-field-group-background", "--cui-field-group-border-color", "--cui-field-group-border-width", "--cui-field-group-shadow", "--cui-field-group-padding-block", "--cui-field-group-padding-inline", "--cui-field-group-separator-color", "--cui-field-group-separator-inset", "--cui-field-label-font-size", "--cui-field-label-font-weight", "--cui-field-description-font-size"];
 export type FieldKnobStyle = Partial<Record<(typeof fieldKnobs)[number], string>>;
 //#endregion

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

@@ -1,5 +1,15 @@
 //#region src/knob-contracts/field-knobs.ts
 const fieldKnobs = [
+	"--cui-field-label-radius",
+	"--cui-field-label-background",
+	"--cui-field-label-hover-background",
+	"--cui-field-label-checked-background",
+	"--cui-field-label-border-color",
+	"--cui-field-label-checked-border-color",
+	"--cui-field-label-border-width",
+	"--cui-field-label-padding-block",
+	"--cui-field-label-padding-inline",
+	"--cui-field-legend-foreground",
 	"--cui-field-legend-font-size",
 	"--cui-field-legend-font-weight",
 	"--cui-field-radius",

package/dist/knob-contracts/gradient-editor-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/gradient-editor-knobs.d.ts
-export declare const gradientEditorKnobs: readonly ["--cui-gradient-editor-preview-radius", "--cui-gradient-editor-preview-ring-color", "--cui-gradient-editor-track-radius", "--cui-gradient-editor-stop-radius", "--cui-gradient-editor-stop-border-color", "--cui-gradient-editor-stop-border-width", "--cui-gradient-editor-stop-shadow", "--cui-gradient-editor-add-radius", "--cui-gradient-editor-add-border-color", "--cui-gradient-editor-add-border-width"];
+export declare const gradientEditorKnobs: readonly ["--cui-gradient-editor-preview-radius", "--cui-gradient-editor-preview-ring-color", "--cui-gradient-editor-track-radius", "--cui-gradient-editor-stop-radius", "--cui-gradient-editor-stop-border-color", "--cui-gradient-editor-stop-border-width", "--cui-gradient-editor-stop-shadow"];
 export type GradientEditorKnobStyle = Partial<Record<(typeof gradientEditorKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/gradient-editor-knobs.js

@@ -6,10 +6,7 @@ const gradientEditorKnobs = [
 	"--cui-gradient-editor-stop-radius",
 	"--cui-gradient-editor-stop-border-color",
 	"--cui-gradient-editor-stop-border-width",
-	"--cui-gradient-editor-stop-shadow",
-	"--cui-gradient-editor-add-radius",
-	"--cui-gradient-editor-add-border-color",
-	"--cui-gradient-editor-add-border-width"
+	"--cui-gradient-editor-stop-shadow"
 ];
 //#endregion
 export { gradientEditorKnobs };

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-floating-inset", "--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-title-font-size", "--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

@@ -8,6 +8,7 @@ const pageLayoutKnobs = [
 	"--cui-page-layout-header-start-gap",
 	"--cui-page-layout-header-gap",
 	"--cui-page-layout-header-column-gap",
+	"--cui-page-layout-title-font-size",
 	"--cui-page-layout-header-row-gap",
 	"--cui-page-layout-size",
 	"--cui-page-layout-sticky-gap",

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-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 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-description-font-size", "--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-item-description-foreground", "--cui-popup-item-description-font-size", "--cui-popup-shortcut-foreground", "--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"];
 export type PopupKnobStyle = Partial<Record<(typeof popupKnobs)[number], string>>;
 //#endregion

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

@@ -6,6 +6,7 @@ const popupKnobs = [
 	"--cui-popup-title-line-height",
 	"--cui-popup-title-letter-spacing",
 	"--cui-popup-description-foreground",
+	"--cui-popup-description-font-size",
 	"--cui-popup-close-inset",
 	"--cui-popup-item-inset",
 	"--cui-popup-label-padding-block",
@@ -25,6 +26,9 @@ const popupKnobs = [
 	"--cui-popup-command-heading-letter-spacing",
 	"--cui-popup-command-heading-text-transform",
 	"--cui-popup-dialog-max-inline-size",
+	"--cui-popup-item-description-foreground",
+	"--cui-popup-item-description-font-size",
+	"--cui-popup-shortcut-foreground",
 	"--cui-popup-tooltip-arrow-radius",
 	"--cui-popup-status-success-foreground",
 	"--cui-popup-status-warning-foreground",
@@ -51,8 +55,7 @@ const popupKnobs = [
 	"--cui-popup-item-highlight-foreground",
 	"--cui-popup-item-highlight-muted-foreground",
 	"--cui-popup-item-disabled-opacity",
-	"--cui-popup-separator-color",
-	"--cui-popup-shortcut-foreground"
+	"--cui-popup-separator-color"
 ];
 //#endregion
 export { popupKnobs };

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-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 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-container-border-width", "--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

@@ -22,6 +22,7 @@ const sidebarKnobs = [
 	"--cui-sidebar-inner-border-color",
 	"--cui-sidebar-inner-background-image",
 	"--cui-sidebar-inner-backdrop-filter",
+	"--cui-sidebar-container-border-width",
 	"--cui-sidebar-inner-border-width",
 	"--cui-sidebar-inner-radius",
 	"--cui-sidebar-inner-shadow",

package/dist/styles/recipes/avatar.css

@@ -19,6 +19,7 @@
     --cui-avatar-fallback-background: var(--muted);
     --cui-avatar-fallback-foreground: var(--muted-foreground);
     border-radius: var(--cui-avatar-radius);
+    container-type: inline-size;
   }
 
   :where([data-control-family="avatar"][data-slot="root"])::after {
@@ -80,6 +81,7 @@
     border-radius: inherit;
     background: var(--cui-avatar-fallback-background);
     color: var(--cui-avatar-fallback-foreground);
+    font-size: max(var(--text-micro), 37.5cqi);
     font-weight: var(--font-weight-medium);
   }
 }

package/dist/styles/recipes/button-states.css

@@ -4,6 +4,7 @@
       background-color: var(--cui-button-hover-background);
       background-image: var(--cui-button-hover-background-image);
       box-shadow: var(--cui-button-hover-shadow);
+      border-color: var(--cui-button-hover-border-color);
       color: var(--cui-button-hover-foreground);
     }
   }
@@ -12,6 +13,7 @@
     background-color: var(--cui-button-open-background);
     color: var(--cui-button-open-foreground);
     box-shadow: var(--cui-button-open-shadow);
+    border-color: var(--cui-button-open-border-color);
   }
 
   :where([data-control-family="button"][data-active="true"]) {
@@ -82,3 +84,44 @@
     }
   }
 }
+
+@property --cui-button-press-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-press-scale {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --cui-button-hover-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-open-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-open-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-open-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-open-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/button.css

@@ -29,6 +29,7 @@
     --cui-button-icon: 1rem;
     --cui-button-height: var(--control-h-md);
     --cui-button-padding-inline: var(--padding-x);
+    --cui-button-padding-block: calc(var(--spacing) * 1.5);
     --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);
@@ -50,6 +51,12 @@
     --cui-button-open-background: var(--cui-button-hover-background);
     --cui-button-open-foreground: var(--cui-button-hover-foreground);
     --cui-button-open-shadow: var(--cui-button-shadow);
+    --cui-button-border-width: 0px;
+    --cui-button-border-style: solid;
+    --cui-button-border-color: var(--control-rim);
+    --cui-button-hover-border-color: var(--cui-button-border-color);
+    --cui-button-open-border-color: var(--cui-button-hover-border-color);
+    border: var(--cui-button-border-width) var(--cui-button-border-style) var(--cui-button-border-color);
     border-radius: var(--cui-button-radius);
     background-color: var(--cui-button-background);
     background-image: var(--cui-button-background-image);
@@ -130,7 +137,7 @@
     --cui-button-radius: var(--nest-radius, min(var(--radius-control), var(--radius-field)));
     flex-direction: column;
     block-size: auto;
-    padding-block: calc(var(--spacing) * 1.5);
+    padding-block: var(--cui-button-padding-block);
     padding-inline: var(--cui-button-padding-inline);
   }
 
@@ -179,6 +186,13 @@
     --cui-button-active-hover-background: oklch(from var(--primary) l c h / 0.1);
   }
 
+  :where([data-control-family="button"][data-variant="dashed"]) {
+    --cui-button-border-width: var(--control-rim-width);
+    --cui-button-border-style: dashed;
+    --cui-button-hover-border-color: oklch(from var(--foreground) l c h / 0.4);
+    --cui-button-hover-background: transparent;
+  }
+
   :where([data-control-family="button"]:is([data-variant="surface"], [data-variant="ghost"], [data-variant="quiet"])) {
     --cui-button-open-background: oklch(from var(--foreground) l c h / 0.07);
   }
@@ -267,6 +281,12 @@
   initial-value: 0px;
 }
 
+@property --cui-button-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-button-icon-padding-inline {
   syntax: "<length-percentage>";
   inherits: true;
@@ -319,18 +339,6 @@
   initial-value: transparent;
 }
 
-@property --cui-button-press-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-button-press-scale {
-  syntax: "<number>";
-  inherits: true;
-  initial-value: 1;
-}
-
 @property --cui-button-active-background {
   syntax: "<color>";
   inherits: true;
@@ -369,19 +377,19 @@
   inherits: true;
 }
 
-@property --cui-button-open-background {
-  syntax: "<color>";
+@property --cui-button-border-width {
+  syntax: "<length>";
   inherits: true;
-  initial-value: transparent;
+  initial-value: 0px;
 }
 
-@property --cui-button-open-foreground {
-  syntax: "<color>";
+@property --cui-button-border-style {
+  syntax: "*";
   inherits: true;
-  initial-value: transparent;
 }
 
-@property --cui-button-open-shadow {
-  syntax: "*";
+@property --cui-button-border-color {
+  syntax: "<color>";
   inherits: true;
+  initial-value: transparent;
 }

package/dist/styles/recipes/card.css

@@ -63,6 +63,14 @@
     border-radius: var(--cui-card-radius);
   }
 
+  :where(
+    [data-control-family="card"][data-slot="root"]:has([data-control-family="card"][data-slot="link"])
+      :is(a[href], button, input, select, textarea, [role="checkbox"]):not([data-control-family="card"][data-slot="link"])
+  ) {
+    position: relative;
+    z-index: 1;
+  }
+
   :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);

package/dist/styles/recipes/color-picker-values.css

@@ -53,23 +53,9 @@
     font-size: var(--text-caption);
   }
 
-  :where([data-control-family="color-picker"][data-slot="swatch-add"]) {
-    border-radius: var(--radius-md);
-    border-width: var(--control-rim-width);
-    border-style: dashed;
-    --_color-picker-swatch-add-border-color: var(--border);
-    border-color: var(--_color-picker-swatch-add-border-color);
-    --_color-picker-swatch-add-foreground: var(--muted-foreground);
-    color: var(--_color-picker-swatch-add-foreground);
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="color-picker"][data-slot="swatch-add"]:hover:not(:disabled)) {
-      --_color-picker-swatch-add-border-color: oklch(from var(--foreground) l c h / 0.4);
-      border-color: var(--_color-picker-swatch-add-border-color);
-      --_color-picker-swatch-add-foreground: var(--foreground);
-      color: var(--_color-picker-swatch-add-foreground);
-    }
+  :where([data-control-family="button"][data-color-picker-swatch-add="true"]) {
+    --nest-radius: var(--radius-md);
+    --cui-button-height: calc(var(--spacing) * 6);
   }
 
   :where([data-control-family="color-picker"][data-slot="swatch"]) {
@@ -91,7 +77,7 @@
     transition: box-shadow var(--duration-fast) var(--ease-standard);
   }
 
-  :where([data-control-family="color-picker"]:is([data-slot="swatch"], [data-slot="swatch-add"], [data-slot="contrast-fix"]):disabled) {
+  :where([data-control-family="color-picker"]:is([data-slot="swatch"], [data-slot="contrast-fix"]):disabled) {
     opacity: var(--disabled-opacity);
   }
 

package/dist/styles/recipes/color-picker.css

@@ -59,8 +59,7 @@
     border-radius: 9999px;
   }
 
-  :where([data-control-family="color-picker"][data-slot="swatch"]),
-  :where([data-control-family="color-picker"][data-slot="swatch-add"]) {
+  :where([data-control-family="color-picker"][data-slot="swatch"]) {
     inline-size: calc(var(--spacing) * 6);
     block-size: calc(var(--spacing) * 6);
   }
@@ -125,7 +124,7 @@
     --_color-picker-thumb-elevation: var(--shadow-md);
   }
 
-  :where([data-control-family="color-picker"]:is([data-slot="slider-thumb"], [data-slot="swatch-add"]))::after {
+  :where([data-control-family="color-picker"][data-slot="slider-thumb"])::after {
     content: "";
     position: absolute;
     inset: 50%;
@@ -135,7 +134,7 @@
   }
 
   @media (pointer: coarse) {
-    :where([data-control-family="color-picker"]:is([data-slot="slider-thumb"], [data-slot="swatch-add"]))::after {
+    :where([data-control-family="color-picker"][data-slot="slider-thumb"])::after {
       inline-size: max(100%, var(--touch-target));
       block-size: max(100%, var(--touch-target));
     }

package/dist/styles/recipes/dropzone.css

@@ -7,7 +7,19 @@
     --cui-dropzone-accept-border-color: var(--primary);
     --cui-dropzone-reject-border-color: var(--destructive);
     --cui-dropzone-overlay-background: oklch(from var(--card) l c h / 0.95);
+    --cui-dropzone-surface-min-block-size: calc(var(--spacing) * 32);
+    --cui-dropzone-surface-padding-block: calc(var(--spacing) * 6);
+    --cui-dropzone-surface-padding-inline: calc(var(--spacing) * 6);
+    --cui-dropzone-surface-gap: calc(var(--spacing) * 3);
   }
+
+  :where([data-control-family="dropzone"][data-slot="root"][data-size="sm"]) {
+    --cui-dropzone-surface-min-block-size: var(--control-h-md);
+    --cui-dropzone-surface-padding-block: calc(var(--spacing) * 2);
+    --cui-dropzone-surface-padding-inline: calc(var(--spacing) * 3);
+    --cui-dropzone-surface-gap: calc(var(--spacing) * 2);
+  }
+
   :where([data-control-family="dropzone"][data-slot="trigger"]),
   :where([data-control-family="dropzone"][data-slot="overlay"]) {
     border: var(--cui-dropzone-surface-border-width) dashed var(--cui-dropzone-surface-border-color);
@@ -16,16 +28,22 @@
   }
 
   :where([data-control-family="dropzone"][data-slot="trigger"]) {
-    min-block-size: calc(var(--spacing) * 32);
-    gap: calc(var(--spacing) * 3);
-    padding: calc(var(--spacing) * 6);
+    min-block-size: var(--cui-dropzone-surface-min-block-size);
+    gap: var(--cui-dropzone-surface-gap);
+    padding-block: var(--cui-dropzone-surface-padding-block);
+    padding-inline: var(--cui-dropzone-surface-padding-inline);
     background-color: var(--card);
+    font-size: var(--text-body);
     text-align: center;
     transition-property: border-color, color, opacity, box-shadow;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }
 
+  :where([data-control-family="dropzone"][data-slot="root"][data-size="sm"] [data-control-family="dropzone"][data-slot="trigger"]) {
+    text-align: start;
+  }
+
   @media (hover: hover) {
     :where([data-control-family="dropzone"][data-slot="trigger"]:hover:not(:disabled, [aria-disabled="true"])) {
       background-color: oklch(from var(--muted) l c h / 0.5);
@@ -53,7 +71,8 @@
   }
 
   :where([data-control-family="dropzone"][data-slot="overlay"]) {
-    padding: calc(var(--spacing) * 6);
+    padding-block: var(--cui-dropzone-surface-padding-block);
+    padding-inline: var(--cui-dropzone-surface-padding-inline);
     border-style: solid;
     background-color: var(--cui-dropzone-overlay-background);
     opacity: 0;
@@ -153,3 +172,27 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-dropzone-surface-min-block-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-dropzone-surface-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-dropzone-surface-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-dropzone-surface-gap {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}