@otto-de/b2b-core-components 1.0.1 → 1.1.0

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f680aee0.js');
+const index = require('./index-494f6064.js');
 
 /*
  Stencil Client Patch Esm v3.0.1 | MIT Licensed | https://stenciljs.com
@@ -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],"closed":[32]}]]],["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.cjs",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4]}]]],["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-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-cell.cjs",[[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1]}]]],["b2b-table-header.cjs",[[1,"b2b-table-header",{"divider":[4],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"active":[32]}]]],["b2b-table-row.cjs",[[1,"b2b-table-row",{"highlight":[4],"color":[1]}]]],["b2b-table-rowgroup.cjs",[[1,"b2b-table-rowgroup",{"type":[1]}]]],["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-headline.cjs",[[1,"b2b-headline",{"size":[1],"align":[1],"noMargin":[4,"no-margin"]}]]],["b2b-input-label.cjs",[[1,"b2b-input-label",{"required":[4],"disabled":[4]}]]],["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],"hasFocus":[32],"hasTextPrefix":[32],"hasTextSuffix":[32],"setFocus":[64]}],[0,"b2b-input-list-option",{"option":[1]},[[0,"keydown","handleKeyDown"]]]]],["b2b-input-group_2.cjs",[[1,"b2b-input-list",{"label":[1],"required":[516],"placeholder":[513],"optionsList":[16],"value":[1537],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]]],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1]}]]],["b2b-separator.cjs",[[1,"b2b-separator",{"alignment":[1]}]]],["b2b-icon.cjs",[[1,"b2b-icon",{"icon":[1],"color":[1],"size":[1],"pathData":[32]}]]],["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],"setFocus":[64]},[[2,"click","handleHostClick"]]],[1,"b2b-spinner",{"size":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["b2b-search.cjs",[[1,"b2b-search",{"placeholder":[1],"optionsList":[16],"value":[1537],"closed":[32]}]]],["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.cjs",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4]}]]],["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-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-cell.cjs",[[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1],"useTextEllipsis":[32]}]]],["b2b-table-header.cjs",[[1,"b2b-table-header",{"divider":[4],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"active":[32]}]]],["b2b-table-row.cjs",[[1,"b2b-table-row",{"highlight":[4],"color":[1]}]]],["b2b-table-rowgroup.cjs",[[1,"b2b-table-rowgroup",{"type":[1]}]]],["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-headline.cjs",[[1,"b2b-headline",{"size":[1],"align":[1],"noMargin":[4,"no-margin"]}]]],["b2b-input-label.cjs",[[1,"b2b-input-label",{"required":[4],"disabled":[4]}]]],["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],"hasFocus":[32],"hasTextPrefix":[32],"hasTextSuffix":[32],"setFocus":[64],"clearInput":[64]}],[0,"b2b-input-list-option",{"option":[1]},[[0,"keydown","handleKeyDown"]]]]],["b2b-input-group_2.cjs",[[1,"b2b-input-list",{"label":[1],"required":[516],"placeholder":[513],"optionsList":[16],"value":[1537],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]]],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1]}]]],["b2b-separator.cjs",[[1,"b2b-separator",{"alignment":[1]}]]],["b2b-icon.cjs",[[1,"b2b-icon",{"icon":[1],"color":[1],"size":[1],"pathData":[32]}]]],["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],"setFocus":[64]},[[2,"click","handleHostClick"]]],[1,"b2b-spinner",{"size":[1],"color":[1]}]]]], options);
   });
 };
 

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/headline/headline.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/icon/icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/input/input.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -58,6 +58,11 @@ export class InputComponent {
   async setFocus() {
     this.focusableElement.focus();
   }
+  /** Simulate the native behavior of type="search" to emit an empty string when the input is cleared */
+  async clearInput() {
+    this.value = '';
+    this.b2bInput.emit({ value: '' });
+  }
   connectedCallback() {
     const form = this.hostElement.closest('form');
     if (form != null) {
@@ -374,6 +379,22 @@ export class InputComponent {
           "text": "Manually set focus to the element",
           "tags": []
         }
+      },
+      "clearInput": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Simulate the native behavior of type=\"search\" to emit an empty string when the input is cleared",
+          "tags": []
+        }
       }
     };
   }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/input-list/input-list.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -60,19 +60,22 @@ export class InputListComponent {
         element.setAttribute('tabindex', '-1');
       });
     };
