@emuanalytics/flow-rdf-ui 0.0.1

package/dist/types/components/input/input.d.ts

@@ -0,0 +1,176 @@
+import type { CSSResultGroup } from 'lit';
+import type { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element';
+/**
+ * @summary Inputs collect data from the user.
+ * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency flow-ui-icon
+ *
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the input.
+ * @slot suffix - Used to append a presentational icon or similar element to the input.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot show-password-icon - An icon to use in lieu of the default show password icon.
+ * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event flow-ui-blur - Emitted when the control loses focus.
+ * @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event flow-ui-clear - Emitted when the clear button is activated.
+ * @event flow-ui-focus - Emitted when the control gains focus.
+ * @event flow-ui-input - Emitted when the control receives input.
+ * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input - The internal `<input>` control.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart clear-button - The clear button.
+ * @csspart password-toggle-button - The password toggle button.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+export default class FlowInput extends FlowRdfElement implements FlowRdfFormControl {
+    static styles: CSSResultGroup;
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private readonly localize;
+    input: HTMLInputElement;
+    private hasFocus;
+    title: string;
+    /**
+     * The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
+     * to `text`.
+     */
+    type: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
+    /** The name of the input, submitted as a name/value pair with form data. */
+    name: string;
+    /** The current value of the input, submitted as a name/value pair with form data. */
+    value: string;
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string;
+    /** The input's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Draws a filled input. */
+    filled: boolean;
+    /** Draws a pill-style input with rounded edges. */
+    pill: boolean;
+    /** The input's label. If you need to display HTML, use the `label` slot instead. */
+    label: string;
+    /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
+    helpText: string;
+    /** Adds a clear button when the input is not empty. */
+    clearable: boolean;
+    /** Disables the input. */
+    disabled: boolean;
+    /** Placeholder text to show as a hint when the input is empty. */
+    placeholder: string;
+    /** Makes the input readonly. */
+    readonly: boolean;
+    /** Adds a button to toggle the password's visibility. Only applies to password types. */
+    passwordToggle: boolean;
+    /** Determines whether or not the password is currently visible. Only applies to password input types. */
+    passwordVisible: boolean;
+    /** Hides the browser's built-in increment/decrement spin buttons for number inputs. */
+    noSpinButtons: boolean;
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
+     */
+    form: string;
+    /** Makes the input a required field. */
+    required: boolean;
+    /** A regular expression pattern to validate input against. */
+    pattern: string;
+    /** The minimum length of input that will be considered valid. */
+    minlength: number;
+    /** The maximum length of input that will be considered valid. */
+    maxlength: number;
+    /** The input's minimum value. Only applies to date and number input types. */
+    min: number | string;
+    /** The input's maximum value. Only applies to date and number input types. */
+    max: number | string;
+    /**
+     * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+     * implied, allowing any numeric value. Only applies to date and number input types.
+     */
+    step: number | 'any';
+    /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
+    autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+    /** Indicates whether the browser's autocorrect feature is on or off. */
+    autocorrect: 'off' | 'on';
+    /**
+     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
+     */
+    autocomplete: string;
+    /** Indicates that the input should receive focus on page load. */
+    autofocus: boolean;
+    /** Used to customize the label or icon of the Enter key on virtual keyboards. */
+    enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    /** Enables spell checking on the input. */
+    spellcheck: boolean;
+    /**
+     * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+     * keyboard on supportive devices.
+     */
+    inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
+    get valueAsDate(): Date | null;
+    set valueAsDate(newValue: Date | null);
+    /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
+    get valueAsNumber(): number;
+    set valueAsNumber(newValue: number);
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    firstUpdated(): void;
+    private handleBlur;
+    private handleChange;
+    private handleClearClick;
+    private handleFocus;
+    private handleInput;
+    private handleInvalid;
+    private handleKeyDown;
+    private handlePasswordToggle;
+    handleDisabledChange(): void;
+    handleStepChange(): void;
+    handleValueChange(): Promise<void>;
+    /** Sets focus on the input. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the input. */
+    blur(): void;
+    /** Selects all the text in the input. */
+    select(): void;
+    /** Sets the start and end positions of the text selection (0-based). */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
+    /** Replaces a range of text with a new string. */
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
+    showPicker(): void;
+    /** Increments the value of a numeric input type by the value of the step attribute. */
+    stepUp(): void;
+    /** Decrements the value of a numeric input type by the value of the step attribute. */
+    stepDown(): void;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-input': FlowInput;
+    }
+}

package/dist/types/components/input/input.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/types/components/menu/menu.d.ts

