@kerfjs/ui 5.0.0-beta.55 → 5.0.0-beta.57

package/dist/styles/toolbar-control-group.css

@@ -21,15 +21,17 @@
     )
   );
   --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
-  /* Internal group-to-child contract: the control slot a composed child (an
-     icon-only Select) fills so it is inset evenly on every side and the
-     group-owned focus ring stays concentric with the visible control. The
-     group sizes to the child's width. A default slot is 40px tall inside the
-     2px inset; a compact slot is the full 32px padding box, and a lone
-     compact child also overlaps the 1px inline padding. */
-  --_kui-toolbar-slot-height: 2.5rem;
-  --_kui-toolbar-slot-overlap: 0px;
-  --_kui-toolbar-slot-radius: var(--kui-toolbar-item-radius);
+  /* Context the group provides to a composed child (an icon-only Select, in
+     select.css): the control slot the child fills so it is inset evenly on
+     every side and the group-owned focus ring stays concentric with the
+     visible control. The group sizes to the child's width. A default slot is
+     40px tall inside the 2px inset; a compact slot is the full 32px padding
+     box, and a lone compact child also overlaps the 1px inline padding. The
+     values are named after the group that provides them; the child reads
+     them from its own stylesheet. */
+  --_kui-toolbar-control-group-slot-height: 2.5rem;
+  --_kui-toolbar-control-group-slot-overlap: 0px;
+  --_kui-toolbar-control-group-slot-radius: var(--kui-toolbar-item-radius);
   display: inline-flex;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
@@ -44,6 +46,23 @@
   gap: 0;
 }
 
+/* In a Toolbar zone, a group shorter than the toolbar's control band (the
+   `--_kui-toolbar-band` the Toolbar provides) takes half the difference as a
+   top margin, so it centers in the band by its own size. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group {
+  margin-block-start: max(
+    0px,
+    calc(
+      (
+          var(--_kui-toolbar-band) -
+            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+        ) /
+        2
+    )
+  );
+}
+
 .kui-toolbar-control-group[data-visibility="compact-only"] {
   display: none;
 }
@@ -80,9 +99,9 @@
 }
 .kui-toolbar-control-group[data-size="compact"] {
   --kui-toolbar-group-size: 2.125rem;
-  --_kui-toolbar-slot-height: 2rem;
-  --_kui-toolbar-slot-overlap: 1px;
-  --_kui-toolbar-slot-radius: max(
+  --_kui-toolbar-control-group-slot-height: 2rem;
+  --_kui-toolbar-control-group-slot-overlap: 1px;
+  --_kui-toolbar-control-group-slot-radius: max(
     0px,
     calc(var(--kui-toolbar-group-radius) - 1px)
   );
@@ -121,13 +140,15 @@
   display: flex;
   gap: var(--kui-space-xs);
 }
-.kui-toolbar-control-group[data-content="mixed"] wa-button {
+.kui-toolbar-control-group[data-content="mixed"]
+  wa-button:not(:where(.kui-popup-menu > *)) {
   line-height: normal;
 }
 /* Toolbar controls never wrap. Web Awesome's label part is a plain block, so a
    slotted icon (a block SVG) and its text would otherwise stack vertically —
    lay them out on one row the way native mixed buttons already are. */
-.kui-toolbar-control-group wa-button::part(label) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::part(label) {
   display: inline-flex;
   align-items: center;
   gap: var(--kui-space-xs);
@@ -183,11 +204,15 @@
   background: transparent;
 }
 
-.kui-toolbar-control-group
-  > :is(button, wa-button, wa-dropdown, .kui-toolbar-action-link) {
+/* The group lays out its own native and raw Web Awesome children. A composed
+   PopupMenu (`wa-dropdown.kui-popup-menu`) or Select sizes itself in the
+   group's context from its own stylesheet (popup-menu.css, select.css); the
+   group names those children by class only to key its own state on them. */
+.kui-toolbar-control-group > :is(button, wa-button, .kui-toolbar-action-link),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
   flex: 0 0 auto;
 }
-.kui-toolbar-control-group > wa-dropdown {
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
   display: inline-flex;
 }
 
@@ -268,7 +293,7 @@
 }
 
 .kui-toolbar-control-group > button svg,
