@kerfjs/ui 5.0.0-beta.4 → 5.0.0-beta.7

package/dist/segmented-control.js

@@ -1,3 +1,4 @@
-export { SegmentedControl } from './chunk-TRNBHPNW.js';
+export { SegmentedControl } from './chunk-YGN7OMLT.js';
+
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/select.d.ts

@@ -18,11 +18,14 @@ interface SelectProps<Value extends string = string> {
     ariaLabel?: string;
     choices: readonly SelectChoice<Value>[];
     className?: string;
-    placeholder?: string;
+    /** Empty-value hint text shown in the closed control (the native select placeholder). */
+    placeholderText?: string;
     disabled?: boolean;
     fitMenu?: boolean;
     renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;
+    /** Render as an unanimated loading skeleton: the label above a static, empty control box. */
+    placeholder?: boolean;
 }
-declare function Select<Value extends string>({ name, value, label, ariaLabel, choices, className, placeholder, disabled, fitMenu, renderSelected }: SelectProps<Value>): SafeHtml;
+declare function Select<Value extends string>({ name, value, label, ariaLabel, choices, className, placeholderText, disabled, fitMenu, renderSelected, placeholder }: SelectProps<Value>): SafeHtml;
 
 export { Select, type SelectChoice, type SelectProps };

package/dist/select.js

@@ -1,4 +1,5 @@
-export { Select } from './chunk-CTQKI2XL.js';
+export { Select } from './chunk-LC3YSAZC.js';
+
 
 
 //# sourceMappingURL=select.js.map

package/dist/skeleton.d.ts

@@ -0,0 +1,24 @@
+import * as kerfjs from 'kerfjs';
+
+interface SkeletonProps {
+    /** Width as any CSS length (e.g. `remify(120px)`, `60%`). Defaults to filling its slot. */
+    width?: string;
+    /** Height as any CSS length. Defaults to a single text line. */
+    height?: string;
+    /** Corner radius override (a CSS length). Defaults to the small radius token. */
+    radius?: string;
+    /** Render this many stacked lines (the last one shorter), for multi-line text. */
+    lines?: number;
+    /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */
+    label?: string;
+    className?: string;
+}
+/**
+ * A subtle, deliberately **unanimated** loading placeholder block. Use it for a
+ * value slot whose content is not yet known, on its own or via a component's
+ * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to
+ * announce it. Sizes to its slot unless `width`/`height` are given.
+ */
+declare function Skeleton({ width, height, radius, lines, label, className }: SkeletonProps): kerfjs.SafeHtml;
+
+export { Skeleton, type SkeletonProps };

package/dist/skeleton.js

@@ -0,0 +1,3 @@
+export { Skeleton } from './chunk-B24C4A6T.js';
+
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

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

package/dist/split-view.d.ts

@@ -0,0 +1,42 @@
+import { SafeHtml } from 'kerfjs';
+
+interface SplitViewResizable {
+    size: number;
+    min: number;
+    max: number;
+}
+interface SplitViewProps {
+    id: string;
+    label: string;
+    /** The list (primary) pane. */
+    list: SafeHtml;
+    /** The detail (secondary) pane. */
+    detail: SafeHtml;
+    /**
+     * Compact ("one pane at a time") classes — a handset or portrait tablet.
+     * Derive from `deviceClass().value.compact`. When true the split collapses to
+     * a `NavStack`: the list is the root and the detail is pushed over it.
+     */
+    compact?: boolean;
+    /** In compact mode, whether the detail is currently pushed over the list. */
+    detailActive?: boolean;
+    /** Title/label for the list (compact NavStack root + region label). */
+    listTitle?: string;
+    /** Title/label for the detail (compact NavStack pushed view + region label). */
+    detailTitle?: string;
+    /** Back label for the compact NavStack (default "Back"). */
+    backLabel?: string;
+    /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */
+    resizable?: SplitViewResizable;
+    className?: string;
+}
+/**
+ * A list-detail (master-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
+ * `wireNavStack`.
+ */
+declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, resizable, className }: SplitViewProps): SafeHtml;
+
+export { SplitView, type SplitViewProps, type SplitViewResizable };

package/dist/split-view.js

