@blueprintui/cli 0.11.0 → 0.11.2

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/drawer/element.js

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { baseStyles, I18nService, stateScrollLock, attachInternals, typePopover } from '@blueprintui/components/internals';
+import styles from './element.css' with { type: 'css' };
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/drawer.js';
+ * ```
+ *
+ * ```html
+ * <bp-drawer></bp-drawer>
+ * ```
+ *
+ * @summary The drawer component is used to provide a hidden off-screen section that can be revealed by the user. It is commonly used to provide additional navigation or content that is not immediately necessary, but can be easily accessed when needed.
+ * @element bp-drawer
+ * @since 1.0.0
+ * @event open - dispatched when the drawer is opened
+ * @event close - dispatched when the drawer is closed
+ * @slot - slot for drawer content
+ * @cssprop --background
+ * @cssprop --padding
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --overflow
+ */
+let BpDrawer = class BpDrawer extends LitElement {
+    static { this.properties = {
+        closable: { type: Boolean },
+        position: { type: String, reflect: true },
+        i18n: { type: Object }
+    }; }
+    constructor() {
+        super(...arguments);
+        /** determine if the drawer has a close button */
+        this.closable = false;
+        /** determines drawer position relative to viewport */
+        this.position = 'left';
+        /** set default aria/i18n strings */
+        this.i18n = I18nService.keys.actions;
+    }
+    static { this.styles = [baseStyles, styles]; }
+    render() {
+        return html `
+      <div part="internal">
+        ${this.closable
+            ? html `<bp-button-icon
+              @click=${this.hidePopover}
+              aria-label=${this.i18n.close}
+              shape="close"
+              action="flat"
+              type="button"></bp-button-icon>`
+            : nothing}
+        <slot></slot>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        attachInternals(this);
+        this._internals.states.add('bp-layer');
+    }
+};
+BpDrawer = __decorate([
+    stateScrollLock(),
+    typePopover(() => ({
+        focusTrap: true,
+        type: 'auto'
+    }))
+], BpDrawer);
+export { BpDrawer };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/drawer/index.js

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/dropdown/element.d.ts

