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

package/dist/styles/components/typography/text/text.css

@@ -45,6 +45,42 @@ span.kui-text[data-wrap="truncate"] {
   max-width: 100%;
 }
 
+/* Tail-preserving truncation: the clip box runs right to left so its ellipsis
+   lands at the start, while the isolated left-to-right run keeps the text's
+   own order and punctuation. Short text that fits stays left-aligned. */
+.kui-text__truncate-start {
+  display: block;
+  overflow: hidden;
+  direction: rtl;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Middle truncation: the head shrinks to an ellipsis while the kept suffix
+   (the last path segment) stays whole. Pre keeps a space at the split. */
+.kui-text__truncate-middle {
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.kui-text__truncate-head,
+.kui-text__truncate-tail {
+  white-space: pre;
+}
+
+.kui-text__truncate-head {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-text__truncate-tail {
+  flex: 0 0 auto;
+}
+
 .kui-text__clamp {
   display: -webkit-box;
   overflow: hidden;
@@ -89,6 +125,32 @@ span.kui-text[data-wrap="truncate"] {
   line-height: 1.2;
 }
 
+/* Inline alignment. The truncation boxes carry their own direction or flex
+   layout, so each aligns its single line explicitly. */
+.kui-text[data-align="center"] {
+  text-align: center;
+}
+
+.kui-text[data-align="end"] {
+  text-align: end;
+}
+
+.kui-text[data-align="center"] > .kui-text__truncate-start {
+  text-align: center;
+}
+
+.kui-text[data-align="end"] > .kui-text__truncate-start {
+  text-align: right;
+}
+
+.kui-text[data-align="center"] > .kui-text__truncate-middle {
+  justify-content: center;
+}
+
+.kui-text[data-align="end"] > .kui-text__truncate-middle {
+  justify-content: flex-end;
+}
+
 span.kui-text {
   margin: 0;
   border: 0;

package/dist/styles/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/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/corner-status.css

@@ -0,0 +1,60 @@
+/* The host only places the stack: the composed banners own their fill,
+   border, and padding. A native popover's UA box (inset 0, auto margin,
+   border, padding, Canvas background, scrolling) is reset so the stack sizes
+   to its banners in the chosen corner. Stacked banners share the widest
+   banner's width, so a stack reads as one aligned column. */
+.kui-corner-status {
+  --_kui-corner-status-gutter: var(
+    --kui-corner-status-gutter,
+    var(--kui-space-m)
+  );
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: var(--kui-space-xs);
+  width: max-content;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  color: inherit;
+  background: transparent;
+}
+.kui-corner-status[data-presentation="overlay"] {
+  position: fixed;
+  z-index: var(--kui-corner-status-z-index, 1000);
+  inset: auto;
+  max-width: calc(
+    100vw - 2 * var(--_kui-corner-status-gutter) -
+      var(--kui-safe-area-inline-start) - var(--kui-safe-area-inline-end)
+  );
+}
+/* A browser with the Popover API hides the host until wireCornerStatus opens
+   it; without the API the fixed host simply shows. */
+.kui-corner-status[data-presentation="overlay"][popover]:not(:popover-open) {
+  display: none;
+}
+.kui-corner-status[data-placement^="top"] {
+  inset-block-start: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-block-start)
+  );
+}
+.kui-corner-status[data-placement^="bottom"] {
+  inset-block-end: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-block-end)
+  );
+}
+.kui-corner-status[data-placement$="-start"] {
+  inset-inline-start: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-inline-start)
+  );
+}
+.kui-corner-status[data-placement$="-end"] {
+  inset-inline-end: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-inline-end)
+  );
+}
+.kui-corner-status[data-presentation="embedded"] {
+  position: static;
+}

package/dist/styles/document.css

@@ -22,6 +22,18 @@ body {
   line-height: 1.45;
 }
 
