@ctrl-ui/react 0.9.6 → 0.9.9

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;

package/dist/styles/recipes/collapsible.css

@@ -2,6 +2,7 @@
   :where([data-control-family="collapsible"][data-slot="root"]) {
     --cui-collapsible-trigger-radius: var(--radius-control);
     --cui-collapsible-trigger-hover-background: var(--hover-fill);
+    --cui-collapsible-trigger-padding-inline: calc(var(--spacing) * 2);
   }
 
   :where([data-control-family="collapsible"][data-slot="trigger"]) {
@@ -11,7 +12,7 @@
     align-items: center;
     gap: calc(var(--spacing) * 2);
     border-radius: var(--cui-collapsible-trigger-radius);
-    padding-inline: calc(var(--spacing) * 2);
+    padding-inline: var(--cui-collapsible-trigger-padding-inline);
     color: var(--foreground);
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
@@ -79,3 +80,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-collapsible-trigger-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

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

@@ -1,4 +1,8 @@
 @layer components {
+  :where([data-control-family="color-picker"][data-slot="output"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
   :where([data-control-family="color-picker"][data-slot="output-value"]) {
     font-family: var(--font-mono);
     font-size: var(--text-caption);

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

@@ -6,11 +6,19 @@
     --cui-emoji-picker-active-background: var(--accent);
     --cui-emoji-picker-header-background: var(--popover);
     --cui-emoji-picker-header-foreground: var(--muted-foreground);
+    --cui-emoji-picker-header-font-size: var(--text-caption);
+    --cui-emoji-picker-search-font-size: var(--text-label);
     --cui-emoji-picker-height: 22rem;
     --_emoji-picker-recent-block-size: 0px;
+    --_emoji-picker-touch-min: 0px;
   }
   :where([data-control-family="emoji-picker"][data-slot="root"]:not([data-variant="reactions"])) {
-    inline-size: calc(var(--_emoji-picker-columns) * var(--cui-emoji-picker-cell-size) + var(--spacing) * 4);
+    inline-size: calc(
+      var(--_emoji-picker-columns) *
+      max(var(--cui-emoji-picker-cell-size), var(--_emoji-picker-touch-min)) +
+      var(--spacing) *
+      4
+    );
     max-inline-size: 100%;
     block-size: var(--cui-emoji-picker-height);
     color: var(--foreground);
@@ -27,7 +35,8 @@
   :where([data-control-family="emoji-picker"][data-slot="category"]) {
     display: grid;
     place-items: center;
-    flex: 0 0 calc(var(--spacing) * 9);
+    flex: 0 1 calc(var(--spacing) * 9);
+    min-inline-size: 0;
     block-size: calc(var(--spacing) * 9);
     border-radius: var(--cui-emoji-picker-cell-radius);
     color: var(--muted-foreground);
@@ -109,7 +118,7 @@
     background: var(--control-fill);
     box-shadow: var(--shadow-inset);
     color: var(--foreground);
-    font-size: var(--text-label);
+    font-size: var(--cui-emoji-picker-search-font-size);
     --focus-ring-offset: calc(var(--focus-ring-width) * -1);
   }
 
@@ -131,7 +140,7 @@
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5) calc(var(--spacing) * 1);
     background: var(--cui-emoji-picker-header-background);
     color: var(--cui-emoji-picker-header-foreground);
-    font-size: var(--text-caption);
+    font-size: var(--cui-emoji-picker-header-font-size);
     font-weight: var(--font-weight-medium);
   }
 
@@ -141,8 +150,8 @@
   }
 
   :where([data-control-family="emoji-picker"][data-slot="emoji"]) {
-    inline-size: var(--cui-emoji-picker-cell-size);
-    block-size: var(--cui-emoji-picker-cell-size);
+    inline-size: max(var(--cui-emoji-picker-cell-size), var(--_emoji-picker-touch-min));
+    block-size: max(var(--cui-emoji-picker-cell-size), var(--_emoji-picker-touch-min));
     border-radius: var(--cui-emoji-picker-cell-radius);
     background: transparent;
     font-size: var(--cui-emoji-picker-glyph-size);
@@ -176,10 +185,10 @@
 
   @media (pointer: coarse) {
     :where([data-control-family="emoji-picker"][data-slot="root"]) {
-      --cui-emoji-picker-cell-size: 44px;
+      --_emoji-picker-touch-min: 44px;
     }
     :where([data-control-family="emoji-picker"][data-slot="category"]) {
-      flex-basis: 44px;
+      flex: 0 0 44px;
       block-size: 44px;
     }
     :where([data-control-family="emoji-picker"][data-slot="search-input"]) {
@@ -229,3 +238,15 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-emoji-picker-header-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-emoji-picker-search-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/empty.css

@@ -33,6 +33,11 @@
     overflow-wrap: anywhere;
   }
 
+  :where([data-control-family="empty"][data-slot="root"][data-variant="outline"]) {
+    --cui-empty-border-color: var(--border);
+    --cui-empty-border-style: dashed;
+  }
+
   :where([data-control-family="empty"][data-slot="media"]) {
     inline-size: var(--cui-empty-media-size);
     block-size: var(--cui-empty-media-size);

package/dist/styles/recipes/field-parts.css

@@ -173,8 +173,8 @@
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="label"]) {
     color: var(--foreground);
-    font-size: var(--text-label);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--cui-field-label-font-size);
+    font-weight: var(--cui-field-label-font-weight);
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="label"][data-disabled]) {
@@ -183,7 +183,7 @@
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="description"]) {
     color: var(--muted-foreground);
-    font-size: var(--text-caption);
+    font-size: var(--cui-field-description-font-size);
     text-wrap: pretty;
   }
 
