@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/Card.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useSlots, ref, onMounted, onBeforeUnmount } from "vue";
+
+interface Props {
+  title?: string | undefined;
+  subtitle?: string | undefined;
+  padding?: boolean | undefined;
+  /** Stick the card header (and its `subheader` slot, e.g. a bulk-edit
+   *  toolbar) to the top of the nearest scroll container so its actions stay
+   *  reachable when scrolling a long list — new rows always land at the
+   *  bottom, so the toolbar must follow. Publishes the measured height of the
+   *  whole stuck region as `--wp-card-header-h` so a sticky `<thead>` inside
+   *  the body can offset itself right below it (updates as the subheader
+   *  toolbar appears/disappears or density changes). */
+  stickyHeader?: boolean | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { padding: true, stickyHeader: false });
+
+const slots = useSlots();
+const root = ref<HTMLElement | null>(null);
+const stickyEl = ref<HTMLElement | null>(null);
+let ro: ResizeObserver | null = null;
+/** The stuck region is taller than a third of the window (an AI draft or a
+ *  bulk-add box open in the subheader): it would cover the list it belongs
+ *  to and the page couldn't scroll past it, so it scrolls with the card. */
+const tooTall = ref(false);
+
+function syncStickyHeight(): void {
+  if (!root.value || !stickyEl.value) return;
+  const h = Math.round(stickyEl.value.getBoundingClientRect().height);
+  tooTall.value = typeof window !== "undefined" && window.innerHeight > 0 && h > window.innerHeight / 3;
+  root.value.style.setProperty("--wp-card-header-h", tooTall.value ? "0px" : `${h}px`);
+}
+
+onMounted(() => {
+  if (!props.stickyHeader || !stickyEl.value) return;
+  syncStickyHeight();
+  if (typeof ResizeObserver !== "undefined") {
+    ro = new ResizeObserver(syncStickyHeight);
+    ro.observe(stickyEl.value);
+  }
+  window.addEventListener("resize", syncStickyHeight);
+});
+onBeforeUnmount(() => {
+  ro?.disconnect();
+  ro = null;
+  window.removeEventListener("resize", syncStickyHeight);
+});
+</script>
+
+<template>
+  <section ref="root" class="wp-card" :class="{ 'wp-card--sticky-header': stickyHeader && !tooTall }">
+    <div ref="stickyEl" class="wp-card__sticky">
+      <header v-if="title || slots.actions" class="wp-card__header">
+        <div class="wp-card__title-wrap">
+          <h2 v-if="title" class="wp-card__title">{{ title }}</h2>
+          <p v-if="subtitle" class="wp-card__subtitle">{{ subtitle }}</p>
+        </div>
+        <span class="wp-spacer" />
+        <slot name="actions" />
+      </header>
+      <slot name="subheader" />
+    </div>
+    <div :class="padding ? 'wp-card__body' : ''">
+      <slot />
+    </div>
+  </section>
+</template>

