@womp/kookie-ui 0.26.2 → 0.26.3

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 "use client";
-import"./chunk-AYKOOEZR.js";import{a as uo}from"./chunk-RIHTVZVJ.js";import{a as vo,b as wo,c as yo,d as zo}from"./chunk-3LIF53YY.js";import{a as so}from"./chunk-WTP2KIK3.js";import"./chunk-NG54K6FL.js";import{c as fo}from"./chunk-DG2KIH54.js";import{a as mo}from"./chunk-2TWPPDII.js";import{a as po,c as to,d as xo,e as ao,f as bo,g as co,h as go,i as ho,j as io}from"./chunk-6M6HGIGN.js";import{a as jo}from"./chunk-NYBE3U3V.js";import{l as ko}from"./chunk-UR5BUNNT.js";import{a as _}from"./chunk-ONJYRJ66.js";import{a as $}from"./chunk-MS2ONKJJ.js";import{h as oo}from"./chunk-DIY2XQKR.js";import{e as ro}from"./chunk-3QN4C5LW.js";import{a as eo}from"./chunk-M7IQIKB4.js";import{c as X}from"./chunk-TF6WAIUQ.js";import{h as Y}from"./chunk-5MEWNLNH.js";import{a as Z}from"./chunk-H2TSRYQ5.js";import{g as no}from"./chunk-5FWEGTP6.js";import{h as lo}from"./chunk-POP5NB33.js";import"./chunk-4G3FJUER.js";import"./chunk-ZG2XQUOH.js";import{a as V}from"./chunk-W4CPV4PO.js";import{a as W}from"./chunk-L66IUPDW.js";import{a as Q}from"./chunk-7QP6JFPO.js";import{i as qo}from"./chunk-TXVZOS3E.js";import{e as R}from"./chunk-EERKYRYI.js";import{a as S}from"./chunk-AXODGYRY.js";import{a as T}from"./chunk-LFAUMDU5.js";import{c as U}from"./chunk-AJANJ22M.js";import{o as N}from"./chunk-457Z4R5W.js";import{a as O}from"./chunk-VCZ2GYOF.js";import{a as P}from"./chunk-5PQCTVZB.js";import{c as F}from"./chunk-TFFMELAL.js";import"./chunk-2VSRZ4IT.js";import{a as G}from"./chunk-HVMRB3AH.js";import"./chunk-4KIZRO52.js";import{a as H}from"./chunk-TFGUTYZK.js";import{a as I}from"./chunk-ADL3LEOQ.js";import{l as K}from"./chunk-BEHAT3GI.js";import{g as J}from"./chunk-RD4T2MCC.js";import{n as L}from"./chunk-3C4Q6PMS.js";import"./chunk-2ACVWLFA.js";import{g as M}from"./chunk-TFFU435D.js";import{f as d}from"./chunk-UBUGG2OB.js";import{h as n}from"./chunk-F2722F7B.js";import"./chunk-FATCGZZE.js";import{a as l}from"./chunk-7VJF6EXN.js";import{a as g}from"./chunk-NS573D6O.js";import"./chunk-TGRHRMQI.js";import{a as q}from"./chunk-GOXGRJO6.js";import{a as s}from"./chunk-F364PDDM.js";import{a as u}from"./chunk-H33NTGVF.js";import{a as A}from"./chunk-VVLUY4WR.js";import{m as E}from"./chunk-N3B6EGXL.js";import{b as B,c as C}from"./chunk-E6BDD3PN.js";import{a as D}from"./chunk-WUCBFB25.js";import{a as z}from"./chunk-ULCHGKI3.js";import{a as y}from"./chunk-Y2DBXOLT.js";import{a as v,b as w}from"./chunk-K55IQP5H.js";import{a as h}from"./chunk-OTCVSJT7.js";import"./chunk-BQC2P3SN.js";import{a as i,b as j,c as k}from"./chunk-GE7FRBZ4.js";import"./chunk-GHUAUFG7.js";import"./chunk-UJ7JERJ5.js";import"./chunk-VPUFKJQA.js";import"./chunk-C2WKAIZM.js";import{a as c}from"./chunk-B6YGNB3V.js";import"./chunk-UG73IGRF.js";import{a as f}from"./chunk-DQCE7DHY.js";import{a as e}from"./chunk-KVVRFWGQ.js";import"./chunk-YCLPURTD.js";import"./chunk-CR65RYGM.js";import{a as m,b as p,c as t,d as x}from"./chunk-GKDGNPBD.js";import"./chunk-HBWBPBSA.js";import"./chunk-7N2Q5WOM.js";import"./chunk-OAJ5DARR.js";import{b as o,c as r}from"./chunk-5KMEUZWN.js";import"./chunk-5ON3XLRD.js";import"./chunk-5JYSYTHA.js";import"./chunk-ZKQCSGL3.js";import"./chunk-BVQDDN5Q.js";import{a}from"./chunk-LGZCNQBS.js";import"./chunk-3ZWHKNHI.js";import{a as b}from"./chunk-VIVM525H.js";import"./chunk-KOAWATCI.js";import"./chunk-5KJIPH2N.js";import"./chunk-YOSLXJI5.js";import"./chunk-XU74PNM2.js";import"./chunk-LPLW7OWA.js";import"./chunk-L54FWKJE.js";import"./chunk-CLJ6SEGP.js";import"./chunk-OKQAVYW4.js";import"./chunk-KQIZMPSW.js";import"./chunk-TTW3EAQT.js";import"./chunk-LTUW36HM.js";import"./chunk-QKCNGEX4.js";import"./chunk-XUCR7L4G.js";import"./chunk-G66WDIIV.js";import"./chunk-GHWEXMF6.js";import"./chunk-MAA6LEE2.js";import"./chunk-3QWGSRYC.js";import"./chunk-WEBNIUEX.js";import"./chunk-VQPANPMI.js";export{vo as APPEARANCE_STORAGE_KEY,c as AccessibleIcon,d as Accordion,n as AlertDialog,q as Avatar,s as Blockquote,u as Box,z as Button,A as Card,E as Chatbar,G as Checkbox,F as CheckboxGroup,t as ChevronDownIcon,H as Chip,I as Code,K as Combobox,C as Confirmation,L as ContextMenu,M as Dialog,N as DropdownMenu,e as Flex,O as Grid,g as Heading,P as Image,a as Kbd,Q as Link,qo as MessageScroller,R as Navbar,B as Notice,J as Popover,S as Portal,T as Progress,V as Radio,U as RadioGroup,W as Reset,b as ScrollArea,X as SegmentedControl,Y as Select,Z as Separator,no as Sheet,lo as Shell,ko as Sidebar,_ as Slider,o as Slot,r as Slottable,f as Spinner,$ as Switch,oo as Table,ro as Tabs,h as Text,eo as TextArea,fo as TextField,k as Theme,i as ThemeContext,p as ThickCheckIcon,x as ThickChevronRightIcon,m as ThickDividerHorizontalIcon,mo as Toggle,io as Toolbar,xo as ToolbarButton,co as ToolbarFill,to as ToolbarGroup,ao as ToolbarOverflow,go as ToolbarSeparator,bo as ToolbarSlot,ho as ToolbarTitle,w as Tooltip,v as TooltipProvider,jo as VirtualMenu,D as VisuallyHidden,wo as appearanceScript,yo as setAppearance,zo as useAppearance,l as useBodyPointerEventsCleanup,so as useLiveAnnouncer,j as useThemeContext,uo as useToggleState,po as useToolbarOverflow,y as useTooltipWrapper};
+import"./chunk-AYKOOEZR.js";import{a as uo}from"./chunk-RIHTVZVJ.js";import{a as vo,b as wo,c as yo,d as zo}from"./chunk-3LIF53YY.js";import{a as so}from"./chunk-WTP2KIK3.js";import"./chunk-NG54K6FL.js";import{a as eo}from"./chunk-R7YHDIFM.js";import{c as fo}from"./chunk-4CIQRUYW.js";import{a as mo}from"./chunk-UMR4AF35.js";import{a as po,c as to,d as xo,e as ao,f as bo,g as co,h as go,i as ho,j as io}from"./chunk-FK434VPA.js";import{a as jo}from"./chunk-7QBNXNEN.js";import{l as ko}from"./chunk-Q2TLWILH.js";import{a as _}from"./chunk-IDEDEPBM.js";import{a as $}from"./chunk-DSM5SUH3.js";import{h as oo}from"./chunk-X7JHZ3HA.js";import{e as ro}from"./chunk-ZIAA2C4H.js";import{c as X}from"./chunk-W4Z6ORYO.js";import{h as Y}from"./chunk-OUOP6Q3Z.js";import{a as Z}from"./chunk-324VC67W.js";import{g as no}from"./chunk-2R7WQPXX.js";import{h as lo}from"./chunk-XGES2VBG.js";import"./chunk-4G3FJUER.js";import"./chunk-ZG2XQUOH.js";import{c as U}from"./chunk-E2LSWNWZ.js";import{a as V}from"./chunk-6JGF6PQH.js";import{a as W}from"./chunk-L66IUPDW.js";import{a as Q}from"./chunk-C67MM24U.js";import{i as qo}from"./chunk-Z5W4ACO2.js";import{e as R}from"./chunk-NWXODCTD.js";import{a as S}from"./chunk-AXODGYRY.js";import{a as T}from"./chunk-D2C2A2ZK.js";import{g as M}from"./chunk-WYKNBNM5.js";import{o as N}from"./chunk-VPP5IDW7.js";import{a as O}from"./chunk-Q5SANVIW.js";import{a as P}from"./chunk-ENQV6SEA.js";import{m as E}from"./chunk-KLYI5E6F.js";import{b as B,c as C}from"./chunk-6C6EK2B5.js";import{c as F}from"./chunk-FYTLUDL3.js";import"./chunk-2VSRZ4IT.js";import{a as G}from"./chunk-JD4KR6VZ.js";import"./chunk-4KIZRO52.js";import{a as H}from"./chunk-3UIODOPE.js";import{a as I}from"./chunk-WD66RYF6.js";import{l as K}from"./chunk-GMWCTK5G.js";import{g as J}from"./chunk-OLWUS7PC.js";import{a as D}from"./chunk-WUCBFB25.js";import{n as L}from"./chunk-W3ES2XSB.js";import"./chunk-2ACVWLFA.js";import{a as h}from"./chunk-B6YGNB3V.js";import{f as i}from"./chunk-RP5ORPPH.js";import{h as n}from"./chunk-2NWHEGKZ.js";import"./chunk-FATCGZZE.js";import{a as l}from"./chunk-7VJF6EXN.js";import{a as j}from"./chunk-JP36JSNP.js";import"./chunk-TGRHRMQI.js";import{a as q}from"./chunk-MCHK36NI.js";import{a as s}from"./chunk-HLIOHDEX.js";import{a as u}from"./chunk-XD3C3GVF.js";import{a as z}from"./chunk-CGFLZ3DC.js";import{a as y}from"./chunk-Y2DBXOLT.js";import{a as v,b as w}from"./chunk-MPCCYR7L.js";import{a as k}from"./chunk-4MNRLB57.js";import"./chunk-BQC2P3SN.js";import"./chunk-UJ7JERJ5.js";import{a as A}from"./chunk-EPGIYTFK.js";import"./chunk-YMUERC2J.js";import"./chunk-ACMANOVD.js";import"./chunk-27XQ5PN5.js";import{a as f}from"./chunk-BUXK5VGR.js";import{a as e}from"./chunk-KVVRFWGQ.js";import"./chunk-YCLPURTD.js";import"./chunk-CR65RYGM.js";import{a as m,b as p,c as t,d as x}from"./chunk-GKDGNPBD.js";import"./chunk-7N2Q5WOM.js";import"./chunk-OAJ5DARR.js";import{b as o,c as r}from"./chunk-5KMEUZWN.js";import"./chunk-5JYSYTHA.js";import"./chunk-ISCZ57VL.js";import"./chunk-EB4AG3OL.js";import{a}from"./chunk-QPRUTOLI.js";import"./chunk-OLTRWCQK.js";import{a as b}from"./chunk-MGWGD6KI.js";import"./chunk-KOAWATCI.js";import"./chunk-5KJIPH2N.js";import"./chunk-YOSLXJI5.js";import"./chunk-LPLW7OWA.js";import"./chunk-L54FWKJE.js";import"./chunk-OKQAVYW4.js";import"./chunk-T2DZDW5Y.js";import{a as c,b as d,c as g}from"./chunk-YOZXIUZY.js";import"./chunk-GHUAUFG7.js";import"./chunk-HBWBPBSA.js";import"./chunk-5ON3XLRD.js";import"./chunk-XU74PNM2.js";import"./chunk-CLJ6SEGP.js";import"./chunk-ANQLWGFN.js";import"./chunk-QRV32INS.js";import"./chunk-3QWGSRYC.js";import"./chunk-LTUW36HM.js";import"./chunk-QKCNGEX4.js";import"./chunk-WEBNIUEX.js";import"./chunk-XUCR7L4G.js";import"./chunk-G66WDIIV.js";import"./chunk-GHWEXMF6.js";import"./chunk-MAA6LEE2.js";import"./chunk-VQPANPMI.js";export{vo as APPEARANCE_STORAGE_KEY,h as AccessibleIcon,i as Accordion,n as AlertDialog,q as Avatar,s as Blockquote,u as Box,z as Button,A as Card,E as Chatbar,G as Checkbox,F as CheckboxGroup,t as ChevronDownIcon,H as Chip,I as Code,K as Combobox,C as Confirmation,L as ContextMenu,M as Dialog,N as DropdownMenu,e as Flex,O as Grid,j as Heading,P as Image,a as Kbd,Q as Link,qo as MessageScroller,R as Navbar,B as Notice,J as Popover,S as Portal,T as Progress,V as Radio,U as RadioGroup,W as Reset,b as ScrollArea,X as SegmentedControl,Y as Select,Z as Separator,no as Sheet,lo as Shell,ko as Sidebar,_ as Slider,o as Slot,r as Slottable,f as Spinner,$ as Switch,oo as Table,ro as Tabs,k as Text,eo as TextArea,fo as TextField,g as Theme,c as ThemeContext,p as ThickCheckIcon,x as ThickChevronRightIcon,m as ThickDividerHorizontalIcon,mo as Toggle,io as Toolbar,xo as ToolbarButton,co as ToolbarFill,to as ToolbarGroup,ao as ToolbarOverflow,go as ToolbarSeparator,bo as ToolbarSlot,ho as ToolbarTitle,w as Tooltip,v as TooltipProvider,jo as VirtualMenu,D as VisuallyHidden,wo as appearanceScript,yo as setAppearance,zo as useAppearance,l as useBodyPointerEventsCleanup,so as useLiveAnnouncer,d as useThemeContext,uo as useToggleState,po as useToolbarOverflow,y as useTooltipWrapper};
 //# sourceMappingURL=index.js.map

