@blueprintui/cli 0.0.7 → 0.0.10

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

@@ -1,5 +1,4 @@
 import { html } from 'lit';
-import { attachRootNodeStyles, indicatorStyles } from '@blueprintui/components/internals';
 import { BpControl } from '@blueprintui/components/forms';
 import { styles as inputStyles } from '@blueprintui/components/input';
 import styles from './element.css' assert { type: 'css' };
@@ -23,13 +22,9 @@ import styles from './element.css' assert { type: 'css' };
  */
 export class BpDate extends BpControl {
     get suffixTemplate() {
-        return html `<bp-button-icon shape="calendar" readonly></bp-button-icon>`;
+        return html `<bp-button-icon shape="calendar" @click=${() => this.inputControl.showPicker()}></bp-button-icon>`;
     }
     static get styles() {
         return [...super.styles, inputStyles, styles];
     }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        attachRootNodeStyles(this, [indicatorStyles]);
-    }
 }

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

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-import { TypeDialogController } from '@blueprintui/components/internals';
 /**
  * ```typescript
  * import '@blueprintui/components/include/drawer.js';
@@ -20,7 +19,7 @@ export declare class BpDrawer extends LitElement {
     position: 'left' | 'right' | 'top' | 'bottom';
     elevation: 'raised' | 'flat';
     get dialog(): HTMLElement;
-    protected dialogController: TypeDialogController<this>;
+    private typeClosableController;
     static get styles(): CSSStyleSheet[];
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { baseStyles, typeDialog, elevationStyles } from '@blueprintui/components/internals';
+import { baseStyles, typeDialog, elevationStyles, typeClosable } from '@blueprintui/components/internals';
 import styles from './element.css' assert { type: 'css' };
 /**
  * ```typescript
@@ -39,7 +39,7 @@ let BpDrawer = class BpDrawer extends LitElement {
     get #contentTemplate() {
         return html `
     <div class="focus-wrap"></div>
-    ${this.closable ? html `<bp-button-icon @click=${() => this.dialogController.close()} aria-label="close modal" shape="close" type="button"></bp-button-icon>` : ''}
+    ${this.closable ? html `<bp-button-icon @click=${() => this.typeClosableController.close()} aria-label="close modal" shape="close" type="button"></bp-button-icon>` : ''}
     <slot></slot>`;
     }
     render() {
@@ -49,6 +49,7 @@ let BpDrawer = class BpDrawer extends LitElement {
     }
 };
 BpDrawer = __decorate([
-    typeDialog()
+    typeDialog(),
+    typeClosable()
 ], BpDrawer);
 export { BpDrawer };

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

@@ -48,7 +48,6 @@ export declare class BpFile extends BpControl {
         pageSize: string;
     };
     private buttonLabel;
-    protected supportsPrefixSuffixActions: boolean;
     static get styles(): CSSStyleSheet[];
     protected get inputTemplate(): import("lit-html").TemplateResult<1>;
     firstUpdated(props: PropertyValues<this>): void;

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

@@ -23,14 +23,12 @@ import styles from './element.css' assert { type: 'css' };
 let BpFile = class BpFile extends BpControl {
     static properties = {
         i18n: { type: Object },
-        buttonLabel: { state: true },
-        supportsPrefixSuffixActions: { state: true }
+        buttonLabel: { state: true }
     };
     constructor() {
         super(...arguments);
         this.i18n = I18nService.keys.actions;
         this.buttonLabel = this.i18n.browse;
-        this.supportsPrefixSuffixActions = false;
     }
     static get styles() {
         return [...super.styles, styles];
@@ -38,12 +36,11 @@ let BpFile = class BpFile extends BpControl {
     get inputTemplate() {
         return html `
       <div class="file-input">
-        <bp-button size="sm" action="outline" @click=${() => this.label.click()} ?disabled=${this.disabled}>
-          <bp-icon shape="folder" size="sm" aria-hidden="true"></bp-icon>
+        <bp-button size="sm" action="outline" @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.disabled ? html `
-        <bp-button-icon shape="times" @click=${() => this.#clearFiles()} aria-label="${this.i18n.removeFile}"></bp-button-icon>` : ''}
+        ${this.inputControl.files?.length && !this.matches(':--disabled') ? html `<bp-button-icon shape="times" @click=${() => this.#clearFiles()} aria-label=${this.i18n.removeFile}></bp-button-icon>` : ''}
       </div>
     `;
     }

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

@@ -1,6 +1,6 @@
-import { ContextConsumer, ContextProvider } from '@lit-labs/context';
+import { ContextConsumer } from '@lit-labs/context';
 import { LitElement, TemplateResult, PropertyValues } from 'lit';
-import { ControlStatus, ControlLayout, ControlWidth } from './../utils/interfaces.js';
+import { ControlLayout, ControlWidth } from './../utils/interfaces.js';
 import { BpControlMessage } from '../control-message/element.js';
 import { BpInternalControlLabel } from '../control-label/element.js';
 export declare const enum ControlLabelLayout {
@@ -27,10 +27,6 @@ export declare const enum ControlLabelLayout {
  */
 export declare class BpControl extends LitElement {
     #private;
-    /** status of form control validation */
-    status: ControlStatus;
-    /** https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation */
-    validate: boolean;
     /** forms automatically collapse to layout that prevents overflow */
     responsive: boolean;
     /** default full width or the browser default width */
@@ -47,45 +43,29 @@ export declare class BpControl extends LitElement {
             reflect: boolean;
         };
     };
