@sveltier/ui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/components/Popover/types.d.ts

@@ -0,0 +1,83 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Density, Rounded, Size } from '../../core/props/types.js';
+import type { Align, Side } from '../../primitives/anchored/anchored.js';
+/** The Popover props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface PopoverDefaults {
+    /**
+     * The widest it grows, from `xs` (13rem) to `xl` (34rem); narrower content keeps it narrower.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius for large surfaces.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Popover: PopoverDefaults;
+    }
+}
+/**
+ * A panel next to the control that opens it, for content the user works in: a few fields, a
+ * choice, a short explanation with a link. It does not block the page: Escape, a press outside
+ * and focus moving out close it. Focus moves into it when it opens and back to the control when
+ * it closes from inside. For text that only describes a control, use a Tooltip; for a task that
+ * needs the whole screen, a Dialog. `class`, `style`, `ref` and other attributes go to the panel.
+ *
+ * @example
+ * <Popover title="Amount range">
+ *   {#snippet trigger(attributes)}<Button {...attributes} variant="outlined">Amount</Button>{/snippet}
+ *   <NumberField label="From" bind:value={from} />
+ *   {#snippet actions({ close })}<Button onclick={close}>Apply</Button>{/snippet}
+ * </Popover>
+ */
+export type PopoverProps = ElementProps<HTMLDivElement, Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'popover' | 'role'>, Partial<PopoverDefaults> & {
+    /** The control that opens and closes it. Spread the attributes it receives onto it. */
+    trigger: Snippet<[TriggerAttributes]>;
+    /**
+     * Whether it is open. Bindable; it sets this to `false` when it closes itself.
+     * @default false
+     */
+    open?: boolean;
+    /** A heading, which also names it. Without it, name it with `aria-label`. */
+    title?: string;
+    /** The content. */
+    children?: Snippet;
+    /** Buttons at the end. `close()` closes it with the reason `'action'`. */
+    actions?: Snippet<[{
+        close: () => void;
+    }]>;
+    /**
+     * The side of the control it opens on, moved to the opposite side when there is no room.
+     * `start` and `end` follow the writing direction.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * Its alignment along that side.
+     * @default 'start'
+     */
+    align?: Align;
+    /**
+     * The room between the control and the panel, in px.
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Escape, a press outside and focus moving out do not close it: an answer is needed.
+     * @default false
+     */
+    persistent?: boolean;
+    /** Called when it closes itself, with the reason. */
+    onclose?: (reason: CloseReason) => void;
+}>;

package/dist/components/Popover/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Sheet/Sheet.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	// A modal panel against an edge of the screen, on the shared modal shell. See SheetProps.
+	import type { TransitionConfig } from 'svelte/transition';
+	import { checkValue, DEV } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import { easing, motion } from '../../primitives/motion/motion.js';
+	import Modal from '../Modal/Modal.svelte';
+	import './sheet.css';
+	import { SHEET_SIDES, type SheetDefaults, type SheetProps } from './types.js';
+
+	let {
+		size,
+		density,
+		rounded,
+		side = 'end',
+		open = $bindable(false),
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: SheetProps = $props();
+
+	const resolve = useDefaults<SheetDefaults>('Sheet', {
+		size: 'sm',
+		density: 'default',
+		rounded: true
+	});
+	const p = $derived(resolve({ size, density, rounded }));
+
+	if (DEV) $effect(() => checkValue('Sheet', 'side', side, SHEET_SIDES));
+
+	// The panel slides in from its edge, with the theme's timing; start and end follow the
+	// writing direction.
+	function slide(node: Element): TransitionConfig {
+		const timing = motion(node);
+		const rtl = getComputedStyle(node).direction === 'rtl';
+		const axis = side === 'top' || side === 'bottom' ? 'Y' : 'X';
+		const sign = side === 'bottom' ? 1 : side === 'top' ? -1 : (side === 'end') !== rtl ? 1 : -1;
+		return {
+			duration: timing.normal,
+			easing: easing(timing.ease),
+			css: (_, u) => `transform: translate${axis}(${sign * u * 100}%)`
+		};
+	}
+</script>
+
+<Modal
+	{...rest}
+	component="Sheet"
+	placement={side}
+	panelClass={sharedClasses(p, 'Sheet')}
+	enter={slide}
+	class={['sv-sheet', className]}
+	bind:open
+	bind:ref
+/>

package/dist/components/Sheet/Sheet.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type SheetProps } from './types.js';
+declare const Sheet: import("svelte").Component<SheetProps, {}, "ref" | "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/components/Sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Sheet } from './Sheet.svelte';
+export { SHEET_SIDES, type SheetDefaults, type SheetProps, type SheetSide } from './types.js';

