@ctrl-ui/react 0.8.20 → 0.9.0

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

@@ -1,7 +1,7 @@
 @layer components {
   :where([data-control-family="color-picker"][data-slot="trigger"]) {
-    inline-size: calc(var(--spacing) * 8);
-    block-size: calc(var(--spacing) * 8);
+    inline-size: var(--control-h-sm);
+    block-size: var(--control-h-sm);
   }
 
   :where(
@@ -20,17 +20,43 @@
     padding: var(--_color-picker-surface-padding);
   }
 
-  :where([data-control-family="color-picker"][data-slot="hue-track"]),
-  :where([data-control-family="color-picker"][data-slot="alpha-track"]) {
-    block-size: calc(var(--spacing) * 3);
+  :where([data-control-family="color-picker"][data-slot="slider-track"]),
+  :where([data-control-family="color-picker"][data-slot="trigger-checker"]),
+  :where([data-control-family="color-picker"][data-slot="swatch-checker"]),
+  :where([data-control-family="color-picker"][data-slot="output-checker"]) {
+    --_color-picker-checker-image: repeating-conic-gradient(var(--border) 0 25%, transparent 0 50%);
+    --_color-picker-checker-size: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2.5);
+    background-image: var(--_color-picker-checker-image);
+    background-size: var(--_color-picker-checker-size);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="slider-track"]) {
+    block-size: var(--_color-picker-thumb-size);
+    border-radius: 9999px;
+    background-image: var(--_color-picker-slider-track-image), var(--_color-picker-checker-image);
+    background-size: auto, var(--_color-picker-checker-size);
+    box-shadow: inset 0 0 0 var(--control-rim-width) oklch(from var(--foreground) l c h / 0.1);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="slider-thumb"]),
+  :where([data-control-family="color-picker"][data-slot="area-thumb"]),
+  :where([data-control-family="color-picker"][data-slot="wheel-thumb"]) {
+    inline-size: var(--_color-picker-thumb-size);
+    block-size: var(--_color-picker-thumb-size);
+    border: 2px solid oklch(1 0 0);
+    --_color-picker-thumb-elevation: var(--shadow-sm);
+    box-shadow:
+      inset 0 0 0 1px oklch(0 0 0 / 0.15),
+      0 0 0 1px oklch(0 0 0 / 0.15),
+      var(--_color-picker-thumb-elevation);
+    transition-property: scale, box-shadow;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
   }
 
-  :where([data-control-family="color-picker"][data-slot="hue-thumb"]),
-  :where([data-control-family="color-picker"][data-slot="alpha-thumb"]),
   :where([data-control-family="color-picker"][data-slot="area-thumb"]),
   :where([data-control-family="color-picker"][data-slot="wheel-thumb"]) {
-    inline-size: calc(var(--spacing) * 4);
-    block-size: calc(var(--spacing) * 4);
+    border-radius: 9999px;
   }
 
   :where([data-control-family="color-picker"][data-slot="swatch"]),
@@ -54,96 +80,88 @@
 
   :where([data-control-family="color-picker"][data-slot="trigger"]),
   :where([data-control-family="color-picker"][data-slot="area"]),
-  :where([data-control-family="color-picker"][data-slot="hue"]),
-  :where([data-control-family="color-picker"][data-slot="alpha"]),
+  :where([data-control-family="color-picker"][data-slot="slider"]),
   :where([data-control-family="color-picker"][data-slot="wheel"]),
   :where([data-control-family="color-picker"][data-slot="swatch"]),
   :where([data-control-family="color-picker"][data-slot="output"]) {
     --cui-color-picker-area-radius: var(--radius-field);
     --cui-color-picker-output-swatch-radius: var(--radius-md);
     --cui-color-picker-slider-thumb-background: transparent;
-    --cui-color-picker-slider-thumb-radius: calc(infinity * 1px);
+    --cui-color-picker-slider-thumb-radius: 9999px;
     --cui-color-picker-swatch-radius: var(--radius-md);
     --cui-color-picker-trigger-radius: var(--radius-control);
-    --cui-color-picker-trigger-shadow: inset 0 0 0 1px var(--border);
-  }
-  :where([data-control-family="color-picker"][data-slot="hue"]),
-  :where([data-control-family="color-picker"][data-slot="alpha"]) {
-    block-size: calc(var(--spacing) * 4);
-    --_color-picker-slider-thumb-scale: 1;
-    --_color-picker-slider-thumb-transition-property: scale;
+    --cui-color-picker-trigger-shadow: inset 0 0 0 var(--control-rim-width) var(--control-rim);
+    --_color-picker-thumb-size: calc(var(--spacing) * 4);
   }
 
