@jxsuite/ui 0.0.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@jxsuite/ui",
+  "version": "0.0.0",
+  "description": "The Jx UI kit: interface elements authored as Jx documents, with their theme and icons",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jxsuite/jx.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "src/",
+    "components/",
+    "theme/",
+    "icons/",
+    "stylebook/",
+    "project.json"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./theme": "./src/theme.ts",
+    "./icons": "./src/icons.ts",
+    "./documents": "./src/documents.ts",
+    "./behaviors/menu": "./src/behaviors/menu.ts",
+    "./testing/popover-shim": "./src/testing/popover-shim.ts",
+    "./icons/manifest.json": "./icons/manifest.json"
+  },
+  "publishConfig": {
+    "provenance": false
+  },
+  "scripts": {
+    "build:icons": "bun run scripts/build-icons.ts",
+    "test": "bun test --isolate",
+    "test:coverage": "bun test --isolate --coverage",
+    "upgrade": "bun update --latest && bun install"
+  },
+  "dependencies": {
+    "@jxsuite/runtime": "workspace:^",
+    "@jxsuite/schema": "workspace:^"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.12.0",
+    "@phosphor-icons/core": "^2.1.1"
+  }
+}

package/project.json

@@ -0,0 +1,167 @@
+{
+  "name": "Jx UI Kit",
+  "url": "https://jxsuite.com/ui",
+  "defaults": {
+    "lang": "en"
+  },
+  "$media": {
+    "--md": "(max-width: 768px)",
+    "--sm": "(max-width: 640px)"
+  },
+  "style": {
+    "--jx-gray-50": "#f7f7f9",
+    "--jx-gray-100": "#eeeef2",
+    "--jx-gray-200": "#e1e1e7",
+    "--jx-gray-300": "#c9c9d2",
+    "--jx-gray-400": "#a2a2af",
+    "--jx-gray-500": "#7c7c8b",
+    "--jx-gray-600": "#5e5e6c",
+    "--jx-gray-700": "#45454f",
+    "--jx-gray-800": "#2f2f36",
+    "--jx-gray-850": "#26262c",
+    "--jx-gray-900": "#1d1d22",
+    "--jx-gray-925": "#17171b",
+    "--jx-gray-950": "#111114",
+    "--jx-gray-975": "#0b0b0d",
+    "--jx-blue-50": "#eef4ff",
+    "--jx-blue-100": "#dbe7fe",
+    "--jx-blue-200": "#bcd3fd",
+    "--jx-blue-300": "#8fb5fb",
+    "--jx-blue-400": "#5f95f7",
+    "--jx-blue-500": "#3b82f6",
+    "--jx-blue-600": "#2563eb",
+    "--jx-blue-700": "#1d4ed8",
+    "--jx-blue-800": "#1e40af",
+    "--jx-blue-900": "#172554",
+    "--jx-blue-950": "#0f172e",
+    "--jx-red-50": "#fdeeee",
+    "--jx-red-100": "#fbd9d9",
+    "--jx-red-200": "#f5b3b3",
+    "--jx-red-300": "#ee8a8a",
+    "--jx-red-400": "#e86460",
+    "--jx-red-500": "#dc3f3b",
+    "--jx-red-600": "#c22e2b",
+    "--jx-red-700": "#a12522",
+    "--jx-red-800": "#7d1e1c",
+    "--jx-red-900": "#5a1614",
+    "--jx-red-950": "#3a0f0e",
+    "--jx-green-50": "#e9f7ee",
+    "--jx-green-100": "#cdeedb",
+    "--jx-green-200": "#a6dfbd",
+    "--jx-green-300": "#74c996",
+    "--jx-green-400": "#4fb27a",
+    "--jx-green-500": "#2f9a5f",
+    "--jx-green-600": "#22804e",
+    "--jx-green-700": "#1a6640",
+    "--jx-green-800": "#144e32",
+    "--jx-green-900": "#0f3a26",
+    "--jx-green-950": "#0a2719",
+    "--jx-amber-50": "#fdf3e1",
+    "--jx-amber-100": "#fae4b5",
+    "--jx-amber-200": "#f2cc7c",
+    "--jx-amber-300": "#e5ae4a",
+    "--jx-amber-400": "#d59429",
+    "--jx-amber-500": "#b8791a",
+    "--jx-amber-600": "#96600f",
+    "--jx-amber-700": "#764b0b",
+    "--jx-amber-800": "#5a3908",
+    "--jx-amber-900": "#3f2806",
+    "--jx-amber-950": "#2a1a04",
+    "--jx-bg": "light-dark(var(--jx-gray-50), var(--jx-gray-950))",
+    "--jx-bg-panel": "light-dark(#ffffff, var(--jx-gray-925))",
+    "--jx-bg-input": "light-dark(#ffffff, var(--jx-gray-900))",
+    "--jx-bg-overlay": "light-dark(#ffffff, var(--jx-gray-850))",
+    "--jx-border": "light-dark(var(--jx-gray-200), var(--jx-gray-800))",
+    "--jx-border-strong": "light-dark(var(--jx-gray-300), var(--jx-gray-700))",
+    "--jx-fg": "light-dark(var(--jx-gray-900), var(--jx-gray-100))",
+    "--jx-fg-dim": "light-dark(var(--jx-gray-600), var(--jx-gray-400))",
+    "--jx-fg-muted": "var(--jx-gray-500)",
+    "--jx-accent": "light-dark(var(--jx-blue-600), var(--jx-blue-500))",
+    "--jx-accent-solid": "var(--jx-blue-600)",
+    "--jx-accent-hover": "light-dark(var(--jx-blue-700), var(--jx-blue-400))",
+    "--jx-accent-fg": "#ffffff",
+    "--jx-accent-8": "color-mix(in oklab, var(--jx-accent) 8%, transparent)",
+    "--jx-accent-10": "color-mix(in oklab, var(--jx-accent) 10%, transparent)",
+    "--jx-accent-15": "color-mix(in oklab, var(--jx-accent) 15%, transparent)",
+    "--jx-accent-20": "color-mix(in oklab, var(--jx-accent) 20%, transparent)",
+    "--jx-accent-50": "color-mix(in oklab, var(--jx-accent) 50%, transparent)",
+    "--jx-hover-bg": "color-mix(in oklab, var(--jx-fg) 6%, transparent)",
+    "--jx-danger": "light-dark(var(--jx-red-600), var(--jx-red-400))",
+    "--jx-success": "light-dark(var(--jx-green-600), var(--jx-green-400))",
+    "--jx-warning": "light-dark(var(--jx-amber-600), var(--jx-amber-300))",
+    "--jx-tag": "light-dark(var(--jx-blue-700), var(--jx-blue-300))",
+    "--jx-signal": "light-dark(var(--jx-amber-700), var(--jx-amber-200))",
+    "--jx-handler": "light-dark(#7c3aed, #c8a2e0)",
+    "--jx-map": "light-dark(#4f46b5, #8b83e6)",
+    "--jx-switch-c": "var(--jx-danger)",
+    "--jx-font-sans": "\"Inter Variable\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "--jx-font-mono": "\"JetBrains Mono\", \"SF Mono\", \"Fira Code\", monospace",
+    "--jx-text-xs": "10px",
+    "--jx-text-sm": "11px",
+    "--jx-text-md": "12px",
+    "--jx-text-lg": "14px",
+    "--jx-leading-xs": "14px",
+    "--jx-leading-sm": "16px",
+    "--jx-leading-md": "18px",
+    "--jx-leading-lg": "20px",
+    "--jx-space-1": "2px",
+    "--jx-space-2": "4px",
+    "--jx-space-3": "8px",
+    "--jx-space-4": "12px",
+    "--jx-space-5": "16px",
+    "--jx-space-6": "24px",
+    "--jx-space-7": "32px",
+    "--jx-control-h": "24px",
+    "--jx-icon-size": "16px",
+    "--jx-radius-xs": "2px",
+    "--jx-radius-sm": "4px",
+    "--jx-radius-md": "6px",
+    "--jx-radius-lg": "10px",
+    "--jx-focus-ring": "2px solid var(--jx-accent)",
+    "--jx-shadow-popover": "0 0 0 1px var(--jx-border-strong), 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3)",
+    "--jx-shadow-dialog": "0 0 0 1px var(--jx-border-strong), 0 24px 64px -16px rgb(0 0 0 / 0.7)",
+    "--jx-dur-1": "150ms",
+    "--jx-dur-2": "200ms",
+    "--jx-ease-out": "cubic-bezier(0.2, 0, 0, 1)",
+    "--jx-ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+    "colorScheme": "light dark",
+    "&[data-theme=\"light\"]": {
+      "colorScheme": "light",
+      "--jx-shadow-popover": "0 0 0 1px var(--jx-border-strong), 0 8px 24px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.1)",
+      "--jx-shadow-dialog": "0 0 0 1px var(--jx-border-strong), 0 24px 64px -16px rgb(0 0 0 / 0.25)"
+    },
+    "&[data-theme=\"dark\"]": {
+      "colorScheme": "dark"
+    },
+    "&[data-density=\"compact\"]": {
+      "--jx-control-h": "20px",
+      "--jx-text-md": "11px"
+    },
+    "&[data-density=\"comfortable\"]": {
+      "--jx-control-h": "28px"
+    },
+    "@(prefers-reduced-motion: reduce)": {
+      "--jx-dur-1": "0ms",
+      "--jx-dur-2": "0ms"
+    },
+    "@(forced-colors: active)": {
+      "--jx-focus-ring": "2px solid Highlight"
+    },
+    "@property --jx-accent": {
+      "syntax": "\"<color>\"",
+      "inherits": "true",
+      "initialValue": "#3b82f6"
+    },
+    "@property --jx-dur-1": {
+      "syntax": "\"<time>\"",
+      "inherits": "true",
+      "initialValue": "150ms"
+    },
+    "@property --jx-dur-2": {
+      "syntax": "\"<time>\"",
+      "inherits": "true",
+      "initialValue": "200ms"
+    }
+  },
+  "$elements": [{ "$ref": "./components/jx-icon.json" }]
+}

