@kerfjs/ui 5.0.0-beta.56 → 5.0.0-beta.57

package/dist/styles/toolbar-control-group.css

@@ -21,15 +21,17 @@
     )
   );
   --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
-  /* Internal group-to-child contract: the control slot a composed child (an
-     icon-only Select) fills so it is inset evenly on every side and the
-     group-owned focus ring stays concentric with the visible control. The
-     group sizes to the child's width. A default slot is 40px tall inside the
-     2px inset; a compact slot is the full 32px padding box, and a lone
-     compact child also overlaps the 1px inline padding. */
-  --_kui-toolbar-slot-height: 2.5rem;
-  --_kui-toolbar-slot-overlap: 0px;
-  --_kui-toolbar-slot-radius: var(--kui-toolbar-item-radius);
+  /* Context the group provides to a composed child (an icon-only Select, in
+     select.css): the control slot the child fills so it is inset evenly on
+     every side and the group-owned focus ring stays concentric with the
+     visible control. The group sizes to the child's width. A default slot is
+     40px tall inside the 2px inset; a compact slot is the full 32px padding
+     box, and a lone compact child also overlaps the 1px inline padding. The
+     values are named after the group that provides them; the child reads
+     them from its own stylesheet. */
+  --_kui-toolbar-control-group-slot-height: 2.5rem;
+  --_kui-toolbar-control-group-slot-overlap: 0px;
+  --_kui-toolbar-control-group-slot-radius: var(--kui-toolbar-item-radius);
   display: inline-flex;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
@@ -44,6 +46,23 @@
   gap: 0;
 }
 
+/* In a Toolbar zone, a group shorter than the toolbar's control band (the
+   `--_kui-toolbar-band` the Toolbar provides) takes half the difference as a
+   top margin, so it centers in the band by its own size. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group {
+  margin-block-start: max(
+    0px,
+    calc(
+      (
+          var(--_kui-toolbar-band) -
+            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+        ) /
+        2
+    )
+  );
+}
+
 .kui-toolbar-control-group[data-visibility="compact-only"] {
   display: none;
 }
@@ -80,9 +99,9 @@
 }
 .kui-toolbar-control-group[data-size="compact"] {
   --kui-toolbar-group-size: 2.125rem;
-  --_kui-toolbar-slot-height: 2rem;
-  --_kui-toolbar-slot-overlap: 1px;
-  --_kui-toolbar-slot-radius: max(
+  --_kui-toolbar-control-group-slot-height: 2rem;
+  --_kui-toolbar-control-group-slot-overlap: 1px;
+  --_kui-toolbar-control-group-slot-radius: max(
     0px,
     calc(var(--kui-toolbar-group-radius) - 1px)
   );
@@ -121,13 +140,15 @@
   display: flex;
   gap: var(--kui-space-xs);
 }
-.kui-toolbar-control-group[data-content="mixed"] wa-button {
+.kui-toolbar-control-group[data-content="mixed"]
+  wa-button:not(:where(.kui-popup-menu > *)) {
   line-height: normal;
 }
 /* Toolbar controls never wrap. Web Awesome's label part is a plain block, so a
    slotted icon (a block SVG) and its text would otherwise stack vertically —
    lay them out on one row the way native mixed buttons already are. */
-.kui-toolbar-control-group wa-button::part(label) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::part(label) {
   display: inline-flex;
   align-items: center;
   gap: var(--kui-space-xs);
@@ -183,11 +204,15 @@
   background: transparent;
 }
 
-.kui-toolbar-control-group
-  > :is(button, wa-button, wa-dropdown, .kui-toolbar-action-link) {
+/* The group lays out its own native and raw Web Awesome children. A composed
+   PopupMenu (`wa-dropdown.kui-popup-menu`) or Select sizes itself in the
+   group's context from its own stylesheet (popup-menu.css, select.css); the
+   group names those children by class only to key its own state on them. */
+.kui-toolbar-control-group > :is(button, wa-button, .kui-toolbar-action-link),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
   flex: 0 0 auto;
 }
-.kui-toolbar-control-group > wa-dropdown {
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
   display: inline-flex;
 }
 
