fluentui-svelte 0.1.0

package/dist/internal/context.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Base context shape shared across all FluentUI Svelte components.
+ * - `config`: readonly props passed by the consumer (never mutated internally)
+ * - `state`: reactive internal state
+ * - `events`: callbacks exposed to the parent
+ * - `methods`: imperative API exposed to the parent
+ */
+export type FSContext<Config = Record<string, unknown> | null, State = Record<string, unknown> | null, Events = Record<string, (...args: unknown[]) => void> | null, Methods = Record<string, (...args: unknown[]) => void> | null> = {
+    readonly config: Config;
+    state: State;
+    events: Events;
+    methods: Methods;
+};
+export declare function createFSContext<T>(): [() => T | null, (context: T) => void];

package/dist/internal/context.js

@@ -0,0 +1,13 @@
+import { getContext, hasContext, setContext } from 'svelte';
+export function createFSContext() {
+    const key = {};
+    return [
+        () => {
+            if (!hasContext(key)) {
+                return null;
+            }
+            return getContext(key);
+        },
+        (context) => setContext(key, context)
+    ];
+}

package/dist/internal/dom-utils.svelte.d.ts

@@ -0,0 +1,6 @@
+export type ReactiveRect = {
+    ref: HTMLElement | null;
+    rect: Omit<DOMRect, 'toJSON'>;
+    update: () => void;
+};
+export declare const reactiveBoundingRect: () => ReactiveRect;

package/dist/internal/dom-utils.svelte.js

@@ -0,0 +1,46 @@
+import { on } from 'svelte/events';
+import { useResizeObserver } from 'runed';
+export const reactiveBoundingRect = () => {
+    let ref = $state(null);
+    let rect = $state({
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0,
+        x: 0,
+        y: 0
+    });
+    const update = () => {
+        if (!ref)
+            return;
+        rect = ref.getBoundingClientRect();
+    };
+    $effect(() => {
+        if (!ref)
+            return;
+        update();
+        const offResize = on(window, 'resize', update);
+        const offScroll = on(window, 'scroll', update);
+        // We need to use ResizeObserver to detect changes in the size of the element
+        const { stop } = useResizeObserver(ref, () => update());
+        return () => {
+            offResize();
+            offScroll();
+            stop();
+        };
+    });
+    return {
+        get ref() {
+            return ref;
+        },
+        get rect() {
+            return rect;
+        },
+        set ref(el) {
+            ref = el;
+        },
+        update
+    };
+};

package/dist/internal/floating-ui/floating.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type ComputePositionConfig, type ComputePositionReturn, type VirtualElement } from '@floating-ui/dom';
+import type { Attachment } from 'svelte/attachments';
+export interface FloatingOptions {
+    /** Use `requestAnimationFrame` for position updates instead of resize/scroll observers. */
+    animationFrame?: boolean;
+    /** Callback invoked after each position computation. */
+    onComputed?: (value: ComputePositionReturn) => void;
+    /** Callback invoked if position computation fails. */
+    onError?: (error: unknown) => void;
+}
+/**
+ * Svelte attachment that positions a floating element relative to a reference using FloatingUI.
+ * Automatically updates position on scroll, resize, and DOM mutations.
+ */
+export declare const floating: (ref: HTMLElement | VirtualElement, positionConfig?: ComputePositionConfig, { animationFrame, onComputed, onError }?: FloatingOptions) => Attachment<HTMLElement>;

package/dist/internal/floating-ui/floating.svelte.js

@@ -0,0 +1,26 @@
+import { autoUpdate, computePosition, flip, hide, offset, shift } from '@floating-ui/dom';
+import { roundByDPR } from '../index.js';
+import { DEFAULT_OFFSET } from '../constants.js';
+/**
+ * Svelte attachment that positions a floating element relative to a reference using FloatingUI.
+ * Automatically updates position on scroll, resize, and DOM mutations.
+ */
+export const floating = (ref, positionConfig = {
+    placement: 'bottom-start',
+    middleware: [offset(DEFAULT_OFFSET), flip(), shift({ padding: DEFAULT_OFFSET }), hide()]
+}, { animationFrame, onComputed, onError } = {}) => (node) => {
+    const update = () => {
+        computePosition(ref, node, positionConfig)
+            .then((data) => {
+            const { x, y, middlewareData } = data;
+            node.style.transform = `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`;
+            node.style.visibility = middlewareData.hide?.referenceHidden ? 'hidden' : 'visible';
+            onComputed?.(data);
+        })
+            .catch((err) => {
+            onError?.(err);
+        });
+    };
+    const cleanup = autoUpdate(ref, node, update, { animationFrame });
+    return () => cleanup();
+};

