@nsaa/core 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/toolbar/toolbar.js

@@ -0,0 +1,250 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ControlDefaultsContext, useControlDefaults } from "../lib/control-defaults.js";
+import { buttonVariants } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuShortcut } from "../dropdown-menu/dropdown-menu.js";
+import { tv } from "../lib/tv.js";
+import { ariaShortcut, formatShortcut } from "../lib/shortcut.js";
+import { TooltipProvider } from "../tooltip/tooltip.js";
+import { ToolbarItem } from "./toolbar-item.js";
+import { OverflowContext, OverflowMore, OverflowStore, useOverflowUnit } from "./overflow.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+// src/toolbar/toolbar.tsx
+const toolbarStyles = tv({
+	base: "flex items-center gap-0.5 data-[orientation=vertical]:flex-col",
+	variants: {
+		surface: {
+			none: "",
+			floating: "nsaa-surface w-fit rounded-surface p-1 shadow-default"
+		},
+		overflow: {
+			menu: "flex-nowrap",
+			none: "flex-wrap",
+			scroll: [
+				"snap-x snap-proximity scroll-px-4 overflow-x-auto overscroll-x-contain p-1 pointer-coarse:py-1.5 [scrollbar-width:none] [&>*]:snap-start",
+				"[--fade-l:0px] [--fade-r:0px] data-fade-left:[--fade-l:--spacing(4)] data-fade-right:[--fade-r:--spacing(4)]",
+				"[mask-image:linear-gradient(to_right,transparent,black_var(--fade-l),black_calc(100%-var(--fade-r)),transparent)]"
+			]
+		}
+	},
+	defaultVariants: {
+		surface: "none",
+		overflow: "menu"
+	}
+});
+/** Marks which edges of a scrolling toolbar hide items (`data-fade-left` / `data-fade-right`). */
+function useScrollEdges(enabled) {
+	const node = useRef(null);
+	useEffect(() => {
+		const el = node.current;
+		if (!enabled || !el) return;
+		const update = () => {
+			const max = el.scrollWidth - el.clientWidth;
+			const fromLeft = getComputedStyle(el).direction === "rtl" ? max + el.scrollLeft : el.scrollLeft;
+			el.toggleAttribute("data-fade-left", fromLeft > 1);
+			el.toggleAttribute("data-fade-right", max - fromLeft > 1);
+		};
+		update();
+		el.addEventListener("scroll", update, { passive: true });
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+		observer?.observe(el);
+		return () => {
+			el.removeEventListener("scroll", update);
+			observer?.disconnect();
+		};
+	}, [enabled]);
+	return node;
+}
+/**
+* Groups related controls behind one Tab stop, with arrow keys, Home and End moving between items
+* (Base UI `Toolbar`). Items get the toolbar's size, swap icons instantly, change colour without
+* transitions and stay silent unless `sound` is set: a toolbar is high-frequency.
+*/
+function ToolbarRoot({ size = "sm", surface = "none", overflow = "menu", overflowLabel = "More", sound = false, orientation = "horizontal", className, children, onKeyDown, ref, ...props }) {
+	const edges = useScrollEdges(overflow === "scroll");
+	const root = useRef(null);
+	const setRef = useCallback((el) => mergeRefs(root, edges, ref)(el), [edges, ref]);
+	const [store] = useState(() => new OverflowStore());
+	const collapses = overflow === "menu" && orientation === "horizontal";
+	useLayoutEffect(() => {
+		if (collapses && root.current) store.layout(root.current);
+	});
+	useEffect(() => {
+		const el = root.current;
+		if (!collapses || !el || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => store.layout(el));
+		observer.observe(el);
+		if (el.parentElement) observer.observe(el.parentElement);
+		return () => observer.disconnect();
+	}, [collapses, store]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Home" && event.key !== "End") return;
+		if (event.target.closest("input, textarea, [contenteditable]")) return;
+		const items = [...event.currentTarget.querySelectorAll("button:not(:disabled), a[href], input:not(:disabled)")];
+		const target = event.key === "Home" ? items[0] : items.at(-1);
+		if (!target) return;
+		event.preventDefault();
+		target.focus();
+	};
+	return /* @__PURE__ */ jsx(ControlDefaultsContext.Provider, {
+		value: {
+			size,
+			sound,
+			orientation,
+			iconTransition: "instant",
+			instantColors: true
+		},
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Toolbar.Root, {
+			ref: setRef,
+			"data-slot": "toolbar",
+			"data-size": size,
+			"data-surface": surface,
+			orientation,
+			className: cn(toolbarStyles({
+				surface,
+				overflow
+			}), "data-[orientation=horizontal]:pointer-coarse:[&_:is(button,a)]:before:min-w-0", "data-[orientation=vertical]:pointer-coarse:[&_:is(button,a)]:before:min-h-0", className),
+			onKeyDown: handleKeyDown,
+			...props,
+			children: [/* @__PURE__ */ jsx(OverflowContext.Provider, {
+				value: collapses ? store : null,
+				children
+			}), collapses && /* @__PURE__ */ jsx(OverflowMore, {
+				store,
+				label: overflowLabel
+			})]
+		}) })
+	});
+}
+/** A toolbar button's form in the More menu: a menu item, or a checkbox item for a toggle. */
+function buttonMenuItem(p, disabled) {
+	const label = p["aria-label"] ?? p.children;
+	const shortcut = typeof p.tooltip === "object" ? p.tooltip.shortcut : void 0;
+	if (p.pressed !== void 0 || p.onPressedChange !== void 0) return /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+		"aria-keyshortcuts": shortcut ? ariaShortcut(shortcut) : void 0,
+		checked: p.pressed ?? false,
+		disabled,
+		onCheckedChange: (on, details) => p.onPressedChange?.(on, details),
+		children: [
+			p.icon,
+			label,
+			shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: formatShortcut(shortcut) })
+		]
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		"aria-keyshortcuts": shortcut ? ariaShortcut(shortcut) : void 0,
+		disabled,
+		onClick: p.onClick,
+		children: [
+			p.icon,
+			label,
+			shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: formatShortcut(shortcut) })
+		]
+	});
+}
+/**
+* A ghost Button (#84): icon-only (with a tooltip) when it has only an `icon`, labelled otherwise;
+* a toggle with `pressed`. Disabled items stay focusable so people can discover them.
+*/
+function ToolbarButton({ disabled, overflowPriority, ...props }) {
+	const trigger = props["aria-haspopup"] !== void 0;
+	const { hidden, unitProps, placeholder } = useOverflowUnit({
+		kind: "item",
+		priority: trigger ? "never" : overflowPriority,
+		menu: buttonMenuItem(props, disabled)
+	});
+	if (hidden) return placeholder;
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		...unitProps,
+		"data-slot": "toolbar-button",
+		disabled,
+		focusableWhenDisabled: true,
+		render: /* @__PURE__ */ jsx(ToolbarItem, { ...props })
+	});
+}
+const LINK_SIZE = {
+	xs: "xs",
+	sm: "sm",
+	md: "default",
+	lg: "lg",
+	xl: "lg"
+};
+/** A link styled like a ghost toolbar item. */
+function ToolbarLink({ className, overflowPriority, ...props }) {
+	const { size } = useControlDefaults();
+	const { hidden, unitProps, placeholder } = useOverflowUnit({
+		kind: "item",
+		priority: overflowPriority,
+		menu: /* @__PURE__ */ jsx(DropdownMenuItem, {
+			render: /* @__PURE__ */ jsx("a", { href: props.href }),
+			children: props.children
+		})
+	});
+	if (hidden) return placeholder;
+	return /* @__PURE__ */ jsx(Toolbar.Link, {
+		...unitProps,
+		"data-slot": "toolbar-link",
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: LINK_SIZE[size ?? "md"]
+		}), "transition-none", className),
+		...props
+	});
+}
+/** A labelled cluster of items. */
+function ToolbarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Group, {
+		"data-slot": "toolbar-group",
+		role: "group",
+		className: cn("flex items-center gap-0.5 data-[orientation=vertical]:flex-col", className),
+		...props
+	});
+}
+/** 1 px `border-default`, 60% of the item height, perpendicular to the toolbar. */
+function ToolbarSeparator({ className, ...props }) {
+	const { hidden, unitProps, placeholder } = useOverflowUnit({
+		kind: "separator",
+		menu: null
+	});
+	if (hidden) return placeholder;
+	return /* @__PURE__ */ jsx(Toolbar.Separator, {
+		...unitProps,
+		"data-slot": "toolbar-separator",
+		className: cn("shrink-0 self-stretch bg-border-default", "data-[orientation=vertical]:mx-0.5 data-[orientation=vertical]:w-px data-[orientation=vertical]:scale-y-60", "data-[orientation=horizontal]:my-0.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:scale-x-60", className),
+		...props
+	});
+}
+/**
+* A text input in the toolbar (search, find, a URL). At most one, placed last: arrow keys move
+* the caret inside it (Base UI). The base-nova Input (#84) without its resting border; never
+* collapses.
+*/
+function ToolbarInput({ className, ...props }) {
+	const { unitProps } = useOverflowUnit({
+		kind: "item",
+		priority: "never",
+		menu: null
+	});
+	return /* @__PURE__ */ jsx("span", {
+		...unitProps,
+		"data-slot": "toolbar-input",
+		className: "inline-flex min-w-0 shrink",
+		children: /* @__PURE__ */ jsx(Toolbar.Input, { render: /* @__PURE__ */ jsx(Input, {
+			className: cn("border-transparent dark:bg-transparent", className),
+			...props
+		}) })
+	});
+}
+const Toolbar$1 = Object.assign(ToolbarRoot, {
+	Button: ToolbarButton,
+	Input: ToolbarInput,
+	Link: ToolbarLink,
+	Group: ToolbarGroup,
+	Separator: ToolbarSeparator
+});
+export { Toolbar$1 as Toolbar };

