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

package/dist/dev/off.d.ts

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

package/dist/dev/off.js

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

package/dist/dev/on.d.ts

@@ -4,5 +4,17 @@ export declare const DEV: boolean;
  * 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;
+/**
+ * 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

@@ -20,14 +20,30 @@ export function checkValue(component, prop, value, valid, hint) {
     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)
+/**
+ * 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 ([...(control.labels ?? [])].some((label) => label.textContent?.trim()))
+    if ([...(element.labels ?? [])].some((label) => label.textContent?.trim()))
+        return;
+    if (element.getAttribute('aria-label') || element.getAttribute('aria-labelledby'))
         return;
-    if (control.getAttribute('aria-label') || control.getAttribute('aria-labelledby'))
+    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('SV5001', `<${component}> has no accessible name. Give it a label, or name it with aria-label or aria-labelledby.`);
+    }
+    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

@@ -19,6 +19,9 @@ export { BREAKPOINTS, useDisplay, type Breakpoint, type DisplayInstance, type Di
 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';
@@ -32,6 +35,7 @@ export { typeahead, type TypeaheadOptions } from './primitives/keyboard/typeahea
 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';
@@ -40,19 +44,24 @@ export { ButtonGroup, type ButtonGroupDefaults, type ButtonGroupProps } from './
 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

@@ -25,6 +25,11 @@ export { BREAKPOINTS, useDisplay } from './core/display/display.js';
 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';
@@ -46,6 +51,7 @@ export { easing, fade, motion, pop, rise, spring, SPRINGS } from './primitives/m
 // 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';
@@ -54,19 +60,24 @@ 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/layer/dismissable.d.ts

@@ -13,6 +13,12 @@ export interface DismissableOptions {
     focusOutside?: boolean;
     /** Elements that count as inside, such as the trigger, which toggles instead. */
     inside?: Elements | (() => Elements);
+    /**
+     * A layer the user does not work in, such as a tooltip. Escape closes it first, as the
+     * topmost layer, but a press outside closes it and still reaches the layer beneath, and focus
+     * moving out is left to the layers beneath. Defaults to `false`.
+     */
+    transient?: boolean;
 }
 /**
  * Registers the element as a layer: Escape, a press outside, or (opt-in) focus leaving it

package/dist/primitives/layer/dismissable.js

@@ -14,10 +14,17 @@ function isInside({ element, options }, target) {
 const onScrollbar = (event) => event.target === document.documentElement &&
     (event.clientX >= document.documentElement.clientWidth ||
         event.clientY >= document.documentElement.clientHeight);
+// The press goes to the topmost layer, through any transient layers above it, which close.
 function dismissOutside(event) {
-    const top = layers.at(-1);
-    if (top && top.options.outside !== false && !isInside(top, event.target) && !onScrollbar(event)) {
-        top.options.onDismiss('outside');
+    if (onScrollbar(event))
+        return;
+    for (const layer of layers.toReversed()) {
+        if (isInside(layer, event.target))
+            return;
+        if (layer.options.outside !== false)
+            layer.options.onDismiss('outside');
+        if (!layer.options.transient)
+            return;
     }
 }
 // Escape listens in the bubble phase, so handlers inside run first and can prevent it.
@@ -40,7 +47,7 @@ function onclick(event) {
     touch = false;
 }
 function onfocusin(event) {
-    const top = layers.at(-1);
+    const top = layers.findLast((layer) => !layer.options.transient);
     if (top?.options.focusOutside && !isInside(top, event.target))
         top.options.onDismiss('focus');
 }

package/dist/styles/props.css

@@ -57,8 +57,11 @@
 		--sv-variant-shadow: none;
 	}
 
-	/* Plain: no decoration in any state. */
-	.sv-variant-plain {
+	/*
+	 * Plain: no decoration in any state, on a control itself. The washes inherit, so a plain
+	 * container (a Card, an Alert, a List) leaves them alone for the controls inside it.
+	 */
+	.sv-variant-plain:where(a, button, summary, [role='button'], [role='link']) {
 		--sv-state-hover: 0%;
 		--sv-state-press: 0%;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sveltier/ui",
-	"version": "0.1.0-alpha.0",
+	"version": "0.1.0-alpha.1",
 	"description": "The UI framework for AI coding agents, on Svelte 5: one typed vocabulary, docs generated from the types, and errors that say how to fix them.",
 	"license": "MIT",
 	"repository": {