package/dist/internal/floating-ui/utils.d.ts

@@ -0,0 +1,3 @@
+import type { ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
+export declare const getPointerVirtualElement: (e: Event) => VirtualElement;
+export declare const getOffset: (positionConfig?: Partial<ComputePositionConfig>) => number;

package/dist/internal/floating-ui/utils.js

@@ -0,0 +1,30 @@
+import { DEFAULT_OFFSET } from '../constants.js';
+export const getPointerVirtualElement = (e) => {
+    if (!(e instanceof PointerEvent)) {
+        throw new TypeError('Expected a PointerEvent');
+    }
+    return {
+        getBoundingClientRect() {
+            return {
+                width: 0,
+                height: 0,
+                x: e.clientX,
+                y: e.clientY,
+                top: e.clientY,
+                right: e.clientX,
+                bottom: e.clientY,
+                left: e.clientX
+            };
+        }
+    };
+};
+export const getOffset = (positionConfig) => {
+    if (!positionConfig)
+        return DEFAULT_OFFSET;
+    const offsetConfig = positionConfig.middleware?.find((m) => m && m.name === 'offset');
+    return offsetConfig
+        ? typeof offsetConfig.options === 'number'
+            ? offsetConfig.options
+            : offsetConfig.options.mainAxis
+        : DEFAULT_OFFSET;
+};

package/dist/internal/index.d.ts

@@ -0,0 +1,9 @@
+export * from './utils.ts';
+export * from './dom-utils.svelte.ts';
+export * from './context.ts';
+export * from './transitions.ts';
+export * from './polyfills/expander.svelte.ts';
+export * from './floating-ui/floating.svelte.ts';
+export * from './floating-ui/utils.ts';
+export { default as RenderSoC } from './components/render-soc/render-soc.svelte';
+export { default as DynamicCarousel } from './components/dynamic-carousel/dynamic-carousel.svelte';

package/dist/internal/index.js

@@ -0,0 +1,9 @@
+export * from "./utils.js";
+export * from "./dom-utils.svelte.js";
+export * from "./context.js";
+export * from "./transitions.js";
+export * from "./polyfills/expander.svelte.js";
+export * from "./floating-ui/floating.svelte.js";
+export * from "./floating-ui/utils.js";
+export { default as RenderSoC } from './components/render-soc/render-soc.svelte';
+export { default as DynamicCarousel } from './components/dynamic-carousel/dynamic-carousel.svelte';

package/dist/internal/polyfills/expander.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { EASING, YDirection } from '../../types/index.js';
+export declare class Expander {
+    details: HTMLDetailsElement;
+    summary: HTMLElement | null;
+    content: HTMLElement | null;
+    animation: Animation | null;
+    isClosing: boolean;
+    isExpanding: boolean;
+    duration: number;
+    easing: EASING | string;
+    direction: YDirection;
+    cleanEvent: () => void;
+    reducedMotion: () => boolean;
+    get effectiveDuration(): number;
+    constructor(element: HTMLDetailsElement | null, direction?: YDirection, duration?: number, easing?: EASING | string, reducedMotion?: () => boolean);
+    onClick(e: MouseEvent): void;
+    shrink(): void;
+    open(): void;
+    expand(): void;
+    onAnimationFinish(open: boolean): void;
+}

package/dist/internal/polyfills/expander.svelte.js

@@ -0,0 +1,96 @@
+import { on } from 'svelte/events';
+import { DURATION } from '../constants.js';
+// Thanks to CSS-Tricks for the Expander example. https://css-tricks.com/how-to-animate-the-details-element/
+export class Expander {
+    details;
+    summary;
+    content;
+    animation;
+    isClosing;
+    isExpanding;
+    duration;
+    easing;
+    direction;
+    cleanEvent;
+    reducedMotion;
+    get effectiveDuration() {
+        return this.reducedMotion() ? DURATION.REDUCED : this.duration;
+    }
+    constructor(element, direction = 'down', duration = DURATION.NORMAL, easing = 'ease-out', reducedMotion = () => false) {
+        if (!element) {
+            throw new Error('Expander: Missing details element');
+        }
+        this.details = element;
+        this.summary = element.querySelector('summary');
+        this.content = element.querySelector('.content');
+        this.animation = null;
+        this.isClosing = false;
+        this.isExpanding = false;
+        this.duration = duration;
+        this.easing = easing;
+        this.direction = direction;
+        this.reducedMotion = reducedMotion;
+        if (!this.summary || !this.content) {
+            throw new Error('Expander: Missing summary or content element');
+        }
+        this.cleanEvent = on(this.summary, 'click', (e) => this.onClick(e));
+    }
+    onClick(e) {
+        e.preventDefault();
+        // Add an overflow on the <details> to avoid content overflowing
+        this.details.style.overflow = 'hidden';
+        if (this.isClosing || !this.details.open) {
+            this.open();
+        }
+        else if (this.isExpanding || this.details.open) {
+            this.shrink();
+        }
+    }
+    shrink() {
+        this.isClosing = true;
+        const startHeight = `${this.details.offsetHeight}px`;
+        const endHeight = `${this.summary?.offsetHeight}px`;
+        if (this.animation) {
+            // If there is already an animation running, cancel the current animation
+            this.animation.cancel();
+        }
+        // Start a WAAPI animation
+        this.animation = this.details.animate({
+            // Set the keyframes from the startHeight to endHeight
+            height: [startHeight, endHeight]
+        }, {
+            duration: this.effectiveDuration,
+            easing: this.easing
+        });
+        this.animation.onfinish = () => this.onAnimationFinish(false);
+        this.animation.oncancel = () => (this.isClosing = false);
+    }
+    open() {
+        this.details.style.height = `${this.details.offsetHeight}px`;
+        this.details.open = true;
+        window.requestAnimationFrame(() => this.expand());
+    }
+    expand() {
+        this.isExpanding = true;
+        const startHeight = `${this.details.offsetHeight}px`;
+        const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
+        if (this.animation) {
+            this.animation.cancel();
+        }
+        this.animation = this.details.animate({
+            height: [startHeight, endHeight]
+        }, {
+            duration: this.effectiveDuration,
+            easing: this.easing
+        });
+        this.animation.onfinish = () => this.onAnimationFinish(true);
+        this.animation.oncancel = () => (this.isExpanding = false);
+    }
+    onAnimationFinish(open) {
+        this.details.open = open;
+        this.animation = null;
+        this.isClosing = false;
+        this.isExpanding = false;
+        this.details.style.height = this.details.style.overflow = '';
+    }
+}

package/dist/internal/transitions.d.ts

@@ -0,0 +1,32 @@
+export interface FlyToOffsetOptions {
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    y?: number;
+    x?: number;
+    offset?: number;
+    css?: string;
+    reducedMotion?: boolean;
+}
+/** Fades and scales an element in/out. */
+export declare function fadeScale(node: HTMLElement, { delay, duration, easing, baseScale, reducedMotion }?: {
+    delay?: number;
+    duration?: number;
+    easing?: (x: number) => number;
+    baseScale?: number;
+    reducedMotion?: boolean;
+}): {
+    delay: number;
+    duration: number;
+    css: (t: number) => string;
+};
+/**
+ * Moves an element to a specific axis offset while fading in/out.
+ * Useful for aligning enter/exit animations with FloatingUI positioning.
+ */
+export declare function flyToOffset(node: Element, { delay, duration, easing, y, x, offset, css, reducedMotion }?: FlyToOffsetOptions): {
+    delay: number;
+    duration: number;
+    easing: (t: number) => number;
+    css: (t: number) => string;
+};

package/dist/internal/transitions.js

@@ -0,0 +1,37 @@
+import { DURATION } from './constants.js';
+/** Fades and scales an element in/out. */
+export function fadeScale(node, { delay = 0, duration = DURATION.NORMAL, easing = (x) => x, baseScale = 0, reducedMotion = false } = {}) {
+    const opacity = +getComputedStyle(node).opacity;
+    const initialScale = 1 - baseScale;
+    return {
+        delay,
+        duration: reducedMotion ? DURATION.REDUCED : duration,
+        css: (t) => {
+            const eased = easing(t);
+            return `opacity: ${eased * opacity}; transform: scale(${eased * initialScale + baseScale})`;
+        }
+    };
+}
+/**
+ * Moves an element to a specific axis offset while fading in/out.
+ * Useful for aligning enter/exit animations with FloatingUI positioning.
+ */
+export function flyToOffset(node, { delay = 0, duration = DURATION.NORMAL, easing = (t) => t, y, x, offset = 0, css, reducedMotion = false } = {}) {
+    const style = getComputedStyle(node);
+    const opacity = +style.opacity;
+    const transform = style.transform === 'none' ? '' : style.transform;
+    return {
+        delay,
+        duration: reducedMotion ? DURATION.REDUCED : duration,
+        easing,
+        css: (t) => {
+            const eased = easing(t);
+            const translation = y
+                ? `translateY(${y * (1 - eased) + offset * eased}px)`
+                : x
+                    ? `translateX(${x * (1 - eased) + offset * eased}px)`
+                    : '';
+            return `opacity: ${eased * opacity}; transform: ${transform} ${translation}; ${css || ''}`;
+        }
+    };
+}

package/dist/internal/utils.d.ts

@@ -0,0 +1,22 @@
+/** Converts a pixel value (number, string, or getter function) to a `rem` string. */
+export declare const pxToRem: (px: number | string | (() => number | string), base?: number) => string;
+/** Rounds a pixel value to the nearest physical pixel based on the device pixel ratio. */
+export declare const roundByDPR: (value: number, element?: Element) => number;
+/** Converts a kebab-case string to Title Case (e.g. `'my-label'` → `'My Label'`). */
+export declare const capitalize: (str: string) => string;
+export declare const getInitials: (name: string, max?: number) => string;
+type EventHandler<E extends Event> = (this: unknown, event: E) => void;
+/** Wraps a handler so it fires at most once, then becomes a no-op. */
+export declare function once<E extends Event>(fn: EventHandler<E> | null): EventHandler<E>;
+/** Wraps a handler to call `preventDefault()` before invoking it. */
+export declare function preventDefault<E extends Event = Event>(fn: EventHandler<E>): EventHandler<E>;
+/**
+ * Dispatches an event to a list of callbacks.
+ * If any blocker in `blockers` is true, calls `preventDefault()` and skips the callbacks.
+ */
+export declare const invokeHandlers: <T extends Event>(e: T, blockers?: boolean | (boolean | undefined)[], callbacks?: Array<((event: any) => void) | unknown>) => void;
+/** Returns `true` if the object has no own enumerable keys (also handles `null`/`undefined`). */
+export declare const isObjectEmpty: (obj: Record<string, unknown> | null | undefined) => boolean;
+/** Returns the value of a CSS custom property as milliseconds. */
+export declare function getCSSDuration(property: string, element?: Element): number;
+export {};

package/dist/internal/utils.js

@@ -0,0 +1,63 @@
+/** Converts a pixel value (number, string, or getter function) to a `rem` string. */
+export const pxToRem = (px, base = 16) => {
+    if (typeof px === 'function') {
+        px = px();
+    }
+    return `${((typeof px === 'string' ? parseInt(px) : px) / base).toFixed(2)}rem`;
+};
+/** Rounds a pixel value to the nearest physical pixel based on the device pixel ratio. */
+export const roundByDPR = (value, element) => {
+    const dpr = element?.ownerDocument.defaultView?.devicePixelRatio || window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};
+/** Converts a kebab-case string to Title Case (e.g. `'my-label'` → `'My Label'`). */
+export const capitalize = (str) => {
+    return str
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+};
+export const getInitials = (name, max = 2) => {
+    return name
+        .split(' ')
+        .map((n, i) => (i < max ? n[0] : ''))
+        .join('');
+};
+/** Wraps a handler so it fires at most once, then becomes a no-op. */
+export function once(fn) {
+    return function (event) {
+        if (fn) {
+            fn.call(this, event);
+            fn = null;
+        }
+    };
+}
+/** Wraps a handler to call `preventDefault()` before invoking it. */
+export function preventDefault(fn) {
+    return function (event) {
+        event.preventDefault();
+        fn.call(this, event);
+    };
+}
+/**
+ * Dispatches an event to a list of callbacks.
+ * If any blocker in `blockers` is true, calls `preventDefault()` and skips the callbacks.
+ */
+export const invokeHandlers = (e, blockers = [], callbacks = []) => {
+    if ((Array.isArray(blockers) ? blockers : [blockers]).some(Boolean))
+        return e.preventDefault();
+    for (const cb of callbacks) {
+        if (typeof cb === 'function')
+            cb(e);
+    }
+};
+/** Returns `true` if the object has no own enumerable keys (also handles `null`/`undefined`). */
+export const isObjectEmpty = (obj) => Object.keys(obj || {}).length === 0;
+/** Returns the value of a CSS custom property as milliseconds. */
+export function getCSSDuration(property, element = document.documentElement) {
+    const raw = window.getComputedStyle(element).getPropertyValue(property).trim();
+    const value = parseFloat(raw);
+    if (isNaN(value))
+        return 0;
+    return raw.endsWith('ms') ? value : value * 1000;
+}

package/dist/providers/fluentui-svelte/fluentui-svelte.d.ts

@@ -0,0 +1,19 @@
+import { type FSContext } from '../../internal/index.js';
+import type { THEME } from '../../types/index.js';
+import type { TabspotInstance } from 'tabspot';
+export type FSProviderContext = FSContext<null, {
+    readonly tabspotInstance: TabspotInstance | undefined;
+    readonly reducedMotion: boolean;
+    readonly theme: Exclude<THEME, 'system'> | undefined;
+}, null, {
+    /** `true`/`false` is the app's own preference and outranks the OS; `null` defers to it again. */
+    setReducedMotion: (value: boolean | null) => void;
+    /** `'light'`/`'dark'` is the app's own preference and outranks the OS; `null` defers to it again. */
+    setTheme: (value: THEME) => void;
+}>;
+export declare const getGlobalFSContext: () => FSProviderContext | null, setGlobalFSContext: (context: FSProviderContext) => void;
+/**
+ * `reducedMotion` from the global context, for components that have to hand the value to something
+ * that cannot read context itself — a transition function or a plain class.
+ */
+export declare function getReducedMotion(): () => boolean;

package/dist/providers/fluentui-svelte/fluentui-svelte.js

@@ -0,0 +1,11 @@
+import { createFSContext } from '../../internal/index.js';
+import { prefersReducedMotion } from 'svelte/motion';
+export const [getGlobalFSContext, setGlobalFSContext] = createFSContext();
+/**
+ * `reducedMotion` from the global context, for components that have to hand the value to something
+ * that cannot read context itself — a transition function or a plain class.
+ */
+export function getReducedMotion() {
+    const context = getGlobalFSContext();
+    return () => context?.state.reducedMotion ?? prefersReducedMotion.current;
+}

package/dist/providers/fluentui-svelte/fluentui-svelte.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { tabspot, type TabspotInstance } from 'tabspot';
+	import { setGlobalFSContext, type FSProviderContext } from './fluentui-svelte.js';
+	import { onMount, type Snippet } from 'svelte';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { PersistedState } from 'runed';
+	import { mode, setMode } from 'mode-watcher';
+
+	let {
+		children,
+		tabspotInstance
+	}: {
+		tabspotInstance?: TabspotInstance;
+		children?: Snippet;
+	} = $props();
+
+	// boolean flags for user preferences and null for system default
+	let userReducedMotion = new PersistedState<boolean | null>('fluentui-svelte-reduced-motion', null);
+
+	// Syncing
+	let reducedMotion = $derived(userReducedMotion.current ?? prefersReducedMotion.current);
+
+	const _state: FSProviderContext['state'] = {
+		get tabspotInstance() {
+			return tabspotInstance;
+		},
+		get reducedMotion() {
+			return reducedMotion;
+		},
+		get theme() {
+			return mode.current;
+		}
+	};
+
+	setGlobalFSContext({
+		config: null,
+		state: _state,
+		events: null,
+		methods: {
+			setReducedMotion: (value) => {
+				userReducedMotion.current = value;
+			},
+			setTheme: (value) => {
+				setMode(value);
+			}
+		}
+	});
+
+	onMount(() => {
+		tabspotInstance ??= tabspot();
+
+		return () => {
+			tabspotInstance?.destroy();
+		};
+	});
+
+	$effect(() => {
+		const root = document.documentElement;
+
+		root.dataset.fsReducedMotion = String(_state.reducedMotion);
+
+		return () => {
+			delete root.dataset.fsReducedMotion;
+		};
+	});
+</script>
+
+{@render children?.()}

package/dist/providers/fluentui-svelte/fluentui-svelte.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type TabspotInstance } from 'tabspot';
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    tabspotInstance?: TabspotInstance;
+    children?: Snippet;
+};
+declare const FluentuiSvelte: import("svelte").Component<$$ComponentProps, {}, "">;
+type FluentuiSvelte = ReturnType<typeof FluentuiSvelte>;
+export default FluentuiSvelte;