beez-ui 2.7.1 → 3.0.0

package/dist/components/tooltip.js

@@ -1,305 +1,65 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+import { Tooltip as TooltipRoot, TooltipContent, TooltipTrigger } from "./primitives/tooltip.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
-* Arc's Tooltip (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a short dark bubble on Arc's tokens that
-* waits a moment, then rises a few pixels from its trigger. While a tooltip is open, and briefly after it closes, the
-* next one opens at once and only fades. It keeps the Radix composition (`Tooltip`, `TooltipTrigger`,
-* `TooltipContent`, `TooltipProvider`) and adds Arc's shorthand: `<Tooltip content="..." side="...">` wraps its child.
-*/
-import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { ArcFloatingSlot } from "../motion/arc-floating-slot.js";
-import { createOverlayWarmth, useOpenedWhileWarm } from "../motion/overlay-warmth.js";
-import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
-import { cn } from "../lib/utils.js";
-import { TOOLTIP_COLLISION_PADDING_PX, TOOLTIP_INSTANT_MOTION, TOOLTIP_MOTION, TOOLTIP_OPEN_DELAY_MS, TOOLTIP_SIDE_OFFSET_PX, TOOLTIP_SKIP_WINDOW_MS } from "../constants/tooltip.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/** Every tooltip on the page shares one skip window, whichever provider it belongs to. */
-const tooltipWarmth = createOverlayWarmth(TOOLTIP_SKIP_WINDOW_MS);
-/** Whether the page was already warm when the surrounding layer opened, so its entrance only fades. */
-const TooltipOpenedWhileWarmContext = React.createContext(false);
-/** Tells a `Tooltip` whether a `TooltipProvider` already wraps it. */
-const TooltipProviderPresenceContext = React.createContext(false);
-/**
-* Shares the open delay among the tooltips it wraps.
-* @param props - Radix provider properties. `delayDuration` defaults to Arc's 250ms.
-* @returns The provider.
-*/
-function TooltipProvider(t0) {
-	const $ = _c(6);
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({delayDuration: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-		$[2] = t1;
-	} else {
-		props = $[1];
-		t1 = $[2];
-	}
-	const delayDuration = t1 === undefined ? TOOLTIP_OPEN_DELAY_MS : t1;
-	let t2;
-	if ($[3] !== delayDuration || $[4] !== props) {
-		t2 = /* @__PURE__ */ _jsx(TooltipProviderPresenceContext.Provider, {
-			value: true,
-			children: /* @__PURE__ */ _jsx(TooltipPrimitive.Provider, {
-				"data-slot": "tooltip-provider",
-				delayDuration,
-				...props
-			})
-		});
-		$[3] = delayDuration;
-		$[4] = props;
-		$[5] = t2;
-	} else {
-		t2 = $[5];
-	}
-	return t2;
-}
-/**
-* Owns the open state of one tooltip. It works with or without a `TooltipProvider`: without one it brings its own,
-* as Arc's Tooltip does.
-* @param props - Radix root properties plus Arc's optional `content` and `side` shorthand.
-* @returns The tooltip root.
+* A short label on hover or focus that opens without delay when moving between tooltips.
+* @param props - The bubble content, the trigger and optional placement and open state.
+* @returns The trigger with its tooltip.
 */
 function Tooltip(t0) {
-	const $ = _c(29);
-	let children;
-	let content;
-	let delayDuration;
-	let props;
-	let side;
-	if ($[0] !== t0) {
-		({content, side, children, delayDuration, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = content;
-		$[3] = delayDuration;
-		$[4] = props;
-		$[5] = side;
-	} else {
-		children = $[1];
-		content = $[2];
-		delayDuration = $[3];
-		props = $[4];
-		side = $[5];
-	}
-	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
-	const isWarm = React.useSyncExternalStore(tooltipWarmth.subscribe, tooltipWarmth.isWarm, tooltipWarmth.isWarmOnServer);
-	const openedWhileWarm = useOpenedWhileWarm(motionOpen, isWarm);
-	const hasProvider = React.useContext(TooltipProviderPresenceContext);
+	const $ = _c(16);
+	const { content, children, side, align, sideOffset, collisionPadding, contentClassName, open, defaultOpen, onOpenChange, delayDuration } = t0;
 	let t1;
-	let t2;
-	if ($[6] !== motionOpen) {
-		t1 = () => {
-			if (!motionOpen) {
-				return;
-			}
-			return tooltipWarmth.open();
-		};
-		t2 = [motionOpen];
-		$[6] = motionOpen;
-		$[7] = t1;
-		$[8] = t2;
-	} else {
-		t1 = $[7];
-		t2 = $[8];
-	}
-	React.useEffect(t1, t2);
-	const usesShorthand = content !== undefined;
-	const t3 = isWarm ? 0 : delayDuration;
-	let t4;
-	if ($[9] !== children || $[10] !== content || $[11] !== side || $[12] !== usesShorthand) {
-		t4 = usesShorthand ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(TooltipTrigger, {
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ _jsx(TooltipTrigger, {
 			asChild: true,
 			children
-		}), /* @__PURE__ */ _jsx(TooltipContent, {
-			side,
-			children: content
-		})] }) : children;
-		$[9] = children;
-		$[10] = content;
-		$[11] = side;
-		$[12] = usesShorthand;
-		$[13] = t4;
-	} else {
-		t4 = $[13];
-	}
-	let t5;
-	if ($[14] !== motionOpen || $[15] !== props || $[16] !== setMotionOpen || $[17] !== t3 || $[18] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(TooltipPrimitive.Root, {
-			"data-slot": "tooltip",
-			...props,
-			delayDuration: t3,
-			open: motionOpen,
-			onOpenChange: setMotionOpen,
-			children: t4
-		});
-		$[14] = motionOpen;
-		$[15] = props;
-		$[16] = setMotionOpen;
-		$[17] = t3;
-		$[18] = t4;
-		$[19] = t5;
-	} else {
-		t5 = $[19];
-	}
-	let t6;
-	if ($[20] !== openedWhileWarm || $[21] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(TooltipOpenedWhileWarmContext.Provider, {
-			value: openedWhileWarm,
-			children: t5
-		});
-		$[20] = openedWhileWarm;
-		$[21] = t5;
-		$[22] = t6;
-	} else {
-		t6 = $[22];
-	}
-	let t7;
-	if ($[23] !== motionOpen || $[24] !== t6) {
-		t7 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
-			scope: "tooltip",
-			open: motionOpen,
-			children: t6
-		});
-		$[23] = motionOpen;
-		$[24] = t6;
-		$[25] = t7;
-	} else {
-		t7 = $[25];
-	}
-	const root = t7;
-	let t8;
-	if ($[26] !== hasProvider || $[27] !== root) {
-		t8 = hasProvider ? root : /* @__PURE__ */ _jsx(TooltipProvider, { children: root });
-		$[26] = hasProvider;
-		$[27] = root;
-		$[28] = t8;
-	} else {
-		t8 = $[28];
-	}
-	return t8;
-}
-function TooltipTrigger(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(TooltipPrimitive.Trigger, {
-			"data-slot": "tooltip-trigger",
-			...props
 		});
-		$[2] = props;
-		$[3] = t1;
+		$[0] = children;
+		$[1] = t1;
 	} else {
-		t1 = $[3];
+		t1 = $[1];
 	}
