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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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;
@@ -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

@@ -3,6 +3,7 @@ import { TableColourOptions, TableSizes, } from "../../../utils/types/table.type
 import { isFirstRow } from "../utils";
 export class TableRowComponent {
     constructor() {
+        this.parentRowGroup = null;
         this.toggleOpen = () => {
             this.isOpen = !this.isOpen;
             this.b2bOpen.emit(this.isOpen);
@@ -18,7 +19,7 @@ export class TableRowComponent {
             });
         };
         this.getRowColor = () => {
-            if (this.isAccordion() &&
+            if (this.isAccordionValue &&
                 isFirstRow(this.hostElement) &&
                 !this.isHeader()) {
                 return TableColourOptions.GROUP;
@@ -33,9 +34,6 @@ export class TableRowComponent {
         this.getParentRowGroup = () => {
             return this.hostElement.closest('b2b-table-rowgroup');
         };
-        this.isAccordion = () => {
-            return this.getParentRowGroup().hasAttribute('accordion');
-        };
         this.isHeader = () => {
             return this.getParentRowGroup().type === 'header';
         };
@@ -51,16 +49,16 @@ export class TableRowComponent {
             }
         };
         this.getAccordionColumns = () => {
-            if (this.isAccordion() && !this.isHeader()) {
+            if (this.isAccordionValue && !this.isHeader()) {
                 if (isFirstRow(this.hostElement)) {
                     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" }));
             }
-            else if (this.isAccordion() && this.isHeader()) {
+            else if (this.isAccordionValue && this.isHeader()) {
                 return (h("b2b-table-header", { class: "b2b-table-row__control-cell--accordion" }));
             }
         };
@@ -71,6 +69,7 @@ export class TableRowComponent {
         this.value = undefined;
         this.indeterminate = false;
         this.checked = false;
+        this.isAccordionValue = false;
         this.isOpen = false;
     }
     toggleSelected(event) {
@@ -97,14 +96,26 @@ export class TableRowComponent {
             this.getParentRowGroup().type !== 'header') {
             console.warn('You need to associate a value with the row as a unique identifier.');
         }
+        this.findParentAndObserve();
+    }
+    findParentAndObserve() {
+        var _a;
+        this.parentRowGroup = this.hostElement.closest('b2b-table-rowgroup');
+        if (this.parentRowGroup !== undefined && this.parentRowGroup !== null) {
+            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: 'f92b4349e74b6f9f4ff5da3661a268c0554cacf1', 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: '08f7b690c3b0a7ae8e8083254b9a975989306e57' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'caa67e57aee33113c108fe561722c9a72ba5fa3a' })));
     }
     static get is() { return "b2b-table-row"; }
     static get encapsulation() { return "shadow"; }
@@ -265,6 +276,7 @@ export class TableRowComponent {
     }
     static get states() {
         return {
+            "isAccordionValue": {},
             "isOpen": {}
         };
     }
@@ -292,7 +304,7 @@ export class TableRowComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits if the row is selectable and it is selected or unselected. Emits both unique value and the checkbox status."
+                    "text": "Emits if the row is selectable and if it is selected or unselected. Emits both unique value and the checkbox status."
                 },
                 "complexType": {
                     "original": "CheckboxEventDetail",

package/dist/collection/components/table/table-rowgroup/table-rowgroup.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/table/table-rowgroup/table-rowgroup.js

@@ -113,11 +113,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: '4dd4d9fe40cbb15bbbdd8aeff90d31372da60cdd', 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: 'd4492ca4f42bde66052ed61c9d3bfebc74e790e7' })));
+            }, role: "rowgroup" }, h("slot", { key: '646cea0eb0a5845920ebcf6155466c714173d728' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }
@@ -198,7 +198,7 @@ export class TableRowgroupComponent {
                     "text": "Renders the rowgroup as an accordion. Both header and body must have accordion set to true.\nOne table can contain multiple rowgroups of type body, each of which represents an accordion row with children."
                 },
                 "attribute": "accordion",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "selectable": {

package/dist/collection/components/table/table.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/table/table.js

@@ -60,9 +60,9 @@ export class TableComponent {
         }
     }
     render() {
-        return (h(Host, { key: '70f900f2160167e3f808c9c432cfa3bb134624c0', class: {
+        return (h(Host, { key: '7963f5d1f9e2ff75a7f5778af3a9384669d15b59', class: {
                 ['b2b-table--' + this.size]: true,
-            }, role: "table" }, h("slot", { key: 'c0b35190bb004dd3332e3b2bb856e30a1adee829' })));
+            }, 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 Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/textarea/textarea.js

@@ -45,10 +45,10 @@ export class B2BTextareaComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'adf829a538a8234008981a3f1a56d5f370b859ec', 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: 'c64d67fb1eb2a7552643815f10b139d34a7a46bd', 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 Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/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: '72a27c904d091619da19fb5dab2da588326688df', onClick: this.onClick }, h("span", { key: '165c0254153fa4a3bff6d76f58f844830344f8c2', 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: '0d6ee278d5db9f360e7ab466daeaebced17063e6', 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: 'f073f01258465886c9fe70e99692ffee84db38bc', 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 Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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;
@@ -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: '521c77d6f300a1e0a3f978a6645c37f7ca3a7aeb' }, h("span", { key: '73ee23bfcf46564a32afac2892479830c25b81b8', 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: '1b0fa2b361fc41d011e7d71d56dc48c614cc478a', "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: '6de8f234f543595ab2995854c1f995ce1c724f8b', 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 Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/toggle-group/toggle-group.js

@@ -45,10 +45,10 @@ export class B2BToggleGroup {
         }
     }
     render() {
-        return (h(Host, { key: 'e81f98de29ab06594da8b9e19e68f4ec9f3c878f' }, h("div", { key: 'a590585c94ab40ea54abd08031ab9b1482bc4a78', class: {
+        return (h(Host, { key: 'f17d4a01c930847672fe6aa60b50544c3a0fa829' }, h("div", { key: 'd1250e694f9b225886136bd116a4cbd297a1fea5', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: 'f8a20fb30c7b5fd958171f91a2219a2efbd7a5ca' }, h("slot", { key: '3e0bc10d09053d008a9d771721c57463ce437e27' })))));
+            } }, h("fieldset", { key: '819b848ed5b3b50bfe840dcdb4caf9a7520f58be' }, h("slot", { key: '6918c86adb990d6300b2327510a27a830d4eab52' })))));
     }
     static get is() { return "b2b-toggle-group"; }
     static get encapsulation() { return "shadow"; }