@blueprintui/cli 0.0.9 → 0.0.11

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

@@ -0,0 +1,104 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { FormControl } from '@blueprintui/components/forms';
+import { i18n, I18nService, baseStyles } from '@blueprintui/components/internals';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * File Input
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/file.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>file</label>
+ *   <bp-file></bp-file>
+ * </bp-field>
+ * ```
+ *
+ * @element bp-file
+ * @slot - For projecting file input and label
+ */
+let BpFile = class BpFile extends FormControl {
+    i18n = I18nService.keys.actions;
+    accept;
+    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=${(e) => this.#change(e)} />
+    <div class="file-input">
+      <bp-button size="sm" action="outline" .disabled=${this.disabled} @click=${() => this.inputControl.showPicker()} ?disabled=${this.matches(':--disabled')}>
+        <bp-icon shape="folder" size="sm"></bp-icon>
+        <span>${this.buttonLabel}</span>
+      </bp-button>
+      ${this.inputControl?.files?.length && !this.matches(':--disabled') ? html `<bp-button-icon shape="close" @click=${() => this.#clearFiles()} aria-label=${this.i18n.removeFile}></bp-button-icon>` : ''}
+    </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();
+    }
+    #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);
+        }
+    }
+};
+__decorate([
+    property({ type: Object })
+], BpFile.prototype, "i18n", void 0);
+__decorate([
+    property({ type: String })
+], BpFile.prototype, "accept", void 0);
+__decorate([
+    state()
+], BpFile.prototype, "buttonLabel", void 0);
+BpFile = __decorate([
+    i18n({ key: 'actions' })
+], BpFile);
+export { BpFile };

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+export declare type Validity = 'valid' | 'invalid' | '';
+/**
+ * Tracks native form control state and applies states to host custom element.
+ */
+export declare type StateFormControl = ReactiveElement & {
+    inputControl?: HTMLInputElement;
+    _internals?: ElementInternals;
+};
+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;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/controllers/state-form-control.controller.js

@@ -0,0 +1,65 @@
+import { attachInternals, toggleState, getElementUpdates } from '@blueprintui/components/internals';
+export function stateFormControl() {
+    return (target) => target.addInitializer((instance) => new StateControlController(instance));
+}
+export class StateControlController {
+    host;
+    #observers = [];
+    get #input() {
+        return (this.host.inputControl ? this.host.inputControl : this.host);
+    }
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+    }
+    async hostConnected() {
+        attachInternals(this.host);
+        await this.host.updateComplete;
+        this.#input.addEventListener('blur', () => {
+            this.#updateValidity();
+            this.host._internals.states.add('--touched');
+        });
+        this.#input.addEventListener('input', () => {
+            this.#updateValidity();
+            this.host._internals.states.add('--dirty');
+        });
+        this.#input.addEventListener('change', () => {
+            toggleState(this.host._internals, '--checked', this.host.checked);
+            this.host.requestUpdate();
+        });
+        this.#observers.push(getElementUpdates(this.#input, 'size', (value) => {
+            toggleState(this.host._internals, '--size', value === '' ? true : value);
+            this.host.requestUpdate();
+        }), getElementUpdates(this.#input, 'multiple', (value) => {
+            toggleState(this.host._internals, '--multiple', value === '' ? true : value);
+            this.host.requestUpdate();
+        }), getElementUpdates(this.#input, 'readonly', (value) => {
+            toggleState(this.host._internals, '--readonly', value === '');
+            this.host.requestUpdate();
+        }), getElementUpdates(this.#input, 'checked', (value) => {
+            toggleState(this.host._internals, '--checked', value === '' ? true : value);
+            this.host.requestUpdate();
+        }), getElementUpdates(this.#input, 'aria-disabled', (value) => {
+            toggleState(this.host._internals, '--disabled', value === 'true');
+            this.host.requestUpdate();
+        }), getElementUpdates(this.#input, 'disabled', (value) => {
+            toggleState(this.host._internals, '--disabled', value === '' ? true : value);
+            this.host.requestUpdate();
+        }));
+    }
+    hostDisconnected() {
+        this.#observers.forEach(observer => observer.disconnect());
+    }
+    #updateValidity() {
+        this.#input.checkValidity();
+        if (this.#input.validity.valid) {
+            this.host._internals.states.add('--valid');
+            this.host._internals.states.delete('--invalid');
+        }
+        else {
+            this.host._internals.states.add('--invalid');
+            this.host._internals.states.delete('--valid');
+        }
+        this.host.requestUpdate();
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/controllers/type-form-checkbox.controller.d.ts