-.kui-toolbar-control-group wa-button > svg,
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) > svg,
 .kui-toolbar-control-group > .kui-toolbar-action-link svg {
   display: block;
   width: 1rem;
@@ -276,34 +301,43 @@
 }
 
 /* Nested Web Awesome buttons take the group's control height, not the theme's
-   44px standalone control height. */
-.kui-toolbar-control-group wa-button {
+   44px standalone control height. The group's `wa-button` rules style only raw
+   buttons: a composed PopupMenu's trigger (`.kui-popup-menu > wa-button`) is
+   excluded inside a zero-specificity `:where()` and takes the same metrics
+   from popup-menu.css. */
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
   --wa-form-control-height: 2.5rem;
 }
-.kui-toolbar-control-group[data-size="compact"] wa-button {
+.kui-toolbar-control-group[data-size="compact"]
+  wa-button:not(:where(.kui-popup-menu > *)) {
   --wa-form-control-height: 2rem;
 }
 
 .kui-toolbar-control-group > wa-button,
-.kui-toolbar-control-group > wa-dropdown,
-.kui-toolbar-control-group > wa-dropdown > wa-button,
-.kui-toolbar-control-group > wa-dropdown > wa-button::part(base) {
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base) {
   min-width: 2.5rem;
   height: 2.5rem;
 }
 .kui-toolbar-control-group[data-size="compact"] > button,
 .kui-toolbar-control-group[data-size="compact"] > .kui-toolbar-action-link,
 .kui-toolbar-control-group[data-size="compact"] > wa-button,
-.kui-toolbar-control-group[data-size="compact"] > wa-dropdown,
-.kui-toolbar-control-group[data-size="compact"] > wa-dropdown > wa-button,
 .kui-toolbar-control-group[data-size="compact"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base),
 .kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
-  wa-dropdown
+  wa-dropdown:not(.kui-popup-menu)
   wa-button,
 .kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
-  wa-dropdown
+  wa-dropdown:not(.kui-popup-menu)
   wa-button::part(base) {
   min-width: 2rem;
   height: 2rem;
@@ -317,14 +351,20 @@
   padding-inline: 0;
 }
 
-.kui-toolbar-control-group[data-menu-inset="standard"] wa-dropdown::part(menu) {
+/* `standard` keeps each menu's own standard inset: a raw wa-dropdown takes the
+   8px surface inset, while a PopupMenu keeps the Select listbox inset it
+   shares (popup-menu.css). The explicit compact and list-zero choices apply to
+   every nested menu; a PopupMenu applies them to itself (popup-menu.css). */
+.kui-toolbar-control-group[data-menu-inset="standard"]
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
-.kui-toolbar-control-group[data-menu-inset="compact"] wa-dropdown::part(menu) {
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0.25rem;
 }
 .kui-toolbar-control-group[data-menu-inset="list-zero"]
-  wa-dropdown::part(menu) {
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0;
 }
 
@@ -345,7 +385,7 @@
 }
 
 .kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
-  > wa-dropdown,
+  > wa-dropdown:not(.kui-popup-menu),
 .kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
   > wa-button {
   margin: -2px;
@@ -356,26 +396,26 @@
    the fixed 32px base centers both outside its host, painting the label across
    the separator and the caret beyond the group border. */
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button,
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
   min-width: max-content;
 }
 .kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
   width: max-content;
 }
 
 .kui-toolbar-control-group[data-single="true"]
-  > wa-dropdown
+  > wa-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
   width: max-content;
 }
 
-.kui-toolbar-control-group wa-button {
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
   display: inline-flex;
   line-height: 0;
   align-items: center;
@@ -383,7 +423,8 @@
   --wa-color-fill-quiet: transparent;
 }
 
-.kui-toolbar-control-group wa-button::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::part(base) {
   /* Match min-width to the 40px height so an icon-only button's highlight is at
      least a circle, not a vertical oval — the host is 40px wide but the base
      part was sizing to its ~32px content. Text/caret buttons grow past it. */
@@ -397,20 +438,29 @@
   );
 }
 
-.kui-toolbar-control-group wa-button:hover::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *)):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"]:has(
-    > :is(button, wa-button, wa-dropdown, wa-select, .kui-toolbar-action-link)
+    > :is(
+      button,
+      wa-button,
+      .kui-popup-menu,
+      wa-dropdown:not(.kui-popup-menu),
+      .kui-select,
+      .kui-toolbar-action-link
+    )
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"]
   > :is(button, wa-button, .kui-toolbar-action-link):hover,
-.kui-toolbar-control-group[data-single="true"] wa-button:hover::part(base) {
+.kui-toolbar-control-group[data-single="true"]
+  wa-button:not(:where(.kui-popup-menu > *)):hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
@@ -420,7 +470,7 @@
    inner layer inset from the border (KF-J9P1ZD — a heading toolbar's lone Close/
    Done action). */
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button, wa-select, .kui-toolbar-action-link):only-child
+    > :is(button, wa-button, .kui-select, .kui-toolbar-action-link):only-child
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
@@ -432,19 +482,13 @@
 .kui-toolbar-control-group:not([data-single="true"]):has(
     > :is(button, wa-button):only-child
   )
