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

package/dist/styles/toolbar.css

@@ -20,8 +20,44 @@
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
-.kui-toolbar[data-divider="true"] {
-  box-shadow: inset 0 -1px var(--kui-color-border);
+.kui-toolbar {
+  --_kui-toolbar-divider-top: transparent;
+  --_kui-toolbar-divider-right: transparent;
+  --_kui-toolbar-divider-bottom: transparent;
+  --_kui-toolbar-divider-left: transparent;
+  box-shadow:
+    inset 0 1px var(--_kui-toolbar-divider-top),
+    inset -1px 0 var(--_kui-toolbar-divider-right),
+    inset 0 -1px var(--_kui-toolbar-divider-bottom),
+    inset 1px 0 var(--_kui-toolbar-divider-left);
+}
+
+.kui-toolbar[divider-sides*="t"] {
+  --_kui-toolbar-divider-top: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="r"] {
+  --_kui-toolbar-divider-right: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="b"] {
+  --_kui-toolbar-divider-bottom: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="l"] {
+  --_kui-toolbar-divider-left: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
 }
 
 .kui-toolbar__leading,
@@ -33,16 +69,25 @@
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
 
+/* Pin each zone to its column so a display:none (empty) leading or center zone
+   doesn't let the trailing zone auto-place into the first column — which left an
+   extra gap + empty track to the trailing zone's right (KF-5BEF2M). The trailing
+   zone anchors to the last column via -2/-1, so it stays flush right for both
+   the 3- and 2-column layouts, and still stacks under the leading zone when a
+   consumer collapses the toolbar to a single column. */
 .kui-toolbar__leading {
+  grid-column: 1;
   overflow: hidden;
 }
 
 .kui-toolbar__center {
   justify-content: center;
+  grid-column: 2;
 }
 
 .kui-toolbar__trailing {
   justify-content: flex-end;
+  grid-column: -2 / -1;
 }
 
 .kui-toolbar[data-has-center="false"] .kui-toolbar__center,

package/dist/styles/webawesome.css

@@ -175,6 +175,19 @@
     --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
     --wa-form-control-border-radius: var(--wa-border-radius-m);
     --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
+    /* Field inset: a 1px border with 8px inside it, the same content-item
+       geometry the Kerf primitives use (docs/layout.md). WA's defaults are a
+       larger 0.75em/1em pad; this brings every form field onto our 8px rhythm
+       (and a ~40px single-line control height). */
+    --wa-form-control-border-width: var(--kui-layout-item-border-width, 1px);
+    --wa-form-control-padding-block: var(
+      --kui-layout-item-padding,
+      0.5rem
+    );
+    --wa-form-control-padding-inline: var(
+      --kui-layout-item-padding,
+      0.5rem
+    );
     --wa-panel-border-radius: var(--wa-border-radius-l);
     --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
     --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
@@ -184,6 +197,13 @@
     --kui-wa-carousel-dot-hit-size: 20px;
     --kui-wa-carousel-control-size: 28px;
     --kui-wa-carousel-icon-size: 16px;
+    /* Non-field chrome uses Kerf's control, surface, and container spacing:
+       8px inside controls/surfaces, 8px around bordered surfaces, and 16px
+       inside the remaining content containers. */
+    --kui-wa-control-inset: var(--kui-layout-item-padding, 0.5rem);
+    --kui-wa-surface-inset: var(--kui-layout-item-padding, 0.5rem);
+    --kui-wa-surface-margin: var(--kui-layout-inline-margin, 0.5rem);
+    --kui-wa-container-inset: var(--kui-space-m, 1rem);
     --kui-disclosure-icon-scale: 0.5;
     --wa-shadow-s: 0 1px 3px rgb(0 0 0 / 0.14);
     --wa-shadow-m: 0 0.35rem 1rem rgb(0 0 0 / 0.11);
@@ -248,9 +268,160 @@
     transform: scale(var(--kui-disclosure-icon-scale));
   }
 
