noph-ui 0.52.0 → 0.53.1

package/dist/animation.d.ts

@@ -1,10 +1,5 @@
 import type { Attachment } from 'svelte/attachments';
 export declare const afterTwoFrames: (fn: () => void) => () => void;
-/**
- * Calls `fn` once the element's animations have finished, two frames from now so that transitions
- * just started are counted. `subtree` includes those of its descendants. Endless animations, such
- * as a spinner's, are not waited for.
- */
 export declare const afterExit: (element: Element | undefined, fn: () => void, { subtree }?: {
     subtree?: boolean;
 }) => () => void;
@@ -12,16 +7,9 @@ export declare const parseMotion: (token: string) => {
     duration: number;
     easing: string;
 };
-/** Reads a motion token such as `--np-motion-standard-fast-spatial` off an element's styles. */
 export declare const motionOf: (element: Element, token: string) => {
     duration: number;
     easing: string;
 };
-/**
- * Keeps a dialog or popover on screen while it animates out, in browsers that drop it from the top
- * layer the moment it closes because they cannot transition `overlay`, such as Safari. From the
- * start of closing until its exit animations end it carries `data-np-exiting`, and the rules in
- * `internal/exit.css` keep it shown meanwhile, over the page but not blocking it. `beforetoggle`
- * fires before every way of closing, from Escape and light dismiss to `close()`.
- */
 export declare const exitAnimation: Attachment<HTMLElement>;
+export declare const morphSize: (element: HTMLElement | undefined, apply: () => void, token: string) => void;

package/dist/animation.js

@@ -8,11 +8,6 @@ export const afterTwoFrames = (fn) => {
         cancelAnimationFrame(inner);
     };
 };