-  :where([data-control-family="color-picker"][data-slot="hue-thumb"]),
-  :where([data-control-family="color-picker"][data-slot="alpha-thumb"]) {
-    border-radius: var(--cui-color-picker-slider-thumb-radius);
-    border-width: 2px;
-    border-style: solid;
-    border-color: var(--color-white);
-    background: var(--cui-color-picker-slider-thumb-background);
-    box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.35);
-    transition-property: var(--_color-picker-slider-thumb-transition-property);
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
-    scale: var(--_color-picker-slider-thumb-scale);
+  :where([data-control-family="color-picker"][data-slot="slider"]) {
+    block-size: var(--_color-picker-thumb-size);
+    min-inline-size: calc(var(--spacing) * 24);
   }
 
-  :where([data-control-family="color-picker"][data-slot="hue-thumb"][data-dragging]),
-  :where([data-control-family="color-picker"][data-slot="alpha-thumb"][data-dragging]) {
-    --_color-picker-slider-thumb-scale: 110% 110%;
+  :where([data-control-family="color-picker"][data-slot="slider"][data-disabled]) {
+    opacity: var(--disabled-opacity);
   }
 
-  @media (pointer: coarse) {
-    :where([data-control-family="color-picker"]:is([data-slot="hue-thumb"], [data-slot="alpha-thumb"], [data-slot="swatch-add"]))::after {
-      content: "";
-      position: absolute;
-      inset: 50%;
-      translate: -50% -50%;
-      inline-size: max(100%, var(--touch-target));
-      block-size: max(100%, var(--touch-target));
-    }
+  :where([data-control-family="color-picker"][data-slot="slider-thumb"]) {
+    border-radius: var(--cui-color-picker-slider-thumb-radius);
+    background: var(--cui-color-picker-slider-thumb-background);
   }
 
-  :where([data-control-family="color-picker"][data-slot="wheel-thumb"]) {
-    border-radius: calc(infinity * 1px);
-    border-style: solid;
-    border-width: 2px;
-    border-color: var(--color-white);
-    box-shadow: var(--_color-picker-wheel-thumb-shadow);
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="color-picker"][data-slot="slider-thumb"]:hover:not([data-disabled])) {
+      scale: 1.1;
+    }
   }
 
-  :where([data-control-family="color-picker"][data-slot="wheel"]) {
-    border-radius: calc(infinity * 1px);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent);
-    --_color-picker-wheel-thumb-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.4);
+  :where([data-control-family="color-picker"][data-slot="slider-thumb"][data-dragging]),
+  :where(
+    [data-control-family="color-picker"][data-slot="area"][data-dragging] [data-control-family="color-picker"][data-slot="area-thumb"]
+  ),
+  :where(
+    [data-control-family="color-picker"][data-slot="wheel"][data-dragging] [data-control-family="color-picker"][data-slot="wheel-thumb"]
+  ) {
+    scale: 1.1;
+    --_color-picker-thumb-elevation: var(--shadow-md);
   }
 
-  :where([data-control-family="color-picker"][data-slot="alpha-track"]) {
-    border-radius: calc(infinity * 1px);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 50%, transparent);
+  :where([data-control-family="color-picker"]:is([data-slot="slider-thumb"], [data-slot="swatch-add"]))::after {
+    content: "";
+    position: absolute;
+    inset: 50%;
+    translate: -50% -50%;
+    inline-size: max(100%, var(--target-min));
+    block-size: max(100%, var(--target-min));
   }
 
-  :where([data-control-family="color-picker"][data-slot="hue-track"]) {
-    border-radius: calc(infinity * 1px);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 50%, transparent);
+  @media (pointer: coarse) {
+    :where([data-control-family="color-picker"]:is([data-slot="slider-thumb"], [data-slot="swatch-add"]))::after {
+      inline-size: max(100%, var(--touch-target));
+      block-size: max(100%, var(--touch-target));
+    }
   }
 
