@astra-kit/ui 0.0.0-stage → 0.0.0

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

@@ -0,0 +1,55 @@
+/** 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 declare const CAROUSEL_KEYS: {
+    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: {
+    readonly first: "Home";
+    readonly last: "End";
+};
+/**
+ * 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. 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. */
+export declare const CAROUSEL_INDICATOR_LENGTH_PX: {
+    readonly dot: 6;
+    readonly pill: 22;
+};
+/** 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

@@ -0,0 +1,74 @@
+/** 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 = {
+	previous: "ArrowLeft",
+	next: "ArrowRight"
+};
+/** Keys that jump to the first and the last slide, as in Arc. */
+export const CAROUSEL_EDGE_KEYS = {
+	first: "Home",
+	last: "End"
+};
+/**
+* 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. The carousel's own indicator tab
+* list is excluded through {@link CAROUSEL_INDICATORS_SELECTOR}.
+*/
+export const CAROUSEL_OWN_KEYBOARD_SELECTOR = [
+	"input",
+	"textarea",
+	"select",
+	"[contenteditable]:not([contenteditable=false])",
+	...[
+		"combobox",
+		"grid",
+		"listbox",
+		"menu",
+		"menubar",
+		"radiogroup",
+		"slider",
+		"spinbutton",
+		"tablist",
+		"toolbar",
+		"tree",
+		"treegrid"
+	].map((role) => `[role=${role}]`)
+].join(", ");
+/** Length, in px, of a resting indicator dot and of the active pill it stretches into. */
+export const CAROUSEL_INDICATOR_LENGTH_PX = {
+	dot: 6,
+	pill: 22
+};
+/** 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/checkbox.d.ts

@@ -0,0 +1,17 @@
+/** Tuning of Arc's Checkbox mark, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/**
+ * The check and the dash share three points, so the mark morphs from one into the other instead of swapping. Both
+ * are drawn in the 18 by 18 view box of `CHECKBOX_MARK_VIEW_BOX`.
+ */
+export declare const CHECKBOX_MARK_PATH: {
+    readonly check: "M4.25 9.25 L7.25 12.25 L13.75 5.75";
+    readonly dash: "M4.75 9 L9 9 L13.25 9";
+};
+/** View box of the mark, matching the 18px square it is drawn on. */
+export declare const CHECKBOX_MARK_VIEW_BOX = "0 0 18 18";
+/** Stroke width of the mark, in view box units. */
+export declare const CHECKBOX_MARK_STROKE_WIDTH = 1.75;
+/** Scale the fill starts from when the box is checked and shrinks back to when it is cleared. */
+export declare const CHECKBOX_FILL_HIDDEN_SCALE = 0.6;
+/** Suffix of the id that ties the helper copy to the control through `aria-describedby`. */
+export declare const CHECKBOX_DESCRIPTION_ID_SUFFIX = "description";

package/dist/constants/checkbox.js

@@ -0,0 +1,17 @@
+/** Tuning of Arc's Checkbox mark, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/**
+* The check and the dash share three points, so the mark morphs from one into the other instead of swapping. Both
+* are drawn in the 18 by 18 view box of `CHECKBOX_MARK_VIEW_BOX`.
+*/
+export const CHECKBOX_MARK_PATH = {
+	check: "M4.25 9.25 L7.25 12.25 L13.75 5.75",
+	dash: "M4.75 9 L9 9 L13.25 9"
+};
+/** View box of the mark, matching the 18px square it is drawn on. */
+export const CHECKBOX_MARK_VIEW_BOX = "0 0 18 18";
+/** Stroke width of the mark, in view box units. */
+export const CHECKBOX_MARK_STROKE_WIDTH = 1.75;
+/** Scale the fill starts from when the box is checked and shrinks back to when it is cleared. */
+export const CHECKBOX_FILL_HIDDEN_SCALE = .6;
+/** Suffix of the id that ties the helper copy to the control through `aria-describedby`. */
+export const CHECKBOX_DESCRIPTION_ID_SUFFIX = "description";