package/dist/components/Sheet/index.js

@@ -0,0 +1,2 @@
+export { default as Sheet } from './Sheet.svelte';
+export { SHEET_SIDES } from './types.js';

package/dist/components/Sheet/sheet.css

@@ -0,0 +1,61 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * Sheets: the panel against one edge, the full length of it, rounded on its inner corners only.
+	 * A sheet from the start or the end is as wide as its size; one from the top or the bottom is
+	 * as wide as its size at most, and as tall as its content allows.
+	 */
+	.sv-modal:not(.sv-modal--center) {
+		padding: 0;
+	}
+
+	.sv-modal--start,
+	.sv-modal--end {
+		align-items: stretch;
+	}
+
+	.sv-modal--start {
+		justify-items: start;
+	}
+
+	.sv-modal--end {
+		justify-items: end;
+	}
+
+	.sv-modal--top {
+		align-items: start;
+	}
+
+	.sv-modal--bottom {
+		align-items: end;
+	}
+
+	:is(.sv-modal--start, .sv-modal--end) > .sv-modal__panel {
+		block-size: 100%;
+	}
+
+	:is(.sv-modal--top, .sv-modal--bottom) > .sv-modal__panel {
+		max-block-size: calc(100% - var(--sv-space-34));
+	}
+
+	.sv-modal--start > .sv-modal__panel {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+
+	.sv-modal--end > .sv-modal__panel {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+
+	.sv-modal--top > .sv-modal__panel {
+		border-start-start-radius: 0;
+		border-start-end-radius: 0;
+	}
+
+	.sv-modal--bottom > .sv-modal__panel {
+		border-end-start-radius: 0;
+		border-end-end-radius: 0;
+	}
+}

package/dist/components/Sheet/types.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLDialogAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Density, Rounded, Size } from '../../core/props/types.js';
+import type { ModalContentProps } from '../Modal/types.js';
+/** The Sheet props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface SheetDefaults {
+    /**
+     * The width of the panel, from `xs` (21rem) to `xl` (55rem); for a sheet from the top or the
+     * bottom, the most it spans.
+     * @default 'sm'
+     */
+    size: Size;
+    /**
+     * Multiplies the padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding of the inner corners. `true` keeps the theme's radius for large surfaces.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Sheet: SheetDefaults;
+    }
+}
+export declare const SHEET_SIDES: readonly ["start", "end", "top", "bottom"];
+/** The edge a sheet comes from. `start` and `end` follow the writing direction. */
+export type SheetSide = (typeof SHEET_SIDES)[number];
+/**
+ * A modal panel that slides in from an edge of the screen: a drawer from the start or the end,
+ * a sheet from the bottom or the top. It is a Dialog in every other way: the platform's own
+ * `<dialog>`, focus moved in and given back, Escape and the backdrop close it. `class`, `style`,
+ * `ref` and other attributes go to the `<dialog>`.
+ *
+ * @example
+ * <Sheet title="Filters" side="end">
+ *   {#snippet trigger(attributes)}<Button {...attributes} variant="outlined">Filters</Button>{/snippet}
+ *   <Checkbox label="Pending only" bind:checked={pending} />
+ *   {#snippet actions({ close })}<Button onclick={close}>Show results</Button>{/snippet}
+ * </Sheet>
+ */
+export type SheetProps = ElementProps<HTMLDialogElement, Omit<HTMLDialogAttributes, 'open' | 'title' | 'children'>, Partial<SheetDefaults> & ModalContentProps & {
+    /**
+     * The edge it slides in from.
+     * @default 'end'
+     */
+    side?: SheetSide;
+}>;

