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

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

@@ -1,10 +1,11 @@
 'use strict';
 
 var index = require('./index-CwYIVC9N.js');
-var formAssociated_mixin = require('./form-associated.mixin-DXwvF_vW.js');
-var attributes = require('./attributes-wIHueigW.js');
+var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
+var internals = require('./internals-D8x7GMfR.js');
+var attributes = require('./attributes-CgRFplrN.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:18px;height:18px;border:2px 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,bds-checkbox.bds-checkbox--indeterminate .bds-checkbox__box{border-color:var(--boreal-ui-primary-base);background:var(--boreal-ui-primary-base);color:#fff}bds-checkbox.bds-checkbox--checked:hover .bds-checkbox__box,bds-checkbox.bds-checkbox--indeterminate: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,bds-checkbox.bds-checkbox--indeterminate: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,bds-checkbox.bds-checkbox--indeterminate: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{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{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 BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
     constructor(hostRef) {
@@ -77,7 +78,7 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
     formResetCallback() {
         this.checked = false;
         this.indeterminate = false;
-        formAssociated_mixin.setFormValue(this.internals, null);
+        internals.setFormValue(this.internals, null);
     }
     formStateRestoreCallback(state, _mode) {
         this.checked = state === this.value;
@@ -90,7 +91,7 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
     // Private helpers
     // ---------------------------------------------------------------------------
     syncFormValue() {
-        formAssociated_mixin.setFormValue(this.internals, this.checked ? this.value : null);
+        internals.setFormValue(this.internals, this.checked ? this.value : null);
     }
     toggle() {
         if (this.isDisabled)
@@ -108,6 +109,9 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
             return 'mixed';
         return this.checked ? 'true' : 'false';
     }
+    get hideFromScreenReaders() {
+        return this.el.closest('bds-checkbox-card') !== null || this.isDisabled;
+    }
     renderCheckIcon() {
         if (this.indeterminate) {
             return (index.h("svg", { class: "bds-checkbox__icon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4 8h8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
@@ -117,6 +121,9 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
         }
         return null;
     }
+    get canShowLabel() {
+        return this.label !== undefined && this.label !== null;
+    }
     // ---------------------------------------------------------------------------
     // Render
     // ---------------------------------------------------------------------------
@@ -128,7 +135,7 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
             'bds-checkbox--error': this.error,
             'bds-checkbox--disabled': this.isDisabled,
         };
-        return (index.h(index.Host, { key: '4c2aa0c0e06451d258204ed2aaf92c41f730a2a8', class: classes, ...this.inheritedAttributes, role: "checkbox", "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, tabindex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("span", { key: 'de6763aaef951d9236cbf4df7ac49fd09f998e93', class: "bds-checkbox__box" }, this.renderCheckIcon()), index.h("span", { key: '571e62e3cde00561465a155bc1399f6074516a03', class: "bds-checkbox__label" }, this.label ? this.label : index.h("slot", null))));
+        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)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-CwYIVC9N.js');
 var floating_mixin = require('./floating.mixin-Bje4320w.js');
-var attributes = require('./attributes-wIHueigW.js');
+var attributes = require('./attributes-CgRFplrN.js');
 var validateProps = require('./validateProps-CJe9X5x8.js');
 var states = require('./states-BweP5Vpu.js');
 
@@ -356,10 +356,10 @@ const BdsDialog = class extends index.Mixin(backdropMixin) {
     }
     render() {
         const inheritedAriaAttr = this.inheritedAttributes;
-        return (index.h("dialog", { key: '73f9b2516aa414e3016e8a18b5f0d2de7f46a09a', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
+        return (index.h("dialog", { key: '58ef2571b3c6d4fcc4ac85f8536bbb9168651e02', 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: 'ef900b6a99ed650db043fb8123c90c3cd7322ec6', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (index.h("div", { key: '81d96f353eef6bd9f38baba8702b88599d6c02a3', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), index.h("div", { key: 'd36d2c112a87e885e53bd4a8740530ac7b196980', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, index.h("slot", { key: 'c296c8e91a44d7f40284586b3b425a6b87964cdd' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (index.h("div", { key: '98c17852b5dc519207c66850c38d679d31d27b5b', class: "bds-dialog__footer" }, index.h("slot", { key: '159426b4095804e6da864d86a0f6ef7a8e2197e3', name: "footer" }))))));
+            }, 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" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -8,7 +8,7 @@ const DIVIDER_ORIENTATIONS = {
     VERTICAL: 'vertical',
 };
 
-const bdsDividerCss = () => `@charset "UTF-8";bds-divider[orientation=vertical]{display:inline-block;height:100%}bds-divider[orientation=horizontal]{display:block;width:100%}.bds-divider{background-color:var(--boreal-ui-default-lighter)}.bds-divider--horizontal{width:100%;height:var(--boreal-spacing-4xs)}.bds-divider--vertical{width:var(--boreal-spacing-4xs);height:100%}`;
+const bdsDividerCss = () => `@charset "UTF-8";bds-divider{}bds-divider[orientation=vertical]{display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;margin-inline:var(--bds-divider-gap, 0px)}bds-divider[orientation=horizontal]{display:block;width:100%;margin-block:var(--bds-divider-gap, 0px)}.bds-divider{background-color:var(--bds-divider-color, var(--boreal-ui-default-lighter))}.bds-divider--horizontal{width:100%;height:var(--boreal-spacing-4xs)}.bds-divider--vertical{-ms-flex:1;flex:1;width:var(--boreal-spacing-4xs)}`;
 
 const BdsDivider = class {
     constructor(hostRef) {
@@ -32,7 +32,7 @@ const BdsDivider = class {
         this.checkPropValues();
     }
     render() {
-        return index.h("div", { key: 'd34f930e98129a75ca706f4695e40e577d5a12f6', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
+        return index.h("div", { key: 'd89008b1a2cddddb925ee1e6e7c4cb7110ab6bd1', 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: 'c8f41b293eb2cfb1313aaa5c1ecbd4de3bf2e27c', class: flagClass, "aria-label": countryName, role: "img" }, flag && index.h("span", { key: '21f885fe3f7de150dd3766d3c942a6131d420a26', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), index.h("span", { key: '08b819e1754ea9675306060ef1b8bcfa94546b09', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
+        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)));
     }
     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: '3e3465db3dcedd8d2f2cbb6035ff859b45841461', style: this.getHostStyles() }, index.h("slot", { key: 'db935ab4c60fb1d70df5ba03cbb7ee97944de6fa' })));
+        return (index.h(index.Host, { key: 'e16ec21f8fcabbf3091ed3469a120aaff37f4274', style: this.getHostStyles() }, index.h("slot", { key: 'b1fa7e071660a4f4f50d9fd31ee9646069678d10' })));
     }
     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: 'e5610c3140f86d79b275de56c8a815badccdf03d', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, index.h("slot", { key: 'ac13145d26bd923b6f5abe415b062728757d0fd5' })));
+        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' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,8 +2,9 @@
 
 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-DbIXSJF2.js');
+var Keys = require('./Keys-rKl2za5q.js');
 
 /**
  * Resolves the appropriate ARIA role for a menu item.
@@ -31,20 +32,18 @@ function resolveAriaSelected(role, selected) {
  * Resolves the tabIndex attribute for keyboard navigation.
  * @param {MenuItemRole} role - The role of the item.
  * @param {boolean} disabled - Whether the item is currently disabled.
- * @param {boolean} selected - Whether the item is currently selected.
  * @param {boolean} active - Whether the item is currently active.
  * @returns {number} - Returns 0 for focusable menu items, or -1 for disabled/options.
  * @example
  * const index = resolveTabIndex('menuitem', false); // returns 0
  * const indexDisabled = resolveTabIndex('menuitem', true); // returns -1
  */
-function resolveTabIndex(role, disabled, selected, active) {
+function resolveTabIndex(role, disabled, active) {
     if (disabled)
         return -1;
-    if (role === 'option')
-        return selected || active ? 0 : -1;
-    if (role === 'menuitem')
+    if (role === 'option' || role === 'menuitem') {
         return active ? 0 : -1;
+    }
     return -1;
 }
 /**
@@ -52,6 +51,7 @@ function resolveTabIndex(role, disabled, selected, active) {
  * @param {KeyboardEvent} event - The keyboard event object from the listener.
  * @param {HTMLElement[]} items - An array of focusable HTML elements within the menu.
  * @param {number} currentIndex - The index of the currently focused item.
+ * @param {boolean} selected - The current selection state of the item (used for activation logic).
  * @returns {void}
  * @example
  * handleMenuKeyNavigation(event, menuItems, 2);
@@ -61,16 +61,18 @@ function handleMenuKeyNavigation(event, items, currentIndex) {
         return;
     let nextIndex = -1;
     switch (event.key) {
-        case Keys.KEYBOARD.ArrowDown.key:
+        case Keys.KEYBOARD.ArrowDown:
             nextIndex = (currentIndex + 1) % items.length;
             break;
-        case Keys.KEYBOARD.ArrowUp.key:
+        case Keys.KEYBOARD.ArrowUp:
             nextIndex = (currentIndex - 1 + items.length) % items.length;
             break;
         default:
             return;
     }
+    items.forEach(item => item.removeAttribute('active-item'));
     items[nextIndex].focus();
+    items[nextIndex].setAttribute('active-item', '');
 }
 /** Prevents default browser behavior for specific navigation keys.
  * @param {KeyboardEvent} e - The keyboard event to evaluate.
@@ -80,7 +82,7 @@ function handleMenuKeyNavigation(event, items, currentIndex) {
  * preventNavigationKeys(event);
  */
 function preventNavigationKeys(e) {
-    const navigationKeys = [Keys.KEYBOARD.ArrowDown.key, Keys.KEYBOARD.ArrowUp.key, Keys.KEYBOARD.Enter.key, Keys.KEYBOARD.Space.key];
+    const navigationKeys = [Keys.KEYBOARD.ArrowDown, Keys.KEYBOARD.ArrowUp, Keys.KEYBOARD.Enter, Keys.KEYBOARD.Space];
     if (navigationKeys.includes(e.key)) {
         e.preventDefault();
     }
@@ -97,7 +99,6 @@ function preventNavigationKeys(e) {
  * - Computation of aria-selected and tabIndex attributes for accessibility.
  * - A method to handle keyboard navigation (Arrow keys, Enter, Space) within the menu context.
  *
- *
  * @typeParam B - The base constructor type.
  * @param {B} Base - The base component class to be extended.
  * @returns {MenuBehaviorMixin} - A class with injected menu behaviors.
@@ -144,12 +145,19 @@ const MenuItemBehavior = (Base) => {
             this.selected = false;
             this.activeItem = false;
         }
+        /**
+         * Finds the closest parent element with a role of 'menu' or 'listbox'.
+         * @returns {HTMLElement | null} - The parent menu or listbox element, or null if not found.
+         */
+        get parent() {
+            return this.el.closest('[role="menu"], [role="listbox"]');
+        }
         /**
          * Detects the ARIA role of the nearest parent menu or listbox.
          * @returns {MenuRole | null} - 'menu', 'listbox', or null if not found.
          */
         get parentRole() {
-            const parent = this.el.closest('[role="menu"], [role="listbox"]');
+            const parent = this.parent;
             return parent !== null ? parent.getAttribute('role') : null;
         }
         /**
@@ -172,7 +180,7 @@ const MenuItemBehavior = (Base) => {
          * @returns {number} 0 for focusable menu items, -1 otherwise.
          */
         get itemTabIndex() {
-            return resolveTabIndex(this.menuItemRole, this.disabled, this.selected, this.activeItem);
+            return resolveTabIndex(this.menuItemRole, this.disabled, this.activeItem);
         }
         /**
          * Processes keyboard events for arrow navigation and activation.
@@ -184,11 +192,11 @@ const MenuItemBehavior = (Base) => {
          */
         handleKeyDownLogic(e, onActivate) {
             preventNavigationKeys(e);
-            if (e.key === Keys.KEYBOARD.Enter.key || e.key === Keys.KEYBOARD.Space.key) {
+            if (e.key === Keys.KEYBOARD.Enter || e.key === Keys.KEYBOARD.Space) {
                 onActivate();
                 return;
             }
-            const parent = this.el.closest("[role='menu'], [role='listbox']");
+            const parent = this.parent;
             if (parent === null)
                 return;
             const items = Array.from(parent.querySelectorAll(`${this.el.tagName.toLocaleLowerCase()}:not([disabled]):not([variant="label"])`));
@@ -292,8 +300,7 @@ const WithLinks = (Base) => {
         handleLinkKeyDown(event) {
             if (!this.isLink)
                 return;
-            if (this.el.tagName.toLowerCase() !== 'a' &&
-                (event.key === Keys.KEYBOARD.Enter.key || event.key === Keys.KEYBOARD.Space.key)) {
+            if (this.el.tagName.toLowerCase() !== 'a' && (event.key === Keys.KEYBOARD.Enter || event.key === Keys.KEYBOARD.Space)) {
                 event.preventDefault();
                 this.handleLinkClick(new MouseEvent('click', { bubbles: true, cancelable: true }));
             }
@@ -357,13 +364,13 @@ const LIST_MENU_ITEM_VARIANTS = {
     BUTTON: 'button',
 };
 
-const bdsListMenuItemCss = () => `@charset "UTF-8";.bds-list-item,.bds-list-item__content,.bds-list-item__content--left,.bds-list-item__content--right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bds-list-item{font-family:var(--boreal-typography-font-family-primary);-ms-flex-item-align:stretch;align-self:stretch;color:var(--boreal-text-default);width:100%;font-size:var(--boreal-typography-font-size-sm);font-style:normal;font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm)}.bds-list-item__content{-ms-flex-pack:justify;justify-content:space-between;width:100%;gap: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-2xs) 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);-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-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)}.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__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 BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
-        this.bdsSelect = index.createEvent(this, "bdsSelect");
+        this.bdsSelectItem = index.createEvent(this, "bdsSelectItem");
         /**
          * Defines the visual style of the list menu item.
          * - 'button': A standard clickable item.
@@ -378,6 +385,8 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
         this.selected = false;
         /** Value associated with the menu item */
         this.value = '';
+        /** Checkable state item, if is activated should be visible a checkbox */
+        this.checkable = false;
         /** Active state item */
         this.activeItem = false;
         /** Link behavior props */
@@ -392,11 +401,14 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
         this.handleClick = (e) => {
             if (this.disabled || this.isLabelVariant)
                 return;
+            e.stopPropagation();
             if (this.isLink) {
                 this.handleLinkClick(e);
                 return;
             }
-            this.bdsSelect.emit({
+            if (this.checkable && this.parentRole !== menu.MENU_ROLES.LISTBOX)
+                this.selected = !this.selected;
+            this.bdsSelectItem.emit({
                 value: this.value,
                 selected: !this.selected,
             });
@@ -409,7 +421,7 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
             // If the item is a link, we dont activate this animation
             if (!this.isLink || this.linkAttributes.download !== undefined) {
                 this.currentState =
-                    e.key === Keys.KEYBOARD.Enter.key || e.key === Keys.KEYBOARD.Space.key ? states.COMPONENT_STATES.ACTIVE : this.currentState;
+                    e.key === Keys.KEYBOARD.Enter || e.key === Keys.KEYBOARD.Space ? states.COMPONENT_STATES.ACTIVE : this.currentState;
             }
         };
         /** Event to handle keyup navigation and reset active state */
@@ -426,6 +438,14 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
     componentWillLoad() {
         this.checkPropsVariant();
     }
+    /** Improve aria resolve for checkable items */
+    get menuItemRoleExtended() {
+        if (!this.checkable)
+            return this.menuItemRole;
+        if (this.parentRole === 'listbox')
+            return 'checkbox';
+        return 'menuitemcheckbox';
+    }
     /** Checks if the variant is a label */
     get isLabelVariant() {
         return this.variant === LIST_MENU_ITEM_VARIANTS.LABEL;
@@ -444,9 +464,14 @@ const BdsListMenuItem = class extends index.Mixin(MenuItemBehavior, WithLinks) {
     renderTypeLabel() {
         return (index.h("bds-typography", { variant: "label", element: "label", align: "start", role: "presentation" }, index.h("slot", { name: "left-content" }), " ", index.h("slot", null)));
     }
+    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 the render for the button variant of the list menu item */
     renderTypeButton() {
-        return (index.h("div", { class: "bds-list-item__content" }, index.h("div", { class: "bds-list-item__content--left" }, index.h("slot", { name: "left-content" }), index.h("slot", null)), index.h("div", { class: "bds-list-item__content--right" }, index.h("slot", { name: "right-content" }))));
+        return (index.h("div", { class: "bds-list-item__content" }, index.h("div", { class: "bds-list-item__content-left" }, this.renderCheckbox(), index.h("span", { class: "bds-list-item__content-left__icon" }, index.h("slot", { name: "left-content" })), index.h("span", { class: "bds-list-item__content-left__text" }, index.h("slot", null))), index.h("div", { class: "bds-list-item__content-right" }, index.h("slot", { name: "right-content" }))));
     }
     /** Main render */
     render() {
@@ -454,7 +479,7 @@ 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: 'ccf9e4a413fd0f13e38f040a0da92493c84d5ae2', class: this.classMap, role: this.isLabelVariant ? 'presentation' : this.menuItemRole, "aria-selected": this.ariaSelected, tabIndex: this.isLabelVariant ? -1 : this.itemTabIndex, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, ...linkAttributes }, renderItem));
+        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));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,28 +1,45 @@
 '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 bdsListMenuCss = () => `@charset "UTF-8";:host{display:block}.bds-list-menu{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:350px}`;
+const LIST_MENU_SELECTION_MODE = {
+    SINGLE: 'single',
+    MULTIPLE: 'multiple',
+};
+
+const bdsListMenuCss = () => `@charset "UTF-8";:host{display:block}.bds-list-menu{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:var(--bds-list-menu-max-width, 350px);background-color:var(--boreal-ui-inverse);font-family:var(--boreal-typography-font-family-primary)}.bds-list-menu__content{max-height:var(--bds-list-menu-max-height, 240px);overflow-y:auto;padding:var(--boreal-spacing-2xs)}.bds-list-menu__select-controls{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;border-bottom:var(--boreal-spacing-4xs) solid var(--boreal-ui-default-lighter);margin-bottom:var(--boreal-spacing-3xs)}.bds-list-menu__header:not(:empty),.bds-list-menu__footer:not(:empty){padding:var(--boreal-spacing-xs) 0}.bds-list-menu__header:not(:empty){border-bottom:var(--boreal-spacing-4xs) solid var(--boreal-ui-default-lighter)}.bds-list-menu__footer:not(:empty){border-top:var(--boreal-spacing-4xs) solid var(--boreal-ui-default-lighter)}`;
 
 const BdsListMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.bdsChange = index.createEvent(this, "bdsChange");
-        this.bdsClicked = index.createEvent(this, "bdsClicked");
-        /** If true, allows multiple items to be selected. Default is false (single selection). */
-        this.multiple = false;
+        this.bdsSelect = index.createEvent(this, "bdsSelect");
+        // Object to store inherited aria attributes
+        this.inheritedAttributes = {};
+        /** 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';
+        this.menuRole = menu.MENU_ROLES.MENU;
+        /** Determines if the menu items have selectall/deselectall controls */
+        this.selectControls = false;
         /** 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(LIST_MENU_SELECTION_MODE), LIST_MENU_SELECTION_MODE.SINGLE, this.el, 'selectionMode');
+    }
     /**
      * Retrieves the currently selected value(s) programmatically.
      * @method getSelectedValues
      * @returns {Promise<string | string[]>} The selected value(s) based on the 'multiple' prop.
      */
     async getSelectedValues() {
-        return this.multiple ? this.selectedValues : this.selectedValues[0];
+        return this.isMultiple ? this.selectedValues : this.selectedValues[0];
     }
     /**
      * Sets the selected values programmatically.
@@ -31,7 +48,7 @@ const BdsListMenu = class {
      * @param {string | string[]} values - The value or values to be marked as selected.
      */
     async setSelectedValues(values) {
-        if (this.multiple) {
+        if (this.isMultiple) {
             this.selectedValues = Array.isArray(values) ? values : [values];
         }
         else {
@@ -42,24 +59,35 @@ const BdsListMenu = class {
     /** Handles the click event on a menu item, updating the selection state accordingly. */
     handleItemClick(event) {
         const { value, selected } = event.detail;
-        if (this.menuRole === 'listbox') {
-            if (this.multiple) {
+        if (this.menuRole === menu.MENU_ROLES.LISTBOX) {
+            if (this.isMultiple) {
                 this.handleMultipleSelection(value, selected);
             }
             else {
                 this.handleSingleSelection(value, selected);
             }
-            this.bdsChange.emit(this.multiple ? this.selectedValues : this.selectedValues[0] || undefined);
-            this.updateChildrenState();
+            this.updateChildrenState(event.target);
+            this.bdsChange.emit(this.isMultiple ? this.selectedValues : this.selectedValues[0] || undefined);
         }
         else {
-            this.bdsClicked.emit(event.target);
+            const itemClicked = event.target;
+            const indexItem = this.childItems.indexOf(itemClicked);
+            this.bdsSelect.emit({
+                value,
+                index: indexItem,
+                checked: itemClicked.checkable ? itemClicked.selected : false,
+                element: itemClicked,
+            });
         }
     }
     /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
     componentWillLoad() {
+        this.checkProps();
         this.initialSelectedValues();
         this.updateActiveState();
+        this.inheritedAttributes = {
+            ...attributes.inheritAriaAttributes(this.el, ['aria-multiselectable']),
+        };
     }
     /** Get all child menu items */
     get childItems() {
@@ -72,6 +100,9 @@ const BdsListMenu = class {
         const firstEnabled = items.find(item => !item.disabled && item.variant !== 'label');
         return firstEnabled;
     }
+    get isMultiple() {
+        return this.selectionMode === LIST_MENU_SELECTION_MODE.MULTIPLE;
+    }
     /** Updates the active state of the menu items based on the current selection. */
     updateActiveState() {
         const firstEnabled = this.firstEnabledItem;
@@ -92,20 +123,33 @@ const BdsListMenu = class {
         this.selectedValues = selected ? [value] : [];
     }
     /** Updates the state of child menu items based on the current selection. */
-    updateChildrenState() {
+    updateChildrenState(item) {
         const items = this.childItems;
         items.forEach((item) => {
             if (item.value !== undefined) {
                 const isSelected = this.selectedValues.includes(item.value);
                 item.selected = isSelected;
-                if (isSelected)
-                    item.setAttribute('active-item', '');
-                else
-                    item.removeAttribute('active-item');
+                item.removeAttribute('active-item');
             }
         });
-        if (this.selectedValues.length === 0)
-            this.updateActiveState();
+        this.setActiveItem(item);
+    }
+    /** activate item based on interaction */
+    setActiveItem(lastItemInteracted) {
+        let itemToActivate;
+        if (lastItemInteracted !== undefined) {
+            itemToActivate = lastItemInteracted;
+        }
+        else if (this.selectedValues.length > 0) {
+            const selectedValue = this.selectedValues[0];
+            itemToActivate = this.childItems.find(item => item.value === selectedValue);
+        }
+        else {
+            itemToActivate = this.firstEnabledItem;
+        }
+        if (itemToActivate !== undefined) {
+            itemToActivate.setAttribute('active-item', '');
+        }
     }
     /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
     initialSelectedValues() {
@@ -115,15 +159,40 @@ const BdsListMenu = class {
             const values = initialSelected.map(item => {
                 return item.getAttribute('value') || '';
             });
-            this.selectedValues = this.multiple ? values : [values[0]];
+            this.selectedValues = this.isMultiple ? values : [values[0]];
             this.updateChildrenState();
         }
     }
+    /** Handles the toggle of select/deselect all controls, updating the selection state accordingly. */
+    handleToggleSelect(selectAll) {
+        const allValues = this.childItems
+            .filter(item => !item.disabled && item.variant !== 'label' && item.value !== undefined)
+            .map(item => item.value);
+        this.selectedValues = selectAll ? allValues : [];
+        this.updateChildrenState();
+        this.bdsChange.emit(this.selectedValues);
+    }
+    /** Renders the select/deselect all controls if applicable based on the props. */
+    renderSelectControls() {
+        if (this.selectControls && this.menuRole === menu.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 component with a slot for menu items. */
     render() {
-        return (index.h(index.Host, { key: '30f57283c4f8ee82833217c0281f0df6e6126d26', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.multiple ? 'true' : 'false' }, index.h("slot", { key: '3d39f6022a967a57b6d95d889ad5aadd5ba7aa96' })));
+        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" }))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "selectionMode": [{
+                "checkProps": 0
+            }],
+        "menuRole": [{
+                "checkProps": 0
+            }]
+    }; }
 };
 BdsListMenu.style = bdsListMenuCss();
 

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

@@ -1,10 +1,11 @@
 'use strict';
 
 var index = require('./index-CwYIVC9N.js');
-var getOffset = require('./getOffset-m4hBgyVP.js');
-var _enum = require('./enum-DLblRCkQ.js');
+var getOffset = require('./getOffset-k4ezB-eT.js');
+var _enum = require('./enum-DeTWfR0D.js');
+require('./Logger-DnziItRH.js');
 require('./floating.mixin-Bje4320w.js');
-require('./Keys-DbIXSJF2.js');
+require('./Keys-rKl2za5q.js');
 
 const OFFSET = 11;
 
@@ -271,7 +272,7 @@ const BdsPopover = class extends index.Mixin(getOffset.anchoredMixin) {
         this.trigger.removeEventListener('click', (evt) => this.handleShow(evt));
     }
     render() {
-        return (index.h(index.Host, { key: 'd9bdf356fc8aa99312073be3589cf50f4bd1afbe', 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: 'a9172eb13620a218c1a37bd52eddaa6f9b53739c', class: "popover-header" }, index.h("div", { key: '3b8774f0f8f461ce164220d53c48139e95a1b8f5', class: "popover-header__content" }, index.h("span", { key: '86cc8cedf2c7970834a61c8374fc23d67417c2dd', class: "popover-header__icon" }, index.h("slot", { key: '1e356d9b87672942ef4d19f33f5de9c707d02cb2', name: "header-icon" })), index.h("span", { key: 'c014a7a269a4cc79841d4350e7e8efc4fc39cb06', class: "popover-header__title" }, index.h("slot", { key: '39ce847785bbad57635834c7957146b89245438e', name: "header-title" }))), this.closable && (index.h("bds-button", { key: 'a54358b74d8d29f5afeaa9f6fe1f07343f6784c6', class: "popover-header__close", size: _enum.BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, index.h("em", { key: 'efdca5b8e1f0560a15e063e832f1aeb9c754a820', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (index.h("div", { key: '16870352c06b06de9b67e542e9e1753c7e3bff66', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), index.h("div", { key: 'b5dddeeedcc5ba9d107af57a25d9ca350a0621a8', class: "popover-content", tabIndex: -1, part: "popover-content" }, index.h("slot", { key: '4bfc174186ab356747175464922c0d6b09d6b608' })), this.footer && (index.h("div", { key: '8476df1ee6751d6cba4cc52efad6675ea74bdc18', class: "popover-footer", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: 'de60d356d96ae56c8e0a1349f6bafa87700998c6', name: "footer-helper" }), index.h("slot", { key: '21e59115a077f31b7b05aeea29cd23394642dd4d', name: "footer-button" })))));
+        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" })))));
     }
     get el() { return index.getElement(this); }
 };