@dumiflex/wp-kit 0.4.0 → 0.6.0

package/src/Popover.vue

@@ -16,9 +16,15 @@
  * element don't count as outside, so it can toggle the panel itself.
  *
  *   <Popover :open="!!cell" :anchor="cell?.el" label="Cell rule" @update:open="cell = null">…</Popover>
+ *
+ * `variant="menu"` draws the panel as a menu (`menu.css`, the look Select's
+ * list, ContextMenu and Combobox share): tighter padding, 4px from the
+ * trigger, above modals, and it closes once its trigger scrolls out of view.
+ * Every panel is capped at `maxHeight` and at the room on its side, and
+ * scrolls past that instead of covering its trigger.
  */
 import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from "vue";
-import { placeFloating, viewportSize, type Placement, type Side } from "./floating";
+import { placeFloating, roomOn, viewportSize, type Placement, type Side } from "./floating";
 import { provideFloatingLayer, useFloatingChild } from "./floating-layer";
 
 const props = withDefaults(defineProps<{
@@ -34,14 +40,21 @@ const props = withDefaults(defineProps<{
   role?: "dialog" | "menu" | "listbox" | "group" | undefined;
   /** Place the panel against this element instead of the trigger slot. */
   anchor?: HTMLElement | null | undefined;
-}>(), { placement: "bottom-start", autofocus: true, role: "dialog", anchor: null });
+  /** "menu" for a list of choices (Select, Combobox): the shared menu look. */
+  variant?: "panel" | "menu" | undefined;
+  /** Tallest the panel grows, in px, before it scrolls. */
+  maxHeight?: number | undefined;
+}>(), { placement: "bottom-start", autofocus: true, role: "dialog", anchor: null, variant: "panel" });
 
 const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
 
 const id = `wp-popover-${useId()}`;
 const anchorEl = ref<HTMLElement | null>(null);
 const panelEl = ref<HTMLElement | null>(null);
-const pos = ref<{ x: number; y: number; side: Side; minWidth?: number | undefined }>({ x: -9999, y: -9999, side: "bottom" });
+const pos = ref<{ x: number; y: number; side: Side; minWidth?: number | undefined; maxHeight?: number | undefined }>({ x: -9999, y: -9999, side: "bottom" });
+const isMenu = computed(() => props.variant === "menu");
+/** A short panel still shows a few rows when the room on both sides is tight. */
+const MIN_HEIGHT = 80;
 
 const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), '
   + 'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -68,10 +81,39 @@ function place(): void {
   const p = panelEl.value;
   if (!t || !p) return;
   const r = t.getBoundingClientRect();
-  const at = placeFloating(r, { width: Math.max(p.offsetWidth, props.matchWidth ? r.width : 0), height: p.offsetHeight }, viewportSize(), {
-    placement: props.placement,
-  });
-  pos.value = { ...at, minWidth: props.matchWidth ? r.width : undefined };
+  const view = viewportSize();
+  const opts = { placement: props.placement, gap: isMenu.value ? 4 : 6 };
+  const width = Math.max(p.offsetWidth, props.matchWidth ? r.width : 0);
+  // The content's own height (scrollHeight ignores the cap set last time),
+  // so a panel that was squeezed can grow back when there is room again.
+  const borders = p.offsetHeight - p.clientHeight;
+  const natural = Math.min(p.scrollHeight + borders, props.maxHeight ?? Infinity);
+  const first = placeFloating(r, { width, height: natural }, view, opts);
+  const fits = Math.max(MIN_HEIGHT, roomOn(first.side, r, view, opts));
+  const height = Math.min(natural, fits);
+  const at = height < natural ? placeFloating(r, { width, height }, view, opts) : first;
+  pos.value = {
+    ...at,
+    minWidth: props.matchWidth ? r.width : undefined,
+    maxHeight: Math.min(props.maxHeight ?? Infinity, fits),
+  };
+}
+
+/** True once no part of the trigger is on screen. */
+function triggerGone(): boolean {
+  const t = trigger();
+  if (!t) return false;
+  const r = t.getBoundingClientRect();
+  const view = viewportSize();
+  return r.bottom < 0 || r.top > view.height || r.right < 0 || r.left > view.width;
+}
+
+function onScroll(ev: Event): void {
+  // The panel's own scrolling changes nothing about where it sits.
+  if (ev.target instanceof Node && panelEl.value?.contains(ev.target)) return;
+  // A menu whose trigger has scrolled away has nothing left to follow.
+  if (isMenu.value && triggerGone()) { setOpen(false); return; }
+  place();
 }
 
 // A Select list, menu or Popover opened from inside this panel is part of it.
