@kerfjs/ui 4.4.1 → 5.0.0-beta.11

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-control-group.d.ts

@@ -9,7 +9,9 @@ interface ToolbarControlGroupProps {
     appearance?: 'contained' | 'borderless';
     tone?: 'default' | 'dark';
     buttonAppearance?: 'plain' | 'push';
+    /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */
+    shape?: 'pill' | 'rounded';
 }
-declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance }: ToolbarControlGroupProps): SafeHtml;
+declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance, shape }: ToolbarControlGroupProps): SafeHtml;
 
 export { ToolbarControlGroup, type ToolbarControlGroupProps };

package/dist/toolbar-control-group.js

@@ -1,3 +1,3 @@
-export { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
+export { ToolbarControlGroup } from './chunk-RNPGFQ33.js';
 
 //# sourceMappingURL=toolbar-control-group.js.map

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

package/dist/webawesome.d.ts

@@ -0,0 +1,100 @@
+import { KerfCustomElement } from 'kerfjs/jsx-runtime';
+
+/**
+ * Opt-in Kerf JSX declarations for the Web Awesome elements supported by the
+ * @kerfjs/ui catalog. Import this module for type effects only; component
+ * registration remains an explicit application concern.
+ */
+declare module 'kerfjs/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'wa-accordion': KerfCustomElement;
+            'wa-accordion-item': KerfCustomElement;
+            'wa-animated-image': KerfCustomElement;
+            'wa-animation': KerfCustomElement;
+            'wa-avatar': KerfCustomElement;
+            'wa-badge': KerfCustomElement;
+            'wa-breadcrumb': KerfCustomElement;
+            'wa-breadcrumb-item': KerfCustomElement;
+            'wa-select': KerfCustomElement & {
+                class?: string;
+                name?: string;
+                label?: string;
+                'aria-label'?: string;
+                value?: string;
+                placeholder?: string;
+                disabled?: boolean;
+            };
+            'wa-option': KerfCustomElement & {
+                value?: string;
+            };
+            'wa-button-group': KerfCustomElement;
+            'wa-callout': KerfCustomElement;
+            'wa-card': KerfCustomElement;
+            'wa-carousel': KerfCustomElement;
+            'wa-carousel-item': KerfCustomElement;
+            'wa-checkbox': KerfCustomElement;
+            'wa-checkbox-group': KerfCustomElement;
+            'wa-color-picker': KerfCustomElement;
+            'wa-comparison': KerfCustomElement;
+            'wa-copy-button': KerfCustomElement;
+            'wa-details': KerfCustomElement;
+            'wa-divider': KerfCustomElement;
+            'wa-dialog': KerfCustomElement;
+            'wa-drawer': KerfCustomElement;
+            'wa-button': KerfCustomElement & {
+                slot?: string;
+                appearance?: string;
+                'with-caret'?: boolean;
+                'aria-label'?: string;
+            };
+            'wa-dropdown': KerfCustomElement & {
+                placement?: string;
+            };
+            'wa-dropdown-item': KerfCustomElement;
+            'wa-format-bytes': KerfCustomElement;
+            'wa-format-date': KerfCustomElement;
+            'wa-format-number': KerfCustomElement;
+            'wa-icon': KerfCustomElement;
+            'wa-include': KerfCustomElement;
+            'wa-input': KerfCustomElement;
+            'wa-intersection-observer': KerfCustomElement;
+            'wa-known-date': KerfCustomElement;
+            'wa-markdown': KerfCustomElement;
+            'wa-mutation-observer': KerfCustomElement;
+            'wa-number-input': KerfCustomElement;
+            'wa-otp-input': KerfCustomElement;
+            'wa-page': KerfCustomElement;
+            'wa-pagination': KerfCustomElement;
+            'wa-popover': KerfCustomElement;
+            'wa-popup': KerfCustomElement;
+            'wa-progress-bar': KerfCustomElement;
+            'wa-progress-ring': KerfCustomElement;
+            'wa-qr-code': KerfCustomElement;
+            'wa-radio': KerfCustomElement;
+            'wa-radio-group': KerfCustomElement;
+            'wa-random-content': KerfCustomElement;
+            'wa-rating': KerfCustomElement;
+            'wa-relative-time': KerfCustomElement;
+            'wa-resize-observer': KerfCustomElement;
+            'wa-scroller': KerfCustomElement;
+            'wa-skeleton': KerfCustomElement;
+            'wa-slider': KerfCustomElement;
+            'wa-spinner': KerfCustomElement;
+            'wa-split-panel': KerfCustomElement;
+            'wa-switch': KerfCustomElement;
+            'wa-tab': KerfCustomElement;
+            'wa-tab-group': KerfCustomElement;
+            'wa-tab-panel': KerfCustomElement;
+            'wa-tag': KerfCustomElement;
+            'wa-textarea': KerfCustomElement;
+            'wa-time-input': KerfCustomElement;
+            'wa-toast': KerfCustomElement;
+            'wa-toast-item': KerfCustomElement;
+            'wa-tooltip': KerfCustomElement;
+            'wa-tree': KerfCustomElement;
+            'wa-tree-item': KerfCustomElement;
+            'wa-zoomable-frame': KerfCustomElement;
+        }
+    }
+}

package/dist/webawesome.js

@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=webawesome.js.map

package/dist/webawesome.js.map

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

package/dist/wire-catalog.d.ts

@@ -0,0 +1,26 @@
+interface WireCatalogOptions {
+    /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */
+    onSelect: (id: string) => void;
+    /** Invoked when the sidebar collapse/expand control is activated. */
+    onToggleSidebar?: () => void;
+    /** Invoked when the theme toggle is activated. */
+    onToggleTheme?: () => void;
+    /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */
+    onToggleSecondary?: () => void;
+    /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */
+    urlParam?: string;
+    selectAction?: string;
+    toggleSidebarAction?: string;
+    toggleThemeAction?: string;
+    toggleSecondaryAction?: string;
+}
+/**
+ * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar
+ * item selection (and the related-entry popup menu), the sidebar collapse toggle, and
+ * the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
+ * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.
+ * Returns a disposer.
+ */
+declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleSecondary, urlParam, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, }: WireCatalogOptions): () => void;
+
+export { type WireCatalogOptions, wireCatalog };