@otto-de/b2b-core-components 1.9.0-beta.1 → 1.9.0

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

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { getArgTypes } from "../../docs/config/utils";
-import { userEvent } from "@storybook/testing-library";
 import { html } from "lit-html";
 import { repeat } from "lit/directives/repeat.js";
 import { sampleData, smallSampleData, longSampleData, userSampleData, } from "./stories.data";
@@ -42,7 +41,7 @@ const meta = {
     firstRowHeight: 'auto',
     contentAlign: 'left',
   },
-  argTypes: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, tableArgs), cellArgs), rowArgs), headerArgs), { data: { table: { disable: true } }, parentWidth: { table: { disable: true } }, firstColumnWidth: { table: { disable: true } }, firstRowHeight: { table: { disable: true } } }),
+  argTypes: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, tableArgs), cellArgs), rowArgs), headerArgs), { data: { table: { disable: true } }, parentWidth: { table: { disable: true } }, firstColumnWidth: { table: { disable: true } }, firstRowHeight: { table: { disable: true } }, colspan: { table: { disable: true } }, divider: { table: { disable: true } }, checked: { table: { disable: true } }, indeterminate: { table: { disable: true } }, fixed: { table: { disable: true } }, sortId: { table: { disable: true } } }),
   render: (_a) => {
     var args = __rest(_a, []);
     return html `<div style="width: ${args.parentWidth}"><b2b-table size="${args.size}">
@@ -223,25 +222,11 @@ export const SortableTable = {
   args: Object.assign(Object.assign({}, SortableTableMeta.args), { contentAlign: 'left', align: 'left', data: userSampleData }),
   decorators: SortableTableMeta.decorators,
   render: RenderSortableTable,
-  play: async ({ canvasElement }) => {
-    setTimeout(async () => {
-      const header = await canvasElement.querySelector('b2b-table-header');
-      const sortArrow = header.shadowRoot.querySelector('div');
-      await userEvent.click(sortArrow);
-    }, 2000);
-  },
 };
 export const SortableTableRightAlign = {
   args: Object.assign(Object.assign({}, SortableTableMeta.args), { contentAlign: 'right', align: 'right', data: userSampleData }),
   decorators: SortableTableMeta.decorators,
   render: RenderSortableTable,
-  play: async ({ canvasElement }) => {
-    setTimeout(async () => {
-      const header = await canvasElement.querySelector('b2b-table-header');
-      const sortArrow = header.shadowRoot.querySelector('div');
-      await userEvent.click(sortArrow);
-    }, 1000);
-  },
 };
 export const AccordionTable = {
   args: Object.assign({}, meta.args),
@@ -299,7 +284,7 @@ export const AccordionTable = {
   </div>`;
   },
 };
