@kerfjs/ui 5.0.0-beta.23 → 5.0.0-beta.25

package/dist/styles/list-action-row.css

@@ -1,4 +1,5 @@
 .kui-list-action-row {
+  --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
   --kui-list-action-row-color: var(--kui-color-neutral-on-normal);
   --kui-list-action-row-border: transparent;
   --kui-list-action-row-background: transparent;
@@ -21,6 +22,29 @@
   align-items: stretch;
 }
 
+.kui-list-action-row[data-density="compact"] {
+  min-height: 2.25rem;
+}
+
+.kui-list-action-row[data-density="compact"]
+  :is(.kui-list-action-row__primary, .kui-list-action-row__trailing-action) {
+  min-height: 2.25rem;
+}
+
+.kui-list-action-row[data-divider="before"],
+.kui-list-action-row[data-divider="both"] {
+  border-block-start: 1px solid var(--kui-list-group-divider-color);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-action-row[data-divider="after"],
+.kui-list-action-row[data-divider="both"] {
+  border-block-end: 1px solid var(--kui-list-group-divider-color);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 .kui-list-action-row:has(.kui-list-action-row__primary:hover) {
   --kui-list-action-row-border: var(--kui-list-action-row-hover-border);
   --kui-list-action-row-background: var(--kui-list-action-row-hover-background);
@@ -104,6 +128,26 @@
   align-items: center;
 }
 
+.kui-list-action-row__primary-label,
+.kui-list-action-row__description,
+.kui-list-action-row__status {
+  min-width: 0;
+}
+
+.kui-list-action-row__description,
+.kui-list-action-row__status {
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+.kui-list-action-row__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 .kui-list-action-row[data-has-icon="true"] .kui-list-action-row__label {
   margin-inline-start: calc(
     1.5rem + var(--kui-layout-item-gap, 0.5rem)
@@ -131,6 +175,26 @@
   place-items: center;
 }
 
+.kui-list-action-row[data-trailing-visibility="interaction"]
+  .kui-list-action-row__trailing-action {
+  opacity: 0;
+}
+
+.kui-list-action-row[data-trailing-visibility="interaction"]:is(
+    :hover,
+    :focus-within
+  )
+  .kui-list-action-row__trailing-action {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .kui-list-action-row[data-trailing-visibility="interaction"]
+    .kui-list-action-row__trailing-action {
+    opacity: 1;
+  }
+}
+
 .kui-list-action-row__trailing-action:hover:not(:disabled) {
   background: var(--kui-list-action-row-trailing-hover-background);
 }

package/dist/styles/list-header.css

@@ -1,4 +1,5 @@
 .kui-list-header {
+  --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
   --kui-list-header-color: var(--kui-color-neutral-on-quiet);
   --kui-list-header-hover-background: var(--kui-color-neutral-border-quiet);
   --_kui-list-header-action-icon-size: var(
@@ -18,6 +19,25 @@
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
 
+.kui-list-header[data-density="compact"],
+.kui-list-header[data-density="compact"] .kui-list-header__title {
+  min-height: 2.25rem;
+}
+
+.kui-list-header[data-density="compact"] .kui-list-header__title {
+  padding-block: 0.25rem;
+}
+
+.kui-list-header[data-divider="before"],
+.kui-list-header[data-divider="both"] {
+  border-block-start: 1px solid var(--kui-list-group-divider-color);
+}
+
+.kui-list-header[data-divider="after"],
+.kui-list-header[data-divider="both"] {
+  border-block-end: 1px solid var(--kui-list-group-divider-color);
+}
+
 .kui-list-header__title,
 .kui-list-header__action {
   box-sizing: border-box;
@@ -86,6 +106,18 @@
   line-height: 1;
 }
 
+.kui-list-header[data-indicator-tone="accent"]
+  :is(.kui-list-header__count, .kui-list-header__badge) {
+  color: var(--kui-color-brand-on-normal);
+  background: var(--kui-color-brand-fill-normal);
+}
+
+.kui-list-header[data-indicator-tone="danger"]
+  :is(.kui-list-header__count, .kui-list-header__badge) {
+  color: var(--kui-color-danger-on-normal);
+  background: var(--kui-color-danger-fill-normal);
+}
+
 .kui-list-header__action,
 .kui-list-header__action-layer {
   display: grid;

package/dist/styles/list-item.css

@@ -1,4 +1,5 @@
 .kui-list-item {
+  --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
   --kui-list-item-color: var(--kui-color-neutral-on-normal);
   --kui-list-item-border: transparent;
   --kui-list-item-background: transparent;
@@ -25,8 +26,27 @@
   text-align: start;
 }
 
+.kui-list-item[data-density="compact"] {
+  min-height: 2.25rem;
+  padding-block: 0.25rem;
+}
+
+.kui-list-item[data-divider="before"],
+.kui-list-item[data-divider="both"] {
+  border-block-start-color: var(--kui-list-group-divider-color);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-item[data-divider="after"],
+.kui-list-item[data-divider="both"] {
+  border-block-end-color: var(--kui-list-group-divider-color);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 .kui-list-item[data-has-icon="true"] {
-  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
+  grid-template-columns: 1.125rem minmax(0, 1fr) auto;
 }
 
 .kui-list-item[data-has-icon="true"] .kui-list-item__icon {
@@ -75,25 +95,38 @@
 
 .kui-list-item__icon {
   display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
   color: currentColor;
   place-items: center;
 }
 
 .kui-list-item__icon svg {
   display: block;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 
 .kui-list-item__label {
+  display: grid;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.kui-list-item__primary-label,
+.kui-list-item__description {
+  min-width: 0;
+}
+
+.kui-list-item__description {
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 400;
+  line-height: 1.3;
+}
+
 .kui-list-item[data-multiline="true"] {
   height: fit-content;
   white-space: normal;
@@ -106,7 +139,7 @@
 
 .kui-list-item[data-multiline="true"] .kui-list-item__icon {
   align-self: start;
-  margin-block-start: calc((1lh - 1.5rem) / 2);
+  margin-block-start: calc((1lh - 1.125rem) / 2);
 }
 
 .kui-list-item__trailing {
@@ -117,6 +150,12 @@
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
 
+.kui-list-item__status {
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 500;
+}
+
 .kui-list-item__trailing > svg {
   width: 1rem;
   height: 1rem;

package/dist/styles/list.css

@@ -0,0 +1,43 @@
+.kui-list {
+  --kui-list-divider-color: var(--kui-color-border);
+  --kui-list-gap: var(--kui-layout-item-gap, 0.5rem);
+  --_kui-list-divider-top: transparent;
+  --_kui-list-divider-right: transparent;
+  --_kui-list-divider-bottom: transparent;
+  --_kui-list-divider-left: transparent;
+
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  flex: var(--_kui-list-flex, initial);
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--_kui-list-gap, 0);
+  box-shadow:
+    inset 0 1px var(--_kui-list-divider-top),
+    inset -1px 0 var(--_kui-list-divider-right),
+    inset 0 -1px var(--_kui-list-divider-bottom),
+    inset 1px 0 var(--_kui-list-divider-left);
+}
+
+.kui-list[data-scrollable="true"] {
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+.kui-list[divider-sides*="t"] {
+  --_kui-list-divider-top: var(--kui-list-divider-color);
+}
+
+.kui-list[divider-sides*="r"] {
+  --_kui-list-divider-right: var(--kui-list-divider-color);
+}
+
+.kui-list[divider-sides*="b"] {
+  --_kui-list-divider-bottom: var(--kui-list-divider-color);
+}
+
+.kui-list[divider-sides*="l"] {
+  --_kui-list-divider-left: var(--kui-list-divider-color);
+}

package/dist/styles/resizable-region.css

@@ -27,6 +27,132 @@
   min-height: 0;
   overflow: hidden;
 }
+.kui-resizable-region[data-content-overflow="auto"]
+  > .kui-resizable-region__content {
+  overflow: auto;
+}
+.kui-resizable-region[data-content-overflow="visible"] {
+  z-index: var(--kui-resizable-region-popup-z, 5);
+  overflow: visible;
+}
+.kui-resizable-region[data-content-overflow="visible"]
+  > .kui-resizable-region__content {
+  overflow: visible;
+}
+.kui-resizable-region[data-separator="hidden"] {
+  --kui-resizable-region-separator-color: transparent;
+}
+.kui-resizable-region[data-collapsed="true"] > .kui-resizable-region__handle,
+.kui-resizable-region:not([data-presentation="inline"])
+  > .kui-resizable-region__handle {
+  display: none;
+}
+
+/* The track always snaps to its new size. Motion is isolated to the fixed-size
+   content so a large sibling workspace incurs one reflow, not one per frame. */
+.kui-resizable-region[data-collapse-motion="slide"]
+  > .kui-resizable-region__content,
+.kui-resizable-region[data-collapse-motion="fade-slide"]
+  > .kui-resizable-region__content {
+  transition:
+    opacity 160ms ease,
+    transform 200ms ease;
+}
+.kui-resizable-region[data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  width: var(--kui-resizable-region-expanded-size);
+  min-width: var(--kui-resizable-region-expanded-size);
+}
+.kui-resizable-region[data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  height: var(--kui-resizable-region-expanded-size);
+  min-height: var(--kui-resizable-region-expanded-size);
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="end"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateX(-100%);
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="start"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateX(100%);
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="end"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateY(-100%);
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="start"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateY(100%);
+}
+.kui-resizable-region[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  opacity: 0;
+}
+.kui-resizable-region[data-resizing="true"] > .kui-resizable-region__content {
+  transition: none;
+}
+
+/* Responsive replacement policies. Overlay regions stay on their logical edge
+   and stop participating in the parent's flex tracks; hidden regions are fully
+   replaced by application-owned compact UI. */
+.kui-resizable-region[data-presentation="overlay"] {
+  position: absolute;
+  z-index: var(--kui-resizable-region-overlay-z, 41);
+  max-width: var(--kui-resizable-region-overlay-max-width, 85vw);
+  max-height: var(--kui-resizable-region-overlay-max-height, 85vh);
+  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"] {
+  inset-block: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"][data-edge="end"] {
+  inset-inline-start: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"][data-edge="start"] {
+  inset-inline-end: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"] {
+  inset-inline: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-edge="end"] {
+  inset-block-start: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-edge="start"] {
+  inset-block-end: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-collapsed="true"] {
+  pointer-events: none;
+}
+.kui-resizable-region[data-presentation="hidden"] {
+  display: none;
+}
+
+/* A collapsed panel can supply its own affordance while Kerf owns consistent,
+   safe-area-aware viewport placement. */
+.kui-resizable-region__restore {
+  position: fixed;
+  z-index: var(--kui-resizable-region-restore-z, 42);
+  inset-block-end: calc(
+    var(--kui-resizable-region-restore-inset, 1rem) +
+      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+}
+.kui-resizable-region__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--kui-resizable-region-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+}
+.kui-resizable-region__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--kui-resizable-region-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
 .kui-resizable-region__handle {
   position: absolute;
   z-index: 3;
@@ -109,3 +235,9 @@
 .kui-resizable-region__handle:focus-visible .kui-resizable-region__handle-icon {
   opacity: 1;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-resizable-region > .kui-resizable-region__content {
+    transition: none;
+  }
+}

package/dist/styles/select.css

@@ -4,13 +4,61 @@
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   gap: 0;
 }
+.kui-select--label-hidden::part(form-control-label) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
 .kui-select::part(display-input) {
   min-width: 0;
+  max-width: var(--kui-select-label-max-width, none);
   overflow: hidden;
   padding: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.kui-select[data-size="compact"]::part(combobox) {
+  min-height: 2rem;
+}
+.kui-select[data-presentation="toolbar-borderless"]::part(combobox) {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.kui-select[data-presentation="navigation"] {
+  width: max-content;
+  max-width: 100%;
+}
+.kui-select[data-focus-ring-owner="group"]:focus-within::part(combobox) {
+  outline: none;
+  box-shadow: none;
+}
+.kui-select[data-selected-presentation="icon-only"] {
+  width: 2rem;
+}
+.kui-select[data-selected-presentation="icon-only"]::part(combobox) {
+  width: 2rem;
+  min-width: 2rem;
+  padding-inline: 0.4375rem;
+}
+.kui-select[data-selected-presentation="icon-only"]::part(display-input) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.kui-select[data-selected-presentation="icon-only"]
+  .kui-select__icon[slot="start"] {
+  margin-inline-end: 0 !important;
+}
 .kui-select::part(start),
 .kui-select::part(end),
 .kui-select::part(expand-icon) {
@@ -122,9 +170,29 @@
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   background: var(--kui-color-surface);
 }
+.kui-select--placeholder[data-size="compact"] .kui-select__placeholder-box {
+  min-height: 2rem;
+}
+.kui-select--placeholder[data-presentation="toolbar-borderless"]
+  .kui-select__placeholder-box {
+  border-color: transparent;
+  background: transparent;
+}
+.kui-select--placeholder[data-presentation="navigation"] {
+  width: max-content;
+  max-width: 100%;
+}
 .kui-select__placeholder-box .kui-skeleton {
   max-width: 10rem;
 }
+.kui-select__placeholder-hint {
+  display: block;
+  margin-block-start: 0.25rem;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs);
+  line-height: 1.4;
+}
 .kui-select__placeholder-chevron {
   display: inline-flex;
   width: 1rem;

package/dist/styles/state-banner.css

@@ -21,6 +21,14 @@
     )
   );
   --_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)
@@ -129,7 +137,23 @@
 .kui-state-banner__copy strong {
   font-size: var(--kui-font-xs);
 }
-.kui-state-banner__copy span {
+.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;
+}
+.kui-state-banner__detail {
   overflow: hidden;
   color: var(--_kui-state-banner-detail);
   font-size: var(--kui-font-2xs);
@@ -162,6 +186,13 @@
 @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;
+  }
+  .kui-state-banner__detail {
+    grid-column: 1 / -1;
+  }
 }

package/dist/styles/styles.css

@@ -4,7 +4,9 @@
 @import "./disclosure-arrow.css";
 @import "./toolbar.css";
 @import "./toolbar-control-group.css";
+@import "./surface-scaffold.css";
 @import "./toolbar-text.css";
+@import "./list.css";
 @import "./list-action-row.css";
 @import "./list-item.css";
 @import "./list-header.css";
@@ -19,5 +21,4 @@
 @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

@@ -16,3 +16,7 @@
   flex-direction: column;
   gap: var(--kui-sunken-panel-gap, 0.5rem);
 }
+
+.kui-sunken-panel[data-shape="square"] {
+  border-radius: 0;
+}

package/dist/styles/surface-scaffold.css

@@ -0,0 +1,51 @@
+.kui-dialog-surface > wa-dialog {
+  --width: min(35rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-size="small"] > wa-dialog {
+  --width: min(25rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-size="large"] > wa-dialog {
+  --width: min(50rem, calc(100vw - 2rem));
+}
+.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;
+}
+.kui-popup-surface[data-inset="standard"] > wa-dropdown::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"] > wa-dropdown::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"] > wa-dropdown::part(menu) {
+  padding: 0;
+}

package/dist/styles/tab-bar.css

@@ -31,6 +31,30 @@
   gap: 0;
   overscroll-behavior-inline: contain;
 }
+.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);
+}
+.kui-tab-bar[data-presentation="inspector"] {
+  min-height: 2.125rem;
+  padding: 0;
+}
+.kui-tab-bar[data-presentation="inspector"] .kui-tab-bar__tabs {
+  height: 2.125rem;
+  border-radius: var(--kui-radius-s);
+}
+.kui-tab-bar[data-allocation="fill"] [data-component="app-tab"] {
+  min-width: 0;
+  flex: 1 1 0;
+}
+.kui-tab-bar[data-allocation="fill"] [data-component="app-tab"] > [role="tab"] {
+  width: 100%;
+  justify-content: center;
+}
+.kui-tab-bar[data-trailing-placement="adjacent"] .kui-tab-bar__tabs {
+  flex: 0 1 auto;
+}
 
 .kui-tab-bar__tabs::-webkit-scrollbar {
   display: none;