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

package/dist/collection/components/table/table-row/table-row.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;
@@ -247,10 +249,10 @@
   background-color: inherit;
 }
 :host(.b2b-table-row--highlight:hover) {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :host(.b2b-table-row--highlight:hover) ::slotted(*) {
-  --b2b-table-cell-text-expand-bg: var(--b2b-color-hover);
+  --b2b-table-cell-text-expand-bg: var(--b2b-color-hover-default);
 }
 :host(.b2b-table-row--color-selected:hover) {
   background-color: var(--b2b-color-table-selected-default);
@@ -259,10 +261,10 @@
   --b2b-table-cell-text-expand-bg: var(--b2b-color-table-selected-default);
 }
 :host(.b2b-table-row--color-group:hover) {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :host(.b2b-table-row--color-group:hover) ::slotted(*) {
-  --b2b-table-cell-text-expand-bg: var(--b2b-color-hover);
+  --b2b-table-cell-text-expand-bg: var(--b2b-color-hover-default);
 }
 .b2b-table-row__control-cell--checkbox {
   flex: 0 0 var(--b2b-size-40);

package/dist/collection/components/table/table-row/table-row.js

@@ -4,7 +4,6 @@ import { isFirstRow } from "../utils";
 export class TableRowComponent {
     constructor() {
         this.parentRowGroup = null;
-        this.observer = null;
         this.toggleOpen = () => {
             this.isOpen = !this.isOpen;
             this.b2bOpen.emit(this.isOpen);
@@ -55,7 +54,7 @@ export class TableRowComponent {
                     return (h("b2b-table-cell", null, h("button", { onClick: this.toggleOpen, class: {
                             'b2b-table-row__accordion-icon': true,
                             'b2b-table-row__accordion-icon--open': this.isOpen,
-                        } }, h("b2b-icon", { icon: "b2b_icon-arrow-right", clickable: true }))));
+                        } }, h("b2b-icon-100", { icon: "b2b_icon-arrow-right", clickable: true }))));
                 }
                 return (h("b2b-table-cell", { class: "b2b-table-row__control-cell--accordion" }));
             }
@@ -99,33 +98,24 @@ export class TableRowComponent {
         }
         this.findParentAndObserve();
     }
