themelia-ui 3.0.0 → 3.2.0

package/docs/generated/components/base--label.md

@@ -15,7 +15,6 @@ Naming a form control so the label and control are associated.
 
 ```tsx fragment — import-only example
 import { Label } from "themelia-ui/base/label"
-import "themelia-ui/base/label.css"
 ```
 
 ## Composition
@@ -53,8 +52,8 @@ import { Input } from "themelia-ui/base/text-inputs"
 
 export default function LabelExample() {
 	return (
-		<Stack gap="lg" style={{ maxWidth: "26rem", width: "100%" }}>
-			<Stack gap="xs">
+		<Stack style={{ maxWidth: "26rem", width: "100%" }}>
+			<Stack gap="sm">
 				<Label htmlFor="demo-email">Email</Label>
 				<Input id="demo-email" placeholder="name@example.com" />
 			</Stack>

package/docs/generated/components/base--menubar.md

@@ -15,16 +15,14 @@ An application-style menu bar sits persistently across the top of a workspace.
 
 ```tsx fragment — import-only example
 import { Menubar } from "themelia-ui/base/menubar"
-import "themelia-ui/base/menubar.css"
 import { DropdownMenu } from "themelia-ui/base/dropdown-menu"
-import "themelia-ui/base/dropdown-menu.css"
 ```
 
 ## Composition
 
-This module depends on no other module.
+This module composes `base/typography`.
 
-It is used together with `base/dropdown-menu`: import that module and its stylesheet too.
+It is used together with `base/dropdown-menu`: import that module too.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.

package/docs/generated/components/base--navigation-menu.md

@@ -15,12 +15,11 @@ Site navigation needs grouped panels of links under top-level triggers.
 
 ```tsx fragment — import-only example
 import { NavigationMenu } from "themelia-ui/base/navigation-menu"
-import "themelia-ui/base/navigation-menu.css"
 ```
 
 ## Composition
 
-This module depends on no other module.
+This module composes `base/typography`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -141,7 +140,7 @@ import { Stack } from "themelia-ui/base/structure"
 
 export default function NavigationMenuExample() {
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<NavigationMenu aria-label="Documentation">
 				<NavigationMenuList>
 					<NavigationMenuItem>

package/docs/generated/components/base--navigation.md

@@ -15,7 +15,6 @@ Moving between sibling views or pages — tabs, breadcrumbs, pagination, page he
 
 ```tsx fragment — import-only example
 import { Breadcrumbs } from "themelia-ui/base/navigation"
-import "themelia-ui/base/navigation.css"
 ```
 
 ## Composition
@@ -521,7 +520,7 @@ export default function PageHeadingExample() {
 				description="Everything issued in this workspace, newest first."
 				actions={
 					<>
-						<Button tone="neutral" buttonStyle="outline">Export</Button>
+						<Button tone="neutral" appearance="outline">Export</Button>
 						<Button>New invoice</Button>
 					</>
 				}
@@ -733,7 +732,7 @@ export default function TabsScroll() {
 	return (
 		<>
 			<Switch checked={edgeFade} onChange={event => setEdgeFade(event.target.checked)} label="Fade overflowing edges" />
-			<Stack maxWidth="22rem">
+			<Stack gap="sm" maxWidth="22rem">
 				<Tabs defaultValue="overview">
 					<TabList label="Scrollable sections" variant="enclosed" edgeFade={edgeFade}>
 						{["Overview", "Activity", "Settings", "Billing", "Members", "Integrations", "Audit log"].map(label => <Tab key={label} value={label.toLowerCase()}>{label}</Tab>)}

package/docs/generated/components/base--otp-input.md

@@ -15,12 +15,11 @@ A one-time code is entered as separate character cells.
 
 ```tsx fragment — import-only example
 import { OtpInput } from "themelia-ui/base/otp-input"
-import "themelia-ui/base/otp-input.css"
 ```
 
 ## Composition
 
-This module composes `base/display`.
+This module composes `base/display`, `base/typography`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -85,9 +84,9 @@ export default function OtpInputExample() {
 	const [code, setCode] = useState("")
 
 	return (
-		<Stack gap="lg" align="start">
+		<Stack align="start">
 			<OtpInput length={6} value={code} onValueChange={setCode} />
-			<Stack gap="xs" align="start">
+			<Stack gap="sm" align="start">
 				<Text size="xs" type="secondary">groupSize={"{3}"} — written as "123 456"</Text>
 				<OtpInput length={6} groupSize={3} />
 			</Stack>

package/docs/generated/components/base--overlay.md

@@ -15,7 +15,6 @@ Building a new modal surface inside the kit that must share the dialog/sheet ana
 
 ```tsx fragment — import-only example
 import { Overlay } from "themelia-ui/base/overlay"
-import "themelia-ui/base/overlay.css"
 ```
 
 ## Composition
@@ -27,6 +26,16 @@ outside the package and arrives through the public props, callbacks, slots, or a
 
 ## Public declarations
 
+### `CssLength`
+
+Kind: type.
+
+A CSS length: a number with a unit or a percentage, or a math or `var()` expression.
+
+```text
+`${number}${"px" | "rem" | "em" | "ch" | "%" | "vw" | "vh" | "dvw" | "dvh" | "svw" | "svh" | "lvw" | "lvh"}` | `${"calc" | "min" | "max" | "clamp" | "var"}(${string})`
+```
+
 ### `defaultOverlayStrings`
 
 Kind: const.
@@ -94,7 +103,7 @@ Kind: interface.
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
 | `placement` | no | `OverlayPlacement` | Where the surface sits. Centre reads as a dialog, an edge as a sheet. DialogContent and<br>AlertDialogContent fix it to centre; SheetContent exposes it as `side`. |
-| `size` | no | `OverlaySize` | Cross-axis extent for an edge placement — the width of a side panel; a top or bottom<br>one sizes to its content and takes this as the ceiling. Named steps resolve to tokens;<br>any other CSS length is used as given. Ignored when centred. @default "md" |
+| `size` | no | `OverlaySize` | Cross-axis extent for an edge placement — the width of a side panel; a top or bottom<br>one sizes to its content and takes this as the ceiling. Named steps resolve to tokens;<br>any other CSS length is used as given. Ignored when centred. @default "default" |
 | `length` | no | `OverlayLength` | Along-axis extent, for an edge placement. Less than full detaches the panel and centres<br>it on that axis. It is measured against the space the inset leaves rather than the<br>viewport: 70% of an inset panel is 70% of what is between the offsets, and the rest is<br>split between the two ends. Full needs no inset to look right, which is why a<br>corner-anchored sheet sets only `inset`. @default "full" |
 | `inset` | no | `OverlayInset` | The gap to the viewport edges. `false` is flush — a sheet welded to the side; `true`<br>uses the kit's gap; any CSS length sets your own. One offset, spent on every side the<br>panel does not run to, so an inset side panel sits the same distance from the top, the<br>side and the bottom. Any gap detaches it, rounds all four corners and gives it a full<br>border. @default false |
 | `modality` | no | `OverlayModality` | How much of the page the surface takes hostage: scrim, inert background and scroll<br>lock (`modal`), focus alone (`trap-focus`), or neither (`non-modal`). @default "modal" |
@@ -162,7 +171,7 @@ The gap to the viewport edges: `false` is flush, `true` the kit's gap, or any CS
 An inset panel rounds all four corners.
 
 ```text
-boolean | (string & {})
+boolean | CssLength
 ```
 
 ### `OverlayLength`
@@ -172,7 +181,7 @@ Kind: type.
 Along-axis extent (a side panel's height). `full` welds it to both ends; less centres it.
 
 ```text
-"full" | (string & {})
+"full" | CssLength
 ```
 
 ### `OverlayModality`
@@ -215,7 +224,7 @@ Kind: type.
 Cross-axis extent of an edge-placed surface (a side panel's width): a step or any CSS length.
 
 ```text
-"sm" | "md" | "lg" | "full" | (string & {})
+"default" | "sm" | "full" | CssLength
 ```
 
 ### `OverlayStrings`
@@ -277,8 +286,8 @@ export default function Modality() {
 	const [nonModal, setNonModal] = useState(false)
 
 	return (
-		<Stack direction="horizontal" gap="lg" wrap align="center">
-			<Button tone="neutral" buttonStyle="outline" onClick={() => setNonModal(true)}>
+		<Stack direction="horizontal" wrap align="center">
+			<Button tone="neutral" appearance="outline" onClick={() => setNonModal(true)}>
 				Open non-modal
 			</Button>
 			<Text type="secondary" size="sm">
@@ -294,7 +303,7 @@ export default function Modality() {
 						<Text type="secondary">Scroll the page behind; this stays where it is.</Text>
 					</OverlayBody>
 					<OverlayFooter>
-						<OverlayClose render={<Button tone="neutral" buttonStyle="outline" />}>
+						<OverlayClose render={<Button tone="neutral" appearance="outline" />}>
 							Close
 						</OverlayClose>
 					</OverlayFooter>
@@ -322,8 +331,8 @@ export default function OverlayControlled() {
 	const [open, setOpen] = useState(false)
 
 	return (
-		<Stack direction="horizontal" gap="md" align="center">
-			<Button tone="neutral" buttonStyle="outline" onClick={() => setOpen(true)}>
+		<Stack direction="horizontal" gap="sm" align="center">
+			<Button tone="neutral" appearance="outline" onClick={() => setOpen(true)}>
 				Open from outside
 			</Button>
 			<Text size="xs" type="secondary">
@@ -336,7 +345,7 @@ export default function OverlayControlled() {
 						<OverlayDescription>The caller owns the open state.</OverlayDescription>
 					</OverlayHeader>
 					<OverlayFooter>
-						<OverlayClose render={<Button tone="neutral" buttonStyle="outline" />}>
+						<OverlayClose render={<Button tone="neutral" appearance="outline" />}>
 							Close
 						</OverlayClose>
 					</OverlayFooter>
@@ -360,9 +369,9 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function OverlayStructure() {
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Open a long surface
 				</OverlayTrigger>
 				<OverlayContent>
@@ -377,7 +386,7 @@ export default function OverlayStructure() {
 					</OverlayBody>
 					<OverlayFooter>
 						<OverlayDismissArea>
-							<Button tone="neutral" buttonStyle="outline">Cancel</Button>
+							<Button tone="neutral" appearance="outline">Cancel</Button>
 							<Button>Save</Button>
 						</OverlayDismissArea>
 					</OverlayFooter>
@@ -400,9 +409,9 @@ import { Stack } from "themelia-ui/base/structure"
 
 export default function DialogSurface() {
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Confirm
 				</OverlayTrigger>
 				<OverlayContent surface="bare" showCloseButton={false}>
@@ -412,7 +421,7 @@ export default function DialogSurface() {
 					</OverlayHeader>
 					<OverlayFooter>
 						<OverlayDismissArea>
-							<Button tone="neutral" buttonStyle="outline">Cancel</Button>
+							<Button tone="neutral" appearance="outline">Cancel</Button>
 							<Button>Publish</Button>
 						</OverlayDismissArea>
 					</OverlayFooter>
@@ -441,9 +450,9 @@ export default function DialogFocus() {
 	const nameRef = useRef<HTMLInputElement>(null)
 
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					New workspace
 				</OverlayTrigger>
 				<OverlayContent initialFocusRef={nameRef}>
@@ -451,7 +460,7 @@ export default function DialogFocus() {
 						<OverlayTitle>New workspace</OverlayTitle>
 					</OverlayHeader>
 					<OverlayBody>
-						<Stack gap="md">
+						<Stack gap="sm">
 							<FormField label="Name">
 								<Input ref={nameRef} placeholder="Acme design" />
 							</FormField>
@@ -462,7 +471,7 @@ export default function DialogFocus() {
 					</OverlayBody>
 					<OverlayFooter>
 						<OverlayDismissArea>
-							<Button tone="neutral" buttonStyle="outline">Cancel</Button>
+							<Button tone="neutral" appearance="outline">Cancel</Button>
 							<Button>Create</Button>
 						</OverlayDismissArea>
 					</OverlayFooter>
@@ -502,9 +511,9 @@ const INVITE_ACTIONS: ActionDefinition[] = [
 
 export default function DialogPopups() {
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Invite member
 				</OverlayTrigger>
 				<OverlayContent>
@@ -513,7 +522,7 @@ export default function DialogPopups() {
 						<OverlayDescription>They receive an email with a link to join.</OverlayDescription>
 					</OverlayHeader>
 					<OverlayBody>
-						<Stack gap="md">
+						<Stack gap="sm">
 							<FormField label="Email">
 								<Input placeholder="name@example.com" />
 							</FormField>
@@ -523,13 +532,13 @@ export default function DialogPopups() {
 						</Stack>
 					</OverlayBody>
 					<OverlayFooter>
-						<Stack direction="horizontal" gap="md" align="center" wrap>
+						<Stack direction="horizontal" gap="sm" align="center" wrap>
 							<ActionMenu actions={INVITE_ACTIONS} label="More" />
-							<TooltipButton tooltip="Copy an invite link instead" tone="neutral" buttonStyle="ghost">
+							<TooltipButton tooltip="Copy an invite link instead" tone="neutral" appearance="ghost">
 								Copy link
 							</TooltipButton>
 							<OverlayDismissArea>
-								<Button tone="neutral" buttonStyle="outline">Cancel</Button>
+								<Button tone="neutral" appearance="outline">Cancel</Button>
 								<Button>Send invite</Button>
 							</OverlayDismissArea>
 						</Stack>
@@ -556,9 +565,9 @@ import { Input } from "themelia-ui/base/text-inputs"
 
 export default function Dialog() {
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Open dialog
 				</OverlayTrigger>
 				<DialogContent>
@@ -572,7 +581,7 @@ export default function Dialog() {
 						</FormField>
 					</OverlayBody>
 					<OverlayFooter>
-						<OverlayClose render={<Button tone="neutral" buttonStyle="outline" />}>
+						<OverlayClose render={<Button tone="neutral" appearance="outline" />}>
 							Cancel
 						</OverlayClose>
 						<OverlayClose render={<Button />}>
@@ -602,9 +611,9 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function AlertDialog() {
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="destructive" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="destructive" appearance="outline" />}>
 					Delete account
 				</OverlayTrigger>
 				<AlertDialogContent>
@@ -616,7 +625,7 @@ export default function AlertDialog() {
 						<Text type="secondary">Every project and invoice is removed permanently.</Text>
 					</OverlayBody>
 					<OverlayFooter>
-						<AlertDialogCancel render={<Button tone="neutral" buttonStyle="outline" />}>
+						<AlertDialogCancel render={<Button tone="neutral" appearance="outline" />}>
 							Cancel
 						</AlertDialogCancel>
 						{/* The answer is an Action, not a second Cancel: they read the same only until a caller hooks the one that commits. */}
@@ -646,9 +655,9 @@ import { Input } from "themelia-ui/base/text-inputs"
 
 export default function Sheet() {
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Open sheet
 				</OverlayTrigger>
 				<SheetContent side="inline-end">
@@ -657,7 +666,7 @@ export default function Sheet() {
 						<OverlayDescription>Native top layer — the list behind stays in view and cannot clip it.</OverlayDescription>
 					</OverlayHeader>
 					<OverlayBody>
-						<Stack gap="md">
+						<Stack gap="sm">
 							<FormField label="Venue">
 								<Input defaultValue="Marlow Hall" />
 							</FormField>
@@ -667,7 +676,7 @@ export default function Sheet() {
 						</Stack>
 					</OverlayBody>
 					<OverlayFooter>
-						<OverlayClose render={<Button tone="neutral" buttonStyle="outline" />}>
+						<OverlayClose render={<Button tone="neutral" appearance="outline" />}>
 							Cancel
 						</OverlayClose>
 						<OverlayClose render={<Button />}>
@@ -694,9 +703,9 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function SheetShape() {
 	return (
-		<Stack direction="horizontal" gap="lg" wrap align="center">
+		<Stack direction="horizontal" wrap align="center">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Flush, size=&quot;sm&quot;
 				</OverlayTrigger>
 				<SheetContent side="inline-end" size="sm">
@@ -711,7 +720,7 @@ export default function SheetShape() {
 			</Overlay>
 
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Inset
 				</OverlayTrigger>
 				<SheetContent side="inline-end" size="28rem" inset>
@@ -730,7 +739,7 @@ export default function SheetShape() {
 			</Overlay>
 
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Inset from block-end
 				</OverlayTrigger>
 				<SheetContent side="block-end" size="60%" length="70%" inset="1.5rem">
@@ -768,9 +777,9 @@ import { UIProvider } from "themelia-ui/ui-provider"
 
 export default function SheetProvider() {
 	return (
-		<Stack direction="horizontal" gap="lg" wrap align="center">
+		<Stack direction="horizontal" wrap align="center">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Kit default
 				</OverlayTrigger>
 				<SheetContent>
@@ -786,7 +795,7 @@ export default function SheetProvider() {
 
 			<UIProvider config={{ defaults: { sheet: { size: "26rem", inset: true } } }}>
 				<Overlay>
-					<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+					<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 						Under a provider
 					</OverlayTrigger>
 					<SheetContent>
@@ -818,9 +827,9 @@ import { UIProvider } from "themelia-ui/ui-provider"
 
 export default function OverlayBackdrop() {
 	return (
-		<Stack direction="horizontal" gap="lg" wrap align="center">
+		<Stack direction="horizontal" wrap align="center">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Default scrim
 				</OverlayTrigger>
 				<DialogContent>
@@ -833,7 +842,7 @@ export default function OverlayBackdrop() {
 
 			<UIProvider config={{ overlay: { backdropBlur: 4 } }}>
 				<Overlay>
-					<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+					<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>
 						Blurred scrim
 					</OverlayTrigger>
 					<DialogContent>

package/docs/generated/components/base--popover-menu.md

@@ -15,7 +15,6 @@ A popover's content is a simple list of actions and does not need the full menu
 
 ```tsx fragment — import-only example
 import { PopoverMenu } from "themelia-ui/base/popover-menu"
-import "themelia-ui/base/popover-menu.css"
 ```
 
 ## Composition
@@ -174,10 +173,10 @@ export default function PopoverMenuExample() {
 	const [owner, setOwner] = useState("jane")
 
 	return (
-		<Stack direction="horizontal" gap="xl" align="center">
+		<Stack direction="horizontal" align="center">
 			<PopoverMenu
 				trigger={
-					<Button buttonStyle="outline" tone="neutral">
+					<Button appearance="outline" tone="neutral">
 						Owner
 						<ChevronDownIcon />
 					</Button>
@@ -192,7 +191,7 @@ export default function PopoverMenuExample() {
 			/>
 			<PopoverMenu
 				trigger={
-					<Button buttonStyle="outline" tone="neutral">
+					<Button appearance="outline" tone="neutral">
 						No search
 						<ChevronDownIcon />
 					</Button>
@@ -203,7 +202,7 @@ export default function PopoverMenuExample() {
 			/>
 			<PopoverMenu
 				trigger={
-					<Button buttonStyle="outline" tone="neutral">
+					<Button appearance="outline" tone="neutral">
 						Loading
 						<ChevronDownIcon />
 					</Button>
@@ -233,10 +232,10 @@ export default function PopoverMenuStates() {
 	const [failed, setFailed] = useState(true)
 
 	return (
-		<Stack direction="horizontal" gap="xl" align="center">
+		<Stack direction="horizontal" align="center">
 			<PopoverMenu
 				trigger={
-					<Button buttonStyle="outline" tone="neutral">
+					<Button appearance="outline" tone="neutral">
 						Failed load
 						<ChevronDownIcon />
 					</Button>
@@ -248,7 +247,7 @@ export default function PopoverMenuStates() {
 			/>
 			<PopoverMenu
 				trigger={
-					<Button buttonStyle="outline" tone="neutral">
+					<Button appearance="outline" tone="neutral">
 						Two characters
 						<ChevronDownIcon />
 					</Button>

package/docs/generated/components/base--popover.md

@@ -15,7 +15,6 @@ A non-modal panel is anchored to a trigger and may hold interactive content.
 
 ```tsx fragment — import-only example
 import { Popover } from "themelia-ui/base/popover"
-import "themelia-ui/base/popover.css"
 ```
 
 ## Composition
@@ -145,9 +144,9 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function PopoverExample() {
 	return (
-		<Stack direction="horizontal" gap="lg" wrap>
+		<Stack direction="horizontal" wrap>
 			<Popover>
-				<PopoverTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<PopoverTrigger render={<Button tone="neutral" appearance="outline" />}>
 					<SlidersHorizontalIcon aria-hidden="true" />
 					Filters
 				</PopoverTrigger>
@@ -162,7 +161,7 @@ export default function PopoverExample() {
 						<Checkbox label="On hold" />
 					</Stack>
 					<PopoverFooter>
-						<Button tone="neutral" buttonStyle="ghost">
+						<Button tone="neutral" appearance="ghost">
 							Reset
 						</Button>
 						<Button>Apply</Button>
@@ -171,7 +170,7 @@ export default function PopoverExample() {
 			</Popover>
 
 			<Popover>
-				<PopoverTrigger render={<Button tone="neutral" buttonStyle="ghost" iconOnly aria-label="About this figure" />}>
+				<PopoverTrigger render={<Button tone="neutral" appearance="ghost" iconOnly aria-label="About this figure" />}>
 					<InfoIcon aria-hidden="true" />
 				</PopoverTrigger>
 				<PopoverContent width="18rem">
@@ -197,10 +196,10 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function PopoverPlacement() {
 	return (
-		<Stack direction="horizontal" gap="lg" wrap>
+		<Stack direction="horizontal" wrap>
 			{(["top", "right", "bottom", "left"] as const).map((side) => (
 				<Popover key={side}>
-					<PopoverTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+					<PopoverTrigger render={<Button tone="neutral" appearance="outline" />}>
 						{side}
 					</PopoverTrigger>
 					<PopoverContent side={side}>
@@ -209,7 +208,7 @@ export default function PopoverPlacement() {
 				</Popover>
 			))}
 			<Popover>
-				<PopoverTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<PopoverTrigger render={<Button tone="neutral" appearance="outline" />}>
 					width=&quot;trigger&quot;
 				</PopoverTrigger>
 				<PopoverContent width="trigger">
@@ -234,13 +233,13 @@ import { Text } from "themelia-ui/base/typography"
 export default function PopoverAnchorExample() {
 	return (
 		<Popover>
-			<Stack direction="horizontal" gap="2xl" align="center">
+			<Stack direction="horizontal" align="center">
 				<PopoverAnchor>
 					<Text size="xs" type="secondary">
 						<CalendarIcon aria-hidden="true" /> 14–28 August
 					</Text>
 				</PopoverAnchor>
-				<PopoverTrigger render={<Button tone="neutral" buttonStyle="outline" />}>
+				<PopoverTrigger render={<Button tone="neutral" appearance="outline" />}>
 					Change the range
 				</PopoverTrigger>
 			</Stack>

package/docs/generated/components/base--qr-code.md

@@ -15,12 +15,11 @@ A value must be scannable on screen or in print.
 
 ```tsx fragment — import-only example
 import { QRCode } from "themelia-ui/base/qr-code"
-import "themelia-ui/base/qr-code.css"
 ```
 
 ## Composition
 
-This module depends on no other module.
+This module composes `base/typography`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -52,8 +51,8 @@ Extends: `Omit<ComponentProps<"div">, "children">`.
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
 | `value` | yes | `string` | What the code encodes — a URL, a payment string, a token. An empty value renders<br>`emptyState`, or nothing at all when there is none. |
-| `foreground` | no | `string` | Overrides the dark modules. Defaults to the inverse background, dark in both themes.<br>Any CSS colour; it is converted to hex for the encoder. |
-| `background` | no | `string` | Overrides the light modules. Defaults to the inverse foreground, light in both themes.<br>Any CSS colour; it is converted to hex for the encoder. |
+| `foreground` | no | `string` | Overrides the dark modules. Defaults to the theme's foreground as the light theme draws<br>it, dark in both themes. Any CSS colour; it is converted to hex for the encoder. |
+| `background` | no | `string` | Overrides the light modules. Defaults to the theme's background as the light theme draws<br>it, light in both themes. Any CSS colour; it is converted to hex for the encoder. |
 | `robustness` | no | `QRRobustness` | Error correction: how much of the symbol can be obscured and still decode — L ≈ 7%,<br>M ≈ 15%, Q ≈ 25%, H ≈ 30%. Higher needs a denser grid. |
 | `placeholder` | no | `string` | Shown while encoding. Defaults to this component's own `generating` string; a value<br>that cannot be encoded shows `strings.failed` instead. |
 | `strings` | no | `Partial<QRCodeStrings>` | Overrides this code's own copy — the two placeholder states and its name. |
@@ -103,8 +102,8 @@ export default function QrCode() {
 	const [qrValue, setQrValue] = useState("https://example.com/invoice/4417")
 
 	return (
-		<Stack direction="horizontal" gap="xl" align="start" wrap>
-			<Stack gap="lg" style={{ maxWidth: "26rem", width: "100%" }}>
+		<Stack direction="horizontal" align="start" wrap>
+			<Stack style={{ maxWidth: "26rem", width: "100%" }}>
 				<FormField label="Encoded value">
 					<Input value={qrValue} onChange={(event) => setQrValue(event.target.value)} />
 				</FormField>
@@ -113,13 +112,13 @@ export default function QrCode() {
 				</FormField>
 			</Stack>
 			{/* Captioned, so each grid is attributable to its setting. */}
-			<Stack direction="horizontal" gap="lg" wrap align="start">
+			<Stack direction="horizontal" wrap align="start">
 				{[
 					{ node: <QRCode value={qrValue} label="Invoice link" />, caption: 'robustness="M" — default' },
 					{ node: <QRCode value={qrValue} robustness="H" label="Invoice link, high correction" />, caption: 'robustness="H" — denser grid' },
 					{ node: <QRCode value="" emptyState="No link yet" />, caption: "empty, with an emptyState" },
 				].map((item) => (
-					<Stack key={item.caption} gap="2xs" align="start">
+					<Stack key={item.caption} gap="sm" align="start">
 						{item.node}
 						<Text size="xs" type="secondary">{item.caption}</Text>
 					</Stack>