@otto-de/b2b-core-components 1.6.1 → 1.8.0

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

@@ -1,6 +1,6 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { CheckboxComponent } from './checkbox';
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { CheckboxComponent } from "./checkbox";
 it('should render the checkbox', async () => {
   const page = await newSpecPage({
     components: [CheckboxComponent],

package/dist/collection/components/checkbox/checkbox.stories.js

@@ -1,16 +1,15 @@
-import { html } from 'lit-html';
-import inputCheckboxDocs from './checkbox.docs.mdx';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, checked, disabled, hint, error, name, value, invalid, }) => {
-  return html `<b2b-checkbox
-    label="${label}"
-    required="${required}"
-    checked="${checked}"
-    disabled="${disabled}"
-    hint="${hint}"
-    error="${error}"
-    name="${name}"
-    value="${value}"
+  return html `<b2b-checkbox
+    label="${label}"
+    required="${required}"
+    checked="${checked}"
+    disabled="${disabled}"
+    hint="${hint}"
+    error="${error}"
+    name="${name}"
+    value="${value}"
     invalid="${invalid}"></b2b-checkbox>`;
 };
 const defaultArgs = {
@@ -48,9 +47,4 @@ export default {
   title: 'Components/Form/Checkbox',
   argTypes: inputCheckboxArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: inputCheckboxDocs,
-    },
-  },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,13 +1,13 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Checkbox-Group', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-            <b2b-checkbox-group label="test label">
-                <b2b-checkbox label="one" value="one" error="test" hint="test"></b2b-checkbox>
-                <b2b-checkbox id="disabled-checkbox" label="two" value="two" error="test" hint="test" disabled></b2b-checkbox>
-            </b2b-checkbox-group>
+    await page.setContent(`
+            <b2b-checkbox-group label="test label">
+                <b2b-checkbox label="one" value="one" error="test" hint="test"></b2b-checkbox>
+                <b2b-checkbox id="disabled-checkbox" label="two" value="two" error="test" hint="test" disabled></b2b-checkbox>
+            </b2b-checkbox-group>
         `);
   });
   it('should render the checkbox group component', async () => {

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

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class CheckboxGroupComponent {
   constructor() {
     this.getChildNodes = () => {
@@ -228,7 +228,8 @@ export class CheckboxGroupComponent {
           "references": {
             "CheckboxEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::CheckboxEventDetail"
             }
           }
         }

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

@@ -1,6 +1,6 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { CheckboxGroupComponent } from './checkbox-group';
+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],

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

@@ -1,19 +1,18 @@
-import { html } from 'lit-html';
-import inputCheckboxGroupDocs from './checkbox-group.docs.mdx';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, disabled, invalid, hint, error, alignment, }) => {
   const firstLabel = 'One';
   const secondLabel = 'Two';
-  return html `<b2b-checkbox-group
-    label="${label}"
-    required="${required}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    hint="${hint}"
-    error="${error}"
-    alignment="${alignment}">
-    <b2b-checkbox label="${firstLabel}"></b2b-checkbox>
-    <b2b-checkbox label="${secondLabel}"></b2b-checkbox>
+  return html `<b2b-checkbox-group
+    label="${label}"
+    required="${required}"
+    disabled="${disabled}"
+    invalid="${invalid}"
+    hint="${hint}"
+    error="${error}"
+    alignment="${alignment}">
+    <b2b-checkbox label="${firstLabel}"></b2b-checkbox>
+    <b2b-checkbox label="${secondLabel}"></b2b-checkbox>
   </b2b-checkbox-group>`;
 };
 const defaultArgs = {
@@ -49,9 +48,4 @@ export default {
   title: 'Components/Form/Checkbox Group',
   argTypes: checkboxGroupArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: inputCheckboxGroupDocs,
-    },
-  },
 };

package/dist/collection/components/chip/chip.css

@@ -0,0 +1,266 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-table-hover: #e6f4ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-45);
+  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --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-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);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:host {
+  overflow: hidden;
+  display: inline-flex;
+  max-width: 100%;
+}
+:host .b2b-chip {
+  white-space: nowrap;
+  overflow: hidden;
+  font-family: var(--b2b-font-family-default);
+  font-size: var(--b2b-size-copy-100);
+  background-color: var(--b2b-color-grey-50);
+  border-radius: var(--b2b-size-50);
+  padding: var(--b2b-size-10) var(--b2b-size-25);
+  line-height: var(--b2b-size-copy-line-height-100);
+  height: var(--b2b-size-70);
+  display: inline-flex;
+  align-items: center;
+  cursor: default;
+  margin-left: var(--b2b-size-20);
+}
+:host .b2b-chip:hover {
+  background: var(--b2b-color-table-expand-hover);
+}
+:host .b2b-chip__label {
+  margin-right: var(--b2b-size-10);
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+:host .b2b-chip__clearIcon {
+  display: flex;
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  fill: var(--b2b-color-icon-default);
+  height: var(--b2b-size-copy-line-height-100);
+  width: var(--b2b-size-50);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transform: rotate(180deg);
+  position: relative;
+}
+:host .b2b-chip--disabled {
+  pointer-events: none;
+  background: var(--b2b-color-grey-25);
+  color: var(--b2b-color-grey-400);
+}
+:host .b2b-chip--disabled__clearIcon {
+  fill: var(--b2b-color-grey-400);
+}

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

@@ -0,0 +1,19 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Chip-Component', () => {
+  it('should render the chip component', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-chip-component label="chip"></b2b-chip-component>`);
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+  });
+  it('should emit b2b-close event on clear icon click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-chip-component label="chip"></b2b-chip-component>`);
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    const clearIcon = await page.find('b2b-chip-component >>>  button.b2b-chip__clearIcon');
+    await clearIcon.click();
+    expect(b2bClose).toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/chip/chip.js

@@ -0,0 +1,138 @@
+import { h, Host, } from "@stencil/core";
+export class B2bChipComponent {
+  constructor() {
+    this.onClick = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.b2bClose.emit({ value: this.value });
+    };
+    this.clearIcon = (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.85352 3.14648C7.6582 2.95117 7.3418 2.95117 7.14648 3.14648L5.5 4.79297L3.85352 3.14648C3.6582 2.95117 3.3418 2.95117 3.14648 3.14648C2.95117 3.3418 2.95117 3.6582 3.14648 3.85352L4.79297 5.5L3.14648 7.14648C2.95117 7.3418 2.95117 7.6582 3.14648 7.85352C3.24414 7.95117 3.37207 8 3.5 8C3.62793 8 3.75586 7.95117 3.85352 7.85352L5.5 6.20703L7.14648 7.85352C7.24414 7.95117 7.37207 8 7.5 8C7.62793 8 7.75586 7.95117 7.85352 7.85352C8.04883 7.6582 8.04883 7.3418 7.85352 7.14648L6.20703 5.5L7.85352 3.85352C8.04883 3.6582 8.04883 3.3418 7.85352 3.14648ZM5.5 0C2.46729 0 0 2.46729 0 5.5C0 8.53271 2.46729 11 5.5 11C8.53271 11 11 8.53271 11 5.5C11 2.46729 8.53271 0 5.5 0ZM5.5 10C3.01855 10 1 7.98145 1 5.5C1 3.01855 3.01855 1 5.5 1C7.98145 1 10 3.01855 10 5.5C10 7.98145 7.98145 10 5.5 10Z" })));
+    this.label = undefined;
+    this.disabled = false;
+    this.hasCloseButton = true;
+    this.value = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'b2b-chip': true,
+        'b2b-chip--disabled': this.disabled,
+      } }, h("span", { class: {
+        'b2b-chip__label': true,
+      } }, this.label), this.hasCloseButton && (h("button", { class: {
+        'b2b-chip__clearIcon': true,
+        'b2b-chip--disabled__clearIcon': this.disabled,
+      }, onClick: this.onClick }, this.clearIcon)))));
+  }
+  static get is() { return "b2b-chip-component"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["chip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text content of the chip. It is required."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the chip is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hasCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the chip component has a close button. Per default it is true."
+        },
+        "attribute": "has-close-button",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "It is only used when the chip component participates in a group"
+        },
+        "attribute": "value",
+        "reflect": true
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bClose",
+        "name": "b2b-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event will be triggered when the chip element is closed"
+        },
+        "complexType": {
+          "original": "ChipComponentEventDetail",
+          "resolved": "ChipComponentEventDetail<any>",
+          "references": {
+            "ChipComponentEventDetail": {
+              "location": "import",
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::ChipComponentEventDetail"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/chip/chip.stories.js

@@ -0,0 +1,44 @@
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
+const Template = ({ label, disabled, value, hasCloseButton }) => {
+  return html `<b2b-chip-component
+    label="${label}"
+    disabled="${disabled}"
+    value="${value}"
+    has-close-button="${hasCloseButton}"></b2b-chip-component>`;
+};
+const TruncTemplate = ({ label, disabled, value, hasCloseButton }) => {
+  return html `<div
+    style="width: 170px; border: 1px solid grey; border-radius: 3px; padding: 6px;">
+    <b2b-chip-component
+      label="${label}"
+      disabled="${disabled}"
+      value="${value}"
+      has-close-button="${hasCloseButton}"></b2b-chip-component>
+  </div>`;
+};
+const defaultArgs = {
+  label: 'Chip Label',
+  disabled: false,
+  value: '',
+  hasCloseButton: true,
+  truncate: false,
+};
+export const story010Default = Template.bind({});
+story010Default.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Default Chip' });
+story010Default.storyName = 'Default';
+export const story020Disabled = Template.bind({});
+story020Disabled.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Disabled Chip', disabled: true });
+story020Disabled.storyName = 'Disabled';
+export const story030WithoutButton = Template.bind({});
+story030WithoutButton.args = Object.assign(Object.assign({}, defaultArgs), { label: ' Chip without button', hasCloseButton: false });
+story030WithoutButton.storyName = 'Without Button';
+export const story040WithTruncatedText = TruncTemplate.bind({});
+story040WithTruncatedText.args = Object.assign(Object.assign({}, defaultArgs), { label: ' Chip with truncated text' });
+story040WithTruncatedText.storyName = 'Truncated Text';
+const chipComponentArgs = getArgTypes('b2b-chip-component');
+export default {
+  title: 'Components/Interaction/Chip',
+  argTypes: chipComponentArgs,
+  viewMode: 'docs',
+};

package/dist/collection/components/dropdown/dropdown.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,13 +1,13 @@
-import { newE2EPage } from '@stencil/core/testing';
+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>
+    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 () => {