@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/DiffView.vue

@@ -1,68 +1,68 @@
-<script setup lang="ts">
-/**
- * Diff view: what changed between two texts, word by word (an option, a
- * template) or line by line (a pack, a log). Removed text is struck through
- * on red, added text is on green, and each change also says "removed" /
- * "added" to screen readers, so colour is never the only sign. Works on the
- * canvas and in the manager.
- *
- *   <DiffView before="auburn hair, rim light" after="silver hair, rim light" />
- *   <DiffView :before="oldJson" :after="newJson" by="lines" layout="split" />
- *
- * `layout="split"` shows Before and After side by side. Very long texts fall
- * back to "all removed, all added" rather than freeze the page.
- */
-import { computed } from "vue";
-import { diffText } from "./diff";
-
-const props = withDefaults(defineProps<{
-  before: string;
-  after: string;
-  by?: "words" | "lines" | undefined;
-  layout?: "inline" | "split" | undefined;
-  size?: "sm" | "md" | undefined;
-  /** Mono font, for code and JSON. */
-  mono?: boolean | undefined;
-}>(), { by: "words", layout: "inline", size: "md" });
-
-const parts = computed(() => diffText(props.before, props.after, props.by));
-const counts = computed(() => ({
-  add: parts.value.filter((p) => p.kind === "add").length,
-  del: parts.value.filter((p) => p.kind === "del").length,
-}));
-</script>
-
-<template>
-  <div class="wp-diff" :data-size="size" :data-layout="layout" :data-by="by" :data-mono="mono || by === 'lines' || undefined">
-    <p v-if="!counts.add && !counts.del" class="wp-diff__same">No changes</p>
-    <template v-else-if="layout === 'inline'">
-      <div class="wp-diff__text"><template v-for="(p, i) in parts" :key="i"><span v-if="p.kind === 'same'">{{ p.text }}</span><del v-else-if="p.kind === 'del'" class="wp-diff__del"><span class="wp-diff__sr">removed: </span>{{ p.text }}</del><ins v-else class="wp-diff__add"><span class="wp-diff__sr">added: </span>{{ p.text }}</ins></template></div>
-    </template>
-    <div v-else class="wp-diff__split">
-      <section class="wp-diff__side" aria-label="Before">
-        <span class="wp-diff__side-label" aria-hidden="true">Before</span>
-        <div class="wp-diff__text"><template v-for="(p, i) in parts" :key="i"><span v-if="p.kind === 'same'">{{ p.text }}</span><del v-else-if="p.kind === 'del'" class="wp-diff__del"><span class="wp-diff__sr">removed: </span>{{ p.text }}</del></template></div>
-      </section>
-      <section class="wp-diff__side" aria-label="After">
-        <span class="wp-diff__side-label" aria-hidden="true">After</span>
-        <div class="wp-diff__text"><template v-for="(p, i) in parts" :key="i"><span v-if="p.kind === 'same'">{{ p.text }}</span><ins v-else-if="p.kind === 'add'" class="wp-diff__add"><span class="wp-diff__sr">added: </span>{{ p.text }}</ins></template></div>
-      </section>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.wp-diff { min-width: 0; color: var(--wp-text); font: 400 var(--wp-text-sm)/1.6 var(--wp-font-sans); }
-.wp-diff[data-size="sm"] { font-size: var(--wp-text-xs); }
-.wp-diff[data-mono] { font-family: var(--wp-font-mono); }
-.wp-diff__text { white-space: pre-wrap; overflow-wrap: anywhere; }
-.wp-diff__del, .wp-diff__add { border-radius: min(3px, var(--wp-radius-cap, 999px)); padding: 0 1px; text-decoration-thickness: 1px; }
-.wp-diff__del { background: color-mix(in srgb, var(--wp-danger) 16%, transparent); color: var(--wp-danger-text); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--wp-danger) 70%, transparent); }
-.wp-diff__add { background: color-mix(in srgb, var(--wp-success) 18%, transparent); color: var(--wp-text); text-decoration: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--wp-success) 60%, transparent); }
-.wp-diff[data-by="lines"] .wp-diff__del, .wp-diff[data-by="lines"] .wp-diff__add { display: block; padding: 0 var(--wp-space-2); border-radius: 0; }
-.wp-diff__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wp-space-4); }
-.wp-diff__side { min-width: 0; padding: var(--wp-space-3) var(--wp-space-4); border: 1px solid var(--wp-border); border-radius: var(--wp-radius); background: var(--wp-bg-1); }
-.wp-diff__side-label { display: block; margin-bottom: var(--wp-space-2); color: var(--wp-text-dim); font: 600 var(--wp-text-xs)/1 var(--wp-font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
-.wp-diff__same { margin: 0; color: var(--wp-text-dim); font-style: italic; }
-.wp-diff__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-</style>
+<script setup lang="ts">
+/**
+ * Diff view: what changed between two texts, word by word (an option, a
+ * template) or line by line (a pack, a log). Removed text is struck through
+ * on red, added text is on green, and each change also says "removed" /
+ * "added" to screen readers, so colour is never the only sign. Works on the
+ * canvas and in the manager.
+ *
+ *   <DiffView before="auburn hair, rim light" after="silver hair, rim light" />
+ *   <DiffView :before="oldJson" :after="newJson" by="lines" layout="split" />
+ *
+ * `layout="split"` shows Before and After side by side. Very long texts fall
+ * back to "all removed, all added" rather than freeze the page.
+ */
+import { computed } from "vue";
+import { diffText } from "./diff";
+
+const props = withDefaults(defineProps<{
+  before: string;
+  after: string;
+  by?: "words" | "lines" | undefined;
+  layout?: "inline" | "split" | undefined;
+  size?: "sm" | "md" | undefined;
+  /** Mono font, for code and JSON. */
+  mono?: boolean | undefined;
+}>(), { by: "words", layout: "inline", size: "md" });
+
+const parts = computed(() => diffText(props.before, props.after, props.by));
+const counts = computed(() => ({
+  add: parts.value.filter((p) => p.kind === "add").length,
+  del: parts.value.filter((p) => p.kind === "del").length,
+}));
+</script>
+
+<template>
+  <div class="wp-diff" :data-size="size" :data-layout="layout" :data-by="by" :data-mono="mono || by === 'lines' || undefined">
+    <p v-if="!counts.add && !counts.del" class="wp-diff__same">No changes</p>
+    <template v-else-if="layout === 'inline'">
+      <div class="wp-diff__text"><template v-for="(p, i) in parts" :key="i"><span v-if="p.kind === 'same'">{{ p.text }}</span><del v-else-if="p.kind === 'del'" class="wp-diff__del"><span class="wp-diff__sr">removed: </span>{{ p.text }}</del><ins v-else class="wp-diff__add"><span class="wp-diff__sr">added: </span>{{ p.text }}</ins></template></div>
+    </template>
+    <div v-else class="wp-diff__split">
+      <section class="wp-diff__side" aria-label="Before">
+        <span class="wp-diff__side-label" aria-hidden="true">Before</span>
+        <div class="wp-diff__text"><template v-for="(p, i) in parts" :key="i"><span v-if="p.kind === 'same'">{{ p.text }}</span><del v-else-if="p.kind === 'del'" class="wp-diff__del"><span class="wp-diff__sr">removed: </span>{{ p.text }}</del></template></div>
+      </section>
+      <section class="wp-diff__side" aria-label="After">
+        <span class="wp-diff__side-label" aria-hidden="true">After</span>
+        <div class="wp-diff__text"><template v-for="(p, i) in parts" :key="i"><span v-if="p.kind === 'same'">{{ p.text }}</span><ins v-else-if="p.kind === 'add'" class="wp-diff__add"><span class="wp-diff__sr">added: </span>{{ p.text }}</ins></template></div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-diff { min-width: 0; color: var(--wp-text); font: 400 var(--wp-text-sm)/1.6 var(--wp-font-sans); }
+.wp-diff[data-size="sm"] { font-size: var(--wp-text-xs); }
+.wp-diff[data-mono] { font-family: var(--wp-font-mono); }
+.wp-diff__text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.wp-diff__del, .wp-diff__add { border-radius: min(3px, var(--wp-radius-cap, 999px)); padding: 0 1px; text-decoration-thickness: 1px; }
+.wp-diff__del { background: color-mix(in srgb, var(--wp-danger) 16%, transparent); color: var(--wp-danger-text); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--wp-danger) 70%, transparent); }
+.wp-diff__add { background: color-mix(in srgb, var(--wp-success) 18%, transparent); color: var(--wp-text); text-decoration: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--wp-success) 60%, transparent); }
+.wp-diff[data-by="lines"] .wp-diff__del, .wp-diff[data-by="lines"] .wp-diff__add { display: block; padding: 0 var(--wp-space-2); border-radius: 0; }
+.wp-diff__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wp-space-4); }
+.wp-diff__side { min-width: 0; padding: var(--wp-space-3) var(--wp-space-4); border: 1px solid var(--wp-border); border-radius: var(--wp-radius); background: var(--wp-bg-1); }
+.wp-diff__side-label { display: block; margin-bottom: var(--wp-space-2); color: var(--wp-text-dim); font: 600 var(--wp-text-xs)/1 var(--wp-font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
+.wp-diff__same { margin: 0; color: var(--wp-text-dim); font-style: italic; }
+.wp-diff__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+</style>

package/src/Disclosure.vue

@@ -1,166 +1,166 @@
-<script setup lang="ts">
-/**
- * Disclosure: a "show more" section that folds open under its heading. The
- * heading is a button with `aria-expanded` + `aria-controls` (APG
- * disclosure), the chevron turns when open, and the body grows to its height
- * (no motion with `prefers-reduced-motion`). Works on the canvas and in the
- * manager.
- *
- *   <Disclosure v-model:open="open" label="Advanced">…</Disclosure>
- *   <Disclosure label="Rules" :count="3"><template #summary>…</template>…</Disclosure>
- *
- * Leave out `v-model:open` and it keeps its own state (`default-open` sets
- * where it starts). `#actions` sits at the right end of the heading, outside
- * the button, for controls that should not fold the section; `#lead` sits
- * before the button for the same (a "select all" checkbox lined up with
- * the rows' own). `lazy` builds
- * the body only while it is open. `flush` makes the heading a full-width
- * band with a rule under it and drops the body's indent, for a section of a
- * table or list that fills its card (a group of options, a rule).
- */
-import { computed, ref, useId, useSlots } from "vue";
-
-const props = withDefaults(defineProps<{
-  open?: boolean | undefined;
-  /** Where it starts when nobody binds `open`. */
-  defaultOpen?: boolean | undefined;
-  label?: string | undefined;
-  /** A small count after the label. */
-  count?: number | string | undefined;
-  size?: "sm" | "md" | undefined;
-  disabled?: boolean | undefined;
-  /** Draw a border and a padded body, for a section that stands alone. */
-  boxed?: boolean | undefined;
-  /** Full-width heading band, body without indent: a section of a table or list. */
-  flush?: boolean | undefined;
-  /** Build the body only while open (a long list, a costly panel). */
-  lazy?: boolean | undefined;
-  /** Extra attributes on the heading button, e.g. `data-test`. */
-  triggerAttrs?: Record<string, string> | undefined;
-}>(), { open: undefined, size: "md", triggerAttrs: undefined });
-
-const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
-const slots = useSlots();
-
-const own = ref(props.defaultOpen);
-const isOpen = computed(() => props.open ?? own.value);
-const bodyId = `wp-disclosure-${useId()}`;
-
-function toggle(): void {
-  if (props.disabled) return;
-  const next = !isOpen.value;
-  own.value = next;
-  emit("update:open", next);
-}
-</script>
-
-<template>
-  <div class="wp-disclosure" :data-size="size" :data-open="isOpen" :data-boxed="boxed || undefined" :data-flush="flush || undefined">
-    <div class="wp-disclosure__head">
-      <div v-if="slots.lead" class="wp-disclosure__lead"><slot name="lead" /></div>
-      <button
-        v-bind="triggerAttrs ?? {}"
-        type="button"
-        class="wp-disclosure__trigger"
-        :aria-expanded="isOpen"
-        :aria-controls="bodyId"
-        :disabled="disabled"
-        @click="toggle"
-      >
-        <i class="pi pi-chevron-right wp-disclosure__chev" aria-hidden="true" />
-        <slot name="summary">
-          <span class="wp-disclosure__label">{{ label }}</span>
-        </slot>
-        <span v-if="count !== undefined" class="wp-disclosure__count">{{ count }}</span>
-      </button>
-      <div v-if="slots.actions" class="wp-disclosure__actions"><slot name="actions" /></div>
-    </div>
-    <div :id="bodyId" class="wp-disclosure__body" :inert="!isOpen || undefined">
-      <div class="wp-disclosure__inner">
-        <div v-if="isOpen || !lazy" class="wp-disclosure__content"><slot /></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.wp-disclosure { min-width: 0; }
-.wp-disclosure[data-boxed] {
-  border: 1px solid var(--wp-border);
-  border-radius: var(--wp-radius-md);
-  background: var(--wp-bg-1);
-}
-.wp-disclosure__head { display: flex; align-items: center; gap: var(--wp-space-3); min-width: 0; }
-.wp-disclosure[data-boxed] .wp-disclosure__head { padding: 0 var(--wp-space-3); }
-.wp-disclosure__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--wp-space-3);
-  flex: 1;
-  min-width: 0;
-  min-height: var(--wp-control-h-md);
-  margin: 0;
-  padding: 0 var(--wp-space-2);
-  border: 0;
-  border-radius: var(--wp-radius-sm);
-  background: transparent;
-  color: var(--wp-text);
-  font: 600 var(--wp-text-sm)/1.3 var(--wp-font-sans);
-  text-align: left;
-  cursor: pointer;
-}
-.wp-disclosure[data-size="sm"] .wp-disclosure__trigger {
-  min-height: var(--wp-control-h-sm);
-  font-size: var(--wp-text-xs);
-  gap: var(--wp-space-2);
-}
-.wp-disclosure__trigger:hover:not(:disabled) { background: var(--wp-row-hover); }
-.wp-disclosure__trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
-.wp-disclosure__trigger:disabled { opacity: 0.45; cursor: not-allowed; }
-.wp-disclosure__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.wp-disclosure__chev {
-  flex: none;
-  font-size: 0.75em;
-  color: var(--wp-text-muted);
-  transition: transform var(--wp-motion-swap) var(--wp-motion-curve-collapse);
-}
-.wp-disclosure[data-open="true"] .wp-disclosure__chev { transform: rotate(90deg); }
-.wp-disclosure__count {
-  padding: 1px 6px;
-  border-radius: var(--wp-radius-cap, 999px);
-  background: var(--wp-bg-3);
-  color: var(--wp-text-muted);
-  font-size: var(--wp-text-xs);
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-.wp-disclosure__lead { display: inline-flex; align-items: center; flex: none; }
-.wp-disclosure__actions { display: inline-flex; align-items: center; gap: var(--wp-space-2); flex: none; }
-/* Grid rows animate from 0fr to 1fr, so the body grows to its own height
-   without measuring it. */
-.wp-disclosure__body {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--wp-motion-swap) var(--wp-motion-curve-collapse);
-}
-.wp-disclosure[data-open="true"] > .wp-disclosure__body { grid-template-rows: 1fr; }
-.wp-disclosure__inner { min-height: 0; overflow: hidden; }
-.wp-disclosure__content { padding: var(--wp-space-3) 0 var(--wp-space-2) calc(var(--wp-space-2) + 1.1em + var(--wp-space-3)); }
-.wp-disclosure[data-size="sm"] .wp-disclosure__content { padding: var(--wp-space-2) 0 var(--wp-space-2) calc(var(--wp-space-2) + 1em); }
-.wp-disclosure[data-boxed] .wp-disclosure__content { padding: var(--wp-space-2) var(--wp-space-5) var(--wp-space-5); }
-.wp-disclosure[data-flush] > .wp-disclosure__head {
-  border-bottom: 1px solid var(--wp-border);
-  background: var(--wp-bg-2);
-}
-.wp-disclosure[data-flush] .wp-disclosure__trigger {
-  padding: 0 var(--wp-space-5);
-  border-radius: 0;
-  font-size: var(--wp-text-xs);
-}
-.wp-disclosure[data-flush] .wp-disclosure__trigger:focus-visible { box-shadow: inset 0 0 0 2px var(--wp-border-focus); }
-.wp-disclosure[data-flush] .wp-disclosure__content,
-.wp-disclosure[data-flush][data-size="sm"] .wp-disclosure__content { padding: 0; }
-@media (prefers-reduced-motion: reduce) {
-  .wp-disclosure__chev, .wp-disclosure__body { transition: none; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * Disclosure: a "show more" section that folds open under its heading. The
+ * heading is a button with `aria-expanded` + `aria-controls` (APG
+ * disclosure), the chevron turns when open, and the body grows to its height
+ * (no motion with `prefers-reduced-motion`). Works on the canvas and in the
+ * manager.
+ *
+ *   <Disclosure v-model:open="open" label="Advanced">…</Disclosure>
+ *   <Disclosure label="Rules" :count="3"><template #summary>…</template>…</Disclosure>
+ *
+ * Leave out `v-model:open` and it keeps its own state (`default-open` sets
+ * where it starts). `#actions` sits at the right end of the heading, outside
+ * the button, for controls that should not fold the section; `#lead` sits
+ * before the button for the same (a "select all" checkbox lined up with
+ * the rows' own). `lazy` builds
+ * the body only while it is open. `flush` makes the heading a full-width
+ * band with a rule under it and drops the body's indent, for a section of a
+ * table or list that fills its card (a group of options, a rule).
+ */
+import { computed, ref, useId, useSlots } from "vue";
+
+const props = withDefaults(defineProps<{
+  open?: boolean | undefined;
+  /** Where it starts when nobody binds `open`. */
+  defaultOpen?: boolean | undefined;
+  label?: string | undefined;
+  /** A small count after the label. */
+  count?: number | string | undefined;
+  size?: "sm" | "md" | undefined;
+  disabled?: boolean | undefined;
+  /** Draw a border and a padded body, for a section that stands alone. */
+  boxed?: boolean | undefined;
+  /** Full-width heading band, body without indent: a section of a table or list. */
+  flush?: boolean | undefined;
+  /** Build the body only while open (a long list, a costly panel). */
+  lazy?: boolean | undefined;
+  /** Extra attributes on the heading button, e.g. `data-test`. */
+  triggerAttrs?: Record<string, string> | undefined;
+}>(), { open: undefined, size: "md", triggerAttrs: undefined });
+
+const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
+const slots = useSlots();
+
+const own = ref(props.defaultOpen);
+const isOpen = computed(() => props.open ?? own.value);
+const bodyId = `wp-disclosure-${useId()}`;
+
+function toggle(): void {
+  if (props.disabled) return;
+  const next = !isOpen.value;
+  own.value = next;
+  emit("update:open", next);
+}
+</script>
+
+<template>
+  <div class="wp-disclosure" :data-size="size" :data-open="isOpen" :data-boxed="boxed || undefined" :data-flush="flush || undefined">
+    <div class="wp-disclosure__head">
+      <div v-if="slots.lead" class="wp-disclosure__lead"><slot name="lead" /></div>
+      <button
+        v-bind="triggerAttrs ?? {}"
+        type="button"
+        class="wp-disclosure__trigger"
+        :aria-expanded="isOpen"
+        :aria-controls="bodyId"
+        :disabled="disabled"
+        @click="toggle"
+      >
+        <i class="pi pi-chevron-right wp-disclosure__chev" aria-hidden="true" />
+        <slot name="summary">
+          <span class="wp-disclosure__label">{{ label }}</span>
+        </slot>
+        <span v-if="count !== undefined" class="wp-disclosure__count">{{ count }}</span>
+      </button>
+      <div v-if="slots.actions" class="wp-disclosure__actions"><slot name="actions" /></div>
+    </div>
+    <div :id="bodyId" class="wp-disclosure__body" :inert="!isOpen || undefined">
+      <div class="wp-disclosure__inner">
+        <div v-if="isOpen || !lazy" class="wp-disclosure__content"><slot /></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-disclosure { min-width: 0; }
+.wp-disclosure[data-boxed] {
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-md);
+  background: var(--wp-bg-1);
+}
+.wp-disclosure__head { display: flex; align-items: center; gap: var(--wp-space-3); min-width: 0; }
+.wp-disclosure[data-boxed] .wp-disclosure__head { padding: 0 var(--wp-space-3); }
+.wp-disclosure__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  flex: 1;
+  min-width: 0;
+  min-height: var(--wp-control-h-md);
+  margin: 0;
+  padding: 0 var(--wp-space-2);
+  border: 0;
+  border-radius: var(--wp-radius-sm);
+  background: transparent;
+  color: var(--wp-text);
+  font: 600 var(--wp-text-sm)/1.3 var(--wp-font-sans);
+  text-align: left;
+  cursor: pointer;
+}
+.wp-disclosure[data-size="sm"] .wp-disclosure__trigger {
+  min-height: var(--wp-control-h-sm);
+  font-size: var(--wp-text-xs);
+  gap: var(--wp-space-2);
+}
+.wp-disclosure__trigger:hover:not(:disabled) { background: var(--wp-row-hover); }
+.wp-disclosure__trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-disclosure__trigger:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-disclosure__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-disclosure__chev {
+  flex: none;
+  font-size: 0.75em;
+  color: var(--wp-text-muted);
+  transition: transform var(--wp-motion-swap) var(--wp-motion-curve-collapse);
+}
+.wp-disclosure[data-open="true"] .wp-disclosure__chev { transform: rotate(90deg); }
+.wp-disclosure__count {
+  padding: 1px 6px;
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+  font-size: var(--wp-text-xs);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.wp-disclosure__lead { display: inline-flex; align-items: center; flex: none; }
+.wp-disclosure__actions { display: inline-flex; align-items: center; gap: var(--wp-space-2); flex: none; }
+/* Grid rows animate from 0fr to 1fr, so the body grows to its own height
+   without measuring it. */
+.wp-disclosure__body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--wp-motion-swap) var(--wp-motion-curve-collapse);
+}
+.wp-disclosure[data-open="true"] > .wp-disclosure__body { grid-template-rows: 1fr; }
+.wp-disclosure__inner { min-height: 0; overflow: hidden; }
+.wp-disclosure__content { padding: var(--wp-space-3) 0 var(--wp-space-2) calc(var(--wp-space-2) + 1.1em + var(--wp-space-3)); }
+.wp-disclosure[data-size="sm"] .wp-disclosure__content { padding: var(--wp-space-2) 0 var(--wp-space-2) calc(var(--wp-space-2) + 1em); }
+.wp-disclosure[data-boxed] .wp-disclosure__content { padding: var(--wp-space-2) var(--wp-space-5) var(--wp-space-5); }
+.wp-disclosure[data-flush] > .wp-disclosure__head {
+  border-bottom: 1px solid var(--wp-border);
+  background: var(--wp-bg-2);
+}
+.wp-disclosure[data-flush] .wp-disclosure__trigger {
+  padding: 0 var(--wp-space-5);
+  border-radius: 0;
+  font-size: var(--wp-text-xs);
+}
+.wp-disclosure[data-flush] .wp-disclosure__trigger:focus-visible { box-shadow: inset 0 0 0 2px var(--wp-border-focus); }
+.wp-disclosure[data-flush] .wp-disclosure__content,
+.wp-disclosure[data-flush][data-size="sm"] .wp-disclosure__content { padding: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-disclosure__chev, .wp-disclosure__body { transition: none; }
+}
+</style>

