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

package/dist/collection/components/date-picker/date-picker-days-header.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/date-picker/date-picker-days.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/date-picker/date-picker-header.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/date-picker/date-picker-months.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/date-picker/date-picker-years.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/date-picker/date-picker.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/date-picker/date-picker.stories.js

@@ -45,7 +45,7 @@ const meta = {
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}
           disable-dates=${args.disableDates}
-          .pre-selected-date="${args.preSelectedDate}"
+          .pre-selected-date=${args.preSelectedDate}
           disable-days=${args.disableDays}
           disable-dates-until=${args.disableDatesUntil}
           disable-dates-from=${args.disableDatesFrom}
@@ -65,7 +65,7 @@ const meta = {
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}
           disable-dates=${args.disableDates}
-          pre-selected-date="${args.preSelectedDate}"
+          pre-selected-date=${args.preSelectedDate}
           disable-days=${args.disableDays}
           disable-dates-until=${args.disableDatesUntil}
           disable-dates-from=${args.disableDatesFrom}

package/dist/collection/components/date-range-picker/date-range-picker-days.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/date-range-picker/date-range-picker.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/date-range-picker/date-range-picker.spec.js

@@ -2,6 +2,28 @@ import { newSpecPage } from "@stencil/core/testing";
 import { h } from "@stencil/core";
 import { B2bDateRangePicker } from "./date-range-picker";
 import { ParagraphComponent } from "../paragraph/paragraph";