-    this.resetInput = (event) => {
+    this.resetInput = async (event) => {
+      const inputElement = this.hostElement.shadowRoot.querySelector('b2b-input');
       if (event.type === 'keydown' && event.key === 'Enter') {
-        this.value = '';
         /** Manually reset focus after blur to match mousedown behavior */
-        this.hostElement.shadowRoot.querySelector('b2b-input').setFocus();
+        await inputElement.setFocus();
       }
       else if (event.type === 'mousedown') {
         /** Manual blurring to prevent browser focus stack & component state mismatch */
         event.preventDefault();
         event.stopPropagation();
-        this.hostElement.shadowRoot.querySelector('b2b-input').setFocus();
-        this.value = '';
+        await inputElement.setFocus();
       }
+      this.value = '';
+      this.b2bClear.emit();
+      // Called to trigger an Input Event
+      await inputElement.clearInput();
       return;
     };
     this.label = undefined;
@@ -253,6 +256,29 @@ export class InputListComponent {
       "isElementFocused": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "b2bClear",
+        "name": "b2b-clear",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InputClear",
+          "resolved": "InputClear<any>",
+          "references": {
+            "InputClear": {
+              "location": "import",
+              "path": "../../utils/interfaces/form.interface"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{

package/dist/collection/components/label/label.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/modal/modal.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/pagination/pagination.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/paragraph/paragraph.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/radio/radio.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/required-separator/required-separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/scrollable-container/scrollable-container.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -218,4 +218,5 @@
   overflow: auto;
   display: block;
   white-space: nowrap;
+  position: relative;
 }

package/dist/collection/components/separator/separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/spinner/spinner.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab/tab.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab-panel/tab-panel.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table-cell/table-cell.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 13:48:08 GMT
+ * Generated on Tue, 16 May 2023 14:29:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -215,6 +215,7 @@
   src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
 }
 :host {
+  --b2b-table-cell-text-expand-bg: var(--b2b-color-white-100);
   display: table-cell;
   padding: 12px;
   margin: 0;
@@ -228,6 +229,16 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  position: relative;
+}
+:host(.b2b-table-cell--expand-text) {
+  position: absolute;
+  white-space: normal;
+  background-color: var(--b2b-table-cell-text-expand-bg);
+  border: 1px solid var(--b2b-color-grey-200);
+  border-top: none;
+  z-index: 2000;
+  min-width: 100px;
 }
 :host(.b2b-table-cell--left) {
   text-align: left;

package/dist/collection/components/table/table-cell/table-cell.js

@@ -2,18 +2,36 @@ import { h, Host } from '@stencil/core';
 import { ContentAlignment, TableSizes } from '../types';
 export class TableCellComponent {
   constructor() {
+    this.expandTextHoverWaitTime = 600;
+    this.addExpandStyles = () => {
+      this.expandTextHoverTimeoutId = setTimeout(() => {
+        const contentLength = this.host.innerText.length;
+        const children = this.host.children.length;
+        if (this.useTextEllipsis && contentLength > 25 && children === 0) {
+          this.host.style.width = `calc(${this.host.offsetWidth}px - 24px)`;
+          this.host.classList.add('b2b-table-cell--expand-text');
+        }
+      }, this.expandTextHoverWaitTime);
+    };
+    this.removeExpandStyles = () => {
+      this.expandTextHoverTimeoutId &&
+        clearTimeout(this.expandTextHoverTimeoutId);
+      this.host.classList.remove('b2b-table-cell--expand-text');
+    };
     this.textWrap = true;
     this.size = TableSizes.EXPAND;
     this.align = ContentAlignment.LEFT;
     this.divider = false;
     this.color = 'default';
+    this.useTextEllipsis = false;
+  }
+  componentWillRender() {
+    this.useTextEllipsis = !this.textWrap && this.size === TableSizes.EQUAL;
   }
   render() {
-    // TODO: test
-    const useTextEllipsis = !this.textWrap && this.size === TableSizes.EQUAL;
-    return (h(Host, { class: {
+    return (h(Host, { onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
         'b2b-table-cell': true,
-        ['b2b-table-cell--ellipsis']: useTextEllipsis,
+        ['b2b-table-cell--ellipsis']: this.useTextEllipsis,
         ['b2b-table-cell--' + this.align]: true,
         ['b2b-table-cell--divider']: this.divider,
         [`b2b-table-cell-color-${this.color}`]: true,
@@ -140,4 +158,10 @@ export class TableCellComponent {
       }
     };
   }
+  static get states() {
+    return {
+      "useTextEllipsis": {}
+    };
+  }
+  static get elementRef() { return "host"; }
 }