@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/WpCheck.vue

@@ -1,102 +1,104 @@
-<script setup lang="ts">
-/**
- * Shared checkbox box — the wildcard pool's per-option look (`.opt__check`
- * in OptionRow.vue), extracted so every checkmark box in the *embed/canvas*
- * tree reads the same.
- *
- * Why a component (not the global `.wp-check` class): the canvas bundle only
- * loads a hand-picked CSS set via `src/extension/settings.ts` — it does NOT
- * load the SPA's `manager/styles/tokens.css`, where global `.wp-check` lives.
- * A component's `<style scoped>` is compiled into the component's own chunk,
- * so it ships wherever the component renders — SPA *and* canvas. That's the
- * same reason `.opt__check` / `.row__check` / `.ex__check` are each scoped.
- *
- * Custom toggle BUTTONS (internal flag, seed-lock) stay as their own styled
- * buttons — this is only for true checkmark boxes.
- *
- * `aria-label` / `data-test` fall through to the single root span. Click /
- * Space / Enter toggle. `size="sm"` is the 12px box of the canvas rows' on/off
- * mark (modules, bundles, injector rows). A parent can tint the checked fill
- * with `--check-on` (a bundle header uses its bundle colour).
- */
-const props = withDefaults(
-  defineProps<{
-    /** Checked state — use with `v-model` or `:model-value` + `@update:model-value`. */
-    modelValue?: boolean | undefined;
-    disabled?: boolean | undefined;
-    size?: "sm" | "md" | undefined;
-  }>(),
-  { modelValue: false, disabled: false, size: "md" },
-);
-
-const emit = defineEmits<{ "update:modelValue": [next: boolean] }>();
-
-function toggle(): void {
-  if (props.disabled) return;
-  emit("update:modelValue", !props.modelValue);
-}
-</script>
-
-<template>
-  <span
-    class="wp-check"
-    :class="{ 'wp-check--sm': size === 'sm' }"
-    role="checkbox"
-    :aria-checked="modelValue === true"
-    :aria-disabled="disabled || undefined"
-    :tabindex="disabled ? -1 : 0"
-    @click="toggle"
-    @keydown.space.prevent="toggle"
-    @keydown.enter.prevent="toggle"
-  >
-    <!-- 8×8 SVG tick inside the 14px box — identical to OptionRow's
-         `.opt__check` so the canvas boxes match the wildcard options. -->
-    <svg
-      v-if="modelValue"
-      width="8"
-      height="8"
-      viewBox="0 0 12 12"
-      aria-hidden="true"
-    >
-      <path
-        d="M2.5 6.5 L5 9 L9.5 3.5"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  </span>
-</template>
-
-<style scoped>
-/* Verbatim from OptionRow.vue `.opt__check`. Scoped so it ships into the
- * canvas bundle (no global tokens.css there). Vars resolve from the SPA's
- * tokens.css or the canvas theme.css — both define these. */
-.wp-check {
-  width: 14px;
-  height: 14px;
-  border: 1.5px solid var(--wp-border-soft, var(--wp-border));
-  border-radius: min(3px, var(--wp-radius-cap, 999px));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  background: var(--wp-bg);
-  flex-shrink: 0;
-  cursor: pointer;
-}
-.wp-check svg { display: block; }
-.wp-check--sm { width: 12px; height: 12px; border-width: 1px; border-radius: min(2px, var(--wp-radius-cap, 999px)); }
-.wp-check--sm svg { width: 7px; height: 7px; }
-.wp-check:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
-.wp-check[aria-checked="true"] {
-  background: var(--check-on, var(--wp-accent));
-  border-color: var(--check-on, var(--wp-accent));
-}
-.wp-check[aria-disabled="true"] {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-</style>
+<script setup lang="ts">
+/**
+ * Shared checkbox box — the wildcard pool's per-option look (`.opt__check`
+ * in OptionRow.vue), extracted so every checkmark box in the *embed/canvas*
+ * tree reads the same.
+ *
+ * Why a component (not the global `.wp-check` class): the canvas bundle only
+ * loads a hand-picked CSS set via `src/extension/settings.ts` — it does NOT
+ * load the SPA's `manager/styles/tokens.css`, where global `.wp-check` lives.
+ * A component's `<style scoped>` is compiled into the component's own chunk,
+ * so it ships wherever the component renders — SPA *and* canvas. That's the
+ * same reason `.opt__check` / `.row__check` / `.ex__check` are each scoped.
+ *
+ * Custom toggle BUTTONS (internal flag, seed-lock) stay as their own styled
+ * buttons — this is only for true checkmark boxes.
+ *
+ * `aria-label` / `data-test` fall through to the single root span. Click /
+ * Space / Enter toggle. `size="sm"` is the 12px box of the canvas rows' on/off
+ * mark (modules, bundles, injector rows). A parent can tint the checked fill
+ * with `--check-on` (a bundle header uses its bundle colour).
+ */
+const props = withDefaults(
+  defineProps<{
+    /** Checked state — use with `v-model` or `:model-value` + `@update:model-value`. */
+    modelValue?: boolean | undefined;
+    disabled?: boolean | undefined;
+    size?: "sm" | "md" | undefined;
+  }>(),
+  { modelValue: false, disabled: false, size: "md" },
+);
+
+const emit = defineEmits<{ "update:modelValue": [next: boolean] }>();
+
+function toggle(): void {
+  if (props.disabled) return;
+  emit("update:modelValue", !props.modelValue);
+}
+</script>
+
+<template>
+  <!-- Focusable: tabindex is bound (-1 while disabled), which the rule can't see. -->
+  <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
+  <span
+    class="wp-check"
+    :class="{ 'wp-check--sm': size === 'sm' }"
+    role="checkbox"
+    :aria-checked="modelValue === true"
+    :aria-disabled="disabled || undefined"
+    :tabindex="disabled ? -1 : 0"
+    @click="toggle"
+    @keydown.space.prevent="toggle"
+    @keydown.enter.prevent="toggle"
+  >
+    <!-- 8×8 SVG tick inside the 14px box — identical to OptionRow's
+         `.opt__check` so the canvas boxes match the wildcard options. -->
+    <svg
+      v-if="modelValue"
+      width="8"
+      height="8"
+      viewBox="0 0 12 12"
+      aria-hidden="true"
+    >
+      <path
+        d="M2.5 6.5 L5 9 L9.5 3.5"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </span>
+</template>
+
+<style scoped>
+/* Verbatim from OptionRow.vue `.opt__check`. Scoped so it ships into the
+ * canvas bundle (no global tokens.css there). Vars resolve from the SPA's
+ * tokens.css or the canvas theme.css — both define these. */
+.wp-check {
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid var(--wp-border-soft, var(--wp-border));
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  background: var(--wp-bg);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.wp-check svg { display: block; }
+.wp-check--sm { width: 12px; height: 12px; border-width: 1px; border-radius: min(2px, var(--wp-radius-cap, 999px)); }
+.wp-check--sm svg { width: 7px; height: 7px; }
+.wp-check:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-check[aria-checked="true"] {
+  background: var(--check-on, var(--wp-accent));
+  border-color: var(--check-on, var(--wp-accent));
+}
+.wp-check[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+</style>

package/src/WpIconButton.vue

@@ -1,107 +1,107 @@
-<script setup lang="ts">
-/**
- * WpIconButton: the 20 px square icon button inside a canvas row (module,
- * injector, bundle and model rows, the Context toolbar). Rows are too tight
- * for the 24 px `WpButton size="sm"`, so this is the one smaller control on
- * the canvas, still at the 20 px hit-target floor.
- *
- *   <WpIconButton icon="pi-trash" label="Remove module" tone="danger" @click="remove" />
- *   <WpIconButton icon="pi-lock" label="Lock seed" tone="warn" :pressed="locked" />
- *   <WpIconButton variant="bare" :icon="open ? 'pi-caret-down' : 'pi-caret-right'" label="Collapse" />
- *
- * - `tone` tints the icon on hover, and the whole button while `pressed`.
- * - `pressed` makes it a toggle (`aria-pressed`); `"mixed"` is the bundle
- *   master toggle's "some children" state (dashed, half tint).
- * - `variant="bare"` is the row's fold caret: no box, drawn 14 px wide but
- *   still 20 px to click.
- * - `label` names it for screen readers and is its tooltip, unless `hint`
- *   gives a longer one.
- */
-import { vTooltip } from "./tooltip";
-
-withDefaults(defineProps<{
-  /** PrimeIcons class, e.g. `pi-trash`. Leave it out to draw a short
-   *  glyph from the slot instead (the loop's Σ toggle). */
-  icon?: string | undefined;
-  label: string;
-  /** A longer tooltip than the label. */
-  hint?: string | undefined;
-  tone?: "neutral" | "accent" | "warn" | "danger" | undefined;
-  pressed?: boolean | "mixed" | undefined;
-  variant?: "quiet" | "bare" | undefined;
-  disabled?: boolean | undefined;
-}>(), { icon: undefined, hint: undefined, tone: "neutral", pressed: undefined, variant: "quiet" });
-
-const emit = defineEmits<{ click: [evt: MouseEvent] }>();
-</script>
-
-<template>
-  <button
-    v-tooltip="hint ?? label"
-    type="button"
-    class="wp-icon-btn"
-    :data-tone="tone"
-    :data-variant="variant"
-    :aria-label="label"
-    :aria-pressed="pressed"
-    :disabled="disabled"
-    @click="emit('click', $event)"
-  >
-    <i v-if="icon" class="pi" :class="icon" aria-hidden="true" />
-    <span v-else class="wp-icon-btn__glyph" aria-hidden="true"><slot /></span>
-  </button>
-</template>
-
-<style scoped>
-.wp-icon-btn {
-  --tone: var(--wp-text);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  box-sizing: border-box;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  padding: 0;
-  border: 1px solid var(--wp-border-strong);
-  border-radius: var(--wp-radius);
-  background: var(--wp-bg-2);
-  color: var(--wp-text);
-  font: 500 11px/1 var(--wp-font-sans);
-  cursor: pointer;
-  transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick), color var(--wp-motion-quick);
-}
-.wp-icon-btn[data-tone="accent"] { --tone: var(--wp-accent); }
-.wp-icon-btn[data-tone="warn"] { --tone: var(--wp-warn); }
-.wp-icon-btn[data-tone="danger"] { --tone: var(--wp-danger); }
-.wp-icon-btn .pi { font-size: 11px; }
-.wp-icon-btn__glyph { font: 600 11px/1 var(--wp-font-mono); }
-.wp-icon-btn:hover:not(:disabled) { background: var(--wp-bg-4); color: var(--tone); }
-.wp-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
-.wp-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
-/* On: the tone tints the icon and washes the box, the same tint as hover. */
-.wp-icon-btn[aria-pressed="true"] {
-  color: var(--tone);
-  background: color-mix(in srgb, var(--tone) 14%, transparent);
-}
-.wp-icon-btn[aria-pressed="mixed"] {
-  color: var(--tone);
-  background: color-mix(in srgb, var(--tone) 7%, transparent);
-  border-style: dashed;
-  opacity: 0.75;
-}
-/* The fold caret: no box, 14 px of layout, 20 px of hit area. */
-.wp-icon-btn[data-variant="bare"] {
-  width: 20px;
-  margin-inline: -3px;
-  border-color: transparent;
-  background: none;
-  color: var(--wp-text-dim);
-}
-.wp-icon-btn[data-variant="bare"] .pi { font-size: 10px; }
-.wp-icon-btn[data-variant="bare"]:hover:not(:disabled) { background: none; color: var(--wp-text); }
-@media (prefers-reduced-motion: reduce) {
-  .wp-icon-btn { transition: none; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * WpIconButton: the 20 px square icon button inside a canvas row (module,
+ * injector, bundle and model rows, the Context toolbar). Rows are too tight
+ * for the 24 px `WpButton size="sm"`, so this is the one smaller control on
+ * the canvas, still at the 20 px hit-target floor.
+ *
+ *   <WpIconButton icon="pi-trash" label="Remove module" tone="danger" @click="remove" />
+ *   <WpIconButton icon="pi-lock" label="Lock seed" tone="warn" :pressed="locked" />
+ *   <WpIconButton variant="bare" :icon="open ? 'pi-caret-down' : 'pi-caret-right'" label="Collapse" />
+ *
+ * - `tone` tints the icon on hover, and the whole button while `pressed`.
+ * - `pressed` makes it a toggle (`aria-pressed`); `"mixed"` is the bundle
+ *   master toggle's "some children" state (dashed, half tint).
+ * - `variant="bare"` is the row's fold caret: no box, drawn 14 px wide but
+ *   still 20 px to click.
+ * - `label` names it for screen readers and is its tooltip, unless `hint`
+ *   gives a longer one.
+ */
+import { vTooltip } from "./tooltip";
+
+withDefaults(defineProps<{
+  /** PrimeIcons class, e.g. `pi-trash`. Leave it out to draw a short
+   *  glyph from the slot instead (the loop's Σ toggle). */
+  icon?: string | undefined;
+  label: string;
+  /** A longer tooltip than the label. */
+  hint?: string | undefined;
+  tone?: "neutral" | "accent" | "warn" | "danger" | undefined;
+  pressed?: boolean | "mixed" | undefined;
+  variant?: "quiet" | "bare" | undefined;
+  disabled?: boolean | undefined;
+}>(), { icon: undefined, hint: undefined, tone: "neutral", pressed: undefined, variant: "quiet" });
+
+const emit = defineEmits<{ click: [evt: MouseEvent] }>();
+</script>
+
+<template>
+  <button
+    v-tooltip="hint ?? label"
+    type="button"
+    class="wp-icon-btn"
+    :data-tone="tone"
+    :data-variant="variant"
+    :aria-label="label"
+    :aria-pressed="pressed"
+    :disabled="disabled"
+    @click="emit('click', $event)"
+  >
+    <i v-if="icon" class="pi" :class="icon" aria-hidden="true" />
+    <span v-else class="wp-icon-btn__glyph" aria-hidden="true"><slot /></span>
+  </button>
+</template>
+
+<style scoped>
+.wp-icon-btn {
+  --tone: var(--wp-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--wp-border-strong);
+  border-radius: var(--wp-radius);
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  font: 500 11px/1 var(--wp-font-sans);
+  cursor: pointer;
+  transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick), color var(--wp-motion-quick);
+}
+.wp-icon-btn[data-tone="accent"] { --tone: var(--wp-accent); }
+.wp-icon-btn[data-tone="warn"] { --tone: var(--wp-warn); }
+.wp-icon-btn[data-tone="danger"] { --tone: var(--wp-danger); }
+.wp-icon-btn .pi { font-size: 11px; }
+.wp-icon-btn__glyph { font: 600 11px/1 var(--wp-font-mono); }
+.wp-icon-btn:hover:not(:disabled) { background: var(--wp-bg-4); color: var(--tone); }
+.wp-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+/* On: the tone tints the icon and washes the box, the same tint as hover. */
+.wp-icon-btn[aria-pressed="true"] {
+  color: var(--tone);
+  background: color-mix(in srgb, var(--tone) 14%, transparent);
+}
+.wp-icon-btn[aria-pressed="mixed"] {
+  color: var(--tone);
+  background: color-mix(in srgb, var(--tone) 7%, transparent);
+  border-style: dashed;
+  opacity: 0.75;
+}
+/* The fold caret: no box, 14 px of layout, 20 px of hit area. */
+.wp-icon-btn[data-variant="bare"] {
+  width: 20px;
+  margin-inline: -3px;
+  border-color: transparent;
+  background: none;
+  color: var(--wp-text-dim);
+}
+.wp-icon-btn[data-variant="bare"] .pi { font-size: 10px; }
+.wp-icon-btn[data-variant="bare"]:hover:not(:disabled) { background: none; color: var(--wp-text); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-icon-btn { transition: none; }
+}
+</style>