@kerfjs/ui 5.0.0-beta.4 → 5.0.0-beta.41

package/dist/styles/pane.css

@@ -0,0 +1,62 @@
+.kui-pane {
+  --kui-pane-separator-block-start-width: 0;
+  --kui-pane-separator-block-end-width: 0;
+  --kui-pane-separator-inline-start-width: 0;
+  --kui-pane-separator-inline-end-width: 0;
+
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  box-sizing: border-box;
+  border: 0 solid var(--kui-pane-separator-color, var(--kui-color-border));
+  border-block-start-width: var(--kui-pane-separator-block-start-width);
+  border-block-end-width: var(--kui-pane-separator-block-end-width);
+  border-inline-start-width: var(--kui-pane-separator-inline-start-width);
+  border-inline-end-width: var(--kui-pane-separator-inline-end-width);
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+.kui-pane[data-separator-block-start="true"] {
+  --kui-pane-separator-block-start-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane[data-separator-block-end="true"] {
+  --kui-pane-separator-block-end-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane[data-separator-inline-start="true"] {
+  --kui-pane-separator-inline-start-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane[data-separator-inline-end="true"] {
+  --kui-pane-separator-inline-end-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane__header,
+.kui-pane__toolbar {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
+}
+
+.kui-pane__content {
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  overflow: auto;
+  grid-area: content;
+  overscroll-behavior: contain;
+}
+
+.kui-pane__footer {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: footer;
+}

package/dist/styles/resizable-region.css

@@ -27,6 +27,158 @@
   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="overlay"][data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  width: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-width, 85vw)
+  );
+  min-width: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-width, 85vw)
+  );
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  height: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-height, 85vh)
+  );
+  min-height: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-height, 85vh)
+  );
+}
+.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 +261,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/row.css

@@ -0,0 +1,92 @@
+.kui-row {
+  --kui-row-gap: var(--kui-layout-item-gap, 0.5rem);
+
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: var(--_kui-row-inset-top, 0) var(--_kui-row-inset-right, 0)
+    var(--_kui-row-inset-bottom, 0) var(--_kui-row-inset-left, 0);
+  flex: var(--_kui-row-flex, initial);
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  align-content: space-between;
+  justify-content: flex-start;
+  gap: var(--_kui-row-gap, var(--kui-row-gap));
+}
+
+.kui-row[data-control-insets*="t"] {
+  --_kui-row-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="r"] {
+  --_kui-row-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="b"] {
+  --_kui-row-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="l"] {
+  --_kui-row-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-text-insets*="t"] {
+  --_kui-row-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="r"] {
+  --_kui-row-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="b"] {
+  --_kui-row-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="l"] {
+  --_kui-row-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-wrap="true"] {
+  flex-wrap: wrap;
+}
+
+.kui-row[data-h-align="center"] {
+  justify-content: space-around;
+}
+
+.kui-row[data-h-align="right"] {
+  justify-content: flex-end;
+}
+
+.kui-row[data-h-align="full"] {
+  justify-content: space-between;
+}
+
+.kui-row[data-v-align="top"] {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.kui-row[data-v-align="middle"] {
+  align-items: center;
+  align-content: space-around;
+}
+
+.kui-row[data-v-align="bottom"] {
+  align-items: flex-end;
+  align-content: flex-end;
+}

package/dist/styles/segmented-control.css

@@ -12,9 +12,9 @@
     --kui-layout-rounded-radius,
     calc(1px + 0.6875rem)
   );
