@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/ImageGrid.vue

@@ -1,125 +1,127 @@
-<script setup lang="ts">
-/**
- * A grid of image tiles that fills its width (tiles at least `min-size`
- * wide). A click or Enter opens the image in a Lightbox, where ← / → step
- * through the rest. With `selectable` each tile gets a check box in its
- * corner and `v-model:selected` holds the picked ids.
- *
- *   <ImageGrid :images="outputs" />
- *   <ImageGrid v-model:selected="keep" :images="frames" selectable :min-size="96" />
- *
- * Tiles are buttons in reading order (one Tab stop each); a tile with no
- * `src` draws a Skeleton-like block while it loads.
- */
-import { computed, ref } from "vue";
-import Lightbox from "./Lightbox.vue";
-import WpCheck from "./WpCheck.vue";
-
-export interface GridImage { id: string; src: string; alt: string; thumb?: string; caption?: string }
-
-const props = withDefaults(defineProps<{
-  images: GridImage[];
-  /** Smallest tile width in px. */
-  minSize?: number | undefined;
-  /** Width / height of a tile. */
-  aspect?: number | undefined;
-  gap?: "sm" | "md" | undefined;
-  selectable?: boolean | undefined;
-  selected?: string[] | undefined;
-  /** Open the Lightbox on a click (off: emit `open` and do your own thing). */
-  lightbox?: boolean | undefined;
-  ariaLabel?: string | undefined;
-}>(), { minSize: 120, aspect: 1, gap: "md", selectable: false, selected: () => [], lightbox: true, ariaLabel: "Images" });
-
-const emit = defineEmits<{
-  (e: "update:selected", v: string[]): void;
-  (e: "open", index: number): void;
-}>();
-
-const open = ref(false);
-const at = ref(0);
-const shots = computed(() => props.images.map((i) => ({ src: i.src, alt: i.alt, caption: i.caption })));
-
-function show(i: number): void {
-  emit("open", i);
-  if (!props.lightbox) return;
-  at.value = i;
-  open.value = true;
-}
-
-function toggle(id: string, on: boolean): void {
-  emit("update:selected", on ? [...props.selected, id] : props.selected.filter((x) => x !== id));
-}
-</script>
-
-<template>
-  <div class="wp-image-grid">
-  <ul
-    class="wp-image-grid__list"
-    :data-gap="gap"
-    :aria-label="ariaLabel"
-    :style="{ '--_min': `${minSize}px`, '--_aspect': String(aspect) }"
-  >
-    <li
-      v-for="(img, i) in images"
-      :key="img.id"
-      class="wp-image-grid__tile"
-      :data-selected="(selectable && props.selected.includes(img.id)) || undefined"
-    >
-      <button
-        type="button"
-        class="wp-image-grid__open"
-        :aria-label="selectable ? `Open ${img.alt}` : img.alt"
-        @click="show(i)"
-      >
-        <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy">
-        <span v-else class="wp-image-grid__empty" aria-hidden="true" />
-      </button>
-      <WpCheck
-        v-if="selectable"
-        class="wp-image-grid__check"
-        :model-value="props.selected.includes(img.id)"
-        :aria-label="`Select ${img.alt}`"
-        @update:model-value="toggle(img.id, $event)"
-      />
-      <span v-if="img.caption" class="wp-image-grid__caption">{{ img.caption }}</span>
-    </li>
-  </ul>
-  <Lightbox v-if="lightbox" v-model:open="open" v-model:index="at" :images="shots" />
-  </div>
-</template>
-
-<style scoped>
-.wp-image-grid { min-width: 0; }
-.wp-image-grid__list {
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--_min), 1fr));
-  gap: var(--wp-space-3); margin: 0; padding: 0; list-style: none;
-}
-.wp-image-grid__list[data-gap="sm"] { gap: var(--wp-space-1); }
-.wp-image-grid__tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
-.wp-image-grid__open {
-  display: block; width: 100%; aspect-ratio: var(--_aspect); padding: 0; overflow: hidden;
-  border: 1px solid var(--wp-border); border-radius: var(--wp-radius);
-  background: var(--wp-bg-2); cursor: zoom-in;
-  transition: border-color var(--wp-motion-hover), box-shadow var(--wp-motion-hover);
-}
-.wp-image-grid__open:hover { border-color: var(--wp-border-strong); }
-.wp-image-grid__open:focus-visible { outline: none; border-color: var(--wp-border-focus); box-shadow: 0 0 0 3px var(--wp-focus-ring); }
-.wp-image-grid__tile[data-selected] .wp-image-grid__open { border-color: var(--wp-accent); box-shadow: 0 0 0 2px var(--wp-accent-glow); }
-.wp-image-grid__img { display: block; width: 100%; height: 100%; object-fit: cover; }
-.wp-image-grid__empty {
-  display: block; width: 100%; height: 100%;
-  background: linear-gradient(90deg, var(--wp-bg-2) 0%, var(--wp-bg-3) 50%, var(--wp-bg-2) 100%);
-  background-size: 200% 100%; animation: wp-image-grid-shimmer var(--wp-motion-shimmer) infinite;
-}
-@keyframes wp-image-grid-shimmer { to { background-position: -200% 0; } }
-.wp-image-grid__check { position: absolute; top: 6px; left: 6px; }
-.wp-image-grid__caption {
-  overflow: hidden; color: var(--wp-text-muted); font: 400 var(--wp-text-xs)/1.3 var(--wp-font-sans);
-  text-overflow: ellipsis; white-space: nowrap;
-}
-@media (prefers-reduced-motion: reduce) {
-  .wp-image-grid__open { transition: none; }
-  .wp-image-grid__empty { animation: none; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * A grid of image tiles that fills its width (tiles at least `min-size`
+ * wide). A click or Enter opens the image in a Lightbox, where ← / → step
+ * through the rest. With `selectable` each tile gets a check box in its
+ * corner and `v-model:selected` holds the picked ids.
+ *
+ *   <ImageGrid :images="outputs" />
+ *   <ImageGrid v-model:selected="keep" :images="frames" selectable :min-size="96" />
+ *
+ * Tiles are buttons in reading order (one Tab stop each). A tile with no
+ * `src` yet (a frame still rendering) draws a Skeleton and can't be opened;
+ * the Lightbox steps only through the images that are there.
+ */
+import { computed, ref } from "vue";
+import Lightbox from "./Lightbox.vue";
+import Skeleton from "./Skeleton.vue";
+import WpCheck from "./WpCheck.vue";
+
+export interface GridImage { id: string; src: string; alt: string; thumb?: string; caption?: string }
+
+const props = withDefaults(defineProps<{
+  images: GridImage[];
+  /** Smallest tile width in px. */
+  minSize?: number | undefined;
+  /** Width / height of a tile. */
+  aspect?: number | undefined;
+  gap?: "sm" | "md" | undefined;
+  selectable?: boolean | undefined;
+  selected?: string[] | undefined;
+  /** Open the Lightbox on a click (off: emit `open` and do your own thing). */
+  lightbox?: boolean | undefined;
+  ariaLabel?: string | undefined;
+}>(), { minSize: 120, aspect: 1, gap: "md", selectable: false, selected: () => [], lightbox: true, ariaLabel: "Images" });
+
+const emit = defineEmits<{
+  (e: "update:selected", v: string[]): void;
+  (e: "open", index: number): void;
+}>();
+
+const open = ref(false);
+const at = ref(0);
+/** Only the images that are there: a tile still loading has nothing to show. */
+const ready = computed(() => props.images.map((img, i) => ({ img, i })).filter(({ img }) => !!img.src));
+const shots = computed(() => ready.value.map(({ img }) => ({ src: img.src, alt: img.alt, caption: img.caption })));
+
+function show(i: number): void {
+  if (!props.images[i]?.src) return;
+  emit("open", i);
+  if (!props.lightbox) return;
+  at.value = ready.value.findIndex((r) => r.i === i);
+  open.value = true;
+}
+
+function toggle(id: string, on: boolean): void {
+  emit("update:selected", on ? [...props.selected, id] : props.selected.filter((x) => x !== id));
+}
+</script>
+
+<template>
+  <div class="wp-image-grid">
+  <ul
+    class="wp-image-grid__list"
+    :data-gap="gap"
+    :aria-label="ariaLabel"
+    :style="{ '--_min': `${minSize}px`, '--_aspect': String(aspect) }"
+  >
+    <li
+      v-for="(img, i) in images"
+      :key="img.id"
+      class="wp-image-grid__tile"
+      :data-selected="(selectable && props.selected.includes(img.id)) || undefined"
+    >
+      <button
+        type="button"
+        class="wp-image-grid__open"
+        :aria-label="!img.src ? `${img.alt}, still loading` : selectable ? `Open ${img.alt}` : img.alt"
+        :aria-disabled="!img.src || undefined"
+        :data-loading="!img.src || undefined"
+        @click="show(i)"
+      >
+        <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy">
+        <Skeleton v-else class="wp-image-grid__empty" shape="block" width="100%" height="100%" />
+      </button>
+      <WpCheck
+        v-if="selectable"
+        class="wp-image-grid__check"
+        :model-value="props.selected.includes(img.id)"
+        :aria-label="`Select ${img.alt}`"
+        @update:model-value="toggle(img.id, $event)"
+      />
+      <span v-if="img.caption" class="wp-image-grid__caption">{{ img.caption }}</span>
+    </li>
+  </ul>
+  <Lightbox v-if="lightbox" v-model:open="open" v-model:index="at" :images="shots" />
+  </div>
+</template>
+
+<style scoped>
+.wp-image-grid { min-width: 0; }
+.wp-image-grid__list {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--_min), 1fr));
+  gap: var(--wp-space-3); margin: 0; padding: 0; list-style: none;
+}
+.wp-image-grid__list[data-gap="sm"] { gap: var(--wp-space-1); }
+.wp-image-grid__tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.wp-image-grid__open {
+  display: block; width: 100%; aspect-ratio: var(--_aspect); padding: 0; overflow: hidden;
+  border: 1px solid var(--wp-border); border-radius: var(--wp-radius);
+  background: var(--wp-bg-2); cursor: zoom-in;
+  transition: border-color var(--wp-motion-hover), box-shadow var(--wp-motion-hover);
+}
+.wp-image-grid__open:hover { border-color: var(--wp-border-strong); }
+.wp-image-grid__open:focus-visible { outline: none; border-color: var(--wp-border-focus); box-shadow: var(--wp-focus-ring); }
+.wp-image-grid__tile[data-selected] .wp-image-grid__open { border-color: var(--wp-accent); box-shadow: 0 0 0 2px var(--wp-accent-glow); }
+.wp-image-grid__img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.wp-image-grid__open[data-loading] { cursor: progress; }
+.wp-image-grid__empty { width: 100%; height: 100%; }
+.wp-image-grid__check { position: absolute; top: 6px; left: 6px; }
+.wp-image-grid__caption {
+  overflow: hidden; color: var(--wp-text-muted); font: 400 var(--wp-text-xs)/1.3 var(--wp-font-sans);
+  text-overflow: ellipsis; white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-image-grid__open { transition: none; }
+}
+</style>

