@kerfjs/ui 4.4.1 → 5.0.0-beta.10

package/dist/styles/toolbar.css

@@ -0,0 +1,61 @@
+.kui-toolbar {
+  display: grid;
+  width: 100%;
+  min-height: calc(
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-gap, 0.5rem))
+  );
+  padding: var(--kui-toolbar-gap, 0.5rem);
+  box-sizing: border-box;
+  color: var(--kui-color-text);
+  background: transparent;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+  container: kui-toolbar / inline-size;
+  font-family: var(--kui-font-sans);
+}
+
+.kui-toolbar[data-has-center="false"] {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.kui-toolbar[data-divider="true"] {
+  box-shadow: inset 0 -1px var(--kui-color-border);
+}
+
+.kui-toolbar__leading,
+.kui-toolbar__center,
+.kui-toolbar__trailing {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  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,
+.kui-toolbar__leading:empty,
+.kui-toolbar__trailing:empty {
+  display: none;
+}

package/dist/styles/value-table.css

@@ -0,0 +1,75 @@
+.kui-value-table {
+  --kui-value-table-background: var(--kui-color-surface-lowered);
+  --kui-value-table-border: var(--kui-color-border);
+  --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
+  display: grid;
+  margin-block: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  overflow: hidden;
+  border: 1px solid var(--kui-value-table-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(--kui-value-table-background);
+}
+.kui-value-table__row {
+  --_kui-value-table-inline-padding: var(
+    --kui-layout-item-padding,
+    0.5rem
+  );
+  --_kui-value-table-separator-start: var(--_kui-value-table-inline-padding);
+  position: relative;
+  display: grid;
+  min-height: 2.55rem;
+  padding-block: 0.5rem;
+  padding-inline: var(--_kui-value-table-inline-padding);
+  box-sizing: border-box;
+  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-value-table__row[data-has-icon="true"] {
+  --_kui-value-table-separator-start: calc(
+    var(--_kui-value-table-inline-padding) + var(--_kui-value-table-icon-size) +
+      var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+.kui-value-table__row + .kui-value-table__row::before {
+  position: absolute;
+  top: 0;
+  right: var(--_kui-value-table-inline-padding);
+  left: var(--_kui-value-table-separator-start);
+  border-top: 1px solid var(--kui-value-table-border);
+  content: "";
+}
+.kui-value-table__row dt {
+  display: flex;
+  min-width: 0;
+  color: var(--kui-color-text-quiet);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-value-table__icon {
+  display: grid;
+  width: var(--_kui-value-table-icon-size);
+  height: var(--_kui-value-table-icon-size);
+  flex: none;
+  place-items: center;
+}
+.kui-value-table__icon svg {
+  width: 100%;
+  height: 100%;
+}
+.kui-value-table__label {
+  min-width: 0;
+}
+.kui-value-table__row dd {
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--kui-color-text);
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kui-space-2xs);
+  font-weight: var(--kui-font-weight-semibold);
+  text-align: end;
+}

package/{src → dist/styles}/webawesome.css

@@ -6,7 +6,7 @@
  * used by Hot Sheet 2. Component JavaScript remains independently importable
  * and tree-shakeable.
  */
-@import '@awesome.me/webawesome/dist/styles/webawesome.css';
+@import "@awesome.me/webawesome/dist/styles/webawesome.css";
 
 @layer wa-theme-overrides {
   :where(:root),
@@ -33,15 +33,38 @@
     --wa-color-text-quiet: light-dark(#6e6e73, #aeaeb2);
     --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
-    --wa-color-overlay-modal: light-dark(rgb(29 29 31 / .34), rgb(0 0 0 / .6));
-    --wa-color-overlay-inline: color-mix(in srgb, var(--wa-color-neutral-fill-normal) 25%, transparent);
-    --wa-color-shadow: light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .5));
+    --wa-color-overlay-modal: light-dark(
+      rgb(29 29 31 / 0.34),
+      rgb(0 0 0 / 0.6)
+    );
+    --wa-color-overlay-inline: color-mix(
+      in srgb,
+      var(--wa-color-neutral-fill-normal) 25%,
+      transparent
+    );
+    --wa-color-shadow: light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5));
     --wa-color-focus: light-dark(#007aff, #64d2ff);
     --wa-color-brand-fill-loud: light-dark(#0088ff, #64d2ff);
-    --wa-color-brand-fill-quiet: color-mix(in srgb, var(--wa-color-brand-fill-loud) 8%, var(--wa-color-surface-default));
-    --wa-color-brand-fill-normal: color-mix(in srgb, var(--wa-color-brand-fill-loud) 16%, var(--wa-color-surface-default));
-    --wa-color-brand-border-quiet: color-mix(in srgb, var(--wa-color-brand-fill-loud) 35%, var(--wa-color-surface-default));
-    --wa-color-brand-border-normal: color-mix(in srgb, var(--wa-color-brand-fill-loud) 58%, var(--wa-color-surface-default));
+    --wa-color-brand-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 8%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-brand-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 16%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-brand-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 35%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-brand-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 58%,
+      var(--wa-color-surface-default)
+    );
     --wa-color-brand-border-loud: var(--wa-color-brand-fill-loud);
     --wa-color-brand-on-quiet: light-dark(#1e6ef4, #8acbff);
     --wa-color-brand-on-normal: var(--wa-color-brand-on-quiet);
@@ -58,31 +81,91 @@
     --wa-color-neutral-on-loud: var(--wa-color-surface-default);
 
     --wa-color-success-fill-loud: #34c759;
-    --wa-color-success-fill-quiet: color-mix(in srgb, var(--wa-color-success-fill-loud) 14%, var(--wa-color-surface-default));
-    --wa-color-success-fill-normal: color-mix(in srgb, var(--wa-color-success-fill-loud) 72%, var(--wa-color-surface-default));
-    --wa-color-success-border-quiet: color-mix(in srgb, var(--wa-color-success-fill-loud) 32%, var(--wa-color-surface-default));
-    --wa-color-success-border-normal: color-mix(in srgb, var(--wa-color-success-fill-loud) 50%, var(--wa-color-surface-default));
-    --wa-color-success-border-loud: color-mix(in srgb, var(--wa-color-success-fill-loud) 78%, var(--wa-color-neutral-on-normal));
+    --wa-color-success-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 14%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 72%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 32%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 50%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-border-loud: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 78%,
+      var(--wa-color-neutral-on-normal)
+    );
     --wa-color-success-on-quiet: light-dark(#008932, #63e685);
     --wa-color-success-on-normal: light-dark(#006d28, #8cea9f);
     --wa-color-success-on-loud: #fff;
 
     --wa-color-warning-fill-loud: #ffcc00;
-    --wa-color-warning-fill-quiet: color-mix(in srgb, var(--wa-color-warning-fill-loud) 9%, var(--wa-color-surface-default));
-    --wa-color-warning-fill-normal: color-mix(in srgb, var(--wa-color-warning-fill-loud) 22%, var(--wa-color-surface-default));
-    --wa-color-warning-border-quiet: color-mix(in srgb, var(--wa-color-warning-fill-loud) 35%, var(--wa-color-surface-default));
-    --wa-color-warning-border-normal: color-mix(in srgb, var(--wa-color-warning-fill-loud) 58%, var(--wa-color-neutral-on-normal));
-    --wa-color-warning-border-loud: color-mix(in srgb, var(--wa-color-warning-fill-loud) 78%, var(--wa-color-neutral-on-normal));
+    --wa-color-warning-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 9%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-warning-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 22%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-warning-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 35%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-warning-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 58%,
+      var(--wa-color-neutral-on-normal)
+    );
+    --wa-color-warning-border-loud: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 78%,
+      var(--wa-color-neutral-on-normal)
+    );
     --wa-color-warning-on-quiet: light-dark(#a16a00, #ffd84a);
     --wa-color-warning-on-normal: light-dark(#5f3f00, #ffe27a);
     --wa-color-warning-on-loud: #1d1d1f;
 
     --wa-color-danger-fill-loud: #ff383c;
-    --wa-color-danger-fill-quiet: color-mix(in srgb, var(--wa-color-danger-fill-loud) 7%, var(--wa-color-surface-default));
-    --wa-color-danger-fill-normal: color-mix(in srgb, var(--wa-color-danger-fill-loud) 14%, var(--wa-color-surface-default));
-    --wa-color-danger-border-quiet: color-mix(in srgb, var(--wa-color-danger-fill-loud) 32%, var(--wa-color-surface-default));
-    --wa-color-danger-border-normal: color-mix(in srgb, var(--wa-color-danger-fill-loud) 50%, var(--wa-color-surface-default));
-    --wa-color-danger-border-loud: color-mix(in srgb, var(--wa-color-danger-fill-loud) 78%, var(--wa-color-neutral-on-normal));
+    --wa-color-danger-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 7%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 14%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 32%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 50%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-border-loud: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 78%,
+      var(--wa-color-neutral-on-normal)
+    );
     --wa-color-danger-on-quiet: light-dark(#c20b20, #ff696c);
     --wa-color-danger-on-normal: light-dark(#8e0717, #ff8a8c);
     --wa-color-danger-on-loud: #fff;
@@ -101,10 +184,10 @@
     --kui-wa-carousel-dot-hit-size: 20px;
     --kui-wa-carousel-control-size: 28px;
     --kui-wa-carousel-icon-size: 16px;
-    --kui-disclosure-icon-scale: .5;
-    --wa-shadow-s: 0 1px 3px rgb(0 0 0 / .14);
-    --wa-shadow-m: 0 .35rem 1rem rgb(0 0 0 / .11);
-    --wa-shadow-l: 0 .75rem 2rem rgb(0 0 0 / .09);
+    --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);
+    --wa-shadow-l: 0 0.75rem 2rem rgb(0 0 0 / 0.09);
   }
 
   :where(:root),
@@ -129,7 +212,10 @@
     box-sizing: border-box;
     width: var(--kui-wa-carousel-control-size);
     height: var(--kui-wa-carousel-control-size);
-    padding: calc((var(--kui-wa-carousel-control-size) - var(--kui-wa-carousel-icon-size)) / 2);
+    padding: calc(
+      (var(--kui-wa-carousel-control-size) - var(--kui-wa-carousel-icon-size)) /
+        2
+    );
     font-size: var(--kui-wa-carousel-icon-size);
   }
 
@@ -142,7 +228,11 @@
     height: var(--kui-wa-carousel-dot-hit-size);
     color: var(--wa-color-neutral-fill-normal);
     background-color: transparent;
-    background-image: radial-gradient(circle, currentcolor 0 calc(var(--kui-wa-carousel-dot-size) / 2), transparent calc(var(--kui-wa-carousel-dot-size) / 2 + .5px));
+    background-image: radial-gradient(
+      circle,
+      currentcolor 0 calc(var(--kui-wa-carousel-dot-size) / 2),
+      transparent calc(var(--kui-wa-carousel-dot-size) / 2 + 0.5px)
+    );
     transform: none;
   }
 

package/dist/styles/workbench.css

@@ -0,0 +1,94 @@
+.kui-workbench {
+  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__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 {
+  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;
+}
+
+/* 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 {
+  width: 100%;
+  height: var(--kui-workbench-drawer-height, 13.75rem);
+  transition: transform 200ms ease;
+}
+
+.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%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-workbench__panel-content {
+    transition: none;
+  }
+}

package/dist/tab-bar.d.ts

@@ -7,8 +7,15 @@ interface TabBarProps {
     leading?: SafeHtml;
     trailing?: SafeHtml;
     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?: 'automatic' | 'manual';
 }
 /** 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 }: TabBarProps): SafeHtml;
 
 export { TabBar, type TabBarProps };

package/dist/tab-bar.js

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

package/dist/tab-scaffold.d.ts

@@ -0,0 +1,30 @@
+import { SafeHtml } from 'kerfjs';
+
+interface TabScaffoldTab {
+    id: string;
+    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: SafeHtml;
+}
+interface TabScaffoldProps {
+    id: string;
+    /** Accessible name for the tab bar. */
+    label: string;
+    tabs: TabScaffoldTab[];
+    /** The controlled active tab id (the app owns selection). */
+    active: string;
+    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, label, tabs, active, className }: TabScaffoldProps): SafeHtml;
+
+export { TabScaffold, type TabScaffoldProps, type TabScaffoldTab };

package/dist/tab-scaffold.js

@@ -0,0 +1,16 @@
+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":";;;AA6BO,SAAS,WAAA,CAAY,EAAE,EAAA,EAAI,KAAA,EAAO,MAAM,MAAA,EAAQ,SAAA,GAAY,IAAG,EAAqB;AACzF,EAAA,uBAAO,IAAA,CAAC,SAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,cAAA,EAAe,sBAAA,EAAsB,EAAA,EACzH,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,0BAAA,EACR,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA0B,yBAAA,EAAyB,GAAA,CAAI,EAAA,EAAI,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA,EAAG,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA,EAAI,QAAA,EAAA,GAAA,CAAI,OAAA,EAAQ,CAAM,CAAA,EAC9L,CAAA;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAwB,MAAK,SAAA,EAAU,YAAA,EAAY,KAAA,EAC3D,QAAA,EAAA,IAAA,CAAK,IAAI,CAAC,GAAA,qBAAQ,IAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,KAAA,EAAM,uBAAA,EAAwB,IAAA,EAAK,KAAA,EAAM,uBAAA,EAAuB,GAAA,CAAI,EAAA,EAAI,iBAAe,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,GAAG,QAAA,EAAU,GAAA,CAAI,EAAA,KAAO,MAAA,GAAS,MAAM,IAAA,EAC5L,QAAA,EAAA;AAAA,MAAA,GAAA,CAAI,IAAA,wBAAS,MAAA,EAAA,EAAK,KAAA,EAAM,8BAA6B,aAAA,EAAY,MAAA,EAAQ,cAAI,IAAA,EAAK,CAAA;AAAA,sBACnF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAAA,EAA+B,cAAI,KAAA,EAAM;AAAA,KAAA,EACvD,CAAS,CAAA,EACX;AAAA,GAAA,EACF,CAAA;AACF","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface TabScaffoldTab {\n  id: string;\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: SafeHtml;\n}\n\nexport interface TabScaffoldProps {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: TabScaffoldTab[];\n  /** The controlled active tab id (the app owns selection). */\n  active: string;\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, label, tabs, active, className = '' }: TabScaffoldProps) {\n  return <section class={`kui-tab-scaffold ${className}`.trim()} id={id} data-component=\"tab-scaffold\" data-tab-scaffold-id={id}>\n    <div class=\"kui-tab-scaffold__scenes\">\n      {tabs.map((tab) => <div class=\"kui-tab-scaffold__scene\" data-tab-scaffold-scene={tab.id} data-active={String(tab.id === active)} aria-hidden={String(tab.id !== active)}>{tab.content}</div>)}\n    </div>\n    <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n      {tabs.map((tab) => <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'}>\n        {tab.icon && <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">{tab.icon}</span>}\n        <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n      </button>)}\n    </nav>\n  </section>;\n}\n"]}