package/dist/components/Sheet/types.js

@@ -0,0 +1 @@
+export const SHEET_SIDES = ['start', 'end', 'top', 'bottom'];

package/dist/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,161 @@
+<script module lang="ts">
+	// Until when the next tooltip skips its delay: while one shows, and shortly after it hides,
+	// so moving across a toolbar shows each one at once.
+	let warmUntil = 0;
+</script>
+
+<script lang="ts">
+	// A short text that describes a control, on hover and keyboard focus. See TooltipProps.
+	import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+	import { on } from 'svelte/events';
+	import { checkValue, DEV, warnNamelessTrigger } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import type { TriggerAttributes } from '../../core/overlay/types.js';
+	import { ALIGNS, anchored, SIDES } from '../../primitives/anchored/anchored.js';
+	import { dismissable } from '../../primitives/layer/dismissable.js';
+	import './tooltip.css';
+	import type { TooltipDefaults, TooltipProps } from './types.js';
+
+	let {
+		text,
+		trigger,
+		side,
+		align,
+		delay,
+		open = $bindable(false),
+		id: idProp,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: TooltipProps = $props();
+
+	const resolve = useDefaults<TooltipDefaults>('Tooltip', {
+		side: 'top',
+		align: 'center',
+		delay: 377
+	});
+	const p = $derived(resolve({ side, align, delay }));
+
+	if (DEV) {
+		$effect(() => checkValue('Tooltip', 'side', p.side, SIDES));
+		$effect(() => checkValue('Tooltip', 'align', p.align, ALIGNS));
+	}
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+
+	// Room between the control and the tooltip, in px, clear of a focus ring.
+	const OFFSET = 8;
+	// Time to cross that room onto the tooltip before it hides, in ms.
+	const GRACE = 144;
+	const WARM = 377;
+
+	// The control it describes, which it is placed against.
+	let anchor = $state<HTMLElement | null>(null);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	// A press on the control hides the tooltip until the pointer leaves it.
+	let pressed = false;
+
+	function show() {
+		clearTimeout(timer);
+		open = true;
+	}
+
+	function hide() {
+		clearTimeout(timer);
+		open = false;
+	}
+
+	function later(action: () => void, ms: number) {
+		clearTimeout(timer);
+		timer = setTimeout(action, ms);
+	}
+
+	// Touch has no hover: a tap is a press, and a long press belongs to the platform.
+	function enter(event: PointerEvent) {
+		if (event.pointerType === 'touch' || pressed) return;
+		if (open || performance.now() < warmUntil) show();
+		else later(show, p.delay);
+	}
+
+	function leave() {
+		pressed = false;
+		later(hide, GRACE);
+	}
+
+	function press() {
+		pressed = true;
+		hide();
+	}
+
+	// Keyboard focus shows it at once; a click that focuses the control does not.
+	function focus(event: FocusEvent) {
+		if ((event.currentTarget as HTMLElement).matches(':focus-visible')) show();
+	}
+
+	const control: Attachment<HTMLElement> = (node) => {
+		anchor = node;
+		if (DEV) warnNamelessTrigger('Tooltip', node);
+		const stops = [
+			on(node, 'pointerenter', enter),
+			on(node, 'pointerleave', leave),
+			on(node, 'pointerdown', press),
+			on(node, 'focus', focus),
+			on(node, 'blur', hide)
+		];
+		return () => {
+			for (const stop of stops) stop();
+			clearTimeout(timer);
+			if (anchor === node) anchor = null;
+		};
+	};
+	const CONTROL = createAttachmentKey();
+	const triggerAttributes: TriggerAttributes = $derived({
+		'aria-describedby': id,
+		[CONTROL]: control
+	});
+
+	// In the top layer while open. It stays placed until it has faded out, and a hidden tooltip
+	// is not placed at all, so a page with many of them pays nothing for those not shown.
+	let leaving = $state(false);
+	const popover: Attachment<HTMLElement> = (node) => {
+		if (!open) return;
+		node.showPopover();
+		warmUntil = Infinity;
+		return () => {
+			warmUntil = performance.now() + WARM;
+			if (!node.matches(':popover-open')) return;
+			node.hidePopover();
+			leaving = true;
+			void Promise.allSettled(node.getAnimations().map(({ finished }) => finished)).then(
+				() => (leaving = false)
+			);
+		};
+	};
+	const place: Attachment<HTMLElement> = (node) => {
+		if (open || leaving) {
+			return anchored({ anchor, side: p.side, align: p.align, offset: OFFSET })(node);
+		}
+	};
+	// Escape hides it first, as the topmost layer; a press outside hides it and goes through.
+	const layer: Attachment<HTMLElement> = (node) => {
+		if (open) return dismissable({ onDismiss: hide, transient: true })(node);
+	};
+</script>
+
+{@render trigger(triggerAttributes)}
+<div
+	bind:this={ref}
+	{...rest}
+	{id}
+	role="tooltip"
+	popover="manual"
+	class={['sv-tooltip', className]}
+	{@attach popover}
+	{@attach place}
+	{@attach layer}
+	onpointerenter={() => clearTimeout(timer)}
+	onpointerleave={leave}
+>
+	{text}
+</div>

package/dist/components/Tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProps } from './types.js';
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "ref" | "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.svelte';
+export type { TooltipDefaults, TooltipProps } from './types.js';

