@ctrl-ui/react 0.9.6 → 0.9.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/README.md +38 -2
  2. package/dist/activity.d.ts +3 -1
  3. package/dist/activity.js +2 -1
  4. package/dist/blocks/agent-run-sidebar.js +11 -10
  5. package/dist/blocks/agent-run.d.ts +3 -1
  6. package/dist/blocks/agent-run.js +21 -13
  7. package/dist/blocks/coding-agent.js +50 -69
  8. package/dist/blocks/design-canvas-inspector.js +1 -1
  9. package/dist/blocks/design-canvas.js +41 -34
  10. package/dist/blocks/discussion.js +1 -1
  11. package/dist/blocks/file-explorer.js +66 -47
  12. package/dist/blocks/settings.js +37 -41
  13. package/dist/blocks/team-chat.js +2 -1
  14. package/dist/blocks/theme-toggle.d.ts +2 -1
  15. package/dist/blocks/theme-toggle.js +13 -4
  16. package/dist/hooks/use-mobile.d.ts +1 -1
  17. package/dist/hooks/use-mobile.js +1 -1
  18. package/dist/knob-contracts/badge-knobs.d.ts +1 -1
  19. package/dist/knob-contracts/badge-knobs.js +3 -1
  20. package/dist/knob-contracts/button-knobs.d.ts +1 -1
  21. package/dist/knob-contracts/button-knobs.js +1 -0
  22. package/dist/knob-contracts/calendar-knobs.d.ts +1 -1
  23. package/dist/knob-contracts/calendar-knobs.js +9 -1
  24. package/dist/knob-contracts/card-knobs.d.ts +1 -1
  25. package/dist/knob-contracts/card-knobs.js +5 -1
  26. package/dist/knob-contracts/choice-knobs.d.ts +1 -1
  27. package/dist/knob-contracts/choice-knobs.js +1 -0
  28. package/dist/knob-contracts/collapsible-knobs.d.ts +1 -1
  29. package/dist/knob-contracts/collapsible-knobs.js +5 -1
  30. package/dist/knob-contracts/emoji-picker-knobs.d.ts +1 -1
  31. package/dist/knob-contracts/emoji-picker-knobs.js +3 -1
  32. package/dist/knob-contracts/field-knobs.d.ts +1 -1
  33. package/dist/knob-contracts/field-knobs.js +17 -1
  34. package/dist/knob-contracts/item-knobs.d.ts +1 -1
  35. package/dist/knob-contracts/item-knobs.js +6 -1
  36. package/dist/knob-contracts/kbd-knobs.d.ts +1 -1
  37. package/dist/knob-contracts/kbd-knobs.js +4 -1
  38. package/dist/knob-contracts/page-layout-knobs.d.ts +1 -1
  39. package/dist/knob-contracts/page-layout-knobs.js +1 -0
  40. package/dist/knob-contracts/pagination-knobs.d.ts +1 -1
  41. package/dist/knob-contracts/pagination-knobs.js +2 -1
  42. package/dist/knob-contracts/popup-knobs.d.ts +1 -1
  43. package/dist/knob-contracts/popup-knobs.js +9 -0
  44. package/dist/knob-contracts/range-knobs.d.ts +1 -1
  45. package/dist/knob-contracts/range-knobs.js +2 -0
  46. package/dist/knob-contracts/sidebar-knobs.d.ts +1 -1
  47. package/dist/knob-contracts/sidebar-knobs.js +2 -0
  48. package/dist/knob-contracts/tabs-knobs.d.ts +1 -1
  49. package/dist/knob-contracts/tabs-knobs.js +3 -0
  50. package/dist/knob-contracts/timeline-knobs.d.ts +1 -1
  51. package/dist/knob-contracts/timeline-knobs.js +4 -1
  52. package/dist/knob-contracts/tree-knobs.d.ts +1 -1
  53. package/dist/knob-contracts/tree-knobs.js +3 -1
  54. package/dist/skin.d.ts +2 -0
  55. package/dist/styles/index.css +2 -3
  56. package/dist/styles/recipes/activity.css +4 -0
  57. package/dist/styles/recipes/avatar.css +1 -1
  58. package/dist/styles/recipes/badge.css +17 -0
  59. package/dist/styles/recipes/button.css +8 -1
  60. package/dist/styles/recipes/calendar.css +82 -6
  61. package/dist/styles/recipes/card.css +40 -5
  62. package/dist/styles/recipes/choice.css +9 -2
  63. package/dist/styles/recipes/collapsible.css +8 -1
  64. package/dist/styles/recipes/color-picker-values.css +4 -0
  65. package/dist/styles/recipes/emoji-picker.css +29 -8
  66. package/dist/styles/recipes/empty.css +5 -0
  67. package/dist/styles/recipes/field-parts.css +80 -5
  68. package/dist/styles/recipes/field.css +113 -40
  69. package/dist/styles/recipes/item.css +44 -5
  70. package/dist/styles/recipes/kbd.css +26 -6
  71. package/dist/styles/recipes/morphing-panel.css +1 -1
  72. package/dist/styles/recipes/page-layout.css +18 -2
  73. package/dist/styles/recipes/pagination.css +8 -0
  74. package/dist/styles/recipes/popup-controls.css +41 -0
  75. package/dist/styles/recipes/popup-drawer.css +1 -0
  76. package/dist/styles/recipes/popup-lists.css +55 -6
  77. package/dist/styles/recipes/popup-motion.css +7 -1
  78. package/dist/styles/recipes/popup.css +10 -0
  79. package/dist/styles/recipes/range.css +16 -2
  80. package/dist/styles/recipes/sidebar-mobile.css +1 -1
  81. package/dist/styles/recipes/sidebar-parts.css +17 -1
  82. package/dist/styles/recipes/sidebar.css +11 -0
  83. package/dist/styles/recipes/skeleton.css +8 -0
  84. package/dist/styles/recipes/tabs.css +41 -8
  85. package/dist/styles/recipes/timeline.css +25 -2
  86. package/dist/styles/recipes/tree.css +33 -0
  87. package/dist/styles/theme.css +11 -1
  88. package/dist/surface-variants.d.ts +2 -0
  89. package/dist/surface-variants.js +2 -1
  90. package/dist/ui/alert-dialog.js +1 -1
  91. package/dist/ui/badge.js +1 -1
  92. package/dist/ui/calendar.js +9 -4
  93. package/dist/ui/card.d.ts +3 -1
  94. package/dist/ui/card.js +2 -1
  95. package/dist/ui/context-menu.d.ts +3 -1
  96. package/dist/ui/context-menu.js +2 -1
  97. package/dist/ui/dialog.js +1 -1
  98. package/dist/ui/dropdown-menu.d.ts +6 -3
  99. package/dist/ui/dropdown-menu.js +25 -7
  100. package/dist/ui/dropzone.js +10 -11
  101. package/dist/ui/empty.d.ts +4 -1
  102. package/dist/ui/empty.js +4 -2
  103. package/dist/ui/field.d.ts +6 -2
  104. package/dist/ui/field.js +4 -2
  105. package/dist/ui/menubar.d.ts +3 -1
  106. package/dist/ui/menubar.js +2 -1
  107. package/dist/ui/morphing-panel.d.ts +5 -1
  108. package/dist/ui/morphing-panel.js +4 -2
  109. package/dist/ui/select.js +2 -2
  110. package/dist/ui/sheet.d.ts +9 -0
  111. package/dist/ui/sheet.js +23 -1
  112. package/dist/ui/sidebar-mobile.js +1 -1
  113. package/dist/ui/sidebar-provider.d.ts +3 -1
  114. package/dist/ui/sidebar-provider.js +3 -2
  115. package/dist/ui/sidebar-resize-rail.js +1 -1
  116. package/dist/ui/sidebar.d.ts +6 -5
  117. package/dist/ui/sidebar.js +10 -9
  118. package/dist/ui/skeleton.d.ts +4 -1
  119. package/dist/ui/skeleton.js +8 -2
  120. package/dist/ui/tabs.d.ts +1 -1
  121. package/dist/ui/tabs.js +2 -13
  122. package/dist/ui/timeline.js +1 -1
  123. package/dist/ui/typography.d.ts +11 -5
  124. package/dist/ui/typography.js +18 -6
  125. package/lint/biome-preset.json +3 -0
  126. package/lint/class-policy.mjs +17 -0
  127. package/lint/eslint-plugin.mjs +87 -0
  128. package/lint/grit-rules.mjs +40 -0
  129. package/lint/no-component-style-classes.grit +16 -0
  130. package/lint/no-raw-type-classes.grit +2 -3
  131. package/lint/write-grit-rules.mjs +19 -0
  132. package/package.json +11 -2
  133. package/dist/styles/type-scale.css +0 -72
