@otto-de/b2b-core-components 1.22.0 → 1.23.0

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

@@ -5,7 +5,7 @@ describe('B2B-FlyoutMenu', () => {
         page = await newE2EPage();
         await page.setContent(`
       <b2b-flyout-menu>
-        <b2b-icon icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon>
+        <b2b-icon-100 icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon-100>
         <b2b-flyout-menu-option slot='option' option='option1' >
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option slot='option' option='option2' >
@@ -24,14 +24,14 @@ describe('B2B-FlyoutMenu', () => {
         expect(icon).not.toBeNull();
     });
     it('should show the menu when icon is clicked', async () => {
-        const iconContainer = await page.find('b2b-icon');
+        const iconContainer = await page.find('b2b-icon-100');
         iconContainer.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
         expect(await flyoutMenuOption.isVisible()).toBe(true);
     });
     it('should hide the menu when it loses focus', async () => {
-        const iconContainer = await page.find('b2b-icon');
+        const iconContainer = await page.find('b2b-icon-100');
         iconContainer.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
@@ -44,7 +44,7 @@ describe('B2B-FlyoutMenu', () => {
     /** Test is extremely flaky due to unknown global interaction. Test suite runs fine in isolation, so skipping for now. */
     xit('should emit the selected event when a menu option is clicked', async () => {
         const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
-        const icon = await page.find('b2b-icon >>> div');
+        const icon = await page.find('b2b-icon-100 >>> div');
         await icon.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
@@ -58,7 +58,7 @@ describe('B2B-FlyoutMenu', () => {
     });
     it('should disable an option when disabled is true', async () => {
         const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
-        const icon = await page.find('b2b-icon');
+        const icon = await page.find('b2b-icon-100');
         icon.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option[option="option3"]');
@@ -68,7 +68,7 @@ describe('B2B-FlyoutMenu', () => {
         expect(optionSelectedEventSpy).not.toHaveReceivedEvent();
     });
     it('should display separator after an option when separator is true', async () => {
-        const icon = await page.find('b2b-icon');
+        const icon = await page.find('b2b-icon-100');
         icon.click();
         await page.waitForChanges();
         const flyoutMenuOptions = await page.findAll('b2b-flyout-menu-option');

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

@@ -21,11 +21,11 @@ const meta = {
         var args = __rest(_a, []);
         return html ` <div style="margin-left: 100px">
     <b2b-flyout-menu>
-      <b2b-icon
+      <b2b-icon-100
         icon="b2b_icon-ellipsis"
         slot="trigger"
         clickable
-        focusable></b2b-icon>
+        focusable></b2b-icon-100>
       <b2b-flyout-menu-option
         slot="option"
         option="Delete"
@@ -64,11 +64,11 @@ export const AllStates = {
         var args = __rest(_a, []);
         return html ` <div style="margin-left: 100px">
     <b2b-flyout-menu opened="true">
-      <b2b-icon
+      <b2b-icon-100
         icon="b2b_icon-ellipsis"
         slot="trigger"
         clickable
-        focusable></b2b-icon>
+        focusable></b2b-icon-100>
       <b2b-flyout-menu-option
         slot="option"
         option="Delete"

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

@@ -1,30 +1,18 @@
 import { h, Host } from "@stencil/core";
 export class B2bGridColumnComponent {
     constructor() {
-        this.calculateGrowDimension = (growth) => {
-            const gap = this.hostElement.closest('b2b-grid-row').columnGap;
-            // if a span is not specified, we still need to subtract gap width and a growth factor of 1
-            let growthFactor;
-            if (gap > 0 && growth != undefined) {
-                growthFactor = `- ${gap - 2 * growth}px`;
-            }
-            else if (gap <= 0 && growth != undefined) {
-                growthFactor = '';
-            }
-            else {
-                growthFactor = `- ${gap - 2}px`;
-            }
-            const flexGrow = growth == undefined ? 1 : 0;
-            const width = growth == undefined ? 1 : growth;
+        this.calculateGrowDimension = (span) => {
+            const colSpan = span !== null && span !== void 0 ? span : 1;
+            const flex = (colSpan / 12) * 100;
             return {
-                ['flex']: `${flexGrow} 0 calc(${(width / 12) * 100}% ${growthFactor})`,
+                ['flex']: `${flex}`,
             };
         };
         this.span = undefined;
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: 'f83b2c034afd37db56dd216e61b17718c96fc3ec', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'ddf44e8dab7ed9267c2be3e4a2a1ff6ba13bb53b' })));
+        return (h(Host, { key: 'ad6a14cd39b9429064c305bfbe6e0d6b9f506faa', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '1b488c100774214fb52eeec64ffe70a8fadf0a3c' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,230 +1,231 @@
+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 = ({ margin, justify, textAlign, span, rowGap, columnGap, alignItems, storyName, }) => {
-    const gridBoxStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 200px;`;
-    const gridBoxSmallStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 100px;`;
-    switch (storyName) {
-        case '010Grid':
-            return html ` <b2b-grid margin="${margin}">
-        <b2b-grid-row
-          justify="${justify}"
-          row-gap="${rowGap}"
-          column-gap="${columnGap}">
-          <b2b-grid-col span="6" text-align="${textAlign}"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 1-6 of ${9 + Number(span)}</h4>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Suspendisse massa urna, accumsan id viverra et, mollis sit amet
-                sem. Cras congue ex ac arcu pellentesque, eu vestibulum sem
-                tempor. Curabitur consequat massa sed nulla lacinia, vitae
-                scelerisque ante egestas. Praesent et diam quis diam posuere
-                egestas. Duis feugiat lorem non nisl consectetur, sed fringilla
-                odio semper.
-              </p>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 7 of ${9 + Number(span)}</h4>
-              <p>I grow to fill up all available space</p>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 8 of ${9 + Number(span)}</h4>
-              <p>I grow to fill up all available space</p>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 9 of ${9 + Number(span)}</h4>
-              <p>I grow to fill up all available space</p>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col span="${span}"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 10-${9 + Number(span)} of ${9 + Number(span)}</h4>
-              <p>Resize me by changing the span attribute in the args table.</p>
-            </div></b2b-grid-col
-          >
-        </b2b-grid-row>
-      </b2b-grid>`;
-        case '020AlignItems':
-            return html `<b2b-grid
-        ><b2b-grid-row
-          align-items="${alignItems}"
-          justify="${justify}"
-          row-gap="${rowGap}"
-          column-gap="${columnGap}">
-          <b2b-grid-col
-            ><div style="${gridBoxSmallStyles}">
-              <h4>Column 1 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 2 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxSmallStyles}">
-              <h4>Column 3 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 4 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxSmallStyles}">
-              <h4>Column 5 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 6 of 6</h4>
-            </div></b2b-grid-col
-          >
-        </b2b-grid-row></b2b-grid
-      >`;
-        case '030TextAlign':
-            return html `<b2b-grid margin="${margin}">
-        <b2b-grid-row
-          justify="${justify}"
-          row-gap="${rowGap}"
-          column-gap="${columnGap}">
-          <b2b-grid-col span="6" text-align="${textAlign}"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 1-6 of 9</h4>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Suspendisse massa urna, accumsan id viverra et, mollis sit amet
-                sem. Cras congue ex ac arcu pellentesque, eu vestibulum sem
-                tempor. Curabitur consequat massa sed nulla lacinia, vitae
-                scelerisque ante egestas. Praesent et diam quis diam posuere
-                egestas. Duis feugiat lorem non nisl consectetur, sed fringilla
-                odio semper.
-              </p>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 7 of 9</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 8 of 9</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 9 of 9</h4>
-            </div></b2b-grid-col
-          ></b2b-grid-row
-        ></b2b-grid
-      >`;
-        case '040Justify':
-            return html `<b2b-grid margin="${margin}">
-        <b2b-grid-row
-          justify="${justify}"
-          row-gap="${rowGap}"
-          column-gap="${columnGap}">
-          <b2b-grid-col span="6" text-align="${textAlign}"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 1-6 of 9</h4>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Suspendisse massa urna, accumsan id viverra et, mollis sit amet
-                sem. Cras congue ex ac arcu pellentesque, eu vestibulum sem
-                tempor. Curabitur consequat massa sed nulla lacinia, vitae
-                scelerisque ante egestas. Praesent et diam quis diam posuere
-                egestas. Duis feugiat lorem non nisl consectetur, sed fringilla
-                odio semper.
-              </p>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col span="1"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 7 of 9</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col span="1"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 8 of 9</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col span="1"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 9 of 9</h4>
-            </div></b2b-grid-col
-          ></b2b-grid-row
-        ></b2b-grid
-      >`;
-    }
-};
-export const story010Grid = Template.bind({});
-story010Grid.args = {
-    margin: 24,
-    alignItems: 'stretch',
-    columnGap: 24,
-    rowGap: 24,
-    justify: 'start',
-    span: '3',
-    textAlign: 'left',
-    storyName: '010Grid',
-};
-story010Grid.storyName = 'Resizable Columns';
-export const story020AlignItems = Template.bind({});
-story020AlignItems.args = {
-    margin: 24,
-    alignItems: 'center',
-    columnGap: 24,
-    rowGap: 24,
-    justify: 'center',
-    span: '3',
-    textAlign: 'left',
-    storyName: '020AlignItems',
+const gridBoxStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 200px;`;
+const gridBoxSmallStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 100px;`;
+const meta = {
+    title: 'Components/Utilities/Grid',
+    component: 'b2b-grid',
+    args: {},
+    argTypes: getArgTypes('b2b-grid'),
 };
-story020AlignItems.storyName = 'Align Items';
-export const story030TextAlign = Template.bind({});
-story030TextAlign.args = {
-    margin: 24,
-    alignItems: 'stretch',
-    columnGap: 24,
-    rowGap: 24,
-    justify: 'end',
-    span: '2',
-    textAlign: 'center',
-    storyName: '030TextAlign',
+export default meta;
+export const story010Grid = {
+    name: 'Resizable Columns',
+    args: {
+        margin: 24,
+        alignItems: 'stretch',
+        columnGap: 24,
+        rowGap: 24,
+        justify: 'start',
+        textAlign: 'left',
+    },
+    render: (_a) => {
+        var args = __rest(_a, []);
+        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}">
+          <h4>Column 1-6 of 12</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            massa urna, accumsan id viverra et, mollis sit amet sem. Cras congue
+            ex ac arcu pellentesque, eu vestibulum sem tempor. Curabitur
+            consequat massa sed nulla lacinia, vitae scelerisque ante egestas.
+            Praesent et diam quis diam posuere egestas. Duis feugiat lorem non
+            nisl consectetur, sed fringilla odio semper.
+          </p>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col
+        ><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}">
+          <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}">
+          <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}">
+          <h4>Column 10-12 of 12</h4>
+          <p>Resize me by changing the span attribute in the args table.</p>
+        </div></b2b-grid-col
+      >
+    </b2b-grid-row>
+  </b2b-grid>`;
+    },
 };
