@soroush.tech/design-system 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/catalog.mjs

@@ -1,11 +1,10 @@
-import { n as baseTheme } from "./themes-BwEsdVox.mjs";
-import { r as tooltipPlacementValues } from "./getTooltipOrigins-CyyIMCF1.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,
@@ -78,6 +77,7 @@ const componentCategories = [
 		items: [
 			component("Breadcrumbs"),
 			component("Menu", true),
+			component("NavTree", true),
 			component("Tabs", true)
 		]
 	},
@@ -120,6 +120,7 @@ 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: [
@@ -178,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.
@@ -191,8 +191,7 @@ const node = (component, props = {}, children = []) => ({
 	props,
 	children
 });
-//#endregion
-//#region src/Accordion/AccordionActions/AccordionActions.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,
@@ -205,8 +204,7 @@ const accordionActionsCatalog = defineCatalogEntry()({
 	options: {},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Accordion/Accordion/Accordion.catalog.ts
+// src/Accordion/Accordion/Accordion.catalog.ts
 const accordionCatalog = defineCatalogEntry()({
 	summary: "A heading that opens and closes a region of content.",
 	isPlaceable: true,
@@ -246,8 +244,7 @@ const accordionCatalog = defineCatalogEntry()({
 		read: "argument"
 	}
 });
-//#endregion
-//#region src/Accordion/AccordionDetails/AccordionDetails.catalog.ts
+// src/Accordion/AccordionDetails/AccordionDetails.catalog.ts
 const accordionDetailsCatalog = defineCatalogEntry()({
 	summary: "What an accordion opens: the padded body of its region.",
 	isPlaceable: false,
@@ -260,8 +257,7 @@ const accordionDetailsCatalog = defineCatalogEntry()({
 	options: {},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Accordion/AccordionGroup/AccordionGroup.catalog.ts
+// 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,
@@ -308,8 +304,7 @@ const accordionSummaryCatalog = defineCatalogEntry()({
 		expandIcon: "child"
 	}
 });
-//#endregion
-//#region src/Chip/Chip.catalog.ts
+// src/Chip/Chip.catalog.ts
 const chipVariantValues = [
 	"contained",
 	"outlined",
@@ -425,8 +420,7 @@ const badgeCatalog = defineCatalogEntry()({
 		badgeContent: "text"
 	}
 });
-//#endregion
-//#region src/Alert/Alert/Alert.catalog.ts
+// src/Alert/Alert/Alert.catalog.ts
 const alertSeverityValues = [
 	"success",
 	"info",
@@ -475,8 +469,7 @@ const alertCatalog = defineCatalogEntry()({
 		action: "child"
 	}
 });
-//#endregion
-//#region src/Alert/AlertTitle/AlertTitle.catalog.ts
+// src/Alert/AlertTitle/AlertTitle.catalog.ts
 const alertTitleCatalog = defineCatalogEntry()({
 	summary: "The title of an alert: its first line, in a heavier weight.",
 	isPlaceable: false,
@@ -533,8 +526,7 @@ const fabCatalog = defineCatalogEntry()({
 		startIcon: "child"
 	}
 });
-//#endregion
-//#region src/Snackbar/Snackbar.catalog.ts
+// 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,
@@ -586,8 +578,7 @@ const snackbarCatalog = defineCatalogEntry()({
 		children: "children"
 	}
 });
-//#endregion
-//#region src/Tooltip/Tooltip.catalog.ts
+// 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,
@@ -802,8 +793,7 @@ const fabMenuCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/FabMenu/FabMenuItem/FabMenuItem.catalog.ts
+// 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,
@@ -828,8 +818,82 @@ const fabMenuItemCatalog = defineCatalogEntry()({
 		icon: "child"
 	}
 });
-//#endregion
-//#region src/AppBar/AppBar.catalog.ts
+// 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",
@@ -895,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",
@@ -959,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,
@@ -980,8 +1042,7 @@ const backdropCatalog = defineCatalogEntry()({
 		height: 200
 	}
 });
-//#endregion
-//#region src/Breadcrumbs/Breadcrumbs.catalog.ts
+// src/Breadcrumbs/Breadcrumbs.catalog.ts
 const breadcrumbsSeparatorValues = [
 	"/",
 	"›",
@@ -1064,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",
@@ -1145,8 +1205,7 @@ const buttonCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/ButtonGroup/ButtonGroup.catalog.ts
+// src/ButtonGroup/ButtonGroup.catalog.ts
 const buttonGroupVariantValues = [
 	"contained",
 	"outlined",
@@ -1215,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",
@@ -1277,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",
@@ -1390,8 +1447,7 @@ const transitionExampleChild = {
 	},
 	children: ["Content that moves"]
 };
-//#endregion
-//#region src/Collapse/Collapse.catalog.ts
+// src/Collapse/Collapse.catalog.ts
 const collapseOrientationValues = ["vertical", "horizontal"];
 const collapseCatalog = defineCatalogEntry()({
 	summary: "Opens and closes its content by its height, or its width.",
@@ -1419,8 +1475,7 @@ const collapseCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Fade/Fade.catalog.ts
+// src/Fade/Fade.catalog.ts
 const fadeCatalog = defineCatalogEntry()({
 	summary: "Fades one child in and out by its opacity.",
 	isPlaceable: true,
@@ -1433,8 +1488,7 @@ const fadeCatalog = defineCatalogEntry()({
 	options: { ...transitionOptions },
 	content: { children: "child" }
 });
-//#endregion
-//#region src/Grow/Grow.catalog.ts
+// 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,
@@ -1447,8 +1501,7 @@ const growCatalog = defineCatalogEntry()({
 	options: { ...transitionOptions },
 	content: { children: "child" }
 });
-//#endregion
-//#region src/Slide/Slide.catalog.ts
+// src/Slide/Slide.catalog.ts
 const slideDirectionValues = [
 	"up",
 	"down",
@@ -1473,8 +1526,7 @@ const slideCatalog = defineCatalogEntry()({
 	},
 	content: { children: "child" }
 });
-//#endregion
-//#region src/Zoom/Zoom.catalog.ts
+// src/Zoom/Zoom.catalog.ts
 const zoomCatalog = defineCatalogEntry()({
 	summary: "Zooms one child in from nothing and out to nothing.",
 	isPlaceable: true,
@@ -1487,8 +1539,7 @@ const zoomCatalog = defineCatalogEntry()({
 	options: { ...transitionOptions },
 	content: { children: "child" }
 });
-//#endregion
-//#region src/Menu/ContextMenu/ContextMenu.catalog.ts
+// 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,
@@ -1551,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",
@@ -1629,8 +1679,7 @@ const circularProgressCatalog = defineCatalogEntry()({
 	},
 	content: {}
 });
-//#endregion
-//#region src/Drawer/Drawer.catalog.ts
+// src/Drawer/Drawer.catalog.ts
 const drawerAnchorValues = [
 	"left",
 	"right",
@@ -1777,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",
@@ -1876,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,
@@ -1911,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,
@@ -1961,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,
@@ -2016,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,
@@ -2039,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,
@@ -2059,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",
@@ -2143,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",
@@ -2204,8 +2245,7 @@ const iconCatalog = defineCatalogEntry()({
 	},
 	content: {}
 });
-//#endregion
-//#region src/Image/Image.catalog.ts
+// src/Image/Image.catalog.ts
 const imageObjectFitValues = [
 	"cover",
 	"contain",
@@ -2255,8 +2295,7 @@ const imageCatalog = defineCatalogEntry()({
 	},
 	content: {}
 });
-//#endregion
-//#region src/RangeInput/RangeInput.catalog.ts
+// src/RangeInput/RangeInput.catalog.ts
 const rangeInputTrackValues = ["normal", "inverted"];
 const rangeInputValueLabelValues = [
 	"off",
@@ -2371,8 +2410,7 @@ const rangeInputCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onChangeCommitted"]
 });
-//#endregion
-//#region src/LinearProgress/LinearProgress.catalog.ts
+// src/LinearProgress/LinearProgress.catalog.ts
 const linearProgressVariantValues = [
 	"indeterminate",
 	"determinate",
@@ -2457,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",
@@ -2583,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,
@@ -2662,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,
@@ -2676,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,
@@ -2724,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",
@@ -2807,8 +2840,7 @@ const modalCatalog = defineCatalogEntry()({
 		height: 320
 	}
 });
-//#endregion
-//#region src/NativeSelect/NativeSelect.catalog.ts
+// src/NativeSelect/NativeSelect.catalog.ts
 const nativeSelectVariantValues = [
 	"default",
 	"outlined",
@@ -2907,8 +2939,7 @@ const nativeSelectCatalog = defineCatalogEntry()({
 	},
 	preview: { width: 220 }
 });
-//#endregion
-//#region src/NumberInput/NumberInput.catalog.ts
+// src/NumberInput/NumberInput.catalog.ts
 const numberInputSpinButtonsValues = [
 	"stacked",
 	"sides",
@@ -3032,8 +3063,7 @@ const numberInputCatalog = 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 = {
@@ -3158,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,
@@ -3278,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,
@@ -3332,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,
@@ -3357,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",
@@ -3423,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",
@@ -3509,8 +3534,7 @@ const ratingCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onChangeActive"]
 });
-//#endregion
-//#region src/Select/Select.catalog.ts
+// src/Select/Select.catalog.ts
 const selectVariantValues = [
 	"default",
 	"outlined",
@@ -3604,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",
@@ -3671,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
@@ -3682,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",
@@ -3749,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",
@@ -3818,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",
@@ -3892,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,
@@ -3957,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 = [
@@ -3978,7 +4003,8 @@ const tabsScrollButtonsValues = [
 const variantLabels$3 = {
 	underline: "Underline",
 	boxed: "Boxed",
-	enclosed: "Enclosed"
+	enclosed: "Enclosed",
+	tonal: "Tonal"
 };
 const views = [
 	node("Tab", {
@@ -4086,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,
@@ -4121,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,
@@ -4175,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",
@@ -4257,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,
@@ -4283,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",
@@ -4337,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,
@@ -4369,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,
@@ -4383,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,
@@ -4401,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,
@@ -4465,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,
@@ -4505,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,
@@ -4568,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",
@@ -4656,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",
@@ -4720,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",
@@ -4803,8 +4815,7 @@ const toggleButtonGroupCatalog = defineCatalogEntry()({
 		read: "argument"
 	}
 });
-//#endregion
-//#region src/TransferList/TransferList.catalog.ts
+// src/TransferList/TransferList.catalog.ts
 const items = [
 	{
 		value: "apple",
@@ -4917,8 +4928,7 @@ const transferListCatalog = defineCatalogEntry()({
 		read: "argument"
 	}
 });
-//#endregion
-//#region src/Typography/Typography.catalog.ts
+// src/Typography/Typography.catalog.ts
 const typographyAlignValues = [
 	"left",
 	"center",
@@ -4992,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,
@@ -5011,8 +5020,7 @@ 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: {
@@ -5085,6 +5093,20 @@ const catalogSources = {
 		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"
@@ -5405,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",
@@ -5441,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)
@@ -5465,5 +5485,4 @@ const catalog = {
 	styleScales: readStyleScales(),
 	components
 };
-//#endregion
 export { catalog };