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

package/dist/styles/list-item.css

@@ -1,4 +1,12 @@
 .kui-list-item {
+  /* The leading icon size. An inherited `--kui-list-row-icon-size` on the
+     containing List sizes ListItem and ListActionRow icons together, so a
+     mixed list keeps its labels on one edge; `--kui-list-item-icon-size`
+     still wins for ListItem rows that set it. */
+  --_kui-list-item-icon-size: var(
+    --kui-list-item-icon-size,
+    var(--kui-list-row-icon-size, 1.125rem)
+  );
   display: grid;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
   min-height: var(--kui-list-item-min-height, 2.75rem);
@@ -10,7 +18,10 @@
   );
   padding-inline: var(
     --kui-list-item-padding-inline,
-    var(--kui-layout-item-padding, 0.5rem)
+    var(
+      --kui-list-row-padding-inline,
+      var(--kui-layout-item-padding, 0.5rem)
+    )
   );
   box-sizing: border-box;
   border: var(--kui-list-item-border-width, 1px) solid
@@ -85,7 +96,7 @@
 .kui-list-item[data-has-icon="true"] {
   grid-template-columns: var(
     --kui-list-item-columns,
-    var(--kui-list-item-icon-size, 1.125rem) minmax(0, 1fr) auto
+    var(--_kui-list-item-icon-size) minmax(0, 1fr) auto
   );
 }
 
@@ -109,7 +120,12 @@
   grid-column: 2;
 }
 