package/src/behaviors/menu.ts

@@ -0,0 +1,396 @@
+/**
+ * The menu behaviour: what a `jx-menu` needs that the closed operator set cannot express.
+ *
+ * Every function here is a `(state, event)` handler a `jx-menu` document names through `$src`, or a
+ * helper those handlers share. What they do beyond reading state is exactly the allowed set
+ * (specs/ui.md §2): move focus, measure, and call an element's own `showPopover()` /
+ * `hidePopover()`. Light dismissal, Escape on the topmost popover and focus restoration are the
+ * platform's; this module adds the roving caret, typeahead, the submenu stack and the viewport
+ * clamp.
+ *
+ * A submenu is a child `jx-menu` slotted into a row (`slot="submenu"`), so it is a DOM descendant
+ * of its parent panel and the platform treats the two as one popover hierarchy: opening the child
+ * does not close the parent, and a click outside closes both.
+ */
+
+const ROW = "jx-menu-item";
+const MENU = "jx-menu";
+
+/** The reactive scope a `jx-menu` document hands its handlers. */
+export interface MenuState {
+  open?: boolean;
+  x?: number;
+  y?: number;
+  floor?: number;
+  [key: string]: unknown;
+}
+
+/** A row element with the property accessors its document installs. */
+type RowElement = HTMLElement & { expanded?: boolean; disabled?: boolean };
+/** A menu element with the property accessors its document installs. */
+type MenuElement = HTMLElement & { open?: boolean; x?: number; y?: number; floor?: number };
+
+/** The menu an event's `currentTarget` is. */
+function menuOf(event: Event): MenuElement | null {
+  const target = event.currentTarget;
+  return target instanceof HTMLElement && target.localName === MENU
+    ? (target as MenuElement)
+    : null;
+}
+
+/**
+ * Whether `menu` is the nearest menu around `node` — a key or a hover in a nested submenu is that
+ * submenu's.
+ */
+function ownsNode(menu: HTMLElement, node: EventTarget | null): boolean {
+  return node instanceof Element && node.closest(MENU) === menu;
+}
+
+/**
+ * The rows of one menu, in order, excluding the rows of any submenu it contains and any row that
+ * cannot act. Rows sit inside the panel's emulated `<slot>` and inside `role="none"` wrappers a
+ * surface may add, so this walks descendants and keeps the ones whose nearest menu is this one.
+ */
+export function rowsOf(
+  menu: HTMLElement,
+  options: { includeDisabled?: boolean } = {},
+): RowElement[] {
+  const rows = [...menu.querySelectorAll<RowElement>(ROW)].filter(
+    (row) => row.closest(MENU) === menu,
+  );
+  return options.includeDisabled
+    ? rows
+    : rows.filter((row) => row.getAttribute("aria-disabled") !== "true");
+}
+
+/** The submenu a row owns: the `jx-menu` slotted into it, if any. */
+export function submenuOf(row: HTMLElement): MenuElement | null {
+  for (const menu of row.querySelectorAll<MenuElement>(MENU)) {
+    if (menu.parentElement?.closest(ROW) === row) {
+      return menu;
+    }
+  }
+  return null;
+}
+
+/** The row a submenu is slotted into, if it is a submenu. */
+export function parentRowOf(menu: HTMLElement): RowElement | null {
+  return (menu.parentElement?.closest(ROW) as RowElement | null) ?? null;
+}
+
+/** The outermost menu of a stack. */
+export function rootMenuOf(menu: HTMLElement): HTMLElement {
+  let root = menu;
+  for (;;) {
+    const row = parentRowOf(root);
+    const above = row?.closest(MENU);
+    if (!row || !(above instanceof HTMLElement)) {
+      return root;
+    }
+    root = above;
+  }
+}
+
+function isShowing(menu: MenuElement): boolean {
+  return menu.open === true;
+}
+
+/** Show a menu panel through the platform, if it is not already showing. */
+export function showMenu(menu: MenuElement): void {
+  if (!isShowing(menu) && typeof menu.showPopover === "function") {
+    menu.showPopover();
+  }
+}
+
+/** Hide a menu panel through the platform, if it is showing. */
+export function hideMenu(menu: MenuElement): void {
+  if (isShowing(menu) && typeof menu.hidePopover === "function") {
+    menu.hidePopover();
+  }
+}
+
+/** Move the roving caret to `index`, wrapping at both ends. */
+export function focusRow(rows: RowElement[], index: number): RowElement | null {
+  if (rows.length === 0) {
+    return null;
+  }
+  const next = ((index % rows.length) + rows.length) % rows.length;
+  for (const [at, row] of rows.entries()) {
+    row.tabIndex = at === next ? 0 : -1;
+  }
+  const row = rows[next]!;
+  row.focus();
+  return row;
+}
+
+/** The row that holds the caret, as an index into `rows`; -1 when none does. */
+function activeIndex(rows: RowElement[], target: EventTarget | null): number {
+  return rows.findIndex(
+    (row) => row === target || (target instanceof Node && row.contains(target)),
+  );
+}
+
+/** Open a row's submenu beside it and move the caret into it. */
+export function openSubmenu(
+  row: RowElement,
+  options: { focus?: boolean } = {},
+): MenuElement | null {
+  const sub = submenuOf(row);
+  if (!sub) {
+    return null;
+  }
+  const box = row.getBoundingClientRect();
+  sub.x = Math.round(box.right) - 2;
+  sub.y = Math.round(box.top) - 4;
+  row.expanded = true;
+  showMenu(sub);
+  if (options.focus) {
+    focusRow(rowsOf(sub), 0);
+  }
+  return sub;
+}
+
+/** Close every submenu open under `menu` except the one a given row owns. */
+function closeSubmenus(menu: HTMLElement, except: RowElement | null = null): void {
+  for (const row of rowsOf(menu, { includeDisabled: true })) {
+    if (row === except) {
+      continue;
+    }
+    const sub = submenuOf(row);
+    if (sub) {
+      hideMenu(sub);
+    }
+  }
+}
+
+/** A row's label text: its label part, else all of its text. */
+function rowLabel(row: HTMLElement): string {
+  return row.querySelector('[part="label"]')?.textContent ?? row.textContent ?? "";
+}
+
+/** The next row after `active` whose label starts with `char`, wrapping; -1 when none does. */
+function typeaheadHit(rows: RowElement[], active: number, char: string): number {
+  const labels = rows.map((row) => rowLabel(row).trim().toLowerCase());
+  for (let step = 1; step <= labels.length; step++) {
+    const at = (active + step) % labels.length;
+    if (labels[at]!.startsWith(char)) {
+      return at;
+    }
+  }
+  return -1;
+}
+
+/** A single printable character, for typeahead; `null` for anything else. */
+function typeaheadChar(event: KeyboardEvent): string | null {
+  return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey
+    ? event.key.toLowerCase()
+    : null;
+}
+
+/**
+ * The menu keyboard contract, on the menu whose row holds the caret. A key that lands in a nested
+ * submenu belongs to that submenu's own handler and is left alone here.
+ *
+ * @param {MenuState} _state
+ * @param {KeyboardEvent} event
+ */
+export function onMenuKeydown(_state: MenuState, event: KeyboardEvent): void {
+  const menu = menuOf(event);
+  if (!menu || !ownsNode(menu, event.target)) {
+    return;
+  }
+  const rows = rowsOf(menu);
+  const active = activeIndex(rows, event.target);
+  switch (event.key) {
+    case "ArrowDown": {
+      focusRow(rows, active + 1);
+      break;
+    }
+    case "ArrowUp": {
+      focusRow(rows, active === -1 ? -1 : active - 1);
+      break;
+    }
+    case "Home": {
+      focusRow(rows, 0);
+      break;
+    }
+    case "End": {
+      focusRow(rows, -1);
+      break;
+    }
+    case "Enter":
+    case " ": {
+      rows[active]?.click();
+      break;
+    }
+    case "ArrowRight": {
+      const row = rows[active];
+      if (!row || !submenuOf(row)) {
+        return;
+      }
+      closeSubmenus(menu, row);
+      openSubmenu(row, { focus: true });
+      break;
+    }
+    case "ArrowLeft": {
+      const parent = parentRowOf(menu);
+      if (!parent) {
+        return;
+      }
+      hideMenu(menu);
+      parent.focus();
+      break;
+    }
+    case "Escape": {
+      // One level at a time: the submenu with the caret, else the whole menu.
+      const parent = parentRowOf(menu);
+      hideMenu(menu);
+      parent?.focus();
+      break;
+    }
+    case "Tab": {
+      hideMenu(rootMenuOf(menu) as MenuElement);
+      break;
+    }
+    default: {
+      const char = typeaheadChar(event);
+      if (char === null) {
+        return;
+      }
+      const hit = typeaheadHit(rows, active, char);
+      if (hit === -1) {
+        return;
+      }
+      focusRow(rows, hit);
+    }
+  }
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+/**
+ * Mirror the platform's toggle into state; on show, clamp into the viewport once laid out and move
+ * the caret to the first row; on hide, close whatever submenus were open and clear the parent row's
+ * expanded state.
+ *
+ * @param {MenuState} state
+ * @param {Event} event The platform's ToggleEvent
+ */
+export function onMenuToggle(state: MenuState, event: Event): void {
+  const menu = menuOf(event);
+  if (!menu) {
+    return;
+  }
+  const opening = (event as { newState?: string }).newState === "open";
+  state.open = opening;
+  const parent = parentRowOf(menu);
+  if (!opening) {
+    closeSubmenus(menu);
+    if (parent) {
+      parent.expanded = false;
+    }
+    return;
+  }
+  clampIntoViewport(state, menu);
+  if (!menu.contains(document.activeElement)) {
+    focusRow(rowsOf(menu), 0);
+  }
+}
+
+/** The lowest edge a stack may reach: the root menu's `floor`, else the viewport's bottom. */
+function floorOf(menu: HTMLElement): number {
+  const floor = Number((rootMenuOf(menu) as MenuElement).floor ?? 0);
+  return floor > 0 ? floor : window.innerHeight;
+}
+
+/**
+ * Keep a shown panel inside its area. Measured after a frame, because an unlaid-out panel is zero
+ * wide and would never appear to overflow anything; a zero-size box (a test DOM) is left where it
+ * is.
+ *
+ * A submenu that would leave the viewport on the right FLIPS to its parent menu's left rather than
+ * sliding over the parent; a root menu slides. Both are floored at the stack's `floor` — the root
+ * menu's, so one floor holds for every level.
+ *
+ * @param {MenuState} state
+ * @param {HTMLElement} menu
+ */
+export function clampIntoViewport(state: MenuState, menu: HTMLElement): void {
+  const measure = (): void => {
+    const box = menu.getBoundingClientRect();
+    if (box.width === 0 && box.height === 0) {
+      return;
+    }
+    const margin = 4;
+    const bottom = floorOf(menu);
+    if (box.right > window.innerWidth - margin) {
+      const parent = parentRowOf(menu)?.closest<HTMLElement>(MENU) ?? null;
+      const flipped = parent ? Math.round(parent.getBoundingClientRect().left) - box.width + 2 : -1;
+      state.x =
+        flipped >= margin
+          ? flipped
+          : Math.max(margin, Math.round(window.innerWidth - box.width - margin));
+    }
+    if (box.bottom > bottom) {
+      state.y = Math.max(margin, Math.round(bottom - box.height));
+    }
+  };
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(measure);
+  } else {
+    measure();
+  }
+}
+
+/**
+ * Put the caret somewhere after the rows changed under it: when focus is no longer inside `menu`,
+ * the first row of the deepest open submenu takes it — and a submenu left with no rows at all is
+ * closed, its parent row taking the caret instead.
+ *
+ * @param {HTMLElement} menu The root menu
+ */
+export function ensureCaret(menu: HTMLElement): void {
+  if (menu.contains(document.activeElement)) {
+    return;
+  }
+  let deepest = menu as MenuElement;
+  for (;;) {
+    const open = rowsOf(deepest, { includeDisabled: true })
+      .map((row) => submenuOf(row))
+      .find((sub) => sub !== null && isShowing(sub));
+    if (!open) {
+      break;
+    }
+    deepest = open;
+  }
+  const parent = parentRowOf(deepest);
+  if (rowsOf(deepest).length === 0 && parent) {
+    hideMenu(deepest);
+    parent.focus();
+    return;
+  }
+  focusRow(rowsOf(deepest), 0);
+}
+
+/**
+ * Hover: entering a row that owns a submenu opens it (closing any sibling's); entering one that
+ * does not closes whatever submenu was open.
+ *
+ * @param {MenuState} _state
+ * @param {Event} event
+ */
+export function onMenuPointerOver(_state: MenuState, event: Event): void {
+  const menu = menuOf(event);
+  if (!menu || !(event.target instanceof Element)) {
+    return;
+  }
+  const row = event.target.closest<RowElement>(ROW);
+  if (!row || row.closest(MENU) !== menu) {
+    return;
+  }
+  const sub = submenuOf(row);
+  closeSubmenus(menu, row);
+  if (sub && !isShowing(sub) && row.getAttribute("aria-disabled") !== "true") {
+    openSubmenu(row);
+  }
+}

package/src/documents.ts

@@ -0,0 +1,23 @@
+/**
+ * The kit's element documents, as bundled JSON. This is the whole authored surface of the kit:
+ * every element is one of these files, interpreted by the runtime, and the canvas edits the same
+ * bytes the shell runs.
+ */
+import type { JxDocument } from "@jxsuite/schema/types";
+import jxActionButton from "../components/jx-action-button.json";
+import jxButton from "../components/jx-button.json";
+import jxIcon from "../components/jx-icon.json";
+import jxMenu from "../components/jx-menu.json";
+import jxMenuItem from "../components/jx-menu-item.json";
+
+/** Tag name → document, in registration order (a document's `$elements` come before it). */
+export const documents: Readonly<Record<string, JxDocument>> = {
+  "jx-icon": jxIcon as unknown as JxDocument,
+  "jx-button": jxButton as unknown as JxDocument,
+  "jx-action-button": jxActionButton as unknown as JxDocument,
+  "jx-menu-item": jxMenuItem as unknown as JxDocument,
+  "jx-menu": jxMenu as unknown as JxDocument,
+};
+
+/** Every tag the kit defines. */
+export const KIT_TAGS: readonly string[] = Object.keys(documents);