npm - @otto-de/b2b-core-components - Versions diffs - 1.31.2 → 1.31.4 - Mend

@otto-de/b2b-core-components 1.31.2 → 1.31.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (319) hide show

package/dist/collection/components/anchor/anchor.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/background-box/background-box.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/breadcrumb/breadcrumb.css CHANGED Viewed

@@ -47,6 +47,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 */
@@ -171,6 +172,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/button/button.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/card/card.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/checkbox/checkbox.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/checkbox-group/checkbox-group.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/chip/chip.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/date-picker/date-picker-days-header.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/date-picker/date-picker-days.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/date-picker/date-picker-header.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/date-picker/date-picker-months.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/date-picker/date-picker-years.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/date-picker/date-picker.css CHANGED Viewed

@@ -46,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 */
@@ -170,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 */
@@ -256,7 +258,7 @@
   border: var(--b2b-size-1) solid var(--b2b-color-grey-200);
   justify-content: flex-start; /* Aligns the input to the left */
   border-radius: var(--b2b-size-7);
-  padding: var(--b2b-size-15) var(--b2b-size-20);
+  padding: var(--b2b-size-13) var(--b2b-size-25) var(--b2b-size-13);
   background-color: var(--b2b-color-white-100);
   transition: outline 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
@@ -324,7 +326,7 @@ b2b-input-label {
   padding-bottom: var(--b2b-size-40);
   outline: none;
   background-color: var(--b2b-color-white-100);
-  z-index: 400;
+  z-index: 1001;
 }
 .b2b-date-picker-body--hidden {
   display: none;

package/dist/collection/components/dropdown/dropdown.css CHANGED Viewed

@@ -46,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 */
@@ -170,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 */
@@ -259,7 +261,7 @@
   border: 1px solid var(--b2b-color-grey-200);
   border-right: var(--b2b-border-right);
   border-radius: var(--b2b-border-radius);
-  padding: 7px 10px 6px;
+  padding: 7px 11px 6px;
   padding-right: calc(1.75rem + 6px);
   height: var(--b2b-size-90);
   line-height: var(--b2b-size-copy-line-height-100);

package/dist/collection/components/dropdown/dropdown.js CHANGED Viewed

@@ -42,7 +42,13 @@ export class DropdownComponent {
             if (!ctx)
                 return;
             ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
-            const availableWidth = this.selectEl.clientWidth - parseFloat(style.paddingRight || '0') - 24;
+            let baseWidth = this.selectEl.clientWidth;
+            const parentContainer = this.selectEl.parentElement;
+            if (parentContainer && parentContainer.clientWidth > baseWidth) {
+                baseWidth = parentContainer.clientWidth;
+            }
+            baseWidth = Math.max(baseWidth, 200);
+            const availableWidth = baseWidth - parseFloat(style.paddingRight || '0') - 24;
             if (ctx.measureText(rawText).width <= availableWidth) {
                 this.truncatedText = rawText;
                 return;
@@ -138,11 +144,11 @@ export class DropdownComponent {
         const hasError = this.invalid && !this.disabled;
         const showHint = this.hint && (!this.invalid || this.disabled);
         const showError = this.error && hasError;
-        return (h(Host, { key: 'a2b06d84969c61375e9768f7f6c268e33f3d3d3b', class: {
+        return (h(Host, { key: 'd6167f6e597fde71ce4d7f7cd7a2a6f454cb501e', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '22f461ff3cde097705ef0832fe24178678a5ac90', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '937e9b977f1259375cb86c8e7f96c62bad6dac2d', class: {
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '8a536736d8499190ab797fd391fb0eefdd1e82b7', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: 'f7b406b490dc3185b6e880038c173b89ff63ad0c', class: {
                 'b2b-dropdown__select': true,
                 'b2b-dropdown__select--open': this.isOpen,
                 'b2b-dropdown__select--focused': this.focused,

package/dist/collection/components/flyout-menu/flyout-menu-option.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/flyout-menu/flyout-menu.css CHANGED Viewed

@@ -46,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 */
@@ -170,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 */
@@ -254,7 +256,7 @@
   position: absolute;
   right: -0.625rem;
   text-align: left;
-  z-index: 1000;
+  z-index: 1100;
   line-height: var(--b2b-size-copy-line-height-100);
   padding: var(--b2b-size-10) 0;
 }

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

@@ -46,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 */
@@ -170,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/icon/icon.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/icon-100/icon-100.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/icon-50/icon-50.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/input/input.css CHANGED Viewed

@@ -46,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 */
@@ -170,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 */
@@ -243,7 +245,7 @@
   border: 1px solid var(--b2b-color-grey-200);
   border-right: var(--b2b-border-right);
   border-radius: var(--b2b-border-radius);
-  padding: 5px var(--b2b-size-25) 5px;
+  padding: var(--b2b-size-13) var(--b2b-size-25) var(--b2b-size-13);
   background-color: var(--b2b-color-white-100);
   color: var(--b2b-color-black-100);
   position: relative;

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

@@ -46,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 */
@@ -170,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/input-list/input-list.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/label/label.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/modal/modal.css CHANGED Viewed

@@ -46,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 */
@@ -170,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/multiselect-dropdown/multiselect-dropdown.css CHANGED Viewed

@@ -46,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 */
@@ -170,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 */
@@ -311,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 CHANGED Viewed

@@ -46,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 */
@@ -170,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 CHANGED Viewed

@@ -46,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 */
@@ -170,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 CHANGED Viewed

@@ -46,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 */
@@ -170,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 CHANGED Viewed

@@ -46,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 */
@@ -170,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 CHANGED Viewed

@@ -46,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 */
@@ -170,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 CHANGED Viewed

@@ -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();
+    });
 });