-/**
- * Calls `fn` once the element's animations have finished, two frames from now so that transitions
- * just started are counted. `subtree` includes those of its descendants. Endless animations, such
- * as a spinner's, are not waited for.
- */
 export const afterExit = (element, fn, { subtree = false } = {}) => {
     if (!element) {
         fn();
@@ -47,15 +42,7 @@ export const parseMotion = (token) => {
         easing: easing || 'linear',
     };
 };
-/** Reads a motion token such as `--np-motion-standard-fast-spatial` off an element's styles. */
 export const motionOf = (element, token) => parseMotion(getComputedStyle(element).getPropertyValue(token));
-/**
- * Keeps a dialog or popover on screen while it animates out, in browsers that drop it from the top
- * layer the moment it closes because they cannot transition `overlay`, such as Safari. From the
- * start of closing until its exit animations end it carries `data-np-exiting`, and the rules in
- * `internal/exit.css` keep it shown meanwhile, over the page but not blocking it. `beforetoggle`
- * fires before every way of closing, from Escape and light dismiss to `close()`.
- */
 export const exitAnimation = (element) => {
     if (CSS.supports('overlay: auto'))
         return;
@@ -79,3 +66,21 @@ export const exitAnimation = (element) => {
         done();
     };
 };
+export const morphSize = (element, apply, token) => {
+    if (!element || matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        apply();
+        return;
+    }
+    const from = element.getBoundingClientRect();
+    element.getAnimations().forEach((animation) => animation.cancel());
+    apply();
+    const to = element.getBoundingClientRect();
+    const frame = (rect) => ({
+        ...(from.width !== to.width && { width: `${rect.width}px` }),
+        ...(from.height !== to.height && { height: `${rect.height}px` }),
+    });
+    if (from.width === to.width && from.height === to.height)
+        return;
+    element.style.overflow = 'hidden';
+    element.animate([frame(from), frame(to)], motionOf(element, token)).finished.then(() => element.style.removeProperty('overflow'), () => { });
+};

package/dist/button/Button.svelte

@@ -99,6 +99,7 @@
 		bind:this={element}
 		class={[
 			'np-button',
+			'np-focus-ring',
 			size,
 			shapeClass,
 			isToggle && 'toggle',
@@ -134,6 +135,7 @@
 		}}
 		class={[
 			'np-button',
+			'np-focus-ring',
 			size,
 			shapeClass,
 			isToggle && 'toggle',
@@ -294,15 +296,6 @@
 	.outlined-disabled {
 		--_outlined-border-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
 	}
-	.enabled:focus-visible {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: 2px;
-	}
-	.enabled:focus-visible :global(.np-ripple-surface)::before {
-		opacity: var(--np-ripple-focus-opacity, 0.1);
-	}
 	/* Extra small and small buttons keep a 48px tall target around them. */
 	.np-touch {
 		position: absolute;
@@ -311,11 +304,6 @@
 		translate: 0 -50%;
 		height: max(3rem, 100%);
 	}
-	@media (prefers-reduced-motion: no-preference) {
-		.enabled:focus-visible {
-			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
-		}
-	}
 	.text {
 		color: var(--np-text-button-label-text-color, var(--np-color-primary));
 	}

package/dist/button/IconButton.svelte

@@ -89,6 +89,7 @@
 		bind:this={element}
 		class={[
 			'np-icon-button',
+			'np-focus-ring',
 			size,
 			width,
 			variant,
@@ -125,6 +126,7 @@
 		}}
 		class={[
 			'np-icon-button',
+			'np-focus-ring',
 			size,
 			width,
 			shapeClass,
@@ -294,20 +296,6 @@
 		outline-width: 1px;
 		outline-offset: -1px;
 	}
-	.enabled:focus-visible {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: 2px;
-	}
-	.enabled:focus-visible :global(.np-ripple-surface)::before {
-		opacity: var(--np-ripple-focus-opacity, 0.1);
-	}
-	@media (prefers-reduced-motion: no-preference) {
-		.enabled:focus-visible {
-			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
-		}
-	}
 	.text {
 		color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));
 	}
@@ -363,8 +351,7 @@
 		color: var(--np-color-on-surface-variant);
 	}
 
-	.outlined:not(.selected)::after,
-	.outlined-disabled::after {
+	.outlined:not(.selected)::after {
 		content: '';
 		position: absolute;
 		inset: 0;
@@ -379,8 +366,8 @@
 	}
 	.np-touch {
 		position: absolute;
-		height: max(calc(var(--_button-height, 40px) + 8px), 100%);
-		width: max(calc(var(--_button-width, 40px) + 8px), 100%);
+		height: max(3rem, 100%);
+		width: max(3rem, 100%);
 	}
 
 	.np-icon-button-circular-progress {

package/dist/button/SegmentedButton.svelte

@@ -45,7 +45,14 @@
 	{#each options as option, i (i)}
 		{let optionLabel = $derived(option.label ?? `${name}-${i}`)}
 		{let optionValue = $derived(option.value ?? optionLabel)}
-		<label class={['np-segmented-button', option.icon && 'width-icon']}>
+		<label
+			class={[
+				'np-segmented-button',
+				'np-focus-ring-within',
+				'np-focus-ring-inset',
+				option.icon && 'width-icon',
+			]}
+		>
 			<div class="check-icon-wrapper">
 				<div class="check-icon">
 					<CheckIcon />
@@ -257,13 +264,6 @@
 		opacity: var(--np-ripple-focus-opacity, 0.1);
 	}
 
-	.np-segmented-button:has(input:focus-visible) {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: -3px;
-	}
-
 	@media (prefers-reduced-motion: no-preference) {
 		.np-segmented-button {
 			transition: all var(--np-motion-expressive-fast-effects);
@@ -282,8 +282,5 @@
 				width var(--np-motion-expressive-fast-effects),
 				opacity var(--np-motion-expressive-fast-effects);
 		}
-		.np-segmented-button:has(input:focus-visible) {
-			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
-		}
 	}
 </style>

package/dist/card/Card.svelte

@@ -66,6 +66,7 @@
 		aria-disabled={disabled}
 		class={[
 			'np-card-container',
+			'np-focus-ring',
 			`np-card-${variant}`,
 			disabled && 'np-card-disabled',
 			attributes.class,
@@ -82,6 +83,7 @@
 		{disabled}
 		class={[
 			'np-card-container',
+			'np-focus-ring',
 			`np-card-${variant}`,
 			disabled && 'np-card-disabled',
 			attributes.class,
@@ -98,6 +100,7 @@
 		role="link"
 		class={[
 			'np-card-container',
+			'np-focus-ring',
 			`np-card-${variant}`,
 			disabled && 'np-card-disabled',
 			attributes.class,
@@ -111,7 +114,6 @@
 	.np-card-elevated {
 		border-width: 0;
 		box-shadow: var(--np-elevation-1);
-		color: var(--np-color-on-surface);
 		--background-color: var(
 			--np-elevated-card-container-color,
 			var(--np-color-surface-container-low)
@@ -123,7 +125,6 @@
 	}
 	.np-card-filled {
 		border-width: 0;
-		color: var(--np-color-on-surface);
 		--background-color: var(
 			--np-filled-card-container-color,
 			var(--np-color-surface-container-highest)
@@ -134,7 +135,6 @@
 		--background-color: var(--np-color-surface-variant);
 	}
 	.np-card-outlined {
-		color: var(--np-color-on-surface);
 		border: 1px solid var(--np-color-outline-variant);
 		--background-color: var(--np-outlined-card-container-color, var(--np-color-surface));
 		--border-radius: var(--np-outlined-card-container-shape, var(--np-shape-corner-medium));
@@ -159,21 +159,6 @@
 		cursor: pointer;
 	}
 
-	.np-card-container:focus-visible :global(.np-ripple-surface)::before {
-		opacity: var(--np-ripple-focus-opacity, 0.1);
-	}
-
-	.np-card-container:focus-visible {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: 2px;
-	}
-	@media (prefers-reduced-motion: no-preference) {
-		.np-card-container:focus-visible {
-			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
-		}
-	}
 	.np-card-disabled {
 		opacity: 0.38;
 		cursor: unset;
@@ -199,7 +184,6 @@
 		flex: 1 0 auto;
 		min-width: calc(100% - 32px);
 		margin: 1rem;
-		grid-gap: 0.5rem;
 		gap: 0.5rem;
 	}
 

package/dist/card/types.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { ElementKindProps } from '../internal/elementTag.js';
 export type CardElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
-export interface CardProps extends ElementKindProps<CardElement> {
+interface CardBaseProps extends ElementKindProps<CardElement> {
     variant?: 'elevated' | 'filled' | 'outlined';
     image?: string | null;
     /** Describes `image` for assistive technology. Leave it out for a decorative image. */
@@ -10,5 +10,15 @@ export interface CardProps extends ElementKindProps<CardElement> {
     headline?: string | null;
     subhead?: string | null;
     supportingText?: string | null;
-    action?: Snippet<[]>;
 }
+export type CardProps = CardBaseProps & ({
+    action?: undefined;
+} | {
+    action?: Snippet<[]>;
+    type?: 'text' | null;
+    href?: never;
+    onclick?: never;
+    command?: never;
+    popovertarget?: never;
+});
+export {};

package/dist/carousel/Carousel.svelte

@@ -62,13 +62,47 @@
 			: undefined,
 	)
 
-	let arrowHandler = $derived(arrowKeyNav('.np-carousel-item', axis, { wrap: false }))
+	const ITEMS = '.np-carousel-item:is(button, a[href]):not(.np-carousel-item-disabled)'
+	const TABBABLE =
+		'a[href], button, input:not([type="hidden"]), select, textarea, summary, [tabindex], [contenteditable]'
+
+	let arrowHandler = $derived(arrowKeyNav(ITEMS, axis, { wrap: false }))
+
+	const tabbable = (node: HTMLElement) =>
+		node.tabIndex >= 0 &&
+		!node.matches(':disabled') &&
+		!node.closest('[inert]') &&
+		node.checkVisibility({ visibilityProperty: true })
+
+	const leave = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement }) => {
+		const { key, target, currentTarget: carousel } = event
+		if (vertical || (key !== 'ArrowUp' && key !== 'ArrowDown')) return
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+		if (!(target instanceof HTMLElement) || !target.matches(ITEMS)) return
+
+		// A modal dialog makes the rest of the page inert without an [inert] attribute.
+		const modal = carousel.closest('dialog')
+		const scope = modal?.matches(':modal') ? modal : document
+		const nodes = [...scope.querySelectorAll<HTMLElement>(TABBABLE)]
+		const after = (node: HTMLElement) =>
+			!!(carousel.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING)
+		const candidates =
+			key === 'ArrowDown' ? nodes.filter(after) : nodes.filter((node) => !after(node)).reverse()
+		for (const node of candidates) {
+			if (carousel.contains(node) || node.contains(carousel) || !tabbable(node)) continue
+			node.focus()
+			if (document.activeElement !== node) continue
+			event.preventDefault()
+			return
+		}
+	}
 
 	const handleKeydown = (
 		event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement },
 	) => {
 		userKeydown?.(event)
 		if (!event.defaultPrevented) arrowHandler(event)
+		if (!event.defaultPrevented) leave(event)
 	}
 
 	let places = $derived(new Map(items.map((item, index) => [item, index + 1])))
@@ -81,7 +115,10 @@
 		const notch =
 			place > 0 ? (snapPoints?.children[place - 1] as HTMLElement | undefined) : undefined
 		if (notch) notch.scrollIntoView({ block: 'start', inline: 'start', behavior })
-		else item.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior })
+		else {
+			const inline = alignment === 'center' && !vertical ? 'center' : 'nearest'
+			item.scrollIntoView({ block: 'nearest', inline, behavior })
+		}
 	}
 
 	const carouselContext: CarouselContext = {
@@ -113,6 +150,7 @@
 		`np-carousel-${variant}`,
 		`np-carousel-${axis}`,
 		snapping && 'np-carousel-snap',
+		alignment === 'center' && !morphing && 'np-carousel-center',
 		cropping && 'np-carousel-cropping',
 		attributes.class,
 	]}
@@ -302,29 +340,20 @@
 
 		.np-carousel-cropping.np-carousel-horizontal .np-carousel-track :global(.np-carousel-item) {
 			animation-timeline: view(inline), view(inline);
-			clip-path: inset(
-				0 var(--_crop-end) 0 var(--_crop-start) round
-					var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large))
-			);
+			clip-path: inset(0 var(--_crop-end) 0 var(--_crop-start) round var(--_carousel-item-corner));
 			--np-carousel-parallax: var(--_shift) 0;
 		}
 
 		.np-carousel-cropping.np-carousel-horizontal
 			.np-carousel-track:dir(rtl)
 			:global(.np-carousel-item) {
-			clip-path: inset(
-				0 var(--_crop-start) 0 var(--_crop-end) round
-					var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large))
-			);
+			clip-path: inset(0 var(--_crop-start) 0 var(--_crop-end) round var(--_carousel-item-corner));
 			--_shift: calc(var(--_visible, 0.3333) * (var(--_in) - var(--_out)) * 100%);
 		}
 
 		.np-carousel-cropping.np-carousel-vertical .np-carousel-track :global(.np-carousel-item) {
 			animation-timeline: view(block), view(block);
-			clip-path: inset(
-				var(--_crop-start) 0 var(--_crop-end) 0 round
-					var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large))
-			);
+			clip-path: inset(var(--_crop-start) 0 var(--_crop-end) 0 round var(--_carousel-item-corner));
 			--np-carousel-parallax: 0 var(--_shift);
 		}
 
