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

package/target/tsc/dom/server.d.ts

@@ -0,0 +1,65 @@
+import type { JSX } from "solid-js";
+import type { DomComponent } from "./client";
+import type { DomProps } from "./types";
+/**
+ * Pick properties not defined by standard DOM component {@link DomProps | properties}.
+ *
+ * This evaluates to an object of properties, defined in `P`, which are not defined by {@link
+ * DomProps}.
+ *
+ * @typeParam P - component properties type
+ */
+export type PickLocalDomProps<P extends DomProps> = Omit<P, keyof (P extends DomProps<infer E, infer A> ? DomProps<E, A> : DomProps)>;
+/**
+ * DOM element properties.
+ *
+ * This evaluates to an object of properties which can be applied directly to an element by
+ * SolidJS, compatible with `P`.
+ *
+ * @typeParam P - component {@link DomProps | properties} type
+ * @see {@link RenderServerDom}
+ */
+export type ElementDomProps<P extends DomProps> = P extends DomProps<infer _E, infer A> ? A : JSX.DOMAttributes<Element>;
+/**
+ * Function which renders elements of a DOM {@link ./client#DomComponent | component} in a server
+ * environment.
+ *
+ * This is invoked by a {@link ./index#defineDomComponent | defined} DOM component when an
+ * instance of the component is constructed, in a server environment. This function is invoked
+ * with {@link ElementDomProps | element} and {@link PickLocalDomProps | local} properties {@link
+ * solid-js#splitProps | split} from the properties the component instance is constructed with,
+ * respectively. See {@link defineServerDomComponent} for how these properties are evaluated.
+ *
+ * @typeParam P - component {@link DomProps | properties} type
+ * @param elemProps - properties which must be applied to the rendered element
+ * @param localProps - properties local to the component
+ * @returns rendered element
+ * @see {@link ./index#defineDomComponent}
+ */
+export type RenderServerDom<P extends DomProps> = (elemProps: ElementDomProps<P>, localProps: PickLocalDomProps<P>) => JSX.Element;
+/**
+ * Define a new server-side DOM {@link ./client#DomComponent | component}.
+ *
+ * The element and local properties the render function is invoked with are evaluated lazily:
+ * each property is read from the component properties, in an {@link solid-js#untrack |
+ * untracked} context, when the render function first reads it, and is retained for subsequent
+ * reads, so that a property is evaluated at most once. Properties may be assigned, which
+ * replaces their value. `boolean` values of attributes, namespaced under `attr:`, are resolved
+ * as they are by the client controller.
+ *
+ * Lazy evaluation lets the server render elements in the order the client renders them, which
+ * hydration depends on: each rendered element, including the elements of nested components, is
+ * identified by the order in which it is created. The client controller creates the elements of
+ * slot properties, such as `children`, only when inserting them into the element they are
+ * nested within, *after* creating that element. Thus, a render function must not read a slot
+ * property before it creates the element the slot is nested within. For example, destructuring
+ * `elemProps` with a rest element, such as `const { children, ...rest } = elemProps`, reads
+ * every property, including `children`, *before* any element is created. A render function
+ * should instead spread `elemProps` onto the element, as in `<div {...elemProps} />`, or read
+ * `elemProps.children` where the children are nested.
+ *
+ * @typeParam P - component properties type
+ * @param renderSupp - render function supplier
+ * @returns resulting component
+ */
+export declare function defineServerDomComponent<P extends DomProps>(renderSupp: () => RenderServerDom<P>): DomComponent<P>;

package/target/tsc/dom/types.d.ts