@@ -1,5 +1,7 @@
1
1
  //#region src/knob-contracts/field-knobs.ts
2
2
  const fieldKnobs = [
3
+ "--cui-field-legend-font-size",
4
+ "--cui-field-legend-font-weight",
3
5
  "--cui-field-radius",
4
6
  "--cui-field-background",
5
7
  "--cui-field-hover-background",
@@ -14,7 +16,21 @@ const fieldKnobs = [
14
16
  "--cui-field-backdrop-filter",
15
17
  "--cui-field-height",
16
18
  "--cui-field-padding-inline",
17
- "--cui-field-font-size"
19
+ "--cui-field-font-size",
20
+ "--cui-field-font-weight",
21
+ "--cui-field-font-family",
22
+ "--cui-field-group-radius",
23
+ "--cui-field-group-background",
24
+ "--cui-field-group-border-color",
25
+ "--cui-field-group-border-width",
26
+ "--cui-field-group-shadow",
27
+ "--cui-field-group-padding-block",
28
+ "--cui-field-group-padding-inline",
29
+ "--cui-field-group-separator-color",
30
+ "--cui-field-group-separator-inset",
31
+ "--cui-field-label-font-size",
32
+ "--cui-field-label-font-weight",
33
+ "--cui-field-description-font-size"
18
34
  ];
19
35
  //#endregion
20
36
  export { fieldKnobs };
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/item-knobs.d.ts
2
- 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"];
2
+ export declare const itemKnobs: readonly ["--cui-item-radius", "--cui-item-hover-background", "--cui-item-current-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"];
3
3
  export type ItemKnobStyle = Partial<Record<(typeof itemKnobs)[number], string>>;
4
4
  //#endregion
@@ -2,12 +2,17 @@
2
2
  const itemKnobs = [
3
3
  "--cui-item-radius",
4
4
  "--cui-item-hover-background",
5
+ "--cui-item-current-background",
5
6
  "--cui-item-hover-border-color",
6
7
  "--cui-item-border-width",
7
8
  "--cui-item-active-scale",
8
9
  "--cui-item-gap",
9
10
  "--cui-item-padding-block",
10
- "--cui-item-padding-inline"
11
+ "--cui-item-padding-inline",
12
+ "--cui-item-description-font-size",
13
+ "--cui-item-description-line-height",
14
+ "--cui-item-description-foreground",
15
+ "--cui-item-media-foreground"
11
16
  ];
12
17
  //#endregion
13
18
  export { itemKnobs };
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/kbd-knobs.d.ts
2
- export declare const kbdKnobs: readonly ["--cui-kbd-radius", "--cui-kbd-background", "--cui-kbd-foreground", "--cui-kbd-border-color", "--cui-kbd-shadow"];
2
+ 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"];
3
3
  export type KbdKnobStyle = Partial<Record<(typeof kbdKnobs)[number], string>>;
4
4
  //#endregion
@@ -4,7 +4,10 @@ const kbdKnobs = [
4
4
  "--cui-kbd-background",
5
5
  "--cui-kbd-foreground",
6
6
  "--cui-kbd-border-color",
7
- "--cui-kbd-shadow"
7
+ "--cui-kbd-shadow",
8
+ "--cui-kbd-padding-inline",
9
+ "--cui-kbd-font-size",
10
+ "--cui-kbd-font-weight"
8
11
  ];
9
12
  //#endregion
10
13
  export { kbdKnobs };
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/page-layout-knobs.d.ts
2
- 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"];
2
+ 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"];
3
3
  export type PageLayoutKnobStyle = Partial<Record<(typeof pageLayoutKnobs)[number], string>>;
4
4
  //#endregion
@@ -11,6 +11,7 @@ const pageLayoutKnobs = [
11
11
  "--cui-page-layout-header-row-gap",
12
12
  "--cui-page-layout-size",
13
13
  "--cui-page-layout-sticky-gap",
14
+ "--cui-page-layout-floating-inset",
14
15
  "--cui-page-layout-background",
15
16
  "--cui-page-layout-sticky-header-background",
16
17
  "--cui-page-layout-sticky-header-backdrop-filter"
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/pagination-knobs.d.ts
2
- 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"];
2
+ 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"];
3
3
  export type PaginationKnobStyle = Partial<Record<(typeof paginationKnobs)[number], string>>;
4
4
  //#endregion
@@ -4,7 +4,8 @@ const paginationKnobs = [
4
4
  "--cui-pagination-link-background",
5
5
  "--cui-pagination-link-hover-background",
6
6
  "--cui-pagination-link-foreground",
7
- "--cui-pagination-link-shadow"
7
+ "--cui-pagination-link-shadow",
8
+ "--cui-pagination-link-font-size"
8
9
  ];
9
10
  //#endregion
10
11
  export { paginationKnobs };
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/popup-knobs.d.ts
2
- 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"];
2
+ 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"];
3
3
  export type PopupKnobStyle = Partial<Record<(typeof popupKnobs)[number], string>>;
4
4
  //#endregion
@@ -17,6 +17,15 @@ const popupKnobs = [
17
17
  "--cui-popup-separator-inset",
18
18
  "--cui-popup-shortcut-font-size",
19
19
  "--cui-popup-shortcut-letter-spacing",
20
+ "--cui-popup-separator-gap",
21
+ "--cui-popup-submenu-indicator-foreground",
22
+ "--cui-popup-command-heading-padding-block",
23
+ "--cui-popup-command-heading-padding-inline",
24
+ "--cui-popup-command-heading-font-size",
25
+ "--cui-popup-command-heading-letter-spacing",
26
+ "--cui-popup-command-heading-text-transform",
27
+ "--cui-popup-dialog-max-inline-size",
28
+ "--cui-popup-tooltip-arrow-radius",
20
29
  "--cui-popup-status-success-foreground",
21
30
  "--cui-popup-status-warning-foreground",
22
31
  "--cui-popup-status-info-foreground",
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/range-knobs.d.ts
2
- 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"];
2
+ 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"];
3
3
  export type RangeKnobStyle = Partial<Record<(typeof rangeKnobs)[number], string>>;
4
4
  //#endregion
@@ -11,6 +11,8 @@ const rangeKnobs = [
11
11
  "--cui-range-indicator-radius",
12
12
  "--cui-range-indicator-background",
13
13
  "--cui-range-thumb-radius",
14
+ "--cui-range-thumb-inline-size",
15
+ "--cui-range-thumb-block-size",
14
16
  "--cui-range-thumb-background",
15
17
  "--cui-range-thumb-border-color",
16
18
  "--cui-range-thumb-shadow"
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/sidebar-knobs.d.ts
2
- 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"];
2
+ 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"];
3
3
  export type SidebarKnobStyle = Partial<Record<(typeof sidebarKnobs)[number], string>>;
4
4
  //#endregion
@@ -13,6 +13,8 @@ const sidebarKnobs = [
13
13
  "--cui-sidebar-menu-badge-height",
14
14
  "--cui-sidebar-menu-badge-background",
15
15
  "--cui-sidebar-menu-badge-foreground",
16
+ "--cui-sidebar-header-border-width",
17
+ "--cui-sidebar-header-border-color",
16
18
  "--cui-sidebar-rail-divider-background",
17
19
  "--cui-sidebar-wrapper-background",
18
20
  "--cui-sidebar-wrapper-background-image",
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/tabs-knobs.d.ts
2
- 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"];
2
+ 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"];
3
3
  export type TabsKnobStyle = Partial<Record<(typeof tabsKnobs)[number], string>>;
4
4
  //#endregion
@@ -3,12 +3,15 @@ const tabsKnobs = [
3
3
  "--cui-tabs-surface-background",
4
4
  "--cui-tabs-surface-radius",
5
5
  "--cui-tabs-trigger-radius",
6
+ "--cui-tabs-trigger-height",
6
7
  "--cui-tabs-list-padding",
7
8
  "--cui-tabs-list-radius",
8
9
  "--cui-tabs-list-background",
9
10
  "--cui-tabs-list-backdrop-filter",
10
11
  "--cui-tabs-indicator-background",
11
12
  "--cui-tabs-foreground",
13
+ "--cui-tabs-font-size",
14
+ "--cui-tabs-font-weight",
12
15
  "--cui-tabs-active-foreground",
13
16
  "--cui-tabs-hover-foreground",
14
17
  "--cui-tabs-indicator-shadow",
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/timeline-knobs.d.ts
2
- 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"];
2
+ 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"];
3
3
  export type TimelineKnobStyle = Partial<Record<(typeof timelineKnobs)[number], string>>;
4
4
  //#endregion
@@ -7,7 +7,10 @@ const timelineKnobs = [
7
7
  "--cui-timeline-success-foreground",
8
8
  "--cui-timeline-error-foreground",
9
9
  "--cui-timeline-separator-background",
10
- "--cui-timeline-title-foreground"
10
+ "--cui-timeline-title-foreground",
11
+ "--cui-timeline-title-font-weight",
12
+ "--cui-timeline-item-padding-block",
13
+ "--cui-timeline-separator-inline-size"
11
14
  ];
12
15
  //#endregion
13
16
  export { timelineKnobs };
@@ -1,4 +1,4 @@
1
1
  //#region src/knob-contracts/tree-knobs.d.ts
2
- 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"];
2
+ 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"];
3
3
  export type TreeKnobStyle = Partial<Record<(typeof treeKnobs)[number], string>>;
4
4
  //#endregion
@@ -9,7 +9,9 @@ const treeKnobs = [
9
9
  "--cui-tree-item-trigger-font-size",
10
10
  "--cui-tree-item-trigger-selected-font-weight",
11
11
  "--cui-tree-indent-inset",
12
- "--cui-tree-item-trigger-background"
12
+ "--cui-tree-item-trigger-background",
13
+ "--cui-tree-guide-background",
14
+ "--cui-tree-guide-inline-size"
13
15
  ];
14
16
  //#endregion
15
17
  export { treeKnobs };
package/dist/skin.d.ts CHANGED
@@ -40,6 +40,8 @@ export type ControlUiSkin = {
40
40
  scrollAreaBlur?: boolean;
41
41
  scrollAreaScrollbarVisibility?: "scroll" | "hover" | "always";
42
42
  scrollAreaScrollbarGutter?: "auto" | "stable";
43
+ selectAlignItemWithTrigger?: boolean;
44
+ calendarShowOutsideDays?: boolean;
43
45
  indicators?: SkinIndicators;
44
46
  effects?: ControlEffect[];
45
47
  adornments?: { [Scope in SkinAdornmentScope]?: { [Part in SkinAdornmentPart<Scope>]?: AdornmentEntry<SkinAdornmentContexts[Scope][Part]>; }; };
@@ -22,7 +22,6 @@
22
22
  @import "./recipes/sidebar-mobile.css";
23
23
  @import "./recipes/sidebar-parts.css";
24
24
  @import "./recipes/timeline.css";
25
- @import "./type-scale.css";
26
25
  @import "./recipes/alert.css";
27
26
  @import "./recipes/page-layout.css";
28
27
  @import "./recipes/app-shell-header.css";
@@ -49,6 +48,8 @@
49
48
  @import "./code.css";
50
49
  @import "./recipes/code.css";
51
50
  @import "./recipes/code-diff.css";
51
+ @import "./recipes/separator.css";
52
+ @import "./recipes/item.css";
52
53
  @import "./recipes/color-picker.css";
53
54
  @import "./recipes/color-picker-details.css";
54
55
  @import "./recipes/color-picker-values.css";
@@ -58,13 +59,11 @@
58
59
  @import "./recipes/toolbar.css";
59
60
  @import "./recipes/infinite-canvas.css";
60
61
  @import "./recipes/resizable.css";
61
- @import "./recipes/separator.css";
62
62
  @import "./recipes/kbd.css";
63
63
  @import "./recipes/markdown.css";
64
64
  @import "./recipes/label.css";
65
65
  @import "./recipes/markdown-editor.css";
66
66
  @import "./recipes/dockable-panel.css";
67
- @import "./recipes/item.css";
68
67
  @import "./recipes/dropzone.css";
69
68
  @import "./recipes/dynamic-notification.css";
70
69
  @import "./recipes/dynamic-notification-input.css";
@@ -109,6 +109,10 @@
109
109
  font-family: var(--font-mono);
110
110
  }
111
111
 
112
+ :where([data-control-family="activity"][data-slot="detail-content"][data-tone="destructive"]) {
113
+ color: var(--destructive-text);
114
+ }
115
+
112
116
  :where([data-control-family="activity"][data-slot="detail-content"][data-format="code"]) {
113
117
  padding-inline: calc(var(--spacing) * 2);
114
118
  padding-block: calc(var(--spacing) * 1.5);
@@ -8,6 +8,7 @@
8
8
  --cui-avatar-badge-foreground: var(--primary-foreground);
9
9
  inline-size: calc(var(--spacing) * 9);
10
10
  block-size: calc(var(--spacing) * 9);
11
+ font-size: var(--text-caption);
11
12
  }
12
13
 
13
14
  :where([data-control-family="avatar"][data-slot="root"]),
@@ -79,7 +80,6 @@
79
80
  border-radius: inherit;
80
81
  background: var(--cui-avatar-fallback-background);
81
82
  color: var(--cui-avatar-fallback-foreground);
82
- font-size: var(--text-caption);
83
83
  font-weight: var(--font-weight-medium);
84
84
  }
85
85
  }
@@ -6,17 +6,22 @@
6
6
  --cui-badge-background: var(--_badge-color-background);
7
7
  --cui-badge-foreground: var(--_badge-color-foreground);
8
8
  --cui-badge-border-color: transparent;
9
+ --cui-badge-border-width: 1px;
9
10
  --cui-badge-font-size: var(--text-caption);
11
+ --cui-badge-font-weight: var(--font-weight-medium);
10
12
  --_badge-color-background: var(--badge-neutral);
11
13
  --_badge-color-foreground: var(--badge-neutral-foreground);
12
14
  --_badge-color-border: var(--badge-neutral-border);
13
15
  --_badge-color-background-hover: var(--badge-neutral-hover);
14
16
  --_badge-hover-background: var(--_badge-color-background-hover);
17
+ border-style: solid;
18
+ border-width: var(--cui-badge-border-width);
15
19
  border-color: var(--cui-badge-border-color);
16
20
  border-radius: var(--cui-badge-radius);
17
21
  background: var(--cui-badge-background);
18
22
  color: var(--cui-badge-foreground);
19
23
  font-size: var(--cui-badge-font-size);
24
+ font-weight: var(--cui-badge-font-weight);
20
25
  font-variant-numeric: tabular-nums;
21
26
  }
22
27
 
@@ -113,8 +118,20 @@
113
118
  initial-value: transparent;
114
119
  }
115
120
 
121
+ @property --cui-badge-border-width {
122
+ syntax: "<length>";
123
+ inherits: true;
124
+ initial-value: 0px;
125
+ }
126
+
116
127
  @property --cui-badge-font-size {
117
128
  syntax: "<length-percentage>";
118
129
  inherits: true;
119
130
  initial-value: 0px;
120
131
  }
132
+
133
+ @property --cui-badge-font-weight {
134
+ syntax: "<number>";
135
+ inherits: true;
136
+ initial-value: 400;
137
+ }
@@ -31,6 +31,7 @@
31
31
  --cui-button-padding-inline: var(--padding-x);
32
32
  --cui-button-icon-padding-inline: max(0px, calc(var(--cui-button-padding-inline) - var(--spacing) * 0.5));
33
33
  --cui-button-font-size: var(--text-body);
34
+ --cui-button-font-weight: var(--font-weight-medium);
34
35
  --cui-button-background: transparent;
35
36
  --cui-button-background-image: none;
36
37
  --cui-button-foreground: var(--muted-foreground);
@@ -55,7 +56,7 @@
55
56
  box-shadow: var(--cui-button-shadow);
56
57
  color: var(--cui-button-foreground);
57
58
  cursor: pointer;
58
- font-weight: var(--font-weight-medium);
59
+ font-weight: var(--cui-button-font-weight);
59
60
  transition-property: scale, translate;
60
61
  transition-timing-function: var(--ease-standard);
61
62
  transition-duration: var(--duration-fast);
@@ -257,6 +258,12 @@
257
258
  initial-value: 0px;
258
259
  }
259
260
 
261
+ @property --cui-button-font-weight {
262
+ syntax: "<number>";
263
+ inherits: true;
264
+ initial-value: 400;
265
+ }
266
+
260
267
  @property --cui-button-background {
261
268
  syntax: "<color>";
262
269
  inherits: true;
@@ -6,12 +6,20 @@
6
6
  --cui-calendar-selected-background: var(--primary);
7
7
  --cui-calendar-selected-foreground: var(--primary-foreground);
8
8
  --cui-calendar-range-background: var(--accent);
9
+ --cui-calendar-day-size: calc(var(--spacing) * 9);
10
+ --cui-calendar-cell-padding: 0px;
11
+ --cui-calendar-today-shadow: none;
12
+ --cui-calendar-weekend-foreground: var(--foreground);
13
+ --cui-calendar-weekend-background: transparent;
14
+ --cui-calendar-caption-font-size: var(--text-body);
15
+ --cui-calendar-caption-font-weight: var(--font-weight-medium);
16
+ --cui-calendar-weekday-font-size: var(--text-caption);
9
17
  }
10
18
 
11
19
  :where([data-control-family="calendar"][data-slot="caption-label"]) {
12
20
  color: var(--foreground);
13
- font-size: var(--text-body);
14
- font-weight: var(--font-weight-medium);
21
+ font-size: var(--cui-calendar-caption-font-size);
22
+ font-weight: var(--cui-calendar-caption-font-weight);
15
23
  line-height: 1.4;
16
24
  }
17
25
 
@@ -31,7 +39,7 @@
31
39
  :where([data-control-family="calendar"][data-slot="weekday"]) {
32
40
  padding-block-end: calc(var(--spacing) * 1.5);
33
41
  color: var(--muted-foreground);
34
- font-size: var(--text-caption);
42
+ font-size: var(--cui-calendar-weekday-font-size);
35
43
  font-weight: var(--font-weight-normal);
36
44
  }
37
45
 
@@ -54,8 +62,8 @@
54
62
  }