package/dist/components/Tooltip/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/components/Tooltip/tooltip.css

@@ -0,0 +1,44 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * The page inverted: the text colour as the background, so it reads on any surface in both
+	 * schemes. As wide as its text up to a short line, never wider than the screen. It grows in
+	 * from 94.4% and fades with the theme's fast timing, and stays in the top layer until it has
+	 * faded out; with reduced motion it simply appears.
+	 */
+	.sv-tooltip {
+		inline-size: max-content;
+		max-inline-size: min(21rem, 100vw - 2 * var(--sv-space-8));
+		padding-block: var(--sv-space-3);
+		padding-inline: var(--sv-space-8);
+		border: 0;
+		border-radius: var(--sv-radius-sm);
+		overflow: visible;
+		background: var(--sv-color-text);
+		box-shadow: var(--sv-shadow);
+		color: var(--sv-color-background);
+		font-family: var(--sv-font-ui);
+		font-size: var(--sv-text-xs);
+		line-height: var(--sv-leading-snug);
+		overflow-wrap: break-word;
+		opacity: 0;
+		transform: scale(0.944);
+		transition-property: opacity, transform, display, overlay;
+		transition-duration: var(--sv-duration-fast);
+		transition-timing-function: var(--sv-ease);
+		transition-behavior: allow-discrete;
+	}
+
+	.sv-tooltip:popover-open {
+		opacity: 1;
+		transform: none;
+	}
+
+	@starting-style {
+		.sv-tooltip:popover-open {
+			opacity: 0;
+			transform: scale(0.944);
+		}
+	}
+}