package/dist/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,7 @@
+
+import { Tooltip } from "@base-ui/react/tooltip";
+declare function TooltipProvider({ delay, ...props }: Tooltip.Provider.Props): import("react").JSX.Element;
+declare function Tooltip$1({ ...props }: Tooltip.Root.Props): import("react").JSX.Element;
+declare function TooltipTrigger({ ...props }: Tooltip.Trigger.Props): import("react").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip.Popup.Props & Pick<Tooltip.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip/tooltip.js

@@ -0,0 +1,41 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/tooltip/tooltip.tsx
+function TooltipProvider({ delay = 600, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+}
+function Tooltip$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		...props
+	});
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			"data-slot": "tooltip-content",
+			className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
+		})
+	}) });
+}
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@nsaa/core",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "description": "Nsaa core components: accessible, token-driven, animated to the Nsaa feel spec.",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
     "**/*.css",
-    "./dist/index.js"
+    "./dist/lib/track-input-modality.js",
+    "./dist/spinner/spinner.js"
   ],
   "files": [
     "dist",
     "src/styles.css",
+    "src/styles-base.css",
     "src/feel.css",
     "README.md",
     "LICENSE",
@@ -33,7 +35,9 @@
       "types": "./dist/sound-uisfx.d.ts",
       "import": "./dist/sound-uisfx.js"
     },