package/src/Checkbox.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  modelValue: boolean;
+  label?: string | undefined;
+  disabled?: boolean | undefined;
+  error?: boolean | undefined;
+  id?: string | undefined;
+  ariaLabel?: string | undefined;
+  /**
+   * Tri-state indicator. When true AND `modelValue` is false, the
+   * checkbox renders a horizontal dash instead of a checkmark and
+   * announces `aria-checked="mixed"`. Used by group/select-all
+   * controls where the underlying collection is partially selected.
+   * `modelValue=true` always wins — a fully-checked box never
+   * renders as indeterminate even if the prop is set.
+   */
+  indeterminate?: boolean | undefined;
+  /**
+   * Draw the whole row as an input-height field (border, fill, full width)
+   * whose label fills it, for a yes/no filter that sits in a form grid
+   * beside Selects (the list pages' "Favorites only").
+   */
+  field?: boolean | undefined;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: boolean): void;
+}>();
+
+const showIndeterminate = computed<boolean>(
+  () => !!props.indeterminate && !props.modelValue,
+);
+
+const ariaChecked = computed<"true" | "false" | "mixed">(() => {
+  if (props.modelValue) return "true";
+  if (showIndeterminate.value) return "mixed";
+  return "false";
+});
+
+function toggle() {
+  if (props.disabled) return;
+  emit("update:modelValue", !props.modelValue);
+}
+</script>
+
+<template>
+  <span class="wp-checkbox" :class="{ 'is-disabled': disabled, 'wp-checkbox--field': field }">
+    <!-- Wrapper is a <span> rather than a <label> on purpose. Native <label>
+         re-dispatches click on its associated form control in some pointer
+         paths (notably when the click target is the SVG inside the button),
+         firing the button's @click twice — which double-toggled and left
+         the underlying model unchanged when a parent also wired a click
+         handler. The span wrapper has no synthetic-dispatch behavior. -->
+    <button
+      type="button"
+      class="wp-check"
+      :data-checked="modelValue ? 'true' : 'false'"
+      :data-indeterminate="showIndeterminate ? 'true' : 'false'"
+      :aria-checked="ariaChecked"
+      :aria-label="ariaLabel ?? label"
+      :aria-invalid="error || undefined"
+      :disabled="disabled"
+      role="checkbox"
+      @click="toggle"
+    >
+      <!-- tokens.css gives `.wp-check svg` pointer-events: none so the entire
+           button area (including the check mark) is a single click target —
+           clicks land on the button itself, not the SVG child. Without this,
+           a click on the SVG centerpoint could route through wrapper-bubble
+           paths in some browsers/automation drivers and double-fire toggle.
+           No inline style here: the TUI look hides the drawn mark (it reads
+           [x] instead), and an inline display would beat it. -->
+      <svg
+        v-if="modelValue"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M3 6.2l2.2 2.2L9 4.4"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <!-- Indeterminate dash. Same pointer-events rule as the checkmark. -->
+      <svg
+        v-else-if="showIndeterminate"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M3 6h6"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+    <span v-if="label" class="wp-checkbox__label" @click="toggle">{{ label }}</span>
+  </span>
+</template>

package/src/Chip.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+/**
+ * A small tag: a post's tag, a category, a status. `removable` adds a ✕
+ * that emits `remove`. `as="button"` (or `as="a"` / a link component such as
+ * RouterLink) makes the whole chip something you press, for a chip that
+ * takes you somewhere ("show everything tagged portrait"); a pressable
+ * chip has no ✕. For a filter that turns on and off, use ChipToggle.
+ */
+import { computed, type Component } from "vue";
+import Icon from "./Icon.vue";
+
+type Tone = "default" | "accent" | "success" | "warn" | "danger" | "info";
+
+interface Props {
+  tone?: Tone | undefined;
+  icon?: string | null | undefined;
+  removable?: boolean | undefined;
+  /**
+   * Free-form colour (hex or any CSS colour), e.g. a category's. When set it
+   * overrides the tone and renders a tinted pill: background = colour @ 18%,
+   * border = colour @ 42%, and the text blends the colour toward
+   * `--wp-text` so a pale pick stays readable in light mode and a dark pick
+   * in dark mode. `null` reads as no colour (a category without one).
+   * This is what CategoryChip used to be: `<Chip :color :icon>{{ name }}</Chip>`.
+   */
+  color?: string | null | undefined;
+  /** What to render: a span (default), a button, or a link. */
+  as?: string | Component | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { tone: "default", as: "span" });
+
+const emit = defineEmits<{
+  (e: "remove"): void;
+}>();
+
+const pressable = computed(() => props.as !== "span");
+const classes = computed(() => [
+  "wp-chip",
+  pressable.value && "wp-chip--action",
+  props.color ? "wp-chip--color" : props.tone !== "default" && `wp-chip--${props.tone}`,
+]);
+
+const colorStyle = computed(() => {
+  if (!props.color) return undefined;
+  const c = props.color;
+  return {
+    color: `color-mix(in oklab, ${c} 65%, var(--wp-text))`,
+    background: `color-mix(in oklab, ${c} 18%, transparent)`,
+    borderColor: `color-mix(in oklab, ${c} 42%, transparent)`,
+  };
+});
+
+function onRemove(e: MouseEvent) {
+  e.stopPropagation();
+  emit("remove");
+}
+</script>
+
+<template>
+  <component
+    :is="as"
+    :class="classes"
+    :style="colorStyle"
+    :type="as === 'button' ? 'button' : undefined"
+  >
+    <!-- 10px sub-ICON_SM — pill density pass dropped chip font 11→10.5
+         and the previous 12px icon read oversized next to the smaller
+         label. Matches the new chip body weight. -->
+    <Icon v-if="icon" :name="icon" :size="10" />
+    <slot />
+    <button
+      v-if="removable && !pressable"
+      type="button"
+      class="wp-chip__close"
+      aria-label="Remove"
+      @click="onRemove"
+    >
+      <!-- Close glyph also drops to 10px so chip-with-X stays balanced
+           against the slimmer body. Hit target stays 20×20 via the
+           button's min sizing in tokens.css. -->
+      <Icon name="times" :size="10" />
+    </button>
+  </component>
+</template>
+
+<style scoped>
+.wp-chip--action {
+  font-family: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: border-color var(--wp-motion-quick) ease, color var(--wp-motion-quick) ease, filter var(--wp-motion-quick) ease;
+}
+.wp-chip--action:hover { border-color: var(--wp-border-strong); color: var(--wp-text); }
+.wp-chip--action.wp-chip--color:hover,
+.wp-chip--action.wp-chip--accent:hover { color: inherit; filter: brightness(1.08); }
+.wp-chip--action:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+</style>