package/package.json

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

package/src/components/_internal/pane-band-context.ts

@@ -4,11 +4,12 @@ type BandSize = '1' | '2' | '3' | '4';
 
 /**
  * Set by `Shell.PaneHeader` and `Shell.PaneFooter` to their band size, and by `Shell.Scroll` to
- * null (a scrolling list has no band). A `Theme asChild`, the root of every portalled surface
+ * null (a scrolling list has no band). `PortalTheme`, the root of every portalled surface
  * (Popover, Dialog, Sheet, menus), sets null too, so a Toolbar in one does not take the Shell's
- * step. `Shell.Root` clears it again. Unset (`undefined`) everywhere else.
+ * step; a `Theme asChild` an app nests in a pane leaves it alone. `Shell.Root` clears it again.
+ * Unset (`undefined`) everywhere else.
  *
- * Its own module so Theme can reset it without bringing the Shell.
+ * Its own module so PortalTheme can reset it without bringing the Shell.
  */
 const PaneBandSizeContext = React.createContext<BandSize | null | undefined>(undefined);
 

package/src/components/_internal/portal-theme.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { Theme } from '../theme.js';
+import { PaneBandSizeContext } from './pane-band-context.js';
+
+/**
+ * The Theme at the root of a portalled surface (Popover, Dialog, Sheet, menus, Tooltip). The
+ * surface renders outside any Shell pane even though context flows into it, so a Toolbar in it
+ * does not take the pane's band size. A `Theme asChild` an app nests in a pane keeps the band.
+ */
+const PortalTheme = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<typeof Theme>>((props, forwardedRef) => (
+  <PaneBandSizeContext.Provider value={null}>
+    <Theme {...props} ref={forwardedRef} />
+  </PaneBandSizeContext.Provider>
+));
+PortalTheme.displayName = 'PortalTheme';
+
+export { PortalTheme };