+/* Opt-in viewport lock for a full-viewport application shell: the dynamic
+   viewport height keeps mobile browser toolbars and the on-screen keyboard
+   from leaving the root taller than the visible area, and clipping (not
+   hidden overflow) leaves the document with no scroll container, so only the
+   shell's Panes scroll. The mount container must be a direct child of body. */
+html:has(> body > .kui-app-root[data-viewport="locked"]),
+body:has(> .kui-app-root[data-viewport="locked"]),
+body > .kui-app-root[data-viewport="locked"] {
+  height: 100dvh;
+  overflow: clip;
+}
+
 :where(button, input, select, textarea, th, td) {
   font-family: inherit;
   font-size: inherit;
@@ -31,3 +43,56 @@ body {
 :where(a) {
   color: var(--kui-color-text-link);
 }
+
+/* Semantic cursors for native controls, which browsers draw with the default
+   arrow. Zero specificity keeps component and application cursors in charge. */
+:where(
+  button:enabled,
+  a[href],
+  [role="button"]:not([aria-disabled="true"]),
+  summary,
+  label:has(> input:is([type="checkbox"], [type="radio"]):enabled),
+  select:enabled,
+  input:is(
+      [type="button"],
+      [type="checkbox"],
+      [type="color"],
+      [type="file"],
+      [type="radio"],
+      [type="reset"],
+      [type="submit"]
+    ):enabled
+) {
+  cursor: pointer;
+}
+
+:where(
+  button:disabled,
+  input:disabled,
+  select:disabled,
+  textarea:disabled,
+  [role="button"][aria-disabled="true"]
+) {
+  cursor: not-allowed;
+}
+
+:where(
+  textarea:enabled,
+  input:is(
+      :not([type]),
+      [type="email"],
+      [type="number"],
+      [type="password"],
+      [type="search"],
+      [type="tel"],
+      [type="text"],
+      [type="url"]
+    ):enabled
+) {
+  cursor: text;
+}
+
+/* Web Awesome keeps a pointer on a disabled button's base part. */
+:where(wa-button[disabled])::part(base) {
+  cursor: not-allowed;
+}

package/dist/styles/edge-activity-indicator.css

@@ -0,0 +1,127 @@
+/* A fixed, layout-free host at the top edge: it allocates no space and never
+   takes the pointer. Its strip and pill scale in from the edge while busy. */
+.kui-edge-activity-indicator {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-brand-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-brand-on-loud);
+  position: fixed;
+  z-index: var(--kui-edge-activity-indicator-z-index, 2147483000);
+  inset: var(--kui-safe-area-block-start, 0px) 0 auto 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.kui-edge-activity-indicator[data-inset="none"] {
+  inset-block-start: 0;
+}
+
+.kui-edge-activity-indicator[data-tone="neutral"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-neutral-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-neutral-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="pop"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-pop-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-pop-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="success"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-success-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-success-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="warning"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-warning-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-warning-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="danger"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-danger-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-danger-on-loud);
+}
+
+/* 3px bars on a 5px pitch, drawn by one gradient. A repeating wave mask (1px
+   to 4px tall, hanging from the edge) slides across them, so each bar grows
+   and shrinks slightly out of phase with its neighbor. */
+.kui-edge-activity-indicator__strip,
+.kui-edge-activity-indicator__message {
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: top center;
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+}
+
+.kui-edge-activity-indicator__strip {
+  height: 0.25rem;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--_kui-edge-activity-indicator-fill) 0 0.1875rem,
+    transparent 0.1875rem 0.3125rem
+  );
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='4' viewBox='0 0 100 4'%3E%3Cpath d='M0 0H100L100 1.00 L98 1.01 L96 1.05 L94 1.11 L92 1.19 L90 1.29 L88 1.41 L86 1.54 L84 1.70 L82 1.86 L80 2.04 L78 2.22 L76 2.41 L74 2.59 L72 2.78 L70 2.96 L68 3.14 L66 3.30 L64 3.46 L62 3.59 L60 3.71 L58 3.81 L56 3.89 L54 3.95 L52 3.99 L50 4.00 L48 3.99 L46 3.95 L44 3.89 L42 3.81 L40 3.71 L38 3.59 L36 3.46 L34 3.30 L32 3.14 L30 2.96 L28 2.78 L26 2.59 L24 2.41 L22 2.22 L20 2.04 L18 1.86 L16 1.70 L14 1.54 L12 1.41 L10 1.29 L8 1.19 L6 1.11 L4 1.05 L2 1.01 L0 1.00Z'/%3E%3C/svg%3E")
+    0 0 / 6.25rem 100% repeat-x;
+  animation: kui-edge-activity-indicator-wave 1s linear infinite paused;
+}
+
+.kui-edge-activity-indicator[data-busy="true"]
+  > .kui-edge-activity-indicator__strip {
+  opacity: 1;
+  transform: scaleY(1);
+  animation-play-state: running;
+}
+
+@keyframes kui-edge-activity-indicator-wave {
+  to {
+    mask-position: 6.25rem 0;
+  }
+}
+
+/* The status pill hangs centered from the edge, over the strip. */
+.kui-edge-activity-indicator__message {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  max-width: calc(100vw - 2 * var(--kui-space-m));
+  padding: 0.125rem var(--kui-space-s);
+  overflow: hidden;
+  border-radius: 0 0 0.5rem 0.5rem;
+  color: var(--_kui-edge-activity-indicator-on);
+  background: var(--_kui-edge-activity-indicator-fill);
+  font-size: var(--kui-font-2xs);
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translateX(-50%) scaleY(0);
+}
+
+.kui-edge-activity-indicator__message[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(-50%) scaleY(1);
+}
+
+:dir(rtl) .kui-edge-activity-indicator__message {
+  transform: translateX(50%) scaleY(0);
+}
+:dir(rtl) .kui-edge-activity-indicator__message[data-visible="true"] {
+  transform: translateX(50%) scaleY(1);
+}
+
+/* Reduced motion: no wave and no scale; the strip and pill only fade. */
+@media (prefers-reduced-motion: reduce) {
+  .kui-edge-activity-indicator__strip,
+  .kui-edge-activity-indicator__message {
+    transition: opacity 200ms ease;
+  }
+  .kui-edge-activity-indicator__strip,
+  .kui-edge-activity-indicator[data-busy="true"]
+    > .kui-edge-activity-indicator__strip {
+    mask: none;
+    transform: none;
+    animation: none;
+  }
+  .kui-edge-activity-indicator__message,
+  .kui-edge-activity-indicator__message[data-visible="true"] {
+    transform: translateX(-50%);
+  }
+  :dir(rtl) .kui-edge-activity-indicator__message,
+  :dir(rtl) .kui-edge-activity-indicator__message[data-visible="true"] {
+    transform: translateX(50%);
+  }
+}

