beez-ui 2.6.2 → 2.7.1

package/CHANGELOG.md

@@ -4,6 +4,35 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [2.7.1] - 2026-10-16
+
+### Fixed
+
+- `RichLinkEditor` ya no pinta su propio fondo: deja ver la superficie que lo contiene, así dentro de un diálogo o de una tarjeta en modo oscuro deja de verse como un bloque de otro color.
+
+## [2.7.0] - 2026-10-16
+
+### Added
+
+- `beez-ui/motion-tokens` suma los presets de Arc que faltaban: `MOTION_TIMING.instant`, `MOTION_TIMING.standard`, `MOTION_TIMING.considered`, `MOTION_EASE_EXIT`, `MOTION_EASE_STANDARD`, `MOTION_EXIT_SCALE`, `MOTION_TOOLTIP_SCALE` y `MOTION_DIALOG_EXIT_DISTANCE`.
+
+### Changed
+
+- Los tokens de `beez-ui/motion-tokens` toman los valores de los presets de Arc y conservan sus nombres: los springs pasan a `snappy`, `smooth` o `morph` (expresados con `visualDuration` y `bounce` en lugar de `stiffness`, `damping` y `mass`), las duraciones y curvas usan las de Arc y la presión baja a 0.97.
+- `Dialog` y `AlertDialog` entran como el diálogo de Arc: el panel sube 8 px y crece desde 0.96 con un resorte suave mientras aparece, y sale rápido (0.16 s), en lugar de desplegarse desde el centro. La transformación y la opacidad que el panel recibe por `className` o `style` se mantienen durante toda la animación, y reabrirlo mientras sale lo devuelve desde donde está.
+- `Input`, `Textarea`, `InputGroup` y `SelectTrigger` ya no tiemblan al pasar a `aria-invalid="true"`: el error se indica con el color y el mensaje, sin mover el campo.
+- Las opciones de `Select`, `Alert`, `FormMessage` y el ícono de `AnimatedThemeToggler` aparecen con un fundido y una escala breves, sin desenfoque; las opciones del `Select` entran todas juntas, sin escalonarse.
+- El ancho del `Sidebar` cambia con el resorte `smooth` de Arc (0.4 s, sin rebote), más suave que antes.
+
+### Deprecated
+
+- `MOTION_TIMING.centerMorph`, `MOTION_TIMING.centerMorphFold`, `MOTION_EASE_UNFOLD` y `MOTION_CENTER_MORPH_FOLDED_PERCENT`: los diálogos ya no se despliegan desde el centro. Siguen exportados con su valor.
+- `MOTION_TIMING.shake` y `MOTION_INVALID_SHAKE_PX`: los campos inválidos ya no tiemblan. Siguen exportados con su valor.
+
+### Fixed
+
+- Al moverse con el teclado mientras un `Select` o un `DropdownMenu` todavía se está abriendo, el resaltado se desliza hasta el tamaño y la posición finales de la opción y ya no salta al terminar.
+
 ## [2.6.2] - 2026-10-16
 
 ### Fixed

package/README.md