@@ -193,21 +193,96 @@
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="separator"]) {
+    block-size: 1px;
     font-size: var(--text-caption);
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="separator-content"]) {
+    margin-inline: auto;
+    padding-inline: calc(var(--spacing) * 2);
     background-color: var(--background);
     color: var(--muted-foreground);
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="set"]) {
+    gap: calc(var(--spacing) * 4);
     border-width: 0px;
   }
 
+  :where([data-control-family="field"][data-field-kind="field"]) {
+    --cui-field-legend-font-size: var(--text-label);
+    --cui-field-legend-font-weight: var(--font-weight-semibold);
+  }
+
   :where([data-control-family="field"][data-field-kind="field"][data-slot="legend"]) {
     color: var(--foreground);
-    font-size: var(--text-label);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--cui-field-legend-font-size);
+    font-weight: var(--cui-field-legend-font-weight);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="legend"][data-variant="section"]) {
+    --cui-field-legend-font-size: var(--text-body);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="root"]) {
+    gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="group"]),
+  :where([data-control-family="field"][data-field-kind="form"][data-slot="root"]) {
+    gap: calc(var(--spacing) * 5);
   }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="group"][data-variant="card"]) {
+    gap: 0;
+    overflow: hidden;
+    border: var(--cui-field-group-border-width) solid var(--cui-field-group-border-color);
+    border-radius: var(--cui-field-group-radius);
+    background: var(--cui-field-group-background);
+    box-shadow: var(--cui-field-group-shadow);
+    --_field-group-padding-block: var(--cui-field-group-padding-block);
+    --_field-group-padding-inline: var(--cui-field-group-padding-inline);
+    --_field-group-separator-color: var(--cui-field-group-separator-color);
+    --_field-group-separator-inset: var(--cui-field-group-separator-inset);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="group"][data-variant="card"] > *) {
+    position: relative;
+    padding-block: var(--_field-group-padding-block);
+    padding-inline: var(--_field-group-padding-inline);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="group"][data-variant="card"] > * + *)::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: var(--_field-group-separator-inset);
+    block-size: 1px;
+    background: var(--_field-group-separator-color);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="item"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="separator"][data-content]) {
+    margin-block: calc(var(--spacing) * 2);
+    block-size: calc(var(--spacing) * 5);
+  }
+}
+
+@property --cui-field-legend-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-legend-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
 }

package/dist/styles/recipes/field.css

@@ -17,11 +17,15 @@
     --cui-field-height: var(--control-h-md);
     --cui-field-padding-inline: var(--padding-x);
     --cui-field-font-size: var(--text-body);
+    --cui-field-font-weight: 400;
+    --cui-field-font-family: var(--font-body);
     border: var(--cui-field-border-width) solid var(--cui-field-border-color);
     border-radius: var(--cui-field-radius);
     background: var(--cui-field-background);
     box-shadow: var(--cui-field-shadow);
     color: var(--cui-field-foreground);
+    font-family: var(--cui-field-font-family);
+    font-weight: var(--cui-field-font-weight);
     backdrop-filter: var(--cui-field-backdrop-filter);
   }
 
