@otto-de/b2b-core-components 1.5.0 → 1.6.0

package/dist/collection/components/input-list/input-list.e2e.js

@@ -0,0 +1,227 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-InputList', () => {
+  let page;
+  const optionsList = ['option1', 'option2', 'option3'];
+  const setOptionsList = async () => {
+    const search = await page.find('b2b-input-list');
+    search.setProperty('optionsList', optionsList);
+    await page.waitForChanges();
+  };
+  const typeInput = async (key = '8') => {
+    let input = await page.find('b2b-input-list >>> b2b-input');
+    // focus on input element, focus method did not work
+    await input.click();
+    await input.press(key);
+    await page.waitForChanges();
+  };
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+      <b2b-input-list placeholder='some text'></b2b-input-list>
+    `);
+  });
+  it('should register input text when enabled', async () => {
+    const inputList = await page.find('b2b-input-list');
+    await typeInput('8');
+    let inputValue = inputList.getAttribute('value');
+    expect(inputValue).toBe('8');
+  });
+  it('should not receive input text when disabled', async () => {
+    const inputList = await page.find('b2b-input-list');
+    inputList.setAttribute('disabled', true);
+    await page.waitForChanges();
+    await typeInput();
+    let inputValue = inputList.getAttribute('value');
+    expect(inputValue).toBe(null);
+  });
+  it('should not show search list when input is not focused', async () => {
+    await setOptionsList();
+    const searchListResults = await page.find({ text: optionsList[0] });
+    expect(searchListResults).toBeNull();
+  });
+  it('should not show search list when no list is provided', async () => {
+    const input = await page.find('b2b-input-list >>> b2b-input');
+    await input.click();
+    const searchListResults = await page.find({ text: optionsList[0] });
+    expect(searchListResults).toBeNull();
+  });
+  it('should not show search list when the input has no value', async () => {
+    await setOptionsList();
+    const input = await page.find('b2b-input-list');
+    // focus on input element, focus method did not work
+    await input.click();
+    await input.press('8');
+    await page.waitForChanges();
+    let searchListResults = await page.find({ text: optionsList[0] });
+    expect(await searchListResults.isVisible()).toBe(true);
+    await input.click();
+    await input.press('Backspace');
+    await page.waitForChanges();
+    searchListResults = await page.find({ text: optionsList[0] });
+    expect(searchListResults).toBeNull();
+  });
+  it('should show search list when input is focused, the input has value and list is provided in props', async () => {
+    await setOptionsList();
+    await typeInput();
+    const searchListResults = await page.find({ text: optionsList[0] });
+    expect(await searchListResults.isVisible()).toBe(true);
+  });
+  it('should emit selected option when it is selected', async () => {
+    const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
+    await setOptionsList();
+    await typeInput();
+    // Click first option on the list
+    const option = await page.find({ text: optionsList[0] });
+    // focus on input element, focus method did not work
+    await option.click();
+    expect(optionSelectedEventSpy).toHaveReceivedEvent();
+    expect(optionSelectedEventSpy).toHaveReceivedEventDetail({
+      selectedOption: optionsList[0],
+    });
+  });
+  it('should hide results when one option is selected', async () => {
+    await setOptionsList();
+    await typeInput();
+    // Click first option on the list
+    const option = await page.find({ text: optionsList[0] });
+    expect(await option.isVisible()).toBe(true);
+    await option.click();
+    const searchListResults = await page.find({ text: optionsList[0] });
+    expect(searchListResults).toBeNull();
+  });
+  it('should fill up input value with option selected', async () => {
+    await setOptionsList();
+    await typeInput('8');
+    const input = await page.find('b2b-input-list >>> b2b-input');
+    let inputValue = await input.getProperty('value');
+    expect(inputValue).toBe('8');
+    // Click first option on the list
+    const option = await page.find({ text: optionsList[0] });
+    await option.click();
+    inputValue = await input.getProperty('value');
+    expect(inputValue).toBe(optionsList[0]);
+  });
+  it('should navigate with the arrow keys', async () => {
+    await setOptionsList();
+    await typeInput();
+    await page.keyboard.press('ArrowDown');
+    page.waitForChanges();
+    await page.keyboard.press('ArrowDown');
+    page.waitForChanges();
+    const firstActiveEl = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.textContent;
+    });
+    expect(firstActiveEl).toEqualText('option2');
+    await page.keyboard.press('ArrowUp');
+    page.waitForChanges();
+    const activeEl = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.textContent;
+    });
+    expect(activeEl).toEqualText('option1');
+  });
+  it('should navigate to the first option if the home key is pressed', async () => {
+    await setOptionsList();
+    await typeInput();
+    await page.keyboard.press('ArrowDown');
+    page.waitForChanges();
+    await page.keyboard.press('ArrowDown');
+    page.waitForChanges();
+    const firstActiveEl = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.textContent;
+    });
+    expect(firstActiveEl).toEqualText('option2');
+    await page.keyboard.press('Home');
+    page.waitForChanges();
+    const activeEl = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.textContent;
+    });
+    expect(activeEl).toEqualText('option1');
+  });
+  it('should navigate to the last option if the end key is pressed', async () => {
+    await setOptionsList();
+    await typeInput();
+    await page.keyboard.press('ArrowDown');
+    await page.waitForChanges();
+    const firstActiveEl = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.textContent;
+    });
+    expect(firstActiveEl).toEqualText('option1');
+    await page.keyboard.press('End');
+    await page.waitForChanges();
+    const activeEl = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.textContent;
+    });
+    expect(activeEl).toEqualText('option3');
+  });
+  it('should not navigate with any other key than up, down, end or home', async () => {
+    await setOptionsList();
+    await typeInput();
+    await page.keyboard.press('A');
+    await page.waitForChanges();
+    const firstActiveEl = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.textContent;
+    });
+    expect(firstActiveEl).not.toEqualText('option1');
+  });
+  it('should not navigate when the input is not visible', async () => {
+    await setOptionsList();
+    await page.waitForChanges();
+    await page.keyboard.press('ArrowDown');
+    await page.waitForChanges();
+    const searchListResults = await page.find({ text: optionsList[0] });
+    expect(searchListResults).toBeNull();
+  });
+  it('should emit an option when it is focused and the enter key is pressed', async () => {
+    const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
+    await setOptionsList();
+    await typeInput();
+    await page.keyboard.press('ArrowDown');
+    await page.waitForChanges();
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    expect(optionSelectedEventSpy).toHaveReceivedEvent();
+    expect(optionSelectedEventSpy).toHaveReceivedEventDetail({
+      selectedOption: optionsList[0],
+    });
+  });
+  it('should close the input list when the escape key is pressed', async () => {
+    await setOptionsList();
+    await typeInput();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Escape');
+    await page.waitForChanges();
+    const searchListResults = await page.find({ text: optionsList[0] });
+    expect(searchListResults).toBeNull();
+  });
+  it('should show the close icon when the input has text', async () => {
+    await setOptionsList();
+    await typeInput();
+    const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+    expect(closeIcon).not.toBeNull();
+  });
+  it('should not show the close icon if the input is empty', async () => {
+    await setOptionsList();
+    const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+    expect(closeIcon).toBeNull();
+  });
+  it('should clear the input when the clear icon is clicked', async () => {
+    await setOptionsList();
+    await typeInput('8');
+    let input = await page.find('b2b-input-list >>> b2b-input');
+    let inputValue = await input.getAttribute('value');
+    expect(inputValue).toBe('8');
+    const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+    closeIcon.click();
+    await page.waitForChanges();
+    inputValue = await input.getAttribute('value');
+    expect(inputValue).toBe('');
+  });
+  it('should emit clear event when the clear icon is clicked', async () => {
+    const onInputEventSpy = await page.spyOnEvent('b2b-clear');
+    await typeInput();
+    const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+    closeIcon.click();
+    await page.waitForChanges();
+    expect(onInputEventSpy).toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/input-list/input-list.js

@@ -37,7 +37,7 @@ export class InputListComponent {
       const parentNodeName = this.hostElement.parentNode.nodeName;
       if (parentNodeName === 'B2B-INPUT-GROUP') {
         const slotName = ((_a = this.hostElement.assignedSlot) === null || _a === void 0 ? void 0 : _a.name) || 'middle';
-        return `b2b-group-input-${slotName}`;
+        return `b2b-group-input__${slotName}`;
       }
     };
     this.getAllOptions = () => {
@@ -84,6 +84,7 @@ export class InputListComponent {
     this.optionsList = [];
     this.value = null;
     this.disabled = false;
+    this.groupDisabled = false;
     this.hasOptionList = this.optionsList.length > 0;
     this.isElementFocused = false;
   }
@@ -147,7 +148,7 @@ export class InputListComponent {
           this.isElementFocused &&
           Boolean(this.value),
         [groupOrderClass]: true,
-      } }, h("b2b-input", { type: "text", label: this.label, value: this.value, disabled: this.disabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, Boolean(this.value) && (h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+      } }, h("b2b-input", { type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, Boolean(this.value) && (h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
   }
   static get is() { return "b2b-input-list"; }
   static get encapsulation() { return "shadow"; }
@@ -266,6 +267,27 @@ export class InputListComponent {
         "attribute": "disabled",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "groupDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Whether the parent input group is disabled. Per default, it is false."
+            }],
+          "text": ""
+        },
+        "attribute": "group-disabled",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/label/label.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/label/label.e2e.js

@@ -0,0 +1,17 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Label', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-label>Neutral</b2b-label>`);
+  });
+  it('should render the label component', async () => {
+    const element = await page.find('b2b-label');
+    expect(element).not.toBeNull();
+    expect(element).toEqualText('Neutral');
+  });
+  it('should present the label component in the default style', async () => {
+    const element = await page.find('b2b-label >>> span');
+    expect(element).toHaveClass('b2b-label--neutral');
+  });
+});

