@blueprintui/cli 0.0.6 → 0.0.7

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

@@ -0,0 +1,68 @@
+import { ContextConsumer, ContextProvider } from '@lit-labs/context';
+import { LitElement, PropertyValues } from 'lit';
+import { BpControl } from '../control/element.js';
+import { ControlStatus, FormLayout, ControlWidth } from '../utils/interfaces.js';
+import { BpControlMessage } from '../control-message/element.js';
+import { BpInternalControlLabel } from '../control-label/element.js';
+import { BpInternalControlInline } from './../control-inline/element.js';
+/**
+ * Internal Control Group
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-group>
+ *   <label>...</label>
+ *   <bp-control>
+ *     <label></label>
+ *     <input ... />
+ *   </bp-control>
+ *   <bp-control>
+ *     <label></label>
+ *     <input ... />
+ *   </bp-control>
+ * </bp-internal-control-group>
+ * ```
+ *
+ * @element bp-internal-control-group
+ * @property layoutChange
+ * @slot - For projecting control group
+ */
+export declare class BpInternalControlGroup extends LitElement {
+    #private;
+    /** Set the status of control group validation */
+    status: ControlStatus;
+    /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
+    layout: FormLayout;
+    /** Align the labels of controls within group left or right */
+    controlAlign: 'left' | 'right';
+    /** Disable all controls within a control group or omit and disable controls individually */
+    disabled: boolean;
+    /** Adjust the control from the default full width or the browser default width */
+    controlWidth: ControlWidth;
+    responsive: boolean;
+    protected get label(): HTMLLabelElement;
+    protected get controls(): NodeListOf<BpControl | BpInternalControlInline>;
+    protected get messages(): NodeListOf<BpControlMessage>;
+    /** @private */
+    controlLabel: BpInternalControlLabel;
+    protected formContext: ContextConsumer<{
+        __context__: import("../utils/context.js").FormContext;
+    }, this>;
+    protected controlGroupContext: ContextProvider<{
+        __context__: import("../utils/context.js").FormContext & {
+            isControlGroup?: boolean;
+        };
+    }>;
+    protected isInlineControlGroup: boolean;
+    protected isControlGroup: boolean;
+    private _internals;
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<any>): void;
+    get layoutStable(): boolean;
+}

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

