@otto-de/b2b-core-components 1.30.0 → 1.31.0

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

@@ -1,21 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class DropdownComponent {
     constructor() {
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** Placeholder text for the dropdown. */
-        this.placeholder = 'Select an option...';
-        /** Value for the placeholder. Defaults to an empty string but can be customized. */
-        this.placeholderValue = '';
-        /** Whether the select as a whole is disabled. Per default it is false. */
-        this.disabled = false;
-        /** Whether the select is currently invalid. Per default it is false. */
-        this.invalid = false;
-        this.isOpen = false;
-        this.focused = false;
-        this.selectedValue = '';
-        this.selectedText = '';
-        this.options = [];
         this.truncatedText = '';
         this.onClickOutside = (ev) => {
             if (!this.hostElement.contains(ev.target))
@@ -71,6 +56,20 @@ export class DropdownComponent {
             }
             this.truncatedText = truncated + '…';
         };
+        this.label = undefined;
+        this.required = false;
+        this.name = undefined;
+        this.placeholder = 'Select an option...';
+        this.placeholderValue = '';
+        this.disabled = false;
+        this.invalid = false;
+        this.hint = undefined;
+        this.error = undefined;
+        this.isOpen = false;
+        this.focused = false;
+        this.selectedValue = '';
+        this.selectedText = '';
+        this.options = [];
     }
     /** Method to programmatically clear selection of the dropdown. */
     async clearSelection() {
@@ -139,19 +138,19 @@ 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: '8246ad9949e10247030c17933a0f19e6c86eec14', class: {
+        return (h(Host, { key: 'a2b06d84969c61375e9768f7f6c268e33f3d3d3b', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { key: 'aed053349b3c29eb83f0dfac3a258762f8fa8860', id: this.name, required: this.required }, this.label)), h("div", { key: '635667aac3de6b75dcdffd0fa3c81f56f02c9d8d', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '98b367fdff59a1b659def3083daa6d5bd65a8c87', class: {
+            } }, 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: {
                 'b2b-dropdown__select': true,
                 'b2b-dropdown__select--open': this.isOpen,
                 'b2b-dropdown__select--focused': this.focused,
-            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.selectedText ? this.truncatedText : this.placeholder), this.isOpen && (h("div", { key: 'db94ce372b150ae49b4ae1c1f52467274c72ce49', class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (h("div", { key: option.value, class: {
+            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.selectedText ? this.truncatedText : this.placeholder), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (h("div", { key: option.value, class: {
                 'b2b-dropdown__option': true,
                 'b2b-dropdown__option--selected': option.selected,
                 'b2b-dropdown__option--disabled': option.disabled,
-            }, "data-value": option.value, onClick: !option.disabled ? this.onSelect : undefined, role: "option", "aria-selected": option.selected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : 'false' }, option.label)))))), showHint && h("span", { key: 'df5cb03de7c4aff4c49b6b9ae24668f5a813488c' }, this.hint), showError && h("span", { key: '6ad4af4d3bc657eb2cd0e9c171f0373f19a485a1' }, this.error)));
+            }, "data-value": option.value, onClick: !option.disabled ? this.onSelect : undefined, role: "option", "aria-selected": option.selected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : 'false' }, option.label)))))), showHint && h("span", null, this.hint), showError && h("span", null, this.error)));
     }
     static get is() { return "b2b-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -169,7 +168,6 @@ export class DropdownComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -182,13 +180,11 @@ export class DropdownComponent {
                     "tags": [],
                     "text": "The dropdown label."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -201,14 +197,12 @@ export class DropdownComponent {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -221,13 +215,11 @@ export class DropdownComponent {
                     "tags": [],
                     "text": "The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": true
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -240,14 +232,12 @@ export class DropdownComponent {
                     "tags": [],
                     "text": "Placeholder text for the dropdown."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "'Select an option...'"
             },
             "placeholderValue": {
                 "type": "string",
-                "attribute": "placeholder-value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -260,14 +250,12 @@ export class DropdownComponent {
                     "tags": [],
                     "text": "Value for the placeholder. Defaults to an empty string but can be customized."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "placeholder-value",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -280,14 +268,12 @@ export class DropdownComponent {
                     "tags": [],
                     "text": "Whether the select as a whole is disabled. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -300,14 +286,12 @@ export class DropdownComponent {
                     "tags": [],
                     "text": "Whether the select is currently invalid. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -320,13 +304,11 @@ export class DropdownComponent {
                     "tags": [],
                     "text": "An optional hint text for the dropdown."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false
             },
             "error": {
                 "type": "string",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -339,8 +321,7 @@ export class DropdownComponent {
                     "tags": [],
                     "text": "An optional error message for the dropdown. This will only appear if invalid is set to true."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error",
                 "reflect": false
             }
         };

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

@@ -0,0 +1,52 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { DropdownComponent } from "./dropdown";
+it('should render the dropdown', async () => {
+    const page = await newSpecPage({
+        components: [DropdownComponent],
+        template: () => h("b2b-dropdown", { label: "test" }),
+    });
+    expect(page.root).toMatchSnapshot();
+});
+it('should render the dropdown with options', async () => {
+    const page = await newSpecPage({
+        components: [DropdownComponent],
+        template: () => (h("b2b-dropdown", { label: "test" }, h("option", null, "An option"))),
+    });
+    expect(page.root).toMatchSnapshot();
+});
+it('should render a hint if a hint string is specified', async () => {
+    const page = await newSpecPage({
+        components: [DropdownComponent],
+        template: () => (h("b2b-dropdown", { label: "test", hint: "This is a test hint" })),
+    });
+    expect(page.root).toMatchSnapshot();
+});
+it('should disable the dropdown', async () => {
+    const page = await newSpecPage({
+        components: [DropdownComponent],
+        template: () => h("b2b-dropdown", { label: "test", disabled: true }),
+    });
+    expect(page.root).toMatchSnapshot();
+});
+it('should apply an error style to the host element if an error is specified and the select is set to invalid', async () => {
+    const page = await newSpecPage({
+        components: [DropdownComponent],
+        template: () => (h("b2b-dropdown", { label: "test", error: "This is a test error", invalid: true })),
+    });
+    expect(page.root).toMatchSnapshot();
+});
+it('should render an error message if an error is specified and the select is set to invalid', async () => {
+    const page = await newSpecPage({
+        components: [DropdownComponent],
+        template: () => (h("b2b-dropdown", { label: "test", error: "This is a test error", invalid: true })),
+    });
+    expect(page.root).toMatchSnapshot();
+});
+it('should render a hint if  invalid and disabled are true at the same time', async () => {
+    const page = await newSpecPage({
+        components: [DropdownComponent],
+        template: () => (h("b2b-dropdown", { label: "test", error: "This is a test error", hint: "this is a test hint", invalid: true, disabled: true })),
+    });
+    expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/flyout-menu/flyout-menu-option.js

@@ -1,15 +1,14 @@
 import { h, Host, } from "@stencil/core";
 export class FlyoutMenuOptionComponent {
     constructor() {
-        /** Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected. */
-        this.disabled = false;
-        /** Whether the option has a separator at the bottom. Per default it is false. */
-        this.separator = false;
         this.handleClick = () => {
             if (!this.disabled) {
                 this.b2bOptionSelected.emit({ selectedOption: this.option });
             }
         };
+        this.option = undefined;
+        this.disabled = false;
+        this.separator = false;
     }
     handleKeyDown(event) {
         if (event.key === 'Enter' && !this.disabled) {
@@ -17,7 +16,7 @@ export class FlyoutMenuOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: '9c6ea495d271dfe68887762cf6325017c740c068', class: {
+        return (h(Host, { key: '091032b33e9695886e133e065d4b5c72480373e8', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,
@@ -39,7 +38,6 @@ export class FlyoutMenuOptionComponent {
         return {
             "option": {
                 "type": "string",
-                "attribute": "option",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -52,13 +50,11 @@ export class FlyoutMenuOptionComponent {
                     "tags": [],
                     "text": "The option name."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "option",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -71,14 +67,12 @@ export class FlyoutMenuOptionComponent {
                     "tags": [],
                     "text": "Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "separator": {
                 "type": "boolean",
-                "attribute": "separator",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -91,8 +85,7 @@ export class FlyoutMenuOptionComponent {
                     "tags": [],
                     "text": "Whether the option has a separator at the bottom. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "separator",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/flyout-menu/flyout-menu.e2e.js

@@ -0,0 +1,97 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-FlyoutMenu', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+      <b2b-flyout-menu>
+        <b2b-icon-100 icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon-100>
+        <b2b-flyout-menu-option slot='option' option='option1' >
+        </b2b-flyout-menu-option>
+        <b2b-flyout-menu-option slot='option' option='option2' >
+        </b2b-flyout-menu-option>
+        <b2b-flyout-menu-option slot='option' option='option3' disabled >
+        </b2b-flyout-menu-option>
+        <b2b-flyout-menu-option slot='option' option='option4' separator >
+        </b2b-flyout-menu-option>
+      </b2b-flyout-menu>
+    `);
+    });
+    it('should display the flyout menu component along with the custom icon', async () => {
+        const flyoutMenu = await page.find('b2b-flyout-menu');
+        const icon = flyoutMenu.icon;
+        expect(flyoutMenu).not.toBeNull();
+        expect(icon).not.toBeNull();
+    });
+    it('should show the menu when icon is clicked', async () => {
+        const iconContainer = await page.find('b2b-icon-100');
+        iconContainer.click();
+        await page.waitForChanges();
+        const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
+        expect(await flyoutMenuOption.isVisible()).toBe(true);
+    });
+    it('should hide the menu when it loses focus', async () => {
+        const iconContainer = await page.find('b2b-icon-100');
+        iconContainer.click();
+        await page.waitForChanges();
+        const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
+        expect(await flyoutMenuOption.isVisible()).toBe(true);
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        const container = await page.find('b2b-flyout-menu >>> div.b2b-flyout-menu__options__container');
+        expect(container).not.toHaveClass('b2b-flyout-menu__options__container--on');
+    });
+    /** Test is extremely flaky due to unknown global interaction. Test suite runs fine in isolation, so skipping for now. */
+    xit('should emit the selected event when a menu option is clicked', async () => {
+        const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
+        const icon = await page.find('b2b-icon-100 >>> div');
+        await icon.click();
+        await page.waitForChanges();
+        const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
+        await flyoutMenuOption.click();
+        await page.waitForChanges();
+        expect(flyoutMenuOption).not.toBeNull();
+        expect(optionSelectedEventSpy).toHaveReceivedEvent();
+        expect(optionSelectedEventSpy).toHaveReceivedEventDetail({
+            selectedOption: 'option1',
+        });
+    });
+    it('should disable an option when disabled is true', async () => {
+        const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
+        const icon = await page.find('b2b-icon-100');
+        icon.click();
+        await page.waitForChanges();
+        const flyoutMenuOption = await page.find('b2b-flyout-menu-option[option="option3"]');
+        flyoutMenuOption.click();
+        await page.waitForChanges();
+        expect(flyoutMenuOption).not.toBeNull();
+        expect(optionSelectedEventSpy).not.toHaveReceivedEvent();
+    });
+    it('should display separator after an option when separator is true', async () => {
+        const icon = await page.find('b2b-icon-100');
+        icon.click();
+        await page.waitForChanges();
+        const flyoutMenuOptions = await page.findAll('b2b-flyout-menu-option');
+        const flyoutMenuOption4 = flyoutMenuOptions[3];
+        const separator = await flyoutMenuOption4.getProperty('separator');
+        expect(separator).toBe(true);
+    });
+    it('should emit the selected event when a menu option is navigated to using a keyboard', async () => {
+        const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
+        expect(flyoutMenuOption).not.toBeNull();
+        expect(await flyoutMenuOption.isVisible()).toBe(true);
+        await page.keyboard.press('ArrowDown');
+        await page.waitForChanges();
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        expect(optionSelectedEventSpy).toHaveReceivedEvent();
+        expect(optionSelectedEventSpy).toHaveReceivedEventDetail({
+            selectedOption: 'option1',
+        });
+    });
+});

package/dist/collection/components/flyout-menu/flyout-menu.js

@@ -9,8 +9,6 @@ const keys = {
 };
 export class FlyoutMenuComponent {
     constructor() {
-        /** @internal if the menu is opened. */
-        this.opened = false;
         this.getCurrentOption = () => {
             const options = this.getAllOptions();
             return options.find(el => el.getAttribute('tabindex') === '0');
@@ -54,6 +52,7 @@ export class FlyoutMenuComponent {
                 this.closeMenu();
             }, 150);
         };
+        this.opened = false;
     }
     connectedCallback() {
         // Check if there are any HTML elements slotted.
@@ -145,12 +144,12 @@ export class FlyoutMenuComponent {
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '86197f7c99c7cae4370969a02bbf995b2791fbad' }, h("div", { key: '8a9d868d297ffe6db37ee35ce37aa57eb209de96', class: {
+        return (h(Host, { key: '2c09480c749bcee0f8fd7807deb41b4862c1221e' }, h("div", { key: 'a087ad4e5ff06f7fdc586b415f2cc1196daae515', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: 'd6dcafdd23a713b6e348ef473e3b16d307994fe0', class: "b2b-flyout-menu__trigger" }, h("slot", { key: 'b3335d43c60e4b7a73f54d6f92593a24f60b9279', name: "trigger" })), h("div", { key: 'bc161697cfb1cb94289ea1312b11feaf1e4cfdcb', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: 'e36aff2c778c2277e5d5d90c13d7f7d92ef7e04c', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '1581b6010ef02e5745b726d0f73fd3cc8caf67fe', name: "trigger" })), h("div", { key: '3d2f97df8aad17d0963601f62c4c18b488393d6d', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '7e9e9ed4f53398472921ab3f08fc067b1c56156f', class: "b2b-flyout-menu__arrow" }), h("slot", { key: '671aedaa471bf4171ad1e9de5c376a1cc91309d8', name: "option" })))));
+            } }, h("div", { key: 'db72e397e2dde6129468e657aaf49fdf5a470426', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'ac802410833c596abdf5056f8a6e09bc12f885a6', name: "option" })))));
     }
     static get is() { return "b2b-flyout-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -168,7 +167,6 @@ export class FlyoutMenuComponent {
         return {
             "opened": {
                 "type": "boolean",
-                "attribute": "opened",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -184,8 +182,7 @@ export class FlyoutMenuComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "opened",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -1,8 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class B2bGridColumnComponent {
     constructor() {
-        /** The alignment of text placed inside a column. Note that this will apply to all children. */
-        this.textAlign = 'left';
         this.calculateGrowDimension = (span) => {
             if (span !== undefined) {
                 const flex = (span / 12) * 100;
@@ -11,9 +9,11 @@ export class B2bGridColumnComponent {
                 };
             }
         };
+        this.span = undefined;
+        this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: '67a94192e9ced1899e411caebf2f4577f42825d5', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'f01dbd6379f5338ee1ad3de51bef24f4c6754d52' })));
+        return (h(Host, { key: '935d5d42d247393cdcf7d247212182bb040998da', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'd3d0ce4a59f9d17b2b5dc9bdae249135c31b771c' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }
@@ -21,7 +21,6 @@ export class B2bGridColumnComponent {
         return {
             "span": {
                 "type": "number",
-                "attribute": "span",
                 "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",
@@ -34,13 +33,11 @@ export class B2bGridColumnComponent {
                     "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. We recommend explicitly defining the span in scenarios where the distribution of 12 spans across columns is clear. Up to single 12 columns fit in one row."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "span",
                 "reflect": true
             },
             "textAlign": {
                 "type": "string",
-                "attribute": "text-align",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'center' | 'right'",
@@ -53,8 +50,7 @@ export class B2bGridColumnComponent {
                     "tags": [],
                     "text": "The alignment of text placed inside a column. Note that this will apply to all children."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "text-align",
                 "reflect": false,
                 "defaultValue": "'left'"
             }

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

@@ -0,0 +1,17 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Grid', () => {
+    it('should render the grid and children', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-grid>
+        <b2b-grid-row>
+            <b2b-grid-col></b2b-grid-col>
+        </b2b-grid-row>
+    </b2b-grid>`);
+        const grid = await page.find('b2b-grid');
+        expect(grid).not.toBeNull();
+        const row = await page.find('b2b-grid-row');
+        expect(row).not.toBeNull();
+        const col = await page.find('b2b-grid-col');
+        expect(col).not.toBeNull();
+    });
+});

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

@@ -1,11 +1,10 @@
 import { h, Host } from "@stencil/core";
 export class B2bGridComponent {
     constructor() {
-        /** The inner padding of the grid container measured in px. */
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: '01c49117233665062bbce4d1a4ab29b30361f6db', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '2ece9c35fce484e130bd00c01b5ae6aec8ec9056' })));
+        return (h(Host, { key: 'a07f27f3ed6961913c048630d3860ba7a9668cc8', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '6390574c52c986c73c84912586d073383ee035d8' })));
     }
     static get is() { return "b2b-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -23,7 +22,6 @@ export class B2bGridComponent {
         return {
             "margin": {
                 "type": "number",
-                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -36,8 +34,7 @@ export class B2bGridComponent {
                     "tags": [],
                     "text": "The inner padding of the grid container measured in px."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "24"
             }