noph-ui 0.47.0 → 0.48.1

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;

package/dist/carousel/carouselStrategy.js

@@ -0,0 +1,344 @@
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const slotTargets = (input) => {
+    const { availableSpace, itemSize, spacing, smallMin, smallMax, variant } = input;
+    const large = Math.min((variant === 'hero' ? itemSize * 2 : itemSize) + spacing, availableSpace);
+    const smallLow = smallMin + spacing;
+    const smallHigh = smallMax + spacing;
+    const small = clamp((variant === 'hero' ? large : itemSize + spacing) / 3, smallLow, smallHigh);
+    return { small, medium: (large + small) / 2, large, smallLow, smallHigh };
+};
+const descending = (from, to) => {
+    const out = [];
+    for (let n = to; n >= from; n -= 1)
+        out.push(n);
+    return out;
+};
+const candidateCounts = (input, targets) => {
+    const { variant, alignment, availableSpace, spacing, smallMin } = input;
+    const centred = alignment === 'center';
+    if (variant === 'hero') {
+        const noRoom = availableSpace < (smallMin + spacing) * 2;
+        return {
+            smalls: noRoom ? [0] : [centred ? 2 : 1],
+            mediums: centred ? [0, 2] : [0, 1],
+            larges: descending(1, Math.max(1, Math.floor(availableSpace / targets.large))),
+        };
+    }
+    const flank = centred ? 2 : 1;
+    const smalls = [flank];
+    const mediums = [flank, 0];
+    const leastLargeSpace = availableSpace - (targets.medium + targets.small) * flank;
+    const budget = Math.max(1, input.itemCount - 2 * flank);
+    const low = Math.max(1, Math.min(Math.floor(leastLargeSpace / targets.large), budget));
+    const high = Math.max(low, Math.min(Math.ceil(availableSpace / targets.large), budget));
+    return { smalls, mediums, larges: descending(low, high) };
+};
+const fit = (availableSpace, targets, counts) => {
+    const share = counts.small + counts.medium / 2;
+    const divisor = counts.large + counts.medium / 2;
+    if (divisor <= 0)
+        return undefined;
+    const solve = (small) => (availableSpace - small * share) / divisor;
+    let small = clamp(targets.small, targets.smallLow, targets.smallHigh);
+    let large = solve(small);
+    if (large > targets.large && share > 0) {
+        small = clamp((availableSpace - targets.large * divisor) / share, targets.smallLow, targets.smallHigh);
+        large = solve(small);
+    }
+    if (large < small)
+        return undefined;
+    const medium = (large + small) / 2;
+    const cost = Math.abs(large - targets.large) * counts.large +
+        Math.abs(medium - targets.medium) * counts.medium +
+        Math.abs(small - targets.small) * counts.small;
+    return { small, medium, large, cost };
+};
+const uniform = (input) => {
+    const { availableSpace, itemSize, spacing, itemCount } = input;
+    const count = Math.max(0, itemCount);
+    const large = Math.max(spacing, Math.min(itemSize + spacing, availableSpace) || availableSpace);
+    const scrollMax = Math.max(0, count * large - availableSpace);
+    return {
+        smallCount: 0,
+        mediumCount: 0,
+        largeCount: count,
+        smallSize: large,
+        mediumSize: large,
+        largeSize: large,
+        stride: large,
+        itemSize: Math.max(0, large - spacing),
+        spacing,
+        focal: 0,
+        keylines: [],
+        scrollMax,
+        trackSize: availableSpace + scrollMax,
+    };
+};
+const build = (input, sizes, counts) => {
+    const { alignment, spacing, availableSpace, itemCount } = input;
+    const order = [];
+    const push = (kind, count) => {
+        for (let i = 0; i < count; i += 1)
+            order.push(kind);
+    };
+    if (alignment === 'center') {
+        push('small', counts.small / 2);
+        push('medium', counts.medium / 2);
+        push('large', counts.large);
+        push('medium', counts.medium / 2);
+        push('small', counts.small / 2);
+    }
+    else {
+        push('large', counts.large);
+        push('medium', counts.medium);
+        push('small', counts.small);
+    }
+    const focal = order.indexOf('large');
+    const stride = sizes.large;
+    const sizeOf = (kind) => kind === 'large' ? sizes.large : kind === 'medium' ? sizes.medium : sizes.small;
+    const keylines = [];
+    let offset = 0;
+    for (const [index, kind] of order.entries()) {
+        const size = sizeOf(kind);
+        keylines.push({
+            kind,
+            size,
+            loc: stride / 2 + (index - focal) * stride,
+            locOffset: offset + size / 2,
+        });
+        offset += size;
+    }
+    keylines.unshift({
+        kind: 'collapsed',
+        size: spacing,
+        loc: keylines[0].loc - stride,
+        locOffset: -spacing / 2,
+    });
+    keylines.push({
+        kind: 'collapsed',
+        size: spacing,
+        loc: keylines[keylines.length - 1].loc + stride,
+        locOffset: availableSpace + spacing / 2,
+    });
+    const scrollMax = Math.max(0, (itemCount - order.length + focal) * stride);
+    return {
+        smallCount: counts.small,
+        mediumCount: counts.medium,
+        largeCount: counts.large,
+        smallSize: sizes.small,
+        mediumSize: sizes.medium,
+        largeSize: sizes.large,
+        stride,
+        itemSize: Math.max(0, sizes.large - spacing),
+        spacing,
+        focal: focal + 1,
+        keylines,
+        scrollMax,
+        trackSize: availableSpace + scrollMax,
+    };
+};
+export const arrange = (input) => {
+    if (input.variant === 'uncontained' || input.variant === 'full-screen')
+        return uniform(input);
+    if (input.availableSpace <= 0 || input.itemCount <= 0)
+        return uniform(input);
+    if (input.itemCount * (input.itemSize + input.spacing) - input.spacing <= input.availableSpace) {
+        return uniform(input);
+    }
+    const targets = slotTargets(input);
+    if (!(targets.large > 0))
+        return uniform(input);
+    const { smalls, mediums, larges } = candidateCounts(input, targets);
+    let best;
+    for (const large of larges) {
+        for (const medium of mediums) {
+            for (const small of smalls) {
+                const counts = { small, medium, large };
+                if (small + medium + large > input.itemCount)
+                    continue;
+                const sizes = fit(input.availableSpace, targets, counts);
+                if (!sizes)
+                    continue;
+                if (best && sizes.cost >= best.sizes.cost)
+                    continue;
+                best = { sizes, counts };
+            }
+        }
+    }
+    if (!best && input.alignment === 'center')
+        return arrange({ ...input, alignment: 'start' });
+    if (!best)
+        return uniform(input);
+    if (best.counts.small === 0 && best.counts.medium === 0 && input.itemCount > best.counts.large) {
+        const counts = { ...best.counts, small: 1 };
+        const sizes = fit(input.availableSpace, targets, counts);
+        if (sizes)
+            best = { sizes, counts };
+    }
+    const arrangement = build(input, best.sizes, best.counts);
+    return arrangement.scrollMax > 0 ? arrangement : uniform(input);
+};
+export const placeItem = (arrangement, index, scroll) => {
+    const { keylines, stride, spacing, itemSize } = arrangement;
+    if (keylines.length === 0)
+        return { x: 0, clip: 0 };
+    const unmorphed = index * stride + stride / 2 - scroll;
+    const first = keylines[0];
+    const last = keylines[keylines.length - 1];
+    const atAnchor = (keyline) => ({
+        x: keyline.locOffset - keyline.loc,
+        clip: Math.max(0, (itemSize - (keyline.size - spacing)) / 2),
+    });
+    if (unmorphed <= first.loc)
+        return atAnchor(first);
+    if (unmorphed >= last.loc)
+        return atAnchor(last);
+    const slot = clamp(Math.ceil((unmorphed - first.loc) / stride), 1, keylines.length - 1);
+    const low = keylines[slot - 1];
+    const high = keylines[slot];
+    const ratio = (unmorphed - low.loc) / stride;
+    const size = low.size + (high.size - low.size) * ratio;
+    const centre = low.locOffset + (high.locOffset - low.locOffset) * ratio;
+    return { x: centre - unmorphed, clip: Math.max(0, (itemSize - (size - spacing)) / 2) };
+};
+const withOrder = (arrangement, order) => {
+    const { keylines } = arrangement;
+    const slots = keylines.slice(1, -1);
+    const shifted = [];
+    let offset = 0;
+    for (const [index, slot] of order.entries()) {
+        shifted.push({
+            kind: slot.kind,
+            size: slot.size,
+            loc: slots[index].loc,
+            locOffset: offset + slot.size / 2,
+        });
+        offset += slot.size;
+    }
+    return {
+        ...arrangement,
+        focal: order.findIndex((slot) => slot.kind === 'large') + 1,
+        keylines: [keylines[0], ...shifted, keylines[keylines.length - 1]],
+    };
+};
+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];
+    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);
+        }
+        else {
+            const [moved] = working.splice(0, 1);
+            working.splice(working.findLastIndex((slot) => slot.kind === 'large') + 1, 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 scrollMax = arrangement.scrollMax + startShift + endShift;
+    return {
+        arrangement,
+        atStart: startShift > 0 ? shiftSteps(arrangement, 'start') : [arrangement],
+        atEnd: shiftSteps(arrangement, 'end'),
+        startShift,
+        endShift,
+        scrollMax,
+        trackSize: arrangement.trackSize - arrangement.scrollMax + scrollMax,
+    };
+};
+const mix = (from, to, ratio) => from + (to - from) * ratio;
+export const placeItemOnTrack = (track, index, scroll) => {
+    const { arrangement, atStart, atEnd, startShift, endShift } = track;
+    if (arrangement.keylines.length === 0)
+        return placeItem(arrangement, index, scroll);
+    const traversal = clamp(scroll - startShift, 0, arrangement.scrollMax);
+    const held = scroll - traversal;
+    const along = (steps, ratio) => {
+        const at = clamp(ratio, 0, 1) * (steps.length - 1);
+        const step = Math.min(Math.floor(at), steps.length - 2);
+        const low = placeItem(steps[step], index, traversal);
+        const high = placeItem(steps[step + 1], index, traversal);
+        const frac = at - step;
+        return { x: mix(low.x, high.x, frac) + held, clip: mix(low.clip, high.clip, frac) };
+    };
+    if (startShift > 0 && scroll < startShift && atStart.length > 1) {
+        return along(atStart, 1 - scroll / startShift);
+    }
+    const endFrom = startShift + arrangement.scrollMax;
+    if (endShift > 0 && scroll > endFrom && atEnd.length > 1) {
+        return along(atEnd, (scroll - endFrom) / endShift);
+    }
+    const base = placeItem(arrangement, index, traversal);
+    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 out = [0];
+    for (let at = step; at <= last + 0.001; at += step)
+        out.push(base + at);
+    if (scrollMax > out[out.length - 1] + 0.001)
+        out.push(scrollMax);
+    return out;
+};
+export const itemKeyframes = (track, index, subdivisions = 6) => {
+    const { arrangement, startShift, endShift, scrollMax } = track;
+    const { keylines, stride } = arrangement;
+    if (keylines.length === 0 || scrollMax <= 0)
+        return [];
+    const offsets = new Set([0, scrollMax, startShift, startShift + arrangement.scrollMax]);
+    for (const keyline of keylines) {
+        const at = startShift + index * stride + stride / 2 - keyline.loc;
+        if (at > 0 && at < scrollMax)
+            offsets.add(at);
+    }
+    const walk = (from, span, steps) => {
+        if (span <= 0 || steps < 1)
+            return;
+        const total = steps * subdivisions;
+        for (let part = 0; part <= total; part += 1)
+            offsets.add(from + (span * part) / total);
+    };
+    walk(0, startShift, track.atStart.length - 1);
+    walk(startShift + arrangement.scrollMax, endShift, track.atEnd.length - 1);
+    return [...offsets]
+        .sort((a, b) => a - b)
+        .map((offset) => ({
+        percent: (offset / scrollMax) * 100,
+        ...placeItemOnTrack(track, index, offset),
+    }));
+};
+export const minVisibleFraction = (ratio) => {
+    if (ratio === null || ratio === undefined || !Number.isFinite(ratio) || ratio <= 0)
+        return 1 / 3;
+    const wide = 16 / 9;
+    const tall = 9 / 16;
+    if (ratio >= wide)
+        return 1 / 2;
+    if (ratio >= 1)
+        return mix(1 / 3, 1 / 2, (ratio - 1) / (wide - 1));
+    if (ratio >= tall)
+        return mix(1 / 4, 1 / 3, (ratio - tall) / (1 - tall));
+    return 1 / 4;
+};

package/dist/carousel/context.d.ts

@@ -0,0 +1,2 @@
+import type { CarouselContext } from './types.ts';
+export declare const getCarouselContext: () => CarouselContext, setCarouselContext: (context: CarouselContext) => CarouselContext;

package/dist/carousel/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'svelte';
+export const [getCarouselContext, setCarouselContext] = createContext();

package/dist/carousel/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Carousel } from './Carousel.svelte';
+export { default as CarouselItem } from './CarouselItem.svelte';
+export { getCarouselContext, setCarouselContext } from './context.js';

package/dist/carousel/index.js

@@ -0,0 +1,3 @@
+export { default as Carousel } from './Carousel.svelte';
+export { default as CarouselItem } from './CarouselItem.svelte';
+export { getCarouselContext, setCarouselContext } from './context.js';

package/dist/carousel/types.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export type CarouselVariant = 'multi-browse' | 'uncontained' | 'hero' | 'full-screen';
+export type CarouselAlignment = 'start' | 'center';
+export type CarouselOrientation = 'horizontal' | 'vertical';
+export type CarouselItemElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
+export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: CarouselVariant;
+    alignment?: CarouselAlignment;
+    orientation?: CarouselOrientation;
+    snap?: boolean;
+    label?: string | null;
+    itemLabel?: (label: string, position: number, total: number) => string;
+    children?: Snippet;
+    scroller?: HTMLDivElement;
+    element?: HTMLDivElement;
+}
+export interface CarouselItemProps extends HTMLAttributes<CarouselItemElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+    type: 'text' | 'button' | 'link';
+    label?: string | null;
+    image?: string | null;
+    aspectRatio?: number | null;
+    disabled?: boolean | null;
+    children?: Snippet;
+    element?: CarouselItemElement;
+}
+export interface CarouselContext {
+    items: CarouselItemElement[];
+    position: (item: CarouselItemElement) => number;
+    itemLabel: (label: string, position: number, total: number) => string;
+}

