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

package/dist/catalog.cjs

@@ -1,12 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_themes = require("./themes--4eci3M1.cjs");
-const require_getTooltipOrigins = require("./getTooltipOrigins-B_7XXtQq.cjs");
+const require_themes = require("./themes-C2oyu8gK.cjs");
+const require_getTooltipOrigins = require("./getTooltipOrigins-8b5zQafY.cjs");
 let _soroush_tech_styled_system = require("@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,
@@ -79,6 +78,7 @@ const componentCategories = [
 		items: [
 			component("Breadcrumbs"),
 			component("Menu", true),
+			component("NavTree", true),
 			component("Tabs", true)
 		]
 	},
@@ -121,6 +121,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: [
@@ -179,8 +180,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.
@@ -192,8 +192,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,
@@ -206,8 +205,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,
@@ -247,8 +245,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,
@@ -261,8 +258,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,
@@ -309,8 +305,7 @@ const accordionSummaryCatalog = defineCatalogEntry()({
 		expandIcon: "child"
 	}
 });
-//#endregion
-//#region src/Chip/Chip.catalog.ts
+// src/Chip/Chip.catalog.ts
 const chipVariantValues = [
 	"contained",
 	"outlined",
@@ -426,8 +421,7 @@ const badgeCatalog = defineCatalogEntry()({
 		badgeContent: "text"
 	}
 });
-//#endregion
-//#region src/Alert/Alert/Alert.catalog.ts
+// src/Alert/Alert/Alert.catalog.ts
 const alertSeverityValues = [
 	"success",
 	"info",
@@ -476,8 +470,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,
@@ -534,8 +527,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,
@@ -587,8 +579,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,
@@ -803,8 +794,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,
@@ -829,8 +819,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",
@@ -896,8 +960,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",
@@ -960,8 +1023,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,
@@ -981,8 +1043,7 @@ const backdropCatalog = defineCatalogEntry()({
 		height: 200
 	}
 });
-//#endregion
-//#region src/Breadcrumbs/Breadcrumbs.catalog.ts
+// src/Breadcrumbs/Breadcrumbs.catalog.ts
 const breadcrumbsSeparatorValues = [
 	"/",
 	"›",
@@ -1065,8 +1126,7 @@ const breadcrumbsCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Button/Button.catalog.ts
+// src/Button/Button.catalog.ts
 const buttonVariantValues = [
 	"contained",
 	"outlined",
@@ -1146,8 +1206,7 @@ const buttonCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/ButtonGroup/ButtonGroup.catalog.ts
+// src/ButtonGroup/ButtonGroup.catalog.ts
 const buttonGroupVariantValues = [
 	"contained",
 	"outlined",
@@ -1216,8 +1275,7 @@ const buttonGroupCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Card/Card.catalog.ts
+// src/Card/Card.catalog.ts
 const cardVariantValues = [
 	"paper",
 	"bracketBox",
@@ -1278,8 +1336,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",
@@ -1391,8 +1448,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.",
@@ -1420,8 +1476,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,
@@ -1434,8 +1489,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,
@@ -1448,8 +1502,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",
@@ -1474,8 +1527,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,
@@ -1488,8 +1540,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,
@@ -1552,8 +1603,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",
@@ -1630,8 +1680,7 @@ const circularProgressCatalog = defineCatalogEntry()({
 	},
 	content: {}
 });
-//#endregion
-//#region src/Drawer/Drawer.catalog.ts
+// src/Drawer/Drawer.catalog.ts
 const drawerAnchorValues = [
 	"left",
 	"right",
@@ -1778,8 +1827,7 @@ const drawerToggleCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onClick"]
 });
-//#endregion
-//#region src/Flex/Flex.catalog.ts
+// src/Flex/Flex.catalog.ts
 const flexDirectionValues = [
 	"row",
 	"row-reverse",
@@ -1877,8 +1925,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,
@@ -1912,8 +1959,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,
@@ -1962,8 +2008,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,
@@ -2017,8 +2062,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,
@@ -2040,8 +2084,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,
@@ -2060,8 +2103,7 @@ const formLabelCatalog = defineCatalogEntry()({
 	},
 	content: { children: "children" }
 });
-//#endregion
-//#region src/Grid/Grid.catalog.ts
+// src/Grid/Grid.catalog.ts
 const gridAutoFlowValues = [
 	"row",
 	"column",
@@ -2144,8 +2186,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",
@@ -2205,8 +2246,7 @@ const iconCatalog = defineCatalogEntry()({
 	},
 	content: {}
 });
-//#endregion
-//#region src/Image/Image.catalog.ts
+// src/Image/Image.catalog.ts
 const imageObjectFitValues = [
 	"cover",
 	"contain",
@@ -2256,8 +2296,7 @@ const imageCatalog = defineCatalogEntry()({
 	},
 	content: {}
 });
-//#endregion
-//#region src/RangeInput/RangeInput.catalog.ts
+// src/RangeInput/RangeInput.catalog.ts
 const rangeInputTrackValues = ["normal", "inverted"];
 const rangeInputValueLabelValues = [
 	"off",
@@ -2372,8 +2411,7 @@ const rangeInputCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onChangeCommitted"]
 });
-//#endregion
-//#region src/LinearProgress/LinearProgress.catalog.ts
+// src/LinearProgress/LinearProgress.catalog.ts
 const linearProgressVariantValues = [
 	"indeterminate",
 	"determinate",
@@ -2458,8 +2496,7 @@ const linearProgressCatalog = defineCatalogEntry()({
 	content: {},
 	preview: { width: 240 }
 });
-//#endregion
-//#region src/Link/Link.catalog.ts
+// src/Link/Link.catalog.ts
 const linkUnderlineValues = [
 	"always",
 	"hover",
@@ -2584,8 +2621,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,
@@ -2663,8 +2699,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,
@@ -2677,8 +2712,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,
@@ -2725,8 +2759,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",
@@ -2808,8 +2841,7 @@ const modalCatalog = defineCatalogEntry()({
 		height: 320
 	}
 });
-//#endregion
-//#region src/NativeSelect/NativeSelect.catalog.ts
+// src/NativeSelect/NativeSelect.catalog.ts
 const nativeSelectVariantValues = [
 	"default",
 	"outlined",
@@ -2908,8 +2940,7 @@ const nativeSelectCatalog = defineCatalogEntry()({
 	},
 	preview: { width: 220 }
 });
-//#endregion
-//#region src/NumberInput/NumberInput.catalog.ts
+// src/NumberInput/NumberInput.catalog.ts
 const numberInputSpinButtonsValues = [
 	"stacked",
 	"sides",
@@ -3033,8 +3064,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 = {
@@ -3159,8 +3189,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,
@@ -3279,8 +3308,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,
@@ -3333,8 +3361,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,
@@ -3358,8 +3385,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",
@@ -3424,8 +3450,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",
@@ -3510,8 +3535,7 @@ const ratingCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onChangeActive"]
 });
-//#endregion
-//#region src/Select/Select.catalog.ts
+// src/Select/Select.catalog.ts
 const selectVariantValues = [
 	"default",
 	"outlined",
@@ -3605,9 +3629,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",
@@ -3672,8 +3696,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
@@ -3683,8 +3712,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",
@@ -3750,8 +3778,7 @@ const sidebarItemCatalog = defineCatalogEntry()({
 	},
 	domEvents: ["onSelect", "onClick"]
 });
-//#endregion
-//#region src/Skeleton/Skeleton.catalog.ts
+// src/Skeleton/Skeleton.catalog.ts
 const skeletonVariantValues = [
 	"text",
 	"circular",
@@ -3819,8 +3846,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",
@@ -3893,8 +3919,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,
@@ -3958,12 +3983,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 = [
@@ -3979,7 +4004,8 @@ const tabsScrollButtonsValues = [
 const variantLabels$3 = {
 	underline: "Underline",
 	boxed: "Boxed",
-	enclosed: "Enclosed"
+	enclosed: "Enclosed",
+	tonal: "Tonal"
 };
 const views = [
 	node("Tab", {
@@ -4087,8 +4113,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,
@@ -4122,8 +4147,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,
@@ -4176,8 +4200,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",
@@ -4258,8 +4281,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,
@@ -4284,8 +4306,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",
@@ -4338,8 +4359,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,
@@ -4370,8 +4390,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,
@@ -4384,8 +4403,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,
@@ -4402,8 +4420,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,
@@ -4466,8 +4483,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,
@@ -4506,8 +4522,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,
@@ -4569,8 +4584,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",
@@ -4657,8 +4671,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",
@@ -4721,8 +4734,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",
@@ -4804,8 +4816,7 @@ const toggleButtonGroupCatalog = defineCatalogEntry()({
 		read: "argument"
 	}
 });
-//#endregion
-//#region src/TransferList/TransferList.catalog.ts
+// src/TransferList/TransferList.catalog.ts
 const items = [
 	{
 		value: "apple",
@@ -4918,8 +4929,7 @@ const transferListCatalog = defineCatalogEntry()({
 		read: "argument"
 	}
 });
-//#endregion
-//#region src/Typography/Typography.catalog.ts
+// src/Typography/Typography.catalog.ts
 const typographyAlignValues = [
 	"left",
 	"center",
@@ -4993,8 +5003,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,
@@ -5012,8 +5021,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: {
@@ -5086,6 +5094,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"
@@ -5406,8 +5428,7 @@ const catalogSources = {
 		folder: "View"
 	}
 };
-//#endregion
-//#region src/catalog/styleScales.ts
+// src/catalog/styleScales.ts
 const DESIGN_SYSTEM_SCALES = {
 	color: "text",
 	bg: "background",
@@ -5442,8 +5463,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)
@@ -5466,5 +5486,4 @@ const catalog = {
 	styleScales: readStyleScales(),
 	components
 };
-//#endregion
 exports.catalog = catalog;