@blueprintui/cli 0.11.0 → 0.11.2

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

@@ -0,0 +1,82 @@
+import { attachInternals, toggleState, getElementUpdates } from '@blueprintui/components/internals';
+export function stateFormControl() {
+    return (target, _context) => target.addInitializer((instance) => new StateControlController(instance));
+}
+export class StateControlController {
+    #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.host.form?.addEventListener('reset', () => {
+            this.#resetValidity();
+        });
+        this.host.addEventListener('reset', () => {
+            this.#resetValidity();
+        });
+        this.#input.addEventListener('focus', () => {
+            this.#updateValidity();
+            this.host._internals.states.add('focused');
+        });
+        this.#input.addEventListener('blur', () => {
+            this.#updateValidity();
+            this.host._internals.states.add('touched');
+            this.host._internals.states.delete('focused');
+        });
+        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());
+    }
+    #resetValidity() {
+        this.host._internals.states.delete('dirty');
+        this.host._internals.states.delete('focused');
+        this.host._internals.states.delete('touched');
+        this.host._internals.states.delete('valid');
+        this.host._internals.states.delete('invalid');
+    }
+    #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/blueprint/blueprintui/packages/components/dist/forms/controllers/type-form-checkbox.controller.d.ts

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

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

@@ -0,0 +1,51 @@
+import { attachInternals, stopEvent } from '@blueprintui/components/internals';
+export function typeFormCheckbox(config = { requireName: false }) {
+    return (target, _context) => target.addInitializer((instance) => new TypeFormCheckboxController(instance, config));
+}
+export class TypeFormCheckboxController {
+    constructor(host, config = { requireName: false }) {
+        this.host = host;
+        this.config = config;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        attachInternals(this.host);
+        this.host.setAttribute('bp-field', 'inline');
+        this.host._internals.role = 'checkbox';
+        this.host.tabIndex = 0;
+        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.#updateState();
+    }
+    #check() {
+        if (!this.host.disabled && !this.host.readonly) {
+            this.#updateValue();
+            this.#updateState();
+            this.host.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+    #updateValue() {
+        // only update value statefully if name is set for form participation
+        if (!(this.config.requireName && !this.host.name)) {
+            this.host.checked = !this.host.checked;
+            this.host.indeterminate = false;
+        }
+    }
+    #updateState() {
+        this.host._internals.ariaChecked = this.host.checked ? 'true' : 'false';
+        const value = typeof this.host.value === 'number' ? `${this.host.value}` : this.host.value;
+        this.host._internals.setFormValue(this.host.checked ? value : undefined);
+    }
+}

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

@@ -0,0 +1,39 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+export interface TypeFormControl {
+    _internals?: ElementInternals;
+    formAssociated: true;
+    form: HTMLFormElement;
+    name: string;
+    validity: ValidityState;
+    validationMessage: string;
+    willValidate: boolean;
+    valueAsNumber: number;
+    composedLabel: string;
+    checked?: boolean;
+    readonly?: boolean;
+    disabled: boolean;
+    value?: string | number | FormData | File;
+    min: number;
+    max: number;
+    checkValidity: () => void;
+    reportValidity: () => boolean;
+    reset: () => void;
+}
+export declare function typeFormControl<T extends TypeFormControl & ReactiveElement>(): ClassDecorator;
+export declare class TypeFormControlController<T extends TypeFormControl & ReactiveElement> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): void;
+    hostUpdated(): void;
+    focus(): void;
+    reset(): void;
+    dispatchChange(e: InputEvent): void;
+    dispatchInput(e: InputEvent): void;
+    onChange(e: InputEvent, config?: {
+        valueType: 'string' | 'number';
+    }): void;
+    onInput(e: InputEvent, config?: {
+        valueType: 'string' | 'number';
+    }): void;
+}

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