@@ -332,6 +361,20 @@
 			inset-inline-start: var(--_crop-start);
 			inset-inline-end: var(--_crop-end);
 		}
+
+		.np-carousel-cropping.np-carousel-horizontal
+			.np-carousel-track
+			:global(.np-carousel-item::after) {
+			inset-inline-start: var(--_crop-start);
+			inset-inline-end: var(--_crop-end);
+		}
+
+		.np-carousel-cropping.np-carousel-vertical
+			.np-carousel-track
+			:global(.np-carousel-item::after) {
+			inset-block-start: var(--_crop-start);
+			inset-block-end: var(--_crop-end);
+		}
 	}
 
 	@supports (animation-timeline: scroll(nearest inline)) {
@@ -346,6 +389,14 @@
 		:global(.np-carousel-morphing-block) .np-carousel-track :global(.np-carousel-item) {
 			animation-timeline: scroll(nearest block);
 		}
+
+		:global(.np-carousel-morphing-inline) .np-carousel-track :global(.np-carousel-item::after) {
+			inset-inline: var(--np-carousel-clip);
+		}
+
+		:global(.np-carousel-morphing-block) .np-carousel-track :global(.np-carousel-item::after) {
+			inset-block: var(--np-carousel-clip);
+		}
 	}
 
 	.np-carousel-snap-points > span {
@@ -374,6 +425,18 @@
 		scroll-snap-align: start;
 	}
 