@@ -0,0 +1,134 @@
+import type { Accessor, JSX } from "solid-js";
+/**
+ * Union of renderable DOM element tags.
+ */
+export type DomTag = keyof JSX.IntrinsicElements;
+/**
+ * Pick DOM element attributes.
+ *
+ * This evaluates to an object which contains only properties of `T` which evaluate to DOM
+ * attributes.
+ *
+ * @typeParam T - DOM attributes type
+ */
+export type PickDomAttributes<T extends JSX.DOMAttributes<any> = JSX.DOMAttributes<unknown>> = Omit<T, "children" | "class" | "innerHTML" | "innerText" | "style" | "textContent" | (keyof JSX.AttrAttributes) | (keyof JSX.BoolAttributes) | (keyof JSX.CustomAttributes<unknown>) | (keyof JSX.CustomEventHandlersCamelCase<unknown>) | (keyof JSX.CustomEventHandlersLowerCase<unknown>) | (keyof JSX.CustomEventHandlersNamespaced<unknown>) | (keyof JSX.OnAttributes<unknown>) | (keyof JSX.OnCaptureAttributes<unknown>) | (keyof JSX.PropAttributes)>;
+/**
+ * Native event handler properties for a component's function element.
+ *
+ * Use the `event:` namespace, for example `event:click`. Multiword event names accept both
+ * `event:keyDown` and `event:keydown`. Handler parameters retain the event and current-target
+ * types of the corresponding Solid DOM handler. The callback value is captured at construction
+ * and is **not** reactive; a captured callback can still read current signals when invoked.
+ *
+ * @typeParam E - function element type
+ * @see {@link DomProps}
+ */
+export type DomEventHandlerProps<E extends Element> = {
+    /**
+     * Event handlers attached to function element.
+     *
+     * @remarks
+     * These properties are **not** reactive.
+     */
+    readonly [K in keyof JSX.CustomEventHandlersCamelCase<unknown> as K extends `on${infer Name}` ? `event:${Uncapitalize<Name> | Lowercase<Name>}` : never]: JSX.CustomEventHandlersCamelCase<E>[K];
+};
+/**
+ * DOM element attribute properties.
+ *
+ * This evaluates to an object whose keys are equal to DOM attribute keys defined by `A`,
+ * namespaced under `attr`, and values equal to the respective DOM attribute. For example, the
+ * `aria-hidden` attribute is recognized as `attr:aria-hidden`.
+ *
+ * @typeParam A - function element DOM attributes type
+ * @see {@link DomProps}
+ */
+export type DomAttributes<A extends JSX.DOMAttributes<any>> = {
+    [K in keyof PickDomAttributes<A> as K extends string ? `attr:${K}` : never]?: Extract<A[K], boolean | string | number | undefined> | undefined;
+};
+/**
+ * Base DOM {@link ./client#DomComponent | component} properties.
+ *
+ * Unlike standard SolidJS component properties, the {@link BaseDomProps."class" | `class`} and
+ * {@link BaseDomProps.ref | `ref`} properties are **not** reactive.
+ *
+ * @typeParam E - function element type
+ * @see {@link DomProps}
+ */
+export interface BaseDomProps<E extends Element> {
+    /**
+     * CSS class applied to style element.
+     *
+     * @remarks
+     * This is **not** reactive.
+     */
+    readonly class?: string;
+    /**
+     * Conditional CSS classes applied to style element.
+     */
+    classList?: Record<string, boolean | undefined> | undefined;
+    /**
+     * CSS property style mapping applied to style element.
+     */
+    style?: JSX.CSSProperties | undefined;
+    /**
+     * Children nested within the component's element tree.
+     *
+     * The component determines placement and may resolve an accessor reactively. See individual
+     * component slot properties for precedence between named content and children.
+     */
+    children?: Accessor<JSX.Element> | JSX.Element;
+    /**
+     * Reference to function element.
+     *
+     * @remarks
+     * This is **not** reactive.
+     */
+    readonly ref?: E | ((elem: E) => void);
+}
+/**
+ * DOM {@link ./client#DomComponent | component} properties.
+ *
+ * Cobweb distinguishes the style element returned by a component from its function element,
+ * which receives native attributes, listeners, and `ref`. These can be the same element.
+ *
+ * | Property | Target and behavior |
+ * | --- | --- |
+ * | `attr:<name>` | Native attribute on the function element, such as `attr:aria-label`. |
+ * | `event:<name>` | Native event handler on the function element; captured at construction. |
+ * | `class` | Whitespace-separated style-element classes; captured at construction. |
+ * | `classList` | Conditional style-element classes. |
+ * | `style` | Style-element `JSX.CSSProperties` object; CSS strings are not supported. |
+ * | `ref` | Function-element reference or callback; the supplied callback is not reactive. |
+ *
+ * Attributes are assigned the values {@link ../util#attributeValueOf} resolves, on both client
+ * and server. For example, `attr:aria-expanded={false}` assigns `"false"`, while
+ * `attr:hidden={false}` removes the attribute.
+ *
+ * Solid's generic `onClick`, `on:click`, and `onCapture:click` properties are not part of this
+ * type. Individual components may expose local callbacks, including the distinct interaction
+ * `onClick` callback supplied by {@link ../state/component#InteractableProps}. Use `event:click`
+ * for a native click listener and consult the component's callback contract for cancellation.
+ *
+ * @typeParam E - function element type
+ * @typeParam A - function element attributes type
+ * @see {@link ./client#DomComponent}
+ */
+export type DomProps<E extends Element = any, A extends JSX.DOMAttributes<E> = JSX.DOMAttributes<E>> = (BaseDomProps<E> & DomAttributes<A> & DomEventHandlerProps<E>);
+/**
+ * Evaluate to function element type from component {@link DomProps | properties}.
+ *
+ * @typeParam P - component properties type
+ */
+export type FunctionElement<P extends DomProps> = P extends DomProps<infer E, infer _A> ? E : Element;
+/**
+ * DOM {@link ./client#DomComponent | component} style element.
+ */
+export type StyleElement = HTMLElement | MathMLElement | SVGElement;
+/**
+ * Convert DOM {@link DomEventHandlerProps | component} event handler property to an element
+ * property key.
+ *
+ * @param name - component event handler property key
+ * @returns element event handler property key
+ */
+export declare function elementPropsKeyOfEvent(name: `event:${string}`): keyof JSX.CustomEventHandlersCamelCase<unknown>;

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