@@ -0,0 +1,75 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import type { BpTypePopover, Position } from '@blueprintui/components/internals';
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/dropdown.js';
+ * ```
+ *
+ * ```html
+ * <bp-dropdown closable>
+ *
+ * </bp-dropdown>
+ * ```
+ *
+ * @summary The dropdown are a is a generic popup component that can be positioned relative to an anchor element.
+ * @element bp-dropdown
+ * @since 1.0.0
+ * @event open - dispatched when the dialog is opened
+ * @event close - dispatched when the dialog is closed
+ * @slot - content
+ * @cssprop --padding
+ * @cssprop --filter
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --min-width
+ * @cssprop --min-height
+ * @cssprop --font-size
+ */
+export declare class BpDropdown extends LitElement implements Pick<BpTypePopover, keyof BpDropdown> {
+    #private;
+    /** determine the position relative to the anchor */
+    accessor position: Position;
+    /** determine user closable state */
+    accessor closable: boolean;
+    /** anchor element popover will positiion relative to */
+    accessor anchor: HTMLElement | string;
+    /** set default aria/i18n strings */
+    accessor i18n: {
+        sort: string;
+        none: string;
+        ascending: string;
+        descending: string;
+        expand: string;
+        close: string;
+        resize: string;
+        filter: string;
+        loading: string;
+        show: string;
+        hide: string;
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        today: string;
+        browse: string;
+        removeFile: string;
+        files: string;
+        resizeColumn: string;
+        closeDetails: string;
+        noData: string;
+        action: string;
+        dropTarget: string;
+        firstPage: string;
+        previousPage: string;
+        nextPage: string;
+        lastPage: string;
+        pageSize: string;
+    };
+    static styles: CSSStyleSheet[];
+    _internals: ElementInternals;
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+    protected firstUpdated(props: PropertyValueMap<this>): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/dropdown/element.js

@@ -0,0 +1,88 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { baseStyles, i18n, I18nService, assignedElements, attachInternals, typePopover, popoverStyles } from '@blueprintui/components/internals';
+import styles from './element.css' with { type: 'css' };
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/dropdown.js';
+ * ```
+ *
+ * ```html
+ * <bp-dropdown closable>
+ *
+ * </bp-dropdown>
+ * ```
+ *
+ * @summary The dropdown are a is a generic popup component that can be positioned relative to an anchor element.
+ * @element bp-dropdown
+ * @since 1.0.0
+ * @event open - dispatched when the dialog is opened
+ * @event close - dispatched when the dialog is closed
+ * @slot - content
+ * @cssprop --padding
+ * @cssprop --filter
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --min-width
+ * @cssprop --min-height
+ * @cssprop --font-size
+ */
+let BpDropdown = class BpDropdown extends LitElement {
+    static { this.properties = {
+        position: { type: String, reflect: true },
+        closable: { type: Boolean },
+        anchor: { type: String },
+        i18n: { type: Object }
+    }; }
+    constructor() {
+        super(...arguments);
+        /** determine the position relative to the anchor */
+        this.position = 'bottom';
+        /** determine user closable state */
+        this.closable = false;
+        /** set default aria/i18n strings */
+        this.i18n = I18nService.keys.actions;
+    }
+    static { this.styles = [baseStyles, popoverStyles, styles]; }
+    render() {
+        return html `
+      <div part="internal">
+        ${this.closable
+            ? html `<bp-button-icon
+              @click=${this.hidePopover}
+              aria-label=${this.i18n.close}
+              shape="close"
+              action="flat"
+              type="button"></bp-button-icon>`
+            : nothing}
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        attachInternals(this);
+        this._internals.states.add('bp-layer');
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.#setMenu();
+        this.addEventListener('slotchange', () => this.#setMenu());
+    }
+    #setMenu() {
+        this.toggleAttribute('_menu', !!assignedElements(this).find(i => i.tagName === 'BP-MENU'));
+    }
+};
+BpDropdown = __decorate([
+    i18n({ key: 'actions' }),
+    typePopover(host => ({
+        anchor: host.anchor,
+        closeOnScroll: true,
+        type: 'auto'
+    }))
+], BpDropdown);
+export { BpDropdown };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/dropdown/index.js

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/file/element.d.ts

@@ -0,0 +1,63 @@
+import { PropertyValues } from 'lit';
+import { FormControl } from '@blueprintui/components/forms';
+import { BpTypeControl } from '@blueprintui/components/internals';
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/file.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>file</label>
+ *   <bp-file></bp-file>
+ * </bp-field>
+ * ```
+ *
+ * @summary The file input component allows users to select and upload one or multiple files from their local device.
+ * @element bp-file
+ * @since 1.0.0
+ * @event {InputEvent} input - occurs when the value changes
+ * @event {InputEvent} change - occurs when the value changes
+ */
+export declare class BpFile extends FormControl implements Pick<BpTypeControl, keyof Omit<BpFile, 'accept' | 'files' | 'inputControl'>> {
+    #private;
+    /** set default aria/i18n strings */
+    accessor i18n: {
+        sort: string;
+        none: string;
+        ascending: string;
+        descending: string;
+        expand: string;
+        close: string;
+        resize: string;
+        filter: string;
+        loading: string;
+        show: string;
+        hide: string;
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        today: string;
+        browse: string;
+        removeFile: string;
+        files: string;
+        resizeColumn: string;
+        closeDetails: string;
+        noData: string;
+        action: string;
+        dropTarget: string;
+        firstPage: string;
+        previousPage: string;
+        nextPage: string;
+        lastPage: string;
+        pageSize: string;
+    };
+    accessor accept: string;
+    private accessor buttonLabel;
+    get files(): FileList;
+    get inputControl(): HTMLInputElement;
+    static get styles(): CSSStyleSheet[];
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(props: PropertyValues<this>): Promise<void>;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/file/element.js

@@ -0,0 +1,118 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { FormControl } from '@blueprintui/components/forms';
+import { i18n, I18nService, baseStyles } from '@blueprintui/components/internals';
+import styles from './element.css' with { type: 'css' };
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/file.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>file</label>
+ *   <bp-file></bp-file>
+ * </bp-field>
+ * ```
+ *
+ * @summary The file input component allows users to select and upload one or multiple files from their local device.
+ * @element bp-file
+ * @since 1.0.0
+ * @event {InputEvent} input - occurs when the value changes
+ * @event {InputEvent} change - occurs when the value changes
+ */
+let BpFile = class BpFile extends FormControl {
+    static { this.properties = {
+        i18n: { type: Object },
+        accept: { type: String },
+        buttonLabel: { state: true }
+    }; }
+    constructor() {
+        super(...arguments);
+        /** set default aria/i18n strings */
+        this.i18n = I18nService.keys.actions;
+        this.buttonLabel = this.i18n.browse;
+    }
+    get files() {
+        return this.inputControl.files;
+    }
+    get inputControl() {
+        return this.shadowRoot?.querySelector('input');
+    }
+    get #button() {
+        return this.shadowRoot?.querySelector('bp-button');
+    }
+    static get styles() {
+        return [baseStyles, styles];
+    }
+    render() {
+        return html `
+      <input type="file" hidden .multiple=${this.multiple} accept=${this.accept} @change=${this.#change} />
+      <div class="file-input">
+        <bp-button
+          size="sm"
+          action="secondary"
+          .disabled=${this.disabled}
+          @click=${this.#showPicker}
+          ?disabled=${this.matches(':state(disabled)')}>
+          <bp-icon shape="folder" size="sm"></bp-icon>
+          <span>${this.buttonLabel}</span>
+        </bp-button>
+        ${this.inputControl?.files?.length && !this.matches(':state(disabled)')
+            ? html `<bp-button-icon
+              shape="close"
+              action="inline"
+              @click=${this.#clearFiles}
+              aria-label=${this.i18n.removeFile}></bp-button-icon>`
+            : nothing}
+      </div>
+    `;
+    }
+    async firstUpdated(props) {
+        super.firstUpdated(props);
+        this.inputControl.addEventListener('change', e => {
+            if (e.isTrusted) {
+                this.#updateLabelAndFocus(e.target.files);
+            }
+        });
+        await this.updateComplete;
+        this.#setControlWidth();
+    }
+    #showPicker() {
+        this.inputControl.showPicker();
+    }
+    #change(e) {
+        if (e.isTrusted) {
+            this.#updateLabelAndFocus(e.target.files);
+            this.onChange(e);
+        }
+    }
+    #setControlWidth() {
+        if (this.parentElement.tagName === 'BP-FIELD') {
+            this.parentElement.style.setProperty('--control-width', `${this.#button.getBoundingClientRect().width}px`);
+        }
+    }
+    #clearFiles(fireEvent = true) {
+        this.buttonLabel = this.i18n.browse;
+        this.inputControl.value = '';
+        if (fireEvent && this.inputControl.dispatchEvent) {
+            this.inputControl.dispatchEvent(new Event('change'));
+        }
+        const browseButton = this.shadowRoot?.querySelector('bp-button');
+        if (browseButton) {
+            browseButton.focus();
+        }
+    }
+    #updateLabelAndFocus(files) {
+        if (files && files.length) {
+            this.buttonLabel = files.length > 1 ? `${files.length} ${this.i18n.files}` : files[0].name;
+        }
+        else {
+            this.#clearFiles(false);
+        }
+    }
+};
+BpFile = __decorate([
+    i18n({ key: 'actions' })
+], BpFile);
+export { BpFile };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/file/index.d.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/file/index.js

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/format-datetime/element.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/format-datetime.js';
+ * ```
+ *
+ * ```html
+ * <bp-format-datetime></bp-format-datetime>
+ * ```
+ *
+ * @summary The format-datetime component is used to display a date and time in a human-readable format. The element API reflects the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) API.
+ * @element bp-format-datetime
+ * @since 1.17.0
+ */
+export declare class BpFormatDatetime extends LitElement {
+    #private;
+    accessor locale: string;
+    accessor weekday: 'long' | 'short' | 'narrow';
+    accessor year: 'numeric' | '2-digit';
+    accessor month: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+    accessor day: 'numeric' | '2-digit';
+    accessor hour: 'numeric' | '2-digit';
+    accessor minute: 'numeric' | '2-digit';
+    accessor second: 'numeric' | '2-digit';
+    accessor dateStyle: 'full' | 'long' | 'medium' | 'short';
+    accessor timeStyle: 'full' | 'long' | 'medium' | 'short';
+    accessor timeZoneName: 'long' | 'short';
+    accessor timeZone: string;
+    private accessor _value;
+    static styles: CSSStyleSheet[];
+    _internals: ElementInternals;
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/format-datetime/element.js

@@ -0,0 +1,68 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { attachInternals, baseStyles, interactionTextChange } from '@blueprintui/components/internals';
+import styles from './element.css' with { type: 'css' };
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/format-datetime.js';
+ * ```
+ *
+ * ```html
+ * <bp-format-datetime></bp-format-datetime>
+ * ```
+ *
+ * @summary The format-datetime component is used to display a date and time in a human-readable format. The element API reflects the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) API.
+ * @element bp-format-datetime
+ * @since 1.17.0
+ */
+let BpFormatDatetime = class BpFormatDatetime extends LitElement {
+    static { this.properties = {
+        locale: { type: String },
+        weekday: { type: String },
+        year: { type: String },
+        month: { type: String },
+        day: { type: String },
+        hour: { type: String },
+        minute: { type: String },
+        second: { type: String },
+        dateStyle: { type: String, attribute: 'date-style' },
+        timeStyle: { type: String, attribute: 'time-style' },
+        timeZoneName: { type: String, attribute: 'time-zone-name' },
+        timeZone: { type: String, attribute: 'time-zone' },
+        _value: { state: true }
+    }; }
+    constructor() {
+        super(...arguments);
+        this._value = new Date().toDateString();
+    }
+    get #value() {
+        return new Intl.DateTimeFormat(this.locale, {
+            weekday: this.weekday,
+            year: this.year,
+            month: this.month,
+            day: this.day,
+            hour: this.hour,
+            minute: this.minute,
+            second: this.second,
+            dateStyle: this.dateStyle,
+            timeStyle: this.timeStyle,
+            timeZoneName: this.timeZoneName,
+            timeZone: this.timeZone
+        }).format(new Date(this._value));
+    }
+    static { this.styles = [baseStyles, styles]; }
+    render() {
+        return html `<div part="internal">${this.#value}</div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        attachInternals(this);
+        this._internals.role = 'time';
+        this._value = new Date().toDateString();
+        this.addEventListener('bp-textchange', () => (this._value = this.textContent));
+    }
+};
+BpFormatDatetime = __decorate([
+    interactionTextChange()
+], BpFormatDatetime);
+export { BpFormatDatetime };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/format-datetime/index.d.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/format-datetime/index.js

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/format-number/element.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/format-number.js';
+ * ```
+ *
+ * ```html
+ * <bp-format-number></bp-format-number>
+ * ```
+ *
+ * @summary The format-datetime component is used to display numbers in a human-readable format. The element reflects the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API.
+ * @element bp-format-number
+ * @since 1.17.0
+ */
+export declare class BpFormatNumber extends LitElement {
+    #private;
+    accessor format: 'currency' | 'decimal' | 'percent';
+    accessor currency: string;
+    accessor locales: string[];
+    accessor currencySign: 'standard' | 'accounting';
+    accessor currencyDisplay: 'symbol' | 'code' | 'name';
+    accessor compactDisplay: 'short' | 'long';
+    accessor unitDisplay: 'long' | 'short' | 'narrow';
+    accessor notation: 'standard' | 'scientific' | 'engineering' | 'compact';
+    accessor signDisplay: 'auto' | 'never' | 'always' | 'exceptZero';
+    private accessor value;
+    static styles: CSSStyleSheet[];
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/format-number/element.js

@@ -0,0 +1,61 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { baseStyles, interactionTextChange } from '@blueprintui/components/internals';
+import styles from './element.css' with { type: 'css' };
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/format-number.js';
+ * ```
+ *
+ * ```html
+ * <bp-format-number></bp-format-number>
+ * ```
+ *
+ * @summary The format-datetime component is used to display numbers in a human-readable format. The element reflects the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API.
+ * @element bp-format-number
+ * @since 1.17.0
+ */
+let BpFormatNumber = class BpFormatNumber extends LitElement {
+    static { this.properties = {
+        format: { type: String },
+        currency: { type: String },
+        locales: { type: Array },
+        currencySign: { type: String, attribute: 'currency-sign' },
+        currencyDisplay: { type: String, attribute: 'currency-display' },
+        compactDisplay: { type: String, attribute: 'compact-display' },
+        unitDisplay: { type: String, attribute: 'unit-display' },
+        notation: { type: String },
+        signDisplay: { type: String, attribute: 'sign-display' },
+        value: { state: true }
+    }; }
+    constructor() {
+        super(...arguments);
+        this.format = 'decimal';
+        this.value = 0;
+    }
+    static { this.styles = [baseStyles, styles]; }
+    get #value() {
+        return new Intl.NumberFormat(this.locales, {
+            style: this.currency ? 'currency' : this.format,
+            notation: this.notation,
+            currency: this.currency,
+            currencySign: this.currencySign,
+            currencyDisplay: this.currencyDisplay,
+            compactDisplay: this.compactDisplay,
+            unitDisplay: this.unitDisplay,
+            signDisplay: this.signDisplay
+        }).format(this.value);
+    }
+    render() {
+        return html ` <data value=${this.value} part="internal">${this.#value}</data> `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.value = parseFloat(this.textContent);
+        this.addEventListener('bp-textchange', () => (this.value = parseFloat(this.textContent)));
+    }
+};
+BpFormatNumber = __decorate([
+    interactionTextChange()
+], BpFormatNumber);
+export { BpFormatNumber };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/format-number/index.d.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/format-number/index.js

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/controllers/state-form-control.controller.d.ts

@@ -0,0 +1,19 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+export type Validity = 'valid' | 'invalid' | '';
+/**
+ * Tracks native form control state and applies states to host custom element.
+ */
+export type StateFormControl = ReactiveElement & {
+    inputControl?: HTMLInputElement;
+    form?: HTMLFormElement;
+    _internals?: ElementInternals;
+    checked?: boolean;
+};
+export declare function stateFormControl<T extends StateFormControl>(): ClassDecorator;
+export declare class StateControlController<T extends StateFormControl> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+    hostDisconnected(): void;
+}