@kerfjs/ui 5.0.0-beta.16 → 5.0.0-beta.18

package/dist/catalog.d.ts

@@ -18,6 +18,8 @@ interface CatalogEntry {
     id: string;
     name: string;
     description?: string;
+    /** Short metadata tags shown at the trailing edge of the sidebar row. */
+    tags?: readonly string[];
     resources?: readonly CatalogResource[];
     related?: readonly CatalogRelated[];
 }
@@ -64,6 +66,13 @@ interface CatalogProps {
     sidebarFooter?: SafeHtml;
     /** Status line content shown at the start of the detail footer. */
     status?: SafeHtml;
+    /**
+     * Whether to highlight transparent specimens' outer bounds and non-zero
+     * margins. Pass a boolean (rather than omitting the prop) when the active
+     * entry can switch between component and composition previews;
+     * `wireCatalogGeometryOverlay` keeps the overlay synchronized.
+     */
+    geometryOverlay?: boolean;
     selectAction?: string;
     toggleSidebarAction?: string;
     toggleThemeAction?: string;
@@ -79,7 +88,7 @@ interface CatalogProps {
  * `collapsed`, and `theme` signals and computes `content` from `active` in its own
  * render; wire the sidebar/collapse/theme actions with `wireCatalog`.
  */
-declare function Catalog({ brand, sections, active, content, collapsed, theme, headerActions, secondarySections, sidebarFooter, status, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, className, }: CatalogProps): SafeHtml;
+declare function Catalog({ brand, sections, active, content, collapsed, theme, headerActions, secondarySections, sidebarFooter, status, geometryOverlay, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, className, }: CatalogProps): SafeHtml;
 /**
  * How a {@link CatalogExample}'s content aligns its visible left edge with the
  * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):
@@ -106,7 +115,7 @@ interface CatalogExampleProps {
  * `--kui-catalog-example-align` custom property so a debug overlay can exclude it
  * from a specimen's measured margin.
  */
-declare function CatalogExample({ label, note, align, className, children }: CatalogExampleProps): SafeHtml;
+declare function CatalogExample({ label, note, align, className, children, }: CatalogExampleProps): SafeHtml;
 interface CatalogExampleStackProps {
     /** Accessible label for the stack region. */
     label?: string;
@@ -114,6 +123,6 @@ interface CatalogExampleStackProps {
     children?: SafeHtml | readonly SafeHtml[];
 }
 /** A vertically-stacked group of {@link CatalogExample}s with the catalog's example rhythm. */
-declare function CatalogExampleStack({ label, className, children }: CatalogExampleStackProps): SafeHtml;
+declare function CatalogExampleStack({ label, className, children, }: CatalogExampleStackProps): SafeHtml;
 
 export { Catalog, type CatalogBrand, type CatalogEntry, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogProps, type CatalogRelated, type CatalogResource, type CatalogSecondaryGroup, type CatalogSection };

package/dist/catalog.js

@@ -1,7 +1,7 @@
-import { ToolbarControlGroup } from './chunk-RNPGFQ33.js';
-import { Toolbar } from './chunk-DAFFDO33.js';
-import { ListHeader } from './chunk-5ATCDSQS.js';
-import { ListItem } from './chunk-L4OKFDJY.js';
+import { ToolbarControlGroup } from './chunk-ZK2G3VR5.js';
+import { Toolbar } from './chunk-7L6EHUMV.js';
+import { ListHeader } from './chunk-QIRXYKCE.js';
+import { ListItem } from './chunk-ELSJX4W7.js';
 
 
 
@@ -15,15 +15,23 @@ function findEntry(sections, id) {
   }
   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) if (!groups.includes(entry.group)) groups.push(entry.group);
+  for (const entry of related)
+    if (!groups.includes(entry.group)) groups.push(entry.group);
   const nodes = [];
   groups.forEach((group, index) => {
     if (index > 0) nodes.push(/* @__PURE__ */ jsx("wa-divider", {}));
     nodes.push(/* @__PURE__ */ jsx("small", { class: "kui-catalog__related-heading", children: group }));
     for (const entry of related) {
-      if (entry.group === group) nodes.push(/* @__PURE__ */ jsx("wa-dropdown-item", { "data-action": selectAction, "data-item-id": entry.id, children: entry.name }));
+      if (entry.group === group)
+        nodes.push(
+          /* @__PURE__ */ jsx("wa-dropdown-item", { "data-action": selectAction, "data-item-id": entry.id, children: entry.name })
+        );
     }
   });
   return nodes;
@@ -39,6 +47,7 @@ function Catalog({
   secondarySections,
   sidebarFooter,
   status,
+  geometryOverlay,
   selectAction = "catalog-select",
   toggleSidebarAction = "catalog-toggle-sidebar",
   toggleThemeAction = "catalog-toggle-theme",
@@ -50,95 +59,279 @@ function Catalog({
   const nextTheme = theme === "dark" ? "light" : "dark";
   const resources = selected?.resources ?? [];
   const related = selected?.related ?? [];
-  return /* @__PURE__ */ jsxs("main", { class: `kui-catalog ${className}`.trim(), "data-component": "catalog", "data-sidebar-collapsed": String(collapsed), children: [
-    /* @__PURE__ */ jsxs("aside", { class: "kui-catalog__sidebar kui-pane", "aria-label": `${brand.title} catalog`, children: [
-      /* @__PURE__ */ jsxs("header", { class: "kui-catalog__brand kui-pane__toolbar", children: [
-        /* @__PURE__ */ jsx(
-          Toolbar,
-          {
-            label: `${brand.title} catalog header`,
-            divider: false,
-            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("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("p", { class: "kui-catalog__subtitle", children: brand.subtitle }) : /* @__PURE__ */ jsx(Fragment, {})
-      ] }),
-      /* @__PURE__ */ jsxs("nav", { class: "kui-pane__content kui-content", "aria-label": `${brand.title} components`, 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: section.entries.map((entry) => /* @__PURE__ */ jsx(ListItem, { action: selectAction, itemId: entry.id, label: entry.name, selected: active === entry.id, title: entry.description, multiline: true })) })
-        ] })),
-        secondarySections ? /* @__PURE__ */ jsxs("section", { class: "kui-catalog__group kui-catalog__group--secondary", children: [
-          /* @__PURE__ */ jsx(ListHeader, { label: secondarySections.label, toggle: secondarySections.collapsible, expanded: secondarySections.collapsible ? Boolean(secondarySections.expanded) : void 0, action: secondarySections.collapsible ? toggleSecondaryAction : void 0 }),
-          !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("h3", { class: "kui-catalog__secondary-heading", children: section.category }),
-            /* @__PURE__ */ jsx("div", { class: "kui-catalog__items", children: section.entries.map((entry) => /* @__PURE__ */ jsx(ListItem, { action: selectAction, itemId: entry.id, label: entry.name, selected: active === entry.id, title: entry.description, multiline: true })) })
-          ] })) }) : /* @__PURE__ */ jsx(Fragment, {})
-        ] }) : /* @__PURE__ */ jsx(Fragment, {}),
-        sidebarFooter
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("article", { class: "kui-catalog__detail kui-pane", children: [
-      /* @__PURE__ */ jsxs("header", { class: "kui-catalog__header kui-pane__toolbar", children: [
-        /* @__PURE__ */ jsx(
-          Toolbar,
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      class: `kui-catalog ${className}`.trim(),
+      "data-component": "catalog",
+      "data-sidebar-collapsed": String(collapsed),
+      "data-geometry-overlay": geometryOverlay === void 0 ? void 0 : String(geometryOverlay),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "aside",
           {
-            label: `${name} header`,
-            divider: false,
-            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("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, {})
-            ] })
+            class: "kui-catalog__sidebar kui-pane",
+            "aria-label": `${brand.title} catalog`,
+            children: [
+              /* @__PURE__ */ jsxs("header", { class: "kui-catalog__brand kui-pane__toolbar", children: [
+                /* @__PURE__ */ jsx(
+                  Toolbar,
+                  {
+                    label: `${brand.title} catalog header`,
+                    divider: false,
+                    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("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("p", { class: "kui-catalog__subtitle", children: brand.subtitle }) : /* @__PURE__ */ jsx(Fragment, {})
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "nav",
+                {
+                  class: "kui-pane__content kui-content",
+                  "aria-label": `${brand.title} components`,
+                  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: 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: [
+                      /* @__PURE__ */ jsx(
+                        ListHeader,
+                        {
+                          label: secondarySections.label,
+                          toggle: secondarySections.collapsible,
+                          expanded: secondarySections.collapsible ? Boolean(secondarySections.expanded) : void 0,
+                          action: secondarySections.collapsible ? toggleSecondaryAction : void 0
+                        }
+                      ),
+                      !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("h3", { class: "kui-catalog__secondary-heading", children: section.category }),
+                        /* @__PURE__ */ jsx("div", { class: "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
+                  ]
+                }
+              )
+            ]
           }
         ),
-        selected?.description ? /* @__PURE__ */ jsx("p", { class: "kui-catalog__description kui-content-item", children: selected.description }) : /* @__PURE__ */ jsx(Fragment, {})
-      ] }),
-      /* @__PURE__ */ jsx("section", { class: "kui-catalog__stage kui-pane__content", "aria-label": `${name} preview`, children: /* @__PURE__ */ jsx("div", { class: "kui-catalog__canvas", children: content }) }),
-      /* @__PURE__ */ jsxs("footer", { class: "kui-catalog__footer kui-pane__footer", children: [
-        status ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__status", children: status }) : /* @__PURE__ */ jsx(Fragment, {}),
-        /* @__PURE__ */ jsx(
-          Toolbar,
-          {
-            label: `${name} resources`,
-            divider: false,
-            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: "Component" })
-              ] }) }),
-              relatedMenuItems(related, selectAction)
-            ] }) }) }) : /* @__PURE__ */ jsx(Fragment, {})
-          }
-        )
-      ] })
-    ] })
-  ] });
+        /* @__PURE__ */ jsxs("article", { class: "kui-catalog__detail kui-pane", children: [
+          /* @__PURE__ */ jsxs("header", { class: "kui-catalog__header kui-pane__toolbar", children: [
+            /* @__PURE__ */ jsx(
+              Toolbar,
+              {
+                label: `${name} header`,
+                divider: false,
+                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("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("p", { class: "kui-catalog__description kui-content-item", children: selected.description }) : /* @__PURE__ */ jsx(Fragment, {})
+          ] }),
+          /* @__PURE__ */ jsx(
+            "section",
+            {
+              class: "kui-catalog__stage kui-pane__content",
+              "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"
+                  }
+                ) : /* @__PURE__ */ jsx(Fragment, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs("footer", { class: "kui-catalog__footer kui-pane__footer", children: [
+            status ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__status", children: status }) : /* @__PURE__ */ jsx(Fragment, {}),
+            /* @__PURE__ */ jsx(
+              Toolbar,
+              {
+                label: `${name} resources`,
+                divider: false,
+                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: "Component" })
+                          ] }) }),
+                          relatedMenuItems(related, selectAction)
+                        ]
+                      }
+                    )
+                  }
+                ) }) : /* @__PURE__ */ jsx(Fragment, {})
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
-function CatalogExample({ label, note, align = "none", className = "", children }) {
-  return /* @__PURE__ */ jsxs("section", { class: `kui-catalog-example ${className}`.trim(), "data-catalog-example": true, "data-align": align, children: [
-    label !== void 0 ? /* @__PURE__ */ jsx(ListHeader, { label }) : /* @__PURE__ */ jsx(Fragment, {}),
-    note !== void 0 ? /* @__PURE__ */ jsx("p", { class: "kui-catalog-example__note", children: note }) : /* @__PURE__ */ jsx(Fragment, {}),
-    children
-  ] });
+function CatalogExample({
+  label,
+  note,
+  align = "none",
+  className = "",
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-catalog-example ${className}`.trim(),
+      "data-catalog-example": true,
+      "data-align": align,
+      children: [
+        label !== void 0 ? /* @__PURE__ */ jsx(ListHeader, { label }) : /* @__PURE__ */ jsx(Fragment, {}),
+        note !== void 0 ? /* @__PURE__ */ jsx("p", { class: "kui-catalog-example__note", children: note }) : /* @__PURE__ */ jsx(Fragment, {}),
+        children
+      ]
+    }
+  );
 }
-function CatalogExampleStack({ label, className = "", children }) {
-  return /* @__PURE__ */ jsx("div", { class: `kui-catalog-example-stack ${className}`.trim(), "data-catalog-example-stack": true, "aria-label": label, children });
+function CatalogExampleStack({
+  label,
+  className = "",
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-catalog-example-stack ${className}`.trim(),
+      "data-catalog-example-stack": true,
+      "aria-label": label,
+      children
+    }
+  );
 }
 
 export { Catalog, CatalogExample, CatalogExampleStack };

