@otto-de/b2b-core-components 1.37.0 → 1.37.2

package/dist/collection/components/background-box/background-box.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --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);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/background-box/background-box.stories.js

@@ -27,12 +27,12 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <b2b-background-box
-      max-width="${args.maxWidth}"
-      no-padding="${args.noPadding}"
-      border-top="${args.borderTop}"
-      border-right="${args.borderRight}"
-      border-bottom="${args.borderBottom}"
-      border-left="${args.borderLeft}">
+      max-width=${args.maxWidth}
+      no-padding=${args.noPadding}
+      border-top=${args.borderTop}
+      border-right=${args.borderRight}
+      border-bottom=${args.borderBottom}
+      border-left=${args.borderLeft}>
       <b2b-paragraph>
         The BackgroundBox component adjusts its width and padding based on two
         properties: maxWidth and noPadding. When maxWidth is true, it fills the

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -8,6 +8,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -69,7 +70,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --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);
@@ -137,6 +138,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -2,12 +2,10 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ href, active, paddingTop, paddingBottom }) => {
     return html `
-    <b2b-breadcrumb
-      padding-top="${paddingTop}"
-      padding-bottom="${paddingBottom}">
-      <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
+    <b2b-breadcrumb padding-top=${paddingTop} padding-bottom=${paddingBottom}>
+      <b2b-breadcrumb-item href=${href}>Start</b2b-breadcrumb-item>
       <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
-      <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
+      <b2b-breadcrumb-item active=${active}>Ende</b2b-breadcrumb-item>
     </b2b-breadcrumb>
   `;
 };

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --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);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -30,11 +30,11 @@ const button = {
     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}">
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
+      type=${args.type}>
       ${args.label}
     </b2b-button>`;
     },
@@ -54,11 +54,11 @@ export const IconStart = {
     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}">
+      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>`;
@@ -69,11 +69,11 @@ export const IconEnd = {
     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}">
+      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>`;
@@ -84,11 +84,11 @@ export const PaliIcon = {
     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}">
+      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>`;
@@ -99,11 +99,11 @@ export const IconOnly = {
     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}">
+      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>`;
     },
@@ -116,13 +116,13 @@ export const Anchor = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-      variant="${args.variant}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
       href="www.otto.de"
       target="blank"
-      type="${args.type}">
+      type=${args.type}>
       Go to otto.de
     </b2b-button>`;
     },
@@ -132,13 +132,13 @@ export const DisabledAnchor = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-      variant="${args.variant}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
       href="www.otto.de"
       target="blank"
-      type="${args.type}">
+      type=${args.type}>
       Go to otto.de
     </b2b-button>`;
     },
@@ -150,12 +150,12 @@ export const CustomWidth = {
         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}">
+      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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --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);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ disabled, href, target }) => {
-    return html `<b2b-card disabled="${disabled}" href=${href} target="${target}">
+    return html `<b2b-card disabled=${disabled} href=${href} target=${target}>
     <b2b-headline size="100">An Interactive Card</b2b-headline>
     <b2b-paragraph
       >You can hover over me or press tab on your keyboard to see me pop out. I

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --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);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -2,15 +2,15 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, checked, disabled, hint, error, name, value, invalid, }) => {
     return html `<b2b-checkbox
-    label="${label}"
-    required="${required}"
-    checked="${checked}"
-    disabled="${disabled}"
-    hint="${hint}"
-    error="${error}"
-    name="${name}"
-    value="${value}"
-    invalid="${invalid}"></b2b-checkbox>`;
+    label=${label}
+    required=${required}
+    checked=${checked}
+    disabled=${disabled}
+    hint=${hint}
+    error=${error}
+    name=${name}
+    value=${value}
+    invalid=${invalid}></b2b-checkbox>`;
 };
 const defaultArgs = {
     label: 'Checkbox Label',

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --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);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -4,15 +4,15 @@ const Template = ({ label, required, disabled, invalid, hint, error, alignment,
     const firstLabel = 'One';
     const secondLabel = 'Two';
     return html `<b2b-checkbox-group
-    label="${label}"
-    required="${required}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    hint="${hint}"
-    error="${error}"
-    alignment="${alignment}">
-    <b2b-checkbox label="${firstLabel}"></b2b-checkbox>
-    <b2b-checkbox label="${secondLabel}"></b2b-checkbox>
+    label=${label}
+    required=${required}
+    disabled=${disabled}
+    invalid=${invalid}
+    hint=${hint}
+    error=${error}
+    alignment=${alignment}>
+    <b2b-checkbox label=${firstLabel}></b2b-checkbox>
+    <b2b-checkbox label=${secondLabel}></b2b-checkbox>
   </b2b-checkbox-group>`;
 };
 const defaultArgs = {

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --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);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -28,13 +28,13 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-chip-component
-      custom-margin="${args.customMargin}"
-      label="${args.label}"
-      type="${args.type}"
-      label-style="${args.labelStyle}"
-      disabled="${args.disabled}"
-      value="${args.value}"
-      has-close-button="${args.hasCloseButton}" />`;
+      custom-margin=${args.customMargin}
+      label=${args.label}
+      type=${args.type}
+      label-style=${args.labelStyle}
+      disabled=${args.disabled}
+      value=${args.value}
+      has-close-button=${args.hasCloseButton} />`;
     },
 };
 export default meta;
@@ -58,12 +58,12 @@ export const story040WithTruncatedText = {
         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}" />
+        label=${args.label}
+        type=${args.type}
+        label-style=${args.labelStyle}
+        disabled=${args.disabled}
+        value=${args.value}
+        has-close-button=${args.hasCloseButton} />
     </div>`;
     },
 };

package/dist/collection/components/custom-dropdown/custom-dropdown-option.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --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);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --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);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/custom-dropdown/custom-dropdown.stories.js

@@ -34,11 +34,11 @@ const meta = {
         var args = __rest(_a, []);
         return html `<div style="margin-left: 16px;width: 300px">
       <b2b-custom-dropdown
-        placeholder="${args.placeholder}"
-        dropshadow="${args.dropshadow}"
-        border="${args.border}"
-        alignment="${args.alignment}"
-        opened="${args.opened}">
+        placeholder=${args.placeholder}
+        dropshadow=${args.dropshadow}
+        border=${args.border}
+        alignment=${args.alignment}
+        opened=${args.opened}>
         <b2b-paragraph slot="trigger">
           This is a custom dropdown
           <b2b-icon-100
@@ -49,72 +49,72 @@ const meta = {
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 1"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          selected="${args.selected}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          selected=${args.selected}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 2"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 3"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 4"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 5"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 6"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 7"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
       </b2b-custom-dropdown>
     </div>`;