package/dist/constants/dialog.d.ts

@@ -0,0 +1,11 @@
+/** 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";
+};

package/dist/constants/dialog.js

@@ -0,0 +1,10 @@
+/** 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 const DIALOG_TEXT_SWAP_OFFSET_EM = {
+	enter: .3,
+	exit: -.3
+};
+/** Default Spanish copy of Dialog; the close button name can be overridden with `closeLabel`. */
+export const DIALOG_DEFAULT_COPY = { 
+/** Accessible name of the built-in close button (Arc's "Close dialog"). */
+closeLabel: "Cerrar diálogo" };

package/dist/constants/dropdown-menu.d.ts

@@ -0,0 +1,10 @@
+import type { ArcFloatingMotion } from "../motion/arc-floating-slot.js";
+/** Gap, in pixels, between the trigger and the menu. */
+export declare const DROPDOWN_MENU_SIDE_OFFSET_PX = 6;
+/** Minimum distance, in pixels, a menu keeps from the viewport edges. */
+export declare const DROPDOWN_MENU_COLLISION_PADDING_PX = 12;
+/**
+ * Arc's menu: it starts 5px toward its trigger at .97, settles on the CSS spring while it fades in quickly, and
+ * leaves halfway back toward the trigger at .985.
+ */
+export declare const DROPDOWN_MENU_MOTION: ArcFloatingMotion;

package/dist/constants/dropdown-menu.js

@@ -0,0 +1,37 @@
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_CSS } from "../motion/arc-tokens.js";
+/** Gap, in pixels, between the trigger and the menu. */
+export const DROPDOWN_MENU_SIDE_OFFSET_PX = 6;
+/** Minimum distance, in pixels, a menu keeps from the viewport edges. */
+export const DROPDOWN_MENU_COLLISION_PADDING_PX = 12;
+/** Arc closes the menu in 130ms on the standard curve. */
+const DROPDOWN_MENU_EXIT_TWEEN = {
+	duration: .13,
+	ease: [...ARC_EASE.standard]
+};
+/**
+* Arc's menu: it starts 5px toward its trigger at .97, settles on the CSS spring while it fades in quickly, and
+* leaves halfway back toward the trigger at .985.
+*/
+export const DROPDOWN_MENU_MOTION = {
+	enterFrom: {
+		travel: 5,
+		scale: .97,
+		opacity: 0
+	},
+	enter: {
+		transform: ARC_SPRING_CSS,
+		opacity: {
+			duration: ARC_DURATION.fast,
+			ease: [...ARC_EASE.enter]
+		}
+	},
+	exitTo: {
+		travel: 2.5,
+		scale: .985,
+		opacity: 0
+	},
+	exit: {
+		transform: DROPDOWN_MENU_EXIT_TWEEN,
+		opacity: DROPDOWN_MENU_EXIT_TWEEN
+	}
+};

package/dist/constants/field.d.ts

@@ -0,0 +1,24 @@
+/** Tuning of the internal labelled field shared by `Input` and `Textarea`. */
+/** Vertical offsets, in em, of changed message words rising in and lifting out. */
+export declare const FIELD_MESSAGE_WORD_OFFSET_EM: {
+    readonly enter: 0.35;
+    readonly exit: -0.35;
+};
+/** Vertical travel, in em, of a digit rolling in or out of a count in the message. */
+export declare const FIELD_MESSAGE_DIGIT_OFFSET_EM = 0.6;
+/** A message word that rolls its digits instead of rising in: counts, decimals, ratios, times and percentages. */
+export declare const FIELD_MESSAGE_NUMBER_PATTERN: RegExp;
+/**
+ * Grouping separators removed before comparing two counts to pick the roll direction: a dot or comma followed by
+ * exactly three digits, so both `1.000` (es) and `1,000` (en) read as a thousand while `1,5` stays a decimal.
+ */
+export declare const FIELD_MESSAGE_GROUP_SEPARATOR_PATTERN: RegExp;
+/** Separators between the components of a time (`0:09`) or a ratio (`3/10`), compared one by one. */
+export declare const FIELD_MESSAGE_COMPONENT_SEPARATOR_PATTERN: RegExp;
+/** Decimal comma of locales such as Spanish, read as a decimal point once the grouping separators are gone. */
+export declare const FIELD_MESSAGE_DECIMAL_COMMA = ",";
+/** Suffixes of the ids that tie the helper and error rows to the control through `aria-describedby`. */
+export declare const FIELD_MESSAGE_ID_SUFFIX: {
+    readonly description: "description";
+    readonly error: "error";
+};

