@womp/kookie-ui 0.29.0 → 0.29.1

package/components.css

@@ -5907,8 +5907,8 @@
   --text-field-focus-color: var(--focus-8);
   --text-field-border-width: 1px;
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 @media (hover: hover) {
   .kui-TextFieldRoot:where(.kui-variant-raised):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
@@ -6364,7 +6364,7 @@
   }
 }
 .kui-TextFieldGroup:where(.kui-variant-raised) {
-  --text-field-group-edge: var(--control-chrome);
+  --text-field-group-edge: var(--field-chrome);
   --text-field-group-divider: var(--neutral-a4);
 }
 .kui-TextFieldGroup:where(.kui-variant-raised):where([data-disabled]) {
@@ -8815,8 +8815,8 @@
 .kui-SegmentedControlRoot:where(.kui-variant-raised) {
   --segmented-control-indicator-inset: 2px;
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 .kui-SegmentedControlRoot:where(.kui-variant-raised):where([data-disabled]) {
   background-color: var(--field-fill-disabled);
@@ -10028,8 +10028,8 @@
   position: relative;
   color: var(--accent-ink);
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 .kui-SelectTrigger:where(.kui-variant-raised):where(:focus-visible) {
   outline: 2px solid var(--focus-8);
@@ -15035,8 +15035,8 @@
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 :is(.kui-TextAreaRoot:where(.kui-variant-raised) :where(.kui-TextAreaInput))::-webkit-input-placeholder {
   color: var(--neutral-a10);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.29.0",
+  "version": "0.29.1",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

package/src/components/segmented-control.css

@@ -326,7 +326,7 @@
 .kui-SegmentedControlRoot:where(.kui-variant-raised) {
   --segmented-control-indicator-inset: 2px;
   background-color: var(--field-fill);
-  box-shadow: var(--control-chrome);
+  box-shadow: var(--field-chrome);
 
   &:where([data-disabled]) {
     background-color: var(--field-fill-disabled);

package/src/components/select.css

@@ -194,13 +194,13 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* raised: the default. A field: the surface colour with --control-chrome, like a raised button. */
+/* raised: the default. A field: the surface colour with --field-chrome. */
 
 .kui-SelectTrigger:where(.kui-variant-raised) {
   position: relative;
   color: var(--accent-ink);
   background-color: var(--field-fill);
-  box-shadow: var(--control-chrome);
+  box-shadow: var(--field-chrome);
 
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);

package/src/components/text-area.css

@@ -354,14 +354,14 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* Raised variant: the default. The surface colour with --control-chrome, like a raised button. */
+/* Raised variant: the default. The surface colour with --field-chrome. */
 .kui-TextAreaRoot:where(.kui-variant-raised) {
   --text-area-border-width: 1px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
 
   background-color: var(--field-fill);
-  box-shadow: var(--control-chrome);
+  box-shadow: var(--field-chrome);
 
   & :where(.kui-TextAreaInput) {
     &::placeholder {

package/src/components/text-field.css

@@ -392,7 +392,7 @@
   }
 }
 
-/* raised: the default. The surface colour with --control-chrome, like a raised button. */
+/* raised: the default. The surface colour with --field-chrome. */
 
 .kui-TextFieldRoot:where(.kui-variant-raised) {
   --text-field-selection-color: var(--focus-a5);
@@ -400,7 +400,7 @@
   --text-field-border-width: 1px;
 
   background-color: var(--field-fill);
-  box-shadow: var(--control-chrome);
+  box-shadow: var(--field-chrome);
 
   /* Hover effects */
   @media (hover: hover) {
@@ -792,7 +792,7 @@
 
 /* Each variant's edge and divider are the ones its single field draws. */
 .kui-TextFieldGroup:where(.kui-variant-raised) {
-  --text-field-group-edge: var(--control-chrome);
+  --text-field-group-edge: var(--field-chrome);
   --text-field-group-divider: var(--neutral-a4);
 
   &:where([data-disabled]) {

package/src/styles/tokens/shadow.css

@@ -7,14 +7,17 @@
  *
  * Components read roles:
  * --surface-chrome: a raised card or a pane.
- * --control-chrome: a raised control or field, such as a button, a text field or a select.
+ * --control-chrome: a raised control, such as a button.
+ * --field-chrome: a raised field, such as a text field, a select or a raised segmented control.
  * --control-chrome-active: the same control while pressed. The drop tightens toward the surface.
  * --grip-chrome: the thumb of a switch or slider.
  * --control-light: an optional light across a raised control's top half (a background image); none by default.
  * --floating-chrome: a popover, menu, combobox or select list.
  * --dialog-chrome: a dialog. Like v2, a dialog is a surface that covers the page.
  *
- * Fields (text field, text area, select trigger) read --control-chrome, like a raised button.
+ * Fields (text field, text area, select trigger, raised segmented control) read --field-chrome: the
+ * control's edge and its 1px drop, without the wide blur. A field sits in the panel; a button lifts
+ * off it. In a panel of fields the blur under every row read as too heavy (2026-10-29).
  */
 
 /* prettier-ignore */
@@ -29,6 +32,7 @@
   --surface-chrome: var(--shadow-4);
   --control-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 14px -4px rgb(0 0 0 / 0.08);
   --control-chrome-active: inset 0 0 0 1px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.04);
+  --field-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
   --control-light: none;
   /* A grip: the thumb of a switch or slider. A small round object, so a tighter, darker cast. */
   --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.16), 0 2px 6px -1px rgb(0 0 0 / 0.18);
@@ -51,6 +55,7 @@
      inner edge. v1 drew this edge with a ring in every shadow; now only the control role has it. */
   --control-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 14px -4px rgb(0 0 0 / 0.45);
   --control-chrome-active: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 1px rgb(0 0 0 / 0.4);
+  --field-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.3);
   --control-light: none;
   --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px -1px rgb(0 0 0 / 0.4);
   --floating-chrome: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-3);

package/styles.css

@@ -3434,6 +3434,7 @@
   --surface-chrome: var(--shadow-4);
   --control-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 14px -4px rgb(0 0 0 / 0.08);
   --control-chrome-active: inset 0 0 0 1px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.04);
+  --field-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
   --control-light: none;
   --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.16), 0 2px 6px -1px rgb(0 0 0 / 0.18);
   --floating-chrome: var(--shadow-3);
@@ -3498,6 +3499,7 @@
   --surface-chrome: var(--shadow-4);
   --control-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 14px -4px rgb(0 0 0 / 0.45);
   --control-chrome-active: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 1px rgb(0 0 0 / 0.4);
+  --field-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.3);
   --control-light: none;
   --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px -1px rgb(0 0 0 / 0.4);
   --floating-chrome: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-3);
@@ -11064,8 +11066,8 @@
   --text-field-focus-color: var(--focus-8);
   --text-field-border-width: 1px;
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 @media (hover: hover) {
   .kui-TextFieldRoot:where(.kui-variant-raised):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
@@ -11521,7 +11523,7 @@
   }
 }
 .kui-TextFieldGroup:where(.kui-variant-raised) {
-  --text-field-group-edge: var(--control-chrome);
+  --text-field-group-edge: var(--field-chrome);
   --text-field-group-divider: var(--neutral-a4);
 }
 .kui-TextFieldGroup:where(.kui-variant-raised):where([data-disabled]) {
@@ -13958,8 +13960,8 @@
 .kui-SegmentedControlRoot:where(.kui-variant-raised) {
   --segmented-control-indicator-inset: 2px;
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 .kui-SegmentedControlRoot:where(.kui-variant-raised):where([data-disabled]) {
   background-color: var(--field-fill-disabled);
@@ -15171,8 +15173,8 @@
   position: relative;
   color: var(--accent-ink);
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 .kui-SelectTrigger:where(.kui-variant-raised):where(:focus-visible) {
   outline: 2px solid var(--focus-8);
@@ -20178,8 +20180,8 @@
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 :is(.kui-TextAreaRoot:where(.kui-variant-raised) :where(.kui-TextAreaInput))::-webkit-input-placeholder {
   color: var(--neutral-a10);

package/tokens/base.css

@@ -118,6 +118,7 @@
   --surface-chrome: var(--shadow-4);
   --control-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 14px -4px rgb(0 0 0 / 0.08);
   --control-chrome-active: inset 0 0 0 1px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.04);
+  --field-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
   --control-light: none;
   --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.16), 0 2px 6px -1px rgb(0 0 0 / 0.18);
   --floating-chrome: var(--shadow-3);
@@ -149,6 +150,7 @@
   --surface-chrome: var(--shadow-4);
   --control-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 14px -4px rgb(0 0 0 / 0.45);
   --control-chrome-active: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 1px rgb(0 0 0 / 0.4);
+  --field-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.3);
   --control-light: none;
   --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px -1px rgb(0 0 0 / 0.4);
   --floating-chrome: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-3);

package/tokens.css

@@ -3434,6 +3434,7 @@
   --surface-chrome: var(--shadow-4);
   --control-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 14px -4px rgb(0 0 0 / 0.08);
   --control-chrome-active: inset 0 0 0 1px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.04);
+  --field-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
   --control-light: none;
   --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.16), 0 2px 6px -1px rgb(0 0 0 / 0.18);
   --floating-chrome: var(--shadow-3);
@@ -3495,6 +3496,7 @@
   --surface-chrome: var(--shadow-4);
   --control-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 14px -4px rgb(0 0 0 / 0.45);
   --control-chrome-active: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 1px rgb(0 0 0 / 0.4);
+  --field-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.3);
   --control-light: none;
   --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px -1px rgb(0 0 0 / 0.4);
   --floating-chrome: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-3);