@@ -0,0 +1,115 @@
+import { attachInternals, getFlattenedFocusableItems } from '@blueprintui/components/internals';
+import { StateControlController } from './state-form-control.controller.js';
+import { patternMismatch, tooLong, tooShort, valueMissing } from '../utils/validity.js';
+export function typeFormControl() {
+    return (target, _context) => {
+        return target.addInitializer((instance) => {
+            if (!instance.typeFormControlController) {
+                Object.defineProperty(instance, 'typeFormControlController', {
+                    value: new TypeFormControlController(instance),
+                    writable: false
+                });
+            }
+            return instance.typeFormControlController;
+        });
+    };
+}
+export class TypeFormControlController {
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+        new StateControlController(this.host);
+    }
+    hostConnected() {
+        // todo: implement when supported https://github.com/WICG/aom/blob/gh-pages/caniuse.md#phase-2-reflect-element-references-for-idref-attributes
+        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 (!this.host.form && !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'),
+                set: (value) => this.host.setAttribute('name', value)
+            });
+            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.#updateAria();
+        this.host._internals.setFormValue(typeof this.host.value === 'number' ? `${this.host.value}` : this.host.value);
+    }
+    focus() {
+        getFlattenedFocusableItems(this.host)[0]?.focus();
+    }
+    reset() {
+        this.host.value = this.host.getAttribute('value');
+        this.host.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+        this.host.dispatchEvent(new Event('reset', { bubbles: true, cancelable: true }));
+    }
+    dispatchChange(e) {
+        e?.preventDefault();
+        e?.stopPropagation();
+        if (!this.host.disabled) {
+            this.host.checkValidity();
+            this.host.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    dispatchInput(e) {
+        e?.preventDefault();
+        e?.stopPropagation();
+        if (!this.host.disabled) {
+            this.host.checkValidity();
+            this.host.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true, data: e.data }));
+        }
+    }
+    #updateAria() {
+        this.host._internals.ariaDisabled = this.host.disabled ? 'true' : 'false';
+        if (this.host.min !== undefined || this.host.max !== undefined) {
+            this.host._internals.ariaValueMin = `${this.host.min}`;
+            this.host._internals.ariaValueMax = `${this.host.max}`;
+            this.host._internals.ariaValueNow = `${this.host.value}`;
+        }
+        else {
+            this.host._internals.ariaValueMin = null;
+            this.host._internals.ariaValueMax = null;
+            this.host._internals.ariaValueNow = null;
+        }
+    }
+    #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 });
+        }
+    }
+    #setValue(e, config = { valueType: 'string' }) {
+        this.host.value = config.valueType === 'number' ? e.target.valueAsNumber : e.target.value;
+    }
+    onChange(e, config) {
+        this.#setValue(e, config);
+        this.dispatchChange(e);
+    }
+    onInput(e, config) {
+        this.#setValue(e, config);
+        this.dispatchInput(e);
+    }
+}

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

@@ -0,0 +1,14 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { TypeFormControl } from './type-form-control.controller.js';
+export interface RadioControl extends TypeFormControl {
+    checked: boolean;
+    name: string;
+}
+export declare function typeFormRadio<T extends RadioControl & ReactiveElement>(): ClassDecorator;
+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/blueprint/blueprintui/packages/components/dist/forms/controllers/type-form-radio.controller.js

@@ -0,0 +1,50 @@
+import { attachInternals, stopEvent } from '@blueprintui/components/internals';
+export function typeFormRadio() {
+    return (target, _context) => target.addInitializer((instance) => new TypeFormRadioController(instance));
+}
+export class TypeFormRadioController {
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        attachInternals(this.host);
+        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);
+            }
+        });
+        document.addEventListener('_change', async (e) => {
+            const target = e.target;
+            if (target !== this.host && target.name === this.host.name) {
+                this.host.checked = false;
+            }
+            else if (target.name === this.host.name) {
+                await new Promise(r => requestAnimationFrame(() => r('')));
+                this.host.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+            }
+        });
+    }
+    async hostUpdated() {
+        await this.host.updateComplete;
+        this.host._internals.ariaDisabled = this.host.disabled ? 'true' : 'false';
+        this.host._internals.ariaChecked = this.host.checked ? 'true' : 'false';
+        const value = typeof this.host.value === 'number' ? `${this.host.value}` : this.host.value;
+        this.host._internals.setFormValue(this.host.checked ? value : undefined);
+    }
+    #check() {
+        if (!this.host.disabled && !this.host.checked) {
+            this.host.checked = true;
+            this.host.dispatchEvent(new Event('_change', { bubbles: true, composed: true }));
+        }
+    }
+}

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