@@ -0,0 +1,44 @@
+import type { CSSResultGroup } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element';
+import type FlowMenuItem from '../menu-item/menu-item';
+export interface MenuSelectEventDetail {
+    item: FlowMenuItem;
+}
+/**
+ * @summary Menus provide a list of options for the user to choose from.
+ * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The menu's content, including menu items, menu labels, and dividers.
+ *
+ * @event {{ item: FlowMenuItem }} flow-ui-select - Emitted when a menu item is selected.
+ */
+export default class FlowMenu extends FlowRdfElement {
+    static styles: CSSResultGroup;
+    defaultSlot: HTMLSlotElement;
+    connectedCallback(): void;
+    private handleClick;
+    private handleKeyDown;
+    private handleMouseDown;
+    private handleSlotChange;
+    private isMenuItem;
+    /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+    getAllItems(): FlowMenuItem[];
+    /**
+     * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+     * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+     */
+    getCurrentItem(): FlowMenuItem | undefined;
+    /**
+     * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+     * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+     */
+    setCurrentItem(item: FlowMenuItem): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-menu': FlowMenu;
+    }
+}

package/dist/types/components/menu/menu.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/types/components/menu-item/menu-item.d.ts

@@ -0,0 +1,50 @@
+import type { CSSResultGroup } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element';
+/**
+ * @summary Menu items provide options for the user to pick from in a menu.
+ * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu-item
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency flow-ui-icon
+ *
+ * @slot - The menu item's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
+ * @csspart prefix - The prefix container.
+ * @csspart label - The menu item label.
+ * @csspart suffix - The suffix container.
+ * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
+ */
+export default class FlowMenuItem extends FlowRdfElement {
+    static styles: CSSResultGroup;
+    private cachedTextLabel;
+    defaultSlot: HTMLSlotElement;
+    menuItem: HTMLElement;
+    /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+    type: 'normal' | 'checkbox';
+    /** Draws the item in a checked state. */
+    checked: boolean;
+    /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+    value: string;
+    /** Draws the menu item in a disabled state, preventing selection. */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleDefaultSlotChange;
+    private handleHostClick;
+    handleCheckedChange(): void;
+    handleDisabledChange(): void;
+    handleTypeChange(): void;
+    /** Returns a text label based on the contents of the menu item's default slot. */
+    getTextLabel(): string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-menu-item': FlowMenuItem;
+    }
+}

package/dist/types/components/menu-item/menu-item.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/types/components/menu-label/menu-label.d.ts

@@ -0,0 +1,21 @@
+import type { CSSResultGroup } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element';
+/**
+ * @summary Menu labels are used to describe a group of menu items.
+ * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu-label
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The menu label's content.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class FlowMenuLabel extends FlowRdfElement {
+    static styles: CSSResultGroup;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-menu-label': FlowMenuLabel;
+    }
+}

package/dist/types/components/menu-label/menu-label.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/types/components/mutation-observer/mutation-observer.d.ts

@@ -0,0 +1,44 @@
+import type { CSSResultGroup } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element';
+/**
+ * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+ * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/mutation-observer
+ * @status stable
+ * @since 2.0
+ *
+ * @event {{ mutationList: MutationRecord[] }} flow-ui-mutation - Emitted when a mutation occurs.
+ *
+ * @slot - The content to watch for mutations.
+ */
+export default class FlowMutationObserver extends FlowRdfElement {
+    static styles: CSSResultGroup;
+    private mutationObserver;
+    /**
+     * Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
+     * `attr="class id title"`. To watch all attributes, use `*`.
+     */
+    attr: string;
+    /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
+    attrOldValue: boolean;
+    /** Watches for changes to the character data contained within the node. */
+    charData: boolean;
+    /** Indicates whether or not the previous value of the node's text should be recorded. */
+    charDataOldValue: boolean;
+    /** Watches for the addition or removal of new child nodes. */
+    childList: boolean;
+    /** Disables the observer. */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleMutation;
+    private startObserver;
+    private stopObserver;
+    handleDisabledChange(): void;
+    handleChange(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-mutation-observer': FlowMutationObserver;
+    }
+}

package/dist/types/components/mutation-observer/mutation-observer.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/types/components/option/option.d.ts

@@ -0,0 +1,52 @@
+import type { CSSResultGroup } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element';
+/**
+ * @summary Options define the selectable items within various form controls such as [select](/components/select).
+ * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/option
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency flow-ui-icon
+ *
+ * @slot - The option's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-icon - The checked icon, a `<flow-ui-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+export default class FlowOption extends FlowRdfElement {
+    static styles: CSSResultGroup;
+    private cachedTextLabel;
+    private readonly localize;
+    defaultSlot: HTMLSlotElement;
+    current: boolean;
+    selected: boolean;
+    hasHover: boolean;
+    /**
+     * The option's value. When selected, the containing form control will receive this value. The value must be unique
+     * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
+     * multiple values.
+     */
+    value: string;
+    /** Draws the option in a disabled state, preventing selection. */
+    disabled: boolean;
+    connectedCallback(): void;
+    private handleDefaultSlotChange;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    handleDisabledChange(): void;
+    handleSelectedChange(): void;
+    handleValueChange(): void;
+    /** Returns a plain text label based on the option's content. */
+    getTextLabel(): string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-option': FlowOption;
+    }
+}

