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

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

@@ -0,0 +1,38 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { CheckboxGroupComponent } from './checkbox-group';
+it('should render the checkbox group and not show a hint or an error unless specified', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxGroupComponent],
+    template: () => h("b2b-checkbox-group", { label: "test" }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a group hint if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxGroupComponent],
+    template: () => (h("b2b-checkbox-group", { label: "test", hint: "this is a test hint" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should not render a group hint if a hint string and an error are specified and the group is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxGroupComponent],
+    template: () => (h("b2b-checkbox-group", { label: "test", hint: "this is a test hint", 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: [CheckboxGroupComponent],
+    template: () => (h("b2b-checkbox-group", { label: "test", hint: "this is a test hint", error: "this is a test error", invalid: true, disabled: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should align the checkboxes horizontally if set to horizontal', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxGroupComponent],
+    template: () => (h("b2b-checkbox-group", { label: "test", alignment: "horizontal" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/dropdown/dropdown.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 */
@@ -223,7 +222,7 @@
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
 }
-:host(.b2b-dropdown) .b2b-dropdown-select {
+:host(.b2b-dropdown) .b2b-dropdown__select {
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
   appearance: none;
@@ -244,7 +243,7 @@
   box-sizing: border-box;
   position: relative;
 }
-:host(.b2b-dropdown) .b2b-dropdown-select:focus-visible {
+:host(.b2b-dropdown) .b2b-dropdown__select:focus-visible {
   outline: 2px solid Highlight;
   outline: 2px solid -webkit-focus-ring-color;
   border-radius: var(--b2b-border-radius);
@@ -259,23 +258,23 @@
   display: block;
   color: var(--b2b-color-grey-300);
   margin-top: var(--b2b-size-10);
-  font-size: var(--b2b-size-copy-75);
+  font-size: var(--b2b-size-copy-50);
   line-height: var(--b2b-size-copy-line-height-75);
 }
-:host(.b2b-dropdown--error) .b2b-dropdown-select {
+:host(.b2b-dropdown--error) .b2b-dropdown__select {
   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);
 }
-:host(.b2b-dropdown--error) .b2b-dropdown-select:focus {
+:host(.b2b-dropdown--error) .b2b-dropdown__select:focus {
   outline: 2px solid var(--b2b-color-error-100);
   outline-offset: -1px;
 }
 :host(.b2b-dropdown--error) span {
   color: var(--b2b-color-error-100);
 }
-:host(.b2b-dropdown--disabled) .b2b-dropdown-select {
+:host(.b2b-dropdown--disabled) .b2b-dropdown__select {
   background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="grey" viewBox="0 0 32 32"><path d="M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z"/></svg>');
   background-color: var(--b2b-color-grey-25);
   color: var(--b2b-color-grey-250);

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

@@ -0,0 +1,48 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Dropdown', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+      <b2b-dropdown label="Test Dropdown">
+          <option value="option-1" selected id="option-1">Option 1</option>
+          <option value="option-2" id="option-2">Option 2</option>
+      </b2b-dropdown>
+    `);
+  });
+  it('should render the dropdown component', async () => {
+    const element = await page.find('b2b-dropdown');
+    expect(element).not.toBeNull();
+  });
+  it('should receive a custom event when an option is selected', async () => {
+    const element = await page.find('b2b-dropdown');
+    const b2bChange = await page.spyOnEvent('b2b-change');
+    element.triggerEvent('b2b-change');
+    await page.waitForChanges();
+    expect(b2bChange).toHaveReceivedEvent();
+  });
+  // TODO: reimplement this test with new testing framework
+  // it('should emit the selected value when an option is clicked', async () => {
+  //   const b2bChange = await page.spyOnEvent('b2b-change');
+  //
+  //   page.select('b2b-dropdown', 'option-2');
+  //
+  //   await page.waitForChanges();
+  //
+  //   expect(b2bChange).toHaveReceivedEventDetail('option-2');
+  // });
+  it('should disable the select when the property is specified', async () => {
+    const element = await page.find('b2b-dropdown');
+    expect(element).not.toHaveClass('b2b-dropdown--disabled');
+    element.setProperty('disabled', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-dropdown--disabled');
+  });
+  it('should set the select to invalid when the property is specified', async () => {
+    const element = await page.find('b2b-dropdown');
+    expect(element).not.toHaveClass('b2b-dropdown--error');
+    element.setProperty('invalid', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-dropdown--error');
+  });
+});

package/dist/collection/components/dropdown/dropdown.js

@@ -47,7 +47,7 @@ export class DropdownComponent {
         'b2b-dropdown': true,
         'b2b-dropdown--error': this.invalid && !this.disabled,
         'b2b-dropdown--disabled': this.disabled,
-      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { class: "b2b-dropdown-select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
+      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (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-dropdown"; }

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

@@ -0,0 +1,52 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { DropdownComponent } from './dropdown';
+it('should render the dropdown', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => h("b2b-dropdown", { label: "test" }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render the dropdown with options', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { label: "test" }, h("option", null, "An option"))),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a hint if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { label: "test", hint: "This is a test hint" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should disable the dropdown', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => h("b2b-dropdown", { label: "test", disabled: true }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should apply an error style to the host element if an error is specified and the select is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { 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 select is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { 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: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { 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/grid/grid.e2e.js

@@ -0,0 +1,17 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Grid', () => {
+  it('should render the grid and children', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-grid>
+        <b2b-grid-row>
+            <b2b-grid-col></b2b-grid-col>
+        </b2b-grid-row>
+    </b2b-grid>`);
+    const grid = await page.find('b2b-grid');
+    expect(grid).not.toBeNull();
+    const row = await page.find('b2b-grid-row');
+    expect(row).not.toBeNull();
+    const col = await page.find('b2b-grid-col');
+    expect(col).not.toBeNull();
+  });
+});

package/dist/collection/components/grid/row.js

@@ -15,7 +15,7 @@ export class B2bGridRowComponent {
         ['display']: 'flex',
         ['flex-wrap']: 'wrap',
         ['box-sizing']: 'border-box',
-      }, class: "b2b-grid--row" }, h("slot", null)));
+      } }, h("slot", null)));
   }
   static get is() { return "b2b-grid-row"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/headline/headline.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 */

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

@@ -0,0 +1,13 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Headline', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-headline>Headline</b2b-headline>`);
+  });
+  it('should render headline component', async () => {
+    const element = await page.find('b2b-headline');
+    expect(element).not.toBeNull();
+    expect(element).toEqualText('Headline');
+  });
+});

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