package/dist/components/Tooltip/types.d.ts

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TriggerAttributes } from '../../core/overlay/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Align, Side } from '../../primitives/anchored/anchored.js';
+/** The Tooltip props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface TooltipDefaults {
+    /**
+     * The side of the control it shows on, moved to the opposite side when there is no room.
+     * `start` and `end` follow the writing direction.
+     * @default 'top'
+     */
+    side: Side;
+    /**
+     * Its alignment along that side.
+     * @default 'center'
+     */
+    align: Align;
+    /**
+     * How long the pointer rests on the control before it shows, in ms. Keyboard focus shows it
+     * at once, and so does moving on from another tooltip, as across a toolbar.
+     * @default 377
+     */
+    delay: number;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Tooltip: TooltipDefaults;
+    }
+}
+/**
+ * A short text that describes a control: shown when the pointer rests on it and at once on
+ * keyboard focus, hidden on Escape, on leaving and on a press. It stays while the pointer moves
+ * onto it. It holds text only; for links, buttons or fields, use a Popover. The text is the
+ * control's description (`aria-describedby`), not its name: an icon-only button still needs
+ * `aria-label`. `class`, `style`, `ref` and other attributes go to the tooltip.
+ *
+ * @example
+ * <Tooltip text="Copy the IBAN">
+ *   {#snippet trigger(attributes)}
+ *     <Button {...attributes} icon variant="text" aria-label="Copy the IBAN"><Icon path={copy} /></Button>
+ *   {/snippet}
+ * </Tooltip>
+ */
+export type TooltipProps = ElementProps<HTMLDivElement, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popover' | 'role'>, Partial<TooltipDefaults> & {
+    /** The text. */
+    text: string;
+    /** The control it describes. Spread the attributes it receives onto it. */
+    trigger: Snippet<[TriggerAttributes]>;
+    /**
+     * Whether it shows. Bindable; it sets this as the pointer and focus come and go.
+     * @default false
+     */
+    open?: boolean;
+}>;

package/dist/components/Tooltip/types.js

@@ -0,0 +1 @@
+export {};

package/dist/core/errors/codes.d.ts

@@ -101,11 +101,23 @@ export declare const ERROR_CODES: {
         readonly cause: "A closable chip contains a close button, and a button cannot be placed inside another button or a link.";
         readonly fix: "Keep the chip `closable` and put its action in a `Button` next to it, or remove `closable`.";
     };
+    readonly SV4002: {
+        readonly kind: "warning";
+        readonly title: "Tooltip on a control without an accessible name";
+        readonly cause: "A tooltip describes the control it is on; it does not name it. A control with no text, `aria-label` or `aria-labelledby`, such as an icon-only button, is announced without a name.";
+        readonly fix: "Give the control `aria-label`, as every icon-only button needs, or visible text. The tooltip can then say more than the name.";
+    };
+    readonly SV4003: {
+        readonly kind: "error";
+        readonly title: "useToast() outside a UIProvider";
+        readonly cause: "`useToast()` reads the toasts from the component tree, and there is no `<UIProvider>` or `<ToastProvider>` above the component that called it.";
+        readonly fix: "Wrap the app in `<UIProvider>` in the root layout, or in `<ToastProvider>` when it uses `<ThemeProvider>` alone, and call `useToast()` while a component inside it initialises.";
+    };
     readonly SV5001: {
         readonly kind: "warning";
-        readonly title: "Field without an accessible name";
-        readonly cause: "Assistive technology announces a form control by its name, and this control has no label, `aria-label` or `aria-labelledby`.";
-        readonly fix: "Give the field a `label`, or name the control with `aria-label`, or with `aria-labelledby` when its label is visible elsewhere.";
+        readonly title: "Field or dialog without an accessible name";
+        readonly cause: "Assistive technology announces a form control or a dialog by its name, and this one has no label, title, `aria-label` or `aria-labelledby`.";
+        readonly fix: "Give a field a `label` and a dialog a `title`, or name it with `aria-label`, or with `aria-labelledby` when its name is visible elsewhere.";
     };
 };
 /** A stable error code, such as `'SV1001'`. */

package/dist/core/errors/codes.js

@@ -87,10 +87,22 @@ export const ERROR_CODES = {
         cause: 'A closable chip contains a close button, and a button cannot be placed inside another button or a link.',
         fix: 'Keep the chip `closable` and put its action in a `Button` next to it, or remove `closable`.'
     },
