@kerfjs/ui 5.0.0-beta.3 → 5.0.0-beta.31

package/dist/styles/tab-scaffold.css

@@ -0,0 +1,85 @@
+.kui-tab-scaffold {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold__scenes {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Every tab stays mounted (its NavStack keeps its stack and scroll); only the
+   active scene is shown. */
+.kui-tab-scaffold__scene {
+  position: absolute;
+  overflow: auto;
+  inset: 0;
+}
+
+.kui-tab-scaffold__scene[data-active="false"] {
+  visibility: hidden;
+}
+
+.kui-tab-scaffold__bar {
+  display: flex;
+  flex: 0 0 auto;
+  padding-block-start: var(--kui-space-2xs);
+  /* Respect the home-indicator safe area on iOS-class devices. */
+  padding-block-end: calc(
+    var(--kui-space-2xs) + env(safe-area-inset-bottom, 0px)
+  );
+  border-block-start: 1px solid var(--kui-color-border);
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold__tab {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: var(--kui-space-2xs) var(--kui-space-xs);
+  border: 0;
+  color: var(--kui-color-text-quiet);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.kui-tab-scaffold__tab[aria-selected="true"] {
+  color: var(--kui-color-accent-text);
+}
+
+.kui-tab-scaffold__tab:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+
+.kui-tab-scaffold__tab-icon {
+  display: grid;
+  place-items: center;
+}
+
+.kui-tab-scaffold__tab-icon svg {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
+.kui-tab-scaffold__tab-label {
+  flex: none;
+  max-width: 100%;
+  overflow: hidden;
+  font-size: var(--kui-font-2xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -159,7 +159,12 @@
   width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
   max-width: 100%;
   overflow: hidden;
-  flex: 0 1 var(--kui-token-search-expanded-width, 30rem);
+  /* Size the inline axis through `width` only. A `flex-basis` of the expanded
+     width would drive the MAIN axis, which is the field's HEIGHT inside a flex
+     column — stretching the field tall (KF-EPEM88). `flex: 0 1 auto` keeps the
+     no-grow / may-shrink behavior a toolbar row wants without leaking the width
+     into the cross axis. */
+  flex: 0 1 auto;
   transition:
     width 0.25s ease,
     background-color 0.2s ease,
@@ -214,7 +219,10 @@
   height: auto;
   min-width: 0;
   overflow: hidden;
-  flex: 0 1 var(--kui-token-search-expanded-width, 30rem);
+  /* Same reason as the field above (KF-EPEM88): drive the inline size through
+     `width`, not `flex-basis`, so a group placed in a flex column is not
+     stretched to the expanded width in its cross axis. */
+  flex: 0 1 auto;
   transition:
     width 0.25s ease,
     background-color 0.2s ease,
@@ -234,6 +242,10 @@
   min-height: 2.5rem;
   padding: 0.25rem 0.375rem;
   border: 0;
+  /* This field is the group's inset visual layer. Inherit the same concentric
+     radius contract as buttons instead of retaining TokenSearchField's own pill
+     radius when the group switches to `shape="rounded"`. */
+  border-radius: var(--kui-control-highlight-radius);
   background: transparent;
   box-shadow: none;
 }

package/dist/styles/toolbar-control-group.css

@@ -10,16 +10,24 @@
   --kui-toolbar-control-pressed-background: var(--kui-color-neutral-fill-loud);
   --kui-toolbar-control-pressed-border: var(--kui-color-neutral-border-loud);
   --kui-toolbar-control-pressed-color: var(--kui-color-neutral-on-loud);
+  --kui-toolbar-group-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+  --kui-control-highlight-radius: max(
+    0px,
+    calc(
+      var(--kui-toolbar-group-radius) - var(--kui-layout-highlight-inset, 2px)
+    )
+  );
+  --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
   display: inline-flex;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   padding: 1px;
   box-sizing: border-box;
   border: 1px solid var(--kui-toolbar-control-border);
-  border-radius: var(
-    --kui-toolbar-group-radius,
-    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
-  );
+  border-radius: var(--kui-toolbar-group-radius);
   color: var(--kui-toolbar-control-color);
   background: var(--kui-toolbar-control-background);
   align-items: center;
@@ -27,6 +35,16 @@
   gap: 0;
 }
 
+/* `shape="rounded"` swaps the default pill radius for the design system's softer
+   rounded rectangle. The shared highlight contract derives every inner hover or
+   selected surface from this outer radius and the group's full inset. */
+.kui-toolbar-control-group[data-shape="rounded"] {
+  --kui-toolbar-group-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+}
+
 .kui-toolbar-control-group[data-tone="dark"] {
   --kui-toolbar-control-background: color-mix(
     in srgb,
@@ -41,8 +59,73 @@
     transparent
   );
 }
+.kui-toolbar-control-group[data-size="compact"] {
+  --kui-toolbar-group-size: 2.125rem;
+}
+.kui-toolbar-control-group[data-density="tight"] {
+  --kui-layout-item-padding: 0.3125rem;
+}
+.kui-toolbar-control-group[data-content="text"] > :is(button, wa-button),
+.kui-toolbar-control-group[data-content="mixed"] > :is(button, wa-button) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"] > button {
+  display: flex;
+  gap: var(--kui-space-xs);
+}
+.kui-toolbar-control-group[data-content="mixed"] {
+  gap: 0.5rem;
+}
+.kui-toolbar-control-group[data-content="mixed"] > wa-dropdown {
+  padding-inline-start: 0.375rem;
+  border-inline-start: 1px solid var(--kui-toolbar-control-border);
+}
+.kui-toolbar-control-group[data-content="avatar"][data-scrim="true"] {
+  --kui-toolbar-control-background: color-mix(
+    in srgb,
+    var(--kui-color-neutral-fill-loud) 64%,
+    transparent
+  );
+  --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+}
+.kui-toolbar-control-group[data-selected-tone="neutral"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-neutral-on-normal);
+  --kui-toolbar-control-selected-background: var(
+    --kui-color-neutral-fill-normal
+  );
+}
+.kui-toolbar-control-group[data-selected-tone="pop"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
+}
+.kui-toolbar-control-group[data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-border: transparent;
+  --kui-toolbar-control-selected-background: var(--kui-color-brand-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-brand-on-normal);
+}
+.kui-toolbar-control-group[data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-background: transparent;
+  --kui-toolbar-control-selected-border: var(--kui-color-brand-border-normal);
+}
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-background: var(--kui-color-pop-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-normal);
+}
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-border: var(--kui-color-pop-border-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
+}
 
 .kui-toolbar-control-group[data-appearance="borderless"] {
+  /* A borderless group has no base fill to lift from, so the default
+     surface-colored hover/selected background is invisible against the page.
+     Use a visible neutral tint so buttons still show hover/press feedback
+     (KF-WZDQS8). */
+  --kui-toolbar-control-hover-background: var(--kui-color-neutral-fill-normal);
+  --kui-toolbar-control-selected-background: var(
+    --kui-color-neutral-fill-normal
+  );
   border-color: transparent;
   background: transparent;
 }
@@ -50,6 +133,9 @@
 .kui-toolbar-control-group > :is(button, wa-button, wa-dropdown) {
   flex: 0 0 auto;
 }
+.kui-toolbar-control-group > wa-dropdown {
+  display: inline-flex;
+}
 
 .kui-toolbar-control-group > button {
   appearance: none;
@@ -89,6 +175,45 @@
   min-width: 2.5rem;
   height: 2.5rem;
 }
+.kui-toolbar-control-group[data-size="compact"] > button,
+.kui-toolbar-control-group[data-size="compact"] > wa-button,
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown,
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
+
+/* A compact icon-only trigger may stay square, but a mixed-content dropdown
+   trigger must grow for its slotted label plus Web Awesome's caret. Otherwise
+   the fixed 32px base centers both outside its host, painting the label across
+   the separator and the caret beyond the group border. */
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown
+  > wa-button {
+  /* WebKit does not contribute a custom element's shadow-part caret to the
+     host's intrinsic inline size. Give the standard short text trigger an
+     engine-stable floor; max-content still wins for longer light-DOM labels,
+     and consumers can raise the public variable for localized copy. */
+  width: var(--kui-toolbar-dropdown-trigger-width, 4.125rem);
+}
 
 .kui-toolbar-control-group[data-single="true"] > wa-dropdown,
 .kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button,
@@ -107,6 +232,10 @@
 }
 
 .kui-toolbar-control-group wa-button::part(base) {
+  /* Match min-width to the 40px height so an icon-only button's highlight is at
+     least a circle, not a vertical oval — the host is 40px wide but the base
+     part was sizing to its ~32px content. Text/caret buttons grow past it. */
+  min-width: 2.5rem;
   min-height: 2.5rem;
   box-sizing: border-box;
   border: 1px solid transparent;
@@ -133,19 +262,67 @@
   background: transparent;
 }
 
-.kui-toolbar-control-group[data-single="false"]
-  > :is(button, wa-button)[aria-pressed="true"] {
+/* A group holding exactly one control behaves like `single` even without the
+   flag: the whole group background changes on hover instead of highlighting an
+   inner layer inset from the border (KF-J9P1ZD — a heading toolbar's lone Close/
+   Done action). */
+.kui-toolbar-control-group:not([data-single="true"]):has(
+    > :is(button, wa-button):only-child
+  ):hover {
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-control-group:not([data-single="true"]):has(
+    > :is(button, wa-button):only-child
+  )
+  > :is(button, wa-button):hover,
+.kui-toolbar-control-group:not([data-single="true"]):has(
+    > :is(button, wa-button):only-child
+  )
+  wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+
+/* A plain <button> child paints its own box for the selected state. */
+.kui-toolbar-control-group[data-single="false"] > button[aria-pressed="true"] {
   border-color: var(--kui-toolbar-control-selected-border);
   color: var(--kui-toolbar-control-selected-color);
   background: var(--kui-toolbar-control-selected-background);
   box-shadow: var(--kui-toolbar-control-selected-shadow);
 }
 
+/* A wa-button's visual is ::part(base), not the outer 40px host box (which has no
+   pill radius). Paint the selected background/border/shadow on ::part(base) —
+   mirroring the hover rule — so the selected state matches the pill radius/size
+   and stays inside the group's border instead of overflowing it as an oversized
+   square (KF-5BDDQ9). The selected text color rides on the host and inherits in. */
+.kui-toolbar-control-group[data-single="false"]
+  > wa-button[aria-pressed="true"] {
+  color: var(--kui-toolbar-control-selected-color);
+}
+.kui-toolbar-control-group[data-single="false"]
+  > wa-button[aria-pressed="true"]::part(base) {
+  border-color: var(--kui-toolbar-control-selected-border);
+  background: var(--kui-toolbar-control-selected-background);
+  box-shadow: var(--kui-toolbar-control-selected-shadow);
+}
+
 .kui-toolbar-control-group > :is(button, wa-button):focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
+/* A composed Select can delegate focus paint to the group so the visible ring
+   follows the group's selected pill/rounded geometry instead of Web Awesome's
+   form-control radius. */
+.kui-toolbar-control-group:has(
+  > .kui-select[data-focus-ring-owner="group"]:is(:focus-within, [open])
+) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
 .kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(
     > :is(button, wa-button)[aria-pressed="true"]
   ) {
@@ -159,3 +336,44 @@
   > :is(button, wa-button)[aria-pressed="true"] {
   color: var(--kui-toolbar-control-pressed-color);
 }
+
+/* Avatar controls paint the image as chrome rather than inserting a replaced
+   <img> into the control. `background-size: contain` is the background-image
+   equivalent of `object-fit: contain`: the whole avatar remains visible. A
+   lone control belongs to the outer group surface; in a group of choices the
+   image belongs only to the selected highlight. */
+.kui-toolbar-control-group[data-content="avatar"] {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(> :is(button, wa-button):only-child)
+  ) {
+  background-image: var(--kui-toolbar-avatar-image);
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(> :is(button, wa-button):only-child)
+  )
+  > :is(button, wa-button) {
+  color: transparent;
+}
+
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(> :is(button, wa-button):only-child)
+  )
+  > button[aria-pressed="true"],
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(> :is(button, wa-button):only-child)
+  )
+  > wa-button[aria-pressed="true"]::part(base) {
+  color: transparent;
+  background-image: var(--kui-toolbar-avatar-image);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}

package/dist/styles/toolbar-text.css

@@ -9,11 +9,30 @@
   color: var(--kui-color-neutral-on-quiet);
   font-weight: 650;
   line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   align-items: center;
 }
 
+/* The text lives in a block child, not directly in the flex box, so
+   `text-overflow: ellipsis` actually applies (it is a no-op on a flex item). */
+.kui-toolbar-text__text {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.kui-toolbar-text[data-size="xlarge"] {
+  /* Matches page/panel titles: the same responsive clamp so a heading toolbar
+     title reads at the page-title scale without a bespoke override. Height grows
+     to the larger text (the fixed 40px would clip its ascenders). */
+  height: auto;
+  min-height: 2.75rem;
+  color: var(--kui-color-text);
+  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
+  letter-spacing: -0.025em;
+}
+
 .kui-toolbar-text[data-size="large"] {
   font-size: var(--kui-font-m);
   letter-spacing: -0.015em;
@@ -27,3 +46,47 @@
   font-family: var(--kui-font-mono);
   font-size: var(--kui-font-xs);
 }
+
+/* Single line, no ellipsis: hard-clip the overflow instead of showing …. */
+.kui-toolbar-text[data-ellipsis="false"] .kui-toolbar-text__text {
+  text-overflow: clip;
+}
+
+/* Wrap onto multiple lines. The box grows to fit and switches from the centered
+   single-line row to a top-aligned block with readable leading; a min-height keeps
+   a one-line label at the toolbar row height. */
+.kui-toolbar-text[data-wrap="true"] {
+  align-items: flex-start;
+  height: auto;
+  min-height: 2.5rem;
+}
+
+.kui-toolbar-text[data-size="xlarge"][data-wrap="true"] {
+  min-height: 2.75rem;
+}
+
+.kui-toolbar-text[data-wrap="true"] .kui-toolbar-text__text {
+  white-space: normal;
+  line-height: 1.25;
+}
+
+/* Wrap capped to N lines with an ellipsis at the cut. `-webkit-line-clamp` needs
+   the box display and emits the … itself; the unprefixed `line-clamp` follows for
+   engines that ship it. */
+.kui-toolbar-text[data-wrap="true"][data-max-lines] .kui-toolbar-text__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--kui-toolbar-text-max-lines);
+  line-clamp: var(--kui-toolbar-text-max-lines);
+  overflow: hidden;
+}
+
+/* Wrap capped to N lines without an ellipsis: clip at a max-height instead of
+   line-clamp (which always ellipsizes). */
+.kui-toolbar-text[data-wrap="true"][data-max-lines][data-ellipsis="false"]
+  .kui-toolbar-text__text {
+  display: block;
+  -webkit-line-clamp: none;
+  line-clamp: none;
+  max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
+}

