@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.51

package/dist/catalog.js

@@ -1,30 +1,22 @@
-import { ToolbarControlGroup } from './chunk-B6JYRX3P.js';
-import { Toolbar } from './chunk-VXFGMDA7.js';
-import { List } from './chunk-WVLMZ5SG.js';
-import { Pane } from './chunk-I4V3UDSA.js';
+import { ToolbarControlGroup, ToolbarActionLink } from './chunk-ZIYOJFZD.js';
+import { Toolbar } from './chunk-MTM43SJO.js';
+import { ListItem } from './chunk-NMGTHYW3.js';
+import { List } from './chunk-S4QRSBFI.js';
+import { ToolbarText } from './chunk-O3RCCSQJ.js';
+import { Pane } from './chunk-7GUQYHKA.js';
 
-import { ListHeader } from './chunk-GYGM363P.js';
-import { Text } from './chunk-XKFRMGMW.js';
-import { ListItem } from './chunk-I45QO2IZ.js';
-import { filterDataAttributes } from './chunk-SRSJO5QE.js';
+
+import { ListHeader } from './chunk-KX7DP2GO.js';
 
 
+import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 
-import { LucideIcon } from './chunk-W2FK7ZNY.js';
 
-import { PanelLeftClose, Waypoints, ExternalLink, Moon, Sun, PanelLeftOpen } from 'lucide';
+
+import { LucideIcon } from './chunk-4R777DUZ.js';
+import { PanelLeftClose, Moon, Sun, PanelLeftOpen, Waypoints, ExternalLink } from 'lucide';
 import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
 
-function findEntry(sections, id) {
-  for (const section of sections) {
-    for (const entry of section.entries) if (entry.id === id) return entry;
-  }
-  return void 0;
-}
-function catalogEntryTags(tags) {
-  if (!tags?.length) return void 0;
-  return /* @__PURE__ */ jsx("span", { class: "kui-catalog__tags", children: tags.map((tag) => /* @__PURE__ */ jsx("span", { class: "kui-catalog__tag", children: tag })) });
-}
 function relatedMenuItems(related, selectAction) {
   const groups = [];
   for (const entry of related)
@@ -42,6 +34,353 @@ function relatedMenuItems(related, selectAction) {
   });
   return nodes;
 }
