@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/snackbar/Snackbar.js

@@ -0,0 +1,253 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { announcePolite } from "../../utils/announce.js";
+import { Button } from "../button/Button.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import { firstTabbable, tabbables } from "../../utils/focus.js";
+import { matchesShortcut } from "../../utils/shortcut.js";
+import { SnackbarHostState, durationMillis } from "./snackbar-state.js";
+import { snackbarHostStyles, snackbarStyles } from "./snackbar-styles.js";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "react-aria";
+//#region src/components/snackbar/Snackbar.tsx
+/** Whether a snackbar is inside a {@link SnackbarHost}, whose live region announces it. */
+const InSnackbarHost = createContext(false);
+/** Material Symbols "close" (Apache-2.0). */
+function CloseIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+	});
+}
+const DEFAULT_LABELS = { dismiss: "Dismiss" };
+/**
+* M3 snackbar: a brief message about an app process, with an optional action and dismiss
+* button. Usually shown through a {@link SnackbarHost}; render it directly for custom
+* placement. Escape dismisses it while focus is inside (`onEscape`, or `onDismiss`).
+*
+* Outside a host it announces its message politely itself, when it appears and when the
+* message changes, without moving focus (the host's live region does this inside one).
+*
+* @example
+* <Snackbar actionLabel="Undo" onAction={undo} onDismiss={close}>Message archived</Snackbar>
+*/
+function Snackbar({ children, actionLabel, onAction, onDismiss, onEscape = onDismiss, labels: labelsProp, actionOnNewLine = false, classNames, className, onKeyDown, ...rest }) {
+	const styles = snackbarStyles({
+		newLine: actionOnNewLine && actionLabel !== void 0,
+		dismissible: onDismiss !== void 0
+	});
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const hasActions = actionLabel !== void 0 || onDismiss !== void 0;
+	const inHost = useContext(InSnackbarHost);
+	const messageRef = useRef(null);
+	const announced = useRef("");
+	useEffect(() => {
+		if (inHost) return;
+		const text = messageRef.current?.textContent?.trim() ?? "";
+		if (!text || text === announced.current) return;
+		announced.current = text;
+		announcePolite(text);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.key === "Escape" && onEscape && !event.defaultPrevented) {
+				event.stopPropagation();
+				onEscape();
+			}
+		},
+		"data-tokens": mergeDataTokens("md-comp-snackbar", rest),
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: messageRef,
+			className: styles.message({ class: classNames?.message }),
+			children
+		}), hasActions && /* @__PURE__ */ jsxs("div", {
+			className: styles.actions({ class: classNames?.actions }),
+			children: [actionLabel !== void 0 && /* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onPress: onAction,
+				"data-slot": "action",
+				className: styles.action({ class: classNames?.action }),
+				children: actionLabel
+			}), onDismiss && /* @__PURE__ */ jsx(IconButton, {
+				variant: "standard",
+				density: 0,
+				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+				"aria-label": labels.dismiss,
+				onPress: onDismiss,
+				"data-slot": "dismiss",
+				className: styles.dismiss({ class: classNames?.dismiss })
+			})]
+		})]
+	});
+}
+/** A {@link SnackbarHostState} that lives as long as the component. */
+function useSnackbarHostState() {
+	const [state] = useState(() => new SnackbarHostState());
+	return state;
+}
+/**
+* Shows the snackbars of a {@link SnackbarHostState} one at a time, in a polite live
+* region. Position it with `className` (e.g. `fixed inset-x-0 bottom-0`); a snackbar
+* expands upward from the bottom edge as it enters.
+*
+* - Snackbars without an action leave after 4s (`short`) or 10s (`long`); the timer pauses
+*   while the pointer or focus is on the snackbar. On the web, use an auto-dismissing
+*   snackbar only alongside inline feedback for the same event: it may be gone before
+*   someone reads it. Snackbars with an action stay until acted on or dismissed.
+* - The live region is rendered empty first: a snackbar shown before the host mounts (one
+*   at launch) appears once the region has been registered, so it's announced.
+* - `focusShortcut` (F6) moves focus to a snackbar with actions; Escape dismisses it.
+*   When it leaves, focus returns to where it was before it entered the snackbar; if that
+*   element is gone (an undone row was removed, say), to the control that followed it in
+*   the Tab order, or else the one before it.
+*
+* @example
+* const snackbar = useSnackbarHostState();
+* <SnackbarHost state={snackbar} className="fixed inset-x-0 bottom-0" />
+* snackbar.showSnackbar({ message: 'Saved' });
+*/
+function SnackbarHost({ state, snackbar, labels, focusShortcut = "F6", className, ref, ...rest }) {
+	const current = useSyncExternalStore(state.subscribe, state.getSnapshot, () => null);
+	const [items, setItems] = useState([]);
+	const [shown, setShown] = useState(null);
+	if (current !== shown) {
+		setShown(current);
+		if (current && !items.includes(current)) setItems([...items, current]);
+	}
+	const rootRef = useObjectRef(ref);
+	const [regionReady, setRegionReady] = useState(false);
+	useEffect(() => {
+		const timer = setTimeout(() => setRegionReady(true), 100);
+		return () => clearTimeout(timer);
+	}, []);
+	useEffect(() => {
+		if (!focusShortcut || !current) return;
+		const onKeyDown = (event) => {
+			if (event.defaultPrevented || !matchesShortcut(event, focusShortcut)) return;
+			const item = rootRef.current?.querySelector(`[data-snackbar-id="${current.id}"]`);
+			const target = item ? firstTabbable(item) : null;
+			if (!target) return;
+			event.preventDefault();
+			target.focus();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [
+		focusShortcut,
+		current,
+		rootRef
+	]);
+	const styles = snackbarHostStyles();
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: rootRef,
+		"aria-live": "polite",
+		"aria-atomic": "false",
+		className: styles.root({ class: className }),
+		children: (regionReady ? items : []).map((data) => /* @__PURE__ */ jsx(HostItem, {
+			data,
+			visible: data === current,
+			shortcut: focusShortcut && (data.visuals.actionLabel !== void 0 || data.visuals.withDismissAction) ? focusShortcut : void 0,
+			onExited: () => setItems((all) => all.filter((item) => item !== data)),
+			className: styles.item(),
+			children: snackbar ? snackbar(data) : /* @__PURE__ */ jsx(Snackbar, {
+				actionLabel: data.visuals.actionLabel,
+				onAction: data.performAction,
+				onDismiss: data.visuals.withDismissAction ? data.dismiss : void 0,
+				onEscape: data.dismiss,
+				labels,
+				actionOnNewLine: data.visuals.actionOnNewLine,
+				children: data.visuals.message
+			})
+		}, data.id))
+	});
+}
+function HostItem({ data, visible, shortcut, onExited, className, children }) {
+	const { isPresent, isExiting, exitProps } = usePresence(visible);
+	const [paused, setPaused] = useState(false);
+	const ref = useRef(null);
+	const returnTo = useRef(null);
+	const focusInside = useRef(false);
+	useLayoutEffect(() => {
+		if (visible || !focusInside.current) return;
+		focusInside.current = false;
+		const record = returnTo.current;
+		returnTo.current = null;
+		if (record) focusFirstAvailable(record);
+	}, [visible]);
+	useEffect(() => {
+		if (!isPresent) onExited();
+	}, [isPresent, onExited]);
+	useEffect(() => {
+		const ms = durationMillis(data.visuals);
+		if (!visible || paused || !Number.isFinite(ms)) return;
+		const timer = setTimeout(data.dismiss, ms);
+		return () => clearTimeout(timer);
+	}, [
+		data,
+		visible,
+		paused
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		...exitProps,
+		ref,
+		"data-exiting": isExiting || void 0,
+		"data-snackbar-id": data.id,
+		"aria-keyshortcuts": visible ? shortcut : void 0,
+		inert: !visible,
+		onPointerEnter: () => setPaused(true),
+		onPointerLeave: () => setPaused(ref.current?.contains(document.activeElement) ?? false),
+		onFocus: (event) => {
+			const from = event.relatedTarget;
+			if (!focusInside.current && !event.currentTarget.contains(from)) returnTo.current = from instanceof HTMLElement ? focusReturn(from, event.currentTarget) : null;
+			focusInside.current = true;
+			setPaused(true);
+		},
+		onBlur: (event) => {
+			if (event.currentTarget.contains(event.relatedTarget)) return;
+			if (visible) focusInside.current = false;
+			setPaused(false);
+		},
+		className,
+		children: /* @__PURE__ */ jsx(InSnackbarHost, {
+			value: true,
+			children
+		})
+	});
+}
+/**
+* Records `target` with its neighbours in the page's Tab order (leaving out the snackbar),
+* taken as focus enters the snackbar, so focus has somewhere sensible to go if `target` is
+* removed while the snackbar is open (APG: when the element that had focus is gone, move
+* focus to a logical place rather than letting it fall to the page).
+*/
+function focusReturn(target, snackbar) {
+	const order = tabbables(target.ownerDocument.body, (el) => snackbar.contains(el));
+	const isOutside = (el) => !el.contains(target) && !target.contains(el);
+	return {
+		target,
+		next: order.find((el) => isOutside(el) && target.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) ?? null,
+		previous: order.findLast((el) => isOutside(el) && target.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING) ?? null
+	};
+}
+function focusFirstAvailable({ target, next, previous }) {
+	[
+		target,
+		next,
+		previous
+	].find((el) => el?.isConnected && !el.closest("[inert]") && !el.matches(":disabled"))?.focus({ preventScroll: true });
+}
+//#endregion
+export { Snackbar, SnackbarHost, useSnackbarHostState };
+
+//# sourceMappingURL=Snackbar.js.map

