@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/styles/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/actions/floating-toolbar/floating-toolbar.css

@@ -0,0 +1,119 @@
+.kui-floating-toolbar {
+  /* Inset from the container edges: a top toolbar sits 8px in, so this floats an
+     extra 8px past that (--kui-space-m = 16px). Override the token to reposition,
+     on the toolbar or on an ancestor composition boundary. */
+  --_kui-floating-toolbar-inset: var(
+    --kui-floating-toolbar-inset,
+    var(--kui-space-m, 1rem)
+  );
+  --_kui-floating-toolbar-safe-block-start: 0px;
+  --_kui-floating-toolbar-safe-block-end: 0px;
+  --_kui-floating-toolbar-safe-inline-start: 0px;
+  --_kui-floating-toolbar-safe-inline-end: 0px;
+
+  /* Floats above the main content of its nearest positioned ancestor. z-index
+     stays low so it never covers dialogs/overlays (it is not top-layer). Forced
+     dark so the controls read as one distinct floating layer over any theme. */
+  position: absolute;
+  z-index: 4;
+  /* A layout whose open side overlay covers this toolbar's region (a
+     Workbench rail, a CollapsiblePanel, a ResizableRegion) provides its own
+     covered context to that region, and the toolbar hides — out of the tab
+     order and the accessibility tree — rather than risk painting over the
+     overlay. Any enclosing layout's covered context hides it. */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
+  display: flex;
+  color-scheme: dark;
+  align-items: center;
+  gap: var(--kui-space-xs, 0.5rem);
+}
+
+.kui-floating-toolbar[data-safe-area-insets="true"] {
+  --_kui-floating-toolbar-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-floating-toolbar-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-floating-toolbar-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-floating-toolbar-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+/* In a layout's restore corner the corner already owns the inset, so the
+   toolbar floats from the corner itself. Zero specificity: the toolbar's own
+   `inset` (or an app rule on the toolbar) still wins, while a token inherited
+   from outside the corner does not. */
+:where(
+    .kui-workbench__restore,
+    .kui-collapsible-panel__restore,
+    .kui-resizable-region__restore
+  )
+  :where(.kui-floating-toolbar) {
+  --kui-floating-toolbar-inset: 0px;
+}
+
+.kui-floating-toolbar[data-position^="bottom"] {
+  inset-block-end: calc(
+    var(
+        --kui-floating-toolbar-inset-block-end,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-block-end)
+  );
+}
+
+.kui-floating-toolbar[data-position^="top"] {
+  inset-block-start: calc(
+    var(
+        --kui-floating-toolbar-inset-block-start,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-block-start)
+  );
+}
+
+.kui-floating-toolbar[data-position$="-end"] {
+  inset-inline-end: calc(
+    var(
+        --kui-floating-toolbar-inset-inline-end,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-inline-end)
+  );
+}
+
+.kui-floating-toolbar[data-position$="-start"] {
+  inset-inline-start: calc(
+    var(
+        --kui-floating-toolbar-inset-inline-start,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-inline-start)
+  );
+}
+
+/* The centered edges span from the middle rather than an inline edge. */
+.kui-floating-toolbar[data-position="bottom"],
+.kui-floating-toolbar[data-position="top"] {
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+.kui-floating-toolbar[data-placement="inline"] {
+  position: static;
+  transform: none;
+}

package/dist/styles/components/actions/icon-button/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;
+}

package/dist/styles/components/actions/icon-toggle-button/icon-toggle-button.css

@@ -0,0 +1,83 @@
+/* The single contained ToolbarControlGroup's geometry, standalone: a 44px
+   filled, bordered control whose 2px-inset face lifts to the raised surface
+   on hover and stays raised, in the brand foreground, while pressed. */
+.kui-icon-toggle-button {
+  --_kui-icon-toggle-button-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+  --_kui-icon-toggle-button-inset: var(
+    --kui-layout-highlight-inset,
+    0.125rem
+  );
+  /* One full-size track for the face. The button sets its own track and
+     alignment because native or document button styles center content,
+     which would shrink the face to the icon. */
+  display: inline-grid;
+  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+  place-content: stretch;
+  place-items: stretch;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin: 0;
+  padding: var(--_kui-icon-toggle-button-inset);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--_kui-icon-toggle-button-radius);
+  color: var(--kui-color-neutral-on-quiet);
+  background: var(--kui-color-neutral-fill-normal);
+  cursor: pointer;
+  flex: none;
+  font: inherit;
+}
+
+.kui-icon-toggle-button[data-shape="rounded"] {
+  --_kui-icon-toggle-button-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+}
+
+.kui-icon-toggle-button__face {
+  display: grid;
+  border-radius: max(
+    0px,
+    calc(
+      var(--_kui-icon-toggle-button-radius) -
+        var(--_kui-icon-toggle-button-inset) - 1px
+    )
+  );
+  place-items: center;
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.kui-icon-toggle-button:hover:not(:disabled) > .kui-icon-toggle-button__face {
+  background: var(--kui-color-surface);
+}
+
+.kui-icon-toggle-button[aria-pressed="true"] {
+  color: var(--kui-color-brand-on-quiet);
+}
+
+.kui-icon-toggle-button[aria-pressed="true"] > .kui-icon-toggle-button__face {
+  background: var(--kui-color-surface);
+  box-shadow: var(--kui-shadow-s);
+}
+
+.kui-icon-toggle-button:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-icon-toggle-button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-icon-toggle-button__face {
+    transition: none;
+  }
+}

