@womp/kookie-ui 0.28.1 → 0.29.1

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) {
@@ -738,3 +738,141 @@
     filter: none;
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * GROUP                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/*
+ * TextField.Group joins its fields into one control, such as X, Y and Z. The group draws the
+ * variant's edge once, over the fields, so a field's fill never covers it. Each field keeps its
+ * fill, hover and focus ring; its own edge goes, its inner corners are square, and a hairline
+ * divides it from the one before.
+ */
+
+/* stylelint-disable selector-max-specificity */
+
+.kui-TextFieldGroup {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--text-field-border-radius);
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    border-radius: inherit;
+    box-shadow: var(--text-field-group-edge);
+    pointer-events: none;
+  }
+}
+
+@breakpoints {
+  .kui-TextFieldGroup {
+    &:where(.kui-r-size-1) {
+      --text-field-border-radius: var(--radius-control-1);
+    }
+    &:where(.kui-r-size-2) {
+      --text-field-border-radius: var(--radius-control-2);
+    }
+    &:where(.kui-r-size-3) {
+      --text-field-border-radius: var(--radius-control-3);
+    }
+    &:where(.kui-r-size-4) {
+      --text-field-border-radius: var(--radius-control-4);
+    }
+  }
+}
+
+/* Each variant's edge and divider are the ones its single field draws. */
+.kui-TextFieldGroup:where(.kui-variant-raised) {
+  --text-field-group-edge: var(--field-chrome);
+  --text-field-group-divider: var(--neutral-a4);
+
+  &:where([data-disabled]) {
+    --text-field-group-edge: inset 0 0 0 1px var(--field-edge-disabled);
+  }
+}
+
+.kui-TextFieldGroup:where(.kui-variant-outline, .kui-variant-surface) {
+  --text-field-group-edge: inset 0 0 0 1px var(--accent-6);
+  --text-field-group-divider: var(--accent-6);
+
+  &:where([data-disabled]) {
+    --text-field-group-edge: inset 0 0 0 1px var(--neutral-a6);
+    --text-field-group-divider: var(--neutral-a6);
+  }
+}
+
+.kui-TextFieldGroup:where(.kui-variant-soft) {
+  --text-field-group-edge: none;
+  --text-field-group-divider: var(--accent-a5);
+}
+
+/* ghost: the dividers alone. Each field keeps its ghost hover and focus fill. */
+.kui-TextFieldGroup:where(.kui-variant-ghost) {
+  --text-field-group-edge: none;
+  --text-field-group-divider: var(--neutral-a5);
+}
+
+.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot {
+  position: relative;
+  border-radius: 0;
+  box-shadow: none;
+
+  /* The focus ring and an invalid edge draw above the group's edge. */
+  &:focus-within {
+    z-index: 3;
+  }
+}
+
+.kui-TextFieldGroup > .kui-TextFieldWrapper:first-child > .kui-TextFieldRoot {
+  border-start-start-radius: var(--text-field-border-radius);
+  border-end-start-radius: var(--text-field-border-radius);
+}
+
+.kui-TextFieldGroup > .kui-TextFieldWrapper:last-child > .kui-TextFieldRoot {
+  border-start-end-radius: var(--text-field-border-radius);
+  border-end-end-radius: var(--text-field-border-radius);
+}
+
+.kui-TextFieldGroup > .kui-TextFieldWrapper + .kui-TextFieldWrapper > .kui-TextFieldRoot::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  background-color: var(--text-field-group-divider);
+  pointer-events: none;
+}
+
+/* A focused field's ring is its edge, so the hairlines on either side of it step back. */
+.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot:focus-within::before,
+.kui-TextFieldGroup > .kui-TextFieldWrapper:has(> .kui-TextFieldRoot:focus-within) + .kui-TextFieldWrapper > .kui-TextFieldRoot::before {
+  opacity: 0;
+}
+
+/* An invalid field keeps its red edge, on its own segment only. */
+.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot:has(> .kui-TextFieldInput[aria-invalid='true']) {
+  z-index: 3;
+  box-shadow: inset 0 0 0 1px var(--red-6);
+}
+
+
+@media (forced-colors: active) {
+  .kui-TextFieldGroup {
+    border: 1px solid CanvasText;
+  }
+  .kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot {
+    border: none;
+  }
+}
+
+/* stylelint-enable selector-max-specificity */

package/src/components/text-field.props.tsx

@@ -30,6 +30,21 @@ const textFieldRootPropDefs = {
   'aria-labelledby': PropDef<string | undefined>;
 };
 
+// Ghost is the dividers alone: no fill, no edge.
+const groupVariants = ['raised', 'surface', 'soft', 'outline', 'ghost'] as const;
+
+const textFieldGroupPropDefs = {
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'kui-variant', values: groupVariants, default: 'raised' },
+  disabled: { type: 'boolean', default: false },
+  ...colorPropDef,
+  ...radiusPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof groupVariants)[number]>;
+  disabled: PropDef<boolean>;
+};
+
 const sides = ['left', 'right'] as const;
 
 const textFieldSlotPropDefs = {
@@ -75,4 +90,4 @@ interface TextFieldSlotScrubProps {
 
 export type { TextFieldSlotScrubProps };
 
-export { textFieldRootPropDefs, textFieldSlotPropDefs };
+export { textFieldRootPropDefs, textFieldGroupPropDefs, textFieldSlotPropDefs };

package/src/components/text-field.tsx

@@ -5,7 +5,7 @@ import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { composeEventHandlers, composeRefs, useLayoutEffect } from 'radix-ui/internal';
 
-import { textFieldRootPropDefs, textFieldSlotPropDefs, type TextFieldSlotScrubProps } from './text-field.props.js';
+import { textFieldRootPropDefs, textFieldGroupPropDefs, textFieldSlotPropDefs, type TextFieldSlotScrubProps } from './text-field.props.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { mergeStyles } from '../helpers/merge-styles.js';
 import { useThemeSizeProps } from '../hooks/theme-size.js';
@@ -31,7 +31,23 @@ const TextFieldContext = React.createContext<TextFieldContextValue | null>(null)
 // list, not a tag list. `[tabindex]` catches role-based widgets; `label` already redirects a click.
 const FOCUSABLE_IN_SLOT = 'button, a, input, select, textarea, label, [tabindex], [contenteditable]';
 
-const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>((ownProps, forwardedRef) => {
+// A Group decides the look of its fields: their size, variant and radius come from it. A field
+// can still take its own color, and is disabled when either it or the group is.
+type TextFieldGroupContextValue = Pick<TextFieldGroupOwnProps, 'size' | 'variant' | 'radius' | 'color' | 'disabled'>;
+const TextFieldGroupContext = React.createContext<TextFieldGroupContextValue | null>(null);
+
+const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>((fieldProps, forwardedRef) => {
+  const group = React.useContext(TextFieldGroupContext);
+  const ownProps = group
+    ? {
+        ...fieldProps,
+        size: group.size,
+        variant: group.variant,
+        radius: group.radius,
+        color: fieldProps.color ?? group.color,
+        disabled: Boolean(group.disabled || fieldProps.disabled),
+      }
+    : fieldProps;
   // The caller's className and style are kept apart from the size and variant classes: with an
   // error message they go on the wrapper, which is then the one box the parent lays out.
   const { className: ownClassName, style: ownStyle, ...themedProps } = useThemeSizeProps(ownProps, textFieldRootPropDefs.size);
@@ -137,6 +153,34 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
 });
 TextFieldRoot.displayName = 'TextField.Root';
 
+type TextFieldGroupOwnProps = GetPropDefTypes<typeof textFieldGroupPropDefs>;
+interface TextFieldGroupProps extends ComponentPropsWithout<'div', RemovedProps>, TextFieldGroupOwnProps {}
+
+/**
+ * Joins two or more fields into one, such as X, Y and Z: one edge, square inner corners and a
+ * hairline between the fields. The group draws the edge, so each field keeps only its fill.
+ */
+const TextFieldGroup = React.forwardRef<HTMLDivElement, TextFieldGroupProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, textFieldGroupPropDefs.size);
+  const { size, variant, radius, color, disabled } = props;
+  const { className, children, radius: _radius, color: _color, disabled: _disabled, ...domProps } = extractProps(props, textFieldGroupPropDefs);
+  const contextValue = React.useMemo(() => ({ size, variant, radius, color, disabled }), [size, variant, radius, color, disabled]);
+  return (
+    <div
+      role="group"
+      data-accent-color={color}
+      data-radius={radius}
+      data-disabled={disabled || undefined}
+      {...domProps}
+      ref={forwardedRef}
+      className={classNames('kui-TextFieldGroup', className)}
+    >
+      <TextFieldGroupContext.Provider value={contextValue}>{children}</TextFieldGroupContext.Provider>
+    </div>
+  );
+});
+TextFieldGroup.displayName = 'TextField.Group';
+
 type TextFieldSlotElement = React.ElementRef<'div'>;
 type TextFieldSlotOwnProps = GetPropDefTypes<typeof textFieldSlotPropDefs> & TextFieldSlotScrubProps;
 interface TextFieldSlotProps extends ComponentPropsWithout<'div', RemovedProps>, TextFieldSlotOwnProps {}
@@ -478,5 +522,5 @@ const TextFieldSlot = React.forwardRef<TextFieldSlotElement, TextFieldSlotProps>
 });
 TextFieldSlot.displayName = 'TextField.Slot';
 