package/src/InlineEdit.vue

@@ -1,183 +1,183 @@
-<script setup lang="ts">
-/**
- * Inline edit: a name that turns into a text box where it stands. Click it
- * (or focus it and press Enter or F2), type, then Enter or a click away
- * saves and Escape puts the old text back. Works on the canvas and in the
- * manager.
- *
- *   <InlineEdit v-model="mod.name" label="Wildcard name" />
- *   <InlineEdit v-model="title" label="Chat title" :validate="(v) => taken(v) ? 'That name is taken' : null" />
- *
- * Read view is a button named "Rename <label>: <value>", with a pencil on
- * hover and focus. An empty or invalid value keeps the box open with the
- * message under it; `update:modelValue` only fires on a saved change.
- */
-import { computed, nextTick, ref, useId } from "vue";
-
-const props = withDefaults(defineProps<{
-  modelValue: string;
-  /** What is being renamed, e.g. "Wildcard name". */
-  label: string;
-  placeholder?: string | undefined;
-  /** Return a message to refuse the value, or null to take it. */
-  validate?: ((v: string) => string | null) | undefined;
-  /** Refuse an empty value. On by default. */
-  required?: boolean | undefined;
-  disabled?: boolean | undefined;
-  size?: "sm" | "md" | "lg" | undefined;
-  /** Trim spaces from both ends before saving. */
-  trim?: boolean | undefined;
-  maxlength?: number | undefined;
-}>(), { placeholder: "Untitled", required: true, size: "md", trim: true, maxlength: undefined });
-
-const emit = defineEmits<{
-  (e: "update:modelValue", v: string): void;
-  (e: "edit"): void;
-  (e: "cancel"): void;
-}>();
-
-const editing = ref(false);
-const draft = ref("");
-const error = ref<string | null>(null);
-const inputEl = ref<HTMLInputElement | null>(null);
-const readEl = ref<HTMLButtonElement | null>(null);
-const errId = `wp-inline-edit-${useId()}`;
-
-const shown = computed(() => props.modelValue || props.placeholder);
-
-async function open(): Promise<void> {
-  if (props.disabled || editing.value) return;
-  draft.value = props.modelValue;
-  error.value = null;
-  editing.value = true;
-  emit("edit");
-  await nextTick();
-  inputEl.value?.focus();
-  inputEl.value?.select();
-}
-
-function check(v: string): string | null {
-  if (props.required && !v) return `${props.label} can't be empty`;
-  return props.validate?.(v) ?? null;
-}
-
-async function close(): Promise<void> {
-  editing.value = false;
-  error.value = null;
-  await nextTick();
-  readEl.value?.focus();
-}
-
-function save(refocus = true): void {
-  if (!editing.value) return;
-  const v = props.trim ? draft.value.trim() : draft.value;
-  const msg = check(v);
-  if (msg) {
-    error.value = msg;
-    return;
-  }
-  if (v !== props.modelValue) emit("update:modelValue", v);
-  if (refocus) void close();
-  else { editing.value = false; error.value = null; }
-}
-
-function cancel(): void {
-  if (!editing.value) return;
-  emit("cancel");
-  void close();
-}
-
-function onBlur(): void {
-  // A click away saves; a value that can't be saved is put back instead of
-  // leaving a box open that nobody is looking at.
-  if (!editing.value) return;
-  const v = props.trim ? draft.value.trim() : draft.value;
-  if (check(v)) { editing.value = false; error.value = null; emit("cancel"); return; }
-  save(false);
-}
-
-function onKeydown(ev: KeyboardEvent): void {
-  if (ev.key === "Enter") { ev.preventDefault(); save(); }
-  else if (ev.key === "Escape") { ev.preventDefault(); ev.stopPropagation(); cancel(); }
-}
-
-function onReadKey(ev: KeyboardEvent): void {
-  if (ev.key === "F2") { ev.preventDefault(); void open(); }
-}
-</script>
-
-<template>
-  <span class="wp-inline-edit" :data-size="size" :data-editing="editing || undefined">
-    <template v-if="editing">
-      <input
-        ref="inputEl"
-        v-model="draft"
-        class="wp-inline-edit__input"
-        type="text"
-        :aria-label="label"
-        :aria-invalid="error ? 'true' : undefined"
-        :aria-describedby="error ? errId : undefined"
-        :placeholder="placeholder"
-        :maxlength="maxlength"
-        @keydown="onKeydown"
-        @blur="onBlur"
-      >
-      <span v-if="error" :id="errId" class="wp-inline-edit__error" role="alert">{{ error }}</span>
-    </template>
-    <button
-      v-else
-      ref="readEl"
-      type="button"
-      class="wp-inline-edit__read"
-      :data-empty="!modelValue || undefined"
-      :aria-label="`Rename ${label}: ${modelValue || placeholder}`"
-      :disabled="disabled"
-      @click="open"
-      @keydown="onReadKey"
-    >
-      <span class="wp-inline-edit__text">{{ shown }}</span>
-      <i class="pi pi-pencil wp-inline-edit__pen" aria-hidden="true" />
-    </button>
-  </span>
-</template>
-
-<style scoped>
-.wp-inline-edit {
-  --_h: var(--wp-control-h-md);
-  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%;
-  /* The padding of the hover box sits outside the text's line. */
-  margin-left: calc(var(--wp-space-3) * -1);
-  font: inherit; vertical-align: middle;
-}
-.wp-inline-edit[data-size="sm"] { --_h: var(--wp-control-h-sm); }
-.wp-inline-edit[data-size="lg"] { --_h: var(--wp-control-h-lg); }
-.wp-inline-edit__read, .wp-inline-edit__input {
-  box-sizing: border-box; height: var(--_h); margin: 0; min-width: 0;
-  padding: 0 var(--wp-space-3); border-radius: var(--wp-radius-sm);
-  font: inherit; color: var(--wp-text);
-}
-.wp-inline-edit__read {
-  display: inline-flex; align-items: center; gap: var(--wp-space-3); max-width: 100%;
-  border: 1px solid transparent; background: transparent; cursor: text; text-align: left;
-  transition: background var(--wp-motion-hover), border-color var(--wp-motion-hover);
-}
-.wp-inline-edit__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.wp-inline-edit__read[data-empty] .wp-inline-edit__text { color: var(--wp-text-dim); font-style: italic; }
-.wp-inline-edit__pen { flex: none; font-size: 0.8em; color: var(--wp-text-dim); opacity: 0; transition: opacity var(--wp-motion-hover); }
-.wp-inline-edit__read:hover:not(:disabled) { background: var(--wp-row-hover); border-color: var(--wp-border-soft); }
-.wp-inline-edit__read:hover .wp-inline-edit__pen, .wp-inline-edit__read:focus-visible .wp-inline-edit__pen { opacity: 1; }
-.wp-inline-edit__read:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
-.wp-inline-edit__read:disabled { cursor: default; }
-.wp-inline-edit__input {
-  width: 100%; min-width: 12ch;
-  border: 1px solid var(--wp-border-focus); background: var(--wp-bg-1); outline: none;
-  box-shadow: 0 0 0 3px var(--wp-focus-ring);
-}
-.wp-inline-edit__input[aria-invalid="true"] { border-color: var(--wp-error-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-danger) 22%, transparent); }
-.wp-inline-edit__error {
-  margin-top: 2px; color: var(--wp-error-text); font: 400 var(--wp-text-xs)/1.3 var(--wp-font-sans);
-}
-@media (prefers-reduced-motion: reduce) {
-  .wp-inline-edit__read, .wp-inline-edit__pen { transition: none; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * Inline edit: a name that turns into a text box where it stands. Click it
+ * (or focus it and press Enter or F2), type, then Enter or a click away
+ * saves and Escape puts the old text back. Works on the canvas and in the
+ * manager.
+ *
+ *   <InlineEdit v-model="mod.name" label="Wildcard name" />
+ *   <InlineEdit v-model="title" label="Chat title" :validate="(v) => taken(v) ? 'That name is taken' : null" />
+ *
+ * Read view is a button named "Rename <label>: <value>", with a pencil on
+ * hover and focus. An empty or invalid value keeps the box open with the
+ * message under it; `update:modelValue` only fires on a saved change.
+ */
+import { computed, nextTick, ref, useId } from "vue";
+
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  /** What is being renamed, e.g. "Wildcard name". */
+  label: string;
+  placeholder?: string | undefined;
+  /** Return a message to refuse the value, or null to take it. */
+  validate?: ((v: string) => string | null) | undefined;
+  /** Refuse an empty value. On by default. */
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  /** Trim spaces from both ends before saving. */
+  trim?: boolean | undefined;
+  maxlength?: number | undefined;
+}>(), { placeholder: "Untitled", required: true, size: "md", trim: true, maxlength: undefined });
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: string): void;
+  (e: "edit"): void;
+  (e: "cancel"): void;
+}>();
+
+const editing = ref(false);
+const draft = ref("");
+const error = ref<string | null>(null);
+const inputEl = ref<HTMLInputElement | null>(null);
+const readEl = ref<HTMLButtonElement | null>(null);
+const errId = `wp-inline-edit-${useId()}`;
+
+const shown = computed(() => props.modelValue || props.placeholder);
+
+async function open(): Promise<void> {
+  if (props.disabled || editing.value) return;
+  draft.value = props.modelValue;
+  error.value = null;
+  editing.value = true;
+  emit("edit");
+  await nextTick();
+  inputEl.value?.focus();
+  inputEl.value?.select();
+}
+
+function check(v: string): string | null {
+  if (props.required && !v) return `${props.label} can't be empty`;
+  return props.validate?.(v) ?? null;
+}
+
+async function close(): Promise<void> {
+  editing.value = false;
+  error.value = null;
+  await nextTick();
+  readEl.value?.focus();
+}
+
+function save(refocus = true): void {
+  if (!editing.value) return;
+  const v = props.trim ? draft.value.trim() : draft.value;
+  const msg = check(v);
+  if (msg) {
+    error.value = msg;
+    return;
+  }
+  if (v !== props.modelValue) emit("update:modelValue", v);
+  if (refocus) void close();
+  else { editing.value = false; error.value = null; }
+}
+
+function cancel(): void {
+  if (!editing.value) return;
+  emit("cancel");
+  void close();
+}
+
+function onBlur(): void {
+  // A click away saves; a value that can't be saved is put back instead of
+  // leaving a box open that nobody is looking at.
+  if (!editing.value) return;
+  const v = props.trim ? draft.value.trim() : draft.value;
+  if (check(v)) { editing.value = false; error.value = null; emit("cancel"); return; }
+  save(false);
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (ev.key === "Enter") { ev.preventDefault(); save(); }
+  else if (ev.key === "Escape") { ev.preventDefault(); ev.stopPropagation(); cancel(); }
+}
+
+function onReadKey(ev: KeyboardEvent): void {
+  if (ev.key === "F2") { ev.preventDefault(); void open(); }
+}
+</script>
+
+<template>
+  <span class="wp-inline-edit" :data-size="size" :data-editing="editing || undefined">
+    <template v-if="editing">
+      <input
+        ref="inputEl"
+        v-model="draft"
+        class="wp-inline-edit__input"
+        type="text"
+        :aria-label="label"
+        :aria-invalid="error ? 'true' : undefined"
+        :aria-describedby="error ? errId : undefined"
+        :placeholder="placeholder"
+        :maxlength="maxlength"
+        @keydown="onKeydown"
+        @blur="onBlur"
+      >
+      <span v-if="error" :id="errId" class="wp-inline-edit__error" role="alert">{{ error }}</span>
+    </template>
+    <button
+      v-else
+      ref="readEl"
+      type="button"
+      class="wp-inline-edit__read"
+      :data-empty="!modelValue || undefined"
+      :aria-label="`Rename ${label}: ${modelValue || placeholder}`"
+      :disabled="disabled"
+      @click="open"
+      @keydown="onReadKey"
+    >
+      <span class="wp-inline-edit__text">{{ shown }}</span>
+      <i class="pi pi-pencil wp-inline-edit__pen" aria-hidden="true" />
+    </button>
+  </span>
+</template>
+
+<style scoped>
+.wp-inline-edit {
+  --_h: var(--wp-control-h-md);
+  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%;
+  /* The padding of the hover box sits outside the text's line. */
+  margin-left: calc(var(--wp-space-3) * -1);
+  font: inherit; vertical-align: middle;
+}
+.wp-inline-edit[data-size="sm"] { --_h: var(--wp-control-h-sm); }
+.wp-inline-edit[data-size="lg"] { --_h: var(--wp-control-h-lg); }
+.wp-inline-edit__read, .wp-inline-edit__input {
+  box-sizing: border-box; height: var(--_h); margin: 0; min-width: 0;
+  padding: 0 var(--wp-space-3); border-radius: var(--wp-radius-sm);
+  font: inherit; color: var(--wp-text);
+}
+.wp-inline-edit__read {
+  display: inline-flex; align-items: center; gap: var(--wp-space-3); max-width: 100%;
+  border: 1px solid transparent; background: transparent; cursor: text; text-align: left;
+  transition: background var(--wp-motion-hover), border-color var(--wp-motion-hover);
+}
+.wp-inline-edit__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-inline-edit__read[data-empty] .wp-inline-edit__text { color: var(--wp-text-dim); font-style: italic; }
+.wp-inline-edit__pen { flex: none; font-size: 0.8em; color: var(--wp-text-dim); opacity: 0; transition: opacity var(--wp-motion-hover); }
+.wp-inline-edit__read:hover:not(:disabled) { background: var(--wp-row-hover); border-color: var(--wp-border-soft); }
+.wp-inline-edit__read:hover .wp-inline-edit__pen, .wp-inline-edit__read:focus-visible .wp-inline-edit__pen { opacity: 1; }
+.wp-inline-edit__read:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-inline-edit__read:disabled { cursor: default; }
+.wp-inline-edit__input {
+  width: 100%; min-width: 12ch;
+  border: 1px solid var(--wp-border-focus); background: var(--wp-bg-1); outline: none;
+  box-shadow: var(--wp-focus-ring);
+}
+.wp-inline-edit__input[aria-invalid="true"] { border-color: var(--wp-error-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-danger) 22%, transparent); }
+.wp-inline-edit__error {
+  margin-top: 2px; color: var(--wp-error-text); font: 400 var(--wp-text-xs)/1.3 var(--wp-font-sans);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-inline-edit__read, .wp-inline-edit__pen { transition: none; }
+}
+</style>