@kerfjs/ui 5.0.0-beta.8 → 5.0.0-beta.80

package/dist/styles/state-banner.css

@@ -41,6 +41,15 @@
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
+/* The detail is secondary through its smaller, regular-weight type, not a
+   dimmed color: an opacity cut toned details below WCAG AA over their fills.
+   Only the neutral tone has a quieter text color that still clears AA. */
+.kui-state-banner[data-tone="neutral"] {
+  --_kui-state-banner-detail: var(
+    --kui-state-banner-detail,
+    var(--kui-color-neutral-on-quiet)
+  );
+}
 .kui-state-banner[data-tone="info"] {
   --_kui-state-banner-background: var(
     --kui-state-banner-background,
@@ -52,7 +61,21 @@
   );
   --_kui-state-banner-foreground: var(
     --kui-state-banner-foreground,
-    var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-quiet))
+    var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-fill))
+  );
+}
+.kui-state-banner[data-tone="pop"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(--kui-state-banner-pop-background, var(--kui-color-pop-fill-quiet))
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(--kui-state-banner-pop-border, var(--kui-color-pop-border-normal))
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-pop-foreground, var(--kui-color-pop-on-fill))
   );
 }
 .kui-state-banner[data-tone="success"] {
@@ -72,10 +95,7 @@
   );
   --_kui-state-banner-foreground: var(
     --kui-state-banner-foreground,
-    var(
-      --kui-state-banner-success-foreground,
-      var(--kui-color-success-on-quiet)
-    )
+    var(--kui-state-banner-success-foreground, var(--kui-color-success-on-fill))
   );
 }
 .kui-state-banner[data-tone="warning"] {
@@ -95,10 +115,7 @@
   );
   --_kui-state-banner-foreground: var(
     --kui-state-banner-foreground,
-    var(
-      --kui-state-banner-warning-foreground,
-      var(--kui-color-warning-on-quiet)
-    )
+    var(--kui-state-banner-warning-foreground, var(--kui-color-warning-on-fill))
   );
 }
 .kui-state-banner[data-tone="danger"] {
@@ -115,7 +132,7 @@
   );
   --_kui-state-banner-foreground: var(
     --kui-state-banner-foreground,
-    var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-quiet))
+    var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-fill))
   );
 }
 .kui-state-banner__icon {
@@ -126,23 +143,79 @@
   width: 1rem;
   height: 1rem;
 }
