@dumiflex/wp-kit 0.4.0 → 0.6.0

package/src/tokens.ts

@@ -45,12 +45,17 @@ export const SHARED_TOKENS = [
 export const OPTIONAL_TOKENS = ["--wp-bg-deep", "--wp-bg2"] as const;
 
 /** Set by the piece itself, on its own root, not by the host. */
-export const LOCAL_TOKENS = ["--wp-hsv-hue", "--wp-lm-t", "--wp-lm-x", "--wp-lm-r", "--wp-lm-s", "--wp-lm-o", "--wp-select-line-h", "--wp-list-row-depth", "--wp-list-row-icon", "--wp-chip-c", "--wp-field-h"] as const;
+export const LOCAL_TOKENS = ["--wp-hsv-hue", "--wp-lm-o", "--wp-select-line-h", "--wp-list-row-depth", "--wp-list-row-icon", "--wp-chip-c", "--wp-field-h",
+  // WorkingLine's marks and word (registered properties it animates).
+  "--wp-wl-t", "--wp-wl-k", "--wp-wl-x", "--wp-wl-f", "--wp-wl-r", "--wp-wl-s", "--wp-wl-o", "--wp-wl-wo", "--wp-wl-wb",
+  "--wp-wl-dx", "--wp-wl-dy", "--wp-wl-big", "--wp-wl-a", "--wp-wl-b",
+  // motion.css entrances.
+  "--wp-enter-o", "--wp-enter-s", "--wp-enter-y", "--wp-enter-x"] as const;
 
 /** Pieces that need a page with src/theme/ loaded (not the canvas). */
 export const PAGE_PIECES = [
   "axis-color.ts", "kind-colour.ts", "matrix-axis.ts", "BundleMeta.vue", "ConstraintMatrixPreview.vue", "PostCard.vue", "TokenizedValue.vue",
-  "Button.vue", "Card.vue", "Checkbox.vue", "Chip.vue", "ChoiceCards.vue", "ColorPicker.vue", "ConfirmModal.vue",
+  "Card.vue", "Chip.vue", "ChoiceCards.vue",
   "DataTable.vue", "Drawer.vue", "EmptyState.vue", "Field.vue", "Icon.vue", "IconPicker.vue", "Input.vue",
-  "ListFilter.vue", "Modal.vue", "RelativeDate.vue", "Select.vue", "Textarea.vue", "ToastHost.vue", "Toggle.vue",
+  "ListFilter.vue", "RelativeDate.vue", "Select.vue", "Textarea.vue", "ToastHost.vue",
 ] as const;

package/src/tooltip.css

@@ -8,12 +8,14 @@
     align-items: center;
     gap: 8px;
     max-width: 280px;
-    padding: 6px 10px;
-    border: 1px solid var(--wp-border-strong);
+    padding: 7px 11px; /* 6px 10px plus the 1px the ring stands in for */
+    /* Inset ring, not a border: a host's unlayered reset (Tailwind 3's
+       preflight) beats this layered rule on border-width, never box-shadow. */
+    border: 0;
     border-radius: var(--wp-radius);
     background: var(--wp-bg-3);
     color: var(--wp-text);
-    box-shadow: var(--wp-shadow-md);
+    box-shadow: inset 0 0 0 1px var(--wp-border-strong), var(--wp-shadow-md);
     font: 500 12px/1.4 var(--wp-font-sans);
     pointer-events: none;
     white-space: normal;
@@ -29,9 +31,10 @@
   }
   .wp-tooltip__kbd {
     flex-shrink: 0;
-    padding: 1px 6px;
-    border: 1px solid var(--wp-border-strong);
+    padding: 2px 7px;
+    border: 0;
     border-radius: var(--wp-radius-sm);
+    box-shadow: inset 0 0 0 1px var(--wp-border-strong);
     background: var(--wp-bg-1);
     color: var(--wp-text-muted);
     font: 500 11px/16px var(--wp-font-mono);

package/src/useDialogFocus.ts

@@ -18,11 +18,18 @@ export interface DialogFocusOptions {
   onEscape: () => void;
   /** Where focus goes on open; defaults to the first control. */
   initial?: (root: HTMLElement, controls: HTMLElement[]) => HTMLElement | null | undefined;
+  /**
+   * Listen for keys on `window` (default). Off for a panel inside ModalShell,
+   * whose key shield stops keys at the overlay: call the returned `onKeydown`
+   * from the shell's `keydown` event instead.
+   */
+  window?: boolean | undefined;
   /** Keep Tab inside the panel (default). Off for a panel beside the page. */
   trap?: () => boolean;
 }
 
-export function useDialogFocus(panel: Ref<HTMLElement | null>, isOpen: () => boolean, opts: DialogFocusOptions): void {
+export function useDialogFocus(panel: Ref<HTMLElement | null>, isOpen: () => boolean, opts: DialogFocusOptions): { onKeydown: (e: KeyboardEvent) => void } {
+  const onWindow = opts.window !== false;
   let returnTo: HTMLElement | null = null;
 
   function onKeydown(e: KeyboardEvent): void {
@@ -57,7 +64,7 @@ export function useDialogFocus(panel: Ref<HTMLElement | null>, isOpen: () => boo
   watch(isOpen, (v, was) => {
     if (typeof window === "undefined") return;
     if (v) {
-      window.addEventListener("keydown", onKeydown);
+      if (onWindow) window.addEventListener("keydown", onKeydown);
       void opened();
     } else {
       window.removeEventListener("keydown", onKeydown);
@@ -70,4 +77,6 @@ export function useDialogFocus(panel: Ref<HTMLElement | null>, isOpen: () => boo
     window.removeEventListener("keydown", onKeydown);
     if (isOpen()) closed();
   });
+
+  return { onKeydown };
 }

package/src/CloseButton.vue

@@ -1,69 +0,0 @@
-<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>

package/src/ColorPicker.vue

@@ -1,201 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import Popover from "./Popover.vue";
-import Input from "./Input.vue";
-import HsvPicker from "./HsvPicker.vue";
-import { COLOUR_PRESETS } from "./colour-presets";
-
-interface Props {
-  modelValue: string;
-  presets?: string[] | undefined;
-  ariaLabel?: string | undefined;
-  /** Swatch and chevron only, for a tight spot such as a name row. */
-  compact?: boolean | undefined;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  presets: () => [...COLOUR_PRESETS],
-  ariaLabel: undefined,
-  compact: false,
-});
-
-const emit = defineEmits<{
-  "update:modelValue": [value: string];
-}>();
-
-const HEX_RE = /^#[0-9a-fA-F]{6}$/;
-
-const open = ref(false);
-const hexDraft = ref(props.modelValue);
-
-watch(() => props.modelValue, (v) => {
-  hexDraft.value = v;
-});
-// A fresh draft each time it opens, so a half-typed hex doesn't linger.
-watch(open, (v) => { if (v) hexDraft.value = props.modelValue; });
-
-const swatchColor = computed(() => (HEX_RE.test(props.modelValue) ? props.modelValue : "transparent"));
-const shownHex = computed(() => (HEX_RE.test(props.modelValue) ? props.modelValue.toLowerCase() : "No colour"));
-
-const swatchAriaLabel = computed(
-  () => props.ariaLabel ?? `Pick color, current ${props.modelValue}`,
-);
-
-function close() {
-  open.value = false;
-}
-
-function selectPreset(preset: string) {
-  emit("update:modelValue", preset);
-  close();
-}
-
-function onHexInput(value: string) {
-  hexDraft.value = value;
-  if (HEX_RE.test(value)) {
-    emit("update:modelValue", value);
-  }
-}
-
-function isActivePreset(preset: string): boolean {
-  return preset.toLowerCase() === props.modelValue.toLowerCase();
-}
-</script>
-
-<template>
-  <!-- A swatch button that says what it holds (colour, hex, chevron), on the
-       kit Popover so the panel follows it on scroll and closes on Escape or
-       a click outside. -->
-  <Popover v-model:open="open" :label="swatchAriaLabel">
-    <template #trigger="{ props: triggerProps }">
-      <button
-        v-bind="triggerProps"
-        type="button"
-        class="wp-color-picker__trigger"
-        :class="{ 'wp-color-picker__trigger--compact': compact }"
-        :aria-label="swatchAriaLabel"
-        data-test="color-trigger"
-      >
-        <span
-          class="wp-color-picker__swatch"
-          :style="{ background: swatchColor }"
-          data-test="color-swatch"
-          aria-hidden="true"
-        />
-        <span v-if="!compact" class="wp-color-picker__value" aria-hidden="true">{{ shownHex }}</span>
-        <i class="pi pi-chevron-down wp-color-picker__caret" aria-hidden="true" />
-      </button>
-    </template>
-    <div class="wp-color-picker__popover">
-      <div class="wp-color-picker__row">
-        <Input
-          :model-value="hexDraft"
-          aria-label="Hex color value"
-          class="wp-color-picker__hex"
-          data-test="color-hex-input"
-          @update:model-value="(v) => onHexInput(String(v ?? ''))"
-        />
-      </div>
-      <HsvPicker
-        :model-value="props.modelValue"
-        :aria-label="swatchAriaLabel"
-        @update:model-value="(v) => emit('update:modelValue', v)"
-      />
-      <div class="wp-color-picker__palette" role="listbox" aria-label="Preset colors">
-        <button
-          v-for="preset in props.presets"
-          :key="preset"
-          type="button"
-          class="wp-color-picker__chip"
-          :style="{ background: preset }"
-          :title="preset"
-          :data-active="isActivePreset(preset)"
-          :aria-label="`Use preset ${preset}`"
-          data-test="color-preset"
-          @click="selectPreset(preset)"
-        />
-      </div>
-    </div>
-  </Popover>
-</template>
-
-<style scoped>
-.wp-color-picker__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--wp-space-3);
-  height: var(--wp-control-h-md, 32px);
-  min-width: 128px;
-  padding: 0 var(--wp-space-4) 0 var(--wp-space-2);
-  background: var(--wp-bg-2);
-  border: 1px solid var(--wp-border);
-  border-radius: var(--wp-radius-sm);
-  color: var(--wp-text);
-  font: inherit;
-  cursor: pointer;
-  transition: border-color 0.12s, box-shadow 0.12s;
-}
-.wp-color-picker__trigger--compact { min-width: 0; padding: 0 var(--wp-space-3) 0 var(--wp-space-2); gap: var(--wp-space-2); }
-.wp-color-picker__trigger:hover { border-color: var(--wp-border-strong); }
-.wp-color-picker__trigger:focus-visible { outline: none; border-color: var(--wp-accent-500); box-shadow: var(--wp-focus-ring); }
-.wp-color-picker__swatch {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  border-radius: min(4px, var(--wp-radius-cap, 999px));
-  /* An inner ring keeps a dark swatch visible on a dark field. */
-  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-text) 22%, transparent);
-}
-.wp-color-picker__value {
-  flex: 1;
-  text-align: left;
-  font-family: var(--wp-font-mono);
-  font-size: 12px;
-  color: var(--wp-text-muted);
-}
-.wp-color-picker__caret { font-size: 9px; color: var(--wp-text-dim); }
-
-.wp-color-picker__popover {
-  width: 220px;
-  padding: var(--wp-space-2);
-  display: flex;
-  flex-direction: column;
-  gap: var(--wp-space-5);
-}
-.wp-color-picker__row {
-  display: flex;
-  align-items: center;
-  gap: var(--wp-space-4);
-}
-
-.wp-color-picker__hex {
-  flex: 1;
-  min-width: 0;
-  font-family: var(--wp-font-mono);
-  font-size: var(--wp-text-sm);
-}
-
-.wp-color-picker__palette {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: var(--wp-space-3);
-}
-
-.wp-color-picker__chip {
-  /* Span the grid cell instead of locking at 32px so the swatches reach
-   * both edges of the popover. aspect-ratio keeps them square as the
-   * cell width changes with popover size. */
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  min-width: 0;
-  border-radius: var(--wp-radius-sm);
-  border: 1px solid var(--wp-border);
-  cursor: pointer;
-  padding: 0;
-  transition: transform 0.08s, box-shadow 0.12s;
-}
-.wp-color-picker__chip:hover { transform: scale(1.08); }
-.wp-color-picker__chip[data-active="true"] {
-  box-shadow: 0 0 0 2px var(--wp-bg-2), 0 0 0 4px var(--wp-accent-500);
-}
-</style>

package/src/ConfirmDialog.vue

@@ -1,165 +0,0 @@
-<script setup lang="ts">
-/**
- * Themed confirmation dialog — replaces `window.confirm()` for any
- * action that needs an in-app prompt (reset overrides, save-to-library,
- * reset-from-library, etc.). Consumers control it via v-model:visible
- * plus title/body/confirm-label slots; the dialog emits `confirm` /
- * `cancel` and closes itself on Esc + overlay click + Cancel button.
- *
- * Variants:
- *   - default: accent-coloured Confirm button (constructive actions)
- *   - danger:  red Confirm button (destructive actions, e.g. discard,
- *              reset overrides)
- */
-import { onBeforeUnmount, watch } from "vue";
-import WpButton from "./WpButton.vue";
-
-const props = withDefaults(
-  defineProps<{
-    visible: boolean;
-    title: string;
-    body?: string | undefined;
-    confirmLabel?: string | undefined;
-    cancelLabel?: string | undefined;
-    variant?: "default" | "danger" | undefined;
-  }>(),
-  {
-    body: "",
-    confirmLabel: "Confirm",
-    cancelLabel: "Cancel",
-    variant: "default",
-  },
-);
-
-const emit = defineEmits<{
-  "confirm": [];
-  "cancel": [];
-}>();
-
-function onConfirm(): void { emit("confirm"); }
-function onCancel(): void { emit("cancel"); }
-
-function onKeydown(ev: KeyboardEvent): void {
-  if (!props.visible) return;
-  if (ev.key === "Escape") {
-    ev.preventDefault();
-    emit("cancel");
-  } else if (ev.key === "Enter" && !ev.shiftKey) {
-    ev.preventDefault();
-    emit("confirm");
-  }
-}
-
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) window.addEventListener("keydown", onKeydown);
-    else window.removeEventListener("keydown", onKeydown);
-  },
-  { immediate: true },
-);
-
-onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition name="wp-modal" appear>
-      <!-- The backdrop is a click target only; keyboard users close with Escape. -->
-      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
-      <div
-        v-if="visible"
-        class="wp-confirm-overlay"
-        data-test="confirm-overlay"
-        @click="onCancel"
-      >
-      <div
-        class="wp-confirm"
-        role="alertdialog"
-        aria-modal="true"
-        :class="`wp-confirm--${variant}`"
-        @click.stop
-      >
-        <div class="wp-confirm__head">
-          <i
-            class="pi"
-            :class="variant === 'danger' ? 'pi-exclamation-triangle' : 'pi-info-circle'"
-            aria-hidden="true"
-          />
-          <h3 class="wp-confirm__title" data-test="confirm-title">{{ title }}</h3>
-        </div>
-        <p v-if="body" class="wp-confirm__body" data-test="confirm-body">{{ body }}</p>
-        <div class="wp-confirm__foot">
-          <WpButton data-test="confirm-cancel" @click="onCancel">{{ cancelLabel }}</WpButton>
-          <WpButton :variant="variant === 'danger' ? 'danger' : 'primary'" data-test="confirm-confirm" @click="onConfirm">{{ confirmLabel }}</WpButton>
-        </div>
-      </div>
-    </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<style>
-/* Shared modal open/close transition — overlay fade + panel scale.
- * See `_modal-motion.css` for rules. Imported unscoped so the
- * `wp-modal-*` transition class names match the Vue-emitted classes
- * cleanly (named transitions don't survive Vue's `data-v-...`
- * scoping). */
-@import "./_modal-motion.css";
-</style>
-
-<style scoped>
-.wp-confirm-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background: var(--wp-overlay-bg, rgba(0, 0, 0, 0.62));
-  font-family: var(--wp-font-sans, sans-serif);
-}
-.wp-confirm {
-  background: var(--wp-bg-2);
-  border: 1px solid var(--wp-border);
-  border-radius: var(--wp-radius);
-  width: 380px;
-  max-width: 100%;
-  color: var(--wp-text);
-  box-shadow: var(--wp-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.5));
-  overflow: hidden;
-}
-.wp-confirm__head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 14px 16px 8px;
-}
-.wp-confirm__head .pi {
-  font-size: 16px;
-  color: var(--wp-accent-text, var(--wp-text));
-}
-.wp-confirm--danger .wp-confirm__head .pi {
-  color: var(--wp-danger, var(--wp-red));
-}
-.wp-confirm__title {
-  font: 600 13px var(--wp-font-sans);
-  color: var(--wp-text);
-  margin: 0;
-}
-.wp-confirm__body {
-  font: 12px/1.5 var(--wp-font-sans);
-  color: var(--wp-text-muted);
-  margin: 0;
-  padding: 0 16px 14px;
-}
-.wp-confirm__foot {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 10px 14px;
-  background: var(--wp-bg-3);
-  border-top: 1px solid var(--wp-border);
-}
-</style>