package/dist/catalog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/catalog.tsx"],"names":[],"mappings":"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","file":"catalog.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ExternalLink, Moon, PanelLeftClose, PanelLeftOpen, Sun, Waypoints } from 'lucide';\n\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** A reference link shown in the detail footer for the active entry. */\nexport interface CatalogResource {\n  label: string;\n  href: string;\n  /** Optional monospace detail (e.g. a file path) shown after the label. */\n  detail?: string;\n}\n\n/** A related entry offered in the detail footer's \"Related entries\" popup menu. */\nexport interface CatalogRelated {\n  id: string;\n  name: string;\n  /** Group heading in the menu, e.g. \"Uses\" / \"Used by\". */\n  group: string;\n}\n\nexport interface CatalogEntry {\n  id: string;\n  name: string;\n  description?: string;\n  resources?: readonly CatalogResource[];\n  related?: readonly CatalogRelated[];\n}\n\nexport interface CatalogSection {\n  category: string;\n  entries: readonly CatalogEntry[];\n}\n\n/**\n * A secondary group of sections shown below the primary sidebar sections with a\n * quieter \"ecosystem\" treatment (e.g. third-party components). Optionally\n * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s\n * `onToggleSecondary`.\n */\nexport interface CatalogSecondaryGroup {\n  label: string;\n  sections: readonly CatalogSection[];\n  /** When true, the group's label is a disclosure toggle controlling `expanded`. */\n  collapsible?: boolean;\n  /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */\n  expanded?: boolean;\n}\n\nexport interface CatalogBrand {\n  title: string;\n  subtitle?: string;\n  /** Logo image URL (rendered decorative). Omit for a text-only brand. */\n  logoUrl?: string;\n}\n\nexport interface CatalogProps {\n  brand: CatalogBrand;\n  sections: readonly CatalogSection[];\n  /** The controlled active entry id — the app owns this signal. */\n  active: string;\n  /** The rendered preview for the active entry; the app computes it from `active`. */\n  content: SafeHtml;\n  /** Whether the sidebar is collapsed (controlled). */\n  collapsed?: boolean;\n  /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */\n  theme?: 'light' | 'dark';\n  /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */\n  headerActions?: SafeHtml;\n  /** A secondary \"ecosystem\" group of sections below the primary category groups. */\n  secondarySections?: CatalogSecondaryGroup;\n  /** Extra sidebar content below the category groups (and the secondary group). */\n  sidebarFooter?: SafeHtml;\n  /** Status line content shown at the start of the detail footer. */\n  status?: SafeHtml;\n  selectAction?: string;\n  toggleSidebarAction?: string;\n  toggleThemeAction?: string;\n  /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n  toggleSecondaryAction?: string;\n  className?: string;\n}\n\nfunction findEntry(sections: readonly CatalogSection[], id: string): CatalogEntry | undefined {\n  for (const section of sections) {\n    for (const entry of section.entries) if (entry.id === id) return entry;\n  }\n  return undefined;\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(related: readonly CatalogRelated[], selectAction: string): SafeHtml[] {\n  const groups: string[] = [];\n  for (const entry of related) if (!groups.includes(entry.group)) groups.push(entry.group);\n  const nodes: SafeHtml[] = [];\n  groups.forEach((group, index) => {\n    if (index > 0) nodes.push(<wa-divider></wa-divider>);\n    nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n    for (const entry of related) {\n      if (entry.group === group) nodes.push(<wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>{entry.name}</wa-dropdown-item>);\n    }\n  });\n  return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n  brand,\n  sections,\n  active,\n  content,\n  collapsed = false,\n  theme,\n  headerActions,\n  secondarySections,\n  sidebarFooter,\n  status,\n  selectAction = 'catalog-select',\n  toggleSidebarAction = 'catalog-toggle-sidebar',\n  toggleThemeAction = 'catalog-toggle-theme',\n  toggleSecondaryAction = 'catalog-toggle-secondary',\n  className = '',\n}: CatalogProps) {\n  const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : undefined);\n  const name = selected?.name ?? '';\n  const nextTheme = theme === 'dark' ? 'light' : 'dark';\n  const resources = selected?.resources ?? [];\n  const related = selected?.related ?? [];\n\n  return <main class={`kui-catalog ${className}`.trim()} data-component=\"catalog\" data-sidebar-collapsed={String(collapsed)}>\n    <aside class=\"kui-catalog__sidebar kui-pane\" aria-label={`${brand.title} catalog`}>\n      <header class=\"kui-catalog__brand kui-pane__toolbar\">\n        <Toolbar\n          label={`${brand.title} catalog header`}\n          divider={false}\n          leading={<ToolbarControlGroup appearance=\"borderless\" className=\"kui-catalog__identity\">{brand.logoUrl ? <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" /> : <></>}<h1>{brand.title}</h1></ToolbarControlGroup>}\n          trailing={<ToolbarControlGroup appearance=\"borderless\" single><button type=\"button\" data-action={toggleSidebarAction} aria-label={`Collapse ${brand.title} catalog`}><LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" /></button></ToolbarControlGroup>}\n        />\n        {brand.subtitle ? <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p> : <></>}\n      </header>\n      <nav class=\"kui-pane__content kui-content\" aria-label={`${brand.title} components`}>\n        {sections.map((section) => <section class=\"kui-catalog__group\">\n          <ListHeader label={section.category} />\n          <div class=\"kui-catalog__items\">\n            {section.entries.map((entry) => <ListItem action={selectAction} itemId={entry.id} label={entry.name} selected={active === entry.id} title={entry.description} multiline />)}\n          </div>\n        </section>)}\n        {secondarySections ? <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n          <ListHeader label={secondarySections.label} toggle={secondarySections.collapsible} expanded={secondarySections.collapsible ? Boolean(secondarySections.expanded) : undefined} action={secondarySections.collapsible ? toggleSecondaryAction : undefined} />\n          {!secondarySections.collapsible || secondarySections.expanded\n            ? <div class=\"kui-catalog__secondary\" data-catalog-secondary>\n              {secondarySections.sections.map((section) => <section class=\"kui-catalog__secondary-group\">\n                <h3 class=\"kui-catalog__secondary-heading\">{section.category}</h3>\n                <div class=\"kui-catalog__items\">\n                  {section.entries.map((entry) => <ListItem action={selectAction} itemId={entry.id} label={entry.name} selected={active === entry.id} title={entry.description} multiline />)}\n                </div>\n              </section>)}\n            </div>\n            : <></>}\n        </section> : <></>}\n        {sidebarFooter}\n      </nav>\n    </aside>\n    <article class=\"kui-catalog__detail kui-pane\">\n      <header class=\"kui-catalog__header kui-pane__toolbar\">\n        <Toolbar\n          label={`${name} header`}\n          divider={false}\n          leading={<>{collapsed ? <ToolbarControlGroup appearance=\"borderless\" single><button type=\"button\" data-action={toggleSidebarAction} aria-label={`Expand ${brand.title} catalog`}><LucideIcon icon={PanelLeftOpen} name=\"panel-left-open\" /></button></ToolbarControlGroup> : <></>}<ToolbarControlGroup appearance=\"borderless\" className=\"kui-catalog__title\"><h2>{name}</h2></ToolbarControlGroup></>}\n          trailing={<div class=\"kui-catalog__header-actions\">{headerActions}{theme ? <ToolbarControlGroup className=\"kui-catalog__settings\" label=\"Catalog display\"><button type=\"button\" data-action={toggleThemeAction} aria-label={`Use ${nextTheme} theme`} data-theme-preview={theme}>{nextTheme === 'dark' ? <LucideIcon icon={Moon} name=\"moon\" /> : <LucideIcon icon={Sun} name=\"sun\" />}<span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span></button></ToolbarControlGroup> : <></>}</div>}\n        />\n        {selected?.description ? <p class=\"kui-catalog__description kui-content-item\">{selected.description}</p> : <></>}\n      </header>\n      <section class=\"kui-catalog__stage kui-pane__content\" aria-label={`${name} preview`}>\n        <div class=\"kui-catalog__canvas\">{content}</div>\n      </section>\n      <footer class=\"kui-catalog__footer kui-pane__footer\">\n        {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n        <Toolbar\n          label={`${name} resources`}\n          divider={false}\n          leading={resources.length > 0\n            ? <nav class=\"kui-catalog__resources\" aria-label={`${name} resources`}><ToolbarControlGroup className=\"kui-catalog__resource-group\" label={`${name} resources`}>{resources.map((resource) => <a class=\"kui-catalog__resource\" href={resource.href} target=\"_blank\" rel=\"noopener noreferrer\" aria-label={`${name}: ${resource.label} (opens in new tab)`}><LucideIcon icon={ExternalLink} name=\"external-link\" /><span>{resource.label}</span>{resource.detail ? <code>{resource.detail}</code> : <></>}</a>)}</ToolbarControlGroup></nav>\n            : <></>}\n          trailing={related.length > 0\n            ? <div class=\"kui-catalog__related\" data-catalog-related><ToolbarControlGroup single className=\"kui-catalog__related-group\" label=\"Related entries\"><wa-dropdown class=\"kui-catalog__related-menu\" placement=\"top-end\" data-key={`kui-catalog-related-${active}`} data-morph-skip-children><wa-button slot=\"trigger\" appearance=\"plain\" with-caret><span class=\"kui-catalog__related-trigger\"><LucideIcon icon={Waypoints} name=\"waypoints\" /><span class=\"kui-catalog__related-label\">Component</span></span></wa-button>{relatedMenuItems(related, selectAction)}</wa-dropdown></ToolbarControlGroup></div>\n            : <></>}\n        />\n      </footer>\n    </article>\n  </main>;\n}\n\n/**\n * How a {@link CatalogExample}'s content aligns its visible left edge with the\n * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):\n * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.\n * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.\n * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).\n */\nexport type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';\n\nexport interface CatalogExampleProps {\n  /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */\n  label?: string;\n  /** Optional explanatory note between the label and the specimen. */\n  note?: SafeHtml | string;\n  /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */\n  align?: CatalogExampleAlign;\n  className?: string;\n  children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * One labeled example in a catalog preview: a `ListHeader` label, an optional\n * note, and the specimen. `align` insets the specimen so its visible left edge\n * lines up with the label text, encoding the catalog's alignment rules as a\n * first-class prop instead of per-demo CSS. The inset is published as the\n * `--kui-catalog-example-align` custom property so a debug overlay can exclude it\n * from a specimen's measured margin.\n */\nexport function CatalogExample({ label, note, align = 'none', className = '', children }: CatalogExampleProps) {\n  return <section class={`kui-catalog-example ${className}`.trim()} data-catalog-example data-align={align}>\n    {label !== undefined ? <ListHeader label={label} /> : <></>}\n    {note !== undefined ? <p class=\"kui-catalog-example__note\">{note}</p> : <></>}\n    {children}\n  </section>;\n}\n\nexport interface CatalogExampleStackProps {\n  /** Accessible label for the stack region. */\n  label?: string;\n  className?: string;\n  children?: SafeHtml | readonly SafeHtml[];\n}\n\n/** A vertically-stacked group of {@link CatalogExample}s with the catalog's example rhythm. */\nexport function CatalogExampleStack({ label, className = '', children }: CatalogExampleStackProps) {\n  return <div class={`kui-catalog-example-stack ${className}`.trim()} data-catalog-example-stack aria-label={label}>{children}</div>;\n}\n"]}
+{"version":3,"sources":["../src/catalog.tsx"],"names":[],"mappings":"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","file":"catalog.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n  ExternalLink,\n  Moon,\n  PanelLeftClose,\n  PanelLeftOpen,\n  Sun,\n  Waypoints,\n} from 'lucide';\n\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** A reference link shown in the detail footer for the active entry. */\nexport interface CatalogResource {\n  label: string;\n  href: string;\n  /** Optional monospace detail (e.g. a file path) shown after the label. */\n  detail?: string;\n}\n\n/** A related entry offered in the detail footer's \"Related entries\" popup menu. */\nexport interface CatalogRelated {\n  id: string;\n  name: string;\n  /** Group heading in the menu, e.g. \"Uses\" / \"Used by\". */\n  group: string;\n}\n\nexport interface CatalogEntry {\n  id: string;\n  name: string;\n  description?: string;\n  /** Short metadata tags shown at the trailing edge of the sidebar row. */\n  tags?: readonly string[];\n  resources?: readonly CatalogResource[];\n  related?: readonly CatalogRelated[];\n}\n\nexport interface CatalogSection {\n  category: string;\n  entries: readonly CatalogEntry[];\n}\n\n/**\n * A secondary group of sections shown below the primary sidebar sections with a\n * quieter \"ecosystem\" treatment (e.g. third-party components). Optionally\n * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s\n * `onToggleSecondary`.\n */\nexport interface CatalogSecondaryGroup {\n  label: string;\n  sections: readonly CatalogSection[];\n  /** When true, the group's label is a disclosure toggle controlling `expanded`. */\n  collapsible?: boolean;\n  /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */\n  expanded?: boolean;\n}\n\nexport interface CatalogBrand {\n  title: string;\n  subtitle?: string;\n  /** Logo image URL (rendered decorative). Omit for a text-only brand. */\n  logoUrl?: string;\n}\n\nexport interface CatalogProps {\n  brand: CatalogBrand;\n  sections: readonly CatalogSection[];\n  /** The controlled active entry id — the app owns this signal. */\n  active: string;\n  /** The rendered preview for the active entry; the app computes it from `active`. */\n  content: SafeHtml;\n  /** Whether the sidebar is collapsed (controlled). */\n  collapsed?: boolean;\n  /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */\n  theme?: 'light' | 'dark';\n  /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */\n  headerActions?: SafeHtml;\n  /** A secondary \"ecosystem\" group of sections below the primary category groups. */\n  secondarySections?: CatalogSecondaryGroup;\n  /** Extra sidebar content below the category groups (and the secondary group). */\n  sidebarFooter?: SafeHtml;\n  /** Status line content shown at the start of the detail footer. */\n  status?: SafeHtml;\n  /**\n   * Whether to highlight transparent specimens' outer bounds and non-zero\n   * margins. Pass a boolean (rather than omitting the prop) when the active\n   * entry can switch between component and composition previews;\n   * `wireCatalogGeometryOverlay` keeps the overlay synchronized.\n   */\n  geometryOverlay?: boolean;\n  selectAction?: string;\n  toggleSidebarAction?: string;\n  toggleThemeAction?: string;\n  /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n  toggleSecondaryAction?: string;\n  className?: string;\n}\n\nfunction findEntry(\n  sections: readonly CatalogSection[],\n  id: string,\n): CatalogEntry | undefined {\n  for (const section of sections) {\n    for (const entry of section.entries) if (entry.id === id) return entry;\n  }\n  return undefined;\n}\n\nfunction catalogEntryTags(\n  tags: readonly string[] | undefined,\n): SafeHtml | undefined {\n  if (!tags?.length) return undefined;\n  return (\n    <span class=\"kui-catalog__tags\">\n      {tags.map((tag) => (\n        <span class=\"kui-catalog__tag\">{tag}</span>\n      ))}\n    </span>\n  );\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(\n  related: readonly CatalogRelated[],\n  selectAction: string,\n): SafeHtml[] {\n  const groups: string[] = [];\n  for (const entry of related)\n    if (!groups.includes(entry.group)) groups.push(entry.group);\n  const nodes: SafeHtml[] = [];\n  groups.forEach((group, index) => {\n    if (index > 0) nodes.push(<wa-divider></wa-divider>);\n    nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n    for (const entry of related) {\n      if (entry.group === group)\n        nodes.push(\n          <wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>\n            {entry.name}\n          </wa-dropdown-item>,\n        );\n    }\n  });\n  return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n  brand,\n  sections,\n  active,\n  content,\n  collapsed = false,\n  theme,\n  headerActions,\n  secondarySections,\n  sidebarFooter,\n  status,\n  geometryOverlay,\n  selectAction = 'catalog-select',\n  toggleSidebarAction = 'catalog-toggle-sidebar',\n  toggleThemeAction = 'catalog-toggle-theme',\n  toggleSecondaryAction = 'catalog-toggle-secondary',\n  className = '',\n}: CatalogProps) {\n  const selected =\n    findEntry(sections, active) ??\n    (secondarySections\n      ? findEntry(secondarySections.sections, active)\n      : undefined);\n  const name = selected?.name ?? '';\n  const nextTheme = theme === 'dark' ? 'light' : 'dark';\n  const resources = selected?.resources ?? [];\n  const related = selected?.related ?? [];\n\n  return (\n    <main\n      class={`kui-catalog ${className}`.trim()}\n      data-component=\"catalog\"\n      data-sidebar-collapsed={String(collapsed)}\n      data-geometry-overlay={\n        geometryOverlay === undefined ? undefined : String(geometryOverlay)\n      }\n    >\n      <aside\n        class=\"kui-catalog__sidebar kui-pane\"\n        aria-label={`${brand.title} catalog`}\n      >\n        <header class=\"kui-catalog__brand kui-pane__toolbar\">\n          <Toolbar\n            label={`${brand.title} catalog header`}\n            divider={false}\n            leading={\n              <ToolbarControlGroup\n                appearance=\"borderless\"\n                className=\"kui-catalog__identity\"\n              >\n                {brand.logoUrl ? (\n                  <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" />\n                ) : (\n                  <></>\n                )}\n                <h1>{brand.title}</h1>\n              </ToolbarControlGroup>\n            }\n            trailing={\n              <ToolbarControlGroup appearance=\"borderless\" single>\n                <button\n                  type=\"button\"\n                  data-action={toggleSidebarAction}\n                  aria-label={`Collapse ${brand.title} catalog`}\n                >\n                  <LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" />\n                </button>\n              </ToolbarControlGroup>\n            }\n          />\n          {brand.subtitle ? (\n            <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p>\n          ) : (\n            <></>\n          )}\n        </header>\n        <nav\n          class=\"kui-pane__content kui-content\"\n          aria-label={`${brand.title} components`}\n        >\n          {sections.map((section) => (\n            <section class=\"kui-catalog__group\">\n              <ListHeader label={section.category} />\n              <div class=\"kui-catalog__items\">\n                {section.entries.map((entry) => (\n                  <ListItem\n                    action={selectAction}\n                    itemId={entry.id}\n                    label={entry.name}\n                    trailing={catalogEntryTags(entry.tags)}\n                    selected={active === entry.id}\n                    title={entry.description}\n                    multiline\n                  />\n                ))}\n              </div>\n            </section>\n          ))}\n          {secondarySections ? (\n            <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n              <ListHeader\n                label={secondarySections.label}\n                toggle={secondarySections.collapsible}\n                expanded={\n                  secondarySections.collapsible\n                    ? Boolean(secondarySections.expanded)\n                    : undefined\n                }\n                action={\n                  secondarySections.collapsible\n                    ? toggleSecondaryAction\n                    : undefined\n                }\n              />\n              {!secondarySections.collapsible || secondarySections.expanded ? (\n                <div class=\"kui-catalog__secondary\" data-catalog-secondary>\n                  {secondarySections.sections.map((section) => (\n                    <section class=\"kui-catalog__secondary-group\">\n                      <h3 class=\"kui-catalog__secondary-heading\">\n                        {section.category}\n                      </h3>\n                      <div class=\"kui-catalog__items\">\n                        {section.entries.map((entry) => (\n                          <ListItem\n                            action={selectAction}\n                            itemId={entry.id}\n                            label={entry.name}\n                            trailing={catalogEntryTags(entry.tags)}\n                            selected={active === entry.id}\n                            title={entry.description}\n                            multiline\n                          />\n                        ))}\n                      </div>\n                    </section>\n                  ))}\n                </div>\n              ) : (\n                <></>\n              )}\n            </section>\n          ) : (\n            <></>\n          )}\n          {sidebarFooter}\n        </nav>\n      </aside>\n      <article class=\"kui-catalog__detail kui-pane\">\n        <header class=\"kui-catalog__header kui-pane__toolbar\">\n          <Toolbar\n            label={`${name} header`}\n            divider={false}\n            leading={\n              <>\n                {collapsed ? (\n                  <ToolbarControlGroup appearance=\"borderless\" single>\n                    <button\n                      type=\"button\"\n                      data-action={toggleSidebarAction}\n                      aria-label={`Expand ${brand.title} catalog`}\n                    >\n                      <LucideIcon icon={PanelLeftOpen} name=\"panel-left-open\" />\n                    </button>\n                  </ToolbarControlGroup>\n                ) : (\n                  <></>\n                )}\n                <ToolbarControlGroup\n                  appearance=\"borderless\"\n                  className=\"kui-catalog__title\"\n                >\n                  <h2>{name}</h2>\n                </ToolbarControlGroup>\n              </>\n            }\n            trailing={\n              <div class=\"kui-catalog__header-actions\">\n                {headerActions}\n                {theme ? (\n                  <ToolbarControlGroup\n                    className=\"kui-catalog__settings\"\n                    label=\"Catalog display\"\n                  >\n                    <button\n                      type=\"button\"\n                      data-action={toggleThemeAction}\n                      aria-label={`Use ${nextTheme} theme`}\n                      data-theme-preview={theme}\n                    >\n                      {nextTheme === 'dark' ? (\n                        <LucideIcon icon={Moon} name=\"moon\" />\n                      ) : (\n                        <LucideIcon icon={Sun} name=\"sun\" />\n                      )}\n                      <span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span>\n                    </button>\n                  </ToolbarControlGroup>\n                ) : (\n                  <></>\n                )}\n              </div>\n            }\n          />\n          {selected?.description ? (\n            <p class=\"kui-catalog__description kui-content-item\">\n              {selected.description}\n            </p>\n          ) : (\n            <></>\n          )}\n        </header>\n        <section\n          class=\"kui-catalog__stage kui-pane__content\"\n          aria-label={`${name} preview`}\n        >\n          <div class=\"kui-catalog__canvas\">\n            {content}\n            {geometryOverlay !== undefined ? (\n              <div\n                class=\"kui-catalog__geometry-overlay\"\n                data-catalog-geometry-overlay\n                data-morph-skip-children\n                aria-hidden=\"true\"\n              />\n            ) : (\n              <></>\n            )}\n          </div>\n        </section>\n        <footer class=\"kui-catalog__footer kui-pane__footer\">\n          {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n          <Toolbar\n            label={`${name} resources`}\n            divider={false}\n            leading={\n              resources.length > 0 ? (\n                <nav\n                  class=\"kui-catalog__resources\"\n                  aria-label={`${name} resources`}\n                >\n                  <ToolbarControlGroup\n                    className=\"kui-catalog__resource-group\"\n                    label={`${name} resources`}\n                  >\n                    {resources.map((resource) => (\n                      <a\n                        class=\"kui-catalog__resource\"\n                        href={resource.href}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        aria-label={`${name}: ${resource.label} (opens in new tab)`}\n                      >\n                        <LucideIcon icon={ExternalLink} name=\"external-link\" />\n                        <span>{resource.label}</span>\n                        {resource.detail ? (\n                          <code>{resource.detail}</code>\n                        ) : (\n                          <></>\n                        )}\n                      </a>\n                    ))}\n                  </ToolbarControlGroup>\n                </nav>\n              ) : (\n                <></>\n              )\n            }\n            trailing={\n              related.length > 0 ? (\n                <div class=\"kui-catalog__related\" data-catalog-related>\n                  <ToolbarControlGroup\n                    single\n                    className=\"kui-catalog__related-group\"\n                    label=\"Related entries\"\n                  >\n                    <wa-dropdown\n                      class=\"kui-catalog__related-menu\"\n                      placement=\"top-end\"\n                      data-key={`kui-catalog-related-${active}`}\n                      data-morph-skip-children\n                    >\n                      <wa-button slot=\"trigger\" appearance=\"plain\" with-caret>\n                        <span class=\"kui-catalog__related-trigger\">\n                          <LucideIcon icon={Waypoints} name=\"waypoints\" />\n                          <span class=\"kui-catalog__related-label\">\n                            Component\n                          </span>\n                        </span>\n                      </wa-button>\n                      {relatedMenuItems(related, selectAction)}\n                    </wa-dropdown>\n                  </ToolbarControlGroup>\n                </div>\n              ) : (\n                <></>\n              )\n            }\n          />\n        </footer>\n      </article>\n    </main>\n  );\n}\n\n/**\n * How a {@link CatalogExample}'s content aligns its visible left edge with the\n * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):\n * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.\n * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.\n * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).\n */\nexport type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';\n\nexport interface CatalogExampleProps {\n  /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */\n  label?: string;\n  /** Optional explanatory note between the label and the specimen. */\n  note?: SafeHtml | string;\n  /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */\n  align?: CatalogExampleAlign;\n  className?: string;\n  children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * One labeled example in a catalog preview: a `ListHeader` label, an optional\n * note, and the specimen. `align` insets the specimen so its visible left edge\n * lines up with the label text, encoding the catalog's alignment rules as a\n * first-class prop instead of per-demo CSS. The inset is published as the\n * `--kui-catalog-example-align` custom property so a debug overlay can exclude it\n * from a specimen's measured margin.\n */\nexport function CatalogExample({\n  label,\n  note,\n  align = 'none',\n  className = '',\n  children,\n}: CatalogExampleProps) {\n  return (\n    <section\n      class={`kui-catalog-example ${className}`.trim()}\n      data-catalog-example\n      data-align={align}\n    >\n      {label !== undefined ? <ListHeader label={label} /> : <></>}\n      {note !== undefined ? (\n        <p class=\"kui-catalog-example__note\">{note}</p>\n      ) : (\n        <></>\n      )}\n      {children}\n    </section>\n  );\n}\n\nexport interface CatalogExampleStackProps {\n  /** Accessible label for the stack region. */\n  label?: string;\n  className?: string;\n  children?: SafeHtml | readonly SafeHtml[];\n}\n\n/** A vertically-stacked group of {@link CatalogExample}s with the catalog's example rhythm. */\nexport function CatalogExampleStack({\n  label,\n  className = '',\n  children,\n}: CatalogExampleStackProps) {\n  return (\n    <div\n      class={`kui-catalog-example-stack ${className}`.trim()}\n      data-catalog-example-stack\n      aria-label={label}\n    >\n      {children}\n    </div>\n  );\n}\n"]}