@otto-de/b2b-core-components 1.33.0 → 1.35.0

package/dist/collection/components/snackbar/snackbar.js

@@ -1,4 +1,4 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class SnackbarComponent {
     constructor() {
         /** when user hovers over snackbar, the timer is paused. */
@@ -86,17 +86,17 @@ export class SnackbarComponent {
         clearTimeout(this.timeoutId);
     }
     render() {
-        return (h(Host, { key: '33ace44479760181672e60c0750462c9d8ea60dc', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '1f739551dbbcea7dfa04f2fdf04cfcdeceab4a9f', class: {
+        return (h(Host, { key: '55fbed7dd9fa44a54d25277ca6f1e75429ba1b37', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'dff92b0614f3e59e0c809b975310646814b8145e', class: {
                 'b2b-snackbar': true,
                 [`b2b-snackbar--${this.type}`]: true,
                 'b2b-snackbar--opened': this.opened,
-            }, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: 'e5a8aeeb9e550d0ca6b8cb94049dc3d229cb5fdb', class: "b2b-snackbar__content" }, h("span", { key: 'dba27cdd15921dd0aeade5be294f9e92f9c4b024', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '537da669b42397f0b016d2767f9b8b170d333ac3', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
+            }, style: { width: this.width || 'auto' } }, h("div", { key: '1fc6e6367e35c1b1a05f43ea2660a905f22c9711', class: "b2b-snackbar__content" }, h("span", { key: 'c8e4bc8512f84f110f520f6678df3a1b140a0367', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '746bbc4361665af9e7ca661a2961bf000f4e073d', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
                 'b2b-snackbar__action': true,
                 [`b2b-snackbar__action--${this.type}`]: true,
-            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '73fb2d7f257c22f6ac6506dd1e1ed6da6b2e051d', class: {
+            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: 'c8384158b5bdec6af91cae1adc66763cbdf528d1', class: {
                 'b2b-snackbar__close-icon': true,
                 [`b2b-snackbar__close-icon--${this.type}`]: true,
-            }, onClick: this.close }, h("b2b-icon-100", { key: 'ecdba62cbdbca4815cd207fb804341a08c6b76b2', clickable: true, size: 24, icon: "b2b_icon-close" })))));
+            }, onClick: this.close }, h("b2b-icon-100", { key: '8315309a832f0767ecbbc40ef147b0005a66ce7a', clickable: true, size: 24, icon: "b2b_icon-close" })))));
     }
     static get is() { return "b2b-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -9,7 +9,7 @@ export class SpinnerComponent {
         this.color = 'primary';
     }
     render() {
-        return (h("div", { key: '1bb8f6699313da9fac485d9cb94087ee79eef253', class: {
+        return (h("div", { key: '0d638dd6efcfd16c740a35d99f99f0432e50ae67', class: {
                 'b2b-spinner': true,
                 ['b2b-spinner--size-' + this.size]: true,
                 ['b2b-spinner--color-' + this.color]: true,

package/dist/collection/components/tab/tab.js

@@ -17,12 +17,12 @@ export class B2bTabComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'b4ed6dd0f35da1b2ac366ab772caa1dc900d4f5e', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: '1bb21fa15b4d7d07b4ef8134b18e8819d1a4a8e4', class: {
+        return (h(Host, { key: '040969f8040c2e7f38641b054aa71dbce563bbcd', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: '094d8312566c347cf529fb9f71b747f2ed1348f6', class: {
                 'b2b-tab': true,
                 'b2b-tab--selected': this.selected,
                 'b2b-tab--disabled': this.disabled,
                 'b2b-tab--error': this.invalid,
-            } }, h("slot", { key: 'b0dfb40b808650b49410a25f2d01a042b27aca16' }))));
+            } }, h("slot", { key: 'cd453ac793439c1572ff80f84a29d5d60b6e0517' }))));
     }
     static get is() { return "b2b-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,7 +121,7 @@ export class B2bTabGroupComponent {
         });
     }
     render() {
-        return (h(Host, { key: 'c09986eb1b9997eaa4ca37376132ce7d7d5ca855' }, h("slot", { key: '091a1eb4d6c95b5bc0af2eb5d94803068ef7f529', name: "tab" }), h("b2b-separator", { key: '0e2e540da62aa29c9c09e3cb28ade9ebf51e6977' }), h("slot", { key: '0713eab995ff1f9e7a7932b58651799ed3b7c161', name: "panel" })));
+        return (h(Host, { key: 'a652623572354f06d1b773b9a98760a7c9ec9cf7' }, h("slot", { key: 'f80657d44b37339fb026e92873fb177b2393e841', name: "tab" }), h("b2b-separator", { key: 'e82a1891e3c509fab6f2b17e74f39796645bbdd2' }), h("slot", { key: 'e9ccf361a9bfa3424fc861b6ba8f685510ef39bd', name: "panel" })));
     }
     static get is() { return "b2b-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class B2bTabPanelComponent {
         this.generatedId = i++;
     }
     render() {
-        return (h(Host, { key: '895835ee9542f04852f08ed863d9214355741211', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '127afd55dfff1e9642180ee6db0f72e002914a22', class: "b2b-tab-panel" }, h("slot", { key: '199bca30f2cda69bbb63cfbc3f67bce5ba6136fa' }))));
+        return (h(Host, { key: '09b20e44ef0677b3ce5babd5da199ac5803e60c2', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '72ddbd132da8c1bcb7810397dd50530d722eb5ce', class: "b2b-tab-panel" }, h("slot", { key: '6318fea037462b2b43f33bde3bd0e6ee42c1dc18' }))));
     }
     static get is() { return "b2b-tab-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,14 +36,14 @@ export class TableCellComponent {
         }
     }
     render() {
-        return (h(Host, { key: '5697dfe2db80803acd704355efc7235022000773', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
+        return (h(Host, { key: '285cee3af71e3d05dd2916f771fe36e47e001998', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
                 'b2b-table-cell': true,
                 ['b2b-table-cell--colspan']: this.size === TableSizes.COLSPAN,
                 ['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,
-            }, role: "cell" }, h("slot", { key: '3499f59899e1f2e2743252490c522a3fd2ab5ca6' })));
+            }, role: "cell" }, h("slot", { key: 'd0812f47d90ee1b225110855df1c8918960505e7' })));
     }
     static get is() { return "b2b-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,7 +72,7 @@ export class TableHeaderComponent {
         this.setIconPlacement();
     }
     render() {
-        return (h(Host, { key: 'eb2f861c5ff85be7e1f313a1eecdb698e7da2f38', class: {
+        return (h(Host, { key: '9b0df06a2325c4bac0e64f1a3b1dadec9150b14b', class: {
                 [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
                 'b2b-table-header--divider': this.divider,
                 [`b2b-table-header--${this.size}`]: true,

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

@@ -110,12 +110,12 @@ export class TableRowComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'b28513a5d03b1328fbe8d54d35fc45077ae00403', class: {
+        return (h(Host, { key: 'b3c742ca195dec5c8037a589122e41d87afcee5d', class: {
                 'b2b-table-row': true,
                 ['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-row--highlight']: this.highlight,
                 [`b2b-table-row--color-${this.getRowColor()}`]: true,
-            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'eeb52f24d09ea0aa24e36709dcb8bd35de6bd4d5' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'ae02badbe6847a68f2e5e1e08e676678f7144c1b' })));
     }
     static get is() { return "b2b-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,11 +113,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: '2990111f95881991d6a5af1e9a60adb0471549cc', class: {
+        return (h(Host, { key: '1fa1822d42bf6819b2fd6de382a0075a05715569', class: {
                 ['b2b-table-rowgroup__' + this.type]: true,
                 'b2b-table-rowgroup--fixed': this.fixed,
                 'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
-            }, role: "rowgroup" }, h("slot", { key: '34df739d91953efc2b0c9400f7ff76aca51facf3' })));
+            }, role: "rowgroup" }, h("slot", { key: '6ffd528b4b6330a5f4c66b50b3c329853fd441a8' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,9 +60,9 @@ export class TableComponent {
         }
     }
     render() {
-        return (h(Host, { key: '49c1ea9491880fa3a65e35fa83159b8764a85efd', class: {
+        return (h(Host, { key: 'b838cb824f9e59b01eb827642d130b8933bfa331', class: {
                 ['b2b-table--' + this.size]: true,
-            }, role: "table" }, h("slot", { key: '3531b7eea4444cfe5c70239efb42f4144324d2d1' })));
+            }, role: "table" }, h("slot", { key: 'a657fe4d62601fff6bf5ee6d640fbb8d8c351055' })));
     }
     static get is() { return "b2b-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -45,10 +45,10 @@ export class B2BTextareaComponent {
         }
     }
     render() {
-        return (h(Host, { key: '152cd0b6b61c20443384dd7b898975d2ebac9f03', class: {
+        return (h(Host, { key: 'b5ecf98b41d74602941e9b3a5a22962e7c6c94d9', class: {
                 'b2b-textarea': true,
                 'b2b-textarea--error': this.invalid && !this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '414082cbe0efb410b8360a155b598a5ac49e7b85', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '1cb84cd64595ee68ca04e62f5b587ef9eef3ff3e', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-textarea"; }

package/dist/collection/components/time-picker/time-picker.css

@@ -0,0 +1,345 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root, :host {
+  --b2b-color-black-50: #333333;
+  --b2b-color-black-100: #222222;
+  --b2b-color-white-100: #FFFFFF;
+  --b2b-color-grey-10: #F0F0F0;
+  --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-50: #EEEEEE;
+  --b2b-color-grey-100: #E6E6E6;
+  --b2b-color-grey-150: #D5D5D5;
+  --b2b-color-grey-200: #C4C4C4;
+  --b2b-color-grey-250: #B1B1B1;
+  --b2b-color-grey-300: #9E9E9E;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-red-50: #FFDDE3;
+  --b2b-color-red-100: #D4021D;
+  --b2b-color-red-150: #E6344B;
+  --b2b-color-red-200: #BB0004;
+  --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
+  --b2b-color-primary: #D4021D;
+  --b2b-color-error-100: #E6344B;
+  --b2b-color-warning-50: #FFD998;
+  --b2b-color-warning-100: #FFB432;
+  --b2b-color-success-50: #D6E0CC;
+  --b2b-color-success-100: #326400;
+  --b2b-color-info-50: #CCD6E0;
+  --b2b-color-info-100: #003264;
+  --b2b-color-hover-default: #DBE7FA;
+  --b2b-color-hover-black: #3B3B3B;
+  --b2b-color-background-overlay-transparent-80: #22222280;
+  --b2b-color-background-overlay-transparent-40: #22222240;
+  --b2b-color-table-selected-default: #CCE9FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-bold: 700;
+  --b2b-size-1: 0.0625rem; /** 1px */
+  --b2b-size-5: 0.125rem; /** 2px */
+  --b2b-size-7: 0.1875rem; /** 3px */
+  --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
+  --b2b-size-15: 0.375rem; /** 6px */
+  --b2b-size-20: 0.5rem; /** 8px */
+  --b2b-size-25: 0.625rem; /** 10px */
+  --b2b-size-30: 0.75rem; /** 12px */
+  --b2b-size-35: 0.875rem; /** 14px */
+  --b2b-size-40: 1rem; /** 16px */
+  --b2b-size-45: 1.125rem; /** 18px */
+  --b2b-size-50: 1.25rem; /** 20px */
+  --b2b-size-53: 1.3125rem; /** 21px */
+  --b2b-size-55: 1.375rem; /** 22px */
+  --b2b-size-60: 1.5rem; /** 24px */
+  --b2b-size-70: 1.75rem; /** 28px */
+  --b2b-size-80: 2rem; /** 32px */
+  --b2b-size-90: 2.25rem; /** 36px */
+  --b2b-size-100: 2.5rem; /** 40px */
+  --b2b-size-120: 3rem; /** 48px */
+  --b2b-size-140: 3.5rem; /** 56px */
+  --b2b-size-150: 3.75rem; /** 60px */
+  --b2b-size-160: 4rem; /** 64px */
+  --b2b-size-200: 5rem; /** 80px */
+  --b2b-color-error-50: var(--b2b-color-red-50);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-copy-50: var(--b2b-size-30);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /** Will use 18px until design facelift */
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /** Will use 21px until design facelift */
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root [data-theme="dark"] {
+  --b2b-color-black-50: #333333;
+  --b2b-color-black-100: #222222;
+  --b2b-color-white-100: #FFFFFF;
+  --b2b-color-grey-10: #F0F0F0;
+  --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-50: #EEEEEE;
+  --b2b-color-grey-100: #E6E6E6;
+  --b2b-color-grey-150: #D5D5D5;
+  --b2b-color-grey-200: #C4C4C4;
+  --b2b-color-grey-250: #B1B1B1;
+  --b2b-color-grey-300: #9E9E9E;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-red-50: #FFDDE3;
+  --b2b-color-red-100: #D4021D;
+  --b2b-color-red-150: #E6344B;
+  --b2b-color-red-200: #BB0004;
+  --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
+  --b2b-color-primary: #D4021D;
+  --b2b-color-error-100: #E6344B;
+  --b2b-color-warning-50: #FFD998;
+  --b2b-color-warning-100: #FFB432;
+  --b2b-color-success-50: #D6E0CC;
+  --b2b-color-success-100: #326400;
+  --b2b-color-info-50: #CCD6E0;
+  --b2b-color-info-100: #003264;
+  --b2b-color-hover-default: #DBE7FA;
+  --b2b-color-hover-black: #3B3B3B;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-bold: 700;
+  --b2b-size-1: 0.0625rem; /** 1px */
+  --b2b-size-5: 0.125rem; /** 2px */
+  --b2b-size-7: 0.1875rem; /** 3px */
+  --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
+  --b2b-size-15: 0.375rem; /** 6px */
+  --b2b-size-20: 0.5rem; /** 8px */
+  --b2b-size-25: 0.625rem; /** 10px */
+  --b2b-size-30: 0.75rem; /** 12px */
+  --b2b-size-35: 0.875rem; /** 14px */
+  --b2b-size-40: 1rem; /** 16px */
+  --b2b-size-45: 1.125rem; /** 18px */
+  --b2b-size-50: 1.25rem; /** 20px */
+  --b2b-size-53: 1.3125rem; /** 21px */
+  --b2b-size-55: 1.375rem; /** 22px */
+  --b2b-size-60: 1.5rem; /** 24px */
+  --b2b-size-70: 1.75rem; /** 28px */
+  --b2b-size-80: 2rem; /** 32px */
+  --b2b-size-90: 2.25rem; /** 36px */
+  --b2b-size-100: 2.5rem; /** 40px */
+  --b2b-size-120: 3rem; /** 48px */
+  --b2b-size-140: 3.5rem; /** 56px */
+  --b2b-size-150: 3.75rem; /** 60px */
+  --b2b-size-160: 4rem; /** 64px */
+  --b2b-size-200: 5rem; /** 80px */
+  --b2b-color-error-50: var(--b2b-color-red-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+}
+@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-time-picker) {
+  --b2b-border-radius: var(--b2b-size-border-radius-100);
+  --b2b-border-right: 1px solid var(--b2b-color-grey-200);
+  max-width: 600px;
+  min-width: 130px;
+  display: block;
+}
+:host(.b2b-time-picker) .b2b-time-picker__options-container {
+  display: none;
+  position: relative;
+  z-index: 1001;
+}
+:host(.b2b-time-picker) .b2b-time-picker__options-container--visible {
+  display: block;
+}
+:host(.b2b-time-picker) .b2b-time-picker__options {
+  position: absolute;
+  background-color: var(--b2b-color-white-100);
+  box-sizing: border-box;
+  height: 272px;
+  width: var(--b2b-size-200);
+  overflow-y: scroll;
+  border: var(--b2b-size-1) solid var(--b2b-color-black-100);
+  border-top: none;
+  scrollbar-color: #7f7f7f transparent;
+  scrollbar-gutter: stable;
+}
+:host(.b2b-time-picker) .b2b-time-picker__option {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 7px var(--b2b-size-space-75) var(--b2b-size-15);
+  cursor: pointer;
+  font-family: var(--b2b-font-family-default);
+  font-size: var(--b2b-size-copy-100);
+  line-height: var(--b2b-size-copy-line-height-100);
+}
+:host(.b2b-time-picker) .b2b-time-picker__option:hover, :host(.b2b-time-picker) .b2b-time-picker__option--selected {
+  background-color: var(--b2b-color-blue-25);
+}
+:host(.b2b-time-picker) .b2b-time-picker__wrapper {
+  box-sizing: border-box;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  background-color: var(--b2b-color-white-100);
+  color: var(--b2b-color-black-100);
+  position: relative;
+  padding: var(--b2b-size-15) var(--b2b-size-25);
+  border: 1px solid var(--b2b-color-grey-200);
+  border-right: var(--b2b-border-right);
+  border-radius: var(--b2b-border-radius);
+}
+:host(.b2b-time-picker) .b2b-time-picker__wrapper--focused {
+  color: var(--b2b-color-black-100);
+  border-radius: var(--b2b-border-radius);
+  border: 1px solid var(--b2b-color-black-100);
+  z-index: 9999;
+}
+:host(.b2b-time-picker) .b2b-time-picker__wrapper--filled {
+  color: var(--b2b-color-black-100);
+}
+:host(.b2b-time-picker) .b2b-time-picker__wrapper--error {
+  background-color: var(--b2b-color-error-50);
+  border: 1px solid var(--b2b-color-error-100);
+  color: var(--b2b-color-black-100);
+}
+:host(.b2b-time-picker) .b2b-time-picker__wrapper--error .b2b-time-picker__native-input {
+  background-color: var(--b2b-color-error-50);
+}
+:host(.b2b-time-picker) .b2b-time-picker__wrapper .b2b-time-picker__native-input {
+  width: 100%;
+  border: none;
+  flex: 1 1 auto;
+  outline: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  margin-left: 0;
+  padding-left: 0;
+  height: 100%;
+  color: var(--b2b-color-black-100);
+  font-size: var(--b2b-size-35);
+  line-height: var(--b2b-size-copy-line-height-100);
+  font-weight: var(--b2b-font-weight-normal);
+  font-family: var(--b2b-font-family-default);
+}
+:host(.b2b-time-picker) .b2b-time-picker__wrapper .b2b-time-picker__native-input::placeholder {
+  color: var(--b2b-color-grey-300);
+}
+:host(.b2b-time-picker) .b2b-time-picker-label {
+  display: block;
+  margin-bottom: var(--b2b-size-5);
+  color: var(--b2b-color-black-100);
+  font-size: var(b2b-size-copy-100);
+}
+.b2b-time-picker__hint {
+  font-size: var(--b2b-size-copy-50);
+  line-height: var(--b2b-size-copy-line-height-75);
+  display: block;
+  margin-top: var(--b2b-size-7);
+  color: var(--b2b-color-grey-300);
+}
+.b2b-time-picker__hint--error {
+  color: var(--b2b-color-error-100);
+}
+.b2b-icons {
+  display: flex;
+  align-items: center;
+}
+.b2b-close-icon {
+  display: block;
+}
+.b2b-duration-icon {
+  color: var(--b2b-color-black-100);
+}

package/dist/collection/components/time-picker/time-picker.e2e.js

@@ -0,0 +1,135 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-TimePicker', () => {
+    it('should render the time picker component', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker label="Time Picker"></b2b-time-picker>`);
+        const element = await page.find('b2b-time-picker');
+        expect(element).toHaveClass('hydrated');
+    });
+    it('should display the label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker label="Time Picker"></b2b-time-picker>`);
+        const label = await page.find('b2b-time-picker >>> b2b-input-label');
+        expect(label).not.toBeNull();
+        expect(label.textContent).toContain('Time Picker');
+    });
+    it('should open the dropdown on input focus', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        const optionsContainer = await page.find('b2b-time-picker >>> .b2b-time-picker__options-container--visible');
+        expect(optionsContainer).not.toBeNull();
+    });
+    it('should select a time from the dropdown', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        const option = await page.find('b2b-time-picker >>> .b2b-time-picker__option[data-value="09:00"]');
+        await option.click();
+        await page.waitForChanges();
+        const value = await page.$eval('b2b-time-picker', el => el.value);
+        expect(value).toBe('09:00');
+    });
+    it('should clear the input when clear icon is clicked', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker value="10:15"></b2b-time-picker>`);
+        const clearIcon = await page.find('b2b-time-picker >>> .b2b-close-icon');
+        await clearIcon.click();
+        await page.waitForChanges();
+        const value = await page.$eval('b2b-time-picker', el => el.value);
+        expect(value).toBe('');
+    });
+    it('should show error message for invalid input', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        const input = await page.find('b2b-time-picker >>> input');
+        await input.type('99:99');
+        await page.evaluate(() => {
+            const el = document
+                .querySelector('b2b-time-picker')
+                .shadowRoot.querySelector('input');
+            el.blur();
+        });
+        await page.waitForChanges();
+        const error = await page.find('b2b-time-picker >>> .b2b-time-picker__hint--error');
+        expect(error).not.toBeNull();
+        expect(error.textContent).toContain('Invalid format');
+    });
+    it('should generate correct time options for a custom interval', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker interval="30"></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        const options = await page.findAll('b2b-time-picker >>> .b2b-time-picker__option');
+        expect(options.length).toBe(48);
+        expect(options[0].textContent).toBe('00:00');
+        expect(options[1].textContent).toBe('00:30');
+        expect(options[2].textContent).toBe('01:00');
+    });
+    it('should not break when selecting an already selected time', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker value="08:00"></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        const option = await page.find('b2b-time-picker >>> .b2b-time-picker__option[data-value="08:00"]');
+        await option.click();
+        await page.waitForChanges();
+        const value = await page.$eval('b2b-time-picker', el => el.value);
+        expect(value).toBe('08:00');
+    });
+    it('should toggle dropdown on duration icon click', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        const icon = await page.find('b2b-time-picker >>> .b2b-duration-icon');
+        await icon.click();
+        await page.waitForChanges();
+        let optionsContainer = await page.find('b2b-time-picker >>> .b2b-time-picker__options-container--visible');
+        expect(optionsContainer).not.toBeNull();
+        await icon.click();
+        await page.waitForChanges();
+        optionsContainer = await page.find('b2b-time-picker >>> .b2b-time-picker__options-container--visible');
+        expect(optionsContainer).toBeNull();
+    });
+    it('should close the dropdown on blur', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('blur', { bubbles: true }));
+        });
+        await new Promise(res => setTimeout(res, 200));
+        const optionsContainer = await page.find('b2b-time-picker >>> .b2b-time-picker__options-container--visible');
+        expect(optionsContainer).toBeNull();
+    });
+    it('should show custom error message via error prop', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker error="Custom error" invalid></b2b-time-picker>`);
+        const error = await page.find('b2b-time-picker >>> .b2b-time-picker__hint--error');
+        expect(error.textContent).toContain('Custom error');
+    });
+    it('should display the hint text when provided', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker hint="Pick a time"></b2b-time-picker>`);
+        const hint = await page.find('b2b-time-picker >>> .b2b-time-picker__hint');
+        expect(hint.textContent).toContain('Pick a time');
+    });
+});