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

package/dist/collection/components/icon/icon.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 */
@@ -226,27 +226,27 @@
 :host .b2b-icon--clickable {
   cursor: pointer;
 }
-:host .b2b-icon.icon-50 {
+:host .b2b-icon.b2b-icon--50 {
   width: var(--b2b-size-40);
   height: var(--b2b-size-40);
 }
-:host .b2b-icon.icon-100 {
+:host .b2b-icon.b2b-icon--100 {
   width: var(--b2b-size-60);
   height: var(--b2b-size-60);
 }
-:host .b2b-icon.icon-200 {
+:host .b2b-icon.b2b-icon--200 {
   width: var(--b2b-size-80);
   height: var(--b2b-size-80);
 }
-:host .b2b-icon.primary {
+:host .b2b-icon.b2b-icon--primary {
   fill: var(--b2b-color-black-100);
 }
-:host .b2b-icon.secondary {
+:host .b2b-icon.b2b-icon--secondary {
   fill: var(--b2b-color-grey-200);
 }
-:host .b2b-icon.inverse {
+:host .b2b-icon.b2b-icon--inverse {
   fill: var(--b2b-color-white-100);
 }
-:host .b2b-icon.inherit {
+:host .b2b-icon.b2b-icon--inherit {
   fill: currentcolor;
 }

package/dist/collection/components/icon/icon.js

@@ -20,8 +20,8 @@ export class B2bIcon {
       return null;
     return (h(Host, null, h("div", { class: {
         'b2b-icon': true,
-        [`icon-${this.size}`]: true,
-        [this.color]: true,
+        [`b2b-icon--${this.size}`]: true,
+        [`b2b-icon--${this.color}`]: true,
         'b2b-icon--clickable': this.clickable,
       }, innerHTML: this.pathData })));
   }

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

@@ -0,0 +1,21 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { B2bIcon } from './icon';
+it('should render the icon with default values', async () => {
+  const page = await newSpecPage({
+    components: [B2bIcon],
+    template: () => h("b2b-icon", { icon: "b2b_icon-search" }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should gracefully fail if icon name is not found by not rendering icon and emitting a warning', async () => {
+  // @ts-ignore
+  global.console.warn = jest.fn();
+  const page = await newSpecPage({
+    components: [B2bIcon],
+    // @ts-ignore
+    template: () => h("b2b-icon", { icon: "b2b_some-typo" }),
+  });
+  expect(page.root).toMatchSnapshot();
+  expect(console.warn).toBeCalled();
+});

package/dist/collection/components/input/input.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 */
@@ -221,7 +221,7 @@
   min-width: var(--b2b-size-200);
   font-family: var(--b2b-font-family-default);
 }
-:host(.b2b-input) .input-wrapper {
+:host(.b2b-input) .b2b-input__wrapper {
   display: flex;
   align-items: center;
   height: var(--b2b-size-60);
@@ -233,26 +233,26 @@
   color: var(--b2b-color-black-100);
   position: relative;
 }
-:host(.b2b-input) .input-wrapper--focused {
+:host(.b2b-input) .b2b-input__wrapper--focused {
   outline: 2px solid Highlight;
   outline: 2px solid -webkit-focus-ring-color;
   outline-offset: -1px;
   border-radius: var(--b2b-border-radius);
   z-index: 9999;
 }
-:host(.b2b-input) .input-wrapper--disabled {
+:host(.b2b-input) .b2b-input__wrapper--disabled {
   color: var(--b2b-color-grey-250);
   background-color: var(--b2b-color-grey-25);
 }
-:host(.b2b-input) .input-wrapper--disabled .native-input {
+:host(.b2b-input) .b2b-input__wrapper--disabled .b2b-input__native-input {
   background-color: var(--b2b-color-grey-25);
 }
-:host(.b2b-input) .input-wrapper .border {
+:host(.b2b-input) .b2b-input__wrapper .border {
   border-left: 1px solid var(--b2b-color-grey-300);
   height: 100%;
   margin: 0 12px;
 }
-:host(.b2b-input) .input-wrapper .native-input {
+:host(.b2b-input) .b2b-input__wrapper .b2b-input__native-input {
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
   line-height: var(--b2b-size-copy-line-height-100);
@@ -264,7 +264,7 @@
   flex: 1 1 auto;
   width: 0;
 }
-:host(.b2b-input) .input-wrapper .native-input::placeholder {
+:host(.b2b-input) .b2b-input__wrapper .b2b-input__native-input::placeholder {
   color: var(--b2b-color-grey-300);
 }
 :host(.b2b-input) b2b-input-label {
@@ -278,19 +278,19 @@
   margin-top: var(--b2b-size-10);
   color: var(--b2b-color-grey-300);
 }
-:host(.b2b-input--error) .input-wrapper,
-:host(.b2b-input--error) .native-input {
+:host(.b2b-input--error) .b2b-input__wrapper,
+:host(.b2b-input--error) .b2b-input__native-input {
   background-color: var(--b2b-color-error-50);
   border: 1px solid var(--b2b-color-error-100);
   border-right: var(--b2b-border-right);
   border-color: var(--b2b-color-error-100);
   color: var(--b2b-color-copy-default);
 }
-:host(.b2b-input--error) .input-wrapper::placeholder,
-:host(.b2b-input--error) .native-input::placeholder {
+:host(.b2b-input--error) .b2b-input__wrapper::placeholder,
+:host(.b2b-input--error) .b2b-input__native-input::placeholder {
   color: var(--b2b-color-copy-default);
 }
-:host(.b2b-input--error) .input-wrapper--focused {
+:host(.b2b-input--error) .b2b-input__input-wrapper--focused {
   outline: 2px solid var(--b2b-color-error-100);
   outline-offset: -1px;
 }

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

@@ -0,0 +1,43 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Input', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+      <b2b-input></b2b-input>
+    `);
+  });
+  it('should register input text when enabled', async () => {
+    const inputElement = await page.find('b2b-input');
+    const nativeInput = await page.find('b2b-input >>> input');
+    await nativeInput.type('a value');
+    let inputValue = inputElement.getAttribute('value');
+    expect(inputValue).toBe('a value');
+  });
+  it('should not receive input text when disabled', async () => {
+    const inputElement = await page.find('b2b-input');
+    inputElement.setAttribute('disabled', true);
+    await page.waitForChanges();
+    const nativeInput = await page.find('b2b-input >>> input');
+    await nativeInput.type('a value');
+    let inputValue = inputElement.getAttribute('value');
+    expect(inputValue).toBe(null);
+  });
+  it('should clear input when cleared called', async () => {
+    const inputElement = await page.find('b2b-input');
+    const nativeInput = await page.find('b2b-input >>> input');
+    await nativeInput.type('a value');
+    let inputValue = inputElement.getAttribute('value');
+    expect(inputValue).toBe('a value');
+    await inputElement.callMethod('clearInput');
+    await page.waitForChanges();
+    inputValue = inputElement.getAttribute('value');
+    expect(inputValue).toBe('');
+  });
+  it('should emit an empty value when cleared', async () => {
+    const onInputEventSpy = await page.spyOnEvent('b2b-input');
+    const inputElement = await page.find('b2b-input');
+    await inputElement.callMethod('clearInput');
+    expect(onInputEventSpy).toHaveReceivedEventDetail({ value: '' });
+  });
+});

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

@@ -50,6 +50,7 @@ export class InputComponent {
     this.hint = undefined;
     this.error = undefined;
     this.autofocus = false;
+    this.groupDisabled = false;
     this.hasFocus = false;
     this.hasTextPrefix = false;
     this.hasTextSuffix = false;
@@ -78,10 +79,10 @@ export class InputComponent {
         'b2b-input': true,
         'b2b-input--error': this.invalid && !this.disabled,
       } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { class: {
-        'input-wrapper': true,
-        'input-wrapper--focused': this.hasFocus,
-        'input-wrapper--disabled': this.disabled,
-      } }, h("slot", { name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { class: "native-input", "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { name: "end" })), (this.hint !== undefined && !this.invalid) ||
+        'b2b-input__wrapper': true,
+        'b2b-input__wrapper--focused': this.hasFocus,
+        'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
+      } }, h("slot", { name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { class: "b2b-input__native-input", "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { name: "end" })), (this.hint !== undefined && !this.invalid) ||
       (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
   }
   static get is() { return "b2b-input"; }
@@ -291,6 +292,27 @@ export class InputComponent {
         "attribute": "autofocus",
         "reflect": false,
         "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/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 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 */
@@ -219,14 +219,14 @@
   width: 100%;
   flex: 0 0 auto;
 }
-:host .b2b-input-wrapper-hint {
+: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

@@ -1,12 +1,6 @@
 import { h, Host } from '@stencil/core';
 export class B2BInputGroup {
   constructor() {
-    this.getInitialState = () => {
-      const nodes = this.getChildNodes();
-      nodes.forEach(node => {
-        this.initialDisabled.push(node.disabled);
-      });
-    };
     this.removeText = () => {
       const nodes = this.getChildNodes();
       nodes.forEach(node => {
@@ -35,8 +29,8 @@ export class B2BInputGroup {
         });
       }
       else {
-        nodes.forEach((node, index) => {
-          node.disabled = this.initialDisabled[index];
+        nodes.forEach(node => {
+          node.groupDisabled = this.disabled;
         });
       }
     };
@@ -47,7 +41,6 @@ export class B2BInputGroup {
     this.disabled = false;
     this.error = undefined;
     this.hint = undefined;
-    this.initialDisabled = [];
   }
   invalidChanged() {
     this.toggleAllError();
@@ -62,15 +55,10 @@ export class B2BInputGroup {
       this.toggleAllDisabled();
     }
   }
-  componentWillLoad() {
-    if (!this.disabled) {
-      this.getInitialState();
-    }
-  }
   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"; }
@@ -159,11 +147,6 @@ export class B2BInputGroup {
       }
     };
   }
-  static get states() {
-    return {
-      "initialDisabled": {}
-    };
-  }
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{

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 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 */
@@ -228,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 {