@kerfjs/ui 5.0.0-beta.53 → 5.0.0-beta.55

package/dist/catalog.js

@@ -1,49 +1,67 @@
-import { ToolbarControlGroup, ToolbarActionLink } from './chunk-ZIYOJFZD.js';
-import { Toolbar } from './chunk-MTM43SJO.js';
+import { Workbench } from './chunk-EAX2GSS4.js';
+
+import { Row } from './chunk-5I22LMCV.js';
+
 import { ListItem } from './chunk-GUIHMIT2.js';
 import { List } from './chunk-3NBL3OUQ.js';
+
 import { ToolbarText } from './chunk-TZ5IHWB2.js';
-import { Pane } from './chunk-7GUQYHKA.js';
+import { PopupMenu } from './chunk-4BIMLITI.js';
 
 
-import { ListHeader } from './chunk-KPNTVB7A.js';
+import { ListHeader } from './chunk-R754MHXX.js';
+import { Text } from './chunk-24PHKUR3.js';
+import { ListInsetText } from './chunk-5OLVUEND.js';
 
 
-import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 
+import { Toolbar } from './chunk-MTM43SJO.js';
+import { ToolbarControlGroup, ToolbarActionLink } from './chunk-ZIYOJFZD.js';
+
+import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 
 
 import { LucideIcon } from './chunk-4R777DUZ.js';
-import { PanelLeftClose, Moon, Sun, PanelLeftOpen, Waypoints, ExternalLink } from 'lucide';
-import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+import { Moon, Sun, Waypoints, ExternalLink } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
 function relatedMenuItems(related, selectAction) {
   const groups = [];
   for (const entry of related)
     if (!groups.includes(entry.group)) groups.push(entry.group);
-  const nodes = [];
+  const items = [];
   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 (index > 0) items.push({ kind: "divider" });
+    items.push({ kind: "heading", label: 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 })
-        );
-    }
+        items.push({
+          label: entry.name,
+          action: selectAction,
+          attributes: { "data-item-id": entry.id }
+        });
   });
-  return nodes;
+  return items;
 }
 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,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    status ? /* @__PURE__ */ jsx(
+      Row,
+      {
+        hAlign: "space-between",
+        vAlign: "baseline",
+        gap: "xs",
+        wrap: true,
+        textInsets: "trl",
+        children: status
+      }
+    ) : null,
     /* @__PURE__ */ jsx(
       Toolbar,
       {
@@ -80,20 +98,14 @@ function CatalogResourceFooter({
             menuInset: "compact",
             size: "compact",
             label: "Related entries",
-            children: /* @__PURE__ */ jsxs(
-              "wa-dropdown",
+            children: /* @__PURE__ */ jsx(
+              PopupMenu,
               {
+                text: "Components",
+                icon: /* @__PURE__ */ jsx(LucideIcon, { icon: Waypoints, name: "waypoints" }),
                 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)
-                ]
+                items: relatedMenuItems(related, selectAction),
+                rootAttributes: { "data-catalog-related": "" }
               }
             )
           }
@@ -102,6 +114,99 @@ function CatalogResourceFooter({
     )
   ] });
 }