@@ -71,47 +71,67 @@ Los `Sheet` superiores e inferiores limitan su altura al viewport dinámico (`10
 
 ## Movimiento
 
-Las nuevas animaciones usan la dependencia `motion`: `animate` controla la
-reproducción, `hover` y `press` los gestos, y `AnimatePresence` / `usePresence`
-retienen los overlays durante su salida. Los presets y tiempos viven en
-`src/motion/`. No se usan keyframes CSS para estas animaciones.
+El movimiento sigue a [Arc](https://uiarc.dev): explica causa y efecto (qué se abrió,
+qué cambió, de dónde vino) y no decora. Si una animación no explica nada, no está.
+Las animaciones usan la dependencia `motion`: `animate` controla la reproducción,
+`hover` y `press` los gestos, y `AnimatePresence` / `usePresence` retienen los
+overlays durante su salida. Los presets y tiempos viven en `src/motion/`. No se usan
+keyframes CSS para estas animaciones.
 
 `MotionSlot` anima el nodo original del primitive mediante refs compuestos,
-sin agregar wrappers al DOM ni reemplazar sus handlers. Las curvas y springs
-siguen los tokens de [beui motion](https://beui.dev/components/motion):
-
-- `Button` usa la presión de Arc: se comprime a 0.97 con un spring rápido (un poco más en
+sin agregar wrappers al DOM ni reemplazar sus handlers. Los tokens exportados en
+`beez-ui/motion-tokens` toman los valores de los presets de Arc
+(`components/arc/lib/motion-tokens.ts`):
+
+- Springs: `snappy` (0.26 s, rebote 0.12) para presiones, indicadores chicos y cambios de
+  ícono (`SPRING_PRESS`, `SPRING_POP`, `SPRING_CHEVRON`, `SPRING_HIGHLIGHT`, `SPRING_TOOLTIP`);
+  `smooth` (0.4 s, sin rebote) para paneles y todo lo que informa un estado
+  (`SPRING_PANEL`, `SPRING_THUMB`); `morph` (0.42 s, rebote 0.16) para resaltados compartidos
+  (`SPRING_LAYOUT`, `SPRING_TABS`).
+- Duraciones: `instant` 0.12 s, `fast` 0.16 s, `exit` 0.18 s, `enter`/`standard` 0.24 s y
+  `considered` 0.48 s. Las salidas son más cortas que las entradas.
+- Curvas: `MOTION_EASE` (entrada), `MOTION_EASE_EXIT`, `MOTION_EASE_STANDARD` y
+  `MOTION_EASE_IN_OUT`.
+
+Los nombres de los tokens se mantienen entre versiones; los del despliegue desde el centro
+y del temblor de campos inválidos quedan deprecados y conservan su valor.
+
+- `Button` usa la presión de Arc: se comprime a 0.97 con el spring `snappy` (un poco más en
   botones de solo ícono y menos en los anchos), sin escalar los disparadores de menús; su
   texto cambia de ancho con un spring. Los ítems de `Sidebar` y `Tabs` se comprimen a 0.98.
 - `Checkbox` y `RadioGroup` se comprimen a 0.92. La marca del checkbox aparece
-  con pop y trazo (`pathLength`) y sale con blur; el punto del radio aparece con spring.
-- El thumb de `Switch` viaja con un spring pesado y se aplasta mientras se presiona.
-- `Input`, `Textarea`, `InputGroup` y `SelectTrigger` tiemblan al pasar a
-  `aria-invalid="true"`; `FormMessage` entra con blur.
-- `Tooltip` entra con blur, escala y desplazamiento desde el trigger.
-  `Popover`, `HoverCard`, `DropdownMenu` y `Select` escalan desde 0.96 y se revelan
-  con un clip desde la esquina más cercana al trigger.
-- `Dialog` y `AlertDialog` se despliegan desde su centro y se pliegan al cerrar; `Sheet` entra desde su borde con spring
-  y sale con la curva de cajón (0.24 s), sin demorar la siguiente interacción.
+  con pop y trazo (`pathLength`); el punto del radio aparece con spring.
+- El thumb de `Switch` viaja con el spring `smooth`, sin rebote, y se aplasta mientras se presiona.
+- `Input`, `Textarea`, `InputGroup` y `SelectTrigger` no se mueven al pasar a
+  `aria-invalid="true"`: el error se indica con el color y el mensaje. `FormMessage` y
+  `Alert` aparecen con un fundido y una escala breves (desde 0.98), sin desenfoque.
+- `Tooltip` sube 3 px desde 0.97 mientras aparece y sale en el lugar, sin desenfoque.
+  `Popover` y `HoverCard` se acercan desde su trigger con escala y fundido; `DropdownMenu`
+  y `Select` escalan desde 0.96 y se revelan con un clip desde la esquina más cercana al trigger.
+- `Dialog` y `AlertDialog` entran como el diálogo de Arc: el fondo se oscurece en 0.24 s y el
+  panel sube 8 px y crece desde 0.96 con el spring `smooth` mientras aparece en 0.16 s; al
+  cerrar baja 4 px hasta 0.98 y se desvanece en 0.16 s, y una reapertura parte de donde
+  está. `Sheet` entra desde su borde con spring y sale con la curva de cajón (0.24 s), sin
+  demorar la siguiente interacción.
 - `GlideSlot` desliza el indicador activo entre ítems como un `layoutId` compartido:
   la pestaña activa de `Tabs` (fondo o subrayado), la
   página actual de `PaginationContent`, y al navegar con teclado el ítem resaltado de
   `DropdownMenu` y `Select` y la sugerencia activa de `FilterQueryBar`. Con el puntero,
   esos resaltados lo siguen al instante: el propio puntero ya marca la posición.
-- Las superficies flotantes se revelan con un clip que deja 24 px libres fuera de la
+- Las superficies que se revelan con clip dejan 24 px libres fuera de la
   caja, así su borde (`ring`) y su sombra se ven desde el primer frame. Una copia
   transitoria viaja entre ítems y se elimina al llegar, devolviendo el estilo al ítem.
 - El chevron de `SelectTrigger` gira 180° al abrir y los chevrons de `DataTable`
   (grupos y columnas) giran en lugar de cambiar de ícono; CSS define el ángulo final.
-- Las opciones del `Select` entran escalonadas con blur (las primeras 10; el resto
-  solo se desvanece) y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
-- `Sidebar` sigue a [beui animated sidebar](https://beui.dev/components/motion/animated-sidebar):
-  el ancho cambia con un spring entre el panel y el riel de íconos, las etiquetas se
-  desvanecen al colapsar, una píldora compartida sigue al ítem activo y al hovereado, los
-  submenús se despliegan escalonados y en pantallas chicas se abre como hoja con foco atrapado.
-- El ícono de `AnimatedThemeToggler` cambia con blur y escala; el botón de cierre de
-  `Dialog` aparece con un pop demorado.
-- El contenido de `Tabs` entra con un desplazamiento de 4 px y `Alert` entra con blur.
+- Las opciones del `Select` entran todas juntas con un fundido y una escala breves, sin
+  escalonarse ni desenfocarse, y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
+- El ancho de `Sidebar` cambia con el spring `smooth` entre el panel y el riel de íconos, las
+  etiquetas se desvanecen al colapsar, una píldora compartida sigue al ítem activo y al
+  hovereado, los submenús se despliegan escalonados y en pantallas chicas se abre como hoja
+  con foco atrapado.
+- El ícono de `AnimatedThemeToggler` crece desde 0.6 con el spring `snappy` mientras aparece,
+  sin desenfoque; el botón de cierre de `Dialog` aparece con un pop demorado.
+- El contenido de `Tabs` entra con un desplazamiento de 4 px.
   Cards y enlaces responden al hover; el avatar bajo el puntero de un `AvatarGroup` se
   eleva. Un brillo recorre el `Skeleton` desde su `::after` con reproducción nativa,
   sin trabajo por frame en JavaScript.

package/dist/components/alert-dialog.d.ts

@@ -1,7 +1,7 @@
 /**
  * Confirmation dialog on Arc's Dialog surface (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): the same
- * overlay, raised panel, title and description type as `Dialog`, so both read as one family. It keeps beez-ui's center
- * morph entrance, media slot and Arc `Button` actions.
+ * overlay, raised panel, title and description type and dialog transition as `Dialog`, so both read as one family. It
+ * keeps beez-ui's media slot and Arc `Button` actions.
  */
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";

package/dist/components/alert-dialog.js

@@ -2,8 +2,8 @@
 import { c as _c } from "react/compiler-runtime";
 /**
 * Confirmation dialog on Arc's Dialog surface (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): the same
-* overlay, raised panel, title and description type as `Dialog`, so both read as one family. It keeps beez-ui's center
-* morph entrance, media slot and Arc `Button` actions.
+* overlay, raised panel, title and description type and dialog transition as `Dialog`, so both read as one family. It
+* keeps beez-ui's media slot and Arc `Button` actions.
 */
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
@@ -180,7 +180,7 @@ function AlertDialogContent(t0) {
 	let t5;
 	if ($[7] !== props || $[8] !== size || $[9] !== t4) {
 		t5 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t3, /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "center-morph",
+			kind: "dialog",
 			children: /* @__PURE__ */ _jsx(AlertDialogPrimitive.Content, {
 				forceMount: true,
 				"data-slot": "alert-dialog-content",

package/dist/components/dialog-surface.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 * Arc's Dialog surface (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md), shared by `Dialog` and
 * `AlertDialog`: the dimmed, blurred overlay, the raised panel with Arc's surface radius, border and floating shadow,
 * the title and description type, the bordered close button and the text swap that animates a title or description
-* changed while the dialog is open. Internal: the entrance stays beez-ui's center morph, not Arc's rise.
+* changed while the dialog is open. Internal: the panel's entrance and exit are Arc's, played by `MotionSlot`.
 */
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { DIALOG_TEXT_SWAP_OFFSET_EM } from "../constants/dialog.js";

package/dist/components/dialog.d.ts

@@ -1,8 +1,9 @@
 /**
  * Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a focused surface for decisions that need
  * attention, on Arc's overlay, raised panel, title and description type and bordered close button, with Arc's swap of
- * a title or description changed while open. It keeps beez-ui's composable parts, the center morph entrance and the
- * viewport close button placement instead of Arc's single `title`/`description` content and rise entrance.
+ * a title or description changed while open, and Arc's dialog transition: the panel rises and scales in on the smooth
+ * spring and leaves quickly. It keeps beez-ui's composable parts and the viewport close button placement instead of
+ * Arc's single `title`/`description` content.
  */
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
@@ -14,8 +15,8 @@ declare function DialogOverlay({ className, ...props }: React.ComponentProps<typ
 /** Where the dialog close button sits: inside the panel or pinned to the viewport corner. */
 type DialogCloseButtonPlacement = "content" | "viewport";
 /**
- * Renders compact dialog content with viewport-safe scrolling. The panel unfolds from its
- * exact center toward every edge and folds back the same way when it closes.
+ * Renders compact dialog content with viewport-safe scrolling. The panel rises 8px and scales
+ * from 0.96 on Arc's smooth spring while it fades in, and leaves with a short drop and fade.
  * @param props - Primitive properties and optional consumer overrides.
  * @param props.showCloseButton - Whether the dialog renders its own close button.
  * @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner

package/dist/components/dialog.js

@@ -3,8 +3,9 @@ import { c as _c } from "react/compiler-runtime";
 /**
 * Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a focused surface for decisions that need
 * attention, on Arc's overlay, raised panel, title and description type and bordered close button, with Arc's swap of
-* a title or description changed while open. It keeps beez-ui's composable parts, the center morph entrance and the
-* viewport close button placement instead of Arc's single `title`/`description` content and rise entrance.
+* a title or description changed while open, and Arc's dialog transition: the panel rises and scales in on the smooth
+* spring and leaves quickly. It keeps beez-ui's composable parts and the viewport close button placement instead of
+* Arc's single `title`/`description` content.
 */
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
@@ -165,7 +166,7 @@ function DialogOverlay(t0) {
 }
 /**
 * Renders a close button pinned to the viewport corner. It stays hidden while the panel
-* unfolds, because the entrance clip would otherwise cut it with the panel, and
+* enters, because the entrance transform would otherwise carry it along with the panel, and
 * fades in once the panel settles. It hides at once when the dialog starts closing.
 * While hidden it is also `visibility: hidden`, so the dialog's initial focus and the
 * keyboard can never land on a control that cannot be seen.
@@ -202,8 +203,8 @@ function DialogViewportCloseButton() {
 	return t1;
 }
 /**
-* Renders compact dialog content with viewport-safe scrolling. The panel unfolds from its
-* exact center toward every edge and folds back the same way when it closes.
+* Renders compact dialog content with viewport-safe scrolling. The panel rises 8px and scales
+* from 0.96 on Arc's smooth spring while it fades in, and leaves with a short drop and fade.
 * @param props - Primitive properties and optional consumer overrides.
 * @param props.showCloseButton - Whether the dialog renders its own close button.
 * @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner
@@ -300,7 +301,7 @@ function DialogContent(t0) {
 	let t11;
 	if ($[18] !== children || $[19] !== props || $[20] !== t10 || $[21] !== t5 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
 		t11 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "center-morph",
+			kind: "dialog",
 			children: /* @__PURE__ */ _jsxs(DialogPrimitive.Content, {
 				forceMount: true,
 				"data-slot": "dialog-content",

package/dist/components/rich-link-editor.js

@@ -20,7 +20,7 @@ const LINK_REL = "noreferrer";
 * text below 16px, so the editor and the inputs are pinned to 1rem on phones.
 */
 const RICH_LINK_EDITOR_CLASS_NAMES = {
-	editor: "min-h-28 w-full cursor-text border-0 bg-background p-0 leading-[1.65] whitespace-pre-wrap text-foreground [font:inherit] [overflow-wrap:anywhere] focus:outline-0 empty:before:pointer-events-none empty:before:text-muted-foreground/75 empty:before:content-[attr(data-placeholder)] max-md:text-base",
+	editor: "min-h-28 w-full cursor-text border-0 bg-transparent p-0 leading-[1.65] whitespace-pre-wrap text-foreground [font:inherit] [overflow-wrap:anywhere] focus:outline-0 empty:before:pointer-events-none empty:before:text-muted-foreground/75 empty:before:content-[attr(data-placeholder)] max-md:text-base",
 	editorInvalid: "rounded-[0.35rem] shadow-[inset_0_-2px_0_var(--destructive)] outline-0",
 	editorLink: "cursor-pointer rounded-[0.2rem] font-medium text-primary underline decoration-[0.08em] underline-offset-[0.18em] transition-colors hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
 	popover: "gap-3",

package/dist/components/sidebar.js

@@ -20,7 +20,7 @@ import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME } from "../constants/sideba
 import { cn } from "../lib/utils.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { SharedLayoutBg } from "../motion/shared-layout-bg.js";
-import { MOTION_EASE, MOTION_EASE_DRAWER, MOTION_LIST_ITEM_DISTANCE, MOTION_TIMING, SPRING_LAYOUT } from "../motion/tokens.js";
+import { MOTION_EASE, MOTION_EASE_DRAWER, MOTION_LIST_ITEM_DISTANCE, MOTION_TIMING, SPRING_LAYOUT, SPRING_PANEL } from "../motion/tokens.js";
 import { Link } from "./link.js";
 import { SidebarPanelContext } from "./sidebar-panel-context.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -42,15 +42,10 @@ const PANEL_TRANSITION = {
 	ease: MOTION_EASE_DRAWER
 };
 /**
-* The desktop rail settles at a hard zero-width boundary. Keep the spring critically damped so it
-* cannot overshoot, pause against that boundary, and then snap back during the final frame.
+* The desktop rail settles at a hard zero-width boundary, and its width reports the panel state. Arc's smooth spring
+* is critically damped, so it cannot overshoot, pause against that boundary and snap back during the final frame.
 */
-const SIDEBAR_MORPH_TRANSITION = {
-	type: "spring",
-	stiffness: 380,
-	damping: 35,
-	mass: .75
-};
+const SIDEBAR_MORPH_TRANSITION = SPRING_PANEL;
 const LABEL_ENTER_TRANSITION = {
 	duration: MOTION_TIMING.message,
 	delay: .08,

package/dist/motion/arc-tokens.d.ts

@@ -8,11 +8,14 @@ export declare const ARC_DURATION: {
     readonly fast: 0.16;
     readonly exit: 0.18;
     readonly standard: 0.24;
+    readonly considered: 0.48;
 };
-/** Cubic-bezier curves for entrances and color or opacity tweens. */
+/** Cubic-bezier curves: entrances, exits, color or opacity tweens, and moves of elements already on screen. */
 export declare const ARC_EASE: {
     readonly enter: readonly [0.16, 1, 0.3, 1];
+    readonly exit: readonly [0.7, 0, 0.84, 0];
     readonly standard: readonly [0.22, 1, 0.36, 1];
+    readonly inOut: readonly [0.65, 0, 0.35, 1];
 };
 /** Presses, toggles and small indicators: settles fast with a hint of life. */
 export declare const ARC_SPRING_SNAPPY: {
@@ -35,6 +38,7 @@ export declare const ARC_SPRING_MORPH: {
 /** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
 export declare const ARC_STAGGER: {
     readonly char: 0.016;
+    readonly item: 0.035;
 };
 /** Blur radii in pixels for brief content crossfades. */
 export declare const ARC_BLUR: {

package/dist/motion/arc-tokens.js

@@ -7,9 +7,10 @@ export const ARC_DURATION = {
 	instant: .12,
 	fast: .16,
 	exit: .18,
-	standard: .24
+	standard: .24,
+	considered: .48
 };
-/** Cubic-bezier curves for entrances and color or opacity tweens. */
+/** Cubic-bezier curves: entrances, exits, color or opacity tweens, and moves of elements already on screen. */
 export const ARC_EASE = {
 	enter: [
 		.16,
@@ -17,11 +18,23 @@ export const ARC_EASE = {
 		.3,
 		1
 	],
+	exit: [
+		.7,
+		0,
+		.84,
+		0
+	],
 	standard: [
 		.22,
 		1,
 		.36,
 		1
+	],
+	inOut: [
+		.65,
+		0,
+		.35,
+		1
 	]
 };
 /** Presses, toggles and small indicators: settles fast with a hint of life. */
@@ -43,7 +56,10 @@ export const ARC_SPRING_MORPH = {
 	bounce: .16
 };
 /** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
-export const ARC_STAGGER = { char: .016 };
+export const ARC_STAGGER = {
+	char: .016,
+	item: .035
+};
 /** Blur radii in pixels for brief content crossfades. */
 export const ARC_BLUR = {
 	subtle: 2,

package/dist/motion/glide-indicator.d.ts

@@ -55,9 +55,8 @@ export declare const GLIDE_PRESETS: {
         surface: () => "background";
         spring: {
             readonly type: "spring";
-            readonly stiffness: 700;
-            readonly damping: 45;
-            readonly mass: 0.5;
+            readonly visualDuration: 0.26;
+            readonly bounce: 0.12;
         };
         instantOnPointer: true;
     };
@@ -69,9 +68,8 @@ export declare const GLIDE_PRESETS: {
         surface: () => "background";
         spring: {
             readonly type: "spring";
-            readonly stiffness: 700;
-            readonly damping: 45;
-            readonly mass: 0.5;
+            readonly visualDuration: 0.26;
+            readonly bounce: 0.12;
         };
         instantOnPointer: true;
     };

package/dist/motion/glide-indicator.js

@@ -47,42 +47,81 @@ export const GLIDE_PRESETS = {
 export const GLIDE_TARGET_ATTRIBUTE = "data-glide-target";
 /** Marks items whose transitions, including pseudo-element ones, are suspended during a glide. */
 export const GLIDE_FREEZE_ATTRIBUTE = "data-glide-freeze";
-/** Converts a viewport rectangle into the container's scrolling coordinate space. */
+/** Laid-out size of the border box, unaffected by any transform on the element or its ancestors. */
+function layoutSize(element) {
+	const style = getComputedStyle(element);
+	const width = Number.parseFloat(style.width);
+	const height = Number.parseFloat(style.height);
+	if (!Number.isFinite(width) || !Number.isFinite(height)) {
+		return {
+			width: element.offsetWidth,
+			height: element.offsetHeight
+		};
+	}
+	if (style.boxSizing === "border-box") return {
+		width,
+		height
+	};
+	const sum = (...values) => values.reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);
+	return {
+		width: width + sum(style.paddingLeft, style.paddingRight, style.borderLeftWidth, style.borderRightWidth),
+		height: height + sum(style.paddingTop, style.paddingBottom, style.borderTopWidth, style.borderBottomWidth)
+	};
+}
+/**
+* Converts a viewport rectangle into the container's own scrolling coordinate space. A container
+* still scaling in (a menu or listbox entrance) paints everything inside it smaller, so painted
+* distances are divided by that scale to land where absolute positioning places the copy.
+*/
 function toContainerBox(container, rect) {
 	const origin = container.getBoundingClientRect();
+	const layout = layoutSize(container);
+	const scaleX = layout.width > 0 && origin.width > 0 ? origin.width / layout.width : 1;
+	const scaleY = layout.height > 0 && origin.height > 0 ? origin.height / layout.height : 1;
 	return {
-		left: rect.left - origin.left - container.clientLeft + container.scrollLeft,
-		top: rect.top - origin.top - container.clientTop + container.scrollTop,
-		width: rect.width,
-		height: rect.height
+		left: (rect.left - origin.left) / scaleX - container.clientLeft + container.scrollLeft,
+		top: (rect.top - origin.top) / scaleY - container.clientTop + container.scrollTop,
+		width: rect.width / scaleX,
+		height: rect.height / scaleY
 	};
 }
-/** Translation an item's own running entrance adds, read from its computed `matrix()`. */
-function inFlightTranslation(item) {
-	const values = /^matrix\(([^)]+)\)$/.exec(getComputedStyle(item).transform);
+/** Scale and translation an item's own running entrance adds, read from its computed `matrix()`. */
+function inFlightTransform(item) {
+	const style = getComputedStyle(item);
+	const values = /^matrix\(([^)]+)\)$/.exec(style.transform);
+	const [originX = 0, originY = 0] = style.transformOrigin.split(" ").map(Number.parseFloat);
 	if (!values) return {
+		scaleX: 1,
+		scaleY: 1,
 		x: 0,
-		y: 0
+		y: 0,
+		originX,
+		originY
 	};
 	const parts = values[1].split(",").map(Number.parseFloat);
 	return {
+		scaleX: parts[0] || 1,
+		scaleY: parts[3] || 1,
 		x: parts[4] ?? 0,
-		y: parts[5] ?? 0
+		y: parts[5] ?? 0,
+		originX,
+		originY
 	};
 }
 /**
-* Measures the highlight: the item box, or its positioned `::after` bar for line variants.
-* An item still sliding into place (staggered Select options) is measured where it will
-* settle, so the highlight does not land offset and jump when the entrance ends.
+* Measures the highlight in the container's coordinates: the item box, or its positioned `::after`
+* bar for line variants. An item still entering (Select options settle from a slight scale) is
+* measured where it will rest, so the highlight neither lands undersized nor jumps when it ends.
 */
-function highlightBox(item, surface) {
-	const box = item.getBoundingClientRect();
-	const offset = inFlightTranslation(item);
+function highlightBox(container, item, surface) {
+	const painted = toContainerBox(container, item.getBoundingClientRect());
+	const motion = inFlightTransform(item);
+	// The entrance scales around the transform origin, so the resting corner sits that far back.
 	const rect = {
-		left: box.left - offset.x,
-		top: box.top - offset.y,
-		width: box.width,
-		height: box.height
+		left: painted.left - motion.x - motion.originX * (1 - motion.scaleX),
+		top: painted.top - motion.y - motion.originY * (1 - motion.scaleY),
+		width: painted.width / motion.scaleX,
+		height: painted.height / motion.scaleY
 	};
 	if (surface === "background") return rect;
 	const pseudo = getComputedStyle(item, "::after");
@@ -201,13 +240,13 @@ export function attachGlideIndicator(container, preset) {
 	/** Starts, or redirects, the glide from the previous highlight to the new active item. */
 	function glide(from, to) {
 		const surface = preset.surface(container);
-		const origin = overlay ? overlay.getBoundingClientRect() : highlightBox(from, surface);
+		const start = overlay ? toContainerBox(container, overlay.getBoundingClientRect()) : highlightBox(container, from, surface);
 		settle();
 		// The previous item drops its highlight instantly: the copy is what leaves it.
 		freezeTransitions(from)();
 		// Read the target's settled paint before any transition has a chance to start.
 		const thawTarget = freezeTransitions(to);
-		const destination = toContainerBox(container, highlightBox(to, surface));
+		const destination = highlightBox(container, to, surface);
 		const paint = highlightPaint(to, surface);
 		if (destination.width === 0 || destination.height === 0) {
 			thawTarget();
@@ -227,7 +266,6 @@ export function attachGlideIndicator(container, preset) {
 			zIndex: "-1",
 			margin: "0"
 		});
-		const start = toContainerBox(container, origin);
 		container.prepend(overlay);
 		releaseTarget = hideTarget(to, surface, thawTarget);
 		animation = animate(overlay, {