noph-ui 0.47.0 → 0.48.1

package/README.md

@@ -95,6 +95,7 @@ Live demos and usage examples for every component are available on [noph.dev](ht
 
 **Containment**
 [Cards](https://noph.dev/components/card) ·
+[Carousel](https://noph.dev/components/carousel) ·
 [Divider](https://noph.dev/components/divider) ·
 [Sheets](https://noph.dev/components/sheet) ·
 [Lists](https://noph.dev/components/list)

package/dist/carousel/Carousel.svelte

@@ -0,0 +1,410 @@
+<script lang="ts">
+	import { arrowKeyNav } from '../keyboard-nav.js'
+	import { reducedMotion } from '../media.js'
+	import type { Attachment } from 'svelte/attachments'
+	import { carouselMorph, scrollTimelines } from './carouselMorph.js'
+	import { setCarouselContext } from './context.js'
+	import type { CarouselContext, CarouselItemElement, CarouselProps } from './types.js'
+
+	let {
+		variant = 'multi-browse',
+		alignment = 'start',
+		orientation,
+		snap,
+		label,
+		itemLabel = (text, position, total) => `${text}, ${position} of ${total}`,
+		children,
+		scroller = $bindable(),
+		element = $bindable(),
+		onkeydown: userKeydown,
+		...attributes
+	}: CarouselProps = $props()
+
+	const uid = $props.id()
+	let track = $state<HTMLDivElement>()
+	let metrics = $state<HTMLDivElement>()
+	let snapPoints = $state<HTMLDivElement>()
+	let items = $state.raw<CarouselItemElement[]>([])
+
+	const axis = $derived(orientation ?? (variant === 'full-screen' ? 'vertical' : 'horizontal'))
+	const vertical = $derived(axis === 'vertical')
+	const snapping = $derived(snap ?? variant !== 'uncontained')
+
+	const keylined = $derived(variant === 'multi-browse' || variant === 'hero' ? variant : undefined)
+	const morphing = $derived(!!keylined && scrollTimelines && !reducedMotion.current)
+
+	const cropping = $derived(variant === 'uncontained' && !reducedMotion.current)
+
+	const collectItems: Attachment<HTMLElement> = (node) => {
+		const read = () => {
+			const found = [...node.querySelectorAll<CarouselItemElement>('.np-carousel-item')]
+			const same =
+				found.length === items.length && found.every((item, index) => item === items[index])
+			if (!same) items = found
+		}
+		read()
+		let queued = false
+		const observer = new MutationObserver(() => {
+			if (queued) return
+			queued = true
+			queueMicrotask(() => {
+				queued = false
+				read()
+			})
+		})
+		observer.observe(node, { childList: true, subtree: true })
+		return () => observer.disconnect()
+	}
+
+	const morph = $derived(
+		morphing && keylined
+			? carouselMorph({ variant: keylined, alignment, vertical, items, track, metrics, uid })
+			: undefined,
+	)
+
+	const arrowHandler = $derived(arrowKeyNav('.np-carousel-item', axis, { wrap: false }))
+
+	const handleKeydown = (
+		event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement },
+	) => {
+		userKeydown?.(event)
+		if (!event.defaultPrevented) arrowHandler(event)
+	}
+
+	const places = $derived(new Map(items.map((item, index) => [item, index + 1])))
+
+	const handleFocusIn = (event: FocusEvent) => {
+		const item = (event.target as HTMLElement | null)?.closest<HTMLElement>('.np-carousel-item')
+		if (!item) return
+		const behavior = reducedMotion.current ? 'auto' : 'smooth'
+		const place = places.get(item as CarouselItemElement) ?? 0
+		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 })
+	}
+
+	const carouselContext: CarouselContext = {
+		get items() {
+			return items
+		},
+		set items(next) {
+			items = next
+		},
+		position: (item) => places.get(item) ?? 0,
+		get itemLabel() {
+			return itemLabel
+		},
+		set itemLabel(next) {
+			itemLabel = next
+		},
+	}
+	setCarouselContext(carouselContext)
+</script>
+
+<div
+	{...attributes}
+	bind:this={element}
+	role={attributes.role ?? 'group'}
+	aria-roledescription={attributes['aria-roledescription'] ?? 'carousel'}
+	aria-label={label ?? attributes['aria-label']}
+	class={[
+		'np-carousel',
+		`np-carousel-${variant}`,
+		`np-carousel-${axis}`,
+		snapping && 'np-carousel-snap',
+		cropping && 'np-carousel-cropping',
+		attributes.class,
+	]}
+	onkeydown={handleKeydown}
+	onfocusin={handleFocusIn}
+>
+	{#if keylined}
+		<div bind:this={metrics} class="np-carousel-metrics" aria-hidden="true">
+			<span class="np-carousel-metric-item"></span>
+			<span class="np-carousel-metric-small"></span>
+		</div>
+	{/if}
+	<div bind:this={scroller} class="np-carousel-scroller" {@attach morph}>
+		{#if morphing}
+			<div bind:this={snapPoints} class="np-carousel-snap-points" aria-hidden="true">
+				{#each items as item (item)}
+					<span></span>
+				{/each}
+			</div>
+		{/if}
+		<div bind:this={track} class="np-carousel-track" {@attach collectItems}>
+			{@render children?.()}
+		</div>
+	</div>
+</div>
+
+<style>
+	.np-carousel {
+		position: relative;
+		container-type: inline-size;
+		--_pad: 0px;
+		--_gap: var(--np-carousel-item-spacing, 0.5rem);
+		--_cross: var(--np-carousel-cross-padding, 0.5rem);
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-carousel {
+			--_pad: var(--np-carousel-padding, 1rem);
+		}
+	}
+
+	.np-carousel-scroller {
+		display: flex;
+		position: relative;
+		overflow-anchor: none;
+		scrollbar-width: var(--np-carousel-scrollbar-width, none);
+	}
+
+	.np-carousel-horizontal .np-carousel-scroller {
+		overflow-x: auto;
+		overflow-y: clip;
+		touch-action: pan-x pinch-zoom;
+		overscroll-behavior-inline: contain;
+		scroll-padding-inline-start: var(--_pad);
+	}
+
+	.np-carousel-vertical .np-carousel-scroller {
+		flex-direction: column;
+		overflow-x: clip;
+		overflow-y: auto;
+		touch-action: pan-y pinch-zoom;
+		block-size: var(--np-carousel-length, 100%);
+		scroll-padding-block-start: var(--_pad);
+	}
+
+	.np-carousel-snap.np-carousel-horizontal .np-carousel-scroller {
+		scroll-snap-type: x var(--np-carousel-snap-strictness, mandatory);
+	}
+
+	.np-carousel-snap.np-carousel-vertical .np-carousel-scroller {
+		scroll-snap-type: y var(--np-carousel-snap-strictness, mandatory);
+	}
+
+	.np-carousel-track {
+		display: flex;
+		flex: none;
+		align-items: center;
+		gap: var(--_gap);
+		padding-inline: var(--_pad);
+		padding-block: var(--_cross);
+	}
+
+	.np-carousel-vertical .np-carousel-track {
+		flex-direction: column;
+		padding-block: var(--_pad);
+		padding-inline: var(--_cross);
+	}
+
+	.np-carousel-vertical .np-carousel-track :global(.np-carousel-item-aspect) {
+		inline-size: var(--np-carousel-item-width, 12.5rem);
+		block-size: auto;
+	}
+
+	.np-carousel-full-screen {
+		--np-carousel-padding: 0px;
+		--_gap: 0px;
+		--_cross: 0px;
+		--np-carousel-item-container-shape: 0px;
+		--np-carousel-snap-stop: always;
+	}
+
+	.np-carousel-full-screen .np-carousel-track {
+		block-size: 100%;
+	}
+
+	.np-carousel-full-screen .np-carousel-track :global(.np-carousel-item) {
+		inline-size: 100%;
+		block-size: 100%;
+		flex: none;
+	}
+
+	.np-carousel-full-screen.np-carousel-vertical .np-carousel-scroller {
+		overscroll-behavior-block: contain;
+	}
+
+	:global(.np-carousel-morphing) .np-carousel-track {
+		overflow: clip;
+		overflow-clip-margin: var(--_cross);
+	}
+
+	:global(.np-carousel-morphing-inline) .np-carousel-track {
+		inline-size: var(--_track);
+	}
+
+	:global(.np-carousel-morphing-block) .np-carousel-track {
+		block-size: var(--_track);
+	}
+
+	:global(.np-carousel-morphing-inline) .np-carousel-track :global(.np-carousel-item) {
+		flex: 0 0 var(--_item, auto);
+		inline-size: var(--_item, auto);
+	}
+
+	:global(.np-carousel-morphing-block) .np-carousel-track :global(.np-carousel-item) {
+		flex: 0 0 var(--_item, auto);
+		block-size: var(--_item, auto);
+	}
+	@property --np-carousel-clip {
+		syntax: '<length>';
+		inherits: true;
+		initial-value: 0px;
+	}
+	@property --_out {
+		syntax: '<number>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@property --_in {
+		syntax: '<number>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@keyframes np-carousel-edge-out {
+		from {
+			--_out: 0;
+		}
+		to {
+			--_out: 1;
+		}
+	}
+
+	@keyframes np-carousel-edge-in {
+		from {
+			--_in: 1;
+		}
+		to {
+			--_in: 0;
+		}
+	}
+
+	@supports (animation-timeline: view()) {
+		.np-carousel-cropping .np-carousel-track :global(.np-carousel-item) {
+			animation:
+				np-carousel-edge-out linear both,
+				np-carousel-edge-in linear both;
+			animation-range: exit, entry;
+			--_crop-start: calc((1 - var(--_visible, 0.3333)) * var(--_out) * 100%);
+			--_crop-end: calc((1 - var(--_visible, 0.3333)) * var(--_in) * 100%);
+			--_shift: calc(var(--_visible, 0.3333) * (var(--_out) - var(--_in)) * 100%);
+		}
+
+		.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))
+			);
+			--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))
+			);
+			--_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))
+			);
+			--np-carousel-parallax: 0 var(--_shift);
+		}
+
+		.np-carousel-cropping .np-carousel-track :global(.np-carousel-item-label) {
+			inset-inline-start: var(--_crop-start);
+			inset-inline-end: var(--_crop-end);
+		}
+	}
+
+	@supports (animation-timeline: scroll(nearest inline)) {
+		:global(.np-carousel-morphing) .np-carousel-track :global(.np-carousel-item) {
+			animation: var(--_morph, none) linear both;
+		}
+
+		:global(.np-carousel-morphing-inline) .np-carousel-track :global(.np-carousel-item) {
+			animation-timeline: scroll(nearest inline);
+		}
+
+		:global(.np-carousel-morphing-block) .np-carousel-track :global(.np-carousel-item) {
+			animation-timeline: scroll(nearest block);
+		}
+	}
+
+	.np-carousel-snap-points > span {
+		position: absolute;
+		inset-block: 0;
+		inline-size: 1px;
+		pointer-events: none;
+		visibility: hidden;
+	}
+
+	.np-carousel-horizontal .np-carousel-snap-points > span {
+		inset-inline-start: calc(var(--_pad) + var(--_at, 0px));
+	}
+
+	.np-carousel-vertical .np-carousel-snap-points > span {
+		inset-block-start: calc(var(--_pad) + var(--_at, 0px));
+		inset-inline: 0;
+		block-size: 1px;
+	}
+
+	.np-carousel-snap .np-carousel-snap-points > span {
+		scroll-snap-align: start;
+	}
+
+	.np-carousel-snap .np-carousel-track :global(.np-carousel-item) {
+		scroll-snap-align: start;
+	}
+
+	:global(.np-carousel-morphing) .np-carousel-track :global(.np-carousel-item) {
+		scroll-snap-align: none;
+	}
+
+	.np-carousel-metrics {
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline-start: 0;
+		block-size: 0;
+		visibility: hidden;
+		pointer-events: none;
+	}
+
+	.np-carousel-metrics > * {
+		display: block;
+		block-size: 0;
+	}
+
+	.np-carousel-metric-item {
+		inline-size: var(--np-carousel-item-width, 12.5rem);
+	}
+
+	.np-carousel-vertical .np-carousel-metric-item {
+		inline-size: auto;
+		block-size: var(--np-carousel-item-height, 12.5rem);
+	}
+
+	.np-carousel-metric-small {
+		inline-size: 0;
+		min-inline-size: var(--np-carousel-small-item-min-width, 2.5rem);
+		max-inline-size: var(--np-carousel-small-item-max-width, 3.5rem);
+	}
+
+	.np-carousel-vertical .np-carousel-metric-small {
+		min-block-size: var(--np-carousel-small-item-min-width, 2.5rem);
+		max-block-size: var(--np-carousel-small-item-max-width, 3.5rem);
+	}
+</style>

