@kerfjs/ui 5.0.0-beta.75 → 5.0.0-beta.76

package/dist/styles/components/typography/text/text.css

@@ -0,0 +1,139 @@
+.kui-text {
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  margin: 0;
+  white-space: normal;
+  overflow-wrap: normal;
+}
+
+/* Match the themed Web Awesome form-control label without introducing a
+   native <label> that would falsely point at a non-form preview. */
+.kui-text__field-label {
+  box-sizing: border-box;
+  min-width: 0;
+  padding-inline: calc(
+    var(--wa-form-control-border-width, 1px) +
+      var(--wa-form-control-padding-inline, 0.5rem)
+  );
+  margin: 0 0 0.5em;
+  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;
+}
+
+.kui-text[data-wrap="anywhere"] {
+  overflow-wrap: anywhere;
+}
+
+.kui-text[data-wrap="nowrap"] {
+  white-space: nowrap;
+}
+
+.kui-text[data-wrap="truncate"] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+span.kui-text[data-wrap="truncate"] {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.kui-text__clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_kui-text-max-lines);
+}
+
+.kui-text[data-tone="quiet"] {
+  color: var(--kui-color-text-quiet);
+}
+
+.kui-text[data-tone="danger"] {
+  color: var(--kui-color-danger-on-quiet);
+}
+
+.kui-text[data-size="compact"] {
+  font-size: var(--kui-font-xs);
+}
+
+.kui-text[data-size="large"] {
+  font-size: var(--kui-font-l);
+}
+
+.kui-text[data-size="xlarge"] {
+  font-size: var(--kui-font-2xl);
+}
+
+.kui-text[data-font="monospace"] {
+  font-family: var(--kui-font-mono);
+}
+
+.kui-text[data-border="none"] {
+  border: 0;
+}
+
+.kui-text[data-flush="true"] {
+  padding: 0;
+  border: 0;
+}
+
+.kui-text[data-line-height="tight"] {
+  line-height: 1.2;
+}
+
+span.kui-text {
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+
+/* A ListHeader's label: the title's single text child, set as a compact,
+   uppercase, single-line label that truncates with an ellipsis. The title is
+   a div around a heading or, for a toggle header, the toggle button around
+   an inline span. */
+.kui-list-header__title > .kui-text {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.kui-list-header[data-size="xs"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-2xs);
+  text-transform: capitalize;
+}
+
+.kui-list-header:is([data-size="m"], [data-size="l"], [data-size="xl"])
+  .kui-list-header__title
+  > .kui-text {
+  font-family: var(--wa-font-family-heading, var(--kui-font-sans));
+  font-weight: var(--wa-font-weight-heading, 600);
+  letter-spacing: normal;
+  line-height: var(--wa-line-height-condensed, 1.2);
+  text-transform: none;
+}
+
+.kui-list-header[data-size="m"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-m);
+}
+
+.kui-list-header[data-size="l"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-l);
+}
+
+.kui-list-header[data-size="xl"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-xl);
+}

package/dist/styles/content-item.css

@@ -13,6 +13,7 @@
     --kui-content-item-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
   );
+  color: var(--kui-content-item-foreground, inherit);
   background: var(--kui-content-item-background, transparent);
 }
 
@@ -34,8 +35,50 @@
   --kui-content-item-border: var(--kui-color-neutral-border-normal);
 }
 