package/src/ChipToggle.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * A pill you press to turn a filter or flag on and off: a tag filter, a
+ * module-type filter, "Recommended" on a version, a category you pick.
+ * `pressed` lights it in the accent, or in `color` (a kind colour, a
+ * category's colour) when given; with `color` the icon wears it even when
+ * off, so a row of type filters reads at a glance. `count` shows a small
+ * number after the label.
+ *
+ *   <ChipToggle :pressed="tag === t.slug" icon="pi-tag" :count="t.usage" @click="pick(t)">{{ t.name }}</ChipToggle>
+ *   <ChipToggle :pressed="kind === 'wildcard'" color="var(--wp-kind-wildcard)" icon="pi-sparkles">Wildcard</ChipToggle>
+ *
+ * A real `<button>` with `aria-pressed`; it reads only the shared tokens, so
+ * it works on a page and on the canvas.
+ */
+import { computed } from "vue";
+import Icon from "./Icon.vue";
+
+const props = withDefaults(defineProps<{
+  pressed?: boolean | undefined;
+  /** PrimeIcons name (`tag` or `pi-tag`) before the label. */
+  icon?: string | undefined;
+  /** Tint when pressed (and of the icon): any CSS colour. Default the accent. */
+  color?: string | null | undefined;
+  count?: number | string | undefined;
+  size?: "sm" | "md" | undefined;
+  disabled?: boolean | undefined;
+}>(), { pressed: false, size: "sm" });
+
+const style = computed(() => (props.color ? { "--chip-toggle-c": props.color } : undefined));
+</script>
+
+<template>
+  <button
+    type="button"
+    class="wp-chip-toggle"
+    :class="[`wp-chip-toggle--${size}`, { 'wp-chip-toggle--tinted': !!color }]"
+    :style="style"
+    :aria-pressed="pressed"
+    :disabled="disabled"
+  >
+    <Icon v-if="icon" class="wp-chip-toggle__icon" :name="icon" :size="11" />
+    <span class="wp-chip-toggle__label"><slot /></span>
+    <span v-if="count !== undefined" class="wp-chip-toggle__count">{{ count }}</span>
+  </button>
+</template>
+
+<style scoped>
+.wp-chip-toggle {
+  --chip-toggle-c: var(--wp-accent-500);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wp-space-2);
+  height: var(--wp-control-h-sm);
+  padding: 0 var(--wp-space-4);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+  font: inherit;
+  font-family: var(--wp-font-sans);
+  font-size: var(--wp-text-sm);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--wp-motion-quick) ease, border-color var(--wp-motion-quick) ease, color var(--wp-motion-quick) ease;
+}
+.wp-chip-toggle--md { height: var(--wp-control-h-md); padding: 0 var(--wp-space-5); font-size: var(--wp-text-base); }
+.wp-chip-toggle:hover:not(:disabled) { border-color: var(--wp-border-strong); color: var(--wp-text); }
+.wp-chip-toggle:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-chip-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-chip-toggle--tinted .wp-chip-toggle__icon { color: var(--chip-toggle-c); }
+.wp-chip-toggle[aria-pressed="true"] {
+  border-color: color-mix(in oklab, var(--chip-toggle-c) 45%, transparent);
+  background: color-mix(in oklab, var(--chip-toggle-c) 16%, transparent);
+  color: var(--wp-accent-text-strong);
+}
+.wp-chip-toggle--tinted[aria-pressed="true"] { color: var(--chip-toggle-c); }
+.wp-chip-toggle__count {
+  padding: 1px var(--wp-space-3);
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-4, var(--wp-bg-2));
+  color: var(--wp-text-dim);
+  font-family: var(--wp-font-mono);
+  font-size: var(--wp-text-xs);
+}
+.wp-chip-toggle[aria-pressed="true"] .wp-chip-toggle__count {
+  background: color-mix(in oklab, var(--chip-toggle-c) 22%, transparent);
+  color: inherit;
+}
+</style>

