themelia-ui 3.0.0 → 3.2.0

package/docs/generated/components/layout--app-shell.md

@@ -15,7 +15,6 @@ The application needs its outermost frame — a sidebar with an inset, a stacked
 
 ```tsx fragment — import-only example
 import { SidebarInsetLayout } from "themelia-ui/layout/app-shell"
-import "themelia-ui/layout/app-shell.css"
 ```
 
 ## Composition
@@ -106,7 +105,7 @@ Extends: `Omit<ComponentProps<"div">, "children" | "title">`.
 | `children` | no | `ReactNode` |  |
 | `sidebarSide` | no | `TopbarSidebarSide` | Which side the rail sits on. Match the Sidebar's own `side` to it. |
 | `mobileSidebarMode` | no | `TopbarSidebarMobileMode` | `drawer` hides the sidebar column below md and uses the Sidebar's mobile sheet, which<br>the trigger opens. `inline` stacks static navigation above the content; pair it with<br>`collapsible="none"` and `sidebarTrigger={false}`. |
-| `headerHeight` | no | `string` | Any CSS length. Falls back to the shell's own token. |
+| `headerHeight` | no | `string` | Any CSS length. Falls back to the theme's `--header-height`. |
 | `sidebarWidth` | no | `string` |  |
 | `sidebarTrigger` | no | `ReactNode` | Shorthands for the matching `slots` entry, for a shell with only a few regions. |
 | `logo` | no | `ReactNode` |  |
@@ -160,6 +159,37 @@ Kind: type.
 
 Preview route: App shell — `/app-shell`
 