-.kui-list-item:hover:not([data-placeholder="true"]) {
+/* A selected or current row keeps its selected tint while hovered. */
+.kui-list-item:hover:not(
+    [data-placeholder="true"],
+    [aria-current="page"],
+    [aria-pressed="true"]
+  ) {
   border-color: var(
     --kui-list-item-hover-border,
     var(--kui-color-neutral-border-normal)
@@ -160,16 +176,16 @@
 
 .kui-list-item__icon {
   display: grid;
-  width: var(--kui-list-item-icon-size, 1.125rem);
-  height: var(--kui-list-item-icon-size, 1.125rem);
+  width: var(--_kui-list-item-icon-size);
+  height: var(--_kui-list-item-icon-size);
   color: var(--kui-list-item-icon-color, currentColor);
   place-items: center;
 }
 
 .kui-list-item__icon svg {
   display: block;
-  width: var(--kui-list-item-icon-size, 1.125rem);
-  height: var(--kui-list-item-icon-size, 1.125rem);
+  width: var(--_kui-list-item-icon-size);
+  height: var(--_kui-list-item-icon-size);
 }
 
 .kui-list-item__label {
@@ -225,9 +241,7 @@
 
 .kui-list-item[data-multiline="true"] .kui-list-item__icon {
   align-self: start;
-  margin-block-start: calc(
-    (1lh - var(--kui-list-item-icon-size, 1.125rem)) / 2
-  );
+  margin-block-start: calc((1lh - var(--_kui-list-item-icon-size)) / 2);
 }
 
 .kui-list-item[data-multiline="true"][data-icon-align="center"]
@@ -275,7 +289,10 @@
   z-index: 1;
   inset-inline: var(
     --kui-list-item-padding-inline,
-    var(--kui-layout-item-padding, 0.5rem)
+    var(
+      --kui-list-row-padding-inline,
+      var(--kui-layout-item-padding, 0.5rem)
+    )
   );
   height: var(--kui-list-item-drop-indicator-width, 2px);
   border-radius: var(--kui-radius-pill);
@@ -312,3 +329,133 @@
   width: 1rem;
   height: 1rem;
 }
+
+/* A filled icon tile (`iconTile`): the leading icon sits in a 32px rounded
+   tile with an 18px glyph. The tile overhangs the content box by up to 3px
+   into the block padding, so a single-line row keeps its density height
+   (44px standard, 52px spacious) and a compact row grows only to 42px; the
+   tile then sits 6px (5px compact) clear of the row edges, like a
+   ListActionRow tile, and rows with descriptions keep their height. The 6px
+   radius is concentric with the row's 12px corner at that clearance. */
+.kui-list-item[data-icon-tile] {
+  --_kui-list-item-icon-tile-size: 2rem;
+  --_kui-list-item-icon-tile-overhang: 0.1875rem;
+}
+
+.kui-list-item[data-icon-tile][data-density="compact"] {
+  --_kui-list-item-icon-tile-overhang: 0px;
+  /* Native buttons take a form-control height, so a compact tile row
+     declares its tile-sized minimum rather than relying on content height. */
+  min-height: var(--kui-list-item-min-height, 2.625rem);
+}
+
+.kui-list-item[data-has-icon="true"][data-icon-tile] {
+  grid-template-columns: var(
+    --kui-list-item-columns,
+    var(--_kui-list-item-icon-tile-size) minmax(0, 1fr) auto
+  );
+}
+
+.kui-list-item[data-icon-tile] .kui-list-item__icon {
+  width: var(--_kui-list-item-icon-tile-size);
+  height: var(--_kui-list-item-icon-tile-size);
+  margin-block: calc(-1 * var(--_kui-list-item-icon-tile-overhang));
+  border-radius: var(--kui-radius-m, 0.375rem);
+  color: var(--_kui-list-item-icon-tile-foreground, currentColor);
+  background: var(--_kui-list-item-icon-tile-fill, transparent);
+  box-shadow: inset 0 0 0 1px
+    var(--_kui-list-item-icon-tile-border, transparent);
+}
+
+.kui-list-item[data-icon-tile] .kui-list-item__icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+/* An application fill defaults its glyph to black or white, whichever
+   contrasts with the fill's lightness. */
+.kui-list-item[data-icon-tile="color"] .kui-list-item__icon {
+  color: var(--_kui-list-item-icon-tile-foreground, #fff);
+}
+
+@supports (color: oklch(from red l c h)) {
+  .kui-list-item[data-icon-tile="color"] .kui-list-item__icon {
+    color: var(
+      --_kui-list-item-icon-tile-foreground,
+      oklch(
+        from var(--_kui-list-item-icon-tile-fill) clamp(0, (0.68 - l) * 1000, 1)
+          0 0
+      )
+    );
+  }
+}
+
+.kui-list-item[data-icon-tile-tone="neutral"] .kui-list-item__icon {
+  --_kui-list-item-icon-tile-fill: var(--kui-color-neutral-fill-quiet);
+  --_kui-list-item-icon-tile-border: var(--kui-color-neutral-border-quiet);
+  --_kui-list-item-icon-tile-foreground: var(--kui-color-neutral-on-quiet);
+}
+
+.kui-list-item[data-icon-tile-tone="brand"] .kui-list-item__icon {
+  --_kui-list-item-icon-tile-fill: var(--kui-color-brand-fill-quiet);
+  --_kui-list-item-icon-tile-border: var(--kui-color-brand-border-quiet);
+  --_kui-list-item-icon-tile-foreground: var(--kui-color-brand-on-quiet);
+}
+
+.kui-list-item[data-icon-tile-tone="success"] .kui-list-item__icon {
+  --_kui-list-item-icon-tile-fill: var(--kui-color-success-fill-quiet);
+  --_kui-list-item-icon-tile-border: var(--kui-color-success-border-quiet);
+  --_kui-list-item-icon-tile-foreground: var(--kui-color-success-on-quiet);
+}
+
+.kui-list-item[data-icon-tile-tone="warning"] .kui-list-item__icon {
+  --_kui-list-item-icon-tile-fill: var(--kui-color-warning-fill-quiet);
+  --_kui-list-item-icon-tile-border: var(--kui-color-warning-border-quiet);
+  --_kui-list-item-icon-tile-foreground: var(--kui-color-warning-on-quiet);
+}
+
+.kui-list-item[data-icon-tile-tone="danger"] .kui-list-item__icon {
+  --_kui-list-item-icon-tile-fill: var(--kui-color-danger-fill-quiet);
+  --_kui-list-item-icon-tile-border: var(--kui-color-danger-border-quiet);
+  --_kui-list-item-icon-tile-foreground: var(--kui-color-danger-on-quiet);
+}
+
+/* A loading row shows a tile-sized skeleton in place of the fill. */
+.kui-list-item[data-icon-tile][data-placeholder="true"] .kui-list-item__icon {
+  background: transparent;
+  box-shadow: none;
+}
+
+.kui-list-item[data-icon-tile][data-multiline="true"][data-icon-align="center"]
+  .kui-list-item__icon {
+  margin-block: calc(-1 * var(--_kui-list-item-icon-tile-overhang));
+}
+
+/* A wrapped label keeps its first line centered on the tile: the tile sits
+   at the top of the content box (less its overhang) and the label starts
+   the rest of the way down, instead of the tile overhanging the row edge. */
+.kui-list-item[data-icon-tile][data-multiline="true"]:not(
+    [data-icon-align="center"]
+  )
+  .kui-list-item__icon {
+  margin-block-start: calc(-1 * var(--_kui-list-item-icon-tile-overhang));
+}
+
+.kui-list-item[data-icon-tile][data-multiline="true"]:not(
+    [data-icon-align="center"]
+  )
+  .kui-list-item__label {
+  align-self: start;
+  padding-block-start: max(
+    0px,
+    (var(--_kui-list-item-icon-tile-size) - 1lh) / 2 -
+      var(--_kui-list-item-icon-tile-overhang)
+  );
+}
+
+@media (forced-colors: active) {
+  .kui-list-item[data-icon-tile] .kui-list-item__icon {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}

package/dist/styles/list.css

@@ -8,10 +8,15 @@
   --_kui-list-column-gap: var(--_kui-list-gap);
   --_kui-list-row-gap: var(--_kui-list-gap);
   --_kui-list-flex: 0 1 auto;
-  --_kui-list-inset-top: 0;
-  --_kui-list-inset-right: 0;
-  --_kui-list-inset-bottom: 0;
-  --_kui-list-inset-left: 0;
+  --_kui-list-inset-top: 0px;
+  --_kui-list-inset-right: 0px;
+  --_kui-list-inset-bottom: 0px;
+  --_kui-list-inset-left: 0px;
+  --_kui-list-clearance-start: 0px;
+  --_kui-list-clearance-end: 0px;
+  --_kui-list-ring-room: 0px;
+  --_kui-list-max-height: none;
+  --_kui-list-min-height: 0px;
   --_kui-list-divider-top: transparent;
   --_kui-list-divider-right: transparent;
   --_kui-list-divider-bottom: transparent;
@@ -19,10 +24,15 @@
 
   display: flex;
   min-width: 0;
-  min-height: 0;
+  min-height: var(--_kui-list-min-height);
+  max-height: var(--_kui-list-max-height);
   box-sizing: border-box;
-  padding: var(--_kui-list-inset-top, 0) var(--_kui-list-inset-right, 0)
-    var(--_kui-list-inset-bottom, 0) var(--_kui-list-inset-left, 0);
+  padding: calc(
+      var(--_kui-list-inset-top, 0px) + var(--_kui-list-clearance-start)
+    )
+    var(--_kui-list-inset-right, 0)
+    calc(var(--_kui-list-inset-bottom, 0px) + var(--_kui-list-clearance-end))
+    var(--_kui-list-inset-left, 0);
   flex: var(--_kui-list-flex, initial);
   flex-direction: column;
   align-items: stretch;
@@ -97,6 +107,21 @@
   }
 }
 
+/* `frame`: a bordered, rounded stack (a result picker). Its 4px inset on
+   every side replaces any side-selected or document inset, and is exactly
+   the reach of a row's focus ring (3px ring, 1px offset), so the first and
+   last rows' rings stay inside a scrolling frame's clip at the scroll
+   extremes. (The ring-room scroll padding every scrollable List carries
+   handles a row stopped mid-scroll.) */
+.kui-list[data-frame="true"] {
+  --_kui-list-inset-top: var(--kui-space-2xs);
+  --_kui-list-inset-right: var(--kui-space-2xs);
+  --_kui-list-inset-bottom: var(--kui-space-2xs);
+  --_kui-list-inset-left: var(--kui-space-2xs);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-m);
+}
+
 .kui-list[data-h-align="left"] {
   align-items: flex-start;
   align-content: flex-start;
@@ -124,11 +149,56 @@
   justify-content: space-between;
 }
 
+/* A scrollable List's scroll padding is a row's focus-ring reach (3px ring,
+   1px offset) plus 2px of slack, so a row focused or scrolled into view stops
+   with its ring inside the clip rather than flush against it: Chromium's
+   focus scroll stops 1px short of the padded target, and a row's fractional
+   position can cost another 0.3px. Scroll padding moves nothing at rest; at
+   the scroll extremes an unframed List's first and last rows still meet the
+   clip, which is what `frame`'s 4px inset is for. */
 .kui-list[data-scrollable="true"] {
+  --_kui-list-ring-room: calc(var(--kui-space-2xs) + 2px);
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }
 
+/* `scrollClearance`: chrome lying over the List's block edge (a dialog's
+   floating footer) publishes how far it covers that edge through the
+   inherited `--kui-scroll-clearance-block-*` context. The List adds it to its
+   own block padding and scroll padding, so rows scroll visibly beneath the
+   chrome while the first and last rows, and anything focused or scrolled into
+   view, still come to rest clear of it. */
+.kui-list:is(
+  [data-scroll-clearance="block-start"],
+  [data-scroll-clearance="both"]
+) {
+  --_kui-list-clearance-start: var(--kui-scroll-clearance-block-start, 0px);
+}
+
+.kui-list:is(
+  [data-scroll-clearance="block-end"],
+  [data-scroll-clearance="both"]
+) {
+  --_kui-list-clearance-end: var(--kui-scroll-clearance-block-end, 0px);
+}
+
+.kui-list:is([data-scroll-clearance], [data-scrollable="true"]) {
+  scroll-padding-block: calc(
+      var(--_kui-list-clearance-start) + var(--_kui-list-ring-room)
+    )
+    calc(var(--_kui-list-clearance-end) + var(--_kui-list-ring-room));
+}
+
+/* In a Pane's scrolling content, a List that does not scroll itself keeps
+   its full height rather than shrinking to the content box. A shrunken List
+   lets its rows overflow its own box, and the scroller's block-end padding
+   (a bottom safe area, an overlay NavStack bottom toolbar's clearance)
+   follows the List's box, not those rows, so the last row could never
+   scroll clear of the edge. A `flex` basis still grows the List to fill. */
+.kui-pane > .kui-pane__content > .kui-list:not([data-scrollable="true"]) {
+  flex-shrink: 0;
+}
+
 /* A scrollable List owns the overflow, so its rows keep their natural height
    and scroll rather than shrink. Items that clip their own overflow (a
    ListItem) have a zero automatic minimum height, so the default

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) {
@@ -56,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/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";