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

package/dist/styles/components/feedback/state-banner/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/components/forms/composer/composer.css

@@ -0,0 +1,100 @@
+/* A chat or prompt composer: a raised frame (surface-raised, the standard
+   neutral border, large radius, shadow-l) whose border turns brand while
+   focus is within. It holds a borderless message field that sizes to its
+   content between the min and max row counts, above an action row with a
+   quiet hint and trailing actions. The 8px padding puts the field's text on
+   the 17px text column when the composer sits 8px from a container edge. */
+
+.kui-composer {
+  --_kui-composer-min-rows: 1;
+  --_kui-composer-max-rows: 8;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  /* Fill the container's inline size: a content-sized field would otherwise
+     shrink the frame to its text. */
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-l);
+  color: var(--kui-color-neutral-on-normal);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+}
+
+/* The frame is the field's boundary, so it carries the focus state. */
+.kui-composer:focus-within {
+  border-color: var(--kui-color-brand-border-loud);
+}
+
+.kui-composer__field {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.25rem 0;
+  border: 0;
+  outline: none;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-size: var(--kui-font-m, inherit);
+  line-height: var(--wa-line-height-normal, 1.6);
+  resize: none;
+  field-sizing: content;
+  min-height: calc(var(--_kui-composer-min-rows) * 1lh + 0.5rem);
+  max-height: calc(var(--_kui-composer-max-rows) * 1lh + 0.5rem);
+  overflow-y: auto;
+}
+
+/* Engines without content sizing keep a three-line field, clamped to the
+   row bounds, that scrolls once the message is longer. */
+@supports not (field-sizing: content) {
+  .kui-composer__field {
+    height: calc(
+      clamp(var(--_kui-composer-min-rows), 3, var(--_kui-composer-max-rows)) *
+        1lh + 0.5rem
+    );
+  }
+}
+
+.kui-composer__field::placeholder {
+  color: var(--kui-color-neutral-on-quiet);
+  opacity: 1;
+}
+
+.kui-composer__field:disabled {
+  color: var(--kui-color-neutral-on-quiet);
+  cursor: not-allowed;
+}
+
+.kui-composer__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  min-width: 0;
+}
+
+.kui-composer__hint {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.kui-composer__trailing {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .kui-composer:focus-within {
+    border-color: Highlight;
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+}

package/dist/styles/components/forms/token-search-field/token-search-field.css

@@ -172,10 +172,19 @@
 .kui-token-search__clear:hover,
 .kui-token-search__clear:focus-visible,
 .kui-token-search__trailing-action:hover,
-.kui-token-search__trailing-action:focus-visible {
+.kui-token-search__trailing-action:focus-visible,
+.kui-token-search__trailing-action[aria-expanded="true"],
+.kui-token-search__trailing-action[aria-pressed="true"] {
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
+/* An open disclosure or an on toggle keeps the hover fill and reads at full
+   text strength, so its state stays visible after the pointer leaves. */
+.kui-token-search__trailing-action[aria-expanded="true"],
+.kui-token-search__trailing-action[aria-pressed="true"] {
+  color: var(--kui-color-text);
+}
+
 .kui-token-search__token button:focus-visible,
 .kui-token-search__clear:focus-visible,
 .kui-token-search__trailing-action:focus-visible {
@@ -386,7 +395,9 @@
   box-shadow: none;
 }
 
-.kui-token-search[data-presentation="toolbar-group"] .kui-token-search__clear {
+.kui-token-search[data-presentation="toolbar-group"] .kui-token-search__clear,
+.kui-token-search[data-presentation="toolbar-group"]
+  .kui-token-search__trailing-action {
   border-radius: var(--kui-control-highlight-radius);
 }
 

package/dist/styles/components/layout/pane/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/components/navigation/nav-stack/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/components/navigation/tab-bar/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;

package/dist/styles/components/navigation/tab-navigator/tab-navigator.css

@@ -69,10 +69,12 @@
       ):only-child
   )
 ) {
-  padding-block-start: var(--kui-edge-inset-block-start);
+  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-start: var(--kui-edge-inset-block-start);
+  scroll-padding-block: var(--kui-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
 }
 
 /* A plain scene adds one outer gutter; a sole Pane or layout keeps ownership
@@ -91,13 +93,15 @@
   padding-block-start: calc(
     var(--kui-edge-inset-block-start) + var(--kui-space-xs)
   );
-  padding-block-end: var(--kui-space-xs);
+  padding-block-end: calc(
+    var(--kui-edge-inset-block-end) + var(--kui-space-xs)
+  );
   padding-inline: calc(var(--kui-edge-inset-inline-start) + var(--kui-space-xs))
     calc(var(--kui-edge-inset-inline-end) + var(--kui-space-xs));
   scroll-padding-block: calc(
       var(--kui-edge-inset-block-start) + var(--kui-space-xs)
     )
-    var(--kui-space-xs);
+    calc(var(--kui-edge-inset-block-end) + var(--kui-space-xs));
 }
 
 .kui-tab-scaffold__scene
@@ -164,6 +168,51 @@
   --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
 }
 
+/* `barPresentation="overlay"`: the bar paints the translucent chrome
+   material. Once `wireTabNavigator` has measured the live bar
+   (`data-bar-overlay="measured"`, with its border-box block size, bottom safe
+   area and 1px top edge included, published on this root), the bar lies over
+   the scenes' bottom edge and the scenes hand that size to their content as
+   the block-end edge context (outranking the docked 0px above): a plain scene
+   pads and scroll-pads by it, and a sole Pane or layout (a NavStack, whose own
+   bottom toolbar then sits just above the bar) clears it itself. Content
+   scrolls visibly beneath the bar while its last item rests clear of it.
+   Unwired, the bar stays docked. */
+.kui-tab-scaffold[data-bar-presentation="overlay"] > .kui-tab-scaffold__bar {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"] {
+  position: relative;
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"]
+  > .kui-tab-scaffold__bar {
+  position: absolute;
+  z-index: 2;
+  inset-block-end: 0;
+  /* Like the NavStack overlay bars, it ends where a classic scrollbar's
+     track begins, so the thumb and buttons stay visible and usable. */
+  inset-inline: 0 var(--_kui-tab-scaffold-bar-scrollbar-inline-size, 0px);
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"]
+  > .kui-tab-scaffold__scenes {
+  --kui-edge-inset-block-end: var(--_kui-tab-scaffold-bar-block-size, 0px);
+}
+
+@media (forced-colors: active) {
+  /* Its always-present 1px top border becomes the visible edge. */
+  .kui-tab-scaffold[data-bar-presentation="overlay"] > .kui-tab-scaffold__bar {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-start-color: CanvasText;
+  }
+}
+
 .kui-tab-scaffold__tab {
   display: flex;
   flex: 1 1 0;
@@ -185,6 +234,32 @@
   color: var(--kui-color-brand-on-quiet);
 }
 
+/* Over the material, content of any color passes beneath the bar. Both label
+   colors fall below AA over the worst case (the material over black in light,
+   white in dark): the quiet unselected color, and in light the brand selected
+   color (about 3.2:1). An unselected tab lifts halfway toward the normal text
+   color, as an overlaid ToolbarText description does, and the selected tab
+   mixes 40% of it into the brand color, staying plainly the brand hue. */
+.kui-tab-scaffold[data-bar-presentation="overlay"]
+  > .kui-tab-scaffold__bar
+  > .kui-tab-scaffold__tab:not([aria-selected="true"]) {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-text-quiet),
+    var(--kui-color-text) 50%
+  );
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"]
+  > .kui-tab-scaffold__bar
+  > .kui-tab-scaffold__tab[aria-selected="true"] {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-brand-on-quiet),
+    var(--kui-color-text) 40%
+  );
+}
+
 .kui-tab-scaffold__tab:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: -2px;