package/dist/token-search-field.d.ts

@@ -0,0 +1,43 @@
+import { SafeHtml } from 'kerfjs';
+
+interface TokenSearchToken {
+    value: string;
+    label: string;
+    offset?: number;
+    accessibleLabel?: string;
+}
+interface TokenSearchFieldProps {
+    id: string;
+    label: string;
+    query?: string;
+    tokens?: readonly TokenSearchToken[];
+    placeholder?: string;
+    tokenPlaceholder?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+    /** Allow an empty field to render as one iconic action. */
+    collapsible?: boolean;
+    /** Keep an empty collapsible field open while the application owns focus. */
+    expanded?: boolean;
+    expandAction?: string;
+    expandLabel?: string;
+    leading?: SafeHtml;
+    trailing?: SafeHtml;
+    editAction?: string;
+    removeAction?: string;
+    clearAction?: string;
+    clearLabel?: string;
+    className?: string;
+    editorAttributes?: Readonly<Record<`data-${string}`, string>>;
+}
+interface TokenSearchFieldValue {
+    query: string;
+    tokens: TokenSearchToken[];
+}
+declare function TokenSearchField({ id, label, query, tokens, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, }: TokenSearchFieldProps): SafeHtml;
+/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */
+declare function readTokenSearchField(editor: HTMLElement, knownTokens?: readonly TokenSearchToken[]): TokenSearchFieldValue;
+/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */
+declare function placeTokenSearchCaret(editor: HTMLElement, offset?: number): void;
+
+export { TokenSearchField, type TokenSearchFieldProps, type TokenSearchFieldValue, type TokenSearchToken, placeTokenSearchCaret, readTokenSearchField };

