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

package/dist/styles/floating-toolbar.css

@@ -1,8 +1,7 @@
 .kui-floating-toolbar {
   /* Inset from the container edges: a top toolbar sits 8px in, so this floats an
      extra 8px past that (--kui-space-m = 16px). Override the token to reposition,
-     on the toolbar or on an ancestor composition boundary: a Workbench restore
-     corner sets it to 0 because the corner already owns the inset. */
+     on the toolbar or on an ancestor composition boundary. */
   --_kui-floating-toolbar-inset: var(
     --kui-floating-toolbar-inset,
     var(--kui-space-m, 1rem)
@@ -14,16 +13,36 @@
   position: absolute;
   z-index: 4;
   /* A layout whose open side overlay covers this toolbar's region (a
-     Workbench rail, a CollapsiblePanel, a ResizableRegion) flags that region,
-     and the toolbar hides — out of the tab order and the accessibility tree —
-     rather than risk painting over the overlay. */
-  visibility: var(--_kui-floating-covered, inherit);
+     Workbench rail, a CollapsiblePanel, a ResizableRegion) provides its own
+     covered context to that region, and the toolbar hides — out of the tab
+     order and the accessibility tree — rather than risk painting over the
+     overlay. Any enclosing layout's covered context hides it. */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
   display: flex;
   color-scheme: dark;
   align-items: center;
   gap: var(--kui-space-xs, 0.5rem);
 }
 
+/* In a layout's restore corner the corner already owns the inset, so the
+   toolbar floats from the corner itself. Zero specificity: the toolbar's own
+   `inset` (or an app rule on the toolbar) still wins, while a token inherited
+   from outside the corner does not. */
+:where(
+    .kui-workbench__restore,
+    .kui-collapsible-panel__restore,
+    .kui-resizable-region__restore
+  )
+  :where(.kui-floating-toolbar) {
+  --kui-floating-toolbar-inset: 0px;
+}
+
 .kui-floating-toolbar[data-position^="bottom"] {
   inset-block-end: var(--_kui-floating-toolbar-inset);
 }

package/dist/styles/list-header.css

@@ -88,18 +88,6 @@
   text-align: start;
 }
 
