@kerfjs/ui 5.0.0-beta.8 → 5.0.0-beta.9

package/dist/{menu-header.d.ts → list-header.d.ts}

@@ -1,20 +1,20 @@
 import { SafeHtml } from 'kerfjs';
 
-type MenuHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-has-badge'?: never;
     'data-has-count'?: never;
     'data-toggle'?: never;
 }>;
-type MenuHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-action'?: never;
     popoverTarget?: string;
     popoverTargetAction?: 'toggle' | 'show' | 'hide';
     'aria-controls'?: string;
     'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';
 }>;
-interface MenuHeaderBaseProps {
+interface ListHeaderBaseProps {
     label: string;
     action?: string;
     actionLabel?: string;
@@ -25,10 +25,10 @@ interface MenuHeaderBaseProps {
     toggle?: boolean;
     /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
     placeholder?: boolean;
-    rootAttributes?: MenuHeaderRootAttributes;
-    triggerAttributes?: MenuHeaderTriggerAttributes;
+    rootAttributes?: ListHeaderRootAttributes;
+    triggerAttributes?: ListHeaderTriggerAttributes;
 }
-type MenuHeaderIndicatorProps = {
+type ListHeaderIndicatorProps = {
     count: number;
     countLabel: string;
     badge?: never;
@@ -37,7 +37,7 @@ type MenuHeaderIndicatorProps = {
     countLabel?: never;
     badge?: SafeHtml;
 };
-type MenuHeaderProps = MenuHeaderBaseProps & MenuHeaderIndicatorProps;
-declare function MenuHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes }: MenuHeaderProps): SafeHtml;
+type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps;
+declare function ListHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes }: ListHeaderProps): SafeHtml;
 
-export { MenuHeader, type MenuHeaderProps };
+export { ListHeader, type ListHeaderProps };

package/dist/list-header.js

@@ -0,0 +1,7 @@
+export { ListHeader } from './chunk-W5EQ3HYQ.js';
+
+
+
+
+
+//# sourceMappingURL=list-header.js.map

package/dist/list-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"list-header.js"}

package/dist/{menu-item.d.ts → list-item.d.ts}

@@ -1,6 +1,6 @@
 import { SafeHtml } from 'kerfjs';
 
-type MenuItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
@@ -8,7 +8,7 @@ type MenuItemRootAttributes = Readonly<Record<`data-${string}`, string | undefin
     'data-multiline'?: never;
     'data-state'?: never;
 }>;
-interface MenuItemProps {
+interface ListItemProps {
     label: string | SafeHtml;
     icon?: SafeHtml;
     trailing?: SafeHtml;
@@ -26,8 +26,8 @@ interface MenuItemProps {
     tabIndex?: number;
     /** Render the row as an unanimated loading skeleton, disabling its action. */
     placeholder?: boolean;
-    rootAttributes?: MenuItemRootAttributes;
+    rootAttributes?: ListItemRootAttributes;
 }
-declare function MenuItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes }: MenuItemProps): SafeHtml;
+declare function ListItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes }: ListItemProps): SafeHtml;
 
-export { MenuItem, type MenuItemProps };
+export { ListItem, type ListItemProps };

package/dist/list-item.js

@@ -0,0 +1,5 @@
+export { ListItem } from './chunk-L4OKFDJY.js';
+
+
+
+//# sourceMappingURL=list-item.js.map

package/dist/list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"list-item.js"}

package/dist/panel-header.js

@@ -1,4 +1,4 @@
-export { PanelHeader } from './chunk-BNQ2YDV4.js';
+export { PanelHeader } from './chunk-2TS7ZSYX.js';
 
 
 

package/dist/split-view.d.ts

