@kerfjs/ui 5.0.0-beta.60 → 5.0.0-beta.62

package/dist/styles/popup-menu.css

@@ -54,7 +54,8 @@
   color: var(--_kui-popup-row-current-color);
   background-color: var(--_kui-popup-row-current-background);
 }
-.kui-popup-menu > wa-divider {
+.kui-popup-menu > wa-divider,
+.kui-popup-menu wa-divider[slot="submenu"] {
   --spacing: 0.5em;
 }
 

package/dist/styles/resizable-region.css

@@ -73,6 +73,15 @@
   > .kui-resizable-region__content {
   overflow: visible;
 }
+/* An open Web Awesome dropdown (including PopupMenu) releases both clipping
+   ancestors without rerendering the region during the dropdown lifecycle. */
+.kui-resizable-region:has(wa-dropdown[open]) {
+  z-index: var(--kui-resizable-region-popup-z, 5);
+  overflow: visible;
+}
+.kui-resizable-region:has(wa-dropdown[open]) > .kui-resizable-region__content {
+  overflow: visible;
+}
 .kui-resizable-region[data-separator="hidden"] {
   --kui-resizable-region-separator-color: transparent;
 }

package/dist/styles/segmented-control.css

@@ -1,7 +1,7 @@
 .kui-segmented-control {
   --kui-segmented-background: var(--kui-color-neutral-fill-normal);
   --kui-segmented-border: transparent;
-  --kui-segmented-foreground: var(--kui-color-neutral-on-quiet);
+  --kui-segmented-foreground: var(--kui-color-neutral-on-normal);
   --kui-segmented-hover-background: var(--kui-color-surface);
   --kui-segmented-hover-border: var(--kui-color-neutral-border-normal);
   --kui-segmented-selected-background: var(--kui-color-surface);
@@ -38,6 +38,7 @@
 .kui-segmented-control[data-appearance="outlined"] {
   --kui-segmented-border: var(--kui-color-neutral-border-normal);
   --kui-segmented-background: var(--kui-color-surface);
+  --kui-segmented-foreground: var(--kui-color-neutral-on-quiet);
 }
 
 .kui-segmented-control[data-appearance="toolbar"] {

package/dist/styles/select.css

@@ -108,6 +108,21 @@
   margin-inline-start: 0.75rem;
   transform: scale(0.875);
 }
+.kui-select[data-caret="false"]::part(expand-icon) {
+  display: none;
+}
+.kui-select[data-selected-presentation="icon-only"][data-caret="false"]::part(
+    combobox
+  ) {
+  width: var(
+    --_kui-toolbar-control-group-slot-height,
+    var(--_kui-select-height)
+  );
+  justify-content: center;
+}
+.kui-select[data-caret="false"] .kui-select__placeholder-chevron {
+  display: none;
+}
 .kui-select[data-selected-presentation="icon-only"]::part(display-input) {
   position: absolute;
   width: 1px;
@@ -233,6 +248,36 @@
   text-transform: uppercase;
 }
 
+.kui-select__actions {
+  display: flex;
+  gap: 0.25rem;
+  margin-block-start: 0.25rem;
+  padding-block-start: 0.5rem;
+  border-block-start: 1px solid var(--kui-color-neutral-border-quiet);
+}
+
+.kui-select__action {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 2.25rem;
+  padding-inline: 0.5rem;
+  border: 0;
+  border-radius: var(--kui-radius-s);
+  color: var(--kui-color-neutral-on-quiet);
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+
+.kui-select__action:hover {
+  background: var(--kui-color-neutral-fill-quiet);
+}
+
+.kui-select__action:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+
 /* Loading placeholder: a static box that mirrors the closed combobox (label
    above, a value skeleton and a dormant chevron inside a 44px control box).
    Rendered instead of the interactive wa-select, so it needs no registration. */

package/dist/styles/split-view.css

@@ -137,4 +137,10 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="split-view"]:only-child {
   height: 100%;
+  --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);
 }

package/dist/styles/styles.css

@@ -1,6 +1,7 @@
 @import "./foundation.css";
 @import "./layout.css";
 @import "./badge.css";
+@import "./chip.css";
 @import "./lucide-icon.css";
 @import "./disclosure-arrow.css";
 @import "./toolbar.css";

package/dist/styles/tab-bar.css

@@ -45,6 +45,9 @@
   scroll-padding-inline: var(--kui-tab-bar-strip-scroll-padding-inline, 0);
   overscroll-behavior-inline: contain;
 }