package/src/components/alert-dialog.tsx

@@ -5,7 +5,7 @@ import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
 import { alertDialogContentPropDefs } from './alert-dialog.props.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
-import { Theme } from './theme.js';
+import { PortalTheme } from './_internal/portal-theme.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
@@ -48,7 +48,7 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
 
   return (
     <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
-      <Theme asChild>
+      <PortalTheme asChild>
         <AlertDialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-AlertDialogOverlay">
           <div className="kui-BaseDialogScroll kui-AlertDialogScroll">
             <div className={`kui-BaseDialogScrollPadding kui-AlertDialogScrollPadding ${alignClassName}`}>
@@ -67,7 +67,7 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
             </div>
           </div>
         </AlertDialogPrimitive.Overlay>
-      </Theme>
+      </PortalTheme>
     </AlertDialogPrimitive.Portal>
   );
 });

package/src/components/combobox.tsx

@@ -29,7 +29,8 @@ import { useThemeSize } from '../hooks/theme-size.js';
 import { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import { Spinner } from './spinner.js';
-import { Theme, useThemeContext } from './theme.js';
+import { useThemeContext } from './theme.js';
+import { PortalTheme } from './_internal/portal-theme.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import * as Popover from './popover.js';
 import { Slottable } from './slot.js';
@@ -543,7 +544,7 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
 
   return (
     <PopoverPrimitive.Portal container={container} forceMount={forceMount ? true : undefined}>
-      <Theme asChild>
+      <PortalTheme asChild>
         <PopoverPrimitive.Content
           data-accent-color={resolvedColor}
           align="start"
@@ -573,7 +574,7 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
             </CommandPrimitive>
           </ComboboxContentContext.Provider>
         </PopoverPrimitive.Content>
-      </Theme>
+      </PortalTheme>
     </PopoverPrimitive.Portal>
   );
 });