-  :where([data-control-family="color-picker"][data-slot="area-thumb"]) {
-    border-radius: calc(infinity * 1px);
-    border-style: solid;
-    border-width: 2px;
-    border-color: var(--color-white);
-    transition-property: box-shadow;
-    transition-timing-function: var(--ease-standard);
-    transition-duration: var(--duration-fast);
-    box-shadow: var(--_color-picker-area-thumb-shadow);
+  :where([data-control-family="color-picker"][data-slot="wheel"]) {
+    border-radius: 9999px;
+    background-image:
+      linear-gradient(oklch(0 0 0 / var(--_color-picker-wheel-shade, 0)) 0 0),
+      radial-gradient(closest-side in srgb, oklch(1 0 0), oklch(1 0 0 / 0)),
+      conic-gradient(
+        from 90deg,
+        hsl(0 100% 50%),
+        hsl(60 100% 50%),
+        hsl(120 100% 50%),
+        hsl(180 100% 50%),
+        hsl(240 100% 50%),
+        hsl(300 100% 50%),
+        hsl(360 100% 50%)
+      );
+    box-shadow: inset 0 0 0 var(--control-rim-width) oklch(from var(--foreground) l c h / 0.1);
   }
 
   :where([data-control-family="color-picker"][data-slot="area"]) {
     block-size: calc(var(--spacing) * 40);
     border-radius: min(var(--cui-color-picker-area-radius), var(--_color-picker-area-radius-cap, 9999px));
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent);
-    --_color-picker-area-thumb-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.4);
   }
 }
 

package/dist/styles/recipes/context.css

@@ -183,13 +183,13 @@
 }
 
 @property --cui-context-graph-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-context-legend-indicator-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

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

@@ -11,6 +11,7 @@
     --cui-dockable-panel-border-color: oklch(from var(--border) l c h / 0.8);
     --cui-dockable-panel-border-width: var(--control-rim-width);
     --cui-dockable-panel-shadow: var(--shadow-pop);
+    --cui-dockable-panel-drop-zone-background: oklch(from var(--background) l c h / 0.12);
     --cui-dockable-panel-drop-zone-active-background: oklch(from var(--primary) l c h / 0.12);
     --cui-dockable-panel-drop-zone-active-border-color: oklch(from var(--primary) l c h / 0.55);
     border: var(--cui-dockable-panel-border-width) solid var(--cui-dockable-panel-border-color);