-.kui-list-header__label {
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  font-size: var(--kui-font-xs);
-  font-weight: 650;
-  letter-spacing: 0.04em;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
 .kui-list-header__action,
 .kui-list-header__action-layer {
   display: grid;

package/dist/styles/list.css

@@ -110,19 +110,19 @@
   overscroll-behavior-y: contain;
 }
 
-.kui-list[divider-sides*="t"] {
+.kui-list:is([divider-sides*="t"], [data-scroll-divider*="t"]) {
   --_kui-list-divider-top: var(--kui-list-divider-color);
 }
 
-.kui-list[divider-sides*="r"] {
+.kui-list:is([divider-sides*="r"], [data-scroll-divider*="r"]) {
   --_kui-list-divider-right: var(--kui-list-divider-color);
 }
 
-.kui-list[divider-sides*="b"] {
+.kui-list:is([divider-sides*="b"], [data-scroll-divider*="b"]) {
   --_kui-list-divider-bottom: var(--kui-list-divider-color);
 }
 
-.kui-list[divider-sides*="l"] {
+.kui-list:is([divider-sides*="l"], [data-scroll-divider*="l"]) {
   --_kui-list-divider-left: var(--kui-list-divider-color);
 }
 

package/dist/styles/nav-stack.css

@@ -69,24 +69,6 @@
   background: var(--kui-color-surface);
 }
 
-/* A navigation bar is one control band tall: the toolbar keeps its inline
-   padding and any claimed block inset, but drops the block gap so the bar is
-   the band height (44px) plus the unsafe inset it clears. */
-.kui-nav-stack__chrome > .kui-nav-stack__toolbar {
-  min-height: calc(
-    var(--_kui-toolbar-band) + var(--_kui-toolbar-safe-block-start) +
-      var(--_kui-toolbar-safe-block-end)
-  );
-  padding-block: var(--_kui-toolbar-safe-block-start)
-    var(--_kui-toolbar-safe-block-end);
-}
-
-/* The title fills the leading zone beside the back control and truncates. */
-.kui-nav-stack__title {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
 .kui-nav-stack__viewport {
   --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
   --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
@@ -179,10 +161,45 @@
   padding-block-end: var(--_kui-nav-stack-safe-block-end);
   padding-inline: var(--_kui-nav-stack-safe-inline-start)
     var(--_kui-nav-stack-safe-inline-end);
-  border-block-start: 1px solid var(--kui-color-neutral-border-normal);
+  border-block-start: 1px solid
+    var(--_kui-nav-stack-bottom-divider, transparent);
   background: var(--kui-color-surface);
 }
 
+/* The live chrome is the containing block of its scroll divider; a
+   cross-fading copy stays absolutely positioned. */
+.kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy) {
+  position: relative;
+}
+
+/* Chrome dividers: with `chromeDividers="scroll"` (the default, no
+   attribute) the top chrome draws a line along its bottom edge while the
+   active view's content is scrolled beneath it, and the bottom toolbar
+   colors its 1px top border while more content lies below it — never when
+   the content fits. `wireScrollDividers` reports that state through
+   `data-scroll-divider`; `always` draws both lines without it, and `none`
+   neither, whatever it reports. The chrome's line is an overlaid 1px pseudo-element
+   (whatever the chrome holds never covers it) and the bottom's border is
+   always there, so showing either never moves the chrome, the toolbar, or
+   the content. A cross-fading chrome copy keeps the line its snapshot had. */
+.kui-nav-stack:not([data-chrome-dividers])
+  > .kui-nav-stack__chrome[data-scroll-divider*="b"]::after,
+.kui-nav-stack[data-chrome-dividers="always"] > .kui-nav-stack__chrome::after {
+  position: absolute;
+  block-size: 1px;
+  background: var(--kui-color-neutral-border-normal);
+  content: "";
+  inset-block-end: 0;
+  inset-inline: 0;
+  pointer-events: none;
+}
+
+.kui-nav-stack:not([data-chrome-dividers])
+  > .kui-nav-stack__bottom[data-scroll-divider*="t"],
+.kui-nav-stack[data-chrome-dividers="always"] > .kui-nav-stack__bottom {
+  --_kui-nav-stack-bottom-divider: var(--kui-color-neutral-border-normal);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .kui-nav-stack__view,
   .kui-nav-stack__chrome,
@@ -191,3 +208,13 @@
     transition: none;
   }
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a NavStack fills 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. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="nav-stack"]:only-child {
+  height: 100%;
+}

package/dist/styles/pane.css

@@ -147,6 +147,37 @@
   grid-area: footer;
 }
 
+/* Chrome dividers: one line under the header and one over the footer, where
+   the pinned chrome meets the scrolling content, whatever the chrome holds.
+   `chromeDividers="scroll"` (the default, no attribute) draws each only while
+   `wireScrollDividers` reports content scrolled away beneath it through
+   `data-scroll-divider` on the slot; `always` draws both; `none` neither. The
+   line is an inset shadow inside the slot, so showing or hiding it never
+   moves the chrome or the content. */
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: transparent;
+}
+
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar) {
+  box-shadow: inset 0 -1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane > .kui-pane__footer {
+  box-shadow: inset 0 1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane:not([data-chrome-dividers])
+  > :is(.kui-pane__header, .kui-pane__toolbar)[data-scroll-divider*="b"],
+.kui-pane:not([data-chrome-dividers])
+  > .kui-pane__footer[data-scroll-divider*="t"],
+.kui-pane[data-chrome-dividers="always"]
+  > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: var(
+    --kui-pane-separator-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
 /* `chromePlacement="auto"`: the header and footer stay pinned while the pane
    is tall enough; below 480px of height (30rem, so it scales with the text
    size) the whole pane scrolls as one column instead, so tall chrome can never
@@ -177,3 +208,22 @@
     overflow: visible;
   }
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a Pane fills 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. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="pane"]:only-child {
+  height: 100%;
+}
+
+/* As the only child of a NavStack view or a TabScaffold scene, a Pane fills
+   it too, so its content owns the scroll and its header and footer stay
+   pinned; the view or scene then never scrolls (it hands the Pane its
+   safe-area edge context, which the Pane's slots apply). */
+:is(.kui-nav-stack__view, .kui-tab-scaffold__scene)
+  > [data-component="pane"]:only-child {
+  height: 100%;
+}

package/dist/styles/popup-menu.css

@@ -88,3 +88,154 @@
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
+
+/* In a ToolbarControlGroup a PopupMenu sizes itself in the group's context:
+   the group lays out its own native and raw Web Awesome children and names a
+   PopupMenu only to key its own state on it. The trigger takes the group's
+   control height (40px, or 32px in a compact group). A mixed-content trigger
+   in a nested-dropdown group grows for its label plus the caret; a fixed 32px
+   base would center both outside its host, painting the label across the
+   separator and the caret beyond the group border. */
+/* The trigger button takes the group's control metrics, as the group's own
+   raw wa-button children do (toolbar-control-group.css excludes this
+   trigger). The PopupMenu ancestor sits in `:where()` so each rule keeps the
+   specificity of the group's matching raw-child rule and resolves against the
+   group's attribute-keyed variants exactly as they do. */
+.kui-toolbar-control-group :where(wa-dropdown.kui-popup-menu) > wa-button {
+  --wa-form-control-height: 2.5rem;
+  display: inline-flex;
+  line-height: 0;
+  align-items: center;
+  justify-content: center;
+  --wa-color-fill-quiet: transparent;
+}
+.kui-toolbar-control-group[data-size="compact"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  --wa-form-control-height: 2rem;
+}
+.kui-toolbar-control-group[data-content="mixed"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  line-height: normal;
+}
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button
+  > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+/* Toolbar controls never wrap: a slotted icon and its label share one row. */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(label) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kui-space-xs);
+  white-space: nowrap;
+}
+/* At least a circle around an icon-only trigger, with the group's item radius;
+   hover lifts the trigger like a group button, except in a `single` group,
+   whose whole surface shows the hover (toolbar-control-group.css). */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(base) {
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+}
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button: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"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: 2.5rem;
+  height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown.kui-popup-menu {
+  margin: -2px;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+.kui-toolbar-control-group[data-single="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+
+/* The menu insets a composing parent asks for. A PopupMenu applies them to
+   itself; its default is the Select listbox inset above, which a
+   ToolbarControlGroup's `standard` inset keeps. A PopupSurface's inset follows
+   the group's, so a surface wins when both apply. */
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-toolbar-control-group[data-menu-inset="list-zero"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}

package/dist/styles/resizable-region.css

@@ -6,14 +6,22 @@
   --kui-resizable-region-handle-active-color: var(--kui-color-text-link);
   /* Extra track a horizontal region adds when it reaches an unsafe screen edge,
      so its surface paints through the unsafe area while its committed size
-     stays the content width. A composing layout sets it on the region (a
-     SplitView list does); it never inherits into a nested region. */
+     stays the content width. The region sets it itself from the context of a
+     layout that places it at an edge (a SplitView list); it never inherits
+     into a nested region. */
   --kui-resizable-region-edge-extent: 0px;
   position: relative;
   display: flex;
   min-width: 0;
   min-height: 0;
 }
+/* As a split SplitView's list, the region's track grows by the unsafe
+   inline-start inset the SplitView provides, while its committed size stays
+   the content width. A collapsed region stays shut. */
+.kui-split-view[data-split-mode="split"]
+  > .kui-resizable-region:not([data-collapsed="true"]) {
+  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
+}
 .kui-resizable-region[data-axis="horizontal"] {
   width: calc(
     var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
@@ -218,8 +226,9 @@
    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 read by FloatingToolbar and the layouts' restore
-   corners. It is set on the overlay's container and cleared again on the
+   closes. The ResizableRegion's own covered context,
+   `--_kui-resizable-region-covered`, is read by FloatingToolbar and the
+   layouts' restore corners. It is set on the overlay's container and cleared again on the
    overlay regions in it, so it reaches the overlay's siblings only. It is
    never set by a universal selector below the :has() container (`:has(…) >
    :not(…)`): Chromium then restyles every child of every ancestor of a DOM
@@ -231,7 +240,7 @@
       )
   )
 ) {
-  --_kui-floating-covered: hidden;
+  --_kui-resizable-region-covered: hidden;
 }
 :where(
     :has(
@@ -241,7 +250,7 @@
     )
   )
   > .kui-resizable-region[data-presentation="overlay"] {
-  --_kui-floating-covered: initial;
+  --_kui-resizable-region-covered: initial;
 }
 
 @container (max-width: 44rem) {
@@ -311,12 +320,15 @@
     --kui-resizable-region-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 side overlay covers the content (see above). */
-  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-resizable-region-restore-z,
     calc(var(--kui-resizable-region-overlay-z, 41) - 2)

package/dist/styles/select.css

@@ -49,10 +49,10 @@
    caret wa-button): symmetric 8px inline padding, 12px from the icon to the
    caret's 20px box, the caret glyph size, and the control height, so the icon
    sits left of center to balance the caret. Inside a ToolbarControlGroup the
-   trigger takes the group's control-slot height, overlap, and radius
-   (`--_kui-toolbar-slot-*`) so it is inset evenly on every side, the group
-   sizes to the trigger (wider than tall), and the group-owned focus ring
-   stays concentric with it. */
+   trigger takes the control-slot height, overlap, and radius the group
+   provides (`--_kui-toolbar-control-group-slot-*`) so it is inset evenly on
+   every side, the group sizes to the trigger (wider than tall), and the
+   group-owned focus ring stays concentric with it. */
 .kui-select[data-selected-presentation="icon-only"] {
   --_kui-select-height: 2.75rem;
   width: max-content;
@@ -61,7 +61,10 @@
   --_kui-select-height: 2rem;
 }
 .kui-select[data-selected-presentation="icon-only"]::part(combobox) {
-  min-height: var(--_kui-toolbar-slot-height, var(--_kui-select-height));
+  min-height: var(
+    --_kui-toolbar-control-group-slot-height,
+    var(--_kui-select-height)
+  );
   padding-inline: 0.5rem;
   border-radius: var(
     --kui-toolbar-item-radius,
@@ -72,14 +75,32 @@
    sibling controls it keeps the group's gap, end insets, and item radius, as
    they do. */
 .kui-select[data-selected-presentation="icon-only"]:only-child {
-  margin-inline: calc(var(--_kui-toolbar-slot-overlap, 0px) * -1);
+  margin-inline: calc(var(--_kui-toolbar-control-group-slot-overlap, 0px) * -1);
 }
 .kui-select[data-selected-presentation="icon-only"]:only-child::part(combobox) {
   border-radius: var(
-    --_kui-toolbar-slot-radius,
+    --_kui-toolbar-control-group-slot-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
   );
 }
+/* In a ToolbarControlGroup, a Select beside other controls highlights its own
+   pill on hover, like its button and dropdown siblings; a lone Select instead
+   lifts the whole group (toolbar-control-group.css). */
+.kui-toolbar-control-group:not([data-single="true"])
+  > .kui-select:not(:only-child):hover::part(combobox) {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+/* With the group's 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"]
+  > .kui-select:not([open]):focus-within::part(combobox) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
 /* The popup-menu wa-button draws the same chevron glyph at 0.875em inside a
    20px box; match its box, spacing, and glyph size rather than the smaller
    form-field disclosure scale. */
@@ -99,13 +120,6 @@
   .kui-select__icon[slot="start"] {
   margin-inline-end: 0 !important;
 }
-/* A multiple icon-only trigger: its fixed icon, then a count badge while any
-   choice is chosen, 4px from the icon (the caret keeps its 12px after it).
-   The summary that ends its label (and accessible name) stays inline text, so
-   a visible label reads "Labels: Bug, Docs" in place of the hidden value. */
-.kui-select__count {
-  margin-inline-start: 0.25rem;
-}
 .kui-select::part(start),
 .kui-select::part(end),
 .kui-select::part(expand-icon) {

package/dist/styles/skeleton.css

@@ -7,9 +7,10 @@
   height: 1em;
   border-radius: var(--kui-skeleton-radius);
   /* Deliberately unanimated: a flat, subtle fill that reads as "not yet loaded"
-     without drawing the eye or implying progress. A host with its own solid
-     fill (a solid Badge) supplies `--_kui-skeleton-fill` derived from its
-     foreground, since a text-color tint vanishes on a saturated fill. */
+     without drawing the eye or implying progress. On a host with its own
+     solid fill (a solid Badge) the skeleton derives `--_kui-skeleton-fill`
+     from the host's foreground, since a text-color tint vanishes on a
+     saturated fill. */
   background: var(
     --_kui-skeleton-fill,
     color-mix(in srgb, var(--kui-color-text) 12%, transparent)
@@ -17,6 +18,19 @@
   vertical-align: middle;
 }
 
+/* A placeholder's skeleton inside a solid badge: the generic text-color tint is
+   nearly invisible on the saturated fill, so derive it from the on-solid
+   foreground the badge provides, which contrasts with the fill in every tone
+   and color scheme. Quiet and outline badges sit on a pale fill and keep the
+   generic tint. */
+.kui-badge[data-appearance="solid"] .kui-skeleton {
+  --_kui-skeleton-fill: color-mix(
+    in srgb,
+    var(--_kui-badge-on-solid) 45%,
+    transparent
+  );
+}
+
 .kui-skeleton[data-block="true"] {
   display: block;
 }
@@ -63,3 +77,16 @@
     background: GrayText;
   }
 }
+
+/* A placeholder StateBanner's badge holds this skeleton instead of text. With
+   no text, the skeleton's baseline would be synthesized from its bottom edge,
+   sitting the badge higher than the live one by a font-dependent amount. A
+   zero-width character gives it a text baseline in the badge's own font and
+   line height, exactly where the live badge's text baseline falls on every
+   platform. */
+.kui-state-banner[data-placeholder="true"]
+  .kui-state-banner__copy
+  > .kui-badge
+  > .kui-skeleton::before {
+  content: "\200b";
+}

package/dist/styles/split-view.css

@@ -51,13 +51,6 @@
   min-height: 0;
 }
 
-/* A resizable list keeps its committed size as content width; its region's
-   track grows by the unsafe inset it reaches. A collapsed region stays shut. */
-.kui-split-view[data-split-mode="split"]
-  > [data-component="resizable-region"]:not([data-collapsed="true"]) {
-  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
-}
-
 .kui-split-view__list,
 .kui-split-view__detail {
   --kui-edge-inset-block-start: var(--_kui-split-view-safe-block-start);
@@ -135,3 +128,13 @@
   display: block;
   height: 100%;
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a SplitView fills 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. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="split-view"]:only-child {
+  height: 100%;
+}

package/dist/styles/state-banner.css

@@ -160,25 +160,6 @@
   margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   font-size: var(--kui-font-xs);
 }
-/* The badge is taller than the title's line. Negative block margins keep it
-   out of the line-height calculation, so a wrapped title's lines stay evenly
-   spaced whichever line the badge lands on. */
-.kui-state-banner__badge {
-  margin-block: -0.5em;
-  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
-  vertical-align: baseline;
-}
-/* A placeholder badge holds a skeleton instead of text. With no text, the
-   skeleton's baseline would be synthesized from its bottom edge, sitting the
-   badge higher than the live one by a font-dependent amount. A zero-width
-   character gives it a text baseline in the badge's own font and line
-   height, exactly where the live badge's text baseline falls on every
-   platform. */
-.kui-state-banner[data-placeholder="true"]
-  .kui-state-banner__badge
-  > *::before {
-  content: "\200b";
-}
 /* The clip lives on an inner span, not on the detail itself. WebKit still
    applies the CSS 2.1 rule that an inline-block whose overflow is not
    `visible` takes its baseline from its bottom margin edge, so a clipped

package/dist/styles/surface-scaffold.css

@@ -40,12 +40,17 @@
 .kui-popup-surface {
   display: inline-flex;
 }
-.kui-popup-surface[data-inset="standard"] > wa-dropdown::part(menu) {
+/* The surface insets the menu of a raw wa-dropdown it wraps. A PopupMenu
+   applies the surface's inset to itself (popup-menu.css). */
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
-.kui-popup-surface[data-inset="compact"] > wa-dropdown::part(menu) {
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0.25rem;
 }
-.kui-popup-surface[data-inset="list-zero"] > wa-dropdown::part(menu) {
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0;
 }