package/src/components/context-menu.tsx

@@ -17,7 +17,8 @@ import {
   contextMenuCheckboxItemPropDefs,
   contextMenuRadioItemPropDefs,
 } from './context-menu.props.js';
-import { Theme, useThemeContext } from './theme.js';
+import { useThemeContext } from './theme.js';
+import { PortalTheme } from './_internal/portal-theme.js';
 import { ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../hooks/theme-size.js';
@@ -133,7 +134,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
 
     return (
       <ContextMenuPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
+        <PortalTheme asChild>
           <ContextMenuPrimitive.Content
             data-accent-color={resolvedColor}
             alignOffset={getMenuAlignOffset(scalarSize)}
@@ -159,7 +160,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
               </ScrollArea>
             )}
           </ContextMenuPrimitive.Content>
-        </Theme>
+        </PortalTheme>
       </ContextMenuPrimitive.Portal>
     );
   },
@@ -419,7 +420,7 @@ const ContextMenuSubContent = React.forwardRef<
 
   return (
     <ContextMenuPrimitive.Portal container={container} forceMount={forceMount}>
-      <Theme asChild>
+      <PortalTheme asChild>
         <ContextMenuPrimitive.SubContent
           data-accent-color={color}
           alignOffset={getMenuAlignOffset(scalarSize)}
@@ -449,7 +450,7 @@ const ContextMenuSubContent = React.forwardRef<
             </ScrollArea>
           )}
         </ContextMenuPrimitive.SubContent>