@@ -268,7 +293,7 @@
 }
 
 .kui-toolbar-control-group > button svg,
-.kui-toolbar-control-group wa-button > svg,
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) > svg,
 .kui-toolbar-control-group > .kui-toolbar-action-link svg {
   display: block;
   width: 1rem;
@@ -276,34 +301,43 @@
 }
 
 /* Nested Web Awesome buttons take the group's control height, not the theme's
-   44px standalone control height. */
-.kui-toolbar-control-group wa-button {
+   44px standalone control height. The group's `wa-button` rules style only raw
+   buttons: a composed PopupMenu's trigger (`.kui-popup-menu > wa-button`) is
+   excluded inside a zero-specificity `:where()` and takes the same metrics
+   from popup-menu.css. */
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
   --wa-form-control-height: 2.5rem;
 }
-.kui-toolbar-control-group[data-size="compact"] wa-button {
+.kui-toolbar-control-group[data-size="compact"]
+  wa-button:not(:where(.kui-popup-menu > *)) {
   --wa-form-control-height: 2rem;
 }
 
 .kui-toolbar-control-group > wa-button,
-.kui-toolbar-control-group > wa-dropdown,
-.kui-toolbar-control-group > wa-dropdown > wa-button,
-.kui-toolbar-control-group > wa-dropdown > wa-button::part(base) {
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base) {
   min-width: 2.5rem;
   height: 2.5rem;
 }
 .kui-toolbar-control-group[data-size="compact"] > button,
 .kui-toolbar-control-group[data-size="compact"] > .kui-toolbar-action-link,
 .kui-toolbar-control-group[data-size="compact"] > wa-button,
-.kui-toolbar-control-group[data-size="compact"] > wa-dropdown,
-.kui-toolbar-control-group[data-size="compact"] > wa-dropdown > wa-button,
 .kui-toolbar-control-group[data-size="compact"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base),
 .kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
-  wa-dropdown
+  wa-dropdown:not(.kui-popup-menu)
   wa-button,
 .kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
-  wa-dropdown
+  wa-dropdown:not(.kui-popup-menu)
   wa-button::part(base) {
   min-width: 2rem;
   height: 2rem;
@@ -320,16 +354,17 @@
 /* `standard` keeps each menu's own standard inset: a raw wa-dropdown takes the
    8px surface inset, while a PopupMenu keeps the Select listbox inset it
    shares (popup-menu.css). The explicit compact and list-zero choices apply to
-   every nested menu. */
+   every nested menu; a PopupMenu applies them to itself (popup-menu.css). */
 .kui-toolbar-control-group[data-menu-inset="standard"]
-  wa-dropdown:not([data-component="popup-menu"])::part(menu) {
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
-.kui-toolbar-control-group[data-menu-inset="compact"] wa-dropdown::part(menu) {
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0.25rem;
 }
 .kui-toolbar-control-group[data-menu-inset="list-zero"]
-  wa-dropdown::part(menu) {
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0;
 }
 
@@ -350,7 +385,7 @@
 }
 
 .kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
-  > wa-dropdown,
+  > wa-dropdown:not(.kui-popup-menu),
 .kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
   > wa-button {
   margin: -2px;
@@ -361,26 +396,26 @@
    the fixed 32px base centers both outside its host, painting the label across
    the separator and the caret beyond the group border. */
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button,
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
   min-width: max-content;
 }
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
   width: max-content;
 }
 
 .kui-toolbar-control-group[data-single="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
   width: max-content;
 }
 
-.kui-toolbar-control-group wa-button {
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
   display: inline-flex;
   line-height: 0;
   align-items: center;
@@ -388,7 +423,8 @@
   --wa-color-fill-quiet: transparent;
 }
 
-.kui-toolbar-control-group wa-button::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::part(base) {
   /* Match min-width to the 40px height so an icon-only button's highlight is at
      least a circle, not a vertical oval — the host is 40px wide but the base
      part was sizing to its ~32px content. Text/caret buttons grow past it. */
@@ -402,20 +438,29 @@
   );
 }
 
