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

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

@@ -0,0 +1,45 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { InputComponent } from './input';
+it('should render the input', async () => {
+  const page = await newSpecPage({
+    components: [InputComponent],
+    template: () => h("b2b-input", { label: "test" }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render with a placeholder', async () => {
+  const page = await newSpecPage({
+    components: [InputComponent],
+    template: () => (h("b2b-input", { label: "test", placeholder: "test placeholder" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a hint message if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [InputComponent],
+    template: () => (h("b2b-input", { label: "test", hint: "This is a test hint" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should apply an error style to the host element if invalid is set to true', async () => {
+  const page = await newSpecPage({
+    components: [InputComponent],
+    template: () => (h("b2b-input", { label: "test", error: "This is a test error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render an error message if an error is specified and the input is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [InputComponent],
+    template: () => (h("b2b-input", { label: "test", error: "This is a test error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a hint if invalid and disabled are true at the same time', async () => {
+  const page = await newSpecPage({
+    components: [InputComponent],
+    template: () => (h("b2b-input", { label: "test", error: "This is a test error", hint: "This is a test hint", invalid: true, disabled: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/input-group/input-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -220,14 +219,14 @@
   width: 100%;
   flex: 0 0 auto;
 }
-:host .b2b-input-wrapper-hint {
-  font-size: var(--b2b-size-copy-75);
+:host .b2b-input-wrapper__hint {
+  font-size: var(--b2b-size-copy-50);
   line-height: var(--b2b-size-copy-line-height-75);
   display: block;
   margin-top: var(--b2b-size-10);
   color: var(--b2b-color-grey-300);
 }
-:host .b2b-input-wrapper-hint--error {
+:host .b2b-input-wrapper__hint--error {
   color: var(--b2b-color-error-100);
 }
 ::slotted(*[slot=start]) {

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

@@ -0,0 +1,76 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Input Group', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+        <b2b-input-group hint="A group hint" error="A group error">
+        <b2b-input slot="start" label="Search Term"></b2b-input>
+        <b2b-dropdown label="Data Set" invalid error="an error">
+          <option value="one">€</option>
+          <option value="one">$</option>
+        </b2b-dropdown>
+        <b2b-input label="Another input" invalid error="an error"></b2b-input>
+        <b2b-dropdown>
+          <option value="one">€</option>
+          <option value="one">$</option>
+        </b2b-dropdown>
+        <b2b-button slot="end" variant="primary" disabled><b2b-icon icon="b2b_icon-search"></b2b-icon></b2b-button>
+      </b2b-input-group>`);
+  });
+  it('should render the input group component', async () => {
+    const element = await page.find('b2b-input-group');
+    expect(element).not.toBeNull();
+  });
+  it('should disable the input group component', async () => {
+    const element = await page.find('b2b-input-group');
+    expect(element).not.toHaveAttribute('disabled');
+    element.setAttribute('disabled', true);
+    await page.waitForChanges();
+    expect(element).toHaveAttribute('disabled');
+  });
+  it('should disable individual elements of the group and keep their state when the group is dis- and enabled', async () => {
+    let button = await page.find('b2b-button');
+    expect(await button.getProperty('disabled')).toBe(true);
+    let group = await page.find('b2b-input-group');
+    await group.setProperty('disabled', true);
+    await page.waitForChanges();
+    expect(await group.getProperty('disabled')).toBe(true);
+    await group.setProperty('disabled', false);
+    await page.waitForChanges();
+    expect(await group.getProperty('disabled')).toBe(false);
+    expect(await button.getProperty('disabled')).toBe(true);
+  });
+  it('should render a group hint if one is specified', async () => {
+    const element = await page.find('b2b-input-group >>> span');
+    expect(element).toEqualText('A group hint');
+  });
+  it('should render a group error if one is specified and the group is set to invalid', async () => {
+    const element = await page.find('b2b-input-group');
+    const error = await page.find('b2b-input-group >>> span');
+    element.setAttribute('invalid', true);
+    await page.waitForChanges();
+    expect(error).toEqualText('A group error');
+  });
+  it('should not render a group error if the group is disabled', async () => {
+    const element = await page.find('b2b-input-group');
+    const hint = await page.find('b2b-input-group >>> span');
+    element.setAttribute('disabled', true);
+    expect(hint).toEqualText('A group hint');
+  });
+  it('should remove all children texts from individual components', async () => {
+    const input = await page.find('b2b-input');
+    expect(input.error).not.toBeDefined;
+    expect(input.hint).not.toBeDefined;
+    const dropdown = await page.find('b2b-dropdown');
+    expect(dropdown.error).not.toBeDefined;
+    expect(dropdown.hint).not.toBeDefined;
+  });
+  it('should not prevent individual events from being triggered in the children', async () => {
+    const input = await page.find('b2b-input >>> input');
+    const inputSpy = await page.spyOnEvent('b2b-input');
+    await input.press('KeyA');
+    await page.waitForChanges();
+    expect(inputSpy).toHaveReceivedEvent();
+  });
+});

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

@@ -30,7 +30,7 @@ export class B2BInputGroup {
       }
       else {
         nodes.forEach(node => {
-          node.disabled = false;
+          node.groupDisabled = this.disabled;
         });
       }
     };
@@ -51,12 +51,14 @@ export class B2BInputGroup {
   connectedCallback() {
     this.removeText();
     this.toggleAllError();
-    this.toggleAllDisabled();
+    if (this.disabled) {
+      this.toggleAllDisabled();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: { 'b2b-input-wrapper': true } }, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
-        'b2b-input-wrapper-hint': true,
-        'b2b-input-wrapper-hint--error': this.invalid && !this.disabled,
+        'b2b-input-wrapper__hint': true,
+        'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
       } }, this.invalid && !this.disabled ? this.error : this.hint))));
   }
   static get is() { return "b2b-input-group"; }

package/dist/collection/components/input-group/input-group.spec.js

@@ -0,0 +1,56 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { B2BInputGroup } from './input-group';
+import { InputComponent } from '../input/input';
+import { ButtonComponent } from '../button/button';
+import { DropdownComponent } from '../dropdown/dropdown';
+describe('B2B Input Group', () => {
+  it('should render content wrapped in the input group', async () => {
+    const page = await newSpecPage({
+      components: [
+        B2BInputGroup,
+        InputComponent,
+        ButtonComponent,
+        DropdownComponent,
+      ],
+      template: () => (h("b2b-input-group", null, h("b2b-input", { label: "Search Term" }), h("b2b-dropdown", null, h("option", { value: "data-1" }, "Data Set 1"), h("option", { value: "data-2" }, "Data Set 2")), h("b2b-button", { variant: "primary" }, "Search"))),
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it('should render a group hint if it is specified', async () => {
+    const page = await newSpecPage({
+      components: [
+        B2BInputGroup,
+        InputComponent,
+        ButtonComponent,
+        DropdownComponent,
+      ],
+      template: () => (h("b2b-input-group", { hint: "A group hint" }, h("b2b-input", { label: "Search Term" }), h("b2b-dropdown", null, h("option", { value: "data-1" }, "Data Set 1"), h("option", { value: "data-2" }, "Data Set 2")), h("b2b-button", { variant: "primary" }, "Search"))),
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it('should render a group error if one is specified and the group is invalid', async () => {
+    const page = await newSpecPage({
+      components: [
+        B2BInputGroup,
+        InputComponent,
+        ButtonComponent,
+        DropdownComponent,
+      ],
+      template: () => (h("b2b-input-group", { error: "A group error", invalid: true }, h("b2b-input", { label: "Search Term" }), h("b2b-dropdown", null, h("option", { value: "data-1" }, "Data Set 1"), h("option", { value: "data-2" }, "Data Set 2")), h("b2b-button", { variant: "primary" }, "Search"))),
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it('should not render a group error if the group is invalid and disabled', async () => {
+    const page = await newSpecPage({
+      components: [
+        B2BInputGroup,
+        InputComponent,
+        ButtonComponent,
+        DropdownComponent,
+      ],
+      template: () => (h("b2b-input-group", { invalid: true, disabled: true, hint: "A group hint", error: "A group error" }, h("b2b-input", { label: "Search Term" }), h("b2b-dropdown", null, h("option", { value: "data-1" }, "Data Set 1"), h("option", { value: "data-2" }, "Data Set 2")), h("b2b-button", { variant: "primary" }, "Search"))),
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('b2b-input-label', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-input-label for="testId">A label</b2b-input-label>');
+    const element = await page.find('b2b-input-label');
+    expect(element).toHaveClass('hydrated');
+    expect(element).toBeDefined();
+  });
+});

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -229,22 +228,22 @@
 .b2b-input-list.b2b-input-list__options-on b2b-input {
   --b2b-border-radius: var(--b2b-size-border-no-radius-bottom);
 }
-.b2b-input-list.b2b-group-input-start b2b-input {
+.b2b-input-list.b2b-group-input__start b2b-input {
   --b2b-border-radius: inherit;
   --b2b-border-right: inherit;
 }
-.b2b-input-list.b2b-group-input-start.b2b-input-list__options-on b2b-input {
+.b2b-input-list.b2b-group-input__start.b2b-input-list__options-on b2b-input {
   --b2b-border-radius: var(--b2b-size-border-radius-100) 0 0 0;
 }
-.b2b-input-list.b2b-group-input-middle b2b-input {
+.b2b-input-list.b2b-group-input__middle b2b-input {
   --b2b-border-radius: inherit;
   --b2b-border-right: inherit;
 }
-.b2b-input-list.b2b-group-input-end b2b-input {
+.b2b-input-list.b2b-group-input__end b2b-input {
   --b2b-border-radius: inherit;
   --b2b-border-right: inherit;
 }
-.b2b-input-list.b2b-group-input-end.b2b-input-list__options-on b2b-input {
+.b2b-input-list.b2b-group-input__end.b2b-input-list__options-on b2b-input {
   --b2b-border-radius: 0 var(--b2b-size-border-radius-100) 0 0;
 }
 .b2b-input-list.b2b-input-list__options-on:focus {

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 Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -217,7 +216,7 @@
 .b2b-label {
   display: inline-block;
   font-family: var(--b2b-font-family-default);
-  font-size: var(--b2b-size-copy-75);
+  font-size: var(--b2b-size-copy-50);
   line-height: var(--b2b-size-copy-line-height-50);
   border-radius: var(--b2b-size-30);
   border: 1px solid var(--b2b-color-white-100);

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');
+  });
+});