@@ -0,0 +1,154 @@
+import { __decorate } from "tslib";
+import { ContextConsumer, ContextProvider } from '@lit-labs/context';
+import { html, LitElement } from 'lit';
+import { baseStyles, calculateOptimalLayout, interactionResponsive, createId, syncUpdatedProps } from '@blueprintui/components/internals';
+import { getStatusIcon, formLayouts, defaultFormLayout, getCurrentMessageStatus, inlineControlListIsWrapped } from '../utils/utils.js';
+import { controlGroupContext, formContext } from '../utils/context.js';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * Internal Control Group
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-group>
+ *   <label>...</label>
+ *   <bp-control>
+ *     <label></label>
+ *     <input ... />
+ *   </bp-control>
+ *   <bp-control>
+ *     <label></label>
+ *     <input ... />
+ *   </bp-control>
+ * </bp-internal-control-group>
+ * ```
+ *
+ * @element bp-internal-control-group
+ * @property layoutChange
+ * @slot - For projecting control group
+ */
+let BpInternalControlGroup = class BpInternalControlGroup extends LitElement {
+    static properties = {
+        status: { type: String, reflect: true },
+        layout: { type: String, reflect: true },
+        controlAlign: { type: String, reflect: true, attribute: 'control-align' },
+        disabled: { type: Boolean, reflect: true },
+        controlWidth: { type: String, reflect: true, attribute: 'control-width' },
+        responsive: { type: Boolean, reflect: true }
+    };
+    constructor() {
+        super(...arguments);
+        /** Set the status of control group validation */
+        this.status = 'neutral';
+        /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
+        this.layout = defaultFormLayout;
+        /** Align the labels of controls within group left or right */
+        this.controlAlign = 'left';
+        /** Disable all controls within a control group or omit and disable controls individually */
+        this.disabled = false;
+        this.responsive = true;
+    }
+    get label() {
+        return this.querySelector('label');
+    }
+    get controls() {
+        return this.querySelectorAll('bp-control, [bp-control]');
+    }
+    get messages() {
+        return this.querySelectorAll('bp-control-message');
+    }
+    /** @private */
+    get controlLabel() {
+        return this.__controlLabel ??= this.renderRoot?.querySelector("bp-internal-control-label[action=primary]") ?? null;
+    }
+    formContext = new ContextConsumer(this, formContext, (value) => syncUpdatedProps(this, value), true);
+    controlGroupContext = new ContextProvider(this, controlGroupContext, {});
+    isInlineControlGroup = false;
+    isControlGroup = true;
+    #groupLabelId = createId();
+    _internals = this.attachInternals();
+    static styles = [baseStyles, styles];
+    render() {
+        return html `
+      <div class="private-host ${this.isInlineControlGroup ? 'inline-control-group' : ''}">
+        <div class="control-label-container">
+          <bp-internal-control-label .disabled=${this.disabled} action="primary">
+            <slot name="label"></slot>
+          </bp-internal-control-label>
+        </div>
+        <div class="control-message-container">
+          <div class="input-container">
+            <div class="controls">
+              <slot name="controls"></slot>
+            </div>
+            ${this.isInlineControlGroup ? getStatusIcon(this.status) : ''}
+          </div>
+          <div ?hidden=${this.messages.length === 0} class="messages-container">
+            ${!this.isInlineControlGroup ? getStatusIcon(this.status) : ''}
+            <div class="messages">
+              <slot name="message" @slotchange=${this.#updateControlMessages}></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._internals.role = 'group';
+        this.setAttribute('bp-control-group', '');
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.label ? this.label.slot = 'label' : null;
+        this.#associateLabelAndGroup();
+        this.#setupResponsive();
+    }
+    updated(props) {
+        super.updated(props);
+        this.controlGroupContext.setValue({ layout: this.layout, responsive: this.responsive, controlWidth: this.controlWidth, disabled: this.disabled, status: this.status, isControlGroup: true });
+    }
+    get layoutStable() {
+        const messageBelowInput = this.shadowRoot.querySelector('.messages-container')?.getBoundingClientRect().top > this.shadowRoot.querySelector('.controls').getBoundingClientRect().top;
+        const inputBelowLabel = this.shadowRoot.querySelector('.controls').getBoundingClientRect().top > this.controlLabel?.getBoundingClientRect().top + 12;
+        if (this.layout === 'compact' && (messageBelowInput || inputBelowLabel)) {
+            return false;
+        }
+        if (this.layout === 'horizontal-inline' && inlineControlListIsWrapped(Array.from(this.controls), this.layout)) {
+            return false;
+        }
+        if (this.layout === 'horizontal' && inputBelowLabel) {
+            return false;
+        }
+        if (this.layout === 'vertical-inline' && inlineControlListIsWrapped(Array.from(this.controls), this.layout)) {
+            return false;
+        }
+        return true;
+    }
+    #associateLabelAndGroup() {
+        this.setAttribute('aria-labelledby', this.#groupLabelId);
+        if (this.label) {
+            this.label.id = this.#groupLabelId;
+        }
+    }
+    async #updateControlMessages() {
+        const messages = Array.from(this.messages);
+        this.status = await getCurrentMessageStatus(messages);
+        if (this.messages.length) {
+            this.setAttribute('aria-describedby', messages.map(m => (m.id = createId())).join(' '));
+        }
+    }
+    #setupResponsive() {
+        if (this.responsive) {
+            const layoutConfig = { layouts: formLayouts, initialLayout: this.layout };
+            this.addEventListener('bpResizeChange', () => calculateOptimalLayout(this, layoutConfig).then(() => this.dispatchEvent(new CustomEvent('layoutChange', { bubbles: true, detail: this.layout }))));
+        }
+    }
+};
+BpInternalControlGroup = __decorate([
+    interactionResponsive()
+], BpInternalControlGroup);
+export { BpInternalControlGroup };

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