@@ -0,0 +1,67 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { HeadlineComponent } from './headline';
+it('should use h1 tag with headline 400 size', async () => {
+  const page = await newSpecPage({
+    components: [HeadlineComponent],
+    template: () => (h("b2b-headline", { size: "400" }, "This is a h1 Headline")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h1 class="b2b-headline--400 b2b-headline--left">
+          <slot></slot>
+        </h1>
+      </mock:shadow-root>
+      This is a h1 Headline
+    </b2b-headline>
+  `);
+});
+it('should use h2 tag with headline 200 size', async () => {
+  const page = await newSpecPage({
+    components: [HeadlineComponent],
+    template: () => (h("b2b-headline", { size: "200" }, "This is a h2 Headline")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h2 class="b2b-headline--200 b2b-headline--left">
+          <slot></slot>
+        </h2>
+      </mock:shadow-root>
+      This is a h2 Headline
+    </b2b-headline>
+  `);
+});
+it('should use h3 tag with headline 100 size', async () => {
+  const page = await newSpecPage({
+    components: [HeadlineComponent],
+    template: () => (h("b2b-headline", { size: "100" }, "This is a h3 Headline")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h3 class="b2b-headline--100 b2b-headline--left">
+          <slot></slot>
+        </h3>
+      </mock:shadow-root>
+      This is a h3 Headline
+    </b2b-headline>
+  `);
+});
+it('should use h1 tag as default size', async () => {
+  const page = await newSpecPage({
+    components: [HeadlineComponent],
+    template: () => h("b2b-headline", null, "This is a h3 Headline"),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h1 class="b2b-headline--400 b2b-headline--left">
+          <slot></slot>
+        </h1>
+      </mock:shadow-root>
+      This is a h3 Headline
+    </b2b-headline>
+  `);
+});

package/dist/collection/components/icon/icon.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 */
@@ -227,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 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 */
@@ -222,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);
@@ -234,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);
@@ -265,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 {
@@ -273,25 +272,25 @@
   margin-bottom: var(--b2b-size-10);
 }
 :host(.b2b-input) span {
-  font-size: var(--b2b-size-copy-75);
+  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--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"
       }
     };
   }