package/dist/styles/components/actions/popup-menu/popup-menu.css

@@ -0,0 +1,370 @@
+/* An icon-only trigger's accessible name: Web Awesome names its button from the
+   slotted content, so the label is present but visually hidden. */
+.kui-popup-menu__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+/* PopupMenu shares the Select's caret motion, surface inset, row rhythm,
+   current-row fill, and group titles from the popup-choice contract in
+   foundation.css. Checkbox items reserve a check column, and so do the
+   plain items in any level that holds one; a level without a choice keeps the
+   compact start. */
+
+/* The trigger caret turns to face the open menu, like the Select's. */
+.kui-popup-menu > wa-button::part(caret) {
+  rotate: 0deg;
+  transition: var(--_kui-popup-caret-transition);
+}
+.kui-popup-menu[open] > wa-button::part(caret) {
+  rotate: var(--_kui-popup-caret-open-rotation);
+}
+
+/* The Select's popup fades in place; Web Awesome's dropdown also scales from
+   90%. Holding the scale leaves the shared fade. */
+.kui-popup-menu::part(menu) {
+  padding: var(--_kui-popup-inset);
+  background: var(--_kui-popup-scroll-cue);
+  gap: var(--_kui-popup-row-gap);
+  scale: none !important;
+}
+
+/* A submenu capped beside its parent menu (a phone placement) scrolls with
+   the same edge cue as the menu and a Select's listbox. */
+.kui-popup-menu wa-dropdown-item::part(submenu) {
+  background: var(--_kui-popup-scroll-cue);
+}
+
+.kui-popup-menu wa-dropdown-item {
+  /* A plain command starts at the checkbox glyph's leading edge. The glyph
+     sits half a smaller-font em beyond the row's base inset; its label starts
+     after the full check column below. */
+  padding: var(--_kui-popup-row-padding-block)
+    var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
+    calc(var(--_kui-popup-row-padding-inline-start) + 0.4375em);
+}
+.kui-popup-menu wa-dropdown-item[type="checkbox"] {
+  /* Web Awesome marks every sibling checkbox-adjacent; reserve this column
+     only on items whose checked state was explicitly supplied. */
+  padding-inline-start: calc(
+    var(--_kui-popup-row-padding-inline-start) +
+      var(--_kui-popup-row-check-width)
+  );
+}
+/* Web Awesome's nested submenu owns its item host padding. Move its exposed
+   checkmark inside the panel: in flow, the checkmark and its gap advance the
+   row's content by the same check column as at the top level. */
+.kui-popup-menu
+  wa-dropdown-item[slot="submenu"][type="checkbox"]::part(checkmark) {
+  margin-inline-start: 0;
+}
+/* A plain item beside checkbox choices holds their check column with an empty
+   icon-slot spacer, at either level. Web Awesome sizes a slotted icon in its
+   smaller font and spaces it 0.75em (!important) from the next item; with
+   that gap, 1em of width equals the 1.25em checkmark plus its 0.5em gap. */
+.kui-popup-menu__check-space {
+  display: block;
+  width: 1em;
+  height: 1px;
+  flex: none;
+}
+.kui-popup-menu wa-dropdown-item::part(label) {
+  padding-block: var(--_kui-popup-row-label-padding-block);
+  line-height: var(--_kui-popup-row-label-line-height);
+}
+/* A keyboard-focused item is the menu's current row: the Select's brand fill,
+   with no second focus ring inside the open popup. */
+.kui-popup-menu wa-dropdown-item:focus-visible {
+  outline: none;
+  color: var(--_kui-popup-row-current-color);
+  background-color: var(--_kui-popup-row-current-background);
+}
+.kui-popup-menu > wa-divider,
+.kui-popup-menu wa-divider[slot="submenu"] {
+  --spacing: 0.5em;
+}
+
+/* Center the icon on the label's line, like the Select's start slot. */
+.kui-popup-menu wa-dropdown-item::part(icon) {
+  display: flex;
+  align-self: center;
+}
+.kui-popup-menu__icon {
+  display: inline-flex;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
+  flex: none;
+  /* Web Awesome spaces a slotted item icon 0.75em from its label (an
+     !important shadow rule). Sizing that em makes the gap the Select's. */
+  font-size: calc(var(--_kui-popup-row-icon-gap) / 0.75);
+}
+.kui-popup-menu__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.kui-popup-menu__details {
+  display: inline-flex;
+  align-items: center;
+}
+
+.kui-popup-menu__details svg {
+  display: block;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
+}
+
+/* A context menu takes no space where it is rendered: out of flow, it adds no
+   line box in block layout and no gap slot in a flex or grid container. Its
+   fixed anchor opens the menu at the recorded viewport point. */
+.kui-popup-menu[data-trigger="context"] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 0;
+  height: 0;
+}
+
+.kui-popup-menu__context-anchor {
+  position: fixed;
+  top: var(--kui-popup-menu-context-y, 0px);
+  left: var(--kui-popup-menu-context-x, 0px);
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* A group title matches the Select's group title. It is a styled element
+   rather than a slotted heading, whose Web Awesome metrics are !important. */
+.kui-popup-menu__heading {
+  padding: var(--_kui-popup-group-title-padding);
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-2xs);
+  font-weight: var(--_kui-popup-group-title-font-weight);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* In a ToolbarControlGroup a PopupMenu sizes itself in the group's context:
+   the group lays out its own native and raw Web Awesome children and names a
+   PopupMenu only to key its own state on it. The trigger takes the group's
+   control height (40px, or 32px in a compact group). A mixed-content trigger
+   in a nested-dropdown group grows for its label plus the caret; a fixed 32px
+   base would center both outside its host, painting the label across the
+   separator and the caret beyond the group border. */
+/* The trigger button takes the group's control metrics, as the group's own
+   raw wa-button children do (toolbar-control-group.css excludes this
+   trigger). The PopupMenu ancestor sits in `:where()` so each rule keeps the
+   specificity of the group's matching raw-child rule and resolves against the
+   group's attribute-keyed variants exactly as they do. */
+.kui-toolbar-control-group :where(wa-dropdown.kui-popup-menu) > wa-button {
+  --wa-form-control-height: 2.5rem;
+  display: inline-flex;
+  line-height: 0;
+  align-items: center;
+  justify-content: center;
+  --wa-color-fill-quiet: transparent;
+}
+.kui-toolbar-control-group[data-size="compact"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  --wa-form-control-height: 2rem;
+}
+.kui-toolbar-control-group[data-content="mixed"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  line-height: normal;
+}
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button
+  > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+/* Toolbar controls never wrap: a slotted icon and its label share one row. */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(label) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kui-space-xs);
+  white-space: nowrap;
+}
+/* At least a circle around an icon-only trigger, with the group's item radius;
+   hover lifts the trigger like a group button, except in a `single` group,
+   whose whole surface shows the hover (toolbar-control-group.css). */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(base) {
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+}
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button:hover::part(base) {
+  border-color: var(--kui-toolbar-control-border);
+  background-color: var(--kui-toolbar-control-hover-background);
+}
+.kui-toolbar-control-group[data-single="true"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: 2.5rem;
+  height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown.kui-popup-menu {
+  margin: -2px;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+.kui-toolbar-control-group[data-single="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+
+/* The menu insets a composing parent asks for. A PopupMenu applies them to
+   itself; its default is the Select listbox inset above, which a
+   ToolbarControlGroup's `standard` inset keeps. A PopupSurface's inset follows
+   the group's, so a surface wins when both apply. */
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-toolbar-control-group[data-menu-inset="list-zero"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}
+
+/* As a ListActionRow's trailing menu, the PopupMenu styles its trigger in the
+   row's context like the row's trailing button: a full-height 44px pill (36px
+   in a compact row) on the row's trailing-hover fill, with a 16px icon. */
+.kui-list-action-row > .kui-popup-menu {
+  display: flex;
+  flex: none;
+}
+.kui-list-action-row > .kui-popup-menu > wa-button {
+  display: flex;
+  min-height: 2.75rem;
+  color: inherit;
+}
+.kui-list-action-row[data-density="compact"] > .kui-popup-menu > wa-button {
+  min-height: 2.25rem;
+}
+.kui-list-action-row > .kui-popup-menu > wa-button::part(base) {
+  width: 2.75rem;
+  min-width: 2.75rem;
+  height: 100%;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--kui-radius-pill);
+  color: inherit;
+  background: transparent;
+}
+.kui-list-action-row
+  > .kui-popup-menu
+  > wa-button:not([disabled]):hover::part(base) {
+  background: var(--kui-list-action-row-trailing-hover-background);
+}
+.kui-list-action-row > .kui-popup-menu > wa-button::part(base):focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+.kui-list-action-row > .kui-popup-menu > wa-button > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+/* The row's interaction visibility reveals the trigger on hover or focus, and
+   keeps it visible while its menu is open. A placeholder row reveals nothing. */
+.kui-list-action-row[data-trailing-visibility="interaction"]
+  > .kui-popup-menu:not([open])
+  > wa-button {
+  opacity: 0;
+}
+.kui-list-action-row[data-trailing-visibility="interaction"]:not(
+    [data-placeholder="true"]
+  ):is(:hover, :focus-within)
+  > .kui-popup-menu
+  > wa-button {
+  opacity: 1;
+}
+@media (hover: none) {
+  .kui-list-action-row[data-trailing-visibility="interaction"]
+    > .kui-popup-menu
+    > wa-button {
+    opacity: 1;
+  }
+}