@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/StarButton.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * Star a post: a toggle Button with a filled star when on and the star count
+ * beside the label. The app owns the request; this only shows the state and
+ * emits `toggle`.
+ *
+ *   <StarButton :starred="post.starred_by_me" :count="post.star_count" :disabled="pending" @toggle="star" />
+ */
+import Button from "./Button.vue";
+
+withDefaults(defineProps<{
+  starred: boolean;
+  count?: number | undefined;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+}>(), { count: undefined, disabled: false, size: "md" });
+
+const emit = defineEmits<{ (e: "toggle"): void }>();
+</script>
+
+<template>
+  <Button
+    :icon="starred ? 'star-fill' : 'star'"
+    :pressed="starred"
+    :disabled="disabled"
+    :size="size"
+    @click="emit('toggle')"
+  >
+    {{ starred ? "Starred" : "Star" }}
+    <span v-if="count !== undefined" class="wp-star-button__count">{{ count.toLocaleString() }}</span>
+  </Button>
+</template>
+
+<style scoped>
+.wp-star-button__count {
+  margin-left: 2px;
+  color: var(--wp-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+</style>

package/src/Stepper.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts" generic="T extends string">
+/**
+ * Stepper: the "1 · 2 · 3" header of a job done in steps (the pack builder,
+ * an import, a setup). Done steps show a check, a step with a problem shows
+ * a mark, and the current one is lit. Works on the canvas and in the manager.
+ *
+ *   <Stepper v-model="step" :steps="[{ id: 'describe', label: 'Describe' }, { id: 'plan', label: 'Plan', state: 'done' }]" clickable />
+ *
+ * It is an ordered list with `aria-current="step"` on the current step. With
+ * `clickable` each step is a button that emits `update:modelValue`; with
+ * `linear` only done steps and the next one can be picked.
+ */
+import { computed } from "vue";
+
+export interface StepperStep<V extends string = string> {
+  id: V;
+  label: string;
+  /** A short line under the label. */
+  hint?: string | undefined;
+  /** done shows a check, error a mark. Steps before the current one count as done unless set. */
+  state?: "todo" | "done" | "error" | undefined;
+  disabled?: boolean | undefined;
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: T;
+  steps: StepperStep<T>[];
+  clickable?: boolean | undefined;
+  /** Only done steps and the one after the last done step can be picked. */
+  linear?: boolean | undefined;
+  orientation?: "horizontal" | "vertical" | undefined;
+  size?: "sm" | "md" | undefined;
+  ariaLabel?: string | undefined;
+}>(), { orientation: "horizontal", size: "md", ariaLabel: "Steps" });
+
+const emit = defineEmits<{ (e: "update:modelValue", v: T): void }>();
+
+const current = computed(() => props.steps.findIndex((s) => s.id === props.modelValue));
+
+function stateOf(i: number): "todo" | "done" | "error" | "current" {
+  const s = props.steps[i];
+  if (s.state === "error") return "error";
+  if (i === current.value) return "current";
+  if (s.state) return s.state;
+  return i < current.value ? "done" : "todo";
+}
+
+/** The furthest step a linear stepper lets you reach. */
+const reach = computed(() => {
+  let i = 0;
+  while (i < props.steps.length && (stateOf(i) === "done" || i <= current.value)) i++;
+  return i;
+});
+
+function canPick(i: number): boolean {
+  const s = props.steps[i];
+  if (!props.clickable || s.disabled) return false;
+  return !props.linear || i <= reach.value;
+}
+
+const STATE_WORD = { done: "done", error: "has a problem", current: "current step", todo: "" } as const;
+</script>
+
+<template>
+  <ol class="wp-stepper" :data-orientation="orientation" :data-size="size" :aria-label="ariaLabel">
+    <li
+      v-for="(s, i) in steps"
+      :key="s.id"
+      class="wp-stepper__step"
+      :data-state="stateOf(i)"
+      :aria-current="i === current ? 'step' : undefined"
+    >
+      <component
+        :is="clickable ? 'button' : 'div'"
+        class="wp-stepper__body"
+        :type="clickable ? 'button' : undefined"
+        :disabled="clickable ? !canPick(i) : undefined"
+        @click="canPick(i) && s.id !== modelValue && emit('update:modelValue', s.id)"
+      >
+        <span class="wp-stepper__mark" aria-hidden="true">
+          <i v-if="stateOf(i) === 'done'" class="pi pi-check" />
+          <i v-else-if="stateOf(i) === 'error'" class="pi pi-exclamation-triangle" />
+          <template v-else>{{ i + 1 }}</template>
+        </span>
+        <span class="wp-stepper__text">
+          <span class="wp-stepper__label">{{ s.label }}</span>
+          <span v-if="s.hint" class="wp-stepper__hint">{{ s.hint }}</span>
+          <span v-if="STATE_WORD[stateOf(i)]" class="wp-stepper__sr">, {{ STATE_WORD[stateOf(i)] }}</span>
+        </span>
+      </component>
+      <span v-if="i < steps.length - 1" class="wp-stepper__line" aria-hidden="true" />
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.wp-stepper {
+  display: flex; align-items: flex-start; gap: var(--wp-space-3);
+  margin: 0; padding: 0; list-style: none; min-width: 0;
+  font-family: var(--wp-font-sans);
+}
+.wp-stepper[data-orientation="vertical"] { flex-direction: column; gap: 0; }
+.wp-stepper__step { display: flex; align-items: center; gap: var(--wp-space-3); flex: 1 1 0; min-width: 0; }
+.wp-stepper__step:last-child { flex: 0 1 auto; }
+.wp-stepper[data-orientation="vertical"] .wp-stepper__step { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
+.wp-stepper__body {
+  display: inline-flex; align-items: center; gap: var(--wp-space-3); min-width: 0;
+  margin: 0; padding: 2px var(--wp-space-2) 2px 2px; border: 0; border-radius: var(--wp-radius);
+  background: transparent; color: var(--wp-text-muted); font: inherit; text-align: left;
+}
+button.wp-stepper__body { cursor: pointer; }
+button.wp-stepper__body:hover:not(:disabled) { background: var(--wp-row-hover); color: var(--wp-text); }
+button.wp-stepper__body:disabled { cursor: default; }
+button.wp-stepper__body:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-stepper__mark {
+  display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
+  width: 24px; height: 24px; border-radius: min(50%, var(--wp-radius-cap, 999px));
+  border: 1.5px solid var(--wp-border-strong); background: var(--wp-bg-1);
+  color: var(--wp-text-muted); font: 600 var(--wp-text-xs)/1 var(--wp-font-sans); font-variant-numeric: tabular-nums;
+}
+.wp-stepper[data-size="sm"] .wp-stepper__mark { width: 20px; height: 20px; font-size: 10px; }
+.wp-stepper__mark .pi { font-size: 10px; }
+.wp-stepper__text { display: flex; flex-direction: column; min-width: 0; }
+.wp-stepper__label { font-size: var(--wp-text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.wp-stepper[data-size="sm"] .wp-stepper__label { font-size: var(--wp-text-xs); }
+.wp-stepper__hint { font-size: var(--wp-text-xs); color: var(--wp-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.wp-stepper__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-stepper__line { flex: 1; min-width: 12px; height: 1.5px; border-radius: min(1px, var(--wp-radius-cap, 999px)); background: var(--wp-border); }
+.wp-stepper[data-orientation="vertical"] .wp-stepper__line { flex: none; width: 1.5px; min-width: 0; height: 16px; margin: 2px 0 2px 13px; }
+.wp-stepper[data-orientation="vertical"][data-size="sm"] .wp-stepper__line { margin-left: 11px; }
+.wp-stepper__step[data-state="done"] .wp-stepper__mark { border-color: var(--wp-accent); background: var(--wp-accent); color: var(--wp-bg); }
+.wp-stepper__step[data-state="done"] .wp-stepper__line { background: var(--wp-accent); }
+.wp-stepper__step[data-state="current"] .wp-stepper__mark { border-color: var(--wp-accent); color: var(--wp-accent-text); box-shadow: 0 0 0 3px var(--wp-accent-glow); }
+.wp-stepper__step[data-state="current"] .wp-stepper__body { color: var(--wp-text); }
+.wp-stepper__step[data-state="current"] .wp-stepper__label { font-weight: 600; }
+.wp-stepper__step[data-state="error"] .wp-stepper__mark { border-color: var(--wp-danger); color: var(--wp-danger); }
+.wp-stepper__step[data-state="error"] .wp-stepper__label { color: var(--wp-danger-text); }
+</style>

package/src/SupportLinks.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+/**
+ * The "support the project" link cards on an About page: one card per way to
+ * give, each with an icon, a label, a line of detail and an outside-link mark.
+ * The apps keep the list itself (where the money goes is theirs to say) and
+ * pass it in, so the extension and the community site show the same cards.
+ */
+export interface SupportLink {
+  /** Stable id: the card's `data-kind`. */
+  id: string;
+  label: string;
+  detail?: string | undefined;
+  /** PrimeIcons class, `pi-heart`. */
+  icon: string;
+  href: string;
+}
+
+withDefaults(defineProps<{ links: readonly SupportLink[]; label?: string | undefined }>(), {
+  label: "Ways to support the project",
+});
+</script>
+
+<template>
+  <ul class="wp-support" :aria-label="label">
+    <li v-for="link in links" :key="link.id">
+      <a class="wp-support__link" :data-kind="link.id" :href="link.href" target="_blank" rel="noopener">
+        <span class="wp-support__icon"><i :class="['pi', link.icon]" aria-hidden="true" /></span>
+        <span class="wp-support__text">
+          <span class="wp-support__label">{{ link.label }}</span>
+          <span v-if="link.detail" class="wp-support__detail">{{ link.detail }}</span>
+        </span>
+        <i class="pi pi-external-link wp-support__out" aria-hidden="true" />
+        <span class="wp-support__sr">(opens in a new tab)</span>
+      </a>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.wp-support {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
+  gap: var(--wp-space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.wp-support__link {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-4);
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border: 1px solid var(--wp-border);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-1);
+  color: var(--wp-text);
+  text-decoration: none;
+  transition: border-color var(--wp-motion-hover, 120ms) ease-out, background-color var(--wp-motion-hover, 120ms) ease-out;
+}
+.wp-support__link:hover {
+  border-color: var(--wp-accent-500);
+  background: color-mix(in oklab, var(--wp-accent-500) 8%, var(--wp-bg-1));
+}
+.wp-support__link:focus-visible {
+  outline: 2px solid var(--wp-accent-500);
+  outline-offset: 2px;
+}
+.wp-support__icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-2);
+  color: var(--wp-accent-text);
+  font-size: 16px;
+}
+.wp-support__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
+.wp-support__label { font-weight: 600; font-size: var(--wp-text-sm); }
+.wp-support__detail { font-size: var(--wp-text-xs); color: var(--wp-text-dim); }
+.wp-support__out { color: var(--wp-text-dim); flex: none; font-size: 12px; }
+.wp-support__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+</style>

package/src/TagInput.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+/**
+ * Tag input: type a word and press Enter (or a comma) to add it as a chip;
+ * Backspace in the empty box takes the last chip off; each chip's ✕ removes
+ * it. Suggestions open under the box as you type and follow it on scroll
+ * (a kit Popover). Pasting "a, b, c" adds three. Works on the canvas
+ * (`size="sm"`) and in the manager (`md`).
+ *
+ *   <TagInput v-model="tags" :suggestions="libraryTags" aria-label="Tags" />
+ *   <TagInput v-model="axes" :suggestions="known" :allow-new="false" :normalize="(t) => t.toLowerCase()" />
+ *
+ * APG combobox with a list: the arrows move through the suggestions, Enter
+ * takes the lit one (or the typed text), Escape closes the list. A tag that
+ * is already there isn't added twice; a polite live line says what
+ * happened.
+ */
+import { computed, nextTick, ref, useId } from "vue";
+import Popover from "./Popover.vue";
+
+const props = withDefaults(defineProps<{
+  modelValue: string[];
+  suggestions?: string[] | undefined;
+  /** Take words that aren't in `suggestions`. */
+  allowNew?: boolean | undefined;
+  /** At most this many tags. */
+  max?: number | undefined;
+  /** Clean a tag before it is added (trim by default). Return "" to refuse it. */
+  normalize?: ((t: string) => string) | undefined;
+  placeholder?: string | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  ariaLabel?: string | undefined;
+  /** How many suggestions to show at once. */
+  limit?: number | undefined;
+}>(), {
+  suggestions: () => [], allowNew: true, max: undefined,
+  placeholder: "Add a tag", size: "md", ariaLabel: "Tags", limit: 8,
+});
+
+const emit = defineEmits<{ (e: "update:modelValue", v: string[]): void }>();
+
+const uid = useId();
+const listId = `wp-tag-input-list-${uid}`;
+const inputEl = ref<HTMLInputElement | null>(null);
+const query = ref("");
+/** The list may show: the box has focus and nobody closed the list since the last key. */
+const wanted = ref(false);
+const active = ref(-1);
+const said = ref("");
+
+const clean = (t: string): string => (props.normalize ? props.normalize(t) : t.trim());
+const has = (t: string): boolean => props.modelValue.some((x) => x.toLowerCase() === t.toLowerCase());
+const full = computed(() => props.max !== undefined && props.modelValue.length >= props.max);
+
+const matches = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  const pool = props.suggestions.filter((s) => !has(s));
+  const hit = q ? pool.filter((s) => s.toLowerCase().includes(q)) : pool;
+  // Words that start with the query first, then the rest.
+  return [...hit.filter((s) => s.toLowerCase().startsWith(q)), ...hit.filter((s) => !s.toLowerCase().startsWith(q))].slice(0, props.limit);
+});
+const open = computed(() => wanted.value && !full.value && !props.disabled && matches.value.length > 0);
+const activeId = computed(() => (open.value && active.value >= 0 ? `${listId}-${active.value}` : undefined));
+
+function announce(text: string): void {
+  said.value = "";
+  void nextTick(() => { said.value = text; });
+}
+
+function add(raw: string): boolean {
+  const t = clean(raw);
+  if (!t) return false;
+  if (has(t)) { announce(`${t} is already added`); return false; }
+  if (full.value) { announce(`At most ${props.max} tags`); return false; }
+  const known = props.suggestions.find((s) => s.toLowerCase() === t.toLowerCase());
+  if (!props.allowNew && !known) { announce(`${t} is not one of the choices`); return false; }
+  emit("update:modelValue", [...props.modelValue, known ?? t]);
+  announce(`Added ${known ?? t}`);
+  return true;
+}
+
+function addMany(parts: string[]): void {
+  let list = [...props.modelValue];
+  const added: string[] = [];
+  for (const p of parts) {
+    const t = clean(p);
+    if (!t || list.some((x) => x.toLowerCase() === t.toLowerCase())) continue;
+    if (props.max !== undefined && list.length >= props.max) break;
+    const known = props.suggestions.find((s) => s.toLowerCase() === t.toLowerCase());
+    if (!props.allowNew && !known) continue;
+    list = [...list, known ?? t];
+    added.push(known ?? t);
+  }
+  if (added.length) {
+    emit("update:modelValue", list);
+    announce(`Added ${added.join(", ")}`);
+  }
+}
+
+function remove(i: number, refocus = false): void {
+  const t = props.modelValue[i];
+  if (t === undefined || props.disabled) return;
+  emit("update:modelValue", props.modelValue.filter((_, j) => j !== i));
+  announce(`Removed ${t}`);
+  if (refocus) inputEl.value?.focus();
+}
+
+function commit(): void {
+  if (open.value && active.value >= 0 && matches.value[active.value]) {
+    if (add(matches.value[active.value])) query.value = "";
+  } else if (query.value.trim() && add(query.value)) {
+    query.value = "";
+  }
+  active.value = -1;
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (props.disabled) return;
+  switch (ev.key) {
+    case "Enter":
+      if (!query.value.trim() && active.value < 0) return;
+      ev.preventDefault();
+      commit();
+      return;
+    case ",":
+      ev.preventDefault();
+      if (query.value.trim() && add(query.value)) query.value = "";
+      return;
+    case "ArrowDown":
+      if (!matches.value.length) return;
+      ev.preventDefault();
+      if (!wanted.value) { wanted.value = true; active.value = 0; return; }
+      active.value = (active.value + 1) % matches.value.length;
+      return;
+    case "ArrowUp":
+      if (!matches.value.length) return;
+      ev.preventDefault();
+      active.value = active.value <= 0 ? matches.value.length - 1 : active.value - 1;
+      return;
+    case "Backspace":
+      if (query.value === "" && props.modelValue.length) {
+        ev.preventDefault();
+        remove(props.modelValue.length - 1);
+      }
+      return;
+    default:
+  }
+}
+
+function onInput(): void {
+  wanted.value = true;
+  if (query.value.includes(",")) {
+    const parts = query.value.split(",");
+    query.value = parts.pop() ?? "";
+    addMany(parts);
+  }
+  active.value = -1;
+}
+
+function onPaste(ev: ClipboardEvent): void {
+  const text = ev.clipboardData?.getData("text") ?? "";
+  if (!/[,\n]/.test(text)) return;
+  ev.preventDefault();
+  addMany(text.split(/[,\n]/));
+}
+
+function pick(s: string): void {
+  if (add(s)) query.value = "";
+  active.value = -1;
+  inputEl.value?.focus();
+}
+
+function setOpen(v: boolean): void {
+  // The list closes itself on Escape or a click outside; reopen on typing.
+  if (!v) { wanted.value = false; active.value = -1; }
+}
+</script>
+
+<!-- Popover's autofocus prop is off here: focus stays in the box you type in. -->
+<!-- eslint-disable vuejs-accessibility/no-autofocus -->
+<template>
+  <Popover :open="open" role="group" match-width :autofocus="false" :label="`${ariaLabel} suggestions`" @update:open="setOpen">
+    <template #trigger>
+      <!-- A click on the box's padding focuses the text field, which has the keys. -->
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+      <div
+        class="wp-tag-input wp-field-box"
+        :class="`wp-field-box--${size}`"
+        :data-size="size"
+        :data-disabled="disabled || undefined"
+        :data-invalid="invalid || undefined"
+        @click="inputEl?.focus()"
+      >
+        <span v-for="(t, i) in modelValue" :key="t" class="wp-tag-input__chip">
+          <span class="wp-tag-input__chip-text">{{ t }}</span>
+          <button
+            type="button"
+            class="wp-tag-input__remove"
+            :aria-label="`Remove ${t}`"
+            :disabled="disabled"
+            @click.stop="remove(i, true)"
+          ><i class="pi pi-times" aria-hidden="true" /></button>
+        </span>
+        <input
+          ref="inputEl"
+          v-model="query"
+          class="wp-tag-input__field"
+          type="text"
+          role="combobox"
+          aria-autocomplete="list"
+          :aria-label="ariaLabel"
+          :aria-expanded="open"
+          :aria-controls="open ? listId : undefined"
+          :aria-activedescendant="activeId"
+          :aria-invalid="invalid || undefined"
+          :placeholder="full ? '' : placeholder"
+          :disabled="disabled || full"
+          autocomplete="off"
+          @focus="wanted = true"
+          @blur="wanted = false"
+          @keydown="onKeydown"
+          @input="onInput"
+          @paste="onPaste"
+        >
+        <span class="wp-tag-input__sr" aria-live="polite">{{ said }}</span>
+      </div>
+    </template>
+    <ul :id="listId" class="wp-tag-input__list" role="listbox" :aria-label="`${ariaLabel} suggestions`">
+      <!-- Options are lit with aria-activedescendant; the text field keeps focus and the keys. -->
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/interactive-supports-focus -->
+      <li
+        v-for="(s, i) in matches"
+        :id="`${listId}-${i}`"
+        :key="s"
+        class="wp-tag-input__opt"
+        role="option"
+        :aria-selected="i === active"
+        :data-active="i === active || undefined"
+        @mousedown.prevent
+        @click="pick(s)"
+      >{{ s }}</li>
+    </ul>
+  </Popover>
+</template>
+
+<style scoped src="./field.css"></style>
+
+<style scoped>
+.wp-tag-input {
+  --_h: var(--wp-field-h);
+  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
+  width: 100%; padding: 3px var(--wp-space-3);
+  cursor: text;
+  font-family: var(--wp-font-sans); font-weight: 400; line-height: 1;
+}
+.wp-tag-input[data-size="sm"] { padding: 2px var(--wp-space-2); gap: 3px; }
+.wp-tag-input[data-size="lg"] { padding: 5px var(--wp-space-4); }
+.wp-tag-input__chip {
+  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; box-sizing: border-box;
+  height: 20px; padding: 0 2px 0 7px;
+  border: 1px solid var(--wp-border-strong); border-radius: var(--wp-radius-cap, 999px); background: var(--wp-bg-3);
+  color: var(--wp-text); font-size: var(--wp-text-xs); line-height: 1;
+}
+.wp-tag-input[data-size="sm"] .wp-tag-input__chip { height: 16px; padding-left: 5px; font-size: 10.5px; }
+.wp-tag-input__chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Plain ✕: no background zone, the chip keeps its height; the hit area is 20 px. */
+.wp-tag-input__remove {
+  display: inline-grid; place-items: center; width: 16px; height: 16px; margin: -2px 0; padding: 0;
+  border: 0; border-radius: min(50%, var(--wp-radius-cap, 999px)); background: transparent; color: var(--wp-text-muted); cursor: pointer;
+  position: relative;
+}
+.wp-tag-input__remove::before { content: ""; position: absolute; inset: -2px; }
+.wp-tag-input__remove .pi { font-size: 8px; }
+.wp-tag-input__remove:hover:not(:disabled) { color: var(--wp-text); }
+.wp-tag-input__remove:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-tag-input__field {
+  flex: 1 0 6ch; min-width: 6ch; height: calc(var(--_h) - 8px); margin: 0; padding: 0 2px;
+  border: 0; outline: none; background: transparent; color: inherit; font: inherit;
+}
+.wp-tag-input__field::placeholder { color: var(--wp-text-dim); }
+.wp-tag-input__field:disabled { cursor: not-allowed; }
+.wp-tag-input__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-tag-input__list { margin: calc(var(--wp-space-2) * -1); padding: 0; list-style: none; }
+.wp-tag-input__opt {
+  padding: 6px var(--wp-space-4); border-radius: var(--wp-radius-sm);
+  color: var(--wp-text); font-size: var(--wp-text-sm); cursor: pointer;
+}
+.wp-tag-input__opt:hover, .wp-tag-input__opt[data-active] { background: var(--wp-row-hover); }
+.wp-tag-input__opt[data-active] { box-shadow: inset 2px 0 0 var(--wp-accent); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-tag-input { transition: none; }
+}
+</style>

package/src/Textarea.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from "vue";
+
+interface Props {
+  modelValue: string;
+  rows?: number | undefined;
+  placeholder?: string | undefined;
+  autoResize?: boolean | undefined;
+  disabled?: boolean | undefined;
+  error?: boolean | undefined;
+  id?: string | undefined;
+  ariaLabel?: string | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { rows: 3 });
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: string): void;
+  (e: "blur", evt: FocusEvent): void;
+  (e: "focus", evt: FocusEvent): void;
+}>();
+
+const taRef = ref<HTMLTextAreaElement | null>(null);
+
+function autosize() {
+  if (!props.autoResize) return;
+  const el = taRef.value;
+  if (!el) return;
+  el.style.height = "auto";
+  el.style.height = `${el.scrollHeight}px`;
+}
+
+function onInput(e: Event) {
+  emit("update:modelValue", (e.target as HTMLTextAreaElement).value);
+  if (props.autoResize) nextTick(autosize);
+}
+
+watch(() => props.modelValue, () => {
+  if (props.autoResize) nextTick(autosize);
+});
+</script>
+
+<template>
+  <textarea
+    :id="id"
+    ref="taRef"
+    class="wp-textarea"
+    :rows="rows"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :aria-label="ariaLabel"
+    :aria-invalid="error || undefined"
+    @input="onInput"
+    @blur="(e) => emit('blur', e)"
+    @focus="(e) => emit('focus', e)"
+  />
+</template>