@kerfjs/ui 5.0.0-beta.97 → 5.0.0-beta.99

package/dist/styles/nav-stack.css

@@ -188,6 +188,90 @@
   position: relative;
 }
 
+/* `chromePresentation="overlay"`: the top chrome (and any copy cross-fading
+   out of it) paints the translucent chrome material (opaque under reduced
+   transparency or increased contrast, without `backdrop-filter`, or in
+   forced colors). Once `wireNavStack` has measured the live chrome
+   (`data-chrome-overlay="measured"`, with its border-box block size, top
+   safe area included, published on this root), the chrome lies over the
+   viewport's top edge and the viewport hands that size to its views as the
+   block-start edge context, so a plain view, a sole Pane, or a nested layout
+   pads and scroll-pads by it: content scrolls beneath the chrome yet rests
+   clear of it. Unwired, the chrome stays docked in its own band, so it never
+   covers content it has not measured. */
+.kui-nav-stack[data-chrome-presentation="overlay"] > .kui-nav-stack__chrome {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"][data-chrome-overlay="measured"]
+  > .kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy) {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 0;
+  /* A classic (space-taking) vertical scrollbar in the active view stays
+     uncovered: `wireNavStack` publishes its inline size, so the chrome ends
+     where the track begins and its thumb and arrows stay usable. An overlay
+     scrollbar takes no space and passes beneath the material like the
+     content. */
+  inset-inline: 0 var(--_kui-nav-stack-scrollbar-inline-size, 0px);
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"][data-chrome-overlay="measured"]
+  > .kui-nav-stack__viewport {
+  --kui-edge-inset-block-start: var(--_kui-nav-stack-chrome-block-size, 0px);
+}
+
+/* `bottomToolbarPresentation="overlay"`: the bottom toolbar (and any copy
+   cross-fading out of it) paints the same material. Once `wireNavStack` has
+   measured the live toolbar (`data-bottom-toolbar-overlay="measured"`, with
+   its border-box block size, bottom safe area and scroll-divider border
+   included, published on this root), the toolbar lies over the viewport's
+   bottom edge and the viewport hands that size to its views as the
+   block-end edge context (outranking the docked rule above that zeroes it),
+   so a plain view, a sole Pane's content or footer, or a nested layout pads
+   and scroll-pads by it: content scrolls beneath the toolbar yet its last
+   item rests clear of it. Unwired, the toolbar stays docked. */
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"][data-bottom-toolbar-overlay="measured"]
+  > .kui-nav-stack__bottom:not(.kui-nav-stack__chrome-copy) {
+  position: absolute;
+  z-index: 2;
+  inset-block-end: 0;
+  /* Like the top chrome, it ends where a classic scrollbar's track begins. */
+  inset-inline: 0 var(--_kui-nav-stack-bottom-scrollbar-inline-size, 0px);
+}
+
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"][data-bottom-toolbar-overlay="measured"]
+  > .kui-nav-stack__viewport {
+  --kui-edge-inset-block-end: var(--_kui-nav-stack-bottom-block-size, 0px);
+}
+
+@media (forced-colors: active) {
+  .kui-nav-stack[data-chrome-presentation="overlay"] > .kui-nav-stack__chrome {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+
+  /* Its always-present 1px top border becomes the visible edge. */
+  .kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+    > .kui-nav-stack__bottom {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-start-color: CanvasText;
+  }
+}
+
 /* 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

package/dist/styles/pane.css

@@ -159,14 +159,17 @@
   --kui-pane-content-inset-inline-start: var(--_kui-pane-safe-inline-start);
   --kui-pane-content-inset-inline-end: var(--_kui-pane-safe-inline-end);
   --_kui-pane-deep-block-inset: 0px;
+  --_kui-pane-clearance-block-start: 0px;
+  --_kui-pane-clearance-block-end: 0px;
   --_kui-pane-content-safe-block-start: var(--_kui-pane-safe-block-start);
   --_kui-pane-content-safe-block-end: var(--_kui-pane-safe-block-end);
   --_kui-pane-content-block-start: calc(
     var(--_kui-pane-content-safe-block-start) +
-      var(--_kui-pane-deep-block-inset)
+      var(--_kui-pane-deep-block-inset) + var(--_kui-pane-clearance-block-start)
   );
   --_kui-pane-content-block-end: calc(
-    var(--_kui-pane-content-safe-block-end) + var(--_kui-pane-deep-block-inset)
+    var(--_kui-pane-content-safe-block-end) +
+      var(--_kui-pane-deep-block-inset) + var(--_kui-pane-clearance-block-end)
   );
   min-width: 0;
   min-height: 0;
@@ -184,6 +187,82 @@
     var(--_kui-pane-content-block-end);
 }
 
+/* `scrollClearance`: chrome lying over the content's block edge (a dialog's
+   floating footer) publishes how far it covers that edge through the
+   inherited `--kui-scroll-clearance-block-*` context. The content scroller
+   adds it to the block padding and scroll padding above, so content scrolls
+   visibly beneath that chrome yet its first and last items can always rest
+   clear of it. */
+.kui-pane:is(
+    [data-scroll-clearance="block-start"],
+    [data-scroll-clearance="both"]
+  )
+  > .kui-pane__content {
+  --_kui-pane-clearance-block-start: var(
+    --kui-scroll-clearance-block-start,
+    0px
+  );
+}
+
+.kui-pane:is(
+    [data-scroll-clearance="block-end"],
+    [data-scroll-clearance="both"]
+  )
+  > .kui-pane__content {
+  --_kui-pane-clearance-block-end: var(--kui-scroll-clearance-block-end, 0px);
+}
+
+/* `headerPresentation="overlay"`: the header paints the translucent chrome
+   material (opaque under reduced transparency, without `backdrop-filter`, or
+   in forced colors). Once `wireScrollDividers` has measured it
+   (`data-header-overlay="measured"`, with its border-box height published as
+   `--kui-scroll-clearance-block-start` on this root), the header moves into
+   the content cell above the scroller, and the scroller clears it through
+   the same block padding and scroll padding `scrollClearance` uses, and the
+   header leaves a classic scrollbar uncovered. Unwired,
+   or with `chromePlacement="auto"`, the header stays docked in its own row,
+   so it never covers content it has not measured. */
+.kui-pane[data-header-presentation="overlay"] > .kui-pane__header {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-pane[data-header-presentation="overlay"][data-header-overlay="measured"]:not(
+    [data-chrome-placement="auto"]
+  )
+  > .kui-pane__header {
+  position: relative;
+  z-index: 1;
+  align-self: start;
+  grid-area: content;
+  /* A classic (space-taking) vertical scrollbar stays uncovered: the wiring
+     publishes its inline size, so the header ends where the scrollbar's
+     track begins and its thumb and arrow buttons stay visible and usable.
+     An overlay scrollbar takes no space and leaves this unset, so it passes
+     beneath the material like the content. */
+  margin-inline-end: var(--kui-pane-scrollbar-inline-size, 0px);
+}
+
+.kui-pane[data-header-presentation="overlay"][data-header-overlay="measured"]:not(
+    [data-chrome-placement="auto"]
+  )
+  > .kui-pane__content {
+  --_kui-pane-clearance-block-start: var(
+    --kui-scroll-clearance-block-start,
+    0px
+  );
+}
+
+@media (forced-colors: active) {
+  .kui-pane[data-header-presentation="overlay"] > .kui-pane__header {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+}
+
 /* Add one outer gutter without changing the inherited item-margin token.
    Nested Row, List, and Grid therefore keep their own default 8px insets. */
 .kui-pane[data-deep-inset="true"] > .kui-pane__content {

package/dist/styles/popup-menu.css

@@ -13,7 +13,9 @@
 
 /* PopupMenu shares the Select's caret motion, surface inset, row rhythm,
    current-row fill, and group titles from the popup-choice contract in
-   foundation.css. Only checkbox items reserve a check column. */
+   foundation.css. Checkbox items reserve a check column, and so do the
+   plain items in any level that holds one; a level without a choice keeps the
+   compact start. */
 
 /* The trigger caret turns to face the open menu, like the Select's. */
 .kui-popup-menu > wa-button::part(caret) {
@@ -28,10 +30,17 @@
    90%. Holding the scale leaves the shared fade. */
 .kui-popup-menu::part(menu) {
   padding: var(--_kui-popup-inset);
+  background: var(--_kui-popup-scroll-cue);
   gap: var(--_kui-popup-row-gap);
   scale: none !important;
 }
 
+/* A submenu capped beside its parent menu (a phone placement) scrolls with
+   the same edge cue as the menu and a Select's listbox. */
+.kui-popup-menu wa-dropdown-item::part(submenu) {
+  background: var(--_kui-popup-scroll-cue);
+}
+
 .kui-popup-menu wa-dropdown-item {
   /* A plain command starts at the checkbox glyph's leading edge. The glyph
      sits half a smaller-font em beyond the row's base inset; its label starts
@@ -49,13 +58,21 @@
   );
 }
 /* Web Awesome's nested submenu owns its item host padding. Move its exposed
-   checkmark inside the panel and leave room for the label beside it. */
+   checkmark inside the panel: in flow, the checkmark and its gap advance the
+   row's content by the same check column as at the top level. */
 .kui-popup-menu
   wa-dropdown-item[slot="submenu"][type="checkbox"]::part(checkmark) {
   margin-inline-start: 0;
 }
-.kui-popup-menu wa-dropdown-item[slot="submenu"][type="checkbox"]::part(label) {
-  padding-inline-start: 1em;
+/* A plain item beside checkbox choices holds their check column with an empty
+   icon-slot spacer, at either level. Web Awesome sizes a slotted icon in its
+   smaller font and spaces it 0.75em (!important) from the next item; with
+   that gap, 1em of width equals the 1.25em checkmark plus its 0.5em gap. */
+.kui-popup-menu__check-space {
+  display: block;
+  width: 1em;
+  height: 1px;
+  flex: none;
 }
 .kui-popup-menu wa-dropdown-item::part(label) {
   padding-block: var(--_kui-popup-row-label-padding-block);

package/dist/styles/select.css

@@ -213,6 +213,7 @@
 }
 .kui-select::part(listbox) {
   padding: var(--_kui-popup-inset);
+  background: var(--_kui-popup-scroll-cue);
   width: max-content;
   min-width: 100%;
   max-width: min(20rem, calc(100vw - 1.25rem));

package/dist/styles/state-banner.css

@@ -29,7 +29,16 @@
     --kui-state-banner-action-hover-background,
     var(--kui-color-surface)
   );
-  display: grid;
+  /* A wrapping flex row, not a three-track grid: a trailing action stays
+     beside the copy only while the copy keeps its minimum readable width,
+     then wraps onto its own trailing row. The decision follows the banner's
+     own width and content, so it holds on a phone, in a narrow rail on a wide
+     screen, and in an intrinsically sized host such as CornerStatus, where a
+     container query's size containment would collapse the banner. A grid
+     gave the action an `auto` track at its full width and squeezed the copy
+     until its words ran under the action. */
+  display: flex;
+  flex-wrap: wrap;
   min-height: 2.75rem;
   margin-inline: var(--kui-layout-inline-margin, 0.5rem);
   padding: var(--kui-layout-item-padding, 0.5rem);
@@ -37,7 +46,6 @@
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   color: var(--_kui-state-banner-foreground);
   background: var(--_kui-state-banner-background);
-  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
@@ -175,6 +183,7 @@
 }
 .kui-state-banner__icon {
   display: grid;
+  flex: none;
   place-items: center;
 }
 .kui-state-banner__icon svg {
@@ -190,6 +199,9 @@
    gap, so no margin lands at the start of a wrapped line. */
 .kui-state-banner__copy {
   min-width: 0;
+  /* The copy's minimum readable width before a trailing action wraps below
+     it; the copy grows to fill whatever its line leaves. */
+  flex: 1 1 12rem;
   /* The title's size, so a wrapped title's lines keep the title's own line
      height instead of the larger inherited strut. */
   font-size: var(--kui-font-xs);
@@ -219,17 +231,11 @@
   overflow: visible;
   text-overflow: clip;
 }
-.kui-state-banner[data-action-placement="below"] {
-  grid-template-columns: auto minmax(0, 1fr);
-}
-.kui-state-banner[data-action-placement="below"]:not(
-    :has(> .kui-state-banner__icon)
-  )
-  > .kui-state-banner__copy {
-  grid-column: 1 / -1;
-}
+/* `below` always gives the action its own end-aligned trailing row. */
 .kui-state-banner[data-action-placement="below"] > .kui-state-banner__action {
-  grid-column: 1 / -1;
+  display: flex;
+  flex-basis: 100%;
+  justify-content: flex-end;
 }
 .kui-state-banner__copy strong {
   margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
@@ -254,8 +260,13 @@
   overflow: clip;
   text-overflow: ellipsis;
 }
+/* Content-sized and end-aligned on whichever line it lands; on its own line
+   it may shrink to the line so a wrapping action group (a `Row wrap`) wraps
+   its controls instead of overflowing the banner. */
 .kui-state-banner__action {
-  justify-self: end;
+  max-width: 100%;
+  margin-inline-start: auto;
+  flex: 0 1 auto;
 }
 .kui-state-banner__action button {
   min-height: 1.8rem;

package/dist/styles/styles.css

@@ -27,6 +27,7 @@
 @import "./anchored-surface.css";
 @import "./segmented-control.css";
 @import "./choice-chips.css";
+@import "./composer.css";
 @import "./token-search-field.css";
 @import "./state-banner.css";
 @import "./corner-status.css";

package/dist/styles/surface-scaffold.css

@@ -96,6 +96,185 @@
 .kui-dialog-surface[data-footer-inset="comfortable"] > wa-dialog::part(footer) {
   padding: var(--kui-wa-container-inset, 1rem);
 }
+/* Fixed rows above one filling row: the leading children keep their natural
+   height and the last unslotted child (the light-DOM children are the body
+   slot's flex items) takes the rest and owns its scrolling. */
+.kui-dialog-surface[data-body-layout="fill-last"] > wa-dialog::part(body) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kui-dialog-surface[data-body-layout="fill-last"] > wa-dialog > :not([slot]) {
+  flex: none;
+}
+.kui-dialog-surface[data-body-layout="fill-last"]
+  > wa-dialog
+  > :nth-last-child(1 of :not([slot])) {
+  flex: 1 1 0;
+  min-block-size: 0;
+}
+/* A floating footer lies over the body's block end, inset from the panel's
+   inline and block-end edges; the top-layer panel is its positioning
+   context. The register publishes the footer's measured block size on the
+   panel, and the body reserves it (plus the offset) after its own inset, so
+   flowing content scrolls beneath the footer and a filling child's scrollport
+   ends above it: the last content is never hidden. */
+.kui-dialog-surface[data-footer-presentation="floating"] > wa-dialog {
+  --_kui-dialog-surface-footer-resolved-offset: max(
+    0px,
+    var(
+      --_kui-dialog-surface-footer-offset,
+      var(--kui-wa-container-inset, 1rem)
+    )
+  );
+}
+.kui-dialog-surface[data-footer-presentation="floating"]
+  > wa-dialog::part(footer) {
+  position: absolute;
+  inset-inline: var(--_kui-dialog-surface-footer-resolved-offset);
+  inset-block-end: var(--_kui-dialog-surface-footer-resolved-offset);
+  z-index: 1;
+  background: transparent;
+}
+.kui-dialog-surface[data-footer-presentation="floating"]
+  > wa-dialog::part(body) {
+  --_kui-dialog-surface-footer-clearance: calc(
+    var(--_kui-dialog-surface-footer-block-size, 0px) +
+      var(--_kui-dialog-surface-footer-resolved-offset)
+  );
+  scroll-padding-block-end: var(--_kui-dialog-surface-footer-clearance);
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="none"]
+  > wa-dialog::part(body) {
+  padding-block-end: var(--_kui-dialog-surface-footer-clearance);
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="compact"]
+  > wa-dialog::part(body) {
+  padding-block-end: calc(
+    var(--kui-wa-surface-inset, 0.5rem) +
+      var(--_kui-dialog-surface-footer-clearance)
+  );
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="comfortable"]
+  > wa-dialog::part(body) {
+  padding-block-end: calc(
+    var(--kui-wa-container-inset, 1rem) +
+      var(--_kui-dialog-surface-footer-clearance)
+  );
+}
+/* Scroll clearance. A dialog body starts a new scroll context, so it clears
+   any `--kui-scroll-clearance-*` a page region published around the dialog.
+   With a floating footer over a filling child that opts into block-end
+   `scrollClearance` (a transcript List or Pane), the body stops reserving the
+   footer below that child: the child reaches the panel's block end, the body
+   publishes the footer's clearance for it, and the child adds it inside its
+   own scroll area, so content scrolls visibly beneath the transparent footer
+   while its last item still comes to rest above it. */
+.kui-dialog-surface > wa-dialog::part(body) {
+  --kui-scroll-clearance-block-start: 0px;
+  --kui-scroll-clearance-block-end: 0px;
+}
+.kui-dialog-surface[data-footer-presentation="floating"]:is(
+    [data-body-layout="fill"],
+    [data-body-layout="fill-last"]
+  )
+  > wa-dialog:has(
+    > :nth-last-child(1 of :not([slot])):is(
+        [data-scroll-clearance="block-end"],
+        [data-scroll-clearance="both"]
+      )
+  )::part(body) {
+  --kui-scroll-clearance-block-end: var(--_kui-dialog-surface-footer-clearance);
+  padding-block-end: 0;
+}
+/* A floating header lies over the body's block-start edge on the
+   translucent chrome material (opaque under reduced transparency, increased
+   contrast, or without backdrop-filter; a system surface in forced colors).
+   The register publishes the header's measured block size on the panel; the
+   header gives that height back as a negative block-end margin, so the body
+   starts at the panel's block-start edge beneath it, and the body reserves it
+   again before its own inset (with a matching scroll-padding): flowing
+   content rests below the title bar and scrolls beneath it. Unmeasured, the
+   size resolves to 0px and the header stays docked. */
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog::part(header) {
+  position: relative;
+  z-index: 1;
+  margin-block-end: calc(
+    -1 * var(--_kui-dialog-surface-header-block-size, 0px)
+  );
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material-raised);
+  box-shadow: inset 0 -1px
+    var(--_kui-dialog-surface-header-divider, transparent);
+}
+/* The floating header's divider is scroll state, as on a Pane's overlay
+   header: the register publishes `--_kui-dialog-surface-header-divider` on
+   the panel (as this color) only while the body, or a filling child that
+   reaches beneath the header, is scrolled away from its top. The line is an
+   inset shadow, so showing it never moves the header or the content. */
+.kui-dialog-surface[data-header-presentation="floating"] > wa-dialog {
+  --_kui-dialog-surface-header-divider-color: var(
+    --kui-color-neutral-border-normal
+  );
+}
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog::part(body) {
+  --_kui-dialog-surface-header-clearance: var(
+    --_kui-dialog-surface-header-block-size,
+    0px
+  );
+  scroll-padding-block-start: var(--_kui-dialog-surface-header-clearance);
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="none"]
+  > wa-dialog::part(body) {
+  padding-block-start: var(--_kui-dialog-surface-header-clearance);
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="compact"]
+  > wa-dialog::part(body) {
+  padding-block-start: calc(
+    var(--kui-wa-surface-inset, 0.5rem) +
+      var(--_kui-dialog-surface-header-clearance)
+  );
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="comfortable"]
+  > wa-dialog::part(body) {
+  padding-block-start: calc(
+    var(--kui-wa-container-inset, 1rem) +
+      var(--_kui-dialog-surface-header-clearance)
+  );
+}
+/* A filling child that is the body's only child and opts into block-start
+   `scrollClearance` reaches the panel's block-start edge beneath the floating
+   header: the body publishes the header's clearance for it, and the child
+   adds it inside its own scroll area, so content scrolls visibly beneath the
+   title bar while its first item still rests below it. Leading children of
+   `fill-last` keep the body's reservation instead. */
+.kui-dialog-surface[data-header-presentation="floating"]:is(
+    [data-body-layout="fill"],
+    [data-body-layout="fill-last"]
+  )
+  > wa-dialog:has(
+    > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])):is(
+        [data-scroll-clearance="block-start"],
+        [data-scroll-clearance="both"]
+      )
+  )::part(body) {
+  --kui-scroll-clearance-block-start: var(
+    --_kui-dialog-surface-header-clearance
+  );
+  padding-block-start: 0;
+}
+@media (forced-colors: active) {
+  .kui-dialog-surface[data-header-presentation="floating"]
+    > wa-dialog::part(header) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+}
 .kui-dialog-surface[data-presentation="side-sheet"] > wa-dialog::part(dialog) {
   width: min(30rem, 100vw);
   max-width: 100vw;
@@ -199,6 +378,22 @@
   overflow: hidden;
   grid-template-rows: minmax(0, 1fr);
 }
+/* Fixed rows above one filling last child, which owns its scrolling. */
+.kui-popover-dialog-surface[data-body-layout="fill-last"]:is(
+    :popover-open,
+    [data-presentation="embedded"]
+  ) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kui-popover-dialog-surface[data-body-layout="fill-last"] > * {
+  flex: none;
+}
+.kui-popover-dialog-surface[data-body-layout="fill-last"] > :last-child {
+  flex: 1 1 0;
+  min-block-size: 0;
+}
 /* In flow for a catalog or inline use: the same surface without the top
    layer, never wider than its container. */
 .kui-popover-dialog-surface[data-presentation="embedded"] {

package/dist/styles/tab-bar.css

@@ -48,10 +48,21 @@
 .kui-tab-bar__tabs[data-snap-tabs="true"] {
   scroll-snap-type: x mandatory;
   scroll-padding-inline-start: var(--kui-tab-bar-snap-inset, 0px);
-  padding-inline-end: calc(
-    var(--kui-tab-bar-strip-padding, 1px) +
-      var(--kui-tab-bar-snap-end-extra, 0px)
-  );
+}
+/* The snap end room is scrollable content after the last tab, not padding on
+   the strip: padding is part of the strip's box, which a flex item cannot
+   shrink below, so a room measured at one width would hold the strip open
+   past its allocation when it narrows and push the trailing and end zones out
+   of the bar. As content it lengthens only the scroll range, and the strip
+   still shrinks to its allocation. The start margin gives back the strip gap,
+   so an empty room adds no width. */
+.kui-tab-bar__tabs[data-snap-tabs="true"]::after {
+  content: "";
+  inline-size: var(--kui-tab-bar-snap-end-extra, 0px);
+  margin-inline-start: calc(-1 * var(--kui-tab-bar-strip-gap, 0px));
+  pointer-events: none;
+  align-self: stretch;
+  flex: none;
 }
 .kui-tab-bar[data-icon-only-at] .kui-tab-bar__tabs {
   container: kui-tab-bar-tabs / inline-size;