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

package/dist/catalog.js

@@ -1,12 +1,13 @@
-import { ToolbarControlGroup } from './chunk-ZK2G3VR5.js';
+import { Pane } from './chunk-JRKSK2HX.js';
 import { Toolbar } from './chunk-7L6EHUMV.js';
-import { ListHeader } from './chunk-QIRXYKCE.js';
+import { ToolbarControlGroup } from './chunk-5VTB2BKP.js';
+import { ListHeader } from './chunk-DSNIYOZ3.js';
 import { ListItem } from './chunk-ELSJX4W7.js';
-
+import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 
 
 import { LucideIcon } from './chunk-W2FK7ZNY.js';
-import { PanelLeftClose, Moon, Sun, PanelLeftOpen, Waypoints, ExternalLink } from 'lucide';
+import { PanelLeftClose, Waypoints, ExternalLink, Moon, Sun, PanelLeftOpen } from 'lucide';
 import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
 
 function findEntry(sections, id) {
@@ -67,246 +68,268 @@ function Catalog({
       "data-sidebar-collapsed": String(collapsed),
       "data-geometry-overlay": geometryOverlay === void 0 ? void 0 : String(geometryOverlay),
       children: [
-        /* @__PURE__ */ jsxs(
-          "aside",
+        /* @__PURE__ */ jsx(
+          Pane,
           {
-            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,
+            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`,
+                  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, {})
+            ] }),
+            children: /* @__PURE__ */ jsxs(Fragment, { 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,
                   {
-                    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(
+                    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("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 ?? /* @__PURE__ */ jsx(Fragment, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Pane,
+          {
+            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`,
+                  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": `Collapse ${brand.title} catalog`,
-                        children: /* @__PURE__ */ jsx(LucideIcon, { icon: PanelLeftClose, name: "panel-left-close" })
+                        "aria-label": `Expand ${brand.title} catalog`,
+                        children: /* @__PURE__ */ jsx(
+                          LucideIcon,
+                          {
+                            icon: PanelLeftOpen,
+                            name: "panel-left-open"
+                          }
+                        )
                       }
-                    ) })
-                  }
-                ),
-                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,
+                    ) }) : /* @__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",
                           {
-                            action: selectAction,
-                            itemId: entry.id,
-                            label: entry.name,
-                            trailing: catalogEntryTags(entry.tags),
-                            selected: active === entry.id,
-                            title: entry.description,
-                            multiline: true
+                            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, {})
-                    ] }) : /* @__PURE__ */ jsx(Fragment, {}),
-                    sidebarFooter
-                  ]
+                        )
+                      }
+                    ) : /* @__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,
+              ),
+              selected?.description ? /* @__PURE__ */ jsx("p", { 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`,
+                  divider: false,
+                  leading: resources.length > 0 ? /* @__PURE__ */ jsx(
+                    "nav",
                     {
-                      appearance: "borderless",
-                      className: "kui-catalog__title",
-                      children: /* @__PURE__ */ jsx("h2", { children: name })
+                      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, {})
+                              ]
+                            }
+                          ))
+                        }
+                      )
                     }
-                  )
-                ] }),
-                trailing: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__header-actions", children: [
-                  headerActions,
-                  theme ? /* @__PURE__ */ jsx(
+                  ) : /* @__PURE__ */ jsx(Fragment, {}),
+                  trailing: related.length > 0 ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__related", "data-catalog-related": true, children: /* @__PURE__ */ jsx(
                     ToolbarControlGroup,
                     {
-                      className: "kui-catalog__settings",
-                      label: "Catalog display",
+                      single: true,
+                      className: "kui-catalog__related-group",
+                      label: "Related entries",
                       children: /* @__PURE__ */ jsxs(
-                        "button",
+                        "wa-dropdown",
                         {
-                          type: "button",
-                          "data-action": toggleThemeAction,
-                          "aria-label": `Use ${nextTheme} theme`,
-                          "data-theme-preview": theme,
+                          class: "kui-catalog__related-menu",
+                          placement: "top-end",
+                          "data-key": `kui-catalog-related-${active}`,
+                          "data-morph-skip-children": true,
                           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("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, {})
-                ] })
-              }
-            ),
-            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, {})
-              }
-            )
-          ] })
-        ] })
+                  ) }) : /* @__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, {})
+            ] })
+          }
+        )
       ]
     }
   );
 }
+var catalogExampleProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-catalog-example",
+  "data-catalog-example-stack",
+  "data-align"
+]);
 function CatalogExample({
   label,
   note,
   align = "none",
+  rootAttributes = {},
   className = "",
   children
 }) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    catalogExampleProtectedAttributes
+  );
   return /* @__PURE__ */ jsxs(
     "section",
     {
+      ...safeRootAttributes,
       class: `kui-catalog-example ${className}`.trim(),
       "data-catalog-example": true,
       "data-align": align,
@@ -320,12 +343,18 @@ function CatalogExample({
 }
 function CatalogExampleStack({
   label,
+  rootAttributes = {},
   className = "",
   children
 }) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    catalogExampleProtectedAttributes
+  );
   return /* @__PURE__ */ jsx(
-    "div",
+    "section",
     {
+      ...safeRootAttributes,
       class: `kui-catalog-example-stack ${className}`.trim(),
       "data-catalog-example-stack": true,
       "aria-label": label,