package/dist/constants/field.js

@@ -0,0 +1,24 @@
+/** Tuning of the internal labelled field shared by `Input` and `Textarea`. */
+/** Vertical offsets, in em, of changed message words rising in and lifting out. */
+export const FIELD_MESSAGE_WORD_OFFSET_EM = {
+	enter: .35,
+	exit: -.35
+};
+/** Vertical travel, in em, of a digit rolling in or out of a count in the message. */
+export const FIELD_MESSAGE_DIGIT_OFFSET_EM = .6;
+/** A message word that rolls its digits instead of rising in: counts, decimals, ratios, times and percentages. */
+export const FIELD_MESSAGE_NUMBER_PATTERN = /^\d[\d.,/:]*%?$/;
+/**
+* Grouping separators removed before comparing two counts to pick the roll direction: a dot or comma followed by
+* exactly three digits, so both `1.000` (es) and `1,000` (en) read as a thousand while `1,5` stays a decimal.
+*/
+export const FIELD_MESSAGE_GROUP_SEPARATOR_PATTERN = /[.,](?=\d{3}(?!\d))/g;
+/** Separators between the components of a time (`0:09`) or a ratio (`3/10`), compared one by one. */
+export const FIELD_MESSAGE_COMPONENT_SEPARATOR_PATTERN = /[:/]/;
+/** Decimal comma of locales such as Spanish, read as a decimal point once the grouping separators are gone. */
+export const FIELD_MESSAGE_DECIMAL_COMMA = ",";
+/** Suffixes of the ids that tie the helper and error rows to the control through `aria-describedby`. */
+export const FIELD_MESSAGE_ID_SUFFIX = {
+	description: "description",
+	error: "error"
+};

package/dist/constants/hover-card.d.ts

@@ -0,0 +1,37 @@
+import type { ArcFloatingMotion } from "../motion/arc-floating-slot.js";
+/** Milliseconds of hover before the first card opens. */
+export declare const HOVER_CARD_OPEN_DELAY_MS = 500;
+/** Milliseconds of grace after the pointer leaves, so it can travel into the card. */
+export declare const HOVER_CARD_CLOSE_DELAY_MS = 140;
+/** Moving to another trigger within this many milliseconds of a card closing opens the next one almost at once. */
+export declare const HOVER_CARD_SKIP_WINDOW_MS = 300;
+/**
+ * Even warm, a trigger waits this many milliseconds, so a pointer crossing it on the way into an open card does not
+ * steal the card.
+ */
+export declare const HOVER_CARD_WARM_OPEN_DELAY_MS = 80;
+/** Gap, in px, between the card and its trigger. */
+export declare const HOVER_CARD_SIDE_OFFSET_PX = 8;
+/** Distance, in px, the card keeps from the viewport edges before it flips or shifts. */
+export declare const HOVER_CARD_COLLISION_PADDING_PX = 12;
+/** Delay, in seconds, before the first row of `HoverCardProfile` settles in. */
+export declare const HOVER_CARD_PROFILE_SETTLE_DELAY_S = 0.04;
+/** Stagger, in seconds, between the rows of `HoverCardProfile`. */
+export declare const HOVER_CARD_PROFILE_STAGGER_S = 0.035;
+/** Distance, in px, each row of `HoverCardProfile` rises while it settles in. */
+export declare const HOVER_CARD_PROFILE_SETTLE_DISTANCE_PX = 4;
+/** Rows of `HoverCardProfile`, in the order they settle in. */
+export declare const HOVER_CARD_PROFILE_ROW_ORDER: {
+    readonly head: 0;
+    readonly bio: 1;
+    readonly stats: 2;
+    readonly meta: 3;
+};
+/** Initials shown in place of a missing portrait: the first letter of up to this many words of the name. */
+export declare const HOVER_CARD_PROFILE_INITIALS_LENGTH = 2;
+/** Side, in px, of the square portrait of `HoverCardProfile`. */
+export declare const HOVER_CARD_PROFILE_PORTRAIT_SIZE_PX = 48;
+/** The card grows from the trigger edge: 4px of travel and a .96 scale on one smooth spring, with a leading fade. */
+export declare const HOVER_CARD_MOTION: ArcFloatingMotion;
+/** Within the skip window the next card opens in place and only fades. */
+export declare const HOVER_CARD_INSTANT_MOTION: ArcFloatingMotion;

