@kerfjs/ui 5.0.0-beta.61 → 5.0.0-beta.63

package/dist/styles/workbench.css

@@ -91,21 +91,11 @@
   flex-direction: column;
 }
 
-.kui-workbench:has(
-    > .kui-workbench__rail--left[data-presentation="inline"]:not(
-        [data-collapsed="true"]
-      )
-  )
-  > .kui-workbench__center {
+.kui-workbench[data-left-inline-expanded="true"] > .kui-workbench__center {
   --kui-edge-inset-inline-start: 0px;
 }
 
-.kui-workbench:has(
-    > .kui-workbench__rail--right[data-presentation="inline"]:not(
-        [data-collapsed="true"]
-      )
-  )
-  > .kui-workbench__center {
+.kui-workbench[data-right-inline-expanded="true"] > .kui-workbench__center {
   --kui-edge-inset-inline-end: 0px;
 }
 
@@ -115,18 +105,64 @@
   overflow: auto;
 }
 
-.kui-workbench__main:has(
-  ~ .kui-workbench__drawer[data-presentation="inline"]:not(
-      [data-collapsed="true"]
-    )
-) {
-  --kui-edge-inset-block-end: 0px;
+/* When no Pane chrome is composed, the Workbench region owns its scroll.
+   A resizable auto-overflow panel instead scrolls its content box so its
+   separator handle remains fixed. Paint only that owner. */
+.kui-workbench__main[data-appearance="sunken"],
+:is(.kui-workbench__rail, .kui-workbench__drawer)[data-appearance="sunken"] {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
+:is(
+    .kui-workbench__rail,
+    .kui-workbench__drawer
+  )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"] {
+  background: transparent;
+}
+
+:is(
+    .kui-workbench__rail,
+    .kui-workbench__drawer
+  )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"]
+  > .kui-workbench__panel-content {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
+.kui-workbench__main[data-drawer-inline-expanded="true"] {
+  --_kui-workbench-content-edge-block-end: 0px;
 }
 
 /* The main area and each panel's content are the consumers: they pad for the
    edges their region still touches, the main area inside its scroller so
    content scrolls under an unsafe edge but can always be scrolled clear. A
    region whose only child is a Pane or layout lets that child own the insets. */
+.kui-workbench__center,
+.kui-workbench__rail,
+.kui-workbench__drawer {
+  --_kui-workbench-content-edge-block-start: var(--kui-edge-inset-block-start);
+  --_kui-workbench-content-edge-block-end: var(--kui-edge-inset-block-end);
+  --_kui-workbench-content-edge-inline-start: var(
+    --kui-edge-inset-inline-start
+  );
+  --_kui-workbench-content-edge-inline-end: var(--kui-edge-inset-inline-end);
+}
+
+.kui-workbench__main,
+.kui-workbench__panel-content {
+  /* Clear the public context at the region, so arbitrary app children inherit
+     zero without a selector whose subject is every child in the document. */
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
 .kui-workbench__main:not(
   :has(
     > :is(
@@ -149,44 +185,24 @@
       ):only-child
   )
 ) {
-  padding-block: var(--kui-edge-inset-block-start)
-    var(--kui-edge-inset-block-end);
-  padding-inline: var(--kui-edge-inset-inline-start)
-    var(--kui-edge-inset-inline-end);
-  scroll-padding-block: var(--kui-edge-inset-block-start)
-    var(--kui-edge-inset-block-end);
-}
-
-/* Every other child sees a cleared context. The exemption is tested on the
-   child itself, never as `region:not(:has(…)) > *`: a `:has()` before a
-   universal child makes each child of the region re-check the region's
-   `:has()` on every DOM change (~46ms per restyle for 1000 rows in Chromium).
-   SplitView, NavStack, TabScaffold, and CollapsiblePanel content use the same
-   shape. */
-.kui-workbench__main
-  > :not(
-    :is(
-      [data-component="pane"],
-      [data-component="nav-stack"],
-      [data-component="split-view"],
-      [data-component="workbench"],
-      [data-component="tab-scaffold"]
-    ):only-child
-  ),
-.kui-workbench__panel-content
-  > :not(
-    :is(
-      [data-component="pane"],
-      [data-component="nav-stack"],
-      [data-component="split-view"],
-      [data-component="workbench"],
-      [data-component="tab-scaffold"]
-    ):only-child
-  ) {
-  --kui-edge-inset-block-start: 0px;
-  --kui-edge-inset-block-end: 0px;
-  --kui-edge-inset-inline-start: 0px;
-  --kui-edge-inset-inline-end: 0px;
+  padding-block: var(--_kui-workbench-content-edge-block-start)
+    var(--_kui-workbench-content-edge-block-end);
+  padding-inline: var(--_kui-workbench-content-edge-inline-start)
+    var(--_kui-workbench-content-edge-inline-end);
+  scroll-padding-block: var(--_kui-workbench-content-edge-block-start)
+    var(--_kui-workbench-content-edge-block-end);
+}
+
+/* A nested Workbench owns its safe-area insets. Other sole layout children
+   restore this context from their own stylesheets. */
+:is(.kui-workbench__main, .kui-workbench__panel-content)
+  > [data-component="workbench"]:only-child {
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
 }
 
 /* A region whose only child is a Pane or layout lets it fill the region, so a
@@ -231,6 +247,11 @@
   overflow: visible;
 }
 
+.kui-workbench__rail:has(wa-dropdown[open]),
+.kui-workbench__drawer:has(wa-dropdown[open]) {
+  z-index: var(--kui-workbench-popup-z, 5);
+}
+
 /* 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 {
@@ -254,6 +275,11 @@
   transition: none;
 }
 
+:is(.kui-workbench__rail, .kui-workbench__drawer)[data-resizing="true"]
+  > .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"]
@@ -542,6 +568,25 @@
   inset-block-end: 0;
 }
 
+/* Optional shared backdrop sits over work-area controls and restores, below
+   the overlay drawer and rails. It is last in document order so an equal-z
+   restore control cannot receive the outside press. */
+.kui-workbench__backdrop {
+  position: absolute;
+  z-index: calc(var(--kui-workbench-overlay-z, 41) - 2);
+  display: none;
+  inset: 0;
+  background: var(--kui-color-scrim, rgb(0 0 0 / 32%));
+}
+
+.kui-workbench[data-overlay-backdrop="true"]:is(
+    [data-rail-overlay-expanded="true"],
+    [data-drawer-overlay-expanded="true"]
+  )
+  > .kui-workbench__backdrop {
+  display: block;
+}
+
 /* A collapsed overlay keeps its box for the slide-out, so it drops its surface
    and shadow; the sliding content carries the surface instead. */
 .kui-workbench__rail[data-presentation="overlay"][data-collapsed="true"],
@@ -579,14 +624,112 @@
    `responsiveFillAt`), and inline above it. The Workbench becomes a named
    inline-size container only when a panel opts in. The work area keeps its
    safe-area inset under an overlay panel. */
+.kui-workbench[data-responsive-overlay="true"] {
+  container: kui-workbench / inline-size;
+}
+
+/* A numeric pixel threshold is measured by wireWorkbench and marked on the
+   panel. Keep its overlay geometry and covered work area in step with that
+   single mark, including when the app changes the threshold at render time. */
+.kui-workbench__rail[data-responsive-overlay-active="true"] {
+  position: absolute;
+  z-index: var(--kui-workbench-overlay-z, 41);
+  width: var(--_kui-workbench-rail-extent);
+  max-width: var(--kui-workbench-overlay-max-width, 85vw);
+  inset-block: 0;
+  box-shadow: var(--kui-shadow-l);
+  clip-path: none;
+}
+
+.kui-workbench__rail--left[data-responsive-overlay-active="true"] {
+  inset-inline-start: 0;
+}
+
+.kui-workbench__rail--right[data-responsive-overlay-active="true"] {
+  inset-inline-end: 0;
+}
+
+.kui-workbench__rail[data-responsive-overlay-active="true"][data-collapsed="true"],
+.kui-workbench__drawer[data-responsive-overlay-active="true"][data-collapsed="true"] {
+  background: transparent;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.kui-workbench__rail[data-responsive-overlay-active="true"]
+  > .kui-workbench__panel-content {
+  width: 100%;
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench__rail[data-responsive-overlay-active="true"]
+  > .kui-workbench__handle,
+.kui-workbench__drawer[data-responsive-overlay-active="true"]
+  > .kui-workbench__handle {
+  display: none;
+}
+
 .kui-workbench:has(
-  > .kui-workbench__rail[data-responsive-overlay-at],
-  > .kui-workbench__center > .kui-workbench__drawer[data-responsive-overlay-at]
+    > .kui-workbench__rail--left[data-responsive-overlay-active="true"]
+  )
+  > .kui-workbench__center {
+  --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+}
+
+.kui-workbench:has(
+    > .kui-workbench__rail--right[data-responsive-overlay-active="true"]
+  )
+  > .kui-workbench__center {
+  --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
+}
+
+.kui-workbench__drawer[data-responsive-overlay-active="true"] {
+  position: absolute;
+  anchor-name: none;
+  z-index: calc(var(--kui-workbench-overlay-z, 41) - 1);
+  height: var(--_kui-workbench-drawer-extent);
+  max-height: var(--kui-workbench-overlay-max-height, 85vh);
+  inset-inline: 0;
+  inset-block-end: 0;
+  box-shadow: var(--kui-shadow-l);
+  clip-path: none;
+}
+
+.kui-workbench__drawer[data-responsive-overlay-active="true"]
+  > .kui-workbench__panel-content {
+  height: 100%;
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench__main:has(
+  + .kui-workbench__drawer[data-responsive-overlay-active="true"]
 ) {
-  container: kui-workbench / inline-size;
+  --_kui-workbench-content-edge-block-end: var(--_kui-workbench-safe-block-end);
+}
+
+.kui-workbench[data-overlay-backdrop="true"]:has(
+    > .kui-workbench__rail[data-responsive-overlay-active="true"]:not(
+        [data-collapsed="true"]
+      ),
+    > .kui-workbench__center
+      > .kui-workbench__drawer[data-responsive-overlay-active="true"]:not(
+        [data-collapsed="true"]
+      )
+  )
+  > .kui-workbench__backdrop {
+  display: block;
 }
 
 @container kui-workbench (max-width: 44rem) {
+  .kui-workbench[data-overlay-backdrop="true"]:is(
+      [data-left-responsive-expanded="narrow"],
+      [data-right-responsive-expanded="narrow"],
+      [data-drawer-responsive-expanded="narrow"]
+    )
+    > .kui-workbench__backdrop {
+    display: block;
+  }
+
   .kui-workbench__rail[data-responsive-overlay-at="narrow"] {
     position: absolute;
     z-index: var(--kui-workbench-overlay-z, 41);
@@ -622,16 +765,12 @@
     display: none;
   }
 
-  .kui-workbench:has(
-      > .kui-workbench__rail--left[data-responsive-overlay-at="narrow"][data-presentation="inline"]
-    )
+  .kui-workbench[data-left-responsive-inline="narrow"]
     > .kui-workbench__center {
     --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
   }
 
-  .kui-workbench:has(
-      > .kui-workbench__rail--right[data-responsive-overlay-at="narrow"][data-presentation="inline"]
-    )
+  .kui-workbench[data-right-responsive-inline="narrow"]
     > .kui-workbench__center {
     --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
   }
@@ -665,14 +804,23 @@
     display: none;
   }
 
-  .kui-workbench__main:has(
-    ~ .kui-workbench__drawer[data-responsive-overlay-at="narrow"][data-presentation="inline"]
-  ) {
-    --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  .kui-workbench__main[data-drawer-responsive-inline="narrow"] {
+    --_kui-workbench-content-edge-block-end: var(
+      --_kui-workbench-safe-block-end
+    );
   }
 }
 
 @container kui-workbench (max-width: 28rem) {
+  .kui-workbench[data-overlay-backdrop="true"]:is(
+      [data-left-responsive-expanded="compact"],
+      [data-right-responsive-expanded="compact"],
+      [data-drawer-responsive-expanded="compact"]
+    )
+    > .kui-workbench__backdrop {
+    display: block;
+  }
+
   .kui-workbench__rail[data-responsive-overlay-at="compact"] {
     position: absolute;
     z-index: var(--kui-workbench-overlay-z, 41);
@@ -708,16 +856,12 @@
     display: none;
   }
 
-  .kui-workbench:has(
-      > .kui-workbench__rail--left[data-responsive-overlay-at="compact"][data-presentation="inline"]
-    )
+  .kui-workbench[data-left-responsive-inline="compact"]
     > .kui-workbench__center {
     --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
   }
 
-  .kui-workbench:has(
-      > .kui-workbench__rail--right[data-responsive-overlay-at="compact"][data-presentation="inline"]
-    )
+  .kui-workbench[data-right-responsive-inline="compact"]
     > .kui-workbench__center {
     --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
   }
@@ -751,13 +895,28 @@
     display: none;
   }
 
-  .kui-workbench__main:has(
-    ~ .kui-workbench__drawer[data-responsive-overlay-at="compact"][data-presentation="inline"]
-  ) {
-    --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  .kui-workbench__main[data-drawer-responsive-inline="compact"] {
+    --_kui-workbench-content-edge-block-end: var(
+      --_kui-workbench-safe-block-end
+    );
   }
 }
 
+/* Release the panel and its sliding/scrolling content while a PopupMenu or
+   Web Awesome dropdown is open. This comes after resize clipping and keeps
+   the popup in place through wa-show/wa-after-hide without a prop change. */
+.kui-workbench__rail:not([data-collapsed="true"]):has(wa-dropdown[open]),
+.kui-workbench__drawer:not([data-collapsed="true"]):has(wa-dropdown[open]) {
+  overflow: visible;
+  clip-path: none;
+}
+.kui-workbench__rail:not([data-collapsed="true"]):has(wa-dropdown[open])
+  > .kui-workbench__panel-content,
+.kui-workbench__drawer:not([data-collapsed="true"]):has(wa-dropdown[open])
+  > .kui-workbench__panel-content {
+  overflow: visible;
+}
+
 /* A collapsed panel's restore control floats in a corner of the Workbench
    itself, never of the viewport, so an embedded Workbench cannot float it over
    page chrome outside it. It is inset from the corner plus the unsafe area of
@@ -860,8 +1019,13 @@
    the open rail), so the overlay's own floating controls stay; FloatingToolbar
    and the layouts' restore corners read it. A direct child
    resolves the Workbench's own container query, never a nested one's. */
+.kui-workbench[data-rail-overlay-expanded="true"]
+  > :is(.kui-workbench__center, .kui-workbench__restore) {
+  --_kui-workbench-covered: hidden;
+}
+
 .kui-workbench:has(
-    > .kui-workbench__rail[data-presentation="overlay"]:not(
+    > .kui-workbench__rail[data-responsive-overlay-active="true"]:not(
         [data-collapsed="true"]
       )
   )
@@ -870,10 +1034,9 @@
 }
 
 @container kui-workbench (max-width: 44rem) {
-  .kui-workbench:has(
-      > .kui-workbench__rail[data-responsive-overlay-at="narrow"][data-presentation="inline"]:not(
-          [data-collapsed="true"]
-        )
+  .kui-workbench:is(
+      [data-left-responsive-expanded="narrow"],
+      [data-right-responsive-expanded="narrow"]
     )
     > :is(.kui-workbench__center, .kui-workbench__restore) {
     --_kui-workbench-covered: hidden;
@@ -881,10 +1044,9 @@
 }
 
 @container kui-workbench (max-width: 28rem) {
-  .kui-workbench:has(
-      > .kui-workbench__rail[data-responsive-overlay-at="compact"][data-presentation="inline"]:not(
-          [data-collapsed="true"]
-        )
+  .kui-workbench:is(
+      [data-left-responsive-expanded="compact"],
+      [data-right-responsive-expanded="compact"]
     )
     > :is(.kui-workbench__center, .kui-workbench__restore) {
     --_kui-workbench-covered: hidden;
@@ -902,14 +1064,22 @@
    closes it (the wiring's outside press); `compactOverlay: "full"` fills the
    Workbench. The rail's resize and configured size stop applying there. */
 @container kui-workbench (max-width: 28rem) {
-  .kui-workbench__rail[data-responsive-overlay-at] {
+  .kui-workbench__rail:is(
+    [data-responsive-overlay-at="narrow"],
+    [data-responsive-overlay-at="compact"],
+    [data-responsive-overlay-active="true"]
+  ) {
     width: calc(
       100% - var(--kui-workbench-overlay-dismiss-margin, 2.75rem)
     );
     max-width: none;
   }
 
-  .kui-workbench__rail[data-responsive-overlay-at][data-compact-overlay="full"] {
+  .kui-workbench__rail:is(
+      [data-responsive-overlay-at="narrow"],
+      [data-responsive-overlay-at="compact"],
+      [data-responsive-overlay-active="true"]
+    )[data-compact-overlay="full"] {
     width: 100%;
   }
 }

package/dist/sunken-panel.d.ts

@@ -1,4 +1,5 @@
 import * as kerfjs from 'kerfjs';
+import { CssFlexKeyword, CssFlex } from './css-values.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type SunkenPanelShape = 'rounded' | 'square';
@@ -8,6 +9,10 @@ interface SunkenPanelProps {
     ariaLabel?: string;
     /** Corner shape: a rounded rectangle (default) or square corners. */
     shape?: SunkenPanelShape;
+    /** Grow or shrink within a flex parent, using Grid's typed flex contract. */
+    flex?: boolean | CssFlexKeyword | CssFlex;
+    /** Fill a parent with a definite height; use flex inside a flex layout. */
+    fill?: boolean;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -17,6 +22,6 @@ interface SunkenPanelProps {
  * stack. The panel owns its background and padding; children own their own
  * borders and internal geometry.
  */
-declare function SunkenPanel({ children, ariaLabel, shape, className, slot, }: SunkenPanelProps): kerfjs.SafeHtml;
+declare function SunkenPanel({ children, ariaLabel, shape, flex, fill, className, slot, }: SunkenPanelProps): kerfjs.SafeHtml;
 
 export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape };

package/dist/sunken-panel.js

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

package/dist/tab-bar.d.ts

@@ -5,6 +5,8 @@ type TabActivation = 'automatic' | 'manual';
 type TabBarAllocation = 'intrinsic' | 'fill';
 type TabBarPresentation = 'rail' | 'segmented' | 'inspector';
 type TabBarTrailingPlacement = 'separate' | 'adjacent';
+/** Tablist width where segmented AppTabs switch to icon-only. */
+type TabBarIconOnlyAt = 'wide' | 'narrow' | 'compact';
 interface TabBarProps {
     id: string;
     label: string;
@@ -28,12 +30,14 @@ interface TabBarProps {
     allocation?: TabBarAllocation;
     /** Named strip chrome for application rails, segmented tabs, or inspectors. */
     presentation?: TabBarPresentation;
+    /** Switch segmented AppTabs to icon-only at tablist widths of 832, 704, or 448px. Each tab needs a leading icon. */
+    iconOnlyAt?: TabBarIconOnlyAt;
     /** Keep a trailing action beside the final tab or at the far edge of the bar. */
     trailingPlacement?: TabBarTrailingPlacement;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
 /** Render a controlled tab strip. The application owns selection, order, and persistence. */
-declare function TabBar({ id, label, children, leading, trailing, end, className, activation, allocation, presentation, trailingPlacement, slot, }: TabBarProps): kerfjs.SafeHtml;
+declare function TabBar({ id, label, children, leading, trailing, end, className, activation, allocation, presentation, iconOnlyAt, trailingPlacement, slot, }: TabBarProps): kerfjs.SafeHtml;
 
-export { type TabActivation, TabBar, type TabBarAllocation, type TabBarPresentation, type TabBarProps, type TabBarTrailingPlacement };
+export { type TabActivation, TabBar, type TabBarAllocation, type TabBarIconOnlyAt, type TabBarPresentation, type TabBarProps, type TabBarTrailingPlacement };

package/dist/tab-bar.js

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

package/dist/tab-scaffold.d.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from 'kerfjs';
+import { PaneAppearance } from './pane.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface TabScaffoldTabBase<Id extends string> {
@@ -8,6 +9,8 @@ interface TabScaffoldTabBase<Id extends string> {
     icon?: SafeHtml;
     /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */
     content: KerfUiContent;
+    /** Background of this scene's scrolling work surface. */
+    appearance?: PaneAppearance;
 }
 /** A tab with an optional count or short-status badge. */
 interface TabScaffoldTabCountBadge {

package/dist/tab-scaffold.js

@@ -26,6 +26,7 @@ function TabScaffold({
             class: "kui-tab-scaffold__scene",
             "data-tab-scaffold-scene": tab.id,
             "data-active": String(tab.id === active),
+            "data-appearance": tab.appearance === "sunken" ? "sunken" : void 0,
             "aria-hidden": String(tab.id !== active),
             children: tab.content
           }

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 { 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}\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            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/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"]}

package/dist/text.d.ts

@@ -8,8 +8,9 @@ type TextSize = 'compact' | 'default' | 'large' | 'xlarge';
 type TextFont = 'default' | 'monospace';
 type TextBorder = 'transparent' | 'none';
 type TextLineHeight = 'default' | 'tight';
+type TextWrap = 'normal' | 'anywhere' | 'nowrap' | 'truncate';
 type TextContent = KerfUiContent | string | number | readonly TextContent[];
-type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
+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. */
@@ -28,11 +29,21 @@ type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
     class?: string;
     className?: string;
 };
+type TextProps = TextCommonProps & ({
+    /** Wrap normally or break long unbroken strings. Defaults to normal. */
+    wrap?: 'normal' | 'anywhere';
+    /** Cap wrapped text to this positive number of lines. */
+    maxLines?: number;
+} | {
+    /** Keep one line, with or without an ellipsis. */
+    wrap: 'nowrap' | 'truncate';
+    maxLines?: never;
+});
 /**
  * Semantic heading, paragraph, or inline text. Block variants use the standard
  * 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, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;
+declare function Text({ variant: Variant, tone, size, font, border, flush, lineHeight, wrap, maxLines, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;
 
-export { Text, type TextBorder, type TextContent, type TextFont, type TextLineHeight, type TextProps, type TextSize, type TextTone, type TextVariant };
+export { 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 { Text } from './chunk-AUKT3KMG.js';
+export { Text } from './chunk-CQHN45XR.js';
 
 //# sourceMappingURL=text.js.map