@otto-de/b2b-core-components 1.32.3 → 1.34.0

package/dist/components/input-group.js

@@ -30,16 +30,9 @@ const B2BInputGroup = /*@__PURE__*/ proxyCustomElement(class B2BInputGroup exten
         };
         this.toggleAllDisabled = () => {
             let nodes = this.getChildNodes();
-            if (this.disabled) {
-                nodes.forEach(node => {
-                    node.disabled = true;
-                });
-            }
-            else {
-                nodes.forEach(node => {
-                    node.groupDisabled = this.disabled;
-                });
-            }
+            nodes.forEach(node => {
+                node.groupDisabled = this.disabled;
+            });
         };
         this.getChildNodes = () => {
             return Array.from(this.host.children);
@@ -63,7 +56,7 @@ const B2BInputGroup = /*@__PURE__*/ proxyCustomElement(class B2BInputGroup exten
         }
     }
     render() {
-        return (h(Host, { key: '57a5aa8deaadb27c20de3771a232833ae95e82a4' }, h("div", { key: 'fd0c4bc60e08a60fe6b5abc93bdac9219c41b09c', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '36cd34bf6b4aa62c2f544d0329d9c95f3d70259d', name: "start" }), h("slot", { key: 'a32cec43572ec254a0eb91e09bc8136984f8143f' }), h("slot", { key: '7b99a7c32bc2c54e1400d90d947df0c63920b243', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
+        return (h(Host, { key: '30fc190f60b27b6f11fdcc7ed37cc95eee557e5e' }, h("div", { key: '054b44ad5994365e1ea8034a854e2d1b23c6d5e2', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '73b19a2684e84873ada8ec3b2f5c4f465f1fb382', name: "start" }), h("slot", { key: 'f0d15628f49e1d7c83eafaa7a631bd71a673ff97' }), h("slot", { key: '00209dc3c6bf3b3e4418e79dcb6387effc0d8531', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
                 'b2b-input-wrapper__hint': true,
                 'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
             } }, this.invalid && !this.disabled ? this.error : this.hint))));

package/dist/components/input-label.js

@@ -12,11 +12,11 @@ const InputLabelComponent = /*@__PURE__*/ proxyCustomElement(class InputLabelCom
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '1fd715c6e6929bf14631434e54112ae7dadcc9d4' }, h("label", { key: 'fc0fb3b130825b9ba41b9ed1a1b007010091065e', class: {
+        return (h(Host, { key: '87fe33e03bfe683d013e8d992bba9e3863834514' }, h("label", { key: 'e88216535eb3d9638fc75a638daffb81bcdf0bb1', class: {
                 'b2b-input-label': true,
                 'b2b-input-label--required': this.required,
                 'b2b-input-label--disabled': this.disabled,
-            } }, h("slot", { key: 'c811d6c50bd4e5284c48a94dab49bed8c26f29cb' }))));
+            } }, h("slot", { key: 'cf1736baaf9fd224071f3e21122c263b9865c318' }))));
     }
     get hostElement() { return this; }
     static get style() { return B2bInputLabelStyle0; }

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

