@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.51

package/dist/split-view.js

@@ -1,6 +1,6 @@
-import { NavStack } from './chunk-AQFWBG23.js';
+import { NavStack } from './chunk-5PMGQDG7.js';
+import { ResizableRegion } from './chunk-VOCPXGQN.js';
 
-import { ResizableRegion } from './chunk-CAB6NQ2T.js';
 
 
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';
@@ -16,7 +16,8 @@ function SplitView({
   detailTitle = "",
   backLabel = "Back",
   resizable,
-  className = ""
+  className = "",
+  slot
 }) {
   if (compact) {
     const views = detailActive ? [
@@ -30,6 +31,7 @@ function SplitView({
         id,
         "data-component": "split-view",
         "data-split-mode": "compact",
+        slot,
         children: /* @__PURE__ */ jsx(
           NavStack,
           {
@@ -50,9 +52,25 @@ function SplitView({
       size: resizable.size,
       min: resizable.min,
       max: resizable.max,
-      children: /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          class: "kui-split-view__list kui-pane",
+          "data-split-list": true,
+          "data-resizable": "true",
+          children: list
+        }
+      )
     }
-  ) : /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list });
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-split-view__list kui-pane",
+      "data-split-list": true,
+      "data-resizable": "false",
+      children: list
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -61,6 +79,7 @@ function SplitView({
       "data-component": "split-view",
       "data-split-mode": "split",
       "aria-label": label,
+      slot,
       children: [
         listPane,
         /* @__PURE__ */ jsx(

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;;AA2CO,SAAS,SAAA,CAAU;AAAA,EACxB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,YAAA,GAAe,KAAA;AAAA,EACf,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,EAAA;AAAA,EACd,SAAA,GAAY,MAAA;AAAA,EACZ,SAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAmB;AACjB,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,QAAQ,YAAA,GACV;AAAA,MACE,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,SAAS,IAAA,EAAK;AAAA,MAC/C,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,SAAS,MAAA;AAAO,KACvD,GACA,CAAC,EAAE,GAAA,EAAK,QAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAClE,EAAA;AAAA,QACA,gBAAA,EAAe,YAAA;AAAA,QACf,iBAAA,EAAgB,SAAA;AAAA,QAEhB,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,YACT,KAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACA,EAAA,MAAM,WAAW,SAAA,mBACf,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MACT,OAAO,SAAA,IAAa,MAAA;AAAA,MACpB,MAAM,SAAA,CAAU,IAAA;AAAA,MAChB,KAAK,SAAA,CAAU,GAAA;AAAA,MACf,KAAK,SAAA,CAAU,GAAA;AAAA,MAEf,8BAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MACvD,QAAA,EAAA,IAAA,EACH;AAAA;AAAA,sBAGF,GAAA,CAAC,KAAA,EAAA,EAAI,OAAM,+BAAA,EAAgC,iBAAA,EAAe,MACvD,QAAA,EAAA,IAAA,EACH,CAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,EAAA;AAAA,MACA,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAgB,OAAA;AAAA,MAChB,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,iCAAA;AAAA,YACN,mBAAA,EAAiB,IAAA;AAAA,YACjB,cAAY,WAAA,IAAe,MAAA;AAAA,YAE1B,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ","file":"split-view.js","sourcesContent":["import { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.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: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\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({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  resizable,\n  className = '',\n}: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [\n          { key: 'list', title: listTitle, content: list },\n          { key: 'detail', title: detailTitle, content: detail },\n        ]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n    >\n      <div class=\"kui-split-view__list kui-pane\" data-split-list>\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div class=\"kui-split-view__list kui-pane\" data-split-list>\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;;AA6CO,SAAS,SAAA,CAAU;AAAA,EACxB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,YAAA,GAAe,KAAA;AAAA,EACf,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,EAAA;AAAA,EACd,SAAA,GAAY,MAAA;AAAA,EACZ,SAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAmB;AACjB,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,QAAQ,YAAA,GACV;AAAA,MACE,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,SAAS,IAAA,EAAK;AAAA,MAC/C,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,SAAS,MAAA;AAAO,KACvD,GACA,CAAC,EAAE,GAAA,EAAK,QAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAClE,EAAA;AAAA,QACA,gBAAA,EAAe,YAAA;AAAA,QACf,iBAAA,EAAgB,SAAA;AAAA,QAChB,IAAA;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,YACT,KAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACA,EAAA,MAAM,WAAW,SAAA,mBACf,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MACT,OAAO,SAAA,IAAa,MAAA;AAAA,MACpB,MAAM,SAAA,CAAU,IAAA;AAAA,MAChB,KAAK,SAAA,CAAU,GAAA;AAAA,MACf,KAAK,SAAA,CAAU,GAAA;AAAA,MAEf,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,+BAAA;AAAA,UACN,iBAAA,EAAe,IAAA;AAAA,UACf,gBAAA,EAAe,MAAA;AAAA,UAEd,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GACF,mBAEA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,+BAAA;AAAA,MACN,iBAAA,EAAe,IAAA;AAAA,MACf,gBAAA,EAAe,OAAA;AAAA,MAEd,QAAA,EAAA;AAAA;AAAA,GACH;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,EAAA;AAAA,MACA,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAgB,OAAA;AAAA,MAChB,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,iCAAA;AAAA,YACN,mBAAA,EAAiB,IAAA;AAAA,YACjB,cAAY,WAAA,IAAe,MAAA;AAAA,YAE1B,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ","file":"split-view.js","sourcesContent":["import { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.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: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\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  /** Native named-slot assignment when composed inside a web component. */\n  slot?: 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({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  resizable,\n  className = '',\n  slot,\n}: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [\n          { key: 'list', title: listTitle, content: list },\n          { key: 'detail', title: detailTitle, content: detail },\n        ]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n        slot={slot}\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n    >\n      <div\n        class=\"kui-split-view__list kui-pane\"\n        data-split-list\n        data-resizable=\"true\"\n      >\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div\n      class=\"kui-split-view__list kui-pane\"\n      data-split-list\n      data-resizable=\"false\"\n    >\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n      slot={slot}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/state-banner.d.ts

@@ -15,7 +15,9 @@ interface StateBannerProps {
     className?: string;
     /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. */
     placeholder?: boolean;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, className, placeholder, }: StateBannerProps): SafeHtml;
+declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, className, placeholder, slot, }: StateBannerProps): SafeHtml;
 
 export { StateBanner, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };

package/dist/state-banner.js

@@ -1,4 +1,5 @@
-export { StateBanner } from './chunk-UDHHKZWO.js';
+export { StateBanner } from './chunk-JM53SMVF.js';
+
 
 
 

package/dist/styles/badge.css

@@ -0,0 +1,86 @@
+.kui-badge {
+  --_kui-badge-fill-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-neutral-on-normal);
+  --_kui-badge-border: var(--kui-color-neutral-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+
+  display: inline-flex;
+  min-width: 0;
+  min-height: 1.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--_kui-badge-on-quiet);
+  background: var(--_kui-badge-fill-quiet);
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.kui-badge[data-tone="brand"] {
+  --_kui-badge-fill-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-brand-on-fill);
+  --_kui-badge-border: var(--kui-color-brand-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-brand-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="pop"] {
+  --_kui-badge-fill-quiet: var(--kui-color-pop-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-pop-on-fill);
+  --_kui-badge-border: var(--kui-color-pop-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-pop-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="success"] {
+  --_kui-badge-fill-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-success-on-fill);
+  --_kui-badge-border: var(--kui-color-success-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-success-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="warning"] {
+  --_kui-badge-fill-quiet: var(--kui-color-warning-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-warning-on-fill);
+  --_kui-badge-border: var(--kui-color-warning-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-warning-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="danger"] {
+  --_kui-badge-fill-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-danger-on-quiet);
+  --_kui-badge-border: var(--kui-color-danger-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-danger-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-appearance="solid"] {
+  color: var(--_kui-badge-on-solid);
+  background: var(--_kui-badge-fill-solid);
+}
+
+.kui-badge[data-appearance="outline"] {
+  border-color: var(--_kui-badge-border);
+  color: var(--_kui-badge-on-quiet);
+  background: transparent;
+}
+
+.kui-badge[data-shape="rounded"] {
+  border-radius: var(--kui-radius-s);
+}
+
+.kui-badge[data-size="compact"] {
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  padding-inline: 0.35rem;
+  font-size: var(--kui-font-2xs);
+}

package/dist/styles/catalog/components/catalog-detail.css

@@ -0,0 +1,35 @@
+.kui-catalog__detail {
+  display: grid;
+  min-width: 0;
+  min-height: 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__description {
+  max-width: var(--kui-catalog-content-measure, 70rem);
+  margin-block: 0;
+  background: transparent;
+}
+
+/* css-ownership: allow-root kui-catalog__detail-preview -- CatalogDetail assigns this class to its Pane content scroll owner. */
+.kui-catalog__detail-preview {
+  background-color: var(--kui-color-surface-lowered);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/svg%3E");
+  background-position: 0 0;
+  background-repeat: repeat;
+  background-size: 1.5rem 1.5rem;
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog__detail {
+    height: auto;
+    min-height: auto;
+    grid-column: 1;
+  }
+}

package/dist/styles/catalog/components/catalog-example-stack.css

@@ -0,0 +1,9 @@
+.kui-catalog-example-stack {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 46rem;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 1rem;
+}

package/dist/styles/catalog/components/catalog-example.css

@@ -0,0 +1,180 @@
+.kui-catalog-example {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.kui-catalog-example__note {
+  margin: 0;
+  padding-block: var(--kui-layout-item-padding, 0.5rem);
+  padding-inline: calc(
+    var(--kui-layout-inline-margin, 0.5rem) +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs);
+}
+
+.kui-catalog-example__viewport {
+  position: relative;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.kui-catalog-example__viewport > * {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.kui-catalog-example__viewport[data-layout="grid"] {
+  display: grid;
+}
+
+.kui-catalog-example__viewport[data-layout="flex"] {
+  display: flex;
+}
+
+.kui-catalog-example__viewport[data-layout="flex-column"] {
+  display: flex;
+  flex-direction: column;
+}
+
+.kui-catalog-example__viewport[data-width="full"] {
+  width: 100%;
+}
+
+.kui-catalog-example__viewport[data-width="compact"] {
+  width: min(100%, 27.5rem);
+}
+
+.kui-catalog-example__viewport[data-width="medium"] {
+  width: min(100%, 40rem);
+}
+
+.kui-catalog-example__viewport[data-width="wide"] {
+  width: 100%;
+  max-width: 54rem;
+}
+
+.kui-catalog-example__viewport[data-width="text"] {
+  width: 17.5rem;
+}
+
+.kui-catalog-example__viewport[data-width="control"] {
+  min-width: min(24rem, 100%);
+}
+
+.kui-catalog-example__viewport[data-height="short"] {
+  height: 13.75rem;
+}
+
+.kui-catalog-example__viewport[data-height="reduced"] {
+  height: 17.5rem;
+}
+
+.kui-catalog-example__viewport[data-height="medium"] {
+  height: 20rem;
+}
+
+.kui-catalog-example__viewport[data-height="tall"] {
+  height: 22.5rem;
+}
+
+/* An application-sized frame for app shells and whole-screen layouts, which
+   read cramped in the component-sized heights above. The frame stands in for
+   the screen, so it is the containing block for screen-fixed chrome: a compact
+   CollapsiblePanel overlay, its backdrop, and restore controls dock to the
+   frame's edges instead of the page's, where the frame's inset and clip would
+   cut them off. An identity transform establishes that containing block.
+   `contain: layout` does too, but WebKit then mis-hit-tests any transformed
+   descendant of that fixed chrome once the frame also clips (every pressed
+   ListItem scales), so taps on an open overlay's items were lost. */
+.kui-catalog-example__viewport[data-height="app"] {
+  height: 37rem;
+  transform: translate(0);
+}
+
+.kui-catalog-example__viewport[data-min-height="short"] {
+  min-height: 16rem;
+}
+
+.kui-catalog-example__viewport[data-min-height="medium"] {
+  min-height: 20rem;
+}
+
+.kui-catalog-example__viewport[data-frame] {
+  border: 1px solid var(--kui-color-border);
+  border-radius: var(--kui-radius-m);
+}
+
+.kui-catalog-example__viewport[data-frame="dashed"] {
+  border-style: dashed;
+}
+
+.kui-catalog-example__viewport[data-surface="default"] {
+  background: var(--kui-color-surface);
+}
+
+.kui-catalog-example__viewport[data-surface="lowered"] {
+  background: var(--kui-color-surface-lowered);
+}
+
+.kui-catalog-example__viewport[data-overflow="hidden"] {
+  overflow: hidden;
+}
+
+.kui-catalog-example__viewport[data-overflow="auto-x"] {
+  overflow-x: auto;
+}
+
+.kui-catalog-example__viewport[data-shadow="true"] {
+  box-shadow: var(--kui-shadow-s);
+}
+
+.kui-catalog-example__compact-fallback {
+  display: none;
+  margin: 0;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+}
+
+@media ((max-width: 52rem)) {
+  .kui-catalog-example__viewport[data-responsive="roomy-only"] {
+    display: none;
+  }
+
+  .kui-catalog-example__compact-fallback {
+    display: block;
+  }
+}
+
+@media ((max-width: 30rem)) {
+  .kui-catalog-example__viewport[data-min-height="medium"] {
+    min-height: 16rem;
+  }
+}
+
+@media ((forced-colors: active)) {
+  .kui-catalog-example__viewport[data-frame] {
+    forced-color-adjust: auto;
+  }
+}
+
+/* The published inset lets the geometry overlay exclude this authoring aid. */
+.kui-catalog-example[data-align="glyph"]
+  > :not([data-catalog-example-label]):not([data-catalog-example-note]) {
+  --kui-catalog-example-align: 1rem;
+  margin-inline-start: var(--kui-catalog-example-align);
+}
+
+.kui-catalog-example[data-align="inline-control"]
+  > :not([data-catalog-example-label]):not([data-catalog-example-note]) {
+  --kui-catalog-example-align: 0.5rem;
+  margin-inline-start: var(--kui-catalog-example-align);
+}

package/dist/styles/catalog/components/catalog-resource-footer.css

@@ -0,0 +1,37 @@
+.kui-catalog__footer {
+  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__related-heading {
+  display: block;
+  padding: 0.25rem var(--kui-wa-control-inset, 0.5rem) 0;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog__status {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}

package/dist/styles/catalog/components/catalog-secondary-sections.css

@@ -0,0 +1,38 @@
+.kui-catalog__group--secondary {
+  margin-block-start: var(--kui-space-m);
+  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 0.5rem;
+  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-items {
+  min-width: 0;
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog__group--secondary {
+    min-width: 0;
+    margin-block-start: 0;
+  }
+}

package/dist/styles/catalog/components/catalog-section-list.css

@@ -0,0 +1,22 @@
+.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 {
+  min-width: 0;
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog__group,
+  .kui-catalog__group:first-child {
+    min-width: 0;
+    margin: 0;
+  }
+}
+.kui-catalog__sections {
+  display: contents;
+}

package/dist/styles/catalog/components/catalog-sidebar.css

@@ -0,0 +1,82 @@
+.kui-catalog__sidebar {
+  display: grid;
+  width: var(--kui-catalog-sidebar-width);
+  min-width: var(--kui-catalog-sidebar-width);
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+  justify-self: start;
+  box-sizing: border-box;
+  border: 0 solid var(--kui-pane-separator-color, var(--kui-color-border));
+  border-inline-end-width: var(--kui-pane-separator-width, 1px);
+  background: var(--kui-color-surface);
+  transition:
+    transform 200ms ease,
+    visibility 0s linear 0s;
+}
+
+.kui-catalog__brand {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.kui-catalog__sidebar[data-collapsed="true"] {
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition:
+    transform 200ms ease,
+    visibility 0s linear 200ms;
+}
+
+.kui-catalog__mark {
+  display: block;
+  width: 2.125rem;
+  height: 2.125rem;
+  flex: 0 0 auto;
+}
+
+.kui-catalog__subtitle {
+  margin: 0;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs);
+}
+
+.kui-catalog__navigation {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--kui-layout-content-gap, 1.5rem);
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog__sidebar[data-collapsed="true"] {
+    display: none;
+  }
+
+  .kui-catalog__sidebar {
+    width: 100%;
+    min-width: 0;
+    height: auto;
+    justify-self: stretch;
+    border-block-end-width: var(--kui-pane-separator-width, 1px);
+    border-inline-end-width: 0;
+    transform: none;
+  }
+
+  .kui-catalog__navigation {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
+    gap: 0.5rem 1rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-catalog__sidebar {
+    transition-duration: 0s;
+  }
+}

package/dist/styles/catalog/components/catalog-stage.css

@@ -0,0 +1,60 @@
+.kui-catalog__stage {
+  width: 100%;
+  min-height: 0;
+  flex: 1 0 auto;
+}
+
+.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;
+}
+
+/* `wireCatalogGeometryOverlay` appends the bound, border, and margin layers. */
+/* css-ownership: allow-root kui-catalog__geometry-bound -- The catalog wire appends measured specimen bound layers at runtime. */
+/* css-ownership: allow-root kui-catalog__geometry-border -- The catalog wire appends computed border layers at runtime. */
+/* css-ownership: allow-root kui-catalog__geometry-margin -- The catalog wire appends computed margin layers at runtime. */
+.kui-catalog__geometry-overlay {
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  inset: 0;
+}
+
+.kui-catalog__geometry-bound,
+.kui-catalog__geometry-border,
+.kui-catalog__geometry-margin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+}
+
+.kui-catalog__geometry-bound {
+  border: 1px dashed color-mix(in srgb, var(--kui-color-text) 40%, transparent);
+}
+
+.kui-catalog__geometry-border {
+  border: 0 solid
+    color-mix(in srgb, var(--kui-color-accent-text) 72%, transparent);
+}
+
+.kui-catalog__geometry-margin {
+  background: color-mix(in srgb, #f6a94c 55%, transparent);
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog__stage {
+    min-height: 24rem;
+  }
+
+  .kui-catalog__canvas {
+    min-height: 16rem;
+  }
+}

package/dist/styles/catalog/components/catalog.css

@@ -0,0 +1,22 @@
+.kui-catalog {
+  --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);
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog,
+  .kui-catalog[data-sidebar-collapsed="true"] {
+    height: auto;
+    min-height: 100vh;
+    grid-template-columns: 1fr;
+  }
+}