+.kui-content-item[data-appearance="surface"] {
+  --kui-content-item-border: var(--kui-color-neutral-border-normal);
+  --kui-content-item-background: var(--kui-color-surface);
+  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
+}
+
+.kui-content-item[data-appearance="neutral"] {
+  --kui-content-item-border: var(--kui-color-neutral-border-normal);
+  --kui-content-item-background: var(--kui-color-neutral-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
+}
+
+.kui-content-item[data-appearance="info"] {
+  --kui-content-item-border: var(--kui-color-brand-border-quiet);
+  --kui-content-item-background: var(--kui-color-brand-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-brand-on-fill);
+}
+
+.kui-content-item[data-appearance="pop"] {
+  --kui-content-item-border: var(--kui-color-pop-border-normal);
+  --kui-content-item-background: var(--kui-color-pop-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-pop-on-fill);
+}
+
+.kui-content-item[data-appearance="success"] {
+  --kui-content-item-border: var(--kui-color-success-border-normal);
+  --kui-content-item-background: var(--kui-color-success-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-success-on-fill);
+}
+
+.kui-content-item[data-appearance="warning"] {
+  --kui-content-item-border: var(--kui-color-warning-border-normal);
+  --kui-content-item-background: var(--kui-color-warning-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-warning-on-fill);
+}
+
+.kui-content-item[data-appearance="danger"] {
+  --kui-content-item-border: var(--kui-color-danger-border-quiet);
+  --kui-content-item-background: var(--kui-color-danger-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-danger-on-fill);
+}
+
 .kui-content-item[data-interactive="true"] {
-  color: var(--kui-color-neutral-on-normal);
+  color: var(--kui-content-item-foreground, var(--kui-color-neutral-on-normal));
   cursor: pointer;
 }
 
@@ -48,6 +91,7 @@
   ) {
   --kui-content-item-border: var(--kui-color-neutral-border-normal);
   --kui-content-item-background: var(--kui-color-neutral-fill-normal);
+  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
 }
 
 .kui-content-item[data-interactive="true"]:active:not([data-disabled="true"]) {
@@ -61,6 +105,7 @@
 .kui-content-item[data-interactive="true"][data-selected="true"] {
   --kui-content-item-border: var(--kui-color-brand-border-quiet);
   --kui-content-item-background: var(--kui-color-brand-fill-normal);
+  --kui-content-item-foreground: var(--kui-color-brand-on-fill);
 }
 
 .kui-content-item[data-interactive="true"]:focus-visible {

package/dist/styles/document.css

@@ -10,6 +10,10 @@ body,
   height: 100%;
 }
 
+html {
+  background: var(--kui-color-surface);
+}
+
 body {
   margin: 0;
   color: var(--kui-color-text);
@@ -18,6 +22,12 @@ body {
   line-height: 1.45;
 }
 
+:where(button, input, select, textarea, th, td) {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
 :where(a) {
   color: var(--kui-color-text-link);
 }

package/dist/styles/foundation.css

@@ -126,7 +126,10 @@
   );
   --kui-color-surface-lowered: var(
     --wa-color-surface-lowered,
-    light-dark(#f2f2f7, #111113)
+    light-dark(
+      rgb(0 0 98.076923 / 0.05098),
+      rgb(228.157895 228.157895 255 / 0.07451)
+    )
   );
   --kui-color-text: var(--wa-color-text-normal, light-dark(#1d1d1f, #f5f5f7));
   --kui-color-text-quiet: var(
@@ -144,7 +147,7 @@
   );
   --kui-color-neutral-fill-normal: var(
     --wa-color-neutral-fill-normal,
-    light-dark(#e5e5ea, #3a3a3c)
+    light-dark(rgb(0 0 49.038462 / 0.101961), rgb(253 253 255 / 0.133333))
   );
   --kui-color-neutral-fill-loud: var(
     --wa-color-neutral-fill-loud,
@@ -152,19 +155,19 @@
   );
   --kui-color-neutral-border-quiet: var(
     --wa-color-neutral-border-quiet,
-    light-dark(#e5e5ea, #38383a)
+    light-dark(rgb(0 0 49.038462 / 0.101961), rgb(253 253 255 / 0.124444))
   );
   --kui-color-neutral-border-normal: var(
     --wa-color-neutral-border-normal,
-    light-dark(#d1d1d6, #48484a)
+    light-dark(rgb(0 0 27.717391 / 0.180392), rgb(253 253 255 / 0.195556))
   );
   --kui-color-neutral-border-loud: var(
     --wa-color-neutral-border-loud,
-    light-dark(#aeaeb2, #636366)
+    light-dark(rgb(0 0 12.592593 / 0.317647), rgb(249.875 249.875 255 / 0.32))
   );
   --kui-color-neutral-on-quiet: var(
     --wa-color-neutral-on-quiet,
-    var(--kui-color-text-quiet)
+    light-dark(#626267, #c2c2c6)
   );
   --kui-color-neutral-on-normal: var(
     --wa-color-neutral-on-normal,

package/dist/styles/grid.css

@@ -4,16 +4,66 @@
      inherits its ancestor's; the inline style overrides them per prop. */
   --_kui-grid-gap: var(--kui-grid-gap);
   --_kui-grid-flex: 0 1 auto;
+  --_kui-grid-inset-top: 0;
+  --_kui-grid-inset-right: 0;
+  --_kui-grid-inset-bottom: 0;
+  --_kui-grid-inset-left: 0;
 
   display: grid;
   min-width: 0;
   min-height: 0;
   box-sizing: border-box;
+  padding: var(--_kui-grid-inset-top, 0) var(--_kui-grid-inset-right, 0)
+    var(--_kui-grid-inset-bottom, 0) var(--_kui-grid-inset-left, 0);
   flex: var(--_kui-grid-flex, initial);
   grid-template-columns: repeat(var(--_kui-grid-columns), minmax(0, 1fr));
   gap: var(--_kui-grid-gap, var(--kui-grid-gap));
 }
 
+.kui-grid[data-control-insets*="t"] {
+  --_kui-grid-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-grid[data-control-insets*="r"] {
+  --_kui-grid-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-grid[data-control-insets*="b"] {
+  --_kui-grid-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-grid[data-control-insets*="l"] {
+  --_kui-grid-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-grid[data-text-insets*="t"] {
+  --_kui-grid-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-grid[data-text-insets*="r"] {
+  --_kui-grid-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-grid[data-text-insets*="b"] {
+  --_kui-grid-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-grid[data-text-insets*="l"] {
+  --_kui-grid-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
 .kui-grid[data-min-column-width="true"] {
   grid-template-columns: repeat(
     auto-fit,

package/dist/styles/lucide-icon.css

@@ -5,6 +5,10 @@
   flex: none;
 }
 
+[data-lucide][data-inline="true"] {
+  display: inline-block;
+}
+
 [data-lucide][data-size] {
   width: var(--_kui-lucide-size);
   height: var(--_kui-lucide-size);

package/dist/styles/webawesome.css

@@ -26,8 +26,16 @@
     /* Hot Sheet 2's macOS system palette, with a compatible dark appearance. */
     --wa-color-surface-raised: light-dark(#fff, #2c2c2e);
     --wa-color-surface-default: light-dark(#fff, #1c1c1e);
-    --wa-color-surface-lowered: light-dark(#f2f2f7, #111113);
-    --wa-color-surface-border: light-dark(#d1d1d6, #48484a);
+    /* Translucent lowered layers adapt to their backdrop at every nesting depth.
+       Default/raised surfaces stay opaque canvas and overlay anchors. */
+    --wa-color-surface-lowered: light-dark(
+      rgb(0 0 98.076923 / 0.05098),
+      rgb(228.157895 228.157895 255 / 0.07451)
+    );
+    --wa-color-surface-border: light-dark(
+      rgb(0 0 27.717391 / 0.180392),
+      rgb(253 253 255 / 0.195556)
+    );
 
     --wa-color-text-normal: light-dark(#1d1d1f, #f5f5f7);
     --wa-color-text-quiet: light-dark(#6e6e73, #aeaeb2);
@@ -83,12 +91,21 @@
     --wa-color-brand-on-loud: light-dark(#fff, #111113);
 
     --wa-color-neutral-fill-quiet: var(--wa-color-surface-lowered);
-    --wa-color-neutral-fill-normal: light-dark(#e5e5ea, #3a3a3c);
+    --wa-color-neutral-fill-normal: light-dark(
+      rgb(0 0 49.038462 / 0.101961),
+      rgb(253 253 255 / 0.133333)
+    );
     --wa-color-neutral-fill-loud: light-dark(#48484a, #e5e5ea);
-    --wa-color-neutral-border-quiet: light-dark(#e5e5ea, #38383a);
+    --wa-color-neutral-border-quiet: light-dark(
+      rgb(0 0 49.038462 / 0.101961),
+      rgb(253 253 255 / 0.124444)
+    );
     --wa-color-neutral-border-normal: var(--wa-color-surface-border);
-    --wa-color-neutral-border-loud: light-dark(#aeaeb2, #636366);
-    --wa-color-neutral-on-quiet: var(--wa-color-text-quiet);
+    --wa-color-neutral-border-loud: light-dark(
+      rgb(0 0 12.592593 / 0.317647),
+      rgb(249.875 249.875 255 / 0.32)
+    );
+    --wa-color-neutral-on-quiet: light-dark(#626267, #c2c2c6);
     --wa-color-neutral-on-normal: var(--wa-color-text-normal);
     --wa-color-neutral-on-loud: var(--wa-color-surface-default);
 

package/dist/sunken-panel.d.ts

@@ -1,6 +1,6 @@
 import * as kerfjs from 'kerfjs';
-import { CssFlexKeyword, CssFlex } from './css-values.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssFlexKeyword, CssFlex } from './css-values.js';
 
 type SunkenPanelShape = 'rounded' | 'square';
 interface SunkenPanelProps {

package/dist/sunken-panel.js

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

package/dist/surface-scaffold.js

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

package/dist/tab-bar.js

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

package/dist/tab-scaffold.d.ts

@@ -1,6 +1,6 @@
 import { SafeHtml } from 'kerfjs';
-import { PaneAppearance } from './pane.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { PaneAppearance } from './pane.js';
 
 interface TabScaffoldTabBase<Id extends string> {
     id: Id;

package/dist/tab-scaffold.js

@@ -1,4 +1,4 @@
-import { Badge } from './chunk-ALGYHYXP.js';
+import { Badge } from './chunk-J3AWE5I4.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function TabScaffold({

package/dist/tab-scaffold.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":"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","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport type { PaneAppearance } from './pane.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\ninterface TabScaffoldTabBase<Id extends 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  /** Background of this scene's scrolling work surface. */\n  appearance?: PaneAppearance;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabScaffoldTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabScaffoldTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabScaffoldTab<Id extends string = string> =\n  TabScaffoldTabBase<Id> & (TabScaffoldTabCountBadge | TabScaffoldTabDotBadge);\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  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` never, even when wired. The line is the bar's own 1px top\n   * border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: 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  chromeDividers = 'scroll',\n  className = '',\n  slot,\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      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      slot={slot}\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            data-appearance={tab.appearance === 'sunken' ? 'sunken' : undefined}\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          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\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              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}
+{"version":3,"sources":["../src/components/navigation/tab-scaffold/tab-scaffold.tsx"],"names":[],"mappings":"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","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport type { PaneAppearance } from '../../layout/pane/pane.js';\n\ninterface TabScaffoldTabBase<Id extends 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  /** Background of this scene's scrolling work surface. */\n  appearance?: PaneAppearance;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabScaffoldTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabScaffoldTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabScaffoldTab<Id extends string = string> =\n  TabScaffoldTabBase<Id> & (TabScaffoldTabCountBadge | TabScaffoldTabDotBadge);\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  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` never, even when wired. The line is the bar's own 1px top\n   * border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: 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  chromeDividers = 'scroll',\n  className = '',\n  slot,\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      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      slot={slot}\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            data-appearance={tab.appearance === 'sunken' ? 'sunken' : undefined}\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          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\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              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}

package/dist/text.d.ts

@@ -1,6 +1,15 @@
 import * as kerfjs from 'kerfjs';
 import { KerfBaseAttrs } from 'kerfjs/jsx-runtime';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssForegroundColor } from './css-values.js';
+
+type FieldLabelProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
+    children: string;
+    class?: string;
+    className?: string;
+};
+/** Visible field heading for a read-only preview; use its id with aria-labelledby on the preview group. */
+declare function FieldLabel({ children, class: classValue, className, ...attributes }: FieldLabelProps): kerfjs.SafeHtml;
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
 type TextTone = 'default' | 'quiet' | 'danger';
@@ -10,18 +19,13 @@ type TextBorder = 'transparent' | 'none';
 type TextLineHeight = 'default' | 'tight';
 type TextWrap = 'normal' | 'anywhere' | 'nowrap' | 'truncate';
 type TextContent = KerfUiContent | string | number | readonly TextContent[];
-type FieldLabelProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
-    children: string;
-    class?: string;
-    className?: string;
-};
-/** Visible field heading for a read-only preview; use its id with aria-labelledby on the preview group. */
-declare function FieldLabel({ children, class: classValue, className, ...attributes }: FieldLabelProps): kerfjs.SafeHtml;
 type TextCommonProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
     /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */
     variant?: TextVariant;
     /** Semantic foreground treatment. Defaults to the inherited foreground. */
     tone?: TextTone;
+    /** Foreground color; overrides tone when supplied, or inherits when omitted. */
+    color?: CssForegroundColor;
     /** Text sizing independent of the native semantic element. */
     size?: TextSize;
     /** Font family independent of the native semantic element. */
@@ -51,6 +55,6 @@ type TextProps = TextCommonProps & ({
  * content-item padding; `span` adds no box geometry.
  * All ordinary native heading/paragraph attributes pass through to the element.
  */
-declare function Text({ variant: Variant, tone, size, font, border, flush, lineHeight, wrap, maxLines, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;
+declare function Text({ variant: Variant, tone, color, size, font, border, flush, lineHeight, wrap, maxLines, children, class: classValue, className, style, ...attributes }: TextProps): kerfjs.SafeHtml;
 
 export { FieldLabel, type FieldLabelProps, Text, type TextBorder, type TextContent, type TextFont, type TextLineHeight, type TextProps, type TextSize, type TextTone, type TextVariant, type TextWrap };

package/dist/text.js

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

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

@@ -1,3 +1,3 @@
+export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, k as TokenSearchTrailingAction, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-model-DTcTXWMS.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
-export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, k as TokenSearchTrailingAction, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-CVGwDn2y.js';

package/dist/token-search-field.js

@@ -1,4 +1,4 @@
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-FKPKGP2H.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-G4VKQP7B.js';