@@ -21,7 +22,7 @@
   }
 
   :where([data-control-family="dockable-panel"][data-slot="root"][data-dragging]) {
-    box-shadow: var(--shadow-modal);
+    --cui-dockable-panel-shadow: var(--shadow-modal);
   }
 
   :where([data-control-family="dockable-panel"][data-slot="header"]) {
@@ -61,7 +62,7 @@
 
   :where([data-control-family="dockable-panel"][data-slot="drop-zone"]) {
     border-radius: var(--radius-panel);
-    background-color: oklch(from var(--background) l c h / 0.12);
+    background-color: var(--cui-dockable-panel-drop-zone-background);
     box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.2);
     transition-property: background-color, box-shadow;
     transition-duration: var(--duration-fast);
@@ -122,3 +123,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-dockable-panel-drop-zone-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/dynamic-notification-motion.css

@@ -222,68 +222,14 @@
 @property --cui-dynamic-notification-content-easing {
   syntax: "*";
   inherits: true;
-  initial-value: linear(
-    0,
-    0.0553 4.55%,
-    0.1795 9.09%,
-    0.328 13.64%,
-    0.4745 18.18%,
-    0.6054 22.73%,
-    0.7148 27.27%,
-    0.8017 31.82%,
-    0.868 36.36%,
-    0.9166 40.91%,
-    0.9509 45.45%,
-    0.9741 50%,
-    0.9891 54.55%,
-    0.9982 59.09%,
-    1.0032 63.64%,
-    1.0056 68.18%,
-    1.0063 72.73%,
-    1.006 77.27%,
-    1.0053 81.82%,
-    1.0044 86.36%,
-    1.0034 90.91%,
-    1.0026 95.45%,
-    1
-  );
 }
 
 @property --cui-dynamic-notification-expanded-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 @property --cui-dynamic-notification-morph-easing {
   syntax: "*";
   inherits: true;
-  initial-value: linear(
-    0,
-    0.0568 3.85%,
-    0.1888 7.69%,
-    0.351 11.54%,
-    0.5142 15.38%,
-    0.6608 19.23%,
-    0.7824 23.08%,
-    0.8767 26.92%,
-    0.9449 30.77%,
-    0.9908 34.62%,
-    1.0187 38.46%,
-    1.0332 42.31%,
-    1.0382 46.15%,
-    1.0372 50%,
-    1.0327 53.85%,
-    1.0266 57.69%,
-    1.0203 61.54%,
-    1.0145 65.38%,
-    1.0095 69.23%,
-    1.0056 73.08%,
-    1.0027 76.92%,
-    1.0008 80.77%,
-    0.9995 84.62%,
-    0.9988 88.46%,
-    0.9986 92.31%,
-    0.9985 96.15%,
-    1
-  );
 }

package/dist/styles/recipes/dynamic-notification.css

@@ -205,7 +205,6 @@
 @property --cui-dynamic-notification-liquid-text-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-dynamic-notification-surface-background {

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

@@ -2,10 +2,12 @@
   :where([data-control-family="emoji-picker"][data-slot="root"]) {
     --cui-emoji-picker-cell-size: calc(var(--spacing) * 10);
     --cui-emoji-picker-cell-radius: var(--radius-control);
+    --cui-emoji-picker-glyph-size: 1.25rem;
     --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-height: 22rem;
+    --_emoji-picker-recent-block-size: 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);
@@ -30,6 +32,9 @@
     border-radius: var(--cui-emoji-picker-cell-radius);
     color: var(--muted-foreground);
     cursor: pointer;
+    transition:
+      color var(--duration-fast) var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard);
   }
   :where([data-control-family="emoji-picker"][data-slot="category"]:hover) {
     color: var(--foreground);
@@ -39,18 +44,26 @@
     inline-size: calc(var(--spacing) * 4);
     block-size: calc(var(--spacing) * 4);
   }
-  :where([data-control-family="emoji-picker"][data-slot="recent"]) {
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
-  }
   :where([data-control-family="emoji-picker"][data-slot="recent-label"]) {
-    color: var(--muted-foreground);
-    font-size: var(--text-caption);
-    padding-inline: calc(var(--spacing) * 1);
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    block-size: var(--frimousse-category-header-height, auto);
   }
   :where([data-control-family="emoji-picker"]:is([data-slot="recent-grid"], [data-variant="reactions"])) {
     display: flex;
   }
+  :where([data-control-family="emoji-picker"][data-slot="recent-grid"]) {
+    block-size: var(--frimousse-row-height, auto);
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="root"]:has([data-slot="recent"])) {
+    --_emoji-picker-recent-block-size: calc(var(--frimousse-category-header-height) + var(--frimousse-row-height));
+  }
+  :where([data-control-family="emoji-picker"][data-slot="root"]:has(input:not(:placeholder-shown))) {
+    --_emoji-picker-recent-block-size: 0px;
+  }
   :where(
     [data-control-family="emoji-picker"][data-slot="root"]:has(input:not(:placeholder-shown))
       :is([data-slot="categories"], [data-slot="recent"])
@@ -104,12 +117,6 @@
     color: var(--muted-foreground);
   }
 
-  :where([data-control-family="emoji-picker"][data-slot="content"]) {
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    scrollbar-width: thin;
-  }
-
   :where([data-control-family="emoji-picker"][data-slot="loading"]),
   :where([data-control-family="emoji-picker"][data-slot="empty"]) {
     color: var(--muted-foreground);
@@ -120,7 +127,7 @@
     padding-block-end: calc(var(--spacing) * 1);
   }
 