package/dist/constants/hover-card.js

@@ -0,0 +1,85 @@
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
+/** Milliseconds of hover before the first card opens. */
+export const HOVER_CARD_OPEN_DELAY_MS = 500;
+/** Milliseconds of grace after the pointer leaves, so it can travel into the card. */
+export const HOVER_CARD_CLOSE_DELAY_MS = 140;
+/** Moving to another trigger within this many milliseconds of a card closing opens the next one almost at once. */
+export const HOVER_CARD_SKIP_WINDOW_MS = 300;
+/**
+* Even warm, a trigger waits this many milliseconds, so a pointer crossing it on the way into an open card does not
+* steal the card.
+*/
+export const HOVER_CARD_WARM_OPEN_DELAY_MS = 80;
+/** Gap, in px, between the card and its trigger. */
+export const HOVER_CARD_SIDE_OFFSET_PX = 8;
+/** Distance, in px, the card keeps from the viewport edges before it flips or shifts. */
+export const HOVER_CARD_COLLISION_PADDING_PX = 12;
+/** Delay, in seconds, before the first row of `HoverCardProfile` settles in. */
+export const HOVER_CARD_PROFILE_SETTLE_DELAY_S = .04;
+/** Stagger, in seconds, between the rows of `HoverCardProfile`. */
+export const HOVER_CARD_PROFILE_STAGGER_S = .035;
+/** Distance, in px, each row of `HoverCardProfile` rises while it settles in. */
+export const HOVER_CARD_PROFILE_SETTLE_DISTANCE_PX = 4;
+/** Rows of `HoverCardProfile`, in the order they settle in. */
+export const HOVER_CARD_PROFILE_ROW_ORDER = {
+	head: 0,
+	bio: 1,
+	stats: 2,
+	meta: 3
+};
+/** Initials shown in place of a missing portrait: the first letter of up to this many words of the name. */
+export const HOVER_CARD_PROFILE_INITIALS_LENGTH = 2;
+/** Side, in px, of the square portrait of `HoverCardProfile`. */
+export const HOVER_CARD_PROFILE_PORTRAIT_SIZE_PX = 48;
+const exitTween = {
+	duration: .12,
+	ease: [...ARC_EASE.standard]
+};
+/** The card grows from the trigger edge: 4px of travel and a .96 scale on one smooth spring, with a leading fade. */
+export const HOVER_CARD_MOTION = {
+	enterFrom: {
+		travel: 4,
+		scale: .96,
+		opacity: 0
+	},
+	enter: {
+		transform: ARC_SPRING_SMOOTH,
+		opacity: {
+			duration: ARC_DURATION.fast,
+			ease: [...ARC_EASE.enter]
+		}
+	},
+	exitTo: {
+		travel: 4,
+		scale: .96,
+		opacity: 0
+	},
+	exit: {
+		transform: exitTween,
+		opacity: exitTween
+	}
+};
+/** Within the skip window the next card opens in place and only fades. */
+export const HOVER_CARD_INSTANT_MOTION = {
+	enterFrom: {
+		travel: 0,
+		scale: 1,
+		opacity: 0
+	},
+	enter: {
+		transform: {
+			duration: .14,
+			ease: [...ARC_EASE.enter]
+		},
+		opacity: {
+			duration: .09,
+			ease: [...ARC_EASE.enter]
+		}
+	},
+	exitTo: {
+		travel: 0,
+		scale: 1,
+		opacity: 0
+	},
+	exit: HOVER_CARD_MOTION.exit
+};

