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

package/dist/collection/components/actions/bds-list-menu/bds-list-menu/bds-list-menu.js

@@ -1,4 +1,7 @@
 import { Host, h } from "@stencil/core";
+import { LIST_MENU_SELECTION_MODE } from "./types/enum";
+import { MENU_ROLES } from "../../../../types/index";
+import { inheritAriaAttributes, validatePropValue } from "../../../../utils/index";
 /**
  * Container component that manages a list of menu items.
  * It handles selection logic (single/multiple) and maintains the data state.
@@ -6,36 +9,36 @@ import { Host, h } from "@stencil/core";
  * @summary A list menu component that can contain multiple menu items and manage their selection state.
  * @slot - Default slot for bds-list-menu-item elements.
  *
- * @attr {boolean} multiple - If true, allows multiple items to be selected. Default is false (single selection).
- * @attr {string} menuRole - Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'.
- *
- * @property {boolean} multiple - If true, allows multiple items to be selected. Default is false (single selection).
- * @property {string} menuRole - Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'.
- *
- * @event bdsChange - Emitted when the selection changes, providing the current selected value(s).
+ * @fires bdsChange - Emitted when the selection changes, providing the current selected value(s).
+ * @fires bdsSelect - Emmited when item is selected in menu-role="menu" is clicked
  * @method getSelectedValues - Returns the currently selected value(s). If multiple is true, returns an array of strings; otherwise, returns a single string or undefined.
  * @method setSelectedValues - Sets the selected value(s). Accepts a string for single selection or an array of strings for multiple selection.
- *
- * @default false - By default, the menu does not allow multiple selections (single selection mode).
- * @default 'menu' - The default ARIA role for the menu is 'menu'.
- *
  */
 export class BdsListMenu {
     constructor() {
-        /** If true, allows multiple items to be selected. Default is false (single selection). */
-        this.multiple = false;
+        // 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_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() {
+        validatePropValue(Object.values(MENU_ROLES), MENU_ROLES.MENU, this.el, 'menuRole');
+        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.
@@ -44,7 +47,7 @@ export class BdsListMenu {
      * @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 {
@@ -55,24 +58,35 @@ export class BdsListMenu {
     /** 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_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 = {
+            ...inheritAriaAttributes(this.el, ['aria-multiselectable']),
+        };
     }
     /** Get all child menu items */
     get childItems() {
@@ -85,6 +99,9 @@ export class BdsListMenu {
         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;
@@ -105,20 +122,33 @@ export class BdsListMenu {
         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() {
@@ -128,13 +158,30 @@ export class BdsListMenu {
             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_ROLES.LISTBOX && this.isMultiple) {
+            return (h("div", { class: "bds-list-menu__select-controls" }, h("bds-button", { name: "Select all", variant: "plain", onBdsClick: () => this.handleToggleSelect(true) }, "Select All"), 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 (h(Host, { key: '30f57283c4f8ee82833217c0281f0df6e6126d26', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.multiple ? 'true' : 'false' }, h("slot", { key: '3d39f6022a967a57b6d95d889ad5aadd5ba7aa96' })));
+        const inheritedAriaAttr = this.inheritedAttributes;
+        return (h(Host, { key: '88d9e41f1116555df02ca6e883b9e50f024c69b9', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.menuRole === MENU_ROLES.LISTBOX && this.isMultiple ? 'true' : 'false', ...inheritedAriaAttr }, h("slot", { key: '2f1730a1b5c456477d2b86f35b596d11e1b79f5c', name: "banner-content" }), h("div", { key: '58b6944a60ce62a8832e41a853d2621b6fc6deae', class: "bds-list-menu__header" }, h("slot", { key: '1a292f12ca27104fd0496477a051a1ad3bcec83e', name: "header-content" })), this.renderSelectControls(), h("div", { key: '9a21f481ca5a3e6b484c0bcc5501097dfceb61c3', class: "bds-list-menu__content" }, h("slot", { key: '43f684cb30333a5d571b4d05a4c8627703297473' })), h("div", { key: 'dbc3a62e055792283fef80ff4514167d079c355d', class: "bds-list-menu__footer" }, h("slot", { key: '8d504757a49bedf5a5ec150ed16ef5c9e7723ee1', name: "footer-content" }))));
     }
     static get is() { return "bds-list-menu"; }
     static get originalStyleUrls() {
@@ -149,33 +196,47 @@ export class BdsListMenu {
     }
     static get properties() {
         return {
-            "multiple": {
-                "type": "boolean",
+            "selectionMode": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IListMenu['selectionMode']",
+                    "resolved": "\"multiple\" | \"single\"",
+                    "references": {
+                        "IListMenu": {
+                            "location": "import",
+                            "path": "./types/IListMenu",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.ts::IListMenu",
+                            "referenceLocation": "IListMenu"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, allows multiple items to be selected. Default is false (single selection)."
+                    "text": "The selection mode of the menu. Can be 'SINGLE' or 'MULTIPLE'. Default is 'SINGLE'."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "multiple",
-                "defaultValue": "false"
+                "attribute": "selection-mode",
+                "defaultValue": "LIST_MENU_SELECTION_MODE.SINGLE"
             },
             "menuRole": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'menu' | 'listbox'",
+                    "original": "IListMenu['menuRole']",
                     "resolved": "\"listbox\" | \"menu\"",
-                    "references": {}
+                    "references": {
+                        "IListMenu": {
+                            "location": "import",
+                            "path": "./types/IListMenu",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.ts::IListMenu",
+                            "referenceLocation": "IListMenu"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -187,7 +248,34 @@ export class BdsListMenu {
                 "setter": false,
                 "reflect": false,
                 "attribute": "menu-role",
-                "defaultValue": "'menu'"
+                "defaultValue": "MENU_ROLES.MENU"
+            },
+            "selectControls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['selectControls']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IListMenu": {
+                            "location": "import",
+                            "path": "./types/IListMenu",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.ts::IListMenu",
+                            "referenceLocation": "IListMenu"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the menu items have selectall/deselectall controls"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-controls",
+                "defaultValue": "false"
             }
         };
     }
@@ -213,8 +301,8 @@ export class BdsListMenu {
                     "references": {}
                 }
             }, {
-                "method": "bdsClicked",
-                "name": "bdsClicked",
+                "method": "bdsSelect",
+                "name": "bdsSelect",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -223,12 +311,14 @@ export class BdsListMenu {
                     "text": "Emitted when the selection changes, providing the current selected value(s)."
                 },
                 "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
+                    "original": "ListMenuChangeDetail",
+                    "resolved": "ListMenuChangeDetail",
                     "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
+                        "ListMenuChangeDetail": {
+                            "location": "import",
+                            "path": "./types/IListMenu",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.ts::ListMenuChangeDetail",
+                            "referenceLocation": "ListMenuChangeDetail"
                         }
                     }
                 }
@@ -289,9 +379,18 @@ export class BdsListMenu {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectionMode",
+                "methodName": "checkProps"
+            }, {
+                "propName": "menuRole",
+                "methodName": "checkProps"
+            }];
+    }
     static get listeners() {
         return [{
-                "name": "bdsSelect",
+                "name": "bdsSelectItem",
                 "method": "handleItemClick",
                 "target": undefined,
                 "capture": false,

package/dist/collection/components/actions/bds-list-menu/bds-list-menu/types/enum.js

@@ -0,0 +1,4 @@
+export const LIST_MENU_SELECTION_MODE = {
+    SINGLE: 'single',
+    MULTIPLE: 'multiple',
+};

package/dist/collection/components/actions/bds-list-menu/bds-list-menu/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/actions/bds-list-menu/bds-list-menu-item/bds-list-menu-item.css

@@ -10,7 +10,7 @@
 /**
  * TODO: Refactor to use styleguidelines this work as first draft
  **/
-.bds-list-item, .bds-list-item__content, .bds-list-item__content--left, .bds-list-item__content--right {
+.bds-list-item, .bds-list-item__content {
   display: flex;
   align-items: center;
 }
@@ -20,31 +20,46 @@
 * These are used across multiple components to ensure consistency in interaction feedback.
 */
 .bds-list-item {
-  font-family: var(--boreal-typography-font-family-primary);
-  align-self: stretch;
-  color: var(--boreal-text-default);
   width: 100%;
-  font-size: var(--boreal-typography-font-size-sm);
+  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);
-  line-height: var(--boreal-typography-line-height-sm);
 }
 .bds-list-item__content {
   justify-content: space-between;
-  width: 100%;
+  flex: 1;
+  vertical-align: middle;
   gap: var(--boreal-spacing-3xs);
 }
+.bds-list-item__content-left, .bds-list-item__content-right {
+  display: flex;
+  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-2xs) var(--boreal-spacing-s);
+  padding: var(--boreal-spacing-1xs) var(--boreal-spacing-s);
   transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
 .bds-list-item--button:not(.bds-list-item--disabled):hover:not([selected]) {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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;
@@ -54,6 +69,7 @@
 .bds-list-item--button:not(.bds-list-item--disabled):active, .bds-list-item--button:not(.bds-list-item--disabled).bds-list-item--state-active {
   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);

package/dist/collection/components/actions/bds-list-menu/bds-list-menu-item/bds-list-menu-item.js

@@ -1,5 +1,5 @@
 import { Host, Mixin, h } from "@stencil/core";
-import { COMPONENT_STATES } from "../../../../types/index";
+import { COMPONENT_STATES, MENU_ROLES } from "../../../../types/index";
 import { validatePropValue } from "../../../../utils/helpers/validateProps";
 import { MenuItemBehavior, WithLinks } from "../../../../mixins/index";
 import { LIST_MENU_ITEM_VARIANTS } from "./types/enum";
@@ -60,6 +60,8 @@ export class BdsListMenuItem extends 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 */
@@ -74,11 +76,14 @@ export class BdsListMenuItem extends 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_ROLES.LISTBOX)
+                this.selected = !this.selected;
+            this.bdsSelectItem.emit({
                 value: this.value,
                 selected: !this.selected,
             });
@@ -91,7 +96,7 @@ export class BdsListMenuItem extends 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 === KEYBOARD.Enter.key || e.key === KEYBOARD.Space.key ? COMPONENT_STATES.ACTIVE : this.currentState;
+                    e.key === KEYBOARD.Enter || e.key === KEYBOARD.Space ? COMPONENT_STATES.ACTIVE : this.currentState;
             }
         };
         /** Event to handle keyup navigation and reset active state */
@@ -109,6 +114,14 @@ export class BdsListMenuItem extends 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;
@@ -127,9 +140,14 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
     renderTypeLabel() {
         return (h("bds-typography", { variant: "label", element: "label", align: "start", role: "presentation" }, h("slot", { name: "left-content" }), " ", h("slot", null)));
     }
+    renderCheckbox() {
+        if (!this.checkable)
+            return null;
+        return (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 (h("div", { class: "bds-list-item__content" }, h("div", { class: "bds-list-item__content--left" }, h("slot", { name: "left-content" }), h("slot", null)), h("div", { class: "bds-list-item__content--right" }, h("slot", { name: "right-content" }))));
+        return (h("div", { class: "bds-list-item__content" }, h("div", { class: "bds-list-item__content-left" }, this.renderCheckbox(), h("span", { class: "bds-list-item__content-left__icon" }, h("slot", { name: "left-content" })), h("span", { class: "bds-list-item__content-left__text" }, h("slot", null))), h("div", { class: "bds-list-item__content-right" }, h("slot", { name: "right-content" }))));
     }
     /** Main render */
     render() {
@@ -137,7 +155,7 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
         if (this.isLabelVariant)
             renderItem = this.renderTypeLabel();
         const linkAttributes = this.isLink ? { ...this.linkAttributes, tabindex: this.activeItem ? 0 : -1 } : {};
-        return (h(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 (h(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));
     }
     static get is() { return "bds-list-menu-item"; }
     static get originalStyleUrls() {
@@ -235,7 +253,7 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
             },
             "selected": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "IListMenuItem['selected']",
                     "resolved": "boolean",
@@ -287,6 +305,33 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
                 "attribute": "value",
                 "defaultValue": "''"
             },
+            "checkable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['checkable']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkable state item, if is activated should be visible a checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checkable",
+                "defaultValue": "false"
+            },
             "activeItem": {
                 "type": "boolean",
                 "mutable": false,
@@ -404,8 +449,8 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
     }
     static get events() {
         return [{
-                "method": "bdsSelect",
-                "name": "bdsSelect",
+                "method": "bdsSelectItem",
+                "name": "bdsSelectItem",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/actions/bds-toggle/bds-toggle.js

@@ -168,7 +168,7 @@ export class BdsToggle extends Mixin(formAssociatedMixin) {
             : this.validationError && this.validationMessage !== ''
                 ? this.validationMessage
                 : this.helperText;
-        return (h(Host, { key: '8aa5ec26708ce8eb834020353e2e01e882cefad6', ...this.inheritedAttributes, onClick: this.handleClick, onKeyDown: this.handleKeyDown, class: blockClass }, h("div", { key: 'a62ae102ba2167be5e03758c5bfc6197e8f3b73c', part: "container", class: this.containerClasses }, this.canShowLabel && (h("bds-typography", { key: 'c6129d113b083f9db5bad181f5a8cf1ae161b593', variant: "label", class: `${blockClass}__label`, htmlFor: this._id, required: this.required, tooltipText: this.info }, this.label)), h("label", { key: '570a0637d106b24823d39945e1b7a68a4cec4f36', class: `${blockClass}__switch`, htmlFor: this._id, onClick: e => e.preventDefault() }, h("input", { key: '197a94215e42e7a8a9d5a5652ad1163b501799ab', class: `${blockClass}__input`, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-label": this.label || null, id: this._id, type: "checkbox", name: this.name, required: this.required, disabled: this.isDisabled, checked: this.isChecked, onInvalid: this.handleInvalid }), h("span", { key: '09ac81f91f9dc92c4e4cac593db4be4697243ce0', class: `${blockClass}__slider ${blockClass}__slider--round` }))), helperContent !== '' && (h("bds-typography", { key: '4a35755ec9e280dfedb839826683f1272c76223d', class: `${blockClass}__helper-text`, variant: "helper", state: typographyState, onClick: e => e.stopPropagation() }, helperContent))));
+        return (h(Host, { key: 'b5d27825358eaadb5cbca86e48488350e6099d8f', ...this.inheritedAttributes, onClick: this.handleClick, onKeyDown: this.handleKeyDown, class: blockClass }, h("div", { key: '9b7bb4c4551beb61ed72c9ee4a4d7ee14e746c4e', part: "container", class: this.containerClasses }, this.canShowLabel && (h("bds-typography", { key: 'a95e1b66d8452b983002348b9456aa0c3674b202', variant: "label", class: `${blockClass}__label`, htmlFor: this._id, required: this.required, tooltipText: this.info }, this.label)), h("label", { key: '954125135521cd6e65c2e6c3dfa41216e6f52dd3', class: `${blockClass}__switch`, htmlFor: this._id, onClick: e => e.preventDefault() }, h("input", { key: 'c3e0ee266aba0bd6e8ca7fb2d3efaeb412161806', class: `${blockClass}__input`, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-label": this.label || null, id: this._id, type: "checkbox", name: this.name, required: this.required, disabled: this.isDisabled, checked: this.isChecked, onInvalid: this.handleInvalid }), h("span", { key: '68912685234edb7c6ec972231c7f951531862f7c', class: `${blockClass}__slider ${blockClass}__slider--round` }))), helperContent !== '' && (h("bds-typography", { key: '3e5645d234edc1f3efe7805260def2c74bc7cd44', class: `${blockClass}__helper-text`, variant: "helper", state: typographyState, onClick: e => e.stopPropagation() }, helperContent))));
     }
     static get is() { return "bds-toggle"; }
     static get formAssociated() { return true; }

package/dist/collection/components/feedback/bds-badge/bds-badge.js

@@ -39,7 +39,7 @@ export class BdsBadge {
         };
     }
     render() {
-        return (h(Host, { key: 'fd04d8986fd170056769871a07f838c3cf200108', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '0186c80b8fbce04a7c96949ca39ecf0319abf352', name: "icon" }), h("slot", { key: 'd79b91a4c5b93280c977dce033e0e05fad2c7524' })));
+        return (h(Host, { key: 'f686ff59037a77660bc82262b9374193dface206', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '5089ac4144f7fdd1023ee3561010859b6b96ef3b', name: "icon" }), h("slot", { key: '44addf6e20aa27f1ed3df4ab728b5a0a37cc2f20' })));
     }
     static get is() { return "bds-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/feedback/bds-banner/bds-banner.js

@@ -123,7 +123,7 @@ export class BdsBanner {
         const closeIcon = this.renderCloseIcon();
         const classes = this.getStyles();
         const iconName = this.getIconName();
-        return (h(Host, { key: '1a07d4c50cb16abf16a6202fc0a6453028030c94', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '2fa91a3e46f6660cb80302bc56619c107f3cf1a9' }, h("div", { key: '406c8ce24b6c8d9467f83baea3c521ef823b7ff6', class: "bds-banner__vertical-line" }), h("div", { key: '1a2c84c6480397e179a212056e0d9896a4ffcd5c', class: "bds-banner__container" }, h("div", { key: 'c3a259dae39176720f74fb4961b01166956f8e5c', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '6d24dc0d611b85a0c9f524f29948552607fc124f', "aria-hidden": "true", class: iconName })), h("div", { key: '6c4af02b7d783417cd016c81214ae4ae9a9040ff', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '74d4b78b0e6a058c48d2681b0d49742266f6653d', class: "bds-banner__title" }, h("slot", { key: '65baf563140619dd68ba6da5b1a2e61acfae61e6', name: "title" })), h("div", { key: 'a24a1af35cf217bcdadff0a9c2d3bbef8d21e232', class: "bds-banner__body" }, h("slot", { key: '5ea6dd31fbcf8eb9fd06426a2e98e36c537857b1' })), h("div", { key: '41cc79e73c212e381f8bfca997d62710f94e6ba4', class: "bds-banner__actions" }, h("slot", { key: '0266cc63e42d35a7fcbb836dfe7d11c47f192321', name: "actions" }))), this.closable && closeIcon)))));
+        return (h(Host, { key: 'e5ece2606d360add80831cb5cff99c07bb6fe9a6', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '1f25dabb048e75db7f9b155ed660ee3c07b878e7' }, h("div", { key: '363d11782e11ab9e34c30981653da02d62753611', class: "bds-banner__vertical-line" }), h("div", { key: '256f0e83e848d7e50b851524364314ac8a15f195', class: "bds-banner__container" }, h("div", { key: '3f16aa2ab24f0621e754276032dea90ba7a2fcae', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '1ee1cd86ac8e6fe63d77ab815f3467623e3701bf', "aria-hidden": "true", class: iconName })), h("div", { key: 'b56334ec515aa5036143a21e17ccbab0284edd52', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '454a4dd729fa18675c9db2a8101732688b15d4d7', class: "bds-banner__title" }, h("slot", { key: '06d51ebe3e862210035d98b2ecde35ba9872309f', name: "title" })), h("div", { key: '773524e70efc9e2412c3ca71913cc1f4da80a493', class: "bds-banner__body" }, h("slot", { key: '483f4358227e080db9ee884e6462743042a17bfe' })), h("div", { key: '6180025c2b07adc050d716269f76783f3f8164d2', class: "bds-banner__actions" }, h("slot", { key: '4e45498d447a003859421f98d884f289fc18e084', name: "actions" }))), this.closable && closeIcon)))));
     }
     static get is() { return "bds-banner"; }
     static get originalStyleUrls() {

package/dist/collection/components/feedback/bds-spinner/bds-spinner.js

@@ -41,7 +41,7 @@ export class BdsSpinner {
         };
     }
     render() {
-        return (h(Host, { key: 'd114eb6445b81a4e7beafd0ff08b8aaf6e1a96e7', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, h("span", { key: 'fa45675b2e258eca9c44a9374a65f26c781343d5', class: "bds-spinner__sr-only" }, this.label)));
+        return (h(Host, { key: '7e7846adadb6224abfcaaf2478768b72ec712659', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, h("span", { key: '1c6aad446ed35a3adcb4e4f28fd4a3e7b9b7cb3a', class: "bds-spinner__sr-only" }, this.label)));
     }
     static get is() { return "bds-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/feedback/bds-status/bds-status.js

@@ -38,7 +38,7 @@ export class BdsStatus {
         };
     }
     render() {
-        return (h(Host, { key: '36cf2dfe777002b02d126d38cb9ed2bce3f828a6', class: this.classMap, role: "status" }, this.indicator === INDICATOR_TYPES.DOT ? h("div", { class: "bds-status__dot", "aria-hidden": "true" }) : '', h("slot", { key: '99ab1fa89dc28f3ffca617508b5c577abf874d7a', name: "icon" }), h("slot", { key: '8ff726d294fc524950ac0255c71f4ba65b3c9b96' })));
+        return (h(Host, { key: '9a952b22de8565fcca464d045f71ea86c92c8632', class: this.classMap, role: "status" }, this.indicator === INDICATOR_TYPES.DOT ? h("div", { class: "bds-status__dot", "aria-hidden": "true" }) : '', h("slot", { key: '47e03b139fcb4da8b15fe115518856c54d02a320', name: "icon" }), h("slot", { key: 'e512e975c2df8fa3e3380f27808eec96be5ad455' })));
     }
     static get is() { return "bds-status"; }
     static get originalStyleUrls() {

package/dist/collection/components/feedback/bds-tag/bds-tag.js

@@ -116,7 +116,7 @@ export class BdsTag {
         const classes = this.getClasses();
         const hasCloseButton = !this.readonly;
         const isSelectable = this.multiselect;
-        return (h(Host, { key: '0864f3764aef3354e5b2c7494a5c9c2cb261582f', class: classes, role: isSelectable ? 'option' : undefined, tabIndex: isSelectable && !this.disabled ? 0 : -1, "aria-disabled": this.disabled ? 'true' : undefined, "aria-selected": isSelectable ? `${this.internalSelected}` : undefined, onKeyDown: !this.disabled ? (e) => this.handleKeyDown(e) : undefined, onClick: !this.disabled ? this.handleSelection : undefined, id: this._id }, this.renderTag(), hasCloseButton && this.renderCloseIcon()));
+        return (h(Host, { key: 'bd62a05fccbfa4aed3b7f72b9edf800c3ab05362', class: classes, role: isSelectable ? 'option' : undefined, tabIndex: isSelectable && !this.disabled ? 0 : -1, "aria-disabled": this.disabled ? 'true' : undefined, "aria-selected": isSelectable ? `${this.internalSelected}` : undefined, onKeyDown: !this.disabled ? (e) => this.handleKeyDown(e) : undefined, onClick: !this.disabled ? this.handleSelection : undefined, id: this._id }, this.renderTag(), hasCloseButton && this.renderCloseIcon()));
     }
     static get is() { return "bds-tag"; }
     static get originalStyleUrls() {