@revotech-group/revotech-ui-kit 0.2.3 → 0.2.5

package/dist/src/components/ui/drawer/drawer.d.ts

@@ -0,0 +1,40 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+import { DrawerClose } from './drawer-close';
+import { DrawerContent } from './drawer-content';
+import { DrawerDescription } from './drawer-description';
+import { DrawerFooter } from './drawer-footer';
+import { DrawerHeader } from './drawer-header';
+import { DrawerOverlay } from './drawer-overlay';
+import { DrawerTitle } from './drawer-title';
+import { DrawerTrigger } from './drawer-trigger';
+import { TDrawerState } from './drawer.helpers';
+declare class Drawer extends BaseElement {
+    private get _containerElement();
+    state: TDrawerState;
+    private get _content();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    private handleOutsideClick;
+    private setupOutsideClickHandler;
+    private removeOutsideClickHandler;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected getAttributesToExclude(): string[];
+    render(): import('lit-html').TemplateResult<1>;
+}
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, };
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-drawer': Drawer;
+        'rtg-drawer-trigger': DrawerTrigger;
+        'rtg-drawer-content': DrawerContent;
+        'rtg-drawer-close': DrawerClose;
+        'rtg-drawer-footer': DrawerFooter;
+        'rtg-drawer-header': DrawerHeader;
+        'rtg-drawer-overlay': DrawerOverlay;
+        'rtg-drawer-discription': DrawerDescription;
+        'rtg-drawer-title': DrawerTitle;
+    }
+}

package/dist/src/components/ui/drawer/drawer.helpers.d.ts

@@ -0,0 +1,2 @@
+export type TDrawerState = 'open' | 'closed';
+export declare const DRAWER_STATE: Record<TDrawerState, TDrawerState>;

package/dist/src/components/ui/drawer/drawer.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryFn } from '@storybook/web-components-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Drawer: StoryFn;

package/dist/src/components/ui/drawer/drawer.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const drawerStyles: {
+    root: string[];
+    trigger: string[];
+    close: string[];
+    overlay: string[];
+    content: {
+        base: string[];
+        thumb: string[];
+    };
+    header: string[];
+    footer: string[];
+    title: string[];
+    description: string[];
+};

package/dist/src/components/ui/dropdown-menu/dropdown-menu-checkbox-Item.d.ts