@@ -0,0 +1,116 @@
+import type { JSX } from "solid-js";
+import type { DomComponent, DomProps } from "..";
+import "./feedback.css";
+/**
+ * {@link Badge} component properties.
+ */
+export type BadgeProps = DomProps<HTMLSpanElement, JSX.HTMLAttributes<HTMLSpanElement>> & {
+    /**
+     * Number or short text shown by the badge.
+     *
+     * A badge without content is a small dot, as is a {@link BadgeProps.small | small} badge.
+     */
+    value?: number | string | undefined;
+    /**
+     * Greatest number shown; a greater number is shown as this number followed by `+`.
+     */
+    max?: number | undefined;
+    /**
+     * Badge is a small dot, without content.
+     *
+     * @defaultValue `false`
+     */
+    small?: boolean | undefined;
+    /**
+     * Badge color.
+     *
+     * The badge is filled with the fill color of the respective color role, and its content with
+     * the on-fill color. When omitted, the `cw-Feedback-badge` design roles apply, which follow the
+     * error color role.
+     */
+    color?: "error" | "primary" | "secondary" | "surface" | "tertiary" | undefined;
+};
+/**
+ * {@link BadgedBox} component properties.
+ */
+export type BadgedBoxProps = DomProps<HTMLSpanElement, JSX.HTMLAttributes<HTMLSpanElement>> & {
+    /**
+     * Badge shown over the content, usually a {@link Badge}.
+     *
+     * When omitted, a badge is shown with the {@link BadgedBoxProps.value | value},
+     * {@link BadgedBoxProps.max | max}, {@link BadgedBoxProps.small | small}, and
+     * {@link BadgedBoxProps.color | color} properties, while a value is supplied or the badge is
+     * small.
+     */
+    badge?: JSX.Element;
+    /**
+     * Number or short text shown by the badge, when {@link BadgedBoxProps.badge | badge} is
+     * omitted.
+     */
+    value?: number | string | undefined;
+    /**
+     * Greatest number shown by the badge, when {@link BadgedBoxProps.badge | badge} is omitted.
+     */
+    max?: number | undefined;
+    /**
+     * Badge is a small dot, when {@link BadgedBoxProps.badge | badge} is omitted.
+     *
+     * @defaultValue `false`
+     */
+    small?: boolean | undefined;
+    /**
+     * Badge color, when {@link BadgedBoxProps.badge | badge} is omitted.
+     */
+    color?: BadgeProps["color"];
+};
+/**
+ * Material 3 badge.
+ *
+ * A badge shows a count or a short status over the corner of an icon or a navigation item,
+ * usually through a {@link BadgedBox}. A badge without content is a small dot. A number greater
+ * than {@link BadgeProps.max | `props.max`} is shown as the maximum followed by `+`.
+ *
+ * # Design
+ *
+ * Design is controlled through the `badge` roles of the [`cw-Feedback`](./feedback.yaml) design
+ * attribute: a large badge is at least 16px tall and wide, with label-small text, and a small
+ * badge is a 6px dot (`BadgeTokens`). {@link BadgeProps.color | `props.color`} selects another
+ * color role. The `cw-Badge-small` CSS class is added to a small badge.
+ *
+ * # Accessibility
+ *
+ * As in Compose, a badge has no semantics of its own: its text is read as part of the content,
+ * and a {@link BadgedBox} describes its anchor with it. A badge without text is hidden from
+ * assistive technology, unless `attr:aria-label` names it, which makes it an image. A badge
+ * whose changes should be announced, such as a count of new messages, is a live region: add
+ * `attr:role="status"`.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const Badge: DomComponent<BadgeProps>;
+/**
+ * Material 3 badged box.
+ *
+ * A badged box shows a badge over the top end corner of its content, such as an icon or an icon
+ * button (`Badge.kt` `BadgedBox`). Supply a badge through {@link BadgedBoxProps.badge |
+ * `props.badge`}, or let the box render one from {@link BadgedBoxProps.value | `props.value`} and
+ * the related properties.
+ *
+ * # Design
+ *
+ * A large badge starts 12px inside the end edge of the content and overlaps its top edge by
+ * 14px; a small badge is inside the top end corner, 6px from the end edge. These offsets are the
+ * `badge` roles of the [`cw-Feedback`](./feedback.yaml) design attribute.
+ *
+ * # Accessibility
+ *
+ * The badge describes the first focusable element of the content, if any, through
+ * `aria-describedby`, so that focusing an icon button also conveys its count. Descriptions
+ * authored on that element are retained. As the content changes, the badge describes the element
+ * then focusable instead.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const BadgedBox: DomComponent<BadgedBoxProps>;

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

@@ -0,0 +1,3 @@
+// SPDX-License-Identifier: MPL-2.0
+
+export {};

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

@@ -0,0 +1,20 @@
+/**
+ * Selectors of the elements which can receive keyboard focus.
+ *
+ * Disabled controls, hidden inputs, and elements removed from the sequential focus navigation
+ * order are excluded.
+ */
+export declare const FOCUSABLE_SELECTORS: readonly string[];
+/**
+ * Determine whether focus is within an element.
+ *
+ * The focused element is read from the root of `elem`, its document or its shadow root. The
+ * `activeElement` of a document is the outermost shadow host while focus is within a shadow root,
+ * which no element of that shadow tree contains, whereas the `activeElement` of a root is
+ * retargeted to the tree of that root (HTML `DocumentOrShadowRoot.activeElement`), so that focus
+ * within a shadow root nested in `elem` is also within `elem`.
+ *
+ * @param elem - element to test
+ * @returns `true` if, and only if, the focused element is `elem` or a descendant of `elem`
+ */
+export declare function isFocusWithin(elem: Element): boolean;

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

