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

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.22` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.24` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/analyzer/index.mjs

@@ -13,6 +13,7 @@ import postcss from 'postcss';
 import ts from 'typescript';
 
 import { loadApplicationUiProfile } from '../ai/application-ui-profile.mjs';
+import { isUiTraversalExcluded } from '../traversal-exclusions.mjs';
 
 export const UI_ANALYSIS_SCHEMA_VERSION = 1;
 
@@ -36,16 +37,10 @@ const spacingProperties = /^(?:margin|padding|gap|inset)(?:-|$)/;
 const dimensionProperties =
   /^(?:width|height|min-width|max-width|min-height|max-height)$/;
 const approvedSpacing = new Set([0, 4, 8, 16, 24]);
-const ignoredDirectories = new Set([
-  '.git',
-  'coverage',
-  'dist',
-  'node_modules',
-]);
-
 async function collectFiles(root, paths) {
   const files = [];
   const visit = async (path) => {
+    if (isUiTraversalExcluded(root, path)) return;
     const details = await stat(path);
     if (details.isFile()) {
       if (sourceExtensions.has(extname(path)) || path.endsWith('.css'))
@@ -54,7 +49,6 @@ async function collectFiles(root, paths) {
     }
     const entries = await readdir(path, { withFileTypes: true });
     for (const entry of entries) {
-      if (entry.isDirectory() && ignoredDirectories.has(entry.name)) continue;
       const child = resolve(path, entry.name);
       if (entry.isDirectory()) await visit(child);
       else if (

package/dist/app-tab.js

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

package/dist/browser/list.js

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

package/dist/catalog.d.ts

@@ -67,10 +67,10 @@ interface CatalogProps {
     /** Status line content shown at the start of the detail footer. */
     status?: SafeHtml;
     /**
-     * Whether to highlight transparent specimens' outer bounds and non-zero
-     * margins. Pass a boolean (rather than omitting the prop) when the active
-     * entry can switch between component and composition previews;
-     * `wireCatalogGeometryOverlay` keeps the overlay synchronized.
+     * Whether to highlight specimens' computed borders (or transparent outer
+     * bounds) and non-zero margins. Pass a boolean (rather than omitting the
+     * prop) when the active entry can switch between component and composition
+     * previews; `wireCatalogGeometryOverlay` keeps the overlay synchronized.
      */
     geometryOverlay?: boolean;
     selectAction?: string;
@@ -100,11 +100,15 @@ type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';
 type CatalogExampleRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-catalog-example'?: never;
     'data-catalog-example-stack'?: never;
+    'data-catalog-example-label'?: never;
+    'data-catalog-example-note'?: never;
     'data-align'?: never;
 }>;
 type CatalogExampleStackRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-catalog-example'?: never;
     'data-catalog-example-stack'?: never;
+    'data-catalog-example-label'?: never;
+    'data-catalog-example-note'?: never;
     'data-align'?: never;
 }>;
 interface CatalogExampleProps {

package/dist/catalog.js

@@ -1,8 +1,9 @@
 import { Pane } from './chunk-JRKSK2HX.js';
-import { Toolbar } from './chunk-7L6EHUMV.js';
+import { Toolbar } from './chunk-SYDMYBPG.js';
 import { ToolbarControlGroup } from './chunk-5VTB2BKP.js';
-import { ListHeader } from './chunk-DSNIYOZ3.js';
-import { ListItem } from './chunk-ELSJX4W7.js';
+import { ListHeader } from './chunk-PSKN344N.js';
+import { ListItem } from './chunk-FEAMR7S4.js';
+import { List } from './chunk-J5BFYY7Q.js';
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 
 
@@ -83,7 +84,7 @@ function Catalog({
                 Toolbar,
                 {
                   label: `${brand.title} catalog header`,
-                  divider: false,
+                  dividerSides: "",
                   leading: /* @__PURE__ */ jsxs(
                     ToolbarControlGroup,
                     {
@@ -111,7 +112,7 @@ function Catalog({
             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(
+                /* @__PURE__ */ jsx(List, { className: "kui-catalog__items", children: section.entries.map((entry) => /* @__PURE__ */ jsx(
                   ListItem,
                   {
                     action: selectAction,
@@ -136,7 +137,7 @@ function Catalog({
                 ) : /* @__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(
+                  /* @__PURE__ */ jsx(List, { className: "kui-catalog__items", children: section.entries.map((entry) => /* @__PURE__ */ jsx(
                     ListItem,
                     {
                       action: selectAction,
@@ -168,7 +169,7 @@ function Catalog({
                 Toolbar,
                 {
                   label: `${name} header`,
-                  divider: false,
+                  dividerSides: "",
                   leading: /* @__PURE__ */ jsxs(Fragment, { children: [
                     collapsed ? /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
                       "button",
@@ -228,7 +229,7 @@ function Catalog({
                 Toolbar,
                 {
                   label: `${name} resources`,
-                  divider: false,
+                  dividerSides: "",
                   leading: resources.length > 0 ? /* @__PURE__ */ jsx(
                     "nav",
                     {
@@ -312,6 +313,8 @@ function Catalog({
 var catalogExampleProtectedAttributes = /* @__PURE__ */ new Set([
   "data-catalog-example",
   "data-catalog-example-stack",
+  "data-catalog-example-label",
+  "data-catalog-example-note",
   "data-align"
 ]);
 function CatalogExample({
@@ -334,8 +337,14 @@ function CatalogExample({
       "data-catalog-example": true,
       "data-align": align,
       children: [
-        label !== void 0 ? /* @__PURE__ */ jsx(ListHeader, { label }) : /* @__PURE__ */ jsx(Fragment, {}),
-        note !== void 0 ? /* @__PURE__ */ jsx("p", { class: "kui-catalog-example__note", children: note }) : /* @__PURE__ */ jsx(Fragment, {}),
+        label !== void 0 ? /* @__PURE__ */ jsx(
+          ListHeader,
+          {
+            label,
+            rootAttributes: { "data-catalog-example-label": "" }
+          }
+        ) : /* @__PURE__ */ jsx(Fragment, {}),
+        note !== void 0 ? /* @__PURE__ */ jsx("p", { class: "kui-catalog-example__note", "data-catalog-example-note": true, children: note }) : /* @__PURE__ */ jsx(Fragment, {}),
         children
       ]
     }

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 { 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 transparent specimens' outer bounds and non-zero\n   * margins. Pass a boolean (rather than omitting the prop) when the active\n   * entry can switch between component and composition previews;\n   * `wireCatalogGeometryOverlay` keeps the overlay synchronized.\n   */\n  geometryOverlay?: boolean;\n  selectAction?: string;\n  toggleSidebarAction?: string;\n  toggleThemeAction?: string;\n  /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n  toggleSecondaryAction?: string;\n  className?: string;\n}\n\nfunction findEntry(\n  sections: readonly CatalogSection[],\n  id: string,\n): CatalogEntry | undefined {\n  for (const section of sections) {\n    for (const entry of section.entries) if (entry.id === id) return entry;\n  }\n  return undefined;\n}\n\nfunction catalogEntryTags(\n  tags: readonly string[] | undefined,\n): SafeHtml | undefined {\n  if (!tags?.length) return undefined;\n  return (\n    <span class=\"kui-catalog__tags\">\n      {tags.map((tag) => (\n        <span class=\"kui-catalog__tag\">{tag}</span>\n      ))}\n    </span>\n  );\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(\n  related: readonly CatalogRelated[],\n  selectAction: string,\n): SafeHtml[] {\n  const groups: string[] = [];\n  for (const entry of related)\n    if (!groups.includes(entry.group)) groups.push(entry.group);\n  const nodes: SafeHtml[] = [];\n  groups.forEach((group, index) => {\n    if (index > 0) nodes.push(<wa-divider></wa-divider>);\n    nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n    for (const entry of related) {\n      if (entry.group === group)\n        nodes.push(\n          <wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>\n            {entry.name}\n          </wa-dropdown-item>,\n        );\n    }\n  });\n  return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n  brand,\n  sections,\n  active,\n  content,\n  collapsed = false,\n  theme,\n  headerActions,\n  secondarySections,\n  sidebarFooter,\n  status,\n  geometryOverlay,\n  selectAction = 'catalog-select',\n  toggleSidebarAction = 'catalog-toggle-sidebar',\n  toggleThemeAction = 'catalog-toggle-theme',\n  toggleSecondaryAction = 'catalog-toggle-secondary',\n  className = '',\n}: CatalogProps) {\n  const selected =\n    findEntry(sections, active) ??\n    (secondarySections\n      ? findEntry(secondarySections.sections, active)\n      : undefined);\n  const name = selected?.name ?? '';\n  const nextTheme = theme === 'dark' ? 'light' : 'dark';\n  const resources = selected?.resources ?? [];\n  const related = selected?.related ?? [];\n\n  return (\n    <main\n      class={`kui-catalog ${className}`.trim()}\n      data-component=\"catalog\"\n      data-sidebar-collapsed={String(collapsed)}\n      data-geometry-overlay={\n        geometryOverlay === undefined ? undefined : String(geometryOverlay)\n      }\n    >\n      <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              divider={false}\n              leading={\n                <ToolbarControlGroup\n                  appearance=\"borderless\"\n                  className=\"kui-catalog__identity\"\n                >\n                  {brand.logoUrl ? (\n                    <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" />\n                  ) : (\n                    <></>\n                  )}\n                  <h1>{brand.title}</h1>\n                </ToolbarControlGroup>\n              }\n              trailing={\n                <ToolbarControlGroup appearance=\"borderless\" single>\n                  <button\n                    type=\"button\"\n                    data-action={toggleSidebarAction}\n                    aria-label={`Collapse ${brand.title} catalog`}\n                  >\n                    <LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" />\n                  </button>\n                </ToolbarControlGroup>\n              }\n            />\n            {brand.subtitle ? (\n              <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p>\n            ) : (\n              <></>\n            )}\n          </>\n        }\n      >\n        <>\n          {sections.map((section) => (\n            <section class=\"kui-catalog__group\">\n              <ListHeader label={section.category} />\n              <div class=\"kui-catalog__items\">\n                {section.entries.map((entry) => (\n                  <ListItem\n                    action={selectAction}\n                    itemId={entry.id}\n                    label={entry.name}\n                    trailing={catalogEntryTags(entry.tags)}\n                    selected={active === entry.id}\n                    title={entry.description}\n                    multiline\n                  />\n                ))}\n              </div>\n            </section>\n          ))}\n          {secondarySections ? (\n            <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n              {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                      <div class=\"kui-catalog__items\">\n                        {section.entries.map((entry) => (\n                          <ListItem\n                            action={selectAction}\n                            itemId={entry.id}\n                            label={entry.name}\n                            trailing={catalogEntryTags(entry.tags)}\n                            selected={active === entry.id}\n                            title={entry.description}\n                            multiline\n                          />\n                        ))}\n                      </div>\n                    </section>\n                  ))}\n                </div>\n              ) : (\n                <></>\n              )}\n            </section>\n          ) : (\n            <></>\n          )}\n          {sidebarFooter ?? <></>}\n        </>\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              divider={false}\n              leading={\n                <>\n                  {collapsed ? (\n                    <ToolbarControlGroup appearance=\"borderless\" single>\n                      <button\n                        type=\"button\"\n                        data-action={toggleSidebarAction}\n                        aria-label={`Expand ${brand.title} catalog`}\n                      >\n                        <LucideIcon\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              divider={false}\n              leading={\n                resources.length > 0 ? (\n                  <nav\n                    class=\"kui-catalog__resources\"\n                    aria-label={`${name} resources`}\n                  >\n                    <ToolbarControlGroup\n                      className=\"kui-catalog__resource-group\"\n                      label={`${name} resources`}\n                    >\n                      {resources.map((resource) => (\n                        <a\n                          class=\"kui-catalog__resource\"\n                          href={resource.href}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          aria-label={`${name}: ${resource.label} (opens in new tab)`}\n                        >\n                          <LucideIcon\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-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-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-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 ? <ListHeader label={label} /> : <></>}\n      {note !== undefined ? (\n        <p class=\"kui-catalog-example__note\">{note}</p>\n      ) : (\n        <></>\n      )}\n      {children}\n    </section>\n  );\n}\n\nexport interface CatalogExampleStackProps {\n  /** Accessible label for the stack region. */\n  label?: string;\n  /** 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-RYRIFZCT.js → chunk-7XRDUG4Y.js}

@@ -1,7 +1,7 @@
-import { ToolbarText } from './chunk-W7YD6E4N.js';
-import { Toolbar } from './chunk-7L6EHUMV.js';
+import { ToolbarText } from './chunk-R7ZWUN64.js';
+import { Toolbar } from './chunk-SYDMYBPG.js';
 import { ToolbarControlGroup } from './chunk-5VTB2BKP.js';
-import { Skeleton } from './chunk-PZQVSDLH.js';
+import { Skeleton } from './chunk-RKVQEH4J.js';
 import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
 
 function PanelHeader({
@@ -46,7 +46,7 @@ function PanelHeader({
       "data-has-summary": String(Boolean(summary)),
       "data-placeholder": placeholder ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx(Toolbar, { leading: identity, trailing: actions, divider: false }),
+        /* @__PURE__ */ jsx(Toolbar, { leading: identity, trailing: actions, dividerSides: "" }),
         summary && /* @__PURE__ */ jsx("p", { class: "kui-panel-header__summary", id: summaryId, children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "18em" }) : summary })
       ]
     }
@@ -55,4 +55,4 @@ function PanelHeader({
 
 export { PanelHeader };
 
-//# sourceMappingURL=chunk-RYRIFZCT.js.map
+//# sourceMappingURL=chunk-7XRDUG4Y.js.map

package/dist/{chunk-RYRIFZCT.js.map → chunk-7XRDUG4Y.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/panel-header.tsx"],"names":[],"mappings":";;;;;;AA0CO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA,GAAgB,EAAA;AAAA,EAChB,OAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc;AAChB,CAAA,EAAqB;AACnB,EAAA,MAAM,2BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,IAAA,oBACC,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,CAAA,uBAAA,EAA0B,aAAa,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAEzD,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBAEF,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,KAAA;AAAA,QACN,IAAA,EAAK,QAAA;AAAA,QACL,EAAA,EAAI,OAAA;AAAA,QACJ,SAAA,EAAU,yBAAA;AAAA,QACV,YAAA;AAAA,QACA;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAGF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,kBAAA;AAAA,MACN,gBAAA,EAAe,cAAA;AAAA,MACf,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,kBAAA,EAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA;AAAA,MACzC,kBAAA,EAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA;AAAA,MACzC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MAEzC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAQ,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,OAAA,EAAS,SAAS,KAAA,EAAO,CAAA;AAAA,QAC9D,OAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,KAAA,EAAM,2BAAA,EAA4B,EAAA,EAAI,SAAA,EACtC,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,MAAA,EAAO,IAAK,OAAA,EAC7C;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-RYRIFZCT.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\nimport { type HeadingLevel, ToolbarText } from './toolbar-text.js';\n\ninterface PanelHeaderBaseProps {\n  title: string;\n  titleId: string;\n  icon?: SafeHtml;\n  iconClassName?: string;\n  actions?: SafeHtml;\n  /**\n   * Expose the title as a heading landmark (`role=\"heading\"` + `aria-level`). Set it\n   * for a PAGE or view heading so screen-reader heading navigation works and the view\n   * has a primary heading; omit it (the default) for a dialog title, which is instead\n   * referenced via `aria-labelledby={titleId}` and needs no heading landmark.\n   */\n  headingLevel?: HeadingLevel;\n  /** Render the title and summary as unanimated loading skeletons, keeping the icon and actions. */\n  placeholder?: boolean;\n}\n\ntype PanelHeaderSummaryProps =\n  | { summary: string; summaryId?: string }\n  | { summary?: never; summaryId?: never };\n\nexport type PanelHeaderProps = PanelHeaderBaseProps & PanelHeaderSummaryProps;\n\n/**\n * The heading of a panel, dialog, or page: a plain `Toolbar` whose leading zone\n * holds an optional icon control group and the title as extra-large `ToolbarText`,\n * whose trailing zone holds the app's action controls, and with an optional\n * subtitle on its own row, left-aligned with the title.\n *\n * PanelHeader overrides no Toolbar styles — it is just a Toolbar with an xl title.\n * The only styling it adds is the icon group's fill/border color and the subtitle.\n * When no icon is provided, the icon group is omitted entirely. The `actions` slot\n * is passed straight into the toolbar's trailing zone; the app supplies whatever\n * trailing controls it needs (typically a `ToolbarControlGroup`).\n */\nexport function PanelHeader({\n  title,\n  titleId,\n  summary,\n  summaryId,\n  icon,\n  iconClassName = '',\n  actions,\n  headingLevel,\n  placeholder = false,\n}: PanelHeaderProps) {\n  const identity = (\n    <>\n      {icon && (\n        <ToolbarControlGroup\n          single\n          className={`kui-panel-header__icon ${iconClassName}`.trim()}\n        >\n          {icon}\n        </ToolbarControlGroup>\n      )}\n      <ToolbarText\n        text={title}\n        size=\"xlarge\"\n        id={titleId}\n        className=\"kui-panel-header__title\"\n        headingLevel={headingLevel}\n        placeholder={placeholder}\n      />\n    </>\n  );\n\n  return (\n    <div\n      class=\"kui-panel-header\"\n      data-component=\"panel-header\"\n      data-has-icon={String(Boolean(icon))}\n      data-has-actions={String(Boolean(actions))}\n      data-has-summary={String(Boolean(summary))}\n      data-placeholder={placeholder ? 'true' : undefined}\n    >\n      <Toolbar leading={identity} trailing={actions} divider={false} />\n      {summary && (\n        <p class=\"kui-panel-header__summary\" id={summaryId}>\n          {placeholder ? <Skeleton width=\"18em\" /> : summary}\n        </p>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/panel-header.tsx"],"names":[],"mappings":";;;;;;AA0CO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA,GAAgB,EAAA;AAAA,EAChB,OAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc;AAChB,CAAA,EAAqB;AACnB,EAAA,MAAM,2BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,IAAA,oBACC,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,CAAA,uBAAA,EAA0B,aAAa,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAEzD,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBAEF,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,KAAA;AAAA,QACN,IAAA,EAAK,QAAA;AAAA,QACL,EAAA,EAAI,OAAA;AAAA,QACJ,SAAA,EAAU,yBAAA;AAAA,QACV,YAAA;AAAA,QACA;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAGF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,kBAAA;AAAA,MACN,gBAAA,EAAe,cAAA;AAAA,MACf,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,kBAAA,EAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA;AAAA,MACzC,kBAAA,EAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA;AAAA,MACzC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MAEzC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAQ,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,OAAA,EAAS,cAAa,EAAA,EAAG,CAAA;AAAA,QAC9D,OAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,KAAA,EAAM,2BAAA,EAA4B,EAAA,EAAI,SAAA,EACtC,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,MAAA,EAAO,IAAK,OAAA,EAC7C;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-7XRDUG4Y.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\nimport { type HeadingLevel, ToolbarText } from './toolbar-text.js';\n\ninterface PanelHeaderBaseProps {\n  title: string;\n  titleId: string;\n  icon?: SafeHtml;\n  iconClassName?: string;\n  actions?: SafeHtml;\n  /**\n   * Expose the title as a heading landmark (`role=\"heading\"` + `aria-level`). Set it\n   * for a PAGE or view heading so screen-reader heading navigation works and the view\n   * has a primary heading; omit it (the default) for a dialog title, which is instead\n   * referenced via `aria-labelledby={titleId}` and needs no heading landmark.\n   */\n  headingLevel?: HeadingLevel;\n  /** Render the title and summary as unanimated loading skeletons, keeping the icon and actions. */\n  placeholder?: boolean;\n}\n\ntype PanelHeaderSummaryProps =\n  | { summary: string; summaryId?: string }\n  | { summary?: never; summaryId?: never };\n\nexport type PanelHeaderProps = PanelHeaderBaseProps & PanelHeaderSummaryProps;\n\n/**\n * The heading of a panel, dialog, or page: a plain `Toolbar` whose leading zone\n * holds an optional icon control group and the title as extra-large `ToolbarText`,\n * whose trailing zone holds the app's action controls, and with an optional\n * subtitle on its own row, left-aligned with the title.\n *\n * PanelHeader overrides no Toolbar styles — it is just a Toolbar with an xl title.\n * The only styling it adds is the icon group's fill/border color and the subtitle.\n * When no icon is provided, the icon group is omitted entirely. The `actions` slot\n * is passed straight into the toolbar's trailing zone; the app supplies whatever\n * trailing controls it needs (typically a `ToolbarControlGroup`).\n */\nexport function PanelHeader({\n  title,\n  titleId,\n  summary,\n  summaryId,\n  icon,\n  iconClassName = '',\n  actions,\n  headingLevel,\n  placeholder = false,\n}: PanelHeaderProps) {\n  const identity = (\n    <>\n      {icon && (\n        <ToolbarControlGroup\n          single\n          className={`kui-panel-header__icon ${iconClassName}`.trim()}\n        >\n          {icon}\n        </ToolbarControlGroup>\n      )}\n      <ToolbarText\n        text={title}\n        size=\"xlarge\"\n        id={titleId}\n        className=\"kui-panel-header__title\"\n        headingLevel={headingLevel}\n        placeholder={placeholder}\n      />\n    </>\n  );\n\n  return (\n    <div\n      class=\"kui-panel-header\"\n      data-component=\"panel-header\"\n      data-has-icon={String(Boolean(icon))}\n      data-has-actions={String(Boolean(actions))}\n      data-has-summary={String(Boolean(summary))}\n      data-placeholder={placeholder ? 'true' : undefined}\n    >\n      <Toolbar leading={identity} trailing={actions} dividerSides=\"\" />\n      {summary && (\n        <p class=\"kui-panel-header__summary\" id={summaryId}>\n          {placeholder ? <Skeleton width=\"18em\" /> : summary}\n        </p>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-OHU6CI22.js → chunk-B3A3IVO5.js}

@@ -1,4 +1,4 @@
-import { ToolbarText } from './chunk-W7YD6E4N.js';
+import { ToolbarText } from './chunk-R7ZWUN64.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function NavStack({
@@ -80,4 +80,4 @@ function NavStack({
 
 export { NavStack };
 
-//# sourceMappingURL=chunk-OHU6CI22.js.map
+//# sourceMappingURL=chunk-B3A3IVO5.js.map

package/dist/{chunk-OHU6CI22.js.map → chunk-B3A3IVO5.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-OHU6CI22.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { ToolbarText } from './toolbar-text.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n  content: SafeHtml;\n  /** Title shown in the top toolbar for this view. */\n  title?: string;\n  /** Trailing actions for this view's top toolbar. */\n  toolbar?: SafeHtml;\n}\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the back control (default \"Back\"). */\n  backLabel?: string;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar. */\n  bottomToolbar?: SafeHtml;\n  className?: string;\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. A single-pane layout is a `NavStack`\n * with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  hideToolbar = false,\n  bottomToolbar,\n  className = '',\n}: NavStackProps) {\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const canPop = views.length > 1;\n  return (\n    <section\n      class={`kui-nav-stack ${className}`.trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      aria-label={label}\n    >\n      {!hideToolbar && (\n        <header class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <div class=\"kui-nav-stack__lead\">\n            {canPop && (\n              <button\n                type=\"button\"\n                class=\"kui-nav-stack__back\"\n                data-nav-back\n                aria-label={backLabel}\n              >\n                <svg\n                  class=\"kui-nav-stack__back-icon\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"18\"\n                  height=\"18\"\n                  aria-hidden=\"true\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <path d=\"m15 18-6-6 6-6\" />\n                </svg>\n              </button>\n            )}\n            <ToolbarText\n              text={top?.title ?? ''}\n              size=\"large\"\n              className=\"kui-nav-stack__title\"\n            />\n          </div>\n          {top?.toolbar && (\n            <div class=\"kui-nav-stack__actions\">{top.toolbar}</div>\n          )}\n        </header>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.content}\n          </article>\n        ))}\n      </div>\n      {bottomToolbar && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          {bottomToolbar}\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../src/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-B3A3IVO5.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { ToolbarText } from './toolbar-text.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n  content: SafeHtml;\n  /** Title shown in the top toolbar for this view. */\n  title?: string;\n  /** Trailing actions for this view's top toolbar. */\n  toolbar?: SafeHtml;\n}\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the back control (default \"Back\"). */\n  backLabel?: string;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar. */\n  bottomToolbar?: SafeHtml;\n  className?: string;\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. A single-pane layout is a `NavStack`\n * with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  hideToolbar = false,\n  bottomToolbar,\n  className = '',\n}: NavStackProps) {\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const canPop = views.length > 1;\n  return (\n    <section\n      class={`kui-nav-stack ${className}`.trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      aria-label={label}\n    >\n      {!hideToolbar && (\n        <header class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <div class=\"kui-nav-stack__lead\">\n            {canPop && (\n              <button\n                type=\"button\"\n                class=\"kui-nav-stack__back\"\n                data-nav-back\n                aria-label={backLabel}\n              >\n                <svg\n                  class=\"kui-nav-stack__back-icon\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"18\"\n                  height=\"18\"\n                  aria-hidden=\"true\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <path d=\"m15 18-6-6 6-6\" />\n                </svg>\n              </button>\n            )}\n            <ToolbarText\n              text={top?.title ?? ''}\n              size=\"large\"\n              className=\"kui-nav-stack__title\"\n            />\n          </div>\n          {top?.toolbar && (\n            <div class=\"kui-nav-stack__actions\">{top.toolbar}</div>\n          )}\n        </header>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.content}\n          </article>\n        ))}\n      </div>\n      {bottomToolbar && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          {bottomToolbar}\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/{chunk-ELSJX4W7.js → chunk-FEAMR7S4.js}

@@ -1,5 +1,5 @@
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
-import { Skeleton } from './chunk-PZQVSDLH.js';
+import { Skeleton } from './chunk-RKVQEH4J.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
@@ -65,4 +65,4 @@ function ListItem({
 
 export { ListItem };
 
-//# sourceMappingURL=chunk-ELSJX4W7.js.map
+//# sourceMappingURL=chunk-FEAMR7S4.js.map

package/dist/{chunk-ELSJX4W7.js.map → chunk-FEAMR7S4.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/list-item.tsx"],"names":[],"mappings":";;;;AAKA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkCM,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA,OAAA;AAAA,EACA,eAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,iBAAiB;AACnB,CAAA,EAAkB;AAChB,EAAA,MAAM,mBAAA,GAAsB,oBAAA;AAAA,IAC1B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,mBAAA;AAAA,MACJ,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,KAAA;AAAA,MACA,KAAA,EAAO,cAAc,MAAA,GAAY,KAAA;AAAA,MACjC,UAAU,QAAA,IAAY,WAAA;AAAA,MACtB,QAAA,EAAU,cAAc,EAAA,GAAK,QAAA;AAAA,MAC7B,gBAAA,EAAe,WAAA;AAAA,MACf,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,MACvC,cAAA,EAAc,MAAA;AAAA,MACd,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,gBAAA,EAAgB,YAAY,MAAA,GAAS,MAAA;AAAA,MACrC,YAAA,EAAY,KAAA;AAAA,MACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,YAAA,EAAY,eAAA;AAAA,MACZ,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MAClC,cAAA,EAAc,OAAA,KAAY,MAAA,GAAY,MAAA,GAAY,OAAO,OAAO,CAAA;AAAA,MAChE,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,qBAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,MAAA,EAAO,KAAA,EAAM,CAAA,GAAK,IAAA,EACzD,CAAA;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EACT,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAAK,KAAA,EAC5C,CAAA;AAAA,QACC,QAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,OAAA,EAAQ,CAAA,GAAK,QAAA,EAC9C;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-ELSJX4W7.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.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-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-state'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  icon?: SafeHtml;\n  trailing?: SafeHtml;\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  icon,\n  trailing,\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-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 ? '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        {placeholder ? <Skeleton width=\"9em\" /> : label}\n      </span>\n      {trailing && (\n        <span class=\"kui-list-item__trailing\">\n          {placeholder ? <Skeleton width=\"2.5em\" /> : trailing}\n        </span>\n      )}\n    </button>\n  );\n}\n"]}
+{"version":3,"sources":["../src/list-item.tsx"],"names":[],"mappings":";;;;AAKA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkCM,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA,OAAA;AAAA,EACA,eAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,iBAAiB;AACnB,CAAA,EAAkB;AAChB,EAAA,MAAM,mBAAA,GAAsB,oBAAA;AAAA,IAC1B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,mBAAA;AAAA,MACJ,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,KAAA;AAAA,MACA,KAAA,EAAO,cAAc,MAAA,GAAY,KAAA;AAAA,MACjC,UAAU,QAAA,IAAY,WAAA;AAAA,MACtB,QAAA,EAAU,cAAc,EAAA,GAAK,QAAA;AAAA,MAC7B,gBAAA,EAAe,WAAA;AAAA,MACf,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,MACvC,cAAA,EAAc,MAAA;AAAA,MACd,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,gBAAA,EAAgB,YAAY,MAAA,GAAS,MAAA;AAAA,MACrC,YAAA,EAAY,KAAA;AAAA,MACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,YAAA,EAAY,eAAA;AAAA,MACZ,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MAClC,cAAA,EAAc,OAAA,KAAY,MAAA,GAAY,MAAA,GAAY,OAAO,OAAO,CAAA;AAAA,MAChE,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,qBAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,MAAA,EAAO,KAAA,EAAM,CAAA,GAAK,IAAA,EACzD,CAAA;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EACT,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAAK,KAAA,EAC5C,CAAA;AAAA,QACC,QAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,OAAA,EAAQ,CAAA,GAAK,QAAA,EAC9C;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-FEAMR7S4.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.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-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-state'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  icon?: SafeHtml;\n  trailing?: SafeHtml;\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  icon,\n  trailing,\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-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 ? '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        {placeholder ? <Skeleton width=\"9em\" /> : label}\n      </span>\n      {trailing && (\n        <span class=\"kui-list-item__trailing\">\n          {placeholder ? <Skeleton width=\"2.5em\" /> : trailing}\n        </span>\n      )}\n    </button>\n  );\n}\n"]}

package/dist/{chunk-OZWU5ZPZ.js → chunk-IJBSZ4NX.js}

@@ -1,4 +1,4 @@
-import { Skeleton } from './chunk-PZQVSDLH.js';
+import { Skeleton } from './chunk-RKVQEH4J.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 function SegmentedControl({
@@ -54,4 +54,4 @@ function SegmentedControl({
 
 export { SegmentedControl };
 
-//# sourceMappingURL=chunk-OZWU5ZPZ.js.map
+//# sourceMappingURL=chunk-IJBSZ4NX.js.map

package/dist/{chunk-OZWU5ZPZ.js.map → chunk-IJBSZ4NX.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/segmented-control.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,gBAAA,CAAuC;AAAA,EACrD,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA,GAAS,gBAAA;AAAA,EACT,UAAA,GAAa,QAAA;AAAA,EACb,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAAiC;AAC/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACjD,gBAAA,EAAe,mBAAA;AAAA,MACf,2BAAA,EAA2B,EAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACvB,QAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,KAAA;AAClC,QAAA,uBACE,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,6BAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,sBAAoB,MAAA,CAAO,KAAA;AAAA,YAC3B,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,YAC9B,cAAY,MAAA,CAAO,KAAA;AAAA,YACnB,cAAA,EAAc,OAAO,QAAQ,CAAA;AAAA,YAC7B,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,MAAA,CAAO,KAAA;AAAA,YACxC,QAAA,EAAU,OAAO,QAAA,IAAY,WAAA;AAAA,YAC7B,QAAA,EAAU,cAAc,IAAA,GAAO,GAAA;AAAA,YAE9B,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAErB,MAAA,CAAO,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,CAAO,KAAA,EAAM;AAAA;AAAA,SAE3C;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"chunk-OZWU5ZPZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';\nexport type SegmentedControlShape = 'rounded' | 'pill';\nexport type SegmentedControlSize = 'small' | 'default';\nexport type SegmentedControlLayout = 'content' | 'equal';\n\nexport interface SegmentedControlChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  content?: SafeHtml;\n  title?: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends string = string> {\n  id: string;\n  label: string;\n  value: NoInfer<Value>;\n  choices: readonly SegmentedControlChoice<Value>[];\n  action?: string;\n  appearance?: SegmentedControlAppearance;\n  shape?: SegmentedControlShape;\n  size?: SegmentedControlSize;\n  layout?: SegmentedControlLayout;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling every segment. */\n  placeholder?: boolean;\n}\n\nexport function SegmentedControl<Value extends string>({\n  id,\n  label,\n  value,\n  choices,\n  action = 'select-segment',\n  appearance = 'filled',\n  shape = 'rounded',\n  size = 'default',\n  layout = 'content',\n  className = '',\n  placeholder = false,\n}: SegmentedControlProps<Value>) {\n  return (\n    <div\n      class={`kui-segmented-control ${className}`.trim()}\n      data-component=\"segmented-control\"\n      data-segmented-control-id={id}\n      data-value={value}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-size={size}\n      data-layout={layout}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role=\"group\"\n      aria-label={label}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {choices.map((choice) => {\n        const selected = choice.value === value;\n        return (\n          <button\n            type=\"button\"\n            class=\"kui-segmented-control__item\"\n            data-action={placeholder ? undefined : action}\n            data-segment-value={choice.value}\n            data-selected={String(selected)}\n            aria-label={choice.label}\n            aria-pressed={String(selected)}\n            title={placeholder ? undefined : choice.title}\n            disabled={choice.disabled || placeholder}\n            tabindex={placeholder ? '-1' : '0'}\n          >\n            {placeholder ? (\n              <Skeleton width=\"4em\" />\n            ) : (\n              (choice.content ?? <span>{choice.label}</span>)\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/segmented-control.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,gBAAA,CAAuC;AAAA,EACrD,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA,GAAS,gBAAA;AAAA,EACT,UAAA,GAAa,QAAA;AAAA,EACb,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAAiC;AAC/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACjD,gBAAA,EAAe,mBAAA;AAAA,MACf,2BAAA,EAA2B,EAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACvB,QAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,KAAA;AAClC,QAAA,uBACE,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,6BAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,sBAAoB,MAAA,CAAO,KAAA;AAAA,YAC3B,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,YAC9B,cAAY,MAAA,CAAO,KAAA;AAAA,YACnB,cAAA,EAAc,OAAO,QAAQ,CAAA;AAAA,YAC7B,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,MAAA,CAAO,KAAA;AAAA,YACxC,QAAA,EAAU,OAAO,QAAA,IAAY,WAAA;AAAA,YAC7B,QAAA,EAAU,cAAc,IAAA,GAAO,GAAA;AAAA,YAE9B,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAErB,MAAA,CAAO,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,CAAO,KAAA,EAAM;AAAA;AAAA,SAE3C;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"chunk-IJBSZ4NX.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';\nexport type SegmentedControlShape = 'rounded' | 'pill';\nexport type SegmentedControlSize = 'small' | 'default';\nexport type SegmentedControlLayout = 'content' | 'equal';\n\nexport interface SegmentedControlChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  content?: SafeHtml;\n  title?: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends string = string> {\n  id: string;\n  label: string;\n  value: NoInfer<Value>;\n  choices: readonly SegmentedControlChoice<Value>[];\n  action?: string;\n  appearance?: SegmentedControlAppearance;\n  shape?: SegmentedControlShape;\n  size?: SegmentedControlSize;\n  layout?: SegmentedControlLayout;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling every segment. */\n  placeholder?: boolean;\n}\n\nexport function SegmentedControl<Value extends string>({\n  id,\n  label,\n  value,\n  choices,\n  action = 'select-segment',\n  appearance = 'filled',\n  shape = 'rounded',\n  size = 'default',\n  layout = 'content',\n  className = '',\n  placeholder = false,\n}: SegmentedControlProps<Value>) {\n  return (\n    <div\n      class={`kui-segmented-control ${className}`.trim()}\n      data-component=\"segmented-control\"\n      data-segmented-control-id={id}\n      data-value={value}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-size={size}\n      data-layout={layout}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role=\"group\"\n      aria-label={label}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {choices.map((choice) => {\n        const selected = choice.value === value;\n        return (\n          <button\n            type=\"button\"\n            class=\"kui-segmented-control__item\"\n            data-action={placeholder ? undefined : action}\n            data-segment-value={choice.value}\n            data-selected={String(selected)}\n            aria-label={choice.label}\n            aria-pressed={String(selected)}\n            title={placeholder ? undefined : choice.title}\n            disabled={choice.disabled || placeholder}\n            tabindex={placeholder ? '-1' : '0'}\n          >\n            {placeholder ? (\n              <Skeleton width=\"4em\" />\n            ) : (\n              (choice.content ?? <span>{choice.label}</span>)\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/chunk-J5BFYY7Q.js

@@ -0,0 +1,35 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/list.tsx
+function List({
+  children,
+  gap = false,
+  flex = false,
+  scrollable = false,
+  dividerSides = "",
+  className = ""
+}) {
+  const gapValue = gap === true ? "var(--kui-list-gap)" : gap || void 0;
+  const flexValue = flex === true ? "1 1 auto" : flex || void 0;
+  const style = [
+    gapValue ? `--_kui-list-gap:${gapValue}` : "",
+    flexValue ? `--_kui-list-flex:${flexValue}` : ""
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-list ${className}`.trim(),
+      "data-component": "list",
+      "data-gap": String(Boolean(gap)),
+      "data-flex": String(Boolean(flex)),
+      "data-scrollable": String(scrollable),
+      "divider-sides": dividerSides || void 0,
+      style: style || void 0,
+      children
+    }
+  );
+}
+
+export { List };
+
+//# sourceMappingURL=chunk-J5BFYY7Q.js.map

package/dist/chunk-J5BFYY7Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":";;;AAkBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,GAAA,GAAM,KAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,KAAA;AAAA,EACb,YAAA,GAAe,EAAA;AAAA,EACf,SAAA,GAAY;AACd,CAAA,EAAc;AACZ,EAAA,MAAM,QAAA,GAAW,GAAA,KAAQ,IAAA,GAAO,qBAAA,GAAwB,GAAA,IAAO,MAAA;AAC/D,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,QAAA,GAAW,CAAA,gBAAA,EAAmB,QAAQ,CAAA,CAAA,GAAK,EAAA;AAAA,IAC3C,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,UAAA,EAAU,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,MAC7B,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,iBAAA,EAAiB,OAAO,UAAU,CAAA;AAAA,MAClC,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,OAAO,KAAA,IAAS,MAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ","file":"chunk-J5BFYY7Q.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { DividerSides } from './divider-sides.js';\n\nexport interface ListProps {\n  children?: SafeHtml | readonly SafeHtml[];\n  /** Use the standard item gap, or supply browser CSS such as `var(--kui-space-2xs)` or `0.25rem`. Defaults to no gap. */\n  gap?: boolean | string;\n  /** Allow this list to grow/shrink, or supply a CSS flex shorthand. */\n  flex?: boolean | string;\n  /** Own vertical scrolling and overscroll containment. */\n  scrollable?: boolean;\n  /** Physical divider edges in canonical top/right/bottom/left order. */\n  dividerSides?: DividerSides;\n  className?: string;\n}\n\n/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */\nexport function List({\n  children,\n  gap = false,\n  flex = false,\n  scrollable = false,\n  dividerSides = '',\n  className = '',\n}: ListProps) {\n  const gapValue = gap === true ? 'var(--kui-list-gap)' : gap || undefined;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    gapValue ? `--_kui-list-gap:${gapValue}` : '',\n    flexValue ? `--_kui-list-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      class={`kui-list ${className}`.trim()}\n      data-component=\"list\"\n      data-gap={String(Boolean(gap))}\n      data-flex={String(Boolean(flex))}\n      data-scrollable={String(scrollable)}\n      divider-sides={dividerSides || undefined}\n      style={style || undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { DividerSides } from './divider-sides.js';\n"]}

package/dist/{chunk-QQFJMRIB.js → chunk-KWWR5VMS.js}

@@ -1,4 +1,4 @@
-import { Skeleton } from './chunk-PZQVSDLH.js';
+import { Skeleton } from './chunk-RKVQEH4J.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function ValueTableRow({
@@ -42,4 +42,4 @@ function ValueTable({
 
 export { ValueTable, ValueTableRow };
 
-//# sourceMappingURL=chunk-QQFJMRIB.js.map
+//# sourceMappingURL=chunk-KWWR5VMS.js.map

package/dist/{chunk-QQFJMRIB.js.map → chunk-KWWR5VMS.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/value-table-row.tsx","../src/value-table.tsx"],"names":["jsx"],"mappings":";;;AAaO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAAuB;AACrB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MAEzC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,0BACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC9C,CAAA;AAAA,wBACA,GAAA,CAAC,QAAI,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAM,MAAA,EAAO,IAAK,KAAA,EAAM;AAAA;AAAA;AAAA,GACvD;AAEJ;ACvBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MAEX;AAAA;AAAA,GACH;AAEJ","file":"chunk-QQFJMRIB.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport interface ValueTableRowProps {\n  label: string | SafeHtml;\n  value: string | SafeHtml;\n  icon?: SafeHtml;\n  className?: string;\n  /** Render the value as an unanimated loading skeleton, keeping the field label. */\n  placeholder?: boolean;\n}\n\nexport function ValueTableRow({\n  label,\n  value,\n  icon,\n  className = '',\n  placeholder = false,\n}: ValueTableRowProps) {\n  return (\n    <div\n      class={`kui-value-table__row ${className}`.trim()}\n      data-has-icon={String(Boolean(icon))}\n      data-placeholder={placeholder ? 'true' : undefined}\n    >\n      <dt>\n        {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n        <span class=\"kui-value-table__label\">{label}</span>\n      </dt>\n      <dd>{placeholder ? <Skeleton width=\"10em\" /> : value}</dd>\n    </div>\n  );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nexport { ValueTableRow, type ValueTableRowProps } from './value-table-row.js';\n\nexport interface ValueTableProps {\n  label: string;\n  className?: string;\n  children: SafeHtml | readonly SafeHtml[];\n}\n\nexport function ValueTable({\n  label,\n  className = '',\n  children,\n}: ValueTableProps) {\n  return (\n    <dl\n      class={`kui-value-table ${className}`.trim()}\n      data-component=\"value-table\"\n      aria-label={label}\n    >\n      {children}\n    </dl>\n  );\n}\n"]}
+{"version":3,"sources":["../src/value-table-row.tsx","../src/value-table.tsx"],"names":["jsx"],"mappings":";;;AAaO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAAuB;AACrB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MAEzC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,0BACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC9C,CAAA;AAAA,wBACA,GAAA,CAAC,QAAI,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAM,MAAA,EAAO,IAAK,KAAA,EAAM;AAAA;AAAA;AAAA,GACvD;AAEJ;ACvBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MAEX;AAAA;AAAA,GACH;AAEJ","file":"chunk-KWWR5VMS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport interface ValueTableRowProps {\n  label: string | SafeHtml;\n  value: string | SafeHtml;\n  icon?: SafeHtml;\n  className?: string;\n  /** Render the value as an unanimated loading skeleton, keeping the field label. */\n  placeholder?: boolean;\n}\n\nexport function ValueTableRow({\n  label,\n  value,\n  icon,\n  className = '',\n  placeholder = false,\n}: ValueTableRowProps) {\n  return (\n    <div\n      class={`kui-value-table__row ${className}`.trim()}\n      data-has-icon={String(Boolean(icon))}\n      data-placeholder={placeholder ? 'true' : undefined}\n    >\n      <dt>\n        {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n        <span class=\"kui-value-table__label\">{label}</span>\n      </dt>\n      <dd>{placeholder ? <Skeleton width=\"10em\" /> : value}</dd>\n    </div>\n  );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nexport { ValueTableRow, type ValueTableRowProps } from './value-table-row.js';\n\nexport interface ValueTableProps {\n  label: string;\n  className?: string;\n  children: SafeHtml | readonly SafeHtml[];\n}\n\nexport function ValueTable({\n  label,\n  className = '',\n  children,\n}: ValueTableProps) {\n  return (\n    <dl\n      class={`kui-value-table ${className}`.trim()}\n      data-component=\"value-table\"\n      aria-label={label}\n    >\n      {children}\n    </dl>\n  );\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { Skeleton } from './chunk-PZQVSDLH.js';
+import { Skeleton } from './chunk-RKVQEH4J.js';
 import { LucideIcon } from './chunk-W2FK7ZNY.js';
 import { ChevronDown } from 'lucide';
 import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
@@ -114,4 +114,4 @@ function Select({
 
 export { Select };
 
-//# sourceMappingURL=chunk-K57KRAOV.js.map
+//# sourceMappingURL=chunk-NWSEP5RT.js.map