@dowel-ui/react 0.5.0 → 0.8.0

package/src/components/contribution-graph/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "contribution-graph",
+  title: "Contribution Graph",
+  description:
+    "A GitHub-style year heatmap of daily counts — a keyboard-navigable grid with a tooltip per day.",
+  category: "data",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: ["tooltip"],
+  files: ["contribution-graph.tsx"],
+  a11y:
+    'A table with role="grid", named by its caption ("1,234 contributions in 2025" or `label`). Weekdays are row ' +
+    "headers and months column headers; every day is a gridcell whose screen-reader text states the count and the " +
+    "full date, so colour never carries the value. One day is tabbable (roving tabindex): arrows move by day and " +
+    "week (mirrored in RTL), Home/End to the ends of the weekday row, Ctrl+Home/End to the ends of the year, " +
+    "PageUp/PageDown by four weeks. The tooltip follows keyboard focus as well as hover and Escape dismisses it.",
+});

package/src/components/copy-button/copy-button.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+// Ported from SmoothUI Button Copy (MIT, © 2024 Eduardo Calvo) and amicro "Copy Hash" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react";
+
+import { Button, type ButtonProps } from "@/components/button";
+import { cn } from "@/lib/utils";
+
+/*
+ * The sources swap the icon on hover (amicro) or after a fake one-second
+ * "loading" delay (SmoothUI). Here the swap reports what actually happened: it
+ * morphs only once the clipboard write has resolved, and a refused write never
+ * shows the check.
+ *
+ * Both icons, and both labels, share one grid cell. The button is always as
+ * wide as its longer label, so "Copy" becoming "Copied" does not shove its
+ * neighbours sideways, and the morph is a pure opacity/scale transition.
+ */
+
+const copyButtonVariants = cva("", {
+  variants: {
+    /** Colour of the confirmation icon. The label keeps the button's colour. */
+    tone: {
+      current: "",
+      primary: "text-primary",
+      success: "text-success",
+      warning: "text-warning",
+      destructive: "text-destructive",
+      info: "text-info",
+    },
+  },
+  defaultVariants: {
+    tone: "current",
+  },
+});
+
+const layer = cn(
+  "col-start-1 row-start-1 inline-flex items-center justify-center",
+  "transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]",
+);
+const shown = "scale-100 opacity-100";
+const hidden = "scale-50 opacity-0";
+
+function CopyIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="8" y="8" width="14" height="14" rx="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+export type CopyButtonState = "idle" | "copied" | "error";
+
+interface CopyButtonBaseProps
+  extends Omit<ButtonProps, "value" | "asChild">, VariantProps<typeof copyButtonVariants> {
+  /**
+   * What goes on the clipboard. Pass a function to read it at the moment of
+   * the click — the current contents of an editor, say — rather than at render.
+   * Required unless the deprecated `getText` is given.
+   */
+  value?: string | (() => string);
+  /**
+   * Replaces the label while the confirmation shows. On an icon-only button a
+   * string `copiedLabel` is announced instead, as Code Block's original did.
+   */
+  copiedLabel?: ReactNode;
+  /**
+   * Announced to assistive technology on success. Defaults to "Copied", or to
+   * a string `copiedLabel` on an icon-only button, where it is never shown.
+   */
+  copiedAnnouncement?: string;
+  /** Announced to assistive technology when the clipboard refuses the write. */
+  errorAnnouncement?: string;
+  /**
+   * How long the confirmation stays, in milliseconds (default 2000). A
+   * behaviour timer, not a duration.
+   */
+  timeout?: number;
+  /** The resting icon. Defaults to a copy glyph. */
+  icon?: ReactNode;
+  /** The confirmation icon. Defaults to a check. */
+  copiedIcon?: ReactNode;
+  /** Called with the copied text once the clipboard write has resolved. */
+  onCopied?: (text: string) => void;
+  /** Called when the clipboard is unavailable or refuses the write. */
+  onCopyError?: (error: unknown) => void;
+  /**
+   * Reads the text to copy at the moment of the click.
+   *
+   * @deprecated Use `value`, which also takes a function: `value={() => text}`.
+   */
+  getText?: () => string;
+  /**
+   * The accessible name of an icon-only button.
+   *
+   * @deprecated Use `aria-label`, or pass a visible label as children.
+   */
+  label?: string;
+  /**
+   * How long the confirmation stays, in milliseconds.
+   *
+   * @deprecated Use `timeout`.
+   */
+  resetAfter?: number;
+}
+
+/**
+ * Props for {@link CopyButton}. One source of text is required: `value`, or
+ * the deprecated `getText` kept from Code Block's original copy button.
+ */
+export type CopyButtonProps = CopyButtonBaseProps &
+  ({ value: string | (() => string) } | { getText: () => string });
+
+/**
+ * Copies a value to the clipboard and confirms it.
+ *
+ * The confirmation is state, not decoration: the icon morphs to a check, the
+ * label (if any) becomes `copiedLabel`, and a polite live region announces it,
+ * then everything reverts after `timeout`. A refused write reports through
+ * `onCopyError` and the error announcement — never the check.
+ */
+export function CopyButton({
+  className,
+  value,
+  getText,
+  label,
+  resetAfter,
+  children,
+  copiedLabel = "Copied",
+  copiedAnnouncement,
+  errorAnnouncement = "Copy failed",
+  timeout,
+  icon,
+  copiedIcon,
+  tone,
+  variant = "outline",
+  size,
+  onClick,
+  onCopied,
+  onCopyError,
+  "aria-label": ariaLabel,
+  ...props
+}: CopyButtonProps) {
+  const [state, setState] = useState<CopyButtonState>("idle");
+  const duration = timeout ?? resetAfter ?? 2000;
+  const source = value ?? getText;
+
+  const missingSource = source === undefined;
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production" || !missingSource) return;
+    // The type requires one; this catches untyped callers before a click
+    // reports a failure with no obvious cause.
+    console.warn("CopyButton: pass `value` so there is something to copy.");
+  }, [missingSource]);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  const settle = (next: CopyButtonState) => {
+    setState(next);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setState("idle");
+    }, duration);
+  };
+
+  async function copy() {
+    try {
+      if (source === undefined) throw new Error("CopyButton has no `value` to copy.");
+      const text = typeof source === "function" ? source() : source;
+      // Called synchronously within the click, so the user activation that
+      // Safari requires for clipboard access is still live.
+      await navigator.clipboard.writeText(text);
+      settle("copied");
+      onCopied?.(text);
+    } catch (error) {
+      // Refused, or no clipboard API outside a secure context. Saying so
+      // beats pretending it worked.
+      settle("error");
+      onCopyError?.(error);
+    }
+  }
+
+  function handleClick(event: MouseEvent<HTMLButtonElement>) {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    void copy();
+  }
+
+  const copied = state === "copied";
+  const hasLabel = children !== undefined && children !== null && children !== false;
+  // An icon-only button never shows copiedLabel, and Code Block's original
+  // copy button announced it, so a string one is what gets announced there.
+  const announcement =
+    copiedAnnouncement ??
+    (!hasLabel && typeof copiedLabel === "string" ? copiedLabel : "Copied");
+
+  return (
+    <>
+      <Button
+        data-slot="copy-button"
+        data-state={state}
+        variant={variant}
+        size={size ?? (hasLabel ? "md" : "icon")}
+        aria-label={ariaLabel ?? (hasLabel ? undefined : (label ?? "Copy"))}
+        className={className}
+        onClick={handleClick}
+        {...props}
+      >
+        <span data-slot="copy-button-icon" className="grid">
+          <span aria-hidden="true" className={cn(layer, copied ? hidden : shown)}>
+            {icon ?? <CopyIcon />}
+          </span>
+          <span
+            aria-hidden="true"
+            className={cn(layer, copyButtonVariants({ tone }), copied ? shown : hidden)}
+          >
+            {copiedIcon ?? <CheckIcon />}
+          </span>
+        </span>
+        {hasLabel ? (
+          <span data-slot="copy-button-label" className="grid">
+            <span
+              aria-hidden={copied || undefined}
+              className={cn(layer, copied ? hidden : shown)}
+            >
+              {children}
+            </span>
+            <span
+              aria-hidden={!copied || undefined}
+              className={cn(layer, copied ? shown : hidden)}
+            >
+              {copiedLabel}
+            </span>
+          </span>
+        ) : null}
+      </Button>
+      {/* A sibling rather than a child, so the announcement never becomes part
+          of the button's accessible name. */}
+      <span role="status" aria-live="polite" className="sr-only">
+        {copied ? announcement : state === "error" ? errorAnnouncement : ""}
+      </span>
+    </>
+  );
+}
+
+export { copyButtonVariants };

