@dumiflex/wp-kit 0.5.0 → 0.7.0

package/src/RadioGroup.vue

@@ -143,16 +143,17 @@ function onKeydown(ev: KeyboardEvent, at: T): void {
 .wp-radio-group__opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
 .wp-radio-group__dot {
   position: relative; flex: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: 1px;
-  border: 1.5px solid var(--wp-border-strong); border-radius: 50%; /* round: a radio is round in every look */ background: var(--wp-bg-1);
+  /* Whole-pixel border and inset, so the dot sits dead centre (a square look shows any half pixel). */
+  border: 2px solid var(--wp-border-strong); border-radius: min(50%, var(--wp-radius-cap, 999px)); background: var(--wp-bg-1);
   transition: border-color var(--wp-motion-hover);
 }
-.wp-radio-group[data-size="sm"] .wp-radio-group__dot { width: 13px; height: 13px; }
+.wp-radio-group[data-size="sm"] .wp-radio-group__dot { width: 12px; height: 12px; border-width: 1px; }
 .wp-radio-group__opt:hover:not([aria-disabled="true"]) .wp-radio-group__dot { border-color: var(--wp-accent); }
 .wp-radio-group__opt[data-checked] .wp-radio-group__dot { border-color: var(--wp-accent); }
 .wp-radio-group__opt[data-checked] .wp-radio-group__dot::after {
-  content: ""; position: absolute; inset: 3px; border-radius: 50%; /* round: radio dot */ background: var(--wp-accent);
+  content: ""; position: absolute; inset: 3px; border-radius: min(50%, var(--wp-radius-cap, 999px)); background: var(--wp-accent);
 }
-.wp-radio-group[data-size="sm"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot::after { inset: 2.5px; }
+.wp-radio-group[data-size="sm"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot::after { inset: 2px; }
 /* A picked option that is disabled turns grey, so it can't pass for a live one. */
 .wp-radio-group__opt[aria-disabled="true"][data-checked] .wp-radio-group__dot { border-color: var(--wp-text-dim); }
 .wp-radio-group__opt[aria-disabled="true"][data-checked] .wp-radio-group__dot::after { background: var(--wp-text-dim); }

package/src/RichText.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/**
+ * Inline rich-text renderer for plain-text prose (post descriptions, notes).
+ *
+ *   <p class="my-description"><RichText :text="post.description" /></p>
+ *
+ * Turns URLs into links (new tab, `noopener noreferrer`) and `$var` /
+ * `@{ref}` mentions into `<code>` chips, WITHOUT `v-html`: every segment from
+ * `parseRichText` (linkify.ts) is rendered as a Vue node, so the output is
+ * XSS-safe by construction.
+ *
+ * Prose, not a grammar value: `{a|b}` stays text and a ref's body may be any
+ * words. A wildcard value (picks, refs resolved to names) is TokenizedValue.
+ *
+ * Renders INLINE (no wrapper element), so it drops into the host's own
+ * paragraph and inherits its typography.
+ */
+import { computed } from "vue";
+import { parseRichText } from "./linkify";
+
+const props = defineProps<{ text: string }>();
+
+const segments = computed(() => parseRichText(props.text));
+</script>
+
+<template>
+  <template
+    v-for="(seg, idx) in segments"
+    :key="idx"
+  >
+    <a
+      v-if="seg.kind === 'link'"
+      class="wp-rich-text__link"
+      :href="seg.href"
+      target="_blank"
+      rel="noopener noreferrer"
+    >{{ seg.text }}</a>
+    <code
+      v-else-if="seg.kind === 'code'"
+      class="wp-rich-text__code"
+    >{{ seg.text }}</code>
+    <template v-else>{{ seg.text }}</template>
+  </template>
+</template>
+
+<style scoped>
+.wp-rich-text__link {
+  color: var(--wp-accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.wp-rich-text__code {
+  font-family: var(--wp-font-mono);
+  font-size: 0.9em;
+  background: var(--wp-bg-3);
+  color: var(--wp-accent-text);
+  padding: 1px 6px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  border: 1px solid var(--wp-border);
+}
+</style>

package/src/SearchInput.vue

@@ -186,7 +186,7 @@ defineExpose({
   color: var(--wp-text-dim);
   cursor: pointer;
 }
-.wp-search__clear .pi { font-size: 9px; line-height: 1; }
+.wp-search__clear .pi { font-size: 10px; line-height: 1; }
 .wp-search__clear:hover { color: var(--wp-text); background: var(--wp-bg-3); }
 .wp-search__clear:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
 </style>

package/src/Select.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, nextTick, ref, useId, watch } from "vue";
 import Icon, { ICON_SM } from "./Icon.vue";
+import Popover from "./Popover.vue";
 
 // Declared in `./select-types` so plain `.ts` helpers can build option lists
 // (a `.ts` importer only sees the `*.vue` ambient shim). Re-exported here so
 // existing `from "./Select.vue"` imports keep resolving.
 import type { SelectOption } from "./select-types";
-import { useFloatingChild } from "./floating-layer";
 export type { SelectOption };
 
 interface Props {
@@ -31,21 +31,16 @@ const emit = defineEmits<{
   (e: "change", v: string | number | null): void;
 }>();
 
-const wrapRef = ref<HTMLDivElement | null>(null);
+const listId = `wp-select-list-${useId()}`;
 const btnRef = ref<HTMLButtonElement | null>(null);
 const open = ref(false);
-const flip = ref(false);
 const active = ref(0);
 /** Type-to-filter query, built from printable keystrokes while the menu
  *  is open. Reset every time the menu opens or closes. */
 const query = ref("");
-/** The teleported menu, so the outside-click guard can exclude it. */
-const menuRef = ref<HTMLElement | null>(null);
-// Inside a Popover, clicks and Escape on the list are the list's own.
-useFloatingChild(() => menuRef.value);
-
-/** Fixed-position coordinates for the teleported menu. */
-const menuStyle = ref<Record<string, string>>({});
+// The list floats in a kit Popover (variant "menu"): it places, flips, fits
+// and follows the trigger, closes on a press outside or Escape, and counts as
+// part of a Popover the Select sits in. The keys stay on the trigger.
 
 const selected = computed(() => props.options.find((o) => o.value === props.modelValue) ?? null);
 
@@ -107,108 +102,18 @@ const composedAriaLabel = computed<string | undefined>(() => {
   return props.ariaLabel;
 });
 
-function onDocClick(e: MouseEvent) {
-  const t = e.target as Node | null;
-  if (!t) return;
-  // Close when the press is outside the trigger AND outside the menu. The menu
-  // is teleported to <body>, so it is NOT inside `wrapRef` — checking only the
-  // trigger meant a mousedown on the menu's own scrollbar counted as "outside"
-  // and dismissed it. The wheel worked, the scrollbar did not.
-  if (wrapRef.value?.contains(t)) return;
-  if (menuRef.value?.contains(t)) return;
-  open.value = false;
-}
-
-onMounted(() => {
-  document.addEventListener("mousedown", onDocClick, true);
-});
-onBeforeUnmount(() => {
-  document.removeEventListener("mousedown", onDocClick, true);
-  window.removeEventListener("scroll", followOnScroll, true);
-  window.removeEventListener("resize", reposition);
-});
-
-/** Any scroll in the page moves the menu with its trigger (like every kit
- *  overlay), instead of closing it or leaving it where the trigger used to
- *  be. Only once the trigger has scrolled right out of view does it close. */
-function followOnScroll(e: Event) {
-  // The menu's own list scroll changes nothing about where it sits.
-  const t = e.target as Element | null;
-  if (t && typeof t.closest === "function" && t.closest(".wp-select__menu")) return;
-  if (!open.value || !btnRef.value) return;
-  const r = btnRef.value.getBoundingClientRect();
-  if (r.bottom < 0 || r.top > window.innerHeight || r.right < 0 || r.left > window.innerWidth) {
-    open.value = false;
-    return;
-  }
-  computeMenuStyle();
-}
-function reposition() {
-  if (!open.value || !btnRef.value) return;
-  computeMenuStyle();
-}
-
-function computeMenuStyle() {
-  if (!btnRef.value) return;
-  const rect = btnRef.value.getBoundingClientRect();
-  // Ideal menu height = enough room for every option (~36px each + 12px
-  // padding), capped at 240px so a huge library doesn't blanket the
-  // viewport. The actual rendered height also gets capped by available
-  // screen space below — see `effectiveMaxHeight` — so the menu never
-  // bleeds past the viewport edge.
-  const idealHeight = Math.min(240, props.options.length * 36 + 12);
-  const gap = 4;       // spacing between trigger and menu
-  const margin = 8;    // breathing room from the viewport edge
-  const spaceBelow = window.innerHeight - rect.bottom - gap - margin;
-  const spaceAbove = rect.top - gap - margin;
-
-  // Flip above only when there isn't enough room below AND there's
-  // more room above than below — otherwise the menu still grows under
-  // the trigger and `effectiveMaxHeight` clamps it to whatever fits.
-  flip.value = spaceBelow < idealHeight && spaceAbove > spaceBelow;
-
-  const available = flip.value ? spaceAbove : spaceBelow;
-  // Floor at 80px so a tightly-cramped row (e.g. inside a modal near the
-  // viewport edge) still surfaces a usable scrolling list rather than
-  // collapsing to a 1-row sliver.
-  const effectiveMaxHeight = Math.max(80, Math.min(idealHeight, available));
-
-  menuStyle.value = flip.value
-    ? {
-        position: "fixed",
-        bottom: (window.innerHeight - rect.top + gap) + "px",
-        top: "auto",
-        left: rect.left + "px",
-        minWidth: rect.width + "px",
-        maxHeight: effectiveMaxHeight + "px",
-      }
-    : {
-        position: "fixed",
-        top: (rect.bottom + gap) + "px",
-        bottom: "auto",
-        left: rect.left + "px",
-        minWidth: rect.width + "px",
-        maxHeight: effectiveMaxHeight + "px",
-      };
-}
-
 watch(open, (v) => {
-  if (!v) {
-    query.value = "";
-    window.removeEventListener("scroll", followOnScroll, true);
-    window.removeEventListener("resize", reposition);
-    return;
-  }
-  if (!btnRef.value) return;
   query.value = "";
-  computeMenuStyle();
+  if (!v) return;
   // Highlight currently-selected option (or first).
   const idx = props.options.findIndex((o) => o.value === props.modelValue);
   active.value = idx >= 0 ? idx : 0;
-  window.addEventListener("scroll", followOnScroll, true);
-  window.addEventListener("resize", reposition);
 });
 
+function onOpen(v: boolean) {
+  open.value = v;
+}
+
 function toggle() {
   if (props.disabled) return;
   open.value = !open.value;
@@ -246,6 +151,9 @@ function onKeydown(e: KeyboardEvent) {
   } else if (e.key === "ArrowUp") {
     e.preventDefault();
     if (list.length) active.value = (active.value - 1 + list.length) % list.length;
+  } else if (e.key === "Home" || e.key === "End") {
+    e.preventDefault();
+    if (list.length) active.value = e.key === "Home" ? 0 : list.length - 1;
   } else if (e.key === "Enter") {
     e.preventDefault();
     const opt = list[active.value];
@@ -264,7 +172,7 @@ function onKeydown(e: KeyboardEvent) {
 </script>
 
 <template>
-  <div ref="wrapRef" class="wp-select-wrap">
+  <div class="wp-select-wrap">
     <button
       ref="btnRef"
       type="button"
@@ -273,6 +181,7 @@ function onKeydown(e: KeyboardEvent) {
       :aria-label="composedAriaLabel"
       :aria-expanded="open"
       :aria-haspopup="'listbox'"
+      :aria-controls="open ? listId : undefined"
       :aria-invalid="error || undefined"
       data-test="select-trigger"
       @click="toggle"
@@ -332,15 +241,27 @@ function onKeydown(e: KeyboardEvent) {
       <Icon class="wp-select__chevron" name="chevron-down" />
     </button>
 
-    <!-- Menu teleported to <body> so it escapes any overflow:hidden ancestor
-         and renders above the sticky footer regardless of z-index stacking contexts. -->
-    <Teleport to="body">
+    <!-- The list floats on <body> in a menu Popover, so it escapes any
+         overflow:hidden ancestor and clears every modal. -->
+    <!-- Popover's autofocus is turned OFF: focus stays on the trigger, which has the keys. -->
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -->
+    <Popover
+      :open="open && !disabled"
+      :anchor="btnRef"
+      variant="menu"
+      role="group"
+      match-width
+      :max-height="240"
+      :autofocus="false"
+      :label="ariaLabel ?? placeholder"
+      @update:open="onOpen"
+    >
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
       <ul
-        v-if="open"
-        ref="menuRef"
+        :id="listId"
         class="wp-select__menu"
         role="listbox"
-        :style="menuStyle"
+        :aria-label="ariaLabel ?? placeholder"
         data-test="select-menu"
       >
         <li
@@ -364,7 +285,7 @@ function onKeydown(e: KeyboardEvent) {
         <li
           v-for="(opt, i) in filtered"
           :key="String(opt.value)"
-          class="wp-select__option"
+          class="wp-select__option wp-menu__item"
           role="option"
           tabindex="-1"
           :aria-selected="opt.value === modelValue"
@@ -407,7 +328,7 @@ function onKeydown(e: KeyboardEvent) {
           style="padding:6px 12px;opacity:0.55;"
         >No matches</li>
       </ul>
-    </Teleport>
+    </Popover>
   </div>
 </template>
 
@@ -415,14 +336,11 @@ function onKeydown(e: KeyboardEvent) {
   Self-contained styles so <Select> works everywhere it's used — including the
   ComfyUI CANVAS widget bundle, which does NOT load the manager-global
   tokens.css (that's why an unstyled Select rendered behind the modal there).
-  Class names stay wp-select* (global-namespaced, no collision); the menu is
-  teleported to <body>, so these are UNSCOPED — same pattern as the
-  RichTextInput autocomplete (wp-rt-suggestions), sharing its POPOVER tier
-  (10020) so the menu clears every modal overlay — those run up to 10010, so
-  the previous 9999 rendered the menu behind any modal above that. Vars fall
-  back to literals for the few the
-  canvas theme doesn't define (--wp-input-h[-sm], --wp-focus-ring). In the SPA
-  these duplicate tokens.css with identical rules — harmless.
+  Class names stay wp-select* (global-namespaced, no collision). The list's
+  look is the shared menu sheet (menu.css, scoped, at the end), whose layer
+  (10020) clears every modal overlay (those run up to 10010). Vars fall back
+  to literals for the few the canvas theme doesn't define (--wp-input-h[-sm],
+  --wp-focus-ring).
 -->
 <style>
 .wp-select-wrap { position: relative; display: inline-block; width: 100%; }
@@ -465,7 +383,7 @@ function onKeydown(e: KeyboardEvent) {
   display: flex; align-items: center; gap: 6px;
   flex: 1; min-width: 0; overflow: hidden;
 }
-.wp-select__dot { width: 8px; height: 8px; border-radius: 50%; /* round: colour dot */ flex-shrink: 0; display: inline-block; }
+.wp-select__dot { width: 8px; height: 8px; border-radius: min(50%, var(--wp-radius-cap, 999px)); flex-shrink: 0; display: inline-block; }
 /* Empty stand-in that holds the icon/dot column open for options without one.
  * Width is set inline from `markerWidth`, since it depends on what the list
  * actually contains. */
@@ -510,7 +428,7 @@ function onKeydown(e: KeyboardEvent) {
   font-size: 10px;
   color: var(--wp-text-dim);
 }
-.wp-select__chevron { color: var(--wp-text-dim); font-size: 11px; margin-left: 6px; flex-shrink: 0; }
+.wp-select__chevron { color: var(--wp-text-dim); font-size: 12px; margin-left: 6px; flex-shrink: 0; }
 /* Clear ✕: a plain glyph kept well clear of the chevron (a 1px rule and
  * 8px either side) so it is not mis-clicked, and shown only while the
  * field is hovered or focused. The ::after gives it a 20px click target. */
@@ -535,44 +453,20 @@ function onKeydown(e: KeyboardEvent) {
 @media (hover: none) { .wp-select__clear { opacity: 1; } }
 .wp-spacer { flex: 1 1 auto; }
 
-/* Menu — teleported to <body>. z-index 9999 matches wp-rt-suggestions, which
- * already renders above the canvas modals. */
+/* The list. Its panel (background, border, corners, padding, shadow, layer)
+ * and its rows' padding, corners, text and states are the shared menu look:
+ * Popover's `variant="menu"` and `menu.css` below. */
 .wp-select__menu {
   /* One line box for an option label, in px so a leading dot/icon can be
    * centred against it without the em-resolves-against-its-own-font-size trap
-   * (the icon runs at 12px, the label at 12.5px, so `1.5em` means two
-   * different heights depending on which element it is declared on).
-   * The menu teleports to <body>, so it carries its own copy. */
-  --wp-select-line-h: 18.75px;
-  background: var(--wp-bg-3);
-  border: 1px solid var(--wp-border-strong);
-  border-radius: min(7px, var(--wp-radius-cap, 999px));
-  box-shadow: var(--wp-shadow-md);
-  z-index: 10020;
-  padding: 4px;
-  max-height: 240px;
-  overflow: auto;
+   * (the icon runs at 12px and so does the label; `1.5em` on the icon would
+   * still measure against a different box). */
+  --wp-select-line-h: 18px;
   list-style: none;
   margin: 0;
+  padding: 0;
 }
-.wp-select__option {
-  display: flex; align-items: center; gap: 6px;
-  padding: 6px 8px;
-  border-radius: min(6px, var(--wp-radius-cap, 999px));
-  color: var(--wp-text-muted);
-  cursor: pointer;
-  font-size: 12.5px;
-  user-select: none;
-}
-.wp-select__option:hover { background: var(--wp-bg-4); color: var(--wp-text); }
-.wp-select__option[data-active="true"] {
-  background: color-mix(in oklab, var(--wp-accent-500) 20%, transparent);
-  color: var(--wp-text);
-}
-.wp-select__option[data-selected="true"] {
-  background: color-mix(in oklab, var(--wp-accent-500) 18%, transparent);
-  color: var(--wp-text);
-}
+.wp-select__option { display: flex; gap: 6px; }
 /* Option rows WRAP (to two lines) rather than ellipsis-clipping at the first.
  * The menu is up to 620px wide and these values run long — a constraint
  * exception source is a whole phrase plus a nested `@ref` — so clipping them
@@ -640,5 +534,6 @@ function onKeydown(e: KeyboardEvent) {
   white-space: normal !important;
   overflow-wrap: anywhere;
 }
-.wp-select__menu { max-width: min(620px, 92vw); }
 </style>
+
+<style scoped src="./menu.css"></style>

package/src/SelectionBar.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * SelectionBar: the bar over a list while rows are ticked. "3 selected", the
+ * bulk actions (the default slot) and Clear. One bar for every list: the
+ * editors' bulk mode, the moderation queue, a backups list.
+ *
+ *   <SelectionBar v-if="picked.size" :count="picked.size" @clear="picked.clear()">
+ *     <Button variant="danger" size="sm" icon="trash" @click="del">Delete</Button>
+ *   </SelectionBar>
+ *
+ * `#start` sits right after the count (a filter, an option), the default slot
+ * on the right before Clear. `sticky` keeps it at the top of its scroll area
+ * while the list scrolls under it (`--wp-selection-bar-top` moves it below a
+ * fixed header). `noun` says what is selected ("3 options selected"). Escape
+ * inside the bar clears, like Clear; the count is read out as it changes.
+ */
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import Button from "./Button.vue";
+
+const props = withDefaults(defineProps<{
+  count: number;
+  /** What a row is, plural ("options"); left out it says "3 selected". */
+  noun?: string | undefined;
+  /** Stick to the top of the scroll area. */
+  sticky?: boolean | undefined;
+  /** Hide the Clear button (the host clears another way). */
+  hideClear?: boolean | undefined;
+  clearLabel?: string | undefined;
+  /** The toolbar's accessible name. */
+  label?: string | undefined;
+}>(), { noun: undefined, clearLabel: "Clear", label: "Bulk actions" });
+
+const emit = defineEmits<{ clear: [] }>();
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (ev.key !== "Escape" || props.hideClear) return;
+  ev.stopPropagation();
+  emit("clear");
+}
+
+// Bound in code, not as @keydown: the bar is a toolbar of buttons, and the
+// keys come from those buttons (a template handler on it reads to the a11y
+// lint as a click target on a plain element).
+const root = ref<HTMLElement | null>(null);
+onMounted(() => root.value?.addEventListener("keydown", onKeydown));
+onBeforeUnmount(() => root.value?.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="wp-selbar"
+    role="toolbar"
+    :aria-label="label"
+    :data-sticky="sticky || undefined"
+    data-test="selection-bar"
+  >
+    <span class="wp-selbar__count" aria-live="polite" data-test="selection-count">{{ count }}{{ noun ? ` ${noun}` : "" }} selected</span>
+    <slot name="start" />
+    <span class="wp-selbar__spacer" />
+    <slot />
+    <Button v-if="!hideClear" variant="ghost" size="sm" data-test="selection-clear" @click="emit('clear')">{{ clearLabel }}</Button>
+  </div>
+</template>
+
+<style scoped>
+.wp-selbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wp-space-4);
+  padding: var(--wp-space-3) var(--wp-space-5);
+  border: 1px solid color-mix(in oklab, var(--wp-accent) 40%, transparent);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  background: color-mix(in oklab, var(--wp-accent) 12%, var(--wp-bg-2));
+  font-family: var(--wp-font-sans);
+}
+.wp-selbar[data-sticky] {
+  position: sticky;
+  top: var(--wp-selection-bar-top, 0px);
+  z-index: 20;
+}
+.wp-selbar__count {
+  font-size: var(--wp-text-base);
+  font-weight: 600;
+  color: var(--wp-text);
+  white-space: nowrap;
+}
+.wp-selbar__spacer { flex: 1; }
+</style>

package/src/SettingGroup.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/**
+ * SettingGroup: a titled block of SettingRows in one bordered panel, the
+ * rows split by hairlines, so a long settings page reads as a list rather
+ * than a stack of cards.
+ *
+ *   <SettingGroup title="Content" note="Applies to this browser.">
+ *     <SettingRow label="Show NSFW posts" hint="Off by default."><WpSwitch v-model="nsfw" size="md" /></SettingRow>
+ *   </SettingGroup>
+ *
+ * `#title-extra` sits after the title (a Badge, a help link). The panel is a
+ * size container: its rows go to one column when it is narrower than 480px.
+ */
+defineProps<{
+  title?: string | undefined;
+  /** A line under the title. */
+  note?: string | undefined;
+}>();
+</script>
+
+<template>
+  <section class="wp-set-group">
+    <h3 v-if="title" class="wp-set-group__title">
+      {{ title }}<slot name="title-extra" />
+    </h3>
+    <p v-if="note" class="wp-set-group__note">{{ note }}</p>
+    <div class="wp-set-group__panel">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.wp-set-group { margin-bottom: var(--wp-space-7); }
+.wp-set-group__title {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  margin: 0 0 var(--wp-space-3);
+  font-size: var(--wp-text-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--wp-text-dim);
+}
+.wp-set-group__note {
+  margin: 0 0 var(--wp-space-3);
+  font-size: var(--wp-text-sm);
+  color: var(--wp-text-dim);
+}
+.wp-set-group__panel {
+  container: wp-set-group / inline-size;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-lg);
+}
+</style>