@dowel-ui/react 0.5.0 → 0.8.0

package/src/components/button/button.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+// Motion from SmoothUI SmoothButton (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import type { ComponentPropsWithRef, MouseEvent } from "react";
@@ -11,7 +12,7 @@ import { cn } from "@/lib/utils";
 const buttonVariants = cva(
   cn(
     "inline-flex shrink-0 items-center justify-center font-medium whitespace-nowrap select-none",
-    "transition-[background-color,border-color,color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+    "transition-[background-color,border-color,color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
     focusRing,
     disabledStyles,
     iconSlot,
@@ -29,6 +30,23 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
         link: "text-primary underline-offset-4 hover:underline",
+        /** A tint of the primary colour. Quieter than primary, warmer than ghost. */
+        soft: cn(
+          "bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)] text-primary",
+          "hover:bg-[color-mix(in_oklab,var(--color-primary)_18%,transparent)]",
+          "active:bg-[color-mix(in_oklab,var(--color-primary)_24%,transparent)]",
+        ),
+        /**
+         * SmoothUI's "candy": primary running into its hover shade, with a
+         * hairline highlight along the top edge. Every stop is a token, so it
+         * follows the theme and the monochrome preset.
+         */
+        gradient: cn(
+          "bg-linear-to-b from-primary to-primary-hover text-primary-foreground",
+          "shadow-[inset_0_1px_0_color-mix(in_oklab,var(--color-primary-foreground)_25%,transparent),0_1px_2px_color-mix(in_oklab,var(--color-foreground)_20%,transparent)]",
+          "hover:from-primary-hover hover:to-primary-hover",
+          "active:from-primary-active active:to-primary-active",
+        ),
       },
       size: {
         sm: "h-8 gap-1.5 rounded-md px-3 text-sm",
@@ -37,16 +55,51 @@ const buttonVariants = cva(
         icon: "size-9 rounded-md",
         "icon-sm": "size-8 rounded-md",
       },
+      /**
+       * Corner treatment, independent of size. Declared after `size` so its
+       * radius wins the merge. `default` keeps each size's own radius.
+       */
+      shape: {
+        default: "",
+        pill: "rounded-full",
+        square: "rounded-none",
+      },
+      /**
+       * Press feedback. `scale` shrinks the button to 97% while it is held —
+       * a transform, so nothing around it moves, and it only exists when the
+       * reader has not asked for reduced motion. `none` opts out.
+       */
+      press: {
+        scale: "",
+        none: "",
+      },
     },
     compoundVariants: [
       // A link has no box, so box padding and height would only misalign it.
       { variant: "link", size: "sm", className: "h-auto px-0" },
       { variant: "link", size: "md", className: "h-auto px-0" },
       { variant: "link", size: "lg", className: "h-auto px-0" },
+      // Text does not press; a link that shrinks under the finger reads as a
+      // rendering glitch rather than feedback.
+      {
+        press: "scale",
+        variant: [
+          "primary",
+          "secondary",
+          "outline",
+          "ghost",
+          "destructive",
+          "soft",
+          "gradient",
+        ],
+        className: "motion-safe:active:scale-[0.97]",
+      },
     ],
     defaultVariants: {
       variant: "primary",
       size: "md",
+      shape: "default",
+      press: "scale",
     },
   },
 );
