@otto-de/b2b-core-components 1.10.1 → 1.11.1

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

@@ -0,0 +1,81 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
+import { userEvent } from "@storybook/testing-library";
+const meta = {
+    title: 'Components/Interaction/Calendar',
+    component: 'b2b-calendar',
+    args: {
+        disablePastDates: false,
+        disableFutureDates: false,
+        disableWeekends: false,
+        label: 'Zeitraum auswählen',
+    },
+    argTypes: getArgTypes('b2b-calendar'),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html ` <div style="margin-left: 100px">
+    <b2b-calendar
+      label=${args.label}
+      disable-past-dates=${args.disablePastDates}
+      disable-future-dates=${args.disableFutureDates}
+      disable-weekends=${args.disableWeekends}></b2b-calendar>
+  </div>`;
+    },
+};
+export default meta;
+export const Default = {
+    args: Object.assign({}, meta.args),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            const calendar = canvasElement.querySelector('b2b-calendar');
+            const b2bCalendarInputWrapper = (_a = calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-calendar-input-wrapper');
+            await userEvent.click(b2bCalendarInputWrapper);
+        }, 500);
+    },
+};
+export const DisablePastDates = {
+    args: Object.assign(Object.assign({}, meta.args), { disablePastDates: true }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            const calendar = canvasElement.querySelector('b2b-calendar');
+            const b2bCalendarInputWrapper = (_a = calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-calendar-input-wrapper');
+            await userEvent.click(b2bCalendarInputWrapper);
+        }, 500);
+    },
+};
+export const DisableFutureDates = {
+    args: Object.assign(Object.assign({}, meta.args), { disableFutureDates: true }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            const calendar = canvasElement.querySelector('b2b-calendar');
+            const b2bCalendarInputWrapper = (_a = calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-calendar-input-wrapper');
+            await userEvent.click(b2bCalendarInputWrapper);
+        }, 500);
+    },
+};
+export const DisableWeekends = {
+    args: Object.assign(Object.assign({}, meta.args), { disableWeekends: true }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            const calendar = canvasElement.querySelector('b2b-calendar');
+            const b2bCalendarInputWrapper = (_a = calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-calendar-input-wrapper');
+            await userEvent.click(b2bCalendarInputWrapper);
+        }, 500);
+    },
+};

package/dist/collection/components/calendar/calendar.types.js

@@ -0,0 +1,15 @@
+export const Months = [
+    'Jan',
+    'Feb',
+    'Mär',
+    'Apr',
+    'Mai',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Okt',
+    'Nov',
+    'Dez',
+];
+export const Weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:41 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:42 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/card/card.js

