@otto-de/b2b-core-components 1.0.0

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

@@ -0,0 +1,284 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --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-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-45);
+  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-75: var(--b2b-size-30);
+  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:host(.b2b-dropdown) {
+  --b2b-border-radius: var(--b2b-size-border-radius-100);
+  --b2b-border-right: 1px solid var(--b2b-color-grey-200);
+  display: block;
+  width: 100%;
+  min-width: fit-content;
+  font-family: var(--b2b-font-family-default);
+  font-size: var(--b2b-size-copy-100);
+}
+:host(.b2b-dropdown) .b2b-dropdown-select {
+  font-family: var(--b2b-font-family-default);
+  font-size: var(--b2b-size-copy-100);
+  appearance: none;
+  background-color: var(--b2b-color-white-100);
+  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z"/></svg>');
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5rem;
+  width: 100%;
+  min-width: fit-content;
+  border: 1px solid var(--b2b-color-grey-200);
+  border-right: var(--b2b-border-right);
+  border-radius: var(--b2b-border-radius);
+  padding: 7px 11px 6px;
+  padding-right: calc(1.75rem + 6px);
+  height: var(--b2b-size-90);
+  line-height: var(--b2b-size-copy-line-height-100);
+  box-sizing: border-box;
+  position: relative;
+}
+:host(.b2b-dropdown) .b2b-dropdown-select:focus-visible {
+  outline: 2px solid Highlight;
+  outline: 2px solid -webkit-focus-ring-color;
+  border-radius: var(--b2b-border-radius);
+  outline-offset: -1px;
+  z-index: 9999;
+}
+:host(.b2b-dropdown) b2b-input-label {
+  display: block;
+  margin-bottom: var(--b2b-size-10);
+}
+:host(.b2b-dropdown) span {
+  display: block;
+  color: var(--b2b-color-grey-300);
+  margin-top: var(--b2b-size-10);
+  font-size: var(--b2b-size-copy-75);
+  line-height: var(--b2b-size-copy-line-height-75);
+}
+:host(.b2b-dropdown--error) .b2b-dropdown-select {
+  background-color: var(--b2b-color-error-50);
+  border: 1px solid var(--b2b-color-error-100);
+  border-right: var(--b2b-border-right);
+  border-color: var(--b2b-color-error-100);
+}
+:host(.b2b-dropdown--error) .b2b-dropdown-select:focus {
+  outline: 2px solid var(--b2b-color-error-100);
+  outline-offset: -1px;
+}
+:host(.b2b-dropdown--error) span {
+  color: var(--b2b-color-error-100);
+}
+:host(.b2b-dropdown--disabled) .b2b-dropdown-select {
+  background-image: none;
+  background-color: var(--b2b-color-grey-25);
+  color: var(--b2b-color-grey-250);
+  border-color: var(--b2b-color-grey-200);
+  opacity: 1;
+}

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