-.kui-toolbar-control-group wa-button:hover::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *)):hover::part(base) {
   border-color: var(--kui-toolbar-control-border);
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
-    > :is(button, wa-button, wa-dropdown, wa-select, .kui-toolbar-action-link)
+    > :is(
+      button,
+      wa-button,
+      .kui-popup-menu,
+      wa-dropdown:not(.kui-popup-menu),
+      .kui-select,
+      .kui-toolbar-action-link
+    )
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"]
   > :is(button, wa-button, .kui-toolbar-action-link):hover,
-.kui-toolbar-control-group[data-single="true"] wa-button:hover::part(base) {
+.kui-toolbar-control-group[data-single="true"]
+  wa-button:not(:where(.kui-popup-menu > *)):hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
@@ -425,7 +470,7 @@
    inner layer inset from the border (KF-J9P1ZD — a heading toolbar's lone Close/
    Done action). */
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button, wa-select, .kui-toolbar-action-link):only-child
+    > :is(button, wa-button, .kui-select, .kui-toolbar-action-link):only-child
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
@@ -437,19 +482,13 @@
 .kui-toolbar-control-group:not([data-single="true"]):has(
     > :is(button, wa-button):only-child
   )
-  wa-button:hover::part(base) {
+  > wa-button:hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
 
-/* A toolbar Select beside other controls highlights its own pill on hover,
-   like its button and dropdown siblings; a lone Select instead lifts the whole
-   group (above). */
-.kui-toolbar-control-group:not([data-single="true"])
-  > wa-select:not(:only-child):hover::part(combobox) {
-  border-color: var(--kui-toolbar-control-border);
-  background: var(--kui-toolbar-control-hover-background);
-}
+/* A toolbar Select beside other controls highlights its own pill on hover
+   (select.css); a lone Select instead lifts the whole group (above). */
 
 /* A plain <button> child paints its own box for the selected state. */
 .kui-toolbar-control-group[data-single="false"] > button[aria-pressed="true"] {
@@ -481,25 +520,29 @@
   outline-offset: 1px;
 }
 
-/* With per-control rings, a composed Select paints its own ring even when it
-   was told the group owns it: nothing else would show focus. It matches the
-   sibling controls' ring and offset. While its listbox is open the popup shows
-   focus instead, so the trigger ring stays off, as a PopupMenu trigger's does. */
-.kui-toolbar-control-group[data-focus-ring="control"]
-  > wa-select:not([open]):focus-within::part(combobox) {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
+/* With per-control rings, a composed Select paints its own ring (select.css). */
 
 .kui-toolbar-control-group[data-focus-ring="outline"]:focus-within:not(
-    :where(:has(wa-select[open], wa-dropdown[open]))
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
   ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
 .kui-toolbar-control-group[data-focus-ring="halo"]:focus-within:not(
-    :where(:has(wa-select[open], wa-dropdown[open]))
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
   ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px
@@ -517,14 +560,26 @@
    descendant also owns the group ring. Kept as separate rules so an engine
    without :has() keeps the :focus-within ring. */
 .kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus):not(
-    :where(:has(wa-select[open], wa-dropdown[open]))
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
   ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
 .kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus):not(
-    :where(:has(wa-select[open], wa-dropdown[open]))
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
   ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px

package/dist/styles/toolbar-text.css

@@ -12,6 +12,27 @@
   align-items: center;
 }
 
+/* In a Toolbar zone, a title fills the toolbar's control band (the
+   `--_kui-toolbar-band` the Toolbar provides) and centers its first line in
+   it; further lines of a wrapped title continue below the band. These rules
+   precede the size and wrap rules below, which keep their own minimum
+   heights. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text {
+  height: auto;
+  min-height: var(--_kui-toolbar-band);
+}
+
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text[data-wrap="true"] {
+  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
+}
+
+/* A filling title grows into its row's free space and truncates there. */
+.kui-toolbar-text[data-fill="true"] {
+  flex: 1 1 auto;
+}
+
 /* The text lives in a block child, not directly in the flex box, so
    `text-overflow: ellipsis` actually applies (it is a no-op on a flex item). */
 .kui-toolbar-text__text {

package/dist/styles/toolbar.css

@@ -104,28 +104,28 @@
     inset 1px 0 var(--_kui-toolbar-divider-left);
 }
 
-.kui-toolbar[divider-sides*="t"] {
+.kui-toolbar:is([divider-sides*="t"], [data-scroll-divider*="t"]) {
   --_kui-toolbar-divider-top: var(
     --kui-toolbar-divider-color,
     var(--kui-color-neutral-border-normal)
   );
 }
 
-.kui-toolbar[divider-sides*="r"] {
+.kui-toolbar:is([divider-sides*="r"], [data-scroll-divider*="r"]) {
   --_kui-toolbar-divider-right: var(
     --kui-toolbar-divider-color,
     var(--kui-color-neutral-border-normal)
   );
 }
 
-.kui-toolbar[divider-sides*="b"] {
+.kui-toolbar:is([divider-sides*="b"], [data-scroll-divider*="b"]) {
   --_kui-toolbar-divider-bottom: var(
     --kui-toolbar-divider-color,
     var(--kui-color-neutral-border-normal)
   );
 }
 
-.kui-toolbar[divider-sides*="l"] {
+.kui-toolbar:is([divider-sides*="l"], [data-scroll-divider*="l"]) {
   --_kui-toolbar-divider-left: var(
     --kui-toolbar-divider-color,
     var(--kui-color-neutral-border-normal)
@@ -140,7 +140,10 @@
    down. A growing item therefore never moves the other items or its own top.
    Centering the zones in the toolbar row instead dropped every control to the
    middle of a two-line title. The band is resolved here, on the toolbar, so a
-   compact group's own smaller group size never redefines it. */
+   compact group's own smaller group size never redefines it.
+   `--_kui-toolbar-band` is context the toolbar provides: a ToolbarControlGroup
+   and a ToolbarText each center themselves in it from their own stylesheets
+   (toolbar-control-group.css, toolbar-text.css). */
 .kui-toolbar {
   --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
 }
@@ -155,33 +158,6 @@
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
 
-:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
-  > [data-component="toolbar-control-group"] {
-  margin-block-start: max(
-    0px,
-    calc(
-      (
-          var(--_kui-toolbar-band) -
-            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
-        ) /
-        2
-    )
-  );
-}
-
-/* A title fills the band and centers its first line in it; further lines of a
-   wrapped title continue below the band. */
-:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
-  > [data-component="toolbar-text"] {
-  height: auto;
-  min-height: var(--_kui-toolbar-band);
-}
-
-:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
-  > [data-component="toolbar-text"][data-wrap="true"] {
-  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
-}
-
 /* Pin each zone to its column so a display:none (empty) leading or center zone
    doesn't let the trailing zone auto-place into the first column — which left an
    extra gap + empty track to the trailing zone's right (KF-5BEF2M). The trailing

package/dist/styles/workbench.css

@@ -191,15 +191,11 @@
 
 /* A region whose only child is a Pane or layout lets it fill the region, so a
    composed toolbar's footer (or the app's own) sits at the region's bottom
-   edge rather than under short content. */
+   edge rather than under short content. Each of those components fills the
+   region from its own stylesheet (pane.css, nav-stack.css, split-view.css,
+   tab-scaffold.css); a nested Workbench fills it here. */
 :is(.kui-workbench__main, .kui-workbench__panel-content)
-  > :is(
-    [data-component="pane"],
-    [data-component="nav-stack"],
-    [data-component="split-view"],
-    [data-component="workbench"],
-    [data-component="tab-scaffold"]
-  ):only-child {
+  > [data-component="workbench"]:only-child {
   height: 100%;
 }
 
@@ -777,12 +773,15 @@
     --kui-workbench-restore-inset,
     1rem
   );
-  /* The corner owns the inset, so a FloatingToolbar composed here floats
-     from this point instead of adding its own inset on top. */
-  --kui-floating-toolbar-inset: 0px;
   position: absolute;
   /* Hidden while an open rail overlay covers the work area (see below). */
-  visibility: var(--_kui-floating-covered, inherit);
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
   z-index: var(
     --kui-workbench-restore-z,
     calc(var(--kui-workbench-overlay-z, 41) - 2)
@@ -856,9 +855,10 @@
    restore corner) are hidden, not merely stacked beneath it: they never paint
    over the overlay whatever stacking context an app puts them in, and hidden
    they leave the tab order and the accessibility tree. They come back as the
-   overlay closes. The flag is set on the rail's siblings only (never on the
-   open rail), so the overlay's own floating controls stay, and it is read by
-   FloatingToolbar and the layouts' restore corners. A direct child
+   overlay closes. The Workbench's own covered context,
+   `--_kui-workbench-covered`, is set on the rail's siblings only (never on
+   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:has(
     > .kui-workbench__rail[data-presentation="overlay"]:not(
@@ -866,7 +866,7 @@
       )
   )
   > :is(.kui-workbench__center, .kui-workbench__restore) {
-  --_kui-floating-covered: hidden;
+  --_kui-workbench-covered: hidden;
 }
 
 @container kui-workbench (max-width: 44rem) {
@@ -876,7 +876,7 @@
         )
     )
     > :is(.kui-workbench__center, .kui-workbench__restore) {
-    --_kui-floating-covered: hidden;
+    --_kui-workbench-covered: hidden;
   }
 }
 
@@ -887,7 +887,7 @@
         )
     )
     > :is(.kui-workbench__center, .kui-workbench__restore) {
-    --_kui-floating-covered: hidden;
+    --_kui-workbench-covered: hidden;
   }
 }
 

package/dist/tab-scaffold.d.ts

@@ -50,6 +50,16 @@ interface TabScaffoldProps<Id extends string = string> {
     tabs: readonly TabScaffoldTab<Id>[];
     /** The controlled active tab id (the app owns selection). */
     active: NoInfer<Id>;
+    /**
+     * The line over the tab bar, where it meets the active scene. `scroll`
+     * (default) shows it only while more of the scene's content lies below —
+     * never at the scroll end or when the content fits — once
+     * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
+     * the scaffold; unwired, it does not show. `always` shows it without the
+     * wiring; `none` never, even when wired. The line is the bar's own 1px top
+     * border, so no state moves the bar or a tab.
+     */
+    chromeDividers?: 'scroll' | 'always' | 'none';
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -62,6 +72,6 @@ interface TabScaffoldProps<Id extends string = string> {
  * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of
  * a bottom bar. See `docs/23-app-layouts.md` §3.4.
  */
-declare function TabScaffold<Id extends string>({ id, label, tabs, active, className, slot, }: TabScaffoldProps<Id>): SafeHtml;
+declare function TabScaffold<Id extends string>({ id, label, tabs, active, chromeDividers, className, slot, }: TabScaffoldProps<Id>): SafeHtml;
 
 export { TabScaffold, type TabScaffoldProps, type TabScaffoldTab };

package/dist/tab-scaffold.js

@@ -6,6 +6,7 @@ function TabScaffold({
   label,
   tabs,
   active,
+  chromeDividers = "scroll",
   className = "",
   slot
 }) {
@@ -16,6 +17,7 @@ function TabScaffold({
       id,
       "data-component": "tab-scaffold",
       "data-tab-scaffold-id": id,
+      "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
       slot,
       children: [
         /* @__PURE__ */ jsx("div", { class: "kui-tab-scaffold__scenes", children: tabs.map((tab) => /* @__PURE__ */ jsx(

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

package/dist/toolbar-text.d.ts

@@ -23,6 +23,12 @@ interface ToolbarTextBaseProps {
      * instead. Default true.
      */
     ellipsis?: boolean;
+    /**
+     * Grow to fill the free space of the flex row it sits in (a Toolbar zone),
+     * truncating at the space left by its siblings instead of taking only its
+     * text's width. Default false.
+     */
+    fill?: boolean;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
@@ -35,6 +41,6 @@ type ToolbarTextWrappingProps = {
     maxLines?: never;
 };
 type ToolbarTextProps = ToolbarTextBaseProps & ToolbarTextWrappingProps;
-declare function ToolbarText({ text, size, className, id, headingLevel, placeholder, wrap, ellipsis, maxLines, slot, }: ToolbarTextProps): kerfjs.SafeHtml;
+declare function ToolbarText({ text, size, className, id, headingLevel, placeholder, wrap, ellipsis, maxLines, fill, slot, }: ToolbarTextProps): kerfjs.SafeHtml;
 
 export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize };