@otto-de/b2b-core-components 1.31.1 → 1.31.3

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

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -301,7 +313,7 @@
   border-bottom: var(--b2b-size-1) solid var(--b2b-color-black-100);
   border-top: 2px none -webkit-focus-ring-color;
   box-sizing: border-box;
-  z-index: 10;
+  z-index: 1001;
 }
 :host .b2b-multiselect-dropdown__option__search {
   width: 100%;

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

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/progress-bar/progress-bar.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/radio/radio.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/radio-group/radio-group.e2e.js

@@ -83,4 +83,31 @@ describe('B2B-Radio-Group', () => {
         const element = await slotPage.find('span');
         expect(element).toEqualText('Custom label');
     });
+    it('should allow individual radio buttons to be disabled when group is enabled', async () => {
+        const individualDisabledPage = await newE2EPage();
+        await individualDisabledPage.setContent(`
+      <b2b-radio-group name="individual-test-group" label="Test Group">
+          <b2b-radio-button label="Option 1" value="one" name="individual-test-group" id="option1"></b2b-radio-button>
+          <b2b-radio-button label="Option 2" value="two" name="individual-test-group" id="option2" disabled="true"></b2b-radio-button>
+          <b2b-radio-button label="Option 3" value="three" name="individual-test-group" id="option3"></b2b-radio-button>
+      </b2b-radio-group>
+    `);
+        const radioGroup = await individualDisabledPage.find('b2b-radio-group');
+        expect(radioGroup).not.toHaveAttribute('disabled');
+        const firstRadio = await individualDisabledPage.find('b2b-radio-button[id="option1"] >>> .b2b-radio');
+        expect(firstRadio).not.toHaveClass('b2b-radio--disabled');
+        const secondRadio = await individualDisabledPage.find('b2b-radio-button[id="option2"] >>> .b2b-radio');
+        expect(secondRadio).toHaveClass('b2b-radio--disabled');
+        const thirdRadio = await individualDisabledPage.find('b2b-radio-button[id="option3"] >>> .b2b-radio');
+        expect(thirdRadio).not.toHaveClass('b2b-radio--disabled');
+        const b2bChange = await individualDisabledPage.spyOnEvent('b2b-change');
+        const disabledRadioInput = await individualDisabledPage.find('b2b-radio-button[id="option2"] >>> input');
+        await disabledRadioInput.click();
+        await individualDisabledPage.waitForChanges();
+        expect(b2bChange).not.toHaveReceivedEvent();
+        const enabledRadioInput = await individualDisabledPage.find('b2b-radio-button[id="option1"] >>> input');
+        await enabledRadioInput.click();
+        await individualDisabledPage.waitForChanges();
+        expect(b2bChange).toHaveReceivedEvent();
+    });
 });

package/dist/collection/components/radio-group/radio-group.js

@@ -3,16 +3,14 @@ export class RadioButtonGroupComponent {
     constructor() {
         this.toggleAllDisabled = () => {
             let nodes = this.getChildNodes();
-            if (this.disabled) {
-                nodes.forEach(node => {
+            nodes.forEach(node => {
+                if (this.disabled) {
                     node.disabled = true;
-                });
-            }
-            else {
-                nodes.forEach(node => {
-                    node.disabled = false;
-                });
-            }
+                }
+                else {
+                    node.disabled = node.disabled || false;
+                }
+            });
         };
         this.toggleAllError = () => {
             let nodes = this.getChildNodes();
@@ -69,11 +67,11 @@ export class RadioButtonGroupComponent {
         this.removeChildText();
     }
     render() {
-        return (h(Host, { key: '5b36240943436717e043f0c25483eef6f90229f0' }, h("div", { key: 'b9d174d04e5a280beed928e37f4355d8c1edf1aa', class: {
+        return (h(Host, { key: '06cf12d285ccd4df336172830e5012c1c1e570da' }, h("div", { key: '2222697e7cd3861809bf061e3aa79c549b8ec6a0', class: {
                 'b2b-radio-group': true,
                 'b2b-radio-group--error': this.invalid && !this.disabled,
                 [`b2b-radio-group--${this.alignment}`]: true,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: 'd4e428dda283b88ed29f4259c3c7ad71d484648d' }, h("div", { key: '4ac819b081787a2dc468ebc3c0c84d8d182c7353', class: "b2b-radio-group-options" }, h("slot", { key: '4c8ee699036c8b3b672fbedbffc8efbbdaf86fa3' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: '2a4d8d3502948b916c425e2c7c7ea7370e42bb0d' }, h("div", { key: 'b61c94d7b2afe84bea009d526341bf826aeacf79', class: "b2b-radio-group-options" }, h("slot", { key: 'b298168cbf5fdb0d11798933afcc1811c9b09db8' }))), (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-radio-group"; }

package/dist/collection/components/radio-group/radio-group.stories.js

@@ -63,6 +63,27 @@ export const story070LabelSlot = {
     </b2b-radio-group>`,
 };
 story070LabelSlot.storyName = 'Label slot';
+export const story080IndividualDisabled = {
+    args: Object.assign({}, defaultArgs),
+    render: ({}) => html `<b2b-radio-group
+      name="individual-disabled-group"
+      label="Group Enabled with Individual Disabled Radio">
+      <b2b-radio-button
+        label="Option 1 (Enabled)"
+        name="individual-disabled-group"
+        value="one"></b2b-radio-button>
+      <b2b-radio-button
+        label="Option 2 (Disabled)"
+        name="individual-disabled-group"
+        value="two"
+        disabled="true"></b2b-radio-button>
+      <b2b-radio-button
+        label="Option 3 (Enabled)"
+        name="individual-disabled-group"
+        value="three"></b2b-radio-button>
+    </b2b-radio-group>`,
+};
+story080IndividualDisabled.storyName = 'Individual Radio Disabled';
 const controls = {};
 const radioGroupArgs = getArgTypes('b2b-radio-group', controls);
 export default {

package/dist/collection/components/required-separator/required-separator.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -228,7 +240,7 @@
   width: 24px;
   height: 24px;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: center;
   font-size: var(--b2b-size-copy-125);
   line-height: var(--b2b-size-copy-line-height-100);