@kerfjs/ui 5.0.0-beta.72 → 5.0.0-beta.74

package/ai/component-catalog.json

@@ -342,6 +342,7 @@
         "--kui-font-s",
         "--kui-font-m",
         "--kui-font-l",
+        "--kui-font-xl",
         "--kui-font-2xl",
         "--kui-font-weight-semibold",
         "--kui-space-none",
@@ -2869,7 +2870,7 @@
       "category": "Navigation",
       "kind": "component",
       "source": "kerf",
-      "description": "Configurable section headings with full-width or shrink-wrapped inline presentation, semantic count/status indicators, density, group dividers, a logical-end action, disclosure states, and protected native-popover trigger metadata.",
+      "description": "Configurable section headings with five independent label sizes, full-width or shrink-wrapped inline presentation, semantic count/status indicators, density, group dividers, a logical-end action, disclosure states, and protected native-popover trigger metadata.",
       "uses": [
         "badge",
         "lucide-icon",
@@ -2904,6 +2905,7 @@
       ],
       "variants": [
         "heading",
+        "label sizes xs, sm (default), m, l, xl",
         "count",
         "badge",
         "action",

package/ai/component-composition.json

@@ -282,6 +282,7 @@
           "--kui-font-s",
           "--kui-font-m",
           "--kui-font-l",
+          "--kui-font-xl",
           "--kui-font-2xl",
           "--kui-font-weight-semibold",
           "--kui-space-none",

package/ai/components/foundation.md

@@ -55,7 +55,7 @@ Margin: none · border: none · padding: none (layout role: foundation). `self`
 
 The component owns its own styles. Configure it through its props and variants; do not override its internals.
 
-Public tokens it reads: `--kui-font-sans`, `--kui-font-mono`, `--kui-font-2xs`, `--kui-font-xs`, `--kui-font-s`, `--kui-font-m`, `--kui-font-l`, `--kui-font-2xl`, `--kui-font-weight-semibold`, `--kui-space-none`, `--kui-space-2xs`, `--kui-space-xs`, `--kui-space-s`, `--kui-space-m`, `--kui-space-l`, `--kui-space-xl`, `--kui-bp-mobile`, `--kui-bp-tablet`, `--kui-bp-desktop`, `--kui-bp-xl-desktop`, `--kui-layout-inline-margin`, `--kui-layout-item-border-width`, `--kui-layout-item-padding`, `--kui-layout-item-gap`, `--kui-layout-content-gap`, `--kui-layout-control-gap`, `--kui-layout-metadata-gap`, `--kui-layout-highlight-inset`, `--kui-layout-rounded-radius`, `--kui-layout-pill-radius`, `--kui-toolbar-group-inner-size`, `--kui-toolbar-group-size`, `--kui-toolbar-gap`, `--kui-safe-area-block-start`, `--kui-safe-area-block-end`, `--kui-safe-area-inline-start`, `--kui-safe-area-inline-end`, `--kui-radius-s`, `--kui-radius-m`, `--kui-radius-l`, `--kui-radius-circle`, `--kui-radius-pill`, `--kui-disclosure-icon-scale`, `--kui-color-surface`, `--kui-color-surface-raised`, `--kui-color-surface-lowered`, `--kui-color-text`, `--kui-color-text-quiet`, `--kui-color-text-link`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-fill-normal`, `--kui-color-neutral-fill-loud`, `--kui-color-neutral-border-quiet`, `--kui-color-neutral-border-normal`, `--kui-color-neutral-border-loud`, `--kui-color-neutral-on-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-loud`, `--kui-color-brand-fill-loud`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-fill-normal`, `--kui-color-brand-border-quiet`, `--kui-color-brand-border-normal`, `--kui-color-brand-border-loud`, `--kui-color-brand-on-quiet`, `--kui-color-brand-on-normal`, `--kui-color-brand-on-loud`, `--kui-color-brand-on-fill`, `--kui-color-pop-fill-loud`, `--kui-color-pop-fill-quiet`, `--kui-color-pop-fill-normal`, `--kui-color-pop-border-quiet`, `--kui-color-pop-border-normal`, `--kui-color-pop-border-loud`, `--kui-color-pop-on-quiet`, `--kui-color-pop-on-normal`, `--kui-color-pop-on-loud`, `--kui-color-pop-on-fill`, `--kui-color-success-fill-loud`, `--kui-color-success-fill-quiet`, `--kui-color-success-fill-normal`, `--kui-color-success-border-quiet`, `--kui-color-success-border-normal`, `--kui-color-success-border-loud`, `--kui-color-success-on-quiet`, `--kui-color-success-on-normal`, `--kui-color-success-on-loud`, `--kui-color-success-on-fill`, `--kui-color-warning-fill-loud`, `--kui-color-warning-fill-quiet`, `--kui-color-warning-fill-normal`, `--kui-color-warning-border-quiet`, `--kui-color-warning-border-normal`, `--kui-color-warning-border-loud`, `--kui-color-warning-on-quiet`, `--kui-color-warning-on-normal`, `--kui-color-warning-on-loud`, `--kui-color-warning-on-fill`, `--kui-color-danger-fill-loud`, `--kui-color-danger-fill-quiet`, `--kui-color-danger-fill-normal`, `--kui-color-danger-border-quiet`, `--kui-color-danger-border-normal`, `--kui-color-danger-border-loud`, `--kui-color-danger-on-quiet`, `--kui-color-danger-on-normal`, `--kui-color-danger-on-loud`, `--kui-color-danger-on-fill`, `--kui-focus-ring`, `--kui-shadow-s`, `--kui-shadow-l`. Set a token only where its public contract allows; prefer a prop.
+Public tokens it reads: `--kui-font-sans`, `--kui-font-mono`, `--kui-font-2xs`, `--kui-font-xs`, `--kui-font-s`, `--kui-font-m`, `--kui-font-l`, `--kui-font-xl`, `--kui-font-2xl`, `--kui-font-weight-semibold`, `--kui-space-none`, `--kui-space-2xs`, `--kui-space-xs`, `--kui-space-s`, `--kui-space-m`, `--kui-space-l`, `--kui-space-xl`, `--kui-bp-mobile`, `--kui-bp-tablet`, `--kui-bp-desktop`, `--kui-bp-xl-desktop`, `--kui-layout-inline-margin`, `--kui-layout-item-border-width`, `--kui-layout-item-padding`, `--kui-layout-item-gap`, `--kui-layout-content-gap`, `--kui-layout-control-gap`, `--kui-layout-metadata-gap`, `--kui-layout-highlight-inset`, `--kui-layout-rounded-radius`, `--kui-layout-pill-radius`, `--kui-toolbar-group-inner-size`, `--kui-toolbar-group-size`, `--kui-toolbar-gap`, `--kui-safe-area-block-start`, `--kui-safe-area-block-end`, `--kui-safe-area-inline-start`, `--kui-safe-area-inline-end`, `--kui-radius-s`, `--kui-radius-m`, `--kui-radius-l`, `--kui-radius-circle`, `--kui-radius-pill`, `--kui-disclosure-icon-scale`, `--kui-color-surface`, `--kui-color-surface-raised`, `--kui-color-surface-lowered`, `--kui-color-text`, `--kui-color-text-quiet`, `--kui-color-text-link`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-fill-normal`, `--kui-color-neutral-fill-loud`, `--kui-color-neutral-border-quiet`, `--kui-color-neutral-border-normal`, `--kui-color-neutral-border-loud`, `--kui-color-neutral-on-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-loud`, `--kui-color-brand-fill-loud`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-fill-normal`, `--kui-color-brand-border-quiet`, `--kui-color-brand-border-normal`, `--kui-color-brand-border-loud`, `--kui-color-brand-on-quiet`, `--kui-color-brand-on-normal`, `--kui-color-brand-on-loud`, `--kui-color-brand-on-fill`, `--kui-color-pop-fill-loud`, `--kui-color-pop-fill-quiet`, `--kui-color-pop-fill-normal`, `--kui-color-pop-border-quiet`, `--kui-color-pop-border-normal`, `--kui-color-pop-border-loud`, `--kui-color-pop-on-quiet`, `--kui-color-pop-on-normal`, `--kui-color-pop-on-loud`, `--kui-color-pop-on-fill`, `--kui-color-success-fill-loud`, `--kui-color-success-fill-quiet`, `--kui-color-success-fill-normal`, `--kui-color-success-border-quiet`, `--kui-color-success-border-normal`, `--kui-color-success-border-loud`, `--kui-color-success-on-quiet`, `--kui-color-success-on-normal`, `--kui-color-success-on-loud`, `--kui-color-success-on-fill`, `--kui-color-warning-fill-loud`, `--kui-color-warning-fill-quiet`, `--kui-color-warning-fill-normal`, `--kui-color-warning-border-quiet`, `--kui-color-warning-border-normal`, `--kui-color-warning-border-loud`, `--kui-color-warning-on-quiet`, `--kui-color-warning-on-normal`, `--kui-color-warning-on-loud`, `--kui-color-warning-on-fill`, `--kui-color-danger-fill-loud`, `--kui-color-danger-fill-quiet`, `--kui-color-danger-fill-normal`, `--kui-color-danger-border-quiet`, `--kui-color-danger-border-normal`, `--kui-color-danger-border-loud`, `--kui-color-danger-on-quiet`, `--kui-color-danger-on-normal`, `--kui-color-danger-on-loud`, `--kui-color-danger-on-fill`, `--kui-focus-ring`, `--kui-shadow-s`, `--kui-shadow-l`. Set a token only where its public contract allows; prefer a prop.
 
 Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
 

package/ai/components/list-header.md

@@ -4,7 +4,7 @@
 
 `@kerfjs/ui:list-header` · Kerf UI · component · Navigation
 
-Configurable section headings with full-width or shrink-wrapped inline presentation, semantic count/status indicators, density, group dividers, a logical-end action, disclosure states, and protected native-popover trigger metadata.
+Configurable section headings with five independent label sizes, full-width or shrink-wrapped inline presentation, semantic count/status indicators, density, group dividers, a logical-end action, disclosure states, and protected native-popover trigger metadata.
 
 ## When to use
 
@@ -34,6 +34,7 @@ Exact prop names and types: [`@kerfjs/ui/list-header`](../public-api-signatures-
 **Variants (configure, do not restyle):**
 
 - heading
+- label sizes xs, sm (default), m, l, xl
 - count
 - badge
 - action

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.72` and `kerfjs@5.0.0-beta.72`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.74` and `kerfjs@5.0.0-beta.74`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -527,6 +527,7 @@ type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undef
     'data-has-badge'?: never;
     'data-has-count'?: never;
     'data-density'?: never;
+    'data-size'?: never;
     'data-divider'?: never;
     'data-inline'?: never;
     'data-width'?: never;
@@ -543,6 +544,8 @@ type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | un
 }>;
 interface ListHeaderBaseProps {
     label: string;
+    /** Visual label size, independent of the native heading level. Default `sm`. */
+    size?: 'xs' | 'sm' | 'm' | 'l' | 'xl';
     density?: 'standard' | 'compact';
     divider?: 'none' | 'before' | 'after' | 'both';
     /** Shrink-wrap the header without its default outer margin, border, or padding. */
@@ -614,7 +617,7 @@ type ListHeaderIndicatorProps = {
     status?: SafeHtml;
 };
 type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
-declare function ListHeader({ label, headingLevel, count, countLabel, badge, status, density, divider, inline, width, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, slot, }: ListHeaderProps): SafeHtml;
+declare function ListHeader({ label, size, headingLevel, count, countLabel, badge, status, density, divider, inline, width, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, slot, }: ListHeaderProps): SafeHtml;
 
 export { ListHeader, type ListHeaderProps };
 ```

package/ai/skill.md

@@ -253,6 +253,8 @@ Use `--kui-resizable-region-background` for a region surface and `contentOverflo
 
 Use `ListItem density="spacious"` for larger option rows, `multiline` plus `multilineIconAlign="center"` when its icon should center on wrapped copy, `divider` for row separators, and `state="drag-target"` for the drop target treatment. Public `--kui-list-item-*` tokens adjust row, icon, label, and trailing geometry and color; ListHeader height, title padding, and border tokens adjust section density.
 
+Set `ListHeader.size` to `xs`, `sm`, `m`, `l`, or `xl` for label scale. The default `sm` remains the small uppercase style shared with `FieldLabel`; `xs` is 2xs and capitalized, while `m`/`l`/`xl` match themed h5/h4/h3 typography. Choose `headingLevel` separately from the document outline.
+
 For a filled command list, scope `--kui-list-item-background`, `--kui-list-item-color`, `--kui-list-item-border`, `--kui-list-item-hover-background`, `--kui-list-item-hover-border`, `--kui-list-item-selected-background`, `--kui-list-item-selected-color`, and `--kui-list-item-selected-border` at the List or ListItem boundary. Keep global neutral and brand border colors semantic.
 
 Use `Toolbar responsive="trailing-priority"` when an expanded trailing search needs a full second row below its heading at `responsiveAt`. Configure a leading minimum width, trailing gap and justification, or zone inline padding with the public `--kui-toolbar-*` tokens rather than selectors into toolbar zones.

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.72` 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.74` 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/component-ownership.mjs

@@ -55,6 +55,8 @@ function isWebAwesomeTagEntry(entry) {
 export function componentOwnershipFacts(entries) {
   const classOwners = new Map();
   const blockOwners = new Map();
+  const classCoOwners = new Map();
+  const blockCoOwners = new Map();
   const dataComponentOwners = new Map();
   const tagOwners = new Map();
   const descendantRootAttributeOwners = [];
@@ -79,6 +81,23 @@ export function componentOwnershipFacts(entries) {
       styles.has(resolve(right.catalogDirectory, path)),
     );
   };
+  const recordOwner = (owners, coOwners, key, entry) => {
+    const previous = owners.get(key);
+    if (!owners.has(key)) owners.set(key, entry);
+    else if (
+      previous?.key !== entry.key &&
+      previous &&
+      sharesStylesheet(previous, entry)
+    ) {
+      owners.set(key, null);
+      coOwners.set(key, [previous, entry]);
+    } else if (
+      previous === null &&
+      coOwners.get(key).some((owner) => sharesStylesheet(owner, entry)) &&
+      !coOwners.get(key).some((owner) => owner.key === entry.key)
+    )
+      coOwners.get(key).push(entry);
+  };
   for (const entry of entries) {
     const boundaries = entry.boundaries ?? {};
     if (boundaries.rootElement && boundaries.descendantRootAttribute)
@@ -88,17 +107,9 @@ export function componentOwnershipFacts(entries) {
         Boolean,
       ),
     )) {
-      const previous = classOwners.get(className);
-      if (!classOwners.has(className)) classOwners.set(className, entry);
-      else if (previous && sharesStylesheet(previous, entry))
-        // The class is co-owned. A selector cannot attribute it to one
-        // component without depending on catalog order.
-        classOwners.set(className, null);
+      recordOwner(classOwners, classCoOwners, className, entry);
       const block = bemBlock(className);
-      const previousBlock = blockOwners.get(block);
-      if (!blockOwners.has(block)) blockOwners.set(block, entry);
-      else if (previousBlock && sharesStylesheet(previousBlock, entry))
-        blockOwners.set(block, null);
+      recordOwner(blockOwners, blockCoOwners, block, entry);
       if (
         className.startsWith('kui-') &&
         !className.includes('__') &&
@@ -133,6 +144,8 @@ export function componentOwnershipFacts(entries) {
   return {
     classOwners,
     blockOwners,
+    classCoOwners,
+    blockCoOwners,
     dataComponentOwners,
     tagOwners,
     descendantRootAttributeOwners,
@@ -147,8 +160,8 @@ export function componentOwnershipFacts(entries) {
  * cataloged anatomy class. `:has()` / `:not()` arguments are removed because
  * keying on or excluding a component does not style it. A subject that is a
  * `::part()` is left to the shadow-part rule (`KUI-L011`).
- * Returns `{ entry, via, name }` records; `isForeign(entry)` decides which
- * entries the stylesheet does not own.
+ * Returns `{ entry, via, name }` records, or `{ coOwners, via, name }` for a
+ * shared class. `isForeign(entry)` decides which owners the stylesheet lacks.
  */
 export function restyledComponents(
   selectorList,
@@ -171,17 +184,32 @@ export function restyledComponents(
     seen.add(key);
     found.push({ entry, via, name });
   };
+  const addCoOwners = (className) => {
+    if (classOwnerFor(facts, className, componentMode) !== null) return;
+    const owners =
+      facts.classCoOwners.get(className) ??
+      (componentMode
+        ? facts.blockCoOwners.get(bemBlock(className))
+        : undefined);
+    if (!owners || !owners.every((entry) => isForeign(entry))) return;
+    const name = `.${className}`;
+    if (seen.has(`co-owned|class|${name}`)) return;
+    seen.add(`co-owned|class|${name}`);
+    found.push({ coOwners: owners, via: 'class', name });
+  };
   for (const parts of complexSelectorParts(selectorList)) {
     const subject = parts.at(-1)?.compound;
     if (!subject || /::part\(/i.test(subject)) continue;
     const bare = withoutRelationalArguments(subject);
     const subjectClasses = classNames(bare);
-    for (const className of classNames(bare))
+    for (const className of subjectClasses) {
       add(
         classOwnerFor(facts, className, componentMode),
         'class',
         `.${className}`,
       );
+      addCoOwners(className);
+    }
     for (const value of dataComponents(bare))
       add(
         facts.dataComponentOwners.get(value),

package/analyzer/index.mjs

@@ -715,17 +715,21 @@ function inspectComponentOwnership(
     isForeign,
     ownershipEvidence,
   );
-  for (const { entry, via, name } of restyled)
+  for (const { entry, coOwners, via, name } of restyled)
     diagnostics.push(
       diagnostic(
         'KUI-L019',
         location(file, rule),
-        via === 'descendant'
-          ? `\`${name}\` reaches an unclassed descendant inside ${componentLabel(entry)} (${properties.join(', ')}); components own their styles. Use a child combinator or an own class to target your element, or configure the child through ${configurationFor(entry)}. ${reportGap(entry)}`
-          : `\`${name}\` makes ${componentLabel(entry)} the subject of an application rule (${properties.join(', ')}); components own their styles. Configure it through ${configurationFor(entry)}. To place your own content in its context, style your own element (\`${name} > .your-element\`). ${reportGap(entry)}`,
+        coOwners
+          ? `\`${name}\` makes a class co-owned by ${coOwners.map((owner) => componentLabel(owner)).join(', ')} the subject of an application rule (${properties.join(', ')}); those components own their styles. Configure an owning component or style your own element instead.`
+          : via === 'descendant'
+            ? `\`${name}\` reaches an unclassed descendant inside ${componentLabel(entry)} (${properties.join(', ')}); components own their styles. Use a child combinator or an own class to target your element, or configure the child through ${configurationFor(entry)}. ${reportGap(entry)}`
+            : `\`${name}\` makes ${componentLabel(entry)} the subject of an application rule (${properties.join(', ')}); components own their styles. Configure it through ${configurationFor(entry)}. To place your own content in its context, style your own element (\`${name} > .your-element\`). ${reportGap(entry)}`,
         {
           selector: rule.selector,
-          component: entry.key,
+          ...(coOwners
+            ? { components: coOwners.map((owner) => owner.key) }
+            : { component: entry.key }),
           via,
           target: name,
           properties,
@@ -1856,6 +1860,11 @@ export async function analyzeUiProject({
     ownership === 'component'
       ? await ownershipGroupEntries(ownershipGroups, root, contents)
       : [];
+  const groupStyles = new Set(
+    groupEntries.flatMap((entry) =>
+      entry.styleSources.map((style) => resolve(entry.catalogDirectory, style)),
+    ),
+  );
   const profileContexts = new Map();
   const loadContext = async (file) => {
     const startDirectory = file === root ? root : dirname(file);
@@ -1880,12 +1889,32 @@ export async function analyzeUiProject({
           const ownershipEntries = [
             ...entries,
             ...groupEntries,
-            ...implicitEntries.filter(
-              (entry) =>
-                !catalogedSources.has(
-                  resolve(entry.catalogDirectory, entry.componentSource),
-                ),
-            ),
+            ...implicitEntries.flatMap((entry) => {
+              const source = resolve(
+                entry.catalogDirectory,
+                entry.componentSource,
+              );
+              if (catalogedSources.has(source)) return [];
+              if (
+                groupEntries.some((group) => {
+                  const relativeSource = relative(
+                    group.catalogDirectory,
+                    source,
+                  ).replaceAll('\\', '/');
+                  return group.ownershipGroupSources.some((path) =>
+                    path.endsWith('/')
+                      ? relativeSource.startsWith(path)
+                      : relativeSource === path,
+                  );
+                })
+              )
+                return [];
+              const styleSources = entry.styleSources.filter(
+                (style) =>
+                  !groupStyles.has(resolve(entry.catalogDirectory, style)),
+              );
+              return styleSources.length ? [{ ...entry, styleSources }] : [];
+            }),
           ];
           return {
             profileResult,

package/dist/app-tab.js

@@ -1,4 +1,4 @@
-export { AppTab } from './chunk-Q6YU3BT7.js';
+export { AppTab } from './chunk-7KHKLG5C.js';
 
 
 

package/dist/badge.js

@@ -1,3 +1,3 @@
-export { Badge } from './chunk-MP2GDBQZ.js';
+export { Badge } from './chunk-ALGYHYXP.js';
 
 //# sourceMappingURL=badge.js.map

package/dist/catalog.js

@@ -1,14 +1,14 @@
-import { Workbench } from './chunk-3UE24JSC.js';
+import { Workbench } from './chunk-33EOFAUN.js';
 
 
-import { PopupMenu } from './chunk-J3KGJ6P6.js';
+import { PopupMenu } from './chunk-4NG4Y2Q6.js';
 
 import { Row } from './chunk-VZOFZPSO.js';
-import { ListHeader } from './chunk-M6DEEBEF.js';
+import { ListHeader } from './chunk-RU2EMR56.js';
 import { Text } from './chunk-YDGNU2OD.js';
 import { ListInsetText } from './chunk-DG6G5EPF.js';
-import { ListItem } from './chunk-NC4CFOID.js';
-import { ToolbarText } from './chunk-R5F5XUJ7.js';
+import { ListItem } from './chunk-6LAQWWEX.js';
+import { ToolbarText } from './chunk-IJNYCPAU.js';
 
 
 
@@ -18,7 +18,7 @@ import { ToolbarText } from './chunk-R5F5XUJ7.js';
 
 import { List } from './chunk-W2AC6Q2A.js';
 
-import { ToolbarControlGroup, ToolbarActionLink } from './chunk-QJ5VFCW3.js';
+import { ToolbarControlGroup, ToolbarActionLink } from './chunk-BGD7EHUE.js';
 import { Toolbar } from './chunk-RGS4WX2M.js';
 import { LucideIcon } from './chunk-WTSNV5RG.js';
 
@@ -136,7 +136,8 @@ function CatalogSectionEntries({
         status: entry.tags?.join(" \xB7 "),
         selected: active === entry.id,
         title: entry.description,
-        multiline: true
+        multiline: true,
+        rootAttributes: { "data-catalog-entry-name": entry.name }
       }
     )) })
   ] });
@@ -148,25 +149,43 @@ function CatalogSecondarySections({
   toggleAction
 }) {
   const open = !group.collapsible || Boolean(group.expanded);
-  return /* @__PURE__ */ jsxs(List, { dividerSides: "t", controlInsets: "t", children: [
-    group.collapsible ? /* @__PURE__ */ jsx(
-      ListHeader,
-      {
-        label: group.label,
-        toggle: true,
-        expanded: open,
-        action: toggleAction
-      }
-    ) : /* @__PURE__ */ jsx(ListHeader, { label: group.label }),
-    open ? /* @__PURE__ */ jsx(List, { gap: "m", rootAttributes: { "data-catalog-secondary": "" }, children: group.sections.map((section) => /* @__PURE__ */ jsx(
-      CatalogSectionEntries,
-      {
-        section,
-        active,
-        selectAction
-      }
-    )) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    List,
+    {
+      dividerSides: "t",
+      controlInsets: "t",
+      rootAttributes: { "data-catalog-secondary-group": group.label },
+      children: [
+        group.collapsible ? /* @__PURE__ */ jsx(
+          ListHeader,
+          {
+            label: group.label,
+            toggle: true,
+            expanded: open,
+            action: toggleAction
+          }
+        ) : /* @__PURE__ */ jsx(ListHeader, { label: group.label }),
+        /* @__PURE__ */ jsx(
+          List,
+          {
+            gap: "m",
+            rootAttributes: {
+              "data-catalog-secondary": "",
+              "data-catalog-secondary-collapsed": String(!open)
+            },
+            children: group.sections.map((section) => /* @__PURE__ */ jsx(
+              CatalogSectionEntries,
+              {
+                section,
+                active,
+                selectAction
+              }
+            ))
+          }
+        )
+      ]
+    }
+  );
 }
 function CatalogSectionList({
   sections,
@@ -193,6 +212,17 @@ function CatalogSidebar({
 }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": `${brand.title} components`, children: /* @__PURE__ */ jsxs(List, { gap: "m", controlInsets: "b", children: [
     brand.subtitle ? /* @__PURE__ */ jsx(ListInsetText, { sides: "rl", children: /* @__PURE__ */ jsx(Text, { variant: "span", size: "compact", tone: "quiet", children: brand.subtitle }) }) : null,
+    /* @__PURE__ */ jsx(ListInsetText, { sides: "rl", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        class: "kui-catalog__filter",
+        type: "search",
+        "aria-label": "Filter catalog",
+        placeholder: "Filter items or headings",
+        autocomplete: "off",
+        "data-catalog-filter": true
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       CatalogSectionList,
       {
@@ -210,6 +240,14 @@ function CatalogSidebar({
         toggleAction: toggleSecondaryAction
       }
     ) : null,
+    /* @__PURE__ */ jsx(
+      ListInsetText,
+      {
+        sides: "rl",
+        rootAttributes: { "data-catalog-filter-empty": "" },
+        children: /* @__PURE__ */ jsx(Text, { variant: "span", tone: "quiet", children: "No matching items" })
+      }
+    ),
     footer
   ] }) });
 }