@kerfjs/ui 5.0.0-beta.24 → 5.0.0-beta.26

package/analyzer/index.mjs

@@ -30,8 +30,22 @@ export const UI_ANALYSIS_RULES = Object.freeze({
   'KUI-L007': { severity: 'error', title: 'Nested scroll owners' },
   'KUI-L008': { severity: 'review', title: 'Dynamic class requires review' },
   'KUI-L009': { severity: 'error', title: 'Stylesheet could not be parsed' },
+  'KUI-L010': {
+    severity: 'error',
+    title: 'Private Kerf descendant override',
+  },
+  'KUI-L011': { severity: 'error', title: 'Uncataloged shadow part override' },
+  'KUI-L012': { severity: 'error', title: 'Private Kerf token assignment' },
 });
 
+const adoptionRules = new Set([
+  'KUI-L001',
+  'KUI-L002',
+  'KUI-L010',
+  'KUI-L011',
+  'KUI-L012',
+]);
+
 const sourceExtensions = new Set(['.tsx', '.jsx']);
 const spacingProperties = /^(?:margin|padding|gap|inset)(?:-|$)/;
 const dimensionProperties =
@@ -80,11 +94,11 @@ function location(file, node, source) {
   };
 }
 
-function diagnostic(ruleId, at, message, evidence, chain) {
+function diagnostic(ruleId, at, message, evidence, chain, adoption = false) {
   const rule = UI_ANALYSIS_RULES[ruleId];
   return {
     ruleId,
-    severity: rule.severity,
+    severity: adoption && adoptionRules.has(ruleId) ? 'review' : rule.severity,
     message,
     location: at,
     evidence,
@@ -187,6 +201,7 @@ async function loadCatalogs(profileResult) {
 function catalogFacts(entries) {
   const publicClasses = new Set();
   const publicTokens = new Set();
+  const publicParts = new Map();
   const classEntries = new Map();
   const exportEntries = new Map();
   for (const entry of entries) {
@@ -201,8 +216,19 @@ function catalogFacts(entries) {
     }
     for (const token of entry.boundaries?.publicTokens ?? [])
       publicTokens.add(token);
+    for (const part of entry.boundaries?.publicParts ?? []) {
+      const roots = publicParts.get(part) ?? new Set();
+      if (entry.boundaries?.rootClass) roots.add(entry.boundaries.rootClass);
+      publicParts.set(part, roots);
+    }
   }
-  return { publicClasses, publicTokens, classEntries, exportEntries };
+  return {
+    publicClasses,
+    publicTokens,
+    publicParts,
+    classEntries,
+    exportEntries,
+  };
 }
 
 function spacingValues(value) {
@@ -214,7 +240,18 @@ function spacingValues(value) {
   return results;
 }
 
-async function inspectCss(file, source, facts, diagnostics, cssFacts) {
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+async function inspectCss(
+  file,
+  source,
+  facts,
+  diagnostics,
+  cssFacts,
+  adoption = false,
+) {
   let root;
   try {
     root = postcss.parse(source, { from: file });
@@ -232,14 +269,69 @@ async function inspectCss(file, source, facts, diagnostics, cssFacts) {
     const classes = [
       ...rule.selector.matchAll(/\.([_a-zA-Z]+[_a-zA-Z0-9-]*)/g),
     ].map((match) => match[1]);
+    const publicRootPattern = [...facts.publicClasses]
+      .map(
+        (className) => `\\.${className.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`,
+      )
+      .join('|');
+    const privateDescendants = new Set();
+    if (publicRootPattern)
+      for (const selector of rule.selectors ?? [rule.selector]) {
+        const rootMatch = new RegExp(
+          `(?:${publicRootPattern})(?:[.#:[\\w-]|\\s)*(?:>|\\s)`,
+        ).exec(selector);
+        if (!rootMatch) continue;
+        const descendant = selector.slice(
+          rootMatch.index + rootMatch[0].length,
+        );
+        for (const match of descendant.matchAll(/\.(kui-[\w-]+)/g))
+          if (!facts.publicClasses.has(match[1]))
+            privateDescendants.add(match[1]);
+      }
     for (const className of classes) {
-      if (className.startsWith('kui-') && !facts.publicClasses.has(className))
+      if (privateDescendants.has(className))
+        diagnostics.push(
+          diagnostic(
+            'KUI-L010',
+            location(file, rule),
+            `.${className} is a private Kerf descendant; prefer the owning component's prop or variant, or catalog a deliberate public extension point.`,
+            { selector: rule.selector, className },
+            undefined,
+            adoption,
+          ),
+        );
+      else if (
+        className.startsWith('kui-') &&
+        !facts.publicClasses.has(className)
+      )
         diagnostics.push(
           diagnostic(
             'KUI-L001',
             location(file, rule),
-            `.${className} is not a cataloged public Kerf class.`,
+            `.${className} is not a cataloged public Kerf class; prefer a component prop or variant, or catalog the extension point.`,
             { selector: rule.selector, className },
+            undefined,
+            adoption,
+          ),
+        );
+    }
+    for (const match of rule.selector.matchAll(/::part\(\s*([\w-]+)\s*\)/g)) {
+      const part = match[1];
+      const roots = facts.publicParts.get(part) ?? new Set();
+      const allowed = [...roots].some((className) =>
+        new RegExp(`\\.${escapeRegExp(className)}(?:[^\\w-]|$)`).test(
+          rule.selector.slice(0, match.index),
+        ),
+      );
+      if (!allowed)
+        diagnostics.push(
+          diagnostic(
+            'KUI-L011',
+            location(file, rule),
+            `::part(${part}) is not a cataloged extension point; prefer the component's prop or variant, or add ${part} to boundaries.publicParts.`,
+            { selector: rule.selector, part },
+            undefined,
+            adoption,
           ),
         );
     }
@@ -250,15 +342,21 @@ async function inspectCss(file, source, facts, diagnostics, cssFacts) {
         ...(decl.value.match(/--kui-[a-z0-9-]+/g) ?? []),
       ];
       for (const token of new Set(tokens))
-        if (!facts.publicTokens.has(token))
+        if (!facts.publicTokens.has(token)) {
+          const assignment = decl.prop === token;
           diagnostics.push(
             diagnostic(
-              'KUI-L002',
+              assignment ? 'KUI-L012' : 'KUI-L002',
               at,
-              `${token} is not a cataloged public Kerf token.`,
+              assignment
+                ? `${token} has no public configuration contract; prefer the component's prop or variant, or catalog the token explicitly.`
+                : `${token} is not a cataloged public Kerf token; prefer a documented token or component configuration.`,
               { property: decl.prop, value: decl.value, token },
+              undefined,
+              adoption,
             ),
           );
+        }
       if (
         spacingProperties.test(decl.prop) &&
         !/var\(|calc\(|remify\(/.test(decl.value)
@@ -439,6 +537,7 @@ export async function analyzeUiProject({
   root: requestedRoot = process.cwd(),
   paths,
   knownRules = [],
+  adoption = false,
   profile: packageProfile = resolve(
     import.meta.dirname,
     '../ai/application-ui-profile.defaults.json',
@@ -538,7 +637,14 @@ export async function analyzeUiProject({
   for (const file of files.filter((item) => item.endsWith('.css'))) {
     const context = contexts.get(file);
     const fileFacts = new Map();
-    await inspectCss(file, contents.get(file), context.facts, [], fileFacts);
+    await inspectCss(
+      file,
+      contents.get(file),
+      context.facts,
+      [],
+      fileFacts,
+      adoption,
+    );
     styleFacts.set(file, fileFacts);
   }
   const styleConsumers = new Map(
@@ -572,6 +678,7 @@ export async function analyzeUiProject({
         context.facts,
         fileDiagnostics,
         new Map(),
+        adoption,
       );
       recordDiagnostics(fileDiagnostics, context);
     }

package/dist/app-tab.d.ts

@@ -8,6 +8,8 @@ type AppTabRootAttributes = Readonly<Record<`data-${string}`, string | undefined
     'data-tab-dragging'?: never;
     'data-tab-drop-position'?: never;
 }>;
+type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';
+type AppTabSize = 'default' | 'compact';
 interface AppTabProps {
     id: string;
     name: string;
@@ -16,6 +18,12 @@ interface AppTabProps {
     draggable?: boolean;
     leading?: SafeHtml;
     trailing?: SafeHtml;
+    /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */
+    presentation?: AppTabPresentation;
+    /** Compact tabs use the 32px application-rail height. */
+    size?: AppTabSize;
+    /** Maximum visible label width in CSS pixels before ellipsis. */
+    labelMaxWidth?: number;
     /** Decorative dormant content for the close button. Must not contain interactive descendants. */
     closeIcon?: SafeHtml;
     selectAction?: string;
@@ -25,6 +33,6 @@ interface AppTabProps {
     placeholder?: boolean;
     rootAttributes?: AppTabRootAttributes;
 }
-declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, closeIcon, selectAction, closeAction, className, placeholder, rootAttributes, }: AppTabProps): SafeHtml;
+declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, presentation, size, labelMaxWidth, closeIcon, selectAction, closeAction, className, placeholder, rootAttributes, }: AppTabProps): SafeHtml;
 
-export { AppTab, type AppTabProps };
+export { AppTab, type AppTabPresentation, type AppTabProps, type AppTabSize };

package/dist/app-tab.js

@@ -1,4 +1,4 @@
-export { AppTab } from './chunk-Y45PPBDV.js';
+export { AppTab } from './chunk-OT6RPYAP.js';
 
 
 

package/dist/browser/list-action-row.js

@@ -1,4 +1,5 @@
 import '../styles/foundation.css';
+import '../styles/loading-spinner.css';
 import '../styles/skeleton.css';
 import '../styles/list-action-row.css';
 export * from '../list-action-row.js';

package/dist/browser/list-item.js

@@ -1,4 +1,5 @@
 import '../styles/foundation.css';
+import '../styles/loading-spinner.css';
 import '../styles/skeleton.css';
 import '../styles/list-item.css';
 export * from '../list-item.js';

package/dist/browser/surface-scaffold.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/surface-scaffold.css';
+export * from '../surface-scaffold.js';

package/dist/catalog.js

@@ -1,13 +1,14 @@
-import { Pane } from './chunk-JRKSK2HX.js';
 import { Toolbar } from './chunk-SYDMYBPG.js';
-import { ToolbarControlGroup } from './chunk-5VTB2BKP.js';
-import { ListHeader } from './chunk-PSKN344N.js';
-import { ListItem } from './chunk-FEAMR7S4.js';
+import { ToolbarControlGroup } from './chunk-WNWD54GR.js';
+import { Pane } from './chunk-JRKSK2HX.js';
+import { ListHeader } from './chunk-GWEAPEZI.js';
+import { ListItem } from './chunk-4EF2CMYS.js';
 import { List } from './chunk-J5BFYY7Q.js';
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 
 
 import { LucideIcon } from './chunk-W2FK7ZNY.js';
+
 import { PanelLeftClose, Waypoints, ExternalLink, Moon, Sun, PanelLeftOpen } from 'lucide';
 import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
 

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 {\n  ExternalLink,\n  Moon,\n  PanelLeftClose,\n  PanelLeftOpen,\n  Sun,\n  Waypoints,\n} from 'lucide';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { List } from './list.js';\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Pane } from './pane.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 specimens' computed borders (or transparent outer\n   * bounds) and non-zero margins. Pass a boolean (rather than omitting the\n   * prop) when the active entry can switch between component and composition\n   * previews; `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      <Pane\n        element=\"aside\"\n        className=\"kui-catalog__sidebar\"\n        label={`${brand.title} catalog`}\n        contentElement=\"nav\"\n        contentLabel={`${brand.title} components`}\n        separators={['inline-end']}\n        headerClassName=\"kui-catalog__brand\"\n        header={\n          <>\n            <Toolbar\n              label={`${brand.title} catalog header`}\n              dividerSides=\"\"\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          </>\n        }\n      >\n        <>\n          {sections.map((section) => (\n            <section class=\"kui-catalog__group\">\n              <ListHeader label={section.category} />\n              <List className=\"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              </List>\n            </section>\n          ))}\n          {secondarySections ? (\n            <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n              {secondarySections.collapsible ? (\n                <ListHeader\n                  label={secondarySections.label}\n                  toggle\n                  expanded={Boolean(secondarySections.expanded)}\n                  action={toggleSecondaryAction}\n                />\n              ) : (\n                <ListHeader label={secondarySections.label} />\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                      <List className=\"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                      </List>\n                    </section>\n                  ))}\n                </div>\n              ) : (\n                <></>\n              )}\n            </section>\n          ) : (\n            <></>\n          )}\n          {sidebarFooter ?? <></>}\n        </>\n      </Pane>\n      <Pane\n        element=\"article\"\n        className=\"kui-catalog__detail\"\n        contentElement=\"section\"\n        contentLabel={`${name} preview`}\n        contentClassName=\"kui-catalog__stage\"\n        headerClassName=\"kui-catalog__header\"\n        header={\n          <>\n            <Toolbar\n              label={`${name} header`}\n              dividerSides=\"\"\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\n                          icon={PanelLeftOpen}\n                          name=\"panel-left-open\"\n                        />\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          </>\n        }\n        footerClassName=\"kui-catalog__footer\"\n        footer={\n          <>\n            {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n            <Toolbar\n              label={`${name} resources`}\n              dividerSides=\"\"\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\n                            icon={ExternalLink}\n                            name=\"external-link\"\n                          />\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          </>\n        }\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      </Pane>\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\nconst catalogExampleProtectedAttributes = new Set([\n  'data-catalog-example',\n  'data-catalog-example-stack',\n  'data-catalog-example-label',\n  'data-catalog-example-note',\n  'data-align',\n]);\n\ntype CatalogExampleRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-catalog-example'?: never;\n    'data-catalog-example-stack'?: never;\n    'data-catalog-example-label'?: never;\n    'data-catalog-example-note'?: never;\n    'data-align'?: never;\n  }\n>;\n\ntype CatalogExampleStackRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-catalog-example'?: never;\n    'data-catalog-example-stack'?: never;\n    'data-catalog-example-label'?: never;\n    'data-catalog-example-note'?: never;\n    'data-align'?: never;\n  }\n>;\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  /** Safe authoring `data-*` metadata for the rendered section. Helper-owned structural attributes remain protected. */\n  rootAttributes?: CatalogExampleRootAttributes;\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  rootAttributes = {},\n  className = '',\n  children,\n}: CatalogExampleProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    catalogExampleProtectedAttributes,\n  );\n  return (\n    <section\n      {...safeRootAttributes}\n      class={`kui-catalog-example ${className}`.trim()}\n      data-catalog-example\n      data-align={align}\n    >\n      {label !== undefined ? (\n        <ListHeader\n          label={label}\n          rootAttributes={{ 'data-catalog-example-label': '' }}\n        />\n      ) : (\n        <></>\n      )}\n      {note !== undefined ? (\n        <p class=\"kui-catalog-example__note\" data-catalog-example-note>\n          {note}\n        </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  /** Safe authoring `data-*` metadata for the rendered stack. Helper-owned structural attributes remain protected. */\n  rootAttributes?: CatalogExampleStackRootAttributes;\n  className?: string;\n  children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * A vertically-stacked group of {@link CatalogExample}s with the catalog's\n * example rhythm. The semantic `section` becomes a named `region` when `label`\n * is supplied; an unlabeled stack remains an ordinary grouping.\n */\nexport function CatalogExampleStack({\n  label,\n  rootAttributes = {},\n  className = '',\n  children,\n}: CatalogExampleStackProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    catalogExampleProtectedAttributes,\n  );\n  return (\n    <section\n      {...safeRootAttributes}\n      class={`kui-catalog-example-stack ${className}`.trim()}\n      data-catalog-example-stack\n      aria-label={label}\n    >\n      {children}\n    </section>\n  );\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 { filterDataAttributes } from './extension-attributes.js';\nimport { List } from './list.js';\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Pane } from './pane.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 specimens' computed borders (or transparent outer\n   * bounds) and non-zero margins. Pass a boolean (rather than omitting the\n   * prop) when the active entry can switch between component and composition\n   * previews; `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      <Pane\n        element=\"aside\"\n        className=\"kui-catalog__sidebar\"\n        label={`${brand.title} catalog`}\n        contentElement=\"nav\"\n        contentLabel={`${brand.title} components`}\n        separators={['inline-end']}\n        headerClassName=\"kui-catalog__brand\"\n        header={\n          <>\n            <Toolbar\n              label={`${brand.title} catalog header`}\n              dividerSides=\"\"\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          </>\n        }\n      >\n        <>\n          {sections.map((section) => (\n            <section class=\"kui-catalog__group\">\n              <ListHeader label={section.category} />\n              <List className=\"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              </List>\n            </section>\n          ))}\n          {secondarySections ? (\n            <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n              {secondarySections.collapsible ? (\n                <ListHeader\n                  label={secondarySections.label}\n                  toggle\n                  expanded={Boolean(secondarySections.expanded)}\n                  action={toggleSecondaryAction}\n                />\n              ) : (\n                <ListHeader label={secondarySections.label} />\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                      <List className=\"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                      </List>\n                    </section>\n                  ))}\n                </div>\n              ) : (\n                <></>\n              )}\n            </section>\n          ) : (\n            <></>\n          )}\n          {sidebarFooter ?? <></>}\n        </>\n      </Pane>\n      <Pane\n        element=\"article\"\n        className=\"kui-catalog__detail\"\n        contentElement=\"section\"\n        contentLabel={`${name} preview`}\n        contentClassName=\"kui-catalog__stage\"\n        headerClassName=\"kui-catalog__header\"\n        header={\n          <>\n            <Toolbar\n              label={`${name} header`}\n              dividerSides=\"\"\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\n                          icon={PanelLeftOpen}\n                          name=\"panel-left-open\"\n                        />\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          </>\n        }\n        footerClassName=\"kui-catalog__footer\"\n        footer={\n          <>\n            {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n            <Toolbar\n              label={`${name} resources`}\n              dividerSides=\"\"\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\n                            icon={ExternalLink}\n                            name=\"external-link\"\n                          />\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          </>\n        }\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      </Pane>\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\nconst catalogExampleProtectedAttributes = new Set([\n  'data-catalog-example',\n  'data-catalog-example-stack',\n  'data-catalog-example-label',\n  'data-catalog-example-note',\n  'data-align',\n]);\n\ntype CatalogExampleRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-catalog-example'?: never;\n    'data-catalog-example-stack'?: never;\n    'data-catalog-example-label'?: never;\n    'data-catalog-example-note'?: never;\n    'data-align'?: never;\n  }\n>;\n\ntype CatalogExampleStackRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-catalog-example'?: never;\n    'data-catalog-example-stack'?: never;\n    'data-catalog-example-label'?: never;\n    'data-catalog-example-note'?: never;\n    'data-align'?: never;\n  }\n>;\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  /** Safe authoring `data-*` metadata for the rendered section. Helper-owned structural attributes remain protected. */\n  rootAttributes?: CatalogExampleRootAttributes;\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  rootAttributes = {},\n  className = '',\n  children,\n}: CatalogExampleProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    catalogExampleProtectedAttributes,\n  );\n  return (\n    <section\n      {...safeRootAttributes}\n      class={`kui-catalog-example ${className}`.trim()}\n      data-catalog-example\n      data-align={align}\n    >\n      {label !== undefined ? (\n        <ListHeader\n          label={label}\n          rootAttributes={{ 'data-catalog-example-label': '' }}\n        />\n      ) : (\n        <></>\n      )}\n      {note !== undefined ? (\n        <p class=\"kui-catalog-example__note\" data-catalog-example-note>\n          {note}\n        </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  /** Safe authoring `data-*` metadata for the rendered stack. Helper-owned structural attributes remain protected. */\n  rootAttributes?: CatalogExampleStackRootAttributes;\n  className?: string;\n  children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * A vertically-stacked group of {@link CatalogExample}s with the catalog's\n * example rhythm. The semantic `section` becomes a named `region` when `label`\n * is supplied; an unlabeled stack remains an ordinary grouping.\n */\nexport function CatalogExampleStack({\n  label,\n  rootAttributes = {},\n  className = '',\n  children,\n}: CatalogExampleStackProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    catalogExampleProtectedAttributes,\n  );\n  return (\n    <section\n      {...safeRootAttributes}\n      class={`kui-catalog-example-stack ${className}`.trim()}\n      data-catalog-example-stack\n      aria-label={label}\n    >\n      {children}\n    </section>\n  );\n}\n"]}

package/dist/{chunk-FEAMR7S4.js → chunk-4EF2CMYS.js}

@@ -1,6 +1,7 @@
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 import { Skeleton } from './chunk-RKVQEH4J.js';
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+import { LoadingSpinner } from './chunk-6WTETUZ6.js';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
 
 var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
   "data-component",
@@ -8,12 +9,20 @@ var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
   "data-item-id",
   "data-has-icon",
   "data-multiline",
+  "data-density",
+  "data-divider",
+  "data-busy",
   "data-state"
 ]);
 function ListItem({
   label,
+  description,
   icon,
   trailing,
+  status,
+  busy = false,
+  density = "standard",
+  divider = "none",
   selected = false,
   action,
   itemId,
@@ -48,16 +57,26 @@ function ListItem({
       "data-item-id": itemId,
       "data-has-icon": String(Boolean(icon)),
       "data-multiline": multiline ? "true" : void 0,
+      "data-density": density,
+      "data-divider": divider,
+      "data-busy": busy ? "true" : void 0,
       "data-state": state,
       "data-placeholder": placeholder ? "true" : void 0,
       "aria-label": accessibleLabel,
       "aria-current": selected ? "page" : void 0,
       "aria-pressed": pressed === void 0 ? void 0 : String(pressed),
-      "aria-busy": placeholder ? "true" : void 0,
+      "aria-busy": placeholder || busy ? "true" : void 0,
       children: [
         icon && /* @__PURE__ */ jsx("span", { class: "kui-list-item__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "1em", height: "1em" }) : icon }),
-        /* @__PURE__ */ jsx("span", { class: "kui-list-item__label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label }),
-        trailing && /* @__PURE__ */ jsx("span", { class: "kui-list-item__trailing", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "2.5em" }) : trailing })
+        /* @__PURE__ */ jsxs("span", { class: "kui-list-item__label", children: [
+          /* @__PURE__ */ jsx("span", { class: "kui-list-item__primary-label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label }),
+          !placeholder && description && /* @__PURE__ */ jsx("span", { class: "kui-list-item__description", children: description })
+        ] }),
+        (busy || status || trailing) && /* @__PURE__ */ jsx("span", { class: "kui-list-item__trailing", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "2.5em" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          busy && /* @__PURE__ */ jsx(LoadingSpinner, {}),
+          status && /* @__PURE__ */ jsx("span", { class: "kui-list-item__status", children: status }),
+          trailing
+        ] }) })
       ]
     }
   );
@@ -65,4 +84,4 @@ function ListItem({
 
 export { ListItem };
 
-//# sourceMappingURL=chunk-FEAMR7S4.js.map
+//# sourceMappingURL=chunk-4EF2CMYS.js.map

package/dist/chunk-4EF2CMYS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-item.tsx"],"names":[],"mappings":"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","file":"chunk-4EF2CMYS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { LoadingSpinner } from './loading-spinner.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-state',\n]);\n\ntype ListItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-state'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  /** App-owned supporting text rendered in the component's stable label stack. */\n  description?: string | SafeHtml;\n  icon?: SafeHtml;\n  trailing?: SafeHtml;\n  /** Dormant status metadata rendered before trailing content. */\n  status?: string | SafeHtml;\n  /** Show a progress indicator and expose the row as busy without replacing its content. */\n  busy?: boolean;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  style?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action. */\n  placeholder?: boolean;\n  rootAttributes?: ListItemRootAttributes;\n}\n\nexport function ListItem({\n  label,\n  description,\n  icon,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  action,\n  itemId,\n  className = '',\n  style,\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  rootAttributes = {},\n}: ListItemProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <button\n      {...extensionAttributes}\n      type=\"button\"\n      class={`kui-list-item ${className}`.trim()}\n      style={style}\n      title={placeholder ? undefined : title}\n      disabled={disabled || placeholder}\n      tabindex={placeholder ? -1 : tabIndex}\n      data-component=\"list-item\"\n      data-action={placeholder ? undefined : action}\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-label={accessibleLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n    >\n      {icon && (\n        <span class=\"kui-list-item__icon\">\n          {placeholder ? <Skeleton width=\"1em\" height=\"1em\" /> : icon}\n        </span>\n      )}\n      <span class=\"kui-list-item__label\">\n        <span class=\"kui-list-item__primary-label\">\n          {placeholder ? <Skeleton width=\"9em\" /> : label}\n        </span>\n        {!placeholder && description && (\n          <span class=\"kui-list-item__description\">{description}</span>\n        )}\n      </span>\n      {(busy || status || trailing) && (\n        <span class=\"kui-list-item__trailing\">\n          {placeholder ? (\n            <Skeleton width=\"2.5em\" />\n          ) : (\n            <>\n              {busy && <LoadingSpinner />}\n              {status && <span class=\"kui-list-item__status\">{status}</span>}\n              {trailing}\n            </>\n          )}\n        </span>\n      )}\n    </button>\n  );\n}\n"]}

package/dist/{chunk-NWSEP5RT.js → chunk-FRVS5RFM.js}

@@ -11,10 +11,16 @@ function Select({
   choices,
   className = "",
   placeholderText,
+  hint,
   disabled = false,
   fitMenu = false,
   renderSelected,
-  placeholder = false
+  placeholder = false,
+  presentation = "form",
+  size = "default",
+  selectedPresentation = "label",
+  focusRingOwner = "select",
+  labelMaxWidth
 }) {
   if (placeholder) {
     return /* @__PURE__ */ jsxs(
@@ -23,7 +29,12 @@ function Select({
         class: `kui-select kui-select--placeholder ${className}`.trim(),
         "data-component": "select",
         "data-placeholder": "true",
+        "data-presentation": presentation,
+        "data-size": size,
+        "data-selected-presentation": selectedPresentation,
+        "data-focus-ring-owner": focusRingOwner,
         "aria-busy": "true",
+        style: labelMaxWidth === void 0 ? void 0 : `--kui-select-label-max-width:${labelMaxWidth}px`,
         children: [
           label && /* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-label", children: label }),
           /* @__PURE__ */ jsxs(
@@ -37,7 +48,8 @@ function Select({
                 /* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronDown, name: "chevron-down" }) })
               ]
             }
-          )
+          ),
+          hint && /* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-hint", children: hint })
         ]
       }
     );
@@ -76,14 +88,20 @@ function Select({
   return /* @__PURE__ */ jsxs(
     "wa-select",
     {
-      class: `kui-select${renderSelected ? " kui-select--custom-selected" : ""}${fitMenu ? " kui-select--fit-menu" : ""} ${className}`.trim(),
+      class: `kui-select${renderSelected ? " kui-select--custom-selected" : ""}${fitMenu ? " kui-select--fit-menu" : ""}${!label ? " kui-select--label-hidden" : ""} ${className}`.trim(),
       "data-component": "select",
+      "data-presentation": presentation,
+      "data-size": size,
+      "data-selected-presentation": selectedPresentation,
+      "data-focus-ring-owner": focusRingOwner,
       name,
-      label,
+      label: label || ariaLabel,
       "aria-label": ariaLabel,
       value,
       placeholder: placeholderText,
+      hint,
       disabled,
+      style: labelMaxWidth === void 0 ? void 0 : `--kui-select-label-max-width:${labelMaxWidth}px`,
       children: [
         selected && (renderSelected ? /* @__PURE__ */ jsx(
           "span",
@@ -114,4 +132,4 @@ function Select({
 
 export { Select };
 
-//# sourceMappingURL=chunk-NWSEP5RT.js.map
+//# sourceMappingURL=chunk-FRVS5RFM.js.map

package/dist/chunk-FRVS5RFM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-FRVS5RFM.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronDown } from 'lucide';\n\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  color?: string;\n  group?: string;\n  separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n  { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\ninterface SelectBaseProps<Value extends string = string> {\n  name: string;\n  value: NoInfer<Value>;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  /** Empty-value hint text shown in the closed control (the native select placeholder). */\n  placeholderText?: string;\n  /** Supporting text shown below the control and associated with its combobox. */\n  hint?: string;\n  disabled?: boolean;\n  fitMenu?: boolean;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n  /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n  placeholder?: boolean;\n  /** Form (default), borderless toolbar, or intrinsic navigation chrome. */\n  presentation?: 'form' | 'toolbar-borderless' | 'navigation';\n  size?: 'default' | 'compact';\n  /** Show only the selected choice icon while retaining the Select's accessible name. */\n  selectedPresentation?: 'label' | 'icon-only';\n  /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n  focusRingOwner?: 'select' | 'group';\n  /** Maximum closed-control label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n}\n\nexport type SelectProps<Value extends string = string> =\n  SelectBaseProps<Value> & SelectAccessibleName;\n\nexport function Select<Value extends string>({\n  name,\n  value,\n  label,\n  ariaLabel,\n  choices,\n  className = '',\n  placeholderText,\n  hint,\n  disabled = false,\n  fitMenu = false,\n  renderSelected,\n  placeholder = false,\n  presentation = 'form',\n  size = 'default',\n  selectedPresentation = 'label',\n  focusRingOwner = 'select',\n  labelMaxWidth,\n}: SelectProps<Value>) {\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        data-component=\"select\"\n        data-placeholder=\"true\"\n        data-presentation={presentation}\n        data-size={size}\n        data-selected-presentation={selectedPresentation}\n        data-focus-ring-owner={focusRingOwner}\n        aria-busy=\"true\"\n        style={\n          labelMaxWidth === undefined\n            ? undefined\n            : `--kui-select-label-max-width:${labelMaxWidth}px`\n        }\n      >\n        {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n        <span\n          class=\"kui-select__placeholder-box\"\n          aria-label={ariaLabel}\n          role=\"img\"\n        >\n          <Skeleton width=\"10em\" />\n          <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n            <LucideIcon icon={ChevronDown} name=\"chevron-down\" />\n          </span>\n        </span>\n        {hint && <span class=\"kui-select__placeholder-hint\">{hint}</span>}\n      </div>\n    );\n  }\n  const selected = choices.find((choice) => choice.value === value);\n  const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n    <span\n      data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n      data-morph-skip\n      slot=\"start\"\n      class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n    >\n      {choice.icon ? (\n        <LucideIcon\n          icon={choice.icon}\n          name={\n            choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n          }\n        />\n      ) : null}\n    </span>\n  );\n  const option = (choice: SelectChoice<Value>) => (\n    <>\n      {choice.separatorBefore && <wa-divider></wa-divider>}\n      <wa-option value={choice.value}>\n        {choice.icon ? icon(choice) : null}\n        {choice.label}\n      </wa-option>\n    </>\n  );\n  const groups = [\n    ...new Set(\n      choices\n        .map((choice) => choice.group)\n        .filter((group): group is string => Boolean(group)),\n    ),\n  ];\n  const ungrouped = choices.filter((choice) => !choice.group);\n  // Web Awesome names its shadow combobox from the label, not the host's\n  // aria-label. Keep ariaLabel-only names available without visible chrome.\n  return (\n    <wa-select\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''}${!label ? ' kui-select--label-hidden' : ''} ${className}`.trim()}\n      data-component=\"select\"\n      data-presentation={presentation}\n      data-size={size}\n      data-selected-presentation={selectedPresentation}\n      data-focus-ring-owner={focusRingOwner}\n      name={name}\n      label={label || ariaLabel}\n      aria-label={ariaLabel}\n      value={value}\n      placeholder={placeholderText}\n      hint={hint}\n      disabled={disabled}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-select-label-max-width:${labelMaxWidth}px`\n      }\n    >\n      {selected &&\n        (renderSelected ? (\n          <span\n            data-key={`${name}:${value}:custom-selected`}\n            slot=\"start\"\n            class=\"kui-select__custom-selected\"\n          >\n            {renderSelected(selected)}\n          </span>\n        ) : selected.icon ? (\n          icon(selected, true)\n        ) : null)}\n      {ungrouped.map(option)}\n      {groups.map((group, index) => (\n        <div\n          class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n          role=\"group\"\n          aria-label={group}\n        >\n          <span class=\"kui-select__group-title\">{group}</span>\n          {choices.filter((choice) => choice.group === group).map(option)}\n        </div>\n      ))}\n    </wa-select>\n  );\n}\n"]}