55
63
 
56
64
  :where([data-control-family="calendar"][data-slot="day"]) {
57
- block-size: calc(var(--spacing) * 9);
58
- min-inline-size: calc(var(--spacing) * 9);
65
+ block-size: var(--cui-calendar-day-size);
66
+ min-inline-size: var(--cui-calendar-day-size);
59
67
  border-radius: var(--cui-calendar-day-radius);
60
68
  color: var(--foreground);
61
69
  font-size: var(--text-body);
@@ -64,6 +72,10 @@
64
72
  font-variant-numeric: tabular-nums;
65
73
  }
66
74
 
75
+ :where([data-control-family="calendar"][data-slot="day-cell"][data-weekend] > [data-slot="day"]) {
76
+ color: var(--cui-calendar-weekend-foreground);
77
+ }
78
+
67
79
  @media (hover: hover) {
68
80
  :where([data-control-family="calendar"][data-slot="day"]:hover:not(:disabled, [aria-disabled="true"])) {
69
81
  background-color: var(--accent);
@@ -74,6 +86,7 @@
74
86
  :where([data-control-family="calendar"][data-slot="day"][data-today]) {
75
87
  background-color: var(--cui-calendar-today-background);
76
88
  color: var(--accent-foreground);
89
+ box-shadow: var(--cui-calendar-today-shadow);
77
90
  font-weight: var(--font-weight-medium);
78
91
  }
79
92
 
@@ -101,12 +114,28 @@
101
114
  }
102
115
 
103
116
  :where([data-control-family="calendar"][data-slot="day-cell"]) {
117
+ padding: var(--cui-calendar-cell-padding);
104
118
  text-align: center;
105
119
  }
106
120
 
121
+ :where([data-control-family="calendar"][data-slot="day-cell"][data-weekend]) {
122
+ background-color: var(--cui-calendar-weekend-background);
123
+ }
124
+
125
+ :where([data-control-family="calendar"][data-slot="month-grid"] > tbody > tr:first-child > [data-slot="day-cell"][data-weekend]) {
126
+ border-start-start-radius: calc(var(--cui-calendar-cell-padding) * 2);
127
+ border-start-end-radius: calc(var(--cui-calendar-cell-padding) * 2);
128
+ }
129
+
130
+ :where([data-control-family="calendar"][data-slot="month-grid"] > tbody > tr:last-child > [data-slot="day-cell"][data-weekend]) {
131
+ border-end-start-radius: calc(var(--cui-calendar-cell-padding) * 2);
132
+ border-end-end-radius: calc(var(--cui-calendar-cell-padding) * 2);
133
+ }
134
+
107
135
  :where([data-control-family="calendar"][data-slot="month-grid"]) {
108
136
  margin-block-start: calc(var(--spacing) * 1);
109
- border-collapse: collapse;
137
+ border-collapse: separate;
138
+ border-spacing: 0;
110
139
  }
111
140
 
112
141
  @media (pointer: coarse) {
@@ -159,3 +188,50 @@
159
188
  inherits: true;
160
189
  initial-value: transparent;
161
190
  }
191
+
192
+ @property --cui-calendar-day-size {
193
+ syntax: "<length-percentage>";
194
+ inherits: true;
195
+ initial-value: 0px;
196
+ }
197
+
198
+ @property --cui-calendar-cell-padding {
199
+ syntax: "<length-percentage>";
200
+ inherits: true;
201
+ initial-value: 0px;
202
+ }
203
+
204
+ @property --cui-calendar-today-shadow {
205
+ syntax: "*";
206
+ inherits: true;
207
+ }
208
+
209
+ @property --cui-calendar-weekend-foreground {
210
+ syntax: "<color>";
211
+ inherits: true;
212
+ initial-value: transparent;
213
+ }
214
+
215
+ @property --cui-calendar-weekend-background {
216
+ syntax: "<color>";
217
+ inherits: true;
218
+ initial-value: transparent;
219
+ }
220
+
221
+ @property --cui-calendar-caption-font-size {
222
+ syntax: "<length-percentage>";
223
+ inherits: true;
224
+ initial-value: 0px;
225
+ }
226
+
227
+ @property --cui-calendar-caption-font-weight {
228
+ syntax: "<number>";
229
+ inherits: true;
230
+ initial-value: 400;
231
+ }
232
+
233
+ @property --cui-calendar-weekday-font-size {
234
+ syntax: "<length-percentage>";
235
+ inherits: true;
236
+ initial-value: 0px;
237
+ }
@@ -6,6 +6,10 @@
6
6
  --cui-card-border-width: var(--control-rim-width);
7
7
  --cui-card-shadow: var(--shadow-sm);
8
8
  --cui-card-backdrop-filter: none;
9
+ --cui-card-padding-block: calc(var(--spacing) * 6);
10
+ --cui-card-padding-inline: calc(var(--spacing) * 6);
11
+ --cui-card-gap: calc(var(--spacing) * 6);
12
+ --cui-card-title-font-size: 1em;
9
13
  border: var(--cui-card-border-width) solid var(--cui-card-border-color);
10
14
  border-radius: var(--cui-card-radius);
11
15
  background: var(--cui-card-background);
@@ -13,21 +17,27 @@
13
17
  box-shadow: var(--cui-card-shadow);
14
18
  -webkit-backdrop-filter: var(--cui-card-backdrop-filter);
15
19
  backdrop-filter: var(--cui-card-backdrop-filter);
16
- gap: calc(var(--spacing) * 6);
17
- padding-block: calc(var(--spacing) * 6);
20
+ gap: var(--cui-card-gap);
21
+ padding-block: var(--cui-card-padding-block);
18
22
  }