+  /* Bordered/fill surfaces follow the same 8px outer margin + 8px inner
+     padding contract as a Kerf content item. Accordion owns one outer margin
+     for the group; its items retain connected borders. */
+  :is(wa-accordion, wa-card, wa-details, wa-callout, wa-include) {
+    margin-inline: var(--kui-wa-surface-margin);
+  }
+
+  wa-card,
+  wa-details,
+  wa-accordion-item {
+    /* WA declares this custom property on :host inside each shadow root. The
+       important flag is required for a public host override to cross that
+       encapsulation boundary. */
+    --spacing: var(--kui-wa-surface-inset) !important;
+  }
+
+  /* Card halves --spacing for its header block padding upstream, so pin the
+     public part to the same full surface inset as its body and footer. */
+  wa-card::part(header) {
+    border-bottom: none;
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  wa-card::part(body) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  wa-card::part(footer) {
+    border-top: none;
+    padding: var(--kui-wa-container-inset);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--kui-layout-item-gap, 0.5rem);
+  }
+
+  /* Dialog content follows the compact surface inset, while its action region
+     retains the roomier homogeneous-group step. Keep these independent of
+     Web Awesome's shared --spacing property so applications can tune the
+     header without accidentally moving body or footer content. */
+  wa-dialog::part(header) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  wa-dialog::part(body) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  wa-dialog::part(footer) {
+    padding: var(--kui-wa-container-inset);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--kui-layout-item-gap, 0.5rem);
+  }
+
+  /* Dialogs that provide their own dismissal affordance can opt out of Web
+     Awesome's header action region without reaching through the shadow root.
+     `header-actions` is a directly exported part, so it must be targeted from
+     the host rather than chained through the `dialog` and `header` parts. */
+  wa-dialog.hide-actions::part(header-actions) {
+    display: none;
+  }
+
+  wa-callout {
+    padding: var(--kui-wa-surface-inset) !important;
+  }
+
+  wa-include {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  /* Interactive and item chrome follows the content-item 8px inset. */
+  wa-tab::part(tab) {
+    padding: var(--kui-wa-control-inset);
+  }
+
+  wa-tab-panel {
+    --padding: var(--kui-wa-container-inset) 0 !important;
+  }
+
+  wa-tree-item::part(item) {
+    margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+    padding-inline-end: var(--kui-wa-control-inset);
+    border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  }
+
+  wa-tag {
+    padding-inline: var(--kui-wa-control-inset) !important;
+  }
+
+  wa-dropdown-item {
+    padding-inline: var(--kui-wa-control-inset) !important;
+  }
+
   wa-popover {
     --arrow-size: var(--kui-wa-popover-arrow-size);
   }
+
+  /* A form field's top label is inset by the field's own border + inline padding
+     (1px + 8px = 9px) so the label text lines up with the value inside the field,
+     and it is styled exactly like a ListHeader label: uppercase, xs, quiet. */
+  :is(
+    wa-checkbox-group,
+    wa-color-picker,
+    wa-input,
+    wa-known-date,
+    wa-number-input,
+    wa-radio-group,
+    wa-select,
+    wa-textarea,
+    wa-time-input
+  )::part(form-control-label),
+  wa-otp-input::part(label),
+  wa-slider::part(label) {
+    padding-inline: calc(
+      var(--wa-form-control-border-width) +
+        var(--wa-form-control-padding-inline)
+    );
+    color: var(--kui-color-neutral-on-quiet, var(--wa-color-text-quiet));
+    font-size: var(--kui-font-xs, var(--wa-font-size-xs));
+    font-weight: 650;
+    letter-spacing: 0.04em;
+    line-height: var(--wa-line-height-condensed);
+    text-transform: uppercase;
+  }
+
+  /* Checkbox/radio groups and the color picker have no bordered field shell,
+     so their control regions need the content-item's 8px inline outer inset. */
+  :is(wa-checkbox-group, wa-color-picker, wa-radio-group)::part(
+    form-control-input
+  ) {
+    margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  }
+
+  wa-slider::part(slider) {
+    margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  }
+
+  /* Secondary captions and hints align with the value inside bordered fields:
+     1px border + 8px field padding = a 9px logical inset. */
+  wa-known-date::part(field-label),
+  :is(
+    wa-input,
+    wa-known-date,
+    wa-number-input,
+    wa-otp-input,
+    wa-select,
+    wa-textarea,
+    wa-time-input
+  )::part(hint) {
+    padding-inline: calc(
+      var(--wa-form-control-border-width) +
+        var(--wa-form-control-padding-inline)
+    );
+  }
 }
 
 @media (prefers-contrast: more) {

package/dist/styles/workbench.css

@@ -0,0 +1,187 @@
+.kui-workbench {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--kui-color-surface);
+}
+
+/* Side rails. Collapsing snaps the flex track to zero (one reflow) while the
+   fixed-width content slides out via transform (composited, clipped) — never a
+   per-frame width animation. See docs/18 / the KF-7QKJRK catalog sidebar. */
+.kui-workbench__rail {
+  flex: 0 0 var(--kui-workbench-rail-width, 17.5rem);
+  min-width: 0;
+  overflow: hidden;
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench__rail--left {
+  border-inline-end: 1px solid var(--kui-color-border);
+}
+
+.kui-workbench__rail--right {
+  border-inline-start: 1px solid var(--kui-color-border);
+}
+
+.kui-workbench__rail[data-collapsed="true"] {
+  flex-basis: 0;
+  border-inline: 0;
+}
+
+.kui-workbench__rail[data-separator="hidden"],
+.kui-workbench__drawer[data-separator="hidden"] {
+  border-color: transparent;
+}
+
+.kui-workbench__center {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.kui-workbench__main {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Bottom drawer — the vertical analogue of a rail. */
+.kui-workbench__drawer {
+  position: relative;
+  flex: 0 0 var(--kui-workbench-drawer-height, 13.75rem);
+  min-height: 0;
+  overflow: hidden;
+  border-block-start: 1px solid var(--kui-color-border);
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench__drawer[data-collapsed="true"] {
+  flex-basis: 0;
+  border-block-start: 0;
+}
+
+.kui-workbench__rail[data-content-overflow="auto"],
+.kui-workbench__drawer[data-content-overflow="auto"] {
+  overflow: auto;
+}
+
+.kui-workbench__rail[data-content-overflow="visible"],
+.kui-workbench__drawer[data-content-overflow="visible"] {
+  z-index: var(--kui-workbench-popup-z, 5);
+  overflow: visible;
+}
+
+/* The fixed-size sliding content. The rail/drawer keeps a definite size on its
+   content so the transform reads as a slide, not a squeeze. */
+.kui-workbench__rail .kui-workbench__panel-content {
+  width: var(--kui-workbench-rail-width, 17.5rem);
+  height: 100%;
+  transition: transform 200ms ease;
+}
+
+.kui-workbench__drawer .kui-workbench__panel-content {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  width: 100%;
+  height: var(--kui-workbench-drawer-height, 13.75rem);
+  transition: transform 200ms ease;
+}
+
+.kui-workbench__rail[data-collapse-motion="none"] .kui-workbench__panel-content,
+.kui-workbench__drawer[data-collapse-motion="none"]
+  .kui-workbench__panel-content {
+  transition: none;
+}
+
+.kui-workbench__rail[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  .kui-workbench__panel-content,
+.kui-workbench__drawer[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  .kui-workbench__panel-content {
+  opacity: 0;
+}
+
+.kui-workbench__rail--left[data-collapsed="true"]
+  .kui-workbench__panel-content {
+  transform: translateX(-100%);
+}
+
+.kui-workbench__rail--right[data-collapsed="true"]
+  .kui-workbench__panel-content {
+  transform: translateX(100%);
+}
+
+.kui-workbench__drawer[data-collapsed="true"] .kui-workbench__panel-content {
+  transform: translateY(100%);
+}
+
+.kui-workbench__rail[data-presentation="overlay"],
+.kui-workbench__drawer[data-presentation="overlay"] {
+  position: absolute;
+  z-index: var(--kui-workbench-overlay-z, 41);
+  max-width: var(--kui-workbench-overlay-max-width, 85vw);
+  max-height: var(--kui-workbench-overlay-max-height, 85vh);
+  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+}
+
+.kui-workbench__rail[data-presentation="overlay"] {
+  inset-block: 0;
+}
+
+.kui-workbench__rail--left[data-presentation="overlay"] {
+  inset-inline-start: 0;
+}
+
+.kui-workbench__rail--right[data-presentation="overlay"] {
+  inset-inline-end: 0;
+}
+
+.kui-workbench__drawer[data-presentation="overlay"] {
+  inset-inline: 0;
+  inset-block-end: 0;
+}
+
+.kui-workbench__rail[data-presentation="overlay"][data-collapsed="true"],
+.kui-workbench__drawer[data-presentation="overlay"][data-collapsed="true"] {
+  pointer-events: none;
+}
+
+.kui-workbench__rail[data-presentation="hidden"],
+.kui-workbench__drawer[data-presentation="hidden"] {
+  display: none;
+}
+
+.kui-workbench__restore {
+  position: fixed;
+  z-index: var(--kui-workbench-restore-z, 42);
+  inset-block-end: calc(
+    var(--kui-workbench-restore-inset, 1rem) +
+      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+}
+
+.kui-workbench__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--kui-workbench-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+}
+
+.kui-workbench__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--kui-workbench-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-workbench__panel-content {
+    transition: none;
+  }
+}

package/dist/sunken-panel.d.ts

@@ -0,0 +1,20 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type SunkenPanelShape = 'rounded' | 'square';
+interface SunkenPanelProps {
+    children?: KerfUiContent;
+    /** Optional accessible landmark name for a distinct application region. */
+    ariaLabel?: string;
+    /** Corner shape: a rounded rectangle (default) or square corners. */
+    shape?: SunkenPanelShape;
+    className?: string;
+}
+/**
+ * A lowered application surface with one compact inset and a vertical content
+ * stack. The panel owns its background and padding; children own their own
+ * borders and internal geometry.
+ */
+declare function SunkenPanel({ children, ariaLabel, shape, className, }: SunkenPanelProps): kerfjs.SafeHtml;
+
+export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape };

package/dist/sunken-panel.js

@@ -0,0 +1,3 @@
+export { SunkenPanel } from './chunk-SOK5EUF7.js';
+
+//# sourceMappingURL=sunken-panel.js.map

package/dist/sunken-panel.js.map

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

package/dist/surface-scaffold.d.ts

@@ -0,0 +1,26 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type DialogSurfaceSize = 'small' | 'medium' | 'large';
+type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen';
+type SurfaceInset = 'none' | 'compact' | 'comfortable';
+interface DialogSurfaceProps {
+    children: KerfUiContent;
+    size?: DialogSurfaceSize;
+    presentation?: DialogSurfacePresentation;
+    bodyInset?: SurfaceInset;
+    footerInset?: SurfaceInset;
+    className?: string;
+}
+/** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */
+declare function DialogSurface({ children, size, presentation, bodyInset, footerInset, className, }: DialogSurfaceProps): kerfjs.SafeHtml;
+type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';
+interface PopupSurfaceProps {
+    children: KerfUiContent;
+    inset?: PopupSurfaceInset;
+    className?: string;
+}
+/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
+declare function PopupSurface({ children, inset, className, }: PopupSurfaceProps): kerfjs.SafeHtml;
+
+export { DialogSurface, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceSize, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };

package/dist/surface-scaffold.js

@@ -0,0 +1,3 @@
+export { DialogSurface, PopupSurface } from './chunk-WSXUPSID.js';
+
+//# sourceMappingURL=surface-scaffold.js.map

package/dist/surface-scaffold.js.map

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

package/dist/tab-bar.d.ts

@@ -1,14 +1,32 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+type TabActivation = 'automatic' | 'manual';
+type TabBarAllocation = 'intrinsic' | 'fill';
+type TabBarPresentation = 'rail' | 'segmented' | 'inspector';
+type TabBarTrailingPlacement = 'separate' | 'adjacent';
 interface TabBarProps {
     id: string;
     label: string;
-    children: SafeHtml | readonly SafeHtml[];
-    leading?: SafeHtml;
-    trailing?: SafeHtml;
+    children: KerfUiContent;
+    leading?: KerfUiContent;
+    trailing?: KerfUiContent;
     className?: string;
+    /**
+     * Keyboard activation mode for this strip, emitted as `data-tab-activation` for
+     * `wireTabBars` to read (overrides its `activation` option). `'automatic'` (default)
+     * selects on arrow / Home / End; `'manual'` moves roving focus only and the user
+     * selects with Enter / Space / click — use it when selecting a tab is a heavy action.
+     */
+    activation?: TabActivation;
+    /** How available strip width is allocated across child AppTabs. */
+    allocation?: TabBarAllocation;
+    /** Named strip chrome for application rails, segmented tabs, or inspectors. */
+    presentation?: TabBarPresentation;
+    /** Keep a trailing action beside the final tab or at the far edge of the bar. */
+    trailingPlacement?: TabBarTrailingPlacement;
 }
 /** Render a controlled tab strip. The application owns selection, order, and persistence. */
-declare function TabBar({ id, label, children, leading, trailing, className }: TabBarProps): SafeHtml;
+declare function TabBar({ id, label, children, leading, trailing, className, activation, allocation, presentation, trailingPlacement, }: TabBarProps): kerfjs.SafeHtml;
 
-export { TabBar, type TabBarProps };
+export { type TabActivation, TabBar, type TabBarAllocation, type TabBarPresentation, type TabBarProps, type TabBarTrailingPlacement };

package/dist/tab-bar.js

@@ -1,3 +1,3 @@
-export { TabBar } from './chunk-MBR3TYNL.js';
+export { TabBar } from './chunk-ZPWZIVI6.js';
 
 //# sourceMappingURL=tab-bar.js.map

package/dist/tab-scaffold.d.ts

@@ -0,0 +1,31 @@
+import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+interface TabScaffoldTab<Id extends string = string> {
+    id: Id;
+    label: string;
+    /** Decorative icon shown above the label in the bottom bar. */
+    icon?: SafeHtml;
+    /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */
+    content: KerfUiContent;
+}
+interface TabScaffoldProps<Id extends string = string> {
+    id: string;
+    /** Accessible name for the tab bar. */
+    label: string;
+    tabs: readonly TabScaffoldTab<Id>[];
+    /** The controlled active tab id (the app owns selection). */
+    active: NoInfer<Id>;
+    className?: string;
+}
+/**
+ * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches
+ * between major sections, each tab keeping its own content (usually a `NavStack`)
+ * mounted so its stack and scroll survive a switch. Controlled — the app owns
+ * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.
+ * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of
+ * a bottom bar. See `docs/23-app-layouts.md` §3.4.
+ */
+declare function TabScaffold<Id extends string>({ id, label, tabs, active, className, }: TabScaffoldProps<Id>): SafeHtml;
+
+export { TabScaffold, type TabScaffoldProps, type TabScaffoldTab };

package/dist/tab-scaffold.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/tab-scaffold.tsx
+function TabScaffold({
+  id,
+  label,
+  tabs,
+  active,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-tab-scaffold ${className}`.trim(),
+      id,
+      "data-component": "tab-scaffold",
+      "data-tab-scaffold-id": id,
+      children: [
+        /* @__PURE__ */ jsx("div", { class: "kui-tab-scaffold__scenes", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-tab-scaffold__scene",
+            "data-tab-scaffold-scene": tab.id,
+            "data-active": String(tab.id === active),
+            "aria-hidden": String(tab.id !== active),
+            children: tab.content
+          }
+        )) }),
+        /* @__PURE__ */ jsx("nav", { class: "kui-tab-scaffold__bar", role: "tablist", "aria-label": label, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-tab-scaffold__tab",
+            role: "tab",
+            "data-tab-scaffold-tab": tab.id,
+            "aria-selected": String(tab.id === active),
+            tabindex: tab.id === active ? "0" : "-1",
+            children: [
+              tab.icon && /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-icon", "aria-hidden": "true", children: tab.icon }),
+              /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-label", children: tab.label })
+            ]
+          }
+        )) })
+      ]
+    }
+  );
+}
+
+export { TabScaffold };
+
+//# sourceMappingURL=tab-scaffold.js.map

package/dist/tab-scaffold.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":";;;AA+BO,SAAS,WAAA,CAA+B;AAAA,EAC7C,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAyB;AACvB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,EAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,sBAAA,EAAsB,EAAA;AAAA,MAEtB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,0BAAA,EACR,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,yBAAA;AAAA,YACN,2BAAyB,GAAA,CAAI,EAAA;AAAA,YAC7B,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACrC,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YAEpC,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,SAER,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAwB,IAAA,EAAK,SAAA,EAAU,YAAA,EAAY,KAAA,EAC3D,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,uBAAA;AAAA,YACN,IAAA,EAAK,KAAA;AAAA,YACL,yBAAuB,GAAA,CAAI,EAAA;AAAA,YAC3B,eAAA,EAAe,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACvC,QAAA,EAAU,GAAA,CAAI,EAAA,KAAO,MAAA,GAAS,GAAA,GAAM,IAAA;AAAA,YAEnC,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,IAAA,wBACF,MAAA,EAAA,EAAK,KAAA,EAAM,8BAA6B,aAAA,EAAY,MAAA,EAClD,cAAI,IAAA,EACP,CAAA;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAAA,EAA+B,cAAI,KAAA,EAAM;AAAA;AAAA;AAAA,SAExD,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport interface TabScaffoldTab<Id extends string = string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: KerfUiContent;\n}\n\nexport interface TabScaffoldProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabScaffoldTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  className?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabScaffold<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  className = '',\n}: TabScaffoldProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            aria-hidden={String(tab.id !== active)}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => (\n          <button\n            type=\"button\"\n            class=\"kui-tab-scaffold__tab\"\n            role=\"tab\"\n            data-tab-scaffold-tab={tab.id}\n            aria-selected={String(tab.id === active)}\n            tabindex={tab.id === active ? '0' : '-1'}\n          >\n            {tab.icon && (\n              <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                {tab.icon}\n              </span>\n            )}\n            <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n          </button>\n        ))}\n      </nav>\n    </section>\n  );\n}\n"]}

package/dist/text.d.ts

@@ -0,0 +1,20 @@
+import * as kerfjs from 'kerfjs';
+import { KerfBaseAttrs } from 'kerfjs/jsx-runtime';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+type TextContent = KerfUiContent | string | number | readonly TextContent[];
+type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
+    /** Native heading or paragraph element to render. */
+    variant: TextVariant;
+    children: TextContent;
+    class?: string;
+    className?: string;
+};
+/**
+ * Semantic heading or paragraph text with the standard content-item padding.
+ * All ordinary native heading/paragraph attributes pass through to the element.
+ */
+declare function Text({ variant: Variant, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;
+
+export { Text, type TextContent, type TextProps, type TextVariant };

package/dist/text.js

@@ -0,0 +1,3 @@
+export { Text } from './chunk-ZASJJMGV.js';
+
+//# sourceMappingURL=text.js.map