-    disconnectedCallback() {
-        if (this.observer !== undefined && this.observer !== null) {
-            this.observer.disconnect();
-            this.observer = null;
-        }
-    }
     findParentAndObserve() {
+        var _a;
         this.parentRowGroup = this.hostElement.closest('b2b-table-rowgroup');
         if (this.parentRowGroup !== undefined && this.parentRowGroup !== null) {
-            this.observer = new MutationObserver(() => {
-                var _a;
-                this.isAccordionValue =
-                    ((_a = this.parentRowGroup) === null || _a === void 0 ? void 0 : _a.hasAttribute('accordion')) || false;
-            });
-            this.observer.observe(this.parentRowGroup, { attributes: true });
+            this.isAccordionValue =
+                ((_a = this.parentRowGroup) === null || _a === void 0 ? void 0 : _a.hasAttribute('accordion')) || false;
         }
         else {
             console.warn('Parent b2b-table-rowgroup not found!');
         }
     }
     render() {
-        return (h(Host, { key: 'c39eb58624347736a167fef2e4aa9fc9ca7c7e48', class: {
+        return (h(Host, { key: '46eb2abeb36b2127b2b29d97052cc0ed562267de', class: {
                 'b2b-table-row': true,
                 ['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-row--highlight']: this.highlight,
                 [`b2b-table-row--color-${this.getRowColor()}`]: true,
-            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'e224986cde05a3e6fc60c087953512bca87999ef' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'caa67e57aee33113c108fe561722c9a72ba5fa3a' })));
     }
     static get is() { return "b2b-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-rowgroup/table-rowgroup.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/table/table-rowgroup/table-rowgroup.js

@@ -113,11 +113,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: 'faa8967bf314a57aaa29bf32e4a8dd9fb1d31229', class: {
+        return (h(Host, { key: 'b6d9983c2e9079720ebc3deebeda438af99697b4', class: {
                 ['b2b-table-rowgroup__' + this.type]: true,
                 'b2b-table-rowgroup--fixed': this.fixed,
                 'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
-            }, role: "rowgroup" }, h("slot", { key: 'bf00c613d18b138e715d9840141e06399e4f5309' })));
+            }, role: "rowgroup" }, h("slot", { key: '646cea0eb0a5845920ebcf6155466c714173d728' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,9 +60,9 @@ export class TableComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'd69ea87cde7434a9555464edaf081268ee850bdb', class: {
+        return (h(Host, { key: '7963f5d1f9e2ff75a7f5778af3a9384669d15b59', class: {
                 ['b2b-table--' + this.size]: true,
-            }, role: "table" }, h("slot", { key: '196c2f61af014d04a842543ea66ff806edbb8e5f' })));
+            }, role: "table" }, h("slot", { key: '2ce636704650a87c6143dcc780f2d91f1ea129e7' })));
     }
     static get is() { return "b2b-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,10 +45,10 @@ export class B2BTextareaComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'f58f062339891dfe7d78fcce5b9a90ac9871d826', class: {
+        return (h(Host, { key: '26d30adb79084035eb1f1088a019df8f3bb80cff', class: {
                 'b2b-textarea': true,
                 'b2b-textarea--error': this.invalid && !this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '22cd5ea8b7b8cd34253c2cc076b0273b1481e10f', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: 'd18a50e22a0995e14560bb8d2977dbcf8e602629', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (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-textarea"; }

package/dist/collection/components/toggle-button/toggle-button.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/toggle-button/toggle-button.js

@@ -31,13 +31,13 @@ export class B2bToggleButtonComponent {
         return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((toggle) => toggle.value !== this.value);
     }
     render() {
-        return (h(Host, { key: '757afe3ee305d4bba0c4092c98c277661d13213d', onClick: this.onClick }, h("span", { key: 'ad8f66caccea7374aa6bc6faf8a837efca0d5f69', class: {
+        return (h(Host, { key: '5ec7f55c330552dc5b3859504c8a4afc2f151146', onClick: this.onClick }, h("span", { key: '5cfbea13b4535886ea2404aa42e6bc830a149b3c', class: {
                 'b2b-toggle-button': true,
                 'b2b-toggle-button--disabled': this.disabled,
-            } }, h("input", { key: 'e7b4b5267dbf8f5e6c212bfe5b3a7cda870c53ec', tabindex: 0, class: {
+            } }, h("input", { key: 'a88084cc44b80abb06e653afca8c7737f67baf4b', tabindex: 0, class: {
                 'b2b-toggle-button__input': true,
                 'b2b-toggle-button__input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '5a6ccbcf1cc18884080359453b2abb5cc38acd6f', id: this.name, tabindex: -1, class: {
+            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'a5654d8a5c5c9845a7f07fc7dbf994e99a560d82', id: this.name, tabindex: -1, class: {
                 'b2b-toggle-button__label': true,
                 'b2b-toggle-button__label--disabled': this.disabled,
                 'b2b-toggle-button__label--checked': this.checked && !this.disabled,

package/dist/collection/components/toggle-chip/toggle-chip.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;
@@ -219,6 +221,9 @@
   font-size: var(--b2b-size-copy-100);
   line-height: var(--b2b-size-copy-line-height-100);
   display: inline-block;
+  min-width: var(--b2b-size-90);
+  min-height: var(--b2b-size-80);
+  max-height: var(--b2b-size-80);
 }
 :host .b2b-toggle-chip__input {
   border: 0;
@@ -235,39 +240,51 @@
 }
 :host .b2b-toggle-chip__label {
   display: inline-block;
-  padding: var(--b2b-size-15) var(--b2b-size-25) 5px var(--b2b-size-25);
+  border: 1px solid var(--b2b-color-grey-200);
+  padding: var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);
   border-radius: var(--b2b-size-50);
   color: var(--b2b-color-black-100);
+  background-color: var(--b2b-color-white-100);
 }
 :host .b2b-toggle-chip__label:hover {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
   color: var(--b2b-color-black-100);
   cursor: pointer;
   transition: all 0.3s ease;
 }
-:host .b2b-toggle-chip__label--grey {
-  background-color: var(--b2b-color-grey-100);
-}
-:host .b2b-toggle-chip__label--white {
-  background-color: var(--b2b-color-white-100);
-}
-:host .b2b-toggle-chip__label--white.b2b-toggle-chip__label--disabled {
-  background-color: var(--b2b-color-white-100);
-}
-:host .b2b-toggle-chip__label--white.b2b-toggle-chip__label--disabled:hover {
-  background-color: var(--b2b-color-white-100);
+:host .b2b-toggle-chip__label:active {
+  background-color: #d4e0eb;
+  color: var(--b2b-color-black-100);
+  transition: all 0.3s ease;
 }
 :host .b2b-toggle-chip__label--active {
   color: var(--b2b-color-white-100);
   background-color: var(--b2b-color-black-100);
+  border: 1px solid var(--b2b-color-black-100);
+}
+:host .b2b-toggle-chip__label--active:hover {
+  cursor: pointer;
+  background-color: var(--b2b-color-hover-black);
+  border: 1px solid var(--b2b-color-hover-black);
+  color: var(--b2b-color-grey-100);
 }
 :host .b2b-toggle-chip__label--disabled {
-  background-color: var(--b2b-color-grey-100);
-  color: var(--b2b-color-grey-300);
+  background-color: var(--b2b-color-grey-25);
+  color: var(--b2b-color-grey-200);
   user-select: none;
 }
 :host .b2b-toggle-chip__label--disabled:hover {
   cursor: default;
-  background-color: var(--b2b-color-grey-100);
+  background-color: var(--b2b-color-grey-25);
+  color: var(--b2b-color-grey-200);
+}
+:host .b2b-toggle-chip__label--active-disabled {
+  background-color: var(--b2b-color-black-100);
+  border: 1px solid var(--b2b-color-black-100);
+  color: var(--b2b-color-grey-300);
+}
+:host .b2b-toggle-chip__label--active-disabled:hover {
+  cursor: default;
+  background-color: var(--b2b-color-black-100);
   color: var(--b2b-color-grey-300);
 }

package/dist/collection/components/toggle-chip/toggle-chip.js

@@ -28,20 +28,19 @@ export class B2BToggleChipComponent {
         this.label = undefined;
         this.value = undefined;
         this.name = undefined;
-        this.variant = 'grey';
         this.active = false;
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'e9f095939f1efc375328ffa58edd66f880d3c8c3' }, h("span", { key: 'a708176728cdf47e6308df8fafc9bb70b4bf8472', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
+        return (h(Host, { key: '78c0600467fcbdd43c4709fc8637a845fa0aecc5' }, h("span", { key: 'ee2a356bfe8190eea0e846be6a9a98364b154b2f', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
                 'b2b-toggle-chip': true,
-            } }, h("input", { key: 'cc88a7fb483e9400eae10322e77d71811b7ea269', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
+            } }, h("input", { key: '8836fc2cb5439d0567ad554c1e265eabed3aa3df', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
                 'b2b-toggle-chip__input': true,
-            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'f4385d049c26d7d391de6cef4946a086cf6375d0', id: this.name, tabIndex: -1, class: {
+            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '52a41c7c1427677ec00818be4c2fdb55bb6f69b1', id: this.name, tabIndex: -1, class: {
                 'b2b-toggle-chip__label': true,
-                [`b2b-toggle-chip__label--${this.variant}`]: true,
-                'b2b-toggle-chip__label--active': this.active,
+                'b2b-toggle-chip__label--active': this.active && !this.disabled,
                 'b2b-toggle-chip__label--disabled': this.disabled,
+                'b2b-toggle-chip__label--active-disabled': this.active && this.disabled,
             } }, this.label))));
     }
     static get is() { return "b2b-toggle-chip"; }
@@ -109,24 +108,6 @@ export class B2BToggleChipComponent {
                 "attribute": "name",
                 "reflect": true
             },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'grey' | 'white'",
-                    "resolved": "\"grey\" | \"white\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey"
-                },
-                "attribute": "variant",
-                "reflect": false,
-                "defaultValue": "'grey'"
-            },
             "active": {
                 "type": "boolean",
                 "mutable": true,

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

@@ -0,0 +1,51 @@
+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 meta = {
+    title: 'Components/Interaction/Toggle Chip',
+    component: 'b2b-toggle-chip',
+    args: {
+        label: 'B2B Design System',
+        name: 'Toggle Chip',
+        active: false,
+        disabled: false,
+    },
+    argTypes: getArgTypes('b2b-toggle-chip'),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html ` <b2b-toggle-chip
+      label="${args.label}"
+      name="${args.name}"
+      active="${args.active}""
+      disabled="${args.disabled}">
+    </b2b-toggle-chip>`;
+    },
+};
+export default meta;
+export const story010Default = {
+    name: 'Default Toggle Chip',
+    args: Object.assign({}, meta.args),
+};
+export const story020Disabled = {
+    name: 'Toggle Chip Disabled',
+    args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+};
+export const story030Active = {
+    name: 'Toggle Chip Active',
+    args: Object.assign(Object.assign({}, meta.args), { active: true }),
+};
+export const story040ActiveDisabled = {
+    name: 'Toggle Chip Active Disabled',
+    args: Object.assign(Object.assign({}, meta.args), { active: true, disabled: true }),
+};

package/dist/collection/components/toggle-group/toggle-group.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/toggle-group/toggle-group.js

@@ -45,10 +45,10 @@ export class B2BToggleGroup {
         }
     }
     render() {
-        return (h(Host, { key: 'fe75399c8e92ccb8a057ae685151b2434e2c260c' }, h("div", { key: '0a7b4ef54a74776c624399f9d851c16ff21eadd2', class: {
+        return (h(Host, { key: 'f17d4a01c930847672fe6aa60b50544c3a0fa829' }, h("div", { key: 'd1250e694f9b225886136bd116a4cbd297a1fea5', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: '936d54912451d8f47449c5f3600bf21d6143bd4d' }, h("slot", { key: 'e6313236733da0801b1c8c618ce9e625f00fa015' })))));
+            } }, h("fieldset", { key: '819b848ed5b3b50bfe840dcdb4caf9a7520f58be' }, h("slot", { key: '6918c86adb990d6300b2327510a27a830d4eab52' })))));
     }
     static get is() { return "b2b-toggle-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle-switch/toggle-switch.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/toggle-switch/toggle-switch.js

@@ -38,17 +38,17 @@ export class B2bToggleSwitchComponent {
     render() {
         // workaround for purgecss as safelist doesn't work
         const isLeft = this.labelPosition === 'left';
-        return (h(Host, { key: 'ee7f31fda73708f9c0f239b7e812001e061b4df7' }, h("div", { key: 'e0cb8c2a712c6925da760d49228fdf0eec33eed4', class: {
+        return (h(Host, { key: '3d95bcb03fb1131b2b2775db6e8d82de9f2c5297' }, h("div", { key: '4e665cdbb2d1364a4bd9e641745d510237a4f4c8', class: {
                 'b2b-toggle': true,
                 'b2b-toggle--disabled': this.disabled,
                 'b2b-toggle--checked': this.state,
-            } }, h("div", { key: 'fd213e47ef55cceb7e7089b393a06637ca381394', class: {
+            } }, h("div", { key: '285501a0a3904058e06477c07ddbc6032c49ac1c', class: {
                 'b2b-toggle__label': true,
                 'b2b-toggle__label--left': isLeft,
-            } }, h("span", { key: '7fa4a2e0324f8519001df63fb5bf6fbed66f8327', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '956ca1d77e4a13a32e3da78c87432d92a3012dc2', class: {
+            } }, h("span", { key: '6f4699424b4a5e23c9de5577b0026f6ab0eb964f', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: 'ef46344c874f4b5f2cf998dcbf0b496180024cd4', class: {
                 'b2b-toggle__icon': true,
                 'b2b-toggle__icon--show': this.state,
-            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: 'a4af80db0755275499e6c93feded619ce273edfa', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '56833837842c26dfeb46ed3429f4ccf1e48477f7', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
                 'b2b-toggle__text': true,
                 'b2b-toggle__text--left': isLeft,
             } }, this.label))))));