19
23
 
20
24
  :where([data-control-family="card"][data-slot="header"]) {
21
25
  gap: calc(var(--spacing) * 1.5);
22
- padding-inline: calc(var(--spacing) * 6);
26
+ padding-inline: var(--cui-card-padding-inline);
23
27
  }
24
28
 
25
29
  :where([data-control-family="card"][data-slot="content"]) {
26
- padding-inline: calc(var(--spacing) * 6);
30
+ padding-inline: var(--cui-card-padding-inline);
27
31
  }
28
32
 
29
33
  :where([data-control-family="card"][data-slot="footer"]) {
30
- padding-inline: calc(var(--spacing) * 6);
34
+ padding-inline: var(--cui-card-padding-inline);
35
+ }
36
+
37
+ :where([data-control-family="card"][data-slot="root"][data-size="sm"]) {
38
+ --cui-card-padding-block: calc(var(--spacing) * 3);
39
+ --cui-card-padding-inline: calc(var(--spacing) * 4);
40
+ --cui-card-gap: calc(var(--spacing) * 3);
31
41
  }
32
42
 
33
43
  :where([data-control-family="card"][data-slot="root"][data-variant="sectioned"]) {
@@ -46,6 +56,7 @@
46
56
  }
47
57
 
48
58
  :where([data-control-family="card"][data-slot="title"]) {
59
+ font-size: var(--cui-card-title-font-size);
49
60
  font-weight: var(--font-weight-semibold);
50
61
  line-height: var(--leading-tight);
51
62
  text-wrap: balance;
@@ -91,3 +102,27 @@
91
102
  syntax: "*";
92
103
  inherits: true;
93
104
  }
105
+
106
+ @property --cui-card-padding-block {
107
+ syntax: "<length-percentage>";
108
+ inherits: true;
109
+ initial-value: 0px;
110
+ }
111
+
112
+ @property --cui-card-padding-inline {
113
+ syntax: "<length-percentage>";
114
+ inherits: true;
115
+ initial-value: 0px;
116
+ }
117
+
118
+ @property --cui-card-gap {
119
+ syntax: "<length-percentage>";
120
+ inherits: true;
121
+ initial-value: 0px;
122
+ }
123
+
124
+ @property --cui-card-title-font-size {
125
+ syntax: "<length-percentage>";
126
+ inherits: true;
127
+ initial-value: 0px;
128
+ }