@@ -0,0 +1,13 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { TypeFormControl } from './type-form-control.controller.js';
+export interface CheckboxControl extends TypeFormControl {
+    checked: boolean;
+    indeterminate?: boolean;
+}
+export declare class TypeFormCheckboxController<T extends CheckboxControl & ReactiveElement> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): void;
+    hostUpdated(): Promise<void>;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/controllers/type-form-checkbox.controller.js

@@ -0,0 +1,37 @@
+import { stopEvent } from '@blueprintui/components/internals';
+export class TypeFormCheckboxController {
+    host;
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.host.setAttribute('bp-field', 'inline');
+        this.host.tabIndex = 0;
+        this.host._internals.role = 'checkbox';
+        this.host.addEventListener('click', () => this.#check());
+        this.host.addEventListener('keyup', (e) => {
+            if (e.code === 'Space') {
+                this.#check();
+            }
+        });
+        this.host.addEventListener('keydown', (e) => {
+            if (e.code === 'Space') {
+                stopEvent(e);
+            }
+        });
+    }
+    async hostUpdated() {
+        await this.host.updateComplete;
+        this.host._internals.ariaDisabled = this.host.disabled ? 'true' : 'false';
+        this.host._internals.ariaChecked = this.host.checked ? 'true' : 'false';
+        this.host._internals.setFormValue(this.host.checked ? this.host.value : undefined);
+    }
+    #check() {
+        if (!this.host.disabled) {
+            this.host.checked = !this.host.checked;
+            this.host.indeterminate = false;
+            this.host.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+export interface TypeFormControl {
+    _internals?: ElementInternals;
+    formAssociated: true;
+    form: HTMLFormElement;
+    name: string;
+    validity: {
+        valid: boolean;
+        valueMissing?: boolean;
+        tooShort?: boolean;
+        tooLong?: boolean;
+        patternMismatch?: boolean;
+    };
+    validationMessage: string;
+    willValidate: boolean;
+    checked?: boolean;
+    disabled: boolean;
+    value: string | FormData;
+    checkValidity: () => void;
+    reportValidity: () => boolean;
+}
+export declare class TypeFormControlController<T extends TypeFormControl & ReactiveElement> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): void;
+    hostUpdated(): void;
+    dispatchChange(e: InputEvent): void;
+    dispatchInput(e: InputEvent): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/controllers/type-form-control.controller.js

@@ -0,0 +1,63 @@
+import { attachInternals } from '@blueprintui/components/internals';
+import { StateControlController } from './state-form-control.controller.js';
+import { patternMismatch, tooLong, tooShort, valueMissing } from '../utils/validity.js';
+export class TypeFormControlController {
+    host;
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+        new StateControlController(this.host);
+    }
+    // todo: implement when supported https://github.com/WICG/aom/blob/gh-pages/caniuse.md#phase-2-reflect-element-references-for-idref-attributes
+    hostConnected() {
+        attachInternals(this.host);
+        this.host.setAttribute('bp-field', '');
+        this.host.reportValidity = () => this.#reportValidity();
+        this.host.checkValidity = () => this.#checkValidity();
+        this.host.addEventListener('blur', () => this.#checkValidity());
+        if (!Object.prototype.hasOwnProperty.call(this.host, 'form')) {
+            Object.defineProperty(this.host, 'form', { get: () => this.host._internals.form });
+            Object.defineProperty(this.host, 'name', { get: () => this.host.getAttribute('name') });
+            Object.defineProperty(this.host, 'validity', { get: () => this.host._internals.validity });
+            Object.defineProperty(this.host, 'validationMessage', { get: () => this.host._internals.validationMessage });
+            Object.defineProperty(this.host, 'willValidate', { get: () => this.host._internals.willValidate });
+        }
+    }
+    hostUpdated() {
+        this.host._internals.setFormValue(this.host.value);
+    }
+    dispatchChange(e) {
+        e?.preventDefault();
+        e?.stopPropagation();
+        this.host.checkValidity();
+        this.host.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    dispatchInput(e) {
+        e?.preventDefault();
+        e?.stopPropagation();
+        this.host.checkValidity();
+        this.host.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true, data: e.data }));
+    }
+    #reportValidity() {
+        this.#checkValidity();
+        return this.host._internals.reportValidity();
+    }
+    #checkValidity() {
+        this.host._internals.checkValidity();
+        if (valueMissing(this.host)) {
+            this.host._internals.setValidity({ valueMissing: true, valid: false }, 'value required');
+        }
+        else if (tooShort(this.host)) {
+            this.host._internals.setValidity({ tooShort: true, valid: false }, 'value too short');
+        }
+        else if (tooLong(this.host)) {
+            this.host._internals.setValidity({ tooLong: true, valid: false }, 'value too long');
+        }
+        else if (patternMismatch(this.host)) {
+            this.host._internals.setValidity({ patternMismatch: true, valid: false }, 'pattern mismatch');
+        }
+        else {
+            this.host._internals.setValidity({ valid: true });
+        }
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/controllers/type-form-radio.controller.d.ts