package/dist/carousel/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './autocomplete/index.js';
 export * from './badge/index.js';
 export * from './button/index.js';
 export * from './card/index.js';
+export * from './carousel/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
 export * from './date-picker/index.js';

package/dist/index.js

@@ -3,6 +3,7 @@ export * from './autocomplete/index.js';
 export * from './badge/index.js';
 export * from './button/index.js';
 export * from './card/index.js';
+export * from './carousel/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
 export * from './date-picker/index.js';

package/dist/keyboard-nav.d.ts

@@ -3,6 +3,8 @@ export declare const rovingTabindex: (itemSelector: string, options?: {
     currentAttr?: string;
     currentValue?: string;
 }) => Attachment<HTMLElement>;
-export declare const arrowKeyNav: (itemSelector: string, orientation?: "vertical" | "horizontal") => (event: KeyboardEvent & {
+export declare const arrowKeyNav: (itemSelector: string, orientation?: "vertical" | "horizontal", { wrap }?: {
+    wrap?: boolean;
+}) => (event: KeyboardEvent & {
     currentTarget: EventTarget & HTMLElement;
 }) => void;

package/dist/keyboard-nav.js

@@ -47,7 +47,7 @@ export const rovingTabindex = (itemSelector, options = {}) => {
         };
     };
 };
