noph-ui 0.46.1 → 0.48.0

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>

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

@@ -0,0 +1,5 @@
+import '../internal/focus-ring.css';
+import type { CarouselItemProps } from './types.ts';
+declare const CarouselItem: import("svelte").Component<CarouselItemProps, {}, "element">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/carousel/carouselMorph.d.ts

@@ -0,0 +1,13 @@
+import type { Attachment } from 'svelte/attachments';
+import type { CarouselAlignment, CarouselItemElement } from './types.ts';
+export interface CarouselMorphOptions {
+    variant: 'multi-browse' | 'hero';
+    alignment: CarouselAlignment;
+    vertical: boolean;
+    items: CarouselItemElement[];
+    track: HTMLElement | undefined;
+    metrics: HTMLElement | undefined;
+    uid: string;
+}
+export declare const scrollTimelines: boolean;
+export declare const carouselMorph: (options: CarouselMorphOptions) => Attachment<HTMLElement>;

package/dist/carousel/carouselMorph.js

@@ -0,0 +1,100 @@
+import { arrange, itemKeyframes, morphTrack, notches } from "./carouselStrategy.js";
+export const scrollTimelines = typeof CSS !== 'undefined' && CSS.supports('animation-timeline', 'scroll(nearest inline)');
+const px = (value) => `${Math.round(value * 100) / 100}px`;
+const lengthOf = (value, fallback) => {
+    const parsed = Number.parseFloat(value ?? '');
+    return Number.isFinite(parsed) ? parsed : fallback;
+};
+export const carouselMorph = (options) => (scroller) => {
+    const { items, vertical, track, metrics, uid } = options;
+    if (!track || items.length === 0)
+        return;
+    const name = `np-carousel-morph-${uid}`;
+    const sheet = new CSSStyleSheet();
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    const markers = scroller.querySelector('.np-carousel-snap-points')?.children ?? [];
+    const itemProbe = metrics?.firstElementChild;
+    const smallProbe = metrics?.lastElementChild;
+    for (const [index, item] of items.entries()) {
+        item.style.setProperty('--_morph', `${name}-${index}`);
+    }
+    let built;
+    const measure = () => {
+        const style = getComputedStyle(track);
+        const spacing = lengthOf(vertical ? style.rowGap : style.columnGap, 0);
+        const lead = lengthOf(vertical ? style.paddingBlockStart : style.paddingInlineStart, 0);
+        const trail = lengthOf(vertical ? style.paddingBlockEnd : style.paddingInlineEnd, 0);
+        const port = vertical ? scroller.clientHeight : scroller.clientWidth;
+        const itemSize = itemProbe ? (vertical ? itemProbe.offsetHeight : itemProbe.offsetWidth) : 0;
+        const smallStyle = smallProbe && getComputedStyle(smallProbe);
+        const smallMin = lengthOf(vertical ? smallStyle?.minBlockSize : smallStyle?.minInlineSize, 0);
+        const smallMax = lengthOf(vertical ? smallStyle?.maxBlockSize : smallStyle?.maxInlineSize, Number.POSITIVE_INFINITY);
+        const signature = [port, lead, trail, spacing, itemSize, smallMin, smallMax].join(' ');
+        if (signature === built)
+            return;
+        built = signature;
+        const arrangement = arrange({
+            variant: options.variant,
+            alignment: options.alignment,
+            itemCount: items.length,
+            availableSpace: Math.max(0, port - lead - trail),
+            itemSize,
+            spacing,
+            smallMin,
+            smallMax,
+        });
+        const morph = morphTrack(arrangement);
+        scroller.style.setProperty('--_item', px(arrangement.itemSize));
+        scroller.style.setProperty('--_track', px(morph.trackSize));
+        const snapAt = notches(morph);
+        for (let index = 0; index < markers.length; index += 1) {
+            const marker = markers[index];
+            const offset = snapAt[index];
+            marker.style.setProperty('--_at', offset === undefined ? '' : px(offset));
+            marker.toggleAttribute('hidden', offset === undefined);
+        }
+        if (arrangement.keylines.length === 0 || arrangement.scrollMax <= 0) {
+            sheet.replaceSync('');
+            return;
+        }
+        const shape = 'var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large))';
+        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}%`;
+        const blocks = [];
+        for (const index of items.keys()) {
+            const stops = itemKeyframes(morph, index)
+                .map(({ percent, x, clip }) => `${at(percent)}{${offset(x)};clip-path:${mask(clip)};--np-carousel-clip:${px(clip)}}`)
+                .join('');
+            blocks.push(`@keyframes ${name}-${index}{${stops}}`);
+        }
+        sheet.replaceSync(blocks.join(''));
+    };
+    const axisClass = vertical ? 'np-carousel-morphing-block' : 'np-carousel-morphing-inline';
+    scroller.classList.add('np-carousel-morphing', axisClass);
+    measure();
+    let frame = 0;
+    const resize = new ResizeObserver(() => {
+        if (frame)
+            return;
+        frame = requestAnimationFrame(() => {
+            frame = 0;
+            measure();
+        });
+    });
+    resize.observe(scroller);
+    if (itemProbe)
+        resize.observe(itemProbe);
+    return () => {
+        if (frame)
+            cancelAnimationFrame(frame);
+        resize.disconnect();
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter((one) => one !== sheet);
+        scroller.classList.remove('np-carousel-morphing', axisClass);
+        for (const property of ['--_item', '--_track']) {
+            scroller.style.removeProperty(property);
+        }
+        for (const item of items)
+            item.style.removeProperty('--_morph');
+    };
+};

package/dist/carousel/carouselStrategy.d.ts

@@ -0,0 +1,61 @@
+import type { CarouselAlignment, CarouselVariant } from './types.ts';
+export type CarouselKeylineKind = 'collapsed' | 'small' | 'medium' | 'large';
+export interface CarouselKeyline {
+    kind: CarouselKeylineKind;
+    size: number;
+    loc: number;
+    locOffset: number;
+}
+export interface CarouselKeyframe {
+    percent: number;
+    x: number;
+    clip: number;
+}
+export interface CarouselStrategyInput {
+    variant: CarouselVariant;
+    alignment: CarouselAlignment;
+    itemCount: number;
+    availableSpace: number;
+    itemSize: number;
+    spacing: number;
+    smallMin: number;
+    smallMax: number;
+}
+export interface CarouselArrangement {
+    smallCount: number;
+    mediumCount: number;
+    largeCount: number;
+    smallSize: number;
+    mediumSize: number;
+    largeSize: number;
+    stride: number;
+    itemSize: number;
+    spacing: number;
+    focal: number;
+    keylines: CarouselKeyline[];
+    scrollMax: number;
+    trackSize: number;
+}
+export declare const arrange: (input: CarouselStrategyInput) => CarouselArrangement;
+export declare const placeItem: (arrangement: CarouselArrangement, index: number, scroll: number) => {
+    x: number;
+    clip: number;
+};
+export declare const shiftSteps: (arrangement: CarouselArrangement, towards: "start" | "end") => CarouselArrangement[];
+export interface CarouselTrack {
+    arrangement: CarouselArrangement;
+    atStart: CarouselArrangement[];
+    atEnd: CarouselArrangement[];
+    startShift: number;
+    endShift: number;
+    scrollMax: number;
+    trackSize: number;
+}
+export declare const morphTrack: (arrangement: CarouselArrangement) => CarouselTrack;
+export declare const placeItemOnTrack: (track: CarouselTrack, index: number, scroll: number) => {
+    x: number;
+    clip: number;
+};
+export declare const notches: (track: CarouselTrack) => number[];
+export declare const itemKeyframes: (track: CarouselTrack, index: number, subdivisions?: number) => CarouselKeyframe[];
+export declare const minVisibleFraction: (ratio: number | null | undefined) => number;