npm - @otto-de/b2b-core-components - Versions diffs - 1.14.1 → 1.15.1 - Mend

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

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 (315) hide show

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -223,6 +223,7 @@
   min-width: fit-content;
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
+  max-width: 600px;
 }
 :host(.b2b-dropdown) .b2b-dropdown__select {
   font-family: var(--b2b-font-family-default);

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/icon-100/icon-100.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/icon-50/icon-50.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

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

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

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

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

@@ -26,6 +26,7 @@ const meta = {
         error: '',
         autofocus: false,
         invalid: false,
+        inputTextAlign: 'left',
     },
     argTypes: getArgTypes('b2b-input'),
     render: (_a) => {
@@ -41,7 +42,8 @@ const meta = {
       hint="${args.hint}"
       error="${args.error}"
       autofocus="${args.autofocus}"
-      invalid=${args.invalid}></b2b-input>
+      invalid=${args.invalid}
+      input-text-align="${args.inputTextAlign}"></b2b-input>
   </div>`;
     },
 };
@@ -64,8 +66,8 @@ export const Error = {
 export const Required = {
     args: Object.assign(Object.assign({}, meta.args), { label: 'Required input', required: true }),
 };
-export const IconEnd = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
+export const Prefix = {
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Label' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
@@ -80,13 +82,13 @@ export const IconEnd = {
       error="${args.error}"
       autofocus="${args.autofocus}"
       invalid=${args.invalid}
-      ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
-    ></b2b-input>
+      ><span slot="start">Registration Number</span></b2b-input
+    >
   </div>`;
     },
 };
-export const Prefix = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
+export const Suffix = {
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Label' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
@@ -101,13 +103,13 @@ export const Prefix = {
       error="${args.error}"
       autofocus="${args.autofocus}"
       invalid=${args.invalid}
-      ><span slot="start">Registration Number</span></b2b-input
+      ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
     >
   </div>`;
     },
 };
 export const PrefixAndSuffix = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Label' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
@@ -121,13 +123,19 @@ export const PrefixAndSuffix = {
       hint="${args.hint}"
       error="${args.error}"
       autofocus="${args.autofocus}"
-      invalid=${args.invalid}
-      ><span slot="start">Registration Number</span
-      ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
-    ></b2b-input>
+      invalid=${args.invalid}>
+      <b2b-icon icon="b2b_icon-search" slot="start"></b2b-icon
+      ><span slot="end">Registration Number</span></b2b-input
+    >
   </div>`;
     },
 };
 export const AllPropertiesSpecified = {
     args: Object.assign(Object.assign({}, meta.args), { label: 'Input with all arguments', required: true, placeholder: 'All arguments placeholder', value: 'an initial value', hint: 'This is a hint for an every argument specified input', error: 'This is an error so you will not see the hint', disabled: false, autofocus: false }),
 };
+export const RightAligned = {
+    args: Object.assign(Object.assign({}, meta.args), { value: 'RightAligned Input', inputTextAlign: 'right' }),
+};
+export const CenterAligned = {
+    args: Object.assign(Object.assign({}, meta.args), { value: 'CenterAligned Input', inputTextAlign: 'center' }),
+};

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
-  --b2b-color-table-selected-hover: #e6f4ff;
   --b2b-color-table-selected-default: #cce9ff;
-  --b2b-color-table-hover: #e6f4ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;