-export const arrowKeyNav = (itemSelector, orientation = 'vertical') => (event) => {
+export const arrowKeyNav = (itemSelector, orientation = 'vertical', { wrap = true } = {}) => (event) => {
     const [prev, next] = orientation === 'vertical'
         ? ['ArrowUp', 'ArrowDown']
         : ['ArrowLeft', 'ArrowRight'];
@@ -71,7 +71,11 @@ export const arrowKeyNav = (itemSelector, orientation = 'vertical') => (event) =
     else {
         const delta = key === next ? 1 : -1;
         const index = currentIndex + delta;
-        target = index < 0 ? items[items.length - 1] : index >= items.length ? items[0] : items[index];
+        // `delta` is only ever ±1, so wrapping is one modulo and clamping is one clamp.
+        target =
+            items[wrap
+                ? (index + items.length) % items.length
+                : Math.min(Math.max(index, 0), items.length - 1)];
     }
     target.focus();
     event.preventDefault();

package/dist/search/Search.svelte

@@ -228,16 +228,15 @@
 				min-width var(--np-motion-expressive-default-spatial);
 		}
 
-		.np-search-docked.np-search-expanded .np-search-container {
-			animation: unroll var(--np-motion-expressive-default-spatial);
-		}
 		.np-search-docked.np-search-expanded .np-search-results {
-			animation: fadeIn var(--np-motion-expressive-default-effects);
+			animation:
+				unroll var(--np-motion-expressive-default-spatial),
+				fadeIn var(--np-motion-expressive-default-effects);
 		}
 	}
 	@keyframes unroll {
 		from {
-			clip-path: inset(-1.5rem -1.5rem calc(100% - var(--_bar-height)) -1.5rem);
+			clip-path: inset(0 -1.5rem 100% -1.5rem);
 		}
 		to {
 			clip-path: inset(-1.5rem);
@@ -270,7 +269,9 @@
 		.np-search-bar {
 			transition:
 				height var(--np-motion-expressive-default-spatial),
-				background-color var(--np-motion-expressive-fast-effects);
+				background-color var(--np-motion-expressive-fast-effects),
+				border-start-start-radius var(--np-motion-expressive-fast-effects),
+				border-start-end-radius var(--np-motion-expressive-fast-effects);
 		}
 	}