fluentui-svelte 0.5.0 → 0.7.0

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.5.0",
+  "version": "0.7.0",
   "description": "Modern Fluent UI 2 Components for Svelte 5",
   "author": {
     "name": "Jorge Acosta",
@@ -68,72 +68,86 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "fluentui-icons-svelte": "^1.1.1",
+    "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"
   }