fluentui-svelte 0.6.0 → 0.7.0

package/dist/index.d.ts

@@ -1,3 +1,8 @@
+export { default as AppSurface } from './components/app-surface/app-surface.svelte';
+export type { AppSurfaceProps } from './components/app-surface/types.js';
+export { default as AppWindow } from './components/app-window/app-window.svelte';
+export { getAppWindowContext } from './components/app-window/app-window.ts';
+export type { AppWindowProps, AppWindowContext, AppWindowPart, AppWindowSideNav, AppWindowGlobalNav } from './components/app-window/types.js';
 export { default as AutoSuggestBox } from './components/auto-suggest-box/auto-suggest-box.svelte';
 export { default as AutoSuggestBoxOption } from './components/auto-suggest-box/option.svelte';
 export { default as Avatar } from './components/avatar/avatar.svelte';
@@ -24,6 +29,7 @@ export { default as CalendarDatePicker } from './components/calendar-date-picker
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as DatePicker } from './components/date-picker/date-picker.svelte';
 export { default as Dialog } from './components/dialog/dialog.svelte';
+export type { DialogAnimation, DialogDuration, DialogPosition, DialogProps } from './components/dialog/types.js';
 export { default as DialogTitle } from './components/dialog/dialog-title.svelte';
 export { default as DialogContent } from './components/dialog/dialog-content.svelte';
 export { default as DialogActions } from './components/dialog/dialog-actions.svelte';
@@ -41,6 +47,8 @@ export { default as InfoBar } from './components/info-bar/info-bar.svelte';
 export { default as Label } from './components/label/label.svelte';
 export { default as ListView } from './components/list-view/list-view.svelte';
 export { default as ListViewItem } from './components/list-view/list-view-item.svelte';
+export { default as ListViewItemBranch } from './components/list-view/list-view-item-branch.svelte';
+export type { ListViewProps, ListViewItemProps, ListViewItemBranchProps, ListViewDOM, ListViewItemDOM, SelectionMode, NavigationMode } from './components/list-view/types.ts';
 export { default as Menu } from './components/menu/menu.svelte';
 export { default as MenuItem } from './components/menu/menu-item.svelte';
 export { default as MenuDivider } from './components/menu/menu-divider.svelte';
@@ -51,6 +59,8 @@ export { default as MenuList } from './components/menu/menu-list.svelte';
 export { default as MenuItemCheckbox } from './components/menu/menu-item-checkbox.svelte';
 export { default as MenuItemRadio } from './components/menu/menu-item-radio.svelte';
 export { default as MenuItemSwitch } from './components/menu/menu-item-switch.svelte';
+export { default as MenuCommandBar } from './components/menu/menu-command-bar.svelte';
+export { default as MenuCommandBarItem } from './components/menu/menu-command-bar-item.svelte';
 export { default as ContextMenuTrigger } from './components/menu/context-menu-trigger.svelte';
 export { default as NumberBox } from './components/number-box/number-box.svelte';
 export { default as Persona } from './components/persona/persona.svelte';
@@ -81,6 +91,14 @@ export { default as TextArea } from './components/textarea/textarea.svelte';
 export { default as TextBox } from './components/text-box/text-box.svelte';
 export { default as TextBoxButton } from './components/text-box/text-box-button.svelte';
 export { default as TimePicker } from './components/time-picker/time-picker.svelte';
+export { default as SideNav } from './components/side-nav/side-nav.svelte';
+export { default as SideNavItem } from './components/side-nav/side-nav-item.svelte';
+export { default as SideNavBranch } from './components/side-nav/side-nav-branch.svelte';
+export type { SideNavProps, SideNavItemProps, SideNavBranchProps, SideNavContent, SideNavRenderState, SideNavListViewProps } from './components/side-nav/types.ts';
+export { default as TitleBar } from './components/title-bar/title-bar.svelte';
+export { default as TitleBarLeftControls } from './components/title-bar/title-bar-left-controls.svelte';
+export { default as TitleBarRightControls } from './components/title-bar/title-bar-right-controls.svelte';
+export type { TitleBarProps, TitleBarLeftControlsProps, TitleBarRightControlsProps } from './components/title-bar/types.js';
 export { default as ToggleSwitch } from './components/toggle-switch/toggle-switch.svelte';
 export { default as TopNav } from './components/top-nav/top-nav.svelte';
 export { default as TopNavItem } from './components/top-nav/top-nav-item.svelte';

package/dist/index.js

@@ -1,3 +1,10 @@
+// Start AppSurface Component
+export { default as AppSurface } from './components/app-surface/app-surface.svelte';
+// End AppSurface Component
+// Start AppWindow Component
+export { default as AppWindow } from './components/app-window/app-window.svelte';
+export { getAppWindowContext } from "./components/app-window/app-window.js";
+// End AppWindow Component
 // Start AutoSuggestBox Component
 export { default as AutoSuggestBox } from './components/auto-suggest-box/auto-suggest-box.svelte';
 export { default as AutoSuggestBoxOption } from './components/auto-suggest-box/option.svelte';
@@ -80,6 +87,7 @@ export { default as Label } from './components/label/label.svelte';
 // Start ListView Component
 export { default as ListView } from './components/list-view/list-view.svelte';
 export { default as ListViewItem } from './components/list-view/list-view-item.svelte';
+export { default as ListViewItemBranch } from './components/list-view/list-view-item-branch.svelte';
 // End ListView Component
 // Start Menu Component
 export { default as Menu } from './components/menu/menu.svelte';
@@ -92,6 +100,8 @@ export { default as MenuList } from './components/menu/menu-list.svelte';
 export { default as MenuItemCheckbox } from './components/menu/menu-item-checkbox.svelte';
 export { default as MenuItemRadio } from './components/menu/menu-item-radio.svelte';
 export { default as MenuItemSwitch } from './components/menu/menu-item-switch.svelte';
+export { default as MenuCommandBar } from './components/menu/menu-command-bar.svelte';
+export { default as MenuCommandBarItem } from './components/menu/menu-command-bar-item.svelte';
 export { default as ContextMenuTrigger } from './components/menu/context-menu-trigger.svelte';
 // End Menu Component
 // Start NumberBox Component
@@ -152,6 +162,16 @@ export { default as TextBoxButton } from './components/text-box/text-box-button.
 // Start TimePicker Component
 export { default as TimePicker } from './components/time-picker/time-picker.svelte';
 // End TimePicker Component
+// Start SideNav Component
+export { default as SideNav } from './components/side-nav/side-nav.svelte';
+export { default as SideNavItem } from './components/side-nav/side-nav-item.svelte';
+export { default as SideNavBranch } from './components/side-nav/side-nav-branch.svelte';
+// End SideNav Component
+// Start TitleBar Component
+export { default as TitleBar } from './components/title-bar/title-bar.svelte';
+export { default as TitleBarLeftControls } from './components/title-bar/title-bar-left-controls.svelte';
+export { default as TitleBarRightControls } from './components/title-bar/title-bar-right-controls.svelte';
+// End TitleBar Component
 // Start ToggleSwitch Component
 export { default as ToggleSwitch } from './components/toggle-switch/toggle-switch.svelte';
 // End ToggleSwitch Component

package/dist/internal/components/dynamic-carousel/dynamic-carousel.svelte

@@ -3,9 +3,11 @@
 	import CaretDownFilled from 'fluentui-icons-svelte/CaretDownFilled.svelte';
 	import CaretUpFilled from 'fluentui-icons-svelte/CaretUpFilled.svelte';
 	import { Button } from '../../../index.js';
+	import { PREFIX } from '../../constants.js';
 	import { on } from 'svelte/events';
 
 	let {
+		label,
 		values = Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0')),
 		selectedIndex = $bindable(0),
 		disabledIndices = [],
@@ -16,6 +18,8 @@
 		inertia = true,
 		children
 	}: {
+		/** The accessible name of the listbox, such as the field it picks. */
+		label: string;
 		values?: string[];
 		selectedIndex?: number;
 		/** Real (0-based, unwrapped) indices the carousel must never rest on. */
@@ -30,6 +34,10 @@
 		children?: Snippet<[{ value: string; index: number; selected: boolean }]>;
 	} = $props();
 