-      </Theme>
+      </PortalTheme>
     </ContextMenuPrimitive.Portal>
   );
 });

package/src/components/dialog.tsx

@@ -5,7 +5,7 @@ import { Dialog as DialogPrimitive } from 'radix-ui';
 import { dialogContentPropDefs } from './dialog.props.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
-import { Theme } from './theme.js';
+import { PortalTheme } from './_internal/portal-theme.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
@@ -48,7 +48,7 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
 
   return (
     <DialogPrimitive.Portal container={container} forceMount={forceMount}>
-      <Theme asChild>
+      <PortalTheme asChild>
         <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay">
           <div className="kui-BaseDialogScroll kui-DialogScroll">
             <div className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}>
@@ -67,7 +67,7 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
             </div>
           </div>
         </DialogPrimitive.Overlay>
-      </Theme>
+      </PortalTheme>
     </DialogPrimitive.Portal>
   );
 });

package/src/components/dropdown-menu.tsx

@@ -13,7 +13,8 @@ import {
   dropdownMenuCheckboxItemPropDefs,
   dropdownMenuRadioItemPropDefs,
 } from './dropdown-menu.props.js';
-import { Theme, useThemeContext } from './theme.js';
+import { useThemeContext } from './theme.js';
+import { PortalTheme } from './_internal/portal-theme.js';
 import { ChevronDownIcon, ThickCheckIcon, ThickChevronLeftIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../hooks/theme-size.js';
@@ -196,7 +197,7 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
 
     return (
       <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
+        <PortalTheme asChild>
           <DropdownMenuPrimitive.Content
             data-accent-color={resolvedColor}
             align="start"
@@ -227,7 +228,7 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
               </ScrollArea>
             )}
           </DropdownMenuPrimitive.Content>