+.kui-tab-bar[data-icon-only-at] .kui-tab-bar__tabs {
+  container: kui-tab-bar-tabs / inline-size;
+}
 .kui-tab-bar[data-presentation="segmented"],
 .kui-tab-bar[data-presentation="inspector"] {
   --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);

package/dist/styles/tab-scaffold.css

@@ -46,6 +46,13 @@
   inset: 0;
 }
 
+.kui-tab-scaffold__scene[data-appearance="sunken"] {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
 /* A scene is its region's scroll owner, so its top inset is padding inside
    the scroller. A scene whose only child is a Pane or layout (usually a
    NavStack) lets that child own the insets instead. */
@@ -191,4 +198,10 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="tab-scaffold"]:only-child {
   height: 100%;
+  --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);
 }

package/dist/styles/toolbar-text.css

@@ -47,17 +47,23 @@
   text-overflow: ellipsis;
 }
 
-.kui-toolbar-text[data-size="xlarge"] {
-  /* Matches page/panel titles: the same responsive clamp so a heading toolbar
-     title reads at the page-title scale without a bespoke override. Height grows
-     to the larger text (the fixed 40px would clip its ascenders). */
+.kui-toolbar-text:is([data-size="xlarge"], [data-size="xlarge-fixed"]) {
+  /* Both title sizes keep page/panel title color and geometry. Height grows to
+     their text instead of clipping ascenders in the default 40px box. */
   height: auto;
   min-height: 2.75rem;
   color: var(--kui-color-text);
-  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
   letter-spacing: -0.025em;
 }
 
+.kui-toolbar-text[data-size="xlarge"] {
+  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
+}
+
+.kui-toolbar-text[data-size="xlarge-fixed"] {
+  font-size: var(--kui-font-l);
+}
+
 .kui-toolbar-text[data-size="large"] {
   font-size: var(--kui-font-m);
   letter-spacing: -0.015em;
@@ -93,7 +99,10 @@
   min-height: 2.5rem;
 }
 
-.kui-toolbar-text[data-size="xlarge"][data-wrap="true"] {
+.kui-toolbar-text:is(
+    [data-size="xlarge"],
+    [data-size="xlarge-fixed"]
+  )[data-wrap="true"] {
   min-height: 2.75rem;
 }
 

package/dist/styles/toolbar.css

@@ -35,21 +35,24 @@
      column shrinks still keeps a whole control row clear of the unsafe area. */
   min-height: calc(
     var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      (2 * var(--kui-toolbar-gap, 0.5rem)) +
+      (2 * var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem))) +
       var(--_kui-toolbar-safe-block-start) + var(--_kui-toolbar-safe-block-end)
   );
   padding-block: calc(
-      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-start)
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
+        var(--_kui-toolbar-safe-block-start)
     )
     calc(
-      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-end)
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
+        var(--_kui-toolbar-safe-block-end)
     );
   padding-inline: calc(
-      var(--kui-toolbar-gap, 0.5rem) +
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
         var(--_kui-toolbar-safe-inline-start)
     )
     calc(
-      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-inline-end)
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
+        var(--_kui-toolbar-safe-inline-end)
     );
 }
 
@@ -92,6 +95,13 @@
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
+/* Equal side tracks center the middle zone on the toolbar's content box even
+   when one side has no controls. Side content still shrinks or wraps within
+   its own track, and responsive policies below may move a zone to a new row. */
+.kui-toolbar[data-center-align="balanced"][data-has-center="true"] {
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
 .kui-toolbar[data-responsive="trailing-priority"][data-has-center="false"]:has(
     > .kui-toolbar__trailing [data-expanded="true"]
   ) {

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"]
@@ -579,10 +605,7 @@
    `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:has(
-  > .kui-workbench__rail[data-responsive-overlay-at],
-  > .kui-workbench__center > .kui-workbench__drawer[data-responsive-overlay-at]
-) {
+.kui-workbench[data-responsive-overlay="true"] {
   container: kui-workbench / inline-size;
 }
 
@@ -622,16 +645,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,10 +684,10 @@
     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
+    );
   }
 }
 
@@ -708,16 +727,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 +766,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,20 +890,15 @@
    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(
-        [data-collapsed="true"]
-      )
-  )
+.kui-workbench[data-rail-overlay-expanded="true"]
   > :is(.kui-workbench__center, .kui-workbench__restore) {
   --_kui-workbench-covered: hidden;
 }
 
 @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 +906,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;

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
           }