@womp/kookie-ui 0.28.0 → 0.29.0

package/src/components/shell.css

@@ -305,7 +305,7 @@
 
 /*
  * How tall the floating row is: one control row plus the row's padding on both sides, worked
- * out in CSS so the first paint is right. The padding is the pane's surface padding at the
+ * out in CSS so the first paint is right. The padding is the pane's panel padding at the
  * Shell's index, the same the row itself pads by. A Toolbar in the row publishes its own control
  * height as the band (one step above the Shell's when it states no size).
  */
@@ -316,7 +316,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-start: var(--control-height-1);
-  --kui-pane-pad-start: var(--surface-p-1);
+  --kui-pane-pad-start: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
@@ -325,7 +325,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-start: var(--control-height-2);
-  --kui-pane-pad-start: var(--surface-p-2);
+  --kui-pane-pad-start: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
@@ -334,7 +334,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-start: var(--control-height-3);
-  --kui-pane-pad-start: var(--surface-p-3);
+  --kui-pane-pad-start: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
@@ -343,7 +343,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-end: var(--control-height-1);
-  --kui-pane-pad-end: var(--surface-p-1);
+  --kui-pane-pad-end: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
@@ -352,7 +352,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-end: var(--control-height-2);
-  --kui-pane-pad-end: var(--surface-p-2);
+  --kui-pane-pad-end: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
@@ -361,7 +361,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-end: var(--control-height-3);
-  --kui-pane-pad-end: var(--surface-p-3);
+  --kui-pane-pad-end: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),

package/src/components/sidebar.css

@@ -344,6 +344,12 @@
   }
 }
 
+/* A header or footer beside the pane's list shares one inset with it: the list already pads
+   by the same amount, so the row drops its padding on that side instead of doubling it. */
+.kui-SidebarHeader:where(.kui-SidebarHeader--container:not([data-float]):has(+ .kui-ShellScroll)) {
+  padding-bottom: 0;
+}
+
 .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
   display: flex;
   flex-direction: row;
@@ -363,6 +369,11 @@
   }
 }
 
+/* Second half of the shared inset above; after the footer's own padding, at its specificity. */
+:where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
+  padding-top: 0;
+}
+
 /* Header/Footer Menu Button Support */
 .kui-SidebarHeader :where(.kui-SidebarMenuButton),
 .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
@@ -416,18 +427,20 @@
      TextField of size N, with the row family's pill padding, gap and icon box. Content is a
      BaseMenuContent, so it takes every other size value from base-menu.css. Header and
      Footer are not, so they restate base-menu's values here; keep the two in step. */
-  /* A Shell pane is a surface: its header, footer, search and scrolling list all pad by the
-     surface padding at the Shell's index, so every row and every control in the pane starts on
-     one line. The Rail is left out: its tiles keep their own tight padding (above). */
+  /* A Shell pane's header, footer, search and scrolling list all pad by the panel padding at
+     the Shell's index, so every row and every control in the pane starts on one line. Panel,
+     not surface: a pane is chrome that holds rows, like a menu, and a card's 24px around a
+     32px control row read as padded twice (docs/LOG.md, 2026-10-27). The Rail is left out:
+     its tiles keep their own tight padding (above). */
   .kui-ShellPaneChrome {
     &:where(.kui-r-size-1) {
-      --sidebar-base-padding: var(--surface-p-1);
+      --sidebar-base-padding: var(--panel-p-1);
     }
     &:where(.kui-r-size-2) {
-      --sidebar-base-padding: var(--surface-p-2);
+      --sidebar-base-padding: var(--panel-p-2);
     }
     &:where(.kui-r-size-3) {
-      --sidebar-base-padding: var(--surface-p-3);
+      --sidebar-base-padding: var(--panel-p-3);
     }
   }
 
@@ -435,13 +448,13 @@
   /* stylelint-disable selector-max-specificity */
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *) {
     &:where(.kui-r-size-1) {
-      --base-menu-content-padding: var(--surface-p-1);
+      --base-menu-content-padding: var(--panel-p-1);
     }
     &:where(.kui-r-size-2) {
-      --base-menu-content-padding: var(--surface-p-2);
+      --base-menu-content-padding: var(--panel-p-2);
     }
     &:where(.kui-r-size-3) {
-      --base-menu-content-padding: var(--surface-p-3);
+      --base-menu-content-padding: var(--panel-p-3);
     }
   }
   /* stylelint-enable selector-max-specificity */

package/src/components/text-field.css

@@ -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(--control-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 };