package/src/ChoiceCards.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts" generic="T extends string">
+/**
+ * Choice cards: pick one of a handful of options that each need a picture to
+ * be understood (a colour theme, a look, a layout). Each card shows the
+ * `preview` slot, a name and, unless `compact`, a one-line hint (compact puts
+ * the hint in the card's tooltip).
+ *
+ * It is a radio group (APG), like the segmented control: only the chosen card
+ * is in the Tab order, the arrow keys move to the next card and choose it,
+ * Home/End jump to the ends.
+ *
+ *   <ChoiceCards v-model="look" :options="LOOKS" aria-label="Look">
+ *     <template #preview="{ option }"><LookDrawing :id="option.value" /></template>
+ *   </ChoiceCards>
+ */
+import { nextTick, ref } from "vue";
+
+export interface ChoiceCardOption<V extends string = string> {
+  value: V;
+  label: string;
+  hint?: string | undefined;
+  /** Inline style for the card, e.g. CSS variables its preview reads. */
+  style?: Record<string, string> | undefined;
+}
+
+const props = defineProps<{
+  modelValue: T;
+  options: ChoiceCardOption<T>[];
+  /** Three to a row, smaller, hint as tooltip: for narrow panels. */
+  compact?: boolean | undefined;
+  ariaLabel?: string | undefined;
+  /** `data-test` of each card is `<testPrefix>-<value>`. */
+  testPrefix?: string | undefined;
+}>();
+
+const emit = defineEmits<{ (e: "update:modelValue", v: T): void }>();
+defineSlots<{ preview?(p: { option: ChoiceCardOption<T>; on: boolean }): unknown }>();
+const rootEl = ref<HTMLElement | null>(null);
+
+function pick(v: T): void {
+  if (v !== props.modelValue) emit("update:modelValue", v);
+}
+
+function tabStop(): T | undefined {
+  return (props.options.find((o) => o.value === props.modelValue) ?? props.options[0])?.value;
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  const all = props.options;
+  if (!all.length) return;
+  const at = all.findIndex((o) => o.value === props.modelValue);
+  let next: number;
+  switch (ev.key) {
+    case "ArrowRight": case "ArrowDown": next = (at + 1) % all.length; break;
+    case "ArrowLeft": case "ArrowUp": next = at < 0 ? all.length - 1 : (at - 1 + all.length) % all.length; break;
+    case "Home": next = 0; break;
+    case "End": next = all.length - 1; break;
+    default: return;
+  }
+  ev.preventDefault();
+  pick(all[next].value);
+  void nextTick(() => rootEl.value?.querySelectorAll<HTMLElement>("[role=radio]")[next]?.focus());
+}
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="wp-choice-cards"
+    :class="{ 'wp-choice-cards--compact': compact }"
+    role="radiogroup"
+    :aria-label="ariaLabel"
+  >
+    <button
+      v-for="o in options"
+      :key="o.value"
+      :title="compact ? o.hint : undefined"
+      type="button"
+      role="radio"
+      class="wp-choice-card"
+      :aria-checked="modelValue === o.value"
+      :tabindex="o.value === tabStop() ? 0 : -1"
+      :data-test="testPrefix ? `${testPrefix}-${o.value}` : undefined"
+      :style="o.style"
+      @click="pick(o.value)"
+      @keydown="onKeydown"
+    >
+      <slot name="preview" :option="o" :on="modelValue === o.value" />
+      <span class="wp-choice-card__name">{{ o.label }}</span>
+      <span v-if="!compact && o.hint" class="wp-choice-card__hint">{{ o.hint }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.wp-choice-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: var(--wp-space-4);
+  width: 100%;
+}
+.wp-choice-cards--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp-space-3); }
+.wp-choice-card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--wp-space-3);
+  min-width: 0;
+  padding: var(--wp-space-4);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius);
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--wp-motion-hover), background var(--wp-motion-hover);
+}
+.wp-choice-card:hover { border-color: var(--wp-border-strong); background: var(--wp-bg-3); }
+.wp-choice-card[aria-checked="true"] {
+  border-color: var(--wp-accent-500);
+  box-shadow: inset 0 0 0 1px var(--wp-accent-500);
+  background: color-mix(in oklab, var(--wp-accent-500) 10%, var(--wp-bg-2));
+}
+.wp-choice-card:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-choice-card__name { font-size: var(--wp-text-base); font-weight: 600; line-height: var(--wp-line-base); }
+.wp-choice-card__hint { font-size: var(--wp-text-xs); line-height: var(--wp-line-xs); color: var(--wp-text-muted); }
+.wp-choice-cards--compact .wp-choice-card { padding: var(--wp-space-3); gap: var(--wp-space-2); }
+.wp-choice-cards--compact .wp-choice-card__name { font-size: var(--wp-text-xs); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-choice-card { transition: none; }
+}
+</style>