-        </Theme>
+        </PortalTheme>
       </DropdownMenuPrimitive.Portal>
     );
   },
@@ -724,7 +725,7 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
 
     return (
       <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
+        <PortalTheme asChild>
           <DropdownMenuPrimitive.SubContent
             data-accent-color={color}
             alignOffset={getMenuAlignOffset(scalarSize)}
@@ -754,7 +755,7 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
               </ScrollArea>
             )}
           </DropdownMenuPrimitive.SubContent>
-        </Theme>
+        </PortalTheme>
       </DropdownMenuPrimitive.Portal>
     );
   },

package/src/components/popover.tsx

@@ -6,7 +6,7 @@ import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
-import { Theme } from './theme.js';
+import { PortalTheme } from './_internal/portal-theme.js';
 
 import type { PopoverContentOwnProps } from './popover.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -69,7 +69,7 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
 
     return (
       <PopoverPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
+        <PortalTheme asChild>
           <PopoverPrimitive.Content
             align="start"
             sideOffset={8}
@@ -84,7 +84,7 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
               {props.children}
             </PopoverContentContext.Provider>
           </PopoverPrimitive.Content>
-        </Theme>
+        </PortalTheme>
       </PopoverPrimitive.Portal>
     );
   },

package/src/components/select.tsx

@@ -13,7 +13,8 @@ import {
   selectTriggerPropDefs,
   selectContentPropDefs,
 } from './select.props.js';
-import { useThemeContext, Theme } from './theme.js';
+import { useThemeContext } from './theme.js';
+import { PortalTheme } from './_internal/portal-theme.js';
 import { useThumbSync } from '../hooks/use-thumb-sync.js';
 
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -203,7 +204,7 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
     const resolvedColor = color || themeContext.accentColor;
     return (
       <SelectPrimitive.Portal container={container}>
-        <Theme asChild>
+        <PortalTheme asChild>
           <SelectPrimitive.Content
             data-accent-color={resolvedColor}
             sideOffset={4}
@@ -220,7 +221,7 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
           >
             <SelectScrollArea>{children}</SelectScrollArea>
           </SelectPrimitive.Content>
-        </Theme>
+        </PortalTheme>
       </SelectPrimitive.Portal>
     );
   },

package/src/components/sheet.tsx

@@ -38,7 +38,7 @@ import { Dialog as DialogPrimitive } from 'radix-ui';
 
 import { dialogContentPropDefs } from './dialog.props.js';
 import type { DialogContentOwnProps } from './dialog.props.js';