-    protected focused: boolean;
-    protected disabled: boolean;
-    protected readonly: boolean;
-    protected supportsPrefixSuffixActions: boolean;
+    /** @private */
     labelLayout: ControlLabelLayout;
     /** @private */
     controlLabel: BpInternalControlLabel;
     private inputContainer;
-    private prefixAction;
-    private suffixAction;
-    private messageSlot;
     /** @private */
     get inputControl(): HTMLInputElement;
-    get label(): HTMLLabelElement;
-    get messages(): NodeListOf<BpControlMessage>;
-    protected observers: (MutationObserver | ResizeObserver)[];
+    protected get messages(): NodeListOf<BpControlMessage>;
     static styles: CSSStyleSheet[];
-    protected get isRTL(): boolean;
+    /** @private */
+    _internals: ElementInternals;
     render(): TemplateResult<1>;
     protected get inputTemplate(): TemplateResult<1>;
     protected get prefixTemplate(): TemplateResult | null;
     protected get suffixTemplate(): TemplateResult | null;
-    protected get messagesTemplate(): TemplateResult<1> | "";
     protected formContext: ContextConsumer<{
         __context__: import("../utils/context.js").FormContext;
     }, this>;
     protected controlGroupContext: ContextConsumer<{
-        __context__: import("../utils/context.js").FormContext & {
-            isControlGroup?: boolean;
-        };
-    }, this>;
-    protected controlContext: ContextProvider<{
         __context__: import("../utils/context.js").FormContext;
-    }>;
+    }, this>;
     connectedCallback(): void;
     firstUpdated(props: PropertyValues<this>): void;
-    updated(props: PropertyValues<any>): void;
-    disconnectedCallback(): void;
-    protected associateInputAndLabel(): void;
     /** @private */
     get layoutStable(): boolean;
 }

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

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { ContextConsumer, ContextProvider } from '@lit-labs/context';
+import { ContextConsumer } from '@lit-labs/context';
 import { html, LitElement } from 'lit';
-import { baseStyles, interactionResponsive, createId, syncProps, childrenUpdateComplete, calculateOptimalLayout, getElementLanguageDirection, getElementUpdates, syncUpdatedProps } from '@blueprintui/components/internals';
+import { baseStyles, interactionResponsive, calculateOptimalLayout, syncUpdatedProps, attachInternals, stateControl, associateAriaDescribedBy } from '@blueprintui/components/internals';
 import { syncHTML5Validation } from '../utils/validate.js';