package/dist/token-search-field.js

@@ -0,0 +1,4 @@
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
+
+
+//# sourceMappingURL=token-search-field.js.map

package/dist/token-search-field.js.map

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

package/dist/toolbar-text.d.ts

@@ -1,11 +1,23 @@
 import * as kerfjs from 'kerfjs';
 
-type ToolbarTextSize = 'large' | 'default' | 'small';
+type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';
+/** ARIA heading level for a title exposed as a heading landmark. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 interface ToolbarTextProps {
     text: string;
     size?: ToolbarTextSize;
     className?: string;
+    /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */
+    id?: string;
+    /**
+     * Expose heading semantics (`role="heading"` + `aria-level`) so the text acts as
+     * a heading landmark — e.g. a page's primary title. Omit to keep the plain span
+     * (the default), which suits a dialog title referenced via `aria-labelledby`.
+     */
+    headingLevel?: HeadingLevel;
+    /** Render the text as an unanimated loading skeleton instead of its value. */
+    placeholder?: boolean;
 }
-declare function ToolbarText({ text, size, className }: ToolbarTextProps): kerfjs.SafeHtml;
+declare function ToolbarText({ text, size, className, id, headingLevel, placeholder }: ToolbarTextProps): kerfjs.SafeHtml;
 
-export { ToolbarText, type ToolbarTextProps, type ToolbarTextSize };
+export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize };

package/dist/toolbar-text.js

@@ -1,3 +1,4 @@
-export { ToolbarText } from './chunk-GY5WH7TO.js';
+export { ToolbarText } from './chunk-RUNWEPR4.js';
+
 
 //# sourceMappingURL=toolbar-text.js.map

package/dist/value-table.d.ts

@@ -1,10 +1,20 @@
 import { SafeHtml } from 'kerfjs';
 
+interface ValueTableRowProps {
+    label: string | SafeHtml;
+    value: string | SafeHtml;
+    icon?: SafeHtml;
+    className?: string;
+    /** Render the value as an unanimated loading skeleton, keeping the field label. */
+    placeholder?: boolean;
+}
+declare function ValueTableRow({ label, value, icon, className, placeholder }: ValueTableRowProps): SafeHtml;
+
 interface ValueTableProps {
     label: string;
     className?: string;
-    children: SafeHtml | SafeHtml[];
+    children: SafeHtml | readonly SafeHtml[];
 }
 declare function ValueTable({ label, className, children }: ValueTableProps): SafeHtml;
 
-export { ValueTable, type ValueTableProps };
+export { ValueTable, type ValueTableProps, ValueTableRow, type ValueTableRowProps };

package/dist/value-table.js

@@ -1,3 +1,4 @@
-export { ValueTable } from './chunk-VKH2JLDZ.js';
+export { ValueTable, ValueTableRow } from './chunk-37T3VNIZ.js';
+
 
 //# sourceMappingURL=value-table.js.map