@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/Badge.vue

@@ -1,97 +1,97 @@
-<script setup lang="ts">
-/**
- * Badge: a count bubble or a status dot. On its own it sits in the line of
- * text; wrapped around something (a button, an icon, an avatar) it sits on
- * that thing's top-right corner. Works on the canvas and in the manager.
- *
- *   <Badge :count="3" tone="danger" label="3 conflicts"><Button icon="pi-bell" aria-label="Problems" /></Badge>
- *   <Badge dot tone="success" text="Running" />
- *   <Badge dot tone="warn" label="Out of date" />
- *
- * Colour is never the only signal: a dot without `text` needs a `label`,
- * which screen readers read in its place. Counts over `max` read
- * "99+". A count of 0 hides the badge unless `show-zero`.
- */
-import { computed, useSlots } from "vue";
-
-const props = withDefaults(defineProps<{
-  count?: number | undefined;
-  /** Counts above this read "max+". */
-  max?: number | undefined;
-  /** A dot instead of a number. */
-  dot?: boolean | undefined;
-  tone?: "neutral" | "info" | "success" | "warn" | "danger" | "accent" | undefined;
-  /** Visible text after the dot or count (a status line). */
-  text?: string | undefined;
-  /** Name for screen readers when the badge has no text, e.g. "3 conflicts". */
-  label?: string | undefined;
-  /** Show a count of 0 instead of hiding the badge. */
-  showZero?: boolean | undefined;
-  /** Draw the dot as a soft pulse (something is running). */
-  pulse?: boolean | undefined;
-}>(), { count: undefined, max: 99, tone: "accent", text: undefined, label: undefined });
-
-const slots = useSlots();
-const anchored = computed(() => !!slots.default);
-const shown = computed(() => props.dot || (props.count !== undefined && (props.count > 0 || props.showZero)));
-const countText = computed(() =>
-  props.count === undefined ? "" : props.count > props.max ? `${props.max}+` : String(props.count),
-);
-</script>
-
-<template>
-  <span v-if="anchored" class="wp-badge-anchor">
-    <slot />
-    <span v-if="shown" class="wp-badge wp-badge--corner" :data-tone="tone" :data-dot="dot || undefined" :data-pulse="pulse || undefined" aria-hidden="true"><template v-if="!dot">{{ countText }}</template></span>
-    <span v-if="shown && (label || countText)" class="wp-badge__sr">{{ label ?? countText }}</span>
-  </span>
-  <span v-else-if="shown || text" class="wp-badge-line" :data-tone="tone">
-    <span v-if="shown" class="wp-badge" :data-tone="tone" :data-dot="dot || undefined" :data-pulse="pulse || undefined" aria-hidden="true"><template v-if="!dot">{{ countText }}</template></span>
-    <span v-if="!text && (label || countText)" class="wp-badge__sr">{{ label ?? countText }}</span>
-    <span v-if="text" class="wp-badge-line__text">{{ text }}</span>
-  </span>
-</template>
-
-<style scoped>
-.wp-badge-anchor { position: relative; display: inline-flex; }
-.wp-badge__sr {
-  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
-  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
-}
-.wp-badge-line {
-  display: inline-flex; align-items: center; gap: var(--wp-space-2); min-width: 0;
-  color: var(--wp-text-muted); font: 500 var(--wp-text-xs)/1.2 var(--wp-font-sans);
-}
-.wp-badge-line__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.wp-badge {
-  --_tone: var(--wp-accent);
-  display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
-  min-width: 18px; height: 18px; padding: 0 5px;
-  border-radius: var(--wp-radius-cap, 999px); background: var(--_tone); color: var(--wp-bg);
-  font: 600 10.5px/1 var(--wp-font-sans); font-variant-numeric: tabular-nums;
-}
-.wp-badge[data-tone="neutral"] { --_tone: var(--wp-text-dim); }
-.wp-badge[data-tone="info"] { --_tone: var(--wp-info); }
-.wp-badge[data-tone="success"] { --_tone: var(--wp-success); }
-.wp-badge[data-tone="warn"] { --_tone: var(--wp-warn); }
-.wp-badge[data-tone="danger"] { --_tone: var(--wp-danger); }
-.wp-badge[data-dot] { min-width: 0; width: 8px; height: 8px; padding: 0; }
-.wp-badge--corner {
-  position: absolute; top: 0; right: 0; transform: translate(40%, -40%);
-  box-shadow: 0 0 0 2px var(--wp-bg-1); pointer-events: none;
-}
-.wp-badge--corner[data-dot] { transform: translate(25%, -25%); }
-.wp-badge[data-pulse]::after {
-  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--_tone);
-  animation: wp-badge-pulse 1.6s ease-out infinite;
-}
-.wp-badge[data-pulse] { position: relative; }
-.wp-badge--corner[data-pulse] { position: absolute; }
-@keyframes wp-badge-pulse {
-  from { opacity: 0.6; transform: scale(1); }
-  to { opacity: 0; transform: scale(2.4); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .wp-badge[data-pulse]::after { animation: none; display: none; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * Badge: a count bubble or a status dot. On its own it sits in the line of
+ * text; wrapped around something (a button, an icon, an avatar) it sits on
+ * that thing's top-right corner. Works on the canvas and in the manager.
+ *
+ *   <Badge :count="3" tone="danger" label="3 conflicts"><Button icon="pi-bell" aria-label="Problems" /></Badge>
+ *   <Badge dot tone="success" text="Running" />
+ *   <Badge dot tone="warn" label="Out of date" />
+ *
+ * Colour is never the only signal: a dot without `text` needs a `label`,
+ * which screen readers read in its place. Counts over `max` read
+ * "99+". A count of 0 hides the badge unless `show-zero`.
+ */
+import { computed, useSlots } from "vue";
+
+const props = withDefaults(defineProps<{
+  count?: number | undefined;
+  /** Counts above this read "max+". */
+  max?: number | undefined;
+  /** A dot instead of a number. */
+  dot?: boolean | undefined;
+  tone?: "neutral" | "info" | "success" | "warn" | "danger" | "accent" | undefined;
+  /** Visible text after the dot or count (a status line). */
+  text?: string | undefined;
+  /** Name for screen readers when the badge has no text, e.g. "3 conflicts". */
+  label?: string | undefined;
+  /** Show a count of 0 instead of hiding the badge. */
+  showZero?: boolean | undefined;
+  /** Draw the dot as a soft pulse (something is running). */
+  pulse?: boolean | undefined;
+}>(), { count: undefined, max: 99, tone: "accent", text: undefined, label: undefined });
+
+const slots = useSlots();
+const anchored = computed(() => !!slots.default);
+const shown = computed(() => props.dot || (props.count !== undefined && (props.count > 0 || props.showZero)));
+const countText = computed(() =>
+  props.count === undefined ? "" : props.count > props.max ? `${props.max}+` : String(props.count),
+);
+</script>
+
+<template>
+  <span v-if="anchored" class="wp-badge-anchor">
+    <slot />
+    <span v-if="shown" class="wp-badge wp-badge--corner" :data-tone="tone" :data-dot="dot || undefined" :data-pulse="pulse || undefined" aria-hidden="true"><template v-if="!dot">{{ countText }}</template></span>
+    <span v-if="shown && (label || countText)" class="wp-badge__sr">{{ label ?? countText }}</span>
+  </span>
+  <span v-else-if="shown || text" class="wp-badge-line" :data-tone="tone">
+    <span v-if="shown" class="wp-badge" :data-tone="tone" :data-dot="dot || undefined" :data-pulse="pulse || undefined" aria-hidden="true"><template v-if="!dot">{{ countText }}</template></span>
+    <span v-if="!text && (label || countText)" class="wp-badge__sr">{{ label ?? countText }}</span>
+    <span v-if="text" class="wp-badge-line__text">{{ text }}</span>
+  </span>
+</template>
+
+<style scoped>
+.wp-badge-anchor { position: relative; display: inline-flex; }
+.wp-badge__sr {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
+  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.wp-badge-line {
+  display: inline-flex; align-items: center; gap: var(--wp-space-2); min-width: 0;
+  color: var(--wp-text-muted); font: 500 var(--wp-text-xs)/1.2 var(--wp-font-sans);
+}
+.wp-badge-line__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-badge {
+  --_tone: var(--wp-accent);
+  display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
+  min-width: 18px; height: 18px; padding: 0 5px;
+  border-radius: var(--wp-radius-cap, 999px); background: var(--_tone); color: var(--wp-bg);
+  font: 600 10.5px/1 var(--wp-font-sans); font-variant-numeric: tabular-nums;
+}
+.wp-badge[data-tone="neutral"] { --_tone: var(--wp-text-dim); }
+.wp-badge[data-tone="info"] { --_tone: var(--wp-info); }
+.wp-badge[data-tone="success"] { --_tone: var(--wp-success); }
+.wp-badge[data-tone="warn"] { --_tone: var(--wp-warn); }
+.wp-badge[data-tone="danger"] { --_tone: var(--wp-danger); }
+.wp-badge[data-dot] { min-width: 0; width: 8px; height: 8px; padding: 0; }
+.wp-badge--corner {
+  position: absolute; top: 0; right: 0; transform: translate(40%, -40%);
+  box-shadow: 0 0 0 2px var(--wp-bg-1); pointer-events: none;
+}
+.wp-badge--corner[data-dot] { transform: translate(25%, -25%); }
+.wp-badge[data-pulse]::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--_tone);
+  animation: wp-badge-pulse 1.6s ease-out infinite;
+}
+.wp-badge[data-pulse] { position: relative; }
+.wp-badge--corner[data-pulse] { position: absolute; }
+@keyframes wp-badge-pulse {
+  from { opacity: 0.6; transform: scale(1); }
+  to { opacity: 0; transform: scale(2.4); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-badge[data-pulse]::after { animation: none; display: none; }
+}
+</style>

package/src/Banner.vue

@@ -1,118 +1,118 @@
-<script setup lang="ts">
-/**
- * Banner: an inline message in a tone, with an optional title, actions and
- * a close button. It sits in the flow of the page (not floating), above or
- * inside whatever it talks about. Works on the canvas and in the manager.
- *
- *   <Banner tone="warn" title="2 modules are out of date">
- *     Update them before you publish.
- *     <template #actions><Button size="sm">Update</Button></template>
- *   </Banner>
- *
- * A danger banner is announced at once (`role="alert"`); the others are
- * read politely (`role="status"`). Neither takes focus. `note` is for text
- * that is part of the page (a docs tip): `role="note"`, never announced.
- */
-import { computed, useSlots } from "vue";
-import CloseButton from "./CloseButton.vue";
-
-export type BannerTone = "neutral" | "info" | "success" | "warn" | "danger" | "accent";
-
-const TONE_ICON: Record<BannerTone, string> = {
-  neutral: "pi-info-circle",
-  info: "pi-info-circle",
-  success: "pi-check-circle",
-  warn: "pi-exclamation-triangle",
-  danger: "pi-times-circle",
-  accent: "pi-sparkles",
-};
-
-const props = withDefaults(defineProps<{
-  tone?: BannerTone | undefined;
-  title?: string | undefined;
-  /** A PrimeIcons class to use instead of the tone's icon; `""` for none. */
-  icon?: string | undefined;
-  size?: "sm" | "md" | undefined;
-  /** Show a close button; it emits `dismiss`. */
-  dismissible?: boolean | undefined;
-  /** The close button's name. */
-  dismissLabel?: string | undefined;
-  /** Part of the page, not news: `role="note"` instead of a live region. */
-  note?: boolean | undefined;
-}>(), { tone: "info", size: "md", icon: undefined, dismissLabel: "Dismiss" });
-
-const emit = defineEmits<{ (e: "dismiss"): void }>();
-const slots = useSlots();
-
-const iconClass = computed(() => props.icon ?? TONE_ICON[props.tone]);
-</script>
-
-<template>
-  <div
-    class="wp-banner"
-    :data-tone="tone"
-    :data-size="size"
-    :role="note ? 'note' : tone === 'danger' ? 'alert' : 'status'"
-  >
-    <i v-if="iconClass" class="pi wp-banner__icon" :class="iconClass" aria-hidden="true" />
-    <div class="wp-banner__body">
-      <p v-if="title" class="wp-banner__title">{{ title }}</p>
-      <div v-if="slots.default" class="wp-banner__text"><slot /></div>
-    </div>
-    <div v-if="slots.actions" class="wp-banner__actions"><slot name="actions" /></div>
-    <CloseButton
-      v-if="dismissible"
-      class="wp-banner__close"
-      size="sm"
-      :label="dismissLabel"
-      @click="emit('dismiss')"
-    />
-  </div>
-</template>
-
-<style scoped>
-.wp-banner {
-  --_banner-tone: var(--wp-info);
-  display: flex;
-  align-items: flex-start;
-  gap: var(--wp-space-4);
-  min-width: 0;
-  padding: var(--wp-space-4) var(--wp-space-5);
-  border: 1px solid color-mix(in srgb, var(--_banner-tone) 38%, var(--wp-border));
-  border-radius: var(--wp-radius-md);
-  background: color-mix(in srgb, var(--_banner-tone) 10%, var(--wp-bg-1));
-  color: var(--wp-text);
-  font: 400 var(--wp-text-sm)/1.45 var(--wp-font-sans);
-}
-.wp-banner[data-tone="neutral"] { --_banner-tone: var(--wp-text-muted); }
-.wp-banner[data-tone="success"] { --_banner-tone: var(--wp-success); }
-.wp-banner[data-tone="warn"] { --_banner-tone: var(--wp-warn); }
-.wp-banner[data-tone="danger"] { --_banner-tone: var(--wp-danger); }
-.wp-banner[data-tone="accent"] { --_banner-tone: var(--wp-accent-500); }
-.wp-banner[data-size="sm"] {
-  gap: var(--wp-space-3);
-  padding: var(--wp-space-3) var(--wp-space-4);
-  border-radius: var(--wp-radius);
-  font-size: var(--wp-text-xs);
-}
-.wp-banner__icon {
-  flex: none;
-  /* Centre the icon on the first line of text. */
-  line-height: 1.45;
-  font-size: 1.1em;
-  color: var(--_banner-tone);
-}
-.wp-banner[data-tone="accent"] .wp-banner__icon { color: var(--wp-accent-text); }
-.wp-banner__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
-.wp-banner__title { margin: 0; font-weight: 600; }
-.wp-banner__text { color: var(--wp-text-muted); overflow-wrap: anywhere; }
-.wp-banner__body > .wp-banner__text:only-child { color: var(--wp-text); }
-.wp-banner__text :deep(p) { margin: 0; }
-.wp-banner__text :deep(p + p) { margin-top: var(--wp-space-2); }
-.wp-banner__actions { display: inline-flex; align-items: center; gap: var(--wp-space-3); flex: none; align-self: center; }
-.wp-banner__close { flex: none; margin: -2px calc(var(--wp-space-2) * -1) -2px 0; }
-@media (max-width: 520px) {
-  .wp-banner { flex-wrap: wrap; }
-  .wp-banner__actions { order: 3; width: 100%; padding-left: calc(1.1em + var(--wp-space-4)); }
-}
-</style>
+<script setup lang="ts">
+/**
+ * Banner: an inline message in a tone, with an optional title, actions and
+ * a close button. It sits in the flow of the page (not floating), above or
+ * inside whatever it talks about. Works on the canvas and in the manager.
+ *
+ *   <Banner tone="warn" title="2 modules are out of date">
+ *     Update them before you publish.
+ *     <template #actions><Button size="sm">Update</Button></template>
+ *   </Banner>
+ *
+ * A danger banner is announced at once (`role="alert"`); the others are
+ * read politely (`role="status"`). Neither takes focus. `note` is for text
+ * that is part of the page (a docs tip): `role="note"`, never announced.
+ */
+import { computed, useSlots } from "vue";
+import CloseButton from "./CloseButton.vue";
+
+export type BannerTone = "neutral" | "info" | "success" | "warn" | "danger" | "accent";
+
+const TONE_ICON: Record<BannerTone, string> = {
+  neutral: "pi-info-circle",
+  info: "pi-info-circle",
+  success: "pi-check-circle",
+  warn: "pi-exclamation-triangle",
+  danger: "pi-times-circle",
+  accent: "pi-sparkles",
+};
+
+const props = withDefaults(defineProps<{
+  tone?: BannerTone | undefined;
+  title?: string | undefined;
+  /** A PrimeIcons class to use instead of the tone's icon; `""` for none. */
+  icon?: string | undefined;
+  size?: "sm" | "md" | undefined;
+  /** Show a close button; it emits `dismiss`. */
+  dismissible?: boolean | undefined;
+  /** The close button's name. */
+  dismissLabel?: string | undefined;
+  /** Part of the page, not news: `role="note"` instead of a live region. */
+  note?: boolean | undefined;
+}>(), { tone: "info", size: "md", icon: undefined, dismissLabel: "Dismiss" });
+
+const emit = defineEmits<{ (e: "dismiss"): void }>();
+const slots = useSlots();
+
+const iconClass = computed(() => props.icon ?? TONE_ICON[props.tone]);
+</script>
+
+<template>
+  <div
+    class="wp-banner"
+    :data-tone="tone"
+    :data-size="size"
+    :role="note ? 'note' : tone === 'danger' ? 'alert' : 'status'"
+  >
+    <i v-if="iconClass" class="pi wp-banner__icon" :class="iconClass" aria-hidden="true" />
+    <div class="wp-banner__body">
+      <p v-if="title" class="wp-banner__title">{{ title }}</p>
+      <div v-if="slots.default" class="wp-banner__text"><slot /></div>
+    </div>
+    <div v-if="slots.actions" class="wp-banner__actions"><slot name="actions" /></div>
+    <CloseButton
+      v-if="dismissible"
+      class="wp-banner__close"
+      size="sm"
+      :label="dismissLabel"
+      @click="emit('dismiss')"
+    />
+  </div>
+</template>
+
+<style scoped>
+.wp-banner {
+  --_banner-tone: var(--wp-info);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--wp-space-4);
+  min-width: 0;
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border: 1px solid color-mix(in srgb, var(--_banner-tone) 38%, var(--wp-border));
+  border-radius: var(--wp-radius-md);
+  background: color-mix(in srgb, var(--_banner-tone) 10%, var(--wp-bg-1));
+  color: var(--wp-text);
+  font: 400 var(--wp-text-sm)/1.45 var(--wp-font-sans);
+}
+.wp-banner[data-tone="neutral"] { --_banner-tone: var(--wp-text-muted); }
+.wp-banner[data-tone="success"] { --_banner-tone: var(--wp-success); }
+.wp-banner[data-tone="warn"] { --_banner-tone: var(--wp-warn); }
+.wp-banner[data-tone="danger"] { --_banner-tone: var(--wp-danger); }
+.wp-banner[data-tone="accent"] { --_banner-tone: var(--wp-accent-500); }
+.wp-banner[data-size="sm"] {
+  gap: var(--wp-space-3);
+  padding: var(--wp-space-3) var(--wp-space-4);
+  border-radius: var(--wp-radius);
+  font-size: var(--wp-text-xs);
+}
+.wp-banner__icon {
+  flex: none;
+  /* Centre the icon on the first line of text. */
+  line-height: 1.45;
+  font-size: 1.1em;
+  color: var(--_banner-tone);
+}
+.wp-banner[data-tone="accent"] .wp-banner__icon { color: var(--wp-accent-text); }
+.wp-banner__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.wp-banner__title { margin: 0; font-weight: 600; }
+.wp-banner__text { color: var(--wp-text-muted); overflow-wrap: anywhere; }
+.wp-banner__body > .wp-banner__text:only-child { color: var(--wp-text); }
+.wp-banner__text :deep(p) { margin: 0; }
+.wp-banner__text :deep(p + p) { margin-top: var(--wp-space-2); }
+.wp-banner__actions { display: inline-flex; align-items: center; gap: var(--wp-space-3); flex: none; align-self: center; }
+.wp-banner__close { flex: none; margin: -2px calc(var(--wp-space-2) * -1) -2px 0; }
+@media (max-width: 520px) {
+  .wp-banner { flex-wrap: wrap; }
+  .wp-banner__actions { order: 3; width: 100%; padding-left: calc(1.1em + var(--wp-space-4)); }
+}
+</style>

package/src/BookmarkButton.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-/**
- * Bookmark a post: a toggle Button with a filled bookmark when on. The app
- * owns the request; this only shows the state and emits `toggle`.
- *
- *   <BookmarkButton :bookmarked="post.bookmarked_by_me" :disabled="pending" @toggle="bookmark" />
- */
-import Button from "./Button.vue";
-
-withDefaults(defineProps<{
-  bookmarked: boolean;
-  disabled?: boolean | undefined;
-  size?: "sm" | "md" | "lg" | undefined;
-}>(), { disabled: false, size: "md" });
-
-const emit = defineEmits<{ (e: "toggle"): void }>();
-</script>
-
-<template>
-  <Button
-    :icon="bookmarked ? 'bookmark-fill' : 'bookmark'"
-    :pressed="bookmarked"
-    :disabled="disabled"
-    :size="size"
-    @click="emit('toggle')"
-  >{{ bookmarked ? "Bookmarked" : "Bookmark" }}</Button>
-</template>
+<script setup lang="ts">
+/**
+ * Bookmark a post: a toggle Button with a filled bookmark when on. The app
+ * owns the request; this only shows the state and emits `toggle`.
+ *
+ *   <BookmarkButton :bookmarked="post.bookmarked_by_me" :disabled="pending" @toggle="bookmark" />
+ */
+import Button from "./Button.vue";
+
+withDefaults(defineProps<{
+  bookmarked: boolean;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+}>(), { disabled: false, size: "md" });
+
+const emit = defineEmits<{ (e: "toggle"): void }>();
+</script>
+
+<template>
+  <Button
+    :icon="bookmarked ? 'bookmark-fill' : 'bookmark'"
+    :pressed="bookmarked"
+    :disabled="disabled"
+    :size="size"
+    @click="emit('toggle')"
+  >{{ bookmarked ? "Bookmarked" : "Bookmark" }}</Button>
+</template>

package/src/BundleMeta.vue

@@ -1,51 +1,51 @@
-<script setup lang="ts">
-/**
- * One line saying what a bundle holds: a box mark, "3 modules" and their
- * names joined by middots.
- *
- *   <BundleMeta :count="3" :names="['palette', 'mood', 'style']" />
- */
-import Icon from "./Icon.vue";
-
-defineProps<{
-  count: number;
-  names?: string[] | undefined;
-}>();
-</script>
-
-<template>
-  <div class="wp-bundle-meta">
-    <span class="wp-bundle-meta__icon" aria-hidden="true"><Icon name="box" :size="10" /></span>
-    <span class="wp-bundle-meta__text">
-      <span class="wp-bundle-meta__count">{{ count }} {{ count === 1 ? "module" : "modules" }}</span>
-      <template v-for="(n, i) in names ?? []" :key="i">
-        <span class="wp-bundle-meta__sep">·</span>{{ n }}
-      </template>
-    </span>
-  </div>
-</template>
-
-<style scoped>
-.wp-bundle-meta {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  font-family: var(--wp-font-mono);
-  font-size: 11.5px;
-  line-height: 1.5;
-  color: var(--wp-text-dim);
-}
-.wp-bundle-meta__icon {
-  display: inline-grid;
-  place-items: center;
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  border-radius: min(4px, var(--wp-radius-cap, 999px));
-  background: color-mix(in oklab, var(--wp-bundle-default) 18%, transparent);
-  color: var(--wp-text-muted);
-}
-.wp-bundle-meta__text { flex: 1; min-width: 0; word-break: break-word; }
-.wp-bundle-meta__count { color: var(--wp-text); font-weight: 500; }
-.wp-bundle-meta__sep { margin: 0 4px; color: var(--wp-text-dim); }
-</style>
+<script setup lang="ts">
+/**
+ * One line saying what a bundle holds: a box mark, "3 modules" and their
+ * names joined by middots.
+ *
+ *   <BundleMeta :count="3" :names="['palette', 'mood', 'style']" />
+ */
+import Icon from "./Icon.vue";
+
+defineProps<{
+  count: number;
+  names?: string[] | undefined;
+}>();
+</script>
+
+<template>
+  <div class="wp-bundle-meta">
+    <span class="wp-bundle-meta__icon" aria-hidden="true"><Icon name="box" :size="10" /></span>
+    <span class="wp-bundle-meta__text">
+      <span class="wp-bundle-meta__count">{{ count }} {{ count === 1 ? "module" : "modules" }}</span>
+      <template v-for="(n, i) in names ?? []" :key="i">
+        <span class="wp-bundle-meta__sep">·</span>{{ n }}
+      </template>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.wp-bundle-meta {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-family: var(--wp-font-mono);
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--wp-text-dim);
+}
+.wp-bundle-meta__icon {
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  background: color-mix(in oklab, var(--wp-bundle-default) 18%, transparent);
+  color: var(--wp-text-muted);
+}
+.wp-bundle-meta__text { flex: 1; min-width: 0; word-break: break-word; }
+.wp-bundle-meta__count { color: var(--wp-text); font-weight: 500; }
+.wp-bundle-meta__sep { margin: 0 4px; color: var(--wp-text-dim); }
+</style>