@@ -31,7 +31,7 @@ interface SplitViewProps {
     className?: string;
 }
 /**
- * A list-detail (master-detail) split. On roomy classes it shows both panes side
+ * A list-detail split. On roomy classes it shows both panes side
  * by side with an optional resizable separator; on compact classes it collapses
  * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the
  * resizable wiring with `wireResizableRegions` and the compact back with

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,UAAU,EAAE,EAAA,EAAI,OAAO,IAAA,EAAM,MAAA,EAAQ,UAAU,KAAA,EAAO,YAAA,GAAe,OAAO,SAAA,GAAY,EAAA,EAAI,cAAc,EAAA,EAAI,SAAA,GAAY,QAAQ,SAAA,EAAW,SAAA,GAAY,IAAG,EAAmB;AAC7L,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,KAAA,GAAQ,YAAA,GACV,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAK,EAAG,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,MAAA,EAAQ,CAAA,GACzG,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBAAO,GAAA,CAAC,SAAI,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,mBAAgB,SAAA,EACnI,QAAA,kBAAA,GAAA,CAAC,YAAS,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,KAAA,EAAc,KAAA,EAAc,SAAA,EAAsB,CAAA,EACjF,CAAA;AAAA,EACF;AACA,EAAA,MAAM,QAAA,GAAW,SAAA,mBACb,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,KAAA,EAAO,aAAa,MAAA,EAAQ,IAAA,EAAM,SAAA,CAAU,IAAA,EAAM,KAAK,SAAA,CAAU,GAAA,EAAK,GAAA,EAAK,SAAA,CAAU,KACtH,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,mBAAe,IAAA,EAAE,QAAA,EAAA,IAAA,EAAK,CAAA,EACnE,CAAA,uBACC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MAAE,QAAA,EAAA,IAAA,EAAK,CAAA;AACrE,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,iBAAA,EAAgB,OAAA,EAAQ,cAAY,KAAA,EAC9H,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAI,KAAA,EAAM,iCAAA,EAAkC,qBAAiB,IAAA,EAAC,YAAA,EAAY,WAAA,IAAe,MAAA,EAAY,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC/G,CAAA;AACF","file":"split-view.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: SafeHtml;\n  /** The detail (secondary) pane. */\n  detail: SafeHtml;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n}\n\n/**\n * A list-detail (master-detail) split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = '', detailTitle = '', backLabel = 'Back', resizable, className = '' }: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [{ key: 'list', title: listTitle, content: list }, { key: 'detail', title: detailTitle, content: detail }]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return <div class={`kui-split-view kui-split-view--compact ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"compact\">\n      <NavStack id={`${id}-stack`} label={label} views={views} backLabel={backLabel} />\n    </div>;\n  }\n  const listPane = resizable\n    ? <ResizableRegion id={`${id}-list`} label={listTitle || 'List'} size={resizable.size} min={resizable.min} max={resizable.max}>\n        <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>\n      </ResizableRegion>\n    : <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>;\n  return <div class={`kui-split-view ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"split\" aria-label={label}>\n    {listPane}\n    <div class=\"kui-split-view__detail kui-pane\" data-split-detail aria-label={detailTitle || undefined}>{detail}</div>\n  </div>;\n}\n"]}
+{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,UAAU,EAAE,EAAA,EAAI,OAAO,IAAA,EAAM,MAAA,EAAQ,UAAU,KAAA,EAAO,YAAA,GAAe,OAAO,SAAA,GAAY,EAAA,EAAI,cAAc,EAAA,EAAI,SAAA,GAAY,QAAQ,SAAA,EAAW,SAAA,GAAY,IAAG,EAAmB;AAC7L,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,KAAA,GAAQ,YAAA,GACV,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAK,EAAG,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,MAAA,EAAQ,CAAA,GACzG,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBAAO,GAAA,CAAC,SAAI,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,mBAAgB,SAAA,EACnI,QAAA,kBAAA,GAAA,CAAC,YAAS,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,KAAA,EAAc,KAAA,EAAc,SAAA,EAAsB,CAAA,EACjF,CAAA;AAAA,EACF;AACA,EAAA,MAAM,QAAA,GAAW,SAAA,mBACb,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,KAAA,EAAO,aAAa,MAAA,EAAQ,IAAA,EAAM,SAAA,CAAU,IAAA,EAAM,KAAK,SAAA,CAAU,GAAA,EAAK,GAAA,EAAK,SAAA,CAAU,KACtH,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,mBAAe,IAAA,EAAE,QAAA,EAAA,IAAA,EAAK,CAAA,EACnE,CAAA,uBACC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MAAE,QAAA,EAAA,IAAA,EAAK,CAAA;AACrE,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,iBAAA,EAAgB,OAAA,EAAQ,cAAY,KAAA,EAC9H,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAI,KAAA,EAAM,iCAAA,EAAkC,qBAAiB,IAAA,EAAC,YAAA,EAAY,WAAA,IAAe,MAAA,EAAY,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC/G,CAAA;AACF","file":"split-view.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: SafeHtml;\n  /** The detail (secondary) pane. */\n  detail: SafeHtml;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = '', detailTitle = '', backLabel = 'Back', resizable, className = '' }: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [{ key: 'list', title: listTitle, content: list }, { key: 'detail', title: detailTitle, content: detail }]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return <div class={`kui-split-view kui-split-view--compact ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"compact\">\n      <NavStack id={`${id}-stack`} label={label} views={views} backLabel={backLabel} />\n    </div>;\n  }\n  const listPane = resizable\n    ? <ResizableRegion id={`${id}-list`} label={listTitle || 'List'} size={resizable.size} min={resizable.min} max={resizable.max}>\n        <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>\n      </ResizableRegion>\n    : <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>;\n  return <div class={`kui-split-view ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"split\" aria-label={label}>\n    {listPane}\n    <div class=\"kui-split-view__detail kui-pane\" data-split-detail aria-label={detailTitle || undefined}>{detail}</div>\n  </div>;\n}\n"]}