package/src/CloseButton.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * Close button: the one × that closes a dialog, drawer, panel or banner. A
+ * square, quiet icon button on the 24/32/40 height scale, named by `label`
+ * for screen readers and shown as its tooltip. Works on the canvas
+ * (`size="sm"`) and in the manager (`md`).
+ *
+ *   <CloseButton @click="close" />
+ *   <CloseButton label="Dismiss" size="sm" @click="hide" />
+ *
+ * Manager icon actions other than closing use `Button` with an icon and no
+ * text.
+ */
+import { vTooltip } from "./tooltip";
+
+withDefaults(defineProps<{
+  label?: string | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  disabled?: boolean | undefined;
+  /** A shortcut for the tooltip, e.g. "Esc". */
+  kbd?: string | undefined;
+}>(), { label: "Close", size: "md", kbd: undefined });
+
+const emit = defineEmits<{ (e: "click", ev: MouseEvent): void }>();
+</script>
+
+<template>
+  <button
+    v-tooltip="{ text: label, kbd }"
+    type="button"
+    class="wp-close-btn"
+    :data-size="size"
+    :aria-label="label"
+    :disabled="disabled"
+    @click="emit('click', $event)"
+  >
+    <i class="pi pi-times" aria-hidden="true" />
+  </button>
+</template>
+
+<style scoped>
+.wp-close-btn {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: var(--wp-control-h-md);
+  height: var(--wp-control-h-md);
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--wp-radius);
+  background: transparent;
+  color: var(--wp-text-muted);
+  cursor: pointer;
+  transition: background var(--wp-motion-hover), color var(--wp-motion-hover), border-color var(--wp-motion-hover);
+}
+.wp-close-btn[data-size="sm"] { width: var(--wp-control-h-sm); height: var(--wp-control-h-sm); border-radius: var(--wp-radius-sm); }
+.wp-close-btn[data-size="lg"] { width: var(--wp-control-h-lg); height: var(--wp-control-h-lg); }
+.wp-close-btn .pi { font-size: 12px; }
+.wp-close-btn[data-size="sm"] .pi { font-size: 10px; }
+.wp-close-btn[data-size="lg"] .pi { font-size: 14px; }
+.wp-close-btn:hover:not(:disabled) { background: var(--wp-bg-3); color: var(--wp-text); border-color: var(--wp-border); }
+.wp-close-btn:active:not(:disabled) { background: var(--wp-bg-4); }
+.wp-close-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-close-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-close-btn { transition: none; }
+}
+</style>