+    SV4002: {
+        kind: 'warning',
+        title: 'Tooltip on a control without an accessible name',
+        cause: 'A tooltip describes the control it is on; it does not name it. A control with no text, `aria-label` or `aria-labelledby`, such as an icon-only button, is announced without a name.',
+        fix: 'Give the control `aria-label`, as every icon-only button needs, or visible text. The tooltip can then say more than the name.'
+    },
+    SV4003: {
+        kind: 'error',
+        title: 'useToast() outside a UIProvider',
+        cause: '`useToast()` reads the toasts from the component tree, and there is no `<UIProvider>` or `<ToastProvider>` above the component that called it.',
+        fix: 'Wrap the app in `<UIProvider>` in the root layout, or in `<ToastProvider>` when it uses `<ThemeProvider>` alone, and call `useToast()` while a component inside it initialises.'
+    },
     SV5001: {
         kind: 'warning',
-        title: 'Field without an accessible name',
-        cause: 'Assistive technology announces a form control by its name, and this control has no label, `aria-label` or `aria-labelledby`.',
-        fix: 'Give the field a `label`, or name the control with `aria-label`, or with `aria-labelledby` when its label is visible elsewhere.'
+        title: 'Field or dialog without an accessible name',
+        cause: 'Assistive technology announces a form control or a dialog by its name, and this one has no label, title, `aria-label` or `aria-labelledby`.',
+        fix: 'Give a field a `label` and a dialog a `title`, or name it with `aria-label`, or with `aria-labelledby` when its name is visible elsewhere.'
     }
 };

package/dist/core/locale/locale.d.ts

@@ -2,6 +2,7 @@
 export declare const MESSAGES: {
     close: string;
     loading: string;
+    notifications: string;
     progress: string;
     required: string;
     tooShort: string;

package/dist/core/locale/locale.js

@@ -3,6 +3,8 @@ import { getContext, hasContext, setContext } from 'svelte';
 export const MESSAGES = {
     close: 'Close',
     loading: 'Loading',
+    // The region of toasts, followed by its key: "Notifications (F8)".
+    notifications: 'Notifications',
     progress: 'Progress',
     // Validation: the HTML constraints of form fields.
     required: 'Required',

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

@@ -0,0 +1,33 @@
+import type { Attachment } from 'svelte/attachments';
+export declare const CLOSE_REASONS: readonly ["escape", "outside", "focus", "action"];
+/**
+ * Why an overlay closed itself: `'escape'` (the Escape key), `'outside'` (a press outside it,
+ * on the backdrop of a modal), `'focus'` (focus moved out of a menu or a popover) or `'action'`
+ * (its close button, `close()` from its snippets, or a choice made in it).
+ */
+export type CloseReason = (typeof CLOSE_REASONS)[number];
+/**
+ * What an overlay passes to its `trigger` snippet: the ARIA that ties the control to the
+ * overlay, the handlers that open it, and an attachment that tells the overlay which element
+ * opened it (focus goes back there on close). Spread it onto the control.
+ *
+ * @example
+ * <Dialog title="Rename the account">
+ *   {#snippet trigger(attributes)}<Button {...attributes}>Rename</Button>{/snippet}
+ *   …
+ * </Dialog>
+ */
+export interface TriggerAttributes {
+    /** The kind of overlay the control opens. */
+    'aria-haspopup'?: 'dialog' | 'menu' | 'true';
+    /** Whether the overlay is open, for overlays that stay beside the control. */
+    'aria-expanded'?: boolean;
+    /** The overlay's id while it is open. */
+    'aria-controls'?: string;
+    /** The overlay's id, for a tooltip that describes the control. */
+    'aria-describedby'?: string;
+    onclick?: (event: MouseEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    /** The attachment that hands the control to the overlay. */
+    [attachment: symbol]: Attachment<HTMLElement>;
+}

package/dist/core/overlay/types.js

@@ -0,0 +1 @@
+export const CLOSE_REASONS = ['escape', 'outside', 'focus', 'action'];