@sveltier/ui 0.0.0-stage → 0.1.0-alpha.0

package/dist/core/theme/color.js

@@ -0,0 +1,54 @@
+// Minimal oklch maths: enough to pick readable "on" colours and to check WCAG contrast.
+// Conversion from Björn Ottosson's OKLab reference (https://bottosson.github.io/posts/oklab/).
+const OKLCH = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)(%?)\s+([\d.]+)(?:deg)?\s*(?:\/\s*([\d.]+)(%?))?\s*\)$/i;
+/** Parses `oklch(L C H)` or `oklch(L C H / A)` with numbers or percentages. */
+export function parseOklch(value) {
+    const match = OKLCH.exec(value.trim());
+    if (!match)
+        return undefined;
+    const [, l = '0', lPct, c = '0', cPct, h = '0', a, aPct] = match;
+    return {
+        l: lPct ? +l / 100 : +l,
+        c: cPct ? (+c / 100) * 0.4 : +c,
+        h: +h,
+        alpha: a === undefined ? 1 : aPct ? +a / 100 : +a
+    };
+}
+const clamp01 = (value) => Math.min(1, Math.max(0, value));
+/** Linear-light sRGB channels, clamped to the sRGB gamut. */
+export function toLinearSrgb({ l, c, h }) {
+    const rad = (h * Math.PI) / 180;
+    const a = c * Math.cos(rad);
+    const b = c * Math.sin(rad);
+    const l3 = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const m3 = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s3 = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    return [
+        clamp01(4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3),
+        clamp01(-1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3),
+        clamp01(-0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3)
+    ];
+}
+/** WCAG relative luminance of an opaque colour. */
+export function luminance(color) {
+    const [r, g, b] = toLinearSrgb(color);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** WCAG 2 contrast ratio between two opaque oklch colours (1–21). */
+export function contrast(a, b) {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+const format = ({ l, c, h }) => `oklch(${l} ${c} ${h})`;
+/**
+ * Picks a readable text colour for a filled background: a deep ink or a near-white, both
+ * tinted with the background's hue, whichever contrasts more.
+ */
+export function onColor(background) {
+    const bg = parseOklch(background);
+    if (!bg)
+        return undefined;
+    const dark = { l: 0.2, c: 0.02, h: bg.h, alpha: 1 };
+    const light = { l: 0.985, c: 0.005, h: bg.h, alpha: 1 };
+    return format(contrast(bg, dark) >= contrast(bg, light) ? dark : light);
+}

package/dist/core/theme/context.d.ts

@@ -0,0 +1,25 @@
+import type { ThemeChoice, ThemeDefinition } from './types.js';
+/** The nearest `<ThemeProvider>`, as seen by `useTheme()`. All fields are reactive. */
+export interface ThemeInstance {
+    /** "system" or a theme name. */
+    readonly choice: ThemeChoice;
+    /**
+     * The theme in effect. With "system" it follows `prefers-color-scheme`; during server
+     * rendering, where the preference is unknown, it is the `light` theme.
+     */
+    readonly name: string;
+    readonly current: ThemeDefinition;
+    readonly isDark: boolean;
+    readonly themes: Readonly<Record<string, ThemeDefinition>>;
+    /** Theme names that "system" and `toggle()` switch between. */
+    readonly light: string;
+    readonly dark: string;
+    /** Selects a theme name or "system". The root provider remembers it. */
+    set(choice: ThemeChoice): void;
+    /** Switches between the `light` and `dark` themes. */
+    toggle(): void;
+}
+export declare const hasThemeContext: () => boolean;
+export declare const setThemeContext: (theme: ThemeInstance) => ThemeInstance;
+/** Returns the nearest theme. Must be called during component initialisation. */
+export declare function useTheme(): ThemeInstance;

package/dist/core/theme/context.js

@@ -0,0 +1,14 @@
+import { getContext, hasContext, setContext } from 'svelte';
+import { sveltierError } from '../errors/errors.js';
+// A private symbol key instead of createContext(): its `has` function only exists from
+// Svelte 5.57, and the supported range starts at 5.40.
+const KEY = Symbol('sveltier.theme');
+export const hasThemeContext = () => hasContext(KEY);
+export const setThemeContext = (theme) => setContext(KEY, theme);
+/** Returns the nearest theme. Must be called during component initialisation. */
+export function useTheme() {
+    if (!hasContext(KEY)) {
+        throw sveltierError('SV1007', 'useTheme() was called outside a <ThemeProvider>. Call it in a component inside <UIProvider> or <ThemeProvider>.');
+    }
+    return getContext(KEY);
+}

package/dist/core/theme/css.d.ts

@@ -0,0 +1,25 @@
+import type { ThemeChoice, ThemeDefinition } from './types.js';
+export declare const THEME_ATTRIBUTE = "data-sv-theme";
+export interface ThemeCssOptions {
+    themes: Record<string, ThemeDefinition>;
+    /** Theme used by "system" when the OS prefers light. */
+    light: string;
+    /** Theme used by "system" when the OS prefers dark. */
+    dark: string;
+    /** What `<html>` shows before any attribute is set (no JavaScript, nothing stored). */
+    fallback: ThemeChoice;
+}
+/**
+ * One stylesheet for every theme, keyed by `data-sv-theme`. "system" is pure CSS
+ * (`prefers-color-scheme`), so the right theme paints before any JavaScript runs.
+ * It also holds a `.sv-color-<name>` class for every colour with an `on-` colour (intents
+ * and custom colours), which a component's `color` prop sets.
+ */
+export declare function themeCss({ themes, light, dark, fallback }: ThemeCssOptions): string;
+/**
+ * Render-blocking script for `<head>`: applies a stored choice to `<html>` before the body
+ * is parsed, if it is one of `choices`. Exposed so a Content Security Policy can hash it.
+ */
+export declare function themeScript(storageKey: string, choices: string[]): string;
+/** Markup for `<svelte:head>`: the theme stylesheet, then the optional script. */
+export declare function themeHead(css: string, script: string, nonce?: string): string;

package/dist/core/theme/css.js

@@ -0,0 +1,69 @@
+import { sveltierError } from '../errors/errors.js';
+export const THEME_ATTRIBUTE = 'data-sv-theme';
+const NAME = /^(?!system$)[a-z][\w-]*$/i;
+const KEY = /^[a-z][\w-]*$/i;
+const UNSAFE = /[<>{};]/;
+const NONCE = /^[\w+/=-]+$/;
+function check(ok, code, message) {
+    if (!ok)
+        throw sveltierError(code, message);
+}
+/** `{color-scheme:…;--sv-color-x:…;--sv-on-x:…;--sv-var:…}` for one theme. */
+function block(theme, name, registered) {
+    check(theme, 'SV1002', `Unknown theme "${name}". Registered: ${registered}.`);
+    let out = `color-scheme:${theme.dark ? 'dark' : 'light'}`;
+    const entries = [
+        ...Object.entries(theme.colors).map(([k, v]) => [k.startsWith('on-') ? k : `color-${k}`, v]),
+        ...Object.entries(theme.variables)
+    ];
+    for (const [key, value] of entries) {
+        check(KEY.test(key), 'SV1003', `Invalid colour or variable name "${key}". Use letters, digits, - and _, starting with a letter.`);
+        check(!UNSAFE.test(String(value)), 'SV1004', `Unsafe value for "${key}": it contains <, >, {, } or ;. Use a plain CSS value.`);
+        out += `;--sv-${key}:${value}`;
+    }
+    return `{${out}}`;
+}
+/**
+ * One stylesheet for every theme, keyed by `data-sv-theme`. "system" is pure CSS
+ * (`prefers-color-scheme`), so the right theme paints before any JavaScript runs.
+ * It also holds a `.sv-color-<name>` class for every colour with an `on-` colour (intents
+ * and custom colours), which a component's `color` prop sets.
+ */
+export function themeCss({ themes, light, dark, fallback }) {
+    const attr = (name) => `[${THEME_ATTRIBUTE}="${name}"]`;
+    const bare = `:root:not([${THEME_ATTRIBUTE}])`;
+    const system = attr('system') + (fallback === 'system' ? `,${bare}` : '');
+    const colors = new Set();
+    const registered = Object.keys(themes).join(', ');
+    let css = '';
+    for (const [name, theme] of Object.entries(themes)) {
+        check(NAME.test(name), 'SV1005', `Invalid theme name "${name}". Use letters, digits, - and _, starting with a letter; "system" is reserved.`);
+        css += attr(name) + block(theme, name, registered);
+        for (const key in theme.colors)
+            if (key.startsWith('on-'))
+                colors.add(key.slice(3));
+    }
+    css += `@media (prefers-color-scheme:light){${system}${block(themes[light], light, registered)}}`;
+    css += `@media (prefers-color-scheme:dark){${system}${block(themes[dark], dark, registered)}}`;
+    if (fallback !== 'system')
+        css += bare + block(themes[fallback], fallback, registered);
+    let classes = '';
+    for (const color of colors) {
+        classes += `.sv-color-${color}{--sv-color:var(--sv-color-${color});--sv-on-color:var(--sv-on-${color})}`;
+    }
+    return `@layer sv.tokens,sv.base,sv.components,sv.utilities;@layer sv.tokens{${css}}@layer sv.base{${classes}}`;
+}
+/**
+ * Render-blocking script for `<head>`: applies a stored choice to `<html>` before the body
+ * is parsed, if it is one of `choices`. Exposed so a Content Security Policy can hash it.
+ */
+export function themeScript(storageKey, choices) {
+    const json = (data) => JSON.stringify(data).replace(/</g, '\\u003c');
+    return `(function(){try{var t=localStorage.getItem(${json(storageKey)});if(${json(choices)}.indexOf(t)>-1)document.documentElement.setAttribute("${THEME_ATTRIBUTE}",t)}catch(e){}})()`;
+}
+/** Markup for `<svelte:head>`: the theme stylesheet, then the optional script. */
+export function themeHead(css, script, nonce) {
+    check(nonce === undefined || NONCE.test(nonce), 'SV1006', 'Invalid nonce. Pass the base64 nonce of your Content Security Policy as it is.');
+    const attr = nonce ? ` nonce="${nonce}"` : '';
+    return `<style id="sv-theme"${attr}>${css}</style>${script && `<script${attr}>${script}</script>`}`;
+}

package/dist/core/theme/define.d.ts

@@ -0,0 +1,11 @@
+import type { ThemeDefinition, ThemeInput } from './types.js';
+/**
+ * Builds a complete theme from the parts you change over `base`, the theme you extend.
+ * Missing colours and variables come from `base`. `on-` colours are recomputed for every
+ * colour you override, unless you pass them yourself. `base` is never mutated.
+ *
+ * @example
+ * import { monolithDark } from '@sveltier/ui/themes/monolith';
+ * const midnight = defineTheme({ colors: { primary: 'oklch(0.78 0.11 260)' } }, monolithDark);
+ */
+export declare function defineTheme(input: ThemeInput, base: ThemeDefinition): ThemeDefinition;

package/dist/core/theme/define.js

@@ -0,0 +1,21 @@
+import { withOnColors } from './resolve.js';
+/**
+ * Builds a complete theme from the parts you change over `base`, the theme you extend.
+ * Missing colours and variables come from `base`. `on-` colours are recomputed for every
+ * colour you override, unless you pass them yourself. `base` is never mutated.
+ *
+ * @example
+ * import { monolithDark } from '@sveltier/ui/themes/monolith';
+ * const midnight = defineTheme({ colors: { primary: 'oklch(0.78 0.11 260)' } }, monolithDark);
+ */
+export function defineTheme(input, base) {
+    const overrides = input.colors ?? {};
+    const colors = { ...base.colors };
+    for (const name of Object.keys(overrides))
+        delete colors[`on-${name}`];
+    return withOnColors({
+        dark: input.dark ?? base.dark,
+        colors: { ...colors, ...overrides },
+        variables: { ...base.variables, ...input.variables }
+    });
+}

package/dist/core/theme/resolve.d.ts

@@ -0,0 +1,6 @@
+import { type ThemeDefinition } from './types.js';
+/**
+ * Returns a copy of the theme where every non-neutral colour without an explicit `on-`
+ * colour gets a computed one (a deep ink or a near-white, whichever contrasts more).
+ */
+export declare function withOnColors(theme: ThemeDefinition): ThemeDefinition;

package/dist/core/theme/resolve.js

@@ -0,0 +1,18 @@
+import { onColor } from './color.js';
+import { NEUTRAL_COLORS } from './types.js';
+const NEUTRAL = new Set(NEUTRAL_COLORS);
+/**
+ * Returns a copy of the theme where every non-neutral colour without an explicit `on-`
+ * colour gets a computed one (a deep ink or a near-white, whichever contrasts more).
+ */
+export function withOnColors(theme) {
+    const colors = { ...theme.colors };
+    for (const [name, value] of Object.entries(theme.colors)) {
+        if (NEUTRAL.has(name) || name.startsWith('on-') || colors[`on-${name}`])
+            continue;
+        const on = onColor(value);
+        if (on)
+            colors[`on-${name}`] = on;
+    }
+    return { ...theme, colors };
+}

package/dist/core/theme/theme-provider.css

@@ -0,0 +1,13 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* A theme scope only re-declares custom properties, which inherit through display: contents. */
+	.sv-theme-provider {
+		display: contents;
+	}
+
+	.sv-theme-provider--background {
+		display: block;
+		background-color: var(--sv-color-background);
+	}
+}

package/dist/core/theme/types.d.ts

@@ -0,0 +1,35 @@
+/** Neutral roles: page, surfaces, rules and text. They have no `on-` colour. */
+export declare const NEUTRAL_COLORS: readonly ["background", "surface", "surface-raised", "border", "border-soft", "border-strong", "text", "text-muted", "text-subtle"];
+/**
+ * Intent colours, usable as a component's `color`. Each gets an `on-` colour for text on a
+ * filled background. `up` / `down` are price direction and are kept separate from
+ * `success` / `error`, because some markets show rising prices in red.
+ */
+export declare const INTENT_COLORS: readonly ["primary", "success", "warning", "error", "info", "up", "down"];
+export type NeutralColor = (typeof NEUTRAL_COLORS)[number];
+export type IntentColor = (typeof INTENT_COLORS)[number];
+/** Every colour value is an `oklch()` string. */
+export type ThemeColors = Record<NeutralColor | IntentColor, string> & Partial<Record<`on-${IntentColor}`, string>> & Record<string, string>;
+/**
+ * The theme contract: every theme sets all of these, so one theme switch restyles type,
+ * shape, depth and motion as well as colour. Emitted as `--sv-<name>`.
+ */
+export declare const THEME_VARIABLES: readonly ["font-display", "font-ui", "font-data", "weight-display", "tracking-display", "label-size", "label-transform", "label-tracking", "button-transform", "button-tracking", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-full", "surface-alpha", "surface-blur", "backdrop", "ornament", "bevel", "shadow", "ease", "duration-fast", "duration-normal", "duration-slow"];
+export type ThemeVariable = (typeof THEME_VARIABLES)[number];
+export type ThemeVariables = Record<ThemeVariable, string | number>;
+export interface ThemeDefinition {
+    /** Dark themes set `color-scheme: dark` and are the `dark` target of "system". */
+    dark: boolean;
+    /** Emitted as `--sv-color-<name>`, and `on-<name>` keys as `--sv-on-<name>`. */
+    colors: ThemeColors;
+    /** The theme contract plus any extra custom properties, emitted as `--sv-<name>`. */
+    variables: ThemeVariables & Record<string, string | number>;
+}
+/** Partial theme accepted by `defineTheme()`; missing values come from the base theme. */
+export interface ThemeInput {
+    dark?: boolean;
+    colors?: Partial<ThemeColors>;
+    variables?: Partial<ThemeVariables> & Record<string, string | number>;
+}
+/** A user choice: a theme name, or "system" to follow `prefers-color-scheme`. */
+export type ThemeChoice = 'system' | (string & {});

package/dist/core/theme/types.js

@@ -0,0 +1,61 @@
+/** Neutral roles: page, surfaces, rules and text. They have no `on-` colour. */
+export const NEUTRAL_COLORS = [
+    'background',
+    'surface',
+    'surface-raised',
+    'border',
+    'border-soft',
+    'border-strong',
+    'text',
+    'text-muted',
+    'text-subtle'
+];
+/**
+ * Intent colours, usable as a component's `color`. Each gets an `on-` colour for text on a
+ * filled background. `up` / `down` are price direction and are kept separate from
+ * `success` / `error`, because some markets show rising prices in red.
+ */
+export const INTENT_COLORS = [
+    'primary',
+    'success',
+    'warning',
+    'error',
+    'info',
+    'up',
+    'down'
+];
+/**
+ * The theme contract: every theme sets all of these, so one theme switch restyles type,
+ * shape, depth and motion as well as colour. Emitted as `--sv-<name>`.
+ */
+export const THEME_VARIABLES = [
+    // Type
+    'font-display',
+    'font-ui',
+    'font-data',
+    'weight-display',
+    'tracking-display',
+    'label-size',
+    'label-transform',
+    'label-tracking',
+    'button-transform',
+    'button-tracking',
+    // Shape
+    'radius-sm',
+    'radius-md',
+    'radius-lg',
+    'radius-xl',
+    'radius-full',
+    // Depth
+    'surface-alpha',
+    'surface-blur',
+    'backdrop',
+    'ornament',
+    'bevel',
+    'shadow',
+    // Motion (collapsed to near zero when the user prefers reduced motion)
+    'ease',
+    'duration-fast',
+    'duration-normal',
+    'duration-slow'
+];

package/dist/dev/off.d.ts

@@ -0,0 +1,4 @@
+import type * as On from './on.js';
+export declare const DEV: boolean;
+export declare const checkValue: typeof On.checkValue;
+export declare const warnUnnamed: typeof On.warnUnnamed;

package/dist/dev/off.js

@@ -0,0 +1,3 @@
+export const DEV = false;
+export const checkValue = () => { };
+export const warnUnnamed = () => { };

package/dist/dev/on.d.ts

@@ -0,0 +1,8 @@
+export declare const DEV: boolean;
+/**
+ * Warns when a prop that takes one of a fixed set of values got another one. `hint` names the
+ * likely intent, for example the prop the value belongs to.
+ */
+export declare function checkValue(component: string, prop: string, value: unknown, valid: readonly unknown[], hint?: string): void;
+/** Warns when a form control has no accessible name: no label with text, and no ARIA name. */
+export declare function warnUnnamed(component: string, control: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null | undefined): void;

package/dist/dev/on.js

@@ -0,0 +1,33 @@
+import { ERRORS_URL } from '../core/errors/errors.js';
+export const DEV = true;
+const warned = new Set();
+/** Warns once per message, in the format of thrown errors. */
+function warn(code, message) {
+    const text = `[sveltier ${code}] ${message} ${ERRORS_URL}#${code}`;
+    if (warned.has(text))
+        return;
+    warned.add(text);
+    console.warn(text);
+}
+const show = (value) => (typeof value === 'string' ? `'${value}'` : String(value));
+/**
+ * Warns when a prop that takes one of a fixed set of values got another one. `hint` names the
+ * likely intent, for example the prop the value belongs to.
+ */
+export function checkValue(component, prop, value, valid, hint) {
+    if (value == null || valid.includes(value))
+        return;
+    const got = typeof value === 'string' ? `"${value}"` : `{${String(value)}}`;
+    warn('SV2002', `<${component}> got ${prop}=${got}. Valid values: ${valid.map(show).join(' | ')}.${hint ? ` ${hint}` : ''}`);
+}
+/** Warns when a form control has no accessible name: no label with text, and no ARIA name. */
+export function warnUnnamed(component, control) {
+    if (!control)
+        return;
+    // A label that wraps the control but holds no text names nothing.
+    if ([...(control.labels ?? [])].some((label) => label.textContent?.trim()))
+        return;
+    if (control.getAttribute('aria-label') || control.getAttribute('aria-labelledby'))
+        return;
+    warn('SV5001', `<${component}> has no accessible name. Give it a label, or name it with aria-label or aria-labelledby.`);
+}

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+export { default as UIProvider, type UIProviderProps } from './core/provider/UIProvider.svelte';
+export { default as ThemeProvider, type ThemeProviderProps } from './core/theme/ThemeProvider.svelte';
+export { useTheme, type ThemeInstance } from './core/theme/context.js';
+export { defineTheme } from './core/theme/define.js';
+export { themeCss, themeScript, type ThemeCssOptions } from './core/theme/css.js';
+export { contrast, onColor, parseOklch, type Oklch } from './core/theme/color.js';
+export { INTENT_COLORS, NEUTRAL_COLORS, THEME_VARIABLES, type IntentColor, type NeutralColor, type ThemeChoice, type ThemeColors, type ThemeDefinition, type ThemeInput, type ThemeVariable, type ThemeVariables } from './core/theme/types.js';
+export { monolith, monolithDark, monolithLight } from './themes/monolith.js';
+export { heritage, heritageDark, heritageLight } from './themes/heritage.js';
+export { aurora, auroraDark, auroraLight } from './themes/aurora.js';
+export { maison, maisonDark, maisonLight } from './themes/maison.js';
+export { milano, milanoDark, milanoLight } from './themes/milano.js';
+export { DENSITIES, ROUNDED, SIZES, VARIANTS, type Color, type CustomColors, type Density, type Rounded, type SharedProps, type Size, type Variant } from './core/props/types.js';
+export { sharedClasses, type SharedClassProps } from './core/props/classes.js';
+export type { ElementProps } from './core/props/element.js';
+export { default as DefaultsProvider, type DefaultsProviderProps } from './core/defaults/DefaultsProvider.svelte';
+export { useDefaults, type ComponentDefaults, type DefaultsConfig, type GlobalDefaults } from './core/defaults/context.js';
+export { BREAKPOINTS, useDisplay, type Breakpoint, type DisplayInstance, type DisplayOptions, type DisplayThresholds } from './core/display/display.js';
+export { MESSAGES, useLocale, type LocaleInstance, type LocaleOptions, type MessageKey, type Messages } from './core/locale/locale.js';
+export { ERROR_CODES, type ErrorCode, type ErrorEntry } from './core/errors/codes.js';
+export type { FieldError, Rule, ValidateOn } from './core/form/types.js';
+export { focusTrap, type FocusTrapOptions } from './primitives/focus/focus-trap.js';
+export { rovingFocus, type RovingFocusOptions } from './primitives/focus/roving-focus.js';
+export { isTabbable, tabbable, type FocusableElement } from './primitives/focus/tabbable.js';
+export { dismissable, type DismissableOptions, type DismissReason } from './primitives/layer/dismissable.js';
+export { default as Portal, type PortalProps } from './primitives/portal/Portal.svelte';
+export { inertOthers } from './primitives/inert/inert-others.js';
+export { scrollLock } from './primitives/scroll-lock/scroll-lock.js';
+export { anchored, type Align, type AnchoredOptions, type Side } from './primitives/anchored/anchored.js';
+export { combination, keymap, type KeyHandler } from './primitives/keyboard/keymap.js';
+export { typeahead, type TypeaheadOptions } from './primitives/keyboard/typeahead.js';
+export { cubicBezier } from './primitives/motion/easing.js';
+export { easing, fade, motion, pop, rise, spring, SPRINGS, type Motion, type SpringPreset, type TransitionOptions } from './primitives/motion/motion.js';
+export { virtualList, type ScrollToIndexOptions, type VirtualItem, type VirtualKey, type VirtualList, type VirtualListOptions } from './primitives/virtual/virtual-list.svelte.js';
+export { Alert, type AlertDefaults, type AlertProps } from './components/Alert/index.js';
+export { Avatar, type AvatarDefaults, type AvatarProps } from './components/Avatar/index.js';
+export { Badge, type BadgeDefaults, type BadgeProps } from './components/Badge/index.js';
+export { Button, type ButtonDefaults, type ButtonProps } from './components/Button/index.js';
+export { ButtonGroup, type ButtonGroupDefaults, type ButtonGroupProps } from './components/ButtonGroup/index.js';
+export { Card, type CardDefaults, type CardProps } from './components/Card/index.js';
+export { Checkbox, type CheckboxDefaults, type CheckboxProps } from './components/Checkbox/index.js';
+export { Chip, type ChipDefaults, type ChipProps } from './components/Chip/index.js';
+export { Divider, type DividerProps } from './components/Divider/index.js';
+export { Field, FIELD_VARIANTS, type FieldContentProps, type FieldControlAttributes, type FieldDefaults, type FieldProps, type FieldVariant } from './components/Field/index.js';
+export { Form, type FormProps } from './components/Form/index.js';
+export { Icon, type IconProps } from './components/Icon/index.js';
+export { List, ListItem, type ListDefaults, type ListItemProps, type ListProps } from './components/List/index.js';
+export { NativeSelect, type NativeSelectDefaults, type NativeSelectOption, type NativeSelectProps } from './components/NativeSelect/index.js';
+export { NumberField, type NumberFieldDefaults, type NumberFieldProps } from './components/NumberField/index.js';
+export { ProgressCircular, ProgressLinear, type ProgressCircularDefaults, type ProgressCircularProps, type ProgressLinearDefaults, type ProgressLinearProps } from './components/Progress/index.js';
+export { RadioGroup, type RadioGroupDefaults, type RadioGroupOption, type RadioGroupProps } from './components/RadioGroup/index.js';
+export { SegmentedControl, type SegmentedControlDefaults, type SegmentedControlOption, type SegmentedControlProps } from './components/SegmentedControl/index.js';
+export { Skeleton, type SkeletonProps } from './components/Skeleton/index.js';
+export { Slider, type SliderDefaults, type SliderProps, type SliderTick } from './components/Slider/index.js';
+export { Switch, type SwitchDefaults, type SwitchProps } from './components/Switch/index.js';
+export { Tabs, type TabsDefaults, type TabsItem, type TabsProps } from './components/Tabs/index.js';
+export { Textarea, type TextareaDefaults, type TextareaProps } from './components/Textarea/index.js';
+export { TextField, type TextFieldDefaults, type TextFieldProps, type TextFieldType } from './components/TextField/index.js';

package/dist/index.js

@@ -0,0 +1,72 @@
+// Root provider
+export { default as UIProvider } from './core/provider/UIProvider.svelte';
+// Theme engine
+export { default as ThemeProvider } from './core/theme/ThemeProvider.svelte';
+export { useTheme } from './core/theme/context.js';
+export { defineTheme } from './core/theme/define.js';
+export { themeCss, themeScript } from './core/theme/css.js';
+export { contrast, onColor, parseOklch } from './core/theme/color.js';
+export { INTENT_COLORS, NEUTRAL_COLORS, THEME_VARIABLES } from './core/theme/types.js';
+// Built-in themes, also importable one by one from '@sveltier/ui/themes/<name>'
+export { monolith, monolithDark, monolithLight } from './themes/monolith.js';
+export { heritage, heritageDark, heritageLight } from './themes/heritage.js';
+export { aurora, auroraDark, auroraLight } from './themes/aurora.js';
+export { maison, maisonDark, maisonLight } from './themes/maison.js';
+export { milano, milanoDark, milanoLight } from './themes/milano.js';
+// Shared props
+export { DENSITIES, ROUNDED, SIZES, VARIANTS } from './core/props/types.js';
+export { sharedClasses } from './core/props/classes.js';
+// Defaults
+export { default as DefaultsProvider } from './core/defaults/DefaultsProvider.svelte';
+export { useDefaults } from './core/defaults/context.js';
+// Display
+export { BREAKPOINTS, useDisplay } from './core/display/display.js';
+// Locale
+export { MESSAGES, useLocale } from './core/locale/locale.js';
+// Errors
+export { ERROR_CODES } from './core/errors/codes.js';
+// Primitives: focus
+export { focusTrap } from './primitives/focus/focus-trap.js';
+export { rovingFocus } from './primitives/focus/roving-focus.js';
+export { isTabbable, tabbable } from './primitives/focus/tabbable.js';
+// Primitives: layers
+export { dismissable } from './primitives/layer/dismissable.js';
+// Primitives: portal and modality
+export { default as Portal } from './primitives/portal/Portal.svelte';
+export { inertOthers } from './primitives/inert/inert-others.js';
+export { scrollLock } from './primitives/scroll-lock/scroll-lock.js';
+// Primitives: positioning
+export { anchored } from './primitives/anchored/anchored.js';
+// Primitives: keyboard
+export { combination, keymap } from './primitives/keyboard/keymap.js';
+export { typeahead } from './primitives/keyboard/typeahead.js';
+// Primitives: motion
+export { cubicBezier } from './primitives/motion/easing.js';
+export { easing, fade, motion, pop, rise, spring, SPRINGS } from './primitives/motion/motion.js';
+// Primitives: virtual lists
+export { virtualList } from './primitives/virtual/virtual-list.svelte.js';
+// Components
+export { Alert } from './components/Alert/index.js';
+export { Avatar } from './components/Avatar/index.js';
+export { Badge } from './components/Badge/index.js';
+export { Button } from './components/Button/index.js';
+export { ButtonGroup } from './components/ButtonGroup/index.js';
+export { Card } from './components/Card/index.js';
+export { Checkbox } from './components/Checkbox/index.js';
+export { Chip } from './components/Chip/index.js';
+export { Divider } from './components/Divider/index.js';
+export { Field, FIELD_VARIANTS } from './components/Field/index.js';
+export { Form } from './components/Form/index.js';
+export { Icon } from './components/Icon/index.js';
+export { List, ListItem } from './components/List/index.js';
+export { NativeSelect } from './components/NativeSelect/index.js';
+export { NumberField } from './components/NumberField/index.js';
+export { ProgressCircular, ProgressLinear } from './components/Progress/index.js';
+export { RadioGroup } from './components/RadioGroup/index.js';
+export { SegmentedControl } from './components/SegmentedControl/index.js';
+export { Skeleton } from './components/Skeleton/index.js';
+export { Slider } from './components/Slider/index.js';
+export { Switch } from './components/Switch/index.js';
+export { Tabs } from './components/Tabs/index.js';
+export { Textarea } from './components/Textarea/index.js';
+export { TextField } from './components/TextField/index.js';

package/dist/primitives/anchored/anchored.d.ts

@@ -0,0 +1,39 @@
+import type { Attachment } from 'svelte/attachments';
+export declare const SIDES: readonly ["top", "bottom", "start", "end"];
+export declare const ALIGNS: readonly ["start", "center", "end"];
+export declare const PHYSICAL_SIDES: readonly ["top", "bottom", "left", "right"];
+/** Side of the anchor. `start` and `end` follow the writing direction. */
+export type Side = (typeof SIDES)[number];
+/** Alignment along that side, following the writing direction. */
+export type Align = (typeof ALIGNS)[number];
+export type PhysicalSide = (typeof PHYSICAL_SIDES)[number];
+export interface AnchoredOptions {
+    /** The element to place against. Nothing happens until it exists. */
+    anchor: Element | null | undefined;
+    /** Defaults to `'bottom'`. */
+    side?: Side;
+    /** Defaults to `'start'`. */
+    align?: Align;
+    /** Gap between the anchor and the floating element, in px. Defaults to 5. */
+    offset?: number;
+    /** Move to the opposite side when there is not enough room. Defaults to `true`. */
+    flip?: boolean;
+}
+/**
+ * The physical side, and the alignment in physical terms (start is left or top), of a
+ * logical placement in the element's direction. Both placement paths use it, so they agree.
+ */
+export declare function physical(side: Side, align: Align, rtl: boolean): [PhysicalSide, Align];
+/** `position-area` in physical keywords: `bottom span-right` is below, from the left edge. */
+export declare function positionArea(side: PhysicalSide, align: Align): string;
+/**
+ * Places the element next to `anchor` and keeps it there on scroll and resize, flipping to
+ * the opposite side when there is not enough room. Uses CSS anchor positioning where the
+ * browser has it, otherwise loads a small script. The element must be positioned against the
+ * viewport: a popover in the top layer, or `position: fixed`.
+ *
+ * @example
+ * <button bind:this={trigger}>Account</button>
+ * <div popover="manual" {@attach anchored({ anchor: trigger, side: 'bottom', align: 'end' })}>…</div>
+ */
+export declare function anchored({ anchor, side, align, offset, flip }: AnchoredOptions): Attachment<HTMLElement>;