-    "./styles.css": "./src/styles.css"
+    "./styles.css": "./src/styles.css",
+    "./styles-base.css": "./src/styles-base.css",
+    "./sources/*": "./dist/sources/*"
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
@@ -46,7 +50,7 @@
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1",
     "uisfx": "0.4.0",
-    "@nsaa/tokens": "^0.1.0-alpha.1"
+    "@nsaa/tokens": "^0.1.0-alpha.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.1",
@@ -77,7 +81,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown && node ../../scripts/core-sources.mjs",
     "dev": "tsdown --watch",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",

package/src/feel.css

@@ -19,6 +19,58 @@
  * own unlayered CSS still wins.
  */
 
+/* ------------------------------------------------------------------ coarse-pointer hit areas (#144)
+   DESIGN.md: 44 px targets on coarse pointers. An invisible ::before, centred, at least 44 × 44 and
+   never smaller than the control; layout is unchanged. ::before because base-nova already uses
+   ::after (Tabs' line indicator, the Checkbox / Radio / Switch / Slider thumb hit expanders).
+   Tailwind's components layer, below utilities: the `position: relative` here never overrides a
+   control's own `absolute` (the Dialog close) or a Toolbar / Toggle Group override.
+   Inputs are replaced elements and take no pseudo-element, so on a coarse pointer they grow to
+   44 px tall instead; an Input Group grows as a whole. */
+@layer components {
+  @media (pointer: coarse) {
+    :is(
+        .group\/button,
+        [data-slot="select-trigger"],
+        [data-slot="checkbox"],
+        [data-slot="radio-group-item"],
+        [data-slot="switch"],
+        [data-slot="slider-thumb"],
+        [data-slot="tabs-trigger"]
+      ) {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        min-width: calc(var(--spacing) * 11);
+        min-height: calc(var(--spacing) * 11);
+        translate: -50% -50%;
+      }
+    }
+
+    :is([data-slot="input"], [data-slot="input-group"]) {
+      min-height: calc(var(--spacing) * 11);
+    }
+
+    /* Neighbours closer than 44 px would share a hit area. Pagination links sit 2 px apart, so
+       along the row they keep their own width. Calendar days tile the grid edge to edge (every
+       point is some day's), so a day's hit area is its cell; the month arrows keep 44 px.
+       Toolbar and Toggle Group do the same along their axis (#75). */
+    [data-slot="pagination-content"] .group\/button::before {
+      min-width: 0;
+    }
+    [data-slot="calendar"] button[data-day]::before {
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+}
+
 @layer nsaa-feel {
   :root {
     --nsaa-time-scale: 1;

package/src/styles-base.css

@@ -0,0 +1,142 @@
+/*
+ * @nsaa/core styles without Tailwind sources (#144): tokens, the feel layer and the variants.
+ * For the smallest CSS, import this plus one sources file per component you use:
+ *   @import "tailwindcss";
+ *   @import "@nsaa/core/styles-base.css";
+ *   @import "@nsaa/core/sources/button.css";
+ *   @import "@nsaa/core/sources/dialog.css";
+ * `styles.css` is this file plus every component's sources.
+ */
+@import "@nsaa/tokens/css";
+
+/* The feel layer (#108): motion for the base-nova components, keyed to data-slot. */
+@import "./feel.css";
+
+/* `dark:` follows the mode axis (`.dark` or `data-mode="dark"` on an ancestor), not the OS, so the
+   shadcn classes (#84) switch with the rest of the tokens. The nearest mode wins (#120): a light
+   panel inside a dark page is light, and a dark panel inside that light panel is dark again. */
+@custom-variant dark (
+  &:where(
+    .dark,
+    [data-mode="dark"],
+    :is(.dark, [data-mode="dark"]) *:not([data-mode="light"], [data-mode="light"] *),
+    [data-mode="light"] [data-mode="dark"] *
+  )
+);
+
+/* shadcn's base layer (apps/v4 globals.css, `* { @apply border-border }`): a bare `border` class takes
+   the border token, not currentColor. Dialog's footer and the Drawer's edge rely on it (#84). */
+@layer base {
+  *,
+  ::after,
+  ::before {
+    border-color: var(--border);
+  }
+}
+
+/* shadcn's orientation variants (shadcn/tailwind.css, which the shadcn CLI imports for its users).
+   Base UI sets `data-orientation`, not `data-horizontal`; Tabs, Separator and Field use these (#84).
+   shadcn's other data-* variants match Base UI's attributes as Tailwind's defaults already. */
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+/* shadcn's `data-selected` (same file): only `data-selected="true"`. cmdk writes "true" / "false", so
+   Tailwind's default (attribute present) would highlight every Command item (#84). */
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+/* shadcn style hooks: `cn-rtl-flip` marks icons the shadcn CLI mirrors for right-to-left (the submenu
+   chevrons); `cn-input-otp` and two `cn-calendar-*` classes are styled by base-nova's style sheet, not
+   by the item's classes. */
+@layer components {
+  .cn-rtl-flip:where(:dir(rtl)) {
+    rotate: 180deg;
+  }
+
+  /* Input OTP's root: shadcn's style-nova.css gives `cn-input-otp` a `gap-2` between the groups. */
+  .cn-input-otp {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  /* Calendar with captionLayout="dropdown" (#136): style-nova.css draws the month and year
+     dropdowns' border and focus ring, and pads the caption label; the item's classes don't. */
+  .cn-calendar-dropdown-root {
+    border: 1px solid var(--input);
+
+    &:has(:focus) {
+      border-color: var(--ring);
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  .cn-calendar-caption-label {
+    height: calc(var(--spacing) * 6);
+    padding-right: calc(var(--spacing) * 1);
+    padding-left: calc(var(--spacing) * 1.5);
+  }
+}
+
+/* Hover only where hovering is real (fine pointers), never on disabled, busy or read-only controls. */
+@custom-variant hover-fine {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover:not([data-disabled], [data-loading], [data-readonly]) {
+      @slot;
+    }
+  }
+}
+
+/* Pressed look, never on disabled or busy controls. */
+@custom-variant pressed {
+  &:active:not([data-disabled], [data-loading]) {
+    @slot;
+  }
+}
+
+/* shadcn's `no-scrollbar` (apps/v4 globals.css), used by the Combobox list (#84). `cn-menu-target`
+   and `cn-menu-translucent` on Select and Combobox popups are inert markers the shadcn CLI keeps for
+   its optional translucent-menu setting; nothing styles them by default, so neither do we. */
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Input OTP's fake caret (`animate-caret-blink`, #84). shadcn's apps/v4 globals.css defines it; the
+   base-nova registry item doesn't ship it, so core does (and the `input-otp` registry item adds it).
+   One blink is `duration.caret` (1.25 s, as shadcn's; #125). Under reduced motion the caret stays solid. */
+@theme {
+  --animate-caret-blink: caret-blink var(--nsaa-duration-caret) ease-out infinite;
+
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-caret-blink {
+    animation: none;
+  }
+}