@@ -0,0 +1,22 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { InteractionTouchController } from '@blueprintui/components/internals';
+import { TypeFormControl, TypeFormControlController } from './type-form-control.controller.js';
+export interface SliderControl extends TypeFormControl {
+    step: number;
+    min: number;
+    max: number;
+    valueAsNumber: number;
+    orientation: 'horizontal' | 'vertical';
+}
+/**
+ * https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+ */
+export declare class TypeFormSliderController<T extends SliderControl & ReactiveElement> implements ReactiveController {
+    #private;
+    private host;
+    protected interactionTouchController: InteractionTouchController<T>;
+    protected typeFormControlController: TypeFormControlController<T>;
+    constructor(host: T);
+    hostConnected(): void;
+    hostUpdated(): void;
+}

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

@@ -0,0 +1,94 @@
+import { attachInternals, InteractionTouchController } from '@blueprintui/components/internals';
+import { TypeFormControlController } from './type-form-control.controller.js';
+/**
+ * https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+ */
+export class TypeFormSliderController {
+    set #value(value) {
+        if (this.#validRange(value)) {
+            this.host.valueAsNumber = value;
+        }
+    }
+    get #value() {
+        return this.host.valueAsNumber;
+    }
+    constructor(host) {
+        this.host = host;
+        attachInternals(this.host);
+        this.host.addController(this);
+        this.interactionTouchController = new InteractionTouchController(this.host);
+        this.host._internals.states.add('complex-focus');
+        if (!this.host.typeFormControlController) {
+            this.typeFormControlController = new TypeFormControlController(this.host);
+        }
+        else {
+            this.typeFormControlController = this.host.typeFormControlController;
+        }
+    }
+    hostConnected() {
+        this.host.addEventListener('keydown', (e) => {
+            if (!this.host.disabled && !this.host.readonly) {
+                this.#keydown(e);
+            }
+        });
+        this.host.addEventListener('bp-touchmove', (e) => {
+            if (!this.host.disabled && !this.host.readonly) {
+                this.#touchMove(e);
+            }
+        });
+        this.host.addEventListener('bp-touchend', () => {
+            if (!this.host.disabled && !this.host.readonly) {
+                this.#touchEnd();
+            }
+        });
+    }
+    hostUpdated() {
+        this.host._internals.role = 'slider';
+        this.host.tabIndex = this.host.disabled || this.host.readonly ? -1 : 0;
+    }
+    #keydown(e) {
+        if (e.code === 'ArrowLeft') {
+            this.#value -= this.host.step;
+        }
+        else if (e.code === 'ArrowRight') {
+            this.#value += this.host.step;
+        }
+        else if (e.code === 'ArrowUp') {
+            this.#value += this.host.step;
+        }
+        else if (e.code === 'ArrowDown') {
+            this.#value -= this.host.step;
+        }
+        else if (e.code === 'Home') {
+            this.#value = this.host.min;
+        }
+        else if (e.code === 'End') {
+            this.#value = this.host.max;
+        }
+        if (e.code !== 'Tab') {
+            e.preventDefault();
+        }
+        this.#input();
+        this.#change();
+    }
+    #touchMove(e) {
+        const offset = this.host.orientation === 'horizontal' ? e.detail.offsetX : e.detail.offsetY;
+        const value = (this.#value + offset).toFixed(0);
+        if (this.#validRange(value)) {
+            this.#value = value;
+            this.#input();
+        }
+    }
+    #touchEnd() {
+        this.#change();
+    }
+    #input() {
+        this.typeFormControlController.dispatchInput(new InputEvent('input', { bubbles: true, composed: true, data: `${this.#value}` }));
+    }
+    #change() {
+        this.typeFormControlController.dispatchChange(new InputEvent('change', { bubbles: true, composed: true }));
+    }
+    #validRange(value) {
+        return value <= this.host.max && value >= this.host.min;
+    }
+}

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