+const MOCK_DATE = new Date('2025-11-15T12:00:00.000Z');
+const RealDate = Date;
+beforeAll(() => {
+    // @ts-ignore
+    global.Date = class extends RealDate {
+        constructor(...args) {
+            if (args.length === 0) {
+                super(MOCK_DATE.getTime());
+            }
+            else {
+                // @ts-ignore
+                super(...args);
+            }
+        }
+        static now() {
+            return MOCK_DATE.getTime();
+        }
+    };
+});
+afterAll(() => {
+    global.Date = RealDate;
+});
 it('should render the date-range-picker', async () => {
     const page = await newSpecPage({
         components: [B2bDateRangePicker],

package/dist/collection/components/dropdown/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/dropdown/dropdown.stories.js

@@ -3,15 +3,15 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label = 'Favorite Fruit', required, name, disabled, invalid, hint, error, search, clear, selected = false, }) => {
     return html `<b2b-dropdown
-    label="${label}"
-    name="${name}"
-    error="${error}"
-    hint="${hint}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    required="${required}"
-    search="${search}"
-    clear="${clear}">
+    label=${label}
+    name=${name}
+    error=${error}
+    hint=${hint}
+    disabled=${disabled}
+    invalid=${invalid}
+    required=${required}
+    search=${search}
+    clear=${clear}>
     <option value="strawberry">Strawberry</option>
     <option value="orange">Orange</option>
     <option value="banana">Banana</option>

package/dist/collection/components/flyout-menu/flyout-menu-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/flyout-menu/flyout-menu.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/flyout-menu/flyout-menu.stories.js

@@ -29,12 +29,12 @@ const meta = {
         <b2b-flyout-menu-option
           slot="option"
           option="Delete"
-          disabled="${args.disabled}">
+          disabled=${args.disabled}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option
           slot="option"
           option="Pause"
-          separator="${args.separator}">
+          separator=${args.separator}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option slot="option" option="Copy">
         </b2b-flyout-menu-option>
@@ -72,12 +72,12 @@ export const AllStates = {
         <b2b-flyout-menu-option
           slot="option"
           option="Delete"
-          disabled="${args.disabled}">
+          disabled=${args.disabled}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option
           slot="option"
           option="Pause"
-          separator="${args.separator}">
+          separator=${args.separator}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option slot="option" option="Copy">
         </b2b-flyout-menu-option>

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

@@ -33,13 +33,13 @@ export const story010Grid = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return html ` <b2b-grid margin="${args.margin}">
+        return html ` <b2b-grid margin=${args.margin}>
       <b2b-grid-row
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
-        <b2b-grid-col span="6" text-align="${args.textAlign}"
-          ><div style="${gridBoxStyles}">
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
+        <b2b-grid-col span="6" text-align=${args.textAlign}
+          ><div style=${gridBoxStyles}>
             <h4>Column 1-6 of 12</h4>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -53,25 +53,25 @@ export const story010Grid = {
           </div></b2b-grid-col
         >
         <b2b-grid-col
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7 of 12</h4>
             <p>I grow to fill up all available space</p>
           </div></b2b-grid-col
         >
         <b2b-grid-col
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 8 of 12</h4>
             <p>I grow to fill up all available space</p>
           </div></b2b-grid-col
         >
         <b2b-grid-col
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 9 of 12</h4>
             <p>I grow to fill up all available space</p>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="3"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 10-12 of 12</h4>
             <p>Resize me by changing the span attribute in the args table.</p>
           </div></b2b-grid-col
@@ -94,37 +94,37 @@ export const story020AlignItems = {
         var args = __rest(_a, []);
         return html `<b2b-grid
       ><b2b-grid-row
-        align-items="${args.alignItems}"
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
+        align-items=${args.alignItems}
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
         <b2b-grid-col span="2"
-          ><div style="${gridBoxSmallStyles}">
+          ><div style=${gridBoxSmallStyles}>
             <h4>Column 1-2 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 3-4 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxSmallStyles}">
+          ><div style=${gridBoxSmallStyles}>
             <h4>Column 5-6 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7-8 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxSmallStyles}">
+          ><div style=${gridBoxSmallStyles}>
             <h4>Column 9-10 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 11-12 of 12</h4>
           </div></b2b-grid-col
         >
@@ -144,13 +144,13 @@ export const story030TextAlign = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return html `<b2b-grid margin="${args.margin}">
+        return html `<b2b-grid margin=${args.margin}>
       <b2b-grid-row
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
-        <b2b-grid-col span="6" text-align="${args.textAlign}"
-          ><div style="${gridBoxStyles}">
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
+        <b2b-grid-col span="6" text-align=${args.textAlign}
+          ><div style=${gridBoxStyles}>
             <h4>Column 1-6 of 12</h4>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -164,17 +164,17 @@ export const story030TextAlign = {
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7-8 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 9-10 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 11-12 of 12</h4>
           </div></b2b-grid-col
         ></b2b-grid-row
@@ -194,13 +194,13 @@ export const story040Justify = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return html `<b2b-grid margin="${args.margin}">
+        return html `<b2b-grid margin=${args.margin}>
       <b2b-grid-row
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
-        <b2b-grid-col span="6" text-align="${args.textAlign}"
-          ><div style="${gridBoxStyles}">
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
+        <b2b-grid-col span="6" text-align=${args.textAlign}
+          ><div style=${gridBoxStyles}>
             <h4>Column 1-6 of 12</h4>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -214,17 +214,17 @@ export const story040Justify = {
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7-8 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 9-10 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 11-12 of 12</h4>
           </div></b2b-grid-col
         ></b2b-grid-row

package/dist/collection/components/headline/headline.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/headline/headline.stories.js

@@ -1,10 +1,7 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const template = ({ size, align, slot, noMargin }) => {
-    return html `<b2b-headline
-    size="${size}"
-    align="${align}"
-    no-margin="${noMargin}">
+    return html `<b2b-headline size=${size} align=${align} no-margin=${noMargin}>
     ${slot}
   </b2b-headline>`;
 };

package/dist/collection/components/icon/icon.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/icon/icon.stories.js

@@ -3,10 +3,7 @@ import { getArgTypes } from "../../docs/config/utils";
 import { iconTypes } from "./types";
 import "./../../global/icon.stories.scss";
 const Template = ({ icon, color, variant }) => {
-    return html `<b2b-icon
-    icon="${icon}"
-    color="${color}"
-    variant="${variant}" />`;
+    return html `<b2b-icon icon=${icon} color=${color} variant=${variant} />`;
 };
 const defaultArgs = {
     icon: 'b2b_icon-edit',
@@ -29,7 +26,7 @@ story030Inverse.parameters = {
 };
 export const story035Inherit = ({ icon, color, variant }) => {
     return html ` <div style="color: red;">
-    <b2b-icon icon="${icon}" color="${color}" variant="${variant}" />
+    <b2b-icon icon=${icon} color=${color} variant=${variant} />
   </div>`;
 };
 story035Inherit.args = Object.assign(Object.assign({}, defaultArgs), { color: 'inherit' });
@@ -46,9 +43,9 @@ export const story070AllIcons = ({ color, variant }) => {
         return html `
       <div class="icon-container">
         <b2b-icon
-          icon="${icon}"
-          color="${color || defaultArgs.color}"
-          variant="${variant || 100}"></b2b-icon>
+          icon=${icon}
+          color=${color || defaultArgs.color}
+          variant=${variant || 100}></b2b-icon>
         <p>${icon}</p>
       </div>
     `;