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

package/dist/core/toast/toast.css

@@ -0,0 +1,134 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * The region: a strip of the screen's height in the top layer, with the toasts at its
+	 * bottom, across a phone and at the end from 600px. It never changes height, so a toast
+	 * fading out stays where it was while the others move. Around the toasts, presses go
+	 * through to the page.
+	 */
+	.sv-toasts {
+		position: fixed;
+		inset-block: 0;
+		inset-inline: var(--sv-space-8);
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		inline-size: auto;
+		block-size: auto;
+		max-inline-size: none;
+		max-block-size: none;
+		margin: 0;
+		padding-block: 0 calc(var(--sv-space-21) + env(safe-area-inset-bottom, 0px));
+		padding-inline: 0;
+		border: 0;
+		overflow: visible;
+		background: transparent;
+		color: var(--sv-color-text);
+		font-family: var(--sv-font-ui);
+		pointer-events: none;
+	}
+
+	@media (width >= 600px) {
+		.sv-toasts {
+			inset-inline: auto var(--sv-space-21);
+			inline-size: 21rem;
+		}
+	}
+
+	/* F8 focuses the region; the ring goes round the toasts, not the strip. */
+	.sv-toasts:focus-visible {
+		outline: none;
+	}
+
+	.sv-toasts:focus-visible .sv-toasts__list {
+		outline: var(--sv-focus-width) solid var(--sv-color-primary);
+		outline-offset: var(--sv-focus-offset);
+	}
+
+	.sv-toasts__list {
+		display: grid;
+		gap: var(--sv-space-8);
+		margin: 0;
+		padding: 0;
+		border-radius: var(--sv-rounded, min(var(--sv-radius-md), var(--sv-radius-lg)));
+		list-style: none;
+		pointer-events: auto;
+	}
+
+	/* Filled with its colour; neutral is the page inverted, so it reads on any surface. */
+	.sv-toast {
+		display: flex;
+		gap: var(--sv-space-5);
+		align-items: center;
+		box-sizing: border-box;
+		min-block-size: calc(var(--sv-control-lg) * var(--sv-density));
+		padding-block: calc(var(--sv-space-5) * var(--sv-density));
+		padding-inline: calc(var(--sv-space-13) * var(--sv-density)) var(--sv-space-5);
+		border-radius: var(--sv-rounded, min(var(--sv-radius-md), var(--sv-radius-lg)));
+		background-color: var(--sv-variant-bg);
+		box-shadow: var(--sv-shadow);
+		color: var(--sv-variant-fg);
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-snug);
+	}
+
+	.sv-toast__message {
+		flex: 1;
+		min-inline-size: 0;
+		margin: 0;
+		padding-block: var(--sv-space-3);
+		overflow-wrap: break-word;
+	}
+
+	.sv-toast__action,
+	.sv-toast__close {
+		flex: none;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+	}
+
+	.sv-toast__action {
+		min-block-size: var(--sv-control-sm);
+		padding-inline: var(--sv-space-8);
+		border-radius: var(--sv-radius-sm);
+		font: inherit;
+		font-weight: var(--sv-weight-semibold);
+		/* Lettered like the theme's buttons: capitals in a theme that sets them. */
+		letter-spacing: var(--sv-button-tracking);
+		text-transform: var(--sv-button-transform);
+		white-space: nowrap;
+	}
+
+	.sv-toast__close {
+		display: inline-grid;
+		place-items: center;
+		inline-size: var(--sv-control-sm);
+		block-size: var(--sv-control-sm);
+		padding: 0;
+		border-radius: 50%;
+	}
+
+	.sv-toast__close svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	@media (hover: hover) {
+		:is(.sv-toast__action, .sv-toast__close):hover {
+			background-color: color-mix(in oklch, currentColor var(--sv-state-hover), transparent);
+		}
+	}
+
+	:is(.sv-toast__action, .sv-toast__close):active {
+		background-color: color-mix(in oklch, currentColor var(--sv-state-press), transparent);
+	}
+
+	/* The ring takes the toast's own text colour, which contrasts with it in every colour. */
+	.sv-toast :focus-visible {
+		outline-color: currentColor;
+	}
+}

package/dist/core/toast/toast.svelte.d.ts