-  wa-button:hover::part(base) {
+  > wa-button:hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
 
-/* A toolbar Select beside other controls highlights its own pill on hover,
-   like its button and dropdown siblings; a lone Select instead lifts the whole
-   group (above). */
-.kui-toolbar-control-group:not([data-single="true"])
-  > wa-select:not(:only-child):hover::part(combobox) {
-  border-color: var(--kui-toolbar-control-border);
-  background: var(--kui-toolbar-control-hover-background);
-}
+/* A toolbar Select beside other controls highlights its own pill on hover
+   (select.css); a lone Select instead lifts the whole group (above). */
 
 /* A plain <button> child paints its own box for the selected state. */
 .kui-toolbar-control-group[data-single="false"] > button[aria-pressed="true"] {
@@ -476,37 +520,67 @@
   outline-offset: 1px;
 }
 
-/* With per-control rings, a composed Select paints its own ring even when it
-   was told the group owns it: nothing else would show focus. It matches the
-   sibling controls' ring and offset. */
-.kui-toolbar-control-group[data-focus-ring="control"]
-  > wa-select:focus-within::part(combobox) {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
+/* With per-control rings, a composed Select paints its own ring (select.css). */
 
-.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within {
+.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within:not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within {
+.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within:not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px
     color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
 }
 
-/* Chromium and WebKit do not propagate :focus-within from a focused
-   light-DOM child (an open wa-select's active wa-option) through the host's
-   popup shadow tree, so the group ring vanished while its Select listbox was
-   open. A focused light-DOM descendant still owns the group ring. Kept as
-   separate rules so an engine without :has() keeps the :focus-within ring. */
-.kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus) {
+/* A group-owned ring (outline or halo) is off while a Select listbox or a
+   PopupMenu inside the group is open: the open popup shows focus, as the
+   per-control Select and PopupMenu triggers already do, and the ring returns
+   when the popup closes with focus still in the group. The exclusion sits in
+   a forgiving :where(), so an engine without :has() keeps the ring.
+
+   Chromium and WebKit do not propagate :focus-within from a focused
+   light-DOM child through a host's popup shadow tree, so a focused light-DOM
+   descendant also owns the group ring. Kept as separate rules so an engine
+   without :has() keeps the :focus-within ring. */
+.kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus):not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus) {
+.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus):not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px
     color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);

package/dist/styles/toolbar-text.css

@@ -12,6 +12,27 @@
   align-items: center;
 }
 
+/* In a Toolbar zone, a title fills the toolbar's control band (the
+   `--_kui-toolbar-band` the Toolbar provides) and centers its first line in
+   it; further lines of a wrapped title continue below the band. These rules
+   precede the size and wrap rules below, which keep their own minimum
+   heights. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text {
+  height: auto;
+  min-height: var(--_kui-toolbar-band);
+}
+
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text[data-wrap="true"] {
+  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
+}
+
+/* A filling title grows into its row's free space and truncates there. */
+.kui-toolbar-text[data-fill="true"] {
+  flex: 1 1 auto;
+}
+
 /* The text lives in a block child, not directly in the flex box, so
    `text-overflow: ellipsis` actually applies (it is a no-op on a flex item). */
 .kui-toolbar-text__text {

package/dist/styles/toolbar.css

@@ -5,7 +5,11 @@
   box-sizing: border-box;
   color: var(--kui-color-text);
   background: transparent;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  /* The center track's minimum is `auto`, not 0, so it resolves to the center
+     zone's own min-width (its content width, below): when the zones do not all
+     fit, the auto leading track is what shrinks and its title truncates, and
+     the center group never overflows its track onto the leading identity. */
+  grid-template-columns: auto 1fr auto;
   align-items: start;
   gap: var(--kui-toolbar-gap, 0.5rem);
   container: kui-toolbar / inline-size;
@@ -100,31 +104,31 @@
     inset 1px 0 var(--_kui-toolbar-divider-left);
 }
 