-  --kui-segmented-item-radius: var(
-    --kui-layout-rounded-radius,
-    calc(1px + 0.6875rem)
+  --kui-segmented-item-radius: max(
+    0px,
+    calc(var(--kui-segmented-radius) - var(--kui-layout-highlight-inset, 2px))
   );
   display: inline-flex;
   max-width: 100%;
@@ -41,6 +41,13 @@
 }
 
 .kui-segmented-control[data-appearance="toolbar"] {
+  --kui-segmented-item-radius: var(
+    --kui-control-highlight-radius,
+    max(
+      0px,
+      calc(var(--kui-segmented-radius) - var(--kui-layout-highlight-inset, 2px))
+    )
+  );
   --kui-segmented-background: transparent;
   --kui-segmented-foreground: var(
     --kui-toolbar-control-color,
@@ -82,10 +89,6 @@
     --kui-layout-pill-radius,
     calc(1px + 1.3125rem)
   );
-  --kui-segmented-item-radius: var(
-    --kui-layout-pill-radius,
-    calc(1px + 1.3125rem)
-  );
 }
 
 .kui-segmented-control[data-layout="equal"] {

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) {
@@ -32,10 +80,13 @@
 }
 .kui-select wa-option {
   --wa-form-control-activated-color: var(--kui-color-brand-fill-normal);
-  --current-text-color: var(--kui-color-brand-on-quiet);
+  /* Current option text sits on the activated brand fill; use the darker on-fill
+     accent so it clears WCAG AA (brand-on-quiet was 3.77:1 over that fill). */
+  --current-text-color: var(--kui-color-brand-on-fill);
 }
 .kui-select wa-option::part(start) {
   align-self: center;
+  margin-inline-end: 0.5rem;
   margin-top: 0;
 }
 .kui-select wa-option::part(label) {
@@ -52,7 +103,7 @@
   height: 1rem;
   flex: none;
 }
-.kui-select__icon[slot="start"] {
+.kui-select > .kui-select__icon[slot="start"] {
   margin-inline-end: 0.5rem !important;
 }
 .kui-select__icon svg {
@@ -94,3 +145,65 @@
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
+
+/* Loading placeholder: a static box that mirrors the closed combobox (label
+   above, a value skeleton and a dormant chevron inside a 44px control box).
+   Rendered instead of the interactive wa-select, so it needs no registration. */
+.kui-select--placeholder {
+  display: block;
+  width: 100%;
+}
+.kui-select__placeholder-label {
+  display: block;
+  margin-block-end: 0.25rem;
+  color: var(--kui-color-text);
+  font-size: var(--kui-font-s);
+  line-height: 1.4;
+}
+.kui-select__placeholder-box {
+  display: flex;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  border: 1px solid var(--kui-color-border);
+  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;
+  height: 1rem;
+  flex: none;
+  color: var(--kui-color-text-quiet);
+  transform: scale(var(--kui-disclosure-icon-scale, 0.85));
+}
+.kui-select__placeholder-chevron svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/dist/styles/skeleton.css

@@ -0,0 +1,31 @@
+.kui-skeleton {
+  --kui-skeleton-radius: var(--kui-radius-s);
+
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  height: 1em;
+  min-width: 1.5rem;
+  border-radius: var(--kui-skeleton-radius);
+  /* Deliberately unanimated: a flat, subtle fill that reads as "not yet loaded"
+     without drawing the eye or implying progress. */
+  background: color-mix(in srgb, var(--kui-color-text) 12%, transparent);
+  vertical-align: middle;
+}
+
+.kui-skeleton-lines {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-skeleton-lines .kui-skeleton {
+  height: 0.8em;
+}
+
+@media (forced-colors: active) {
+  .kui-skeleton {
+    background: GrayText;
+  }
+}

package/dist/styles/spacer.css

@@ -0,0 +1,11 @@
+.kui-spacer {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.kui-spacer[data-flex="true"] {
+  flex: 1 1 auto;
+}

package/dist/styles/split-view.css

@@ -0,0 +1,35 @@
+.kui-split-view {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--kui-color-surface);
+}
+
+/* The list pane; when not resizable it takes an intrinsic column and the detail
+   grows to fill. A resizable list is sized by ResizableRegion instead. */
+.kui-split-view__list {
+  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);
+}
+
+.kui-split-view > .kui-resizable-region .kui-split-view__list {
+  width: 100%;
+  border-inline-end: 0;
+}
+
+.kui-split-view__detail {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Compact mode is a full-bleed NavStack. */
+.kui-split-view--compact {
+  display: block;
+  height: 100%;
+}

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)
@@ -52,7 +60,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 +94,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 +114,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"] {
@@ -135,7 +151,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);
@@ -168,6 +200,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;
+  }
 }