@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/styles/split-view.css

@@ -5,6 +5,26 @@
   height: 100%;
   overflow: hidden;
   background: var(--kui-color-surface);
+  /* Safe areas: the list column grows by the inline-start unsafe inset and each
+     pane compensates only for the edges it touches — never the shared interior
+     edge. The compact form hands the context to its NavStack. See pane.css for
+     the `--kui-edge-inset-*` edge context. */
+  --_kui-split-view-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-split-view-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-split-view-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-split-view-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
 }
 
 /* The list pane; when not resizable it takes an intrinsic column and the detail
@@ -13,11 +33,14 @@
   min-width: 0;
   min-height: 0;
   flex: 0 0 auto;
-  width: var(--kui-split-view-list-width, 20rem);
-  border-inline-end: 1px solid var(--kui-color-border);
+  width: calc(
+    var(--kui-split-view-list-width, 20rem) +
+      var(--_kui-split-view-safe-inline-start)
+  );
+  border-inline-end: 1px solid var(--kui-color-neutral-border-normal);
 }
 
-.kui-split-view > .kui-resizable-region .kui-split-view__list {
+.kui-split-view__list[data-resizable="true"] {
   width: 100%;
   border-inline-end: 0;
 }
@@ -28,8 +51,96 @@
   min-height: 0;
 }
 
+.kui-split-view__list,
+.kui-split-view__detail {
+  --kui-edge-inset-block-start: var(--_kui-split-view-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-split-view-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-split-view-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-split-view-safe-inline-end);
+}
+
+.kui-split-view__list {
+  --kui-edge-inset-inline-end: 0px;
+}
+
+.kui-split-view__detail {
+  --kui-edge-inset-inline-start: 0px;
+}
+
+/* Each pane pads for the edges it touches unless its only child is a Pane or
+   layout, which then owns the insets. */
+.kui-split-view__list:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+),
+.kui-split-view__detail:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+) {
+  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);
+}
+
+.kui-split-view__list
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ),
+.kui-split-view__detail
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ) {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
 /* Compact mode is a full-bleed NavStack. */
 .kui-split-view--compact {
   display: block;
   height: 100%;
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a SplitView fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="split-view"]:only-child {
+  height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
+}

package/dist/styles/state-banner.css

@@ -21,14 +21,6 @@
     )
   );
   --_kui-state-banner-detail: var(--kui-state-banner-detail, currentColor);
-  --_kui-state-banner-badge-background: var(
-    --kui-state-banner-badge-background,
-    var(--_kui-state-banner-foreground)
-  );
-  --_kui-state-banner-badge-foreground: var(
-    --kui-state-banner-badge-foreground,
-    var(--kui-color-surface)
-  );
   --_kui-state-banner-action-background: var(
     --kui-state-banner-action-background,
     color-mix(in srgb, var(--kui-color-surface) 52%, transparent)
@@ -37,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);
@@ -45,10 +46,18 @@
   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);
 }
+/* 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,
@@ -63,6 +72,20 @@
     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"] {
   --_kui-state-banner-background: var(
     --kui-state-banner-background,
@@ -117,52 +140,133 @@
   );
   --_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))
   );
 }
+/* A strip is a full-width band at a layout edge rather than a card beside the
+   work: flush, square, and divided from its neighbor only on the edges it
+   names, in the tone's own border color. Its inline padding lands the copy on
+   the content-text column a card banner's copy uses (8px margin + 1px border
+   + 8px padding), so a strip above a pane lines up with the pane's text. */
+.kui-state-banner[data-presentation="strip"] {
+  margin-inline: 0;
+  padding-block: var(--kui-space-xs);
+  padding-inline: calc(1px + 1rem);
+  border-width: 0;
+  border-radius: 0;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="t"] {
+  border-top-width: 1px;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="r"] {
+  border-right-width: 1px;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="b"] {
+  border-bottom-width: 1px;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="l"] {
+  border-left-width: 1px;
+}
+/* Inside a CornerStatus the banner floats over the page at a viewport corner:
+   the corner's gutter replaces the inline margin, elevation separates it from
+   whatever content it covers, and the translucent tone fill composites over
+   the opaque surface so that content never shows through the copy. */
+.kui-corner-status > .kui-state-banner {
+  margin-inline: 0;
+  background:
+    linear-gradient(
+      var(--_kui-state-banner-background),
+      var(--_kui-state-banner-background)
+    ),
+    var(--kui-color-surface);
+  box-shadow: var(--kui-shadow-l);
+}
 .kui-state-banner__icon {
   display: grid;
+  flex: none;
   place-items: center;
 }
 .kui-state-banner__icon svg {
   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 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);
+}
+.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;
+}
+/* `below` always gives the action its own end-aligned trailing row. */
+.kui-state-banner[data-action-placement="below"] > .kui-state-banner__action {
+  display: flex;
+  flex-basis: 100%;
+  justify-content: flex-end;
 }
 .kui-state-banner__copy strong {
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   font-size: var(--kui-font-xs);
 }