@@ -0,0 +1,17 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+import { DropdownMenu } from './dropdown-menu';
+export declare class DropdownMenuCheckboxItem extends BaseElement {
+    _id: string;
+    get value(): string;
+    get _containerElement(): HTMLDivElement | null;
+    get _dropdownMenu(): DropdownMenu | null;
+    selected: boolean;
+    private handleMouseEvent;
+    checked: boolean;
+    disabled: boolean;
+    toggleChecked(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/dropdown-menu/dropdown-menu-content.d.ts

@@ -0,0 +1,13 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+import { DropdownMenu } from './dropdown-menu';
+export declare class DropdownMenuContent extends BaseElement {
+    state: string;
+    isOpen: boolean;
+    get _dropdownMenu(): DropdownMenu | null;
+    get _containerElement(): HTMLDivElement | null;
+    updated(changedProps: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/dropdown-menu/dropdown-menu-group.d.ts

@@ -0,0 +1,11 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+export declare class DropdownMenuGroup extends BaseElement {
+    heading: string;
+    _id: string;
+    _hidden: string;
+    get _containerElement(): HTMLDivElement | null;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/dropdown-menu/dropdown-menu-item.d.ts

@@ -0,0 +1,17 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+import { DropdownMenu } from './dropdown-menu';
+export declare class DropdownMenuItem extends BaseElement {
+    _id: string;
+    _hidden: string;
+    get _containerElement(): HTMLDivElement | null;
+    get value(): string;
+    get _dropdownMenu(): DropdownMenu | null;
+    selected: boolean;
+    disabled: boolean;
+    private handleMouseEvent;
+    private handleClickDefault;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/dropdown-menu/dropdown-menu-radio-item.d.ts

@@ -0,0 +1,16 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+export declare class DropdownMenuRadioItem extends BaseElement {
+    _id: string;
+    _hidden: string;
+    get value(): string;
+    get _containerElement(): HTMLDivElement | null;
+    selected: boolean;
+    private handleMouseEvent;
+    checked: boolean;
+    disabled: boolean;
+    toggleChecked(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/dropdown-menu/dropdown-menu-seperator.d.ts

@@ -0,0 +1,8 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+export declare class DropdownMenuSeparator extends BaseElement {
+    get _containerElement(): HTMLDivElement | null;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/dropdown-menu/dropdown-menu-shortcut.d.ts

@@ -0,0 +1,8 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+export declare class DropdownMenuShortcut extends BaseElement {
+    get _containerElement(): HTMLSpanElement | null;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/dropdown-menu/dropdown-menu-trigger.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class DropdownMenuTrigger extends LitElement {
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,40 @@
+import { BaseElement } from '../../../helpers';
+import { PropertyValues } from 'lit';
+import { DropdownMenuCheckboxItem } from './dropdown-menu-checkbox-Item';
+import { DropdownMenuContent } from './dropdown-menu-content';
+import { DropdownMenuGroup } from './dropdown-menu-group';
+import { DropdownMenuItem } from './dropdown-menu-item';
+import { DropdownMenuRadioItem } from './dropdown-menu-radio-item';
+import { DropdownMenuSeparator } from './dropdown-menu-seperator';
+import { DropdownMenuShortcut } from './dropdown-menu-shortcut';
+import { DropdownMenuTrigger } from './dropdown-menu-trigger';
+declare class DropdownMenu extends BaseElement {
+    isOpen: boolean;
+    private static _openInstance;
+    get _triggerElement(): DropdownMenuTrigger | null;
+    get _containerElement(): HTMLDivElement | null;
+    private get _content();
+    connectedCallback(): void;
+    toggleDropdown(e: MouseEvent): void;
+    disconnectedCallback(): void;
+    handleClickOutside: (e: MouseEvent) => void;
+    protected updated(_changedProperties: PropertyValues): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private _handleRadioSelected;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, };
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-dropdown-menu': DropdownMenu;
+        'rtg-dropdown-menu-checkbox-item': DropdownMenuCheckboxItem;
+        'rtg-dropdown-menu-group': DropdownMenuGroup;
+        'rtg-dropdown-menu-content': DropdownMenuContent;
+        'rtg-dropdown-menu-item': DropdownMenuItem;
+        'rtg-dropdown-menu-radio-item': DropdownMenuRadioItem;
+        'rtg-dropdown-menu-separator': DropdownMenuSeparator;
+        'rtg-dropdown-menu-trigger': DropdownMenuTrigger;
+        'rtg-dropdown-menu-shortcut': DropdownMenuShortcut;
+    }
+}

package/dist/src/components/ui/dropdown-menu/dropdown-menu.helpers.d.ts

@@ -0,0 +1,3 @@
+export declare function gitHubIcon(): import('lit-html').TemplateResult<1>;
+export declare function supportIcon(): import('lit-html').TemplateResult<1>;
+export declare function apiIcon(): import('lit-html').TemplateResult<1>;

package/dist/src/components/ui/dropdown-menu/dropdown-menu.styles.d.ts

@@ -0,0 +1,20 @@
+export declare const dropdownMenuStyles: {
+    root: string[];
+    trigger: string[];
+    content: string[];
+    group: string[];
+    item: string[];
+    checkboxItem: {
+        base: string[];
+        span: string[];
+        icon: string[];
+    };
+    radioItem: {
+        base: string[];
+        span: string[];
+        icon: string[];
+    };
+    label: string[];
+    separator: string[];
+    shortcut: string[];
+};

package/dist/src/components/ui/dropdown-menu/dropdownMenu.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn } from '@storybook/web-components-vite';
+declare const _default: Meta;
+export default _default;
+export declare const DropdownMenu: StoryFn;
+export declare const DropdownMenuCheckbox: StoryFn;
+export declare const DropdownMenuRadio: StoryFn;

package/dist/src/components/ui/empty/_empty-content.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * Use the `rtg-empty-content` component to display the content of the empty
+ * state such as a button, input or a link.
+ *
+ * @element rtg-empty-content
+ * @slot empty-content
+ */
+export declare class EmptyContent extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the empty content.
+     */
+    private get _contentSlot();
+    /**
+     * Appends children to the empty content slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/empty/_empty-description.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * Use the `rtg-empty-description` component to display the description of the
+ * empty state.
+ *
+ * @element rtg-empty-description
+ * @slot empty-description
+ */
+export declare class EmptyDescription extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the empty description.
+     */
+    private get _descriptionSlot();
+    /**
+     * Appends children to the empty description slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/empty/_empty-header.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * The `rtg-empty-header` component wraps the `rtg-empty-media`,
+ * `rtg-empty-title`, and `rtg-empty-description`.
+ *
+ * @element rtg-empty-header
+ * @slot empty-header
+ */
+export declare class EmptyHeader extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the empty header.
+     */
+    private get _headerSlot();
+    /**
+     * Appends children to the empty header slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/empty/_empty-media.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import { EmptyMediaProps, EmptyMediaVariant } from './empty.defs';
+/**
+ * Use the `rtg-empty-media` component to display the media of the empty state
+ * such as an icon or an image. You can also use it to display other components
+ * such as an avatar.
+ *
+ * @element rtg-empty-media
+ * @slot empty-media
+ */
+export declare class EmptyMedia extends LitElement implements EmptyMediaProps {
+    /**
+     * The media type variant of the empty media.
+     */
+    variant: EmptyMediaVariant;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the empty media.
+     */
+    private get _mediaSlot();
+    /**
+     * Appends children to the empty media slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/empty/_empty-title.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Use the `rtg-empty-title` component to display the title of the empty state.
+ *
+ * @element rtg-empty-title
+ * @slot empty-title
+ */
+export declare class EmptyTitle extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the empty title.
+     */
+    private get _titleSlot();
+    /**
+     * Appends children to the empty title slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/empty/_empty.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { EmptyProps } from './empty.defs';
+/**
+ * The main component of the empty state. Wraps the `rtg-empty-header` and
+ * `rtg-empty-content` components.
+ *
+ * @element rtg-empty
+ * @slot empty
+ */
+export declare class Empty extends LitElement implements EmptyProps {
+    /**
+     * When `true`, the empty state is styled with a dashed border.
+     */
+    border?: boolean;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the empty root.
+     */
+    private get _rootSlot();
+    /**
+     * Appends children to the empty root slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/empty/empty.d.ts

@@ -0,0 +1,20 @@
+import { Empty } from './_empty';
+import { EmptyContent } from './_empty-content';
+import { EmptyDescription } from './_empty-description';
+import { EmptyHeader } from './_empty-header';
+import { EmptyMedia } from './_empty-media';
+import { EmptyTitle } from './_empty-title';
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, };
+/**
+ * Use the Empty component to display an empty state.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-empty': Empty;
+        'rtg-empty-header': EmptyHeader;
+        'rtg-empty-media': EmptyMedia;
+        'rtg-empty-title': EmptyTitle;
+        'rtg-empty-description': EmptyDescription;
+        'rtg-empty-content': EmptyContent;
+    }
+}

package/dist/src/components/ui/empty/empty.defs.d.ts

@@ -0,0 +1,7 @@
+export interface EmptyProps {
+    border?: boolean;
+}
+export type EmptyMediaVariant = 'default' | 'icon';
+export interface EmptyMediaProps {
+    variant: EmptyMediaVariant;
+}

package/dist/src/components/ui/empty/empty.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Demo: Story;
+export declare const Outline: Story;
+export declare const Background: Story;
+export declare const Avatar: Story;
+export declare const AvatarGroup: Story;
+export declare const InputGroup: Story;

package/dist/src/components/ui/field/_field-content.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * Flex column that groups control and descriptions when the label sits beside
+ * the control. Not required if you have no description.
+ *
+ * @element rtg-field-content
+ * @slot field-content
+ */
+export declare class FieldContent extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the field content.
+     */
+    private get _contentSlot();
+    /**
+     * Appends children to the field content slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/field/_field-description.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * Helper text slot that automatically balances long lines in horizontal
+ * layouts.
+ *
+ * @element rtg-field-description
+ * @slot field-description
+ */
+export declare class FieldDescription extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the field description.
+     */
+    private get _descriptionSlot();
+    /**
+     * Appends children to the field description slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/field/_field-error.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, nothing } from 'lit';
+import { FieldErrorProps, FieldErrorError } from './field.defs';
+/**
+ * Accessible error container that accepts children or an `errors` array. When
+ * the `errors` array contains multiple messages, the component renders a list
+ * automatically.
+ *
+ * @element rtg-field-error
+ * @slot field-error
+ * @slot field-error-content
+ */
+export declare class FieldError extends LitElement implements FieldErrorProps {
+    /**
+     * The array of error messages to render.
+     */
+    errors?: FieldErrorError[];
+    private _hasUserContent;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    connectedCallback(): void;
+    private _renderContent;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+}

package/dist/src/components/ui/field/_field-group.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { FieldGroupProps, FieldGroupType } from './field.defs';
+/**
+ * Layout wrapper that stacks `rtg-field` components and enables container
+ * queries for responsive orientations.
+ *
+ * @element rtg-field-group
+ * @slot field-group
+ */
+export declare class FieldGroup extends LitElement implements FieldGroupProps {
+    /**
+     * The type of field in the field group.
+     */
+    type: FieldGroupType;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the field group.
+     */
+    private get _groupSlot();
+    /**
+     * Appends children to the field group slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/field/_field-label.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import { FieldLabelProps } from './field.defs';
+/**
+ * Label styled for both direct inputs and nested `rtg-field` children.
+ *
+ * @element rtg-field-label
+ * @slot field-label
+ */
+export declare class FieldLabel extends LitElement implements FieldLabelProps {
+    /**
+     * The id of the element the label is associated with.
+     */
+    for?: string;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the field label.
+     */
+    private get _labelSlot();
+    /**
+     * Appends children to the field label slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/field/_field-legend.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import { FieldLegendProps, FieldLegendVariant } from './field.defs';
+/**
+ * Legend element for a `rtg-field-set`. Switch to the `label` variant to align
+ * with label sizing.
+ *
+ * @element rtg-field-legend
+ * @slot field-legend
+ */
+export declare class FieldLegend extends LitElement implements FieldLegendProps {
+    /**
+     * The sizing and alignment variant of the field legend.
+     * The `label` variant applies label sizing and alignment. Handy if you have
+     * nested `rtg-field-set`.
+     */
+    variant: FieldLegendVariant;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the field legend.
+     */
+    private get _legendSlot();
+    /**
+     * Appends children to the field legend slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/field/_field-separator.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * Visual divider to separate sections inside a `rtg-field-group`. Accepts
+ * optional inline content.
+ *
+ * @element rtg-field-separator
+ * @slot field-separator
+ * @slot field-separator-content
+ */
+export declare class FieldSeparator extends LitElement {
+    private _observer;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the field separator.
+     */
+    private get _separatorSlot();
+    /**
+     * The slot of the field separator content.
+     */
+    private get _contentSlot();
+    /**
+     * Returns direct children of the element that are not part of its own
+     * rendered output and are not Lit comment markers or empty text nodes.
+     */
+    private _getExternalNodes;
+    /**
+     * Moves any externally-provided children into the content slot and updates
+     * the `data-content` attribute. Recreates the content slot if needed.
+     */
+    private _processChildren;
+    /**
+     * Processes any already-present children (static content) and sets up a
+     * MutationObserver to handle children inserted after render — e.g. when
+     * content is provided via a Lit dynamic binding from a parent template.
+     */
+    protected firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}