package/dist/carousel/Carousel.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CarouselProps } from './types.ts';
+declare const Carousel: import("svelte").Component<CarouselProps, {}, "scroller" | "element">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/carousel/CarouselItem.svelte

@@ -0,0 +1,300 @@
+<script lang="ts">
+	import '../internal/focus-ring.css'
+	import { pressMorph } from '../press.svelte.js'
+	import Ripple from '../ripple/Ripple.svelte'
+	import { minVisibleFraction } from './carouselStrategy.js'
+	import { getCarouselContext } from './context.js'
+	import type { CarouselItemElement, CarouselItemProps } from './types.js'
+
+	let {
+		type,
+		label,
+		image,
+		aspectRatio,
+		disabled = false,
+		children,
+		element = $bindable(),
+		onpointerdown,
+		style,
+		...attributes
+	}: CarouselItemProps = $props()
+
+	const carouselContext = getCarouselContext()
+	const press = pressMorph()
+
+	const total = $derived(carouselContext.items.length)
+	const position = $derived(element ? carouselContext.position(element) : 0)
+
+	const itemStyle = $derived(
+		[
+			`--_visible:${minVisibleFraction(aspectRatio)}`,
+			aspectRatio != null && `--_aspect:${aspectRatio}`,
+			style,
+		]
+			.filter(Boolean)
+			.join(';'),
+	)
+
+	const accessibleName = $derived(
+		attributes['aria-label'] ??
+			(type !== 'text' && label && position > 0
+				? carouselContext.itemLabel(label, position, total)
+				: undefined),
+	)
+
+	const labelHidden = $derived(accessibleName !== undefined)
+
+	const handlePointerdown = (
+		event: PointerEvent & { currentTarget: EventTarget & CarouselItemElement },
+	) => {
+		onpointerdown?.(event)
+		if (!disabled && type !== 'text') press.press()
+	}
+</script>
+
+{#snippet content()}
+	{#if image}
+		<div class="np-carousel-item-image" style="background-image: url({image})"></div>
+	{/if}
+	{#if children}
+		{@render children()}
+	{/if}
+	{#if label}
+		<span class="np-carousel-item-label" aria-hidden={labelHidden || undefined}>{label}</span>
+	{/if}
+	{#if !disabled && type !== 'text'}
+		<Ripple />
+	{/if}
+{/snippet}
+
+{#if type === 'text'}
+	<div
+		{...attributes}
+		bind:this={element}
+		aria-disabled={disabled}
+		style={itemStyle}
+		class={[
+			'np-carousel-item',
+			'np-carousel-item-plain',
+			aspectRatio != null && 'np-carousel-item-aspect',
+			disabled && 'np-carousel-item-disabled',
+			attributes.class,
+		]}
+	>
+		{@render content()}
+	</div>
+{:else if type === 'button'}
+	<button
+		{...attributes}
+		bind:this={element}
+		type="button"
+		{disabled}
+		aria-disabled={disabled}
+		aria-label={accessibleName}
+		onpointerdown={handlePointerdown}
+		style={itemStyle}
+		class={[
+			'np-carousel-item',
+			press.pressed && 'np-carousel-item-pressed',
+			aspectRatio != null && 'np-carousel-item-aspect',
+			disabled && 'np-carousel-item-disabled',
+			attributes.class,
+		]}
+	>
+		{@render content()}
+	</button>
+{:else if type === 'link'}
+	<a
+		{...attributes}
+		bind:this={element}
+		role="link"
+		aria-disabled={disabled}
+		aria-label={accessibleName}
+		tabindex={disabled ? -1 : undefined}
+		onpointerdown={handlePointerdown}
+		style={itemStyle}
+		class={[
+			'np-carousel-item',
+			press.pressed && 'np-carousel-item-pressed',
+			aspectRatio != null && 'np-carousel-item-aspect',
+			disabled && 'np-carousel-item-disabled',
+			attributes.class,
+		]}
+	>
+		{@render content()}
+	</a>
+{/if}
+
+<style>
+	.np-carousel-item {
+		position: relative;
+		box-sizing: border-box;
+		flex: none;
+		display: block;
+		margin: 0;
+		padding: 0;
+		border: none;
+		font: inherit;
+		color: var(--np-color-on-surface);
+		text-align: start;
+		text-decoration: none;
+		overflow: clip;
+		cursor: pointer;
+		scroll-snap-stop: var(--np-carousel-snap-stop, normal);
+		-webkit-tap-highlight-color: transparent;
+		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));
+		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));
+		--np-ripple-pressed-color: var(
+			--np-carousel-item-state-layer-color,
+			var(--np-color-on-surface)
+		);
+	}
+
+	.np-carousel-item-aspect {
+		aspect-ratio: var(--_aspect);
+		inline-size: auto;
+		block-size: var(--np-carousel-item-height, 12.5rem);
+		align-self: center;
+		flex: none;
+	}
+
+	.np-carousel-item-plain {
+		cursor: unset;
+	}
+
+	.np-carousel-item::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		outline-style: solid;
+		outline-width: var(--np-carousel-item-outline-width, 0);
+		outline-color: var(--np-carousel-item-outline-color, var(--np-color-outline));
+		outline-offset: calc(-1 * var(--np-carousel-item-outline-width, 0px));
+	}
+
+	.np-carousel-item-image {
+		position: absolute;
+		inset: 0;
+		background-position: center;
+		background-size: cover;
+		background-repeat: no-repeat;
+	}
+
+	.np-carousel-item-image,
+	.np-carousel-item > :global(img),
+	.np-carousel-item > :global(picture),
+	.np-carousel-item > :global(video) {
+		translate: var(--np-carousel-parallax, 0);
+	}
+
+	.np-carousel-item > :global(img),
+	.np-carousel-item > :global(picture) {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+		object-fit: cover;
+	}
+
+	.np-carousel-item-label {
+		position: absolute;
+		inset-inline: var(--np-carousel-clip, 0px);
+		inset-block-end: 0;
+		display: block;
+		padding: 1rem;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		pointer-events: none;
+		color: var(
+			--np-carousel-item-label-text-color,
+			light-dark(var(--np-color-surface), var(--np-color-on-surface))
+		);
+		background-image: linear-gradient(
+			to top,
+			var(
+				--np-carousel-item-label-scrim-color,
+				color-mix(in srgb, var(--np-color-scrim) 60%, transparent)
+			),
+			transparent
+		);
+	}
+
+	@media (hover: hover) {
+		.np-carousel-item:is(button, a):not(.np-carousel-item-disabled):hover {
+			box-shadow: var(--np-carousel-item-hover-elevation, var(--np-elevation-1));
+		}
+	}
+
+	.np-carousel-item:focus-visible {
+		outline: none;
+		box-shadow: var(--np-carousel-item-elevation, none);
+	}
+
+	.np-carousel-item:focus-visible::after {
+		outline-width: 3px;
+		outline-color: var(--np-color-secondary);
+		outline-offset: -3px;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-carousel-item:focus-visible::after {
+			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
+		}
+	}
+
+	.np-carousel-item:focus-visible :global(.np-ripple-surface)::before {
+		opacity: var(--np-ripple-focus-opacity, 0.1);
+	}
+
+	.np-carousel-item:is(:active, .np-carousel-item-pressed) {
+		box-shadow: var(--np-carousel-item-elevation, none);
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-carousel-item {
+			transition: border-radius 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));
+		}
+	}
+
+	.np-carousel-item-disabled {
+		opacity: 0.38;
+		cursor: unset;
+		pointer-events: none;
+		box-shadow: none;
+	}
+
+	.np-carousel-item-disabled::after {
+		outline-color: color-mix(in srgb, var(--np-color-outline) 12%, transparent);
+	}
+
+	@media (forced-colors: active) {
+		.np-carousel-item::after {
+			outline-width: 1px;
+			outline-color: CanvasText;
+		}
+
+		.np-carousel-item-disabled::after {
+			outline-color: GrayText;
+		}
+
+		.np-carousel-item-label {
+			background-image: none;
+			background-color: Canvas;
+			color: CanvasText;
+		}
+	}
+</style>