@@ -0,0 +1,17 @@
+/**
+ * Material 3 feedback components: badges, progress and loading indicators, snackbars, and
+ * tooltips.
+ *
+ * @packageDocumentation
+ */
+export type { BadgeProps, BadgedBoxProps } from "./badge";
+export type { ContainedLoadingIndicatorProps, LoadingIndicatorProps } from "./loading";
+export type { CircularProgressIndicatorProps, CircularWavyProgressIndicatorProps, LinearProgressIndicatorProps, LinearWavyProgressIndicatorProps, ProgressIndicatorProps, ProgressRange } from "./progress";
+export type { SnackbarActionHandler, SnackbarDismissHandler, SnackbarDismissReason, SnackbarHostProps, SnackbarProps, SnackbarRequest } from "./snackbar";
+export type { PlainTooltipProps, RichTooltipProps, TooltipBaseProps, TooltipPlacement, TooltipTriggerContext, TooltipTriggerFactory } from "./tooltip";
+export { Badge, BadgedBox } from "./badge";
+export { ContainedLoadingIndicator, ContainedLoadingIndicatorController, LoadingIndicator, LoadingIndicatorController } from "./loading";
+export { CircularProgressIndicator, CircularWavyProgressIndicator, LinearProgressIndicator, LinearWavyProgressIndicator } from "./progress";
+export { Snackbar, SnackbarController, SnackbarHost, SnackbarHostController, SnackbarQueue, createSnackbarQueue } from "./snackbar";
+export { PlainTooltip, PlainTooltipController, RichTooltip, RichTooltipController, TooltipController } from "./tooltip";
+import "./feedback.css";

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

