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

package/dist/collection/components/actions/bds-button/bds-button.css

@@ -147,15 +147,15 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--default:hover {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-default.bds-button--default:focus {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-default.bds-button--default:active, .bds-button.bds-button--var-default.bds-button--default.bds-button--state-active {
   background-color: var(--boreal-ui-default-lighter);
-  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: var(--boreal-depth-box-shadow-active);
 }
 .bds-button.bds-button--var-default.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading {
   cursor: not-allowed;
@@ -175,15 +175,15 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--primary:hover {
   background-color: var(--boreal-ui-primary-dark);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-default.bds-button--primary:focus {
   background-color: var(--boreal-ui-primary-base);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-default.bds-button--primary:active, .bds-button.bds-button--var-default.bds-button--primary.bds-button--state-active {
   background-color: var(--boreal-ui-primary-dark);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-default.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading {
   cursor: not-allowed;
@@ -203,15 +203,15 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--success:hover {
   background-color: var(--boreal-ui-success-dark);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-default.bds-button--success:focus {
   background-color: var(--boreal-ui-success-base);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-default.bds-button--success:active, .bds-button.bds-button--var-default.bds-button--success.bds-button--state-active {
   background-color: var(--boreal-ui-success-dark);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-default.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading {
   cursor: not-allowed;
@@ -231,15 +231,15 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--error:hover {
   background-color: var(--boreal-ui-danger-dark);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-default.bds-button--error:focus {
   background-color: var(--boreal-ui-danger-base);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-default.bds-button--error:active, .bds-button.bds-button--var-default.bds-button--error.bds-button--state-active {
   background-color: var(--boreal-ui-danger-dark);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-default.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading {
   cursor: not-allowed;
@@ -262,15 +262,15 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--default:hover {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-outline.bds-button--default:focus {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--default:active, .bds-button.bds-button--var-outline.bds-button--default.bds-button--state-active {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading {
   cursor: not-allowed;
@@ -290,15 +290,15 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--primary:hover {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-outline.bds-button--primary:focus {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--primary:active, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--state-active {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading {
   cursor: not-allowed;
@@ -318,15 +318,15 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--success:hover {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-outline.bds-button--success:focus {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--success:active, .bds-button.bds-button--var-outline.bds-button--success.bds-button--state-active {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading {
   cursor: not-allowed;
@@ -346,15 +346,15 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--error:hover {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-outline.bds-button--error:focus {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--error:active, .bds-button.bds-button--var-outline.bds-button--error.bds-button--state-active {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading {
   cursor: not-allowed;
@@ -377,15 +377,15 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--default:hover {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-plain.bds-button--default:focus {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--default:active, .bds-button.bds-button--var-plain.bds-button--default.bds-button--state-active {
   background-color: var(--boreal-ui-default-lighter);
-  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: var(--boreal-depth-box-shadow-active);
 }
 .bds-button.bds-button--var-plain.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading {
   cursor: not-allowed;
@@ -405,15 +405,15 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--primary:hover {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-plain.bds-button--primary:focus {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--primary:active, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--state-active {
   background-color: var(--boreal-ui-primary-lighter);
-  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: var(--boreal-depth-box-shadow-active);
 }
 .bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading {
   cursor: not-allowed;
@@ -433,15 +433,15 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--success:hover {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-plain.bds-button--success:focus {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--success:active, .bds-button.bds-button--var-plain.bds-button--success.bds-button--state-active {
   background-color: var(--boreal-ui-success-lighter);
-  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: var(--boreal-depth-box-shadow-active);
 }
 .bds-button.bds-button--var-plain.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading {
   cursor: not-allowed;
@@ -461,15 +461,15 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--error:hover {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-button.bds-button--var-plain.bds-button--error:focus {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--error:active, .bds-button.bds-button--var-plain.bds-button--error.bds-button--state-active {
   background-color: var(--boreal-ui-danger-lighter);
-  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: var(--boreal-depth-box-shadow-active);
 }
 .bds-button.bds-button--var-plain.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading {
   cursor: not-allowed;

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

@@ -3,6 +3,7 @@ import { COMPONENT_STATES } from "../../../types/index";
 import { BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS } from "./types/enum";
 import { CORE_COLORS } from "../../../types/coreColors";
 import { validatePropValue } from "../../../utils/helpers/validateProps";
+import { KEYBOARD, KeyboardController, KEY_TRIGGERS } from "../../../utils/index";
 /**
  *  Button component for user interactions, form submissions, supporting various styles, sizes, and states.
  *
@@ -44,6 +45,7 @@ import { validatePropValue } from "../../../utils/helpers/validateProps";
  */
 export class BdsButton {
     constructor() {
+        this._keyboard = new KeyboardController();
         /** State to manage states */
         this.currentState = COMPONENT_STATES.DEFAULT;
         /* Props to manage the button attributes */
@@ -67,10 +69,14 @@ export class BdsButton {
         this.disclosure = false;
         /** Event for listen keydown from button, make navigation easier */
         this.handleKeyDown = (event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                this.currentState = COMPONENT_STATES.ACTIVE;
-                event.preventDefault();
-                this.handleClick(event);
+            this.currentState = COMPONENT_STATES.ACTIVE;
+            if (this.disabled || this.loading)
+                return;
+            if (this.type === BUTTON_TYPES.SUBMIT || this.type === BUTTON_TYPES.RESET) {
+                this.processFormClick();
+            }
+            else {
+                this.bdsClick.emit(event);
             }
         };
         /** reset status on keyup */
@@ -83,6 +89,8 @@ export class BdsButton {
             event.stopPropagation();
             if (this.disabled || this.loading)
                 return;
+            if (event.detail === 0)
+                return;
             if (this.type === BUTTON_TYPES.SUBMIT || this.type === BUTTON_TYPES.RESET) {
                 this.processFormClick();
             }
@@ -105,6 +113,19 @@ export class BdsButton {
     /** After component rendered */
     componentDidLoad() {
         this.setupFormAssociation();
+        this.setupKeyboard();
+    }
+    /** Bind keyboard events through KeyboardController. */
+    setupKeyboard() {
+        this._keyboard
+            .attach(this.el)
+            .set([KEYBOARD.Enter, KEYBOARD.Space], (event) => {
+            if (event.type === KEY_TRIGGERS.KEYDOWN)
+                this.handleKeyDown(event);
+            else
+                this.handleKeyUp();
+        }, { triggers: [KEY_TRIGGERS.KEYDOWN, KEY_TRIGGERS.KEYUP], preventDefault: false })
+            .onFocusOut(this.handleKeyUp);
     }
     /** Select closest form or internal form from ElementInternals */
     setupFormAssociation() {
@@ -135,6 +156,9 @@ export class BdsButton {
         }
         return;
     }
+    disconnectedCallback() {
+        this._keyboard.detach();
+    }
     /* Method to get the class map for the button based on the props */
     get getClassMap() {
         return {
@@ -149,7 +173,7 @@ export class BdsButton {
     }
     /* render button depends on variant */
     render() {
-        return (h("button", { key: 'e1b3c4e0ae8662427a037f861cd57050051cc80a', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, h("div", { key: '24e37c5a359e19163411ab5ed7028eaa84caa2e5', class: "bds-button__content" }, h("span", { key: '90f4956274656c46ca43f7a903c9947d89367aba', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: 'd4a5344f9e3ebd5279b5e25a8f1982d523e6d2b8', name: "icon" })), h("slot", { key: '14b26b5e5f3bbabb1b88596b721f7ea864df1b15' }), h("span", { key: '34cb88da064a6c74596a4bb477fb0a9d6880b391', class: "bds-button__content-badge" }, h("slot", { key: '00775c4a742d49ca7f23d7dbe061f4333ed43907', name: "badge" })), this.disclosure && (h("span", { key: '0b959969969cf4c5a651b6c1488d35b1d0ec9b7b', class: "bds-button__content-icon" }, h("i", { key: '316154f31f1f57b67e126d407b3596c60f532b1a', class: "bds-icon-chevron-down" }))))));
+        return (h("button", { key: 'c79564584911edae6ec1cafeb98cc3df848bf70c', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyUp: this.handleKeyUp }, h("div", { key: '75b3061a16259a504177bf8824cfa9f236a72411', class: "bds-button__content" }, h("span", { key: '53d81ba990237be2c48f98d4d9e995d5a7330cdc', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: '6cebb89369396fc34480821720fa6da635409563', name: "icon" })), h("slot", { key: '237237e29f08ee510cd95bafbd481f3856f1b08f' }), h("span", { key: '67c515f4faaac368d0bcdf20ef64a6717cfda3be', class: "bds-button__content-badge" }, h("slot", { key: 'd0e6fc25d95ba960e4b3b3940321a4221769e8ad', name: "badge" })), this.disclosure && (h("span", { key: 'ffae85e8d38481098323ee36549596bfb61e5b4a', class: "bds-button__content-icon" }, h("i", { key: '633b27a4306ba7c159f15eac9e5b9e712e19cbe0', class: "bds-icon-chevron-down" }))))));
     }
     static get is() { return "bds-button"; }
     static get formAssociated() { return true; }

package/dist/collection/components/actions/bds-button-group/bds-button-group.css

@@ -21,7 +21,7 @@
   outline: none;
 }
 .bds-button-group:focus {
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-button-group bds-button {
   position: relative;

package/dist/collection/components/actions/bds-button-group/bds-button-group.js

@@ -3,7 +3,7 @@ import { ORIENTATIONS } from "../../../types/index";
 import { validatePropValue } from "../../../utils/helpers/validateProps";
 import { CORE_COLORS } from "../../../types/coreColors";
 import { BUTTON_VARIANTS, BUTTON_SIZES } from "../bds-button/types/enum";
-import { inheritAriaAttributes } from "../../../utils/index";
+import { inheritAriaAttributes, KeyboardController } from "../../../utils/index";
 import { Logger } from "../../../services/logger/index";
 /**
  * Button group component for grouping related buttons together in a unified visual unit.
@@ -14,6 +14,7 @@ export class BdsButtonGroup {
     constructor() {
         this.inheritedAttributes = {};
         this.logger = new Logger();
+        this._keyboard = new KeyboardController();
         /** Controls the size applied to all child `<bds-button>` elements. Accepted values: `'sm'`, `'md'`, `'lg'`. Default is `'md'`. */
         this.size = BUTTON_SIZES.MEDIUM;
         /** Controls the layout direction of the grouped buttons. Accepted values: `'horizontal'`, `'vertical'`. Default is `'horizontal'`. */
@@ -56,6 +57,24 @@ export class BdsButtonGroup {
     componentDidLoad() {
         this.validateSlotContent();
         this.propagatePropsToButtons();
+        this._setupKeyboard();
+    }
+    disconnectedCallback() {
+        this._keyboard.detach();
+    }
+    get _role() {
+        return this.inheritedAttributes['role'] ?? 'toolbar';
+    }
+    _setupKeyboard() {
+        if (this._role === 'group') {
+            return;
+        }
+        this._keyboard.attach(this.el).setLinearNavigation({
+            items: 'bds-button:not([disabled]) button',
+            orientation: this.orientation,
+            focusStrategy: { type: 'roving-tabindex' },
+            onActivate: () => document.activeElement?.click(),
+        });
     }
     /** Builds the CSS class map applied to the host element based `orientation`. */
     get classMapButtonGroup() {
@@ -65,7 +84,7 @@ export class BdsButtonGroup {
         };
     }
     render() {
-        return (h(Host, { key: 'c8f201f1b9aa35e8a7f92a096f0d06a3f0918ce6', ...this.inheritedAttributes, tabindex: "-1", class: this.classMapButtonGroup, "aria-orientation": this.orientation, "aria-label": this.label }, h("slot", { key: 'd7b2601d9ae72c0dc79a99f8b1b428966e79c943' })));
+        return (h(Host, { key: 'ff0a8da321995a4bd1057fd0c866248e48ec5bdf', ...this.inheritedAttributes, role: this._role, tabindex: "-1", class: this.classMapButtonGroup, "aria-orientation": this._role === 'toolbar' ? this.orientation : undefined, "aria-label": this.label }, h("slot", { key: '9e59ad6dd8a6c58da722e17dd6e8b8ff49d8568b' })));
     }
     static get is() { return "bds-button-group"; }
     static get originalStyleUrls() {

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

@@ -24,6 +24,12 @@ export class BdsListMenu {
         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 = [];
     }
@@ -55,6 +61,10 @@ export class BdsListMenu {
         }
         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;
@@ -71,6 +81,8 @@ export class BdsListMenu {
         else {
             const itemClicked = event.target;
             const indexItem = this.childItems.indexOf(itemClicked);
+            if (itemClicked.checkable)
+                itemClicked.selected = !itemClicked.selected;
             this.bdsSelect.emit({
                 value,
                 index: indexItem,
@@ -81,6 +93,7 @@ export class BdsListMenu {
     }
     /** 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();
@@ -99,9 +112,20 @@ export class BdsListMenu {
         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;
@@ -125,7 +149,7 @@ export class BdsListMenu {
     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');
@@ -178,10 +202,17 @@ export class BdsListMenu {
         }
         return null;
     }
+    /** Renders the empty state message if the 'empty' prop is true. */
+    renderEmptyState() {
+        if (this.empty || this.childItems.length === 0) {
+            return (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 (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" }))));
+        return (h(Host, { key: '658fa1497aa51cd6cb8ee40a4c5306e9ef444d14', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.menuRole === MENU_ROLES.LISTBOX && this.isMultiple ? 'true' : 'false', ...inheritedAriaAttr }, h("slot", { key: '7275e500cb30c352e22730963635cbfbd77d691e', name: "banner-content" }), h("div", { key: '68e1b663db8b96dc9c2aaa1d1b778e81304299ed', class: "bds-list-menu__header" }, h("slot", { key: 'cb96ac82f30b4b974312a40a7861b4bfee12382b', name: "header-content" })), this.renderSelectControls(), h("div", { key: '0e7d4b74f955eab4999e12ace25b00b521dbaa40', class: "bds-list-menu__content" }, h("slot", { key: '78402e3166d97b1d25369db7341958c1834cc30a' }), this.renderEmptyState()), h("div", { key: 'cf413da08c650accfaf7ca1cc3cbd5b246b4d977', class: "bds-list-menu__footer" }, h("slot", { key: '9636560c612bdee8f201d0b8b9a594ec32e0e44c', name: "footer-content" }))));
     }
     static get is() { return "bds-list-menu"; }
     static get originalStyleUrls() {
@@ -246,7 +277,7 @@ export class BdsListMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "menu-role",
                 "defaultValue": "MENU_ROLES.MENU"
             },
@@ -276,6 +307,87 @@ export class BdsListMenu {
                 "reflect": false,
                 "attribute": "select-controls",
                 "defaultValue": "false"
+            },
+            "empty": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['empty']",
+                    "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": "is empty state item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "empty",
+                "defaultValue": "false"
+            },
+            "checkable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['checkable']",
+                    "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": "Prop to show in all items a checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checkable",
+                "defaultValue": "false"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['emptyText']",
+                    "resolved": "string",
+                    "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": "Prop to show empty text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text",
+                "defaultValue": "'No options available'"
             }
         };
     }
@@ -375,6 +487,27 @@ export class BdsListMenu {
                             "text": "values - The value or values to be marked as selected."
                         }]
                 }
+            },
+            "getAllItems": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLBdsListMenuItemElement[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLBdsListMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLBdsListMenuItemElement"
+                        }
+                    },
+                    "return": "Promise<HTMLBdsListMenuItemElement[]>"
+                },
+                "docs": {
+                    "text": "Retrieves all child menu items.",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -28,6 +28,9 @@
   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 {
   justify-content: space-between;
   flex: 1;
@@ -63,11 +66,11 @@
 }
 .bds-list-item--button:not(.bds-list-item--disabled):focus, .bds-list-item--button:not(.bds-list-item--disabled):focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-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 {
-  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: var(--boreal-depth-box-shadow-active);
   background-color: var(--boreal-ui-default-lighter);
   z-index: 1;
 }