package/dist/components/snackbar/Snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.js","names":[],"sources":["../../../src/components/snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from 'react';\nimport { useObjectRef } from 'react-aria';\nimport { usePresence } from '../../primitives/use-presence';\nimport { announcePolite, LIVE_REGION_DELAY } from '../../utils/announce';\nimport { cn } from '../../utils/cn';\nimport { firstTabbable, tabbables } from '../../utils/focus';\nimport { matchesShortcut } from '../../utils/shortcut';\nimport { Button } from '../button/Button';\nimport { IconButton } from '../icon-button/IconButton';\nimport { durationMillis, SnackbarHostState, type SnackbarData } from './snackbar-state';\nimport { snackbarHostStyles, snackbarStyles } from './snackbar-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\n/** Whether a snackbar is inside a {@link SnackbarHost}, whose live region announces it. */\nconst InSnackbarHost = createContext(false);\n\n/** Material Symbols \"close\" (Apache-2.0). */\nfunction CloseIcon() {\n  return (\n    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\n      <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n    </svg>\n  );\n}\n\nexport interface SnackbarClassNames {\n  /** The snackbar's container. */\n  root?: string;\n  /** The message text. */\n  message?: string;\n  /** The row holding the action and dismiss buttons. */\n  actions?: string;\n  /** The action button. */\n  action?: string;\n  /** The dismiss (×) button. */\n  dismiss?: string;\n}\n\nexport interface SnackbarLabels {\n  /** Name of the dismiss (×) button. @default \"Dismiss\" */\n  dismiss: string;\n}\n\nconst DEFAULT_LABELS: SnackbarLabels = { dismiss: 'Dismiss' };\n\ninterface SnackbarOwnProps {\n  /** The message. */\n  children: React.ReactNode;\n  /** Label of the action button. */\n  actionLabel?: string;\n  /** Called when the action button is pressed. */\n  onAction?: () => void;\n  /** Shows a dismiss (×) button that calls this. Escape calls it too. */\n  onDismiss?: () => void;\n  /**\n   * Called on Escape while focus is inside, which dismisses a snackbar with or without the ×\n   * button. @default onDismiss\n   */\n  onEscape?: () => void;\n  /** Words the snackbar announces, with English defaults. */\n  labels?: Partial<SnackbarLabels>;\n  /** Put the actions under the message, for long action labels. @default false */\n  actionOnNewLine?: boolean;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: SnackbarClassNames;\n}\n\nexport type SnackbarProps = SnackbarOwnProps &\n  Omit<ComponentPropsWithRef<'div'>, keyof SnackbarOwnProps>;\n\n/**\n * M3 snackbar: a brief message about an app process, with an optional action and dismiss\n * button. Usually shown through a {@link SnackbarHost}; render it directly for custom\n * placement. Escape dismisses it while focus is inside (`onEscape`, or `onDismiss`).\n *\n * Outside a host it announces its message politely itself, when it appears and when the\n * message changes, without moving focus (the host's live region does this inside one).\n *\n * @example\n * <Snackbar actionLabel=\"Undo\" onAction={undo} onDismiss={close}>Message archived</Snackbar>\n */\nexport function Snackbar({\n  children,\n  actionLabel,\n  onAction,\n  onDismiss,\n  onEscape = onDismiss,\n  labels: labelsProp,\n  actionOnNewLine = false,\n  classNames,\n  className,\n  onKeyDown,\n  ...rest\n}: SnackbarProps) {\n  const styles = snackbarStyles({\n    newLine: actionOnNewLine && actionLabel !== undefined,\n    dismissible: onDismiss !== undefined,\n  });\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const hasActions = actionLabel !== undefined || onDismiss !== undefined;\n  const inHost = useContext(InSnackbarHost);\n  const messageRef = useRef<HTMLDivElement>(null);\n  const announced = useRef('');\n  // Runs after every render, but announces only a new message.\n  useEffect(() => {\n    if (inHost) return;\n    const text = messageRef.current?.textContent?.trim() ?? '';\n    if (!text || text === announced.current) return;\n    announced.current = text;\n    announcePolite(text);\n  });\n  return (\n    <div\n      {...rest}\n      onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {\n        onKeyDown?.(event);\n        if (event.key === 'Escape' && onEscape && !event.defaultPrevented) {\n          event.stopPropagation();\n          onEscape();\n        }\n      }}\n      // The component tokens' hook (snackbar-tokens.ts).\n      data-tokens={mergeDataTokens('md-comp-snackbar', rest)}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <div ref={messageRef} className={styles.message({ class: classNames?.message })}>\n        {children}\n      </div>\n      {hasActions && (\n        <div className={styles.actions({ class: classNames?.actions })}>\n          {actionLabel !== undefined && (\n            <Button\n              variant=\"text\"\n              onPress={onAction}\n              data-slot=\"action\"\n              className={styles.action({ class: classNames?.action })}\n            >\n              {actionLabel}\n            </Button>\n          )}\n          {onDismiss && (\n            <IconButton\n              variant=\"standard\"\n              // The snackbar keeps its 48px height at every density, as a dialog header does.\n              density={0}\n              icon={<CloseIcon />}\n              aria-label={labels.dismiss}\n              onPress={onDismiss}\n              data-slot=\"dismiss\"\n              className={styles.dismiss({ class: classNames?.dismiss })}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A {@link SnackbarHostState} that lives as long as the component. */\nexport function useSnackbarHostState(): SnackbarHostState {\n  const [state] = useState(() => new SnackbarHostState());\n  return state;\n}\n\nexport interface SnackbarHostProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  /** The queue of snackbars to show, from `useSnackbarHostState()`. */\n  state: SnackbarHostState;\n  /** Renders each snackbar; defaults to {@link Snackbar}. */\n  snackbar?: (data: SnackbarData) => React.ReactNode;\n  /** Words each default snackbar announces, with English defaults. */\n  labels?: Partial<SnackbarLabels>;\n  /**\n   * The key combination that moves focus to a snackbar with actions, as the spec asks for on\n   * the web. F6 by default, the key React Aria's toasts take (browsers use it to move between\n   * the window's panes): while a snackbar with a control shows, F6 goes to it from anywhere on\n   * the page, and pressed again there it stays. Document it where your app lists its\n   * shortcuts. `false` turns it off.\n   * @default \"F6\"\n   */\n  focusShortcut?: string | false;\n}\n\n/**\n * Shows the snackbars of a {@link SnackbarHostState} one at a time, in a polite live\n * region. Position it with `className` (e.g. `fixed inset-x-0 bottom-0`); a snackbar\n * expands upward from the bottom edge as it enters.\n *\n * - Snackbars without an action leave after 4s (`short`) or 10s (`long`); the timer pauses\n *   while the pointer or focus is on the snackbar. On the web, use an auto-dismissing\n *   snackbar only alongside inline feedback for the same event: it may be gone before\n *   someone reads it. Snackbars with an action stay until acted on or dismissed.\n * - The live region is rendered empty first: a snackbar shown before the host mounts (one\n *   at launch) appears once the region has been registered, so it's announced.\n * - `focusShortcut` (F6) moves focus to a snackbar with actions; Escape dismisses it.\n *   When it leaves, focus returns to where it was before it entered the snackbar; if that\n *   element is gone (an undone row was removed, say), to the control that followed it in\n *   the Tab order, or else the one before it.\n *\n * @example\n * const snackbar = useSnackbarHostState();\n * <SnackbarHost state={snackbar} className=\"fixed inset-x-0 bottom-0\" />\n * snackbar.showSnackbar({ message: 'Saved' });\n */\nexport function SnackbarHost({\n  state,\n  snackbar,\n  labels,\n  focusShortcut = 'F6',\n  className,\n  ref,\n  ...rest\n}: SnackbarHostProps) {\n  const current = useSyncExternalStore(state.subscribe, state.getSnapshot, () => null);\n  // Keep a leaving snackbar rendered while the next one fades in (Compose cross-fades).\n  const [items, setItems] = useState<SnackbarData[]>([]);\n  const [shown, setShown] = useState<SnackbarData | null>(null);\n  if (current !== shown) {\n    setShown(current);\n    if (current && !items.includes(current)) setItems([...items, current]);\n  }\n  const rootRef = useObjectRef(ref);\n  // Screen readers often skip content that arrives with its live region, so snackbars go in\n  // only once the empty region has been on the page for a moment.\n  const [regionReady, setRegionReady] = useState(false);\n  useEffect(() => {\n    const timer = setTimeout(() => setRegionReady(true), LIVE_REGION_DELAY);\n    return () => clearTimeout(timer);\n  }, []);\n\n  // The shortcut focuses the shown snackbar's first control, if it has one.\n  useEffect(() => {\n    if (!focusShortcut || !current) return;\n    const onKeyDown = (event: globalThis.KeyboardEvent) => {\n      if (event.defaultPrevented || !matchesShortcut(event, focusShortcut)) return;\n      const item = rootRef.current?.querySelector(`[data-snackbar-id=\"${current.id}\"]`);\n      const target = item ? firstTabbable(item) : null;\n      if (!target) return;\n      event.preventDefault();\n      target.focus();\n    };\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [focusShortcut, current, rootRef]);\n\n  const styles = snackbarHostStyles();\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      className={styles.root({ class: className })}\n    >\n      {(regionReady ? items : []).map((data) => (\n        <HostItem\n          key={data.id}\n          data={data}\n          visible={data === current}\n          shortcut={\n            focusShortcut &&\n            (data.visuals.actionLabel !== undefined || data.visuals.withDismissAction)\n              ? focusShortcut\n              : undefined\n          }\n          onExited={() => setItems((all) => all.filter((item) => item !== data))}\n          className={styles.item()}\n        >\n          {snackbar ? (\n            snackbar(data)\n          ) : (\n            <Snackbar\n              actionLabel={data.visuals.actionLabel}\n              onAction={data.performAction}\n              onDismiss={data.visuals.withDismissAction ? data.dismiss : undefined}\n              onEscape={data.dismiss}\n              labels={labels}\n              actionOnNewLine={data.visuals.actionOnNewLine}\n            >\n              {data.visuals.message}\n            </Snackbar>\n          )}\n        </HostItem>\n      ))}\n    </div>\n  );\n}\n\nfunction HostItem({\n  data,\n  visible,\n  shortcut,\n  onExited,\n  className,\n  children,\n}: {\n  data: SnackbarData;\n  visible: boolean;\n  shortcut: string | undefined;\n  onExited: () => void;\n  className: string;\n  children: React.ReactNode;\n}) {\n  const { isPresent, isExiting, exitProps } = usePresence(visible);\n  const [paused, setPaused] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  // Where focus was before it entered, and whether it's still inside: when the snackbar\n  // leaves with focus in it, focus goes back there rather than falling to the page.\n  const returnTo = useRef<FocusReturn | null>(null);\n  const focusInside = useRef(false);\n\n  useLayoutEffect(() => {\n    if (visible || !focusInside.current) return;\n    focusInside.current = false;\n    const record = returnTo.current;\n    returnTo.current = null;\n    if (record) focusFirstAvailable(record);\n  }, [visible]);\n\n  useEffect(() => {\n    if (!isPresent) onExited();\n  }, [isPresent, onExited]);\n\n  // Auto-dismiss after the duration, paused while hovered or focused within.\n  useEffect(() => {\n    const ms = durationMillis(data.visuals);\n    if (!visible || paused || !Number.isFinite(ms)) return;\n    const timer = setTimeout(data.dismiss, ms);\n    return () => clearTimeout(timer);\n  }, [data, visible, paused]);\n\n  return (\n    <div\n      {...exitProps}\n      ref={ref}\n      data-exiting={isExiting || undefined}\n      data-snackbar-id={data.id}\n      aria-keyshortcuts={visible ? shortcut : undefined}\n      inert={!visible}\n      onPointerEnter={() => setPaused(true)}\n      onPointerLeave={() => setPaused(ref.current?.contains(document.activeElement) ?? false)}\n      onFocus={(event) => {\n        const from = event.relatedTarget;\n        if (!focusInside.current && !event.currentTarget.contains(from as Node | null)) {\n          returnTo.current =\n            from instanceof HTMLElement ? focusReturn(from, event.currentTarget) : null;\n        }\n        focusInside.current = true;\n        setPaused(true);\n      }}\n      onBlur={(event) => {\n        if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n        // A snackbar that is leaving keeps the record, to hand focus back.\n        if (visible) focusInside.current = false;\n        setPaused(false);\n      }}\n      className={className}\n    >\n      <InSnackbarHost value>{children}</InSnackbarHost>\n    </div>\n  );\n}\n\n/** Where focus goes back to when a snackbar leaves, with fallbacks in Tab order. */\ninterface FocusReturn {\n  target: HTMLElement;\n  next: HTMLElement | null;\n  previous: HTMLElement | null;\n}\n\n/**\n * Records `target` with its neighbours in the page's Tab order (leaving out the snackbar),\n * taken as focus enters the snackbar, so focus has somewhere sensible to go if `target` is\n * removed while the snackbar is open (APG: when the element that had focus is gone, move\n * focus to a logical place rather than letting it fall to the page).\n */\nfunction focusReturn(target: HTMLElement, snackbar: Element): FocusReturn {\n  const order = tabbables(target.ownerDocument.body, (el) => snackbar.contains(el));\n  const isOutside = (el: HTMLElement) => !el.contains(target) && !target.contains(el);\n  const next =\n    order.find(\n      (el) =>\n        isOutside(el) && target.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING,\n    ) ?? null;\n  const previous =\n    order.findLast(\n      (el) =>\n        isOutside(el) && target.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING,\n    ) ?? null;\n  return { target, next, previous };\n}\n\nfunction focusFirstAvailable({ target, next, previous }: FocusReturn) {\n  const available = [target, next, previous].find(\n    (el) => el?.isConnected && !el.closest('[inert]') && !el.matches(':disabled'),\n  );\n  // The element may have scrolled out of view while the snackbar had focus; returning\n  // focus never scrolls the page back to it (2026-10-15).\n  available?.focus({ preventScroll: true });\n}\n"],"mappings":"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"}

package/dist/components/snackbar/snackbar-state.d.ts

@@ -0,0 +1,58 @@
+//#region src/components/snackbar/snackbar-state.d.ts
+export type SnackbarDuration = 'short' | 'long' | 'indefinite';
+export type SnackbarResult = 'action-performed' | 'dismissed';
+export interface SnackbarVisuals {
+  message: string;
+  /** Label of the action button. */
+  actionLabel?: string;
+  /** Show a dismiss (×) button. */
+  withDismissAction?: boolean;
+  /** Put the action under the message, for long action labels. */
+  actionOnNewLine?: boolean;
+  /**
+   * How long it stays without an action. A snackbar with an action always stays until it's
+   * acted on or dismissed, as the spec requires, so this is ignored then.
+   * @default "short"
+   */
+  duration?: SnackbarDuration;
+}
+export interface ShowSnackbarOptions {
+  /**
+   * Replace the snackbar on screen (which resolves `'dismissed'`) instead of queueing behind
+   * it, for a snackbar with updated information.
+   */
+  replace?: boolean;
+}
+export interface SnackbarData {
+  /** Unique per shown snackbar. */
+  id: number;
+  visuals: SnackbarVisuals;
+  performAction: () => void;
+  dismiss: () => void;
+}
+/**
+ * Holds the snackbar queue for a {@link SnackbarHost}. Create one per host with
+ * `useSnackbarHostState()`.
+ */
+export declare class SnackbarHostState {
+  private current;
+  private queue;
+  private listeners;
+  /** The snackbar being shown, if any. */
+  get currentSnackbarData(): SnackbarData | null;
+  /**
+   * Shows a snackbar once any current one has gone (or at once with `replace`), and resolves
+   * with how it ended.
+   *
+   * @example
+   * const result = await snackbar.showSnackbar({ message: 'Archived', actionLabel: 'Undo' });
+   * if (result === 'action-performed') unarchive();
+   * snackbar.showSnackbar('3 files uploaded', { replace: true });
+   */
+  showSnackbar(visuals: SnackbarVisuals | string, { replace }?: ShowSnackbarOptions): Promise<SnackbarResult>;
+  subscribe: (listener: () => void) => () => void;
+  getSnapshot: () => SnackbarData | null;
+  private emit;
+}
+//#endregion
+//# sourceMappingURL=snackbar-state.d.ts.map

package/dist/components/snackbar/snackbar-state.js

@@ -0,0 +1,73 @@
+//#region src/components/snackbar/snackbar-state.ts
+/**
+* Compose `SnackbarDuration.toMillis` (without the platform accessibility multiplier). A
+* snackbar with an action never times out: "Snackbars with actions shouldn't auto-dismiss."
+*/
+function durationMillis({ duration = "short", actionLabel }) {
+	if (actionLabel !== void 0) return Infinity;
+	return duration === "short" ? 4e3 : duration === "long" ? 1e4 : Infinity;
+}
+let nextId = 1;
+/**
+* Holds the snackbar queue for a {@link SnackbarHost}. Create one per host with
+* `useSnackbarHostState()`.
+*/
+var SnackbarHostState = class {
+	current = null;
+	queue = [];
+	listeners = /* @__PURE__ */ new Set();
+	/** The snackbar being shown, if any. */
+	get currentSnackbarData() {
+		return this.current;
+	}
+	/**
+	* Shows a snackbar once any current one has gone (or at once with `replace`), and resolves
+	* with how it ended.
+	*
+	* @example
+	* const result = await snackbar.showSnackbar({ message: 'Archived', actionLabel: 'Undo' });
+	* if (result === 'action-performed') unarchive();
+	* snackbar.showSnackbar('3 files uploaded', { replace: true });
+	*/
+	showSnackbar(visuals, { replace = false } = {}) {
+		const resolved = typeof visuals === "string" ? { message: visuals } : visuals;
+		return new Promise((resolve) => {
+			const show = () => {
+				const finish = (result) => {
+					if (this.current?.id !== data.id) return;
+					this.current = null;
+					this.emit();
+					resolve(result);
+					this.queue.shift()?.();
+				};
+				const data = {
+					id: nextId++,
+					visuals: resolved,
+					performAction: () => finish("action-performed"),
+					dismiss: () => finish("dismissed")
+				};
+				this.current = data;
+				this.emit();
+			};
+			if (!this.current) show();
+			else if (replace) {
+				this.queue.unshift(show);
+				this.current.dismiss();
+			} else this.queue.push(show);
+		});
+	}
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	getSnapshot = () => this.current;
+	emit() {
+		this.listeners.forEach((listener) => listener());
+	}
+};
+//#endregion
+export { SnackbarHostState, durationMillis };
+
+//# sourceMappingURL=snackbar-state.js.map

package/dist/components/snackbar/snackbar-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar-state.js","names":[],"sources":["../../../src/components/snackbar/snackbar-state.ts"],"sourcesContent":["/*\n * Port of Compose's SnackbarHostState: snackbars are queued and shown one at a time;\n * `showSnackbar` resolves when the shown snackbar is acted on, dismissed or times out.\n */\n\nexport type SnackbarDuration = 'short' | 'long' | 'indefinite';\nexport type SnackbarResult = 'action-performed' | 'dismissed';\n\nexport interface SnackbarVisuals {\n  message: string;\n  /** Label of the action button. */\n  actionLabel?: string;\n  /** Show a dismiss (×) button. */\n  withDismissAction?: boolean;\n  /** Put the action under the message, for long action labels. */\n  actionOnNewLine?: boolean;\n  /**\n   * How long it stays without an action. A snackbar with an action always stays until it's\n   * acted on or dismissed, as the spec requires, so this is ignored then.\n   * @default \"short\"\n   */\n  duration?: SnackbarDuration;\n}\n\nexport interface ShowSnackbarOptions {\n  /**\n   * Replace the snackbar on screen (which resolves `'dismissed'`) instead of queueing behind\n   * it, for a snackbar with updated information.\n   */\n  replace?: boolean;\n}\n\nexport interface SnackbarData {\n  /** Unique per shown snackbar. */\n  id: number;\n  visuals: SnackbarVisuals;\n  performAction: () => void;\n  dismiss: () => void;\n}\n\n/**\n * Compose `SnackbarDuration.toMillis` (without the platform accessibility multiplier). A\n * snackbar with an action never times out: \"Snackbars with actions shouldn't auto-dismiss.\"\n */\nexport function durationMillis({ duration = 'short', actionLabel }: SnackbarVisuals): number {\n  if (actionLabel !== undefined) return Infinity;\n  return duration === 'short' ? 4000 : duration === 'long' ? 10000 : Infinity;\n}\n\nlet nextId = 1;\n\n/**\n * Holds the snackbar queue for a {@link SnackbarHost}. Create one per host with\n * `useSnackbarHostState()`.\n */\nexport class SnackbarHostState {\n  private current: SnackbarData | null = null;\n  private queue: (() => void)[] = [];\n  private listeners = new Set<() => void>();\n\n  /** The snackbar being shown, if any. */\n  get currentSnackbarData(): SnackbarData | null {\n    return this.current;\n  }\n\n  /**\n   * Shows a snackbar once any current one has gone (or at once with `replace`), and resolves\n   * with how it ended.\n   *\n   * @example\n   * const result = await snackbar.showSnackbar({ message: 'Archived', actionLabel: 'Undo' });\n   * if (result === 'action-performed') unarchive();\n   * snackbar.showSnackbar('3 files uploaded', { replace: true });\n   */\n  showSnackbar(\n    visuals: SnackbarVisuals | string,\n    { replace = false }: ShowSnackbarOptions = {},\n  ): Promise<SnackbarResult> {\n    const resolved = typeof visuals === 'string' ? { message: visuals } : visuals;\n    return new Promise((resolve) => {\n      const show = () => {\n        const finish = (result: SnackbarResult) => {\n          if (this.current?.id !== data.id) return;\n          this.current = null;\n          this.emit();\n          resolve(result);\n          this.queue.shift()?.();\n        };\n        const data: SnackbarData = {\n          id: nextId++,\n          visuals: resolved,\n          performAction: () => finish('action-performed'),\n          dismiss: () => finish('dismissed'),\n        };\n        this.current = data;\n        this.emit();\n      };\n      if (!this.current) show();\n      else if (replace) {\n        this.queue.unshift(show);\n        this.current.dismiss();\n      } else this.queue.push(show);\n    });\n  }\n\n  subscribe = (listener: () => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = () => this.current;\n\n  private emit() {\n    this.listeners.forEach((listener) => listener());\n  }\n}\n"],"mappings":";;;;;AA4CA,SAAgB,eAAe,EAAE,WAAW,SAAS,eAAwC;CAC3F,IAAI,gBAAgB,KAAA,GAAW,OAAO;CACtC,OAAO,aAAa,UAAU,MAAO,aAAa,SAAS,MAAQ;AACrE;AAEA,IAAI,SAAS;;;;;AAMb,IAAa,oBAAb,MAA+B;CAC7B,UAAuC;CACvC,QAAgC,CAAC;CACjC,4BAAoB,IAAI,IAAgB;;CAGxC,IAAI,sBAA2C;EAC7C,OAAO,KAAK;CACd;;;;;;;;;;CAWA,aACE,SACA,EAAE,UAAU,UAA+B,CAAC,GACnB;EACzB,MAAM,WAAW,OAAO,YAAY,WAAW,EAAE,SAAS,QAAQ,IAAI;EACtE,OAAO,IAAI,SAAS,YAAY;GAC9B,MAAM,aAAa;IACjB,MAAM,UAAU,WAA2B;KACzC,IAAI,KAAK,SAAS,OAAO,KAAK,IAAI;KAClC,KAAK,UAAU;KACf,KAAK,KAAK;KACV,QAAQ,MAAM;KACd,KAAK,MAAM,MAAM,CAAC,GAAG;IACvB;IACA,MAAM,OAAqB;KACzB,IAAI;KACJ,SAAS;KACT,qBAAqB,OAAO,kBAAkB;KAC9C,eAAe,OAAO,WAAW;IACnC;IACA,KAAK,UAAU;IACf,KAAK,KAAK;GACZ;GACA,IAAI,CAAC,KAAK,SAAS,KAAK;QACnB,IAAI,SAAS;IAChB,KAAK,MAAM,QAAQ,IAAI;IACvB,KAAK,QAAQ,QAAQ;GACvB,OAAO,KAAK,MAAM,KAAK,IAAI;EAC7B,CAAC;CACH;CAEA,aAAa,aAAyB;EACpC,KAAK,UAAU,IAAI,QAAQ;EAC3B,aAAa;GACX,KAAK,UAAU,OAAO,QAAQ;EAChC;CACF;CAEA,oBAAoB,KAAK;CAEzB,OAAe;EACb,KAAK,UAAU,SAAS,aAAa,SAAS,CAAC;CACjD;AACF"}

package/dist/components/snackbar/snackbar-styles.d.ts

@@ -0,0 +1,109 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/snackbar/snackbar-styles.d.ts
+/** Variant definitions for {@link Snackbar}; extend them to add variants. */
+export declare const snackbarStyles: import("tailwind-variants").TVReturnType<{
+  newLine: {
+    false: {
+      root: string;
+      message: string;
+    };
+    true: {
+      root: string;
+      message: string;
+      actions: string;
+    };
+  };
+  dismissible: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string[];
+  message: string;
+  actions: string;
+  action: string;
+  dismiss: string;
+}, undefined, {
+  newLine: {
+    false: {
+      root: string;
+      message: string;
+    };
+    true: {
+      root: string;
+      message: string;
+      actions: string;
+    };
+  };
+  dismissible: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string[];
+  message: string;
+  actions: string;
+  action: string;
+  dismiss: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  newLine: {
+    false: {
+      root: string;
+      message: string;
+    };
+    true: {
+      root: string;
+      message: string;
+      actions: string;
+    };
+  };
+  dismissible: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string[];
+  message: string;
+  actions: string;
+  action: string;
+  dismiss: string;
+}>>;
+/** Variant definitions for {@link SnackbarHost}. */
+export declare const snackbarHostStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  item: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  item: string[];
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  item: string[];
+}>>;
+/**
+ * The variants of {@link snackbarStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type SnackbarStyleProps = VariantProps<typeof snackbarStyles>;
+//#endregion
+//# sourceMappingURL=snackbar-styles.d.ts.map

package/dist/components/snackbar/snackbar-styles.js

@@ -0,0 +1,67 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/snackbar/snackbar-styles.ts
+/** Variant definitions for {@link Snackbar}; extend them to add variants. */
+const snackbarStyles = tv({
+	slots: {
+		root: [
+			"flex w-full max-w-[600px] min-h-[48px] ps-[16px]",
+			"rounded-[var(--_md-comp-snackbar-container-shape)] bg-[var(--_md-comp-snackbar-container-color)]",
+			"text-body-medium text-[color:var(--_md-comp-snackbar-supporting-text-color)]",
+			"shadow-[shadow:var(--_md-comp-snackbar-container-elevation)]",
+			"forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]"
+		],
+		message: "min-w-0",
+		actions: "flex shrink-0 items-center",
+		action: "text-[color:var(--_md-comp-snackbar-action-label-text-color)]",
+		dismiss: "text-[color:var(--_md-comp-snackbar-icon-color)]"
+	},
+	variants: {
+		newLine: {
+			false: {
+				root: "items-center",
+				message: "flex-1 py-[14px]"
+			},
+			true: {
+				root: "flex-col",
+				message: "py-[14px] pe-[16px]",
+				actions: "self-end pb-[4px]"
+			}
+		},
+		dismissible: {
+			true: {},
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		newLine: false,
+		dismissible: false,
+		class: {
+			root: "pe-[8px]",
+			message: "pe-[8px]"
+		}
+	}, {
+		newLine: true,
+		dismissible: false,
+		class: { actions: "pe-[8px]" }
+	}],
+	defaultVariants: {
+		newLine: false,
+		dismissible: false
+	}
+});
+/** Variant definitions for {@link SnackbarHost}. */
+const snackbarHostStyles = tv({ slots: {
+	root: "grid justify-items-center",
+	item: [
+		"col-start-1 row-start-1 flex w-full justify-center p-[12px] opacity-100",
+		"[clip-path:inset(-32px)] starting:[clip-path:inset(100%_-32px_-32px_-32px)] data-exiting:[clip-path:inset(100%_-32px_-32px_-32px)]",
+		"[transition-property:opacity,clip-path] motion-reduce:[transition-property:opacity]",
+		"[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]",
+		"[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]",
+		"starting:opacity-0 data-exiting:opacity-0"
+	]
+} });
+//#endregion
+export { snackbarHostStyles, snackbarStyles };
+
+//# sourceMappingURL=snackbar-styles.js.map

package/dist/components/snackbar/snackbar-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar-styles.js","names":[],"sources":["../../../src/components/snackbar/snackbar-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (Snackbar.kt with its styling fix, SnackbarHost.kt,\n * SnackbarTokens): `inverse-surface` at level 3 with 4px corners, up to 600px wide and at\n * least 48px tall, `body-medium` `inverse-on-surface` text with 16px before it and 14px\n * above and below, an `inverse-primary` text-button action and an `inverse-on-surface`\n * dismiss icon button; 8px after the action when there is no dismiss button. On a new\n * line, the actions sit at the end, 4px from the bottom. The host pads each snackbar by\n * 12px and fades it on fast effects while it expands upward from the bottom edge on fast\n * spatial (a clip-path reveal: the spec avoids scale and z-axis motion, and \"a snackbar at\n * the bottom of the screen expands upwards\"). The clip rests 32px outside the box so the\n * shadow shows; reduced motion keeps only the fade.\n *\n * The colours, corners and shadow come from the snackbar's component tokens\n * (`snackbar-tokens.ts`, `--md-comp-snackbar-*`); the root carries\n * `data-tokens=\"md-comp-snackbar\"`, and the parts read one private variable each. A consumer\n * class (`bg-surface-container`) still wins.\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link Snackbar}; extend them to add variants. */\nexport const snackbarStyles = tv({\n  slots: {\n    root: [\n      'flex w-full max-w-[600px] min-h-[48px] ps-[16px]',\n      'rounded-[var(--_md-comp-snackbar-container-shape)] bg-[var(--_md-comp-snackbar-container-color)]',\n      'text-body-medium text-[color:var(--_md-comp-snackbar-supporting-text-color)]',\n      'shadow-[shadow:var(--_md-comp-snackbar-container-elevation)]',\n      // Forced colours drop the fill and shadow, so the snackbar draws its edge instead.\n      'forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]',\n    ],\n    message: 'min-w-0',\n    actions: 'flex shrink-0 items-center',\n    action: 'text-[color:var(--_md-comp-snackbar-action-label-text-color)]',\n    dismiss: 'text-[color:var(--_md-comp-snackbar-icon-color)]',\n  },\n  variants: {\n    newLine: {\n      false: { root: 'items-center', message: 'flex-1 py-[14px]' },\n      true: {\n        root: 'flex-col',\n        message: 'py-[14px] pe-[16px]',\n        actions: 'self-end pb-[4px]',\n      },\n    },\n    dismissible: { true: {}, false: {} },\n  },\n  compoundVariants: [\n    { newLine: false, dismissible: false, class: { root: 'pe-[8px]', message: 'pe-[8px]' } },\n    { newLine: true, dismissible: false, class: { actions: 'pe-[8px]' } },\n  ],\n  defaultVariants: { newLine: false, dismissible: false },\n});\n\n/** Variant definitions for {@link SnackbarHost}. */\nexport const snackbarHostStyles = tv({\n  slots: {\n    root: 'grid justify-items-center',\n    item: [\n      'col-start-1 row-start-1 flex w-full justify-center p-[12px] opacity-100',\n      '[clip-path:inset(-32px)] starting:[clip-path:inset(100%_-32px_-32px_-32px)] data-exiting:[clip-path:inset(100%_-32px_-32px_-32px)]',\n      '[transition-property:opacity,clip-path] motion-reduce:[transition-property:opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n      'starting:opacity-0 data-exiting:opacity-0',\n    ],\n  },\n});\n\n/**\n * The variants of {@link snackbarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type SnackbarStyleProps = VariantProps<typeof snackbarStyles>;\n"],"mappings":";;;AAsBA,MAAa,iBAAiB,GAAG;CAC/B,OAAO;EACL,MAAM;GACJ;GACA;GACA;GACA;GAEA;EACF;EACA,SAAS;EACT,SAAS;EACT,QAAQ;EACR,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,OAAO;IAAE,MAAM;IAAgB,SAAS;GAAmB;GAC3D,MAAM;IACJ,MAAM;IACN,SAAS;IACT,SAAS;GACX;EACF;EACA,aAAa;GAAE,MAAM,CAAC;GAAG,OAAO,CAAC;EAAE;CACrC;CACA,kBAAkB,CAChB;EAAE,SAAS;EAAO,aAAa;EAAO,OAAO;GAAE,MAAM;GAAY,SAAS;EAAW;CAAE,GACvF;EAAE,SAAS;EAAM,aAAa;EAAO,OAAO,EAAE,SAAS,WAAW;CAAE,CACtE;CACA,iBAAiB;EAAE,SAAS;EAAO,aAAa;CAAM;AACxD,CAAC;;AAGD,MAAa,qBAAqB,GAAG,EACnC,OAAO;CACL,MAAM;CACN,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;AACF,EACF,CAAC"}

package/dist/components/snackbar/snackbar-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/snackbar/snackbar-tokens.d.ts
+/** The tokens of {@link Snackbar}: `--md-comp-snackbar-<part>`. */
+export declare const snackbarTokenSet: ComponentTokenSet<"container-color" | "container-elevation" | "icon-color" | "container-shape" | "supporting-text-color" | "action-label-text-color">;
+//#endregion
+//# sourceMappingURL=snackbar-tokens.d.ts.map