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

package/LICENSE

@@ -25,4 +25,4 @@ SOFTWARE.
 This licence covers the free packages in this repository. The Pro package
 (`packages/blocks`, when it exists) ships under its own commercial licence,
 stated in that folder. Third-party code adapted into Nsaa keeps its original
-notice in the file header; colour scales come from Radix Colors (MIT).
+notice in the file header; colour scales come from Tailwind CSS (MIT).

package/NOTICE

@@ -152,3 +152,30 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+-------------------------------------------------------------------------------
+Tailwind CSS (https://github.com/tailwindlabs/tailwindcss), v4.3.3. Its default colour palette
+(theme.css) is the source of the colour primitives in packages/tokens (src/primitives.json and
+dist/), #149.
+
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/alert/alert.d.ts

@@ -1,10 +1,22 @@
 
+import { Button } from "../button/button.js";
+import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const alertVariants: (props?: ({
   variant?: "success" | "warning" | "default" | "destructive" | "info" | null | undefined;
+  appearance?: "soft" | "outline" | "solid" | null | undefined;
+  size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Alert({ className, variant, announce, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+type AlertAppearance = NonNullable<VariantProps<typeof alertVariants>["appearance"]>;
+declare function Alert({ className, variant, appearance, size, announce, open, defaultOpen, onOpenChange, ref, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+  /**
+   * How loud it is: `outline`, `soft` or `solid`. Defaults by variant: outline for default and
+   * destructive (base-nova), soft for success, warning and info.
+   */
+  appearance?: AlertAppearance | null;
+  /** `default`, or `sm`: one compact line (icon, title, description, close) for tight places. */
+  size?: "default" | "sm" | null;
   /**
    * The error sound (feedback.error) when the Alert appears (#114). Left unset it's automatic: a
    * destructive Alert plays it when a person's action caused it (within the browser's transient
@@ -12,8 +24,20 @@ declare function Alert({ className, variant, announce, ...props }: React.Compone
    * warning are silent unless `announce` is set, then play feedback.success / feedback.warning.
    */
   announce?: boolean;
-}): React.JSX.Element;
+  /** Whether the Alert is shown (controlled). Only matters with an `AlertClose`. */
+  open?: boolean;
+  /** Whether the Alert starts shown when uncontrolled. Defaults to `true`. */
+  defaultOpen?: boolean;
+  /** Called with `false` when `AlertClose` is pressed. */
+  onOpenChange?: (open: boolean) => void;
+}): React.JSX.Element | null;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Alert, AlertAction, AlertDescription, AlertTitle };
+/** Nsaa (#148): dismisses the Alert. A ghost icon Button named "Dismiss", at the inline end. */
+declare function AlertClose({ className, children, onClick, ...props }: Omit<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+/** Nsaa (#148): a row of `AlertLink`s under the description. The ∙ between them is CSS, never read. */
+declare function AlertLinks({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Nsaa (#148): a real link in the Alert's own text colour, medium weight, underlined. */
+declare function AlertLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle };

package/dist/alert/alert.js

@@ -1,22 +1,123 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { recentUserAction } from "../lib/user-action.js";
 import { useCue } from "../sound/sound-map.js";
-import { jsx } from "react/jsx-runtime";
+import { Button } from "../button/button.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { recentUserAction } from "../lib/user-action.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 // src/alert/alert.tsx
 const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
-	variants: { variant: {
-		default: "bg-card text-card-foreground",
-		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
-		success: "border-positive-subtle-active bg-positive-subtle text-on-positive-subtle-foreground *:data-[slot=alert-description]:text-on-positive-subtle-foreground",
-		warning: "border-warning-subtle-active bg-warning-subtle text-on-warning-subtle-foreground *:data-[slot=alert-description]:text-on-warning-subtle-foreground",
-		info: "border-info-subtle-active bg-info-subtle text-on-info-subtle-foreground *:data-[slot=alert-description]:text-on-info-subtle-foreground"
-	} },
-	defaultVariants: { variant: "default" }
+	variants: {
+		variant: {
+			default: "bg-card text-card-foreground",
+			destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			success: "",
+			warning: "",
+			info: ""
+		},
+		appearance: {
+			outline: "",
+			soft: "",
+			solid: ""
+		},
+		size: {
+			default: "has-data-[slot=alert-close]:pr-10 has-data-[slot=alert-action]:has-data-[slot=alert-close]:pr-25 rtl:has-data-[slot=alert-close]:pr-2.5 rtl:has-data-[slot=alert-close]:pl-10 rtl:has-data-[slot=alert-action]:has-data-[slot=alert-close]:pl-25",
+			sm: "block rounded-md px-2 py-1.5 text-xs has-data-[slot=alert-close]:pr-8 rtl:has-data-[slot=alert-close]:pr-2 rtl:has-data-[slot=alert-close]:pl-8 *:[svg]:float-start *:[svg]:me-2 *:[svg]:translate-y-0 *:data-[slot=alert-title]:inline *:data-[slot=alert-description]:ms-1 *:data-[slot=alert-description]:inline *:data-[slot=alert-description]:text-xs"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			appearance: "soft",
+			className: "bg-muted border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-muted-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "soft",
+			className: "bg-danger-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-danger-foreground)"
+		},
+		{
+			variant: "success",
+			appearance: "soft",
+			className: "bg-positive-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-positive-foreground)"
+		},
+		{
+			variant: "warning",
+			appearance: "soft",
+			className: "bg-warning-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-warning-foreground)"
+		},
+		{
+			variant: "info",
+			appearance: "soft",
+			className: "bg-info-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-info-foreground)"
+		},
+		{
+			variant: "default",
+			appearance: "solid",
+			className: "border-inverted-solid bg-inverted-solid text-on-inverted-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-background *:data-[slot=alert-action]:text-foreground *:data-[slot=alert-description]:text-on-inverted-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "outline",
+			className: "border-danger-border-default bg-card"
+		},
+		{
+			variant: "success",
+			appearance: "outline",
+			className: "border-positive-border-default bg-card text-card-foreground *:[svg]:text-(--nsaa-color-positive-foreground)"
+		},
+		{
+			variant: "warning",
+			appearance: "outline",
+			className: "border-warning-border-default bg-card text-card-foreground *:[svg]:text-(--nsaa-color-warning-foreground)"
+		},
+		{
+			variant: "info",
+			appearance: "outline",
+			className: "border-info-border-default bg-card text-card-foreground *:[svg]:text-(--nsaa-color-info-foreground)"
+		},
+		{
+			variant: "destructive",
+			appearance: "solid",
+			className: "border-transparent bg-danger-solid text-on-danger-solid-foreground *:data-[slot=alert-description]:text-on-danger-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-danger-solid-foreground *:data-[slot=alert-action]:text-danger-solid **:data-[slot=button]:text-danger-solid!"
+		},
+		{
+			variant: "success",
+			appearance: "solid",
+			className: "border-transparent bg-positive-solid text-on-positive-solid-foreground *:data-[slot=alert-description]:text-on-positive-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-positive-solid-foreground *:data-[slot=alert-action]:text-positive-solid **:data-[slot=button]:text-positive-solid!"
+		},
+		{
+			variant: "warning",
+			appearance: "solid",
+			className: "border-transparent bg-warning-solid text-on-warning-solid-foreground *:data-[slot=alert-description]:text-on-warning-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-warning-solid-foreground *:data-[slot=alert-action]:text-warning-solid **:data-[slot=button]:text-warning-solid!"
+		},
+		{
+			variant: "info",
+			appearance: "solid",
+			className: "border-transparent bg-info-solid text-on-info-solid-foreground *:data-[slot=alert-description]:text-on-info-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-info-solid-foreground *:data-[slot=alert-action]:text-info-solid **:data-[slot=button]:text-info-solid!"
+		},
+		{
+			appearance: ["soft", "solid"],
+			className: "[&_a:hover]:text-current!"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
 });
-function Alert({ className, variant, announce, ...props }) {
+const AlertContext = React.createContext(null);
+const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/** The next focusable element after `el` in the page, or the previous one if there is none. */
+function neighbour(el) {
+	const all = [...el.ownerDocument.querySelectorAll(FOCUSABLE)].filter((node) => !el.contains(node) && (node.checkVisibility?.() ?? true));
+	return all.find((node) => el.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) ?? all.filter((node) => el.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING).at(-1) ?? null;
+}
+function Alert({ className, variant, appearance, size, announce, open, defaultOpen = true, onOpenChange, ref, ...props }) {
 	const cue = useCue("alert");
 	const destructive = variant === "destructive";
 	const announceCue = variant === "success" || variant === "warning" ? variant : "destructive";
@@ -27,11 +128,47 @@ function Alert({ className, variant, announce, ...props }) {
 	React.useEffect(() => {
 		if (announce !== false && (destructive || announce)) appear();
 	}, [destructive, announce]);
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "alert",
-		role: "alert",
-		className: cn(alertVariants({ variant }), className),
-		...props
+	const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+	const shown = open ?? uncontrolled;
+	const [mounted, setMounted] = React.useState(shown);
+	const node = React.useRef(null);
+	if (shown && !mounted) setMounted(true);
+	React.useLayoutEffect(() => {
+		const el = node.current;
+		if (shown || !el) return;
+		let live = true;
+		const running = el.getAnimations?.() ?? [];
+		Promise.allSettled(running.map((a) => a.finished)).then(() => {
+			if (!live) return;
+			if (el.contains(el.ownerDocument.activeElement)) neighbour(el)?.focus();
+			setMounted(false);
+		});
+		return () => {
+			live = false;
+		};
+	}, [shown]);
+	const context = React.useMemo(() => ({ close: () => {
+		if (open === void 0) setUncontrolled(false);
+		onOpenChange?.(false);
+	} }), [open, onOpenChange]);
+	if (!mounted) return null;
+	const status = variant ?? "default";
+	const look = appearance ?? (status === "success" || status === "warning" || status === "info" ? "soft" : "outline");
+	return /* @__PURE__ */ jsx(AlertContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: mergeRefs(node, ref),
+			"data-slot": "alert",
+			"data-size": size ?? "default",
+			"data-ending-style": shown ? void 0 : "",
+			role: destructive || status === "warning" ? "alert" : "status",
+			className: cn(alertVariants({
+				variant,
+				appearance: look,
+				size
+			}), "rtl:text-right rtl:has-data-[slot=alert-action]:pr-2.5 rtl:has-data-[slot=alert-action]:pl-18 rtl:*:data-[slot=alert-action]:right-auto rtl:*:data-[slot=alert-action]:left-2", "has-data-[slot=alert-close]:*:data-[slot=alert-action]:right-10 rtl:has-data-[slot=alert-close]:*:data-[slot=alert-action]:left-10", className),
+			...props
+		})
 	});
 }
 function AlertTitle({ className, ...props }) {
@@ -55,4 +192,48 @@ function AlertAction({ className, ...props }) {
 		...props
 	});
 }
-export { Alert, AlertAction, AlertDescription, AlertTitle };
+/** Nsaa (#148): dismisses the Alert. A ghost icon Button named "Dismiss", at the inline end. */
+function AlertClose({ className, children, onClick, ...props }) {
+	const alert = React.useContext(AlertContext);
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-close",
+		variant: "ghost",
+		size: "icon-xs",
+		"aria-label": "Dismiss",
+		className: cn("absolute top-2 right-2 text-current rtl:right-auto rtl:left-2 group-data-[size=sm]/alert:top-1 group-data-[size=sm]/alert:right-1 rtl:group-data-[size=sm]/alert:right-auto rtl:group-data-[size=sm]/alert:left-1", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) alert?.close();
+		},
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+		})
+	});
+}
+/** Nsaa (#148): a row of `AlertLink`s under the description. The ∙ between them is CSS, never read. */
+function AlertLinks({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-links",
+		className: cn("mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 group-has-[>svg]/alert:col-start-2", className),
+		...props
+	});
+}
+/** Nsaa (#148): a real link in the Alert's own text colour, medium weight, underlined. */
+function AlertLink({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn("relative font-medium text-current underline underline-offset-3 hover:decoration-2", "not-first:before:pointer-events-none not-first:before:absolute not-first:before:-start-2.5 not-first:before:no-underline not-first:before:content-['∙'_/_'']", className) }, props),
+		render,
+		state: { slot: "alert-link" }
+	});
+}
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle };

package/dist/alert/index.d.ts

@@ -1,3 +1,3 @@
 
-import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert.js";
-export { Alert, AlertAction, AlertDescription, AlertTitle };
+import { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle } from "./alert.js";
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle };

package/dist/badge/badge.d.ts

@@ -1,8 +1,8 @@
 
-import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

package/dist/badge/badge.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
 // src/badge/badge.tsx
 const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
 	variants: { variant: {

package/dist/button/button.d.ts

@@ -2,8 +2,8 @@
 import { VariantProps } from "class-variance-authority";
 import { Button } from "@base-ui/react/button";
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type LoadingPlacement = "auto" | "start" | "center";
 declare function Button$1({ className, variant, size, loading, loadingLabel, loadingPlacement, children, onClick, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, ...props }: Button.Props & VariantProps<typeof buttonVariants> & {

package/dist/button/button.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useCue } from "../sound/sound-map.js";
 import { useControlDefaults } from "../lib/control-defaults.js";
 import { usePress } from "../lib/use-press.js";
+import { useCue } from "../sound/sound-map.js";
 import { Spinner } from "../spinner/spinner.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/empty/empty.d.ts

@@ -1,7 +1,7 @@
 
+import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { useRender } from "@base-ui/react/use-render";
 declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const emptyMediaVariants: (props?: ({

package/dist/empty/empty.js

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import * as React from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import * as React from "react";
 // src/empty/empty.tsx
 function Empty({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion/accordion.js";
 import "./accordion/index.js";
-import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert/alert.js";
-import "./alert/index.js";
 import { Button, buttonVariants } from "./button/button.js";
+import { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle } from "./alert/alert.js";
+import "./alert/index.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog/alert-dialog.js";
 import "./alert-dialog/index.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar/avatar.js";
@@ -88,4 +88,4 @@ import "./toolbar/index.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip/tooltip.js";
 import "./tooltip/index.js";
 import "./lib/track-input-modality.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, type EmptyIllustrationOptions, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, type IconSwapProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, type LoaderComponent, LoaderProvider, type LoaderProviderProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, type SoundComponent, type SoundCue, type SoundPlayer, SoundProvider, type SoundProviderProps, Spinner, type SpinnerProps, type SpinnerVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSize, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, lazyUisfxPlayer, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertClose, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertLink, AlertLinks, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, type EmptyIllustrationOptions, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, type IconSwapProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, type LoaderComponent, LoaderProvider, type LoaderProviderProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, type SoundComponent, type SoundCue, type SoundPlayer, SoundProvider, type SoundProviderProps, Spinner, type SpinnerProps, type SpinnerVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSize, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, lazyUisfxPlayer, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };

package/dist/index.js

@@ -3,11 +3,11 @@ import { cn } from "./lib/cn.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion/accordion.js";
 import { SoundProvider, useSound } from "./sound/sound.js";
 import { SOUND_MAP } from "./sound/sound-map.js";
-import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert/alert.js";
 import { LoaderProvider } from "./spinner/loader-provider.js";
 import { registerLoader, registerLoaders } from "./spinner/registry.js";
 import { Spinner } from "./spinner/spinner.js";
 import { Button, buttonVariants } from "./button/button.js";
+import { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle } from "./alert/alert.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog/alert-dialog.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar/avatar.js";
 import { Badge, badgeVariants } from "./badge/badge.js";
@@ -48,4 +48,4 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tool
 import { ToggleGroup } from "./toggle-group/toggle-group.js";
 import { Toolbar } from "./toolbar/toolbar.js";
 import "./lib/track-input-modality.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, LoaderProvider, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, SoundProvider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, lazyUisfxPlayer, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertClose, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertLink, AlertLinks, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, LoaderProvider, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, SoundProvider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, lazyUisfxPlayer, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };

package/dist/input-group/input-group.d.ts

@@ -8,7 +8,7 @@ declare const inputGroupAddonVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-  size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+  size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
   type?: "button" | "submit" | "reset";

package/dist/input-otp/input-otp.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
 import { cn } from "../lib/cn.js";
-import { recentUserAction } from "../lib/user-action.js";
 import { useCue } from "../sound/sound-map.js";
+import { recentUserAction } from "../lib/user-action.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";

package/dist/sources/alert.css

@@ -1,8 +1,28 @@
 /* @nsaa/core: Tailwind sources for alert (generated). */
 @source "../alert/alert.js";
+@source "../button/button.js";
 @source "../lib/cn.js";
+@source "../lib/control-defaults.js";
 @source "../lib/input-modality.js";
+@source "../lib/merge-refs.js";
+@source "../lib/use-press.js";
 @source "../lib/user-action.js";
+@source "../loaders/arc.js";
+@source "../loaders/bouncing-dots.js";
+@source "../loaders/cap.js";
+@source "../loaders/circular-dots.js";
+@source "../loaders/classic.js";
+@source "../loaders/easing.js";
+@source "../loaders/fade.js";
+@source "../loaders/frame.js";
+@source "../loaders/motion.js";
+@source "../loaders/orbit.js";
+@source "../loaders/pulse.js";
+@source "../loaders/ring.js";
+@source "../loaders/wave.js";
 @source "../sound/sound-map.js";
 @source "../sound/sound.js";
+@source "../spinner/loader-provider.js";
+@source "../spinner/registry.js";
+@source "../spinner/spinner.js";
 @source "../tokens/dist/motion.js";

package/dist/toolbar/toolbar.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { ControlDefaultsContext, useControlDefaults } from "../lib/control-defaults.js";
 import { buttonVariants } from "../button/button.js";
+import { mergeRefs } from "../lib/merge-refs.js";
 import { Input } from "../input/input.js";
 import { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuShortcut } from "../dropdown-menu/dropdown-menu.js";
 import { tv } from "../lib/tv.js";
@@ -9,7 +10,6 @@ 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";

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@nsaa/core",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.4",
   "description": "Nsaa core components: accessible, token-driven, animated to the Nsaa feel spec.",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
     "**/*.css",
+    "./dist/index.js",
+    "./src/index.ts",
     "./dist/lib/track-input-modality.js",
+    "./src/lib/track-input-modality.ts",
     "./dist/spinner/spinner.js"
   ],
   "files": [
@@ -50,7 +53,7 @@
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1",
     "uisfx": "0.4.0",
-    "@nsaa/tokens": "^0.1.0-alpha.3"
+    "@nsaa/tokens": "^0.1.0-alpha.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.1",

package/src/feel.css

@@ -53,6 +53,17 @@
       }
     }
 
+    /* Alert links (#148): 44 px tall, their own width (the AlertLinks gap keeps them apart);
+       ::after, as ::before draws the separator. */
+    [data-slot="alert-link"]::after {
+      content: "";
+      position: absolute;
+      inset-inline: 0;
+      top: 50%;
+      height: calc(var(--spacing) * 11);
+      translate: 0 -50%;
+    }
+
     :is([data-slot="input"], [data-slot="input-group"]) {
       min-height: calc(var(--spacing) * 11);
     }
@@ -461,6 +472,13 @@
     }
   }
 
+  /* Dismiss (#148): opacity only, duration.fast, then it unmounts. No height animation (not a
+     named layout exception); instant under reduced motion and after keyboard input. */
+  [data-slot="alert"][data-ending-style] {
+    opacity: 0;
+    transition-duration: calc(var(--nsaa-duration-fast) * var(--nsaa-time-scale));
+  }
+
   /* ---------------------------------------------------------------- Avatar, Skeleton, Spinner
      A loaded image fades in 150; Skeleton keeps its pulse; Spinner turns at duration.spin. */
   /* SkeletonContent: what replaces a Skeleton fades in the same way (#128). */
@@ -710,6 +728,10 @@
         }
       }
 
+      & [data-slot="alert"][data-ending-style] {
+        transition-duration: 0s;
+      }
+
       & :is([data-slot="skeleton"], [data-loader="lucide"]) {
         animation: none;
       }
@@ -874,6 +896,10 @@
       }
     }
 
+    & [data-slot="alert"][data-ending-style] {
+      transition-duration: 0s;
+    }
+
     & :is([data-slot="skeleton"], [data-loader="lucide"]) {
       animation: none;
     }
@@ -933,7 +959,8 @@
       [data-slot="drawer-overlay"],
       [data-slot="accordion-content"],
       [data-slot="collapsible-content"],
-      [data-slot="skeleton-content"]
+      [data-slot="skeleton-content"],
+      [data-slot="alert"][data-ending-style]
     ) {
     transition-duration: 0s;
   }