-story030TextAlign.storyName = 'Text Align';
-export const story040Justify = Template.bind({});
-story040Justify.args = {
-    margin: 24,
-    alignItems: 'stretch',
-    columnGap: 24,
-    rowGap: 24,
-    justify: 'space-around',
-    span: '2',
-    textAlign: 'center',
-    storyName: '040Justify',
+export const story020AlignItems = {
+    name: 'Align Items',
+    args: {
+        margin: 24,
+        alignItems: 'center',
+        columnGap: 24,
+        rowGap: 24,
+        justify: 'center',
+        textAlign: 'left',
+    },
+    render: (_a) => {
+        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}">
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxSmallStyles}">
+          <h4>Column 1-2 of 12</h4>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxStyles}">
+          <h4>Column 3-4 of 12</h4>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxSmallStyles}">
+          <h4>Column 5-6 of 12</h4>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxStyles}">
+          <h4>Column 7-8 of 12</h4>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxSmallStyles}">
+          <h4>Column 9-10 of 12</h4>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxStyles}">
+          <h4>Column 11-12 of 12</h4>
+        </div></b2b-grid-col
+      >
+    </b2b-grid-row></b2b-grid
+  >`;
+    },
 };
-story040Justify.storyName = 'Justify Content';
-const rowArgs = getArgTypes('b2b-grid-row');
-const colArgs = getArgTypes('b2b-grid-col');
-const gridArgs = getArgTypes('b2b-grid');
-const gridArgsData = Object.assign(Object.assign(Object.assign({}, rowArgs), colArgs), gridArgs);
-gridArgsData.data = {
-    table: { disable: true },
+export const story030TextAlign = {
+    name: 'Text Align',
+    args: {
+        margin: 24,
+        alignItems: 'stretch',
+        columnGap: 24,
+        rowGap: 24,
+        justify: 'end',
+        textAlign: 'left',
+    },
+    render: (_a) => {
+        var args = __rest(_a, []);
+        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}">
+          <h4>Column 1-6 of 12</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            massa urna, accumsan id viverra et, mollis sit amet sem. Cras congue
+            ex ac arcu pellentesque, eu vestibulum sem tempor. Curabitur
+            consequat massa sed nulla lacinia, vitae scelerisque ante egestas.
+            Praesent et diam quis diam posuere egestas. Duis feugiat lorem non
+            nisl consectetur, sed fringilla odio semper.
+          </p>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxStyles}">
+          <h4>Column 7-8 of 12</h4>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxStyles}">
+          <h4>Column 9-10 of 12</h4>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxStyles}">
+          <h4>Column 11-12 of 12</h4>
+        </div></b2b-grid-col
+      ></b2b-grid-row
+    ></b2b-grid
+  >`;
+    },
 };
