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

package/dist/cjs/index-04e07a00.js

@@ -1854,6 +1854,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './b2b-anchor.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'b2b-breadcrumb.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './b2b-breadcrumb.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'b2b-breadcrumb-item.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './b2b-breadcrumb-item.cjs.entry.js')); }).then(processMod, consoleError);
         case 'b2b-card.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -1862,6 +1870,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './b2b-checkbox-group.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'b2b-chip-component.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './b2b-chip-component.cjs.entry.js')); }).then(processMod, consoleError);
         case 'b2b-dropdown.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["b2b-search.cjs",[[1,"b2b-search",{"placeholder":[1],"optionsList":[16],"value":[1537],"disabled":[516],"closed":[32]},[[0,"keydown","handleKeyDown"]]]]],["b2b-table-row.cjs",[[1,"b2b-table-row",{"highlight":[4],"color":[1],"accordionType":[1,"accordion-type"],"selectable":[4],"value":[1],"indeterminate":[4],"checked":[1028],"isOpen":[32],"toggleAccordion":[64]},[[0,"b2b-change","toggleSelected"]]]]],["b2b-wizard-step.cjs",[[1,"b2b-wizard-step",{"state":[1],"step":[1],"checkIcon":[4,"check-icon"]}]]],["b2b-modal.cjs",[[1,"b2b-modal",{"heading":[1],"opened":[1540],"backdropDismiss":[4,"backdrop-dismiss"],"escDismiss":[4,"esc-dismiss"],"variant":[1],"iconHover":[32],"isOpen":[32]},[[0,"keydown","handleKeypress"]]]]],["b2b-pagination.cjs",[[1,"b2b-pagination",{"totalPages":[2,"total-pages"],"activePage":[1538,"active-page"],"ariaLabelNextPage":[1,"aria-label-next-page"],"ariaLabelPreviousPage":[1,"aria-label-previous-page"]}]]],["b2b-alert.cjs",[[1,"b2b-alert",{"type":[1],"size":[1],"opened":[1028],"hasCloseButton":[4,"has-close-button"],"customIcon":[4,"custom-icon"]}]]],["b2b-checkbox-group.cjs",[[1,"b2b-checkbox-group",{"label":[1],"required":[4],"disabled":[4],"invalid":[4],"alignment":[1],"hint":[1],"error":[1]},[[0,"b2b-change","handleCheckboxChange"]]]]],["b2b-dropdown.cjs",[[1,"b2b-dropdown",{"label":[1],"required":[516],"name":[513],"disabled":[516],"invalid":[516],"hint":[1],"error":[1]}]]],["b2b-radio-button.cjs",[[1,"b2b-radio-button",{"label":[1],"required":[516],"name":[513],"checked":[1540],"disabled":[516],"invalid":[4],"value":[513],"hint":[1],"error":[1]}]]],["b2b-radio-group.cjs",[[1,"b2b-radio-group",{"name":[1],"label":[1],"required":[4],"alignment":[1],"disabled":[516],"invalid":[516],"hint":[1],"error":[1],"currentValue":[32]},[[0,"b2b-change","handleRadioButtonChange"]]]]],["b2b-required-separator.cjs",[[1,"b2b-required-separator",{"label":[1]}]]],["b2b-tab-group.cjs",[[1,"b2b-tab-group",{"useRouter":[4,"use-router"]},[[0,"click","handleClick"],[0,"keydown","handleKeydown"]]]]],["b2b-textarea.cjs",[[1,"b2b-textarea",{"label":[1],"required":[516],"placeholder":[513],"disabled":[516],"invalid":[516],"autofocus":[516],"resize":[513],"hint":[1],"error":[1],"value":[1537],"name":[513],"maxLength":[514,"max-length"]}]]],["b2b-anchor.cjs",[[1,"b2b-anchor",{"href":[1],"download":[1],"target":[1],"size":[1]}]]],["b2b-card.cjs",[[1,"b2b-card",{"disabled":[4],"href":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","onKeyDown"]]]]],["b2b-grid.cjs",[[1,"b2b-grid",{"margin":[2]}]]],["b2b-grid-col.cjs",[[1,"b2b-grid-col",{"span":[514],"textAlign":[1,"text-align"]}]]],["b2b-grid-row.cjs",[[1,"b2b-grid-row",{"columnGap":[2,"column-gap"],"rowGap":[2,"row-gap"],"alignItems":[1,"align-items"],"justify":[1]}]]],["b2b-label.cjs",[[1,"b2b-label",{"type":[1]}]]],["b2b-paragraph.cjs",[[1,"b2b-paragraph",{"weight":[1],"size":[1],"align":[1]}]]],["b2b-scrollable-container.cjs",[[1,"b2b-scrollable-container"]]],["b2b-tab.cjs",[[1,"b2b-tab",{"selected":[516],"disabled":[4],"invalid":[4]}]]],["b2b-tab-panel.cjs",[[1,"b2b-tab-panel"]]],["b2b-table.cjs",[[1,"b2b-table",{"size":[1]},[[0,"b2b-change","onColumnSelected"]]]]],["b2b-table-rowgroup.cjs",[[1,"b2b-table-rowgroup",{"type":[1],"accordion":[4],"selectable":[4],"opened":[516],"selectedValues":[32],"indeterminate":[32]},[[0,"b2b-open","handleOpenChange"],[0,"b2b-row-selected","handleSelectedChange"]]]]],["b2b-toggle-button.cjs",[[1,"b2b-toggle-button",{"label":[1],"name":[513],"checked":[1540],"disabled":[516],"value":[513]}]]],["b2b-toggle-group.cjs",[[1,"b2b-toggle-group",{"name":[1],"disabled":[516],"currentValue":[32]},[[0,"b2b-change","handleToggleButtonChange"]]]]],["b2b-tooltip.cjs",[[1,"b2b-tooltip",{"position":[1],"content":[1],"trigger":[1],"opened":[1540]}]]],["b2b-wizard.cjs",[[1,"b2b-wizard",{"activeStep":[1,"active-step"],"custom":[4],"checkIcon":[4,"check-icon"]}]]],["b2b-wizard-icon.cjs",[[1,"b2b-wizard-icon",{"step":[1],"state":[1],"checkIcon":[4,"check-icon"]}]]],["b2b-headline.cjs",[[1,"b2b-headline",{"size":[1],"align":[1],"noMargin":[4,"no-margin"]}]]],["b2b-input-group_2.cjs",[[1,"b2b-input-list",{"label":[1],"required":[516],"placeholder":[513],"optionsList":[16],"value":[1537],"disabled":[516],"groupDisabled":[4,"group-disabled"],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]]],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1]}]]],["b2b-rounded-icon.cjs",[[1,"b2b-rounded-icon",{"color":[1],"borderColor":[1,"border-color"],"contentColor":[1,"content-color"]}]]],["b2b-separator.cjs",[[1,"b2b-separator",{"alignment":[1]}]]],["b2b-input-label.cjs",[[1,"b2b-input-label",{"required":[4],"disabled":[4]}]]],["b2b-checkbox_3.cjs",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"indeterminate":[1028],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4],"standalone":[4],"groupDisabled":[4,"group-disabled"]}],[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1],"useTextEllipsis":[32]}],[1,"b2b-table-header",{"divider":[4],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"active":[32]}]]],["b2b-input_2.cjs",[[1,"b2b-input",{"label":[1],"required":[516],"type":[513],"disabled":[516],"invalid":[516],"placeholder":[513],"value":[1537],"name":[513],"hint":[1],"error":[1],"autofocus":[4],"groupDisabled":[4,"group-disabled"],"hasFocus":[32],"hasTextPrefix":[32],"hasTextSuffix":[32],"setFocus":[64],"clearInput":[64]}],[0,"b2b-input-list-option",{"option":[1]},[[0,"keydown","handleKeyDown"]]]]],["b2b-button_2.cjs",[[1,"b2b-button",{"variant":[1],"type":[1],"size":[1],"disabled":[516],"loading":[4],"active":[516],"href":[1],"target":[1],"download":[1],"groupDisabled":[4,"group-disabled"],"setFocus":[64]},[[2,"click","handleHostClick"]]],[1,"b2b-spinner",{"size":[1],"color":[1]}]]],["b2b-icon.cjs",[[1,"b2b-icon",{"icon":[1],"color":[1],"size":[1],"clickable":[4],"pathData":[32]}]]]], options);