package/dist/constants/morph-text.d.ts

@@ -0,0 +1,13 @@
+/** Tuning of the internal letter-by-letter label morph shared by `ActionButton` and `SplitButton`. */
+/** Longest entrance delay a single letter gets, so long labels still finish their morph quickly. */
+export declare const MORPH_TEXT_MAX_GLYPH_DELAY_S = 0.1;
+/**
+ * Shared leading or trailing runs shorter than this are replaced instead of kept, so a one-letter coincidence does
+ * not leave a lonely letter standing while the rest of the label morphs.
+ */
+export declare const MORPH_TEXT_MIN_SHARED_RUN = 2;
+/** Vertical offsets, in pixels, of letters rising in and lifting out of the label. */
+export declare const MORPH_TEXT_GLYPH_OFFSET_PX: {
+    readonly enter: 5;
+    readonly exit: -4;
+};

package/dist/constants/morph-text.js

@@ -0,0 +1,13 @@
+/** Tuning of the internal letter-by-letter label morph shared by `ActionButton` and `SplitButton`. */
+/** Longest entrance delay a single letter gets, so long labels still finish their morph quickly. */
+export const MORPH_TEXT_MAX_GLYPH_DELAY_S = .1;
+/**
+* Shared leading or trailing runs shorter than this are replaced instead of kept, so a one-letter coincidence does
+* not leave a lonely letter standing while the rest of the label morphs.
+*/
+export const MORPH_TEXT_MIN_SHARED_RUN = 2;
+/** Vertical offsets, in pixels, of letters rising in and lifting out of the label. */
+export const MORPH_TEXT_GLYPH_OFFSET_PX = {
+	enter: 5,
+	exit: -4
+};

package/dist/constants/motion.d.ts

@@ -0,0 +1,12 @@
+/** Shares the operating-system preference across CSS-adjacent and JavaScript animations. */
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/** Only true hover pointers get hover lifts; touch devices keep phantom hovers after taps. */
+export declare const HOVER_CAPABLE_QUERY = "(hover: hover) and (pointer: fine)";
+/** Converts Motion's second-based timings to the millisecond timings of Web Animations. */
+export declare const MILLISECONDS_PER_SECOND = 1000;
+/**
+ * Marks a surface while its entrance plays. Its transform makes it the containing block of
+ * fixed descendants and its clip cuts them, so content pinned to the viewport stays hidden
+ * until the surface settles.
+ */
+export declare const MOTION_ENTERING_ATTRIBUTE = "data-motion-entering";

package/dist/constants/motion.js

@@ -0,0 +1,12 @@
+/** Shares the operating-system preference across CSS-adjacent and JavaScript animations. */
+export const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/** Only true hover pointers get hover lifts; touch devices keep phantom hovers after taps. */
+export const HOVER_CAPABLE_QUERY = "(hover: hover) and (pointer: fine)";
+/** Converts Motion's second-based timings to the millisecond timings of Web Animations. */
+export const MILLISECONDS_PER_SECOND = 1e3;
+/**
+* Marks a surface while its entrance plays. Its transform makes it the containing block of
+* fixed descendants and its clip cuts them, so content pinned to the viewport stays hidden
+* until the surface settles.
+*/
+export const MOTION_ENTERING_ATTRIBUTE = "data-motion-entering";