@@ -128,24 +132,28 @@
   }
   :where([data-control-family="field"][data-field-kind="select"][data-slot="trigger"]) {
     cursor: pointer;
-    font-weight: var(--font-weight-medium);
+    --cui-field-font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-field-font-weight);
   }
 
   :where([data-control-family="field"][data-field-kind="input-otp"][data-slot="slot"]) {
     text-align: center;
     font-size: var(--text-body);
-    font-weight: var(--font-weight-medium);
+    --cui-field-font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-field-font-weight);
     font-variant-numeric: tabular-nums;
   }
 
   :where([data-control-family="field"][data-field-kind="combobox"][data-slot="input"]) {
     padding-inline-end: calc(var(--spacing) * 9);
-    font-weight: var(--font-weight-medium);
+    --cui-field-font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-field-font-weight);
   }
 
   :where([data-control-family="field"][data-field-kind="native-select"][data-slot="root"]) {
     padding-inline-end: calc(var(--padding-x) * 1.4);
-    font-weight: var(--font-weight-medium);
+    --cui-field-font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-field-font-weight);
     appearance: none;
   }
 
@@ -172,13 +180,15 @@
   :where([data-control-family="field"][data-field-kind="number-field"][data-slot="input"]) {
     padding-inline: calc(var(--spacing) * 2);
     text-align: center;
-    font-weight: var(--font-weight-medium);
+    --cui-field-font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-field-font-weight);
     font-variant-numeric: tabular-nums;
   }
 
   :where([data-control-family="field"][data-field-kind="number-field"][data-slot="group"]) {
     padding-inline: 0;
-    font-weight: var(--font-weight-medium);
+    --cui-field-font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-field-font-weight);
   }
 
   :where([data-control-family="field"][data-field-kind="textarea"][data-slot="root"]) {
@@ -190,42 +200,23 @@
 
   :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="input"]) {
     padding-inline-end: calc(var(--spacing) * 9);
-    font-weight: var(--font-weight-medium);
+    --cui-field-font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-field-font-weight);
   }
 
