@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/catalog.mjs

@@ -1,10 +1,10 @@
-import { n as baseTheme } from "./themes-L-dE7_ck.mjs";
+import { n as baseTheme } from "./themes-D-knykK0.mjs";
+import { r as tooltipPlacementValues } from "./getTooltipOrigins-D0bLLXwY.mjs";
 import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from "@soroush.tech/styled-system";
-//#region ../docs-content/src/kebabCase.ts
+// ../docs-content/src/kebabCase.ts
 /** PascalCase or camelCase to kebab-case: `TextInput` -> `text-input`. */
 const kebabCase = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-//#endregion
-//#region ../docs-content/src/registry.ts
+// ../docs-content/src/registry.ts
 /** `nested` marks container folders whose README sits one level down (Table/Table/README.md). */
 const component = (name, nested = false, pkg = "design-system") => ({
 	pkg,
@@ -22,6 +22,7 @@ const componentCategories = [
 	{
 		label: "Layout & surfaces",
 		items: [
+			component("ScrollArea"),
 			component("View"),
 			component("Flex"),
 			component("Grid"),
@@ -41,12 +42,15 @@ const componentCategories = [
 			component("Icon"),
 			component("Image"),
 			component("Avatar"),
-			component("Table", true)
+			component("Table", true),
+			component("Accordion", true)
 		]
 	},
 	{
 		label: "Inputs & forms",
 		items: [
+			component("Autocomplete"),
+			component("Fab"),
 			component("Button"),
 			component("ButtonGroup"),
 			component("ToggleButton", true),
@@ -54,8 +58,8 @@ const componentCategories = [
 			component("Checkbox"),
 			component("Radio"),
 			component("Rating"),
-			component("NumberField"),
-			component("InputRange"),
+			component("NumberInput"),
+			component("RangeInput"),
 			component("TransferList"),
 			component("Switch"),
 			component("NativeSelect"),
@@ -73,21 +77,38 @@ const componentCategories = [
 		items: [
 			component("Breadcrumbs"),
 			component("Menu", true),
+			component("NavTree", true),
 			component("Tabs", true)
 		]
 	},
 	{
 		label: "Feedback",
 		items: [
+			component("FabMenu", true),
+			component("Snackbar"),
+			component("Alert", true),
+			component("Badge"),
+			component("Chip"),
 			component("CircularProgress"),
 			component("LinearProgress"),
 			component("Skeleton"),
 			component("Backdrop")
 		]
 	},
+	{
+		label: "Transitions",
+		items: [
+			component("Collapse"),
+			component("Fade"),
+			component("Grow"),
+			component("Slide"),
+			component("Zoom")
+		]
+	},
 	{
 		label: "Overlay & behavior",
 		items: [
+			component("Tooltip"),
 			component("Portal"),
 			component("FocusTrap"),
 			component("Modal"),
@@ -99,6 +120,15 @@ const componentCategories = [
 const allComponents = componentCategories.flatMap((category) => category.items);
 /** Every family member, in its family's order. */
 const memberComponents = Object.entries({
+	NavTree: ["NavGroup", "NavLink"],
+	FabMenu: ["FabMenuItem"],
+	Alert: ["AlertTitle"],
+	Accordion: [
+		"AccordionActions",
+		"AccordionDetails",
+		"AccordionGroup",
+		"AccordionSummary"
+	],
 	Menu: [
 		"ContextMenu",
 		"MenuDivider",
@@ -149,8 +179,7 @@ const markdownComponents = [
 /** Every documented component, family members included, across packages. Slugs are globally unique. */
 const allDocComponents = [...allComponents.flatMap((item) => [item, ...membersOf(item)]), ...markdownComponents];
 new Map(allDocComponents.map((item) => [item.slug, item]));
-//#endregion
-//#region src/catalog/defineCatalogEntry.ts
+// src/catalog/defineCatalogEntry.ts
 /**
 * Types a component's catalog entry against its props: `defineCatalogEntry<ButtonProps>()({
 * ... })`. Curried, so the props are named and the entry is still inferred.
@@ -162,8 +191,709 @@ const node = (component, props = {}, children = []) => ({
 	props,
 	children
 });
-//#endregion
-//#region src/AppBar/AppBar.catalog.ts
+// src/Accordion/AccordionActions/AccordionActions.catalog.ts
+const accordionActionsCatalog = defineCatalogEntry()({
+	summary: "The foot of an accordion's region: its buttons, at the end of a row.",
+	isPlaceable: false,
+	example: {
+		component: "AccordionActions",
+		props: {},
+		children: [node("Button", { variant: "text" }, ["Save"])]
+	},
+	variants: [],
+	options: {},
+	content: { children: "children" }
+});
+// src/Accordion/Accordion/Accordion.catalog.ts
+const accordionCatalog = defineCatalogEntry()({
+	summary: "A heading that opens and closes a region of content.",
+	isPlaceable: true,
+	example: {
+		component: "Accordion",
+		props: {},
+		children: [node("AccordionSummary", {}, ["Title"]), node("AccordionDetails", {}, ["Content that opens and closes."])]
+	},
+	variants: [],
+	options: {
+		defaultExpanded: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		hasGutters: {
+			values: [true, false],
+			default: true
+		},
+		borderRadius: { scale: "radii" },
+		bg: {
+			scale: "background",
+			default: "paper"
+		},
+		textColor: {
+			scale: "text",
+			default: "initial"
+		}
+	},
+	content: { children: "children" },
+	twoWay: {
+		prop: "isExpanded",
+		event: "onChange",
+		read: "argument"
+	}
+});
+// src/Accordion/AccordionDetails/AccordionDetails.catalog.ts
+const accordionDetailsCatalog = defineCatalogEntry()({
+	summary: "What an accordion opens: the padded body of its region.",
+	isPlaceable: false,
+	example: {
+		component: "AccordionDetails",
+		props: {},
+		children: ["Content that opens and closes."]
+	},
+	variants: [],
+	options: {},
+	content: { children: "children" }
+});
+// src/Accordion/AccordionGroup/AccordionGroup.catalog.ts
+const accordionGroupCatalog = defineCatalogEntry()({
+	summary: "A column of accordions that move by the keys, and may keep one open at a time.",
+	isPlaceable: true,
+	example: {
+		component: "AccordionGroup",
+		props: {},
+		children: [node("Accordion", {}, [node("AccordionSummary", {}, ["First"]), node("AccordionDetails", {}, ["The first content."])]), node("Accordion", {}, [node("AccordionSummary", {}, ["Second"]), node("AccordionDetails", {}, ["The second content."])])]
+	},
+	variants: [],
+	options: {
+		isExclusive: {
+			values: [true, false],
+			default: false
+		},
+		variant: {
+			values: ["separated", "attached"],
+			default: "separated"
+		}
+	},
+	content: { children: "children" }
+});
+const accordionSummaryCatalog = defineCatalogEntry()({
+	summary: "The header of an accordion: a button in a heading that opens and closes it.",
+	isPlaceable: false,
+	example: {
+		component: "AccordionSummary",
+		props: {},
+		children: ["Title"]
+	},
+	variants: [],
+	options: { headingLevel: {
+		values: [
+			1,
+			2,
+			3,
+			4,
+			5,
+			6
+		],
+		default: 3
+	} },
+	content: {
+		children: "children",
+		expandIcon: "child"
+	}
+});
+// src/Chip/Chip.catalog.ts
+const chipVariantValues = [
+	"contained",
+	"outlined",
+	"text"
+];
+const variantLabels$18 = {
+	contained: "Filled",
+	outlined: "Outlined",
+	text: "Text"
+};
+const chipCatalog = defineCatalogEntry()({
+	summary: "A compact tag: a label, an icon or an avatar, and optionally a click and a delete.",
+	isPlaceable: true,
+	example: {
+		component: "Chip",
+		props: { label: "Tag" },
+		children: []
+	},
+	variants: chipVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$18[variant],
+		example: {
+			component: "Chip",
+			props: {
+				label: "Tag",
+				variant
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: chipVariantValues,
+			default: "contained"
+		},
+		color: {
+			scale: "palette",
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		shape: {
+			values: [
+				"square",
+				"rounded",
+				"pill"
+			],
+			default: "pill"
+		},
+		borderRadius: { scale: "radii" },
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		label: "text",
+		icon: "child",
+		avatar: "child"
+	}
+});
+const badgeCatalog = defineCatalogEntry()({
+	summary: "A count or a dot anchored over another element.",
+	isPlaceable: true,
+	example: {
+		component: "Badge",
+		props: { badgeContent: 4 },
+		children: [node("Icon", { name: "star" })]
+	},
+	variants: [{
+		name: "dot",
+		label: "Dot",
+		example: {
+			component: "Badge",
+			props: { variant: "dot" },
+			children: [node("Icon", { name: "star" })]
+		}
+	}],
+	options: {
+		max: {
+			values: [
+				9,
+				99,
+				999
+			],
+			default: 99
+		},
+		variant: {
+			values: ["standard", "dot"],
+			default: "standard"
+		},
+		color: {
+			scale: "palette",
+			default: "error"
+		},
+		isHidden: {
+			values: [true, false],
+			default: false
+		},
+		shouldShowZero: {
+			values: [true, false],
+			default: false
+		},
+		overlap: {
+			values: ["rectangular", "circular"],
+			default: "rectangular"
+		}
+	},
+	content: {
+		children: "children",
+		badgeContent: "text"
+	}
+});
+// src/Alert/Alert/Alert.catalog.ts
+const alertSeverityValues = [
+	"success",
+	"info",
+	"warning",
+	"error"
+];
+const alertCatalog = defineCatalogEntry()({
+	summary: "An inline message with a severity, an icon, a title and an action.",
+	isPlaceable: true,
+	example: {
+		component: "Alert",
+		props: { severity: "info" },
+		children: [node("AlertTitle", {}, ["Heads up"]), "Your changes were saved."]
+	},
+	variants: alertSeverityValues.map((severity) => ({
+		name: severity,
+		label: severity[0].toUpperCase() + severity.slice(1),
+		example: {
+			component: "Alert",
+			props: { severity },
+			children: ["Your changes were saved."]
+		}
+	})),
+	options: {
+		severity: {
+			values: alertSeverityValues,
+			default: "info"
+		},
+		variant: {
+			values: [
+				"standard",
+				"contained",
+				"outlined"
+			],
+			default: "standard"
+		},
+		role: {
+			values: ["alert", "status"],
+			default: "alert"
+		},
+		borderRadius: { scale: "radii" }
+	},
+	content: {
+		children: "children",
+		icon: "child",
+		action: "child"
+	}
+});
+// src/Alert/AlertTitle/AlertTitle.catalog.ts
+const alertTitleCatalog = defineCatalogEntry()({
+	summary: "The title of an alert: its first line, in a heavier weight.",
+	isPlaceable: false,
+	example: {
+		component: "AlertTitle",
+		props: {},
+		children: ["Heads up"]
+	},
+	variants: [],
+	options: {},
+	content: { children: "children" }
+});
+const fabCatalog = defineCatalogEntry()({
+	summary: "A floating action button: the one main action of a page, circular or extended.",
+	isPlaceable: true,
+	example: {
+		component: "Fab",
+		props: { "aria-label": "Add" },
+		children: [node("Icon", { name: "add" })]
+	},
+	variants: [{
+		name: "extended",
+		label: "Extended",
+		example: {
+			component: "Fab",
+			props: { variant: "extended" },
+			children: ["Create"]
+		}
+	}],
+	options: {
+		variant: {
+			values: ["circular", "extended"],
+			default: "circular"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		isCollapsed: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		startIcon: "child"
+	}
+});
+// src/Snackbar/Snackbar.catalog.ts
+const snackbarCatalog = defineCatalogEntry()({
+	summary: "A transient message in a corner of the window, with auto-hide and an action.",
+	isPlaceable: true,
+	example: {
+		component: "Snackbar",
+		props: {
+			isOpen: true,
+			message: "Saved",
+			autoHideDuration: 4e3
+		},
+		children: []
+	},
+	variants: [],
+	options: {
+		isOpen: {
+			values: [true, false],
+			default: false
+		},
+		autoHideDuration: { values: [
+			2e3,
+			4e3,
+			8e3
+		] },
+		layer: {
+			scale: "zOrder",
+			default: "snackbar"
+		},
+		shape: {
+			values: [
+				"square",
+				"rounded",
+				"pill"
+			],
+			default: "rounded"
+		},
+		borderRadius: { scale: "radii" },
+		bg: {
+			scale: "background",
+			default: "modal"
+		},
+		textColor: {
+			scale: "text",
+			default: "initial"
+		}
+	},
+	content: {
+		message: "text",
+		action: "child",
+		children: "children"
+	}
+});
+// src/Tooltip/Tooltip.catalog.ts
+const tooltipCatalog = defineCatalogEntry()({
+	summary: "A short description of one element, shown on hover, keyboard focus and a long touch.",
+	isPlaceable: true,
+	example: {
+		component: "Tooltip",
+		props: { title: "Save the page" },
+		children: [node("Button", { variant: "outlined" }, ["Save"])]
+	},
+	variants: [],
+	options: {
+		placement: {
+			values: tooltipPlacementValues,
+			default: "top"
+		},
+		hasArrow: {
+			values: [true, false],
+			default: false
+		},
+		enterDelay: {
+			values: [
+				0,
+				100,
+				500
+			],
+			default: 100
+		},
+		leaveDelay: {
+			values: [
+				0,
+				200,
+				500
+			],
+			default: 0
+		},
+		shouldDescribeChild: {
+			values: [true, false],
+			default: false
+		},
+		shouldOpenOnHover: {
+			values: [true, false],
+			default: true
+		},
+		shouldOpenOnFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldOpenOnTouch: {
+			values: [true, false],
+			default: true
+		},
+		layer: {
+			scale: "zOrder",
+			default: "tooltip"
+		},
+		borderRadius: { scale: "radii" },
+		bg: {
+			scale: "background",
+			default: "modal"
+		},
+		textColor: {
+			scale: "text",
+			default: "initial"
+		}
+	},
+	content: {
+		title: "text",
+		children: "child"
+	}
+});
+const autocompleteCatalog = defineCatalogEntry()({
+	summary: "A field whose text finds an option in a list - one choice, several as chips, or free text.",
+	isPlaceable: true,
+	example: {
+		component: "Autocomplete",
+		props: {
+			options: [
+				"Berlin",
+				"Lisbon",
+				"Oslo",
+				"Rome"
+			],
+			variant: "outlined",
+			"aria-label": "City",
+			noOptionsText: "No city matches"
+		},
+		children: []
+	},
+	variants: [],
+	options: {
+		multiple: {
+			values: [true, false],
+			default: false
+		},
+		shouldAllowFreeText: {
+			values: [true, false],
+			default: false
+		},
+		isLoading: {
+			values: [true, false],
+			default: false
+		},
+		variant: {
+			values: [
+				"default",
+				"outlined",
+				"underline",
+				"text"
+			],
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		},
+		layer: {
+			scale: "zOrder",
+			default: "modal"
+		},
+		borderRadius: { scale: "radii" },
+		bg: {
+			scale: "background",
+			default: "modal"
+		},
+		textColor: {
+			scale: "text",
+			default: "primary"
+		}
+	},
+	content: {}
+});
+const scrollAreaCatalog = defineCatalogEntry()({
+	summary: "A scrolling area whose scrollbars are drawn over its content, and show while it is hovered.",
+	isPlaceable: true,
+	example: {
+		component: "ScrollArea",
+		props: {
+			maxHeight: 120,
+			"aria-label": "Notes",
+			tabIndex: 0
+		},
+		children: ["A long list of notes, taller than the area that holds it, so the thumb shows on hover."]
+	},
+	variants: [],
+	options: {
+		axes: {
+			values: [
+				"y",
+				"x",
+				"both"
+			],
+			default: "y"
+		},
+		maxHeight: { values: [120, 240] }
+	},
+	content: { children: "children" }
+});
+const fabMenuCatalog = defineCatalogEntry()({
+	summary: "A fab that opens a stack of actions - extended pills - from the corner of a page.",
+	isPlaceable: true,
+	example: {
+		component: "FabMenu",
+		props: { "aria-label": "Create" },
+		children: [node("FabMenuItem", {}, [node("Icon", { name: "add" }), "Document"]), node("FabMenuItem", {}, ["Folder"])]
+	},
+	variants: [],
+	options: {
+		direction: {
+			values: [
+				"up",
+				"down",
+				"left",
+				"right"
+			],
+			default: "up"
+		},
+		align: {
+			values: ["end", "start"],
+			default: "end"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		isOpen: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" }
+});
+// src/FabMenu/FabMenuItem/FabMenuItem.catalog.ts
+const fabMenuItemCatalog = defineCatalogEntry()({
+	summary: "One action of a FabMenu: an extended fab with an icon and a label.",
+	isPlaceable: false,
+	example: {
+		component: "FabMenuItem",
+		props: {},
+		children: ["Document"]
+	},
+	variants: [],
+	options: {
+		color: {
+			scale: "palette",
+			default: "secondary"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "text",
+		icon: "child"
+	}
+});
+// src/NavTree/NavTree/NavTree.catalog.ts
+const navTreeCatalog = defineCatalogEntry()({
+	summary: "A tree of links to the pages of a site - groups of links, and links of its own.",
+	isPlaceable: true,
+	example: {
+		component: "NavTree",
+		props: {},
+		children: [node("NavGroup", { label: "Components" }, [node("NavLink", {
+			href: "/components/button/",
+			isCurrent: true
+		}, ["Button"]), node("NavLink", { href: "/components/tabs/" }, ["Tabs"])]), node("NavGroup", {
+			label: "Guides",
+			isCollapsible: true,
+			isOpen: true
+		}, [node("NavLink", { href: "/guides/theming/" }, ["Theming"])])]
+	},
+	variants: [],
+	options: { color: {
+		scale: "palette",
+		default: "primary"
+	} },
+	content: { children: "children" }
+});
+// src/NavTree/NavGroup/NavGroup.catalog.ts
+const navGroupCatalog = defineCatalogEntry()({
+	summary: "A group of a `NavTree`: a name over a list of links, which can fold under its name.",
+	isPlaceable: false,
+	example: {
+		component: "NavGroup",
+		props: { label: "Components" },
+		children: []
+	},
+	variants: [],
+	options: {
+		isCollapsible: {
+			values: [true, false],
+			default: false
+		},
+		isOpen: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		label: "text"
+	}
+});
+// src/NavTree/NavLink/NavLink.catalog.ts
+const navLinkCatalog = defineCatalogEntry()({
+	summary: "A link to a page of a site, a row of a `NavTree` - filled when it is the current page.",
+	isPlaceable: false,
+	example: {
+		component: "NavLink",
+		props: { href: "/components/button/" },
+		children: ["Button"]
+	},
+	variants: [],
+	options: {
+		color: { scale: "palette" },
+		isCurrent: {
+			values: [true, false],
+			default: false
+		},
+		isExternal: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		href: "text",
+		note: "text"
+	}
+});
+// src/AppBar/AppBar.catalog.ts
 const appBarPositionValues = [
 	"static",
 	"relative",
@@ -229,8 +959,7 @@ const appBarCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	preview: { width: 480 }
 });
-//#endregion
-//#region src/Avatar/Avatar.catalog.ts
+// src/Avatar/Avatar.catalog.ts
 const avatarVariantValues = [
 	"circular",
 	"rounded",
@@ -293,8 +1022,7 @@ const avatarCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Backdrop/Backdrop.catalog.ts
+// src/Backdrop/Backdrop.catalog.ts
 const backdropCatalog = defineCatalogEntry()({
 	summary: "The dimmed full-viewport scrim a modal draws behind its content.",
 	isPlaceable: false,
@@ -314,8 +1042,7 @@ const backdropCatalog = defineCatalogEntry()({
 		height: 200
 	}
 });
-//#endregion
-//#region src/Breadcrumbs/Breadcrumbs.catalog.ts
+// src/Breadcrumbs/Breadcrumbs.catalog.ts
 const breadcrumbsSeparatorValues = [
 	"/",
 	"›",
@@ -398,8 +1125,7 @@ const breadcrumbsCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Button/Button.catalog.ts
+// src/Button/Button.catalog.ts
 const buttonVariantValues = [
 	"contained",
 	"outlined",
@@ -479,8 +1205,7 @@ const buttonCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/ButtonGroup/ButtonGroup.catalog.ts
+// src/ButtonGroup/ButtonGroup.catalog.ts
 const buttonGroupVariantValues = [
 	"contained",
 	"outlined",
@@ -549,8 +1274,7 @@ const buttonGroupCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Card/Card.catalog.ts
+// src/Card/Card.catalog.ts
 const cardVariantValues = [
 	"paper",
 	"bracketBox",
@@ -611,8 +1335,7 @@ const cardCatalog = defineCatalogEntry()({
 	},
 	preview: { width: 280 }
 });
-//#endregion
-//#region src/Checkbox/Checkbox.catalog.ts
+// src/Checkbox/Checkbox.catalog.ts
 const colorLabels$4 = {
 	default: "Default",
 	primary: "Primary",
@@ -680,8 +1403,143 @@ const checkboxCatalog = defineCatalogEntry()({
 		read: "target.checked"
 	}
 });
-//#endregion
-//#region src/Menu/ContextMenu/ContextMenu.catalog.ts
+/** What every transition around one child offers a picker. */
+const transitionOptions = {
+	isShown: {
+		values: [true, false],
+		default: false
+	},
+	shouldAppear: {
+		values: [true, false],
+		default: true
+	},
+	shouldMountOnEnter: {
+		values: [true, false],
+		default: false
+	},
+	shouldUnmountOnExit: {
+		values: [true, false],
+		default: false
+	},
+	timeout: {
+		values: [
+			150,
+			250,
+			375
+		],
+		default: 250
+	},
+	easing: {
+		values: [
+			"standard",
+			"enter",
+			"exit"
+		],
+		default: "standard"
+	}
+};
+/** The child a freshly placed transition holds. */
+const transitionExampleChild = {
+	component: "Paper",
+	props: {
+		p: 3,
+		width: "12rem"
+	},
+	children: ["Content that moves"]
+};
+// src/Collapse/Collapse.catalog.ts
+const collapseOrientationValues = ["vertical", "horizontal"];
+const collapseCatalog = defineCatalogEntry()({
+	summary: "Opens and closes its content by its height, or its width.",
+	isPlaceable: true,
+	example: {
+		component: "Collapse",
+		props: { isShown: true },
+		children: ["Content that opens and closes"]
+	},
+	variants: [],
+	options: {
+		...transitionOptions,
+		orientation: {
+			values: collapseOrientationValues,
+			default: "vertical"
+		},
+		collapsedSize: {
+			values: [
+				0,
+				24,
+				48
+			],
+			default: 0
+		}
+	},
+	content: { children: "children" }
+});
+// src/Fade/Fade.catalog.ts
+const fadeCatalog = defineCatalogEntry()({
+	summary: "Fades one child in and out by its opacity.",
+	isPlaceable: true,
+	example: {
+		component: "Fade",
+		props: { isShown: true },
+		children: [transitionExampleChild]
+	},
+	variants: [],
+	options: { ...transitionOptions },
+	content: { children: "child" }
+});
+// src/Grow/Grow.catalog.ts
+const growCatalog = defineCatalogEntry()({
+	summary: "Grows one child in from a little smaller, fading as it does, and shrinks it out.",
+	isPlaceable: true,
+	example: {
+		component: "Grow",
+		props: { isShown: true },
+		children: [transitionExampleChild]
+	},
+	variants: [],
+	options: { ...transitionOptions },
+	content: { children: "child" }
+});
+// src/Slide/Slide.catalog.ts
+const slideDirectionValues = [
+	"up",
+	"down",
+	"left",
+	"right"
+];
+const slideCatalog = defineCatalogEntry()({
+	summary: "Slides one child in from an edge of the window and back out.",
+	isPlaceable: true,
+	example: {
+		component: "Slide",
+		props: { isShown: true },
+		children: [transitionExampleChild]
+	},
+	variants: [],
+	options: {
+		...transitionOptions,
+		direction: {
+			values: slideDirectionValues,
+			default: "down"
+		}
+	},
+	content: { children: "child" }
+});
+// src/Zoom/Zoom.catalog.ts
+const zoomCatalog = defineCatalogEntry()({
+	summary: "Zooms one child in from nothing and out to nothing.",
+	isPlaceable: true,
+	example: {
+		component: "Zoom",
+		props: { isShown: true },
+		children: [transitionExampleChild]
+	},
+	variants: [],
+	options: { ...transitionOptions },
+	content: { children: "child" }
+});
+// src/Menu/ContextMenu/ContextMenu.catalog.ts
 const contextMenuCatalog = defineCatalogEntry()({
 	summary: "A `MenuList` opened by a right-click over its `target`, at the pointer.",
 	isPlaceable: false,
@@ -732,6 +1590,7 @@ const contextMenuCatalog = defineCatalogEntry()({
 			],
 			default: 8
 		},
+		borderRadius: { scale: "radii" },
 		layer: { scale: "zOrder" },
 		marginThreshold: { scale: "space" }
 	},
@@ -743,8 +1602,7 @@ const contextMenuCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onSelect", "onClose"]
 });
-//#endregion
-//#region src/CircularProgress/CircularProgress.catalog.ts
+// src/CircularProgress/CircularProgress.catalog.ts
 const circularProgressVariantValues = ["indeterminate", "determinate"];
 const circularProgressEasingValues = [
 	"linear",
@@ -821,8 +1679,7 @@ const circularProgressCatalog = defineCatalogEntry()({
 	},
 	content: {}
 });
-//#endregion
-//#region src/Drawer/Drawer.catalog.ts
+// src/Drawer/Drawer.catalog.ts
 const drawerAnchorValues = [
 	"left",
 	"right",
@@ -969,8 +1826,7 @@ const drawerToggleCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/Flex/Flex.catalog.ts
+// src/Flex/Flex.catalog.ts
 const flexDirectionValues = [
 	"row",
 	"row-reverse",
@@ -1068,8 +1924,7 @@ const flexCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/FocusTrap/FocusTrap.catalog.ts
+// src/FocusTrap/FocusTrap.catalog.ts
 const focusTrapCatalog = defineCatalogEntry()({
 	summary: "Keeps keyboard focus within its children while it is enabled.",
 	isPlaceable: false,
@@ -1103,8 +1958,7 @@ const focusTrapCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Form/Form.catalog.ts
+// src/Form/Form.catalog.ts
 const nameField = node("FormControl", {}, [node("Flex", {
 	flexDirection: "column",
 	gap: 1,
@@ -1153,8 +2007,7 @@ const formCatalog = defineCatalogEntry()({
 	domEvents: ["onSubmit"],
 	preview: { width: 360 }
 });
-//#endregion
-//#region src/FormControl/FormControl.catalog.ts
+// src/FormControl/FormControl.catalog.ts
 const formControlCatalog = defineCatalogEntry()({
 	summary: "One form field - a label, a control and helper text, wired together by a shared id.",
 	isPlaceable: true,
@@ -1208,8 +2061,7 @@ const formControlCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	preview: { width: 320 }
 });
-//#endregion
-//#region src/FormHelperText/FormHelperText.catalog.ts
+// src/FormHelperText/FormHelperText.catalog.ts
 const formHelperTextCatalog = defineCatalogEntry()({
 	summary: "Hint or error text under a field, read by assistive tech as the control's description.",
 	isPlaceable: false,
@@ -1231,8 +2083,7 @@ const formHelperTextCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/FormLabel/FormLabel.catalog.ts
+// src/FormLabel/FormLabel.catalog.ts
 const formLabelCatalog = defineCatalogEntry()({
 	summary: "A field's label, linked to its control - and marked required - through `FormControl`.",
 	isPlaceable: false,
@@ -1251,8 +2102,7 @@ const formLabelCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Grid/Grid.catalog.ts
+// src/Grid/Grid.catalog.ts
 const gridAutoFlowValues = [
 	"row",
 	"column",
@@ -1335,8 +2185,7 @@ const gridCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	preview: { width: 320 }
 });
-//#endregion
-//#region src/Icon/Icon.catalog.ts
+// src/Icon/Icon.catalog.ts
 const iconNameValues = [
 	"hub",
 	"code",
@@ -1396,8 +2245,7 @@ const iconCatalog = defineCatalogEntry()({
 	},
 	content: {}
 });
-//#endregion
-//#region src/Image/Image.catalog.ts
+// src/Image/Image.catalog.ts
 const imageObjectFitValues = [
 	"cover",
 	"contain",
@@ -1447,15 +2295,14 @@ const imageCatalog = defineCatalogEntry()({
 	},
 	content: {}
 });
-//#endregion
-//#region src/InputRange/InputRange.catalog.ts
-const inputRangeTrackValues = ["normal", "inverted"];
-const inputRangeValueLabelValues = [
+// src/RangeInput/RangeInput.catalog.ts
+const rangeInputTrackValues = ["normal", "inverted"];
+const rangeInputValueLabelValues = [
 	"off",
 	"auto",
 	"on"
 ];
-const inputRangeOrientationValues = ["horizontal", "vertical"];
+const rangeInputOrientationValues = ["horizontal", "vertical"];
 const variantProps$1 = {
 	single: {
 		defaultValue: 40,
@@ -1474,11 +2321,11 @@ const variantLabels$12 = {
 	range: "A range",
 	marks: "With marks"
 };
-const inputRangeCatalog = defineCatalogEntry()({
+const rangeInputCatalog = defineCatalogEntry()({
 	summary: "A slider: one value on a range, or two or more thumbs for a range of values.",
 	isPlaceable: true,
 	example: {
-		component: "InputRange",
+		component: "RangeInput",
 		props: {
 			defaultValue: 40,
 			"aria-label": "Value"
@@ -1489,7 +2336,7 @@ const inputRangeCatalog = defineCatalogEntry()({
 		name,
 		label: variantLabels$12[name],
 		example: {
-			component: "InputRange",
+			component: "RangeInput",
 			props: variantProps$1[name],
 			children: []
 		}
@@ -1523,15 +2370,15 @@ const inputRangeCatalog = defineCatalogEntry()({
 			default: false
 		},
 		orientation: {
-			values: inputRangeOrientationValues,
+			values: rangeInputOrientationValues,
 			default: "horizontal"
 		},
 		track: {
-			values: inputRangeTrackValues,
+			values: rangeInputTrackValues,
 			default: "normal"
 		},
 		valueLabel: {
-			values: inputRangeValueLabelValues,
+			values: rangeInputValueLabelValues,
 			default: "off"
 		},
 		shouldSwapThumbs: {
@@ -1563,8 +2410,7 @@ const inputRangeCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onChangeCommitted"]
 });
-//#endregion
-//#region src/LinearProgress/LinearProgress.catalog.ts
+// src/LinearProgress/LinearProgress.catalog.ts
 const linearProgressVariantValues = [
 	"indeterminate",
 	"determinate",
@@ -1649,8 +2495,7 @@ const linearProgressCatalog = defineCatalogEntry()({
 	content: {},
 	preview: { width: 240 }
 });
-//#endregion
-//#region src/Link/Link.catalog.ts
+// src/Link/Link.catalog.ts
 const linkUnderlineValues = [
 	"always",
 	"hover",
@@ -1759,6 +2604,7 @@ const menuCatalog = defineCatalogEntry()({
 			],
 			default: 8
 		},
+		borderRadius: { scale: "radii" },
 		layer: { scale: "zOrder" },
 		marginThreshold: { scale: "space" },
 		defaultOpen: {
@@ -1774,8 +2620,7 @@ const menuCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onSelect", "onClose"]
 });
-//#endregion
-//#region src/Menu/MenuDivider/MenuDivider.catalog.ts
+// src/Menu/MenuDivider/MenuDivider.catalog.ts
 const menuDividerCatalog = defineCatalogEntry()({
 	summary: "A line between groups of rows in a `MenuList`.",
 	isPlaceable: false,
@@ -1853,8 +2698,7 @@ const menuItemCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/Menu/MenuItems/MenuItems.catalog.ts
+// src/Menu/MenuItems/MenuItems.catalog.ts
 const menuItemsCatalog = defineCatalogEntry()({
 	summary: "A `MenuList`'s rows from data - rows, dividers and submenus as entries.",
 	isPlaceable: false,
@@ -1867,8 +2711,7 @@ const menuItemsCatalog = defineCatalogEntry()({
 	options: {},
 	content: {}
 });
-//#endregion
-//#region src/Menu/MenuList/MenuList.catalog.ts
+// src/Menu/MenuList/MenuList.catalog.ts
 const menuListCatalog = defineCatalogEntry()({
 	summary: "A `role=\"menu\"` list of `MenuItem` commands that owns the keyboard.",
 	isPlaceable: true,
@@ -1915,8 +2758,7 @@ const menuListCatalog = defineCatalogEntry()({
 	domEvents: ["onSelect"],
 	preview: { width: 220 }
 });
-//#endregion
-//#region src/Modal/Modal.catalog.ts
+// src/Modal/Modal.catalog.ts
 const modalScrollValues = ["paper", "body"];
 const dialog = node("Paper", {
 	role: "dialog",
@@ -1998,8 +2840,7 @@ const modalCatalog = defineCatalogEntry()({
 		height: 320
 	}
 });
-//#endregion
-//#region src/NativeSelect/NativeSelect.catalog.ts
+// src/NativeSelect/NativeSelect.catalog.ts
 const nativeSelectVariantValues = [
 	"default",
 	"outlined",
@@ -2098,14 +2939,13 @@ const nativeSelectCatalog = defineCatalogEntry()({
 	},
 	preview: { width: 220 }
 });
-//#endregion
-//#region src/NumberField/NumberField.catalog.ts
-const numberFieldSpinButtonsValues = [
+// src/NumberInput/NumberInput.catalog.ts
+const numberInputSpinButtonsValues = [
 	"stacked",
 	"sides",
 	"none"
 ];
-const numberFieldVariantValues = [
+const numberInputVariantValues = [
 	"default",
 	"outlined",
 	"underline",
@@ -2124,22 +2964,22 @@ const example = {
 	decrementLabel: "Decrease",
 	"aria-label": "Quantity"
 };
-const numberFieldCatalog = defineCatalogEntry()({
+const numberInputCatalog = defineCatalogEntry()({
 	summary: "A field for a number, read in its locale and clamped to a range, stepped by keys or buttons.",
 	isPlaceable: true,
 	example: {
-		component: "NumberField",
+		component: "NumberInput",
 		props: {
 			...example,
 			variant: "outlined"
 		},
 		children: []
 	},
-	variants: numberFieldSpinButtonsValues.map((spinButtons) => ({
+	variants: numberInputSpinButtonsValues.map((spinButtons) => ({
 		name: spinButtons,
 		label: spinLabels[spinButtons],
 		example: {
-			component: "NumberField",
+			component: "NumberInput",
 			props: {
 				...example,
 				variant: "outlined",
@@ -2164,11 +3004,11 @@ const numberFieldCatalog = defineCatalogEntry()({
 			default: 1
 		},
 		spinButtons: {
-			values: numberFieldSpinButtonsValues,
+			values: numberInputSpinButtonsValues,
 			default: "stacked"
 		},
 		variant: {
-			values: numberFieldVariantValues,
+			values: numberInputVariantValues,
 			default: "default"
 		},
 		size: {
@@ -2212,7 +3052,10 @@ const numberFieldCatalog = defineCatalogEntry()({
 			default: false
 		}
 	},
-	content: {},
+	content: {
+		startContent: "child",
+		endContent: "child"
+	},
 	twoWay: {
 		prop: "value",
 		event: "onChange",
@@ -2220,8 +3063,7 @@ const numberFieldCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onChangeCommitted"]
 });
-//#endregion
-//#region src/Pagination/Pagination.catalog.ts
+// src/Pagination/Pagination.catalog.ts
 const paginationVariantValues = ["text", "outlined"];
 const paginationShapeValues = ["circular", "rounded"];
 const variantLabels$9 = {
@@ -2346,8 +3188,7 @@ const paginationItemCatalog = defineCatalogEntry()({
 	content: { page: "text" },
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/Paper/Paper.catalog.ts
+// src/Paper/Paper.catalog.ts
 const paperCatalog = defineCatalogEntry()({
 	summary: "A plain raised surface with a theme shadow, background and radius.",
 	isPlaceable: true,
@@ -2466,8 +3307,7 @@ const popoverCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	domEvents: ["onClose"]
 });
-//#endregion
-//#region src/Portal/Portal.catalog.ts
+// src/Portal/Portal.catalog.ts
 const portalCatalog = defineCatalogEntry()({
 	summary: "Renders its children into another DOM node - the document body by default.",
 	isPlaceable: false,
@@ -2520,8 +3360,7 @@ const pressableCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/Quote/Quote.catalog.ts
+// src/Quote/Quote.catalog.ts
 const quoteCatalog = defineCatalogEntry()({
 	summary: "A block set off by a primary left border, for quotes and terminal readouts.",
 	isPlaceable: true,
@@ -2545,8 +3384,7 @@ const quoteCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	preview: { width: 360 }
 });
-//#endregion
-//#region src/Radio/Radio.catalog.ts
+// src/Radio/Radio.catalog.ts
 const colorLabels$2 = {
 	default: "Default",
 	primary: "Primary",
@@ -2611,8 +3449,7 @@ const radioCatalog = defineCatalogEntry()({
 		read: "target.checked"
 	}
 });
-//#endregion
-//#region src/Rating/Rating.catalog.ts
+// src/Rating/Rating.catalog.ts
 const ratingPrecisionValues = [1, .5];
 const sizes = {
 	sm: "Small",
@@ -2697,8 +3534,7 @@ const ratingCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onChangeActive"]
 });
-//#endregion
-//#region src/Select/Select.catalog.ts
+// src/Select/Select.catalog.ts
 const selectVariantValues = [
 	"default",
 	"outlined",
@@ -2792,9 +3628,9 @@ const selectCatalog = defineCatalogEntry()({
 	},
 	preview: { width: 220 }
 });
-//#endregion
-//#region src/Sidebar/Sidebar/Sidebar.catalog.ts
+// src/Sidebar/Sidebar/Sidebar.catalog.ts
 const sidebarAnchorValues = ["left", "right"];
+const sidebarLayoutValues = ["inline", "stacked"];
 const sidebarVariantValues = [
 	"text",
 	"outlined",
@@ -2859,8 +3695,13 @@ const sidebarCatalog = defineCatalogEntry()({
 			values: sidebarVariantValues,
 			default: "text"
 		},
+		layout: {
+			values: sidebarLayoutValues,
+			default: "inline"
+		},
 		expandedWidth: { default: "14rem" },
 		collapsedWidth: { default: "3.5rem" },
+		stackedWidth: { default: "5.5rem" },
 		hasPanel: {
 			values: [true, false],
 			default: false
@@ -2870,8 +3711,7 @@ const sidebarCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Sidebar/SidebarItem/SidebarItem.catalog.ts
+// src/Sidebar/SidebarItem/SidebarItem.catalog.ts
 const sidebarItemVariantValues = [
 	"text",
 	"outlined",
@@ -2937,8 +3777,7 @@ const sidebarItemCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onSelect", "onClick"]
 });
-//#endregion
-//#region src/Skeleton/Skeleton.catalog.ts
+// src/Skeleton/Skeleton.catalog.ts
 const skeletonVariantValues = [
 	"text",
 	"circular",
@@ -3006,8 +3845,7 @@ const skeletonCatalog = defineCatalogEntry()({
 		height: 80
 	}
 });
-//#endregion
-//#region src/Switch/Switch.catalog.ts
+// src/Switch/Switch.catalog.ts
 const switchVariantValues = ["outside", "inside"];
 const switchEdgeValues = [
 	"start",
@@ -3080,8 +3918,7 @@ const switchCatalog = defineCatalogEntry()({
 		read: "target.checked"
 	}
 });
-//#endregion
-//#region src/Tabs/TabPanel/TabPanel.catalog.ts
+// src/Tabs/TabPanel/TabPanel.catalog.ts
 const tabPanelCatalog = defineCatalogEntry()({
 	summary: "The content a tab shows - inside a `TabContext`, shown while its tab is selected.",
 	isPlaceable: false,
@@ -3145,12 +3982,12 @@ const tabCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/Tabs/Tabs/Tabs.catalog.ts
+// src/Tabs/Tabs/Tabs.catalog.ts
 const tabsVariantValues = [
 	"underline",
 	"boxed",
-	"enclosed"
+	"enclosed",
+	"tonal"
 ];
 const tabsOrientationValues = ["horizontal", "vertical"];
 const tabsOverflowBehaviorValues = [
@@ -3166,7 +4003,8 @@ const tabsScrollButtonsValues = [
 const variantLabels$3 = {
 	underline: "Underline",
 	boxed: "Boxed",
-	enclosed: "Enclosed"
+	enclosed: "Enclosed",
+	tonal: "Tonal"
 };
 const views = [
 	node("Tab", {
@@ -3274,8 +4112,7 @@ const tabsCatalog = defineCatalogEntry()({
 	domEvents: ["onTabClose"],
 	preview: { width: 360 }
 });
-//#endregion
-//#region src/Tabs/TabContext/TabContext.catalog.ts
+// src/Tabs/TabContext/TabContext.catalog.ts
 const tabContextCatalog = defineCatalogEntry()({
 	summary: "Holds the selected value for a `TabList` and the `TabPanel`s beside it, wherever they sit.",
 	isPlaceable: false,
@@ -3309,8 +4146,7 @@ const tabContextCatalog = defineCatalogEntry()({
 		read: "argument"
 	}
 });
-//#endregion
-//#region src/Tabs/TabList/TabList.catalog.ts
+// src/Tabs/TabList/TabList.catalog.ts
 const tabListCatalog = defineCatalogEntry()({
 	summary: "The `Tabs` of a `TabContext` - it shows the context's value and links each tab to its panel.",
 	isPlaceable: false,
@@ -3363,8 +4199,7 @@ const tabScrollButtonCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/Table/Table/Table.catalog.ts
+// src/Table/Table/Table.catalog.ts
 const tableSizeValues = [
 	"sm",
 	"md",
@@ -3445,8 +4280,7 @@ const tableCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	preview: { width: 360 }
 });
-//#endregion
-//#region src/Table/TableBody/TableBody.catalog.ts
+// src/Table/TableBody/TableBody.catalog.ts
 const tableBodyCatalog = defineCatalogEntry()({
 	summary: "The body section of a `Table` - its data rows, with cells rendered as `<td>`.",
 	isPlaceable: false,
@@ -3471,8 +4305,7 @@ const tableBodyCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Table/TableCell/TableCell.catalog.ts
+// src/Table/TableCell/TableCell.catalog.ts
 const tableCellVariantValues = [
 	"head",
 	"body",
@@ -3525,8 +4358,7 @@ const tableCellCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Table/TableContainer/TableContainer.catalog.ts
+// src/Table/TableContainer/TableContainer.catalog.ts
 const tableContainerCatalog = defineCatalogEntry()({
 	summary: "A scroll wrapper for a `Table` - a wide table scrolls sideways inside it, and a bounded height lets `hasStickyHeader` stick.",
 	isPlaceable: false,
@@ -3557,8 +4389,7 @@ const tableContainerCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	preview: { width: 360 }
 });
-//#endregion
-//#region src/Table/TableControl/TableControl.catalog.ts
+// src/Table/TableControl/TableControl.catalog.ts
 const tableControlCatalog = defineCatalogEntry()({
 	summary: "Renders the visible rows of a dataset inside `TableBody` - sorted by `useTableSort` and sliced by `useTablePagination`, through a row render function.",
 	isPlaceable: false,
@@ -3571,8 +4402,7 @@ const tableControlCatalog = defineCatalogEntry()({
 	options: {},
 	content: { children: "none" }
 });
-//#endregion
-//#region src/Table/TableFooter/TableFooter.catalog.ts
+// src/Table/TableFooter/TableFooter.catalog.ts
 const tableFooterCatalog = defineCatalogEntry()({
 	summary: "The footer section of a `Table` - totals or a `TablePagination` row below the body.",
 	isPlaceable: false,
@@ -3589,8 +4419,7 @@ const tableFooterCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Table/TableHead/TableHead.catalog.ts
+// src/Table/TableHead/TableHead.catalog.ts
 const tableHeadCatalog = defineCatalogEntry()({
 	summary: "The header section of a `Table` - its column-title row, with cells rendered as `<th scope=\"col\">`.",
 	isPlaceable: false,
@@ -3653,8 +4482,7 @@ const tablePaginationCatalog = defineCatalogEntry()({
 	},
 	preview: { width: 480 }
 });
-//#endregion
-//#region src/Table/TablePaginationActions/TablePaginationActions.catalog.ts
+// src/Table/TablePaginationActions/TablePaginationActions.catalog.ts
 const tablePaginationActionsCatalog = defineCatalogEntry()({
 	summary: "The first, previous, next and last page buttons inside `TablePagination`, disabled at the bounds of `count`.",
 	isPlaceable: false,
@@ -3693,8 +4521,7 @@ const tablePaginationActionsCatalog = defineCatalogEntry()({
 		read: "argument"
 	}
 });
-//#endregion
-//#region src/Table/TableRow/TableRow.catalog.ts
+// src/Table/TableRow/TableRow.catalog.ts
 const tableRowCatalog = defineCatalogEntry()({
 	summary: "One row of a `Table` section - its `TableCell`s, optionally shaded on hover or when selected.",
 	isPlaceable: false,
@@ -3756,8 +4583,7 @@ const tableSortLabelCatalog = defineCatalogEntry()({
 	content: { children: "children" },
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/TextInput/TextInput.catalog.ts
+// src/TextInput/TextInput.catalog.ts
 const textInputVariantValues = [
 	"default",
 	"outlined",
@@ -3844,8 +4670,7 @@ const textInputCatalog = defineCatalogEntry()({
 		read: "target.value"
 	}
 });
-//#endregion
-//#region src/ToggleButton/ToggleButton/ToggleButton.catalog.ts
+// src/ToggleButton/ToggleButton/ToggleButton.catalog.ts
 const colorLabels$1 = {
 	default: "Default",
 	primary: "Primary",
@@ -3908,8 +4733,7 @@ const toggleButtonCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onClick", "onChange"]
 });
-//#endregion
-//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.catalog.ts
+// src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.catalog.ts
 const toggleButtonGroupOrientationValues = ["horizontal", "vertical"];
 const colorLabels = {
 	default: "Default",
@@ -3991,8 +4815,7 @@ const toggleButtonGroupCatalog = defineCatalogEntry()({
 		read: "argument"
 	}
 });
-//#endregion
-//#region src/TransferList/TransferList.catalog.ts
+// src/TransferList/TransferList.catalog.ts
 const items = [
 	{
 		value: "apple",
@@ -4105,8 +4928,7 @@ const transferListCatalog = defineCatalogEntry()({
 		read: "argument"
 	}
 });
-//#endregion
-//#region src/Typography/Typography.catalog.ts
+// src/Typography/Typography.catalog.ts
 const typographyAlignValues = [
 	"left",
 	"center",
@@ -4180,8 +5002,7 @@ const typographyCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/View/View.catalog.ts
+// src/View/View.catalog.ts
 const viewCatalog = defineCatalogEntry()({
 	summary: "The base box - a div styled through theme tokens for space, color, borders and position.",
 	isPlaceable: true,
@@ -4199,10 +5020,93 @@ const viewCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/catalog/sources.ts
+// src/catalog/sources.ts
 /** Every component, keyed by its export name. */
 const catalogSources = {
+	Accordion: {
+		entry: accordionCatalog,
+		folder: "Accordion"
+	},
+	AccordionActions: {
+		entry: accordionActionsCatalog,
+		folder: "Accordion",
+		family: "Accordion"
+	},
+	AccordionDetails: {
+		entry: accordionDetailsCatalog,
+		folder: "Accordion",
+		family: "Accordion"
+	},
+	AccordionGroup: {
+		entry: accordionGroupCatalog,
+		folder: "Accordion",
+		family: "Accordion"
+	},
+	AccordionSummary: {
+		entry: accordionSummaryCatalog,
+		folder: "Accordion",
+		family: "Accordion"
+	},
+	Chip: {
+		entry: chipCatalog,
+		folder: "Chip"
+	},
+	Badge: {
+		entry: badgeCatalog,
+		folder: "Badge"
+	},
+	Alert: {
+		entry: alertCatalog,
+		folder: "Alert"
+	},
+	AlertTitle: {
+		entry: alertTitleCatalog,
+		folder: "Alert",
+		family: "Alert"
+	},
+	Fab: {
+		entry: fabCatalog,
+		folder: "Fab"
+	},
+	Snackbar: {
+		entry: snackbarCatalog,
+		folder: "Snackbar"
+	},
+	Tooltip: {
+		entry: tooltipCatalog,
+		folder: "Tooltip"
+	},
+	Autocomplete: {
+		entry: autocompleteCatalog,
+		folder: "Autocomplete"
+	},
+	ScrollArea: {
+		entry: scrollAreaCatalog,
+		folder: "ScrollArea"
+	},
+	FabMenu: {
+		entry: fabMenuCatalog,
+		folder: "FabMenu"
+	},
+	FabMenuItem: {
+		entry: fabMenuItemCatalog,
+		folder: "FabMenu",
+		family: "FabMenu"
+	},
+	NavTree: {
+		entry: navTreeCatalog,
+		folder: "NavTree"
+	},
+	NavGroup: {
+		entry: navGroupCatalog,
+		folder: "NavTree",
+		family: "NavTree"
+	},
+	NavLink: {
+		entry: navLinkCatalog,
+		folder: "NavTree",
+		family: "NavTree"
+	},
 	AppBar: {
 		entry: appBarCatalog,
 		folder: "AppBar"
@@ -4235,6 +5139,26 @@ const catalogSources = {
 		entry: checkboxCatalog,
 		folder: "Checkbox"
 	},
+	Collapse: {
+		entry: collapseCatalog,
+		folder: "Collapse"
+	},
+	Fade: {
+		entry: fadeCatalog,
+		folder: "Fade"
+	},
+	Grow: {
+		entry: growCatalog,
+		folder: "Grow"
+	},
+	Slide: {
+		entry: slideCatalog,
+		folder: "Slide"
+	},
+	Zoom: {
+		entry: zoomCatalog,
+		folder: "Zoom"
+	},
 	ContextMenu: {
 		entry: contextMenuCatalog,
 		folder: "Menu",
@@ -4289,9 +5213,9 @@ const catalogSources = {
 		entry: imageCatalog,
 		folder: "Image"
 	},
-	InputRange: {
-		entry: inputRangeCatalog,
-		folder: "InputRange"
+	RangeInput: {
+		entry: rangeInputCatalog,
+		folder: "RangeInput"
 	},
 	LinearProgress: {
 		entry: linearProgressCatalog,
@@ -4332,9 +5256,9 @@ const catalogSources = {
 		entry: nativeSelectCatalog,
 		folder: "NativeSelect"
 	},
-	NumberField: {
-		entry: numberFieldCatalog,
-		folder: "NumberField"
+	NumberInput: {
+		entry: numberInputCatalog,
+		folder: "NumberInput"
 	},
 	Pagination: {
 		entry: paginationCatalog,
@@ -4503,8 +5427,7 @@ const catalogSources = {
 		folder: "View"
 	}
 };
-//#endregion
-//#region src/catalog/styleScales.ts
+// src/catalog/styleScales.ts
 const DESIGN_SYSTEM_SCALES = {
 	color: "text",
 	bg: "background",
@@ -4539,8 +5462,7 @@ function readStyleScales() {
 		...DESIGN_SYSTEM_SCALES
 	};
 }
-//#endregion
-//#region src/catalog/index.ts
+// src/catalog/index.ts
 const designSystemCategories = componentCategories.map((category) => ({
 	label: category.label,
 	components: category.items.filter((item) => item.pkg === "design-system").map((item) => item.name)
@@ -4563,5 +5485,4 @@ const catalog = {
 	styleScales: readStyleScales(),
 	components
 };
-//#endregion
 export { catalog };