@telesign/boreal-web-components 0.1.0-alpha.5 → 0.1.0-alpha.6

package/dist/cjs/bds-checkbox.cjs.entry.js

@@ -2,10 +2,15 @@
 
 var index = require('./index-CwYIVC9N.js');
 var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
-var internals = require('./internals-D8x7GMfR.js');
 var attributes = require('./attributes-CgRFplrN.js');
+var KeyboardController = require('./KeyboardController-B_g3peyB.js');
+var Keys = require('./Keys-DXn16dlA.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+var checkboxFormAssociation = require('./checkbox-form-association-DTEpHXUD.js');
+require('./Logger-DnziItRH.js');
+require('./orientation-DQAIleEJ.js');
 
-const bdsCheckboxCss = () => `@charset "UTF-8";bds-checkbox{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:8px;cursor:pointer;outline:none}bds-checkbox .bds-checkbox__label{font-family:var(--boreal-typography-font-family-primary)}bds-checkbox .bds-checkbox__box{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--boreal-layout-m);height:var(--boreal-layout-m);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);background:transparent;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:4px}bds-checkbox:hover .bds-checkbox__box{border-color:var(--boreal-stroke-default-light)}bds-checkbox:focus-visible .bds-checkbox__box{border-color:var(--boreal-stroke-focus);outline:2px solid var(--boreal-stroke-focus);outline-offset:1px}bds-checkbox:active .bds-checkbox__box{border-color:var(--boreal-stroke-default-light);background:var(--boreal-bg-neutral);outline:2px solid var(--boreal-stroke-primary-light)}bds-checkbox.bds-checkbox--checked .bds-checkbox__box{border-color:var(--boreal-ui-primary-base);background:var(--boreal-ui-primary-base);color:var(--boreal-ui-inverse)}bds-checkbox.bds-checkbox--checked:hover .bds-checkbox__box{border-color:var(--boreal-ui-primary-dark);background:var(--boreal-ui-primary-dark)}bds-checkbox.bds-checkbox--checked:focus-visible .bds-checkbox__box{border-color:var(--boreal-ui-primary-base);background:var(--boreal-ui-primary-base);outline:2px solid var(--boreal-stroke-focus)}bds-checkbox.bds-checkbox--checked:active .bds-checkbox__box{border-color:var(--boreal-ui-primary-dark);background:var(--boreal-ui-primary-dark)}bds-checkbox.bds-checkbox--error .bds-checkbox__box{border-color:var(--boreal-stroke-danger-base)}bds-checkbox.bds-checkbox--error.bds-checkbox--checked .bds-checkbox__box,bds-checkbox.bds-checkbox--error.bds-checkbox--indeterminate .bds-checkbox__box{color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-danger-base);background:var(--boreal-stroke-danger-base)}bds-checkbox.bds-checkbox--disabled{pointer-events:none}bds-checkbox.bds-checkbox--disabled .bds-checkbox__box{border-color:var(--boreal-stroke-default-light);background:var(--boreal-bg-neutral)}bds-checkbox.bds-checkbox--disabled .bds-checkbox__label{color:var(--boreal-text-disabled)}bds-checkbox.bds-checkbox--disabled.bds-checkbox--checked .bds-checkbox__box,bds-checkbox.bds-checkbox--disabled.bds-checkbox--indeterminate .bds-checkbox__box{border-color:var(--boreal-ui-primary-light);background:var(--boreal-ui-primary-light);color:#fff}`;
+const bdsCheckboxCss = () => `@charset "UTF-8";.bds-checkbox__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-checkbox{font-family:var(--boreal-typography-font-family-primary);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;vertical-align:middle;gap:var(--boreal-spacing-2xs);outline:none;cursor:pointer}.bds-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-checkbox__content{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-checkbox__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular);font-style:normal}.bds-checkbox__info-icon{font-size:var(--boreal-typography-font-size-xs);color:var(--boreal-icon-default-light)}.bds-checkbox__label{font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-sm)}.bds-checkbox__label:empty{display:none}.bds-checkbox__icon:empty{display:none}.bds-checkbox__box{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--boreal-spacing-m);height:var(--boreal-spacing-m);border:var(--boreal-spacing-3xs) solid var(--boreal-stroke-default-light);background:var(--boreal-ui-inverse);border-radius:var(--boreal-spacing-2xs);-webkit-transition:background 0.2s ease;transition:background 0.2s ease}.bds-checkbox:hover .bds-checkbox__box{-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-checkbox:focus .bds-checkbox__box,.bds-checkbox:focus-visible .bds-checkbox__box{-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-checkbox:active .bds-checkbox__box{-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-checkbox--checked .bds-checkbox__box{border-color:var(--boreal-ui-primary-base);background:var(--boreal-ui-primary-base);color:var(--boreal-icon-inverse)}.bds-checkbox--checked:hover .bds-checkbox__box{border-color:var(--boreal-stroke-primary-dark);background:var(--boreal-ui-primary-dark)}.bds-checkbox--checked:active .bds-checkbox__box{border-color:var(--boreal-stroke-primary-dark);background:var(--boreal-ui-primary-dark)}.bds-checkbox--checked:disabled .bds-checkbox__box{border-color:var(--boreal-stroke-primary-light);background:var(--boreal-ui-primary-light)}.bds-checkbox--indeterminate .bds-checkbox__box{color:var(--boreal-icon-default-ink)}.bds-checkbox--indeterminate:disabled .bds-checkbox__box{color:var(--boreal-icon-disabled);background:var(--boreal-ui-inverse)}.bds-checkbox--error .bds-checkbox__box{border-color:var(--boreal-stroke-danger-base)}.bds-checkbox--error.bds-checkbox--checked .bds-checkbox__box{border-color:var(--boreal-stroke-danger-base);background:var(--boreal-stroke-danger-base)}.bds-checkbox--error.bds-checkbox--indeterminate .bds-checkbox__box{color:var(--boreal-icon-inverse);border-color:var(--boreal-stroke-danger-base);background:var(--boreal-stroke-danger-base)}.bds-checkbox--disabled{pointer-events:none;cursor:not-allowed}.bds-checkbox--disabled .bds-checkbox__box{border-color:var(--boreal-stroke-default-light);background:var(--boreal-ui-disabled)}.bds-checkbox--disabled .bds-checkbox__label{color:var(--boreal-text-disabled)}.bds-checkbox--disabled .bds-checkbox__required-indicator{color:var(--boreal-text-danger-light)}`;
 
 const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
     constructor(hostRef) {
@@ -21,11 +26,23 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.inheritedAttributes = {};
+        this._keyboard = new KeyboardController.KeyboardController();
+        this._id = BaseAttributes.createId('bds-checkbox');
         /** Internal mirror of the `disabled` prop, kept in sync via `@Watch` and `formDisabledCallback`. */
         this.isDisabled = false;
-        /** Disables the control. */
+        /** Set to true when native form validation fires the `invalid` event; cleared on reset or when value becomes valid. */
+        this.isInvalid = false;
+        // ---------------------------------------------------------------------------
+        // Props (from formAssociatedMixin — redeclared here because Stencil's spec-
+        // test compiler only sees @Prop decorators that are statically on the class)
+        // ---------------------------------------------------------------------------
+        /** Name of the form control, submitted as a key in the form data. */
+        this.name = '';
+        /** Tooltip text for the checkbox. */
+        this.info = '';
+        /** Disables the checkbox. */
         this.disabled = false;
-        /** Marks the control as required for form submission. */
+        /** Marks the checkbox as required for form submission. */
         this.required = false;
         // ---------------------------------------------------------------------------
         // Props
@@ -40,15 +57,10 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
         this.value = 'on';
         /** Label displayed next to the checkbox. If not provided, the default slot is used. */
         this.label = '';
+        this.formCheckbox = checkboxFormAssociation.useFormCheckbox(this, this.value);
         this.handleClick = () => {
             this.toggle();
         };
-        this.handleKeyDown = (e) => {
-            if (e.key === ' ') {
-                e.preventDefault();
-                this.toggle();
-            }
-        };
     }
     // ---------------------------------------------------------------------------
     // Lifecycle
@@ -58,13 +70,22 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
         this.inheritedAttributes = {
             ...attributes.inheritAriaAttributes(this.el),
         };
-        this.syncFormValue();
+    }
+    componentDidLoad() {
+        this.formCheckbox.syncFormValue();
+        this._keyboard.attach(this.el).set(Keys.KEYBOARD.Space, () => {
+            if (!this.isDisabled)
+                this.toggle();
+        });
+    }
+    disconnectedCallback() {
+        this._keyboard.detach();
     }
     // ---------------------------------------------------------------------------
     // Watchers
     // ---------------------------------------------------------------------------
     onCheckedChange() {
-        this.syncFormValue();
+        this.formCheckbox.syncFormValue();
     }
     onDisabledChange(next) {
         this.isDisabled = next;
@@ -73,26 +94,32 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
     // Form-associated callbacks (IFormControl)
     // ---------------------------------------------------------------------------
     formAssociatedCallback() {
-        this.syncFormValue();
+        this.formCheckbox.formAssociatedCallback();
     }
     formResetCallback() {
-        this.checked = false;
-        this.indeterminate = false;
-        internals.setFormValue(this.internals, null);
+        this.formCheckbox.formResetCallback();
     }
-    formStateRestoreCallback(state, _mode) {
-        this.checked = state === this.value;
-        this.syncFormValue();
+    formStateRestoreCallback(state) {
+        this.formCheckbox.formStateRestoreCallback(state);
     }
     formDisabledCallback(disabled) {
-        this.isDisabled = disabled;
+        this.formCheckbox.formDisabledCallback(disabled);
+    }
+    /** Reports the group's validity state to the user, showing native validation UI if invalid. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** Reports the group's validity state to the user, showing native validation UI if invalid. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    handleInvalid(event) {
+        event.preventDefault();
+        this.isInvalid = true;
     }
     // ---------------------------------------------------------------------------
     // Private helpers
     // ---------------------------------------------------------------------------
-    syncFormValue() {
-        internals.setFormValue(this.internals, this.checked ? this.value : null);
-    }
     toggle() {
         if (this.isDisabled)
             return;
@@ -101,13 +128,17 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
         this.valueChange.emit(this.checked);
         this.bdsChange.emit({ checked: this.checked, value: this.value });
     }
+    get isError() {
+        const error = this.error && !this.disabled;
+        return error || this.isInvalid;
+    }
     // ---------------------------------------------------------------------------
     // Render helpers
     // ---------------------------------------------------------------------------
     getAriaChecked() {
         if (this.indeterminate)
             return 'mixed';
-        return this.checked ? 'true' : 'false';
+        return `${this.checked}`;
     }
     get hideFromScreenReaders() {
         return this.el.closest('bds-checkbox-card') !== null || this.isDisabled;
@@ -121,21 +152,21 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
         }
         return null;
     }
-    get canShowLabel() {
-        return this.label !== undefined && this.label !== null;
-    }
     // ---------------------------------------------------------------------------
     // Render
     // ---------------------------------------------------------------------------
-    render() {
-        const classes = {
+    getClasses() {
+        return {
             'bds-checkbox': true,
             'bds-checkbox--checked': this.checked,
             'bds-checkbox--indeterminate': this.indeterminate,
-            'bds-checkbox--error': this.error,
+            'bds-checkbox--error': this.isError,
             'bds-checkbox--disabled': this.isDisabled,
         };
-        return (index.h(index.Host, { key: 'd5346e9f5943d81df215268f2c9ad3253941c3c8', class: classes, ...this.inheritedAttributes, role: "checkbox", "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, "aria-hidden": this.hideFromScreenReaders ? 'true' : null, tabindex: this.hideFromScreenReaders ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("span", { key: '217759044655c827609956b4d574fce3ce90c996', class: "bds-checkbox__box" }, this.renderCheckIcon()), this.canShowLabel && (index.h("span", { key: '47b8120c25700fe6e07e8d626c0acb28ac9387d7', class: "bds-checkbox__label" }, this.label.trim() !== '' ? this.label : index.h("slot", null)))));
+    }
+    render() {
+        const labelId = `${this._id}-label`;
+        return (index.h(index.Host, { key: '2d1fa28a22f182826625c313ffaf3a98d0784d0c', class: this.getClasses(), ...this.inheritedAttributes, role: "checkbox", "aria-required": this.required ? 'true' : null, "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, "aria-invalid": this.isError ? 'true' : null, "aria-hidden": this.hideFromScreenReaders ? 'true' : null, "aria-labelledby": labelId || undefined, tabindex: this.hideFromScreenReaders ? -1 : 0, onClick: this.handleClick }, index.h("input", { key: 'f8e3ca7085aa01a10e7fe397daf10f18024ce254', type: "checkbox", value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), index.h("span", { key: '397626b30b104d317a8c48554e8b8f6396c9a441', class: "bds-checkbox__box" }, this.renderCheckIcon()), index.h("span", { key: 'f8aec05775f2819d3c9fd510378bb74a9e22cc5e', class: "bds-checkbox__content" }, index.h("span", { key: '2956fccc6a6c7aa8624bb43798ece435cec7fbc0', class: "bds-checkbox__icon" }, index.h("slot", { key: '845c326874e4b854b71a6f0a360e6e692629b683', name: "icon" })), index.h("label", { key: '35531d1619a81972e29bf5332012b51e19fa3223', id: labelId, class: "bds-checkbox__label" }, this.label.trim() !== '' ? this.label : index.h("slot", null)), this.required && (index.h("em", { key: '81ea33ec4c831dea9029680b2ed7fff230849f4a', class: "bds-checkbox__required-indicator", "aria-hidden": "true" }, "*")), this.info && (index.h("span", { key: '237ad3a810ac31a95e59dc819ca118e8ab94763b', class: "bds-checkbox__info" }, index.h("span", { key: 'b83aa05c6b5468e7f57b3f36fd5e3ac770d5b985', class: "bds-checkbox__info-icon bds-icon-info-circle", "aria-hidden": "true" }), index.h("bds-tooltip", { key: '572f7ab57a6144bdd5e22e0ee38a395cda7300d3' }, this.info))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/bds-dialog.cjs.entry.js

@@ -194,7 +194,7 @@ const DIALOG_CONTENT_PADDING = {
     NONE: 'none',
 };
 
-const bdsDialogCss = () => `@charset "UTF-8";.bds-dialog{font-family:var(--boreal-typography-font-family-primary);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bds-dialog__header{height:var(--boreal-spacing-4xl);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__header:empty{display:none}.bds-dialog__header-right,.bds-dialog__header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs)}.bds-dialog__title{color:var(--boreal-text-default-light);font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-dialog__body{height:100%;overflow-y:auto;padding:var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__footer{padding:var(--boreal-spacing-s) var(--boreal-spacing-xs)}.bds-dialog__body,.bds-dialog__footer{-webkit-box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset;box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset}.bds-dialog__body:empty,.bds-dialog__footer:empty{display:none}.bds-dialog--sm{width:min(448px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--md{width:min(640px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--lg{width:min(960px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--full{width:min(1280px, 100vw - var(--boreal-spacing-m) * 2);height:calc(100vh - var(--boreal-spacing-4xl))}.bds-dialog--custom-size{width:var(--bds-dialog-width, auto);height:var(--bds-dialog-height, auto)}.bds-dialog--info .bds-dialog__variant-icon{color:var(--boreal-icon-info-base)}.bds-dialog--warning .bds-dialog__variant-icon{color:var(--boreal-icon-warning-base)}.bds-dialog--danger .bds-dialog__variant-icon{color:var(--boreal-icon-danger-base)}.bds-dialog--success .bds-dialog__variant-icon{color:var(--boreal-icon-success-base)}.bds-dialog--no-padding{padding:0}bds-dialog dialog{border:none;border-radius:var(--boreal-radius-xs);background-color:var(--boreal-white);-webkit-box-shadow:0 8px 12px 0 rgba(19, 19, 22, 0.15);box-shadow:0 8px 12px 0 rgba(19, 19, 22, 0.15);-ms-flex-item-align:center;align-self:center;justify-self:center}bds-dialog dialog::-webkit-backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog::-ms-backdrop{opacity:0;-ms-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog,bds-dialog dialog::backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog[open].enter::-webkit-backdrop{opacity:1}bds-dialog dialog[open].enter::-ms-backdrop{opacity:1}bds-dialog dialog[open].enter,bds-dialog dialog[open].enter::backdrop{opacity:1}`;
+const bdsDialogCss = () => `@charset "UTF-8";.bds-dialog{font-family:var(--boreal-typography-font-family-primary);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bds-dialog__header{height:var(--boreal-spacing-4xl);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__header:empty{display:none}.bds-dialog__header-right,.bds-dialog__header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs)}.bds-dialog__title{color:var(--boreal-text-default-light);font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-dialog__body{height:100%;overflow-y:auto;padding:var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__footer{padding:var(--boreal-spacing-s) var(--boreal-spacing-xs)}.bds-dialog__body,.bds-dialog__footer{-webkit-box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset;box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset}.bds-dialog__body:empty,.bds-dialog__footer:empty{display:none}.bds-dialog--sm{width:min(448px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--md{width:min(640px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--lg{width:min(960px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--full{width:min(1280px, 100vw - var(--boreal-spacing-m) * 2);height:calc(100vh - var(--boreal-spacing-4xl))}.bds-dialog--custom-size{width:var(--bds-dialog-width, auto);height:var(--bds-dialog-height, auto)}.bds-dialog--info .bds-dialog__variant-icon{color:var(--boreal-icon-info-base)}.bds-dialog--warning .bds-dialog__variant-icon{color:var(--boreal-icon-warning-base)}.bds-dialog--danger .bds-dialog__variant-icon{color:var(--boreal-icon-danger-base)}.bds-dialog--success .bds-dialog__variant-icon{color:var(--boreal-icon-success-base)}.bds-dialog--no-padding{padding:0}bds-dialog dialog{border:none;border-radius:var(--boreal-radius-xs);background-color:var(--boreal-white);-webkit-box-shadow:var(--boreal-depth-box-shadow-l);box-shadow:var(--boreal-depth-box-shadow-l);-ms-flex-item-align:center;align-self:center;justify-self:center}bds-dialog dialog::-webkit-backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog::-ms-backdrop{opacity:0;-ms-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog,bds-dialog dialog::backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog[open].enter::-webkit-backdrop{opacity:1}bds-dialog dialog[open].enter::-ms-backdrop{opacity:1}bds-dialog dialog[open].enter,bds-dialog dialog[open].enter::backdrop{opacity:1}`;
 
 const BdsDialog = class extends index.Mixin(backdropMixin) {
     constructor(hostRef) {
@@ -356,10 +356,10 @@ const BdsDialog = class extends index.Mixin(backdropMixin) {
     }
     render() {
         const inheritedAriaAttr = this.inheritedAttributes;
-        return (index.h("dialog", { key: '58ef2571b3c6d4fcc4ac85f8536bbb9168651e02', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
+        return (index.h("dialog", { key: 'de042f49b5eaaf2a0a0f305570d04321959b9fcb', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
                 if (el !== undefined)
                     this.dialogElement = el;
-            }, style: { ...this.getFixedSize() }, ...(this.titleDialog.length > 0 && { 'aria-labelledby': 'bds-dialog-title' }), ...inheritedAriaAttr }, index.h("div", { key: 'fa95d799c99e48ac7b02602d62d79e9919d7b711', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (index.h("div", { key: '7460a77b2caf914ddf871804ce6c37fbb186b9ef', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), index.h("div", { key: '1537a32b06b9e5ca0329d360a15f407ac8bb6d4f', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, index.h("slot", { key: 'e45a2fd2507303ab1af63983ff1cb5a3db1b955b' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (index.h("div", { key: 'c258f33a42fff5e88b2846c788bac219fa90fe63', class: "bds-dialog__footer" }, index.h("slot", { key: 'b64483b7004e01f2ecaa11fc4b144277a20d0204', name: "footer" }))))));
+            }, style: { ...this.getFixedSize() }, ...(this.titleDialog.length > 0 && { 'aria-labelledby': 'bds-dialog-title' }), ...inheritedAriaAttr }, index.h("div", { key: 'fef08504c053ca1f6188526ff0af517f767a4349', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (index.h("div", { key: '399281c7b7caa7a167677b26dc3ef338b987a09d', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), index.h("div", { key: 'dc4bc6d37b7c3928b6d5d15b56456340ac02cbfa', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, index.h("slot", { key: 'e6f01fe42e2b57bc94986ca232d5a8860e5236ef' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (index.h("div", { key: '80d7a6432bd127635a45b482d71b58973089b87d', class: "bds-dialog__footer" }, index.h("slot", { key: '8e5ec1341161020313712e64195bf9df68bbe340', name: "footer" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-divider.cjs.entry.js

@@ -32,7 +32,7 @@ const BdsDivider = class {
         this.checkPropValues();
     }
     render() {
-        return index.h("div", { key: 'd89008b1a2cddddb925ee1e6e7c4cb7110ab6bd1', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
+        return index.h("div", { key: 'a64c78979ba69f2de16edd48265cdb61d86d7026', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-flag.cjs.entry.js

@@ -2931,7 +2931,7 @@ const BdsFlag = class {
         const flagContentClass = this.flagContentClass;
         const flagClass = this.flagClass;
         const flagStyle = !this.isGlobal ? { backgroundImage: `url(${this.flagUrl(flag)})` } : {};
-        return (index.h(index.Host, { key: 'a8a3ef0fefd3e7b1d4c9fd40bf5ea82ce9000815', class: flagClass, "aria-label": countryName, role: "img" }, flag && index.h("span", { key: 'ea653c06af2a3c3341c95acd1750bdbbbd08f268', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), index.h("span", { key: '289fcc0f0d247f02b79493fd34aca190c985ed45', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
+        return (index.h(index.Host, { key: 'dd134e8e86c8b6fa5fae0317982296fee5768002', class: flagClass, "aria-label": countryName, role: "img" }, flag && index.h("span", { key: '41ca5fdab521e855d0c98a90bb07a9b46866bdb5', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), index.h("span", { key: '82defab102847400d10358c4cd264cb982df1ab4', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
     }
     static get assetsDirs() { return ["./constants"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/bds-grid-item.cjs.entry.js

@@ -58,7 +58,7 @@ const BdsGridItem = class {
         return styles;
     }
     render() {
-        return (index.h(index.Host, { key: 'e16ec21f8fcabbf3091ed3469a120aaff37f4274', style: this.getHostStyles() }, index.h("slot", { key: 'b1fa7e071660a4f4f50d9fd31ee9646069678d10' })));
+        return (index.h(index.Host, { key: '4a50b7d73fa449f56a533e6357f92c039c7b73c7', style: this.getHostStyles() }, index.h("slot", { key: 'e077c11e511f232ec25456676699c56c4bbcb483' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-grid.cjs.entry.js

@@ -23,7 +23,7 @@ const BdsGrid = class {
         this.checkPropValues();
     }
     render() {
-        return (index.h(index.Host, { key: '52672cc265a59d6556eb4ae677c650b19696dbdc', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, index.h("slot", { key: '6c0f0b89777a754a91d273838940cd8721b79d5c' })));
+        return (index.h(index.Host, { key: '72e2dd4c1ab75d6a7e71dc8e75456d482afbb4b8', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, index.h("slot", { key: '8c47051a287548daff2402a71aab7bd2aef50da0' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-list-menu-item.cjs.entry.js

@@ -2,9 +2,8 @@
 
 var index = require('./index-CwYIVC9N.js');
 var states = require('./states-BweP5Vpu.js');
-var menu = require('./menu-BxKaEajh.js');
 var validateProps = require('./validateProps-CJe9X5x8.js');
-var Keys = require('./Keys-rKl2za5q.js');
+var Keys = require('./Keys-DXn16dlA.js');
 
 /**
  * Resolves the appropriate ARIA role for a menu item.
@@ -199,7 +198,7 @@ const MenuItemBehavior = (Base) => {
             const parent = this.parent;
             if (parent === null)
                 return;
-            const items = Array.from(parent.querySelectorAll(`${this.el.tagName.toLocaleLowerCase()}:not([disabled]):not([variant="label"])`));
+            const items = Array.from(parent.querySelectorAll(`${this.el.tagName.toLocaleLowerCase()}:not([disabled]):not([variant="label"]):not([hidden])`));
             const currentIndex = items.indexOf(this.el);
             handleMenuKeyNavigation(e, items, currentIndex);
         }
@@ -364,7 +363,7 @@ const LIST_MENU_ITEM_VARIANTS = {
     BUTTON: 'button',
 };
 
-const bdsListMenuItemCss = () => `@charset "UTF-8";.bds-list-item,.bds-list-item__content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bds-list-item{width:100%;vertical-align:middle;position:relative;color:var(--boreal-text-default);font-style:normal;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-list-item__content{-ms-flex-pack:justify;justify-content:space-between;-ms-flex:1;flex:1;vertical-align:middle;gap:var(--boreal-spacing-3xs)}.bds-list-item__content-left,.bds-list-item__content-right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;vertical-align:middle}.bds-list-item__content-left__icon,.bds-list-item__content-left__text{display:inline-block;vertical-align:middle;font-style:normal;font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-xs)}.bds-list-item__content-left__icon:not(:empty){padding-right:var(--boreal-spacing-3xs)}.bds-list-item__content [class*=bds-icon-]{font-size:var(--boreal-typography-font-size-md)}.bds-list-item--button{cursor:pointer;padding:var(--boreal-spacing-1xs) var(--boreal-spacing-s);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-list-item--button:not(.bds-list-item--disabled):hover:not([selected]){background-color:var(--boreal-ui-default-lighter);z-index:1}.bds-list-item--button:not(.bds-list-item--disabled):focus,.bds-list-item--button:not(.bds-list-item--disabled):focus-visible{outline:none;-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);z-index:1}.bds-list-item--button:not(.bds-list-item--disabled):active,.bds-list-item--button:not(.bds-list-item--disabled).bds-list-item--state-active{-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;background-color:var(--boreal-ui-default-lighter);z-index:1}.bds-list-item--selected{background-color:var(--boreal-ui-primary-lighter)}.bds-list-item--disabled{color:var(--boreal-text-disabled);cursor:not-allowed}.bds-list-item--label{cursor:default;padding:var(--boreal-spacing-3xs) 0}.bds-list-item--label .bds-typography label{color:var(--boreal-text-default-light)}`;
+const bdsListMenuItemCss = () => `@charset "UTF-8";.bds-list-item,.bds-list-item__content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bds-list-item{width:100%;vertical-align:middle;position:relative;color:var(--boreal-text-default);font-style:normal;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-list-item[hidden]{display:none}.bds-list-item__content{-ms-flex-pack:justify;justify-content:space-between;-ms-flex:1;flex:1;vertical-align:middle;gap:var(--boreal-spacing-3xs)}.bds-list-item__content-left,.bds-list-item__content-right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;vertical-align:middle}.bds-list-item__content-left__icon,.bds-list-item__content-left__text{display:inline-block;vertical-align:middle;font-style:normal;font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-xs)}.bds-list-item__content-left__icon:not(:empty){padding-right:var(--boreal-spacing-3xs)}.bds-list-item__content [class*=bds-icon-]{font-size:var(--boreal-typography-font-size-md)}.bds-list-item--button{cursor:pointer;padding:var(--boreal-spacing-1xs) var(--boreal-spacing-s);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-list-item--button:not(.bds-list-item--disabled):hover:not([selected]){background-color:var(--boreal-ui-default-lighter);z-index:1}.bds-list-item--button:not(.bds-list-item--disabled):focus,.bds-list-item--button:not(.bds-list-item--disabled):focus-visible{outline:none;-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus);z-index:1}.bds-list-item--button:not(.bds-list-item--disabled):active,.bds-list-item--button:not(.bds-list-item--disabled).bds-list-item--state-active{-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active);background-color:var(--boreal-ui-default-lighter);z-index:1}.bds-list-item--selected{background-color:var(--boreal-ui-primary-lighter)}.bds-list-item--disabled{color:var(--boreal-text-disabled);cursor:not-allowed}.bds-list-item--label{cursor:default;padding:var(--boreal-spacing-3xs) 0}.bds-list-item--label .bds-typography label{color:var(--boreal-text-default-light)}`;
 
 const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
     constructor(hostRef) {
@@ -397,6 +396,8 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
         this.download = '';
         /** State to manage click and keyboard interaction states */
         this.currentState = states.COMPONENT_STATES.DEFAULT;
+        /** State to manage checked box */
+        this.boxChecked = false;
         /** Event to notify when the menu item is clicked */
         this.handleClick = (e) => {
             if (this.disabled || this.isLabelVariant)
@@ -406,11 +407,10 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
                 this.handleLinkClick(e);
                 return;
             }
-            if (this.checkable && this.parentRole !== menu.MENU_ROLES.LISTBOX)
-                this.selected = !this.selected;
             this.bdsSelectItem.emit({
                 value: this.value,
                 selected: !this.selected,
+                element: this.el,
             });
         };
         /** Event to handle keydown navigation and trigger click */
@@ -434,9 +434,17 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
     checkPropsVariant() {
         validateProps.validatePropValue(Object.values(LIST_MENU_ITEM_VARIANTS), LIST_MENU_ITEM_VARIANTS.BUTTON, this.el, 'variant');
     }
+    handleSelectedChange(newValue) {
+        if (this.checkable) {
+            this.boxChecked = newValue;
+        }
+    }
     /** Lifecycle method called before the component is loaded */
     componentWillLoad() {
         this.checkPropsVariant();
+        if (this.checkable) {
+            this.boxChecked = this.selected;
+        }
     }
     /** Improve aria resolve for checkable items */
     get menuItemRoleExtended() {
@@ -467,7 +475,7 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
     renderCheckbox() {
         if (!this.checkable)
             return null;
-        return (index.h("bds-checkbox", { checked: this.selected, disabled: this.disabled, name: `checkbox-${this.value}`, tabindex: "-1", style: { pointerEvents: 'none' }, inert: true }));
+        return (index.h("bds-checkbox", { checked: this.boxChecked, disabled: this.disabled, name: `checkbox-${this.value}`, tabindex: "-1", style: { pointerEvents: 'none' }, inert: true }));
     }
     /** Return the render for the button variant of the list menu item */
     renderTypeButton() {
@@ -479,12 +487,15 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
         if (this.isLabelVariant)
             renderItem = this.renderTypeLabel();
         const linkAttributes = this.isLink ? { ...this.linkAttributes, tabindex: this.activeItem ? 0 : -1 } : {};
-        return (index.h(index.Host, { key: '0882d4cb677f6621518113c48e92d7e94cb71916', class: this.classMap, role: this.isLabelVariant ? 'presentation' : this.menuItemRoleExtended, "aria-selected": !this.checkable ? this.ariaSelected : false, "aria-checked": this.checkable ? this.ariaSelected : undefined, ...linkAttributes, tabIndex: this.isLabelVariant ? -1 : this.itemTabIndex, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, renderItem));
+        return (index.h(index.Host, { key: 'f2eba72a913704f5de812a1be1f7aafbd718f27b', class: this.classMap, role: this.isLabelVariant ? 'presentation' : this.menuItemRoleExtended, "aria-selected": !this.checkable ? this.ariaSelected : false, "aria-checked": this.checkable ? this.ariaSelected : undefined, ...linkAttributes, tabIndex: this.isLabelVariant ? -1 : this.itemTabIndex, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, renderItem));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "variant": [{
                 "checkPropsVariant": 0
+            }],
+        "selected": [{
+                "handleSelectedChange": 0
             }]
     }; }
 };

package/dist/cjs/bds-list-menu.cjs.entry.js

@@ -1,10 +1,14 @@
 'use strict';
 
 var index = require('./index-CwYIVC9N.js');
-var menu = require('./menu-BxKaEajh.js');
 var attributes = require('./attributes-CgRFplrN.js');
 var validateProps = require('./validateProps-CJe9X5x8.js');
 
+const MENU_ROLES = {
+    MENU: 'menu',
+    LISTBOX: 'listbox',
+};
+
 const LIST_MENU_SELECTION_MODE = {
     SINGLE: 'single',
     MULTIPLE: 'multiple',
@@ -22,15 +26,21 @@ const BdsListMenu = class {
         /** The selection mode of the menu. Can be 'SINGLE' or 'MULTIPLE'. Default is 'SINGLE'. */
         this.selectionMode = LIST_MENU_SELECTION_MODE.SINGLE;
         /** Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'. */
-        this.menuRole = menu.MENU_ROLES.MENU;
+        this.menuRole = MENU_ROLES.MENU;
         /** Determines if the menu items have selectall/deselectall controls */
         this.selectControls = false;
+        /** is empty state item */
+        this.empty = false;
+        /** Prop to show in all items a checkbox */
+        this.checkable = false;
+        /** Prop to show empty text */
+        this.emptyText = 'No options available';
         /** State to manage selected values */
         this.selectedValues = [];
     }
     /** Verify props to be valid */
     checkProps() {
-        validateProps.validatePropValue(Object.values(menu.MENU_ROLES), menu.MENU_ROLES.MENU, this.el, 'menuRole');
+        validateProps.validatePropValue(Object.values(MENU_ROLES), MENU_ROLES.MENU, this.el, 'menuRole');
         validateProps.validatePropValue(Object.values(LIST_MENU_SELECTION_MODE), LIST_MENU_SELECTION_MODE.SINGLE, this.el, 'selectionMode');
     }
     /**
@@ -56,10 +66,14 @@ const BdsListMenu = class {
         }
         this.updateChildrenState();
     }
+    /** Retrieves all child menu items. */
+    getAllItems() {
+        return Promise.resolve(this.childItems);
+    }
     /** Handles the click event on a menu item, updating the selection state accordingly. */
     handleItemClick(event) {
         const { value, selected } = event.detail;
-        if (this.menuRole === menu.MENU_ROLES.LISTBOX) {
+        if (this.menuRole === MENU_ROLES.LISTBOX) {
             if (this.isMultiple) {
                 this.handleMultipleSelection(value, selected);
             }
@@ -72,6 +86,8 @@ const BdsListMenu = class {
         else {
             const itemClicked = event.target;
             const indexItem = this.childItems.indexOf(itemClicked);
+            if (itemClicked.checkable)
+                itemClicked.selected = !itemClicked.selected;
             this.bdsSelect.emit({
                 value,
                 index: indexItem,
@@ -82,6 +98,7 @@ const BdsListMenu = class {
     }
     /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
     componentWillLoad() {
+        this.setDefaultProps();
         this.checkProps();
         this.initialSelectedValues();
         this.updateActiveState();
@@ -100,9 +117,20 @@ const BdsListMenu = class {
         const firstEnabled = items.find(item => !item.disabled && item.variant !== 'label');
         return firstEnabled;
     }
+    /** Checks if the menu is in multiple selection mode */
     get isMultiple() {
         return this.selectionMode === LIST_MENU_SELECTION_MODE.MULTIPLE;
     }
+    /** Send default props to items */
+    setDefaultProps() {
+        if (this.isMultiple && this.checkable) {
+            this.childItems.forEach(item => {
+                if (!item.checkable) {
+                    item.setAttribute('checkable', 'true');
+                }
+            });
+        }
+    }
     /** Updates the active state of the menu items based on the current selection. */
     updateActiveState() {
         const firstEnabled = this.firstEnabledItem;
@@ -126,7 +154,7 @@ const BdsListMenu = class {
     updateChildrenState(item) {
         const items = this.childItems;
         items.forEach((item) => {
-            if (item.value !== undefined) {
+            if (item.value !== undefined && item.variant !== 'label') {
                 const isSelected = this.selectedValues.includes(item.value);
                 item.selected = isSelected;
                 item.removeAttribute('active-item');
@@ -174,15 +202,22 @@ const BdsListMenu = class {
     }
     /** Renders the select/deselect all controls if applicable based on the props. */
     renderSelectControls() {
-        if (this.selectControls && this.menuRole === menu.MENU_ROLES.LISTBOX && this.isMultiple) {
+        if (this.selectControls && this.menuRole === MENU_ROLES.LISTBOX && this.isMultiple) {
             return (index.h("div", { class: "bds-list-menu__select-controls" }, index.h("bds-button", { name: "Select all", variant: "plain", onBdsClick: () => this.handleToggleSelect(true) }, "Select All"), index.h("bds-button", { name: "Deselect all", variant: "plain", onBdsClick: () => this.handleToggleSelect(false) }, "Deselect All")));
         }
         return null;
     }
+    /** Renders the empty state message if the 'empty' prop is true. */
+    renderEmptyState() {
+        if (this.empty || this.childItems.length === 0) {
+            return (index.h("bds-typography", { variant: "label", element: "label", align: "start", role: "presentation" }, this.emptyText));
+        }
+        return null;
+    }
     /** Renders the component with a slot for menu items. */
     render() {
         const inheritedAriaAttr = this.inheritedAttributes;
-        return (index.h(index.Host, { key: '88d9e41f1116555df02ca6e883b9e50f024c69b9', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.menuRole === menu.MENU_ROLES.LISTBOX && this.isMultiple ? 'true' : 'false', ...inheritedAriaAttr }, index.h("slot", { key: '2f1730a1b5c456477d2b86f35b596d11e1b79f5c', name: "banner-content" }), index.h("div", { key: '58b6944a60ce62a8832e41a853d2621b6fc6deae', class: "bds-list-menu__header" }, index.h("slot", { key: '1a292f12ca27104fd0496477a051a1ad3bcec83e', name: "header-content" })), this.renderSelectControls(), index.h("div", { key: '9a21f481ca5a3e6b484c0bcc5501097dfceb61c3', class: "bds-list-menu__content" }, index.h("slot", { key: '43f684cb30333a5d571b4d05a4c8627703297473' })), index.h("div", { key: 'dbc3a62e055792283fef80ff4514167d079c355d', class: "bds-list-menu__footer" }, index.h("slot", { key: '8d504757a49bedf5a5ec150ed16ef5c9e7723ee1', name: "footer-content" }))));
+        return (index.h(index.Host, { key: '658fa1497aa51cd6cb8ee40a4c5306e9ef444d14', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.menuRole === MENU_ROLES.LISTBOX && this.isMultiple ? 'true' : 'false', ...inheritedAriaAttr }, index.h("slot", { key: '7275e500cb30c352e22730963635cbfbd77d691e', name: "banner-content" }), index.h("div", { key: '68e1b663db8b96dc9c2aaa1d1b778e81304299ed', class: "bds-list-menu__header" }, index.h("slot", { key: 'cb96ac82f30b4b974312a40a7861b4bfee12382b', name: "header-content" })), this.renderSelectControls(), index.h("div", { key: '0e7d4b74f955eab4999e12ace25b00b521dbaa40', class: "bds-list-menu__content" }, index.h("slot", { key: '78402e3166d97b1d25369db7341958c1834cc30a' }), this.renderEmptyState()), index.h("div", { key: 'cf413da08c650accfaf7ca1cc3cbd5b246b4d977', class: "bds-list-menu__footer" }, index.h("slot", { key: '9636560c612bdee8f201d0b8b9a594ec32e0e44c', name: "footer-content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-popover.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var index = require('./index-CwYIVC9N.js');
-var getOffset = require('./getOffset-k4ezB-eT.js');
+var getOffset = require('./getOffset-CsDHFjPW.js');
 var _enum = require('./enum-DeTWfR0D.js');
 require('./Logger-DnziItRH.js');
 require('./floating.mixin-Bje4320w.js');
-require('./Keys-rKl2za5q.js');
+require('./Keys-DXn16dlA.js');
 
 const OFFSET = 11;
 
@@ -223,11 +223,11 @@ const BdsPopover = class extends index.Mixin(getOffset.anchoredMixin) {
             const listenTarget = nativeEl ?? parentBds;
             this.listenTarget = listenTarget;
             this.listenTarget.addEventListener('click', (evt) => this.handleShow(evt));
-            this.listenTarget.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.showElement(), () => this.hideElement()));
+            this.listenTarget.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.show(), () => this.hide()));
         }
         else {
             this.trigger.addEventListener('click', (evt) => this.handleShow(evt));
-            this.trigger.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.showElement(), () => this.hideElement()));
+            this.trigger.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.show(), () => this.hide()));
         }
     }
     /**
@@ -267,12 +267,20 @@ const BdsPopover = class extends index.Mixin(getOffset.anchoredMixin) {
     get hasFooterSlot() {
         return this.el.querySelector('[slot="footer"]') !== null;
     }
+    /** Programmatically opens the popover, running the full show lifecycle. */
+    async openPopover() {
+        this.show();
+    }
+    /** Programmatically closes the popover, running the full hide lifecycle. */
+    async closePopover() {
+        this.hide();
+    }
     disconnectedCallback() {
         this.listenTarget.removeEventListener('click', (evt) => this.handleShow(evt));
         this.trigger.removeEventListener('click', (evt) => this.handleShow(evt));
     }
     render() {
-        return (index.h(index.Host, { key: '953571ebcd84e1e6910f3fce9aa59ff1b00c1be7', class: "popover", style: { width: this.popoverWidth }, popover: "manual", role: "tooltip", "data-placement": this.getPlacement, "data-hidearrow": this.canShowArrow, "aria-hidden": this.isVisible ? 'false' : 'true', onClick: (e) => this.handleContentClick(e), ref: el => (this.floatingContent = el) }, this.header && (index.h("div", { key: '435cde7702b5db7ddc5f055ab379ef264a8cac16', class: "popover-header" }, index.h("div", { key: 'a3ac8f2b6610090d5947dc299a9ce62d85265e86', class: "popover-header__content" }, index.h("span", { key: 'ed1cbb198c54ffba2c7ce22085cb43648d6b7f3d', class: "popover-header__icon" }, index.h("slot", { key: 'b3049ec3dc2ad99037a662553103facad38af4f9', name: "header-icon" })), index.h("span", { key: '591ccd19d65f3a485062be8e5e4acf57a3ff4539', class: "popover-header__title" }, index.h("slot", { key: '9b65d0180f3728906302426f6436034e80f1c783', name: "header-title" }))), this.closable && (index.h("bds-button", { key: '5e13390200231b50e4a9c38fb22c623bf28d105f', class: "popover-header__close", size: _enum.BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, index.h("em", { key: '20ea602f48d1f27ee0b10c929a4a2194304a35b2', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (index.h("div", { key: '551089a9b038a27277398dac47b8e72b2f3d9286', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), index.h("div", { key: '17a6a939f83dd930aafc416b48da124faa27a4e0', class: "popover-content", tabIndex: -1, part: "popover-content" }, index.h("slot", { key: 'ab7cfa10649128cc387a54cf052429425696269a' })), this.footer && (index.h("div", { key: '7cf9fa351928fd823a49541764cdd67bd2d57def', class: "popover-footer", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: 'b6a20d06d0964f6dea85afdd40a46a6fb737bbac', name: "footer-helper" }), index.h("slot", { key: '379b2b43a1e937775149e686686da9e4554dd962', name: "footer-button" })))));
+        return (index.h(index.Host, { key: '1145ed2dd0b348768e488601c1fb107d324722d6', class: "popover", style: { width: this.popoverWidth }, popover: "manual", role: "tooltip", "data-placement": this.getPlacement, "data-hidearrow": this.canShowArrow, "aria-hidden": this.isVisible ? 'false' : 'true', onClick: (e) => this.handleContentClick(e), ref: el => (this.floatingContent = el) }, this.header && (index.h("div", { key: '17f0abca3fb63dec5cc653f04fe9f9b66f8726c7', class: "popover-header" }, index.h("div", { key: '2a75d8bc515b5a570d205b3ed0165fa90f499e72', class: "popover-header__content" }, index.h("span", { key: 'e4e3c86e939a164bbf1d66e27ae81ad79e72f622', class: "popover-header__icon" }, index.h("slot", { key: 'dae8e922f5764e0df061d00e1610d10b9b566c1b', name: "header-icon" })), index.h("span", { key: '2c5712ba18797e4afd646116049bceb7bc947304', class: "popover-header__title" }, index.h("slot", { key: '3f50071dd0967d019af5df4b42ba74fda8506288', name: "header-title" }))), this.closable && (index.h("bds-button", { key: '9a2cea30f338e9f9e43b86ded9307b23380d061c', class: "popover-header__close", size: _enum.BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, index.h("em", { key: 'f58e153416d703d86a2dd6e040fc7d4db4a3493c', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (index.h("div", { key: 'e52f80b940678fb20fdde853ebc3f21e2bfc05eb', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), index.h("div", { key: '3bcaf09c7d1e4760f220241352dead7f7d67a576', class: "popover-content", tabIndex: -1, part: "popover-content" }, index.h("slot", { key: '2b9308edf77812d1055f76266304466261563fe0' })), this.footer && (index.h("div", { key: '33e39c5c515bddcf0339e4af834026436e475035', class: "popover-footer", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '4155b26aef0e05a4b3c1f8692b6e8fb41b556eed', name: "footer-helper" }), index.h("slot", { key: 'd05f3fe0bcebd6082ad19b217805fe657c78166c', name: "footer-button" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bds-radio-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CwYIVC9N.js');
 
-const bdsRadioButtonCss = () => `@charset "UTF-8";.bds-radio-button__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-radio-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--boreal-spacing-2xs);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-s);border:1px solid transparent;border-radius:var(--boreal-radius-s);background-color:var(--boreal-ui-default-base);color:var(--boreal-text-default);cursor:pointer;outline:none;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio-button input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-radio-button:hover:not(.bds-radio-button--disabled):not(.bds-radio-button--checked):not(.bds-radio-button--error){background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-radio-button:focus-visible,.bds-radio-button:focus{z-index:1;background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);outline:none}.bds-radio-button:active:not(.bds-radio-button--disabled):not(.bds-radio-button--checked):not(.bds-radio-button--error){z-index:1;background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-radio-button--checked{background-color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-primary-base);color:var(--boreal-text-primary-base)}.bds-radio-button--checked:hover,.bds-radio-button--checked:focus-visible,.bds-radio-button--checked:focus,.bds-radio-button--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-radio-button--error{background-color:var(--boreal-ui-inverse);color:var(--boreal-text-danger-base)}.bds-radio-button--error:hover,.bds-radio-button--error:focus-visible,.bds-radio-button--error:focus,.bds-radio-button--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-radio-button--error.bds-radio-button--checked{border-color:var(--boreal-stroke-danger-base)}.bds-radio-button--disabled{cursor:not-allowed;pointer-events:none;background-color:var(--boreal-ui-inverse);color:var(--boreal-text-disabled)}.bds-radio-button--disabled.bds-radio-button--checked{border-color:var(--boreal-stroke-primary-light);color:var(--boreal-text-primary-light)}.bds-radio-button__label{font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm)}.bds-radio-button__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-radio-button__icon:empty{display:none}.bds-radio-button__info-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-sm);line-height:1;color:var(--boreal-icon-default-ink)}`;
+const bdsRadioButtonCss = () => `@charset "UTF-8";.bds-radio-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--boreal-spacing-2xs);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-s);border:1px solid transparent;border-radius:var(--boreal-radius-s);background-color:var(--boreal-ui-default-base);color:var(--boreal-text-default);cursor:pointer;outline:none;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio-button input[type=checkbox],.bds-radio-button input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-radio-button [slot=icon]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-radio-button:hover:not(.bds-radio-button--disabled):not(.bds-radio-button--checked):not(.bds-radio-button--error){background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-radio-button:focus-visible,.bds-radio-button:focus{z-index:1;background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus);outline:none}.bds-radio-button:active:not(.bds-radio-button--disabled):not(.bds-radio-button--checked):not(.bds-radio-button--error){z-index:1;background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-radio-button--checked{background-color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-primary-base);color:var(--boreal-text-primary-base)}.bds-radio-button--checked:hover,.bds-radio-button--checked:focus-visible,.bds-radio-button--checked:focus,.bds-radio-button--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-radio-button--error{background-color:var(--boreal-ui-inverse);color:var(--boreal-text-danger-base)}.bds-radio-button--error:hover,.bds-radio-button--error:focus-visible,.bds-radio-button--error:focus,.bds-radio-button--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-radio-button--error.bds-radio-button--checked{border-color:var(--boreal-stroke-danger-base)}.bds-radio-button--disabled{cursor:not-allowed;pointer-events:none;background-color:var(--boreal-ui-inverse);color:var(--boreal-text-disabled)}.bds-radio-button--disabled.bds-radio-button--checked{border-color:var(--boreal-stroke-primary-light);color:var(--boreal-text-primary-light)}.bds-radio-button__label{font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm)}.bds-radio-button__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-radio-button__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-radio-button__icon:empty{display:none}.bds-radio-button__info-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-sm);line-height:1;color:var(--boreal-icon-default-ink)}`;
 
 const BdsRadioButton = class {
     constructor(hostRef) {
@@ -51,7 +51,7 @@ const BdsRadioButton = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '63fe01baf9bf2318441f3a742ba857a540f4d7d0', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("input", { key: '19fd44e41ef583131da77206f9e0c987132a5cc4', type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), index.h("span", { key: 'cfbe81b25b71aeda4786b6073c9b16bcc819bf7b', class: "bds-radio-button__icon" }, index.h("slot", { key: 'ffa28a8602ea92c990b3e365d6cd421975f896fc', name: "icon" })), index.h("span", { key: 'c0a6512f836a00718ee71d5542b714900357ac82', class: "bds-radio-button__label" }, this.label || index.h("slot", { key: '29c89fa661270a7cc5ee69eb5c7cbc594af05d40' })), this.info && (index.h("span", { key: '74c3d43733ac679427e1b4fdbfcb4e72dae335a8', class: "bds-radio-button__info" }, index.h("span", { key: '567d225444acc5384df916a16a35867592327895', class: "bds-radio-button__info-icon bds-icon-info-circle", "aria-hidden": "true" }), index.h("bds-tooltip", { key: '8120fe06d5a0f85d03205abc54f3e8112946ad4f' }, this.info)))));
+        return (index.h(index.Host, { key: 'a93a54d210b0b5f05e82f5e19f8fecd9502257ae', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("input", { key: '93c8fdba9be5708bb17114f76131ecf88457a6e1', type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), index.h("span", { key: 'a51c3c748941b943b16570d13463321ecd122f38', class: "bds-radio-button__icon" }, index.h("slot", { key: 'cbbe2373b77ec5743b2eb45e1acc7d753f0de206', name: "icon" })), index.h("span", { key: 'e4d8f4ae5a6538540536908fabe23e5fe49ce2c1', class: "bds-radio-button__label" }, this.label || index.h("slot", { key: '2cc5aee872ab7ffd933d626a8f95f406c434a399' })), this.info && (index.h("span", { key: '92b187ede0488712d778958de1b599fab975cbf0', class: "bds-radio-button__info" }, index.h("span", { key: '9f840b4ba88fcae4ed226b242c508c96ec73abb6', class: "bds-radio-button__info-icon bds-icon-info-circle", "aria-hidden": "true" }), index.h("bds-tooltip", { key: 'fdf5d00827aae240d8cbe803b3f98c786c45f967' }, this.info)))));
     }
     get el() { return index.getElement(this); }
 };