package/dist/collection/components/label/label.spec.js

@@ -0,0 +1,58 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { LabelComponent } from './label';
+it('should render the label component with default values', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", null, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+        <span class="b2b-label b2b-label--neutral">
+            <slot></slot>
+        </span>
+    `);
+});
+it('should render the label component with info styles', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", { type: "info" }, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--info">
+              <slot></slot>
+          </span>
+      `);
+});
+it('should render the label component with success styles', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", { type: "success" }, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--success">
+              <slot></slot>
+          </span>
+      `);
+});
+it('should render the label component with warning styles', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", { type: "warning" }, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--warning">
+              <slot></slot>
+          </span>
+      `);
+});
+it('should render the label component with error styles', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", { type: "error" }, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--error">
+              <slot></slot>
+          </span>
+      `);
+});

package/dist/collection/components/modal/modal.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -235,7 +235,7 @@
 :host .b2b-modal--open {
   display: flex;
 }
-:host .b2b-modal--backdrop {
+:host .b2b-modal__backdrop {
   top: 0;
   left: 0;
   z-index: 0;
@@ -243,7 +243,7 @@
   height: 100%;
   position: absolute;
 }
-:host .b2b-modal-dialog {
+:host .b2b-modal__dialog {
   z-index: 1;
   position: relative;
   min-width: var(--b2b-component-modal-default-min-width);
@@ -253,53 +253,48 @@
   box-shadow: 0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);
   margin: auto;
 }
-:host .b2b-modal-dialog--header {
+:host .b2b-modal__dialog__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--b2b-size-space-75);
 }
-:host .b2b-modal-dialog--close {
+:host .b2b-modal__dialog__close {
   cursor: pointer;
   background: transparent;
   padding: 0;
   border: none;
-  /* this is a workaround to force purgecss to include the overwrites of the variable --b2b-icon-cursor */
 }
-:host .b2b-modal-dialog--close b2b-icon {
+:host .b2b-modal__dialog__close b2b-icon {
   transition: all 0.3s ease;
-  --b2b-icon-cursor: pointer;
 }
-:host .b2b-modal-dialog--close .purge-css-include-variables {
-  cursor: var(--b2b-icon-cursor);
-}
-:host .b2b-modal-dialog--footer {
+:host .b2b-modal__dialog__footer {
   display: flex;
   justify-content: space-between;
   padding-top: calc(var(--b2b-size-space-75) * 2);
   margin-top: calc(var(--b2b-size-space-75) * 2);
   border-top: var(--b2b-size-1) solid var(--b2b-color-border-100);
 }
-:host .b2b-modal-dialog--footer-left {
+:host .b2b-modal__dialog__footer-left {
   display: flex;
   justify-content: flex-start;
 }
-:host .b2b-modal-dialog--footer-right {
+:host .b2b-modal__dialog__footer-right {
   display: flex;
   justify-content: flex-end;
 }
-:host .b2b-modal-dialog--large {
+:host .b2b-modal__dialog--large {
   max-width: var(--b2b-component-modal-large-max-width);
 }
 @media only screen and (max-width: var(--b2b-component-modal-large-max-width)) {
-  :host .b2b-modal-dialog--large {
+  :host .b2b-modal__dialog--large {
     left: 0;
     width: auto;
     max-width: var(--b2b-component-modal-large-max-width);
   }
 }
 @media only screen and (max-width: var(--b2b-component-modal-default-max-width)) {
-  :host .b2b-modal-dialog {
+  :host .b2b-modal__dialog {
     left: 0;
     width: auto;
     max-width: var(--b2b-component-modal-default-max-width);

package/dist/collection/components/modal/modal.e2e.js

@@ -0,0 +1,115 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('b2b-modal', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="false">Test</b2b-modal>');
+    const element = await page.find('b2b-modal');
+    expect(element).toHaveClass('hydrated');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(false);
+  });
+  it('open modal & heading', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(true);
+    const headingElm = await modalDiv.find('b2b-headline');
+    expect(headingElm.textContent).toBe('Test Modal');
+  });
+  it('verify initial focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(true);
+    await page.keyboard.press('Tab');
+    const closeContent = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.className;
+    });
+    expect(closeContent).toBe('b2b-modal__dialog__close');
+  });
+  it('verify focus trap', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(true);
+    await page.keyboard.press('Tab');
+    let closeContent = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.className;
+    });
+    expect(closeContent).toBe('b2b-modal__dialog__close');
+    await page.keyboard.press('Tab');
+    closeContent = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.className;
+    });
+    expect(closeContent).toBe('b2b-modal__dialog__close');
+  });
+  it('verify close hover', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(true);
+    const closeIcon = await page.find('b2b-modal >>> b2b-icon');
+    const closeIconColorBefore = await closeIcon.getProperty('color');
+    expect(closeIconColorBefore).toBe('secondary');
+    await closeIcon.hover();
+    await page.waitForChanges();
+    const closeIconColorAfter = await closeIcon.getProperty('color');
+    expect(closeIconColorAfter).toBe('primary');
+  });
+  it('verify close emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    const closeIcon = await page.find('b2b-modal >>> b2b-icon');
+    await closeIcon.click();
+    expect(b2bBeforeClose).toHaveReceivedEvent();
+    expect(b2bClose).toHaveReceivedEvent();
+  });
+  it('verify esc emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Escape');
+    expect(b2bBeforeClose).toHaveReceivedEvent();
+    expect(b2bClose).toHaveReceivedEvent();
+  });
+  it('verify esc no-emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true" esc-dismiss="false">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Escape');
+    expect(b2bBeforeClose).not.toHaveReceivedEvent();
+    expect(b2bClose).not.toHaveReceivedEvent();
+  });
+  it('verify backdrop dismiss emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true" backdrop-dismiss="true">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    await page.evaluate(() => {
+      document
+        .querySelector('b2b-modal')
+        .shadowRoot.querySelector('div > div.b2b-modal__backdrop').click();
+    });
+    expect(b2bBeforeClose).toHaveReceivedEvent();
+    expect(b2bClose).toHaveReceivedEvent();
+  });
+  it('verify backdrop dismiss not emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    await page.evaluate(() => {
+      document
+        .querySelector('b2b-modal')
+        .shadowRoot.querySelector('div > div.b2b-modal__backdrop').click();
+    });
+    expect(b2bBeforeClose).not.toHaveReceivedEvent();
+    expect(b2bClose).not.toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/modal/modal.js

@@ -83,9 +83,9 @@ export class ModalComponent {
   }
   render() {
     return (h(Host, null, h("div", { class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { class: {
-        'b2b-modal-dialog': true,
-        [`b2b-modal-dialog--${this.variant}`]: true,
-      } }, h("div", { class: "b2b-modal-dialog--header" }, h("b2b-headline", { align: "center", size: "200", noMargin: true }, this.heading), h("button", { type: "button", class: "b2b-modal-dialog--close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' }))), h("div", { class: "b2b-modal-dialog--body" }, h("slot", null)), h("div", { class: "b2b-modal-dialog--footer" }, h("div", { class: "b2b-modal-dialog--footer-left" }, h("slot", { name: "footer-left" })), h("div", { class: "b2b-modal-dialog--footer-right" }, h("slot", { name: "footer-right" })))), h("div", { "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { class: "b2b-modal--backdrop", onClick: this.handleBackdropDismiss }))));
+        'b2b-modal__dialog': true,
+        [`b2b-modal__dialog--${this.variant}`]: true,
+      } }, h("div", { class: "b2b-modal__dialog__header" }, h("b2b-headline", { align: "center", size: "200", noMargin: true }, this.heading), h("button", { type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' }))), h("div", { class: "b2b-modal__dialog__body" }, h("slot", null)), h("div", { class: "b2b-modal__dialog__footer" }, h("div", { class: "b2b-modal__dialog__footer-left" }, h("slot", { name: "footer-left" })), h("div", { class: "b2b-modal__dialog__footer-right" }, h("slot", { name: "footer-right" })))), h("div", { "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
   }
   static get is() { return "b2b-modal"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -225,20 +225,20 @@
 .b2b-pagination li {
   transition: opacity 0.3s ease, visibility 0.3s ease;
 }
-.b2b-pagination li:first-child:not(.b2b-pagination--first-item) {
+.b2b-pagination li:first-child:not(.b2b-pagination__first-item) {
   margin-right: var(--b2b-size-15);
 }
-.b2b-pagination li:last-child:not(.b2b-pagination--last-item) {
+.b2b-pagination li:last-child:not(.b2b-pagination__last-item) {
   margin-left: var(--b2b-size-15);
 }
-.b2b-pagination li.b2b-pagination--item b2b-button {
+.b2b-pagination li.b2b-pagination__item b2b-button {
   --b2b-border-radius: 0;
   --b2b-border-right: 0;
 }
-.b2b-pagination li.b2b-pagination--first-item b2b-button {
+.b2b-pagination li.b2b-pagination__first-item b2b-button {
   --b2b-border-radius: var(--b2b-size-border-no-radius-right);
 }
-.b2b-pagination li.b2b-pagination--last-item b2b-button {
+.b2b-pagination li.b2b-pagination__last-item b2b-button {
   --b2b-border-right: 1px solid var(--b2b-button-secondary-border-color);
   --b2b-border-radius: var(--b2b-size-border-no-radius-left);
 }