@otto-de/b2b-core-components 1.23.4 → 1.26.0

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-const meta = {
+const button = {
     title: 'Components/Interaction/Button',
     component: 'b2b-button',
     args: {
@@ -30,133 +30,133 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    ${args.label}
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      ${args.label}
+    </b2b-button>`;
     },
 };
-export default meta;
+export default button;
 export const Primary = {
-    args: Object.assign(Object.assign({}, meta.args), { variant: 'primary', label: 'Primary' }),
+    args: Object.assign(Object.assign({}, button.args), { variant: 'primary', label: 'Primary' }),
 };
 export const Secondary = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Secondary' }),
+    args: Object.assign(Object.assign({}, button.args), { label: 'Secondary' }),
 };
 export const Loading = {
-    args: Object.assign(Object.assign({}, meta.args), { loading: true, label: 'Loading' }),
+    args: Object.assign(Object.assign({}, button.args), { loading: true, label: 'Loading' }),
 };
 export const IconStart = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Icon Start' }),
+    args: Object.assign(Object.assign({}, button.args), { label: 'Icon Start' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    <b2b-icon-100 slot="start" icon="b2b_icon-check"></b2b-icon-100>
-    ${args.label}
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      <b2b-icon-100 slot="start" icon="b2b_icon-check"></b2b-icon-100>
+      ${args.label}
+    </b2b-button>`;
     },
 };
 export const IconEnd = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Icon End' }),
+    args: Object.assign(Object.assign({}, button.args), { label: 'Icon End' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    ${args.label}
-    <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      ${args.label}
+      <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
+    </b2b-button>`;
     },
 };
 export const PaliIcon = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Icon from PaLi' }),
+    args: Object.assign(Object.assign({}, button.args), { label: 'Icon from PaLi' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    <i slot="start" class="obc_icon-info"></i>
-    ${args.label}
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      <i slot="start" class="obc_icon-info"></i>
+      ${args.label}
+    </b2b-button>`;
     },
 };
 export const IconOnly = {
-    args: Object.assign({}, meta.args),
+    args: Object.assign({}, button.args),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    <b2b-icon-100 slot="end" icon="b2b_icon-search"></b2b-icon-100>
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      <b2b-icon-100 slot="end" icon="b2b_icon-search"></b2b-icon-100>
+    </b2b-button>`;
     },
 };
 export const Disabled = {
-    args: Object.assign(Object.assign({}, meta.args), { disabled: true, label: 'Disabled' }),
+    args: Object.assign(Object.assign({}, button.args), { disabled: true, label: 'Disabled' }),
 };
 export const Anchor = {
-    args: Object.assign({}, meta.args),
+    args: Object.assign({}, button.args),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    href="www.otto.de"
-    target="blank"
-    type="${args.type}">
-    Go to otto.de
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      href="www.otto.de"
+      target="blank"
+      type="${args.type}">
+      Go to otto.de
+    </b2b-button>`;
     },
 };
 export const DisabledAnchor = {
-    args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+    args: Object.assign(Object.assign({}, button.args), { disabled: true }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    href="www.otto.de"
-    target="blank"
-    type="${args.type}">
-    Go to otto.de
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      href="www.otto.de"
+      target="blank"
+      type="${args.type}">
+      Go to otto.de
+    </b2b-button>`;
     },
 };
 export const CustomWidth = {
-    args: Object.assign(Object.assign({}, meta.args), { width: 'custom' }),
+    args: Object.assign(Object.assign({}, button.args), { width: 'custom' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <b2b-button
-    class="docs-button-obc-overwrite"
-    style="width: 300px"
-    variant="${args.variant}"
-    size="${args.size}"
-    width="${args.width}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    300px custom width
-  </b2b-button>`;
+      class="docs-button-obc-overwrite"
+      style="width: 300px"
+      variant="${args.variant}"
+      size="${args.size}"
+      width="${args.width}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      300px custom width
+    </b2b-button>`;
     },
 };

package/dist/collection/components/card/card.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 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 Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 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 Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -27,12 +27,12 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-chip-component
-    label="${args.label}"
-    type="${args.type}"
-    label-style="${args.labelStyle}"
-    disabled="${args.disabled}"
-    value="${args.value}"
-    has-close-button="${args.hasCloseButton}" />`;
+      label="${args.label}"
+      type="${args.type}"
+      label-style="${args.labelStyle}"
+      disabled="${args.disabled}"
+      value="${args.value}"
+      has-close-button="${args.hasCloseButton}" />`;
     },
 };
 export default meta;
@@ -54,15 +54,15 @@ export const story040WithTruncatedText = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div
-    style="width: 170px; border: 1px solid grey; border-radius: 3px; padding: 6px;">
-    <b2b-chip-component
-      label="${args.label}"
-      type="${args.type}"
-      label-style="${args.labelStyle}"
-      disabled="${args.disabled}"
-      value="${args.value}"
-      has-close-button="${args.hasCloseButton}" />
-  </div>`;
+      style="width: 170px; border: 1px solid grey; border-radius: 3px; padding: 6px;">
+      <b2b-chip-component
+        label="${args.label}"
+        type="${args.type}"
+        label-style="${args.labelStyle}"
+        disabled="${args.disabled}"
+        value="${args.value}"
+        has-close-button="${args.hasCloseButton}" />
+    </div>`;
     },
 };
 export const story050SuccessChip = {

package/dist/collection/components/date-picker/date-picker-days-header.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/date-picker/date-picker-days.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/date-picker/date-picker-header.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/date-picker/date-picker-months.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/date-picker/date-picker-years.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/date-picker/date-picker.js

@@ -86,6 +86,7 @@ export class B2bDatePicker {
         this.disableWeekends = undefined;
         this.disableDates = [];
         this.label = 'Zeitpunkt auswählen';
+        this.required = false;
         this.preSelectedDate = undefined;
         this.showHint = true;
         this.width = 300;
@@ -325,7 +326,7 @@ export class B2bDatePicker {
     render() {
         if (!this.isWithWithinLimit())
             return null;
-        return (h(Host, null, h("div", { class: "b2b-date-picker" }, h("div", { class: "b2b-date-picker-label" }, this.label), h("div", { style: { width: `${this.width}px` }, class: {
+        return (h(Host, null, h("div", { class: "b2b-date-picker" }, h("b2b-input-label", { id: this.label, required: this.required }, this.label), h("div", { style: { width: `${this.width}px` }, class: {
                 'b2b-date-picker-input-wrapper': true,
                 'b2b-date-picker-input-wrapper--focused': this.focused || this.showDatePicker,
                 'b2b-date-picker-input-wrapper--error': this.invalid,
@@ -468,6 +469,24 @@ export class B2bDatePicker {
                 "reflect": false,
                 "defaultValue": "'Zeitpunkt ausw\u00E4hlen'"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an asterisk at the end of the label to signify that the field is required."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "preSelectedDate": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/date-picker/date-picker.stories.js

@@ -12,11 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-import { userEvent } from "@storybook/testing-library";
+import { userEvent } from "@storybook/test";
 const meta = {
     title: 'Components/Form/Date Picker',
     component: 'b2b-date-picker',
     args: {
+        required: false,
         disablePastDates: false,
         disableFutureDates: false,
         disableWeekends: false,
@@ -39,6 +40,7 @@ const meta = {
             return html ` <div style="margin-left: 2px">
         <b2b-date-picker
           label=${args.label}
+          required=${args.required}
           disable-past-dates=${args.disablePastDates}
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}
@@ -58,6 +60,7 @@ const meta = {
             return html ` <div style="margin-left: 2px">
         <b2b-date-picker
           label=${args.label}
+          required=${args.required}
           disable-past-dates=${args.disablePastDates}
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -241,7 +241,7 @@
   border: 1px solid var(--b2b-color-grey-200);
   border-right: var(--b2b-border-right);
   border-radius: var(--b2b-border-radius);
-  padding: 7px 11px 6px;
+  padding: 7px 10px 6px;
   padding-right: calc(1.75rem + 6px);
   height: var(--b2b-size-90);
   line-height: var(--b2b-size-copy-line-height-100);
@@ -257,7 +257,7 @@
 }
 :host(.b2b-dropdown) b2b-input-label {
   display: block;
-  margin-bottom: var(--b2b-size-10);
+  margin-bottom: var(--b2b-size-5);
 }
 :host(.b2b-dropdown) span {
   display: block;

package/dist/collection/components/dropdown/dropdown.js

@@ -25,6 +25,8 @@ export class DropdownComponent {
         this.label = undefined;
         this.required = false;
         this.name = undefined;
+        this.placeholder = 'Select an option...';
+        this.placeholderValue = '';
         this.disabled = false;
         this.invalid = false;
         this.hint = undefined;
@@ -40,14 +42,21 @@ export class DropdownComponent {
     componentDidRender() {
         let options = this.hostElement.querySelectorAll('option');
         const selectElement = this.getSelectElement();
+        selectElement.innerHTML = '';
+        const placeholderOption = document.createElement('option');
+        placeholderOption.value = this.placeholderValue;
+        placeholderOption.textContent = this.placeholder;
+        placeholderOption.disabled = true;
+        placeholderOption.selected = true;
+        selectElement.append(placeholderOption);
         selectElement.append(...options);
     }
     render() {
-        return (h(Host, { key: 'e4eb8019f2b434acde4f3adbe597bb255e0cf872', class: {
+        return (h(Host, { key: '0bdbaf3576571cc9a44355e23db97e867a3bd19d', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': this.invalid && !this.disabled,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: '3a780ca3f170a59ef73f3e72d3668f9941812e9c', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: '7d53810ef3e04fcdd37d0383659057cfbdb0d72c', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (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-dropdown"; }
@@ -116,6 +125,42 @@ export class DropdownComponent {
                 "attribute": "name",
                 "reflect": true
             },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the dropdown."
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'Select an option...'"
+            },
+            "placeholderValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value for the placeholder. Defaults to an empty string but can be customized."
+                },
+                "attribute": "placeholder-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/flyout-menu/flyout-menu-option.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */