@womp/kookie-ui 0.22.1 → 0.24.0

package/src/components/shell.tsx

@@ -22,6 +22,7 @@
 
 import * as React from 'react';
 import classNames from 'classnames';
+import { Slot } from 'radix-ui';
 import { useComposedRefs } from 'radix-ui/internal';
 import { PaneResizeContext } from './_internal/shell-resize.js';
 import { PaneHandle, PanelHandle } from './_internal/shell-handles.js';
@@ -48,7 +49,7 @@ import { useShell, useSidebarMode } from './shell.context.js';
 import { useResponsivePresentation } from './shell.hooks.js';
 import { readBreakpoint } from '../hooks/use-breakpoint.js';
 import { useThemeSize } from '../helpers/theme-size.js';
-import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellSizeContext } from './_internal/pane-chrome.js';
+import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellContentContext, ShellSizeContext } from './_internal/pane-chrome.js';
 import type { PaneSize } from './_internal/pane-chrome.js';
 import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneName, PaneTarget, ResponsivePresentation, SidebarMode } from './shell.types.js';
 
@@ -365,6 +366,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
   return (
     <ShellStoreContext.Provider value={store}>
       <ShellSizeContext.Provider value={size}>
+      <ShellContentContext.Provider value={false}>
       <ShellInsetContext.Provider value={insetContext}>
         {/* The Root is not a widget: it hears Escape bubbling up from the panes,
             after their own handlers, to close the overlays. */}
@@ -387,6 +389,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
           <div className="kui-ShellScrim" aria-hidden onClick={closeOverlays} />
         </div>
       </ShellInsetContext.Provider>
+      </ShellContentContext.Provider>
       </ShellSizeContext.Provider>
     </ShellStoreContext.Provider>
   );
@@ -679,9 +682,17 @@ interface ShellContentProps extends React.ComponentPropsWithoutRef<'main'> {
   inset?: boolean;
 }
 
-const Content = React.forwardRef<HTMLElement, ShellContentProps>(({ className, inset, ...props }, ref) => {
+/**
+ * The work area. It scrolls as it is; with a `Shell.Scroll` child it becomes a column and the
+ * Scroll scrolls instead, so a `Shell.PaneHeader float` beside it stays pinned over the page.
+ */
+const Content = React.forwardRef<HTMLElement, ShellContentProps>(({ className, inset, children, ...props }, ref) => {
   useInsetRegistration('content', inset);
-  return <main {...props} ref={ref} className={classNames('kui-ShellContent', className)} data-inset={inset || undefined} />;
+  return (
+    <main {...props} ref={ref} className={classNames('kui-ShellContent', className)} data-inset={inset || undefined}>
+      <ShellContentContext.Provider value={true}>{children}</ShellContentContext.Provider>
+    </main>
+  );
 });
 Content.displayName = 'Shell.Content';
 
@@ -692,6 +703,12 @@ type TriggerAction = 'toggle' | 'expand' | 'collapse';
 interface TriggerProps extends React.ComponentPropsWithoutRef<'button'> {
   target: PaneTarget;
   action?: TriggerAction;
+  /**
+   * Renders the single child in place of the trigger's own button, with the trigger's click,
+   * `aria-controls`, `aria-expanded` and data attributes merged onto it. Use it to make a
+   * `Button` the trigger: `<Shell.Trigger asChild><Button iconOnly aria-label="Toggle sidebar">…</Button></Shell.Trigger>`.
+   */
+  asChild?: boolean;
   /**
    * Whether to show a preview of the target pane on hover while it is closed
    * and not an overlay. Defaults to false.
@@ -706,9 +723,10 @@ interface TriggerProps extends React.ComponentPropsWithoutRef<'button'> {
  * A button that drives a pane by name, through the registry. It sets
  * `aria-controls` and `aria-expanded` (left off while an untouched pane
  * cannot know its state yet), renders `type="button"`, and runs the
- * consumer's `onClick` first: calling `preventDefault()` there cancels it.
+ * consumer's `onClick` first: calling `preventDefault()` there cancels it. With `asChild` the
+ * child is the button, and its own `type` stands.
  */
-const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, action = 'toggle', peekOnHover, onClick, onMouseEnter, onMouseLeave, children, ...props }, ref) => {
+const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, action = 'toggle', peekOnHover, asChild = false, onClick, onMouseEnter, onMouseLeave, children, ...props }, ref) => {
   const store = useShellStore('Shell.Trigger');
   React.useEffect(() => {
     if (target === 'left') warnOnce('Shell.Trigger target="left" is deprecated and is removed in 1.0. Use target="rail".');
@@ -742,10 +760,13 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, act
     if (peekOnHover && store.peek === name) setShellPeek(store, null);
   };
 
+  const Comp = asChild ? Slot.Root : 'button';
   return (
-    <button
+    <Comp
       // A button's default type is `submit`. Stated before the spread, so a consumer's own wins.
-      type="button"
+      // An asChild child states its own (Button already says `button`; a link has none), so the
+      // key is left off rather than passed as undefined.
+      {...(!asChild && { type: 'button' as const })}
       aria-controls={entry?.id}
       aria-expanded={shown}
       {...props}
@@ -757,7 +778,7 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, act
       data-shell-action={action}
     >
       {children}
-    </button>
+    </Comp>
   );
 });
 Trigger.displayName = 'Shell.Trigger';

package/src/components/sidebar.tsx

@@ -97,6 +97,23 @@ function wrapTextNodes(node: React.ReactNode): React.ReactNode {
   return node;
 }
 
+// Arrow Up and Down move between the visible buttons of the same sidebar, as a
+// convenience on top of Tab. Sub-menu triggers take part, so the one-item Accordion
+// behind each sub-menu doesn't keep focus on its own trigger.
+function focusAdjacentSidebarButton(event: React.KeyboardEvent<HTMLElement>) {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+  const scope = event.currentTarget.closest('.kui-SidebarContent, .kui-SidebarSearchPopover');
+  const buttons = scope
+    ? Array.from(scope.querySelectorAll<HTMLElement>('.kui-SidebarMenuButton')).filter((el) => el.offsetParent !== null)
+    : [];
+  const index = buttons.indexOf(event.currentTarget);
+  const next = buttons[index + (event.key === 'ArrowDown' ? 1 : -1)];
+  if (index !== -1 && next) {
+    event.preventDefault();
+    next.focus();
+  }
+}
+
 const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
   ({ asChild = false, isActive = false, shortcut, badge, className, children, onKeyDown, ...props }, forwardedRef) => {
     const visual = useSidebarVisual();
@@ -105,22 +122,10 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
 
     const Comp = asChild ? Slot : 'button';
 
-    // Enter and Space are left to the native button or link. Arrow keys move between
-    // the visible buttons of the same sidebar, as a convenience on top of Tab.
+    // Enter and Space are left to the native button or link.
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLButtonElement>) => {
-        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-          const scope = event.currentTarget.closest('.kui-SidebarContent, .kui-SidebarSearchPopover');
-          const buttons = scope
-            ? Array.from(scope.querySelectorAll<HTMLElement>('.kui-SidebarMenuButton')).filter((el) => el.offsetParent !== null)
-            : [];
-          const index = buttons.indexOf(event.currentTarget);
-          const next = buttons[index + (event.key === 'ArrowDown' ? 1 : -1)];
-          if (index !== -1 && next) {
-            event.preventDefault();
-            next.focus();
-          }
-        }
+        focusAdjacentSidebarButton(event);
         onKeyDown?.(event);
       },
       [onKeyDown],
@@ -262,7 +267,7 @@ interface SidebarMenuSubTriggerProps extends React.ComponentPropsWithoutRef<type
 }
 
 const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion.Trigger>, SidebarMenuSubTriggerProps>(
-  ({ asChild = false, className, children, ...props }, forwardedRef) => {
+  ({ asChild = false, className, children, onKeyDown, ...props }, forwardedRef) => {
     const mode = React.useContext(SidebarSubMenuModeContext);
 
     if (mode === 'dropdown') {
@@ -270,6 +275,7 @@ const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion
         <DropdownMenu.Trigger>
           <button
             {...(props as any)}
+            onKeyDown={onKeyDown}
             ref={forwardedRef as any}
             type="button"
             aria-haspopup="menu"
@@ -286,6 +292,11 @@ const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion
         <div>
           <Accordion.Trigger
             {...props}
+            onKeyDown={(event) => {
+              // Runs before the Accordion's own arrow handling, which would keep focus here.
+              focusAdjacentSidebarButton(event);
+              onKeyDown?.(event);
+            }}
             ref={forwardedRef}
             asChild={asChild}
             className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-SidebarMenuButton', 'kui-SidebarMenuSubTrigger', className)}
@@ -357,7 +368,7 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
 
   return (
     <Accordion.Content {...props} ref={forwardedRef} className={classNames('kui-SidebarMenuSubContent', className)}>
-      <div className="kui-SidebarMenuSubList">{children}</div>
+      <ul className="kui-SidebarMenuSubList">{children}</ul>
     </Accordion.Content>
   );
 });

package/src/components/slider.css

@@ -241,6 +241,7 @@
 .kui-SliderTick {
   position: absolute;
   top: 0;
+  transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;

package/src/components/slider.tsx

@@ -26,18 +26,34 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
     props,
     sliderPropDefs,
   );
-  const { ticks, showTickLabels, snapToTicks, unit } = props;
-
-  const min = sliderProps.min ?? 0;
-  const max = sliderProps.max ?? 100;
-
-  // Current value for accessibility
-  const currentValue = sliderProps.value ?? sliderProps.defaultValue ?? [min];
-  const isRange = Array.isArray(currentValue) && currentValue.length > 1;
+  const {
+    ticks,
+    unit,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    onValueCommit,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    ...rootProps
+  } = sliderProps;
+  const { showTickLabels, snapToTicks } = props;
+
+  const min = rootProps.min ?? 0;
+  const max = rootProps.max ?? 100;
+
+  // The slider keeps its own copy of the value when uncontrolled, so the handles, their
+  // labels and a tick press all read the current value rather than the first one.
+  const [uncontrolledValue, setUncontrolledValue] = React.useState<number[]>(
+    () => defaultValue ?? [min],
+  );
+  const isControlled = valueProp !== undefined;
+  const currentValue = isControlled ? valueProp : uncontrolledValue;
+  const tickIdPrefix = React.useId();
 
   // For snapping to ticks, we need to handle this differently
   // Radix slider doesn't support arbitrary step values, so we'll handle snapping in the onValueChange
-  const step = sliderProps.step;
+  const step = rootProps.step;
 
   // Optimized snap-to-ticks with memoized sorted ticks
   const sortedTicks = React.useMemo(
@@ -108,7 +124,6 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
   const announceRef = React.useRef<HTMLDivElement>(null);
   const announceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const { onValueChange } = sliderProps;
   // Handle value changes with snapping
   const handleValueChange = React.useCallback(
     (newValue: number[]) => {
@@ -131,9 +146,10 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         }, 1000);
       }
 
+      if (!isControlled) setUncontrolledValue(finalValue);
       onValueChange?.(finalValue);
     },
-    [snapToTicks, ticks, snapToNearestTick, formatValueText, onValueChange],
+    [snapToTicks, ticks, snapToNearestTick, formatValueText, onValueChange, isControlled],
   );
 
   // Cleanup timeout on unmount
@@ -152,49 +168,37 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         ref={announceRef}
         aria-live="polite"
         aria-atomic="true"
-        className="sr-only"
-        style={{
-          position: 'absolute',
-          left: '-10000px',
-          width: '1px',
-          height: '1px',
-          overflow: 'hidden',
-        }}
+        className="kui-sr-only"
       />
 
       <SliderPrimitive.Root
         data-accent-color={color}
         data-radius={radius}
         ref={forwardedRef}
-        {...sliderProps}
+        {...rootProps}
+        value={currentValue}
         step={step}
         onValueChange={handleValueChange}
+        onValueCommit={onValueCommit}
         asChild={false}
         className={classNames('kui-SliderRoot', className)}
-        // Essential ARIA attributes for WCAG 2.2 AA compliance
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={Array.isArray(currentValue) ? currentValue[0] : (currentValue as number)}
-        aria-valuetext={formatValueText(currentValue as number[])}
-        aria-label={props['aria-label'] || `${isRange ? 'Range' : 'Value'} slider`}
       >
         <SliderPrimitive.Track className="kui-SliderTrack">
           <SliderPrimitive.Range
             className="kui-SliderRange"
-            data-inverted={sliderProps.inverted ? '' : undefined}
+            data-inverted={rootProps.inverted ? '' : undefined}
           />
         </SliderPrimitive.Track>