@@ -19,7 +19,7 @@ const InputListOptionComponent = /*@__PURE__*/ proxyCustomElement(class InputLis
         }
     }
     render() {
-        return (h(Host, { key: '8a38a1768fad0607a658270145dd8f265987982c', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
+        return (h(Host, { key: '566b7cf1696550467c5b8c29cedccf5f8821dc6e', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
     }
     static get style() { return B2bInputListOptionStyle0; }
 }, [0, "b2b-input-list-option", {

package/dist/components/input-list.js

@@ -149,13 +149,13 @@ const InputListComponent = /*@__PURE__*/ proxyCustomElement(class InputListCompo
     */
     render() {
         const groupOrderClass = this.getGroupOrderClassName() || '';
-        return (h(Host, { key: '0ff3040354f57d752194f6f37795d2242e9ece5c', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '92ca26fa99608f371a3bee1e25977887bc22bb63', class: {
+        return (h(Host, { key: 'c22a6a73eca142a88eb7cc3f4c975b579df1d709', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '3fb28f6a327c958fcf9d178c4d1814915a13ad3a', class: {
                 'b2b-input-list': true,
                 'b2b-input-list__options-on': this.hasOptionList &&
                     this.isElementFocused &&
                     Boolean(this.value),
                 [groupOrderClass]: true,
-            } }, h("b2b-input", { key: '2d91287804fb835406c87bbc184da9c715820a61', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+            } }, h("b2b-input", { key: '2cd2ba2a073ca4b1980ac5621b60f0ee351e5cca', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/input.js

@@ -29,9 +29,7 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
         };
         this.onInput = (ev) => {
             const input = ev.target;
-            if (input !== (null)) {
-                this.value = input.value || '';
-            }
+            this.value = (input === null || input === void 0 ? void 0 : input.value) || '';
             this.b2bInput.emit(input);
         };
         this.getSlottedText = () => {
@@ -108,19 +106,19 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
         this.filterHintSlotContent();
     }
     render() {
-        return (h(Host, { key: 'f24ddfd309213b97dde35beafeafe167164fab05', class: {
+        return (h(Host, { key: 'b18e9dad8fdc84804b77049fd7b94c6b05541c3f', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '65948e5a8bf67ea0f2bf2e9a56af1e9211b854a7', class: {
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '655f632484049add498904c26d766670eb3b9203', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: '2b8a7cc9ddd4457b9c833a04a5201912147958d8', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'fd07b1da34c8d628521ebc59a5d8e2d279a167ba', class: {
+            } }, h("slot", { key: '1d0650fa02aa56cf183a8c3c89e5791a53c54944', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '88e9aa5076bd6dd59eafac8491d6fafc9eec8b5e', class: {
                 'b2b-input__native-input': true,
                 ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
-                'b2b-input__native-input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '1147f2bdf14ade737b8e3e02d03dea9424aef1e9', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
-            (!this.invalid || this.disabled) ? (h("span", null, h("slot", { name: "hint" }, this.hint))) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
+                'b2b-input__native-input--disabled': this.disabled || this.groupDisabled,
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: 'c93445fb93de27a7e1d4681bc7a48d44bb8baa1a', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
+            (!this.invalid || this.disabled || this.groupDisabled) ? (h("span", null, h("slot", { name: "hint" }, this.hint))) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     get hostElement() { return this; }
     static get style() { return B2bInputStyle0; }

package/dist/components/multiselect-option.js

@@ -18,17 +18,20 @@ const B2bMultiSelectOption = /*@__PURE__*/ proxyCustomElement(class B2bMultiSele
             });
         };
         this.option = undefined;
+        this.label = undefined;
         this.selected = false;
         this.indeterminate = false;
     }
     render() {
-        return (h(Host, { key: 'b1e6b024ef3d453040eb0995cab48eeb25586189', role: "option", class: {
+        var _a;
+        return (h(Host, { key: '0147313a2d52d7cdf334f118f8a5eae6fb2a73df', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: '9c4e912adeefec9787822529ba791d2a44aee03d', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: 'bf1504c0924dbda95990369b31c010804b2ceac7', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: (_a = this.label) !== null && _a !== void 0 ? _a : this.option, indeterminate: this.indeterminate, value: this.option })));
     }
     static get style() { return B2bMultiselectOptionStyle0; }
 }, [0, "b2b-multiselect-option", {
         "option": [1],
+        "label": [1],
         "selected": [1028],
         "indeterminate": [4]
     }]);

package/dist/{cjs/b2b-paragraph.cjs.entry.js → components/paragraph.js}

@@ -1,15 +1,13 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-668808fd.js');
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const paragraphCss = ":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;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--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);--b2b-size-copy-line-height-100:var(--b2b-size-53);--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)}: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;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--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\")}.b2b-paragraph{font-family:var(--b2b-font-family-default);margin:0 0 var(--b2b-size-30)}.b2b-paragraph--size-50{font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75)}.b2b-paragraph--size-100{font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100)}.b2b-paragraph--weight-normal{font-weight:var(--b2b-font-weight-normal)}.b2b-paragraph--weight-bold{font-weight:var(--b2b-font-weight-bold)}.b2b-paragraph--align-left{text-align:left}.b2b-paragraph--align-right{text-align:right}.b2b-paragraph--align-center{text-align:center}.b2b-paragraph--variant-black-100{color:var(--b2b-color-copy-default)}.b2b-paragraph--variant-grey-400{color:var(--b2b-color-grey-400)}.b2b-paragraph--no-margin{margin:0}";
 const B2bParagraphStyle0 = paragraphCss;
 
-const ParagraphComponent = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+const ParagraphComponent = /*@__PURE__*/ proxyCustomElement(class ParagraphComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.weight = 'normal';
         this.size = '100';
         this.align = 'left';
@@ -18,7 +16,7 @@ const ParagraphComponent = class {
         this.display = 'block';
     }
     render() {
-        return (index.h("p", { key: 'e34be906b02a82e422ecd49ccd6adf15d1744897', style: {
+        return (h("p", { key: '9372543c8a22d33c6ed0c53e3e8b277e0ce78883', style: {
                 display: this.display,
             }, class: {
                 'b2b-paragraph': true,
@@ -27,9 +25,29 @@ const ParagraphComponent = class {
                 ['b2b-paragraph--align-' + this.align]: true,
                 ['b2b-paragraph--no-margin']: !this.margin,
                 ['b2b-paragraph--variant-' + this.variant]: true,
-            } }, index.h("slot", { key: '3af5b741adf391a40b7a5e08d33cb04c5ab30ad7' })));
+            } }, h("slot", { key: 'ca3169be5b0239e40911fa2071c744404a6bbbae' })));
+    }
+    static get style() { return B2bParagraphStyle0; }
+}, [1, "b2b-paragraph", {
+        "weight": [1],
+        "size": [1],
+        "align": [1],
+        "margin": [4],
+        "variant": [1],
+        "display": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
     }
-};
-ParagraphComponent.style = B2bParagraphStyle0;
+    const components = ["b2b-paragraph"];
+    components.forEach(tagName => { switch (tagName) {
+        case "b2b-paragraph":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ParagraphComponent);
+            }
+            break;
+    } });
+}
 
-exports.b2b_paragraph = ParagraphComponent;
+export { ParagraphComponent as P, defineCustomElement as d };

package/dist/components/request.js

@@ -7,7 +7,7 @@ const requests = new Map();
 const fetchIcon = (icon) => {
     // see if we already have a request for this url
     let req = requests.get(icon);
-    if (req === undefined || null) {
+    if (req == null) {
         if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
             // we don't already have a request
             req = fetch(icon).then(rsp => {

package/dist/components/rounded-icon.js

@@ -13,16 +13,16 @@ const RoundedIconComponent = /*@__PURE__*/ proxyCustomElement(class RoundedIconC
         this.contentColor = 'var(--b2b-color-copy-default)';
     }
     render() {
-        return (h(Host, { key: '366b1c49bb56404825f131381b56a15daa457bfe' }, h("div", { key: 'f7a087f49858502bb7d74276d601c8a42e2215c0', style: {
+        return (h(Host, { key: '1d7eea4ad65056f16127e2029811239e0540560b' }, h("div", { key: '153f0ace757daff8776fac4fbe1cc9a05e9c0dfa', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: '050e8a6d21b27c8fdccfffc021c45080ebdbde7d', style: {
+            } }, h("div", { key: '7b28d41d6d5cb38c21aa4487cca0ce070663909a', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'ecd49a7ffdf65913edbba010734f522a45ac4096', name: "icon" })), h("div", { key: 'f7e1f7507674a38e7eeebc92f08ea5805400c92f', style: {
+            } }, h("slot", { key: '32e90de259f352aff82118dd1f9904475fc875e2', name: "icon" })), h("div", { key: '38f7a97f95191cd039a4bbbcf20a9b5ce1826a8e', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '116d9796a00791165984fc71e29aa79d4a9040c1', name: "text" })))));
+            } }, h("slot", { key: 'e994e7fbd49f656c865ce8517833be0d6bbb852e', name: "text" })))));
     }
     static get style() { return B2bRoundedIconStyle0; }
 }, [1, "b2b-rounded-icon", {

package/dist/components/separator.js

@@ -11,7 +11,7 @@ const B2bSeparatorComponent = /*@__PURE__*/ proxyCustomElement(class B2bSeparato
         this.alignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '00b1ecb31c7ca143b3d6c3c1d5bddcc369bde312' }, h("div", { key: 'e29629b7554c21b12af943ae0aaafb936fa36ea6', class: {
+        return (h(Host, { key: 'f1ab4806be7ac4128d95a047421be58502b0cadf' }, h("div", { key: 'c478fc67a79c15a6d74af39eb6747d25d3d58922', class: {
                 [`b2b-separator--${this.alignment}`]: true,
             } })));
     }

package/dist/components/spinner.js

@@ -12,7 +12,7 @@ const SpinnerComponent = /*@__PURE__*/ proxyCustomElement(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/components/table-cell.js

@@ -42,14 +42,14 @@ const TableCellComponent = /*@__PURE__*/ proxyCustomElement(class TableCellCompo
         }
     }
     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' })));
     }
     get host() { return this; }
     static get style() { return B2bTableCellStyle0; }

package/dist/components/table-header.js

@@ -77,7 +77,7 @@ const TableHeaderComponent = /*@__PURE__*/ proxyCustomElement(class TableHeaderC
         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/components/wizard-icon.js

@@ -16,7 +16,7 @@ const WizardIconComponent = /*@__PURE__*/ proxyCustomElement(class WizardIconCom
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: '15d5b1ff38e70a6328d60720793010b9f93f53fd' }, h("div", { key: '4b8573325245d8c60369b856e8c4e37b22f1a2bb', class: {
+        return (h(Host, { key: '7525116ebb5564170b75a07d619777a3a8d5dbac' }, h("div", { key: 'af75be9343349999f705cc5d2990b14e90d42c65', class: {
                 'b2b-wizard-icon': true,
             } }, this.state === WizardStatus.COMPLETED && (h("b2b-rounded-icon", { color: "var(--b2b-color-success-50)", "content-color": "var(--b2b-color-success-100)" }, this.checkIcon ? (h("b2b-icon-100", { slot: "icon", icon: "b2b_icon-check" })) : (h("span", { slot: "text" }, this.step)))), this.state === WizardStatus.PENDING && (h("b2b-rounded-icon", { color: "var(--b2b-color-icon-default)", "content-color": "var(--b2b-color-icon-inverted)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DISABLED && (h("b2b-rounded-icon", { color: "var(--b2b-color-grey-100)", "content-color": "var(--b2b-color-grey-400)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DEFAULT && (h("b2b-rounded-icon", { color: "transparent", "border-color": "var(--b2b-color-icon-secondary)", "content-color": "var(--b2b-color-icon-secondary)" }, h("span", { slot: "text" }, this.step))))));
     }

package/dist/custom-elements.json

@@ -530,7 +530,7 @@
         },
         {
           "name": "no-results-text",
-          "description": ""
+          "description": "The text to show, when no results have been found."
         },
         {
           "name": "opened",
@@ -781,6 +781,76 @@
         }
       ]
     },
+    {
+      "name": "b2b-date-range-picker",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "date-range",
+          "description": "The start and the end date of the selected date range.\nFormat: `TT.MM.YYYY`"
+        },
+        {
+          "name": "error",
+          "description": "The error message that is shown if the input is invalid."
+        },
+        {
+          "name": "hint",
+          "description": "The hint text that appears underneath the input field."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether the input is currently invalid. If true, the input is rendered with error styles."
+        },
+        {
+          "name": "label",
+          "description": "Label for the date range picker component."
+        },
+        {
+          "name": "language",
+          "description": "The language for month and the weekdays will be decided based on the given input.\nOne of `'de'` (German) or `'English'`.",
+          "values": [
+            {
+              "name": "de"
+            },
+            {
+              "name": "en"
+            }
+          ]
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        }
+      ]
+    },
+    {
+      "name": "b2b-date-range-picker-days",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "first-date",
+          "description": "The first date of the selection.\nThis may be absent if no dates have been selected yet.\nThis is always smaller/earlier than the second date."
+        },
+        {
+          "name": "preview",
+          "description": "Whether the shown values are a preview and not the actual values (force-hover state)."
+        },
+        {
+          "name": "second-date",
+          "description": "The second date of the selection.\nThis may be absent if none or only one date has been selected yet.\nThis is always bigger/later than the first date."
+        },
+        {
+          "name": "viewed-date",
+          "description": "The currently shown date (year+month)."
+        }
+      ]
+    },
     {
       "name": "b2b-dropdown",
       "description": {
@@ -3137,6 +3207,9 @@
             {
               "name": "b2b_icon-arrow-long-up"
             },
+            {
+              "name": "b2b_icon-arrow-misdirected"
+            },
             {
               "name": "b2b_icon-browser-content-skyscraper"
             },
@@ -3164,12 +3237,18 @@
             {
               "name": "b2b_icon-chat-ellipsis"
             },
+            {
+              "name": "b2b_icon-clipboard-check"
+            },
             {
               "name": "b2b_icon-clover-four-leaf"
             },
             {
               "name": "b2b_icon-cookie"
             },
+            {
+              "name": "b2b_icon-cosmetics"
+            },
             {
               "name": "b2b_icon-data-filter"
             },
@@ -3209,6 +3288,9 @@
             {
               "name": "b2b_icon-link"
             },
+            {
+              "name": "b2b_icon-lock-open"
+            },
             {
               "name": "b2b_icon-money-banknotes"
             },
@@ -3248,6 +3330,9 @@
             {
               "name": "b2b_icon-person-magnifying-glass"
             },
+            {
+              "name": "b2b_icon-person-wheelchair"
+            },
             {
               "name": "b2b_icon-phone-play"
             },
@@ -3281,6 +3366,9 @@
             {
               "name": "b2b_icon-speech-bubble-eye"
             },
+            {
+              "name": "b2b_icon-speech-bubble-sparkles"
+            },
             {
               "name": "b2b_icon-sphere"
             },
@@ -3299,6 +3387,9 @@
             {
               "name": "b2b_icon-sustainable-natural-cosmetics"
             },
+            {
+              "name": "b2b_icon-sustainable-organic-food"
+            },
             {
               "name": "b2b_icon-sustainable-organic-materials"
             },
@@ -3320,6 +3411,15 @@
             {
               "name": "b2b_icon-tv"
             },
+            {
+              "name": "b2b_icon-universal-access"
+            },
+            {
+              "name": "b2b_icon-voice-sparkles"
+            },
+            {
+              "name": "b2b_icon-webhook"
+            },
             {
               "name": "b2b_icon-youtube"
             }
@@ -3383,6 +3483,9 @@
             {
               "name": "b2b_icon-basket"
             },
+            {
+              "name": "b2b_icon-callback"
+            },
             {
               "name": "b2b_icon-check"
             },
@@ -3395,24 +3498,48 @@
             {
               "name": "b2b_icon-error-hint"
             },
+            {
+              "name": "b2b_icon-feedback"
+            },
             {
               "name": "b2b_icon-filter"
             },
+            {
+              "name": "b2b_icon-flag-chequered"
+            },
             {
               "name": "b2b_icon-info"
             },
+            {
+              "name": "b2b_icon-inplace-zoom"
+            },
             {
               "name": "b2b_icon-leaving-page"
             },
             {
               "name": "b2b_icon-minus"
             },
+            {
+              "name": "b2b_icon-notification"
+            },
+            {
+              "name": "b2b_icon-pending"
+            },
+            {
+              "name": "b2b_icon-phone"
+            },
             {
               "name": "b2b_icon-pin"
             },
             {
               "name": "b2b_icon-plus"
             },
+            {
+              "name": "b2b_icon-print"
+            },
+            {
+              "name": "b2b_icon-qr-code"
+            },
             {
               "name": "b2b_icon-question-hint"
             },
@@ -3431,6 +3558,18 @@
             {
               "name": "b2b_icon-reply"
             },
+            {
+              "name": "b2b_icon-smiley-angry"
+            },
+            {
+              "name": "b2b_icon-smiley-happy"
+            },
+            {
+              "name": "b2b_icon-smiley-negative"
+            },
+            {
+              "name": "b2b_icon-smiley-neutral"
+            },
             {
               "name": "b2b_icon-smiley-positive"
             },
@@ -3449,6 +3588,9 @@
             {
               "name": "b2b_icon-trend-up"
             },
+            {
+              "name": "b2b_icon-voucher"
+            },
             {
               "name": "b2b_icon-warning-hint"
             },
@@ -3458,12 +3600,39 @@
             {
               "name": "b2b_icon-wishlist"
             },
+            {
+              "name": "b2b_icon-arrow-long-left"
+            },
+            {
+              "name": "b2b_icon-arrow-long-right"
+            },
+            {
+              "name": "b2b_icon-arrow-misdirected"
+            },
+            {
+              "name": "b2b_icon-flame"
+            },
+            {
+              "name": "b2b_icon-lock-open"
+            },
             {
               "name": "b2b_icon-refresh"
             },
+            {
+              "name": "b2b_icon-skip-link"
+            },
+            {
+              "name": "b2b_icon-arrow-return"
+            },
             {
               "name": "b2b_icon-info-hint"
             },
+            {
+              "name": "b2b_icon-lock-closed"
+            },
+            {
+              "name": "b2b_icon-sparkles"
+            },
             {
               "name": "b2b_icon-success-hint"
             }
@@ -3777,9 +3946,13 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "label",
+          "description": "Will provide the label instead of option if set"
+        },
         {
           "name": "option",
-          "description": "The label of the option."
+          "description": "The label and value of the option."
         },
         {
           "name": "selected",

package/dist/esm/b2b-button_2.entry.js

@@ -89,7 +89,7 @@ const SpinnerComponent = class {
         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,