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

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/grid/row.js

@@ -6,8 +6,39 @@ export class B2bGridRowComponent {
         this.alignItems = 'stretch';
         this.justify = 'start';
     }
+    componentDidLoad() {
+        this.adjustColumnFlex();
+    }
+    adjustColumnFlex() {
+        const columns = this.hostElement.querySelectorAll('b2b-grid-col');
+        let totalSpan = 0;
+        let columnsWithoutSpan = [];
+        columns.forEach((column) => {
+            const span = column.getAttribute('span');
+            if (span) {
+                totalSpan += parseInt(span, 10);
+            }
+            else {
+                columnsWithoutSpan.push(column);
+            }
+        });
+        const remainingSpan = 12 - totalSpan;
+        if (remainingSpan == 12) {
+            if (columnsWithoutSpan.length > 0) {
+                columnsWithoutSpan.forEach(column => {
+                    column.setAttribute('span', '1');
+                });
+            }
+        }
+        if (columnsWithoutSpan.length > 0) {
+            const flexPerColumn = ((remainingSpan / 12) * 100) / columnsWithoutSpan.length;
+            columnsWithoutSpan.forEach(column => {
+                column.style.flex = `${flexPerColumn}%`;
+            });
+        }
+    }
     render() {
-        return (h(Host, { key: 'cea79124fea736c6276b0f60c8ba983d3085dbdb', style: {
+        return (h(Host, { key: '76c179fe5253504e038b6ac11a8d528a1e5f1109', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -15,7 +46,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '218cf8da76adc6f58983f90fb808629a4785f6a6' })));
+            } }, h("slot", { key: 'c4af8f5183e948a8d2115ad60cb6751c8a9d6595' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }

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 Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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-100/icon-100.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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-50/icon-50.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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;