-        {(sliderProps.value ?? sliderProps.defaultValue ?? []).map((value, index) => (
+        {currentValue.map((value, index) => (
           <SliderPrimitive.Thumb
             key={index}
             className="kui-SliderThumb"
             {...(tabIndex !== undefined ? { tabIndex } : undefined)}
-            aria-label={
-              isRange
-                ? `${index === 0 ? 'Minimum' : index === 1 ? 'Maximum' : `Thumb ${index + 1}`} value: ${unit ? `${value} ${unit}` : value}`
-                : `Slider value: ${unit ? `${value} ${unit}` : value}`
-            }
-            aria-valuetext={unit ? `${value} ${unit}` : value.toString()}
+            // The caller's name goes to every handle. Without one, Radix names the two
+            // handles of a range "Minimum" and "Maximum".
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-valuetext={unit ? `${value} ${unit}` : undefined}
           />
         ))}
       </SliderPrimitive.Root>
@@ -205,20 +209,26 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
               <button
                 key={tick.index}
                 className="kui-SliderTick"
-                style={{
-                  left: `${tick.percentage}%`,
-                  transform: 'translateX(-50%)',
-                }}
+                // Only `left` varies per tick; the centring transform lives in `.kui-SliderTick`.
+                style={{ left: `${tick.percentage}%` }}
                 onClick={() => {
-                  const currentValues = sliderProps.value ?? sliderProps.defaultValue ?? [min];
-                  const newValue = Array.isArray(currentValues)
-                    ? currentValues.map(() => tick.value)
-                    : [tick.value];
+                  // Move only the handle nearest the tick. When handles share a value, a
+                  // tick above it moves the last of them and a tick below moves the first.
+                  let nearest = 0;
+                  currentValue.forEach((v, i) => {
+                    const distance = Math.abs(v - tick.value);
+                    const best = Math.abs(currentValue[nearest] - tick.value);
+                    if (distance < best || (distance === best && tick.value > v)) nearest = i;
+                  });
+                  const newValue = currentValue
+                    .map((v, i) => (i === nearest ? tick.value : v))
+                    .sort((x, y) => x - y);
 
                   handleValueChange(newValue);
+                  onValueCommit?.(newValue);
                 }}
                 aria-label={`Set to ${tick.label || (unit ? `${tick.value} ${unit}` : tick.value)}`}
-                aria-describedby={tick.label ? undefined : `tick-${tick.index}-value`}
+                aria-describedby={tick.label ? undefined : `${tickIdPrefix}-tick-${tick.index}`}
                 type="button"
               >
                 <div className="kui-SliderTickMark" />
@@ -226,7 +236,7 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
                   <div className="kui-SliderTickLabel">{tick.label}</div>
                 )}
                 {!tick.label && (
-                  <span id={`tick-${tick.index}-value`} className="sr-only">
+                  <span id={`${tickIdPrefix}-tick-${tick.index}`} className="kui-sr-only">
                     {unit ? `${tick.value} ${unit}` : tick.value}
                   </span>
                 )}

package/src/components/spinner.css

@@ -8,6 +8,18 @@
   position: relative;
   width: var(--space-5);
   height: var(--space-5);
+  /* The rotation runs on the inner wheel, clipped here. Unclipped, a running transform animation
+     makes Chrome give its own layer to everything painted after it that it might overlap. The
+     leaves stay inside this box at every step; the margin keeps their anti-aliased edges on the
+     diagonal steps, which a clip at the box itself shaves. */
+  contain: paint;
+  overflow-clip-margin: 4px;
+}
+
+.kui-SpinnerWheel {
+  position: absolute;
+  inset: 0;
+  /* On the wheel, not the root: opacity on the clipping root costs Chrome a second layer per spinner. */
   opacity: var(--spinner-opacity);
   /* Single GPU-composited rotation instead of 8 opacity animations */
   animation: kui-spinner-rotate var(--spinner-animation-duration) steps(8, end) infinite;
@@ -73,7 +85,13 @@
 
 /* A busy indicator keeps moving when motion is reduced, more slowly. */
 @media (prefers-reduced-motion: reduce) {
-  .kui-Spinner {
+  .kui-SpinnerWheel {
     animation-duration: calc(var(--spinner-animation-duration) * 3);
   }
 }
+
+/* Children of a Spinner keep their space but are not shown while it spins. A class, not an inline style. */
+.kui-SpinnerHiddenChildren {
+  display: contents;
+  visibility: hidden;
+}

package/src/components/spinner.tsx

@@ -21,16 +21,26 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
 
   if (!loading) return children;
 
+  // Decorative unless named: a named spinner is a status message, an unnamed one is hidden.
+  const named =
+    spinnerProps['aria-label'] !== undefined || spinnerProps['aria-labelledby'] !== undefined;
+
   const spinner = (
-    <span {...spinnerProps} ref={forwardedRef} className={classNames('kui-Spinner', className)}>
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
+    <span
+      role={named ? 'status' : undefined}
+      aria-hidden={named ? undefined : true}
+      {...spinnerProps}
+      ref={forwardedRef} className={classNames('kui-Spinner', className)}>
+      <span className="kui-SpinnerWheel">
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+      </span>
     </span>
   );
 
@@ -38,12 +48,12 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
 
   return (
     <Flex asChild position="relative" align="center" justify="center">
-      <span>
+      <span aria-busy="true">
         {/**
          * `display: contents` removes the content from the accessibility tree in some browsers,
          * so we force remove it with `aria-hidden`
          */}
-        <span aria-hidden style={{ display: 'contents', visibility: 'hidden' }} inert={undefined}>
+        <span aria-hidden className="kui-SpinnerHiddenChildren" inert={undefined}>
           {children}
         </span>
 

package/src/components/table.tsx

@@ -18,10 +18,16 @@ interface TableRootProps
 const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, tableRootPropDefs.size);
   const { layout: layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
-  const { className, children, layout, ...rootProps } = extractProps(
-    props,
-    rootPropDefs
-  );
+  const {
+    className,
+    children,
+    layout,
+    // The table is what gets named, not the scroll wrapper around it.
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    ...rootProps
+  } = extractProps(props, rootPropDefs);
   const tableLayoutClassNames = getResponsiveClassNames({
     value: layout,
     className: tableRootPropDefs.layout.className,
@@ -30,7 +36,14 @@ const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps,
   return (
     <div ref={forwardedRef} className={classNames('kui-TableRoot', className)} {...rootProps}>
       <ScrollArea>
-        <table className={classNames('kui-TableRootTable', tableLayoutClassNames)}>{children}</table>
+        <table
+          className={classNames('kui-TableRootTable', tableLayoutClassNames)}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
+        >
+          {children}
+        </table>
       </ScrollArea>
     </div>
   );

package/src/components/tabs.css

@@ -9,3 +9,37 @@
   outline: var(--focus-ring-width, 2px) solid var(--focus-8);
   outline-offset: var(--focus-ring-offset, 2px);
 }
+
+/*
+ * Vertical: the list is a column beside the panels, its hairline on the inline end, and the
+ * active line runs down that edge.
+ */
+.kui-TabsRoot:where([data-orientation='vertical']) {
+  display: flex;
+}
+
+.kui-TabsList:where([data-orientation='vertical']) {
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-shadow: inset calc(-1 * var(--border-width-standard)) 0 0 0 var(--neutral-a5);
+
+  &:where(:dir(rtl)) {
+    box-shadow: inset var(--border-width-standard) 0 0 0 var(--neutral-a5);
+  }
+
+  :where(&) .kui-TabsTrigger {
+    justify-content: flex-start;
+  }
+
+  :where(&) .kui-TabsTrigger:where([data-state='active'])::before {
+    top: 0;
+    bottom: 0;
+    left: auto;
+    right: auto;
+    inset-inline-end: 0;
+    width: var(--focus-ring-width, 2px);
+    height: auto;
+  }
+}

package/src/components/tabs.tsx

@@ -86,8 +86,6 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
         {...contentProps}
         ref={forwardedRef}
         className={classNames('kui-TabsContent', className)}
-        aria-live="polite"
-        aria-atomic="true"
       />
     );
   },

package/src/components/text-area.css

@@ -28,8 +28,9 @@
   font-style: normal;
   text-align: start;
 
-  /* Allows the `resize` property to work on the div */
+  /* Allows the `resize` property to work on the div. Vertical by default, as in v2; the `resize` prop overrides it. */
   overflow: hidden;
+  resize: vertical;
 
   isolation: isolate;
 

package/src/components/text-area.tsx

@@ -52,7 +52,6 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, for
   const {
     error,
     errorMessage,
-   
     required,
     'aria-describedby': _ariaDescribedby,
     'aria-labelledby': _ariaLabelledby,
@@ -72,6 +71,7 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, for
         className="kui-reset kui-TextAreaInput"
         ref={forwardedRef}
         {...nativeTextAreaProps}
+        required={required || undefined}
         {...ariaProps}
       />
       {textAreaProps.errorMessage && (

package/src/components/text-field.tsx

@@ -91,7 +91,7 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
       })}
       onPointerDown={handlePointerDown}
     >
-      <input spellCheck="false" {...nativeInputProps} {...ariaProps} ref={composeRefs(inputRef, forwardedRef)} className="kui-reset kui-TextFieldInput" />
+      <input {...nativeInputProps} required={required || undefined} {...ariaProps} ref={composeRefs(inputRef, forwardedRef)} className="kui-reset kui-TextFieldInput" />
       {children}
       {inputProps.errorMessage && (
         <div id={errorId} className="kui-TextFieldErrorMessage" role="alert">