-import { Theme } from './theme.js';
+import { PortalTheme } from './_internal/portal-theme.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
@@ -147,7 +147,7 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>((allPro
   return (
     <DialogPrimitive.Portal container={container} forceMount={forceMount}>
       <SheetTitleCountContext.Provider value={titleCountRef}>
-        <Theme asChild>
+        <PortalTheme asChild>
           <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay kui-SheetOverlay">
             <DialogPrimitive.Content
               {...contentProps}
@@ -157,7 +157,7 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>((allPro
               aria-modal="true"
             />
           </DialogPrimitive.Overlay>
-        </Theme>
+        </PortalTheme>
       </SheetTitleCountContext.Provider>
     </DialogPrimitive.Portal>
   );

package/src/components/spinner.css

@@ -98,8 +98,23 @@
   }
 }
 
+/* A Spinner with children is one tree, loading or not. At rest it steps out of layout. */
+.kui-SpinnerHost:where(:not([data-loading])) {
+  display: contents;
+}
+
+.kui-SpinnerHost:where([data-loading]) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kui-SpinnerChildren {
+  display: contents;
+}
+
 /* 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

@@ -19,7 +19,8 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
     spinnerPropDefs
   );
 
-  if (!loading) return children;
+  // Without children a Spinner is only the wheel, shown while loading.
+  if (children === undefined && !loading) return null;
 
   // Decorative unless named: a named spinner is a status message, an unnamed one is hidden.
   const named =
@@ -50,22 +51,22 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
 
   if (children === undefined) return spinner;
 
+  // With children, one tree whether loading or not, so starting or stopping never remounts them
+  // (their state, focus and refs survive). At rest the host is `display: contents`; while loading
+  // it centres the wheel over the children, which keep their space but are hidden.
   return (
-    <Flex asChild position="relative" align="center" justify="center">
-      <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 className="kui-SpinnerHiddenChildren">
-          {children}
-        </span>
-
+    <span className="kui-SpinnerHost" data-loading={loading || undefined} aria-busy={loading || undefined}>
+      {/* `display: contents` removes the content from the accessibility tree in some browsers, so
+          while loading it is removed with `aria-hidden` too. */}
+      <span aria-hidden={loading || undefined} className={classNames('kui-SpinnerChildren', loading && 'kui-SpinnerHiddenChildren')}>
+        {children}
+      </span>
+      {loading ? (
         <Flex asChild align="center" justify="center" position="absolute" inset="0">
           <span>{spinner}</span>
         </Flex>
-      </span>
-    </Flex>
+      ) : null}
+    </span>
   );
 });
 Spinner.displayName = 'Spinner';

package/src/components/text-area.css

@@ -464,8 +464,13 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* With an error message, one box holds the field and the message below it. */
-.kui-TextAreaWrapper {
+/* With an error message, one box holds the field and the message below it. Without one the
+   wrapper steps out of layout, and the field is the box. */
+.kui-TextAreaWrapper:where(:not([data-message])) {
+  display: contents;
+}
+
+.kui-TextAreaWrapper:where([data-message]) {
   display: flex;
   flex-direction: column;
   min-width: 0;

package/src/components/text-area.tsx

@@ -81,16 +81,18 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, for
       />
     </div>
   );
-  if (!wrapped) return field;
-
-  // With a message, one wrapper holds the box and the message below it, so the parent still
-  // lays out a single box and the caller's className and style size the pair.
+  // The wrapper is always there, so a message coming or going never moves the field in the tree:
+  // moving it would remount the input, dropping focus, the caret and an uncontrolled value. With
+  // no message it is `display: contents` and the field is the box the parent lays out; with one
+  // it holds the field and the message below it, and the caller's className and style size the pair.
   return (
-    <div className={classNames('kui-TextAreaWrapper', ownClassName)} style={ownStyle}>
+    <div className={classNames('kui-TextAreaWrapper', wrapped && ownClassName)} style={wrapped ? ownStyle : undefined} data-message={wrapped || undefined}>
       {field}
-      <div id={errorId} className="kui-TextAreaErrorMessage" role="alert">
-        {textAreaProps.errorMessage}
-      </div>
+      {wrapped ? (
+        <div id={errorId} className="kui-TextAreaErrorMessage" role="alert">
+          {textAreaProps.errorMessage}
+        </div>
+      ) : null}
     </div>
   );
 });

package/src/components/text-field.css

@@ -645,8 +645,13 @@
 }
 
 /* Error message styling */