@@ -103,7 +145,7 @@ function listen(on: boolean): void {
   window[m]("pointerdown", onPointerDown as EventListener, true);
   window[m]("keydown", onKeydown as EventListener, true);
   window[m]("resize", place);
-  window[m]("scroll", place, true);
+  window[m]("scroll", onScroll, true);
 }
 
 watch(() => props.open, async (v) => {
@@ -135,17 +177,26 @@ defineExpose({ place });
       :id="id"
       ref="panelEl"
       class="wp-popover"
+      :class="{ 'wp-menu': isMenu }"
       :data-side="pos.side"
+      :data-variant="variant"
       :role="role"
       :aria-label="label"
       tabindex="-1"
-      :style="{ left: `${pos.x}px`, top: `${pos.y}px`, minWidth: pos.minWidth ? `${pos.minWidth}px` : undefined }"
+      :style="{
+        left: `${pos.x}px`,
+        top: `${pos.y}px`,
+        minWidth: pos.minWidth ? `${pos.minWidth}px` : undefined,
+        maxHeight: pos.maxHeight !== undefined && Number.isFinite(pos.maxHeight) ? `${pos.maxHeight}px` : undefined,
+      }"
     >
       <slot :close="() => setOpen(false)" />
     </div>
   </Teleport>
 </template>
 
+<style scoped src="./menu.css"></style>
+
 <style>
 @layer wp-extension {
   .wp-popover-anchor { display: inline-flex; }
@@ -155,12 +206,15 @@ defineExpose({ place });
     max-width: min(420px, calc(100vw - 16px));
     max-height: calc(100vh - 16px);
     overflow: auto;
-    padding: var(--wp-space-3);
+    padding: calc(var(--wp-space-3) + 1px); /* plus the 1px the ring stands in for */
     background: var(--wp-bg-2);
     color: var(--wp-text);
-    border: 1px solid var(--wp-border-strong);
+    /* The outline is an inset ring, not a border: these rules are layered, and
+       a host's unlayered reset (Tailwind 3's preflight sets border-width: 0
+       on every element) would beat a border. Nothing resets box-shadow. */
+    border: 0;
     border-radius: var(--wp-radius);
-    box-shadow: var(--wp-shadow-md);
+    box-shadow: inset 0 0 0 1px var(--wp-border-strong), var(--wp-shadow-md);
     font-family: var(--wp-font-sans);
     font-size: var(--wp-text-sm);
     outline: none;
@@ -169,6 +223,8 @@ defineExpose({ place });
   @keyframes wp-popover-in {
     from { opacity: 0; transform: translateY(-2px); }
   }
+  /* A menu is as wide as its longest row (up to 620px), not a 420px panel. */
+  .wp-popover[data-variant="menu"] { max-width: min(620px, calc(100vw - 16px)); }
   .wp-popover[data-side="top"] { animation-name: wp-popover-in-up; }
   @keyframes wp-popover-in-up {
     from { opacity: 0; transform: translateY(2px); }

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/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/Skeleton.vue

@@ -15,8 +15,10 @@
 import { computed } from "vue";
 
 const props = withDefaults(defineProps<{
-  /** line: text lines (the last one shorter). block: a box. circle: an avatar or icon. row: an icon, a title and a hint line, like a list row. */
-  shape?: "line" | "block" | "circle" | "row" | undefined;
+  /** line: text lines (the last one shorter). block: a box. circle: an avatar or icon. row: an icon, a title and a hint line, like a list row. chip: a run of pills, like a tag or filter row. */
+  shape?: "line" | "block" | "circle" | "row" | "chip" | undefined;
+  /** The icon a row starts with: an avatar (circle, default) or an icon tile (square). */
+  icon?: "circle" | "square" | undefined;
   /** How many lines or rows. */
   lines?: number | undefined;
   /** CSS width of a line, block or circle. */
@@ -25,9 +27,11 @@ const props = withDefaults(defineProps<{
   height?: string | undefined;
   /** Say "Loading…" to screen readers with this text. */
   label?: string | undefined;
-}>(), { shape: "line", lines: 1, width: undefined, height: undefined, label: undefined });
+}>(), { shape: "line", lines: 1, icon: "circle", width: undefined, height: undefined, label: undefined });
 
 const count = computed(() => Math.max(1, Math.floor(props.lines)));
+/** Pill widths that read as different words. */
+const CHIP_WIDTHS = ["64px", "48px", "80px", "56px", "72px", "40px"];
 /** The last of several lines is shorter, like the end of a paragraph. */
 const lineWidth = (i: number): string | undefined =>
   props.width ?? (count.value > 1 && i === count.value - 1 ? "60%" : undefined);
@@ -41,9 +45,17 @@ const lineWidth = (i: number): string | undefined =>
     </template>
     <span v-else-if="shape === 'block'" class="wp-skeleton__bone wp-skeleton__block" :style="{ width, height }" aria-hidden="true" />
     <span v-else-if="shape === 'circle'" class="wp-skeleton__bone wp-skeleton__circle" :style="{ width: width ?? height, height: height ?? width }" aria-hidden="true" />
+    <span v-else-if="shape === 'chip'" class="wp-skeleton__chips" aria-hidden="true">
+      <span
+        v-for="i in count"
+        :key="i"
+        class="wp-skeleton__bone wp-skeleton__chip"
+        :style="{ width: width ?? CHIP_WIDTHS[(i - 1) % CHIP_WIDTHS.length], height }"
+      />
+    </span>
     <template v-else>
       <span v-for="i in count" :key="i" class="wp-skeleton__row" aria-hidden="true">
-        <span class="wp-skeleton__bone wp-skeleton__circle" />
+        <span class="wp-skeleton__bone" :class="icon === 'square' ? 'wp-skeleton__tile' : 'wp-skeleton__circle'" />
         <span class="wp-skeleton__row-text">
           <span class="wp-skeleton__bone wp-skeleton__line" :style="{ width: i % 2 ? '55%' : '42%' }" />
           <span class="wp-skeleton__bone wp-skeleton__line wp-skeleton__line--hint" :style="{ width: i % 2 ? '80%' : '68%' }" />
@@ -68,7 +80,11 @@ const lineWidth = (i: number): string | undefined =>
 .wp-skeleton__line { width: 100%; height: 0.75em; }
 .wp-skeleton__line--hint { height: 0.6em; opacity: 0.7; }
 .wp-skeleton__block { width: 100%; height: 64px; border-radius: var(--wp-radius); }
-.wp-skeleton__circle { flex: none; width: 28px; height: 28px; border-radius: 50%; /* round: stands in for an avatar */ }
+.wp-skeleton__circle { flex: none; width: 28px; height: 28px; border-radius: min(50%, var(--wp-radius-cap, 999px)); }
+.wp-skeleton__tile { flex: none; width: 28px; height: 28px; border-radius: var(--wp-radius-sm); }
+.wp-skeleton__chips { display: flex; flex-wrap: wrap; gap: var(--wp-space-2); }
+/* A Chip's height (xs, 19px); pass height for a sm (24px) filter row. */
+.wp-skeleton__chip { height: 19px; border-radius: var(--wp-radius-cap, 999px); }
 .wp-skeleton__row { display: flex; align-items: center; gap: var(--wp-space-4); padding: var(--wp-space-2) 0; }
 .wp-skeleton__row-text { display: flex; flex-direction: column; gap: var(--wp-space-2); flex: 1; min-width: 0; }
 .wp-skeleton__sr {