@@ -0,0 +1,21 @@
+import { NavStack } from './chunk-N3SUXLLS.js';
+
+import { ResizableRegion } from './chunk-M5JRI6MN.js';
+
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
+
+function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = "", detailTitle = "", backLabel = "Back", resizable, className = "" }) {
+  if (compact) {
+    const views = detailActive ? [{ key: "list", title: listTitle, content: list }, { key: "detail", title: detailTitle, content: detail }] : [{ key: "list", title: listTitle, content: list }];
+    return /* @__PURE__ */ jsx("div", { class: `kui-split-view kui-split-view--compact ${className}`.trim(), id, "data-component": "split-view", "data-split-mode": "compact", children: /* @__PURE__ */ jsx(NavStack, { id: `${id}-stack`, label, views, backLabel }) });
+  }
+  const listPane = resizable ? /* @__PURE__ */ jsx(ResizableRegion, { id: `${id}-list`, label: listTitle || "List", 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 }) }) : /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list });
+  return /* @__PURE__ */ jsxs("div", { class: `kui-split-view ${className}`.trim(), id, "data-component": "split-view", "data-split-mode": "split", "aria-label": label, children: [
+    listPane,
+    /* @__PURE__ */ jsx("div", { class: "kui-split-view__detail kui-pane", "data-split-detail": true, "aria-label": detailTitle || void 0, children: detail })
+  ] });
+}
+
+export { SplitView };
+
+//# sourceMappingURL=split-view.js.map

package/dist/split-view.js.map

@@ -0,0 +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"]}

package/dist/state-banner.d.ts

@@ -9,7 +9,9 @@ interface StateBannerProps {
     tone?: StateBannerTone;
     urgency?: 'status' | 'alert';
     className?: string;
+    /** Render the title and detail as unanimated loading skeletons, keeping the icon and tone. */
+    placeholder?: boolean;
 }
-declare function StateBanner({ title, detail, icon, action, tone, urgency, className }: StateBannerProps): SafeHtml;
+declare function StateBanner({ title, detail, icon, action, tone, urgency, className, placeholder }: StateBannerProps): SafeHtml;
 
 export { StateBanner, type StateBannerProps, type StateBannerTone };

package/dist/state-banner.js

@@ -1,3 +1,4 @@
-export { StateBanner } from './chunk-VHW5YNIB.js';
+export { StateBanner } from './chunk-I7INRJO4.js';
+
 
 //# sourceMappingURL=state-banner.js.map

package/dist/styles/foundation.css

@@ -24,12 +24,33 @@
   --kui-font-l: var(--wa-font-size-l, 20px);
   --kui-font-2xl: var(--wa-font-size-2xl, 32px);
   --kui-font-weight-semibold: var(--wa-font-weight-semibold, 650);
+  /* Official spacing scale (see docs/layout.md "Spacing scale"). Five canonical
+     steps, each expressing one relationship — pick by how connected the elements
+     are, not by eye:
+       0px  --kui-space-none  no separation (elements read as one unit)
+       4px  --kui-space-2xs   very minor — connected, but readability/aesthetics
+                              demand a hair of air
+       8px  --kui-space-xs    standard — between elements within a group
+       16px --kui-space-m     minor — between homogeneous groups
+       24px --kui-space-l     major — between heterogeneous groups
+     --kui-space-s (12px) and --kui-space-xl (32px) are off the canonical rhythm;
+     reach for them only as deliberate exceptions, not as default steps. All
+     scalable values are remify-authored against the fixed 16px baseline. */
+  --kui-space-none: 0;
   --kui-space-2xs: var(--wa-space-2xs, 0.25rem);
   --kui-space-xs: var(--wa-space-xs, 0.5rem);
   --kui-space-s: var(--wa-space-s, 0.75rem);
   --kui-space-m: var(--wa-space-m, 1rem);
   --kui-space-l: var(--wa-space-l, 1.5rem);
   --kui-space-xl: var(--wa-space-xl, 2rem);
+  /* Device-class breakpoints, mirrored from @kerfjs/ui/device-class's
+     DEFAULT_BREAKPOINTS so CSS media queries and the reactive deviceClass()
+     signal read the same minimum widths. Authored as literal px (a media-query
+     boundary is a physical width, not a scalable length). */
+  --kui-bp-mobile: 360px;
+  --kui-bp-tablet: 720px;
+  --kui-bp-desktop: 1024px;
+  --kui-bp-xl-desktop: 1440px;
   --kui-layout-inline-margin: var(--kui-space-xs);
   --kui-layout-item-border-width: 1px;
   --kui-layout-item-padding: var(--kui-space-xs);

package/dist/styles/menu-header.css

@@ -93,10 +93,23 @@
 }
 
 .kui-menu-header__action {
+  /* A fitted square: the icon size plus its padding and 1px border, instead of a
+     forced 44px box that left an oversized halo around the ~18px icon and, via the
+     parent's align-items: stretch, a vertically stretched oval. `align-self:
+     center` keeps it centered in the header's 44px row without stretching. Sizing
+     off the icon variable keeps it square and correct at any icon size. */
+  --_kui-menu-header-action-size: calc(
+    var(--_kui-menu-header-action-icon-size) +
+      (2 * var(--kui-layout-item-padding, 0.5rem)) + 2px
+  );
   appearance: none;
-  width: 2.75rem;
-  height: 2.75rem;
+  display: inline-flex;
+  width: var(--_kui-menu-header-action-size);
+  height: var(--_kui-menu-header-action-size);
   padding: var(--kui-layout-item-padding, 0.5rem);
+  align-items: center;
+  justify-content: center;
+  align-self: center;
   cursor: pointer;
   flex: none;
 }