package/dist/constants/pagination.d.ts

@@ -0,0 +1,20 @@
+/** Default Spanish copy and window of Arc's Pagination. */
+/** Default Spanish copy of Pagination; the landmark and arrow copy can be overridden through props. */
+export declare const PAGINATION_DEFAULT_COPY: {
+    /** Accessible name of the navigation landmark (Arc's "Pagination"). */
+    readonly navigationLabel: "Paginación";
+    /** Visible label of the previous arrow. */
+    readonly previousText: "Anterior";
+    /** Visible label of the next arrow. */
+    readonly nextText: "Siguiente";
+    /** Accessible name of the previous arrow while it keeps its default label (Arc's "Previous page"). */
+    readonly previousLabel: "Ir a la página anterior";
+    /** Accessible name of the next arrow while it keeps its default label (Arc's "Next page"). */
+    readonly nextLabel: "Ir a la página siguiente";
+    /** Word before the number in the accessible name of each page (Arc's "Page 3"). */
+    readonly pageLabelPrefix: "Página";
+};
+/** Pages shown at once: Arc's five page window, so the control keeps one width on any screen. */
+export declare const PAGINATION_WINDOW_SIZE = 5;
+/** First page number: pages are 1-based. */
+export declare const PAGINATION_FIRST_PAGE = 1;

package/dist/constants/pagination.js

@@ -0,0 +1,20 @@
+/** Default Spanish copy and window of Arc's Pagination. */
+/** Default Spanish copy of Pagination; the landmark and arrow copy can be overridden through props. */
+export const PAGINATION_DEFAULT_COPY = {
+	/** Accessible name of the navigation landmark (Arc's "Pagination"). */
+	navigationLabel: "Paginación",
+	/** Visible label of the previous arrow. */
+	previousText: "Anterior",
+	/** Visible label of the next arrow. */
+	nextText: "Siguiente",
+	/** Accessible name of the previous arrow while it keeps its default label (Arc's "Previous page"). */
+	previousLabel: "Ir a la página anterior",
+	/** Accessible name of the next arrow while it keeps its default label (Arc's "Next page"). */
+	nextLabel: "Ir a la página siguiente",
+	/** Word before the number in the accessible name of each page (Arc's "Page 3"). */
+	pageLabelPrefix: "Página"
+};
+/** Pages shown at once: Arc's five page window, so the control keeps one width on any screen. */
+export const PAGINATION_WINDOW_SIZE = 5;
+/** First page number: pages are 1-based. */
+export const PAGINATION_FIRST_PAGE = 1;

package/dist/constants/popover.d.ts

@@ -0,0 +1,7 @@
+import type { ArcFloatingMotion } from "../motion/arc-floating-slot.js";
+/** Gap, in px, between the panel and its trigger. */
+export declare const POPOVER_SIDE_OFFSET_PX = 6;
+/** Distance, in px, the panel keeps from the viewport edges before it flips or shifts. */
+export declare const POPOVER_COLLISION_PADDING_PX = 10;
+/** The panel starts 5px toward its trigger at .97, settles on a spring, and leaves faster than it arrives. */
+export declare const POPOVER_MOTION: ArcFloatingMotion;

package/dist/constants/popover.js

@@ -0,0 +1,33 @@
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_CSS } from "../motion/arc-tokens.js";
+/** Gap, in px, between the panel and its trigger. */
+export const POPOVER_SIDE_OFFSET_PX = 6;
+/** Distance, in px, the panel keeps from the viewport edges before it flips or shifts. */
+export const POPOVER_COLLISION_PADDING_PX = 10;
+const exitTween = {
+	duration: ARC_DURATION.fast,
+	ease: [...ARC_EASE.standard]
+};
+/** The panel starts 5px toward its trigger at .97, settles on a spring, and leaves faster than it arrives. */
+export const POPOVER_MOTION = {
+	enterFrom: {
+		travel: 5,
+		scale: .97,
+		opacity: 0
+	},
+	enter: {
+		transform: ARC_SPRING_CSS,
+		opacity: {
+			duration: ARC_DURATION.fast,
+			ease: [...ARC_EASE.enter]
+		}
+	},
+	exitTo: {
+		travel: 2.5,
+		scale: .98,
+		opacity: 0
+	},
+	exit: {
+		transform: exitTween,
+		opacity: exitTween
+	}
+};