-export const Selectable = {
+export const SelectableTable = {
   args: Object.assign({}, meta.args),
   render: (_a) => {
     var args = __rest(_a, []);
@@ -355,3 +340,53 @@ export const Selectable = {
   </div>`;
   },
 };
+export const ColspanTable = {
+  args: Object.assign(Object.assign({}, meta.args), { size: 'colspan', selectable: false, withDividers: true }),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<div style="width: 500px">
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header" selectable="${args.selectable}">
+        <b2b-table-row>
+          <b2b-table-header divider="${args.withDividers}" colspan="2"
+            >2 Columns</b2b-table-header
+          >
+          <b2b-table-header divider="${args.withDividers}"
+            >1 Column</b2b-table-header
+          >
+          <b2b-table-header>1 Column</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" selectable="${args.selectable}">
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell>1 Column</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}" colspan="2"
+            >2 Columns</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell>1 Column</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+    </b2b-table>
+  </div>`;
+  },
+};

package/dist/collection/components/table/utils.js

@@ -4,6 +4,20 @@ export function updateCheckboxState(rows, header) {
   header.checked = everySelected;
   header.indeterminate = someSelected && !everySelected;
 }
+/** Sets appropriate column width for colspan table */
+export function setFlexBase(host, colspan, totalCols, selectable, accordion) {
+  const flexBase = colspan != undefined ? colspan : 1;
+  let border = 0;
+  // factor in dividers for multi columns
+  if (flexBase > 1) {
+    border = flexBase;
+  }
+  // calculate space for control columns
+  const checkboxSpace = selectable ? (40 / totalCols) * flexBase : 0;
+  const accordionSpace = accordion ? (48 / totalCols) * flexBase : 0;
+  const style = `calc((${(flexBase / totalCols) * 100}% - ${checkboxSpace + accordionSpace}px) - ${24 - border}px)`;
+  host.style.flexBasis = style;
+}
 export function getAllRows(hostEl) {
   return Array.from(hostEl.querySelectorAll('b2b-table-row'));
 }

package/dist/collection/components/textarea/textarea.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --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-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

package/dist/collection/components/toggle-button/toggle-button.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --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-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

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

@@ -0,0 +1,273 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Feb 2024 09:42:32 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-250: #850012;
+  --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-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --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 Thu, 15 Feb 2024 09:42:32 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-250: #850012;
+  --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 .b2b-toggle-chip {
+  font-size: var(--b2b-size-copy-100);
+  line-height: var(--b2b-size-copy-line-height-100);
+  display: inline-block;
+}
+:host .b2b-toggle-chip__input {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  width: 1px;
+}
+:host .b2b-toggle-chip__input:focus + label {
+  outline: 2px solid -webkit-focus-ring-color;
+  z-index: 1;
+  transition: none;
+}
+:host .b2b-toggle-chip__label {
+  display: inline-block;
+  padding: var(--b2b-size-15) var(--b2b-size-25) 5px var(--b2b-size-25);
+  border-radius: var(--b2b-size-50);
+  color: var(--b2b-color-black-100);
+}
+:host .b2b-toggle-chip__label:hover {
+  background-color: var(--b2b-color-table-hover);
+  color: var(--b2b-color-black-100);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+:host .b2b-toggle-chip__label--grey {
+  background-color: var(--b2b-color-grey-100);
+}
+:host .b2b-toggle-chip__label--white {
+  background-color: var(--b2b-color-white-100);
+}
+:host .b2b-toggle-chip__label--white.b2b-toggle-chip__label--disabled {
+  background-color: var(--b2b-color-white-100);
+}
+:host .b2b-toggle-chip__label--white.b2b-toggle-chip__label--disabled:hover {
+  background-color: var(--b2b-color-white-100);
+}
+:host .b2b-toggle-chip__label--active {
+  color: var(--b2b-color-white-100);
+  background-color: var(--b2b-color-black-100);
+}
+:host .b2b-toggle-chip__label--disabled {
+  background-color: var(--b2b-color-grey-100);
+  color: var(--b2b-color-grey-300);
+  user-select: none;
+}
+:host .b2b-toggle-chip__label--disabled:hover {
+  cursor: default;
+  background-color: var(--b2b-color-grey-100);
+  color: var(--b2b-color-grey-300);
+}

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

@@ -0,0 +1,47 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('b2b-toggle-chip', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-toggle-chip label="test-chip" name="chip-1" value="chip-1"></b2b-toggle-chip>`);
+  });
+  it('renders', async () => {
+    const element = await page.find('b2b-toggle-chip');
+    expect(element).not.toBeNull();
+  });
+  it('emits the assigned value when clicked', async () => {
+    const element = await page.find('b2b-toggle-chip');
+    const selectedSpy = await page.spyOnEvent('b2b-selected');
+    await element.click();
+    await page.waitForChanges();
+    expect(await element.getProperty('active')).toBe(true);
+    expect(selectedSpy).toHaveReceivedEventDetail({ value: 'chip-1' });
+  });
+  it('emits the assigned value when navigated with a keyboard', async () => {
+    const element = await page.find('b2b-toggle-chip');
+    const selectedSpy = await page.spyOnEvent('b2b-selected');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    expect(await element.getProperty('active')).toBe(true);
+    expect(selectedSpy).toHaveReceivedEventDetail({ value: 'chip-1' });
+  });
+  it('does not emit if it is already active', async () => {
+    const element = await page.find('b2b-toggle-chip');
+    const selectedSpy = await page.spyOnEvent('b2b-selected');
+    await element.setProperty('active', true);
+    await page.waitForChanges();
+    await element.click();
+    await page.waitForChanges();
+    expect(selectedSpy).not.toHaveReceivedEvent();
+  });
+  it('does not emit if it is disabled', async () => {
+    const element = await page.find('b2b-toggle-chip');
+    const selectedSpy = await page.spyOnEvent('b2b-selected');
+    await element.setAttribute('disabled', true);
+    await page.waitForChanges();
+    await element.click();
+    await page.waitForChanges();
+    expect(selectedSpy).not.toHaveReceivedEvent();
+  });
+});