-.kui-toolbar[divider-sides*="t"] {
+.kui-toolbar:is([divider-sides*="t"], [data-scroll-divider*="t"]) {
   --_kui-toolbar-divider-top: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
-.kui-toolbar[divider-sides*="r"] {
+.kui-toolbar:is([divider-sides*="r"], [data-scroll-divider*="r"]) {
   --_kui-toolbar-divider-right: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
-.kui-toolbar[divider-sides*="b"] {
+.kui-toolbar:is([divider-sides*="b"], [data-scroll-divider*="b"]) {
   --_kui-toolbar-divider-bottom: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
-.kui-toolbar[divider-sides*="l"] {
+.kui-toolbar:is([divider-sides*="l"], [data-scroll-divider*="l"]) {
   --_kui-toolbar-divider-left: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
@@ -136,7 +140,10 @@
    down. A growing item therefore never moves the other items or its own top.
    Centering the zones in the toolbar row instead dropped every control to the
    middle of a two-line title. The band is resolved here, on the toolbar, so a
-   compact group's own smaller group size never redefines it. */
+   compact group's own smaller group size never redefines it.
+   `--_kui-toolbar-band` is context the toolbar provides: a ToolbarControlGroup
+   and a ToolbarText each center themselves in it from their own stylesheets
+   (toolbar-control-group.css, toolbar-text.css). */
 .kui-toolbar {
   --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
 }
@@ -151,33 +158,6 @@
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
 
-:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
-  > [data-component="toolbar-control-group"] {
-  margin-block-start: max(
-    0px,
-    calc(
-      (
-          var(--_kui-toolbar-band) -
-            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
-        ) /
-        2
-    )
-  );
-}
-
-/* A title fills the band and centers its first line in it; further lines of a
-   wrapped title continue below the band. */
-:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
-  > [data-component="toolbar-text"] {
-  height: auto;
-  min-height: var(--_kui-toolbar-band);
-}
-
-:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
-  > [data-component="toolbar-text"][data-wrap="true"] {
-  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
-}
-
 /* Pin each zone to its column so a display:none (empty) leading or center zone
    doesn't let the trailing zone auto-place into the first column — which left an
    extra gap + empty track to the trailing zone's right (KF-5BEF2M). The trailing
@@ -190,6 +170,11 @@
 }
 
 .kui-toolbar__center {
+  /* The center content never compresses below its own width (a group cannot
+     shrink or clip its controls). The track above takes this as its minimum, so
+     the leading identity gives way first, the way a platform toolbar truncates
+     its title before it overlaps the centered controls. */
+  min-width: min-content;
   justify-content: center;
   grid-column: 2;
 }

package/dist/styles/value-table.css

@@ -1,6 +1,6 @@
 .kui-value-table {
   --kui-value-table-background: var(--kui-color-surface-lowered);
-  --kui-value-table-border: var(--kui-color-border);
+  --kui-value-table-border: var(--kui-color-neutral-border-normal);
   --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
   display: grid;
   margin-block: 0;
@@ -22,7 +22,14 @@
   padding-block: 0.5rem;
   padding-inline: var(--_kui-value-table-inline-padding);
   box-sizing: border-box;
-  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
+  /* Two content-sized tracks share the free space equally, and each stops
+     growing once its content fits. A short value keeps its whole width and a
+     long label takes the rest (ending a word that still does not fit in an
+     ellipsis); a short label keeps its width beside a long, wrapping value;
+     when both are long they split the row. A `1fr` value track would get
+     nothing until the label reached its full width, starving the value to 0px
+     beside a long single-word label. */
+  grid-template-columns: minmax(0, auto) minmax(0, auto);
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
@@ -42,7 +49,12 @@
 }
 .kui-value-table__row dt {
   display: flex;
+  /* The label hugs its content (up to its column) rather than stretching, so
+     its box does not change with the value's width — a placeholder row keeps
+     the live row's label geometry beside its skeleton value. */
+  max-width: 100%;
   min-width: 0;
+  justify-self: start;
   color: var(--kui-color-text-quiet);
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
@@ -60,6 +72,11 @@
 }
 .kui-value-table__label {
   min-width: 0;
+  overflow: hidden;
+  /* A multi-word label wraps at spaces; a single word wider than the label
+     column (a long component or file name) ends in an ellipsis instead of
+     running under the value. */
+  text-overflow: ellipsis;
 }
 .kui-value-table__row dd {
   display: flex;

package/dist/styles/webawesome.css

@@ -499,7 +499,9 @@
     padding-inline: var(--kui-wa-control-inset) !important;
   }
 
-  wa-dropdown-item {
+  /* A PopupMenu item owns the Select option geometry instead (popup-menu.css),
+     so a command menu and a value list draw identical rows. */
+  wa-dropdown-item:not([data-component="popup-menu"] > *) {
     padding-inline: var(--kui-wa-control-inset) !important;
   }