@@ -74,6 +127,8 @@ export function Button({
   className,
   variant,
   size,
+  shape,
+  press,
   asChild = false,
   loading = false,
   disabled,
@@ -94,7 +149,7 @@ export function Button({
 
   return (
     <Comp
-      className={cn(buttonVariants({ variant, size }), className)}
+      className={cn(buttonVariants({ variant, size, shape, press }), className)}
       disabled={disabled}
       aria-disabled={loading || undefined}
       aria-busy={loading || undefined}

package/src/components/calendar/calendar.tsx

@@ -70,12 +70,12 @@ export function Calendar({
         ),
         // Range middles keep the muted surface so the two ends stay legible as
         // the actual selection.
-        range_start: cn(defaults.range_start, "rounded-l-md bg-accent"),
+        range_start: cn(defaults.range_start, "rounded-s-md bg-accent"),
         range_middle: cn(
           defaults.range_middle,
           "bg-accent [&>button]:bg-transparent [&>button]:text-accent-foreground",
         ),
-        range_end: cn(defaults.range_end, "rounded-r-md bg-accent"),
+        range_end: cn(defaults.range_end, "rounded-e-md bg-accent"),
         today: cn(defaults.today, "[&>button]:font-semibold [&>button]:text-primary"),
         outside: cn(defaults.outside, "text-muted-foreground opacity-50"),
         disabled: cn(defaults.disabled, "opacity-40"),

package/src/components/canvas-toolbar/canvas-toolbar.tsx

@@ -0,0 +1,457 @@
+"use client";
+
+// Ported from bencho Canvas toolbar (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { DropdownMenu as MenuPrimitive, Toolbar as ToolbarPrimitive } from "radix-ui";
+import {
+  Fragment,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuTrigger,
+} from "@/components/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip";
+import { focusRing, focusRingInset, mirrorForDirection } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A Figma-style tool rail: one tool is active across the whole rail, a shape
+ * slot swaps its tool from a flyout, and single-key shortcuts pick tools.
+ *
+ * Semantics. Radix Toolbar gives role="toolbar", roving tabindex, arrow keys
+ * (RTL-aware), Home/End and wrap-around. Its ToggleGroup type="single" would
+ * render role="radiogroup" with role="radio" items, which cannot also hold
+ * the slot's "More shapes" menu button and the divider, so every tool is a
+ * Toolbar.Button with aria-pressed instead: a set of toggle buttons of which
+ * exactly one is pressed. The flyout is Dowel's DropdownMenu (Radix): the
+ * notch has aria-haspopup="menu" and aria-expanded, shapes are
+ * menuitemradio, Escape closes and returns focus to the notch, and picking a
+ * shape returns focus to the slot's tool.
+ *
+ * Motion is CSS. The active fill pops from scale .72 with a springy curve,
+ * the icon rises to 1.05 and presses to .92, and the flyout rises in. All of
+ * it is decoration and stops under reduced motion.
+ */
+
+export interface CanvasTool {
+  type?: "tool";
+  value: string;
+  /** Accessible name, and the tooltip text. */
+  label: string;
+  /** Decorative glyph; hidden from assistive technology. */
+  icon: ReactNode;
+  /** A single key that picks the tool, e.g. "v". Case-insensitive. */
+  shortcut?: string;
+  disabled?: boolean;
+}
+
+export interface CanvasToolSeparator {
+  type: "separator";
+}
+
+export interface CanvasToolSlot {
+  type: "slot";
+  /** Names the group of tools, e.g. "Shapes". */
+  label: string;
+  tools: CanvasTool[];
+  /** The tool the slot shows before one is picked. Defaults to the first. */
+  defaultTool?: string;
+  /** Name of the flyout button. Defaults to `More ${label}` in lower case. */
+  moreLabel?: string;
+}
+
+export type CanvasToolbarItem = CanvasTool | CanvasToolSeparator | CanvasToolSlot;
+
+const PREFIX = "dowel-canvas-toolbar";
+
+const STYLES = `
+[data-slot=canvas-toolbar-tool]::before,[data-slot=canvas-toolbar-option]::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;scale:.72;pointer-events:none;transition:opacity calc(140ms * var(--motion-scale)) linear,scale calc(300ms * var(--motion-scale)) cubic-bezier(.3,1.42,.4,1)}
+[data-slot=canvas-toolbar-tool][data-state=on]::before,[data-slot=canvas-toolbar-option][data-state=checked]::before{opacity:.07;scale:1}
+@keyframes ${PREFIX}-flyout{0%{opacity:0;transform:translate(var(--${PREFIX}-fx,0),var(--${PREFIX}-fy,9px)) scale(.965)}55%{opacity:1}100%{opacity:1;transform:none}}
+[data-slot=canvas-toolbar-flyout][data-state=open]{animation:${PREFIX}-flyout calc(300ms * var(--motion-scale)) cubic-bezier(.22,1.14,.36,1)}
+[data-slot=canvas-toolbar-flyout][data-side=bottom]{--${PREFIX}-fy:-9px}
+[data-slot=canvas-toolbar-flyout][data-side=left]{--${PREFIX}-fx:9px;--${PREFIX}-fy:0}
+[data-slot=canvas-toolbar-flyout][data-side=right]{--${PREFIX}-fx:-9px;--${PREFIX}-fy:0}
+`;
+
+/** The pane surface shared by the rail and the flyout. */
+const canvasToolbarVariants = cva("", {
+  variants: {
+    /** `default` is the card surface; `inverted` swaps it for the ink colour. */
+    tone: {
+      default: "bg-card text-foreground",
+      inverted: "bg-foreground text-background",
+    },
+    /** A 1px inset hairline around the surface. */
+    stroke: {
+      true: "ring-1 ring-border ring-inset",
+      false: "",
+    },
+  },
+  defaultVariants: { tone: "default", stroke: false },
+});
+
+/** A tool: a 38px square whose fill and icon follow data-state. */
+const toolClass = cn(
+  "group/tool relative grid size-9.5 shrink-0 place-items-center rounded-[var(--canvas-toolbar-tool-r)]",
+  "transition-[background-color] duration-[var(--duration-instant)]",
+  "hover:bg-current/5 data-[highlighted]:bg-current/5 data-[state=checked]:bg-transparent data-[state=on]:bg-transparent",
+  "disabled:pointer-events-none disabled:opacity-40",
+);
+
+const iconClass = cn(
+  "grid place-items-center opacity-45 transition-[opacity,scale] duration-[var(--duration-instant)] ease-[var(--ease-out-quint)]",
+  "group-hover/tool:opacity-80 group-active/tool:scale-92 group-data-[highlighted]/tool:opacity-80",
+  "group-data-[state=checked]/tool:scale-105 group-data-[state=checked]/tool:opacity-100",
+  "group-data-[state=on]/tool:scale-105 group-data-[state=on]/tool:opacity-100",
+  "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4.25",
+);
+
+type Side = "top" | "right" | "bottom" | "left";
+
+export interface CanvasToolbarProps
+  extends
+    Omit<ComponentPropsWithRef<typeof ToolbarPrimitive.Root>, "children" | "defaultValue">,
+    VariantProps<typeof canvasToolbarVariants> {
+  /** Tools, dividers and swappable slots, in order. */
+  tools: CanvasToolbarItem[];
+  /** The active tool (controlled). */
+  value?: string;
+  /** The initially active tool. Defaults to the first tool. */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Radius of the rail and flyout in px; tools use `corner - 4`. */
+  corner?: number;
+  /** Show each tool's name (and shortcut) in a tooltip. */
+  tooltips?: boolean;
+  /**
+   * Listen for shortcuts on the whole document, not only while focus is in the
+   * toolbar. Keys typed into inputs, textareas and contenteditable are ignored.
+   */
+  globalShortcuts?: boolean;
+  /** Which side the flyout and tooltips open on. Defaults to top (or the inline end when vertical). */
+  side?: Side;
+  /** Extra classes for the flyout panel. */
+  flyoutClassName?: string;
+}
+
+interface Shortcut {
+  tool: CanvasTool;
+  slot?: number;
+}
+
+function isSlot(item: CanvasToolbarItem): item is CanvasToolSlot {
+  return item.type === "slot";
+}
+
+function firstTool(tools: CanvasToolbarItem[]): string | undefined {
+  for (const item of tools) {
+    if (item.type === "separator") continue;
+    return isSlot(item) ? (item.defaultTool ?? item.tools[0]?.value) : item.value;
+  }
+  return undefined;
+}
+
+const EDITABLE =
+  'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role^="menu"]';
+
+/** Warns, in development only, when the toolbar has no accessible name. */
+function useNameWarning(label?: string, labelledBy?: string) {
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production" || label || labelledBy) return;
+    console.warn("[CanvasToolbar] Pass aria-label or aria-labelledby to name the toolbar.");
+  }, [label, labelledBy]);
+}
+
+/** A Figma-style tool rail with a swappable shape slot and single-key shortcuts. */
+export function CanvasToolbar({
+  className,
+  style,
+  tools,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  corner = 14,
+  tooltips = true,
+  globalShortcuts = false,
+  side: sideProp,
+  flyoutClassName,
+  tone,
+  stroke,
+  orientation = "horizontal",
+  dir,
+  onKeyDown,
+  ...props
+}: CanvasToolbarProps) {
+  const [uncontrolled, setUncontrolled] = useState(() => defaultValue ?? firstTool(tools));
+  const value = valueProp ?? uncontrolled;
+  const [picks, setPicks] = useState<Record<number, string>>({});
+  const [openSlot, setOpenSlot] = useState<number | null>(null);
+  const slotTools = useRef(new Map<number, HTMLButtonElement | null>());
+  const picked = useRef(false);
+
+  useNameWarning(props["aria-label"], props["aria-labelledby"]);
+
+  const side: Side =
+    sideProp ?? (orientation === "vertical" ? (dir === "rtl" ? "left" : "right") : "top");
+  const surface = canvasToolbarVariants({ tone, stroke });
+
+  const select = (next: string, slot?: number) => {
+    if (slot !== undefined) setPicks((current) => ({ ...current, [slot]: next }));
+    if (next === value) return;
+    if (valueProp === undefined) setUncontrolled(next);
+    onValueChange?.(next);
+  };
+
+  const shortcuts = new Map<string, Shortcut>();
+  tools.forEach((item, index) => {
+    const add = (tool: CanvasTool, slot?: number) => {
+      if (tool.shortcut) shortcuts.set(tool.shortcut.toLowerCase(), { tool, slot });
+    };
+    if (isSlot(item)) item.tools.forEach((tool) => add(tool, index));
+    else if (item.type !== "separator") add(item);
+  });
+
+  const handleShortcut = (
+    event: { key: string; target: EventTarget | null } & ModifierKeys,
+  ) => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+    if (event.target instanceof Element && event.target.closest(EDITABLE)) return;
+    const hit = shortcuts.get(event.key.toLowerCase());
+    if (!hit || hit.tool.disabled) return;
+    event.preventDefault();
+    select(hit.tool.value, hit.slot);
+  };
+
+  const shortcutRef = useRef(handleShortcut);
+  useEffect(() => {
+    shortcutRef.current = handleShortcut;
+  });
+  useEffect(() => {
+    if (!globalShortcuts) return;
+    const listener = (event: globalThis.KeyboardEvent) => shortcutRef.current(event);
+    document.addEventListener("keydown", listener);
+    return () => document.removeEventListener("keydown", listener);
+  }, [globalShortcuts]);
+
+  const renderTool = (tool: CanvasTool, slot?: number) => {
+    const pressed = tool.value === value;
+    const button = (
+      <ToolbarPrimitive.Button
+        ref={
+          slot === undefined
+            ? undefined
+            : (node: HTMLButtonElement | null) => {
+                slotTools.current.set(slot, node);
+              }
+        }
+        data-slot="canvas-toolbar-tool"
+        data-state={pressed ? "on" : "off"}
+        aria-label={tool.label}
+        aria-pressed={pressed}
+        aria-keyshortcuts={tool.shortcut}
+        disabled={tool.disabled}
+        className={cn(toolClass, focusRing)}
+        onClick={() => select(tool.value, slot)}
+      >
+        <span data-slot="canvas-toolbar-icon" aria-hidden="true" className={iconClass}>
+          {tool.icon}
+        </span>
+      </ToolbarPrimitive.Button>
+    );
+    if (!tooltips) return button;
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent side={side}>
+          {tool.label}
+          {tool.shortcut ? (
+            <kbd className="ms-2 font-sans uppercase opacity-60">{tool.shortcut}</kbd>
+          ) : null}
+        </TooltipContent>
+      </Tooltip>
+    );
+  };
+
+  const flyoutKeys = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    const panel = event.currentTarget;
+    const items = [
+      ...panel.querySelectorAll<HTMLElement>('[role="menuitemradio"]:not([data-disabled])'),
+    ];
+    const rtl =
+      panel.getAttribute("dir") === "rtl" || getComputedStyle(panel).direction === "rtl";
+    const step = (event.key === "ArrowRight") !== rtl ? 1 : -1;
+    const from = items.indexOf(document.activeElement as HTMLElement);
+    event.preventDefault();
+    items[(from + step + items.length) % items.length]?.focus();
+  };
+
+  const renderSlot = (slot: CanvasToolSlot, index: number) => {
+    const shown =
+      slot.tools.find((tool) => tool.value === value) ??
+      slot.tools.find((tool) => tool.value === (picks[index] ?? slot.defaultTool)) ??
+      slot.tools[0];
+    if (!shown) return null;
+    const open = openSlot === index;
+    const more = slot.moreLabel ?? `More ${slot.label.toLowerCase()}`;
+    return (
+      <div
+        key={`slot-${String(index)}`}
+        role="group"
+        aria-label={slot.label}
+        data-slot="canvas-toolbar-slot"
+        data-state={shown.value === value ? "on" : "off"}
+        className="relative shrink-0"
+      >
+        {renderTool(shown, index)}
+        <DropdownMenu
+          dir={dir}
+          open={open}
+          onOpenChange={(next) => setOpenSlot(next ? index : null)}
+        >
+          <DropdownMenuTrigger asChild>
+            <ToolbarPrimitive.Button
+              data-slot="canvas-toolbar-notch"
+              aria-label={more}
+              className={cn(
+                "absolute end-0.75 bottom-0.75 grid size-2.25 place-items-center rounded-xs",
+                "opacity-40 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[cubic-bezier(.28,1.3,.36,1)]",
+                "hover:opacity-90 data-[state=open]:scale-130 data-[state=open]:opacity-90",
+                focusRingInset,
+              )}
+            >
+              <svg
+                viewBox="0 0 5 5"
+                aria-hidden="true"
+                className={cn("size-1.25 fill-current", mirrorForDirection)}
+              >
+                <path d="M5 0v5H0z" />
+              </svg>
+            </ToolbarPrimitive.Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            data-slot="canvas-toolbar-flyout"
+            side={side}
+            align="center"
+            sideOffset={14}
+            onKeyDown={flyoutKeys}
+            onCloseAutoFocus={(event) => {
+              if (!picked.current) return;
+              picked.current = false;
+              event.preventDefault();
+              slotTools.current.get(index)?.focus();
+            }}
+            className={cn(
+              "flex min-w-0 gap-0.5 rounded-[var(--canvas-toolbar-r)] border-0 p-1.5 shadow-md",
+              "data-[state=open]:[&>*]:animate-none",
+              surface,
+              flyoutClassName,
+            )}
+            style={
+              {
+                "--canvas-toolbar-r": `${String(corner)}px`,
+                "--canvas-toolbar-tool-r": `${String(Math.max(corner - 4, 0))}px`,
+              } as CSSProperties
+            }
+          >
+            <DropdownMenuRadioGroup
+              value={shown.value}
+              className={cn(
+                "flex gap-0.5",
+                side === "left" || side === "right" ? "flex-col" : "",
+              )}
+              onValueChange={(next) => {
+                picked.current = true;
+                select(next, index);
+              }}
+            >
+              {slot.tools.map((tool) => (
+                <MenuPrimitive.RadioItem
+                  key={tool.value}
+                  value={tool.value}
+                  disabled={tool.disabled}
+                  aria-label={tool.label}
+                  data-slot="canvas-toolbar-option"
+                  className={cn(toolClass, "outline-none", focusRingInset)}
+                >
+                  <span aria-hidden="true" className={iconClass}>
+                    {tool.icon}
+                  </span>
+                </MenuPrimitive.RadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      <ToolbarPrimitive.Root
+        data-slot="canvas-toolbar"
+        orientation={orientation}
+        dir={dir}
+        className={cn(
+          "inline-flex items-center gap-0.5 p-1.5 shadow-sm data-[orientation=vertical]:flex-col",
+          surface,
+          className,
+        )}
+        style={
+          {
+            borderRadius: corner,
+            "--canvas-toolbar-tool-r": `${String(Math.max(corner - 4, 0))}px`,
+            ...style,
+          } as CSSProperties
+        }
+        onKeyDown={(event) => {
+          onKeyDown?.(event);
+          handleShortcut(event);
+        }}
+        {...props}
+      >
+        {tools.map((item, index) => {
+          if (item.type === "separator") {
+            return (
+              <ToolbarPrimitive.Separator
+                key={`separator-${String(index)}`}
+                data-slot="canvas-toolbar-separator"
+                className={cn(
+                  "shrink-0 bg-current/12",
+                  "data-[orientation=vertical]:mx-1.25 data-[orientation=vertical]:h-5 data-[orientation=vertical]:w-px",
+                  "data-[orientation=horizontal]:my-1.25 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-5",
+                )}
+              />
+            );
+          }
+          if (isSlot(item)) return renderSlot(item, index);
+          return <Fragment key={item.value}>{renderTool(item)}</Fragment>;
+        })}
+      </ToolbarPrimitive.Root>
+    </>
+  );
+}
+
+interface ModifierKeys {
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  defaultPrevented: boolean;
+  preventDefault: () => void;
+}
+
+export { canvasToolbarVariants };

package/src/components/canvas-toolbar/index.ts

@@ -0,0 +1,9 @@
+export {
+  CanvasToolbar,
+  canvasToolbarVariants,
+  type CanvasTool,
+  type CanvasToolSeparator,
+  type CanvasToolSlot,
+  type CanvasToolbarItem,
+  type CanvasToolbarProps,
+} from "./canvas-toolbar";

package/src/components/canvas-toolbar/meta.ts

@@ -0,0 +1,22 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "canvas-toolbar",
+  title: "Canvas Toolbar",
+  description:
+    "A Figma-style tool rail: one active tool with a springy fill, a shape slot that swaps its tool from a flyout, and single-key shortcuts.",
+  category: "navigation",
+  status: "beta",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: ["dropdown-menu", "tooltip"],
+  files: ["canvas-toolbar.tsx"],
+  a11y:
+    'Built on Radix Toolbar: role="toolbar" (name it with aria-label; it warns in development when unnamed) with one tab stop, ' +
+    "arrow keys that follow the reading direction, Home/End and wrap-around. Tools are toggle buttons named by their label, " +
+    "with aria-pressed on the single active tool and aria-keyshortcuts when a shortcut is set; a tooltip repeats the name and key. " +
+    'The slot is a named group; its notch is a menu button (aria-haspopup="menu", aria-expanded) opening Dowel\'s DropdownMenu, ' +
+    "where shapes are menuitemradio items reachable with Left/Right as well as Up/Down. Escape closes the flyout and returns focus " +
+    "to the notch; picking a shape returns focus to the slot's tool. Shortcuts work while focus is in the toolbar, or on the whole " +
+    "document with globalShortcuts, and are ignored in inputs, textareas, contenteditable and open menus. The fill pop and the " +
+    "flyout entrance are decoration and stop under reduced motion.",
+});