+	.np-carousel-snap.np-carousel-center .np-carousel-track :global(.np-carousel-item) {
+		scroll-snap-align: center;
+	}
+
+	.np-carousel-center.np-carousel-horizontal .np-carousel-scroller {
+		scroll-padding-inline: var(--_pad);
+	}
+
+	.np-carousel-center.np-carousel-vertical .np-carousel-scroller {
+		scroll-padding-block: var(--_pad);
+	}
+
 	:global(.np-carousel-morphing) .np-carousel-track :global(.np-carousel-item) {
 		scroll-snap-align: none;
 	}

package/dist/carousel/CarouselItem.svelte

@@ -16,7 +16,6 @@
 		disabled = false,
 		children,
 		element = $bindable(),
-		onpointerdown,
 		style,
 		...attributes
 	}: CarouselItemProps = $props()
@@ -39,20 +38,20 @@
 			.join(';'),
 	)
 
+	let text = $derived(attributes['aria-label'] ?? label ?? imageAlt)
 	let accessibleName = $derived(
-		attributes['aria-label'] ??
-			(tag !== 'div' && label && position > 0
-				? carouselContext.itemLabel(label, position, total)
-				: undefined),
+		tag !== 'div' && text && position > 0
+			? carouselContext.itemLabel(text, position, total)
+			: (attributes['aria-label'] ?? undefined),
 	)
 
 	let labelHidden = $derived(accessibleName !== undefined)
 