+function CatalogResourceFooter({
+  name,
+  active,
+  resources,
+  related,
+  status,
+  selectAction
+}) {
+  return /* @__PURE__ */ jsxs("div", { class: "kui-catalog__footer", children: [
+    status ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__status", children: status }) : null,
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        label: `${name} resources`,
+        dividerSides: "",
+        responsive: "stack",
+        responsiveAt: "narrow",
+        leading: resources.length > 0 ? /* @__PURE__ */ jsx(
+          ToolbarControlGroup,
+          {
+            label: `${name} resources`,
+            content: "mixed",
+            size: "compact",
+            overflow: "scroll",
+            children: resources.map((resource) => /* @__PURE__ */ jsx(
+              ToolbarActionLink,
+              {
+                href: resource.href,
+                label: resource.label,
+                detail: resource.detail,
+                ariaLabel: `${name}: ${resource.label} (opens in new tab)`,
+                external: true,
+                icon: /* @__PURE__ */ jsx(LucideIcon, { icon: ExternalLink, name: "external-link" })
+              }
+            ))
+          }
+        ) : null,
+        trailing: related.length > 0 ? /* @__PURE__ */ jsx(
+          ToolbarControlGroup,
+          {
+            single: true,
+            content: "mixed",
+            nestedDropdown: true,
+            menuInset: "compact",
+            size: "compact",
+            label: "Related entries",
+            children: /* @__PURE__ */ jsxs(
+              "wa-dropdown",
+              {
+                placement: "top-end",
+                "data-key": `kui-catalog-related-${active}`,
+                "data-catalog-related": true,
+                "data-morph-skip-children": true,
+                children: [
+                  /* @__PURE__ */ jsxs("wa-button", { slot: "trigger", appearance: "plain", "with-caret": true, children: [
+                    /* @__PURE__ */ jsx(LucideIcon, { icon: Waypoints, name: "waypoints" }),
+                    /* @__PURE__ */ jsx("span", { children: "Components" })
+                  ] }),
+                  relatedMenuItems(related, selectAction)
+                ]
+              }
+            )
+          }
+        ) : null
+      }
+    )
+  ] });
+}
+var protectedAttributes = /* @__PURE__ */ new Set(["data-catalog-stage"]);
+function CatalogStage({
+  name,
+  content,
+  geometryOverlay,
+  rootAttributes = {}
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    protectedAttributes
+  );
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ...safeRootAttributes,
+      class: "kui-catalog__stage",
+      "data-catalog-stage": true,
+      "aria-label": `${name} preview`,
+      children: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__canvas", children: [
+        content,
+        geometryOverlay !== void 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-catalog__geometry-overlay",
+            "data-catalog-geometry-overlay": true,
+            "data-morph-skip-children": true,
+            "aria-hidden": "true"
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+function CatalogDetail({
+  brandTitle,
+  active,
+  selected,
+  content,
+  collapsed,
+  theme,
+  headerActions,
+  status,
+  geometryOverlay,
+  stageRootAttributes,
+  selectAction,
+  toggleSidebarAction,
+  toggleThemeAction
+}) {
+  const name = selected?.name ?? "";
+  const nextTheme = theme === "dark" ? "light" : "dark";
+  return /* @__PURE__ */ jsx("article", { class: "kui-catalog__detail", children: /* @__PURE__ */ jsx(
+    Pane,
+    {
+      contentClassName: "kui-catalog__detail-preview",
+      header: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__header", children: [
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            label: `${name} header`,
+            dividerSides: "",
+            leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+              collapsed ? /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-action": toggleSidebarAction,
+                  "aria-label": `Expand ${brandTitle} catalog`,
+                  children: /* @__PURE__ */ jsx(
+                    LucideIcon,
+                    {
+                      icon: PanelLeftOpen,
+                      name: "panel-left-open"
+                    }
+                  )
+                }
+              ) }) : null,
+              /* @__PURE__ */ jsx(ToolbarText, { text: name, size: "xlarge", headingLevel: 2 })
+            ] }),
+            trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+              headerActions,
+              theme ? /* @__PURE__ */ jsx(
+                ToolbarControlGroup,
+                {
+                  appearance: "borderless",
+                  content: "mixed",
+                  size: "compact",
+                  label: "Catalog display",
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "data-action": toggleThemeAction,
+                      "aria-label": `Use ${nextTheme} theme`,
+                      "data-theme-preview": theme,
+                      children: [
+                        nextTheme === "dark" ? /* @__PURE__ */ jsx(LucideIcon, { icon: Moon, name: "moon" }) : /* @__PURE__ */ jsx(LucideIcon, { icon: Sun, name: "sun" }),
+                        /* @__PURE__ */ jsx("span", { children: nextTheme === "dark" ? "Dark" : "Light" })
+                      ]
+                    }
+                  )
+                }
+              ) : null
+            ] })
+          }
+        ),
+        selected?.description ? /* @__PURE__ */ jsx("p", { class: "kui-catalog__description kui-content-item", children: selected.description }) : null
+      ] }),
+      footer: /* @__PURE__ */ jsx(
+        CatalogResourceFooter,
+        {
+          name,
+          active,
+          resources: selected?.resources ?? [],
+          related: selected?.related ?? [],
+          status,
+          selectAction
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        CatalogStage,
+        {
+          name,
+          content,
+          geometryOverlay,
+          rootAttributes: stageRootAttributes
+        }
+      )
+    }
+  ) });
+}
+function CatalogSecondarySections({
+  group,
+  active,
+  selectAction,
+  toggleAction
+}) {
+  return /* @__PURE__ */ jsxs("section", { class: "kui-catalog__group--secondary", children: [
+    group.collapsible ? /* @__PURE__ */ jsx(
+      ListHeader,
+      {
+        label: group.label,
+        toggle: true,
+        expanded: Boolean(group.expanded),
+        action: toggleAction
+      }
+    ) : /* @__PURE__ */ jsx(ListHeader, { label: group.label }),
+    !group.collapsible || group.expanded ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__secondary", "data-catalog-secondary": true, children: group.sections.map((section) => /* @__PURE__ */ jsxs("section", { class: "kui-catalog__secondary-group", children: [
+      /* @__PURE__ */ jsx("h3", { class: "kui-catalog__secondary-heading", children: section.category }),
+      /* @__PURE__ */ jsx("div", { class: "kui-catalog__secondary-items", children: /* @__PURE__ */ jsx(List, { gap: "2xs", children: section.entries.map((entry) => /* @__PURE__ */ jsx(
+        ListItem,
+        {
+          action: selectAction,
+          itemId: entry.id,
+          label: entry.name,
+          status: entry.tags?.join(" \xB7 "),
+          selected: active === entry.id,
+          title: entry.description,
+          multiline: true
+        }
+      )) }) })
+    ] })) }) : null
+  ] });
+}
+function CatalogSectionList({
+  sections,
+  active,
+  selectAction
+}) {
+  return /* @__PURE__ */ jsx("div", { class: "kui-catalog__sections", children: sections.map((section) => /* @__PURE__ */ jsxs("section", { class: "kui-catalog__group", children: [
+    /* @__PURE__ */ jsx(ListHeader, { label: section.category }),
+    /* @__PURE__ */ jsx("div", { class: "kui-catalog__items", children: /* @__PURE__ */ jsx(List, { gap: "2xs", children: section.entries.map((entry) => /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        action: selectAction,
+        itemId: entry.id,
+        label: entry.name,
+        status: entry.tags?.join(" \xB7 "),
+        selected: active === entry.id,
+        title: entry.description,
+        multiline: true
+      }
+    )) }) })
+  ] })) });
+}
+function CatalogSidebar({
+  brand,
+  sections,
+  active,
+  collapsed,
+  secondarySections,
+  footer,
+  selectAction,
+  toggleSidebarAction,
+  toggleSecondaryAction
+}) {
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      class: "kui-catalog__sidebar",
+      "aria-label": `${brand.title} catalog`,
+      "data-collapsed": String(collapsed),
+      children: /* @__PURE__ */ jsx(
+        Pane,
+        {
+          header: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__brand", children: [
+            /* @__PURE__ */ jsx(
+              Toolbar,
+              {
+                label: `${brand.title} catalog header`,
+                dividerSides: "",
+                leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  brand.logoUrl ? /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      class: "kui-catalog__mark",
+                      src: brand.logoUrl,
+                      alt: ""
+                    }
+                  ) }) : null,
+                  /* @__PURE__ */ jsx(
+                    ToolbarText,
+                    {
+                      text: brand.title,
+                      size: "large",
+                      headingLevel: 1
+                    }
+                  )
+                ] }),
+                trailing: /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-action": toggleSidebarAction,
+                    "aria-label": `Collapse ${brand.title} catalog`,
+                    children: /* @__PURE__ */ jsx(LucideIcon, { icon: PanelLeftClose, name: "panel-left-close" })
+                  }
+                ) })
+              }
+            ),
+            brand.subtitle ? /* @__PURE__ */ jsx("p", { class: "kui-catalog__subtitle", children: brand.subtitle }) : null
+          ] }),
+          children: /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              class: "kui-catalog__navigation",
+              "aria-label": `${brand.title} components`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  CatalogSectionList,
+                  {
+                    sections,
+                    active,
+                    selectAction
+                  }
+                ),
+                secondarySections ? /* @__PURE__ */ jsx(
+                  CatalogSecondarySections,
+                  {
+                    group: secondarySections,
+                    active,
+                    selectAction,
+                    toggleAction: toggleSecondaryAction
+                  }
+                ) : null,
+                footer
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function findEntry(sections, id) {
+  for (const section of sections) {
+    for (const entry of section.entries) if (entry.id === id) return entry;
+  }
+  return void 0;
+}
 function Catalog({
   brand,
   sections,
@@ -54,17 +393,15 @@ function Catalog({
   sidebarFooter,
   status,
   geometryOverlay,
+  stageRootAttributes,
   selectAction = "catalog-select",
   toggleSidebarAction = "catalog-toggle-sidebar",
   toggleThemeAction = "catalog-toggle-theme",
   toggleSecondaryAction = "catalog-toggle-secondary",
-  className = ""
+  className = "",
+  slot
 }) {
   const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : void 0);
-  const name = selected?.name ?? "";
-  const nextTheme = theme === "dark" ? "light" : "dark";
-  const resources = selected?.resources ?? [];
-  const related = selected?.related ?? [];
   return /* @__PURE__ */ jsxs(
     "main",
     {
@@ -72,249 +409,45 @@ function Catalog({
       "data-component": "catalog",
       "data-sidebar-collapsed": String(collapsed),
       "data-geometry-overlay": geometryOverlay === void 0 ? void 0 : String(geometryOverlay),
+      slot,
       children: [
         /* @__PURE__ */ jsx(
-          Pane,
+          CatalogSidebar,
           {
-            element: "aside",
-            className: "kui-catalog__sidebar",
-            label: `${brand.title} catalog`,
-            contentElement: "nav",
-            contentLabel: `${brand.title} components`,
-            separators: ["inline-end"],
-            headerClassName: "kui-catalog__brand",
-            header: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                Toolbar,
-                {
-                  label: `${brand.title} catalog header`,
-                  dividerSides: "",
-                  leading: /* @__PURE__ */ jsxs(
-                    ToolbarControlGroup,
-                    {
-                      appearance: "borderless",
-                      className: "kui-catalog__identity",
-                      children: [
-                        brand.logoUrl ? /* @__PURE__ */ jsx("img", { class: "kui-catalog__mark", src: brand.logoUrl, alt: "" }) : /* @__PURE__ */ jsx(Fragment, {}),
-                        /* @__PURE__ */ jsx(Text, { variant: "h1", children: brand.title })
-                      ]
-                    }
-                  ),
-                  trailing: /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "data-action": toggleSidebarAction,
-                      "aria-label": `Collapse ${brand.title} catalog`,
-                      children: /* @__PURE__ */ jsx(LucideIcon, { icon: PanelLeftClose, name: "panel-left-close" })
-                    }
-                  ) })
-                }
-              ),
-              brand.subtitle ? /* @__PURE__ */ jsx(Text, { class: "kui-catalog__subtitle", children: brand.subtitle }) : /* @__PURE__ */ jsx(Fragment, {})
-            ] }),
-            children: /* @__PURE__ */ jsxs(Fragment, { children: [
-              sections.map((section) => /* @__PURE__ */ jsxs("section", { class: "kui-catalog__group", children: [
-                /* @__PURE__ */ jsx(ListHeader, { label: section.category }),
-                /* @__PURE__ */ jsx(List, { className: "kui-catalog__items", children: section.entries.map((entry) => /* @__PURE__ */ jsx(
-                  ListItem,
-                  {
-                    action: selectAction,
-                    itemId: entry.id,
-                    label: entry.name,
-                    trailing: catalogEntryTags(entry.tags),
-                    selected: active === entry.id,
-                    title: entry.description,
-                    multiline: true
-                  }
-                )) })
-              ] })),
-              secondarySections ? /* @__PURE__ */ jsxs("section", { class: "kui-catalog__group kui-catalog__group--secondary", children: [
-                secondarySections.collapsible ? /* @__PURE__ */ jsx(
-                  ListHeader,
-                  {
-                    label: secondarySections.label,
-                    toggle: true,
-                    expanded: Boolean(secondarySections.expanded),
-                    action: toggleSecondaryAction
-                  }
-                ) : /* @__PURE__ */ jsx(ListHeader, { label: secondarySections.label }),
-                !secondarySections.collapsible || secondarySections.expanded ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__secondary", "data-catalog-secondary": true, children: secondarySections.sections.map((section) => /* @__PURE__ */ jsxs("section", { class: "kui-catalog__secondary-group", children: [
-                  /* @__PURE__ */ jsx(Text, { variant: "h3", class: "kui-catalog__secondary-heading", children: section.category }),
-                  /* @__PURE__ */ jsx(List, { className: "kui-catalog__items", children: section.entries.map((entry) => /* @__PURE__ */ jsx(
-                    ListItem,
-                    {
-                      action: selectAction,
-                      itemId: entry.id,
-                      label: entry.name,
-                      trailing: catalogEntryTags(entry.tags),
-                      selected: active === entry.id,
-                      title: entry.description,
-                      multiline: true
-                    }
-                  )) })
-                ] })) }) : /* @__PURE__ */ jsx(Fragment, {})
-              ] }) : /* @__PURE__ */ jsx(Fragment, {}),
-              sidebarFooter ?? /* @__PURE__ */ jsx(Fragment, {})
-            ] })
+            brand,
+            sections,
+            active,
+            collapsed,
+            secondarySections,
+            footer: sidebarFooter,
+            selectAction,
+            toggleSidebarAction,
+            toggleSecondaryAction
           }
         ),
         /* @__PURE__ */ jsx(
-          Pane,
+          CatalogDetail,
           {
-            element: "article",
-            className: "kui-catalog__detail",
-            contentElement: "section",
-            contentLabel: `${name} preview`,
-            contentClassName: "kui-catalog__stage",
-            headerClassName: "kui-catalog__header",
-            header: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                Toolbar,
-                {
-                  label: `${name} header`,
-                  dividerSides: "",
-                  leading: /* @__PURE__ */ jsxs(Fragment, { children: [
-                    collapsed ? /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "data-action": toggleSidebarAction,
-                        "aria-label": `Expand ${brand.title} catalog`,
-                        children: /* @__PURE__ */ jsx(
-                          LucideIcon,
-                          {
-                            icon: PanelLeftOpen,
-                            name: "panel-left-open"
-                          }
-                        )
-                      }
-                    ) }) : /* @__PURE__ */ jsx(Fragment, {}),
-                    /* @__PURE__ */ jsx(
-                      ToolbarControlGroup,
-                      {
-                        appearance: "borderless",
-                        className: "kui-catalog__title",
-                        children: /* @__PURE__ */ jsx(Text, { variant: "h2", children: name })
-                      }
-                    )
-                  ] }),
-                  trailing: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__header-actions", children: [
-                    headerActions,
-                    theme ? /* @__PURE__ */ jsx(
-                      ToolbarControlGroup,
-                      {
-                        className: "kui-catalog__settings",
-                        label: "Catalog display",
-                        children: /* @__PURE__ */ jsxs(
-                          "button",
-                          {
-                            type: "button",
-                            "data-action": toggleThemeAction,
-                            "aria-label": `Use ${nextTheme} theme`,
-                            "data-theme-preview": theme,
-                            children: [
-                              nextTheme === "dark" ? /* @__PURE__ */ jsx(LucideIcon, { icon: Moon, name: "moon" }) : /* @__PURE__ */ jsx(LucideIcon, { icon: Sun, name: "sun" }),
-                              /* @__PURE__ */ jsx("span", { children: nextTheme === "dark" ? "Dark" : "Light" })
-                            ]
-                          }
-                        )
-                      }
-                    ) : /* @__PURE__ */ jsx(Fragment, {})
-                  ] })
-                }
-              ),
-              selected?.description ? /* @__PURE__ */ jsx(Text, { class: "kui-catalog__description kui-content-item", children: selected.description }) : /* @__PURE__ */ jsx(Fragment, {})
-            ] }),
-            footerClassName: "kui-catalog__footer",
-            footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-              status ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__status", children: status }) : /* @__PURE__ */ jsx(Fragment, {}),
-              /* @__PURE__ */ jsx(
-                Toolbar,
-                {
-                  label: `${name} resources`,
-                  dividerSides: "",
-                  leading: resources.length > 0 ? /* @__PURE__ */ jsx(
-                    "nav",
-                    {
-                      class: "kui-catalog__resources",
-                      "aria-label": `${name} resources`,
-                      children: /* @__PURE__ */ jsx(
-                        ToolbarControlGroup,
-                        {
-                          className: "kui-catalog__resource-group",
-                          label: `${name} resources`,
-                          children: resources.map((resource) => /* @__PURE__ */ jsxs(
-                            "a",
-                            {
-                              class: "kui-catalog__resource",
-                              href: resource.href,
-                              target: "_blank",
-                              rel: "noopener noreferrer",
-                              "aria-label": `${name}: ${resource.label} (opens in new tab)`,
-                              children: [
-                                /* @__PURE__ */ jsx(
-                                  LucideIcon,
-                                  {
-                                    icon: ExternalLink,
-                                    name: "external-link"
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx("span", { children: resource.label }),
-                                resource.detail ? /* @__PURE__ */ jsx("code", { children: resource.detail }) : /* @__PURE__ */ jsx(Fragment, {})
-                              ]
-                            }
-                          ))
-                        }
-                      )
-                    }
-                  ) : /* @__PURE__ */ jsx(Fragment, {}),
-                  trailing: related.length > 0 ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__related", "data-catalog-related": true, children: /* @__PURE__ */ jsx(
-                    ToolbarControlGroup,
-                    {
-                      single: true,
-                      className: "kui-catalog__related-group",
-                      label: "Related entries",
-                      children: /* @__PURE__ */ jsxs(
-                        "wa-dropdown",
-                        {
-                          class: "kui-catalog__related-menu",
-                          placement: "top-end",
-                          "data-key": `kui-catalog-related-${active}`,
-                          "data-morph-skip-children": true,
-                          children: [
-                            /* @__PURE__ */ jsx("wa-button", { slot: "trigger", appearance: "plain", "with-caret": true, children: /* @__PURE__ */ jsxs("span", { class: "kui-catalog__related-trigger", children: [
-                              /* @__PURE__ */ jsx(LucideIcon, { icon: Waypoints, name: "waypoints" }),
-                              /* @__PURE__ */ jsx("span", { class: "kui-catalog__related-label", children: "Components" })
-                            ] }) }),
-                            relatedMenuItems(related, selectAction)
-                          ]
-                        }
-                      )
-                    }
-                  ) }) : /* @__PURE__ */ jsx(Fragment, {})
-                }
-              )
-            ] }),
-            children: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__canvas", children: [
-              content,
-              geometryOverlay !== void 0 ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  class: "kui-catalog__geometry-overlay",
-                  "data-catalog-geometry-overlay": true,
-                  "data-morph-skip-children": true,
-                  "aria-hidden": "true"
-                }
-              ) : /* @__PURE__ */ jsx(Fragment, {})
-            ] })
+            brandTitle: brand.title,
+            active,
+            selected,
+            content,
+            collapsed,
+            theme,
+            headerActions,
+            status,
+            geometryOverlay,
+            stageRootAttributes,
+            selectAction,
+            toggleSidebarAction,
+            toggleThemeAction
           }
         )
       ]
     }
   );
 }
