@pg-labs-incubator/cobweb 0.0.0-stage → 0.0.2

package/target/tsc/feedback/progress.d.ts

@@ -0,0 +1,281 @@
+import type { JSX } from "solid-js";
+import type { DomComponent, DomProps } from "..";
+import "./feedback.css";
+/**
+ * Range of values of a determinate progress indicator.
+ */
+export interface ProgressRange {
+    /**
+     * Value at which the indicator is empty.
+     *
+     * @defaultValue `0`
+     */
+    min?: number | undefined;
+    /**
+     * Value at which the indicator is complete.
+     *
+     * A maximum less than {@link ProgressRange.min | `min`} is raised to `min`.
+     *
+     * @defaultValue `1`
+     */
+    max?: number | undefined;
+}
+/**
+ * Properties common to all progress indicators.
+ */
+export type ProgressIndicatorProps = DomProps<HTMLDivElement, Omit<JSX.HTMLAttributes<HTMLDivElement>, "aria-disabled" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "role">> & ProgressRange & {
+    /**
+     * Current value, within the {@link ProgressRange | range}.
+     *
+     * The indicator is determinate while a value is supplied; the value is clamped into the range
+     * and exposed as `aria-valuenow`. Without a value, the indicator is indeterminate and omits
+     * `aria-valuenow`, as the ARIA `progressbar` role requires. A non-finite value shows the
+     * indicator empty.
+     */
+    value?: number | undefined;
+    /**
+     * Indicator is indeterminate, whether or not a value is supplied.
+     *
+     * @defaultValue `false`
+     */
+    indeterminate?: boolean | undefined;
+    /**
+     * Indicator color.
+     *
+     * The indicator and stop indicator are painted with the fill color of the respective color
+     * role. When omitted, the `cw-Feedback-progress-indicatorColor` design role applies.
+     */
+    color?: "error" | "primary" | "secondary" | "surface" | "tertiary" | undefined;
+    /**
+     * Accessible name of the indicator.
+     *
+     * A progress indicator requires an accessible name. Supply this, or `attr:aria-labelledby`
+     * referencing a visible label, describing the process whose progress is indicated.
+     */
+    label?: string | undefined;
+};
+/**
+ * {@link LinearProgressIndicator} component properties.
+ */
+export type LinearProgressIndicatorProps = ProgressIndicatorProps & {
+    /**
+     * Thickness of the indicator and its track, in CSS pixels.
+     *
+     * @defaultValue `4`
+     */
+    size?: number | undefined;
+    /**
+     * Gap between the indicator and the track, in CSS pixels.
+     *
+     * The visible gap excludes the round ends of the indicator and the track.
+     *
+     * @defaultValue `4`
+     */
+    gapSize?: number | undefined;
+    /**
+     * Diameter of the stop indicator at the end of the track, in CSS pixels.
+     *
+     * This overrides the `cw-Feedback-progress-stopSize` design role. The stop indicator is never
+     * larger than the track thickness.
+     */
+    stopSize?: number | undefined;
+};
+/**
+ * {@link LinearWavyProgressIndicator} component properties.
+ */
+export type LinearWavyProgressIndicatorProps = LinearProgressIndicatorProps & {
+    /**
+     * Amplitude of the wave, from `0`, a flat line, to `1`, the full wave height.
+     *
+     * When omitted, an indeterminate indicator is fully wavy, and a determinate indicator is flat
+     * up to 10 % and from 95 % of its range, and fully wavy in between. Amplitude changes animate.
+     */
+    amplitude?: number | undefined;
+    /**
+     * Length of a wave, in CSS pixels.
+     *
+     * @defaultValue `40` for a determinate and `20` for an indeterminate indicator
+     */
+    wavelength?: number | undefined;
+    /**
+     * Speed at which the wave travels towards the start of the indicator, in CSS pixels per
+     * second. `0` keeps the wave still.
+     *
+     * @defaultValue one wavelength per second
+     */
+    waveSpeed?: number | undefined;
+};
+/**
+ * {@link CircularProgressIndicator} component properties.
+ */
+export type CircularProgressIndicatorProps = ProgressIndicatorProps & {
+    /**
+     * Diameter of the indicator, in CSS pixels.
+     *
+     * @defaultValue `40`
+     */
+    size?: number | undefined;
+    /**
+     * Stroke width of the indicator and its track, in CSS pixels.
+     *
+     * @defaultValue `4`
+     */
+    strokeWidth?: number | undefined;
+    /**
+     * Gap between the indicator and the track, in CSS pixels.
+     *
+     * The visible gap excludes the round ends of the indicator and the track.
+     *
+     * @defaultValue `4`
+     */
+    gapSize?: number | undefined;
+};
+/**
+ * {@link CircularWavyProgressIndicator} component properties.
+ */
+export type CircularWavyProgressIndicatorProps = CircularProgressIndicatorProps & {
+    /**
+     * Amplitude of the wave, from `0`, a circle, to `1`, the full wave height.
+     *
+     * When omitted, an indeterminate indicator is fully wavy, and a determinate indicator is
+     * circular up to 10 % and from 95 % of its range, and fully wavy in between. Amplitude changes
+     * animate.
+     */
+    amplitude?: number | undefined;
+    /**
+     * Length of a wave along the circle, in CSS pixels.
+     *
+     * The circle holds a whole number of waves, at least five, so the actual wavelength is
+     * rounded to fit the circumference.
+     *
+     * @defaultValue `15`
+     */
+    wavelength?: number | undefined;
+    /**
+     * Speed at which the wave travels around the circle, in CSS pixels per second. `0` keeps the
+     * wave still.
+     *
+     * @defaultValue one wavelength per second
+     */
+    waveSpeed?: number | undefined;
+};
+/**
+ * Material 3 linear progress indicator.
+ *
+ * A linear progress indicator shows the progress of a process along a horizontal track, or, when
+ * indeterminate, that a process is running. Its track ends with a stop indicator while
+ * determinate, and is separated from the indicator by a gap. In a right-to-left context, the
+ * indicator progresses from the right.
+ *
+ * Value changes animate with the `cw-Feedback-progress-motion` spring, the non-bouncy spring
+ * Compose recommends for progress (`ProgressIndicatorDefaults.ProgressAnimationSpec`); the gap
+ * and the track follow the animated indicator. Indeterminate motion follows Compose's two-line
+ * cycle, pauses while the indicator is outside of the viewport, and stops at a still frame when
+ * reduced motion is preferred.
+ *
+ * # States
+ *
+ * The indicator is determinate while {@link ProgressIndicatorProps.value | `props.value`} is
+ * supplied and {@link ProgressIndicatorProps.indeterminate | `props.indeterminate`} is not
+ * `true`. The `cw-Progress-determinate` or `cw-Progress-indeterminate` CSS class is added to the
+ * root element accordingly.
+ *
+ * # Design
+ *
+ * Colors, the stop indicator, the default width, and value motion are controlled through the
+ * `progress` roles of the [`cw-Feedback`](./feedback.yaml) design attribute. Thickness and the
+ * gap are controlled through {@link LinearProgressIndicatorProps.size | `props.size`} and
+ * {@link LinearProgressIndicatorProps.gapSize | `props.gapSize`}.
+ *
+ * # Accessibility
+ *
+ * The root element has the `progressbar` role, exposes its range through `aria-valuemin` and
+ * `aria-valuemax`, and its value through `aria-valuenow` while determinate. Name it with
+ * {@link ProgressIndicatorProps.label | `props.label`}.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const LinearProgressIndicator: DomComponent<LinearProgressIndicatorProps>;
+/**
+ * Material 3 Expressive linear wavy progress indicator.
+ *
+ * A linear wavy indicator draws its indicator as a wave travelling along a flat track, towards
+ * the start of the indicator. A determinate indicator flattens near the start and the end of its
+ * range; amplitude changes animate as `WavyProgressIndicator.kt` does, with the standard easing
+ * while the wave grows and the emphasized accelerate easing while it flattens. The wave pauses
+ * while flat or outside of the viewport, and stops when reduced motion is preferred. Otherwise, it
+ * behaves as a {@link LinearProgressIndicator}.
+ *
+ * # Design
+ *
+ * The container is `LinearProgressIndicatorTokens.WaveHeight` (10px) tall for the default
+ * thickness, leaving room for the 3px wave amplitude above and below the stroke. Colors, the
+ * stop indicator, the default width, and value motion are controlled through the `progress`
+ * roles of the [`cw-Feedback`](./feedback.yaml) design attribute.
+ *
+ * The wave is generated for the measured width of the indicator, in its own CSS pixels, so that
+ * transforms of ancestors do not distort it. The server renders the wave for the default width.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const LinearWavyProgressIndicator: DomComponent<LinearWavyProgressIndicatorProps>;
+/**
+ * Material 3 circular progress indicator.
+ *
+ * A circular progress indicator shows the progress of a process along a circular track starting
+ * at 12 o'clock, or, when indeterminate, that a process is running. The indicator is separated
+ * from the track by a gap; an indeterminate indicator has no visible track, as
+ * `ProgressIndicatorDefaults.circularIndeterminateTrackColor` is transparent.
+ *
+ * Value changes animate with the `cw-Feedback-progress-motion` spring. Indeterminate motion
+ * follows Compose's six-second cycle of rotations and sweeps, pauses while the indicator is
+ * outside of the viewport, and stops at a still half circle when reduced motion is preferred.
+ *
+ * # States
+ *
+ * The indicator is determinate while {@link ProgressIndicatorProps.value | `props.value`} is
+ * supplied and {@link ProgressIndicatorProps.indeterminate | `props.indeterminate`} is not
+ * `true`. The `cw-Progress-determinate` or `cw-Progress-indeterminate` CSS class is added to the
+ * root element accordingly.
+ *
+ * # Design
+ *
+ * Colors and value motion are controlled through the `progress` roles of the
+ * [`cw-Feedback`](./feedback.yaml) design attribute. Size, stroke width, and the gap are
+ * controlled through {@link CircularProgressIndicatorProps.size | `props.size`},
+ * {@link CircularProgressIndicatorProps.strokeWidth | `props.strokeWidth`}, and
+ * {@link CircularProgressIndicatorProps.gapSize | `props.gapSize`}.
+ *
+ * # Accessibility
+ *
+ * The root element has the `progressbar` role, exposes its range through `aria-valuemin` and
+ * `aria-valuemax`, and its value through `aria-valuenow` while determinate. Name it with
+ * {@link ProgressIndicatorProps.label | `props.label`}.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const CircularProgressIndicator: DomComponent<CircularProgressIndicatorProps>;
+/**
+ * Material 3 Expressive circular wavy progress indicator.
+ *
+ * A circular wavy indicator draws its indicator as a wave travelling around a circular track. A
+ * determinate indicator is circular near the start and the end of its range; amplitude changes
+ * animate as `WavyProgressIndicator.kt` does. The wave pauses while circular or outside of the
+ * viewport, and stops when reduced motion is preferred. Otherwise, it behaves as a
+ * {@link CircularProgressIndicator}, with a visible track while indeterminate.
+ *
+ * # Design
+ *
+ * The indicator is `CircularProgressIndicatorTokens.WaveSize` (48px) wide by default. The wave is
+ * the morph between a circle and a rounded star of as many points as wavelengths fit the
+ * circumference, as in `CircularWavyProgressModifiers.kt`. Colors and value motion are
+ * controlled through the `progress` roles of the [`cw-Feedback`](./feedback.yaml) design
+ * attribute.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const CircularWavyProgressIndicator: DomComponent<CircularWavyProgressIndicatorProps>;

package/target/tsc/feedback/snackbar.d.ts

@@ -0,0 +1,398 @@
+import type { JSX } from "solid-js";
+import type { DomComponent, DomProps, StyleElement } from "..";
+import { DomController } from "../dom/client";
+import "../container/elevation-shadow.css";
+import "./feedback.css";
+/**
+ * Reason a snackbar was dismissed.
+ *
+ * | Reason          | Source                                                          |
+ * | --------------- | --------------------------------------------------------------- |
+ * | `"action"`      | The action was activated, without cancelling its click.         |
+ * | `"dismiss"`     | The dismiss button was activated.                               |
+ * | `"escape"`      | Escape was pressed while focus was within the snackbar.         |
+ * | `"programmatic"`| {@link SnackbarController.dismiss} or a {@link SnackbarQueue}.  |
+ * | `"replacement"` | The {@link SnackbarProps.request | request} was replaced.        |
+ * | `"timeout"`     | The {@link SnackbarProps.duration | duration} elapsed.          |
+ */
+export type SnackbarDismissReason = "action" | "dismiss" | "escape" | "programmatic" | "replacement" | "timeout";
+/**
+ * Function notified of the dismissal of a snackbar.
+ *
+ * @param reason - source of the dismissal
+ * @param event - event which requested the dismissal, if any
+ * @param controller - controller of the dismissed snackbar
+ */
+export type SnackbarDismissHandler = (reason: SnackbarDismissReason, event?: Event, controller?: SnackbarController) => void;
+/**
+ * Function handling the activation of a snackbar action.
+ *
+ * @param event - click activating the action; cancel it to keep the snackbar open
+ * @param controller - controller of the snackbar
+ */
+export type SnackbarActionHandler = (event: MouseEvent, controller: SnackbarController) => void;
+/**
+ * Snackbar presented by a {@link SnackbarQueue}.
+ */
+export interface SnackbarRequest {
+    /**
+     * Identifier of the request, generated when omitted.
+     */
+    readonly id?: string | undefined;
+    /**
+     * Message.
+     */
+    readonly message: JSX.Element;
+    /**
+     * Label of the action, if any.
+     */
+    readonly actionLabel?: string | undefined;
+    /**
+     * Content of the action, superseding {@link SnackbarRequest.actionLabel}.
+     */
+    readonly action?: JSX.Element;
+    /**
+     * Function handling the activation of the action.
+     */
+    readonly onAction?: SnackbarActionHandler | undefined;
+    /**
+     * Time before the snackbar is dismissed, in milliseconds; `0` keeps it open.
+     *
+     * @defaultValue `4000` without an action, and `0` with one
+     */
+    readonly duration?: number | undefined;
+    /**
+     * Pause the duration while the snackbar is hovered or focused.
+     *
+     * @defaultValue `true`
+     */
+    readonly pauseOnHover?: boolean | undefined;
+    /**
+     * Show a button dismissing the snackbar.
+     *
+     * @defaultValue `false`
+     */
+    readonly dismissible?: boolean | undefined;
+    /**
+     * Accessible name of the dismiss button.
+     *
+     * @defaultValue `"Dismiss"`
+     */
+    readonly dismissLabel?: string | undefined;
+    /**
+     * Place the action below the message, for a long action label.
+     *
+     * @defaultValue `false`
+     */
+    readonly actionOnNewLine?: boolean | undefined;
+    /**
+     * Key identifying duplicates: a request is not enqueued while another request with the same
+     * key, or the same id when no key is supplied, is current or pending.
+     */
+    readonly dedupeKey?: string | undefined;
+}
+/**
+ * {@link Snackbar} component properties.
+ */
+export type SnackbarProps = DomProps<HTMLDivElement, Omit<JSX.HTMLAttributes<HTMLDivElement>, "aria-atomic" | "aria-live" | "role">> & {
+    /**
+     * Message, superseding nested children.
+     */
+    message?: JSX.Element;
+    /**
+     * Request whose message and options are presented, superseding the respective properties.
+     *
+     * Replacing the request reports the dismissal of the previous request with the
+     * `"replacement"` reason, and opens an uncontrolled snackbar again.
+     */
+    request?: SnackbarRequest | undefined;
+    /**
+     * Snackbar is open.
+     *
+     * Supplying this property, including as `undefined`, controls the snackbar: dismissal is then
+     * requested through {@link SnackbarProps.onOpenChange | `onOpenChange`}, and the snackbar
+     * remains open until this property is `false`. Omit it to let the snackbar close itself.
+     *
+     * @defaultValue `true`
+     */
+    open?: boolean | undefined;
+    /**
+     * Function notified of a request to close the snackbar.
+     *
+     * @param open - requested visibility, always `false`
+     * @param event - event which requested the dismissal, if any
+     * @param reason - source of the dismissal
+     */
+    onOpenChange?: ((open: boolean, event?: Event, reason?: SnackbarDismissReason) => void) | undefined;
+    /**
+     * Label of the action, if any.
+     */
+    actionLabel?: string | undefined;
+    /**
+     * Content of the action, superseding {@link SnackbarProps.actionLabel | `actionLabel`}.
+     */
+    action?: JSX.Element;
+    /**
+     * Function handling the activation of the action, before the snackbar is dismissed.
+     *
+     * Cancel the click with `event.preventDefault()` to keep the snackbar open.
+     */
+    onAction?: SnackbarActionHandler | undefined;
+    /**
+     * Time before the snackbar is dismissed, in milliseconds; `0` keeps it open.
+     *
+     * As `SnackbarHostState.showSnackbar()` does, a snackbar with an action stays open by default,
+     * so that every user can reach its action. Make such a snackbar
+     * {@link SnackbarProps.dismissible | dismissible}.
+     *
+     * A change of the resolved duration, including through an action being added or removed,
+     * restarts the timing of an open snackbar.
+     *
+     * @defaultValue `4000` without an action (`SnackbarDuration.Short`), and `0` with one
+     * (`SnackbarDuration.Indefinite`)
+     */
+    duration?: number | undefined;
+    /**
+     * Pause the duration while the snackbar is hovered or focused.
+     *
+     * @defaultValue `true`
+     */
+    pauseOnHover?: boolean | undefined;
+    /**
+     * Show a button dismissing the snackbar.
+     *
+     * @defaultValue `false`
+     */
+    dismissible?: boolean | undefined;
+    /**
+     * Accessible name of the dismiss button.
+     *
+     * @defaultValue `"Dismiss"`
+     */
+    dismissLabel?: string | undefined;
+    /**
+     * Place the action below the message, for a long action label (`Snackbar.kt`
+     * `actionOnNewLine`).
+     *
+     * @defaultValue `false`
+     */
+    actionOnNewLine?: boolean | undefined;
+    /**
+     * Function notified of the dismissal of the snackbar, or the replacement of its request.
+     *
+     * The function is invoked once per dismissal, after
+     * {@link SnackbarProps.onOpenChange | `onOpenChange`}. An uncontrolled snackbar is then
+     * closing, while a controlled snackbar remains open until its `open` property is `false`.
+     */
+    onDismiss?: SnackbarDismissHandler | undefined;
+};
+/**
+ * {@link SnackbarHost} component properties.
+ */
+export type SnackbarHostProps = DomProps<HTMLDivElement, Omit<JSX.HTMLAttributes<HTMLDivElement>, "role">> & {
+    /**
+     * Queue whose current request is presented.
+     */
+    queue: SnackbarQueue;
+    /**
+     * Position of the presented snackbars in the viewport.
+     *
+     * @defaultValue `"bottom"`
+     */
+    position?: "bottom" | "bottom-end" | "bottom-start" | "top" | undefined;
+    /**
+     * Function notified of the dismissal of a presented snackbar.
+     */
+    onDismiss?: SnackbarDismissHandler | undefined;
+};
+/**
+ * Function notified of a change of a {@link SnackbarQueue}.
+ *
+ * @param reason - reason of the dismissal of a request, if a request was dismissed
+ * @param id - id of the dismissed request, if a request was dismissed
+ */
+type SnackbarQueueListener = (reason?: SnackbarDismissReason, id?: string) => void;
+/**
+ * First-in, first-out queue of snackbar requests.
+ *
+ * A {@link SnackbarHost} presents the current request of a queue, and the presented snackbar
+ * dismisses it, which advances the queue. The queue owns no timers: the presented snackbar times
+ * its own request.
+ */
+export declare class SnackbarQueue {
+    #private;
+    /**
+     * Construct an empty queue.
+     */
+    constructor();
+    /**
+     * Current request, or `null` while the queue is empty.
+     *
+     * @remarks
+     * This is **not** reactive; see {@link SnackbarQueue.subscribe}.
+     */
+    get current(): SnackbarRequest | null;
+    /**
+     * Number of requests waiting behind the {@link SnackbarQueue.current | current} request.
+     *
+     * @remarks
+     * This is **not** reactive; see {@link SnackbarQueue.subscribe}.
+     */
+    get pendingCount(): number;
+    /**
+     * Subscribe to changes of the current and pending requests.
+     *
+     * The listener is invoked synchronously after each change, with the reason and id of a
+     * dismissed request, if a request was dismissed. It is not invoked upon subscription; read
+     * {@link SnackbarQueue.current} for the current request.
+     *
+     * @param listener - function notified of changes
+     * @returns function which removes the subscription
+     */
+    subscribe(listener: SnackbarQueueListener): () => void;
+    /**
+     * Enqueue a request.
+     *
+     * A request with the same {@link SnackbarRequest.dedupeKey | key}, or the same id when no key
+     * is supplied, as the current or a pending request is not enqueued.
+     *
+     * @param request - request to enqueue
+     * @returns id of the enqueued request, or of its current or pending duplicate
+     */
+    enqueue(request: SnackbarRequest): string;
+    /**
+     * Enqueue a message.
+     *
+     * Duplicates are handled as for a request.
+     *
+     * @param message - message
+     * @param options - options of the request
+     * @returns id of the enqueued request, or of its current or pending duplicate
+     */
+    enqueue(message: JSX.Element, options?: Omit<SnackbarRequest, "message">): string;
+    /**
+     * Dismiss a request, advancing the queue when the current request is dismissed.
+     *
+     * @param id - id of the request to dismiss; the current request when omitted
+     * @param reason - reason notified to subscribers
+     * @returns `true` if, and only if, a request was dismissed
+     */
+    dismiss(id?: string, reason?: SnackbarDismissReason): boolean;
+    /**
+     * Dismiss every request.
+     *
+     * Subscribers are notified once, with the `"programmatic"` reason and the id of the current
+     * request, if any.
+     */
+    clear(): void;
+}
+/**
+ * Create an empty snackbar queue.
+ *
+ * @returns new queue
+ */
+export declare function createSnackbarQueue(): SnackbarQueue;
+/**
+ * Client-side controller of a {@link Snackbar}.
+ *
+ * The controller times the snackbar, pausing while it is hovered or focused, and requests its
+ * dismissal through the respective callbacks.
+ */
+export declare class SnackbarController extends DomController<SnackbarProps> {
+    #private;
+    /**
+     * Construct a new controller.
+     *
+     * @param props - component properties
+     */
+    constructor(props: SnackbarProps);
+    protected applyComponentProps(): void;
+    /**
+     * Request the dismissal of the snackbar.
+     *
+     * An uncontrolled snackbar closes. A controlled snackbar stops timing and requests closure
+     * through {@link SnackbarProps.onOpenChange}. Further requests are ignored until the snackbar
+     * opens again.
+     *
+     * @param event - event requesting the dismissal, if any
+     * @param reason - source of the dismissal
+     */
+    dismiss(event?: Event, reason?: SnackbarDismissReason): void;
+    protected onStyleElementChanged(curr: StyleElement | null): void;
+    protected onControllerCleanup(): void;
+    protected render(children: JSX.Element): JSX.Element;
+}
+/**
+ * Material 3 snackbar.
+ *
+ * A snackbar briefly shows a message about a process, with an optional action and dismiss
+ * button. It is dismissed after its {@link SnackbarProps.duration | duration}, which pauses
+ * while the snackbar is hovered or focused, by its action or dismiss button, or by Escape while
+ * focus is within it. A snackbar with an action stays open until dismissed, as Compose's
+ * `SnackbarHostState` does. Present a series of messages through a {@link SnackbarHost}.
+ *
+ * Opening fades the snackbar in with the fast effects spring while scaling it from 0.8 with the
+ * fast spatial spring, and closing reverses this motion (`SnackbarHost.kt`).
+ *
+ * # States
+ *
+ * An open snackbar has the `cw-Snackbar-open` CSS class. A closed snackbar is `hidden` and `inert`,
+ * and is no longer rendered once its exit motion finishes.
+ *
+ * # Design
+ *
+ * Design is controlled through the `snackbar` roles of the [`cw-Feedback`](./feedback.yaml)
+ * design attribute (`SnackbarTokens`): an inverse surface container with an extra small shape
+ * and level 3 elevation, up to 600px wide, 48px tall for a line and 68px for two. The action is
+ * a small text button in the inverse primary color, and the dismiss button a small icon button.
+ * {@link SnackbarProps.actionOnNewLine | `props.actionOnNewLine`} places a long action below the
+ * message.
+ *
+ * # Accessibility
+ *
+ * Opening a snackbar announces its message and action through a polite `status` live region,
+ * shared by the snackbars of a document, which exists before the announcement.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const Snackbar: DomComponent<SnackbarProps>;
+/**
+ * Client-side controller of a {@link SnackbarHost}.
+ *
+ * The host renders a snackbar for each request presented, and keeps the snackbar of a dismissed
+ * request until its exit motion finishes.
+ */
+export declare class SnackbarHostController extends DomController<SnackbarHostProps> {
+    #private;
+    /**
+     * Construct a new controller.
+     *
+     * @param props - component properties
+     */
+    constructor(props: SnackbarHostProps);
+    protected applyComponentProps(): void;
+    protected onControllerCleanup(): void;
+    protected render(): JSX.Element;
+}
+/**
+ * Material 3 snackbar host.
+ *
+ * A snackbar host presents the current request of a {@link SnackbarQueue} as a {@link Snackbar},
+ * fixed to the bottom or the top of the viewport. Requests are presented in order, one at a
+ * time: the snackbar of a dismissed request fades out while the next one fades in, in the same
+ * place (`SnackbarHost.kt` `FadeInFadeOutWithScale`). Dismissing a request through the queue
+ * dismisses its snackbar.
+ *
+ * The host does not render nested children; content of the page belongs outside of the host.
+ *
+ * # Design
+ *
+ * Snackbars are 12px from the edges of the viewport (`Snackbar.kt`), centered or aligned by
+ * {@link SnackbarHostProps.position | `props.position`}.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const SnackbarHost: DomComponent<SnackbarHostProps>;
+export {};