@@ -0,0 +1,13 @@
+import { ReactiveElement } from 'lit';
+import { TypeFormControl } from './type-form-control.controller.js';
+import { TypeFormCheckboxController } from './type-form-checkbox.controller.js';
+export interface SwitchControl extends TypeFormControl {
+    checked: boolean;
+    indeterminate?: boolean;
+}
+export declare function typeFormSwitch<T extends SwitchControl & ReactiveElement>(config?: {
+    requireName: boolean;
+}): ClassDecorator;
+export declare class TypeFormSwitchController<T extends SwitchControl & ReactiveElement> extends TypeFormCheckboxController<T> {
+    hostConnected(): void;
+}

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

@@ -0,0 +1,10 @@
+import { TypeFormCheckboxController } from './type-form-checkbox.controller.js';
+export function typeFormSwitch(config = { requireName: false }) {
+    return (target, _context) => target.addInitializer((instance) => new TypeFormSwitchController(instance, config));
+}
+export class TypeFormSwitchController extends TypeFormCheckboxController {
+    hostConnected() {
+        super.hostConnected();
+        this.host._internals.role = 'switch';
+    }
+}

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

@@ -0,0 +1,34 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { 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
+ * @since 1.0.0
+ * @slot
+ * @cssprop --background
+ */
+export declare class BpField extends LitElement {
+    #private;
+    accessor layout: ControlLayout;
+    accessor 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/blueprint/blueprintui/packages/components/dist/forms/field/element.js

@@ -0,0 +1,116 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { baseStyles, interactionResponsive, associateInputAndLabel, associateInputToDatalist, associateAriaDescribedBy, listenForAttributeListChange, attachInternals } from '@blueprintui/components/internals';
+import { syncValidationMessages, updateFieldStatusState } from '../utils/utils.js';
+import styles from './element.css' with { type: 'css' };
+/**
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>field</label>
+ *   <input type="text" />
+ * </bp-field>
+ * ```
+ *
+ * @element bp-field
+ * @since 1.0.0
+ * @slot
+ * @cssprop --background
+ */
+let BpField = class BpField extends LitElement {
+    static { this.properties = {
+        layout: { type: String, reflect: true },
+        controlWidth: { type: String, reflect: true, attribute: 'control-width' }
+    }; }
+    constructor() {
+        super(...arguments);
+        this.layout = 'vertical';
+    }
+    static { this.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;
+    }
+    render() {
+        return html `
+      <div part="internal">
+        ${this.#label ? html `<slot name="label"></slot>` : nothing}
+        <div class="input-container">
+          ${this.prefixTemplate}
+          <slot class="input-slot"></slot>
+          ${this.suffixTemplate}
+        </div>
+        ${this.#messages?.length ? html `<slot name="message"></slot>` : nothing}
+        ${this.#datalist ? html `<slot name="datalist"></slot>` : nothing}
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        attachInternals(this);
+        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;
+        this.#updateSlotState();
+        updateFieldStatusState(this, Array.from(this.#messages));
+        syncValidationMessages(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) => {
+            this.#updateSlotState();
+            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));
+                updateFieldStatusState(this, Array.from(this.#messages));
+            }
+        });
+        listenForAttributeListChange(this, ['hidden', 'status'], ({ target }) => {
+            if (target.tagName === 'bp-field-message') {
+                updateFieldStatusState(this, Array.from(this.#messages));
+            }
+        });
+    }
+    #updateSlotState() {
+        this.#messages?.length ? this._internals.states.add('message') : this._internals.states.delete('message');
+        this.#label ? this._internals.states.add('label') : this._internals.states.delete('label');
+        this.#isInline ? this._internals.states.add('inline-control') : this._internals.states.delete('inline-control');
+    }
+};
+BpField = __decorate([
+    interactionResponsive()
+], BpField);
+export { BpField };