-  :where([data-control-family="emoji-picker"][data-slot="category-header"]) {
+  :where([data-control-family="emoji-picker"]:is([data-slot="category-header"], [data-slot="recent-label"])) {
     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);
@@ -130,6 +137,7 @@
 
   :where([data-control-family="emoji-picker"][data-slot="row"]) {
     padding-inline: calc(var(--spacing) * 1.5);
+    scroll-margin-block: var(--spacing) calc(var(--spacing) + var(--_emoji-picker-recent-block-size));
   }
 
   :where([data-control-family="emoji-picker"][data-slot="emoji"]) {
@@ -137,12 +145,14 @@
     block-size: var(--cui-emoji-picker-cell-size);
     border-radius: var(--cui-emoji-picker-cell-radius);
     background: transparent;
-    font-size: 1.25rem;
+    font-size: var(--cui-emoji-picker-glyph-size);
     line-height: 1;
     cursor: default;
+    transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
-  :where([data-control-family="emoji-picker"][data-slot="emoji"][data-active]) {
+  :where([data-control-family="emoji-picker"][data-slot="emoji"][data-active]),
+  :where([data-control-family="emoji-picker"][data-variant="reactions"] > [data-slot="emoji"]:hover) {
     background: var(--cui-emoji-picker-active-background);
   }
 
@@ -156,7 +166,7 @@
   }
 
   :where([data-control-family="emoji-picker"][data-slot="footer-emoji"]) {
-    font-size: 1.25rem;
+    font-size: var(--cui-emoji-picker-glyph-size);
     line-height: 1;
   }
 
@@ -179,13 +189,13 @@
 }
 
 @property --cui-emoji-picker-cell-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-emoji-picker-height {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -196,6 +206,12 @@
   initial-value: 0px;
 }
 
+@property --cui-emoji-picker-glyph-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-emoji-picker-active-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/empty.css

@@ -7,6 +7,7 @@
     --cui-empty-border-style: solid;
     --cui-empty-media-radius: var(--radius-lg);
     --cui-empty-media-background: var(--muted);
+    --cui-empty-media-background-image: none;
     --cui-empty-shadow: none;
     --cui-empty-foreground: var(--foreground);
     --cui-empty-description-foreground: var(--muted-foreground);
@@ -36,7 +37,8 @@
     inline-size: var(--cui-empty-media-size);
     block-size: var(--cui-empty-media-size);
     border-radius: var(--cui-empty-media-radius);
-    background: var(--cui-empty-media-background);
+    background-color: var(--cui-empty-media-background);
+    background-image: var(--cui-empty-media-background-image);
     color: var(--cui-empty-media-foreground);
   }
 
@@ -84,7 +86,7 @@
 }
 
 @property --cui-empty-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
@@ -104,7 +106,6 @@
 @property --cui-empty-border-style {
   syntax: "*";
   inherits: true;
-  initial-value: solid;
 }
 
 @property --cui-empty-media-radius {
@@ -114,7 +115,7 @@
 }
 
 @property --cui-empty-media-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
@@ -122,7 +123,6 @@
 @property --cui-empty-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-empty-foreground {
@@ -144,49 +144,49 @@
 }
 
 @property --cui-empty-padding {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-empty-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-empty-header-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-empty-content-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-empty-content-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-empty-media-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-empty-media-icon-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-empty-font-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -194,5 +194,10 @@
 @property --cui-empty-title-font-weight {
   syntax: "<number>";
   inherits: true;
-  initial-value: 500;
+  initial-value: 400;
+}
+
+@property --cui-empty-media-background-image {
+  syntax: "*";
+  inherits: true;
 }

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

@@ -13,7 +13,7 @@
 
   :where([data-control-family="field"][data-slot="root"][data-control="true"]:is(button, a)) {
     cursor: pointer;
-    color: var(--muted-foreground);
+    --cui-field-foreground: var(--muted-foreground);
     text-align: start;
   }
 
@@ -25,7 +25,7 @@
           [aria-disabled="true"]
         )
       ) {
-      color: var(--foreground);
+      --cui-field-foreground: var(--foreground);
     }
   }
 

package/dist/styles/recipes/field.css

@@ -235,13 +235,15 @@
 }
 
 @property --cui-field-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
+  initial-value: transparent;
 }
 
 @property --cui-field-hover-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
+  initial-value: transparent;
 }
 
 @property --cui-field-affordance-background {
@@ -258,7 +260,7 @@
 @property --cui-field-affordance-foreground {
   syntax: "<color>";
   inherits: true;
-  initial-value: currentcolor;
+  initial-value: transparent;
 }
 
 @property --cui-field-affordance-hover-background {
@@ -310,5 +312,5 @@
 @property --cui-field-font-size {
   syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 1rem;
+  initial-value: 0px;
 }