@@ -26,10 +26,10 @@ export class CardComponent {
             return 0;
     }
     render() {
-        return (h(Host, { key: '6a3323a5f58c054a69080f6bec53bf8a29288a83', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '6a39ac26f49ce2814abb2e2a5f0628d3af9e3ffb', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
                 'b2b-card': true,
                 'b2b-card--disabled': this.disabled,
-            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '72a803fa506ce9f3a2a79e9fe677d4f8facb1d36' })));
+            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '19775bd829936bbe3fa1aa8d58dde18f6d602228' })));
     }
     static get is() { return "b2b-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:41 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:42 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/checkbox/checkbox.js

@@ -65,14 +65,14 @@ export class CheckboxComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'c86d4e004efb5915b0599988694e0947e18c30d5', onClick: this.onClick }, h("div", { key: '7f24bbd3dc6c15c614c7c5c6b975b1e478bfd78c', class: {
+        return (h(Host, { key: '15500c41147539bda4b3a5355fbaae206711172e', onClick: this.onClick }, h("div", { key: '285ad6cca81447d099870f0faec211d5cd7111de', class: {
                 'b2b-checkbox': true,
                 'b2b-checkbox--error': this.invalid && !this.disabled,
                 'b2b-checkbox--disabled': this.disabled || this.groupDisabled,
                 'b2b-checkbox--checked': this.checked,
                 'b2b-checkbox--standalone': this.standalone,
                 'b2b-checkbox--indeterminate': this.indeterminate,
-            } }, h("div", { key: '721592f4c6d92e644809e4dca7ec17f97f306178', class: "b2b-checkbox-items" }, this.renderIcon(), h("input", { key: '4961c34d17d578179cc368f4cad206ad955cade8', class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, this.label))), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: '74319860db88f14c2f56b6e7ed4f5e797433dd5b', class: "b2b-checkbox-items" }, this.renderIcon(), h("input", { key: '68a6c2c855731d1e5887bc3cbac14d4ed51468c9', class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, this.label))), (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-checkbox"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:41 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:42 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -65,11 +65,11 @@ export class CheckboxGroupComponent {
         }
     }
     render() {
-        return (h(Host, { key: '17f56d642b6ef6a4157a51178c4e1d604755f698' }, h("div", { key: 'caf98c3c46fb753dad491e2b1e98ff212e7c6a93', class: {
+        return (h(Host, { key: '3b6da1303cdfd1bdddbc1f31323e50986ac7b087' }, h("div", { key: 'c626a8341b17c86efd58e6c9da73b44257b8cd9a', class: {
                 'b2b-checkbox-group': true,
                 'b2b-checkbox-group--error': this.invalid && !this.disabled,
                 [`b2b-checkbox-group--${this.alignment}`]: true,
-            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '0b9b7dd931a8059a6ed0e53a49e799076e1d33ea' }, h("div", { key: '4385c56f2f7d570abfa58877b623b82f1006cafa', class: "b2b-checkbox-group__options" }, h("slot", { key: 'a15f2bd94e9167701a85cbf2981a268325bc4c85' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '881df0a66e9479f2eab63d0387fc4d4f4ee37295' }, h("div", { key: '936511055623583956fc980f62497cdc01a9dc21', class: "b2b-checkbox-group__options" }, h("slot", { key: 'd096cf78944f253e07d0b852c38db6c486681eb3' }))), (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-checkbox-group"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:41 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:42 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -234,14 +234,47 @@
   align-items: center;
   cursor: default;
   margin-left: var(--b2b-size-20);
+  color: var(--b2b-color-copy-default);
+}
+:host .b2b-chip--success {
+  height: var(--b2b-size-45);
+  background-color: var(--b2b-color-success-50);
+  border: var(--b2b-size-border-width-50) solid var(--b2b-color-success-100);
+}
+:host .b2b-chip--info {
+  height: var(--b2b-size-45);
+  background-color: var(--b2b-color-info-50);
+  border: var(--b2b-size-border-width-50) solid var(--b2b-color-info-100);
+}
+:host .b2b-chip--warn {
+  height: var(--b2b-size-45);
+  background-color: var(--b2b-color-warning-50);
+  border: var(--b2b-size-border-width-50) solid var(--b2b-color-warning-100);
+}
+:host .b2b-chip--error {
+  height: var(--b2b-size-45);
+  background-color: var(--b2b-color-error-50);
+  border: var(--b2b-size-border-width-50) solid var(--b2b-color-error-100);
 }
 :host .b2b-chip__label {
   display: inline-block;
   text-overflow: ellipsis;
   overflow: hidden;
 }
+:host .b2b-chip__label--bold {
+  font-weight: bold;
+}
+:host .b2b-chip__label--italic {
+  font-style: italic;
+}
+:host .b2b-chip__label--underline {
+  text-decoration: underline;
+}
+:host .b2b-chip__label--strikethrough {
+  text-decoration: line-through;
+}
 :host .b2b-chip__label--close-button {
-  margin-right: var(--b2b-size-10);
+  margin-right: var(--b2b-size-5);
 }
 :host .b2b-chip__clearIcon {
   display: flex;

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

@@ -8,6 +8,86 @@ describe('B2B-Chip-Component', () => {
         expect(chip).not.toBeNull();
         expect(clearIcon).not.toBeNull();
     });
+    it('should render the chip component with success type', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" type="success"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+        expect(chipWrapper).toHaveClass('b2b-chip--success');
+    });
+    it('should render the chip component with info type', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" type="info"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+        expect(chipWrapper).toHaveClass('b2b-chip--info');
+    });
+    it('should render the chip component with warning type', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" type="warn"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+        expect(chipWrapper).toHaveClass('b2b-chip--warn');
+    });
+    it('should render the chip component with error type', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" type="error"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+        expect(chipWrapper).toHaveClass('b2b-chip--error');
+    });
+    it('should render the chip component with bold label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" label-style="bold"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+        expect(label).toHaveClass('b2b-chip__label--bold');
+    });
+    it('should render the chip component with italic label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" label-style="italic"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+        expect(label).toHaveClass('b2b-chip__label--italic');
+    });
+    it('should render the chip component with underlined label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" label-style="underline"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+        expect(label).toHaveClass('b2b-chip__label--underline');
+    });
+    it('should render the chip component with strikethrough label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" label-style="strikethrough"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+        expect(label).toHaveClass('b2b-chip__label--strikethrough');
+    });
     it('should emit b2b-close event on clear icon click', async () => {
         const page = await newE2EPage();
         await page.setContent(`<b2b-chip-component label="chip"></b2b-chip-component>`);

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

@@ -15,16 +15,20 @@ export class B2bChipComponent {
         };
         this.clearIcon = (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.85352 3.14648C7.6582 2.95117 7.3418 2.95117 7.14648 3.14648L5.5 4.79297L3.85352 3.14648C3.6582 2.95117 3.3418 2.95117 3.14648 3.14648C2.95117 3.3418 2.95117 3.6582 3.14648 3.85352L4.79297 5.5L3.14648 7.14648C2.95117 7.3418 2.95117 7.6582 3.14648 7.85352C3.24414 7.95117 3.37207 8 3.5 8C3.62793 8 3.75586 7.95117 3.85352 7.85352L5.5 6.20703L7.14648 7.85352C7.24414 7.95117 7.37207 8 7.5 8C7.62793 8 7.75586 7.95117 7.85352 7.85352C8.04883 7.6582 8.04883 7.3418 7.85352 7.14648L6.20703 5.5L7.85352 3.85352C8.04883 3.6582 8.04883 3.3418 7.85352 3.14648ZM5.5 0C2.46729 0 0 2.46729 0 5.5C0 8.53271 2.46729 11 5.5 11C8.53271 11 11 8.53271 11 5.5C11 2.46729 8.53271 0 5.5 0ZM5.5 10C3.01855 10 1 7.98145 1 5.5C1 3.01855 3.01855 1 5.5 1C7.98145 1 10 3.01855 10 5.5C10 7.98145 7.98145 10 5.5 10Z" })));
         this.label = undefined;
+        this.type = undefined;
+        this.labelStyle = undefined;
         this.disabled = false;
         this.hasCloseButton = true;
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '77c42654e6a464ff77fccdf2b7a27827a4784aa5' }, h("div", { key: 'ce62139769921473a5447fffc8de5ce15adaf57b', class: {
+        return (h(Host, { key: '2d25f08431074055d7da97f361739e9dbcb19a01' }, h("div", { key: 'b852bebe68a3d80d7264f7212fe220f7ffd3232f', class: {
                 'b2b-chip': true,
+                [`b2b-chip--${this.type}`]: !this.disabled && this.type !== undefined,
                 'b2b-chip--disabled': this.disabled,
-            } }, h("span", { key: 'c39e42b28b7ce72ae3e03dbd1c29e35c9a94ae57', class: {
+            } }, h("span", { key: '4f5cc17ec7edfad96f8bf7fb2eb3d88368627ede', class: {
                 'b2b-chip__label': true,
+                [`b2b-chip__label--${this.labelStyle}`]: this.labelStyle !== undefined,
                 'b2b-chip__label--close-button': this.hasCloseButton,
             } }, this.label), this.hasCloseButton && (h("button", { class: {
                 'b2b-chip__clearIcon': true,
@@ -62,6 +66,40 @@ export class B2bChipComponent {
                 "attribute": "label",
                 "reflect": false
             },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'info' | 'warn' | 'error'",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warn\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of chip to represent states like success, info, warn and error. Uses default style if not set."
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "labelStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bold' | 'italic' | 'underline' | 'strikethrough'",
+                    "resolved": "\"bold\" | \"italic\" | \"strikethrough\" | \"underline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set."
+                },
+                "attribute": "label-style",
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -1,43 +1,99 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-const Template = ({ label, disabled, value, hasCloseButton }) => {
-    return html `<b2b-chip-component
-    label="${label}"
-    disabled="${disabled}"
-    value="${value}"
-    has-close-button="${hasCloseButton}"></b2b-chip-component>`;
-};
-const TruncTemplate = ({ label, disabled, value, hasCloseButton }) => {
-    return html `<div
+const meta = {
+    title: 'Components/Interaction/Chip',
+    component: 'b2b-chip-component',
+    args: {
+        label: 'Chip Label',
+        type: undefined,
+        labelStyle: undefined,
+        disabled: false,
+        value: '',
+        hasCloseButton: true,
+    },
+    argTypes: getArgTypes('b2b-chip-component'),
+    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}" />`;
+    },
+};
+export default meta;
+export const story010Default = {
+    name: 'Default',
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Default Chip' }),
+};
+export const story020Disabled = {
+    name: 'Disabled',
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Disabled Chip', disabled: true }),
+};
+export const story030WithoutButton = {
+    name: 'Without Button',
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Chip without button', hasCloseButton: false }),
+};
+export const story040WithTruncatedText = {
+    name: 'Truncated Label',
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Chip with truncated label' }),
+    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="${label}"
-      disabled="${disabled}"
-      value="${value}"
-      has-close-button="${hasCloseButton}"></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>`;
+    },
 };
-const defaultArgs = {
-    label: 'Chip Label',
-    disabled: false,
-    value: '',
-    hasCloseButton: true,
-};
-export const story010Default = Template.bind({});
-story010Default.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Default Chip' });
-story010Default.storyName = 'Default';
-export const story020Disabled = Template.bind({});
-story020Disabled.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Disabled Chip', disabled: true });
-story020Disabled.storyName = 'Disabled';
-export const story030WithoutButton = Template.bind({});
-story030WithoutButton.args = Object.assign(Object.assign({}, defaultArgs), { label: ' Chip without button', hasCloseButton: false });
-story030WithoutButton.storyName = 'Without Button';
-export const story040WithTruncatedText = TruncTemplate.bind({});
-story040WithTruncatedText.args = Object.assign(Object.assign({}, defaultArgs), { label: ' Chip with truncated text' });
-story040WithTruncatedText.storyName = 'Truncated Text';
-const chipComponentArgs = getArgTypes('b2b-chip-component');
-export default {
-    title: 'Components/Interaction/Chip',
-    argTypes: chipComponentArgs,
-    viewMode: 'docs',
+export const story050SuccessChip = {
+    name: 'Success Chip',
+    args: Object.assign(Object.assign({}, meta.args), { type: 'success', label: 'Chip with success type' }),
+};
+export const story051InfoChip = {
+    name: 'Info Chip',
+    args: Object.assign(Object.assign({}, meta.args), { type: 'info', label: 'Chip with info type' }),
+};
+export const story052WarningChip = {
+    name: 'Warning Chip',
+    args: Object.assign(Object.assign({}, meta.args), { type: 'warn', label: 'Chip with warning type' }),
+};
+export const story053ErrorChip = {
+    name: 'Error Chip',
+    args: Object.assign(Object.assign({}, meta.args), { type: 'error', label: 'Chip with error type' }),
+};
+export const story060BoldLabel = {
+    name: 'Bold Label',
+    args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'bold', label: 'Chip with bold style' }),
+};
+export const story061ItalicLabel = {
+    name: 'Italic Label',
+    args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'italic', label: 'Chip with italic style' }),
+};
+export const story062UnderlinedLabel = {
+    name: 'Underlined Label',
+    args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'underline', label: 'Chip with underline style' }),
+};
+export const story063StrikethroughLabel = {
+    name: 'Strikethrough Label',
+    args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'strikethrough', label: 'Chip with strikethrough style' }),
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:41 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:42 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -43,11 +43,11 @@ export class DropdownComponent {
         selectElement.append(...options);
     }
     render() {
-        return (h(Host, { key: '5397c2e35d08dec639b2763a7e57b5106e706e99', class: {
+        return (h(Host, { key: 'cb7a0a4bcc708257cada82f8ce45041b63d6baf1', 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: '7183009ea350d6f78a058f64894d09a2c4251dc7', 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: '7b613f352cc3c501dd3ef917bfc25efc3006f69b', 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"; }

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

@@ -16,7 +16,7 @@ export class FlyoutMenuOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: '1f5d621a609edaaed502796616e8ef969cc0c3a8', class: {
+        return (h(Host, { key: '9332072c4536e9dfbb55e451c0886179afb20c45', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:41 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 18 Jun 2024 10:17:42 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/flyout-menu/flyout-menu.js

@@ -132,12 +132,12 @@ export class FlyoutMenuComponent {
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '89937140ae7e17b57dca9ab84fee4b41dff52f9f' }, h("div", { key: '4423849c7dbfc018494e868baeb0cf0ab8e88861', class: {
+        return (h(Host, { key: '5f8927a6f6ace022337a745aa0c5c7de8c3b9ca1' }, h("div", { key: '339e2e53ef4b050b36e20f73a49a76eeb754d2a3', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: 'a9af5524e21d365906cf78559a116fbab6b77320', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '4344734420e284ac8dd2a38b1e4f9cac51228ed1', name: "trigger" })), h("div", { key: 'dc3c9970d365dc8c4ed5b588ddf6a3994290e5f6', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: '36815dbbd15e98a617b308491c8ad39e9fd81d0d', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '68103d9c6c4d5ec094d2e15469177bbe6c11250f', name: "trigger" })), h("div", { key: '58777a87a708ebfa65dff39622cf4715b0a9bdd5', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '0d08b3e259a8da4dabc41d809e0310a3bcf92541', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'bdc2acb63bfb5a779945cd55edfbf133dac79e2f', name: "option" })))));
+            } }, h("div", { key: '9b56d64c648a044faab165546c5aec1ea58d5d15', class: "b2b-flyout-menu__arrow" }), h("slot", { key: '15d2d1809c563ae2b89b76c3080dbf619e35cefd', name: "option" })))));
     }
     static get is() { return "b2b-flyout-menu"; }
     static get encapsulation() { return "shadow"; }