-/* With an error message, one box holds the field and the message below it. */
-.kui-TextFieldWrapper {
+/* With an error message, one box holds the field and the message below it. Without one the
+   wrapper steps out of layout, and the field is the box. */
+.kui-TextFieldWrapper:where(:not([data-message])) {
+  display: contents;
+}
+
+.kui-TextFieldWrapper:where([data-message]) {
   display: flex;
   flex-direction: column;
   min-width: 0;

package/src/components/text-field.tsx

@@ -120,16 +120,18 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
       <TextFieldContext.Provider value={contextValue}>{children}</TextFieldContext.Provider>
     </div>
   );
-  if (!wrapped) return field;
-
-  // With a message, one wrapper holds the field and the message below it, so the parent still
-  // lays out a single box and the caller's className and style size the pair.
+  // The wrapper is always there, so a message coming or going never moves the field in the tree:
+  // moving it would remount the input, dropping focus, the caret and an uncontrolled value. With
+  // no message it is `display: contents` and the field is the box the parent lays out; with one
+  // it holds the field and the message below it, and the caller's className and style size the pair.
   return (
-    <div className={classNames('kui-TextFieldWrapper', ownClassName)} style={ownStyle}>
+    <div className={classNames('kui-TextFieldWrapper', wrapped && ownClassName)} style={wrapped ? ownStyle : undefined} data-message={wrapped || undefined}>
       {field}
-      <div id={errorId} className="kui-TextFieldErrorMessage" role="alert">
-        {inputProps.errorMessage}
-      </div>
+      {wrapped ? (
+        <div id={errorId} className="kui-TextFieldErrorMessage" role="alert">
+          {inputProps.errorMessage}
+        </div>
+      ) : null}
     </div>
   );
 });

package/src/components/theme.tsx

@@ -6,7 +6,6 @@ import { Direction, Slot } from 'radix-ui';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
 import { ThemeSizeContext } from '../hooks/theme-size.js';
-import { PaneBandSizeContext } from './_internal/pane-band-context.js';
 import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
 import { themePropDefs } from './theme.props.js';
 
@@ -150,7 +149,6 @@ interface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {
 }
 const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {
   const context = React.useContext(ThemeContext);
-  const outerBand = React.useContext(PaneBandSizeContext);
   const {
     asChild,
     isRoot,
@@ -221,34 +219,30 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
         ],
       )}
     >
-      {/* A nested `Theme asChild` is the root of a portalled surface (Popover, Dialog, Sheet,
-          menus), which sits outside any Shell pane even though context flows into it. */}
-      <PaneBandSizeContext.Provider value={asChild && !isRoot ? null : outerBand}>
-        {/* Size travels on its own context as a bare string, so the components
-            that read it do not re-render when another theme value changes. */}
-        <ThemeSizeContext.Provider value={size}>
-          <Comp
-            data-is-root-theme={isRoot ? 'true' : 'false'}
-            data-accent-color={accentColor}
-            data-gray-color={resolvedGrayColor}
-            // for nested `Theme` background
-            data-has-background={hasBackground ? 'true' : 'false'}
-            data-radius={radius}
-            data-font-family={fontFamily}
-            data-heading-font-family={headingFontFamily}
-            ref={forwardedRef}
-            {...themeProps}
-            className={classNames(
-              'kui-theme',
-              {
-                light: appearance === 'light',
-                dark: appearance === 'dark',
-              },
-              themeProps.className,
-            )}
-          />
-        </ThemeSizeContext.Provider>
-      </PaneBandSizeContext.Provider>
+      {/* Size travels on its own context as a bare string, so the components
+          that read it do not re-render when another theme value changes. */}
+      <ThemeSizeContext.Provider value={size}>
+        <Comp
+          data-is-root-theme={isRoot ? 'true' : 'false'}
+          data-accent-color={accentColor}
+          data-gray-color={resolvedGrayColor}
+          // for nested `Theme` background
+          data-has-background={hasBackground ? 'true' : 'false'}
+          data-radius={radius}
+          data-font-family={fontFamily}
+          data-heading-font-family={headingFontFamily}
+          ref={forwardedRef}
+          {...themeProps}
+          className={classNames(
+            'kui-theme',
+            {
+              light: appearance === 'light',
+              dark: appearance === 'dark',
+            },
+            themeProps.className,
+          )}
+        />
+      </ThemeSizeContext.Provider>
     </ThemeContext.Provider>
   );
 });

package/src/components/tooltip.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
 
 import { Text } from './text.js';
-import { Theme } from './theme.js';
+import { PortalTheme } from './_internal/portal-theme.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { tooltipPropDefs } from './tooltip.props.js';
 
@@ -63,7 +63,7 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
     <TooltipPrimitive.Root {...rootProps}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
+        <PortalTheme asChild>
           <TooltipPrimitive.Content
             sideOffset={4}
             collisionPadding={10}
@@ -77,7 +77,7 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
             </Text>
             <TooltipPrimitive.Arrow className="kui-TooltipArrow" />
           </TooltipPrimitive.Content>
-        </Theme>
+        </PortalTheme>
       </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>
   );