@@ -0,0 +1,194 @@
+import type { JSX } from "solid-js";
+import type { DomComponent, DomProps, StyleElement } from "..";
+import type { RoundedPolygon } from "../shape";
+import { DomController } from "../dom/client";
+import "./feedback.css";
+/**
+ * {@link LoadingIndicator} component properties.
+ */
+export type LoadingIndicatorProps = DomProps<HTMLDivElement, Omit<JSX.HTMLAttributes<HTMLDivElement>, "aria-valuemax" | "aria-valuemin" | "aria-valuenow">> & {
+    /**
+     * Accessible name of the indicator.
+     *
+     * An `attr:aria-label` property takes precedence whenever supplied, including as `undefined`.
+     *
+     * @defaultValue `"Loading"`
+     */
+    label?: string | undefined;
+    /**
+     * Shapes the indicator morphs between, at least two.
+     *
+     * An indeterminate indicator morphs through the shapes in a loop; a determinate indicator
+     * morphs from the first to the last shape as its value progresses. Shapes are normalized,
+     * and their morphs are built when first used and shared by every indicator using the same
+     * array.
+     *
+     * @defaultValue `LoadingIndicatorDefaults.IndeterminateIndicatorPolygons` (seven Material
+     * shapes, from `SoftBurst` to `Oval`) while indeterminate, and
+     * `LoadingIndicatorDefaults.DeterminateIndicatorPolygons` (a rotated `Circle` and `SoftBurst`)
+     * while determinate
+     * @throws {@link Error} fewer than two shapes are supplied
+     */
+    polygons?: readonly RoundedPolygon[] | undefined;
+    /**
+     * Width and height of the indicator, in CSS pixels.
+     *
+     * This overrides the `cw-Feedback-loading-size` design role. The active shape spans 38/48
+     * of the size.
+     */
+    size?: number | undefined;
+    /**
+     * Indicator color.
+     *
+     * The shape is painted with the fill color of the respective color role. When omitted, the
+     * `cw-Feedback-loading-color` design role, or for a contained indicator the
+     * `cw-Feedback-loading-containedColor` role, applies.
+     */
+    color?: "error" | "primary" | "secondary" | "surface" | "tertiary" | undefined;
+    /**
+     * Indeterminate motion is paused.
+     *
+     * This lets an application provide the means to pause moving content that WCAG 2.2.2 (Pause,
+     * Stop, Hide) requires when the indicator is shown alongside other content for a long time.
+     * The indicator keeps its semantics and its current shape.
+     *
+     * @defaultValue `false`
+     */
+    paused?: boolean | undefined;
+    /**
+     * Current value, within the range from {@link LoadingIndicatorProps.min | `min`} to {@link
+     * LoadingIndicatorProps.max | `max`}.
+     *
+     * The indicator is determinate while a value is supplied; the value is clamped into the range
+     * and exposed as `aria-valuenow`. Value changes animate.
+     */
+    value?: number | undefined;
+    /**
+     * Value at which a determinate indicator shows its first shape.
+     *
+     * @defaultValue `0`
+     */
+    min?: number | undefined;
+    /**
+     * Value at which a determinate indicator shows its last shape.
+     *
+     * @defaultValue `1`
+     */
+    max?: number | undefined;
+    /**
+     * Indicator is indeterminate, whether or not a value is supplied.
+     *
+     * @defaultValue `false`
+     */
+    indeterminate?: boolean | undefined;
+};
+/**
+ * {@link ContainedLoadingIndicator} component properties.
+ */
+export type ContainedLoadingIndicatorProps = LoadingIndicatorProps & {
+    /**
+     * Container color.
+     *
+     * A color role name paints the container with the container color of the role, and the
+     * indicator with the matching on-container color; any other value is a CSS color. When
+     * omitted, the `cw-Feedback-loading-containerColor` design role applies.
+     */
+    containerColor?: string | undefined;
+    /**
+     * Container corner radius, as CSS pixels or a CSS `border-radius` value.
+     *
+     * When omitted, the `cw-Feedback-loading-containerShape` design role applies.
+     */
+    containerShape?: number | string | undefined;
+};
+/**
+ * Client-side controller of a {@link LoadingIndicator} and a {@link ContainedLoadingIndicator}.
+ *
+ * Indeterminate motion and determinate value springs are driven by the shared motion frames of
+ * the indicator's window. Each frame writes the rotation to the rotation group alone, and samples
+ * the shape only when the frame shows another morph or progress, writing it only when its path
+ * data or transform changed, so a settled shape costs no path updates. Indeterminate motion runs
+ * only while the indicator is visible, not {@link LoadingIndicatorProps.paused | paused}, and
+ * reduced motion is not preferred; it resumes where it stopped.
+ *
+ * @typeParam P - component properties type
+ */
+export declare class LoadingIndicatorController<P extends LoadingIndicatorProps = LoadingIndicatorProps> extends DomController<P> {
+    #private;
+    /**
+     * Construct a new controller.
+     *
+     * @param props - component properties
+     * @param contained - indicator is contained
+     */
+    constructor(props: P, contained?: boolean);
+    protected applyComponentProps(): void;
+    protected onStyleElementChanged(curr: StyleElement | null): void;
+    protected onControllerCleanup(): void;
+    protected render(): JSX.Element;
+}
+/**
+ * Material 3 Expressive loading indicator.
+ *
+ * A loading indicator shows that content is loading, by morphing a shape through a sequence of
+ * Material shapes while rotating it, as `LoadingIndicator.kt` does. A determinate indicator
+ * instead morphs from its first to its last shape, and rotates half a turn counter-clockwise, as
+ * its value progresses; value changes animate with the non-bouncy spring Compose recommends for
+ * progress (`ProgressIndicatorDefaults.ProgressAnimationSpec`).
+ *
+ * Indeterminate motion runs while the indicator is visible and not
+ * {@link LoadingIndicatorProps.paused | paused}, and stops at its current frame when reduced
+ * motion is preferred.
+ *
+ * # States
+ *
+ * The indicator is determinate while {@link LoadingIndicatorProps.value | `props.value`} is
+ * supplied and {@link LoadingIndicatorProps.indeterminate | `props.indeterminate`} is not `true`.
+ * The `cw-LoadingIndicator-determinate` or `cw-LoadingIndicator-indeterminate` CSS class is added
+ * to the root element accordingly.
+ *
+ * # Design
+ *
+ * Size and colors are controlled through the `loading` roles of the
+ * [`cw-Feedback`](./feedback.yaml) design attribute. The active shape spans 38/48 of the
+ * indicator, reduced so that it remains within the indicator in any rotation.
+ *
+ * # Accessibility
+ *
+ * The root element has the `progressbar` role, named "Loading" unless
+ * {@link LoadingIndicatorProps.label | `props.label`} or `attr:aria-label` supplies a name, and
+ * exposes its range and value while determinate.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const LoadingIndicator: DomComponent<LoadingIndicatorProps>;
+/**
+ * Client-side controller of a {@link ContainedLoadingIndicator}.
+ */
+export declare class ContainedLoadingIndicatorController extends LoadingIndicatorController<ContainedLoadingIndicatorProps> {
+    /**
+     * Construct a new controller.
+     *
+     * @param props - component properties
+     */
+    constructor(props: ContainedLoadingIndicatorProps);
+    protected applyComponentProps(): void;
+}
+/**
+ * Material 3 Expressive contained loading indicator.
+ *
+ * A contained loading indicator is a {@link LoadingIndicator} on a container, for loading content
+ * over other content, such as a pull to refresh indicator.
+ *
+ * # Design
+ *
+ * The container color, shape, and the color of the indicator on it are controlled through the
+ * `loading` roles of the [`cw-Feedback`](./feedback.yaml) design attribute, or through
+ * {@link ContainedLoadingIndicatorProps.containerColor | `props.containerColor`} and
+ * {@link ContainedLoadingIndicatorProps.containerShape | `props.containerShape`}.
+ *
+ * @param props - component properties
+ * @returns rendered element
+ */
+export declare const ContainedLoadingIndicator: DomComponent<ContainedLoadingIndicatorProps>;

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

