@sixthshift/design-system 0.5.0 → 0.7.0

package/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { RadioButton } from "@sixthshift/design-system/radio-button";
 import { cn } from "@sixthshift/design-system/utils";

package/src/components/SearchInput/SearchInput.tsx

@@ -1,11 +1,14 @@
+"use client";
+
 import { Input } from "@sixthshift/design-system/input";
 import { cn } from "@sixthshift/design-system/utils";
 import { Search, X } from "lucide-react";
 import * as React from "react";
 
-export type SearchInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
+export type SearchInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
   value: string;
-  onChange: (value: string) => void;
+  /** Called with the input's string value on every change. The native `onChange(event)` also fires, unchanged. */
+  onValueChange: (value: string) => void;
   onClear?: () => void;
   /** Accessible name for the clear button — it is icon-only. */
   clearLabel?: string;
@@ -17,17 +20,18 @@ export type SearchInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
  *
  * Wraps `Input`, using its `iconLeft`/`iconRight` slots, rather than
  * reimplementing the field. Always controlled — `value` is required and
- * there is no `defaultValue`/uncontrolled mode. `onChange` receives the
- * string value directly, not the change event. Clearing calls `onClear` if
- * provided, otherwise calls `onChange("")`.
+ * there is no `defaultValue`/uncontrolled mode. `onValueChange` receives the
+ * string value directly; the native `onChange` keeps its event signature and
+ * fires too if passed. Clearing calls `onClear` if provided, otherwise calls
+ * `onValueChange("")` — note a programmatic clear dispatches no native event.
  */
 const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ className, value, onChange, onClear, clearLabel = "Clear search", ...props }, ref) => {
+  ({ className, value, onValueChange, onChange, onClear, clearLabel = "Clear search", ...props }, ref) => {
     const handleClear = () => {
       if (onClear) {
         onClear();
       } else {
-        onChange("");
+        onValueChange("");
       }
     };
 
@@ -36,7 +40,10 @@ const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
         ref={ref}
         type="text"
         value={value}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={(e) => {
+          onValueChange(e.target.value);
+          onChange?.(e);
+        }}
         iconLeft={<Search />}
         iconRight={
           value ? (

package/src/components/Select/Select.tsx

@@ -1,6 +1,10 @@
+"use client";
+
 import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { forwardRef, type HTMLAttributes, type ReactElement, type Ref, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { closestBrand } from "../../internal/brandScope";
+import { useEscapeLayer } from "../../internal/escapeLayers";
 import { SelectDropdown, selectOptionId } from "./SelectDropdown";
 import { SelectTriggerButton, SelectTriggerSearch } from "./SelectTrigger";
 import { useSelectKeyboard } from "./useSelectKeyboard";
@@ -19,6 +23,12 @@ type SelectBaseProps<T extends string = string> = Omit<HTMLAttributes<HTMLElemen
   placeholder?: string;
   searchable?: boolean;
   clearable?: boolean;
+  /** Input name for native form submission. Selected value(s) are mirrored into hidden `<input>`s, `${name}[]` in multiple mode. */
+  name?: string;
+  /** The `form` attribute for the hidden input(s), for a Select rendered outside its `<form>`. */
+  form?: string;
+  /** Marks the combobox `aria-required`. Constraint validation is the caller's job — the mirrored inputs are hidden. */
+  required?: boolean;
 };
 
 type SelectSingleProps<T extends string = string> = SelectBaseProps<T> & {
@@ -54,6 +64,9 @@ const SelectRoot = forwardRef(function SelectRoot<T extends string = string>(pro
     placeholder = "Select...",
     searchable = false,
     clearable = false,
+    name,
+    form,
+    required = false,
     ...restProps
   } = props;
 
@@ -105,7 +118,7 @@ const SelectRoot = forwardRef(function SelectRoot<T extends string = string>(pro
   const showClearButton = clearable && hasValue && !disabled;
 
   // Floating UI
-  const { refs, floatingStyles } = useFloating({
+  const { refs, elements, floatingStyles } = useFloating({
     open,
     onOpenChange: setOpen,
     placement: "bottom-start",
@@ -244,6 +257,10 @@ const SelectRoot = forwardRef(function SelectRoot<T extends string = string>(pro
     }
   }, [highlightedIndex, open]);
 
+  // While open, an Escape press closes the dropdown and must not also close
+  // a Modal/Sheet this Select is rendered inside.
+  useEscapeLayer(open);
+
   // Close on outside click
   useEffect(() => {
     if (!open) return;
@@ -266,7 +283,8 @@ const SelectRoot = forwardRef(function SelectRoot<T extends string = string>(pro
   const activeOptionId = open && highlightedIndex >= 0 && highlightedIndex < filteredOptions.length ? selectOptionId(listboxId, highlightedIndex) : undefined;
 
   // Strip mode from DOM props
-  const { mode: _, value: _v, defaultValue: _dv, onValueChange: _oc, ...htmlProps } = restProps as Record<string, unknown>;
+  const { mode: _, value: _v, defaultValue: _dv, onValueChange: _oc, ...strippedProps } = restProps as Record<string, unknown>;
+  const htmlProps = required ? { "aria-required": true, ...strippedProps } : strippedProps;
 
   // `role="listbox"` requires an accessible name of its own, and the trigger
   // can't supply one: its label is the current *value*, and in searchable mode
@@ -311,6 +329,12 @@ const SelectRoot = forwardRef(function SelectRoot<T extends string = string>(pro
         />
       )}
 
+      {/* Hidden inputs mirror the selection for native form submission — same
+          contract as DatePicker: rendered inline (not portalled) so they sit
+          inside the surrounding <form> unless `form` points elsewhere. */}
+      {name && !isMultiple && singleValue && <input type="hidden" name={name} value={singleValue} {...(form ? { form } : {})} />}
+      {name && isMultiple && multiValue.map((v) => <input key={v} type="hidden" name={`${name}[]`} value={v} {...(form ? { form } : {})} />)}
+
       {open && !collapsed && (
         <SelectDropdown
           setFloating={refs.setFloating}
@@ -319,6 +343,7 @@ const SelectRoot = forwardRef(function SelectRoot<T extends string = string>(pro
           label={listboxLabel}
           activeOptionId={activeOptionId}
           floatingStyles={floatingStyles}
+          brand={closestBrand(elements.domReference)}
           displayOptions={filteredOptions}
           highlightedIndex={highlightedIndex}
           selectedValues={selectedValues}

package/src/components/Select/SelectDropdown.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FloatingPortal } from "@floating-ui/react";
 import { cn } from "@sixthshift/design-system/utils";
 import { Check } from "lucide-react";
@@ -21,6 +23,8 @@ interface SelectDropdownProps<T extends string> {
   /** The highlighted option's id, or undefined when nothing is highlighted. */
   activeOptionId: string | undefined;
   floatingStyles: React.CSSProperties;
+  /** The trigger's brand scope, re-stamped here because the portal leaves it behind. */
+  brand: string | undefined;
   displayOptions: readonly { value: T; label: string }[];
   highlightedIndex: number;
   selectedValues: Set<T>;
@@ -39,6 +43,7 @@ export const SelectDropdown = <T extends string>({
   label,
   activeOptionId,
   floatingStyles,
+  brand,
   displayOptions,
   highlightedIndex,
   selectedValues,
@@ -66,6 +71,7 @@ export const SelectDropdown = <T extends string>({
       tabIndex={-1}
       onKeyDown={onKeyDown}
       style={floatingStyles}
+      data-brand={brand}
       className="select-dropdown border-(color:--select-dropdown-border) z-popover max-h-60 overflow-y-auto rounded-md border bg-(--select-dropdown-bg) shadow-lg"
     >
       {displayOptions.length === 0 ? (

package/src/components/Select/SelectTrigger.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import { ChevronDown, X } from "lucide-react";
 import type { HTMLAttributes, Ref } from "react";
@@ -55,6 +57,9 @@ export const SelectTriggerButton = ({
           className
         )}
         title={collapsed ? displayLabel : undefined}
+        // The APG select-only combobox: a button-behaving element announced as
+        // a combobox, which also admits aria-required — a plain button doesn't.
+        role="combobox"
         aria-haspopup="listbox"
         aria-expanded={open}
         // The listbox unmounts when closed, so only reference it while it exists.

package/src/components/Select/useSelectKeyboard.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback } from "react";
 import type { SelectOption } from "./Select";
 

package/src/components/Sheet/Sheet.tsx

@@ -1,7 +1,11 @@
-import { FloatingFocusManager, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+"use client";
+
+import { FloatingFocusManager, FloatingPortal, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
 import { useMergedFloatingRef, usePresence } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
 import { forwardRef, type HTMLAttributes, type ReactNode, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { useOpenerBrand } from "../../internal/brandScope";
+import { hasOpenEscapeDialog, hasOpenEscapeLayer } from "../../internal/escapeLayers";
 import { SheetBody, SheetContext, SheetFooter, SheetHeader } from "./components";
 
 // =============================================================================
@@ -23,6 +27,12 @@ export type SheetProps = Pick<HTMLAttributes<HTMLDivElement>, "className" | "sty
   dismissOnOutsidePress?: boolean;
   /** When true, shows a close (X) button in the header */
   closable?: boolean;
+  /**
+   * Name of a brand the theme defines, rendered as `data-brand` on the sheet.
+   * Omitted, the sheet takes the brand scope of the control that opened it
+   * (whatever held focus), since the portal leaves the trigger's scope behind.
+   */
+  brand?: string | undefined;
   /** Children — use Sheet.Header, Sheet.Body, Sheet.Footer */
   children: ReactNode;
 };
@@ -51,6 +61,7 @@ const SheetRoot = forwardRef<HTMLDivElement, SheetProps>(
       dismissable = true,
       dismissOnOutsidePress = false,
       closable,
+      brand,
       className,
       style,
       children,
@@ -61,6 +72,7 @@ const SheetRoot = forwardRef<HTMLDivElement, SheetProps>(
     ref
   ) => {
     const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
+    const openerBrand = useOpenerBrand(open);
 
     // Drive presence from the controlled `open` prop.
     // When `open` flips to false, we play the exit animation, then unmount.
@@ -78,8 +90,14 @@ const SheetRoot = forwardRef<HTMLDivElement, SheetProps>(
 
     const { refs, context } = useFloating({
       open,
-      onOpenChange: (nextOpen) => {
-        if (!nextOpen) requestClose();
+      onOpenChange: (nextOpen, _event, reason) => {
+        if (nextOpen) return;
+        // The sheet is non-modal, so overlays above it keep their own Escape
+        // handling: a transient layer (Select dropdown, Popover, picker)
+        // consumes the press, and an open Modal owns it. Only a bare Escape
+        // — nothing stacked above — closes the sheet.
+        if (reason === "escape-key" && (hasOpenEscapeLayer() || hasOpenEscapeDialog())) return;
+        requestClose();
       },
     });
 
@@ -114,37 +132,44 @@ const SheetRoot = forwardRef<HTMLDivElement, SheetProps>(
     const isExiting = state === "exiting";
 
     return (
-      <FloatingFocusManager context={context} modal={false}>
-        <div
-          ref={mergedRef}
-          // Explicit, though `getFloatingProps` also supplies it from `useRole`:
-          // the ARIA attributes below are only valid on a dialog, and static
-          // analysis cannot see a role that arrives through a spread. Matches Modal.
-          role="dialog"
-          aria-label={ariaLabel}
-          aria-labelledby={labelledBy}
-          aria-describedby={ariaDescribedBy}
-          tabIndex={-1}
-          data-state={state}
-          data-side={side}
-          className={cn(
-            "sheet fixed top-0 bottom-0 z-sheet flex flex-col overflow-hidden bg-(--sheet-bg) outline-hidden",
-            "border-(color:--sheet-border) shadow-lg",
-            side === "right" ? "right-0 border-l" : "left-0 border-r",
-            sizeClasses[size],
-            "max-sm:inset-x-0",
-            isEntering && side === "right" && "animate-slide-right-in",
-            isExiting && side === "right" && "animate-slide-right-out",
-            isEntering && side === "left" && "animate-slide-left-in",
-            isExiting && side === "left" && "animate-slide-left-out",
-            className
-          )}
-          style={style}
-          {...getFloatingProps({})}
-        >
-          <SheetContext.Provider value={sheetContextValue}>{children}</SheetContext.Provider>
-        </div>
-      </FloatingFocusManager>
+      // Self-portalled for the same reason as Modal: `position: fixed` inside
+      // a transformed/filtered ancestor would anchor (and clip) the sheet to
+      // that ancestor instead of the viewport. `FloatingPortal` preserves tab
+      // order around the trigger for non-modal focus management.
+      <FloatingPortal>
+        <FloatingFocusManager context={context} modal={false}>
+          <div
+            ref={mergedRef}
+            // Explicit, though `getFloatingProps` also supplies it from `useRole`:
+            // the ARIA attributes below are only valid on a dialog, and static
+            // analysis cannot see a role that arrives through a spread. Matches Modal.
+            role="dialog"
+            aria-label={ariaLabel}
+            aria-labelledby={labelledBy}
+            aria-describedby={ariaDescribedBy}
+            tabIndex={-1}
+            data-state={state}
+            data-side={side}
+            data-brand={brand ?? openerBrand}
+            className={cn(
+              "sheet fixed top-0 bottom-0 z-sheet flex flex-col overflow-hidden bg-(--sheet-bg) outline-hidden",
+              "border-(color:--sheet-border) shadow-lg",
+              side === "right" ? "right-0 border-l" : "left-0 border-r",
+              sizeClasses[size],
+              "max-sm:inset-x-0",
+              isEntering && side === "right" && "animate-slide-right-in",
+              isExiting && side === "right" && "animate-slide-right-out",
+              isEntering && side === "left" && "animate-slide-left-in",
+              isExiting && side === "left" && "animate-slide-left-out",
+              className
+            )}
+            style={style}
+            {...getFloatingProps({})}
+          >
+            <SheetContext.Provider value={sheetContextValue}>{children}</SheetContext.Provider>
+          </div>
+        </FloatingFocusManager>
+      </FloatingPortal>
     );
   }
 );

package/src/components/Sheet/components/SheetContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, type KeyboardEvent, type MouseEvent, type PropsWithChildren, useContext, useMemo } from "react";
 
 export type OnClose = (event?: MouseEvent<Element> | KeyboardEvent<Element>) => void;

package/src/components/Sheet/components/SheetHeader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import { X } from "lucide-react";
 import * as React from "react";

package/src/components/Spinner/Spinner.tsx

@@ -8,7 +8,7 @@ import * as React from "react";
  * The colour used to be `text-fg-subtle`, a semantic token named directly in
  * the class string — the one thing a consumer could not do was recolour a
  * spinner without fighting `className` against it. `--spinner-fg` in
- * src/theme/recipes/spinner.css is now that seam: a consumer overrides the
+ * src/components/Spinner/spinner.recipe.css is now that seam: a consumer overrides the
  * variable, scoped to whatever subtree they like, instead of overriding a
  * class.
  */
@@ -40,7 +40,7 @@ export type SpinnerProps = React.SVGAttributes<SVGElement> & VariantProps<typeof
  * live region) if the loading state needs to be announced.
  *
  * Colour reads the `--spinner-fg` component token
- * (src/theme/recipes/spinner.css) rather than a class name, so a consumer
+ * (src/components/Spinner/spinner.recipe.css) rather than a class name, so a consumer
  * can recolour a spinner scoped to a subtree without fighting `className`.
  */
 const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(({ className, size, ...props }, ref) => (

package/src/components/Switch/Switch.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { Label } from "@sixthshift/design-system/label";
 import { cn } from "@sixthshift/design-system/utils";

package/src/components/Tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import type * as React from "react";
 import { useId } from "react";

package/src/components/Tabs/components/TabsContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, type ReactNode, useContext } from "react";
 
 export type TabItem = {

package/src/components/Tabs/components/TabsList.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import type * as React from "react";
 import { forwardRef, useCallback, useRef } from "react";

package/src/components/Tabs/components/TabsPanels.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import { forwardRef } from "react";
 import { useTabsContext } from "./TabsContext";

package/src/components/Tabs/components/TabsTrigger.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Badge } from "@sixthshift/design-system/badge";
 import { cn } from "@sixthshift/design-system/utils";
 import { cva } from "class-variance-authority";
@@ -9,7 +11,7 @@ import { type TabItem, useTabsContext } from "./TabsContext";
  *
  * Colour reads `--tabs-trigger-bg` / `--tabs-trigger-fg` component tokens
  * (each with a `-hovered` state) whose values are decided by
- * src/theme/recipes/tabs.css. That file is the mapping from `selected` to a
+ * src/components/Tabs/tabs.recipe.css. That file is the mapping from `selected` to a
  * semantic token — the layer that used to be the two branches of a `cva`
  * `selected` variant here, compiled into class-name literals and unreachable
  * from outside. Nothing in this file names a colour, which is the point: the

package/src/{theme/recipes/tabs.css → components/Tabs/tabs.recipe.css}

@@ -7,7 +7,7 @@
  * data, so a consumer can re-point a cell or scope a change to a subtree.
  *
  * The grammar is `--tabs-trigger-{context}[-{state}]` — the same `context`
- * and `state` words the semantic layer uses (src/theme/schema.ts). `selected`
+ * and `state` words the semantic layer uses (src/theming/vocabulary.ts). `selected`
  * never appears in a token name: it selects, via the `data-selected`
  * attribute below. Putting it in the name (`--tabs-trigger-bg-selected`)
  * would restore the combinatorial explosion this layer exists to remove.

package/src/components/TagChip/TagChip.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Badge } from "@sixthshift/design-system/badge";
 import { cn } from "@sixthshift/design-system/utils";
 import { X } from "lucide-react";

package/src/components/TagInput/TagInput.tsx

@@ -1,32 +1,40 @@
+"use client";
+
 import { TagChip } from "@sixthshift/design-system/tag-chip";
 import { cn } from "@sixthshift/design-system/utils";
 import { forwardRef, type KeyboardEvent, useState } from "react";
 
 export type TagInputProps = {
   value: string[];
-  onChange: (tags: string[]) => void;
+  onValueChange: (tags: string[]) => void;
   placeholder?: string;
   id?: string;
   className?: string;
+  /** Input name for native form submission. Each tag is mirrored into a hidden `<input name="${name}[]">`. */
+  name?: string;
+  /** The `form` attribute for the hidden inputs, for a TagInput rendered outside its `<form>`. */
+  form?: string;
 };
 
 /**
  * Token input for tags: existing tags render as removable `TagChip`s, typing
  * plus Enter or comma commits a new one, Backspace on an empty field removes
  * the last. Duplicates are ignored. Controlled only — there is no
- * `defaultValue`, the parent always owns `value`.
+ * `defaultValue`, the parent always owns `value` and receives changes via
+ * `onValueChange`. With `name` set, each tag is mirrored into a hidden
+ * `<input name="${name}[]">` for native form submission.
  *
  * The chrome matches `Input` (same border/focus tokens) so it sits naturally
  * among other form fields; the field has no visible label of its own, so
  * give it an accessible name via a `<label htmlFor={id}>` (pass `id`) or
  * `aria-label`.
  */
-export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(({ value, onChange, placeholder = "Add a tag…", id, className }, ref) => {
+export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(({ value, onValueChange, placeholder = "Add a tag…", id, className, name, form }, ref) => {
   const [draft, setDraft] = useState("");
 
   const commit = () => {
     const tag = draft.trim();
-    if (tag && !value.includes(tag)) onChange([...value, tag]);
+    if (tag && !value.includes(tag)) onValueChange([...value, tag]);
     setDraft("");
   };
 
@@ -35,7 +43,7 @@ export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(({ value, onCh
       e.preventDefault();
       commit();
     } else if (e.key === "Backspace" && draft === "" && value.length > 0) {
-      onChange(value.slice(0, -1));
+      onValueChange(value.slice(0, -1));
     }
   };
 
@@ -48,8 +56,9 @@ export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(({ value, onCh
       )}
     >
       {value.map((tag) => (
-        <TagChip key={tag} tag={tag} onRemove={() => onChange(value.filter((t) => t !== tag))} />
+        <TagChip key={tag} tag={tag} onRemove={() => onValueChange(value.filter((t) => t !== tag))} />
       ))}
+      {name && value.map((tag) => <input key={tag} type="hidden" name={`${name}[]`} value={tag} {...(form ? { form } : {})} />)}
       <input
         id={id}
         value={draft}

package/src/components/Textarea/Textarea.tsx

@@ -1,28 +1,64 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
+import type { WritableRefObject } from "../../internal/types";
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  /**
+   * Grows the textarea to fit its content instead of scrolling internally.
+   * Off by default — a fixed box that scrolls is still correct for e.g. a
+   * bounded comment field. `rows` still sets the starting height.
+   */
+  autosize?: boolean;
+};
 
 /**
  * Multi-line text input for longer free-form text.
  *
  * A thin styled wrapper around `<textarea>` — no custom props beyond
- * `React.TextareaHTMLAttributes`, no auto-resize, and no maximum-length UI of
+ * `autosize` and `React.TextareaHTMLAttributes`, and no maximum-length UI of
  * its own. Height comes from a `min-h-[60px]` default plus whatever `rows`
- * or `className` the caller passes; growing with content is the caller's
- * responsibility. Controlled or uncontrolled exactly like a native textarea.
+ * or `className` the caller passes. With `autosize`, that starting height
+ * grows with content instead; without it, growing with content is the
+ * caller's responsibility. Controlled or uncontrolled exactly like a native
+ * textarea.
  *
  * Meant to be wrapped by `FormField` for label, description and validation
  * wiring.
  */
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, autosize = false, onInput, value, ...props }, ref) => {
+  const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
+
+  const resize = React.useCallback(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: value only triggers the resize, it isn't read here
+  React.useLayoutEffect(() => {
+    if (autosize) resize();
+  }, [autosize, resize, value]);
+
   return (
     <textarea
+      value={value}
       className={cn(
         "textarea border-(color:--textarea-border) focus-visible:ring-(color:--textarea-ring) flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-(--textarea-placeholder-fg) focus-visible:outline-hidden focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+        autosize && "resize-none overflow-hidden",
         className
       )}
-      ref={ref}
+      ref={(node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) (ref as WritableRefObject<HTMLTextAreaElement | null>).current = node;
+      }}
+      onInput={(event) => {
+        if (autosize) resize();
+        onInput?.(event);
+      }}
       {...props}
     />
   );

package/src/{theme/recipes/textarea.css → components/Textarea/textarea.recipe.css}

@@ -5,7 +5,7 @@
  * button.css's header for why `@layer components` is load-bearing.
  *
  * Textarea's background is literal `bg-transparent` in the markup, not a
- * semantic token today — there is nothing in tier 2 to point a `--textarea-bg`
+ * semantic token today — there is nothing in the semantic layer to point a `--textarea-bg`
  * at, so no such token is introduced here. Border, placeholder and focus ring
  * are the tokens that existed as semantic classes before this file, and are
  * the ones made overridable.

package/src/components/TimePicker/PeriodSelector.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import type { TimePeriod } from "./timepicker.types";
 

package/src/components/TimePicker/TimeColumn.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import { useEffect, useRef } from "react";
 

package/src/components/TimePicker/TimePicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
@@ -6,6 +8,8 @@ import * as React from "react";
 import { useCallback, useId, useMemo, useState } from "react";
 import { fromISOTime, fromISOTimeOrUndefined, type Temporal, toISOTimeOrUndefined } from "../../date-time";
 import { PickerField } from "../../internal";
+import { closestBrand } from "../../internal/brandScope";
+import { useEscapeLayer } from "../../internal/escapeLayers";
 import { Button } from "../Button";
 import { Separator } from "../Separator";
 import { PeriodSelector } from "./PeriodSelector";
@@ -241,6 +245,10 @@ export const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>((pro
 
   const click = useClick(context);
   const dismiss = useDismiss(context);
+
+  // While open, an Escape press closes this picker's popover and must not
+  // also close a Modal/Sheet it is rendered inside.
+  useEscapeLayer(open);
   const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
 
   // IDs for accessibility
@@ -347,6 +355,8 @@ export const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>((pro
             role="dialog"
             aria-label="Choose time"
             style={floatingStyles}
+            // Portalled out of the trigger's brand scope, so carry it across.
+            data-brand={closestBrand(context.elements.domReference)}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
           >

package/src/components/TimePicker/TimeSegments.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { Temporal } from "../../date-time";
 import { SegmentedField, type SegmentSpec, type SegmentValues } from "../../internal";
 import { parsedToTemporal, temporalTimeToISO, to12Hour, to24Hour } from "./timepicker.hooks";