@@ -0,0 +1,31 @@
+import { PropertyValues } from 'lit';
+import { BpControl } from '../control/element.js';
+/**
+ * Internal Control Inline
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-inline>
+ *   <label>inline</label>
+ *   <input type="radio" />
+ * </bp-internal-control-inline>
+ * ```
+ * @element bp-internal-control-inline
+ * @event checkedChange
+ * @slot - For projecting inline input and label
+ */
+export declare class BpInternalControlInline extends BpControl {
+    /** Align the labels of controls within group left or right */
+    controlAlign: 'left' | 'right';
+    isControlGroup: boolean;
+    protected checked: boolean;
+    protected indeterminate: boolean;
+    protected supportsPrefixSuffixActions: boolean;
+    static get styles(): CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<any>): void;
+}

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

@@ -0,0 +1,77 @@
+import { html } from 'lit';
+import { getElementUpdates } from '@blueprintui/components/internals';
+import { BpControl, ControlLabelLayout } from '../control/element.js';
+import { getStatusIcon } from '../utils/utils.js';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * Internal Control Inline
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-inline>
+ *   <label>inline</label>
+ *   <input type="radio" />
+ * </bp-internal-control-inline>
+ * ```
+ * @element bp-internal-control-inline
+ * @event checkedChange
+ * @slot - For projecting inline input and label
+ */
+export class BpInternalControlInline extends BpControl {
+    static properties = {
+        controlAlign: { type: String, reflect: true, attribute: 'control-align' },
+        isControlGroup: { state: true },
+        checked: { type: Boolean, reflect: true, attribute: '_checked' },
+        indeterminate: { type: Boolean, reflect: true, attribute: '_indeterminate' }
+    };
+    supportsPrefixSuffixActions = false;
+    static get styles() {
+        return [...super.styles, styles];
+    }
+    //__BLANK_LINE_PLACEHOLDER_G1JVXUEBNCL6YN5NFE13MD1PT3H9OIHB__
+    constructor() {
+        super();
+        /** Align the labels of controls within group left or right */
+        this.controlAlign = 'left';
+        this.checked = false;
+        this.indeterminate = false;
+    }
+    render() {
+        return html `
+      <div class="private-host">
+        <div class="control-inline-label-container">
+          <slot name="input"></slot>
+          ${this.labelLayout !== ControlLabelLayout.ariaLabel ? html `
+          <bp-internal-control-label action="secondary" .disabled=${this.disabled}>
+            <slot name="label" @slotchange=${() => this.associateInputAndLabel()}></slot>
+          </bp-internal-control-label>` : ''}
+        </div>
+        ${this.messages?.length ? html `
+          <div class="control-inline-messages-container">
+            ${getStatusIcon(this.status)}
+            <div class="messages">
+              <slot name="message"></slot>
+            </div>
+          </div>` : ''}
+      </div>
+    `;
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.inputControl.addEventListener('change', () => (this.checked = this.inputControl.checked));
+        this.observers.push(getElementUpdates(this.inputControl, 'checked', (value) => (this.checked = value === '' ? true : value)), getElementUpdates(this.inputControl, 'indeterminate', (value) => (this.indeterminate = value === '' ? true : value)));
+    }
+    updated(props) {
+        super.updated(props);
+        if (props.has('indeterminate') && props.get('indeterminate') !== this.indeterminate && this.indeterminate) {
+            this.checked = false;
+        }
+        if (props.has('checked') && props.get('checked') !== this.checked && this.checked) {
+            this.indeterminate = false;
+            this.dispatchEvent(new CustomEvent('checkedChange', { bubbles: !this.isControlGroup, detail: this.checked })); // if not a group then bubble to notify the other associated controls
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * Label
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-label status="primary | secondary">
+ *   <label>...</label>
+ * </bp-internal-control-label>
+ * ```
+ *
+ * @element bp-internal-control-label
+ * @slot - For projecting label text
+ * @cssprop --label-width
+ */
+export declare class BpInternalControlLabel extends LitElement {
+    disabled: boolean;
+    action: 'primary' | 'secondary';
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,44 @@
+import { html, LitElement } from 'lit';
+import { baseStyles } from '@blueprintui/components/internals';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * Label
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-label status="primary | secondary">
+ *   <label>...</label>
+ * </bp-internal-control-label>
+ * ```
+ *
+ * @element bp-internal-control-label
+ * @slot - For projecting label text
+ * @cssprop --label-width
+ */
+export class BpInternalControlLabel extends LitElement {
+    static properties = {
+        disabled: { type: Boolean, reflect: true },
+        action: { type: String, reflect: true }
+    };
+    static styles = [baseStyles, styles];
+    //__BLANK_LINE_PLACEHOLDER_G1JVXUEBNCL6YN5NFE13MD1PT3H9OIHB__
+    constructor() {
+        super();
+        this.disabled = false;
+        this.action = 'primary';
+    }
+    render() {
+        return html `
+      <div class="private-host">
+        <slot></slot>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = 'message';
+    }
+}

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

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+import { ContextConsumer } from '@lit-labs/context';
+import { ControlStatus } from '../utils/interfaces.js';
+import { ValidityStateKey } from '../utils/validate.js';
+/**
+ * Control Message
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-control>
+ *   <label>Test</label>
+ *   <input type="text" />
+ *   <bp-control-message>helper text</bp-control-message>
+ * </bp-control>
+ * ```
+ *
+ * @element bp-control-message
+ * @slot - For projecting helper message text
+ * @cssprop --color
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --max-width
+ * @cssprop --min-width
+ */
+export declare class BpControlMessage extends LitElement {
+    /**
+     * Set the status of form control message validation
+     * @type {neutral | error | success}
+     */
+    status: ControlStatus;
+    /** HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
+    error: ValidityStateKey;
+    protected disabled: boolean;
+    static styles: CSSStyleSheet[];
+    protected controlContext: ContextConsumer<{
+        __context__: import("../utils/context.js").FormContext;
+    }, this>;
+    protected controlGroupContext: ContextConsumer<{
+        __context__: import("../utils/context.js").FormContext & {
+            isControlGroup?: boolean;
+        };
+    }, this>;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,59 @@
+import { html, LitElement } from 'lit';
+import { ContextConsumer } from '@lit-labs/context';
+import { baseStyles, syncUpdatedProps } from '@blueprintui/components/internals';
+import styles from './element.css' assert { type: 'css' };
+import { controlContext, controlGroupContext } from '../utils/context.js';
+/**
+ * Control Message
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-control>
+ *   <label>Test</label>
+ *   <input type="text" />
+ *   <bp-control-message>helper text</bp-control-message>
+ * </bp-control>
+ * ```
+ *
+ * @element bp-control-message
+ * @slot - For projecting helper message text
+ * @cssprop --color
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --max-width
+ * @cssprop --min-width
+ */
+export class BpControlMessage extends LitElement {
+    static properties = {
+        status: { type: String, reflect: true },
+        error: { type: String, reflect: true },
+        disabled: { type: Boolean, reflect: true, attribute: '_disabled' }
+    };
+    static styles = [baseStyles, styles];
+    //__BLANK_LINE_PLACEHOLDER_G1JVXUEBNCL6YN5NFE13MD1PT3H9OIHB__
+    constructor() {
+        super();
+        /**
+         * Set the status of form control message validation
+         * @type {neutral | error | success}
+         */
+        this.status = 'neutral';
+        this.disabled = false;
+    }
+    controlContext = new ContextConsumer(this, controlContext, (value) => syncUpdatedProps(this, value), true);
+    controlGroupContext = new ContextConsumer(this, controlGroupContext, (value) => syncUpdatedProps(this, value), true);
+    render() {
+        return html `
+      <div class="private-host">
+        <slot></slot>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = 'message';
+    }
+}

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

@@ -0,0 +1,42 @@
+import { LitElement, PropertyValues } from 'lit';
+import { FormLayout, ControlWidth } from '../utils/interfaces.js';
+/**
+ * Form
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-form-group layout="horizontal">
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ *
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ * </bp-form-group>
+ * ```
+ *
+ * @element bp-form-group
+ * @slot - For projecting input controls
+ * @cssprop --label-width
+ */
+export declare class BpFormGroup extends LitElement {
+    #private;
+    /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
+    layout: FormLayout;
+    controlWidth: ControlWidth;
+    responsive: boolean;
+    /** validate attribute to sync with HTML5 native validation https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation */
+    validate: boolean;
+    protected observers: (MutationObserver | ResizeObserver)[];
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+}

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

@@ -0,0 +1,111 @@
+import { LitElement, html } from 'lit';
+import { ContextProvider } from '@lit-labs/context';
+import { baseStyles, childrenUpdateComplete, elementResize, elementVisible } from '@blueprintui/components/internals';
+import { getLargestPrimaryLabelWidth, defaultFormLayout, isVerticalLayout } from '../utils/utils.js';
+import { formContext } from '../utils/context.js';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * Form
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-form-group layout="horizontal">
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ *
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ * </bp-form-group>
+ * ```
+ *
+ * @element bp-form-group
+ * @slot - For projecting input controls
+ * @cssprop --label-width
+ */
+export class BpFormGroup extends LitElement {
+    static properties = {
+        layout: { type: String, reflect: true },
+        controlWidth: { type: String, reflect: true, attribute: 'control-width' },
+        responsive: { type: Boolean, reflect: true },
+        validate: { type: Boolean, reflect: true }
+    };
+    get #controls() {
+        return this.querySelectorAll('[bp-control]');
+    }
+    get #groups() {
+        return this.querySelectorAll('[bp-control-group]');
+    }
+    observers = [];
+    get #controlsAndGroups() {
+        return [...Array.from(this.#groups), ...Array.from(this.#controls)];
+    }
+    static styles = [baseStyles, styles];
+    //__BLANK_LINE_PLACEHOLDER_G1JVXUEBNCL6YN5NFE13MD1PT3H9OIHB__
+    constructor() {
+        super();
+        /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
+        this.layout = defaultFormLayout;
+        this.responsive = true;
+        /** validate attribute to sync with HTML5 native validation https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation */
+        this.validate = false;
+    }
+    render() {
+        return html `
+      <div class="private-host">
+        <slot></slot>
+      </div>
+    `;
+    }
+    #overflowElement;
+    #internals = this.attachInternals();
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.#internals.role = 'group';
+        this.#syncLayouts();
+        this.#setControlLabelWidths();
+        this.observers.push(elementVisible(this, () => this.#setControlLabelWidths()));
+    }
+    #formContext = new ContextProvider(this, formContext, {});
+    updated(props) {
+        super.updated(props);
+        this.#formContext.setValue({ layout: this.layout, responsive: this.responsive, controlWidth: this.controlWidth, validate: this.validate });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observers.forEach(o => o.disconnect());
+    }
+    async #setControlLabelWidths() {
+        if (this.layout === 'horizontal' || this.layout === 'horizontal-inline' || this.layout === 'compact') {
+            await childrenUpdateComplete(this.#controlsAndGroups);
+            this.style.setProperty('--internal-label-min-width', await getLargestPrimaryLabelWidth(this.#controlsAndGroups));
+            elementResize(this, () => this.style.setProperty('--internal-label-max-width', `${this.getBoundingClientRect().width}px`));
+        }
+    }
+    #syncLayouts() {
+        this.addEventListener('layoutChange', (e) => {
+            e.preventDefault();
+            if (!this.#overflowElement && isVerticalLayout(e.detail)) {
+                this.#collapseForm(e.target, e.detail);
+            }
+            if (e.target === this.#overflowElement && !isVerticalLayout(e.detail)) {
+                this.#expandForm(e.detail);
+            }
+        });
+    }
+    async #collapseForm(control, layout) {
+        this.#overflowElement = control;
+        this.layout = layout;
+        await control.updateComplete;
+    }
+    #expandForm(layout) {
+        this.#overflowElement = null;
+        this.layout = layout;
+    }
+}

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

@@ -0,0 +1,6 @@
+export * from './control/element.js';
+export * from './control-inline/element.js';
+export * from './control-label/element.js';
+export * from './control-message/element.js';
+export * from './control-group/element.js';
+export * from './form-group/element.js';

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

@@ -0,0 +1,6 @@
+export * from './control/element.js';
+export * from './control-inline/element.js';
+export * from './control-label/element.js';
+export * from './control-message/element.js';
+export * from './control-group/element.js';
+export * from './form-group/element.js';