+	// Picker columns render side by side, so the option ids need a prefix of their own.
+	const UID = $props.id();
+	const ITEM_ID = `${PREFIX}carousel-${UID}-item`;
+
 	// Reactive state — read by the template and deriveds.
 	let scrolling = $state(false);
 	// Continuous position for smooth scrolling (in item units, unbounded for infinite scroll).
@@ -301,7 +309,14 @@
 </script>
 
 <div class="fs-dynamic-carousel" style:--item-height="{itemHeight}px" style:--container-height="{containerHeight}px">
-	<Button class="fs-dynamic-carousel-btn" appearance="subtle" aria-label="Previous" onclick={() => moveBy(-1)}>
+	<!-- The arrows are for the pointer: the listbox moves with ArrowUp/ArrowDown. -->
+	<Button
+		class="fs-dynamic-carousel-btn"
+		appearance="subtle"
+		tabindex={-1}
+		aria-hidden="true"
+		onclick={() => moveBy(-1)}
+	>
 		<CaretUpFilled />
 	</Button>
 	<div
@@ -310,13 +325,13 @@
 		onkeydown={handleKeydown}
 		role="listbox"
 		tabindex="0"
-		aria-label="Selector"
-		aria-activedescendant="carousel-item-{centerIndex}"
+		aria-label={label}
+		aria-activedescendant="{ITEM_ID}-{centerIndex}"
 	>
 		<div class="fs-dynamic-carousel-track">
 			{#each virtualItems as item (item.key)}
 				<div
-					id="carousel-item-{item.key}"
+					id="{ITEM_ID}-{item.key}"
 					class={[
 						'fs-dynamic-carousel-item',
 						item.realIndex === currentSelectedIndex && 'selected',
@@ -352,7 +367,13 @@
 			{/each}
 		</div>
 	</div>
-	<Button class="fs-dynamic-carousel-btn" appearance="subtle" aria-label="Next" onclick={() => moveBy(1)}>
+	<Button
+		class="fs-dynamic-carousel-btn"
+		appearance="subtle"
+		tabindex={-1}
+		aria-hidden="true"
+		onclick={() => moveBy(1)}
+	>
 		<CaretDownFilled />
 	</Button>
 </div>

package/dist/internal/components/dynamic-carousel/dynamic-carousel.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
+    /** The accessible name of the listbox, such as the field it picks. */
+    label: string;
     values?: string[];
     selectedIndex?: number;
     /** Real (0-based, unwrapped) indices the carousel must never rest on. */

package/dist/internal/index.d.ts

@@ -1,5 +1,6 @@
 export * from './utils.ts';
 export * from './dom-utils.svelte.ts';
+export * from './native-field.svelte.ts';
 export * from './context.ts';
 export * from './transitions.ts';
 export * from './polyfills/expander.svelte.ts';

package/dist/internal/index.js

@@ -1,5 +1,6 @@
 export * from "./utils.js";
 export * from "./dom-utils.svelte.js";
+export * from "./native-field.svelte.js";
 export * from "./context.js";
 export * from "./transitions.js";
 export * from "./polyfills/expander.svelte.js";

package/dist/internal/native-field.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { AriaAttributes } from 'svelte/elements';
+type Field = HTMLInputElement | HTMLSelectElement;
+type PointerEventName = 'click' | 'dblclick' | 'auxclick' | 'contextmenu' | `mouse${string}` | `pointer${string}` | `touch${string}` | `drag${string}` | 'drop' | 'wheel';
+type KeyboardFocusEventName = `key${string}` | 'focus' | 'blur' | 'focusin' | 'focusout';
+type Handlers<E extends string> = `on${E}` | `on${E}capture`;
+/** The attributes of a field nobody sees: its look and its pointer events belong to what is drawn instead. */
+export type HiddenInputAttributes<T> = Omit<T, Handlers<PointerEventName>>;
+/**
+ * The attributes of the native field a custom control stands in front of. People point at, type into
+ * and focus the visible control, so `class`, `style` and those events go through its own attributes,
+ * and `onfocus` and `onblur` are moved onto it.
+ */
+export type NativeFieldAttributes<T> = Omit<HiddenInputAttributes<T>, Handlers<KeyboardFocusEventName>> & {
+    /** Called when the visible control takes the focus. */
+    onfocus?: (event: FocusEvent) => void;
+    /** Called when the visible control loses the focus. */
+    onblur?: (event: FocusEvent) => void;
+};
+type FieldAria = Pick<AriaAttributes, 'aria-labelledby' | 'aria-label' | 'aria-describedby' | 'aria-errormessage' | 'aria-required' | 'aria-invalid'>;
+/**
+ * The native field a custom control stands in front of, so that forms submit, validate and reset it.
+ * Assistive technologies meet the visible control instead, so the field hides from them, except while
+ * the browser reports it invalid: the field then holds the focus and the validation message, which
+ * moving the focus would close, and it is announced. The first key pressed there goes on from the
+ * visible control.
+ */
+export declare class NativeField {
+    #private;
+    /** A submission found the field invalid, and it was neither fixed nor reset since. */
+    invalid: boolean;
+    /** The browser is reporting the field: it has the focus and shows the validation message. */
+    reported: boolean;
+    /** `label` is the Label the field is inside, which names the visible control before its labels can be read. */
+    constructor(field: () => Field | null | undefined, control: () => HTMLElement | null | undefined, label?: {
+        labelId: string;
+    } | null);
+    /**
+     * The labels and ARIA of the field name and describe it.
+     */
+    aria(attributes: FieldAria & {
+        required?: boolean | null;
+    }, own?: FieldAria, role?: 'button' | 'combobox'): FieldAria;
+}
+export {};

package/dist/internal/native-field.svelte.js

@@ -0,0 +1,85 @@
+import { on } from 'svelte/events';
+import { labelIds } from "./utils.js";
+/** The keys that open a picker from its button. */
+const ACTIVATION_KEYS = ['Enter', ' ', 'ArrowDown', 'ArrowUp'];
+/** The field the browser focuses and reports when a submission fails. */
+const firstInvalid = (form) => Array.from(form.elements).find((element) => {
+    const field = element;
+    return field.willValidate && !field.validity.valid;
+});
+/**
+ * The native field a custom control stands in front of, so that forms submit, validate and reset it.
+ * Assistive technologies meet the visible control instead, so the field hides from them, except while
+ * the browser reports it invalid: the field then holds the focus and the validation message, which
+ * moving the focus would close, and it is announced. The first key pressed there goes on from the
+ * visible control.
+ */
+export class NativeField {
+    /** A submission found the field invalid, and it was neither fixed nor reset since. */
+    invalid = $state(false);
+    /** The browser is reporting the field: it has the focus and shows the validation message. */
+    reported = $state(false);
+    #field;
+    #label;
+    /** `label` is the Label the field is inside, which names the visible control before its labels can be read. */
+    constructor(field, control, label = null) {
+        this.#field = field;
+        this.#label = label;
+        $effect(() => {
+            const element = field();
+            if (!element)
+                return;
+            const offs = [
+                on(element, 'invalid', () => {
+                    this.invalid = true;
+                    if (element.form && firstInvalid(element.form) !== element)
+                        return;
+                    // The browser focuses the field right after this event, and the focus must not land
+                    // on something hidden from assistive technologies.
+                    element.removeAttribute('aria-hidden');
+                    this.reported = true;
+                    // `checkValidity` reports nothing, so a field it found invalid hides again.
+                    setTimeout(() => {
+                        if (document.activeElement !== element)
+                            this.reported = false;
+                    });
+                }),
+                on(element, 'change', () => {
+                    if (this.invalid)
+                        this.invalid = !element.validity.valid;
+                }),
+                on(element, 'blur', () => (this.reported = false)),
+                on(element, 'keydown', (event) => {
+                    if (event.key === 'Tab')
+                        return;
+                    event.preventDefault();
+                    const target = control();
+                    target?.focus();
+                    if (ACTIVATION_KEYS.includes(event.key))
+                        target?.click();
+                })
+            ];
+            if (element.form)
+                offs.push(on(element.form, 'reset', () => (this.invalid = false)));
+            return () => offs.forEach((off) => off());
+        });
+    }
+    /**
+     * The labels and ARIA of the field name and describe it.
+     */
+    aria(attributes, own = {}, role = 'combobox') {
+        const naming = {
+            'aria-labelledby': own['aria-labelledby'] ?? attributes['aria-labelledby'] ?? labelIds(this.#field()) ?? this.#label?.labelId,
+            'aria-label': own['aria-label'] ?? attributes['aria-label'],
+            'aria-describedby': own['aria-describedby'] ?? attributes['aria-describedby']
+        };
+        if (role === 'button')
+            return naming;
+        return {
+            ...naming,
+            'aria-required': own['aria-required'] ?? (attributes.required ? true : undefined),
+            'aria-invalid': own['aria-invalid'] ?? (this.invalid || attributes['aria-invalid'] || undefined),
+            'aria-errormessage': own['aria-errormessage'] ?? attributes['aria-errormessage']
+        };
+    }
+}

package/dist/internal/utils.d.ts

@@ -1,5 +1,7 @@
-/** Converts a pixel value (number, string, or getter function) to a `rem` string. */
+/** Converts pixels to rem using the current root font size, or 16px during SSR. An explicit base overrides detection. */
 export declare const pxToRem: (px: number | string | (() => number | string), base?: number) => string;
+/** A number is a length in pixels, converted to rem; a string is any CSS length and is used as it is. */
+export declare const toLength: (value: number | string) => 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'`). */
@@ -10,11 +12,23 @@ type EventHandler<E extends Event> = (this: unknown, event: E) => void;
 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>;
+/** Method syntax keeps `event` bivariant, so handlers typed with a narrower `currentTarget` are accepted. */
+type BivariantHandler<E extends Event> = {
+    bivarianceHack(event: E): unknown;
+}['bivarianceHack'];
 /**
  * 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;
+export declare const invokeHandlers: <T extends Event>(e: T, blockers?: boolean | (boolean | undefined)[], callbacks?: Array<BivariantHandler<NoInfer<T>> | false | null | undefined>) => void;
+/**
+ * A custom control sets the value of its native field programmatically, which fires no event.
+ * Once the field shows the new value, this fires the events when a user edit of the field would.
+ * Call it from event handlers only: `flushSync` cannot run inside an effect.
+ */
+export declare function dispatchFieldEvents(field: EventTarget | null | undefined, types?: ('input' | 'change')[]): void;
+/** The ids of the labels of a native field, so the visible control that stands in for it is named by them. */
+export declare const labelIds: (field: HTMLInputElement | HTMLSelectElement | null | undefined) => string | undefined;
 /** 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. */

package/dist/internal/utils.js

@@ -1,10 +1,18 @@
-/** Converts a pixel value (number, string, or getter function) to a `rem` string. */
-export const pxToRem = (px, base = 16) => {
+import { flushSync } from 'svelte';
+/** Converts pixels to rem using the current root font size, or 16px during SSR. An explicit base overrides detection. */
+export const pxToRem = (px, base) => {
     if (typeof px === 'function') {
         px = px();
     }
-    return `${((typeof px === 'string' ? parseInt(px) : px) / base).toFixed(2)}rem`;
+    const rootSize = base ??
+        (typeof window === 'undefined'
+            ? 16
+            : parseFloat(window.getComputedStyle(window.document.documentElement).fontSize));
+    const resolvedBase = Number.isFinite(rootSize) && rootSize > 0 ? rootSize : 16;
+    return `${(typeof px === 'string' ? parseFloat(px) : px) / resolvedBase}rem`;
 };
+/** A number is a length in pixels, converted to rem; a string is any CSS length and is used as it is. */
+export const toLength = (value) => (typeof value === 'number' ? pxToRem(value) : value);
 /** 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;
@@ -51,6 +59,20 @@ export const invokeHandlers = (e, blockers = [], callbacks = []) => {
             cb(e);
     }
 };
+/**
+ * A custom control sets the value of its native field programmatically, which fires no event.
+ * Once the field shows the new value, this fires the events when a user edit of the field would.
+ * Call it from event handlers only: `flushSync` cannot run inside an effect.
+ */
+export function dispatchFieldEvents(field, types = ['input', 'change']) {
+    flushSync();
+    for (const type of types)
+        field?.dispatchEvent(new Event(type, { bubbles: true }));
+}
+/** The ids of the labels of a native field, so the visible control that stands in for it is named by them. */
+export const labelIds = (field) => Array.from(field?.labels ?? [], (label) => label.id)
+    .filter(Boolean)
+    .join(' ') || undefined;
 /** 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. */

package/dist/types/index.d.ts

@@ -4,8 +4,8 @@ export type NoUndefinedField<T> = {
     [P in keyof T]-?: P extends Record<P, infer V> ? NoUndefinedField<NonNullable<V>> : NonNullable<T[P]>;
 };
 /** Omits all keys from `T` whose name starts with the prefix `K`. */
-export type OmitByWord<T, K extends string> = {
-    [P in keyof T as P extends `${K}${string}` ? never : P]: T[P];
+export type OmitByWord<T, K extends string, Excluded extends PropertyKey = never> = {
+    [P in keyof T as P extends Excluded ? never : P extends `${K}${string}` ? never : P]: T[P];
 };
 /** Picks only the keys from `T` whose name starts with the prefix `K`. */
 export type PickByWord<T, K extends string> = {
@@ -33,7 +33,7 @@ export type THEME = 'light' | 'dark' | 'system';
  * @see https://github.com/sveltejs/svelte/issues/16046
  * @see https://github.com/sveltejs/svelte/issues/16839
  */
-export type PolymorphicProps<T extends keyof SvelteHTMLElements> = OmitByWord<SvelteHTMLElements[T], 'on:' | 'aria'> & AriaAttributes;
+export type PolymorphicProps<T extends keyof SvelteHTMLElements, Excluded extends PropertyKey = never> = OmitByWord<SvelteHTMLElements[T], 'on:' | 'aria', Excluded> & AriaAttributes;
 /** Library maturity/status shown as a badge in the navigation. Not part of SEO/GEO. */
 export type ComponentStatus = 'New' | 'Beta' | 'WIP' | 'AI' | 'Experimental' | 'Prototype' | 'Empty';
 /** Open Graph metadata (https://ogp.me). Used to build `<meta property="og:*">` tags. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-svelte",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Modern Fluent UI 2 Components for Svelte 5",
   "author": {
     "name": "Jorge Acosta",
@@ -70,70 +70,84 @@
     "@floating-ui/dom": "^1.8.0",
     "fluentui-icons-svelte": "^1.2.0",
     "mode-watcher": "^1.1.0",
-    "runed": "^0.37.1",
+    "runed": "^0.38.0",
     "tabspot": "^0.8.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^1.0.0",
-    "@changesets/cli": "^3.0.1",
+    "@changesets/changelog-github": "^1.0.1",
+    "@changesets/cli": "^3.0.3",
     "@eslint/js": "^10.0.1",
-    "@humanspeak/svelte-virtual-list": "^0.5.14",
-    "@inlang/paraglide-js": "^2.24.1",
+    "@humanspeak/svelte-virtual-list": "^0.5.15",
+    "@inlang/paraglide-js": "^2.29.3",
     "@inlang/paraglide-js-svelte": "^1.0.4",
     "@jlacostaec/paraglide-markup-svelte": "0.1.0",
     "@jlacostaec/propsmith": "^0.2.0",
-    "@playwright/test": "^1.62.1",
-    "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/adapter-cloudflare": "^7.2.9",
-    "@sveltejs/kit": "^2.70.3",
-    "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@types/node": "^26.2.0",
-    "@vitest/browser-playwright": "^4.1.11",
-    "eslint": "^10.8.1",
+    "@playwright/test": "^1.64.1",
+    "@sveltejs/adapter-auto": "^8.0.0",
+    "@sveltejs/adapter-cloudflare": "^8.0.2",
+    "@sveltejs/enhanced-img": "^1.0.0",
+    "@sveltejs/kit": "^3.1.1",
+    "@sveltejs/package": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@types/node": "^26.6.6",
+    "@vitest/browser-playwright": "^5.1.0",
+    "eslint": "^10.14.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.23.0",
-    "globals": "^17.11.0",
+    "eslint-plugin-svelte": "^3.23.1",
+    "globals": "^17.14.0",
     "mdsvex": "^0.12.8",
     "panzoom": "^9.4.4",
-    "playwright": "^1.62.1",
-    "prettier": "^3.9.6",
+    "playwright": "^1.64.1",
+    "prettier": "^3.9.10",
     "prettier-plugin-svelte": "^4.1.1",
-    "publint": "^0.3.24",
+    "publint": "^0.3.25",
     "rehype-class-names": "^2.0.0",
     "rehype-slug": "^6.0.0",
-    "shiki": "^4.4.3",
+    "shiki": "^4.6.0",
     "simplex-noise": "^4.0.3",
-    "svelte": "^5.56.9",
-    "svelte-check": "^4.7.6",
+    "svelte": "^5.57.3",
+    "svelte-check": "^4.7.8",
+    "svelte-meta-tags": "^5.0.3",
     "typescript": "6.0.3",
-    "typescript-eslint": "^8.67.0",
-    "vite": "^8.2.1",
-    "vitest": "^4.1.11",
-    "vitest-browser-svelte": "^3.0.0",
-    "wrangler": "^4.124.0"
+    "typescript-eslint": "^8.72.1",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0",
+    "vitest-browser-svelte": "^3.1.0",
+    "wrangler": "^4.156.2"
+  },
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*",
+    "#types": "./src/lib/types/index.js",
+    "#internal": "./src/lib/internal/index.js",
+    "#components/*": "./src/lib/components/*",
+    "#css/*": "./src/lib/css/*",
+    "#site/*": "./src/site/*",
+    "#i18n/*": "./src/i18n/*",
+    "#constants": "./src/lib/internal/constants.js"
   },
   "engines": {
     "node": ">=24"
   },
   "scripts": {
     "dev": "pnpm urls && vite dev",
-    "build:site": "pnpm urls && vite build && pnpm prepare",
-    "build": "pnpm urls && vite build && npm run prepack",
-    "preview": "pnpm run build && wrangler pages dev",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "build:site": "pnpm urls && pnpm check && vite build && pnpm prepare",
+    "build": "pnpm urls && pnpm check && vite build && npm run prepack",
+    "preview": "wrangler pages dev",
+    "i18n": "paraglide-js compile --project ./project.inlang --outdir ./src/i18n --strategy url cookie baseLocale --emit-ts-declarations --silent",
+    "check": "pnpm i18n && wrangler types --check && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "pnpm i18n && wrangler types --check && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "test:unit": "vitest",
-    "test": "npm run test:unit -- --run && npm run test:e2e",
+    "test": "pnpm run test:unit -- --run && npm run test:e2e",
     "test:e2e": "playwright install && playwright test",
-    "deploy": "pnpm run build:site && wrangler pages deploy",
+    "deploy": "pnpm run build:site && wrangler deploy",
     "urls": "node scripts/gen-urls.js",
-    "cf-typegen": "wrangler types src/worker-configuration.d.ts",
+    "cf-typegen": "wrangler types",
     "changeset:version": "changeset version && git add --all",
     "changeset:publish": "changeset publish"
   }