@otto-de/b2b-core-components 1.14.1 → 1.15.0

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -283,7 +283,7 @@
   border-bottom: 1px solid var(--b2b-color-grey-200);
 }
 .b2b-flyout-menu__option:hover, .b2b-flyout-menu__option:focus {
-  background-color: var(--b2b-color-table-selected-hover);
+  background-color: var(--b2b-color-hover);
   outline: none;
 }
 .b2b-flyout-menu__option--disabled {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-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 Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-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 Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-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 Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/input/input.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -253,7 +253,7 @@
 :host(.b2b-input) .b2b-input__wrapper .border {
   border-left: 1px solid var(--b2b-color-grey-300);
   height: 100%;
-  margin: 0 12px;
+  margin: 0 8px;
 }
 :host(.b2b-input) .b2b-input__wrapper .b2b-input__native-input {
   font-family: var(--b2b-font-family-default);
@@ -270,6 +270,15 @@
 :host(.b2b-input) .b2b-input__wrapper .b2b-input__native-input::placeholder {
   color: var(--b2b-color-grey-300);
 }
+:host(.b2b-input) .b2b-input__wrapper .b2b-input__native-input--align-left {
+  text-align: left;
+}
+:host(.b2b-input) .b2b-input__wrapper .b2b-input__native-input--align-right {
+  text-align: right;
+}
+:host(.b2b-input) .b2b-input__wrapper .b2b-input__native-input--align-center {
+  text-align: center;
+}
 :host(.b2b-input) b2b-input-label {
   display: block;
   margin-bottom: var(--b2b-size-5);

package/dist/collection/components/input/input.js

@@ -51,6 +51,7 @@ export class InputComponent {
         this.error = undefined;
         this.autofocus = false;
         this.groupDisabled = false;
+        this.inputTextAlign = 'left';
         this.hasFocus = false;
         this.hasTextPrefix = false;
         this.hasTextSuffix = false;
@@ -75,14 +76,17 @@ export class InputComponent {
         this.getSlottedText();
     }
     render() {
-        return (h(Host, { key: '3da24a713a463439be3e6a7c543479f655c69288', class: {
+        return (h(Host, { key: '22f14fab2036dd16b009ae60efe64d437331f5a7', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '2cb4e11ef60b764f778845d782c4e88dbe4023c3', class: {
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '2279e5df7e36354c70299289c638beb3ca64941a', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: '5d189e4009c070f8e1ea1c7c3e365204993c8d2f', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'a5192ded7aa52491e3b370e53c051a54d09492b3', class: "b2b-input__native-input", "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: 'cb469dc3a49c8b645630ae996d4e105899b61134', name: "end" })), (this.hint !== undefined && !this.invalid) ||
+            } }, h("slot", { key: '9ad9505c66f7df5ebc47834a1f6e3969c2dc302f', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'a612528e783ccf2cb1994a60bfa1c41948f0fb43', class: {
+                'b2b-input__native-input': true,
+                ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '52f090d08c33ada338519d017be8eb230a7ba0ea', name: "end" })), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-input"; }
@@ -313,6 +317,24 @@ export class InputComponent {
                 "attribute": "group-disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "inputTextAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'center'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The alignment of the text."
+                },
+                "attribute": "input-text-align",
+                "reflect": false,
+                "defaultValue": "'left'"
             }
         };
     }

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

@@ -26,6 +26,7 @@ const meta = {
         error: '',
         autofocus: false,
         invalid: false,
+        inputTextAlign: 'left',
     },
     argTypes: getArgTypes('b2b-input'),
     render: (_a) => {
@@ -41,7 +42,8 @@ const meta = {
       hint="${args.hint}"
       error="${args.error}"
       autofocus="${args.autofocus}"
-      invalid=${args.invalid}></b2b-input>
+      invalid=${args.invalid}
+      input-text-align="${args.inputTextAlign}"></b2b-input>
   </div>`;
     },
 };
@@ -131,3 +133,9 @@ export const PrefixAndSuffix = {
 export const AllPropertiesSpecified = {
     args: Object.assign(Object.assign({}, meta.args), { label: 'Input with all arguments', required: true, placeholder: 'All arguments placeholder', value: 'an initial value', hint: 'This is a hint for an every argument specified input', error: 'This is an error so you will not see the hint', disabled: false, autofocus: false }),
 };
+export const RightAligned = {
+    args: Object.assign(Object.assign({}, meta.args), { value: 'RightAligned Input', inputTextAlign: 'right' }),
+};
+export const CenterAligned = {
+    args: Object.assign(Object.assign({}, meta.args), { value: 'CenterAligned Input', inputTextAlign: 'center' }),
+};

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -218,8 +218,8 @@
 :host .b2b-input-wrapper {
   display: flex;
   align-items: flex-end;
-  width: 100%;
   flex: 0 0 auto;
+  max-width: 800px;
 }
 :host .b2b-input-wrapper__hint {
   font-size: var(--b2b-size-copy-50);

package/dist/collection/components/input-label/input-label.css

@@ -1,6 +1,7 @@
 .b2b-input-label {
   font-size: var(--b2b-size-copy-100);
   line-height: var(--b2b-size-copy-line-height-100);
+  color: var(--b2b-color-black-100);
 }
 .b2b-input-label--required slot::after {
   content: " *";

package/dist/collection/components/input-list/input-list.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -275,7 +275,7 @@
   padding: var(--b2b-size-15) var(--b2b-size-30);
 }
 .b2b-input-list .b2b-input-list__options .b2b-input-list__option:hover, .b2b-input-list .b2b-input-list__options .b2b-input-list__option:focus {
-  background-color: var(--b2b-color-table-selected-hover);
+  background-color: var(--b2b-color-hover);
 }
 .b2b-input-list .b2b-input-list__options .b2b-input-list__option:first-child {
   padding-top: var(--b2b-size-20);

package/dist/collection/components/label/label.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/modal/modal.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -6,5 +6,5 @@
   align-items: center;
 }
 .b2b-multiselect-dropdown__option:hover {
-  background-color: var(--b2b-color-table-selected-hover);
+  background-color: var(--b2b-color-hover);
 }

package/dist/collection/components/pagination/pagination.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/paragraph/paragraph.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Tue, 10 Sep 2024 09:20:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --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-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;