package/src/components/copy-button/index.ts

@@ -0,0 +1,6 @@
+export {
+  CopyButton,
+  copyButtonVariants,
+  type CopyButtonProps,
+  type CopyButtonState,
+} from "./copy-button";

package/src/components/copy-button/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "copy-button",
+  title: "Copy Button",
+  description:
+    "Copies a value to the clipboard and morphs its icon and label into a confirmation that reverts on its own.",
+  category: "form",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: ["button"],
+  files: ["copy-button.tsx"],
+  a11y:
+    'The confirmation is announced through a polite role="status" region rendered beside the ' +
+    "button, so it never becomes part of the button's name. Only the visible label is exposed; " +
+    'the hidden one is aria-hidden. Icon-only buttons are named "Copy" unless given an aria-label. ' +
+    "A refused clipboard write is announced as a failure and never shows the check. The button " +
+    "is never disabled while confirming, so keyboard focus stays put.",
+});

package/src/components/create-menu/create-menu.tsx

@@ -0,0 +1,319 @@
+"use client";
+
+// Ported from bencho Create menu (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type FocusEvent,
+  type ReactNode,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A DropdownMenu with a morph flourish: the "+ Create" pill grows in place
+ * into the menu panel, and shrinks back into the pill when it closes.
+ *
+ * The menu is the Radix DropdownMenu primitive, so the whole menu-button
+ * pattern comes from it: aria-haspopup/aria-expanded on the trigger,
+ * role="menu"/"menuitem", focus into the menu, Up/Down roving, Home/End,
+ * typeahead, Escape and outside-click dismissal with focus returned to the
+ * trigger. Dowel's own DropdownMenuContent always portals, and the morph needs
+ * the panel to sit exactly over the trigger, so this composes the primitive
+ * directly: the content is not portalled and is placed over the trigger
+ * (side="bottom", sideOffset = -triggerHeight).
+ *
+ * Motion is CSS only. The surface is a separate aria-hidden layer whose
+ * width/height/radius run from the trigger's size (Radix publishes it as
+ * --radix-dropdown-menu-trigger-*) to the panel's; the content itself holds a
+ * no-op animation as long as the shrink so Presence waits for it. Items
+ * stagger in; one shared highlight pill follows the highlighted item, whether
+ * the pointer or the keyboard moved it. Reduced motion collapses every
+ * duration through --motion-scale, leaving the settled panel.
+ */
+
+const PREFIX = "dowel-create-menu";
+const OVERSHOOT = "cubic-bezier(.32,1.26,.4,1)";
+
+function ms(value: number): string {
+  return `calc(${String(value)}ms * var(--motion-scale))`;
+}
+
+const PILL = `width:var(--radix-dropdown-menu-trigger-width);height:var(--radix-dropdown-menu-trigger-height);border-radius:calc(var(--radix-dropdown-menu-trigger-height) / 2)`;
+const PANEL = `width:100%;height:100%;border-radius:var(--create-menu-corner)`;
+
+const STAGGER = Array.from(
+  { length: 12 },
+  (_, i) =>
+    `[data-slot=create-menu-content][data-state=open] [data-slot=create-menu-list]>[data-slot=create-menu-item]:nth-child(${String(i + 2)}){animation-delay:${ms(30 + 22 * i)}}`,
+).join("\n");
+
+const STYLES = `
+@keyframes ${PREFIX}-grow{from{${PILL}}to{${PANEL}}}
+@keyframes ${PREFIX}-shrink{from{${PANEL}}to{${PILL}}}
+@keyframes ${PREFIX}-hold{from{opacity:1}to{opacity:1}}
+@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(6px)}}
+[data-slot=create-menu-content][data-state=closed]{animation:${PREFIX}-hold ${ms(300)} linear both}
+[data-slot=create-menu-content][data-state=open]>[data-slot=create-menu-surface]{animation:${PREFIX}-grow ${ms(370)} var(--ease-out-quint) both}
+[data-slot=create-menu-content][data-state=closed]>[data-slot=create-menu-surface]{animation:${PREFIX}-shrink ${ms(300)} var(--ease-out-quint) both}
+[data-slot=create-menu-content][data-state=open] [data-slot=create-menu-item]{animation:${PREFIX}-item-in ${ms(240)} var(--ease-out-quint) both}
+[data-slot=create-menu-content][data-state=closed] [data-slot=create-menu-item],[data-slot=create-menu-content][data-state=closed] [data-slot=create-menu-highlight]{opacity:0}
+${STAGGER}
+`;
+
+/** The pill and the panel share one surface; `tone` inverts it. */
+const createMenuVariants = cva("", {
+  variants: {
+    tone: {
+      default: "bg-card text-foreground",
+      inverted: "bg-foreground text-background",
+    },
+    stroke: {
+      true: "inset-ring inset-ring-border",
+      false: "",
+    },
+  },
+  defaultVariants: { tone: "default", stroke: false },
+});
+
+function PlusIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  );
+}
+
+export interface CreateMenuProps
+  extends Omit<ComponentPropsWithRef<"div">, "dir">, VariantProps<typeof createMenuVariants> {
+  /** The trigger's visible label, and the menu's name. */
+  label?: ReactNode;
+  /** The trigger's icon. Decorative; defaults to a plus. Pass `null` for none. */
+  icon?: ReactNode;
+  /** Radius of the open panel in px. The row radius derives from it. */
+  corner?: number;
+  /** Width of the open panel in px. Its height follows the items. */
+  panelWidth?: number;
+  /** Where the panel grows from, relative to the pill. */
+  align?: "start" | "center" | "end";
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Radix `modal`. Off by default: the menu sits inline, over its own pill. */
+  modal?: boolean;
+  dir?: "ltr" | "rtl";
+  triggerClassName?: string;
+  contentClassName?: string;
+  /** `CreateMenuItem`s. */
+  children?: ReactNode;
+}
+
+/** A "+ Create" pill that grows in place into a menu of actions. */
+export function CreateMenu({
+  label = "Create",
+  icon,
+  corner = 28,
+  panelWidth = 212,
+  align = "center",
+  tone,
+  stroke,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+  dir,
+  className,
+  triggerClassName,
+  contentClassName,
+  style,
+  children,
+  ...props
+}: CreateMenuProps) {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const [triggerHeight, setTriggerHeight] = useState(38);
+  const [highlight, setHighlight] = useState({ top: 0, height: 0, visible: false });
+  const [moving, setMoving] = useState(false);
+  const movingTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // Measure the pill so the panel's top edge lands on the pill's.
+  useLayoutEffect(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const measure = () => {
+      if (trigger.offsetHeight > 0) setTriggerHeight(trigger.offsetHeight);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(trigger);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  useEffect(() => () => clearTimeout(movingTimer.current), []);
+
+  // Radix focuses the highlighted item for pointer and keyboard alike, and
+  // focuses the content itself when the pointer leaves: one listener tracks both.
+  const onContentFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      const target = event.target;
+      if (target.getAttribute("role") !== "menuitem") {
+        setHighlight((previous) => ({ ...previous, visible: false }));
+        return;
+      }
+      if (highlight.visible && highlight.top !== target.offsetTop) {
+        setMoving(true);
+        clearTimeout(movingTimer.current);
+        movingTimer.current = setTimeout(() => {
+          setMoving(false);
+        }, 110);
+      }
+      setHighlight({ top: target.offsetTop, height: target.offsetHeight, visible: true });
+    },
+    [highlight],
+  );
+
+  const surface = createMenuVariants({ tone, stroke });
+
+  return (
+    <div
+      data-slot="create-menu"
+      className={cn("relative inline-grid place-items-center", className)}
+      style={{ ["--create-menu-corner" as string]: `${String(corner)}px`, ...style }}
+      {...props}
+    >
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      <DropdownMenuPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={(next) => {
+          if (!next) setHighlight((previous) => ({ ...previous, visible: false }));
+          onOpenChange?.(next);
+        }}
+        modal={modal}
+        dir={dir}
+      >
+        <DropdownMenuPrimitive.Trigger
+          ref={triggerRef}
+          data-slot="create-menu-trigger"
+          className={cn(
+            surface,
+            focusRing,
+            "inline-flex h-9.5 items-center gap-2 rounded-full px-5 text-[0.84375rem] font-medium select-none",
+            "transition-[scale,opacity] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+            "active:scale-94 data-[state=open]:pointer-events-none data-[state=open]:opacity-0",
+            "[&_svg]:size-4 [&_svg]:shrink-0",
+            triggerClassName,
+          )}
+        >
+          {icon === undefined ? <PlusIcon /> : icon}
+          {label}
+        </DropdownMenuPrimitive.Trigger>
+        <DropdownMenuPrimitive.Content
+          data-slot="create-menu-content"
+          side="bottom"
+          align={align}
+          sideOffset={-triggerHeight}
+          avoidCollisions={false}
+          onFocus={onContentFocus}
+          className={cn(
+            "relative z-[var(--z-popover)] px-2.5 py-2.75 outline-none",
+            tone === "inverted" ? "text-background" : "text-foreground",
+            contentClassName,
+          )}
+          style={
+            {
+              width: `${String(panelWidth)}px`,
+              ["--create-menu-row-r"]: `max(0px, calc(var(--create-menu-corner) - 11px))`,
+            } as CSSProperties
+          }
+        >
+          <div
+            aria-hidden="true"
+            data-slot="create-menu-surface"
+            className={cn(surface, "absolute inset-x-0 top-0 mx-auto size-full shadow-lg")}
+            style={{ borderRadius: "var(--create-menu-corner)" }}
+          />
+          <div data-slot="create-menu-list" className="relative grid gap-0.5">
+            <div
+              aria-hidden="true"
+              data-slot="create-menu-highlight"
+              data-moving={moving ? "" : undefined}
+              className="pointer-events-none absolute inset-x-0 top-0 bg-current/10 data-[moving]:[scale:0.96_1.16]"
+              style={{
+                height: `${String(highlight.height)}px`,
+                opacity: highlight.visible ? 1 : 0,
+                transform: `translateY(${String(highlight.top)}px)`,
+                borderRadius: "var(--create-menu-row-r)",
+                transition: `transform ${ms(380)} ${OVERSHOOT}, scale ${ms(110)} var(--ease-out-quint), opacity ${ms(180)} ease`,
+              }}
+            />
+            {children}
+          </div>
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Root>
+    </div>
+  );
+}
+
+export interface CreateMenuItemProps extends ComponentPropsWithRef<
+  typeof DropdownMenuPrimitive.Item
+> {
+  /** Leading icon. Decorative. */
+  icon?: ReactNode;
+}
+
+/** One action in a CreateMenu. `onSelect` runs it; the menu then closes. */
+export function CreateMenuItem({
+  icon,
+  className,
+  style,
+  children,
+  ...props
+}: CreateMenuItemProps) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="create-menu-item"
+      className={cn(
+        "relative flex h-8.5 cursor-default items-center gap-2.5 px-3.5 text-[0.8125rem] outline-none select-none",
+        "text-[color-mix(in_oklab,currentColor_78%,transparent)] data-[highlighted]:text-current",
+        "transition-colors duration-[var(--duration-fast)]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-55",
+        className,
+      )}
+      style={{ borderRadius: "var(--create-menu-row-r)", ...style }}
+      {...props}
+    >
+      {icon ? (
+        <span
+          aria-hidden="true"
+          data-slot="create-menu-item-icon"
+          className="flex shrink-0 [&_svg]:size-3.75"
+        >
+          {icon}
+        </span>
+      ) : null}
+      {children}
+    </DropdownMenuPrimitive.Item>
+  );
+}
+
+export { createMenuVariants };