-var catalogExampleProtectedAttributes = /* @__PURE__ */ new Set([
+var protectedAttributes2 = /* @__PURE__ */ new Set([
   "data-catalog-example",
   "data-catalog-example-stack",
   "data-catalog-example-label",
@@ -325,14 +458,36 @@ function CatalogExample({
   label,
   note,
   align = "none",
+  viewport,
+  compactFallback,
   rootAttributes = {},
   className = "",
-  children
+  children,
+  slot
 }) {
   const safeRootAttributes = filterDataAttributes(
     rootAttributes,
-    catalogExampleProtectedAttributes
+    protectedAttributes2
   );
+  const viewportStyle = viewport?.tokens ? Object.entries(viewport.tokens).map(([name, value]) => `${name}:${value}`).join(";") : void 0;
+  const specimen = viewport ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-catalog-example__viewport",
+      "data-catalog-example-viewport": true,
+      "data-layout": viewport.layout,
+      "data-width": viewport.width,
+      "data-height": viewport.height,
+      "data-min-height": viewport.minHeight,
+      "data-frame": viewport.frame,
+      "data-surface": viewport.surface,
+      "data-overflow": viewport.overflow,
+      "data-responsive": viewport.responsive,
+      "data-shadow": viewport.shadow ? "true" : void 0,
+      style: viewportStyle,
+      children
+    }
+  ) : children;
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -340,29 +495,40 @@ function CatalogExample({
       class: `kui-catalog-example ${className}`.trim(),
       "data-catalog-example": true,
       "data-align": align,
+      slot,
       children: [
         label !== void 0 ? /* @__PURE__ */ jsx(
           ListHeader,
           {
             label,
+            width: "content",
             rootAttributes: { "data-catalog-example-label": "" }
           }
-        ) : /* @__PURE__ */ jsx(Fragment, {}),
-        note !== void 0 ? /* @__PURE__ */ jsx(Text, { class: "kui-catalog-example__note", "data-catalog-example-note": true, children: note }) : null,
-        children
+        ) : null,
+        note !== void 0 ? /* @__PURE__ */ jsx("p", { class: "kui-catalog-example__note", "data-catalog-example-note": true, children: note }) : null,
+        compactFallback !== void 0 ? /* @__PURE__ */ jsx("p", { class: "kui-catalog-example__compact-fallback", children: compactFallback }) : null,
+        specimen
       ]
     }
   );
 }
+var protectedAttributes3 = /* @__PURE__ */ new Set([
+  "data-catalog-example",
+  "data-catalog-example-stack",
+  "data-catalog-example-label",
+  "data-catalog-example-note",
+  "data-align"
+]);
 function CatalogExampleStack({
   label,
   rootAttributes = {},
   className = "",
-  children
+  children,
+  slot
 }) {
   const safeRootAttributes = filterDataAttributes(
     rootAttributes,
-    catalogExampleProtectedAttributes
+    protectedAttributes3
   );
   return /* @__PURE__ */ jsx(
     "section",
@@ -371,6 +537,7 @@ function CatalogExampleStack({
       class: `kui-catalog-example-stack ${className}`.trim(),
       "data-catalog-example-stack": true,
       "aria-label": label,
+      slot,
       children
     }
   );