@kerfjs/ui 5.0.0-beta.95 → 5.0.0-beta.96

package/dist/styles/components/forms/combobox/combobox.css

@@ -0,0 +1,113 @@
+/* A field label, the themed input with its listbox, and an optional hint,
+   aligned like a Web Awesome form field: label and hint sit on the value's
+   text column (1px border + 8px padding). */
+.kui-combobox {
+  display: grid;
+  min-width: 0;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-combobox__label,
+.kui-combobox__hint {
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+}
+
+.kui-combobox__label {
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.kui-combobox__hint {
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+}
+
+.kui-combobox__control {
+  position: relative;
+  min-width: 0;
+}
+
+/* The same chrome as a themed wa-input: 44px, 1px border, 8px inset. */
+.kui-combobox__input {
+  width: 100%;
+  min-width: 0;
+  height: 2.75rem;
+  margin: 0;
+  padding: 0 var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  font: inherit;
+  font-size: var(--kui-font-s);
+}
+
+.kui-combobox__input::placeholder {
+  color: var(--kui-color-text-quiet);
+}
+
+.kui-combobox__input:focus-visible {
+  border-color: var(--kui-color-text-link);
+  outline: none;
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+.kui-combobox[data-disabled="true"] {
+  opacity: 0.55;
+}
+
+/* A touch field below 16px makes iOS magnify the page on focus. */
+@media (hover: none) and (pointer: coarse) {
+  .kui-combobox__input {
+    font-size: max(16px, var(--kui-font-s));
+  }
+}
+
+/* The suggestion list drops below the field over the content that follows. */
+.kui-combobox__listbox {
+  position: absolute;
+  z-index: var(--kui-combobox-z-index, 20);
+  inset: calc(100% + var(--kui-space-2xs)) 0 auto;
+  max-height: 15rem;
+  margin: 0;
+  padding: var(--kui-space-2xs);
+  overflow-y: auto;
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+  list-style: none;
+}
+
+.kui-combobox__listbox[hidden] {
+  display: none;
+}
+
+.kui-combobox__option {
+  margin: 0;
+  padding: var(--kui-space-xs);
+  border-radius: max(
+    0px,
+    calc(var(--kui-layout-rounded-radius, 0.75rem) - var(--kui-space-2xs))
+  );
+  color: var(--kui-color-text);
+  cursor: pointer;
+  font-size: var(--kui-font-s);
+  overflow-wrap: anywhere;
+}
+
+.kui-combobox__option:hover,
+.kui-combobox__option[aria-selected="true"] {
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+.kui-combobox__option[data-create] {
+  color: var(--kui-color-text-link);
+}

package/dist/styles/components/forms/file-picker/file-picker.css

@@ -0,0 +1,81 @@
+/* The native file input stays inside each label for activation, keyboard
+   focus, and form submission, visually hidden but accessible. */
+.kui-file-picker__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.kui-file-picker__icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+}
+
+/* A compact, link-toned browse trigger. */
+.kui-file-picker[data-presentation="trigger"] {
+  position: relative;
+  display: inline-flex;
+  min-height: 2rem;
+  padding: 0 var(--kui-space-xs);
+  border-radius: var(--kui-radius-pill);
+  color: var(--kui-color-text-link);
+  cursor: pointer;
+  align-items: center;
+  gap: var(--kui-space-2xs);
+  font-size: var(--kui-font-xs);
+  font-weight: var(--kui-font-weight-semibold);
+}
+
+.kui-file-picker[data-presentation="trigger"]:hover {
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+/* A dashed drop target with content-item margins, highlighted on hover and
+   while files are dragged over it. */
+.kui-file-picker[data-presentation="drop-zone"] {
+  position: relative;
+  display: grid;
+  min-height: 5rem;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: var(--kui-space-s);
+  box-sizing: border-box;
+  border: 1px dashed var(--kui-color-neutral-border-loud);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-color-neutral-on-quiet);
+  cursor: pointer;
+  place-items: center;
+  align-content: center;
+  gap: var(--kui-space-2xs);
+  font-size: var(--kui-font-xs);
+  text-align: center;
+}
+
+.kui-file-picker[data-presentation="drop-zone"]:hover,
+.kui-file-picker[data-presentation="drop-zone"][data-dragging="true"] {
+  border-color: var(--kui-color-text-link);
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+.kui-file-picker__title {
+  color: var(--kui-color-text);
+}
+
+.kui-file-picker__detail {
+  font-size: var(--kui-font-2xs);
+}
+
+/* Keyboard focus lands on the hidden input; the visible control shows it. */
+.kui-file-picker:has(> .kui-file-picker__input:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+.kui-file-picker[data-disabled="true"] {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}

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

@@ -284,12 +284,23 @@
      no-grow / may-shrink behavior a toolbar row wants without leaking the width
      into the cross axis. */
   flex: 0 1 auto;
+  /* A grow search group animates the open/close itself and sets this duration
+     to 0s: the field is the group's width on every frame instead of running a
+     second, lagging width transition that left an empty band beside a wrapped
+     query (KF-50K0JM). */
   transition:
-    width 0.25s ease,
+    width var(--_kui-toolbar-group-grow-search-width-duration, 0.25s) ease,
     background-color 0.2s ease,
     border-color 0.2s ease;
 }
 
+/* While a grow search group is still narrower than its basis, keep the
+   basis-wide layout it provides; the group clips the field and reveals the
+   query instead of re-wrapping it every frame. Elsewhere this is 0px. */
+.kui-token-search[data-collapsible="true"][data-expanded="true"] {
+  min-width: var(--_kui-toolbar-group-grow-search-min-width, 0px);
+}
+
 .kui-token-search[data-collapsible="true"][data-expanded="true"][data-fill="true"] {
   width: 100%;
   flex: 1 1 auto;

package/dist/styles/components/layout/column-track/column-track.css

@@ -0,0 +1,57 @@
+/* The track is the sideways scroll owner and fills its parent's height; the
+   columns sit flush in one row and own their insets and vertical scrolling. */
+.kui-column-track {
+  --_kui-column-track-min-width: 15.625rem;
+  --_kui-column-track-peek: 1.5rem;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding-inline: var(--kui-layout-inline-margin, 0.5rem);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-sizing: border-box;
+  overscroll-behavior-x: contain;
+}
+
+/* Equal columns that never shrink below the minimum: a narrow track scrolls
+   instead of crushing them. */
+.kui-column-track__columns {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  grid-auto-columns: minmax(var(--_kui-column-track-min-width), 1fr);
+  grid-auto-flow: column;
+  grid-template-rows: minmax(0, 1fr);
+}
+
+/* Paged: each column is nearly the visible width so the next one peeks in,
+   and mandatory snapping settles a swipe or momentum scroll on a column
+   start. Trailing room lets the last column snap to the leading inset. */
+.kui-column-track[data-layout="paged"] {
+  container-type: inline-size;
+  scroll-behavior: smooth;
+  scroll-padding-inline: var(--kui-layout-inline-margin, 0.5rem);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.kui-column-track[data-layout="paged"]::-webkit-scrollbar {
+  display: none;
+}
+
+.kui-column-track[data-layout="paged"] > .kui-column-track__columns {
+  width: max-content;
+  padding-inline-end: var(--_kui-column-track-peek);
+  grid-auto-columns: calc(100cqi - var(--_kui-column-track-peek));
+}
+
+.kui-column-track[data-layout="paged"] > .kui-column-track__columns > * {
+  scroll-snap-align: start;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-column-track[data-layout="paged"] {
+    scroll-behavior: auto;
+  }
+}

package/dist/styles/components/layout/content-swap/content-swap.css

@@ -0,0 +1,154 @@
+/* Both sides share one grid cell, so the region keeps the active side's
+   height; the inactive side is taken out of flow, clipped, and hidden once its
+   exit animation ends (each keyframe keeps it visible while it runs). */
+.kui-content-swap {
+  --_kui-content-swap-dir: 1;
+  --_kui-content-swap-duration: 280ms;
+  position: relative;
+  display: grid;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.kui-content-swap:dir(rtl) {
+  --_kui-content-swap-dir: -1;
+}
+
+.kui-content-swap[data-fill="true"] {
+  width: 100%;
+}
+
+.kui-content-swap__side {
+  min-width: 0;
+  grid-area: 1 / 1;
+}
+
+.kui-content-swap__side[data-active="false"] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Motion runs only when the viewer has not asked for reduced motion. */
+@media (prefers-reduced-motion: no-preference) {
+  /* Push forward: a leaves toward the start, b arrives from the end. */
+  .kui-content-swap[data-transition="push"][data-active-side="b"][data-direction="forward"]
+    > [data-side="a"],
+  .kui-content-swap[data-transition="push"][data-active-side="a"][data-direction="forward"]
+    > [data-side="b"] {
+    animation: kui-content-swap-out-start var(--_kui-content-swap-duration)
+      cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  .kui-content-swap[data-transition="push"][data-active-side="b"][data-direction="forward"]
+    > [data-side="b"],
+  .kui-content-swap[data-transition="push"][data-active-side="a"][data-direction="forward"]
+    > [data-side="a"] {
+    animation: kui-content-swap-in-end var(--_kui-content-swap-duration)
+      cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* Push backward: the mirror image. */
+  .kui-content-swap[data-transition="push"][data-active-side="a"][data-direction="backward"]
+    > [data-side="b"],
+  .kui-content-swap[data-transition="push"][data-active-side="b"][data-direction="backward"]
+    > [data-side="a"] {
+    animation: kui-content-swap-out-end var(--_kui-content-swap-duration)
+      cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  .kui-content-swap[data-transition="push"][data-active-side="a"][data-direction="backward"]
+    > [data-side="a"],
+  .kui-content-swap[data-transition="push"][data-active-side="b"][data-direction="backward"]
+    > [data-side="b"] {
+    animation: kui-content-swap-in-start var(--_kui-content-swap-duration)
+      cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .kui-content-swap[data-transition="crossfade"]
+    > .kui-content-swap__side[data-active="true"] {
+    animation: kui-content-swap-fade-in 200ms ease-out;
+  }
+  .kui-content-swap[data-transition="crossfade"]
+    > .kui-content-swap__side[data-active="false"] {
+    animation: kui-content-swap-fade-out 200ms ease-out;
+  }
+}
+
+@keyframes kui-content-swap-in-end {
+  from {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(calc(100% * var(--_kui-content-swap-dir)));
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes kui-content-swap-in-start {
+  from {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(calc(-100% * var(--_kui-content-swap-dir)));
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes kui-content-swap-out-start {
+  from {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(calc(-100% * var(--_kui-content-swap-dir)));
+  }
+}
+@keyframes kui-content-swap-out-end {
+  from {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(calc(100% * var(--_kui-content-swap-dir)));
+  }
+}
+@keyframes kui-content-swap-fade-in {
+  from {
+    visibility: visible;
+    opacity: 0;
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+@keyframes kui-content-swap-fade-out {
+  from {
+    visibility: visible;
+    opacity: 1;
+  }
+  to {
+    visibility: visible;
+    opacity: 0;
+  }
+}
+
+/* Reduced motion: no slide; a push or crossfade swaps with a short fade. */
+@media (prefers-reduced-motion: reduce) {
+  .kui-content-swap:is([data-transition="push"], [data-transition="crossfade"])
+    > .kui-content-swap__side[data-active="true"] {
+    animation: kui-content-swap-fade-in 120ms ease-out;
+  }
+}

package/dist/styles/components/layout/pane/pane.css

@@ -44,17 +44,11 @@
    Fixed chrome leaves the content slot scrolling; auto chrome lets the Pane
    root scroll in its short mode, while its content remains transparent. */
 .kui-pane[data-appearance="sunken"] > .kui-pane__content {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
 }
 
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"] {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
 }
 
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]

package/dist/styles/components/layout/workbench/workbench.css

@@ -135,10 +135,7 @@
    separator handle remains fixed. Paint only that owner. */
 .kui-workbench__main[data-appearance="sunken"],
 :is(.kui-workbench__rail, .kui-workbench__drawer)[data-appearance="sunken"] {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
 }
 
 :is(
@@ -153,10 +150,7 @@
     .kui-workbench__drawer
   )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"]
   > .kui-workbench__panel-content {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
 }
 
 .kui-workbench__main[data-drawer-inline-expanded="true"] {

package/dist/styles/components/navigation/tab-navigator/tab-navigator.css

@@ -52,10 +52,7 @@
 }
 
 .kui-tab-scaffold__scene[data-appearance="sunken"] {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
 }
 
 /* A scene is its region's scroll owner, so its top inset is padding inside

package/dist/styles/components/surfaces/content-item/content-item.css

@@ -71,6 +71,24 @@
   --kui-content-item-foreground: var(--kui-color-warning-on-fill);
 }
 
+.kui-content-item[data-appearance="brand-loud"] {
+  --kui-content-item-border: var(--kui-color-brand-border-loud);
+  --kui-content-item-background: var(--kui-color-brand-fill-loud);
+  --kui-content-item-foreground: var(--kui-color-brand-on-loud);
+}
+
+/* Chat bubble: the item shrinks to its content up to 80% of the row and sits
+   at the start or end of the line; long unbroken text wraps inside it. */
+.kui-content-item[data-bubble] {
+  width: fit-content;
+  max-width: 80%;
+  overflow-wrap: anywhere;
+}
+
+.kui-content-item[data-bubble="end"] {
+  margin-inline-start: auto;
+}
+
 .kui-content-item[data-appearance="danger"] {
   --kui-content-item-border: var(--kui-color-danger-border-quiet);
   --kui-content-item-background: var(--kui-color-danger-fill-quiet);

package/dist/styles/components/surfaces/sunken-panel/sunken-panel.css

@@ -12,10 +12,7 @@
     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);
 }

package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css

@@ -62,6 +62,28 @@
     )
   );
 }
+.kui-dialog-surface[data-presentation="modal"][data-height]
+  > wa-dialog::part(dialog) {
+  --_kui-dialog-surface-resolved-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+  height: var(--_kui-dialog-surface-resolved-height);
+  max-height: var(--_kui-dialog-surface-resolved-height);
+}
+/* One child owns the body: it gets the body's whole height and its own
+   scrolling (the body itself no longer scrolls). */
+.kui-dialog-surface[data-body-layout="fill"] > wa-dialog::part(body) {
+  display: grid;
+  overflow: hidden;
+  grid-template-rows: minmax(0, 1fr);
+}
 .kui-dialog-surface[data-body-inset="none"] > wa-dialog::part(body),
 .kui-dialog-surface[data-footer-inset="none"] > wa-dialog::part(footer) {
   padding: 0;
@@ -92,6 +114,103 @@
   max-height: 100dvh;
   border-radius: 0;
 }
+/* PopoverDialogSurface: the dialog chrome and bounded geometry for a native
+   popover="auto" surface (non-modal, light dismiss) or the same surface in
+   flow. The UA popover rules supply the centered top-layer placement. */
+.kui-popover-dialog-surface {
+  --_kui-popover-dialog-surface-width: 35rem;
+  --_kui-popover-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-popover-dialog-surface-gutter, 1rem)
+  );
+  --_kui-popover-dialog-surface-available-height: calc(
+    100dvh - var(--_kui-popover-dialog-surface-resolved-gutter) -
+      var(--_kui-popover-dialog-surface-resolved-gutter)
+  );
+  box-sizing: border-box;
+  width: min(
+    var(
+      --_kui-popover-dialog-surface-preferred-width,
+      var(--_kui-popover-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-popover-dialog-surface-resolved-gutter) -
+          var(--_kui-popover-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+  max-height: max(0px, var(--_kui-popover-dialog-surface-available-height));
+  padding: 0;
+  overflow: auto;
+  color: var(--kui-color-text);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-l);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+}
+.kui-popover-dialog-surface[data-size="small"] {
+  --_kui-popover-dialog-surface-width: 25rem;
+}
+.kui-popover-dialog-surface[data-size="large"] {
+  --_kui-popover-dialog-surface-width: 50rem;
+}
+.kui-popover-dialog-surface[data-max-height] {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-popover-dialog-surface-max-height, 100dvh),
+      var(--_kui-popover-dialog-surface-available-height)
+    )
+  );
+}
+.kui-popover-dialog-surface[data-height] {
+  height: max(
+    0px,
+    min(
+      var(--_kui-popover-dialog-surface-height, 100dvh),
+      var(--_kui-popover-dialog-surface-available-height)
+    )
+  );
+  max-height: none;
+}
+/* Centered in the top layer whatever margins or item alignment the host
+   sets: an absolutely positioned box's auto self-alignment otherwise
+   follows its parent's justify-items. */
+.kui-popover-dialog-surface[data-presentation="overlay"]:popover-open {
+  inset: 0;
+  margin: auto;
+  place-self: center;
+}
+.kui-popover-dialog-surface::backdrop {
+  background: var(
+    --wa-color-overlay-modal,
+    light-dark(rgb(29 29 31 / 0.34), rgb(0 0 0 / 0.6))
+  );
+}
+/* Only an open overlay lays out, so a closed one stays hidden. One filling
+   child takes the whole surface and owns its scrolling. */
+.kui-popover-dialog-surface[data-body-layout="fill"]:is(
+    :popover-open,
+    [data-presentation="embedded"]
+  ) {
+  display: grid;
+  overflow: hidden;
+  grid-template-rows: minmax(0, 1fr);
+}
+/* In flow for a catalog or inline use: the same surface without the top
+   layer, never wider than its container. */
+.kui-popover-dialog-surface[data-presentation="embedded"] {
+  position: relative;
+  inset: auto;
+  /* The available inline space, after any margin the container gives it. */
+  max-width: 100%;
+  max-width: -webkit-fill-available;
+  max-width: -moz-available;
+  max-width: stretch;
+  margin: 0;
+}
 .kui-popup-surface {
   display: inline-flex;
 }