react-x11 2.29.0 → 2.31.0

package/src/cocoa/panewindow.js

@@ -14,6 +14,11 @@
 // via emit. Geometry and input arrive as channel messages (the host owns
 // layout and hit-testing — this is CPU offloading, not isolation), and what
 // goes out is pane-present, and pane-cursor for the cursor the host shows.
+//
+// Every other window the pane's tree makes — a menu, a dropdown's sheet, a
+// tooltip, a dialog — is a `CocoaPaneSubwindow`: the same ring and the same
+// presents, naming the window, and an NSWindow the host makes for it
+// (src/cocoa/panehost.js), because nothing in a pane process runs AppKit.
 import { BackendContext2D } from '../backend/context2d.js';
 
 let nextPaneId = 1;
@@ -31,13 +36,15 @@ export class CocoaPaneWindow {
     this.id = this.windowId;
     this.windowNumber = this.windowId;
     this.scale = app.scale ?? 2;
-    this.width = Math.max(
-      1,
-      Math.round((attributes.width ?? 400) * this.scale),
-    );
+    // Device pixels, as every window's attributes are (`windowAttributes`
+    // multiplies the props through once): the size the pane is born at,
+    // until the host's first pane-rect says what it is. Multiplied again
+    // here, a pane was born twice its size, and a dialog it opened in its
+    // first commit was centred over a window that was never there.
+    this.width = Math.max(1, Math.round(attributes.width ?? 400 * this.scale));
     this.height = Math.max(
       1,
-      Math.round((attributes.height ?? 300) * this.scale),
+      Math.round(attributes.height ?? 300 * this.scale),
     );
     this._listeners = new Map();
     this._surface = null;
@@ -52,27 +59,51 @@ export class CocoaPaneWindow {
     this._seq = 0;
     this._presentedAt = -Infinity;
     this._reactX11Node = null;
+    // Where the pane's corner is on the screen, in device pixels, as the
+    // host last said (`setPaneSize`): what a popup the pane anchors to one
+    // of its nodes is placed against (`windowOrigin`, src/anchor.js). The
+    // pane has no window of its own to ask, so until the host says, a menu
+    // dropped from the screen's corner.
+    this.x = 0;
+    this.y = 0;
+    this._screenOrigin = { x: 0, y: 0 };
+    // what the app's window map keys this window by, and the id the host
+    // names it by in a pane-event (`CocoaApp.attachPaneChannel`)
+    this._key = this.windowId;
     app._registerWindow(this);
   }
 
   // --- the channel-facing half --------------------------------------------
 
-  /** The host's layout answer: logical size plus the display scale. */
-  setPaneSize(width, height, scale) {
+  /**
+   * The host's layout answer: logical size plus the display scale, and
+   * where the pane is on the screen — `screen`, device pixels, absent from
+   * a host that does not say. A move alone is a `resize` that `moved`, the
+   * event a window's own move is, so what is anchored here follows it.
+   */
+  setPaneSize(width, height, scale, screen) {
     if (this.destroyed) return;
     if (scale) this.scale = scale;
     const w = Math.max(1, Math.round(width * this.scale));
     const h = Math.max(1, Math.round(height * this.scale));
-    if (w === this.width && h === this.height) return;
+    const moved =
+      screen != null && (screen.x !== this.x || screen.y !== this.y);
+    const resized = w !== this.width || h !== this.height;
+    if (!moved && !resized) return;
+    if (moved) {
+      this.x = screen.x;
+      this.y = screen.y;
+      this._screenOrigin = { x: screen.x, y: screen.y };
+    }
     this.width = w;
     this.height = h;
     this.emit('resize', {
       width: w,
       height: h,
-      x: 0,
-      y: 0,
-      moved: false,
-      resized: true,
+      x: this.x,
+      y: this.y,
+      moved,
+      resized,
     });
   }
 
@@ -103,7 +134,13 @@ export class CocoaPaneWindow {
    */
   setCursor(name) {
     if (this.destroyed) return;
-    this.app._paneSend?.({ type: 'pane-cursor', cursor: name ?? null });
+    this._post({ type: 'pane-cursor', cursor: name ?? null });
+  }
+
+  /** A message about this window, to the host. The pane's own names none:
+   * the host knows it as the pane (`CocoaPaneSubwindow` names itself). */
+  _post(msg) {
+    this.app._paneSend?.(msg);
   }
 
   requestAnimationFrame(cb) {
@@ -264,7 +301,7 @@ export class CocoaPaneWindow {
     const shown = this._ring[this._drawIndex];
     this._native.surfaceUnlock(shown.handle);
     this._flushDamage = null;
-    this.app._paneSend?.({
+    this._post({
       type: 'pane-present',
       seq: ++this._seq,
       id: shown.iosurfaceId,
@@ -304,3 +341,156 @@ export class CocoaPaneWindow {
     this._releaseRing();
   }
 }
+
+/**
+ * Any other window a pane's tree makes: a `<popup>` — a menu, a dropdown's
+ * sheet, a tooltip, the edit menu — or a managed one, a dialog (#824).
+ *
+ * A pane process runs no AppKit (`CocoaApp.start`): no NSApplication, no
+ * event pump. An NSWindow made here exists and is never shown, so a
+ * `<Select>` in a pane took the press, opened, and showed nothing. This
+ * window paints into a shared ring exactly as the pane does, and the host
+ * makes the NSWindow and shows the ring in it (`CocoaPaneHost`,
+ * src/cocoa/panehost.js) — the split the pane already has: the pane draws,
+ * the host owns glass and input.
+ *
+ * Its place is the pane's to decide and the host's to take as given: `x`
+ * and `y` are the screen position the pane's own anchoring worked out,
+ * against the origin the host sends with every pane-rect. What goes out is
+ * the window's life as `pane-window` messages and its frames as
+ * `pane-present`s naming it; what comes back is the input on the host's
+ * window, as `pane-event`s naming it, and for a managed window the moves
+ * and the resizes the user made and the close button.
+ */
+export class CocoaPaneSubwindow extends CocoaPaneWindow {
+  constructor(app, attributes = {}) {
+    super(app, attributes);
+    this.attributes = attributes;
+    this._popup = attributes.overrideRedirect === true;
+    this.mapped = false;
+    // device pixels, as every window's attributes are — unlike the pane's
+    // own, whose size is the host's to say
+    const size = this.snapSize(attributes.width ?? 1, attributes.height ?? 1);
+    this.width = size.width;
+    this.height = size.height;
+    this.x = Math.round(attributes.x ?? 0);
+    this.y = Math.round(attributes.y ?? 0);
+    this._screenOrigin = { x: this.x, y: this.y };
+    this._send({
+      op: 'create',
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height,
+      popup: this._popup,
+      // an ARGB visual is a transparent window here, as in `CocoaWindow`
+      transparent:
+        attributes.visual !== undefined || Boolean(attributes.transparent),
+      grabKeyboard: attributes.grabKeyboard === true,
+      dragPreview: Boolean(attributes.dragPreview),
+      title: attributes.title ?? '',
+      decorations: attributes.decorations,
+      resizable: attributes.resizable,
+      sizeHints: attributes.sizeHints,
+    });
+  }
+
+  /** Named, and held until the host is listening (`CocoaApp._postWindow`). */
+  _post(msg) {
+    this.app._postWindow({ ...msg, window: this.windowId });
+  }
+
+  _send(msg) {
+    if (this.destroyed) return;
+    this._post({ type: 'pane-window', ...msg });
+  }
+
+  /** `CocoaWindow`'s rule, so the size this window records is the size the
+   * host's NSWindow will take: whole points, rounded up. */
+  snapSize(width, height) {
+    const s = this.scale;
+    const up = (v) =>
+      Math.max(1, Math.ceil(Math.max(1, Math.round(v)) / s) * s);
+    return { width: up(width), height: up(height) };
+  }
+
+  map() {
+    this.mapped = true;
+    this._send({ op: 'map' });
+  }
+
+  unmap() {
+    this.mapped = false;
+    this._send({ op: 'unmap' });
+  }
+
+  move(x, y) {
+    this.x = Math.round(x);
+    this.y = Math.round(y);
+    this._screenOrigin = { x: this.x, y: this.y };
+    this._send({ op: 'move', x: this.x, y: this.y });
+  }
+
+  resize(width, height) {
+    const size = this.snapSize(width, height);
+    this.width = size.width;
+    this.height = size.height;
+    this._send({ op: 'resize', width: this.width, height: this.height });
+  }
+
+  setTitle(title) {
+    this._send({ op: 'title', title: String(title ?? '') });
+  }
+
+  setSizeHints(hints = {}) {
+    this._send({ op: 'size-hints', hints: { ...hints } });
+  }
+
+  /** The grab is the host's: a press anywhere in its windows comes here,
+   * outside this window, which is the dismissal (`CocoaApp._grabTarget`). */
+  grabPointer(options, cb) {
+    this._send({ op: 'grab' });
+    cb?.(null, 0);
+  }
+
+  ungrabPointer() {
+    this._send({ op: 'ungrab' });
+  }
+
+  /**
+   * Where the host's window went for a reason of its own — the user moved a
+   * dialog, or resized it — which a `resize` here says as a window's own
+   * move or resize does. A size comes only from the user (`resized`): the
+   * pane's own resizes come back as the host's echo, and one taken as news
+   * would read as the user taking an `'auto'` window over.
+   */
+  _hostGeometry(ev) {
+    if (this.destroyed) return;
+    const moved = ev.x !== this.x || ev.y !== this.y;
+    const resized =
+      Boolean(ev.resized) &&
+      (ev.width !== this.width || ev.height !== this.height);
+    if (!moved && !resized) return;
+    this.x = ev.x;
+    this.y = ev.y;
+    this._screenOrigin = { x: ev.x, y: ev.y };
+    if (resized) {
+      this.width = ev.width;
+      this.height = ev.height;
+    }
+    this.emit('resize', {
+      width: this.width,
+      height: this.height,
+      x: this.x,
+      y: this.y,
+      moved,
+      resized,
+    });
+  }
+
+  destroy() {
+    if (this.destroyed) return;
+    this._send({ op: 'destroy' });
+    super.destroy();
+  }
+}

package/src/cocoa/promotion.js

@@ -591,8 +591,16 @@ export class CocoaPromotion {
    * node's reach, the parent's clip, if it has one, must hold the whole of
    * it, and the parent must not fade: its group is drawn on the bitmap or on
    * its own layer, and either way a layer of the node's would be outside it.
+   *
+   * With `cut`, the reach is an element's part (src/cocoa/sprites.js),
+   * whose layer can be cut to a rectangle: a clipping ancestor with square
+   * corners narrows `cut.clip` to its padding box — its border is drawn
+   * over what it holds anyway — instead of having to hold the part whole,
+   * and every test from there up is asked of what shows through the clip.
+   * `cut.bounds` comes back as that. A clip that leaves nothing showing is
+   * a refusal.
    */
-  _clear(node, bounds = node._subtreeBounds()) {
+  _clear(node, bounds = node._subtreeBounds(), cut = null) {
     // the exact reach, not `paintBounds()`: that one carries the damage
     // model's pixel of slop, and a section laid out flush under a card
     // would read as reaching into it. An element's part is asked about at
@@ -600,6 +608,17 @@ export class CocoaPromotion {
     for (let n = node; !n.isWindow; n = n.parent) {
       const parent = n.parent;
       if (!parent) return false;
+      if (
+        cut &&
+        !parent.isWindow &&
+        parent.clipsChildren?.() &&
+        !(parent.style?.borderRadius > 0)
+      ) {
+        const inner = insetRect(parent.abs, borderReach(parent));
+        cut.clip = cut.clip ? intersectRects(cut.clip, inner) : inner;
+        bounds = cut.clip && intersectRects(bounds, cut.clip);
+        if (!bounds) return false;
+      }
       const order = parent.paintOrder();
       for (let j = order.indexOf(n) + 1; j < order.length; j++) {
         if (this._reaches(order[j], bounds)) return false;
@@ -636,6 +655,7 @@ export class CocoaPromotion {
         }
       }
     }
+    if (cut) cut.bounds = bounds;
     return true;
   }
 

package/src/cocoa/sprites.js

@@ -25,6 +25,7 @@
 // element.
 
 import { RASTER_PAD, RasterState } from './presenter.js';
+import { intersectRects } from '../nodes/rects.js';
 import { DEV } from '../nodes/util.js';
 
 // Past this many device pixels on a side a part is drawn by its element: a
@@ -109,6 +110,7 @@ function isSprite(sprite) {
   if (sprite == null || typeof sprite.key !== 'string') return false;
   if (!isRect(sprite.rect) || typeof sprite.paint !== 'function') return false;
   if (sprite.reach !== undefined && !isRect(sprite.reach)) return false;
+  if (sprite.clip !== undefined && !isRect(sprite.clip)) return false;
   if (sprite.opacity !== undefined && !finite(sprite.opacity)) return false;
   if (sprite.transform !== undefined && !isMatrix(sprite.transform)) {
     return false;
@@ -304,18 +306,30 @@ export class SpriteLayers {
         if (now.has(sprite.key)) continue;
         const raster = rasterRectOf(sprite);
         if (raster.width > MAX_SIDE || raster.height > MAX_SIDE) continue;
+        // what shows of everywhere it can be: inside its own clip, and the
+        // clips of its element's ancestors, which cut its layer (`_clear`)
+        const cut = { clip: sprite.clip ?? null, bounds: null };
         const extent = extentOf(sprite);
-        if (!this.promotion._clear(host, extent)) continue;
+        const bounds = cut.clip ? intersectRects(extent, cut.clip) : extent;
+        if (!bounds || !this.promotion._clear(host, bounds, cut)) continue;
+        const shown = cut.bounds;
         let state = was?.get(sprite.key);
+        // a clip that comes or goes is a layer in a box or out of one: lifted
+        // again, rather than a running layer moved between parents
+        if (state && Boolean(state.clip) !== Boolean(cut.clip)) {
+          this._drop(state, root);
+          state = null;
+        }
         const lifting = !state;
-        if (lifting) state = this._lift(host, sprite.key);
+        if (lifting) state = this._lift(host, sprite.key, cut.clip !== null);
         state.sprite = sprite;
+        state.clip = cut.clip;
         state.order = [...place, AFTER_CHILDREN, index];
-        // the bitmap under where it can be repaints without it, from this
+        // the bitmap under where it shows repaints without it, from this
         // frame on; where it went since, it is the element's own claims
         // that move the hole
-        if (lifting) this.promotion._claim(root, extent);
-        state.extent = extent;
+        if (lifting) this.promotion._claim(root, shown);
+        state.extent = shown;
         now.set(sprite.key, state);
       }
       if (was) {
@@ -356,13 +370,25 @@ export class SpriteLayers {
     }
   }
 
-  _lift(host, key) {
+  _lift(host, key, clipped) {
     const layer = this.native.createLayer();
-    this.native.addSublayer(this.promotion.rootVisual.layer, layer);
+    // a part cut to a clip is in a box of the clip's size that masks to it,
+    // and the box is what stands among the layers above the bitmap
+    let box = null;
+    if (clipped) {
+      box = this.native.createLayer();
+      this.native.addSublayer(this.promotion.rootVisual.layer, box);
+      this.native.addSublayer(box, layer);
+    } else {
+      this.native.addSublayer(this.promotion.rootVisual.layer, layer);
+    }
     return {
       host,
       key,
       layer,
+      box,
+      boxProps: {},
+      clip: null, // device pixels, window coordinates
       raster: new RasterState(),
       painted: UNPAINTED,
       rect: null, // the raster's rect, device pixels, window coordinates
@@ -383,7 +409,7 @@ export class SpriteLayers {
    *  forgotten, and the bitmap under where it could be repaints with the
    *  element drawing it again. */
   _drop(state, root) {
-    this.native.removeFromSuperlayer(state.layer);
+    this.native.removeFromSuperlayer(state.box ?? state.layer);
     state.raster.release(this.native);
     for (const run of state.runs.values()) this._ends().delete(run.caId);
     state.runs.clear();
@@ -415,14 +441,31 @@ export class SpriteLayers {
     state.rect = rect;
     const origin = originOf(sprite);
     const m = sprite.transform ?? IDENTITY;
+    // in its box, where it is cut to a clip: placed from the clip's corner,
+    // and the box at the part's place among the layers
+    const clip = state.clip;
+    if (state.box) {
+      const frame = [clip.x / s, clip.y / s, clip.width / s, clip.height / s];
+      const was = state.boxProps;
+      if (!sameMatrix(was.frame, frame) || was.zPosition !== z) {
+        this.native.setLayerProps(state.box, {
+          frame,
+          masksToBounds: true,
+          zPosition: z,
+        });
+        state.boxProps = { frame, zPosition: z };
+      }
+    }
+    const ox = state.box ? clip.x : 0;
+    const oy = state.box ? clip.y : 0;
     const next = {
       bounds: [0, 0, rect.width / s, rect.height / s],
       anchorPoint: [
         (origin.x - rect.x) / rect.width,
         (origin.y - rect.y) / rect.height,
       ],
-      position: [origin.x / s, origin.y / s],
-      zPosition: z,
+      position: [(origin.x - ox) / s, (origin.y - oy) / s],
+      zPosition: state.box ? 0 : z,
       opacity: Math.min(1, Math.max(0, sprite.opacity ?? 1)),
       matrix: m,
     };
@@ -552,7 +595,7 @@ export class SpriteLayers {
   destroy() {
     for (const lifted of this.hosts.values()) {
       for (const state of lifted.values()) {
-        this.native.removeFromSuperlayer(state.layer);
+        this.native.removeFromSuperlayer(state.box ?? state.layer);
         state.raster.release(this.native);
         for (const run of state.runs.values()) this._ends().delete(run.caId);
       }

package/src/components/Select.js

@@ -143,6 +143,33 @@ const TRIGGER_PAD_LEFT = 10;
 // (`nodes/scrollbars.js`, SCROLLBAR_WIDTH), so a menu that scrolls reserves the room
 const SCROLLBAR_WIDTH = 6;
 
+// The family a caption's style names, for the platform's menu: the first of
+// a CSS list, unquoted, and nothing for a generic one, which is the menu
+// font's own to answer.
+const GENERIC_FAMILIES = new Set([
+  'sans-serif',
+  'serif',
+  'monospace',
+  'cursive',
+  'fantasy',
+  'system-ui',
+  'ui-sans-serif',
+  'ui-serif',
+  'ui-monospace',
+  '-apple-system',
+  'blinkmacsystemfont',
+]);
+function menuFamily(family) {
+  if (typeof family !== 'string') return undefined;
+  const first = family
+    .split(',')[0]
+    .trim()
+    .replace(/^["']|["']$/g, '');
+  return first && !GENERIC_FAMILIES.has(first.toLowerCase())
+    ? first
+    : undefined;
+}
+
 function normalizeOption(option) {
   return typeof option === 'object' && option !== null
     ? option
@@ -291,6 +318,17 @@ function Option({
  * caption's `fontSize` is read back: the chevron is as tall as the capitals
  * beside it. Any slot also chooses the drawn trigger over the platform's
  * popup bezel, whose pixels no style reaches.
+ *
+ * `nativeMenu` is the menu's half of `native`: where the backend drops a
+ * control's menu as the platform's own (`app.nativePopUpMenus`, macOS), the
+ * list is that menu — the chosen row over the trigger, the platform's
+ * tracking, type-select and VoiceOver — rather than a `<popup>` drawn to
+ * look like it. It follows the trigger by default, so a select under the
+ * native bezel gets the native menu and a drawn one keeps the drawn menu;
+ * `true` asks for the platform's menu under a drawn trigger too, which is
+ * what a browser does with a `<select>` a page styled, and `false` keeps the
+ * drawn one. A drawn trigger's menu is set at the caption's size, in the
+ * family its style names when the system has it.
  */
 export function Select({
   value,
@@ -299,6 +337,7 @@ export function Select({
   name,
   placeholder = 'Select…',
   native,
+  nativeMenu,
   style,
   labelStyle,
   chevronStyle,
@@ -308,11 +347,20 @@ export function Select({
   const app = useAppOrNull();
   const styled = Boolean(labelStyle || chevronStyle);
   const nativeControls = useNativeControls(styled ? false : native);
+  // the platform's own menu, where there is one and this select wants it
+  const platformMenu =
+    (nativeMenu ?? nativeControls) && Boolean(app?.nativePopUpMenus);
   // The size the caption is set in, where its slot names one: the chevron is
   // measured against those capitals, and an `<Icon>`'s size does not inherit.
   const ownSize = flattenStyle(labelStyle).fontSize;
   const captionSize = typeof ownSize === 'number' ? ownSize : theme.fontSize;
   const [open, setOpen] = useState(false);
+  // The platform's menu, while it is down: its cancel function, and whether
+  // it is open, for the trigger's open look and `aria-expanded`.
+  const platformRef = useRef(null);
+  const [platformOpen, setPlatformOpen] = useState(false);
+  // a menu is down, whichever one: the trigger's open look follows it
+  const expanded = open || platformOpen;
   const [anchor, setAnchor] = useState(null);
   const [focused, setFocused] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
@@ -387,8 +435,48 @@ export function Select({
     };
   };
 
-  const close = () => setOpen(false);
+  const close = () => {
+    setOpen(false);
+    platformRef.current?.();
+  };
+  // The platform's menu, dropped from the trigger: the same options, the
+  // current one placed over it. Its answer is a pick like a row's.
+  const openPlatformMenu = () => {
+    const node = triggerRef.current;
+    const wnd = node?.root?.window;
+    if (!node || !wnd || platformRef.current) return;
+    const chosen = normalized.findIndex((o) => o.value === value);
+    const family = menuFamily(flattenStyle(labelStyle).fontFamily);
+    setPlatformOpen(true);
+    platformRef.current = app.popUpMenu(
+      wnd,
+      {
+        items: normalized.map((o, i) => ({
+          id: i + 1,
+          title: String(o.label),
+        })),
+        frame: [node.abs.x, node.abs.y, node.abs.width, node.abs.height],
+        ...(chosen >= 0 && { selected: chosen + 1 }),
+        // under the bezel the menu is the bezel's, at the menu font's size
+        ...(!nativeControls && { fontSize: captionSize }),
+        ...(!nativeControls && family && { fontFamily: family }),
+        // the theme's, as the bezel's appearance is
+        appearance: theme.scheme === 'dark' ? 'dark' : 'light',
+        rtl: node.direction === 'rtl',
+      },
+      (id) => {
+        platformRef.current = null;
+        setPlatformOpen(false);
+        const option = id != null ? normalized[id - 1] : null;
+        if (option && option.value !== value) emit(option.value);
+      },
+    );
+  };
   const openMenu = () => {
+    if (platformMenu) {
+      openPlatformMenu();
+      return;
+    }
     const node = triggerRef.current;
     if (!node) return;
     const rect = measureAnchor(menuAnchorOptions());
@@ -398,7 +486,9 @@ export function Select({
     setActiveIndex(selected >= 0 ? selected : 0);
     setOpen(true);
   };
-  const toggle = () => (open ? close() : openMenu());
+  const toggle = () => (expanded ? close() : openMenu());
+  // a menu still down when the select goes is taken with it
+  useEffect(() => () => platformRef.current?.(), []);
 
   // keeps the menu under the trigger for as long as it is open: a scrolled
   // ancestor, the trigger's own layout moving it (a neighbouring field
@@ -491,7 +581,7 @@ export function Select({
     {
       theme,
       role: 'combobox',
-      'aria-expanded': open,
+      'aria-expanded': expanded,
       'aria-haspopup': 'listbox',
       ref: triggerRef,
       focusable: true,
@@ -546,7 +636,8 @@ export function Select({
               paddingRight: 10,
               borderWidth: theme.borderWidth,
               borderRadius: theme.radius,
-              borderColor: focused || open ? theme.borderFocus : theme.border,
+              borderColor:
+                focused || expanded ? theme.borderFocus : theme.border,
               backgroundColor: theme.surface,
             },
         // Hover and press belong to the trigger while it is *shut*: they say
@@ -560,7 +651,7 @@ export function Select({
         // not overwrite. The only way for open to win is to not be competing.
         // (In native mode the wash overlay below answers the press instead.)
         !nativeControls &&
-          !open && {
+          !expanded && {
             ':hover': { backgroundColor: theme.surfaceHover },
             ':active': { backgroundColor: theme.surfaceActive },
           },
@@ -576,7 +667,7 @@ export function Select({
     nativeControls &&
       h(Bezel, {
         kind: 'popup',
-        pressed: open,
+        pressed: expanded,
         enabled: true,
         style: ABS_FILL,
       }),
@@ -605,7 +696,7 @@ export function Select({
           style: [
             ABS_FILL,
             { borderRadius: 6 },
-            !open && { ':active': { backgroundColor: pressWash(theme) } },
+            !expanded && { ':active': { backgroundColor: pressWash(theme) } },
           ],
         })
       : h(Icon, {