-export { TextFieldRoot as Root, TextFieldSlot as Slot };
-export type { TextFieldRootProps as RootProps, TextFieldSlotProps as SlotProps };
+export { TextFieldRoot as Root, TextFieldGroup as Group, TextFieldSlot as Slot };
+export type { TextFieldRootProps as RootProps, TextFieldGroupProps as GroupProps, TextFieldSlotProps as SlotProps };

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)))) {
@@ -11420,6 +11422,173 @@
             filter: none;
   }
 }
+.kui-TextFieldGroup {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--text-field-border-radius);
+}
+.kui-TextFieldGroup::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: inherit;
+  -webkit-box-shadow: var(--text-field-group-edge);
+          box-shadow: var(--text-field-group-edge);
+  pointer-events: none;
+}
+.kui-TextFieldGroup:where(.kui-r-size-1) {
+  --text-field-border-radius: var(--radius-control-1);
+}
+.kui-TextFieldGroup:where(.kui-r-size-2) {
+  --text-field-border-radius: var(--radius-control-2);
+}
+.kui-TextFieldGroup:where(.kui-r-size-3) {
+  --text-field-border-radius: var(--radius-control-3);
+}
+.kui-TextFieldGroup:where(.kui-r-size-4) {
+  --text-field-border-radius: var(--radius-control-4);
+}
+@media (min-width: 520px) {
+  .kui-TextFieldGroup:where(.xs\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.xs\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.xs\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.xs\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+@media (min-width: 768px) {
+  .kui-TextFieldGroup:where(.sm\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.sm\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.sm\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.sm\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+@media (min-width: 1024px) {
+  .kui-TextFieldGroup:where(.md\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.md\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.md\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.md\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+@media (min-width: 1280px) {
+  .kui-TextFieldGroup:where(.lg\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.lg\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.lg\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.lg\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+@media (min-width: 1640px) {
+  .kui-TextFieldGroup:where(.xl\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.xl\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.xl\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.xl\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+.kui-TextFieldGroup:where(.kui-variant-raised) {
+  --text-field-group-edge: var(--field-chrome);
+  --text-field-group-divider: var(--neutral-a4);
+}
+.kui-TextFieldGroup:where(.kui-variant-raised):where([data-disabled]) {
+  --text-field-group-edge: inset 0 0 0 1px var(--field-edge-disabled);
+}
+.kui-TextFieldGroup:where(.kui-variant-outline, .kui-variant-surface) {
+  --text-field-group-edge: inset 0 0 0 1px var(--accent-6);
+  --text-field-group-divider: var(--accent-6);
+}
+.kui-TextFieldGroup:where(.kui-variant-outline,.kui-variant-surface):where([data-disabled]) {
+  --text-field-group-edge: inset 0 0 0 1px var(--neutral-a6);
+  --text-field-group-divider: var(--neutral-a6);
+}
+.kui-TextFieldGroup:where(.kui-variant-soft) {
+  --text-field-group-edge: none;
+  --text-field-group-divider: var(--accent-a5);
+}
+.kui-TextFieldGroup:where(.kui-variant-ghost) {
+  --text-field-group-edge: none;
+  --text-field-group-divider: var(--neutral-a5);
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot {
+  position: relative;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+:is(.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot):focus-within {
+  z-index: 3;
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper:first-child > .kui-TextFieldRoot {
+  border-start-start-radius: var(--text-field-border-radius);
+  border-end-start-radius: var(--text-field-border-radius);
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper:last-child > .kui-TextFieldRoot {
+  border-start-end-radius: var(--text-field-border-radius);
+  border-end-end-radius: var(--text-field-border-radius);
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper + .kui-TextFieldWrapper > .kui-TextFieldRoot::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  background-color: var(--text-field-group-divider);
+  pointer-events: none;
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot:focus-within::before,
+.kui-TextFieldGroup > .kui-TextFieldWrapper:has(> .kui-TextFieldRoot:focus-within) + .kui-TextFieldWrapper > .kui-TextFieldRoot::before {
+  opacity: 0;
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot:has(> .kui-TextFieldInput[aria-invalid='true']) {
+  z-index: 3;
+  -webkit-box-shadow: inset 0 0 0 1px var(--red-6);
+          box-shadow: inset 0 0 0 1px var(--red-6);
+}
+@media (forced-colors: active) {
+  .kui-TextFieldGroup {
+    border: 1px solid CanvasText;
+  }
+  .kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot {
+    border: none;
+  }
+}
 .kui-ComboboxContent {
   --combobox-list-max-height: calc(300px * var(--scale));
   -ms-scroll-chaining: none;
@@ -13779,6 +13948,37 @@
     height: var(--icon-size-4);
   }
 }
+.kui-SegmentedControlRoot:where(.kui-variant-raised, .kui-variant-outline) {
+  --segmented-control-indicator-background-color: var(--neutral-a4);
+}
+.kui-SegmentedControlRoot:where(.kui-variant-raised,.kui-variant-outline) :where(.kui-SegmentedControlIndicator)::before {
+  inset: var(--segmented-control-indicator-inset);
+  border-radius: max(var(--border-width-standard), calc(var(--segmented-control-border-radius) - var(--segmented-control-indicator-inset)));
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.kui-SegmentedControlRoot:where(.kui-variant-raised) {
+  --segmented-control-indicator-inset: 2px;
+  background-color: var(--field-fill);
+  -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);
+  -webkit-box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
+          box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
+}
+.kui-SegmentedControlRoot:where(.kui-variant-outline) {
+  --segmented-control-indicator-inset: 2px;
+  background-color: transparent;
+  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-6);
+          box-shadow: inset 0 0 0 1px var(--neutral-6);
+}
+.kui-SegmentedControlRoot:where(.kui-variant-outline):where([data-disabled]) {
+  background-color: transparent;
+  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-a6);
+          box-shadow: inset 0 0 0 1px var(--neutral-a6);
+}
 .kui-SegmentedControlItem:where([data-icon-only]) {
   min-width: var(--segmented-control-height);
 }
@@ -14973,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);
@@ -19980,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);

package/dist/esm/chunk-2ZLMWYJ6.js

@@ -1,2 +0,0 @@
-import{b as e}from"./chunk-KRJTW535.js";var o=["1","2","3","4"],s=["horizontal","vertical"],r={disabled:{type:"boolean",default:!1},size:{type:"enum",className:"kui-r-size",values:o,default:"2",responsive:!0},orientation:{type:"enum",className:"kui-r-orientation",values:s,default:"horizontal",responsive:!0},...e};export{r as a};
-//# sourceMappingURL=chunk-2ZLMWYJ6.js.map

package/dist/esm/chunk-2ZLMWYJ6.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/segmented-control.props.tsx"],
-  "sourcesContent": ["import { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4'] as const;\nconst orientations = ['horizontal', 'vertical'] as const;\n\nconst segmentedControlRootPropDefs = {\n  disabled: { type: 'boolean', default: false },\n  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },\n  orientation: {\n    type: 'enum',\n    className: 'kui-r-orientation',\n    values: orientations,\n    default: 'horizontal',\n    responsive: true,\n  },\n  ...radiusPropDef,\n} satisfies {\n  disabled?: PropDef<boolean>;\n  size: PropDef<(typeof sizes)[number]>;\n  orientation: PropDef<(typeof orientations)[number]>;\n};\n\nexport { segmentedControlRootPropDefs };\n"],
-  "mappings": "wCAIA,IAAMA,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAC3BC,EAAe,CAAC,aAAc,UAAU,EAExCC,EAA+B,CACnC,SAAU,CAAE,KAAM,UAAW,QAAS,EAAM,EAC5C,KAAM,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC7F,YAAa,CACX,KAAM,OACN,UAAW,oBACX,OAAQC,EACR,QAAS,aACT,WAAY,EACd,EACA,GAAGE,CACL",
-  "names": ["sizes", "orientations", "segmentedControlRootPropDefs", "radiusPropDef"]
-}

package/dist/esm/chunk-BP64M73W.js

@@ -1,2 +0,0 @@
-import{a as e}from"./chunk-P7VSZYG3.js";import{a as o}from"./chunk-UMYPLUG3.js";import{b as s}from"./chunk-KRJTW535.js";import{c as r}from"./chunk-CUNKWFKA.js";var t=["1","2","3","4"],p=["raised","surface","soft","ghost","outline"],d={size:{type:"enum",className:"kui-r-size",values:t,default:"2",responsive:!0},variant:{type:"enum",className:"kui-variant",values:p,default:"raised"},error:{type:"boolean",default:!1},errorMessage:{type:"string",default:void 0},required:{type:"boolean",default:!1},"aria-describedby":{type:"string",default:void 0},"aria-labelledby":{type:"string",default:void 0},...r,...s},i=["left","right"],l={side:{type:"enum",values:i},...r,gap:o.gap,px:e.px,pl:e.pl,pr:e.pr};export{d as a,l as b};
-//# sourceMappingURL=chunk-BP64M73W.js.map

package/dist/esm/chunk-BP64M73W.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/text-field.props.tsx"],
-  "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\nimport { paddingPropDefs } from '../props/padding.props.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\nimport { flexPropDefs } from './flex.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4'] as const;\nconst variants = ['raised', 'surface', 'soft', 'ghost', 'outline'] as const;\n\nconst textFieldRootPropDefs = {\n  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },\n  // Error and validation props\n  error: { type: 'boolean', default: false },\n  errorMessage: { type: 'string', default: undefined },\n  required: { type: 'boolean', default: false },\n  // Accessibility props\n  'aria-describedby': { type: 'string', default: undefined },\n  'aria-labelledby': { type: 'string', default: undefined },\n  ...colorPropDef,\n  ...radiusPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  error: PropDef<boolean>;\n  errorMessage: PropDef<string | undefined>;\n  required: PropDef<boolean>;\n  'aria-describedby': PropDef<string | undefined>;\n  'aria-labelledby': PropDef<string | undefined>;\n};\n\nconst sides = ['left', 'right'] as const;\n\nconst textFieldSlotPropDefs = {\n  side: { type: 'enum', values: sides },\n  ...colorPropDef,\n  gap: flexPropDefs.gap,\n  px: paddingPropDefs.px,\n  pl: paddingPropDefs.pl,\n  pr: paddingPropDefs.pr,\n} satisfies {\n  side: PropDef<(typeof sides)[number]>;\n  gap: typeof flexPropDefs.gap;\n  px: typeof paddingPropDefs.px;\n  pl: typeof paddingPropDefs.pl;\n  pr: typeof paddingPropDefs.pr;\n};\n\n/** Scrubbing props for TextField.Slot - handled separately from PropDef system */\ninterface TextFieldSlotScrubProps {\n  /** Enable scrubbing behavior on this slot */\n  scrub?: boolean;\n  /** Current value (required for min/max clamping to work correctly) */\n  scrubValue?: number;\n  /** Base value change per movement unit (default: 1) */\n  scrubStep?: number;\n  /** Pixels of movement per step - higher = less sensitive (default: 1) */\n  scrubSensitivity?: number;\n  /** Minimum allowed value */\n  scrubMin?: number;\n  /** Maximum allowed value */\n  scrubMax?: number;\n  /** Step multiplier when Shift is held (default: 10) */\n  scrubShiftMultiplier?: number;\n  /** Step multiplier when Alt/Option is held (default: 0.1) */\n  scrubAltMultiplier?: number;\n  /**\n   * Callback fired during scrubbing with the value delta\n   * @param delta - The change in value\n   * @param isChanging - true while dragging, false when released\n   */\n  onScrub?: (delta: number, isChanging: boolean) => void;\n}\n\nexport type { TextFieldSlotScrubProps };\n\nexport { textFieldRootPropDefs, textFieldSlotPropDefs };\n"],
-  "mappings": "gKAOA,IAAMA,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAC3BC,EAAW,CAAC,SAAU,UAAW,OAAQ,QAAS,SAAS,EAE3DC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC7F,QAAS,CAAE,KAAM,OAAQ,UAAW,cAAe,OAAQC,EAAU,QAAS,QAAS,EAEvF,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,EACzC,aAAc,CAAE,KAAM,SAAU,QAAS,MAAU,EACnD,SAAU,CAAE,KAAM,UAAW,QAAS,EAAM,EAE5C,mBAAoB,CAAE,KAAM,SAAU,QAAS,MAAU,EACzD,kBAAmB,CAAE,KAAM,SAAU,QAAS,MAAU,EACxD,GAAGE,EACH,GAAGC,CACL,EAUMC,EAAQ,CAAC,OAAQ,OAAO,EAExBC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,OAAQD,CAAM,EACpC,GAAGF,EACH,IAAKI,EAAa,IAClB,GAAIC,EAAgB,GACpB,GAAIA,EAAgB,GACpB,GAAIA,EAAgB,EACtB",
-  "names": ["sizes", "variants", "textFieldRootPropDefs", "colorPropDef", "radiusPropDef", "sides", "textFieldSlotPropDefs", "flexPropDefs", "paddingPropDefs"]
-}

package/dist/esm/chunk-W4Z6ORYO.js

@@ -1,3 +0,0 @@
-"use client";
-import{c as y}from"./chunk-OKQAVYW4.js";import{c as v}from"./chunk-5ON3XLRD.js";import{b as R}from"./chunk-XU74PNM2.js";import{a as K}from"./chunk-VQPANPMI.js";var q={};K(q,{Item:()=>x,Root:()=>b});import*as e from"react";import S from"classnames";import{ToggleGroup as I}from"radix-ui";import{useComposedRefs as F,useControllableState as H,useLayoutEffect as j}from"radix-ui/internal";var M=["1","2","3","4"],O=["horizontal","vertical"],u={disabled:{type:"boolean",default:!1},size:{type:"enum",className:"kui-r-size",values:M,default:"2",responsive:!0},orientation:{type:"enum",className:"kui-r-orientation",values:O,default:"horizontal",responsive:!0},...R};var h=e.createContext(null),W=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"]),b=e.forwardRef((n,s)=>{let a=v(n,u.size),{className:l,children:t,radius:i,value:m,defaultValue:p,onValueChange:w,style:D,disabled:c,onKeyDown:N,onPointerDown:k,...T}=y(a,u),[f,d]=H({prop:m,onChange:w,defaultProp:p??""}),r=e.useRef(!1),A=e.useMemo(()=>({selectFromKeyboard(o){r.current&&(r.current=!1,d(o))}}),[d]),g=e.useRef(null),V=F(s,g),C=e.Children.toArray(t).filter(e.isValidElement),z=C.length,G=Math.max(0,C.findIndex(o=>o.props.value===f));return j(()=>{let o=g.current;if(!o)return;let P=Array.from(o.querySelectorAll(":scope > .kui-SegmentedControlItem")),L=P.findIndex(E=>E.getAttribute("data-state")==="on");o.style.setProperty("--segmented-control-count",String(P.length||1)),o.style.setProperty("--segmented-control-index",String(Math.max(0,L)))}),e.createElement(h.Provider,{value:A},e.createElement(I.Root,{"data-disabled":c||void 0,"data-radius":i,ref:V,style:{"--segmented-control-count":z||1,"--segmented-control-index":G,...D},className:S("kui-SegmentedControlRoot",l),onValueChange:o=>{o&&d(o)},onKeyDown:o=>{N?.(o),r.current=W.has(o.key)},onPointerDown:o=>{k?.(o),r.current=!1},...T,type:"single",value:f,asChild:!1,disabled:!!c},t,e.createElement("div",{className:"kui-SegmentedControlIndicator"})))});b.displayName="SegmentedControl.Root";var x=e.forwardRef(({children:n,className:s,iconOnly:a,onFocus:l,...t},i)=>{let m=e.useContext(h);return e.createElement(I.Item,{ref:i,className:S("kui-reset","kui-SegmentedControlItem",s),"data-icon-only":a||void 0,onFocus:p=>{l?.(p),m?.selectFromKeyboard(t.value)},...t,asChild:!1},e.createElement("span",{className:"kui-SegmentedControlItemSeparator"}),e.createElement("span",{className:"kui-SegmentedControlItemLabel"},e.createElement("span",{className:"kui-SegmentedControlItemLabelActive"},n),e.createElement("span",{className:"kui-SegmentedControlItemLabelInactive","aria-hidden":!0},n)))});x.displayName="SegmentedControl.Item";export{b as a,x as b,q as c};
-//# sourceMappingURL=chunk-W4Z6ORYO.js.map