-import { associateInputToDatalist, formLayouts, defaultFormLayout, getStatusIcon, associateInputAndLabel, defaultControlWidth, getCurrentMessageStatus } from '../utils/utils.js';
-import { controlContext, controlGroupContext, formContext } from '../utils/context.js';
+import { associateInputToDatalist, formLayouts, defaultFormLayout, getStatusIcon, associateInputAndLabel, defaultControlWidth, setupControlMessageStatusUpdates } from '../utils/utils.js';
+import { controlGroupContext, formContext } from '../utils/context.js';
 import styles from './element.css' assert { type: 'css' };
 export var ControlLabelLayout;
 (function (ControlLabelLayout) {
@@ -32,18 +32,11 @@ export var ControlLabelLayout;
 let BpControl = class BpControl extends LitElement {
     constructor() {
         super(...arguments);
-        /** status of form control validation */
-        this.status = 'neutral';
-        /** https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation */
-        this.validate = false;
         /** forms automatically collapse to layout that prevents overflow */
         this.responsive = true;
         /** default full width or the browser default width */
         this.controlWidth = defaultControlWidth;
-        this.focused = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.supportsPrefixSuffixActions = true;
+        /** @private */
         this.labelLayout = ControlLabelLayout.default;
     }
     /**
@@ -64,14 +57,8 @@ let BpControl = class BpControl extends LitElement {
     static get properties() {
         return {
             layout: { type: String, reflect: true },
-            status: { type: String, reflect: true },
-            validate: { type: Boolean, reflect: true },
             responsive: { type: Boolean, reflect: true },
             controlWidth: { type: String, reflect: true, attribute: 'control-width' },
-            focused: { type: Boolean, reflect: true, attribute: '_focused' },
-            disabled: { type: Boolean, reflect: true, attribute: '_disabled' },
-            readonly: { type: Boolean, reflect: true, attribute: '_readonly' },
-            supportsPrefixSuffixActions: { state: true },
             labelLayout: { state: true }
         };
     }
@@ -84,54 +71,43 @@ let BpControl = class BpControl extends LitElement {
     get inputContainer() {
         return this.renderRoot?.querySelector(".input-container") ?? null;
     }
-    get prefixAction() {
-        return this.renderRoot?.querySelector(".prefix") ?? null;
-    }
-    get suffixAction() {
-        return this.renderRoot?.querySelector(".suffix") ?? null;
-    }
-    get messageSlot() {
-        return this.renderRoot?.querySelector(".messages") ?? null;
-    }
     /** @private */
     get inputControl() {
         return this.querySelector('input, select, textarea, [bp-control]');
     }
-    get label() {
+    get #label() {
         return this.querySelector('label');
     }
-    get #datalistControl() {
+    get #datalist() {
         return this.querySelector('datalist');
     }
-    get #controlActions() {
-        return this.querySelectorAll('[bp-button-icon]');
-    }
     get messages() {
         return this.querySelectorAll('bp-control-message');
     }
-    observers = [];
     static styles = [baseStyles, styles];
-    get isRTL() {
-        return getElementLanguageDirection(this) === 'rtl';
-    }
-    get #hasStatusIcon() {
-        return this.labelLayout !== ControlLabelLayout.inputGroup && (this.status === 'error' || this.status === 'success');
-    }
     render() {
         return html `
-      <div class="private-host ${this.layout} ${this.isRTL ? 'rtl' : ''} ${this.messages?.length ? 'has-messages' : ''}">
-        ${this.#primaryLabelTemplate ? html `<div class="input-label-container">${this.#primaryLabelTemplate}</div>` : ''}
+      <div class="private-host ${this.layout}">
+        ${this.labelLayout === ControlLabelLayout.default ? html `
+        <div class="input-label-container">
+          <bp-internal-control-label>
+            <slot name="label"></slot>
+          </bp-internal-control-label>
+        </div>` : ''}
         <div class="input-message-container">
           <div class="input-status-icon-container">
             <div class="input-container">
-              ${this.inputTemplate} ${this.#prefixTemplate}
+              ${this.prefixTemplate}
+              <slot name="prefix"></slot>
+              ${this.inputTemplate}
               <slot name="input"></slot>
-              ${this.#suffixTemplate}
+              <slot name="suffix"></slot>
+              ${this.suffixTemplate}
             </div>
-            ${this.#hasStatusIcon ? getStatusIcon(this.status) : ''}
+            ${getStatusIcon()}
           </div>
-          ${this.messagesTemplate}
-          <slot name="datalist" @slotchange=${() => this.#associateInputToDatalist()}></slot>
+          ${this.messages?.length ? html `<slot name="message"></slot>` : ''}
+          ${this.#datalist ? html `<slot name="datalist"></slot>` : ''}
         </div>
       </div>
     `;
@@ -145,102 +121,35 @@ let BpControl = class BpControl extends LitElement {
     get suffixTemplate() {
         return null;
     }
-    get #primaryLabelTemplate() {
-        return this.labelLayout === ControlLabelLayout.default ? html `
-      <bp-internal-control-label .disabled=${this.disabled}>
-        <slot name="label" @slotchange=${() => this.associateInputAndLabel()}></slot>
-      </bp-internal-control-label>` : '';
-    }
-    get messagesTemplate() {
-        return this.messages?.length ? html `
-      <div class="messages">
-        <slot name="message"></slot>
-      </div>
-    ` : '';
-    }
-    get #prefixTemplate() {
-        return html `
-      <div class="prefix">
-        ${this.prefixTemplate}
-        <slot name="prefix"></slot>
-      </div>
-    `;
-    }
-    get #suffixTemplate() {
-        return html `
-      <div class="suffix">
-        <slot name="suffix"></slot>
-        ${this.suffixTemplate}
-      </div>
-    `;
-    }
     formContext = new ContextConsumer(this, formContext, (value) => syncUpdatedProps(this, value), true);
     controlGroupContext = new ContextConsumer(this, controlGroupContext, (value) => syncUpdatedProps(this, value), true);
-    controlContext = new ContextProvider(this, controlContext, {});
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('bp-control', '');
+        attachInternals(this);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
         this.inputControl.slot = 'input';
-        this.label ? this.label.slot = 'label' : null;
-        this.#datalistControl ? this.#datalistControl.slot = 'datalist' : null;
-        this.#setupHostAttributes();
-        this.#setupHTML5Validation();
-        this.#setActionOffsetPadding();
+        this.#label ? this.#label.slot = 'label' : null;
+        this.#datalist ? this.#datalist.slot = 'datalist' : null;
         this.#setupResponsive();
-        this.#setupDescribedByUpdates();
         this.#setupLabelLayout();
-        this.#assignSlotIfInControlGroup();
-    }
-    updated(props) {
-        super.updated(props);
-        this.controlContext.setValue({ layout: this.layout, responsive: this.responsive, controlWidth: this.controlWidth, disabled: this.disabled });
-        syncProps(this.inputControl, this, { disabled: props.has('disabled') });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.observers.forEach(o => o.disconnect());
-    }
-    associateInputAndLabel() {
-        associateInputAndLabel(this.inputControl, this.label);
-    }
-    #associateInputToDatalist() {
-        associateInputToDatalist(this.inputControl, this.#datalistControl);
-    }
-    #setupDescribedByUpdates() {
-        this.messageSlot?.addEventListener('slotchange', async () => {
-            const messages = Array.from(this.messages);
-            this.inputControl.setAttribute('aria-describedby', messages.length ? messages.map(m => (m.id = createId())).join(' ') : '');
-            getCurrentMessageStatus(messages).then(s => this.status = s);
+        setupControlMessageStatusUpdates(Array.from(this.messages), this);
+        syncHTML5Validation(this, Array.from(this.messages));
+        this.shadowRoot.addEventListener('slotchange', (e) => {
+            const slotName = e.target.name;
+            if (slotName === 'label') {
+                associateInputAndLabel(this.inputControl, this.#label);
+            }
+            else if (slotName === 'datalist') {
+                associateInputToDatalist(this.inputControl, this.#datalist);
+            }
+            else if (slotName === 'message') {
+                associateAriaDescribedBy(this.inputControl, Array.from(this.messages));
+            }
         });
     }
-    #setupHostAttributes() {
-        this.inputControl.addEventListener('focusin', () => (this.focused = true));
-        this.inputControl.addEventListener('focusout', () => (this.focused = false));
-        this.observers.push(getElementUpdates(this.inputControl, 'disabled', (value) => (this.disabled = value === '' ? true : value)), getElementUpdates(this.inputControl, 'aria-disabled', (value) => (this.disabled = value === 'true' ? true : false)), getElementUpdates(this.inputControl, 'readonly', (value) => (this.readonly = value === '' ? true : value)));
-    }
-    #setupHTML5Validation() {
-        if (!this.inputControl?.form?.noValidate && this.validate) {
-            syncHTML5Validation(this, Array.from(this.messages));
-        }
-    }
-    async #setActionOffsetPadding() {
-        const prefix = this.prefixAction?.updateComplete;
-        const suffix = this.suffixAction?.updateComplete;
-        (await prefix) ? prefix : Promise.resolve(true);
-        (await suffix) ? suffix : Promise.resolve(true);
-        await childrenUpdateComplete(this.#controlActions);
-        const hasControlActions = this.#controlActions.length > 0 || this.prefixTemplate || this.suffixTemplate;
-        const isGenericControl = this.tagName.toLowerCase() === 'bp-control';
-        if (this.supportsPrefixSuffixActions && !isGenericControl && hasControlActions) {
-            const start = `${this.prefixAction.getBoundingClientRect().width + 6}px`;
-            const end = `${this.suffixAction.getBoundingClientRect().width + 6}px`;
-            this.inputControl.style.setProperty('padding-left', this.isRTL ? end : start, 'important');
-            this.inputControl.style.setProperty('padding-right', this.isRTL ? start : end, 'important');
-        }
-    }
     /** @private */
     get layoutStable() {
         const messageBelowInput = this.shadowRoot.querySelector('.messages')?.getBoundingClientRect().top > this.inputContainer?.getBoundingClientRect().top;
@@ -270,13 +179,9 @@ let BpControl = class BpControl extends LitElement {
             this.labelLayout = ControlLabelLayout.ariaLabel;
         }
     }
-    #assignSlotIfInControlGroup() {
-        if (this.parentElement?.hasAttribute('bp-control-group')) {
-            this.setAttribute('slot', 'controls');
-        }
-    }
 };
 BpControl = __decorate([
+    stateControl(),
     interactionResponsive()
 ], BpControl);
 export { BpControl };

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

@@ -1,10 +1,8 @@
 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 { FormLayout, ControlWidth } from '../utils/interfaces.js';
 import { BpInternalControlLabel } from '../control-label/element.js';
-import { BpInternalControlInline } from './../control-inline/element.js';
 /**
  * Internal Control Group
  *
@@ -32,33 +30,23 @@ import { BpInternalControlInline } from './../control-inline/element.js';
  */
 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>;
+    protected get controls(): NodeListOf<BpControl>;
     /** @private */
     controlLabel: BpInternalControlLabel;
     protected formContext: ContextConsumer<{
         __context__: import("../utils/context.js").FormContext;
     }, this>;
     protected controlGroupContext: ContextProvider<{
-        __context__: import("../utils/context.js").FormContext & {
-            isControlGroup?: boolean;
-        };
+        __context__: import("../utils/context.js").FormContext;
     }>;
     protected isInlineControlGroup: boolean;
-    protected isControlGroup: boolean;
-    private _internals;
+    /** @private */
+    _internals: ElementInternals;
     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-group/element.js

@@ -1,8 +1,8 @@
 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 { baseStyles, calculateOptimalLayout, interactionResponsive, createId, syncUpdatedProps, associateAriaDescribedBy } from '@blueprintui/components/internals';
+import { getStatusIcon, formLayouts, defaultFormLayout, inlineControlListIsWrapped, setupControlMessageStatusUpdates } from '../utils/utils.js';
 import { controlGroupContext, formContext } from '../utils/context.js';
 import styles from './element.css' assert { type: 'css' };
 /**
@@ -32,32 +32,23 @@ import styles from './element.css' assert { type: 'css' };
  */
 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() {
+    get #label() {
+        return this.querySelector('label');
+    }
+    get #messages() {
         return this.querySelectorAll('bp-control-message');
     }
     /** @private */
@@ -67,29 +58,27 @@ let BpInternalControlGroup = class BpInternalControlGroup extends LitElement {
     formContext = new ContextConsumer(this, formContext, (value) => syncUpdatedProps(this, value), true);
     controlGroupContext = new ContextProvider(this, controlGroupContext, {});
     isInlineControlGroup = false;
-    isControlGroup = true;
-    #groupLabelId = createId();
+    /** @private */
     _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">
+          <bp-internal-control-label 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>
+              <slot></slot>
             </div>
-            ${this.isInlineControlGroup ? getStatusIcon(this.status) : ''}
           </div>
-          <div ?hidden=${this.messages.length === 0} class="messages-container">
-            ${!this.isInlineControlGroup ? getStatusIcon(this.status) : ''}
+          <div ?hidden=${this.#messages.length === 0} class="messages-container">
+            ${getStatusIcon()}
             <div class="messages">
-              <slot name="message" @slotchange=${this.#updateControlMessages}></slot>
+              <slot name="message" @slotchange=${() => associateAriaDescribedBy(this, Array.from(this.#messages))}></slot>
             </div>
           </div>
         </div>
@@ -103,13 +92,14 @@ let BpInternalControlGroup = class BpInternalControlGroup extends LitElement {
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this.label ? this.label.slot = 'label' : null;
+        this.#label ? this.#label.slot = 'label' : null;
         this.#associateLabelAndGroup();
         this.#setupResponsive();
+        setupControlMessageStatusUpdates(Array.from(this.#messages), this);
     }
     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 });
+        this.controlGroupContext.setValue({ layout: this.layout, responsive: this.responsive, controlWidth: this.controlWidth });
     }
     get layoutStable() {
         const messageBelowInput = this.shadowRoot.querySelector('.messages-container')?.getBoundingClientRect().top > this.shadowRoot.querySelector('.controls').getBoundingClientRect().top;
@@ -129,17 +119,8 @@ let BpInternalControlGroup = class BpInternalControlGroup extends LitElement {
         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(' '));
-        }
+        this.#label.id = this.#label.id?.length ? this.#label.id : createId();
+        this.setAttribute('aria-labelledby', this.#label.id);
     }
     #setupResponsive() {
         if (this.responsive) {

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

@@ -1,4 +1,3 @@
-import { PropertyValues } from 'lit';
 import { BpControl } from '../control/element.js';
 /**
  * Internal Control Inline
@@ -18,14 +17,6 @@ import { BpControl } from '../control/element.js';
  * @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;
 }