package/dist/types/components/option/option.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Prefix: Story;
+export declare const Suffix: Story;

package/dist/types/components/option/option.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/types/components/popup/popup.d.ts

@@ -0,0 +1,140 @@
+import type { CSSResultGroup } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element';
+/**
+ * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
+ * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/popup
+ * @status stable
+ * @since 2.0
+ *
+ * @event flow-ui-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
+ *  operations in your listener or consider debouncing it.
+ *
+ * @slot - The popup's content.
+ * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
+ *  `anchor` attribute or property instead.
+ *
+ * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
+ *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
+ *  maybe a border or box shadow.
+ * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
+ *
+ * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
+ *  attribute is used.
+ * @cssproperty [--arrow-color=var(--flow-ui-color-neutral-0)] - The color of the arrow.
+ * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ */
+export default class FlowPopup extends FlowRdfElement {
+    static styles: CSSResultGroup;
+    private anchorEl;
+    private cleanup;
+    /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
+    popup: HTMLElement;
+    private arrowEl;
+    /**
+     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a
+     * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.
+     */
+    anchor: Element | string;
+    /**
+     * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
+     * down and the popup will be hidden.
+     */
+    active: boolean;
+    /**
+     * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
+     * panel inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /**
+     * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
+     * clipped, using a `fixed` position strategy can often workaround it.
+     */
+    strategy: 'absolute' | 'fixed';
+    /** The distance in pixels from which to offset the panel away from its anchor. */
+    distance: number;
+    /** The distance in pixels from which to offset the panel along its anchor. */
+    skidding: number;
+    /**
+     * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
+     * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
+     * `::part(arrow)` in your stylesheet.
+     */
+    arrow: boolean;
+    /**
+     * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
+     * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
+     * align the arrow to the start, end, or center of the popover instead.
+     */
+    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
+    /**
+     * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
+     * this will prevent it from overflowing the corners.
+     */
+    arrowPadding: number;
+    /**
+     * When set, placement of the popup will flip to the opposite site to keep it in view. You can use
+     * `flipFallbackPlacements` to further configure how the fallback placement is determined.
+     */
+    flip: boolean;
+    /**
+     * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
+     * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip
+     * fallback strategy will be used instead.
+     * */
+    flipFallbackPlacements: string;
+    /**
+     * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
+     * the popup should be positioned using the best available fit based on available space or as it was initially
+     * preferred.
+     */
+    flipFallbackStrategy: 'best-fit' | 'initial';
+    /**
+     * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    flipBoundary: Element | Element[];
+    /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */
+    flipPadding: number;
+    /** Moves the popup along the axis to keep it in view when clipped. */
+    shift: boolean;
+    /**
+     * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    shiftBoundary: Element | Element[];
+    /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */
+    shiftPadding: number;
+    /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */
+    autoSize: 'horizontal' | 'vertical' | 'both';
+    /** Syncs the popup's width or height to that of the anchor element. */
+    sync: 'width' | 'height' | 'both';
+    /**
+     * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    autoSizeBoundary: Element | Element[];
+    /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
+    autoSizePadding: number;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): Promise<void>;
+    private handleAnchorChange;
+    private start;
+    private stop;
+    /** Forces the popup to recalculate and reposition itself. */
+    reposition(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-popup': FlowPopup;
+    }
+}

package/dist/types/components/popup/popup.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/types/components/popup/popup.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,35 @@
+import type { CSSResultGroup } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element';
+/**
+ * @summary Progress bars are used to show the status of an ongoing operation.
+ * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/progress-bar
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the progress indicator.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart indicator - The progress bar's indicator.
+ * @csspart label - The progress bar's label.
+ *
+ * @cssproperty --height - The progress bar's height.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --label-color - The color of the label.
+ */
+export default class FlowProgressBar extends FlowRdfElement {
+    static styles: CSSResultGroup;
+    private readonly localize;
+    /** The current progress as a percentage, 0 to 100. */
+    value: number;
+    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+    indeterminate: boolean;
+    /** A custom label for assistive devices. */
+    label: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-progress-bar': FlowProgressBar;
+    }
+}

package/dist/types/components/progress-bar/progress-bar.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/types/components/progress-ring/progress-ring.d.ts

@@ -0,0 +1,37 @@
+import type { CSSResultGroup } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element';
+/**
+ * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
+ * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/progress-ring
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the ring.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The progress ring label.
+ *
+ * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
+ */
+export default class FlowProgressRing extends FlowRdfElement {
+    static styles: CSSResultGroup;
+    private readonly localize;
+    indicator: SVGCircleElement;
+    indicatorOffset: string;
+    /** The current progress as a percentage, 0 to 100. */
+    value: number;
+    /** A custom label for assistive devices. */
+    label: string;
+    updated(changedProps: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-progress-ring': FlowProgressRing;
+    }
+}

package/dist/types/components/progress-ring/progress-ring.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;