package/src/DragHandle.vue

@@ -1,49 +1,49 @@
-<script setup lang="ts">
-/**
- * The six-dot grip on a row you drag to reorder (a module row, a bundle
- * child, an injector binding). It only shows where to grab: the row owns the
- * drag (HTML drag-and-drop or pointer events), so the grip is hidden from
- * screen readers and the row gives keyboard users their own way to move it.
- * For a list that the kit should reorder itself, with keyboard moves, use
- * SortableList.
- *
- *   <DragHandle />            the canvas row size
- *   <DragHandle size="md" />  a manager row
- *
- * Reads only the shared tokens, so it works on the canvas and on a page.
- */
-withDefaults(defineProps<{
-  size?: "sm" | "md" | undefined;
-  /** Tooltip on hover. */
-  title?: string | undefined;
-}>(), { size: "sm", title: "Drag to reorder" });
-</script>
-
-<template>
-  <span class="wp-drag-grip" :data-size="size" :title="title" aria-hidden="true">
-    <svg viewBox="0 0 6 12" fill="currentColor" focusable="false">
-      <circle cx="1.5" cy="2" r="1" />
-      <circle cx="4.5" cy="2" r="1" />
-      <circle cx="1.5" cy="6" r="1" />
-      <circle cx="4.5" cy="6" r="1" />
-      <circle cx="1.5" cy="10" r="1" />
-      <circle cx="4.5" cy="10" r="1" />
-    </svg>
-  </span>
-</template>
-
-<style scoped>
-.wp-drag-grip {
-  display: inline-grid;
-  place-items: center;
-  flex: none;
-  width: 12px;
-  height: 20px;
-  color: var(--wp-text-dim);
-  cursor: grab;
-}
-.wp-drag-grip[data-size="md"] { width: 16px; height: 24px; }
-.wp-drag-grip svg { width: 6px; height: 12px; }
-.wp-drag-grip[data-size="md"] svg { width: 8px; height: 16px; }
-.wp-drag-grip:hover { color: var(--wp-text-muted); }
-</style>
+<script setup lang="ts">
+/**
+ * The six-dot grip on a row you drag to reorder (a module row, a bundle
+ * child, an injector binding). It only shows where to grab: the row owns the
+ * drag (HTML drag-and-drop or pointer events), so the grip is hidden from
+ * screen readers and the row gives keyboard users their own way to move it.
+ * For a list that the kit should reorder itself, with keyboard moves, use
+ * SortableList.
+ *
+ *   <DragHandle />            the canvas row size
+ *   <DragHandle size="md" />  a manager row
+ *
+ * Reads only the shared tokens, so it works on the canvas and on a page.
+ */
+withDefaults(defineProps<{
+  size?: "sm" | "md" | undefined;
+  /** Tooltip on hover. */
+  title?: string | undefined;
+}>(), { size: "sm", title: "Drag to reorder" });
+</script>
+
+<template>
+  <span class="wp-drag-grip" :data-size="size" :title="title" aria-hidden="true">
+    <svg viewBox="0 0 6 12" fill="currentColor" focusable="false">
+      <circle cx="1.5" cy="2" r="1" />
+      <circle cx="4.5" cy="2" r="1" />
+      <circle cx="1.5" cy="6" r="1" />
+      <circle cx="4.5" cy="6" r="1" />
+      <circle cx="1.5" cy="10" r="1" />
+      <circle cx="4.5" cy="10" r="1" />
+    </svg>
+  </span>
+</template>
+
+<style scoped>
+.wp-drag-grip {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 12px;
+  height: 20px;
+  color: var(--wp-text-dim);
+  cursor: grab;
+}
+.wp-drag-grip[data-size="md"] { width: 16px; height: 24px; }
+.wp-drag-grip svg { width: 6px; height: 12px; }
+.wp-drag-grip[data-size="md"] svg { width: 8px; height: 16px; }
+.wp-drag-grip:hover { color: var(--wp-text-muted); }
+</style>