package/dist/styles/catalog.css

@@ -0,0 +1,482 @@
+.kui-catalog {
+  /* Collapsing the sidebar changes its grid column, which reflows the detail
+     pane. Animating that width relayouts the whole shell per frame, so the column
+     snaps instantly (one reflow) and the fixed-width sidebar slides via transform
+     only (composited, clipped by this shell's overflow). */
+  --kui-catalog-sidebar-width: 18rem;
+  --kui-catalog-content-measure: 70rem;
+
+  display: grid;
+  height: 100vh;
+  grid-template-columns: var(--kui-catalog-sidebar-width) minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.kui-catalog[data-sidebar-collapsed="true"] {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.kui-catalog__sidebar {
+  width: var(--kui-catalog-sidebar-width);
+  min-width: var(--kui-catalog-sidebar-width);
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+  justify-self: start;
+  border-inline-end: 1px solid var(--kui-color-border);
+  background: var(--kui-color-surface);
+  transition:
+    transform 200ms ease,
+    visibility 0s linear 0s;
+}
+
+.kui-catalog[data-sidebar-collapsed="true"] .kui-catalog__sidebar {
+  border-inline-end: 0;
+  /* Slide out first, then hide, so the panel animates offscreen and only then
+     leaves the tab order rather than snapping invisible mid-slide. */
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition:
+    transform 200ms ease,
+    visibility 0s linear 200ms;
+}
+
+.kui-catalog__brand {
+  border-block-end: 1px solid var(--kui-color-border);
+}
+
+.kui-catalog__brand .kui-toolbar {
+  padding: var(--kui-space-xs);
+}
+
+/* Scoped to the brand so it outranks the ToolbarControlGroup's own gap rule; a
+   single-class selector would lose that specificity and drop the logo→title gap,
+   which then misaligns the subtitle (whose padding assumes the gap is present). */
+.kui-catalog__brand .kui-catalog__identity {
+  min-width: 0;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+}
+
+.kui-catalog__identity h1,
+.kui-catalog__subtitle {
+  margin: 0;
+}
+
+.kui-catalog__identity h1 {
+  overflow: hidden;
+  font-size: var(--kui-font-m);
+  letter-spacing: 0.07em;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.kui-catalog__subtitle {
+  overflow: hidden;
+  margin-block-start: calc(-1 * var(--kui-space-xs));
+  padding-block-end: var(--kui-space-xs);
+  padding-inline: calc(
+      var(--kui-space-xs) + 0.125rem + 2.125rem +
+        var(--kui-layout-control-gap, 0.5rem)
+    )
+    var(--kui-space-xs);
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kui-catalog__mark {
+  display: block;
+  width: 2.125rem;
+  height: 2.125rem;
+  flex: 0 0 auto;
+}
+
+.kui-catalog__group {
+  margin-block-start: var(--kui-space-m);
+}
+
+.kui-catalog__group:first-child {
+  margin-block-start: var(--kui-space-2xs);
+}
+
+.kui-catalog__items {
+  display: grid;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-catalog__items .kui-list-item {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.kui-catalog__group--secondary {
+  padding-block-start: var(--kui-space-s);
+  border-block-start: 1px solid var(--kui-color-border-quiet);
+}
+
+.kui-catalog__secondary {
+  display: grid;
+  padding-block: var(--kui-space-xs);
+  gap: var(--kui-space-s);
+}
+
+.kui-catalog__secondary-group {
+  display: grid;
+  min-width: 0;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-catalog__secondary-heading {
+  margin: 0;
+  padding: 0.1rem 0.55rem;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-2xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.kui-catalog__secondary-group .kui-list-item {
+  padding-inline-start: 1rem;
+}
+
+/* Labeled, aligned preview examples (CatalogExample / CatalogExampleStack). */
+.kui-catalog-example-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kui-catalog-example {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+/* A ListHeader used as an example label shrinks to its title; one that is itself
+   the demoed specimen keeps its default full width. */
+.kui-catalog-example > .kui-list-header:first-child {
+  width: auto;
+}
+
+.kui-catalog-example__note {
+  /* Align the note text with the label above and a content-item specimen below:
+     all land at 8px margin + 1px border + 8px padding from the example's edge. */
+  margin: 0;
+  padding-inline: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+}
+
+/* The inset is published as --kui-catalog-example-align and applied as the
+   specimen's leading margin, so a debug overlay can exclude it from the measured
+   margin and never paint the alignment device as intrinsic geometry. */
+.kui-catalog-example[data-align="glyph"]
+  > :not(.kui-list-header):not(.kui-catalog-example__note) {
+  --kui-catalog-example-align: 1rem;
+  margin-inline-start: var(--kui-catalog-example-align);
+}
+
+.kui-catalog-example[data-align="inline-control"]
+  > :not(.kui-list-header):not(.kui-catalog-example__note) {
+  --kui-catalog-example-align: 0.5rem;
+  margin-inline-start: var(--kui-catalog-example-align);
+}
+
+.kui-catalog__detail {
+  min-width: 0;
+  height: 100%;
+  grid-column: 2;
+}
+
+.kui-catalog__header {
+  border-block-end: 1px solid var(--kui-color-border);
+  background: var(--kui-color-surface);
+}
+
+.kui-catalog__header .kui-toolbar {
+  padding-block-end: 0;
+}
+
+.kui-catalog__title {
+  min-width: 0;
+}
+
+.kui-catalog__title h2,
+.kui-catalog__description {
+  margin: 0;
+}
+
+.kui-catalog__title h2 {
+  overflow: hidden;
+  font-size: var(--kui-font-l);
+  letter-spacing: -0.025em;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kui-catalog__description {
+  max-width: var(--kui-catalog-content-measure, 70rem);
+  margin-block: 0 var(--kui-space-xs);
+  color: var(--kui-color-text-quiet);
+  background: transparent;
+  line-height: 1.45;
+}
+
+.kui-catalog__header-actions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--kui-layout-control-gap);
+}
+
+.kui-catalog__settings {
+  box-shadow: none;
+}
+
+.kui-catalog__settings > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.kui-catalog__settings > button:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+.kui-catalog__settings svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.kui-catalog__stage {
+  width: 100%;
+  background-color: var(--kui-color-surface-lowered);
+  background-image:
+    linear-gradient(
+      45deg,
+      color-mix(in srgb, var(--kui-color-border-quiet) 42%, transparent) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      -45deg,
+      color-mix(in srgb, var(--kui-color-border-quiet) 42%, transparent) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      45deg,
+      transparent 75%,
+      color-mix(in srgb, var(--kui-color-border-quiet) 42%, transparent) 75%
+    ),
+    linear-gradient(
+      -45deg,
+      transparent 75%,
+      color-mix(in srgb, var(--kui-color-border-quiet) 42%, transparent) 75%
+    );
+  background-position:
+    0 0,
+    0 0.75rem,
+    0.75rem -0.75rem,
+    -0.75rem 0;
+  background-size: 1.5rem 1.5rem;
+}
+
+.kui-catalog__canvas {
+  position: relative;
+  display: grid;
+  width: min(100%, var(--kui-catalog-content-measure, 70rem));
+  min-width: 0;
+  min-height: 100%;
+  margin-inline: auto;
+  padding: var(--kui-layout-content-gap);
+  box-sizing: border-box;
+  place-items: center;
+}
+
+.kui-catalog__footer {
+  --kui-toolbar-gap: 0.25rem;
+  --kui-toolbar-group-size: 2rem;
+
+  border-block-start: 1px solid var(--kui-color-border);
+  background: color-mix(
+    in srgb,
+    var(--kui-color-surface-lowered) 72%,
+    var(--kui-color-surface)
+  );
+}
+
+.kui-catalog__status {
+  display: flex;
+  min-height: 1.625rem;
+  padding: 0.375rem 0.75rem 0;
+  color: var(--kui-color-text-quiet);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kui-layout-control-gap);
+  font-size: var(--kui-font-xs);
+}
+
+.kui-catalog__footer .kui-toolbar {
+  min-height: 2.5rem;
+  padding: 0.25rem 0.5rem 0.5rem;
+}
+
+.kui-catalog__footer .kui-toolbar-control-group {
+  height: 2rem;
+  min-width: 2rem;
+}
+
+.kui-catalog__resources {
+  min-width: 0;
+}
+
+.kui-catalog__resource-group {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.kui-catalog__resource {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  min-width: 0;
+  height: 1.875rem;
+  padding: 0 var(--kui-space-xs);
+  border: 1px solid transparent;
+  border-radius: var(--kui-radius-pill);
+  color: var(--kui-color-text);
+  background: transparent;
+  text-decoration: none;
+  white-space: nowrap;
+  align-items: center;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-catalog__resource:hover {
+  border-color: var(--kui-color-border);
+  background: var(--kui-color-surface);
+}
+
+.kui-catalog__resource:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+.kui-catalog__resource svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* The optional monospace detail is a visually-hidden accessible affordance. */
+.kui-catalog__resource code {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.kui-catalog__related-group {
+  padding: 0;
+}
+
+.kui-catalog__related-select {
+  width: min(16.25rem, 100%);
+}
+
+@media (max-width: 64rem) {
+  .kui-catalog__settings button span {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog {
+    height: auto;
+    min-height: 100vh;
+    grid-template-columns: 1fr;
+  }
+  .kui-catalog[data-sidebar-collapsed="true"] {
+    grid-template-columns: 1fr;
+  }
+  .kui-catalog[data-sidebar-collapsed="true"] .kui-catalog__sidebar {
+    display: none;
+  }
+  .kui-catalog__sidebar {
+    width: 100%;
+    min-width: 0;
+    height: auto;
+    justify-self: stretch;
+    /* Narrow layout collapses via display:none, not the desktop slide. */
+    transform: none;
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--kui-color-border);
+  }
+  .kui-catalog__detail {
+    height: auto;
+    min-height: auto;
+    grid-column: 1;
+  }
+  .kui-catalog__sidebar nav {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
+    gap: 0.5rem 1rem;
+  }
+  .kui-catalog__group,
+  .kui-catalog__group:first-child {
+    min-width: 0;
+    margin: 0;
+  }
+  .kui-catalog__stage {
+    min-height: 24rem;
+  }
+  .kui-catalog__canvas {
+    min-height: 16rem;
+  }
+  .kui-catalog__status {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  /* Stack the footer's resource links above the related selector at narrow widths
+     instead of keeping them in one row. */
+  .kui-catalog__footer .kui-toolbar[data-has-center="false"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .kui-catalog__footer .kui-toolbar__leading,
+  .kui-catalog__resource-group {
+    width: 100%;
+  }
+  .kui-catalog__footer .kui-toolbar__trailing {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-catalog__sidebar {
+    transition-duration: 0s;
+  }
+}