-export default {
-    title: 'Components/Utilities/Grid',
-    argTypes: Object.assign(Object.assign({}, gridArgsData), { storyName: { control: false } }),
-    viewmode: 'docs',
-    parameters: {
-        controls: { expanded: true },
+export const story040Justify = {
+    name: 'Justify Content',
+    args: {
+        margin: 24,
+        alignItems: 'stretch',
+        columnGap: 24,
+        rowGap: 24,
+        justify: 'space-around',
+        textAlign: 'center',
+    },
+    render: (_a) => {
+        var args = __rest(_a, []);
+        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}">
+          <h4>Column 1-6 of 12</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            massa urna, accumsan id viverra et, mollis sit amet sem. Cras congue
+            ex ac arcu pellentesque, eu vestibulum sem tempor. Curabitur
+            consequat massa sed nulla lacinia, vitae scelerisque ante egestas.
+            Praesent et diam quis diam posuere egestas. Duis feugiat lorem non
+            nisl consectetur, sed fringilla odio semper.
+          </p>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxStyles}">
+          <h4>Column 7-8 of 12</h4>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxStyles}">
+          <h4>Column 9-10 of 12</h4>
+        </div></b2b-grid-col
+      >
+      <b2b-grid-col span="2"
+        ><div style="${gridBoxStyles}">
+          <h4>Column 11-12 of 12</h4>
+        </div></b2b-grid-col
+      ></b2b-grid-row
+    ></b2b-grid
+  >`;
     },
 };

package/dist/collection/components/headline/headline.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/icon/icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;