@@ -0,0 +1,13 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { TypeFormControl } from './type-form-control.controller.js';
+export interface RadioControl extends TypeFormControl {
+    checked: boolean;
+    name: string;
+}
+export declare class TypeFormRadioController<T extends RadioControl & ReactiveElement> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): void;
+    hostUpdated(): Promise<void>;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/controllers/type-form-radio.controller.js

@@ -0,0 +1,44 @@
+import { stopEvent } from '@blueprintui/components/internals';
+export class TypeFormRadioController {
+    host;
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.host.setAttribute('bp-field', 'inline');
+        this.host.tabIndex = 0;
+        this.host._internals.role = 'radio';
+        this.host.addEventListener('click', () => this.#check());
+        this.host.addEventListener('keyup', (e) => {
+            if (e.code === 'Space') {
+                this.#check();
+            }
+        });
+        this.host.addEventListener('keydown', (e) => {
+            if (e.code === 'Space') {
+                stopEvent(e);
+            }
+        });
+        if (this.host.parentElement.tagName !== 'BP-FIELDSET') {
+            document.addEventListener('change', e => {
+                const target = e.target;
+                if (target !== this.host && target.name === this.host.name) {
+                    this.host.checked = false;
+                }
+            });
+        }
+    }
+    async hostUpdated() {
+        await this.host.updateComplete;
+        this.host._internals.ariaDisabled = this.host.disabled ? 'true' : 'false';
+        this.host._internals.ariaChecked = this.host.checked ? 'true' : 'false';
+        this.host._internals.setFormValue(this.host.checked ? this.host.value : undefined);
+    }
+    #check() {
+        if (!this.host.disabled && !this.host.checked) {
+            this.host.checked = true;
+            this.host.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/field/element.d.ts

@@ -0,0 +1,33 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ControlLayout } from '../utils/interfaces.js';
+/**
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>field</label>
+ *   <input type="text" />
+ * </bp-field>
+ * ```
+ *
+ * @element bp-field
+ * @slot
+ * @cssprop --background
+ */
+export declare class BpField extends LitElement {
+    #private;
+    layout: ControlLayout;
+    controlWidth: 'shrink';
+    static styles: CSSStyleSheet[];
+    get inputControl(): HTMLInputElement;
+    protected get prefixTemplate(): TemplateResult | null;
+    protected get suffixTemplate(): TemplateResult | null;
+    /** @private */
+    _internals: ElementInternals;
+    render(): TemplateResult<1>;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): Promise<void>;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/field/element.js

@@ -0,0 +1,101 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { baseStyles, interactionResponsive, associateInputAndLabel, associateInputToDatalist, associateAriaDescribedBy } from '@blueprintui/components/internals';
+import { setupFieldMessageStatusUpdates, syncHTML5Validation } from '../utils/utils.js';
+import styles from './element.css' assert { type: 'css' };
+/**
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>field</label>
+ *   <input type="text" />
+ * </bp-field>
+ * ```
+ *
+ * @element bp-field
+ * @slot
+ * @cssprop --background
+ */
+let BpField = class BpField extends LitElement {
+    layout = 'vertical';
+    controlWidth;
+    static styles = [baseStyles, styles];
+    get inputControl() {
+        return this.querySelector('*:not(label):not(bp-field-message)');
+    }
+    get #label() {
+        return this.querySelector('label');
+    }
+    get #messages() {
+        return this.querySelectorAll('bp-field-message');
+    }
+    get #datalist() {
+        return this.querySelector('datalist');
+    }
+    get #isInline() {
+        return this.inputControl.getAttribute('bp-field') === ' inline' || this.inputControl.tagName === 'BP-CHECKBOX' || this.inputControl.tagName === 'BP-SWITCH';
+    }
+    get prefixTemplate() {
+        return null;
+    }
+    get suffixTemplate() {
+        return null;
+    }
+    /** @private */
+    _internals = this.attachInternals();
+    render() {
+        return html `
+    <div class="private-host${this.#messages?.length ? '' : ' no-message'}${this.#label ? '' : ' no-label'}${this.#isInline ? ' inline-control' : ''}">
+      ${this.#label ? html `<slot name="label"></slot>` : ''}
+      <div class="input-container">
+        ${this.prefixTemplate}
+        <slot class="input-slot"></slot>
+        ${this.suffixTemplate}
+      </div>
+      ${this.#messages?.length ? html `<slot name="message"></slot>` : ''}
+      ${this.#datalist ? html `<slot name="datalist"></slot>` : ''}
+    </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('bp-field', '');
+    }
+    async firstUpdated(props) {
+        super.firstUpdated(props);
+        await this.updateComplete;
+        this.inputControl.setAttribute('input', '');
+        this.#label ? this.#label.slot = 'label' : null;
+        this.#datalist ? this.#datalist.slot = 'datalist' : null;
+        setupFieldMessageStatusUpdates(Array.from(this.#messages), this);
+        syncHTML5Validation(this, Array.from(this.#messages));
+        associateInputAndLabel(this.inputControl, this.#label);
+        associateInputToDatalist(this.inputControl, this.#datalist);
+        associateAriaDescribedBy(this.inputControl, Array.from(this.#messages));
+        this.shadowRoot.addEventListener('slotchange', (e) => {
+            if (e.target.name === 'label') {
+                associateInputAndLabel(this.inputControl, this.#label);
+            }
+            else if (e.target.name === 'datalist') {
+                associateInputToDatalist(this.inputControl, this.#datalist);
+            }
+            else if (e.target.name === 'message') {
+                associateAriaDescribedBy(this.inputControl, Array.from(this.#messages));
+            }
+        });
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], BpField.prototype, "layout", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'control-width' })
+], BpField.prototype, "controlWidth", void 0);
+BpField = __decorate([
+    interactionResponsive()
+], BpField);
+export { BpField };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/field-message/element.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * Control Message
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>Test</label>
+ *   <input type="text" />
+ *   <bp-field-message>helper text</bp-field-message>
+ * </bp-field>
+ * ```
+ *
+ * @element bp-field-message
+ * @slot - For projecting helper message text
+ * @cssprop --color
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --max-width
+ * @cssprop --min-width
+ */
+export declare class BpFieldMessage extends LitElement {
+    /** Set the status of field message validation */
+    status: 'error' | 'success';
+    /** HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
+    error: keyof ValidityState;
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/field-message/element.js

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { baseStyles } from '@blueprintui/components/internals';
+import { getStatusIcon } from '../utils/utils.js';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * Control Message
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>Test</label>
+ *   <input type="text" />
+ *   <bp-field-message>helper text</bp-field-message>
+ * </bp-field>
+ * ```
+ *
+ * @element bp-field-message
+ * @slot - For projecting helper message text
+ * @cssprop --color
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --max-width
+ * @cssprop --min-width
+ */
+export class BpFieldMessage extends LitElement {
+    /** Set the status of field message validation */
+    status;
+    /** HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
+    error;
+    static styles = [baseStyles, styles];
+    render() {
+        return html `
+      <div class="private-host">
+        ${getStatusIcon(this.status)}<slot></slot>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = 'message';
+    }
+}
+__decorate([
+    property({ type: String })
+], BpFieldMessage.prototype, "status", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], BpFieldMessage.prototype, "error", void 0);

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/lib/dist/lib/forms/fieldset/element.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, PropertyValues } from 'lit';
+import { FormLayout } from '../utils/interfaces.js';
+/**
+ * Control Group
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-fieldset>
+ *   <label>...</label>
+ *
+ *   <label></label>
+ *   <input ... />
+ *
+ *   <label></label>
+ *   <input ... />
+ * </bp-fieldset>
+ * ```
+ *
+ * @element bp-fieldset
+ * @property layoutChange
+ * @slot
+ */
+export declare class BpFieldset extends LitElement {
+    #private;
+    responsive: boolean;
+    layout: FormLayout;
+    static styles: CSSStyleSheet[];
+    /** @private */
+    _internals: ElementInternals;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): void;
+}