package/dist/styles/toolbar.css

@@ -20,8 +20,44 @@
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
-.kui-toolbar[data-divider="true"] {
-  box-shadow: inset 0 -1px var(--kui-color-border);
+.kui-toolbar {
+  --_kui-toolbar-divider-top: transparent;
+  --_kui-toolbar-divider-right: transparent;
+  --_kui-toolbar-divider-bottom: transparent;
+  --_kui-toolbar-divider-left: transparent;
+  box-shadow:
+    inset 0 1px var(--_kui-toolbar-divider-top),
+    inset -1px 0 var(--_kui-toolbar-divider-right),
+    inset 0 -1px var(--_kui-toolbar-divider-bottom),
+    inset 1px 0 var(--_kui-toolbar-divider-left);
+}
+
+.kui-toolbar[divider-sides*="t"] {
+  --_kui-toolbar-divider-top: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="r"] {
+  --_kui-toolbar-divider-right: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="b"] {
+  --_kui-toolbar-divider-bottom: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="l"] {
+  --_kui-toolbar-divider-left: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
 }
 
 .kui-toolbar__leading,
@@ -33,16 +69,25 @@
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
 
+/* Pin each zone to its column so a display:none (empty) leading or center zone
+   doesn't let the trailing zone auto-place into the first column — which left an
+   extra gap + empty track to the trailing zone's right (KF-5BEF2M). The trailing
+   zone anchors to the last column via -2/-1, so it stays flush right for both
+   the 3- and 2-column layouts, and still stacks under the leading zone when a
+   consumer collapses the toolbar to a single column. */
 .kui-toolbar__leading {
+  grid-column: 1;
   overflow: hidden;
 }
 
 .kui-toolbar__center {
   justify-content: center;
+  grid-column: 2;
 }
 
 .kui-toolbar__trailing {
   justify-content: flex-end;
+  grid-column: -2 / -1;
 }
 
 .kui-toolbar[data-has-center="false"] .kui-toolbar__center,