@rededor/cura 1.8.3-alpha.0 → 2.0.0-alpha.11

package/dist/collection/components/forms/cura-select/cura-select.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
 export class CuraSelect {
     constructor() {
         /**
@@ -72,8 +73,17 @@ export class CuraSelect {
          * Default: false
          */
         this.isOpen = false;
+        this.isPositioned = false;
+        this.menuStyle = {
+            top: '0px',
+            left: '0px',
+            width: '0px',
+            maxHeight: this.maxHeight,
+        };
         this.activeIndex = -1;
+        this.preferredPlacement = 'bottom';
         this.textInput = '';
+        this.floatingPlacement = 'bottom-start';
         /**
          * Styles to be applied to the component.
          */
@@ -106,7 +116,7 @@ export class CuraSelect {
             var _a;
             const { code: keyCode } = event;
             if (!this.isOpen && keyCode === 'ArrowDown') {
-                this.isOpen = true;
+                this.openMenu();
                 this.activeIndex = 0;
                 return;
             }
@@ -122,12 +132,17 @@ export class CuraSelect {
                 (_a = this.options[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.click();
             }
             if (keyCode === 'Escape') {
-                this.isOpen = false;
+                this.closeMenu();
             }
         };
         this.handleInputChange = (e) => {
             this.textInput = e.target.value;
-            this.isOpen = this.textInput.length > 0;
+            if (this.searchBehavior) {
+                if (this.textInput.length > 0 && !this.isOpen)
+                    this.openMenu();
+                if (this.textInput.length === 0 && this.isOpen)
+                    this.closeMenu();
+            }
             this.internals.setFormValue(this.textInput);
         };
         this.handleClick = (event) => {
@@ -136,14 +151,20 @@ export class CuraSelect {
             const target = event.target;
             if (target.tagName === 'CURA-SELECT-OPTION')
                 return this.onOptiselected(event);
-            this.isOpen = !this.isOpen;
+            this.isOpen ? this.closeMenu() : this.openMenu();
         };
         this.handleClickOutside = (event) => {
-            const clickedOutside = !this.host.contains(event.target);
+            const path = (event.composedPath && event.composedPath()) || [];
+            const clickedOutside = !path.includes(this.host) && !(this.menuElement && path.includes(this.menuElement));
             if (clickedOutside) {
-                this.isOpen = false;
+                this.closeMenu();
             }
         };
+        this.handleViewportChange = () => {
+            if (!this.isOpen)
+                return;
+            this.updateMenuPosition();
+        };
     }
     updateOptionHighlights(newActiveINdex) {
         this.options.forEach((option, index) => (option.active = index === newActiveINdex));
@@ -215,6 +236,7 @@ export class CuraSelect {
         // this.initializeOptions();
         this.setupMutationObserver();
         this.addOutsideClickListener();
+        this.addPositionListeners();
     }
     /**
      * Lifecycle method called when the component is connected to the DOM.
@@ -228,9 +250,11 @@ export class CuraSelect {
      * Disconnects the MutationObserver if it exists.
      */
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.removeOutsideClickListener();
+        this.removePositionListeners();
+        (_b = this.cleanupAutoUpdate) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     initializeOptions() {
         var _a;
@@ -299,7 +323,7 @@ export class CuraSelect {
         this.internals.setFormValue(this.value);
         if (this.textInput !== selectedOptionElement.textContent) {
             this.textInput = selectedOptionElement.textContent;
-            this.isOpen = false;
+            this.closeMenu();
             this.selected.emit(selectedOptionElement.value);
         }
     }
@@ -354,20 +378,85 @@ export class CuraSelect {
         const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
         return h("cura-icon", { class: "feedback-icon", name: icon, iconset: "default", size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles });
     }
+    openMenu() {
+        this.isOpen = true;
+        this.isPositioned = false;
+        requestAnimationFrame(() => this.setupFloating());
+    }
+    closeMenu() {
+        var _a;
+        this.isOpen = false;
+        this.isPositioned = false;
+        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     addOutsideClickListener() {
         document.addEventListener('click', this.handleClickOutside);
     }
     removeOutsideClickListener() {
         document.removeEventListener('click', this.handleClickOutside);
     }
+    addPositionListeners() {
+        window.addEventListener('resize', this.handleViewportChange, { passive: true });
+        window.addEventListener('scroll', this.handleViewportChange, true);
+    }
+    removePositionListeners() {
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+    }
+    parseMaxHeight() {
+        const numeric = parseFloat(this.maxHeight);
+        return Number.isFinite(numeric) ? numeric : 285;
+    }
+    setupFloating() {
+        var _a;
+        if (!this.inputWrapper || !this.menuElement)
+            return;
+        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanupAutoUpdate = autoUpdate(this.inputWrapper, this.menuElement, () => {
+            this.updateMenuPosition();
+        });
+        this.updateMenuPosition();
+    }
+    updateMenuPosition() {
+        if (!this.inputWrapper || !this.menuElement)
+            return;
+        computePosition(this.inputWrapper, this.menuElement, {
+            strategy: 'fixed',
+            placement: this.floatingPlacement,
+            middleware: [
+                offset(0),
+                flip(),
+                shift({ padding: 8 }),
+                size({
+                    apply: ({ rects, availableHeight }) => {
+                        this.menuStyle = Object.assign(Object.assign({}, this.menuStyle), { width: `${rects.reference.width}px`, maxHeight: `${Math.min(availableHeight, this.parseMaxHeight())}px` });
+                    },
+                }),
+            ],
+        }).then(({ x, y, placement }) => {
+            this.preferredPlacement = placement.startsWith('top') ? 'top' : 'bottom';
+            this.menuStyle = Object.assign(Object.assign({}, this.menuStyle), { top: `${y}px`, left: `${x}px` });
+            this.isPositioned = true;
+        });
+    }
     render() {
-        return (h(Host, { key: '3aeecef0bff82a4b14c4dee8b222fdf6eb33b2f8', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, h("div", { key: '00dd10ed04cd3bf0e848d9facc44db794e3580cf', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'd0c7293af9ba728293f2b531c2cc0354ba6f9fa0', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '2d1e87303eab87280dc8668e390bd5aa696814d9', class: "required" }, "* "))), h("div", { key: 'd0e8464016796145e088f459532a37dfb1852f96', class: {
+        return (h(Host, { key: '8a05e5365062b5a2da4f10d7e3ca04f9d3136fba', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, h("div", { key: 'ab28fd73d68ccdc5ad6dd6cc7f79d879eaf25818', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '5405aa3706b07640fdfdaa681ad22ea9c5fd9997', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '39b37aefbf4e61572607d891eb63c737c332793c', class: "required" }, "* "))), h("div", { key: 'c339ab1ff49699fb0a348a169ba7f545b89bd593', class: {
                 'cura-input-field': true,
                 'open': this.isOpen,
-            } }, this.renderIcon(), h("input", { key: '8110997e13827855169e58bfee9695a60bf4dbfa', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: '7b9b18aebd379b004c08f4bcdb4c72357f29c56c', class: "up-down-button" }, h("cura-icon", { key: '4e1fac2b43502e38db450e319e2283b97ed22fd7', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '8e89021a023d6ff69a2adb2fe1b9052d1d813d06', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'a253ffc9f1f1ee84c9dcbc81dc3a650c5105c11e' })), this.isOpen && (h("div", { key: '938f552bebac510a7345c8e7b46d2ef911c19e12', class: {
+            }, ref: el => (this.inputWrapper = el) }, this.renderIcon(), h("input", { key: '5118ad409b6b9c48c856670857d3cae26d28fd46', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: '53bddc2b1e56462a9181ce99749d98568f1c5dd9', class: "up-down-button" }, h("cura-icon", { key: '01cb20504d2e0506e7210d33e3ca75978a598eff', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '550c24779f690ebd16bec881770b200ce06f5390', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '530f64f99df6328d3a49a449f8f924e57bb03f21' })), this.isOpen && (h("div", { key: '3ee7a6439c98a0837a3f39d27646ed7a55c630b3', class: {
                 menu: true,
                 open: this.isOpen,
-            }, style: { '--max-height': this.maxHeight } }, h("slot", { key: '2d54c15bb8df7dfe33fac77cee7778c450946cf7', name: "option" }))))));
+                [this.preferredPlacement]: true,
+            }, ref: el => (this.menuElement = el), style: {
+                '--max-height': this.maxHeight,
+                top: this.menuStyle.top,
+                left: this.menuStyle.left,
+                width: this.menuStyle.width,
+                maxHeight: this.menuStyle.maxHeight,
+                visibility: this.isPositioned ? 'visible' : 'hidden',
+                opacity: this.isPositioned ? '1' : '0',
+                pointerEvents: this.isPositioned ? 'auto' : 'none',
+            } }, h("slot", { key: '84c3bb501966175635102b2ccbfa0cf43d2112f1', name: "option" }))))));
     }
     static get is() { return "cura-select"; }
     static get encapsulation() { return "shadow"; }
@@ -386,7 +475,6 @@ export class CuraSelect {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -402,11 +490,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -422,11 +510,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "placeholder",
                 "defaultValue": "''"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -442,11 +530,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "mode": {
                 "type": "string",
-                "attribute": "mode",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'transparent'",
@@ -462,11 +550,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "mode",
                 "defaultValue": "'default'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -482,11 +570,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "iconName": {
                 "type": "string",
-                "attribute": "icon-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -501,11 +589,11 @@ export class CuraSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon-name"
             },
             "status": {
                 "type": "string",
-                "attribute": "status",
                 "mutable": true,
                 "complexType": {
                     "original": "'success' | 'error' | 'default'",
@@ -521,11 +609,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "status",
                 "defaultValue": "'default'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -541,11 +629,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -561,11 +649,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "searchBehavior": {
                 "type": "boolean",
-                "attribute": "search-behavior",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -581,11 +669,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "search-behavior",
                 "defaultValue": "false"
             },
             "caseSensitive": {
                 "type": "boolean",
-                "attribute": "case-sensitive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -601,11 +689,11 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "case-sensitive",
                 "defaultValue": "true"
             },
             "maxHeight": {
                 "type": "string",
-                "attribute": "max-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -621,6 +709,7 @@ export class CuraSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "max-height",
                 "defaultValue": "'285px'"
             }
         };
@@ -630,8 +719,11 @@ export class CuraSelect {
             "isHovered": {},
             "isFocused": {},
             "isOpen": {},
+            "isPositioned": {},
+            "menuStyle": {},
             "options": {},
             "activeIndex": {},
+            "preferredPlacement": {},
             "textInput": {}
         };
     }
@@ -683,4 +775,3 @@ export class CuraSelect {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=cura-select.js.map

package/dist/collection/components/forms/cura-select/cura-select.stories.js

@@ -209,4 +209,3 @@ export const CuraSelect = {
         maxHeight: "285px",
     },
 };
-//# sourceMappingURL=cura-select.stories.js.map

package/dist/collection/components/forms/cura-select-options/cura-select-option.css

@@ -10,6 +10,7 @@
   align-items: center;
   box-sizing: border-box;
   background: var(--neutral-purewhite);
+  border-bottom: 1px solid transparent;
 }
 .item.selected {
   background-color: var(--primary-lighter-50);
@@ -17,13 +18,27 @@
 }
 .item:hover:not(.selected) {
   background: var(--neutral-white);
+}
+.item:hover:not(.selected) {
   border-bottom: 1px solid var(--neutral-light);
 }
 .item.active {
   background: var(--neutral-white) !important;
+}
+.item.active {
   border-bottom: 1px solid var(--neutral-light);
 }
 .item.selected.active {
   background-color: var(--primary-lighter-50) !important;
   box-shadow: none;
+}
+
+:host(:last-of-type) .item {
+  border-bottom: none;
+}
+
+:host(:last-of-type) .item:hover,
+:host(:last-of-type) .item.active,
+:host(:last-of-type) .item.selected {
+  border-bottom: none;
 }

package/dist/collection/components/forms/cura-select-options/cura-select-option.js

@@ -50,7 +50,6 @@ export class CuraSelectOption {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -65,11 +64,11 @@ export class CuraSelectOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             },
             "selected": {
                 "type": "boolean",
-                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -85,11 +84,11 @@ export class CuraSelectOption {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -105,11 +104,11 @@ export class CuraSelectOption {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "active",
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'xsmall' | 'small' | 'medium' | 'large'",
@@ -125,6 +124,7 @@ export class CuraSelectOption {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'small'"
             }
         };
@@ -142,4 +142,3 @@ export class CuraSelectOption {
             }];
     }
 }
-//# sourceMappingURL=cura-select-option.js.map

package/dist/collection/components/forms/cura-switch/cura-switch.js

@@ -157,7 +157,6 @@ export class CuraSwitch {
         return {
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -173,11 +172,11 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -193,11 +192,11 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -213,11 +212,11 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "ontabindex": {
                 "type": "number",
-                "attribute": "ontabindex",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -233,11 +232,11 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "ontabindex",
                 "defaultValue": "0"
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -253,11 +252,11 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "position",
                 "defaultValue": "'left'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -273,11 +272,11 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "background": {
                 "type": "string",
-                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "'dark' | 'light'",
@@ -293,11 +292,11 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "background",
                 "defaultValue": "'light'"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -313,11 +312,11 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "'accent'"
             },
             "overflowLabel": {
                 "type": "string",
-                "attribute": "overflow-label",
                 "mutable": false,
                 "complexType": {
                     "original": "'none' | 'single' | string",
@@ -336,11 +335,11 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "overflow-label",
                 "defaultValue": "'none'"
             },
             "overflowHelper": {
                 "type": "string",
-                "attribute": "overflow-helper",
                 "mutable": false,
                 "complexType": {
                     "original": "'none' | 'single' | string",
@@ -359,6 +358,7 @@ export class CuraSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "overflow-helper",
                 "defaultValue": "'none'"
             }
         };
@@ -400,4 +400,3 @@ export class CuraSwitch {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=cura-switch.js.map

package/dist/collection/components/forms/cura-switch/cura-switch.stories.js

@@ -148,4 +148,3 @@ export const CuraSwitchStory = {
         textOverflow: 'none',
     },
 };
-//# sourceMappingURL=cura-switch.stories.js.map

package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js

@@ -40,7 +40,6 @@ export class CuraLoaderBar {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -56,11 +55,11 @@ export class CuraLoaderBar {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "'primary-base'"
             },
             "progress": {
                 "type": "number",
-                "attribute": "progress",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -76,6 +75,7 @@ export class CuraLoaderBar {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "progress",
                 "defaultValue": "0"
             }
         };
@@ -96,4 +96,3 @@ export class CuraLoaderBar {
             }];
     }
 }
-//# sourceMappingURL=cura-loader-bar.js.map

package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.stories.js

@@ -51,4 +51,3 @@ export const LoaderBar = {
         progress: '50'
     },
 };
-//# sourceMappingURL=cura-loader-bar.stories.js.map