@@ -0,0 +1,75 @@
+/**
+ * Function notified of a change of an observed element.
+ *
+ * @typeParam T - type of the observed value
+ * @param value - observed value
+ */
+type ObservationListener<T> = (value: T) => void;
+/**
+ * Invoke a function once the exit motion of an element finishes.
+ *
+ * The exit motion consists of the running transitions of the opacity and the scale of the element.
+ * The function is invoked at once if there is none, and otherwise once each has finished or has
+ * been canceled.
+ *
+ * @param elem - element whose exit motion to wait for
+ * @param action - function to invoke
+ */
+export declare function whenExitMotionFinished(elem: Element, action: () => void): void;
+/**
+ * Invoke a function with the window of an element, once the element belongs to a document with a
+ * window.
+ *
+ * An element rendered from a template belongs to the inert document of the template until it is
+ * inserted into a document, which Solid does after the element is rendered, within the same task.
+ * The function is invoked at once for an element of a document with a window, and otherwise once
+ * the microtasks of the current task run, if the element was inserted by then.
+ *
+ * @param elem - element whose window to wait for
+ * @param action - function invoked with the window of the element
+ */
+export declare function whenInDocument(elem: Element, action: (view: Window) => void): void;
+/**
+ * Observe whether an element intersects the viewport of its document.
+ *
+ * All elements of a window share one `IntersectionObserver`, constructed from the element's own
+ * window, so that an element rendered into another frame is observed by that frame. The listener
+ * is first invoked asynchronously with the current state, then whenever the element enters or
+ * leaves the viewport, including when it is removed from its document.
+ *
+ * @param elem - element to observe
+ * @param listener - function invoked with `true` if, and only if, the element is visible
+ * @returns function which stops observing `elem`, or `undefined` if the element's window does not
+ * support intersection observers
+ */
+export declare function observeVisibility(elem: Element, listener: ObservationListener<boolean>): (() => void) | undefined;
+/**
+ * Observe the inline size of an element's content box.
+ *
+ * All elements of a window share one `ResizeObserver`, constructed from the element's own window.
+ * The size is the layout size, in the element's own CSS pixels: transforms and zoom applied by
+ * ancestors, such as the scale of an entering dialog, do not change it. The listener is first
+ * invoked asynchronously with the current size, then whenever the size changes.
+ *
+ * @param elem - element to observe
+ * @param listener - function invoked with the inline size of the element's content box
+ * @returns function which stops observing `elem`, or `undefined` if the element's window does not
+ * support resize observers
+ */
+export declare function observeInlineSize(elem: Element, listener: ObservationListener<number>): (() => void) | undefined;
+/**
+ * Observe mutations of an element and its subtree.
+ *
+ * All elements of a window share one `MutationObserver`, constructed from the element's own
+ * window. The listener is invoked once per batch of mutation records within the element, after
+ * the mutations. An element observed within another observed element notifies only its own
+ * listener of its mutations.
+ *
+ * @param elem - element to observe
+ * @param options - mutations to observe
+ * @param listener - function invoked after mutations
+ * @returns function which stops observing `elem`, or `undefined` if the element's window does not
+ * support mutation observers
+ */
+export declare function observeMutations(elem: Element, options: MutationObserverInit, listener: ObservationListener<void>): (() => void) | undefined;
+export {};