@kerfjs/ui 5.0.0-beta.98 → 5.0.0-beta.99

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

@@ -96,6 +96,185 @@
 .kui-dialog-surface[data-footer-inset="comfortable"] > wa-dialog::part(footer) {
   padding: var(--kui-wa-container-inset, 1rem);
 }
+/* Fixed rows above one filling row: the leading children keep their natural
+   height and the last unslotted child (the light-DOM children are the body
+   slot's flex items) takes the rest and owns its scrolling. */
+.kui-dialog-surface[data-body-layout="fill-last"] > wa-dialog::part(body) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kui-dialog-surface[data-body-layout="fill-last"] > wa-dialog > :not([slot]) {
+  flex: none;
+}
+.kui-dialog-surface[data-body-layout="fill-last"]
+  > wa-dialog
+  > :nth-last-child(1 of :not([slot])) {
+  flex: 1 1 0;
+  min-block-size: 0;
+}
+/* A floating footer lies over the body's block end, inset from the panel's
+   inline and block-end edges; the top-layer panel is its positioning
+   context. The register publishes the footer's measured block size on the
+   panel, and the body reserves it (plus the offset) after its own inset, so
+   flowing content scrolls beneath the footer and a filling child's scrollport
+   ends above it: the last content is never hidden. */
+.kui-dialog-surface[data-footer-presentation="floating"] > wa-dialog {
+  --_kui-dialog-surface-footer-resolved-offset: max(
+    0px,
+    var(
+      --_kui-dialog-surface-footer-offset,
+      var(--kui-wa-container-inset, 1rem)
+    )
+  );
+}
+.kui-dialog-surface[data-footer-presentation="floating"]
+  > wa-dialog::part(footer) {
+  position: absolute;
+  inset-inline: var(--_kui-dialog-surface-footer-resolved-offset);
+  inset-block-end: var(--_kui-dialog-surface-footer-resolved-offset);
+  z-index: 1;
+  background: transparent;
+}
+.kui-dialog-surface[data-footer-presentation="floating"]
+  > wa-dialog::part(body) {
+  --_kui-dialog-surface-footer-clearance: calc(
+    var(--_kui-dialog-surface-footer-block-size, 0px) +
+      var(--_kui-dialog-surface-footer-resolved-offset)
+  );
+  scroll-padding-block-end: var(--_kui-dialog-surface-footer-clearance);
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="none"]
+  > wa-dialog::part(body) {
+  padding-block-end: var(--_kui-dialog-surface-footer-clearance);
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="compact"]
+  > wa-dialog::part(body) {
+  padding-block-end: calc(
+    var(--kui-wa-surface-inset, 0.5rem) +
+      var(--_kui-dialog-surface-footer-clearance)
+  );
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="comfortable"]
+  > wa-dialog::part(body) {
+  padding-block-end: calc(
+    var(--kui-wa-container-inset, 1rem) +
+      var(--_kui-dialog-surface-footer-clearance)
+  );
+}
+/* Scroll clearance. A dialog body starts a new scroll context, so it clears
+   any `--kui-scroll-clearance-*` a page region published around the dialog.
+   With a floating footer over a filling child that opts into block-end
+   `scrollClearance` (a transcript List or Pane), the body stops reserving the
+   footer below that child: the child reaches the panel's block end, the body
+   publishes the footer's clearance for it, and the child adds it inside its
+   own scroll area, so content scrolls visibly beneath the transparent footer
+   while its last item still comes to rest above it. */
+.kui-dialog-surface > wa-dialog::part(body) {
+  --kui-scroll-clearance-block-start: 0px;
+  --kui-scroll-clearance-block-end: 0px;
+}
+.kui-dialog-surface[data-footer-presentation="floating"]:is(
+    [data-body-layout="fill"],
+    [data-body-layout="fill-last"]
+  )
+  > wa-dialog:has(
+    > :nth-last-child(1 of :not([slot])):is(
+        [data-scroll-clearance="block-end"],
+        [data-scroll-clearance="both"]
+      )
+  )::part(body) {
+  --kui-scroll-clearance-block-end: var(--_kui-dialog-surface-footer-clearance);
+  padding-block-end: 0;
+}
+/* A floating header lies over the body's block-start edge on the
+   translucent chrome material (opaque under reduced transparency, increased
+   contrast, or without backdrop-filter; a system surface in forced colors).
+   The register publishes the header's measured block size on the panel; the
+   header gives that height back as a negative block-end margin, so the body
+   starts at the panel's block-start edge beneath it, and the body reserves it
+   again before its own inset (with a matching scroll-padding): flowing
+   content rests below the title bar and scrolls beneath it. Unmeasured, the
+   size resolves to 0px and the header stays docked. */
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog::part(header) {
+  position: relative;
+  z-index: 1;
+  margin-block-end: calc(
+    -1 * var(--_kui-dialog-surface-header-block-size, 0px)
+  );
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material-raised);
+  box-shadow: inset 0 -1px
+    var(--_kui-dialog-surface-header-divider, transparent);
+}
+/* The floating header's divider is scroll state, as on a Pane's overlay
+   header: the register publishes `--_kui-dialog-surface-header-divider` on
+   the panel (as this color) only while the body, or a filling child that
+   reaches beneath the header, is scrolled away from its top. The line is an
+   inset shadow, so showing it never moves the header or the content. */
+.kui-dialog-surface[data-header-presentation="floating"] > wa-dialog {
+  --_kui-dialog-surface-header-divider-color: var(
+    --kui-color-neutral-border-normal
+  );
+}
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog::part(body) {
+  --_kui-dialog-surface-header-clearance: var(
+    --_kui-dialog-surface-header-block-size,
+    0px
+  );
+  scroll-padding-block-start: var(--_kui-dialog-surface-header-clearance);
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="none"]
+  > wa-dialog::part(body) {
+  padding-block-start: var(--_kui-dialog-surface-header-clearance);
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="compact"]
+  > wa-dialog::part(body) {
+  padding-block-start: calc(
+    var(--kui-wa-surface-inset, 0.5rem) +
+      var(--_kui-dialog-surface-header-clearance)
+  );
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="comfortable"]
+  > wa-dialog::part(body) {
+  padding-block-start: calc(
+    var(--kui-wa-container-inset, 1rem) +
+      var(--_kui-dialog-surface-header-clearance)
+  );
+}
+/* A filling child that is the body's only child and opts into block-start
+   `scrollClearance` reaches the panel's block-start edge beneath the floating
+   header: the body publishes the header's clearance for it, and the child
+   adds it inside its own scroll area, so content scrolls visibly beneath the
+   title bar while its first item still rests below it. Leading children of
+   `fill-last` keep the body's reservation instead. */
+.kui-dialog-surface[data-header-presentation="floating"]:is(
+    [data-body-layout="fill"],
+    [data-body-layout="fill-last"]
+  )
+  > wa-dialog:has(
+    > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])):is(
+        [data-scroll-clearance="block-start"],
+        [data-scroll-clearance="both"]
+      )
+  )::part(body) {
+  --kui-scroll-clearance-block-start: var(
+    --_kui-dialog-surface-header-clearance
+  );
+  padding-block-start: 0;
+}
+@media (forced-colors: active) {
+  .kui-dialog-surface[data-header-presentation="floating"]
+    > wa-dialog::part(header) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+}
 .kui-dialog-surface[data-presentation="side-sheet"] > wa-dialog::part(dialog) {
   width: min(30rem, 100vw);
   max-width: 100vw;
@@ -199,6 +378,22 @@
   overflow: hidden;
   grid-template-rows: minmax(0, 1fr);
 }