@@ -0,0 +1,117 @@
+import type { Color, Density, Rounded } from '../props/types.js';
+/** The Toast props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface ToastDefaults {
+    /**
+     * The colour of a toast shown without one: `neutral` is the page inverted.
+     * @default 'neutral'
+     */
+    color: Color;
+    /**
+     * How long a toast stays, in ms, not counting the time it is hovered or focused. `0` keeps
+     * it until it is dismissed.
+     * @default 6000
+     */
+    duration: number;
+    /**
+     * Multiplies the padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../defaults/context.js' {
+    interface ComponentDefaults {
+        Toast: ToastDefaults;
+    }
+}
+/** A button in a toast, such as Undo. The toast closes after `onclick` has run. */
+export interface ToastAction {
+    /** The button's text, short: "Undo", "Retry", "View". */
+    label: string;
+    onclick: () => void;
+}
+/** How a toast looks and how long it stays. Unset options take the Toast defaults. */
+export interface ToastOptions {
+    /** A button that acts on what the message reports, such as Undo. */
+    action?: ToastAction;
+    /** The colour. `error` is announced at once; the others wait for the screen reader to pause. */
+    color?: Color;
+    /** In ms, not counting the time it is hovered or focused. `0` keeps it until it is dismissed. */
+    duration?: number;
+}
+/**
+ * Short messages at the bottom of the screen that report what just happened, with a button
+ * to act on it, such as Undo. At most three show at once, newest first; each leaves after
+ * its duration, which waits while the pointer or focus is on the toasts. F8 moves focus to
+ * them. While a Dialog or Sheet is open they show inside it, so they can still be pressed.
+ * Returned by `useToast()`.
+ *
+ * @example
+ * const toast = useToast();
+ * toast.show('Payment sent', { action: { label: 'Undo', onclick: cancelPayment } });
+ */
+export interface ToastInstance {
+    /** Shows `message` and returns the toast's id. */
+    show(message: string, options?: ToastOptions): string;
+    /** Closes the toast with this id, if it is still shown. */
+    dismiss(id: string): void;
+}
+/** A toast as the outlets render it. */
+export interface ToastEntry {
+    id: string;
+    message: string;
+    color: Color;
+    action?: ToastAction;
+}
+/** What the live regions read out: the message, then the action's label. */
+export interface Announcement {
+    id: string;
+    message: string;
+    action?: string;
+    assertive: boolean;
+}
+/**
+ * The toasts of an app: the queue, the timers and what to announce. Outlets render them: the
+ * provider's at the end of the page, and one inside each open modal dialog, which makes the
+ * rest of the page inert. The topmost outlet shows them all.
+ */
+export declare class Toasts {
+    #private;
+    /** Newest first. */
+    list: ToastEntry[];
+    announcements: Announcement[];
+    /** The provider's outlet, used while no modal dialog has one open. */
+    readonly base: {};
+    constructor(defaults: () => ToastDefaults);
+    /** The outlet that shows the toasts. */
+    get top(): object;
+    /** The density and rounding of every toast, from the provider's defaults. */
+    get style(): Pick<ToastDefaults, 'density' | 'rounded'>;
+    /** Makes `outlet` the topmost until the returned function is called. */
+    register(outlet: object): () => void;
+    show(message: string, { action, color, duration }?: ToastOptions): string;
+    dismiss(id: string): void;
+    /** Stops every timer until each source has resumed: the pointer on the toasts, focus in them. */
+    pause(source: object): void;
+    resume(source: object): void;
+}
+/** The nearest provider's toasts, if there is one. */
+export declare const getToasts: () => Toasts | undefined;
+export declare const setToasts: (toasts: Toasts) => Toasts;
+/**
+ * Returns the toasts of the nearest `<UIProvider>` or `<ToastProvider>`. Call it while a
+ * component initialises; call `show()` whenever something happens.
+ *
+ * @example
+ * <script>
+ *   import { Button, useToast } from '@sveltier/ui';
+ *   const toast = useToast();
+ * </script>
+ *
+ * <Button onclick={() => toast.show('Saved', { color: 'success' })}>Save</Button>
+ */
+export declare function useToast(): ToastInstance;

package/dist/core/toast/toast.svelte.js