package/dist/constants/radio-group.d.ts

@@ -0,0 +1,10 @@
+/** Tuning of Arc's RadioGroup, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Scale the dot shrinks to when its option is cleared, and springs up from when it is chosen. */
+export declare const RADIO_GROUP_DOT_HIDDEN_SCALE = 0.4;
+/** Attribute the group sets once its highlight is placed, which drops the static fallback look of the checked row. */
+export declare const RADIO_GROUP_READY_ATTRIBUTE = "data-ready";
+/** Suffixes of the ids that tie an option row's copy to its radio. */
+export declare const RADIO_GROUP_OPTION_ID_SUFFIX: {
+    readonly label: "label";
+    readonly description: "description";
+};

package/dist/constants/radio-group.js

@@ -0,0 +1,10 @@
+/** Tuning of Arc's RadioGroup, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Scale the dot shrinks to when its option is cleared, and springs up from when it is chosen. */
+export const RADIO_GROUP_DOT_HIDDEN_SCALE = .4;
+/** Attribute the group sets once its highlight is placed, which drops the static fallback look of the checked row. */
+export const RADIO_GROUP_READY_ATTRIBUTE = "data-ready";
+/** Suffixes of the ids that tie an option row's copy to its radio. */
+export const RADIO_GROUP_OPTION_ID_SUFFIX = {
+	label: "label",
+	description: "description"
+};

package/dist/constants/select.d.ts

@@ -0,0 +1,7 @@
+import type { ArcFloatingMotion } from "../motion/arc-floating-slot.js";
+/** Minimum distance, in pixels, the option list keeps from the viewport edges. */
+export declare const SELECT_COLLISION_PADDING_PX = 12;
+/** Default Spanish placeholder, shown while no option is chosen. Arc's English default is "Select an option". */
+export declare const SELECT_DEFAULT_PLACEHOLDER = "Seleccion\u00E1 una opci\u00F3n";
+/** Arc's option list: it grows 6px from the trigger edge at .97 and leaves halfway back at .98, both as tweens. */
+export declare const SELECT_MOTION: ArcFloatingMotion;

package/dist/constants/select.js

@@ -0,0 +1,34 @@
+import { ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
+/** Minimum distance, in pixels, the option list keeps from the viewport edges. */
+export const SELECT_COLLISION_PADDING_PX = 12;
+/** Default Spanish placeholder, shown while no option is chosen. Arc's English default is "Select an option". */
+export const SELECT_DEFAULT_PLACEHOLDER = "Seleccioná una opción";
+const SELECT_ENTER_TWEEN = {
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
+const SELECT_EXIT_TWEEN = {
+	duration: ARC_DURATION.instant,
+	ease: [...ARC_EASE.standard]
+};
+/** Arc's option list: it grows 6px from the trigger edge at .97 and leaves halfway back at .98, both as tweens. */
+export const SELECT_MOTION = {
+	enterFrom: {
+		travel: 6,
+		scale: .97,
+		opacity: 0
+	},
+	enter: {
+		transform: SELECT_ENTER_TWEEN,
+		opacity: SELECT_ENTER_TWEEN
+	},
+	exitTo: {
+		travel: 3,
+		scale: .98,
+		opacity: 0
+	},
+	exit: {
+		transform: SELECT_EXIT_TWEEN,
+		opacity: SELECT_EXIT_TWEEN
+	}
+};