-	return t1;
-}
-/**
-* Renders Arc's bubble: inverted colors, a hairline border, the raised shadow and 15rem of maximum width.
-* @param props - Radix content properties. `sideOffset` defaults to 8px and `collisionPadding` to 12px.
-* @returns The portaled bubble.
-*/
-function TooltipContent(t0) {
-	const $ = _c(22);
-	let children;
-	let className;
-	let props;
-	let t1;
 	let t2;
-	if ($[0] !== t0) {
-		({className, sideOffset: t1, collisionPadding: t2, children, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
-		$[5] = t2;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		t1 = $[4];
-		t2 = $[5];
-	}
-	const sideOffset = t1 === undefined ? TOOLTIP_SIDE_OFFSET_PX : t1;
-	const collisionPadding = t2 === undefined ? TOOLTIP_COLLISION_PADDING_PX : t2;
-	const openedWhileWarm = React.useContext(TooltipOpenedWhileWarmContext);
-	const t3 = props.forceMount;
-	let t4;
-	if ($[6] !== openedWhileWarm) {
-		t4 = () => openedWhileWarm ? TOOLTIP_INSTANT_MOTION : TOOLTIP_MOTION;
-		$[6] = openedWhileWarm;
-		$[7] = t4;
-	} else {
-		t4 = $[7];
-	}
-	let t5;
-	if ($[8] !== className) {
-		t5 = cn("z-50 inline-flex w-fit max-w-60 origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-(--radius-control) border border-[color-mix(in_oklab,var(--background)_14%,var(--foreground))] bg-foreground px-(--space-4) py-(--space-3) font-sans text-sm leading-(--leading-body) font-normal tracking-(--tracking-body) text-background shadow-(--shadow-raised) has-data-[slot=kbd]:pr-(--space-3) **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm", className);
-		$[8] = className;
-		$[9] = t5;
-	} else {
-		t5 = $[9];
-	}
-	let t6;
-	if ($[10] !== children || $[11] !== collisionPadding || $[12] !== props || $[13] !== sideOffset || $[14] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(TooltipPrimitive.Content, {
-			forceMount: true,
-			"data-slot": "tooltip-content",
+	if ($[2] !== align || $[3] !== collisionPadding || $[4] !== content || $[5] !== contentClassName || $[6] !== side || $[7] !== sideOffset) {
+		t2 = /* @__PURE__ */ _jsx(TooltipContent, {
+			side,
+			align,
 			sideOffset,
 			collisionPadding,
-			className: t5,
-			...props,
-			children
-		});
-		$[10] = children;
-		$[11] = collisionPadding;
-		$[12] = props;
-		$[13] = sideOffset;
-		$[14] = t5;
-		$[15] = t6;
-	} else {
-		t6 = $[15];
-	}
-	let t7;
-	if ($[16] !== t4 || $[17] !== t6) {
-		t7 = /* @__PURE__ */ _jsx(ArcFloatingSlot, {
-			motion: t4,
-			children: t6
+			className: contentClassName,
+			children: content
 		});
-		$[16] = t4;
-		$[17] = t6;
-		$[18] = t7;
+		$[2] = align;
+		$[3] = collisionPadding;
+		$[4] = content;
+		$[5] = contentClassName;
+		$[6] = side;
+		$[7] = sideOffset;
+		$[8] = t2;
 	} else {
-		t7 = $[18];
+		t2 = $[8];
 	}
-	let t8;
-	if ($[19] !== props.forceMount || $[20] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(TooltipPrimitive.Portal, {
-			forceMount: true,
-			children: /* @__PURE__ */ _jsx(MotionPresence, {
-				scope: "tooltip",
-				forceMount: t3,
-				children: t7
-			})
+	let t3;
+	if ($[9] !== defaultOpen || $[10] !== delayDuration || $[11] !== onOpenChange || $[12] !== open || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ _jsxs(TooltipRoot, {
+			open,
+			defaultOpen,
+			onOpenChange,
+			delayDuration,
+			children: [t1, t2]
 		});
-		$[19] = props.forceMount;
-		$[20] = t7;
-		$[21] = t8;
+		$[9] = defaultOpen;
+		$[10] = delayDuration;
+		$[11] = onOpenChange;
+		$[12] = open;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
 	} else {
-		t8 = $[21];
+		t3 = $[15];
 	}
-	return t8;
+	return t3;
 }
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Tooltip };

package/dist/constants/alert.d.ts

@@ -1,8 +1,12 @@
 /** Copy and options of Arc's Alert. */
 /** Arc's semantic tones for an alert; `danger` interrupts as an alert, the rest are polite statuses. */
 export type AlertTone = "info" | "success" | "warning" | "danger";
-/** Default Spanish accessible name of the dismiss button. */
+/** Default Spanish accessible name of the dismiss button, followed by the alert's title. */
 export declare const ALERT_DISMISS_LABEL = "Descartar aviso";
+/** Separator between the dismiss label and the title, as in "Descartar aviso: Nueva versión". */
+export declare const ALERT_DISMISS_LABEL_SEPARATOR = ": ";
+/** Vertical travel, in em, of a new title or detail rising in and the old one lifting out. */
+export declare const ALERT_TEXT_OFFSET_EM = 0.3;
 /** Live-region roles: only a danger alert interrupts; every other tone is announced politely. */
 export declare const ALERT_TONE_ROLE: {
     readonly info: "status";

package/dist/constants/alert.js

@@ -1,5 +1,9 @@
-/** Default Spanish accessible name of the dismiss button. */
+/** Default Spanish accessible name of the dismiss button, followed by the alert's title. */
 export const ALERT_DISMISS_LABEL = "Descartar aviso";
+/** Separator between the dismiss label and the title, as in "Descartar aviso: Nueva versión". */
+export const ALERT_DISMISS_LABEL_SEPARATOR = ": ";
+/** Vertical travel, in em, of a new title or detail rising in and the old one lifting out. */
+export const ALERT_TEXT_OFFSET_EM = .3;
 /** Live-region roles: only a danger alert interrupts; every other tone is announced politely. */
 export const ALERT_TONE_ROLE = {
 	info: "status",

package/dist/constants/avatar.d.ts

@@ -1,10 +1,33 @@
-/** Copy and options of Arc's Avatar presence dot. */
+/** Copy and options of Arc's Avatar and Avatar group. */
 /** Presence an avatar can show with Arc's status dot. */
 export type AvatarStatus = "online" | "offline";
+/** Avatar diameters: 24px (`sm`), 32px (`md`), 40px (`lg`) and Arc's 88px profile size (`xl`). */
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+/** Sizes an avatar group accepts for its avatars and overflow chip. */
+export type AvatarGroupSize = "sm" | "md" | "lg";
 /** Default Spanish labels read by assistive technology for each presence. */
 export declare const AVATAR_STATUS_LABEL: {
     readonly online: "En línea";
     readonly offline: "Desconectado";
 };
+/** Separator between the name and the presence in the avatar's accessible name, as in "Ana, En línea". */
+export declare const AVATAR_LABEL_SEPARATOR = ", ";
 /** Scale the status dot grows from and shrinks back to. */
 export declare const AVATAR_STATUS_HIDDEN_SCALE = 0.6;
+/** Diameter of each size in CSS pixels, passed to image adapters as the `sizes` hint. */
+export declare const AVATAR_SIZE_PX: {
+    readonly sm: 24;
+    readonly md: 32;
+    readonly lg: 40;
+    readonly xl: 88;
+};
+/** Default Spanish accessible name of an avatar group, also used in its overflow label. */
+export declare const AVATAR_GROUP_DEFAULT_LABEL = "Integrantes";
+/** Avatars an avatar group shows before the rest collapse into the overflow chip. */
+export declare const AVATAR_GROUP_DEFAULT_MAX = 4;
+/** Word that closes the overflow chip's accessible name, as in "2 integrantes más". */
+export declare const AVATAR_GROUP_OVERFLOW_SUFFIX = "m\u00E1s";
+/** Vertical travel, in em, of the overflow count rolling in the direction it moved. */
+export declare const AVATAR_GROUP_COUNT_OFFSET_EM = 0.4;
+/** Scale a joining or leaving member's slot opens from and closes to. */
+export declare const AVATAR_GROUP_SLOT_HIDDEN_SCALE = 0.9;

package/dist/constants/avatar.js

@@ -3,5 +3,24 @@ export const AVATAR_STATUS_LABEL = {
 	online: "En línea",
 	offline: "Desconectado"
 };
+/** Separator between the name and the presence in the avatar's accessible name, as in "Ana, En línea". */
+export const AVATAR_LABEL_SEPARATOR = ", ";
 /** Scale the status dot grows from and shrinks back to. */
 export const AVATAR_STATUS_HIDDEN_SCALE = .6;
+/** Diameter of each size in CSS pixels, passed to image adapters as the `sizes` hint. */
+export const AVATAR_SIZE_PX = {
+	sm: 24,
+	md: 32,
+	lg: 40,
+	xl: 88
+};
+/** Default Spanish accessible name of an avatar group, also used in its overflow label. */
+export const AVATAR_GROUP_DEFAULT_LABEL = "Integrantes";
+/** Avatars an avatar group shows before the rest collapse into the overflow chip. */
+export const AVATAR_GROUP_DEFAULT_MAX = 4;
+/** Word that closes the overflow chip's accessible name, as in "2 integrantes más". */
+export const AVATAR_GROUP_OVERFLOW_SUFFIX = "más";
+/** Vertical travel, in em, of the overflow count rolling in the direction it moved. */
+export const AVATAR_GROUP_COUNT_OFFSET_EM = .4;
+/** Scale a joining or leaving member's slot opens from and closes to. */
+export const AVATAR_GROUP_SLOT_HIDDEN_SCALE = .9;

package/dist/constants/calendar.d.ts

@@ -22,3 +22,15 @@ export declare const CALENDAR_COPY: {
 };
 /** Months in a year, to compare dates by calendar month. */
 export declare const CALENDAR_MONTHS_PER_YEAR = 12;
+/** Locale of `Calendar` when the consumer does not pick one: Spanish as written in Argentina, weeks start on Monday. */
+export declare const CALENDAR_DEFAULT_LOCALE = "es-AR";
+/**
+ * Languages `Calendar` ships full translations for, including react-day-picker's accessible labels. Any other locale
+ * keeps English labels while month and weekday names come from `Intl`.
+ */
+export declare const CALENDAR_TRANSLATED_LANGUAGE: {
+    readonly spanish: "es";
+    readonly english: "en";
+};
+/** Separator between the language and the region of a BCP 47 locale such as `es-AR`. */
+export declare const CALENDAR_LOCALE_SEPARATOR = "-";

package/dist/constants/calendar.js

@@ -20,3 +20,15 @@ export const CALENDAR_SELECTION_DISC_ATTRIBUTE = "data-selection-disc";
 export const CALENDAR_COPY = { today: "Hoy" };
 /** Months in a year, to compare dates by calendar month. */
 export const CALENDAR_MONTHS_PER_YEAR = 12;
+/** Locale of `Calendar` when the consumer does not pick one: Spanish as written in Argentina, weeks start on Monday. */
+export const CALENDAR_DEFAULT_LOCALE = "es-AR";
+/**
+* Languages `Calendar` ships full translations for, including react-day-picker's accessible labels. Any other locale
+* keeps English labels while month and weekday names come from `Intl`.
+*/
+export const CALENDAR_TRANSLATED_LANGUAGE = {
+	spanish: "es",
+	english: "en"
+};
+/** Separator between the language and the region of a BCP 47 locale such as `es-AR`. */
+export const CALENDAR_LOCALE_SEPARATOR = "-";

package/dist/constants/card.d.ts

@@ -0,0 +1,23 @@
+/** Copy and tuning of Arc's Card and its quick look, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Heading levels a card title can take; Arc renders an `h3`. */
+export type CardHeadingLevel = 2 | 3 | 4;
+/** Heading level of the card title when none is passed. */
+export declare const CARD_DEFAULT_HEADING_LEVEL = 3;
+/** Default Spanish accessible name of the quick look's close button. */
+export declare const CARD_CLOSE_LABEL = "Cerrar vista r\u00E1pida";
+/** Visual duration, in seconds, of the spring that grows the card into the quick look. */
+export declare const CARD_GROW_DURATION_S = 0.3;
+/** Visual duration, in seconds, of the slightly quicker spring that settles the quick look back into the card. */
+export declare const CARD_SETTLE_DURATION_S = 0.26;
+/** Time, in milliseconds, the closing quick look travels above the page before the card takes over again. */
+export declare const CARD_RETURN_MS = 300;
+/** Delay, in seconds, between the words of a new status rising in one after another. */
+export declare const CARD_STATUS_WORD_STAGGER_S = 0.03;
+/** Vertical travel, in em, of a status line rising in and the old one lifting away. */
+export declare const CARD_STATUS_OFFSET_EM = 0.3;
+/** Vertical travel, in pixels, of the quick look details settling in under the copy. */
+export declare const CARD_DETAILS_OFFSET_PX = 6;
+/** Scale the quick look's close button grows from. */
+export declare const CARD_CLOSE_HIDDEN_SCALE = 0.9;
+/** Scale the close button dips to while pressed. */
+export declare const CARD_CLOSE_PRESS_SCALE = 0.94;

package/dist/constants/card.js

@@ -0,0 +1,20 @@
+/** Heading level of the card title when none is passed. */
+export const CARD_DEFAULT_HEADING_LEVEL = 3;
+/** Default Spanish accessible name of the quick look's close button. */
+export const CARD_CLOSE_LABEL = "Cerrar vista rápida";
+/** Visual duration, in seconds, of the spring that grows the card into the quick look. */
+export const CARD_GROW_DURATION_S = .3;
+/** Visual duration, in seconds, of the slightly quicker spring that settles the quick look back into the card. */
+export const CARD_SETTLE_DURATION_S = .26;
+/** Time, in milliseconds, the closing quick look travels above the page before the card takes over again. */
+export const CARD_RETURN_MS = 300;
+/** Delay, in seconds, between the words of a new status rising in one after another. */
+export const CARD_STATUS_WORD_STAGGER_S = .03;
+/** Vertical travel, in em, of a status line rising in and the old one lifting away. */
+export const CARD_STATUS_OFFSET_EM = .3;
+/** Vertical travel, in pixels, of the quick look details settling in under the copy. */
+export const CARD_DETAILS_OFFSET_PX = 6;
+/** Scale the quick look's close button grows from. */
+export const CARD_CLOSE_HIDDEN_SCALE = .9;
+/** Scale the close button dips to while pressed. */
+export const CARD_CLOSE_PRESS_SCALE = .94;

package/dist/constants/carousel.d.ts

@@ -1,16 +1,8 @@
 /** Tuning of `Carousel`, adapted from Arc's carousel (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
-/** Orientation of the slide track; vertical carousels move with the up and down arrows. */
-export type CarouselOrientation = "horizontal" | "vertical";
-/** Arrow keys that move to the previous and next slide along each axis. */
+/** Arrow keys that move to the previous and next slide. */
 export declare const CAROUSEL_KEYS: {
-    readonly horizontal: {
-        readonly previous: "ArrowLeft";
-        readonly next: "ArrowRight";
-    };
-    readonly vertical: {
-        readonly previous: "ArrowUp";
-        readonly next: "ArrowDown";
-    };
+    readonly previous: "ArrowLeft";
+    readonly next: "ArrowRight";
 };
 /** Keys that jump to the first and the last slide, as in Arc. */
 export declare const CAROUSEL_EDGE_KEYS: {
@@ -19,7 +11,8 @@ export declare const CAROUSEL_EDGE_KEYS: {
 };
 /**
  * Focused elements, and composite widgets around them, that own their arrow, Home and End keys instead of moving the
- * carousel: text entry plus the ARIA widgets with their own keyboard navigation.
+ * carousel: text entry plus the ARIA widgets with their own keyboard navigation. The carousel's own indicator tab
+ * list is excluded through {@link CAROUSEL_INDICATORS_SELECTOR}.
  */
 export declare const CAROUSEL_OWN_KEYBOARD_SELECTOR: string;
 /** Length, in px, of a resting indicator dot and of the active pill it stretches into. */
@@ -27,11 +20,36 @@ export declare const CAROUSEL_INDICATOR_LENGTH_PX: {
     readonly dot: 6;
     readonly pill: 22;
 };
-/** Default copy of the slide indicators. */
+/** Width of one slide when the consumer does not pick one, as in Arc: a share of the carousel, capped. */
+export declare const CAROUSEL_DEFAULT_SLIDE_SIZE = "min(80cqw, 340px)";
+/** CSS custom property the slides and the control row read the slide width from. */
+export declare const CAROUSEL_SLIDE_SIZE_PROPERTY = "--carousel-slide";
+/** Default copy of the carousel, in Spanish. */
 export declare const CAROUSEL_COPY: {
+    /** Spoken role of the carousel root, in place of the English "carousel". */
+    readonly roleDescription: "carrusel";
+    /** Spoken role of each slide, in place of the English "slide". */
+    readonly slideRoleDescription: "diapositiva";
+    /** Accessible name of the draggable slide area. */
+    readonly viewportLabel: "Diapositivas";
+    /** Accessible name of the indicator tab list. */
     readonly indicatorsLabel: "Elegir una diapositiva";
+    /** Accessible name of the previous arrow. */
+    readonly previous: "Diapositiva anterior";
+    /** Accessible name of the next arrow. */
+    readonly next: "Diapositiva siguiente";
+    /** Accessible name of the rotation control while slides rotate. */
+    readonly pauseRotation: "Pausar la rotación de diapositivas";
+    /** Accessible name of the rotation control while rotation is paused. */
+    readonly startRotation: "Iniciar la rotación de diapositivas";
     readonly slideLabelPrefix: "Diapositiva";
     readonly slideLabelSeparator: "de";
 };
 /** Root of a carousel; a nested carousel owns the keys pressed inside it. */
 export declare const CAROUSEL_ROOT_SELECTOR = "[data-slot=\"carousel\"]";
+/** The carousel's own indicator tab list, whose arrow, Home and End keys move the carousel. */
+export declare const CAROUSEL_INDICATORS_SELECTOR = "[data-slot=\"carousel-indicators\"]";
+/** Size, in px, of the play and pause icons of the rotation control. */
+export declare const CAROUSEL_ROTATION_ICON_SIZE_PX = 15;
+/** Scale the rotation icon grows from when it swaps between play and pause. */
+export declare const CAROUSEL_ROTATION_ICON_ENTER_SCALE = 0.6;

package/dist/constants/carousel.js

@@ -1,13 +1,8 @@
-/** Arrow keys that move to the previous and next slide along each axis. */
+/** Tuning of `Carousel`, adapted from Arc's carousel (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Arrow keys that move to the previous and next slide. */
 export const CAROUSEL_KEYS = {
-	horizontal: {
-		previous: "ArrowLeft",
-		next: "ArrowRight"
-	},
-	vertical: {
-		previous: "ArrowUp",
-		next: "ArrowDown"
-	}
+	previous: "ArrowLeft",
+	next: "ArrowRight"
 };
 /** Keys that jump to the first and the last slide, as in Arc. */
 export const CAROUSEL_EDGE_KEYS = {
@@ -16,7 +11,8 @@ export const CAROUSEL_EDGE_KEYS = {
 };
 /**
 * Focused elements, and composite widgets around them, that own their arrow, Home and End keys instead of moving the
-* carousel: text entry plus the ARIA widgets with their own keyboard navigation.
+* carousel: text entry plus the ARIA widgets with their own keyboard navigation. The carousel's own indicator tab
+* list is excluded through {@link CAROUSEL_INDICATORS_SELECTOR}.
 */
 export const CAROUSEL_OWN_KEYBOARD_SELECTOR = [
 	"input",
@@ -43,11 +39,36 @@ export const CAROUSEL_INDICATOR_LENGTH_PX = {
 	dot: 6,
 	pill: 22
 };
-/** Default copy of the slide indicators. */
+/** Width of one slide when the consumer does not pick one, as in Arc: a share of the carousel, capped. */
+export const CAROUSEL_DEFAULT_SLIDE_SIZE = "min(80cqw, 340px)";
+/** CSS custom property the slides and the control row read the slide width from. */
+export const CAROUSEL_SLIDE_SIZE_PROPERTY = "--carousel-slide";
+/** Default copy of the carousel, in Spanish. */
 export const CAROUSEL_COPY = {
+	/** Spoken role of the carousel root, in place of the English "carousel". */
+	roleDescription: "carrusel",
+	/** Spoken role of each slide, in place of the English "slide". */
+	slideRoleDescription: "diapositiva",
+	/** Accessible name of the draggable slide area. */
+	viewportLabel: "Diapositivas",
+	/** Accessible name of the indicator tab list. */
 	indicatorsLabel: "Elegir una diapositiva",
+	/** Accessible name of the previous arrow. */
+	previous: "Diapositiva anterior",
+	/** Accessible name of the next arrow. */
+	next: "Diapositiva siguiente",
+	/** Accessible name of the rotation control while slides rotate. */
+	pauseRotation: "Pausar la rotación de diapositivas",
+	/** Accessible name of the rotation control while rotation is paused. */
+	startRotation: "Iniciar la rotación de diapositivas",
 	slideLabelPrefix: "Diapositiva",
 	slideLabelSeparator: "de"
 };
 /** Root of a carousel; a nested carousel owns the keys pressed inside it. */
 export const CAROUSEL_ROOT_SELECTOR = "[data-slot=\"carousel\"]";
+/** The carousel's own indicator tab list, whose arrow, Home and End keys move the carousel. */
+export const CAROUSEL_INDICATORS_SELECTOR = "[data-slot=\"carousel-indicators\"]";
+/** Size, in px, of the play and pause icons of the rotation control. */
+export const CAROUSEL_ROTATION_ICON_SIZE_PX = 15;
+/** Scale the rotation icon grows from when it swaps between play and pause. */
+export const CAROUSEL_ROTATION_ICON_ENTER_SCALE = .6;

package/dist/constants/dialog.d.ts

@@ -1,6 +1,11 @@
-/** Tuning shared by the Arc surfaces of `Dialog` and `AlertDialog`. */
+/** Tuning and default copy shared by the Arc surfaces of `Dialog` and its `alert` mode. */
 /** Vertical offsets, in em, of a changed title or description rising in and lifting out while the dialog is open. */
 export declare const DIALOG_TEXT_SWAP_OFFSET_EM: {
     readonly enter: 0.3;
     readonly exit: -0.3;
 };
+/** Default Spanish copy of Dialog; the close button name can be overridden with `closeLabel`. */
+export declare const DIALOG_DEFAULT_COPY: {
+    /** Accessible name of the built-in close button (Arc's "Close dialog"). */
+    readonly closeLabel: "Cerrar diálogo";
+};