@@ -0,0 +1,248 @@
+import { h, Host, } from '@stencil/core';
+export class DropdownComponent {
+  constructor() {
+    this.onSelect = (ev) => {
+      const option = ev.target;
+      this.b2bChange.emit(option.value);
+    };
+    this.onFocus = (ev) => {
+      this.b2bFocus.emit(ev);
+    };
+    this.onBlur = (ev) => {
+      this.b2bBlur.emit(ev);
+    };
+    this.getSelectElement = () => {
+      return this.hostElement.shadowRoot.querySelector('select');
+    };
+    // TODO: find a way to test it maybe when migrating to new testing framework
+    this.handleFormData = (event) => {
+      if (this.name != undefined) {
+        const selectElement = this.getSelectElement();
+        const value = selectElement.value || '';
+        event.formData.append(this.name, value);
+      }
+    };
+    this.label = undefined;
+    this.required = false;
+    this.name = undefined;
+    this.disabled = false;
+    this.invalid = false;
+    this.hint = undefined;
+    this.error = undefined;
+  }
+  connectedCallback() {
+    const form = this.hostElement.closest('form');
+    if (form != null) {
+      form.addEventListener('formdata', this.handleFormData);
+    }
+  }
+  // shadow-DOM issue: <option> did not render inside <slot> so we need to re-append to <select>
+  componentDidRender() {
+    const options = this.hostElement.querySelectorAll('option');
+    const selectElement = this.getSelectElement();
+    selectElement.append(...options);
+  }
+  render() {
+    return (h(Host, { class: {
+        'b2b-dropdown': true,
+        'b2b-dropdown--error': this.invalid && !this.disabled,
+        'b2b-dropdown--disabled': this.disabled,
+      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { class: "b2b-dropdown-select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (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-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The dropdown label."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds an asterisk at the end of the label to signify that the field is required."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility."
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the select as a whole is disabled. Per default it is false."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the select is currently invalid. Per default it is false."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "An optional hint text for the dropdown."
+        },
+        "attribute": "hint",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "An optional error message for the dropdown. This will only appear if invalid is set to true."
+        },
+        "attribute": "error",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bChange",
+        "name": "b2b-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits the option whenever a new option is chosen."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "b2bFocus",
+        "name": "b2b-focus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the dropdown receives focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "b2bBlur",
+        "name": "b2b-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the dropdown loses focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/dropdown/dropdown.stories.js

@@ -0,0 +1,52 @@
+import { html } from 'lit-html';
+import { getArgTypes } from '../../docs/config/utils';
+import dropdownDocs from './dropdown.docs.mdx';
+const Template = ({ label, required, name, disabled, invalid, hint, error, }) => {
+  const defaultLabel = label ? label : 'Favorite Fruit';
+  return html `<b2b-dropdown
+    label="${defaultLabel}"
+    name="${name}"
+    error="${error}"
+    hint="${hint}"
+    disabled="${disabled}"
+    invalid="${invalid}"
+    required="${required}">
+    <option value="strawberry">Strawberry</option>
+    <option value="orange">Orange</option>
+    <option value="banana">Banana</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="apple" disabled>Apple</option>
+  </b2b-dropdown>`;
+};
+const defaultArgs = {
+  label: 'Favorite Fruit',
+  required: false,
+  name: 'fruit',
+  disabled: false,
+  invalid: false,
+  hint: 'Pick one',
+  error: 'Not that one!',
+};
+export const story010Default = Template.bind({});
+story010Default.args = Object.assign({}, defaultArgs);
+story010Default.storyName = 'Default';
+export const story020Disabled = Template.bind({});
+story020Disabled.args = Object.assign(Object.assign({}, defaultArgs), { disabled: true });
+story020Disabled.storyName = 'Disabled';
+export const story030Error = Template.bind({});
+story030Error.args = Object.assign(Object.assign({}, defaultArgs), { invalid: true });
+story030Error.storyName = 'Error';
+export const story040Required = Template.bind({});
+story040Required.args = Object.assign(Object.assign({}, defaultArgs), { required: true });
+story040Required.storyName = 'Required';
+const dropdownArgs = getArgTypes('b2b-dropdown');
+export default {
+  title: 'Components/Form/Dropdown',
+  argTypes: dropdownArgs,
+  viewMode: 'docs',
+  parameters: {
+    docs: {
+      page: dropdownDocs,
+    },
+  },
+};

package/dist/collection/components/grid/column.js

@@ -0,0 +1,71 @@
+import { h, Host } from '@stencil/core';
+export class B2bGridColumnComponent {
+  constructor() {
+    this.calculateGrowDimension = (growth) => {
+      const gap = this.hostElement.closest('b2b-grid-row').columnGap;
+      // if a span is not specified, we still need to subtract gap width and a growth factor of 1
+      let growthFactor;
+      if (gap > 0 && growth != undefined) {
+        growthFactor = `- ${gap - 2 * growth}px`;
+      }
+      else if (gap <= 0 && growth != undefined) {
+        growthFactor = '';
+      }
+      else {
+        growthFactor = `- ${gap - 2}px`;
+      }
+      const flexGrow = growth == undefined ? 1 : 0;
+      const width = growth == undefined ? 1 : growth;
+      return {
+        ['flex']: `${flexGrow} 0 calc(${(width / 12) * 100}% ${growthFactor})`,
+      };
+    };
+    this.span = undefined;
+    this.textAlign = 'left';
+  }
+  render() {
+    return (h(Host, { style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", null)));
+  }
+  static get is() { return "b2b-grid-col"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() {
+    return {
+      "span": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "| 1\n    | 2\n    | 3\n    | 4\n    | 5\n    | 6\n    | 7\n    | 8\n    | 9\n    | 10\n    | 11\n    | 12",
+          "resolved": "1 | 10 | 11 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row."
+        },
+        "attribute": "span",
+        "reflect": true
+      },
+      "textAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'center' | 'right'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The alignment of text placed inside of a column. Note that this will apply to all children."
+        },
+        "attribute": "text-align",
+        "reflect": false,
+        "defaultValue": "'left'"
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/grid/grid.css

@@ -0,0 +1,5 @@
+:host(.b2b-grid) {
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+}