package/dist/styles/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/foundation.css

@@ -131,6 +131,14 @@
       rgb(228.157895 228.157895 255 / 0.07451)
     )
   );
+  /* The sunken surface: a fine monochrome grain over the lowered color. The
+     tile is generated once per page by the first sunken surface that renders
+     (ensureSunkenTexture); set --kui-sunken-texture to none at :root for a
+     flat lowered surface, or to another image. */
+  --kui-sunken-texture: var(--_kui-sunken-texture-generated, none);
+  --kui-sunken-surface:
+    var(--kui-sunken-texture) 0 0 / 100px 100px repeat,
+    var(--kui-color-surface-lowered);
   --kui-color-text: var(--wa-color-text-normal, light-dark(#1d1d1f, #f5f5f7));
   --kui-color-text-quiet: var(
     --wa-color-text-quiet,

package/dist/styles/framed-list.css

@@ -0,0 +1,47 @@
+/* The same frame as ValueTable: content-item margin, a real 1px border, the
+   rounded radius, and a lowered (or base) fill. Rows clip to its corners. */
+.kui-framed-list {
+  --kui-framed-list-border: var(--kui-color-neutral-border-normal);
+  display: flex;
+  flex-direction: column;
+  margin-block: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--kui-framed-list-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(--kui-color-surface-lowered);
+  list-style: none;
+}
+
+.kui-framed-list[data-surface="base"] {
+  background: var(--kui-color-surface);
+}
+
+/* Each row owns the content inset and the 1px divider above it, inset to the
+   row's padding like ValueTable's separators. Its margin is reset because a
+   document or Web Awesome native stylesheet indents list items. */
+.kui-framed-list__row {
+  --_kui-framed-list-row-padding: var(--kui-layout-item-padding, 0.5rem);
+  position: relative;
+  display: grid;
+  min-width: 0;
+  margin: 0;
+  min-height: 2.75rem;
+  padding: var(--_kui-framed-list-row-padding);
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.kui-framed-list__row + .kui-framed-list__row::before {
+  position: absolute;
+  top: 0;
+  right: var(--_kui-framed-list-row-padding);
+  left: var(--_kui-framed-list-row-padding);
+  border-top: 1px solid var(--kui-framed-list-border);
+  content: "";
+}
+
+.kui-framed-list__row[data-highlighted="true"] {
+  background: var(--kui-color-brand-fill-quiet);
+}

package/dist/styles/icon-button.css

@@ -0,0 +1,22 @@
+/* Web Awesome's own icon-button geometry, for a lone LucideIcon: a square one
+   form control height on each side with the glyph centered. Web Awesome
+   applies it only to a lone wa-icon. */
+.kui-icon-button::part(base) {
+  width: var(--wa-form-control-height);
+  min-width: var(--wa-form-control-height);
+  padding: 0;
+  aspect-ratio: 1;
+  justify-content: center;
+}
+
+.kui-icon-button::part(label) {
+  display: flex;
+  justify-content: center;
+}
+
+/* Beside a field in a ListInsetControl, the square keeps its size instead of
+   growing to share the row, and lines up with the field below its label. */
+.kui-list-inset-control > .kui-icon-button {
+  flex: none;
+  align-self: flex-end;
+}