+### Workspace navigation reference
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useState } from "react"
+import { Text } from "themelia-ui/base/typography"
+import { TopbarSidebarLayout } from "themelia-ui/layout/app-shell"
+import { AppSidebar, type LinkRenderer } from "themelia-ui/layout/sidebar"
+
+export default function WorkspaceNavigationReference() {
+	const [route, setRoute] = useState("/a/overview")
+	const [navigations, setNavigations] = useState(0)
+	const workspace = route.startsWith("/b/") ? "B" : "A"
+	const renderLink: LinkRenderer = ({ href, children, external, active, disabled, onClick, ...props }) => {
+		void active
+		if (disabled || !href) return <span {...props}>{children}</span>
+		return <a {...props} href={href} target={props.target ?? (external ? "_blank" : undefined)} rel={props.rel ?? (external ? "noopener noreferrer" : undefined)} onClick={event => {
+			onClick?.(event)
+			if (event.defaultPrevented || external || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+			event.preventDefault(); setRoute(href); setNavigations(count => count + 1)
+		}}>{children}</a>
+	}
+	return <div style={{ width: "100%", height: "28rem", minWidth: 0 }}>
+		<TopbarSidebarLayout contained contentRender={<div />} logo="Reference workspace" sidebarProviderProps={{ persist: false, keyboardShortcut: false }} sidebar={<AppSidebar logo={`Workspace ${workspace}`} renderLink={renderLink} currentUrl={route}
+			workspaceLinks={[{ label: "Workspace A home", url: "/a/overview", external: false }, { label: "Workspace B home", url: "/b/overview", external: false }, { label: "External workspace", url: "https://example.com" }]}
+			navigationGroups={{ "": [{ label: `${workspace} overview`, href: `/${workspace.toLowerCase()}/overview` }, { label: `${workspace} settings`, href: `/${workspace.toLowerCase()}/settings` }] }} />}>
+			<Text role="status">Workspace {workspace}; route {route}; navigations {navigations}</Text>
+		</TopbarSidebarLayout>
+	</div>
+}
+```
+
 ### The shell
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
@@ -194,9 +224,9 @@ export default function SidebarShell() {
 	const [collapsible, setCollapsible] = useState<string | null>("icon")
 
 	return (
-		<Stack gap="lg" style={{ width: "100%" }}>
-			<Stack direction="horizontal" gap="xl" wrap>
-				<Stack gap="2xs">
+		<Stack style={{ width: "100%" }}>
+			<Stack direction="horizontal" wrap>
+				<Stack gap="sm">
 					<Text size="xs" type="secondary">
 						variant
 					</Text>
@@ -212,7 +242,7 @@ export default function SidebarShell() {
 						]}
 					/>
 				</Stack>
-				<Stack gap="2xs">
+				<Stack gap="sm">
 					<Text size="xs" type="secondary">
 						collapsible
 					</Text>
@@ -262,7 +292,7 @@ function TopbarDemo() {
 	const sidebarSide = side === "right" ? "right" : "left"
 
 	return (
-		<Stack gap="lg" style={{ width: "100%", minWidth: 0 }}>
+		<Stack style={{ width: "100%", minWidth: 0 }}>
 			<PillRadioGroup
 				aria-label="Navigation side"
 				name="topbar-sidebar-side"
@@ -288,7 +318,7 @@ function TopbarDemo() {
 						/>
 					}
 				>
-					<Stack gap="lg">
+					<Stack>
 						{currentUrl === "/app/invoices" && (
 							<Input type="search" aria-label="Search invoices" placeholder="Search invoices…" value={query} onChange={event => setQuery(event.target.value)} />
 						)}
@@ -330,15 +360,15 @@ function StackedDemo() {
 				boundContent={false}
 				contentRender={<div />}
 				header={
-					<Stack direction="horizontal" gap="md" align="center" wrap>
+					<Stack direction="horizontal" gap="sm" align="center" wrap>
 						<Brand />
 						<nav aria-label="Primary navigation (stacked example)">
-							<Stack direction="horizontal" gap="xs" wrap>
+							<Stack direction="horizontal" gap="sm" wrap>
 								{destinations.map(([path, label]) => (
 									<Button
 										key={path}
 										tone="neutral"
-										buttonStyle={currentUrl === path ? "solid" : "ghost"}
+										appearance={currentUrl === path ? "solid" : "ghost"}
 										aria-current={currentUrl === path ? "page" : undefined}
 										onClick={() => setCurrentUrl(path)}
 									>{label}</Button>

package/docs/generated/components/layout--auth.md

@@ -15,7 +15,6 @@ Sign-in, registration and recovery pages share a centred card and optional split
 
 ```tsx fragment — import-only example
 import { AuthCard } from "themelia-ui/layout/auth"
-import "themelia-ui/layout/auth.css"
 ```
 
 ## Composition
@@ -144,7 +143,7 @@ Extends: `LayoutNavigationAdapter`, `Omit<ComponentProps<"div">, "title">`.
 | `policyLinks` | no | `AuthLink[]` | Terms, privacy, cookies: a named row of links that wraps with the available width,<br>rendered as its own row so screen readers can skip it. |
 | `languageLinks` | no | `AuthLink[]` | The languages, as a named row of links that wraps with the available width. |
 | `languageSwitcher` | no | `ReactNode` | A rendered control, when a link row is not the right shape for it. |
-| `size` | no | `AuthShellSize` | The surface width. |
+| `size` | no | `AuthShellSize` | The surface width: `default`, or `sm` for a single short form such as a code entry. |
 | `variant` | no | `AuthShellVariant` | `card` (default) puts the content on a raised surface; `bare` does not; `split` puts<br>a panel beside it. |
 | `align` | no | `"center" \| "start"` | `center` uses spare height and lets tall content grow; `start` keeps the form at the top. |
 | `splitPanel` | no | `ReactNode` | The panel, for `variant="split"`. |
@@ -158,7 +157,7 @@ Extends: `LayoutNavigationAdapter`, `Omit<ComponentProps<"div">, "title">`.
 Kind: type.
 
 ```text
-"sm" | "md" | "lg"
+"default" | "sm"
 ```
 
 ### `AuthShellStrings`
@@ -361,12 +360,12 @@ import { SignInDemo } from "./_shared"
 function WorkspacePanel() {
 	return (
 		<>
-			<Stack gap="xl">
+			<Stack>
 				<DisplayLabel>Built for your team</DisplayLabel>
 				<Heading level={3} size="2xl">A clearer start to your working day.</Heading>
 				<Text type="secondary" lineHeight="relaxed">Bring your people, projects, and decisions into one shared workspace.</Text>
 			</Stack>
-			<Stack gap="lg">
+			<Stack>
 				<Text type="inherit" size="lg" lineHeight="relaxed">“Everything we need is ready when we sign in. We spend more time doing the work together.”</Text>
 				<Text type="secondary" size="sm">Jordan Lee · Operations at Northwind</Text>
 			</Stack>
@@ -403,10 +402,10 @@ export default function AuthSplit() {
 
 	return (
 		<>
-			<Stack direction="horizontal" align="center" justify="between" gap="lg" wrap>
+			<Stack direction="horizontal" align="center" justify="between" wrap>
 				<Checkbox label="Show the panel on small screens" checked={stackedPanel} onChange={(event) => setStackedPanel(event.target.checked)} />
 				<Overlay>
-					<OverlayTrigger render={<Button tone="neutral" buttonStyle="outline" />}>Expand split preview</OverlayTrigger>
+					<OverlayTrigger render={<Button tone="neutral" appearance="outline" />}>Expand split preview</OverlayTrigger>
 					<DialogContent className={styles.expandedDialog} aria-labelledby={expandedTitleId} aria-describedby={expandedDescriptionId}>
 						<OverlayHeader>
 							<OverlayTitle id={expandedTitleId}>Split auth preview</OverlayTitle>
@@ -449,7 +448,7 @@ export default function AuthComposed() {
 				className={styles.composed}
 				panelMobile="stacked"
 				form={
-					<Stack gap="xl" className={styles.formColumn}>
+					<Stack className={styles.formColumn}>
 						<AuthCard
 							level={3}
 							title="Join your team"
@@ -463,7 +462,7 @@ export default function AuthComposed() {
 					</Stack>
 				}
 				panel={
-					<Stack gap="xl">
+					<Stack>
 						<DisplayLabel>Northwind workspace</DisplayLabel>
 						<Heading level={3} size="xl">Your next chapter starts together.</Heading>
 						<Text type="secondary" lineHeight="relaxed">You have been invited to collaborate with the operations team. Your projects and conversations will be waiting.</Text>

package/docs/generated/components/layout--containers.md

@@ -15,7 +15,6 @@ A page region needs width constraint, a titled section, or a two-column split.
 
 ```tsx fragment — import-only example
 import { Container } from "themelia-ui/layout/containers"
-import "themelia-ui/layout/containers.css"
 ```
 
 ## Composition
@@ -31,6 +30,16 @@ outside the package and arrives through the public props, callbacks, slots, or a
 
 Kind: const.
 
+**Use when:** A region needs centred reading width and an inline gutter without a page header.
+
+**Avoid when:** Page or another shell already owns that width and gutter.
+
+**Compose:** Use maxWidth and gutter from the Container contract; its values differ from Stack/Grid widths. It owns no scrolling or heading.
+
+**Capabilities:** reading width; centred content; inline gutter.
+
+**Alternatives:** Page, Stack.
+
 ```text
 React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>
 ```
@@ -66,6 +75,16 @@ Extends: `React.ComponentProps<"div">`.
 
 Kind: const.
 
+**Use when:** A bounded app shell needs its single page scroller and query-container boundary.
+
+**Avoid when:** The shell already supplies a scroller, or the document owns scrolling.
+
+**Compose:** Use once at the scroll boundary. Preserve its keyboard focusability; it supplies neither the main landmark nor the page gutter.
+
+**Capabilities:** page scroll owner; keyboard scrolling; inline size containment.
+
+**Alternatives:** Page.
+
 ```text
 React.ForwardRefExoticComponent<Omit<PageViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>
 ```
@@ -82,6 +101,16 @@ No own members are present in the normalized public snapshot.
 
 Kind: const.
 
+**Use when:** A semantic page section needs consistent rhythm between groups.
+
+**Avoid when:** Only needing passive spacing, or another component already owns the section.
+
+**Compose:** Supply a heading or accessible name; Section supplies the section element and shared group rhythm, not a heading or inset.
+
+**Capabilities:** semantic section; page group rhythm.
+
+**Alternatives:** Stack, ContentBlock.
+
 ```text
 React.ForwardRefExoticComponent<Omit<SectionProps, "ref"> & React.RefAttributes<HTMLElement>>
 ```
@@ -98,6 +127,16 @@ No own members are present in the normalized public snapshot.
 
 Kind: const.
 
+**Use when:** Primary work needs a secondary summary with semantic aside and optional spanning header/footer.
+
+**Avoid when:** Needing equal columns or a custom rail width and collapse breakpoint.
+
+**Compose:** The viewport lg step enables two columns; the aside remains second in the DOM. Keep sticky opt-in for content that fits the viewport.
+
+**Capabilities:** main aside layout; responsive summary rail; sticky aside.
+
+**Alternatives:** Split, Grid.
+
 ```text
 React.ForwardRefExoticComponent<Omit<TwoColumnLayoutProps, "ref"> & React.RefAttributes<HTMLDivElement>>
 ```

package/docs/generated/components/layout--header.md

@@ -15,7 +15,6 @@ The application header carries breadcrumbs, search, notifications and the user m
 
 ```tsx fragment — import-only example
 import { Header } from "themelia-ui/layout/header"
-import "themelia-ui/layout/header.css"
 ```
 
 ## Composition
@@ -421,11 +420,11 @@ export default function HeaderExample() {
 					center: <SearchInput placeholder="Search invoices…" />,
 					right: (
 						<>
-							<Button tone="neutral" buttonStyle="outline">
+							<Button tone="neutral" appearance="outline">
 								<PlusIcon />
 								New
 							</Button>
-							<Button iconOnly tone="neutral" buttonStyle="ghost" aria-label="Notifications">
+							<Button iconOnly tone="neutral" appearance="ghost" aria-label="Notifications">
 								<BellIcon />
 							</Button>
 							<Avatar size="sm">

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

@@ -15,7 +15,6 @@ The shell's own navigation — side, section or category — positions destinati
 
 ```tsx fragment — import-only example
 import { BreadcrumbProgress } from "themelia-ui/layout/navigation"
-import "themelia-ui/layout/navigation.css"
 ```
 
 ## Composition

package/docs/generated/components/layout--page.md

@@ -7,7 +7,7 @@ A page needs its title, description and primary actions in the standard arrangem
 ## Selection
 
 - **Use when:** A page needs its title, description and primary actions in the standard arrangement.
-- **Avoid when:** The page is a record's index or show view with a fuller shell.
+- **Avoid when:** The task needs standard loading, empty and error presentation already supplied by ResourceIndexShell or ResourceShowShell.
 - **Consider instead:** `features/resource`, `layout/containers`
 - **Stability:** stable.
 
@@ -15,7 +15,6 @@ A page needs its title, description and primary actions in the standard arrangem
 
 ```tsx fragment — import-only example
 import { Page } from "themelia-ui/layout/page"
-import "themelia-ui/layout/page.css"
 ```
 
 ## Composition
@@ -216,6 +215,35 @@ Extends: `Omit<React.ComponentProps<"div">, "title">`.
 
 Preview route: Page & page header — `/page`
 
+### Record detail reference
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useState } from "react"
+import { Button } from "themelia-ui/base/buttons"
+import { Card, CardContent, CardHeader } from "themelia-ui/base/cards"
+import { ContentBlock, MetadataList } from "themelia-ui/base/display"
+import { Stack } from "themelia-ui/base/structure"
+import { Text } from "themelia-ui/base/typography"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "themelia-ui/base/table"
+import { Page } from "themelia-ui/layout/page"
+
+export default function RecordDetailReference() {
+	const [activity, setActivity] = useState("No commands yet")
+	return <Page header={{ title: "Record R-104", description: "A record with independent subjects and related records.", actions: <Button onClick={() => setActivity("Route command: export R-104")}>Export record</Button> }}>
+		<Stack>
+			<Card title="Identity" titleLevel={2} headerAction={<Button tone="neutral" appearance="outline" onClick={() => setActivity("Identity command: edit R-104")}>Edit identity</Button>}>
+				<MetadataList items={[{ id: "owner", label: "Owner", value: "Example team" }, { id: "state", label: "State", value: "Active" }]} />
+				<ContentBlock title="Notes" surface="plain"><Text>A long description belongs to prose, while the name and status above are facts. Commands stay beside the subject they affect. Repeated records can each have their own headings without repeating the route heading.</Text></ContentBlock>
+			</Card>
+			<Card><CardHeader title="Related records" titleLevel={2} description="The header is composed from parts; omit Card title props when supplying it." /><CardContent>
+				<Table aria-label="Related records"><TableHeader><TableRow><TableHead>Record</TableHead><TableHead>Relationship</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>R-105</TableCell><TableCell>Follow-up</TableCell></TableRow></TableBody></Table>
+			</CardContent></Card>
+			<Text role="status">{activity}</Text>
+		</Stack>
+	</Page>
+}
+```
+
 ### PageHeader
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
@@ -254,14 +282,14 @@ import { RECORD_ACTIONS } from "./data"
 
 export default function PageActionsExample() {
 	return (
-		<div style={{ width: "100%", display: "grid", gap: "var(--space-xl)" }}>
+		<div style={{ width: "100%", display: "grid", gap: "var(--gap)" }}>
 			{[4, 2, 1].map((max) => (
-				<div key={max} style={{ display: "grid", gap: "var(--space-xs)" }}>
+				<div key={max} style={{ display: "grid", gap: "var(--gap-sm)" }}>
 					<Text size="xs" type="secondary">maxInlineActions={max}</Text>
 					<PageActions actions={RECORD_ACTIONS} display="inline" maxInlineActions={max} />
 				</div>
 			))}
-			<div style={{ display: "grid", gap: "var(--space-xs)" }}>
+			<div style={{ display: "grid", gap: "var(--gap-sm)" }}>
 				<Text size="xs" type="secondary">display="menu"</Text>
 				<PageActions actions={RECORD_ACTIONS} display="menu" />
 			</div>

package/docs/generated/components/layout--settings.md

@@ -15,7 +15,6 @@ Settings pages share an aside navigation beside their content.
 
 ```tsx fragment — import-only example
 import { AsideNavShell } from "themelia-ui/layout/settings"
-import "themelia-ui/layout/settings.css"
 ```
 
 ## Composition

package/docs/generated/components/layout--sidebar.md

@@ -15,7 +15,6 @@ The assembled application sidebar with logo, workspace switcher and user footer.
 
 ```tsx fragment — import-only example
 import { AppSidebar } from "themelia-ui/layout/sidebar"
-import "themelia-ui/layout/sidebar.css"
 ```
 
 ## Composition
@@ -261,6 +260,16 @@ Kind: callable.
 The rail’s header as a workspace switcher. The whole header row is the trigger, not a
 chevron beside a decorative name — the name is what a reader aims at.
 
+**Use when:** Workspace destinations from the rail header, including mobile navigation.
+
+**Avoid when:** A logo without destinations or application business switching policy.
+
+**Compose:** Disclosure keeps the sheet open; same-app destination selection dismisses it. The link adapter preserves native external targets.
+
+**Capabilities:** workspace navigation; mobile workspace switcher.
+
+**Alternatives:** SidebarLogo.
+
 ```text
 ({ logo, collapsedLogo, workspaceLinks, renderLink, strings, contentClassName, }: SidebarWorkspaceProps) => import("react").JSX.Element
 ```
@@ -313,6 +322,37 @@ Kind: interface.
 
 Preview route: App shell — `/app-shell`
 
+### Workspace navigation reference
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useState } from "react"
+import { Text } from "themelia-ui/base/typography"
+import { TopbarSidebarLayout } from "themelia-ui/layout/app-shell"
+import { AppSidebar, type LinkRenderer } from "themelia-ui/layout/sidebar"
+
+export default function WorkspaceNavigationReference() {
+	const [route, setRoute] = useState("/a/overview")
+	const [navigations, setNavigations] = useState(0)
+	const workspace = route.startsWith("/b/") ? "B" : "A"
+	const renderLink: LinkRenderer = ({ href, children, external, active, disabled, onClick, ...props }) => {
+		void active
+		if (disabled || !href) return <span {...props}>{children}</span>
+		return <a {...props} href={href} target={props.target ?? (external ? "_blank" : undefined)} rel={props.rel ?? (external ? "noopener noreferrer" : undefined)} onClick={event => {
+			onClick?.(event)
+			if (event.defaultPrevented || external || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+			event.preventDefault(); setRoute(href); setNavigations(count => count + 1)
+		}}>{children}</a>
+	}
+	return <div style={{ width: "100%", height: "28rem", minWidth: 0 }}>
+		<TopbarSidebarLayout contained contentRender={<div />} logo="Reference workspace" sidebarProviderProps={{ persist: false, keyboardShortcut: false }} sidebar={<AppSidebar logo={`Workspace ${workspace}`} renderLink={renderLink} currentUrl={route}
+			workspaceLinks={[{ label: "Workspace A home", url: "/a/overview", external: false }, { label: "Workspace B home", url: "/b/overview", external: false }, { label: "External workspace", url: "https://example.com" }]}
+			navigationGroups={{ "": [{ label: `${workspace} overview`, href: `/${workspace.toLowerCase()}/overview` }, { label: `${workspace} settings`, href: `/${workspace.toLowerCase()}/settings` }] }} />}>
+			<Text role="status">Workspace {workspace}; route {route}; navigations {navigations}</Text>
+		</TopbarSidebarLayout>
+	</div>
+}
+```
+
 ### The shell
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
@@ -347,9 +387,9 @@ export default function SidebarShell() {
 	const [collapsible, setCollapsible] = useState<string | null>("icon")
 
 	return (
-		<Stack gap="lg" style={{ width: "100%" }}>
-			<Stack direction="horizontal" gap="xl" wrap>
-				<Stack gap="2xs">
+		<Stack style={{ width: "100%" }}>
+			<Stack direction="horizontal" wrap>
+				<Stack gap="sm">
 					<Text size="xs" type="secondary">
 						variant
 					</Text>
@@ -365,7 +405,7 @@ export default function SidebarShell() {
 						]}
 					/>
 				</Stack>
-				<Stack gap="2xs">
+				<Stack gap="sm">
 					<Text size="xs" type="secondary">
 						collapsible
 					</Text>
@@ -415,7 +455,7 @@ function TopbarDemo() {
 	const sidebarSide = side === "right" ? "right" : "left"
 
 	return (
-		<Stack gap="lg" style={{ width: "100%", minWidth: 0 }}>
+		<Stack style={{ width: "100%", minWidth: 0 }}>
 			<PillRadioGroup
 				aria-label="Navigation side"
 				name="topbar-sidebar-side"
@@ -441,7 +481,7 @@ function TopbarDemo() {
 						/>
 					}
 				>
-					<Stack gap="lg">
+					<Stack>
 						{currentUrl === "/app/invoices" && (
 							<Input type="search" aria-label="Search invoices" placeholder="Search invoices…" value={query} onChange={event => setQuery(event.target.value)} />
 						)}

package/docs/generated/components/layout--workspace.md

@@ -15,7 +15,6 @@ The whole authenticated shell — sidebar, header and content — is assembled a
 
 ```tsx fragment — import-only example
 import { WorkspaceLayout } from "themelia-ui/layout/workspace"
-import "themelia-ui/layout/workspace.css"
 ```
 
 ## Composition
@@ -333,7 +332,7 @@ export default function RecordHeader() {
 				title="Invoice #4417"
 				description="Northwind Traders — issued 1 September 2026."
 				media={
-					<Avatar size="lg">
+					<Avatar>
 						<AvatarFallback>NT</AvatarFallback>
 					</Avatar>
 				}
@@ -345,7 +344,7 @@ export default function RecordHeader() {
 				]}
 				actions={
 					<>
-						<Button tone="neutral" buttonStyle="outline">Duplicate</Button>
+						<Button tone="neutral" appearance="outline">Duplicate</Button>
 						<Button>Edit</Button>
 					</>
 				}
@@ -393,7 +392,7 @@ export default function RecordHeaderSecondary() {
 					{ label: "Branch", value: "main" },
 					{ label: "Author", value: "Raj Patel" },
 				]}
-				actions={<Button tone="neutral" buttonStyle="outline">Cancel</Button>}
+				actions={<Button tone="neutral" appearance="outline">Cancel</Button>}
 				secondaryActions={<ViewSwitch />}
 			/>
 		</Card>