+/* The copy is inline flow, not flex: a wrapping title lays out as text, so the
+   badge follows the title's last word instead of the right edge of a
+   flex-shrunk title box, and the detail stays beside them only while it fits
+   whole. Otherwise it moves to its own line and truncates at the full copy
+   width. Flex shrank the title and detail together, which left a gap before
+   the badge and cut the detail early. Each item's trailing margin is the item
+   gap, so no margin lands at the start of a wrapped line. */
 .kui-state-banner__copy {
-  display: flex;
   min-width: 0;
+  /* 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);
+}
+.kui-state-banner[data-copy-layout="stacked"] > .kui-state-banner__copy {
+  display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
-  gap: var(--kui-layout-item-gap, 0.5rem);
+  column-gap: var(--kui-state-banner-copy-gap, var(--kui-space-xs));
+  row-gap: var(--kui-state-banner-copy-row-gap, var(--kui-space-2xs));
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > strong {
+  margin-inline-end: 0;
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > .kui-state-banner__detail {
+  flex-basis: 100%;
+  white-space: normal;
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > .kui-state-banner__detail
+  > span {
+  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;
+}
+.kui-state-banner[data-action-placement="below"] > .kui-state-banner__action {
+  grid-column: 1 / -1;
 }
 .kui-state-banner__copy strong {
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   font-size: var(--kui-font-xs);
 }
-.kui-state-banner__copy span {
-  overflow: hidden;
+/* The clip lives on an inner span, not on the detail itself. WebKit still
+   applies the CSS 2.1 rule that an inline-block whose overflow is not
+   `visible` takes its baseline from its bottom margin edge, so a clipped
+   inline-block detail rose off the title's baseline there and pushed the
+   title and badge down. An inline flex container's baseline is its first
+   item's text baseline in every engine, whatever that item's overflow. */
+.kui-state-banner__detail {
+  display: inline-flex;
+  max-width: 100%;
   color: var(--_kui-state-banner-detail);
   font-size: var(--kui-font-2xs);
-  opacity: 0.78;
-  text-overflow: ellipsis;
+  vertical-align: baseline;
   white-space: nowrap;
 }
+.kui-state-banner__detail > span {
+  min-width: 0;
+  overflow: clip;
+  text-overflow: ellipsis;
+}
 .kui-state-banner__action {
   justify-self: end;
 }
@@ -166,8 +239,10 @@
   outline-offset: 2px;
 }
 @media (max-width: 36rem) {
-  .kui-state-banner__copy {
-    display: grid;
-    gap: 0.05rem;
+  /* The detail drops below the title. The title row keeps the wide layout's
+     relationship: a content-sized badge one item gap after the title, on the
+     title's baseline. */
+  .kui-state-banner__detail {
+    display: flex;
   }
 }

package/dist/styles/styles.css

@@ -1,22 +1,31 @@
 @import "./foundation.css";
 @import "./layout.css";
+@import "./badge.css";
+@import "./chip.css";
 @import "./lucide-icon.css";
 @import "./disclosure-arrow.css";
 @import "./toolbar.css";
 @import "./toolbar-control-group.css";
+@import "./surface-scaffold.css";
 @import "./toolbar-text.css";
-@import "./menu-action-row.css";
-@import "./menu-item.css";
-@import "./menu-header.css";
+@import "./text.css";
+@import "./list.css";
+@import "./row.css";
+@import "./grid.css";
+@import "./spacer.css";
+@import "./list-action-row.css";
+@import "./list-item.css";
+@import "./list-header.css";
 @import "./resizable-region.css";
 @import "./app-tab.css";
+@import "./catalog.css";
 @import "./tab-bar.css";
 @import "./loading-spinner.css";
 @import "./skeleton.css";
 @import "./select.css";
+@import "./popup-menu.css";
 @import "./segmented-control.css";
 @import "./token-search-field.css";
 @import "./state-banner.css";
 @import "./empty-state.css";
-@import "./panel-header.css";
 @import "./value-table.css";

package/dist/styles/sunken-panel.css

@@ -0,0 +1,34 @@
+.kui-sunken-panel {
+  /* Reset the private value on each panel so nested panels do not inherit it. */
+  --_kui-sunken-panel-flex: 0 1 auto;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--kui-sunken-panel-padding, 0.5rem);
+  box-sizing: border-box;
+  flex: var(--_kui-sunken-panel-flex, initial);
+  border-radius: var(
+    --kui-sunken-panel-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+  color: var(--kui-sunken-panel-foreground, var(--kui-color-text));
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+  flex-direction: column;
+  gap: var(--kui-sunken-panel-gap, 0.5rem);
+}
+
+.kui-sunken-panel[data-fill="true"] {
+  height: 100%;
+}
+
+.kui-sunken-panel[data-shape="square"] {
+  border-radius: 0;
+}
+
+.kui-sunken-panel:is(:focus-visible, [data-outlined="true"]) {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}

package/dist/styles/surface-scaffold.css

@@ -0,0 +1,111 @@
+.kui-dialog-surface > wa-dialog {
+  --_kui-dialog-surface-width: 35rem;
+  --_kui-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-dialog-surface-gutter, 1rem)
+  );
+  --width: min(35rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-size="small"] > wa-dialog {
+  --_kui-dialog-surface-width: 25rem;
+  --width: min(25rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-size="large"] > wa-dialog {
+  --_kui-dialog-surface-width: 50rem;
+  --width: min(50rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-presentation="modal"][data-preferred-width]
+  > wa-dialog {
+  --width: min(
+    var(--_kui-dialog-surface-preferred-width),
+    calc(100vw - 2rem)
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog {
+  --width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
+/* Web Awesome has a separate max-width clamp; setting --width alone cannot
+   provide an 8px phone gutter. Omitted props retain its legacy geometry. */
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog::part(dialog) {
+  max-width: max(
+    0px,
+    calc(
+      100vw - var(--_kui-dialog-surface-resolved-gutter) -
+        var(--_kui-dialog-surface-resolved-gutter)
+    )
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-max-height]
+  > wa-dialog::part(dialog) {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-max-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
+.kui-dialog-surface[data-body-inset="none"] > wa-dialog::part(body),
+.kui-dialog-surface[data-footer-inset="none"] > wa-dialog::part(footer) {
+  padding: 0;
+}
+.kui-dialog-surface[data-body-inset="compact"] > wa-dialog::part(body),
+.kui-dialog-surface[data-footer-inset="compact"] > wa-dialog::part(footer) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-dialog-surface[data-body-inset="comfortable"] > wa-dialog::part(body),
+.kui-dialog-surface[data-footer-inset="comfortable"] > wa-dialog::part(footer) {
+  padding: var(--kui-wa-container-inset, 1rem);
+}
+.kui-dialog-surface[data-presentation="side-sheet"] > wa-dialog::part(dialog) {
+  width: min(30rem, 100vw);
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  margin-inline-end: 0;
+  border-radius: var(--kui-radius-l) 0 0 var(--kui-radius-l);
+}
+.kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog {
+  --width: 100vw;
+}
+.kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog::part(dialog) {
+  width: 100vw;
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  border-radius: 0;
+}
+.kui-popup-surface {
+  display: inline-flex;
+}
+/* The surface insets the menu of a raw wa-dropdown it wraps. A PopupMenu
+   applies the surface's inset to itself (popup-menu.css). */
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: 0;
+}

package/dist/styles/tab-bar.css

@@ -18,28 +18,166 @@
 .kui-tab-bar__tabs {
   display: flex;
   min-width: 0;
-  height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
-  padding: 1px;
-  overflow-x: auto;
+  min-height: var(
+    --kui-tab-bar-strip-min-height,
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+  );
+  margin-block: var(--kui-tab-bar-strip-margin-block, 0);
+  padding: var(--kui-tab-bar-strip-padding, 1px);
+  /* Scroll along the strip only: overflow-x alone computes overflow-y to auto,
+     so any vertical excess would let the strip scroll vertically on touch. */
+  overflow: auto var(--kui-tab-bar-strip-overflow-block, hidden);
   box-sizing: border-box;
-  border: 1px solid var(--kui-tab-bar-border);
-  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  background: var(--kui-tab-bar-background);
+  border: var(--kui-tab-bar-strip-border-width, 1px) solid
+    var(--kui-tab-bar-border);
+  border-radius: var(
+    --kui-tab-bar-strip-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+  background: var(
+    --kui-tab-bar-strip-background,
+    var(--kui-tab-bar-background)
+  );
   scrollbar-width: none;
   align-items: center;
-  flex: 1 1 auto;
-  gap: 0;
+  flex: var(--kui-tab-bar-strip-flex, 1 1 auto);
+  gap: var(--kui-tab-bar-strip-gap, 0);
+  scroll-padding-inline: var(--kui-tab-bar-strip-scroll-padding-inline, 0);
   overscroll-behavior-inline: contain;
 }
+.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)
+  );
+}
+.kui-tab-bar[data-icon-only-at] .kui-tab-bar__tabs {
+  container: kui-tab-bar-tabs / inline-size;
+}
+.kui-tab-bar[data-presentation="segmented"],
+.kui-tab-bar[data-presentation="inspector"] {
+  --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);
+  --kui-tab-bar-border: var(--kui-color-neutral-border-quiet);
+}
+/* A segmented strip's outer ends follow the pill track: a compact tab is inset
+   from the track's ends by the same distance as from its top and bottom, so
+   each end is concentric with the track. AppTab rounds its own outer corners
+   to match in this context (see app-tab.css); TabBar never styles AppTab. */
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs:has(> .kui-app-tab[data-size="compact"]) {
+  padding-inline: calc(
+    (var(--kui-toolbar-group-size, calc(2px + 2.625rem)) - 2rem) /
+      2 - 1px
+  );
+}
+.kui-tab-bar[data-presentation="inspector"] {
+  min-height: 2.125rem;
+  padding: 0;
+}
+.kui-tab-bar[data-presentation="inspector"] .kui-tab-bar__tabs {
+  min-height: var(--kui-tab-bar-strip-min-height, 2.125rem);
+  border-radius: var(--kui-tab-bar-strip-radius, var(--kui-radius-s));
+}
+.kui-tab-bar[data-trailing-placement="adjacent"] .kui-tab-bar__tabs {
+  flex: 0 1 auto;
+}
 
 .kui-tab-bar__tabs::-webkit-scrollbar {
   display: none;
 }
 
 .kui-tab-bar__leading,
-.kui-tab-bar__trailing {
+.kui-tab-bar__trailing,
+.kui-tab-bar__end {
   display: flex;
   min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   align-items: center;
   flex: none;
 }
+.kui-tab-bar__trailing {
+  flex: var(--kui-tab-bar-trailing-flex, none);
+}
+
+.kui-tab-bar__end {
+  margin-inline-start: auto;
+}
+
+/* Overflow dividers: a line on each side of the tab strip beyond which tabs
+   are scrolled out of view, as `wireScrollDividers` reports through the
+   strip's `data-scroll-overflow` (physical sides). A rail strip has no
+   visible track, so the bar draws the line with its own pseudo-elements,
+   ordered onto the strip's edges: `::before` between the leading zone and the
+   strip, `::after` between the strip and the trailing zone. Each is 1px wide
+   and gives back its width and one gap through a negative margin, so it
+   overlaps the strip's edge and never moves a tab or an action; hidden, it is
+   transparent. A segmented or inspector strip already draws a bordered track,
+   so its overflowing side takes the divider color on that border instead of
+   a straight line across its rounded end. */
+.kui-tab-bar > .kui-tab-bar__leading {
+  order: -2;
+}
+
+.kui-tab-bar > :is(.kui-tab-bar__trailing, .kui-tab-bar__end) {
+  order: 1;
+}
+
+.kui-tab-bar::before,
+.kui-tab-bar::after {
+  content: "";
+  position: relative;
+  z-index: 1;
+  width: 1px;
+  background: transparent;
+  pointer-events: none;
+  align-self: stretch;
+  flex: none;
+}
+
+.kui-tab-bar::before {
+  order: -1;
+  margin-inline-end: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.kui-tab-bar::after {
+  margin-inline-start: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):not(
+    :has(> .kui-tab-bar__tabs > .kui-app-tab[data-pinned="true"])
+  ):has(> .kui-tab-bar__tabs[data-scroll-overflow*="l"])::before,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):not(
+    :has(> .kui-tab-bar__tabs > .kui-app-tab[data-pinned="true"])
+  ):has(> .kui-tab-bar__tabs[data-scroll-overflow*="r"])::before,
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
+  )::after,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="l"]
+  )::after {
+  background: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.kui-tab-bar:not([data-presentation="rail"])
+  > .kui-tab-bar__tabs[data-scroll-overflow*="l"]:not(
+    :dir(ltr):has(> .kui-app-tab[data-pinned="true"])
+  ) {
+  border-left-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.kui-tab-bar:not([data-presentation="rail"])
+  > .kui-tab-bar__tabs[data-scroll-overflow*="r"]:not(
+    :dir(rtl):has(> .kui-app-tab[data-pinned="true"])
+  ) {
+  border-right-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}