@@ -0,0 +1,133 @@
+import { getContext, hasContext, setContext, untrack } from 'svelte';
+import { sveltierError } from '../errors/errors.js';
+// At most this many on screen; a newer toast pushes the oldest out.
+const MAX = 3;
+// Long enough for a screen reader to take the text, short enough that switching outlets
+// does not read it twice.
+const ANNOUNCED = 1000;
+/**
+ * The toasts of an app: the queue, the timers and what to announce. Outlets render them: the
+ * provider's at the end of the page, and one inside each open modal dialog, which makes the
+ * rest of the page inert. The topmost outlet shows them all.
+ */
+export class Toasts {
+    /** Newest first. */
+    list = $state.raw([]);
+    announcements = $state.raw([]);
+    /** The provider's outlet, used while no modal dialog has one open. */
+    base = {};
+    #outlets = $state.raw([]);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- never read reactively
+    #timers = new Map();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- never read reactively
+    #pausers = new Set();
+    #count = 0;
+    #defaults;
+    constructor(defaults) {
+        this.#defaults = defaults;
+    }
+    /** The outlet that shows the toasts. */
+    get top() {
+        return this.#outlets.at(-1) ?? this.base;
+    }
+    /** The density and rounding of every toast, from the provider's defaults. */
+    get style() {
+        const { density, rounded } = this.#defaults();
+        return { density, rounded };
+    }
+    // The methods below may run inside an effect, which must not come to depend on the lists
+    // they change, so they read them untracked.
+    /** Makes `outlet` the topmost until the returned function is called. */
+    register(outlet) {
+        untrack(() => (this.#outlets = [...this.#outlets, outlet]));
+        return () => untrack(() => (this.#outlets = this.#outlets.filter((other) => other !== outlet)));
+    }
+    show(message, { action, color, duration } = {}) {
+        const id = `sv-toast-${++this.#count}`;
+        // Toasts answer what the user does, so they belong to the browser: one shown while the
+        // server renders would have nothing to hydrate into.
+        if (typeof window === 'undefined')
+            return id;
+        const defaults = untrack(this.#defaults);
+        const entry = { id, message, color: color ?? defaults.color, action };
+        untrack(() => (this.list = [entry, ...this.list]));
+        for (const old of untrack(() => this.list.slice(MAX)))
+            this.dismiss(old.id);
+        const time = duration ?? defaults.duration;
+        if (time > 0 && Number.isFinite(time)) {
+            this.#timers.set(id, { remaining: time, started: 0 });
+            if (this.#pausers.size === 0)
+                this.#start(id);
+        }
+        this.#announce(entry);
+        return id;
+    }
+    dismiss(id) {
+        this.#stop(id);
+        this.#timers.delete(id);
+        untrack(() => (this.list = this.list.filter((toast) => toast.id !== id)));
+    }
+    /** Stops every timer until each source has resumed: the pointer on the toasts, focus in them. */
+    pause(source) {
+        if (this.#pausers.size === 0)
+            for (const id of this.#timers.keys())
+                this.#stop(id);
+        this.#pausers.add(source);
+    }
+    resume(source) {
+        if (!this.#pausers.delete(source) || this.#pausers.size > 0)
+            return;
+        for (const id of this.#timers.keys())
+            this.#start(id);
+    }
+    #start(id) {
+        const timer = this.#timers.get(id);
+        if (!timer)
+            return;
+        timer.started = performance.now();
+        timer.handle = setTimeout(() => this.dismiss(id), timer.remaining);
+    }
+    #stop(id) {
+        const timer = this.#timers.get(id);
+        if (timer?.handle === undefined)
+            return;
+        clearTimeout(timer.handle);
+        timer.handle = undefined;
+        timer.remaining -= performance.now() - timer.started;
+    }
+    #announce({ id, message, action, color }) {
+        const note = { id, message, action: action?.label, assertive: color === 'error' };
+        untrack(() => (this.announcements = [...this.announcements, note]));
+        setTimeout(() => {
+            this.announcements = this.announcements.filter((other) => other !== note);
+        }, ANNOUNCED);
+    }
+}
+// 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.toasts');
+/** The nearest provider's toasts, if there is one. */
+export const getToasts = () => hasContext(KEY) ? getContext(KEY) : undefined;
+export const setToasts = (toasts) => setContext(KEY, toasts);
+/**
+ * Returns the toasts of the nearest `<UIProvider>` or `<ToastProvider>`. Call it while a
+ * component initialises; call `show()` whenever something happens.
+ *
+ * @example
+ * <script>
+ *   import { Button, useToast } from '@sveltier/ui';
+ *   const toast = useToast();
+ * </script>
+ *
+ * <Button onclick={() => toast.show('Saved', { color: 'success' })}>Save</Button>
+ */
+export function useToast() {
+    const toasts = getToasts();
+    if (!toasts) {
+        throw sveltierError('SV4003', 'useToast() was called outside a <UIProvider>. Call it in a component inside <UIProvider>, or inside <ToastProvider> when the app uses <ThemeProvider> alone.');
+    }
+    return {
+        show: (message, options) => toasts.show(message, options),
+        dismiss: (id) => toasts.dismiss(id)
+    };
+}

package/dist/dev/off.d.ts

@@ -0,0 +1,5 @@
+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;
+export declare const warnNamelessTrigger: typeof On.warnNamelessTrigger;

package/dist/dev/off.js

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

package/dist/dev/on.d.ts

@@ -0,0 +1,20 @@
+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 or a dialog has no accessible name: no label with text, and no ARIA
+ * name. `give` names what to add, as the message says it ("a label", "a title").
+ */
+export declare function warnUnnamed(component: string, element: (HTMLElement & {
+    labels?: NodeListOf<HTMLLabelElement> | null;
+}) | null | undefined, give?: string): void;
+/**
+ * Warns when a tooltip describes a control that has no accessible name: a description names
+ * nothing, so an icon-only button would be announced as just "button".
+ */
+export declare function warnNamelessTrigger(component: string, element: HTMLElement & {
+    labels?: NodeListOf<HTMLLabelElement> | null;
+}): void;

package/dist/dev/on.js

@@ -0,0 +1,49 @@
+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 or a dialog has no accessible name: no label with text, and no ARIA
+ * name. `give` names what to add, as the message says it ("a label", "a title").
+ */
+export function warnUnnamed(component, element, give = 'a label') {
+    if (!element)
+        return;
+    // A label that wraps the control but holds no text names nothing.
+    if ([...(element.labels ?? [])].some((label) => label.textContent?.trim()))
+        return;
+    if (element.getAttribute('aria-label') || element.getAttribute('aria-labelledby'))
+        return;
+    warn('SV5001', `<${component}> has no accessible name. Give it ${give}, or name it with aria-label or aria-labelledby.`);
+}
+/**
+ * Warns when a tooltip describes a control that has no accessible name: a description names
+ * nothing, so an icon-only button would be announced as just "button".
+ */
+export function warnNamelessTrigger(component, element) {
+    if (element.textContent?.trim() ||
+        element.querySelector('img[alt]:not([alt=""])') ||
+        ['aria-label', 'aria-labelledby', 'title'].some((name) => element.getAttribute(name)) ||
+        [...(element.labels ?? [])].some((label) => label.textContent?.trim())) {
+        return;
+    }
+    warn('SV4002', `<${component}> describes a control that has no accessible name. A tooltip adds a description, not a name: give the control aria-label, as every icon-only button needs, or visible text.`);
+}

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+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 { CLOSE_REASONS, type CloseReason, type TriggerAttributes } from './core/overlay/types.js';
+export { default as ToastProvider, type ToastProviderProps } from './core/toast/ToastProvider.svelte';
+export { useToast, type ToastAction, type ToastDefaults, type ToastInstance, type ToastOptions } from './core/toast/toast.svelte.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 { Accordion, type AccordionDefaults, type AccordionItem, type AccordionProps } from './components/Accordion/index.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 { Dialog, type DialogDefaults, type DialogProps } from './components/Dialog/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 { Menu, type MenuAction, type MenuDefaults, type MenuHeading, type MenuItem, type MenuProps, type MenuSeparator } from './components/Menu/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 { Popover, type PopoverDefaults, type PopoverProps } from './components/Popover/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 { Sheet, SHEET_SIDES, type SheetDefaults, type SheetProps, type SheetSide } from './components/Sheet/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';
+export { Tooltip, type TooltipDefaults, type TooltipProps } from './components/Tooltip/index.js';

package/dist/index.js

@@ -0,0 +1,83 @@
+// 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';
+// Overlays: what an overlay hands to the control that opens it
+export { CLOSE_REASONS } from './core/overlay/types.js';
+// Toasts
+export { default as ToastProvider } from './core/toast/ToastProvider.svelte';
+export { useToast } from './core/toast/toast.svelte.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 { Accordion } from './components/Accordion/index.js';
+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 { Dialog } from './components/Dialog/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 { Menu } from './components/Menu/index.js';
+export { NativeSelect } from './components/NativeSelect/index.js';
+export { NumberField } from './components/NumberField/index.js';
+export { Popover } from './components/Popover/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 { Sheet, SHEET_SIDES } from './components/Sheet/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';
+export { Tooltip } from './components/Tooltip/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>;