+/* Fixed rows above one filling last child, which owns its scrolling. */
+.kui-popover-dialog-surface[data-body-layout="fill-last"]:is(
+    :popover-open,
+    [data-presentation="embedded"]
+  ) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kui-popover-dialog-surface[data-body-layout="fill-last"] > * {
+  flex: none;
+}
+.kui-popover-dialog-surface[data-body-layout="fill-last"] > :last-child {
+  flex: 1 1 0;
+  min-block-size: 0;
+}
 /* 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"] {

package/dist/styles/composer.css

@@ -0,0 +1,100 @@
+/* A chat or prompt composer: a raised frame (surface-raised, the standard
+   neutral border, large radius, shadow-l) whose border turns brand while
+   focus is within. It holds a borderless message field that sizes to its
+   content between the min and max row counts, above an action row with a
+   quiet hint and trailing actions. The 8px padding puts the field's text on
+   the 17px text column when the composer sits 8px from a container edge. */
+
+.kui-composer {
+  --_kui-composer-min-rows: 1;
+  --_kui-composer-max-rows: 8;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  /* Fill the container's inline size: a content-sized field would otherwise
+     shrink the frame to its text. */
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-l);
+  color: var(--kui-color-neutral-on-normal);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+}
+
+/* The frame is the field's boundary, so it carries the focus state. */
+.kui-composer:focus-within {
+  border-color: var(--kui-color-brand-border-loud);
+}
+
+.kui-composer__field {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.25rem 0;
+  border: 0;
+  outline: none;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-size: var(--kui-font-m, inherit);
+  line-height: var(--wa-line-height-normal, 1.6);
+  resize: none;
+  field-sizing: content;
+  min-height: calc(var(--_kui-composer-min-rows) * 1lh + 0.5rem);
+  max-height: calc(var(--_kui-composer-max-rows) * 1lh + 0.5rem);
+  overflow-y: auto;
+}
+
+/* Engines without content sizing keep a three-line field, clamped to the
+   row bounds, that scrolls once the message is longer. */
+@supports not (field-sizing: content) {
+  .kui-composer__field {
+    height: calc(
+      clamp(var(--_kui-composer-min-rows), 3, var(--_kui-composer-max-rows)) *
+        1lh + 0.5rem
+    );
+  }
+}
+
+.kui-composer__field::placeholder {
+  color: var(--kui-color-neutral-on-quiet);
+  opacity: 1;
+}
+
+.kui-composer__field:disabled {
+  color: var(--kui-color-neutral-on-quiet);
+  cursor: not-allowed;
+}
+
+.kui-composer__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  min-width: 0;
+}
+
+.kui-composer__hint {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.kui-composer__trailing {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .kui-composer:focus-within {
+    border-color: Highlight;
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+}

package/dist/styles/foundation.css

@@ -165,6 +165,28 @@
   --kui-sunken-surface:
     var(--kui-sunken-texture) 0 0 / 100px 100px repeat,
     var(--kui-color-surface-lowered);
+  /* Translucent chrome material: a bar laid over scrolling content (a Pane's
+     overlay header) lets the content show through, blurred, beneath it.
+     80% of the surface keeps --kui-color-text at AA over any content
+     (about 10:1 light and 8:1 dark against a black or white backdrop). It
+     resolves to the opaque surface under prefers-reduced-transparency or
+     prefers-contrast: more, and where backdrop-filter is unsupported
+     (below). */
+  --kui-chrome-material: color-mix(
+    in srgb,
+    var(--kui-color-surface) 80%,
+    transparent
+  );
+  /* The same material over a raised surface (a dialog panel's floating
+     header): 80% of surface-raised keeps --kui-color-text at AA over any
+     content (about 10:1 light and 6.7:1 dark against a black or white
+     backdrop), with the same opaque fallbacks. */
+  --kui-chrome-material-raised: color-mix(
+    in srgb,
+    var(--kui-color-surface-raised) 80%,
+    transparent
+  );
+  --kui-chrome-material-filter: blur(20px) saturate(180%);
   --kui-color-text: var(--wa-color-text-normal, light-dark(#1d1d1f, #f5f5f7));
   --kui-color-text-quiet: var(
     --wa-color-text-quiet,
@@ -505,6 +527,24 @@
   --kui-safe-area-inline-end: env(safe-area-inset-left, 0px);
 }
 
+@supports not (
+  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
+) {
+  :root {
+    --kui-chrome-material: var(--kui-color-surface);
+    --kui-chrome-material-raised: var(--kui-color-surface-raised);
+    --kui-chrome-material-filter: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  :root {
+    --kui-chrome-material: var(--kui-color-surface);
+    --kui-chrome-material-raised: var(--kui-color-surface-raised);
+    --kui-chrome-material-filter: none;
+  }
+}
+
 @media (prefers-contrast: more) {
   :root {
     --kui-color-pop-fill-quiet: Canvas;

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

@@ -10,9 +10,30 @@
   --kui-list-action-row-trailing-hover-background: var(
     --kui-color-neutral-fill-normal
   );
+  /* The leading (and trailing) content inset. An inherited
+     `--kui-list-row-padding-inline` on the containing List sets it for every
+     ListItem and ListActionRow at once; the +1px wherever it is used stands in
+     for the 1px border ListItem draws and this row paints as a box-shadow, so
+     both row kinds start their leading icons on one edge. */
+  --_kui-list-action-row-padding-inline: var(
+    --kui-list-row-padding-inline,
+    var(--kui-layout-item-padding, 0.5rem)
+  );
+  /* The leading icon size, shared with ListItem through an inherited
+     `--kui-list-row-icon-size` on the containing List, so a mixed list keeps
+     its labels on one edge. It defaults to ListItem's 18px row icon. */
+  --_kui-list-action-row-icon-size: var(--kui-list-row-icon-size, 1.125rem);
+  /* The row's minimum height and the primary button's block padding follow
+     density together, so a single-line label never holds a compact row
+     taller than its minimum (the label's own minimum is the difference). */
+  --_kui-list-action-row-min-height: 2.75rem;
+  --_kui-list-action-row-padding-block: var(
+    --kui-layout-item-padding,
+    0.5rem
+  );
   display: flex;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
-  min-height: 2.75rem;
+  min-height: var(--_kui-list-action-row-min-height);
   margin-inline: var(--kui-layout-inline-margin, 0.5rem);
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   color: var(--kui-list-action-row-color);
@@ -22,12 +43,8 @@
 }
 
 .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-min-height: 2.25rem;
+  --_kui-list-action-row-padding-block: 0.25rem;
 }
 
 .kui-list-action-row[data-divider="before"],
@@ -60,9 +77,12 @@
   border-end-end-radius: 0;
 }
 
-.kui-list-action-row:not([data-placeholder="true"]):has(
-    .kui-list-action-row__primary:hover
-  ) {
+/* A selected or pressed row keeps its selected tint while hovered. */
+.kui-list-action-row:not(
+    [data-placeholder="true"],
+    [data-selected="true"],
+    [data-pressed="true"]
+  ):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);
 }
@@ -97,7 +117,7 @@
 .kui-list-action-row[data-drop-position]::after {
   position: absolute;
   z-index: 1;
-  inset-inline: var(--kui-layout-item-padding, 0.5rem);
+  inset-inline: var(--_kui-list-action-row-padding-inline);
   height: var(--kui-list-action-row-drop-indicator-width, 2px);
   border-radius: var(--kui-radius-pill);
   background: var(
@@ -119,7 +139,7 @@
 .kui-list-action-row__primary,
 .kui-list-action-row__trailing-action {
   height: auto !important;
-  min-height: 2.75rem;
+  min-height: var(--_kui-list-action-row-min-height);
   padding: 0;
   border: 0;
   appearance: none;
@@ -134,8 +154,9 @@
   display: block;
   flex: 1 1 auto;
   min-width: 2.75rem;
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  padding-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  padding-block: var(--_kui-list-action-row-padding-block);
+  padding-inline: calc(1px + var(--_kui-list-action-row-padding-inline))
+    var(--_kui-list-action-row-padding-inline);
   text-align: start;
 }
 
@@ -167,10 +188,10 @@
 .kui-list-action-row__icon {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  inset-inline-start: calc(1px + var(--_kui-list-action-row-padding-inline));
   display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--_kui-list-action-row-icon-size);
+  height: var(--_kui-list-action-row-icon-size);
   color: currentColor;
   transform: translateY(-50%);
   place-items: center;
@@ -178,15 +199,16 @@
 
 .kui-list-action-row__icon svg {
   display: block;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--_kui-list-action-row-icon-size);
+  height: var(--_kui-list-action-row-icon-size);
 }
 
 .kui-list-action-row__label {
   display: grid;
   min-width: 0;
   min-height: calc(
-    2.75rem - (2 * var(--kui-layout-item-padding, 0.5rem))
+    var(--_kui-list-action-row-min-height) -
+      (2 * var(--_kui-list-action-row-padding-block))
   );
   overflow: hidden;
   white-space: nowrap;
@@ -226,7 +248,8 @@
 
 .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)
+    var(--_kui-list-action-row-icon-size) +
+      var(--kui-layout-item-gap, 0.5rem)
   );
 }
 
@@ -244,7 +267,7 @@
 
 .kui-list-action-row[data-multiline="true"] .kui-list-action-row__icon {
   inset-block-start: calc(
-    var(--kui-layout-item-padding, 0.5rem) + (1lh / 2)
+    var(--_kui-list-action-row-padding-block) + (1lh / 2)
   );
 }
 
@@ -291,7 +314,139 @@
   height: 1rem;
 }
 
+/* A filled icon tile (`iconTile`): the leading icon sits in a 32px rounded
+   tile with an 18px glyph, 6px clear of a standard 44px row's edges (a
+   compact row is at least 42px tall) like a ListItem tile. The 6px radius
+   is concentric with the row's 12px corner at that clearance. */
+.kui-list-action-row[data-icon-tile] {
+  --_kui-list-action-row-icon-tile-size: 2rem;
+}
+
+.kui-list-action-row[data-icon-tile][data-density="compact"] {
+  --_kui-list-action-row-min-height: 2.625rem;
+}
+
+.kui-list-action-row[data-icon-tile] .kui-list-action-row__icon {
+  width: var(--_kui-list-action-row-icon-tile-size);
+  height: var(--_kui-list-action-row-icon-tile-size);
+  border-radius: var(--kui-radius-m, 0.375rem);
+  color: var(--_kui-list-action-row-icon-tile-foreground, currentColor);
+  background: var(--_kui-list-action-row-icon-tile-fill, transparent);
+  box-shadow: inset 0 0 0 1px
+    var(--_kui-list-action-row-icon-tile-border, transparent);
+}
+
+.kui-list-action-row[data-icon-tile] .kui-list-action-row__icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.kui-list-action-row[data-has-icon="true"][data-icon-tile]
+  .kui-list-action-row__label {
+  margin-inline-start: calc(
+    var(--_kui-list-action-row-icon-tile-size) +
+      var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+
+/* An application fill defaults its glyph to black or white, whichever
+   contrasts with the fill's lightness. */
+.kui-list-action-row[data-icon-tile="color"] .kui-list-action-row__icon {
+  color: var(--_kui-list-action-row-icon-tile-foreground, #fff);
+}
+
+@supports (color: oklch(from red l c h)) {
+  .kui-list-action-row[data-icon-tile="color"] .kui-list-action-row__icon {
+    color: var(
+      --_kui-list-action-row-icon-tile-foreground,
+      oklch(
+        from var(--_kui-list-action-row-icon-tile-fill)
+          clamp(0, (0.68 - l) * 1000, 1) 0 0
+      )
+    );
+  }
+}
+
+.kui-list-action-row[data-icon-tile-tone="neutral"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-neutral-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(
+    --kui-color-neutral-border-quiet
+  );
+  --_kui-list-action-row-icon-tile-foreground: var(
+    --kui-color-neutral-on-quiet
+  );
+}
+
+.kui-list-action-row[data-icon-tile-tone="brand"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-brand-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(--kui-color-brand-border-quiet);
+  --_kui-list-action-row-icon-tile-foreground: var(--kui-color-brand-on-quiet);
+}
+
+.kui-list-action-row[data-icon-tile-tone="success"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-success-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(
+    --kui-color-success-border-quiet
+  );
+  --_kui-list-action-row-icon-tile-foreground: var(
+    --kui-color-success-on-quiet
+  );
+}
+
+.kui-list-action-row[data-icon-tile-tone="warning"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-warning-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(
+    --kui-color-warning-border-quiet
+  );
+  --_kui-list-action-row-icon-tile-foreground: var(
+    --kui-color-warning-on-quiet
+  );
+}
+
+.kui-list-action-row[data-icon-tile-tone="danger"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-danger-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(--kui-color-danger-border-quiet);
+  --_kui-list-action-row-icon-tile-foreground: var(--kui-color-danger-on-quiet);
+}
+
+/* A loading row shows a tile-sized skeleton in place of the fill. */
+.kui-list-action-row[data-icon-tile][data-placeholder="true"]
+  .kui-list-action-row__icon {
+  background: transparent;
+  box-shadow: none;
+}
+
+/* A wrapped label keeps its first line centered on the tile: the tile sits
+   6px below the row's top like a single-line row's, and the label starts
+   half the difference between the tile and its line box lower. */
+.kui-list-action-row[data-icon-tile][data-multiline="true"]
+  .kui-list-action-row__primary {
+  padding-block: 0.375rem;
+}
+
+.kui-list-action-row[data-icon-tile][data-multiline="true"]
+  .kui-list-action-row__icon {
+  inset-block-start: calc(
+    0.375rem + (var(--_kui-list-action-row-icon-tile-size) / 2)
+  );
+}
+
+.kui-list-action-row[data-icon-tile][data-multiline="true"]
+  .kui-list-action-row__label {
+  box-sizing: border-box;
+  min-height: var(--_kui-list-action-row-icon-tile-size);
+  padding-block-start: max(
+    0px,
+    (var(--_kui-list-action-row-icon-tile-size) - 1lh) / 2
+  );
+}
+
 @media (forced-colors: active) {
+  .kui-list-action-row[data-icon-tile] .kui-list-action-row__icon {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
   .kui-list-action-row[data-drop-position]::after {
     background: Highlight;
     forced-color-adjust: none;