-.kui-state-banner__badge {
-  display: inline-grid;
-  min-width: 1.25rem;
-  min-height: 1.25rem;
-  padding-inline: 0.35rem;
-  box-sizing: border-box;
-  border-radius: var(--kui-radius-pill);
-  color: var(--_kui-state-banner-badge-foreground);
-  background: var(--_kui-state-banner-badge-background);
-  place-items: center;
-  flex: none;
-  font-size: var(--kui-font-2xs);
-  font-weight: 700;
-  letter-spacing: 0;
-  line-height: 1;
-}
+/* 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 {
-  overflow: hidden;
+  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;
+}
+/* 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;
@@ -184,15 +288,10 @@
   outline-offset: 2px;
 }
 @media (max-width: 36rem) {
-  .kui-state-banner__copy {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.05rem;
-  }
-  .kui-state-banner__badge {
-    justify-self: start;
-  }
+  /* 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 {
-    grid-column: 1 / -1;
+    display: flex;
   }
 }

package/dist/styles/styles.css

@@ -1,11 +1,18 @@
 @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 "./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";
@@ -16,9 +23,23 @@
 @import "./loading-spinner.css";
 @import "./skeleton.css";
 @import "./select.css";
+@import "./popup-menu.css";
+@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";
+@import "./column-track.css";
+@import "./content-swap.css";
+@import "./file-picker.css";
+@import "./combobox.css";
+@import "./edge-activity-indicator.css";
+@import "./icon-button.css";
+@import "./icon-toggle-button.css";
+@import "./split-button.css";
+@import "./framed-list.css";
+@import "./summary-row.css";
 @import "./empty-state.css";
-@import "./panel-header.css";
 @import "./value-table.css";

package/dist/styles/summary-row.css

@@ -0,0 +1,161 @@
+/* A selectable summary: a full-width option on the base surface, a container
+   for its own compaction, with a hairline divider below each list row. */
+.kui-summary-row {
+  --_kui-summary-row-rail: transparent;
+  --_kui-summary-row-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+  --_kui-summary-row-title-lines: 2;
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-block-end-color: var(--kui-color-neutral-border-quiet);
+  border-radius: 0;
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  cursor: pointer;
+  outline: none;
+  container-type: inline-size;
+  user-select: none;
+}
+
+.kui-summary-row[data-presentation="card"] {
+  --_kui-summary-row-title-lines: 4;
+  border-color: transparent;
+  border-radius: var(--_kui-summary-row-radius);
+}
+
+.kui-summary-row[data-list-edge="start"] {
+  border-start-start-radius: var(--_kui-summary-row-radius);
+  border-start-end-radius: var(--_kui-summary-row-radius);
+}
+.kui-summary-row[data-list-edge="end"] {
+  border-end-start-radius: var(--_kui-summary-row-radius);
+  border-end-end-radius: var(--_kui-summary-row-radius);
+}
+.kui-summary-row[data-list-edge="only"] {
+  border-radius: var(--_kui-summary-row-radius);
+}
+
+.kui-summary-row[data-defer="true"] {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 4.5rem;
+}
+
+.kui-summary-row:hover {
+  border-color: var(--kui-color-brand-border-normal);
+}
+
+.kui-summary-row:focus-visible {
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 24%, transparent);
+}
+
+.kui-summary-row[data-selected="true"] {
+  border-color: var(--kui-color-brand-border-normal);
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+.kui-summary-row[data-dimmed="true"]:not(:hover, [data-selected="true"]) {
+  opacity: 0.55;
+}
+
+/* The leading state rail. */
+.kui-summary-row__rail {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 0.25rem;
+  background: var(--_kui-summary-row-rail);
+}
+.kui-summary-row[data-rail="neutral"] {
+  --_kui-summary-row-rail: var(--kui-color-neutral-on-quiet);
+}
+.kui-summary-row[data-rail="info"] {
+  --_kui-summary-row-rail: var(--kui-color-brand-fill-loud);
+}
+.kui-summary-row[data-rail="pop"] {
+  --_kui-summary-row-rail: var(--kui-color-pop-fill-loud);
+}
+.kui-summary-row[data-rail="success"] {
+  --_kui-summary-row-rail: var(--kui-color-success-fill-loud);
+}
+.kui-summary-row[data-rail="warning"] {
+  --_kui-summary-row-rail: var(--kui-color-warning-fill-loud);
+}
+.kui-summary-row[data-rail="danger"] {
+  --_kui-summary-row-rail: var(--kui-color-danger-fill-loud);
+}
+
+/* Leading glyph, then the content column. */
+.kui-summary-row__body {
+  display: grid;
+  min-width: 0;
+  padding: var(--kui-space-xs) var(--kui-space-s);
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--kui-space-xs);
+}
+
+.kui-summary-row__body:not(:has(> .kui-summary-row__leading)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.kui-summary-row__leading {
+  display: grid;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  color: var(--kui-color-neutral-on-quiet);
+  place-items: center;
+}
+
+.kui-summary-row[data-presentation="card"] .kui-summary-row__leading {
+  min-width: 1.125rem;
+  min-height: 1.25rem;
+}
+
+.kui-summary-row__content {
+  display: grid;
+  min-width: 0;
+  gap: var(--kui-space-2xs);
+}
+
+/* The identity line clips at its line budget; the trailing meta floats to its
+   end so the title wraps around it. */
+.kui-summary-row__title {
+  min-width: 0;
+  max-height: calc(var(--_kui-summary-row-title-lines) * 1.3em);
+  overflow: hidden;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.kui-summary-row__trailing {
+  float: inline-end;
+  margin-inline-start: var(--kui-space-s);
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-2xs);
+  line-height: calc(1.3em * 1.15);
+  white-space: nowrap;
+}
+
+.kui-summary-row__metadata {
+  display: flex;
+  min-width: 0;
+  color: var(--kui-color-neutral-on-quiet);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kui-space-2xs) var(--kui-space-xs);
+  font-size: var(--kui-font-xs);
+}
+
+/* A narrow row tightens its gaps. */
+@container (max-width: 24rem) {
+  .kui-summary-row__body {
+    padding: var(--kui-space-xs);
+  }
+}

package/dist/styles/sunken-panel.css

@@ -1,22 +1,31 @@
 .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)
-  );
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
   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;
+}