-	const handlePointerdown = (
-		event: PointerEvent & { currentTarget: EventTarget & CarouselItemElement },
+	const handleClick = (
+		event: MouseEvent & { currentTarget: EventTarget & CarouselItemElement },
 	) => {
-		onpointerdown?.(event)
-		if (!disabled && tag !== 'div') press.press()
+		if (!disabled) press.press()
+		attributes.onclick?.(event)
 	}
 </script>
 
@@ -100,7 +99,7 @@
 		{disabled}
 		aria-disabled={disabled}
 		aria-label={accessibleName}
-		onpointerdown={handlePointerdown}
+		onclick={handleClick}
 		style={itemStyle}
 		class={[
 			'np-carousel-item',
@@ -120,7 +119,7 @@
 		aria-disabled={disabled}
 		aria-label={accessibleName}
 		tabindex={disabled ? -1 : undefined}
-		onpointerdown={handlePointerdown}
+		onclick={handleClick}
 		style={itemStyle}
 		class={[
 			'np-carousel-item',
@@ -135,6 +134,12 @@
 {/if}
 
 <style>
+	@property --_carousel-item-corner {
+		syntax: '<length-percentage>';
+		inherits: false;
+		initial-value: 0px;
+	}
+
 	.np-carousel-item {
 		position: relative;
 		box-sizing: border-box;
@@ -154,7 +159,11 @@
 		inline-size: var(--np-carousel-item-width, 12.5rem);
 		block-size: var(--np-carousel-item-height, auto);
 		align-self: stretch;
-		border-radius: var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large));
+		--_carousel-item-corner: var(
+			--np-carousel-item-container-shape,
+			var(--np-shape-corner-extra-large)
+		);
+		border-radius: var(--_carousel-item-corner);
 		box-shadow: var(--np-carousel-item-elevation, none);
 		background-color: var(--np-carousel-item-container-color, transparent);
 		--np-ripple-hover-color: var(--np-carousel-item-state-layer-color, var(--np-color-on-surface));
@@ -271,11 +280,14 @@
 
 	@media (prefers-reduced-motion: no-preference) {
 		.np-carousel-item {
-			transition: border-radius var(--np-motion-expressive-fast-effects);
+			transition: --_carousel-item-corner var(--np-motion-expressive-fast-effects);
 		}
 
 		.np-carousel-item:is(button, a):is(:active, .np-carousel-item-pressed) {
-			border-radius: var(--np-carousel-item-pressed-container-shape, var(--np-shape-corner-medium));
+			--_carousel-item-corner: var(
+				--np-carousel-item-pressed-container-shape,
+				var(--np-shape-corner-large)
+			);
 		}
 	}
 

package/dist/carousel/carouselMorph.js

@@ -57,7 +57,7 @@ export const carouselMorph = (options) => (scroller) => {
             sheet.replaceSync('');
             return;
         }
-        const shape = 'var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large))';
+        const shape = 'var(--_carousel-item-corner)';
         const offset = (along) => vertical ? `inset-block-start:${px(along)}` : `inset-inline-start:${px(along)}`;
         const mask = (clip) => vertical ? `inset(${px(clip)} 0 round ${shape})` : `inset(0 ${px(clip)} round ${shape})`;
         const at = (percent) => `${Math.round(percent * 1000) / 1000}%`;

package/dist/carousel/carouselStrategy.js

@@ -103,7 +103,7 @@ const build = (input, sizes, counts) => {
         keylines.push({
             kind,
             size,
-            loc: stride / 2 + (index - focal) * stride,
+            loc: stride / 2 + index * stride,
             locOffset: offset + size / 2,
         });
         offset += size;
@@ -120,7 +120,7 @@ const build = (input, sizes, counts) => {
         loc: keylines[keylines.length - 1].loc + stride,
         locOffset: availableSpace + spacing / 2,
     });
-    const scrollMax = Math.max(0, (itemCount - order.length + focal) * stride);
+    const scrollMax = Math.max(0, (itemCount - order.length) * stride);
     return {
         smallCount: counts.small,
         mediumCount: counts.medium,
@@ -221,38 +221,39 @@ const withOrder = (arrangement, order) => {
         keylines: [keylines[0], ...shifted, keylines[keylines.length - 1]],
     };
 };
+const movableSlots = (arrangement, towards) => {
+    const order = arrangement.keylines.slice(1, -1);
+    const first = order.findIndex((slot) => slot.kind === 'large');
+    if (first < 0)
+        return 0;
+    if (towards === 'start')
+        return first;
+    return order.length - 1 - order.findLastIndex((slot) => slot.kind === 'large');
+};
 export const shiftSteps = (arrangement, towards) => {
     const states = [arrangement];
-    if (arrangement.keylines.length === 0)
-        return states;
-    const order = arrangement.keylines.slice(1, -1);
-    const movable = order.filter((slot) => slot.kind !== 'large').length;
-    if (movable === 0 || !order.some((slot) => slot.kind === 'large'))
-        return states;
-    const working = [...order];
+    const movable = movableSlots(arrangement, towards);
+    const working = arrangement.keylines.slice(1, -1);
     for (let step = 0; step < movable; step += 1) {
         if (towards === 'end') {
             const [moved] = working.splice(working.length - 1, 1);
-            working.splice(working.findIndex((slot) => slot.kind === 'large'), 0, moved);
+            const first = working.findIndex((slot) => slot.kind === 'large');
+            const larger = working.findIndex((slot, index) => index < first && slot.size > moved.size);
+            working.splice(larger < 0 ? first : larger, 0, moved);
         }
         else {
             const [moved] = working.splice(0, 1);
-            working.splice(working.findLastIndex((slot) => slot.kind === 'large') + 1, 0, moved);
+            const last = working.findLastIndex((slot) => slot.kind === 'large');
+            const smaller = working.findIndex((slot, index) => index > last && slot.size < moved.size);
+            working.splice(smaller < 0 ? working.length : smaller, 0, moved);
         }
         states.push(withOrder(arrangement, working));
     }
     return states;
 };
-const shiftDistance = (arrangement) => {
-    const moving = arrangement.keylines
-        .slice(1, -1)
-        .filter((keyline) => keyline.kind !== 'large').length;
-    return moving * arrangement.stride;
-};
 export const morphTrack = (arrangement) => {
-    const shift = shiftDistance(arrangement);
-    const startShift = arrangement.focal > 1 ? shift : 0;
-    const endShift = shift;
+    const startShift = movableSlots(arrangement, 'start') * arrangement.stride;
+    const endShift = movableSlots(arrangement, 'end') * arrangement.stride;
     const scrollMax = arrangement.scrollMax + startShift + endShift;
     return {
         arrangement,
@@ -290,14 +291,11 @@ export const placeItemOnTrack = (track, index, scroll) => {
     return { x: base.x + held, clip: base.clip };
 };
 export const notches = (track) => {
-    const { arrangement, startShift, scrollMax } = track;
-    const uniform = arrangement.keylines.length === 0 || arrangement.stride <= 0;
-    const step = uniform ? Math.max(1, arrangement.stride) : arrangement.stride;
-    const last = uniform ? scrollMax : arrangement.scrollMax;
-    const base = uniform ? 0 : startShift;
+    const { arrangement, scrollMax } = track;
+    const step = Math.max(1, arrangement.stride);
     const out = [0];
-    for (let at = step; at <= last + 0.001; at += step)
-        out.push(base + at);
+    for (let at = step; at <= scrollMax + 0.001; at += step)
+        out.push(at);
     if (scrollMax > out[out.length - 1] + 0.001)
         out.push(scrollMax);
     return out;