@devslab/dds-solid 0.17.0 → 0.18.0

package/dist/server.js

@@ -1,6 +1,19 @@
-import { For, Show, createContext, createEffect, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
-import { createComponent, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrHydrationKey } from "solid-js/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { Dynamic, Portal, createComponent, escape, isServer, memo, mergeProps as mergeProps$1, ssr, ssrAttribute, ssrElement, ssrHydrationKey } from "solid-js/web";
+import { useCheckbox } from "@ark-ui/solid/checkbox";
+import { useSwitch } from "@ark-ui/solid/switch";
+import { Field as Field$1 } from "@ark-ui/solid/field";
+import { Dialog as Dialog$1, useDialog } from "@ark-ui/solid/dialog";
+import { usePresenceContext } from "@ark-ui/solid/presence";
+import { FocusTrap } from "@zag-js/focus-trap";
+import { ariaHidden } from "@zag-js/aria-hidden";
+import { RadioGroup as RadioGroup$1 } from "@ark-ui/solid/radio-group";
 import { directionPolicy, icons } from "@devslab/dds-icons";
+import { Tabs as Tabs$1, useTabsContext } from "@ark-ui/solid/tabs";
+import { LocaleProvider } from "@ark-ui/solid/locale";
+import { Toast, Toaster, createToaster } from "@ark-ui/solid/toast";
+import { space } from "@devslab/dds-tokens";
+import { Tooltip as Tooltip$1, useTooltip } from "@ark-ui/solid/tooltip";
 //#region src/controllable.ts
 function createControllableSignal(options) {
 	const [internal, setInternal] = createSignal(options.defaultValue);
@@ -24,34 +37,14 @@ function describedBy(...ids) {
 }
 //#endregion
 //#region src/controls.tsx
-var _tmpl$$6 = ["<span", " class=\"dds-spinner\" aria-hidden=\"true\"></span>"];
-var _tmpl$2$5 = [
-	"<div",
-	"><label class=\"dds-field__label\"",
-	"><!--$-->",
-	"<!--/--><!--$-->",
-	"<!--/--></label><!--$-->",
-	"<!--/--><!--$-->",
-	"<!--/--><!--$-->",
-	"<!--/--></div>"
-];
-var _tmpl$3$3 = ["<span", " aria-hidden=\"true\"> *</span>"];
-var _tmpl$4$1 = [
-	"<div",
-	" class=\"dds-field__help\">",
-	"</div>"
-];
-var _tmpl$5$1 = [
-	"<div",
-	" class=\"dds-field__error\" role=\"alert\">",
-	"</div>"
-];
-var _tmpl$6$1 = [
+var _tmpl$$5 = ["<span", " class=\"dds-spinner\" aria-hidden=\"true\"></span>"];
+var _tmpl$2$3 = ["<span", " aria-hidden=\"true\"> *</span>"];
+var _tmpl$3$1 = [
 	"<span",
 	">",
 	"</span>"
 ];
-var _tmpl$7$1 = [
+var _tmpl$4$1 = [
 	"<label",
 	">",
 	"<span>",
@@ -67,7 +60,7 @@ function Button(props) {
 		"type",
 		"children"
 	]);
-	return ssrElement("button", mergeProps(rest, {
+	return ssrElement("button", mergeProps$1(rest, {
 		get type() {
 			return local.type ?? "button";
 		},
@@ -82,7 +75,7 @@ function Button(props) {
 		}
 	}), () => [
 		"<!--$-->",
-		local.loading && _tmpl$$6[0] + ssrHydrationKey() + _tmpl$$6[1],
+		local.loading && _tmpl$$5[0] + ssrHydrationKey() + _tmpl$$5[1],
 		"<!--/-->",
 		"<!--$-->",
 		escape(local.children),
@@ -99,7 +92,7 @@ function IconButton(props) {
 		"type",
 		"children"
 	]);
-	return ssrElement("button", mergeProps(rest, {
+	return ssrElement("button", mergeProps$1(rest, {
 		get type() {
 			return local.type ?? "button";
 		},
@@ -112,7 +105,7 @@ function IconButton(props) {
 		get ["aria-busy"]() {
 			return local.loading ? "true" : void 0;
 		}
-	}), () => local.loading ? _tmpl$$6[0] + ssrHydrationKey() + _tmpl$$6[1] : escape(local.children), true);
+	}), () => local.loading ? _tmpl$$5[0] + ssrHydrationKey() + _tmpl$$5[1] : escape(local.children), true);
 }
 function Field(props) {
 	const generated = createUniqueId();
@@ -125,7 +118,54 @@ function Field(props) {
 		"aria-invalid": props.error ? "true" : void 0,
 		"aria-required": props.required ? "true" : void 0
 	});
-	return ssr(_tmpl$2$5, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-field", props.error ? "dds-field--error" : void 0, props.class), true), false), ssrAttribute("for", escape(id(), true), false), escape(props.label), props.required && _tmpl$3$3[0] + ssrHydrationKey() + _tmpl$3$3[1], typeof props.children === "function" ? escape(props.children(control())) : escape(props.children), props.helpText && ssr(_tmpl$4$1, ssrHydrationKey() + ssrAttribute("id", escape(helpId(), true), false), escape(props.helpText)), props.error && ssr(_tmpl$5$1, ssrHydrationKey() + ssrAttribute("id", escape(errorId(), true), false), escape(props.error)));
+	return createComponent(Field$1.Root, {
+		get id() {
+			return id();
+		},
+		get required() {
+			return props.required ?? false;
+		},
+		get invalid() {
+			return Boolean(props.error);
+		},
+		get ids() {
+			return {
+				control: `${id()}-root`,
+				helperText: `${id()}-help`,
+				errorText: `${id()}-error`
+			};
+		},
+		get ["class"]() {
+			return classes("dds-field", props.error ? "dds-field--error" : void 0, props.class);
+		},
+		get children() {
+			return [
+				createComponent(Field$1.Label, {
+					"class": "dds-field__label",
+					get ["for"]() {
+						return id();
+					},
+					get children() {
+						return [props.label, props.required && ssr(_tmpl$2$3, ssrHydrationKey())];
+					}
+				}),
+				typeof props.children === "function" ? props.children(control()) : props.children,
+				props.helpText && createComponent(Field$1.HelperText, {
+					"class": "dds-field__help",
+					get children() {
+						return props.helpText;
+					}
+				}),
+				props.error && createComponent(Field$1.ErrorText, {
+					"class": "dds-field__error",
+					role: "alert",
+					get children() {
+						return props.error;
+					}
+				})
+			];
+		}
+	});
 }
 function Select(props) {
 	const [local, rest] = splitProps(props, [
@@ -133,7 +173,7 @@ function Select(props) {
 		"invalid",
 		"children"
 	]);
-	return ssr(_tmpl$6$1, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-select", local.class), true), false), ssrElement("select", mergeProps(rest, {
+	return ssr(_tmpl$3$1, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-select", local.class), true), false), ssrElement("select", mergeProps$1(rest, {
 		"class": "dds-select__input",
 		get ["aria-invalid"]() {
 			return local.invalid ? "true" : void 0;
@@ -156,7 +196,7 @@ function Checkable(props) {
 		defaultValue: local.defaultChecked ?? false,
 		onChange: local.onCheckedChange
 	});
-	return ssr(_tmpl$7$1, ssrHydrationKey() + ssrAttribute("class", escape(classes(local.role === "switch" ? "dds-switch" : "dds-check", local.class), true), false), ssrElement("input", mergeProps(rest, {
+	return ssr(_tmpl$4$1, ssrHydrationKey() + ssrAttribute("class", escape(classes(local.role === "switch" ? "dds-switch" : "dds-check", local.class), true), false), ssrElement("input", mergeProps$1(rest, {
 		get type() {
 			return local.type;
 		},
@@ -171,25 +211,75 @@ function Checkable(props) {
 		}
 	}), void 0, false), escape(local.label));
 }
-var Checkbox = (props) => createComponent(Checkable, mergeProps(props, { type: "checkbox" }));
-var Radio = (props) => createComponent(Checkable, mergeProps(props, { type: "radio" }));
-var Switch = (props) => createComponent(Checkable, mergeProps(props, {
-	type: "checkbox",
-	role: "switch"
-}));
+var Checkbox = (props) => createComponent(ArkCheckable, mergeProps$1(props, { kind: "checkbox" }));
+var Radio = (props) => createComponent(Checkable, mergeProps$1(props, { type: "radio" }));
+var Switch = (props) => createComponent(ArkCheckable, mergeProps$1(props, { kind: "switch" }));
+function ArkCheckable(props) {
+	const generated = createUniqueId();
+	const [local, rest] = splitProps(props, [
+		"checked",
+		"defaultChecked",
+		"onCheckedChange",
+		"label",
+		"class",
+		"inputClass",
+		"kind",
+		"id",
+		"onClick",
+		"onFocusIn",
+		"onFocusOut",
+		"style"
+	]);
+	const options = () => ({
+		id: `dds-check-${generated}`,
+		ids: { hiddenInput: local.id ?? `dds-check-${generated}-input` },
+		checked: local.checked,
+		defaultChecked: local.defaultChecked,
+		onCheckedChange: (details) => local.onCheckedChange?.(details.checked === true),
+		disabled: rest.disabled,
+		required: rest.required,
+		readOnly: rest.readonly,
+		name: rest.name,
+		form: rest.form,
+		value: String(rest.value ?? "on")
+	});
+	const api = local.kind === "switch" ? useSwitch(options) : useCheckbox(options);
+	const inputClass = () => local.kind === "switch" ? "dds-switch__input" : "dds-check__input";
+	const rootProps = () => {
+		const [, attributes] = splitProps(api().getRootProps(), ["onClick"]);
+		return attributes;
+	};
+	return ssrElement("label", mergeProps$1(rootProps, { get ["class"]() {
+		return classes(local.kind === "switch" ? "dds-switch" : "dds-check", local.class);
+	} }), () => [ssrElement("input", mergeProps$1(() => api().getHiddenInputProps(), rest, {
+		type: "checkbox",
+		get role() {
+			return local.kind === "switch" ? "switch" : void 0;
+		},
+		get ["class"]() {
+			return classes(inputClass(), local.inputClass);
+		},
+		get style() {
+			return local.style ?? {};
+		},
+		get checked() {
+			return api().checked;
+		}
+	}), void 0, false), ssrElement("span", api().getLabelProps(), () => escape(local.label), false)], true);
+}
 //#endregion
 //#region src/console-shell.tsx
-var _tmpl$$5 = [
+var _tmpl$$4 = [
 	"<dl",
 	" class=\"dds-console-rail__context\">",
 	"</dl>"
 ];
-var _tmpl$2$4 = [
+var _tmpl$2$2 = [
 	"<div",
 	" class=\"dds-console-rail__foot\">",
 	"</div>"
 ];
-var _tmpl$3$2 = [
+var _tmpl$3 = [
 	"<p",
 	" class=\"dds-console-page-eyebrow\">",
 	"</p>"
@@ -280,7 +370,7 @@ function ConsoleShell(props) {
 			return memo(() => !!props.context)() && props.context.length > 0;
 		},
 		get children() {
-			return ssr(_tmpl$$5, ssrHydrationKey(), escape(createComponent(For, {
+			return ssr(_tmpl$$4, ssrHydrationKey(), escape(createComponent(For, {
 				get each() {
 					return props.context;
 				},
@@ -312,14 +402,14 @@ function ConsoleShell(props) {
 			return props.foot;
 		},
 		get children() {
-			return ssr(_tmpl$2$4, ssrHydrationKey(), escape(props.foot));
+			return ssr(_tmpl$2$2, ssrHydrationKey(), escape(props.foot));
 		}
 	})), escape(createComponent(Show, {
 		get when() {
 			return props.header.eyebrow;
 		},
 		get children() {
-			return ssr(_tmpl$3$2, ssrHydrationKey(), escape(props.header.eyebrow));
+			return ssr(_tmpl$3, ssrHydrationKey(), escape(props.header.eyebrow));
 		}
 	})), escape(props.header.title), escape(createComponent(Show, {
 		get when() {
@@ -332,28 +422,12 @@ function ConsoleShell(props) {
 }
 //#endregion
 //#region src/dialog.tsx
-var _tmpl$$4 = [
+var _tmpl$$3 = [
 	"<div",
-	" class=\"dds-dialog-overlay\"><div",
-	" role=\"dialog\" aria-modal=\"true\"",
-	" tabindex=\"-1\"><h2",
-	" class=\"dds-dialog__title\">",
-	"</h2><!--$-->",
-	"<!--/--><!--$-->",
-	"<!--/--><!--$-->",
-	"<!--/--></div></div>"
-];
-var _tmpl$2$3 = [
-	"<div",
-	" class=\"dds-dialog__body\">",
-	"</div>"
-];
-var _tmpl$3$1 = [
-	"<div",
-	" class=\"dds-dialog__actions\">",
+	">",
 	"</div>"
 ];
-var focusable = [
+[
 	"a[href]",
 	"button:not([disabled])",
 	"input:not([disabled])",
@@ -364,61 +438,215 @@ var focusable = [
 function Dialog(props) {
 	const generated = createUniqueId();
 	const id = () => props.id ?? `dds-dialog-${generated}`;
-	const titleId = () => `${id()}-title`;
-	const descriptionId = () => props.description ? `${id()}-description` : void 0;
-	const [open, setOpen] = createControllableSignal({
-		value: () => props.open,
-		defaultValue: props.defaultOpen ?? false,
-		onChange: props.onOpenChange
-	});
-	let panel;
-	let previouslyFocused = null;
+	const [panel, setPanel] = createSignal();
+	const api = useDialog(() => ({
+		id: id(),
+		open: props.open,
+		defaultOpen: props.defaultOpen,
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		closeOnEscape: props.closeOnEscape ?? true,
+		closeOnInteractOutside: props.closeOnOutside ?? true,
+		onEscapeKeyDown: props.onEscapeKeyDown,
+		initialFocusEl: () => props.initialFocus?.() ?? null,
+		finalFocusEl: () => props.finalFocus?.() ?? null,
+		restoreFocus: props.restoreFocus ?? true,
+		modal: !props.additionalFocusContainers,
+		trapFocus: !props.additionalFocusContainers,
+		preventScroll: true,
+		role: props.role ?? "dialog",
+		persistentElements: isServer ? [] : props.additionalFocusContainers?.().filter((element) => Boolean(element)).map((element) => () => element),
+		ids: {
+			content: id(),
+			title: `${id()}-title`,
+			description: `${id()}-description`
+		}
+	}));
+	const open = createMemo(() => api().open);
 	createEffect(() => {
-		if (!open()) return;
-		previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		queueMicrotask(() => {});
-		const onKeyDown = (event) => {
-			if (event.key === "Escape" && props.closeOnEscape !== false) {
-				event.preventDefault();
-				setOpen(false);
-				return;
-			}
-			if (event.key !== "Tab" || true) return;
-			const candidates = [...panel.querySelectorAll(focusable)].filter((element) => !element.hidden && element.getAttribute("aria-hidden") !== "true");
-			if (candidates.length === 0) {
-				event.preventDefault();
-				panel.focus();
-				return;
-			}
-			const first = candidates[0];
-			const last = candidates[candidates.length - 1];
-			if (event.shiftKey && document.activeElement === first) {
-				event.preventDefault();
-				last.focus();
-			} else if (!event.shiftKey && document.activeElement === last) {
-				event.preventDefault();
-				first.focus();
-			}
-		};
-		document.addEventListener("keydown", onKeyDown);
+		const content = panel();
+		if (!open() || !props.additionalFocusContainers || !content) return;
+		const opener = content.ownerDocument.activeElement;
+		let trap;
+		let removeIsolation;
+		const [ready, setReady] = createSignal(false);
+		const containers = () => [content, ...props.additionalFocusContainers().filter((element) => Boolean(element?.isConnected && element.ownerDocument === content.ownerDocument))];
+		const frame = content.ownerDocument.defaultView.requestAnimationFrame(() => {
+			trap = new FocusTrap(containers(), {
+				document: content.ownerDocument,
+				escapeDeactivates: false,
+				allowOutsideClick: true,
+				preventScroll: true,
+				delayInitialFocus: false,
+				fallbackFocus: content,
+				getShadowRoot: true,
+				initialFocus: () => props.initialFocus?.() ?? void 0,
+				setReturnFocus: () => props.finalFocus?.() ?? (opener instanceof HTMLElement && opener.isConnected ? opener : false)
+			});
+			setReady(true);
+			trap.activate();
+		});
+		createEffect(() => {
+			if (!ready()) return;
+			const targets = containers();
+			trap.updateContainerElements(targets);
+			removeIsolation?.();
+			removeIsolation = ariaHidden(targets, { defer: false });
+		});
 		onCleanup(() => {
-			document.removeEventListener("keydown", onKeyDown);
-			queueMicrotask(() => previouslyFocused?.focus());
+			content.ownerDocument.defaultView.cancelAnimationFrame(frame);
+			removeIsolation?.();
+			trap?.deactivate({ returnFocus: props.restoreFocus !== false });
 		});
 	});
-	return createComponent(Show, {
-		get when() {
-			return open();
+	const cls = (base, extra) => classes(props.unstyled ? void 0 : base, extra);
+	const Content = () => {
+		usePresenceContext();
+		const nativeContent = (merge) => createComponent(Dynamic, mergeProps$1({ get component() {
+			return props.contentAs ?? "div";
+		} }, () => merge({})));
+		return createComponent(Dialog$1.Positioner, {
+			get ["class"]() {
+				return cls("dds-dialog-overlay", props.overlayClass);
+			},
+			get children() {
+				return createComponent(Dialog$1.Content, mergeProps$1(() => props.contentProps, { get ["class"]() {
+					return cls("dds-dialog", props.class);
+				} }, () => props.contentAs ? { asChild: nativeContent } : {}, {
+					get role() {
+						return props.role ?? "dialog";
+					},
+					"aria-modal": "true",
+					get ["aria-describedby"]() {
+						return memo(() => !!props.description)() ? `${id()}-description` : void 0;
+					},
+					get children() {
+						return (() => {
+							const parts = {
+								get title() {
+									return createComponent(Dialog$1.Title, {
+										get ["class"]() {
+											return cls("dds-dialog__title", props.titleClass);
+										},
+										get children() {
+											return props.title;
+										}
+									});
+								},
+								get description() {
+									return props.description && createComponent(Dialog$1.Description, {
+										get ["class"]() {
+											return cls("dds-dialog__body", props.descriptionClass);
+										},
+										get children() {
+											return props.description;
+										}
+									});
+								},
+								get children() {
+									return props.children;
+								},
+								get actions() {
+									return props.actions && ssr(_tmpl$$3, ssrHydrationKey() + ssrAttribute("class", escape(cls("dds-dialog__actions", props.actionsClass), true), false), escape(props.actions));
+								}
+							};
+							return props.frame ? props.frame(parts) : [
+								parts.title,
+								parts.description,
+								parts.children,
+								parts.actions
+							];
+						})();
+					}
+				}));
+			}
+		});
+	};
+	return createComponent(Dialog$1.RootProvider, {
+		value: api,
+		lazyMount: true,
+		unmountOnExit: true,
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return props.portal;
+				},
+				get fallback() {
+					return createComponent(Content, {});
+				},
+				get children() {
+					return createComponent(Portal, mergeProps$1(() => props.portalMount ? { mount: props.portalMount } : {}, { get children() {
+						return createComponent(Content, {});
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/radio-group.tsx
+/** Grouped radios delegate selection and roving keyboard focus to Ark. */
+function RadioGroup(props) {
+	props.value ?? props.defaultValue;
+	return createComponent(RadioGroup$1.Root, {
+		get value() {
+			return props.value;
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		},
+		get name() {
+			return props.name;
+		},
+		get form() {
+			return props.form;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get required() {
+			return props.required;
+		},
+		onValueChange: (details) => {
+			if (details.value !== null) props.onValueChange?.(details.value);
+		},
+		get ["class"]() {
+			return classes("dds-radio-group", props.class);
 		},
 		get children() {
-			return ssr(_tmpl$$4, ssrHydrationKey(), ssrAttribute("id", escape(id(), true), false) + ssrAttribute("class", escape(classes("dds-dialog", props.class), true), false), ssrAttribute("aria-labelledby", escape(titleId(), true), false) + ssrAttribute("aria-describedby", escape(describedBy(descriptionId()), true), false), ssrAttribute("id", escape(titleId(), true), false), escape(props.title), props.description && ssr(_tmpl$2$3, ssrHydrationKey() + ssrAttribute("id", escape(descriptionId(), true), false), escape(props.description)), escape(props.children), props.actions && ssr(_tmpl$3$1, ssrHydrationKey(), escape(props.actions)));
+			return [createComponent(RadioGroup$1.Label, {
+				"class": "dds-field__label",
+				get children() {
+					return props.label;
+				}
+			}), createComponent(For, {
+				get each() {
+					return props.options;
+				},
+				children: (option) => createComponent(RadioGroup$1.Item, {
+					get value() {
+						return option.value;
+					},
+					get disabled() {
+						return option.disabled;
+					},
+					"class": "dds-check",
+					get children() {
+						return [createComponent(RadioGroup$1.ItemHiddenInput, {
+							"class": "dds-check__input",
+							style: {}
+						}), createComponent(RadioGroup$1.ItemText, { get children() {
+							return option.label;
+						} })];
+					}
+				})
+			})];
 		}
 	});
 }
 //#endregion
 //#region src/icon.tsx
-var _tmpl$$3 = ["<g>", "</g>"];
-var _tmpl$2$2 = [
+var _tmpl$$2 = ["<g>", "</g>"];
+var _tmpl$2$1 = [
 	"<title",
 	">",
 	"</title>"
@@ -433,7 +661,7 @@ function Icon(props) {
 	]);
 	const icon = () => icons[local.name];
 	const directional = () => local.directional ?? directionPolicy.mirrorInRtl.includes(local.name);
-	return ssrElement("svg", mergeProps(rest, {
+	return ssrElement("svg", mergeProps$1(rest, {
 		get ["class"]() {
 			return classes(directional() && directionPolicy.cssClass, local.class);
 		},
@@ -464,20 +692,20 @@ function Icon(props) {
 		}
 	}), () => [
 		"<!--$-->",
-		local.label && ssr(_tmpl$2$2, ssrHydrationKey(), escape(local.label)),
+		local.label && ssr(_tmpl$2$1, ssrHydrationKey(), escape(local.label)),
 		"<!--/-->",
-		ssr(_tmpl$$3, icon().body)
+		ssr(_tmpl$$2, icon().body)
 	], true);
 }
 //#endregion
 //#region src/status-pill.tsx
-var _tmpl$$2 = [
+var _tmpl$$1 = [
 	"<code",
 	" data-status=\"",
 	"\">",
 	"</code>"
 ];
-var _tmpl$2$1 = [
+var _tmpl$2 = [
 	"<span",
 	" data-status=\"",
 	"\"",
@@ -505,195 +733,232 @@ function createStatusPill(config) {
 				return known() || !open.has(props.domain);
 			},
 			get fallback() {
-				return ssr(_tmpl$$2, ssrHydrationKey(), `${escape(props.domain, true)}.${escape(props.value, true)}`, escape(props.value));
+				return ssr(_tmpl$$1, ssrHydrationKey(), `${escape(props.domain, true)}.${escape(props.value, true)}`, escape(props.value));
 			},
 			get children() {
 				return (() => {
 					const value = resolved();
-					return ssr(_tmpl$2$1, ssrHydrationKey() + ssrAttribute("class", value.tone === "neutral" ? "dds-badge" : `dds-badge dds-badge--${escape(value.tone, true)}`, false), `${escape(props.domain, true)}.${escape(props.value, true)}`, ssrAttribute("data-tone", escape(value.tone, true), false), escape(value.text));
+					return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", value.tone === "neutral" ? "dds-badge" : `dds-badge dds-badge--${escape(value.tone, true)}`, false), `${escape(props.domain, true)}.${escape(props.value, true)}`, ssrAttribute("data-tone", escape(value.tone, true), false), escape(value.text));
 				})();
 			}
 		});
 	};
 }
 //#endregion
+//#region src/direction.ts
+/** SSR callers may supply direction; clients also inherit their containing DOM. */
+function useDirection(element, explicit) {
+	const [ambient, setAmbient] = createSignal("ltr");
+	onMount(() => {
+		const parent = element()?.parentElement;
+		if (!parent) return;
+		const update = () => setAmbient(getComputedStyle(parent).direction === "rtl" ? "rtl" : "ltr");
+		update();
+		const observer = new MutationObserver(update);
+		observer.observe(parent.ownerDocument.documentElement, {
+			attributes: true,
+			subtree: true,
+			attributeFilter: ["dir"]
+		});
+		onCleanup(() => observer.disconnect());
+	});
+	return () => explicit() ?? ambient();
+}
+//#endregion
 //#region src/tabs.tsx
-var TabsContext = createContext();
-var useTabs = () => {
-	const context = useContext(TabsContext);
-	if (!context) throw new Error("Tab components must be rendered inside <Tabs>");
-	return context;
-};
 function Tabs(props) {
 	const generated = createUniqueId();
 	const id = () => props.id ?? `dds-tabs-${generated}`;
-	const [value, setValue] = createControllableSignal({
-		value: () => props.value,
-		defaultValue: props.defaultValue,
-		onChange: props.onValueChange
-	});
-	const registered = [];
-	const context = {
-		value,
-		setValue,
-		orientation: props.orientation ?? "horizontal",
-		register(tab) {
-			registered.push(tab);
-			return () => {
-				const index = registered.indexOf(tab);
-				if (index >= 0) registered.splice(index, 1);
-			};
+	let root;
+	const direction = useDirection(() => root, () => props.dir);
+	const child = props.asChild ? (merge) => props.asChild(mergeProps(merge({}), { ref: (element) => {
+		root = element;
+	} })) : void 0;
+	return createComponent(LocaleProvider, {
+		get locale() {
+			return direction() === "rtl" ? "ar" : "en";
 		},
-		tabs: () => registered,
-		tabId: (tabValue) => `${id()}-tab-${tabValue}`,
-		panelId: (tabValue) => `${id()}-panel-${tabValue}`
-	};
-	return createComponent(TabsContext.Provider, {
-		value: context,
 		get children() {
-			return props.children;
+			return createComponent(Tabs$1.Root, mergeProps$1({
+				get id() {
+					return id();
+				},
+				get value() {
+					return props.value;
+				},
+				get defaultValue() {
+					return props.defaultValue;
+				},
+				get orientation() {
+					return props.orientation ?? "horizontal";
+				},
+				get activationMode() {
+					return props.activationMode ?? "automatic";
+				},
+				onValueChange: (details) => props.onValueChange?.(details.value),
+				lazyMount: false,
+				unmountOnExit: false,
+				get ["class"]() {
+					return props.unstyled ? void 0 : "dds-tabs-root";
+				}
+			}, child ? { asChild: child } : {}, {
+				ids: {
+					trigger: (value) => props.tabId?.(value) ?? `${id()}-tab-${value}`,
+					content: (value) => props.panelId?.(value) ?? `${id()}-panel-${value}`
+				},
+				get children() {
+					return props.children;
+				}
+			}));
 		}
 	});
 }
 function TabList(props) {
-	const context = useTabs();
 	const [local, rest] = splitProps(props, [
 		"class",
 		"children",
-		"onKeyDown"
+		"unstyled"
 	]);
-	return ssrElement("div", mergeProps(rest, {
+	return createComponent(Tabs$1.List, mergeProps$1(rest, {
 		get ["class"]() {
-			return classes("dds-tabs", local.class);
+			return classes(!local.unstyled && "dds-tabs", local.class);
 		},
-		role: "tablist",
-		get ["aria-orientation"]() {
-			return context.orientation;
+		get children() {
+			return local.children;
 		}
-	}), () => escape(local.children), true);
+	}));
 }
 function Tab(props) {
-	const context = useTabs();
 	const [local, rest] = splitProps(props, [
-		"value",
 		"class",
 		"children",
-		"disabled",
-		"onClick"
+		"value",
+		"unstyled",
+		"asChild"
 	]);
-	let element;
-	onMount(() => {
-		const unregister = context.register({
-			value: local.value,
-			element,
-			disabled: Boolean(local.disabled)
-		});
-		onCleanup(unregister);
-	});
-	return ssrElement("button", mergeProps(rest, {
-		get id() {
-			return context.tabId(local.value);
+	const child = local.asChild ? (merge) => local.asChild(mergeProps(merge({}), { ref: props.ref })) : void 0;
+	return createComponent(Tabs$1.Trigger, mergeProps$1(rest, {
+		get value() {
+			return local.value;
 		},
-		type: "button",
-		role: "tab",
 		get ["class"]() {
-			return classes("dds-tab", local.class);
-		},
-		get ["aria-selected"]() {
-			return context.value() === local.value;
-		},
-		get ["aria-controls"]() {
-			return context.panelId(local.value);
-		},
-		get tabindex() {
-			return context.value() === local.value ? 0 : -1;
-		},
-		get disabled() {
-			return local.disabled;
+			return classes(!local.unstyled && "dds-tab", local.class);
 		}
-	}), () => escape(local.children), true);
+	}, child ? { asChild: child } : {}, { get children() {
+		return local.children;
+	} }));
 }
 function TabPanel(props) {
-	const context = useTabs();
 	const [local, rest] = splitProps(props, [
 		"value",
-		"class",
-		"children"
+		"children",
+		"style"
 	]);
-	return ssrElement("div", mergeProps(rest, {
-		get id() {
-			return context.panelId(local.value);
-		},
-		role: "tabpanel",
-		get ["class"]() {
-			return local.class;
+	const tabs = useTabsContext();
+	const inactive = () => tabs().value !== local.value;
+	const style = () => !inactive() ? local.style : typeof local.style === "string" ? `${local.style.replace(/;+\s*$/, "")};display:none;` : {
+		...local.style,
+		display: "none"
+	};
+	return createComponent(Tabs$1.Content, mergeProps$1(rest, {
+		get value() {
+			return local.value;
 		},
-		get ["aria-labelledby"]() {
-			return context.tabId(local.value);
+		get style() {
+			return style();
 		},
 		get hidden() {
-			return context.value() !== local.value;
+			return inactive();
 		},
-		tabindex: "0"
-	}), () => escape(local.children), true);
+		get inert() {
+			return inactive();
+		},
+		get children() {
+			return local.children;
+		}
+	}));
 }
 //#endregion
 //#region src/toast.tsx
-var _tmpl$$1 = [
-	"<div",
-	" aria-live=\"polite\" aria-relevant=\"additions removals\">",
-	"</div>"
-];
-var _tmpl$2 = [
-	"<div",
-	"><span>",
-	"</span><!--$-->",
-	"<!--/--></div>"
-];
-var _tmpl$3 = [
-	"<button",
-	" type=\"button\" class=\"dds-iconbtn dds-iconbtn--sm\"",
-	">×</button>"
-];
 var ToastContext = createContext();
 function ToastProvider(props) {
-	const [toasts, setToasts] = createSignal([]);
-	const timers = /* @__PURE__ */ new Map();
+	const prefix = createUniqueId();
+	let scopedDocument;
+	const getRootNode = () => scopedDocument ??= new Proxy(document, { get(target, property) {
+		if (property === "getElementById") return (id) => id === "toast-group:bottom-end" ? null : target.getElementById(id);
+		const value = Reflect.get(target, property, target);
+		return typeof value === "function" ? value.bind(target) : value;
+	} });
+	const toaster = createToaster({
+		placement: "bottom-end",
+		overlap: false,
+		gap: space[8],
+		offsets: "var(--dds-space-16)",
+		removeDelay: 0,
+		hotkey: ["DDS_NO_HOTKEY"],
+		max: Number.MAX_SAFE_INTEGER,
+		pauseOnPageIdle: true
+	});
 	let sequence = 0;
-	const dismiss = (id) => {
-		const timer = timers.get(id);
-		if (timer) clearTimeout(timer);
-		timers.delete(id);
-		setToasts((current) => current.filter((toast) => toast.id !== id));
-	};
 	const api = {
 		show(input) {
-			const id = `dds-toast-${++sequence}`;
-			setToasts((current) => [...current, {
-				...input,
-				id
-			}]);
+			const id = `dds-toast-${prefix}-${++sequence}`;
 			const duration = input.duration ?? props.defaultDuration ?? 5e3;
-			if (duration > 0) timers.set(id, setTimeout(() => dismiss(id), duration));
+			toaster.create({
+				id,
+				description: input.message,
+				type: input.tone === "danger" ? "error" : input.tone ?? "info",
+				duration: duration > 0 ? duration : Infinity,
+				meta: { dds: {
+					...input,
+					id
+				} }
+			});
 			return id;
 		},
-		dismiss,
-		clear() {
-			for (const timer of timers.values()) clearTimeout(timer);
-			timers.clear();
-			setToasts([]);
-		}
+		dismiss: (id) => toaster.remove(id),
+		clear: () => toaster.remove()
 	};
 	onCleanup(api.clear);
 	return createComponent(ToastContext.Provider, {
 		value: api,
 		get children() {
-			return [props.children, ssr(_tmpl$$1, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-toast-region", props.class), true), false), escape(createComponent(For, {
-				get each() {
-					return toasts();
+			return [props.children, createComponent(Toaster, {
+				toaster,
+				getRootNode,
+				id: `dds-toast-region-${prefix}`,
+				get ["class"]() {
+					return classes("dds-toast-region", props.class);
+				},
+				get role() {
+					return props.regionLabel ? "region" : "presentation";
 				},
-				children: (toast) => ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-toast", `dds-toast--${toast.tone ?? "info"}`), true), false) + ssrAttribute("role", toast.tone === "danger" ? "alert" : "status", false), escape(toast.message), props.dismissLabel ? ssr(_tmpl$3, ssrHydrationKey(), ssrAttribute("aria-label", typeof props.dismissLabel === "function" ? escape(props.dismissLabel(toast), true) : escape(props.dismissLabel, true), false)) : escape(null))
-			})))];
+				get ["aria-label"]() {
+					return props.regionLabel ?? "";
+				},
+				children: (toast) => {
+					const record = () => toast().meta?.dds;
+					return createComponent(Toast.Root, {
+						get ["class"]() {
+							return classes("dds-toast", `dds-toast--${record().tone ?? "info"}`);
+						},
+						get role() {
+							return record().tone === "danger" ? "alert" : "status";
+						},
+						get children() {
+							return [createComponent(Toast.Description, { get children() {
+								return toast().description;
+							} }), props.dismissLabel && createComponent(Toast.CloseTrigger, {
+								"class": "dds-iconbtn dds-iconbtn--sm",
+								get ["aria-label"]() {
+									return memo(() => typeof props.dismissLabel === "function")() ? props.dismissLabel(record()) : props.dismissLabel;
+								},
+								children: "×"
+							})];
+						}
+					});
+				}
+			})];
 		}
 	});
 }
@@ -707,10 +972,8 @@ function useToast() {
 var _tmpl$ = [
 	"<span",
 	"><!--$-->",
-	"<!--/--><span",
-	" class=\"dds-tooltip__bubble\" role=\"tooltip\"",
-	">",
-	"</span></span>"
+	"<!--/--><!--$-->",
+	"<!--/--></span>"
 ];
 function Tooltip(props) {
 	const generated = createUniqueId();
@@ -718,18 +981,43 @@ function Tooltip(props) {
 	const [open, setOpen] = createControllableSignal({
 		value: () => props.open,
 		defaultValue: props.defaultOpen ?? false,
-		onChange: props.onOpenChange
+		onChange: (next) => props.onOpenChange?.(next)
+	});
+	const api = useTooltip(() => ({
+		id: id(),
+		ids: { content: id() },
+		open: open(),
+		onOpenChange: (details) => setOpen(details.open),
+		openDelay: 0,
+		closeDelay: 0
+	}));
+	return createComponent(Tooltip$1.RootProvider, {
+		value: api,
+		lazyMount: false,
+		unmountOnExit: false,
+		get children() {
+			return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-tooltip", props.class), true), false), escape(createComponent(Tooltip$1.Trigger, { asChild: (merge) => {
+				const [, attributes] = splitProps(merge(), ["onFocusIn", "onFocusOut"]);
+				return props.children({
+					...attributes,
+					"aria-describedby": id(),
+					onFocus: () => api().setOpen(true),
+					onBlur: () => api().setOpen(false),
+					onPointerEnter: () => api().setOpen(true),
+					onPointerLeave: () => api().setOpen(false)
+				});
+			} })), escape(createComponent(Tooltip$1.Positioner, { get children() {
+				return createComponent(Tooltip$1.Content, {
+					"class": "dds-tooltip__bubble",
+					get children() {
+						return props.content;
+					}
+				});
+			} })));
+		}
 	});
-	const trigger = {
-		"aria-describedby": id(),
-		onFocus: () => setOpen(true),
-		onBlur: () => setOpen(false),
-		onPointerEnter: () => setOpen(true),
-		onPointerLeave: () => setOpen(false)
-	};
-	return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-tooltip", props.class), true), false), escape(props.children(trigger)), ssrAttribute("id", escape(id(), true), false), ssrAttribute("hidden", !open(), true), escape(props.content));
 }
 //#endregion
-export { Button, Checkbox, ConsoleShell, Dialog, Field, Icon, IconButton, Radio, Select, Switch, Tab, TabList, TabPanel, Tabs, ToastProvider, Tooltip, createControllableSignal, createStatusPill, useToast };
+export { Button, Checkbox, ConsoleShell, Dialog, Field, Icon, IconButton, Radio, RadioGroup, Select, Switch, Tab, TabList, TabPanel, Tabs, ToastProvider, Tooltip, createControllableSignal, createStatusPill, useToast };
 
 //# sourceMappingURL=server.js.map