package/src/components/create-menu/index.ts

@@ -0,0 +1,7 @@
+export {
+  CreateMenu,
+  CreateMenuItem,
+  createMenuVariants,
+  type CreateMenuItemProps,
+  type CreateMenuProps,
+} from "./create-menu";

package/src/components/create-menu/meta.ts

@@ -0,0 +1,21 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "create-menu",
+  title: "Create Menu",
+  description:
+    'A DropdownMenu with a morph flourish: a "+ Create" pill that grows in place into its menu panel.',
+  category: "navigation",
+  status: "beta",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: [],
+  files: ["create-menu.tsx"],
+  a11y:
+    "Built directly on the Radix DropdownMenu primitive (not portalled, so the panel can grow over the " +
+    'pill): the trigger exposes aria-haspopup="menu" and aria-expanded, the panel is a role="menu" named ' +
+    'by the trigger, and items are role="menuitem". Opening from the keyboard moves focus to the first ' +
+    "item; Up/Down move, Home/End jump, typeahead searches, Enter/Space select, Escape and an outside " +
+    "press close and return focus to the trigger. The morphing surface and the highlight pill are " +
+    "aria-hidden; the pill follows data-highlighted, so pointer and keyboard never disagree. The grow, " +
+    "stagger and pill slide are decoration and settle instantly under reduced motion.",
+});