+  return index.bootstrapLazy([["b2b-search.cjs",[[1,"b2b-search",{"placeholder":[1],"optionsList":[16],"value":[1537],"disabled":[516],"closed":[32]},[[0,"keydown","handleKeyDown"]]]]],["b2b-table-row.cjs",[[1,"b2b-table-row",{"highlight":[4],"color":[1],"accordionType":[1,"accordion-type"],"selectable":[4],"value":[1],"indeterminate":[4],"checked":[1028],"isOpen":[32],"toggleAccordion":[64]},[[0,"b2b-change","toggleSelected"]]]]],["b2b-wizard-step.cjs",[[1,"b2b-wizard-step",{"state":[1],"step":[1],"checkIcon":[4,"check-icon"]}]]],["b2b-modal.cjs",[[1,"b2b-modal",{"heading":[1],"opened":[1540],"backdropDismiss":[4,"backdrop-dismiss"],"escDismiss":[4,"esc-dismiss"],"variant":[1],"iconHover":[32],"isOpen":[32]},[[0,"keydown","handleKeypress"]]]]],["b2b-pagination.cjs",[[1,"b2b-pagination",{"totalPages":[2,"total-pages"],"activePage":[1538,"active-page"],"ariaLabelNextPage":[1,"aria-label-next-page"],"ariaLabelPreviousPage":[1,"aria-label-previous-page"]}]]],["b2b-alert.cjs",[[1,"b2b-alert",{"type":[1],"size":[1],"opened":[1028],"hasCloseButton":[4,"has-close-button"],"customIcon":[4,"custom-icon"]}]]],["b2b-checkbox-group.cjs",[[1,"b2b-checkbox-group",{"label":[1],"required":[4],"disabled":[4],"invalid":[4],"alignment":[1],"hint":[1],"error":[1]},[[0,"b2b-change","handleCheckboxChange"]]]]],["b2b-dropdown.cjs",[[1,"b2b-dropdown",{"label":[1],"required":[516],"name":[513],"disabled":[516],"invalid":[516],"hint":[1],"error":[1]}]]],["b2b-radio-button.cjs",[[1,"b2b-radio-button",{"label":[1],"required":[516],"name":[513],"checked":[1540],"disabled":[516],"invalid":[4],"value":[513],"hint":[1],"error":[1]}]]],["b2b-radio-group.cjs",[[1,"b2b-radio-group",{"name":[1],"label":[1],"required":[4],"alignment":[1],"disabled":[516],"invalid":[516],"hint":[1],"error":[1],"currentValue":[32]},[[0,"b2b-change","handleRadioButtonChange"]]]]],["b2b-required-separator.cjs",[[1,"b2b-required-separator",{"label":[1]}]]],["b2b-tab-group.cjs",[[1,"b2b-tab-group",{"useRouter":[4,"use-router"]},[[0,"click","handleClick"],[0,"keydown","handleKeydown"]]]]],["b2b-textarea.cjs",[[1,"b2b-textarea",{"label":[1],"required":[516],"placeholder":[513],"disabled":[516],"invalid":[516],"autofocus":[516],"resize":[513],"hint":[1],"error":[1],"value":[1537],"name":[513],"maxLength":[514,"max-length"],"height":[1]}]]],["b2b-anchor.cjs",[[1,"b2b-anchor",{"href":[1],"download":[1],"target":[1],"size":[1]}]]],["b2b-breadcrumb.cjs",[[1,"b2b-breadcrumb",null,[[0,"b2b-change","onSelectedChange"]]]]],["b2b-breadcrumb-item.cjs",[[1,"b2b-breadcrumb-item",{"href":[1],"value":[8],"active":[1028]}]]],["b2b-card.cjs",[[1,"b2b-card",{"disabled":[4],"href":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","onKeyDown"]]]]],["b2b-chip-component.cjs",[[1,"b2b-chip-component",{"label":[1],"disabled":[4],"hasCloseButton":[4,"has-close-button"],"value":[520]}]]],["b2b-grid.cjs",[[1,"b2b-grid",{"margin":[2]}]]],["b2b-grid-col.cjs",[[1,"b2b-grid-col",{"span":[514],"textAlign":[1,"text-align"]}]]],["b2b-grid-row.cjs",[[1,"b2b-grid-row",{"columnGap":[2,"column-gap"],"rowGap":[2,"row-gap"],"alignItems":[1,"align-items"],"justify":[1]}]]],["b2b-label.cjs",[[1,"b2b-label",{"type":[1]}]]],["b2b-paragraph.cjs",[[1,"b2b-paragraph",{"weight":[1],"size":[1],"align":[1]}]]],["b2b-scrollable-container.cjs",[[1,"b2b-scrollable-container"]]],["b2b-tab.cjs",[[1,"b2b-tab",{"selected":[516],"disabled":[4],"invalid":[4]}]]],["b2b-tab-panel.cjs",[[1,"b2b-tab-panel"]]],["b2b-table.cjs",[[1,"b2b-table",{"size":[1]},[[0,"b2b-change","onColumnSelected"]]]]],["b2b-table-rowgroup.cjs",[[1,"b2b-table-rowgroup",{"type":[1],"accordion":[4],"selectable":[4],"opened":[516],"selectedValues":[32],"indeterminate":[32]},[[0,"b2b-open","handleOpenChange"],[0,"b2b-row-selected","handleSelectedChange"]]]]],["b2b-toggle-button.cjs",[[1,"b2b-toggle-button",{"label":[1],"name":[513],"checked":[1540],"disabled":[516],"value":[513]}]]],["b2b-toggle-group.cjs",[[1,"b2b-toggle-group",{"name":[1],"disabled":[516],"currentValue":[32]},[[0,"b2b-change","handleToggleButtonChange"]]]]],["b2b-tooltip.cjs",[[1,"b2b-tooltip",{"position":[1],"content":[1],"trigger":[1],"opened":[1540]}]]],["b2b-wizard.cjs",[[1,"b2b-wizard",{"activeStep":[1,"active-step"],"custom":[4],"checkIcon":[4,"check-icon"]}]]],["b2b-wizard-icon.cjs",[[1,"b2b-wizard-icon",{"step":[1],"state":[1],"checkIcon":[4,"check-icon"]}]]],["b2b-headline.cjs",[[1,"b2b-headline",{"size":[1],"align":[1],"noMargin":[4,"no-margin"]}]]],["b2b-input-group_2.cjs",[[1,"b2b-input-list",{"label":[1],"required":[516],"placeholder":[513],"optionsList":[16],"value":[1537],"disabled":[516],"groupDisabled":[4,"group-disabled"],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]]],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1]}]]],["b2b-rounded-icon.cjs",[[1,"b2b-rounded-icon",{"color":[1],"borderColor":[1,"border-color"],"contentColor":[1,"content-color"]}]]],["b2b-separator.cjs",[[1,"b2b-separator",{"alignment":[1]}]]],["b2b-checkbox_3.cjs",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"indeterminate":[1028],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4],"standalone":[4],"groupDisabled":[4,"group-disabled"]}],[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1],"useTextEllipsis":[32]}],[1,"b2b-table-header",{"divider":[4],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"contentAlign":[1,"content-align"],"active":[32],"iconAlign":[32]}]]],["b2b-input_2.cjs",[[1,"b2b-input",{"label":[1],"required":[516],"type":[513],"disabled":[516],"invalid":[516],"placeholder":[513],"value":[1537],"name":[513],"hint":[1],"error":[1],"autofocus":[4],"groupDisabled":[4,"group-disabled"],"hasFocus":[32],"hasTextPrefix":[32],"hasTextSuffix":[32],"setFocus":[64],"clearInput":[64]}],[0,"b2b-input-list-option",{"option":[1]},[[0,"keydown","handleKeyDown"]]]]],["b2b-button_2.cjs",[[1,"b2b-button",{"variant":[1],"type":[1],"size":[1],"disabled":[516],"loading":[4],"active":[516],"href":[1],"target":[1],"download":[1],"groupDisabled":[4,"group-disabled"],"setFocus":[64]},[[2,"click","handleHostClick"]]],[1,"b2b-spinner",{"size":[1],"color":[1]}]]],["b2b-icon.cjs",[[1,"b2b-icon",{"icon":[1],"color":[1],"size":[1],"clickable":[4],"pathData":[32]}]]],["b2b-input-label.cjs",[[1,"b2b-input-label",{"required":[4],"disabled":[4]}]]]], options);
   });
 };
 

package/dist/cjs/{table.types-00c8228a.js → table.types-196dc690.js}

@@ -14,6 +14,11 @@ const ContentAlignment = {
   RIGHT: 'right',
   CENTER: 'center',
 };
+const SortIconAlignment = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center',
+};
 const TableSortDirections = {
   NOT: 'not-sorted',
   ASC: 'ascending',
@@ -31,6 +36,7 @@ const TableColourOptions = {
 };
 
 exports.ContentAlignment = ContentAlignment;
+exports.SortIconAlignment = SortIconAlignment;
 exports.TableAccordionRowTypes = TableAccordionRowTypes;
 exports.TableColourOptions = TableColourOptions;
 exports.TableRowgroupTypes = TableRowgroupTypes;

package/dist/collection/collection-manifest.json

@@ -2,10 +2,13 @@
   "entries": [
     "./components/alert/alert.js",
     "./components/anchor/anchor.js",
+    "./components/breadcrumb/breadcrumb-item.js",
+    "./components/breadcrumb/breadcrumb.js",
     "./components/button/button.js",
     "./components/card/card.js",
     "./components/checkbox/checkbox.js",
     "./components/checkbox-group/checkbox-group.js",
+    "./components/chip/chip.js",
     "./components/dropdown/dropdown.js",
     "./components/grid/column.js",
     "./components/grid/grid.js",

package/dist/collection/components/alert/alert.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,9 +1,7 @@
 import { html } from 'lit-html';
 import { screen } from '@storybook/testing-library';
-import alertDocs from './alert.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
-// @ts-ignore IDE can not find this dep, but storybook is happy
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 const Template = ({ type, opened, size, hasCloseButton, customIcon, }) => {
   const [_, updateArgs] = useArgs();
   const openAlert = () => {
@@ -75,9 +73,4 @@ export default {
   title: 'Components/Status & Feedback/Alert',
   argTypes: alertArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: alertDocs,
-    },
-  },
 };

package/dist/collection/components/anchor/anchor.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,5 +1,4 @@
 import { html } from 'lit-html';
-import anchorDocs from './anchor.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 const Template = ({ href, download, size, target }) => {
   return html ` <b2b-anchor
@@ -36,9 +35,4 @@ export default {
   title: 'Components/Interaction/Anchor',
   argTypes: anchorArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: anchorDocs,
-    },
-  },
 };

package/dist/collection/components/breadcrumb/breadcrumb-item.js

@@ -0,0 +1,123 @@
+import { Host, h } from '@stencil/core';
+export class BreadCrumbItemComponent {
+  constructor() {
+    this.onClick = () => {
+      if (this.active || this.href != null) {
+        return;
+      }
+      this.b2bChange.emit(this.value);
+      this.active = true;
+    };
+    this.onKeyDown = (event) => {
+      if (event.key != 'enter' || this.active) {
+        return;
+      }
+      this.b2bChange.emit();
+      this.active = true;
+    };
+    this.href = null;
+    this.value = undefined;
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { onClick: this.onClick, onKeyDown: this.onKeyDown, tabindex: Boolean(this.href) ? null : 0 }, h("span", { class: {
+        'b2b-breadcrumb-nav__item': true,
+        'b2b-breadcrumb-nav__item--active': this.active,
+      } }, this.href != null ? (h("a", { href: this.href }, h("slot", null))) : (h("slot", null)))));
+  }
+  static get is() { return "b2b-breadcrumb-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["breadcrumb.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["breadcrumb.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked."
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bChange",
+        "name": "b2b-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emits whenever a breadcrumb item is clicked and no href is specified"
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "BreadCrumbChangeEventDetail",
+          "resolved": "BreadCrumbChangeEventDetail<any>",
+          "references": {
+            "BreadCrumbChangeEventDetail": {
+              "location": "import",
+              "path": "../../utils/interfaces/interaction.interface"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,250 @@
+@charset "UTF-8";
+/**
+ * Do not edit directly
+ * Generated on Thu, 26 Oct 2023 14:16:21 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 Thu, 26 Oct 2023 14:16:22 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 .b2b-breadcrumb-nav {
+  z-index: 99;
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 0.75rem 0;
+  height: var(--b2b-size-90);
+  margin-bottom: 1.125rem;
+  border-bottom: var(--b2b-size-border-width-50) solid var(--b2b-color-grey-200);
+}
+:host .b2b-breadcrumb-nav__item {
+  font-size: var(--b2b-size-copy-125);
+  line-height: var(--b2b-size-copy-line-height-125);
+  display: inline-flex;
+  color: var(--b2b-color-grey-400);
+  cursor: pointer;
+}
+:host .b2b-breadcrumb-nav__item a {
+  color: var(--b2b-color-grey-400);
+  text-decoration: none;
+}
+:host .b2b-breadcrumb-nav__item:hover,
+:host .b2b-breadcrumb-nav__item a:hover {
+  color: var(--b2b-color-red-100);
+}
+:host .b2b-breadcrumb-nav__item--active:hover,
+:host .b2b-breadcrumb-nav__item--active a:hover {
+  cursor: default;
+  color: var(--b2b-color-grey-400);
+}
+::slotted(*:not(:last-child))::after {
+  content: "»";
+  color: var(--b2b-color-grey-400);
+  margin: 0 0.375rem;
+}

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

@@ -0,0 +1,50 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Breadcrumb', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-breadcrumb>
+            <b2b-breadcrumb-item value="one">First Page</b2b-breadcrumb-item>
+            <b2b-breadcrumb-item value="two" active>Second Page</b2b-breadcrumb-item>
+            <b2b-breadcrumb-item value="three" href="test">Last Page</b2b-breadcrumb-item>
+        </b2b-breadcrumb>`);
+  });
+  it('should render the breadcrumb', async () => {
+    const element = await page.find('b2b-breadcrumb');
+    const items = await page.findAll('b2b-breadcrumb-item');
+    expect(element).toBeDefined();
+    expect(items).toBeDefined();
+    expect(items.length).toBe(3);
+  });
+  it('should emit when an item is clicked', async () => {
+    const selectEventSpy = await page.spyOnEvent('b2b-selected');
+    const item = await page.find({ text: 'First Page' });
+    await item.click();
+    await page.waitForChanges();
+    expect(selectEventSpy).toHaveReceivedEventDetail({ value: 'one' });
+    expect(await item.getProperty('active')).toBe(true);
+  });
+  it('should not emit when an item with a link is clicked', async () => {
+    const selectEventSpy = await page.spyOnEvent('b2b-selected');
+    const item = await page.find({ text: 'Last Page' });
+    await item.click();
+    await page.waitForChanges();
+    expect(selectEventSpy).not.toHaveReceivedEvent();
+  });
+  it('should not emit when an item is currently selected and clicked', async () => {
+    const selectEventSpy = await page.spyOnEvent('b2b-selected');
+    const item = await page.find({ text: 'Second Page' });
+    await item.click();
+    await page.waitForChanges();
+    expect(selectEventSpy).not.toHaveReceivedEvent();
+  });
+  it('should change state of all other items when an item that is not currently selected is clicked', async () => {
+    const item = await page.find({ text: 'First Page' });
+    await item.click();
+    await page.waitForChanges();
+    const second = await page.find({ text: 'Second Page' });
+    const third = await page.find({ text: 'Last Page' });
+    expect(await second.getProperty('active')).toBe(false);
+    expect(await third.getProperty('active')).toBe(false);
+  });
+});