-  :where([data-control-family="field"][data-field-kind="field"][data-slot="root"]) {
-    gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
-  }
-
-  :where([data-control-family="field"][data-field-kind="field"][data-slot="content"]) {
-    gap: calc(var(--spacing) * 1);
-  }
-
-  :where([data-control-family="field"][data-field-kind="field"][data-slot="group"]),
-  :where([data-control-family="field"][data-field-kind="form"][data-slot="root"]) {
-    gap: calc(var(--spacing) * 5);
-  }
-
-  :where([data-control-family="field"][data-field-kind="field"][data-slot="item"]) {
-    gap: calc(var(--spacing) * 2);
-  }
-
-  :where([data-control-family="field"][data-field-kind="field"][data-slot="set"]) {
-    gap: calc(var(--spacing) * 4);
-  }
-
-  :where([data-control-family="field"][data-field-kind="field"][data-slot="separator"]) {
-    block-size: 1px;
-  }
-
-  :where([data-control-family="field"][data-field-kind="field"][data-slot="separator"][data-content]) {
-    margin-block: calc(var(--spacing) * 2);
-    block-size: calc(var(--spacing) * 5);
-  }
-
-  :where([data-control-family="field"][data-field-kind="field"][data-slot="separator-content"]) {
-    margin-inline: auto;
-    padding-inline: calc(var(--spacing) * 2);
+  :where([data-control-family="field"][data-field-kind="field"]) {
+    --cui-field-label-font-size: var(--text-label);
+    --cui-field-label-font-weight: var(--font-weight-medium);
+    --cui-field-description-font-size: var(--text-caption);
+    --cui-field-group-radius: var(--radius-lg);
+    --cui-field-group-background: var(--card);
+    --cui-field-group-border-color: var(--border);
+    --cui-field-group-border-width: 1px;
+    --cui-field-group-shadow: 0 0 transparent;
+    --cui-field-group-padding-block: calc(var(--spacing) * 3);
+    --cui-field-group-padding-inline: calc(var(--spacing) * 4);
+    --cui-field-group-separator-color: var(--border);
+    --cui-field-group-separator-inset: 0px;
   }
 
   @media (pointer: coarse) {
@@ -321,3 +312,85 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-field-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-field-font-family {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-field-group-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-group-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-group-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-group-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-group-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-field-group-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-group-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-group-separator-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-group-separator-inset {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-label-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-label-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-field-description-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/item.css

@@ -1,13 +1,18 @@
 @layer components {
   :where([data-control-family="item"][data-slot="root"]) {
     --cui-item-radius: var(--radius-lg);
-    --cui-item-hover-background: transparent;
+    --cui-item-hover-background: var(--hover-fill);
+    --cui-item-current-background: var(--active-fill);
     --cui-item-hover-border-color: var(--_item-border-color);
     --cui-item-border-width: 0px;
     --cui-item-active-scale: 0.99;
     --cui-item-gap: calc(var(--spacing) * 3);
     --cui-item-padding-block: calc(var(--spacing) * 3);
     --cui-item-padding-inline: calc(var(--spacing) * 3);
+    --cui-item-description-font-size: var(--text-body);
+    --cui-item-description-line-height: var(--leading-relaxed);
+    --cui-item-description-foreground: var(--muted-foreground);
+    --cui-item-media-foreground: var(--muted-foreground);
     --_item-background: transparent;
     --_item-border-color: transparent;
     outline: var(--cui-item-border-width) solid var(--_item-border-color);
@@ -61,6 +66,10 @@
     --_item-background: oklch(from var(--muted) l c h / 0.5);
   }
 
+  :where([data-control-family="item"][data-slot="root"][aria-current]:not([aria-current="false"])) {
+    --_item-background: var(--cui-item-current-background);
+  }
+
   @media (hover: hover) {
     :where(
         [data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):not(
@@ -91,9 +100,9 @@
   }
 
   :where([data-control-family="item"][data-slot="description"]) {
-    font-size: var(--text-body);
-    line-height: var(--leading-relaxed);
-    color: var(--muted-foreground);
+    font-size: var(--cui-item-description-font-size);
+    line-height: var(--cui-item-description-line-height);
+    color: var(--cui-item-description-foreground);
     text-wrap: pretty;
   }
 
@@ -107,7 +116,7 @@
   }
 
   :where([data-control-family="item"][data-slot="media"]) {
-    color: var(--muted-foreground);
+    color: var(--cui-item-media-foreground);
   }
 }
 
@@ -123,6 +132,12 @@
   initial-value: transparent;
 }
 
+@property --cui-item-current-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-item-hover-border-color {
   syntax: "<color>";
   inherits: true;
@@ -158,3 +173,27 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-item-description-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-item-description-line-height {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1.5;
+}
+
+@property --cui-item-description-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-item-media-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/kbd.css

@@ -3,7 +3,10 @@
     block-size: calc(var(--spacing) * 5);
     min-inline-size: calc(var(--spacing) * 5);
     gap: calc(var(--spacing) * 1);
-    padding-inline: calc(var(--spacing) * 1.5);
+    padding-inline: var(--cui-kbd-padding-inline);
+    --cui-kbd-padding-inline: calc(var(--spacing) * 1.5);
+    --cui-kbd-font-size: var(--text-micro);
+    --cui-kbd-font-weight: var(--font-weight-medium);
     --cui-kbd-radius: var(--radius-control);
     --cui-kbd-background: oklch(from var(--card) l c h / 0.6);
     --cui-kbd-foreground: var(--muted-foreground);
@@ -15,17 +18,16 @@
       inset 0 0 0 var(--control-rim-width) var(--cui-kbd-border-color),
       var(--cui-kbd-shadow);
     color: var(--cui-kbd-foreground);
-    font-size: var(--text-micro);
+    font-size: var(--cui-kbd-font-size);
     font-family: var(--font-sans);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-kbd-font-weight);
   }
 
   :where([data-control-family="kbd"][data-slot="root"][data-variant="ghost"]) {
     min-inline-size: 0;
     padding-inline: 0;
-    --cui-kbd-background: transparent;
-    --cui-kbd-border-color: transparent;
-    --cui-kbd-shadow: 0 0 transparent;
+    background: transparent;
+    box-shadow: none;
   }
 
   @media (forced-colors: active) {
@@ -68,3 +70,21 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-kbd-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-kbd-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-kbd-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}

package/dist/styles/recipes/morphing-panel.css

@@ -93,7 +93,7 @@
     padding-inline-end: calc(var(--_morphing-panel-close-size) + var(--spacing) * 6);
   }
 
-  :where([data-control-family="morphing-panel"][data-slot="body"]) {
+  :where([data-control-family="morphing-panel"][data-slot="body"][data-padding="default"]) {
     padding: calc(var(--spacing) * 4);
   }