@@ -138,6 +151,10 @@
 
 .kui-menu-header__action > svg,
 .kui-menu-header__action-layer > svg {
+  /* min-block-size: 0 overrides the flex item's automatic minimum, which would
+     otherwise resolve to the icon SVG's intrinsic 24px viewBox height and stretch
+     the button past its used icon size. */
   width: var(--_kui-menu-header-action-icon-size);
   height: var(--_kui-menu-header-action-icon-size);
+  min-block-size: 0;
 }

package/dist/styles/nav-stack.css

@@ -0,0 +1,112 @@
+.kui-nav-stack {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  background: var(--kui-color-surface);
+}
+
+.kui-nav-stack__chrome {
+  display: flex;
+  min-width: 0;
+  min-height: calc(2px + 2.625rem);
+  padding-inline: var(--kui-space-xs);
+  border-block-end: 1px solid var(--kui-color-border);
+  align-items: center;
+  gap: var(--kui-space-xs);
+  background: var(--kui-color-surface);
+}
+
+.kui-nav-stack__lead {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-nav-stack__back {
+  display: grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  place-items: center;
+}
+
+.kui-nav-stack__back:hover {
+  border-color: var(--kui-color-border);
+  background: var(--kui-color-neutral-fill-normal);
+}
+
+.kui-nav-stack__back:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-nav-stack__back-icon {
+  display: block;
+}
+
+/* The title is ToolbarText (which owns its font, height, and ellipsis); it just
+   needs to flex to fill the lead zone beside the back control. */
+.kui-nav-stack__title {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.kui-nav-stack__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-nav-stack__viewport {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.kui-nav-stack__view {
+  position: absolute;
+  overflow: auto;
+  background: var(--kui-color-surface);
+  transition: transform 200ms ease;
+  inset: 0;
+}
+
+/* Only the active view (and any view mid-exit) is shown; lower entries stay
+   mounted for state/focus but hidden behind it. */
+.kui-nav-stack__view[data-nav-active="false"] {
+  visibility: hidden;
+}
+
+.kui-nav-stack__view[data-nav-exiting="true"] {
+  z-index: 1;
+  visibility: visible;
+}
+
+/* Push: the incoming view starts off the trailing edge and slides to rest.
+   Pop: the outgoing view starts at rest and slides off the trailing edge. */
+.kui-nav-stack__view--entering,
+.kui-nav-stack__view--exiting {
+  transform: translateX(100%);
+}
+
+.kui-nav-stack__bottom {
+  border-block-start: 1px solid var(--kui-color-border);
+  background: var(--kui-color-surface);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-nav-stack__view {
+    transition: none;
+  }
+}

package/dist/styles/panel-header.css

@@ -0,0 +1,64 @@
+.kui-panel-header {
+  display: grid;
+  width: 100%;
+  gap: 0;
+}
+
+/* The only chrome PanelHeader adds to the plain Toolbar: the icon group is a
+   normal (bordered) control group given a brand fill, with its border color set
+   to match the fill so it reads as a solid filled tile rather than a bordered
+   pill. Both are the group's own theming variables — no Toolbar style is
+   overridden. */
+.kui-panel-header__icon.kui-toolbar-control-group {
+  --kui-toolbar-control-background: var(
+    --kui-panel-header-icon-background,
+    var(--kui-color-brand-fill-quiet)
+  );
+  --kui-toolbar-control-border: var(
+    --kui-panel-header-icon-border,
+    var(--kui-color-brand-fill-quiet)
+  );
+  color: var(
+    --kui-panel-header-icon-foreground,
+    var(--kui-color-brand-on-quiet)
+  );
+  /* The icon is a raw svg child (not a button), so the group's default
+     flex-start alignment would pin it to the left of the filled tile. Center it
+     on both axes inside the circle. */
+  justify-content: center;
+}
+
+.kui-panel-header__icon svg {
+  display: block;
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
+/* The subtitle sits on its own row, its text left-aligned with the title text
+   (past the toolbar padding, the optional icon group + leading gap, and the
+   title's own inline padding). */
+.kui-panel-header__summary {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  padding-inline-start: var(--kui-panel-header-title-inset);
+  color: var(--kui-color-text-quiet);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kui-panel-header[data-has-icon="false"] {
+  --kui-panel-header-title-inset: calc(
+    var(--kui-toolbar-gap, 0.5rem) +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-panel-header[data-has-icon="true"] {
+  --kui-panel-header-title-inset: calc(
+    var(--kui-toolbar-gap, 0.5rem) +
+      var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      var(--kui-toolbar-gap, 0.5rem) +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}

package/dist/styles/select.css

@@ -94,3 +94,45 @@
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
+
+/* Loading placeholder: a static box that mirrors the closed combobox (label
+   above, a value skeleton and a dormant chevron inside a 44px control box).
+   Rendered instead of the interactive wa-select, so it needs no registration. */
+.kui-select--placeholder {
+  display: block;
+  width: 100%;
+}
+.kui-select__placeholder-label {
+  display: block;
+  margin-block-end: 0.25rem;
+  color: var(--kui-color-text);
+  font-size: var(--kui-font-s);
+  line-height: 1.4;
+}
+.kui-select__placeholder-box {
+  display: flex;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  border: 1px solid var(--kui-color-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(--kui-color-surface);
+}
+.kui-select__placeholder-box .kui-skeleton {
+  max-width: 10rem;
+}
+.kui-select__placeholder-chevron {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+  color: var(--kui-color-text-quiet);
+  transform: scale(var(--kui-disclosure-icon-scale, 0.85));
+}
+.kui-select__placeholder-chevron svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/dist/styles/skeleton.css

@@ -0,0 +1,31 @@
+.kui-skeleton {
+  --kui-skeleton-radius: var(--kui-radius-s);
+
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  height: 1em;
+  min-width: 1.5rem;
+  border-radius: var(--kui-skeleton-radius);
+  /* Deliberately unanimated: a flat, subtle fill that reads as "not yet loaded"
+     without drawing the eye or implying progress. */
+  background: color-mix(in srgb, var(--kui-color-text) 12%, transparent);
+  vertical-align: middle;
+}
+
+.kui-skeleton-lines {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-skeleton-lines .kui-skeleton {
+  height: 0.8em;
+}
+
+@media (forced-colors: active) {
+  .kui-skeleton {
+    background: GrayText;
+  }
+}

package/dist/styles/split-view.css

@@ -0,0 +1,35 @@
+.kui-split-view {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--kui-color-surface);
+}
+
+/* The list pane; when not resizable it takes an intrinsic column and the detail
+   grows to fill. A resizable list is sized by ResizableRegion instead. */
+.kui-split-view__list {
+  min-width: 0;
+  min-height: 0;
+  flex: 0 0 auto;
+  width: var(--kui-split-view-list-width, 20rem);
+  border-inline-end: 1px solid var(--kui-color-border);
+}
+
+.kui-split-view > .kui-resizable-region .kui-split-view__list {
+  width: 100%;
+  border-inline-end: 0;
+}
+
+.kui-split-view__detail {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Compact mode is a full-bleed NavStack. */
+.kui-split-view--compact {
+  display: block;
+  height: 100%;
+}

package/dist/styles/styles.css

@@ -11,12 +11,12 @@
 @import "./resizable-region.css";
 @import "./app-tab.css";
 @import "./tab-bar.css";
-@import "./page-header.css";
 @import "./loading-spinner.css";
+@import "./skeleton.css";
 @import "./select.css";
 @import "./segmented-control.css";
 @import "./token-search-field.css";
 @import "./state-banner.css";
 @import "./empty-state.css";
-@import "./dialog-header.css";
+@import "./panel-header.css";
 @import "./value-table.css";

package/dist/styles/tab-scaffold.css

@@ -0,0 +1,84 @@
+.kui-tab-scaffold {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold__scenes {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Every tab stays mounted (its NavStack keeps its stack and scroll); only the
+   active scene is shown. */
+.kui-tab-scaffold__scene {
+  position: absolute;
+  overflow: auto;
+  inset: 0;
+}
+
+.kui-tab-scaffold__scene[data-active="false"] {
+  visibility: hidden;
+}
+
+.kui-tab-scaffold__bar {
+  display: flex;
+  flex: 0 0 auto;
+  padding-block-start: var(--kui-space-2xs);
+  /* Respect the home-indicator safe area on iOS-class devices. */
+  padding-block-end: calc(
+    var(--kui-space-2xs) + env(safe-area-inset-bottom, 0px)
+  );
+  border-block-start: 1px solid var(--kui-color-border);
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold__tab {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: var(--kui-space-2xs) var(--kui-space-xs);
+  border: 0;
+  color: var(--kui-color-text-quiet);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.kui-tab-scaffold__tab[aria-selected="true"] {
+  color: var(--kui-color-accent-text);
+}
+
+.kui-tab-scaffold__tab:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+
+.kui-tab-scaffold__tab-icon {
+  display: grid;
+  place-items: center;
+}
+
+.kui-tab-scaffold__tab-icon svg {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
+.kui-tab-scaffold__tab-label {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: var(--kui-font-2xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}