+function CatalogSectionEntries({
+  section,
+  active,
+  selectAction
+}) {
+  return /* @__PURE__ */ jsxs(List, { rootAttributes: { "data-catalog-section": section.category }, children: [
+    /* @__PURE__ */ jsx(ListHeader, { label: section.category }),
+    /* @__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 CatalogSecondarySections({
+  group,
+  active,
+  selectAction,
+  toggleAction
+}) {
+  const open = !group.collapsible || Boolean(group.expanded);
+  return /* @__PURE__ */ jsxs(List, { dividerSides: "t", controlInsets: "t", children: [
+    group.collapsible ? /* @__PURE__ */ jsx(
+      ListHeader,
+      {
+        label: group.label,
+        toggle: true,
+        expanded: open,
+        action: toggleAction
+      }
+    ) : /* @__PURE__ */ jsx(ListHeader, { label: group.label }),
+    open ? /* @__PURE__ */ jsx(List, { gap: "m", rootAttributes: { "data-catalog-secondary": "" }, children: group.sections.map((section) => /* @__PURE__ */ jsx(
+      CatalogSectionEntries,
+      {
+        section,
+        active,
+        selectAction
+      }
+    )) }) : null
+  ] });
+}
+function CatalogSectionList({
+  sections,
+  active,
+  selectAction
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => /* @__PURE__ */ jsx(
+    CatalogSectionEntries,
+    {
+      section,
+      active,
+      selectAction
+    }
+  )) });
+}
+function CatalogSidebar({
+  brand,
+  sections,
+  active,
+  secondarySections,
+  footer,
+  selectAction,
+  toggleSecondaryAction
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": `${brand.title} components`, children: /* @__PURE__ */ jsxs(List, { gap: "m", controlInsets: "b", children: [
+    brand.subtitle ? /* @__PURE__ */ jsx(ListInsetText, { sides: "rl", children: /* @__PURE__ */ jsx(Text, { variant: "span", size: "compact", tone: "quiet", children: brand.subtitle }) }) : null,
+    /* @__PURE__ */ jsx(
+      CatalogSectionList,
+      {
+        sections,
+        active,
+        selectAction
+      }
+    ),
+    secondarySections ? /* @__PURE__ */ jsx(
+      CatalogSecondarySections,
+      {
+        group: secondarySections,
+        active,
+        selectAction,
+        toggleAction: toggleSecondaryAction
+      }
+    ) : null,
+    footer
+  ] }) });
+}
 var protectedAttributes = /* @__PURE__ */ new Set(["data-catalog-stage"]);
 function CatalogStage({
   name,
@@ -135,51 +240,82 @@ function CatalogStage({
     }
   );
 }
-function CatalogDetail({
-  brandTitle,
+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({
+  id = "kui-catalog",
+  brand,
+  sections,
   active,
-  selected,
   content,
-  collapsed,
+  collapsed = false,
   theme,
   headerActions,
+  secondarySections,
+  sidebarFooter,
   status,
   geometryOverlay,
   stageRootAttributes,
-  selectAction,
-  toggleSidebarAction,
-  toggleThemeAction
+  selectAction = "catalog-select",
+  toggleSidebarAction = "catalog-toggle-sidebar",
+  toggleThemeAction = "catalog-toggle-theme",
+  toggleSecondaryAction = "catalog-toggle-secondary",
+  headerPlacement = "fixed",
+  footerPlacement = "fixed",
+  className = "",
+  slot
 }) {
+  const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : void 0);
   const name = selected?.name ?? "";
   const nextTheme = theme === "dark" ? "light" : "dark";
-  return /* @__PURE__ */ jsx("article", { class: "kui-catalog__detail", children: /* @__PURE__ */ jsx(
-    Pane,
+  const catalogName = `${brand.title} catalog`;
+  return /* @__PURE__ */ jsx(
+    "main",
     {
-      contentClassName: "kui-catalog__detail-preview",
-      header: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__header", children: [
-        /* @__PURE__ */ jsx(
-          Toolbar,
-          {
+      class: `kui-catalog ${className}`.trim(),
+      "data-component": "catalog",
+      "data-sidebar-collapsed": String(collapsed),
+      "data-geometry-overlay": geometryOverlay === void 0 ? void 0 : String(geometryOverlay),
+      slot,
+      children: /* @__PURE__ */ jsx(
+        Workbench,
+        {
+          id,
+          label: catalogName,
+          leftRail: {
+            label: catalogName,
+            size: 288,
+            collapsed,
+            toolbar: {
+              label: `${catalogName} header`,
+              title: /* @__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 })
+              ] }),
+              toggle: { action: toggleSidebarAction, name: catalogName }
+            },
+            content: /* @__PURE__ */ jsx(
+              CatalogSidebar,
+              {
+                brand,
+                sections,
+                active,
+                secondarySections,
+                footer: sidebarFooter,
+                selectAction,
+                toggleSecondaryAction
+              }
+            )
+          },
+          mainToolbar: {
             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 })
-            ] }),
+            // The entry title stays whole; actions wrap below it when narrow.
+            responsive: "wrap",
+            title: /* @__PURE__ */ jsx(ToolbarText, { text: name, size: "xlarge", headingLevel: 2 }),
             trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
               headerActions,
               theme ? /* @__PURE__ */ jsx(
@@ -205,248 +341,47 @@ function CatalogDetail({
                 }
               ) : 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",
+          },
+          mainFooter: /* @__PURE__ */ jsx(
+            CatalogResourceFooter,
             {
-              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
-              ]
+              name,
+              resources: selected?.resources ?? [],
+              related: selected?.related ?? [],
+              status,
+              selectAction
             }
+          ),
+          mainHeaderPlacement: headerPlacement,
+          mainFooterPlacement: footerPlacement,
+          main: (
+            // The description is supporting copy, so it scrolls with the
+            // preview rather than pinning under the toolbar.
+            /* @__PURE__ */ jsxs(List, { flex: true, children: [
+              selected?.description ? /* @__PURE__ */ jsx(
+                ListInsetText,
+                {
+                  sides: "trbl",
+                  rootAttributes: { "data-catalog-description": "" },
+                  children: /* @__PURE__ */ jsx(Text, { variant: "span", children: selected.description })
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                CatalogStage,
+                {
+                  name,
+                  content,
+                  geometryOverlay,
+                  rootAttributes: stageRootAttributes
+                }
+              )
+            ] })
           )
         }
       )
     }
   );
 }
-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,
-  active,
-  content,
-  collapsed = false,
-  theme,
-  headerActions,
-  secondarySections,
-  sidebarFooter,
-  status,
-  geometryOverlay,
-  stageRootAttributes,
-  selectAction = "catalog-select",
-  toggleSidebarAction = "catalog-toggle-sidebar",
-  toggleThemeAction = "catalog-toggle-theme",
-  toggleSecondaryAction = "catalog-toggle-secondary",
-  className = "",
-  slot
-}) {
-  const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : void 0);
-  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),
-      slot,
-      children: [
-        /* @__PURE__ */ jsx(
-          CatalogSidebar,
-          {
-            brand,
-            sections,
-            active,
-            collapsed,
-            secondarySections,
-            footer: sidebarFooter,
-            selectAction,
-            toggleSidebarAction,
-            toggleSecondaryAction
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          CatalogDetail,
-          {
-            brandTitle: brand.title,
-            active,
-            selected,
-            content,
-            collapsed,
-            theme,
-            headerActions,
-            status,
-            geometryOverlay,
-            stageRootAttributes,
-            selectAction,
-            toggleSidebarAction,
-            toggleThemeAction
-          }
-        )
-      ]
-    }
-  );
-}
 var protectedAttributes2 = /* @__PURE__ */ new Set([
   "data-catalog-example",
   "data-catalog-example-stack",
@@ -505,8 +440,16 @@ function CatalogExample({
             rootAttributes: { "data-catalog-example-label": "" }
           }
         ) : 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,
+        note !== void 0 ? /* @__PURE__ */ jsx(
+          ListInsetText,
+          {
+            sides: "rl",
+            className: "kui-catalog-example__note",
+            rootAttributes: { "data-catalog-example-note": "" },
+            children: /* @__PURE__ */ jsx(Text, { variant: "span", size: "compact", tone: "quiet", children: note })
+          }
+        ) : null,
+        compactFallback !== void 0 ? /* @__PURE__ */ jsx(Text, { tone: "quiet", className: "kui-catalog-example__compact-fallback", children: compactFallback }) : null,
         specimen
       ]
     }