@rededor/cura 1.4.0 → 1.5.0-alpha.0

package/dist/collection/components/cura-alert/cura-alert.js

@@ -44,7 +44,7 @@ export class CuraAlert {
         return this.icon ? this.icon : iconMapping[this.type];
     }
     render() {
-        return (h(Host, { key: 'c7d36a87c8ca4ea44a53d90edf5028e27d4ab631' }, h("div", { key: 'c54f199ba48a8a0e0549c5f046cf7dc128d8108e', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'f1607925bceeaf29a8bee7a021b1bf9e9be5b0e6', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '6ccb322b9594a0c963cf8fa873b4a66642d69357', class: "content" }, this.label ? (h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label)) : '', h("cura-paragraph", { key: 'e70495f19e2eac2b0c593d156436061aba50c295', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '043f67d199324f668aced318a81e6ecdbd3ac97a' })), h("slot", { key: '83cc65b83514bdbc77a3676d2fab55ebb20aa5dc', name: "actions" })), this.closeable ?
+        return (h(Host, { key: 'a0b22404673b1568b9cb937150dda71ce4c99d50' }, h("div", { key: 'c30bf1b97d1e1ffaf334ef3bca6cdd1f081c679c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '1bd88c8a19e073d7b9d967d8df38bb74063cd110', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '0df09a27c27c7e1743f7cfb9e71c96b102ff4484', class: "content" }, this.label ? (h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label)) : '', h("cura-paragraph", { key: '687cc7ab050299f0878c2d10ccd28e92708db85d', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'e2d85d40e65029ea71a43aa23e7298d6dcc7efa9' })), h("slot", { key: 'a28fe90c9bfe2b9fb22f196eab7bb2e09e408dbf', name: "actions" })), this.closeable ?
             (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
             : '')));
     }

package/dist/collection/components/cura-avatar/cura-avatar.js

@@ -39,7 +39,7 @@ export class CuraAvatar {
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (h(Host, { key: '2760534555a0483e7e30c5f3009ec0cf68d0973b', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '3daf6dd066983dc63525c38b7da498147c0bf387', class: this.getClasses(), style: this.styles }, h("img", { key: 'a5f4de7983722fc3f750404fa985c312590b5e98', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        return (h(Host, { key: '467e74004b400e80a2d7f8e1a40cd9d7e782ff8a', style: this.hostCSSProperties(), role: "img" }, h("div", { key: 'c38a163b8aeebd07f8aece7aea9889c336df92a5', class: this.getClasses(), style: this.styles }, h("img", { key: 'a22868d4aae4029afb9b325a5c8f5556fa8984ea', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
     }
     static get is() { return "cura-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-calendar/cura-calendar.js

@@ -452,7 +452,7 @@ export class CuraCalendar {
     }
     render() {
         const { months } = this.fetchMonthNames();
-        return (h(Host, { key: 'fcea88a384ceebadccb6059ef59cea945f875a72', style: this.getHostCSSProperties() }, h("div", { key: '82c5271ba6b073439fb58471920f73b68b8f1320', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''}`, style: this.styles }, h("header", { key: '3921fb57f3d526b9f33c59f998ad422806505bc1', class: "header" }, h("div", { key: '1f852f0f29ff927d3940c670f5b25206837cc331', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: '697fda3903f24611628fe24a7f669ab87474aeab', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: !this.collapsed ? () => this.updateCurrentMonth('prev') : () => this.updateCurrentWeek('prev') }), this.type === 'dropdown' ? (h("div", { class: "select" }, h("cura-select", { size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index) => (h("cura-select-option", { size: "xsmall", key: index, value: month }, month)))), h("cura-select", { size: "small", class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: e => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index) => (h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), h("cura-icon", { key: '6b7f0694e978b0807c4e54629cda68f2fde27c8a', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), h("span", { key: '5a151331c2c9872cf3b50bbaea7c9b92b1476297', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: "bold", key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), h("div", { key: '7eeb57ed5dc104c953343697a205a922a1b2b912', class: "dates" }, !this.collapsed
+        return (h(Host, { key: '859c5f15de173c774dc9f8a88792845741b665e2', style: this.getHostCSSProperties() }, h("div", { key: '5838783d7ecb5b2258ef7ef73ba32ca7ddbad470', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''}`, style: this.styles }, h("header", { key: '16245dbb73d9d0a277891b3853f451b89acccc35', class: "header" }, h("div", { key: '9a22c4386363642fa7219edebd9e9a5cfb5220aa', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: '4d3ee4454dfc8bbcd8d76df101b553c86b0cea8f', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: !this.collapsed ? () => this.updateCurrentMonth('prev') : () => this.updateCurrentWeek('prev') }), this.type === 'dropdown' ? (h("div", { class: "select" }, h("cura-select", { size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index) => (h("cura-select-option", { size: "xsmall", key: index, value: month }, month)))), h("cura-select", { size: "small", class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: e => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index) => (h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), h("cura-icon", { key: '1f54119aafaa80816cdd016100a7987cba6656b0', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), h("span", { key: '40be6c876675cf43b42e214e30639e48873dc4bc', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: "bold", key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), h("div", { key: '72cae6b30fa5b7d5e180b796458d1844aba27ea9', class: "dates" }, !this.collapsed
             ? this.fetchDaysOfMonth().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
             : this.fetchDaysOfWeek().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (h("div", { class: "collapsed-container" }, h("cura-button-transparent", { onClick: () => this.showNotColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "plusCircle" }, "Veja mais datas"))) : (h("div", { class: "collapsed-container" }, h("cura-button-transparent", { onClick: () => this.showColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "minusCircle" }, "Veja menos datas")))) : null)));
     }

package/dist/collection/components/cura-card/cura-card.js

@@ -34,7 +34,7 @@ export class CuraCard {
         return classes;
     }
     render() {
-        return (h(Host, { key: 'db1a13cfe3bb925300e65641e1d45fade5a03f52', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
+        return (h(Host, { key: '9478ce754c108db722dbc5bcbb00a0884b6c6f38', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
     }
     static get is() { return "cura-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-icon/cura-icon.js

@@ -27,7 +27,7 @@ export class CuraIcon {
         this.host.style.setProperty(prop, value);
     }
     render() {
-        return (h(Host, { key: '0a9f6e85bc7be23072c17fd8f99ca88601e2a830' }, h("svg", { key: '00e4c6f5ce357b7a974d3dd0a27948fc1e8138ce', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '504a842d6b030539cb615cf60b090fbc9f771761', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+        return (h(Host, { key: '09f68d2b455427bf45dca2e6b30e993ebfa6b3a0' }, h("svg", { key: 'f15fea7564efac510263f06f8d15288fec004f66', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: 'b88136d10453dc9e1d2c41ceb10676b348430ae3', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
     }
     static get is() { return "cura-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-icons-view/cura-icons-view.js

@@ -14,7 +14,7 @@ export class CuraIconsView {
         this.sizes.unshift(this.sizes.pop());
     }
     render() {
-        return (h(Host, { key: '4c5839d8673f7b6cc5ef212f3dab12fbd7fa4a65' }, h("div", { key: '80ac970319cd6041b133a5808ff5c47a8e7b8aa6', class: "iconDetail" }, h("cura-heading", { key: 'd1a2fbd4455304a9f581e62207492cd172abcd93', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '67e7e479b00f6305af972c7de12e926c0d2067ca' }, this.selected)), h("div", { key: '8eb81c26431259818f299dd7ebcf708d1f664dc1', class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '2ff3b3a5868a68e2f6fa967fa2e3e9c2e5883451', class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: 'c3581991a1b8971447625ed67f4ba0d616efb855', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon))))));
+        return (h(Host, { key: '4918bc5d13f24f3133af45ce5991b3f3f43e99cf' }, h("div", { key: '837d47976a39702b13ceb5a7c5ac8ae097d34988', class: "iconDetail" }, h("cura-heading", { key: 'de4c75c4652b464991aa173cf7243db65f9ba2ba', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '77591ce199e5140ddcde3d7b956586d27fe6bc05' }, this.selected)), h("div", { key: '6da36b174603d48ab3b11a8490c424f164855147', class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '4920c8010e0a55f80bb557f4ba0e537b7861ae36', class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: '99739b351fb25036efd4b55774c0f077058be8fc', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon))))));
     }
     static get is() { return "cura-icons-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-modal/cura-modal.css

@@ -100,7 +100,7 @@
   margin-top: var(--offset-top);
 }
 .modal.open {
-  z-index: 100;
+  z-index: var(--zIndex);
 }
 .modal.open .backdrop,
 .modal.open .wrapper {
@@ -124,7 +124,7 @@
 
 .backdrop {
   background-color: var(--background-color);
-  z-index: 90;
+  z-index: calc(var(--zIndex) - 10);
   animation: fadeIn 0.3s ease-out;
 }
 
@@ -137,7 +137,7 @@
   max-width: 600px;
   min-width: 200px;
   padding: 0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);
-  z-index: 100;
+  z-index: var(--zIndex);
   box-shadow: 0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));
   transform: scale(0.95);
   transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;

package/dist/collection/components/cura-modal/cura-modal.js

@@ -11,6 +11,8 @@ export class CuraModal {
         this.bottom = 0;
         this.left = 0;
         this.right = 0;
+        this.mobileCloseLabel = 'Fechar';
+        this.zindex = '100';
         this.styles = {};
     }
     setColors() {
@@ -44,7 +46,7 @@ export class CuraModal {
         this.setRight();
     }
     render() {
-        return (h(Host, { key: '5061e0536f1f06ae425a810fc15eb85d36caa271', role: "dialog", "aria-modal": "true" }, h("div", { key: '2afc242ddb391923dccfb6adc218179d32ee85e3', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: '5cf4d0d0817e23774984991467b8a34297f47336', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: 'ba6a2679ce03c87c88e42c4f28616ab9afc09116', class: "wrapper" }, h("button", { key: 'cc3126fa311ef7eb75dbdb56468d7b53af13740c', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: 'b116480ab348f69fafbbc5e8bef7ee5a43640b00', name: "close", color: "error-dark", size: "small" })), h("slot", { key: '7fd83b4991dee4e7cab92bf6e357efa4ce3c1d71' }), h("button", { key: '1351ba9d296c1362197496f336a20007cd6f45f0', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: '3d72c9f8981c380ab8ff19e4507497703011aece', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: '77e1144a9edb1c20e34f9f7e02ea97264d525143', color: "error-dark", size: "small", marginBlock: "0" }, "Fechar"))))));
+        return (h(Host, { key: '50f4146aed5392ae16803fb060d4921a5e8a3271', role: "dialog", "aria-modal": "true", style: { '--zIndex': this.zindex } }, h("div", { key: '149e99a4b8b479515ed3d67c5c8aea08d4d96d1c', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: 'f32f7f7e16475c51babf95e1ca5f4fea449c1bb0', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: '183f7ab8f2cee8106795f6104c38a2c93272387f', class: "wrapper" }, h("button", { key: '28778c8120c92dfcae0443dccd21f55a204bd82e', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: 'a847de5c1314ea1460673870334f3f98e98f1cf9', name: "close", color: "error-dark", size: "small" })), h("slot", { key: 'e08b556b7232425c2b83a21dac75d30fb4361a83' }), h("button", { key: 'e736a95f878ff5a2ad6897d9140fd74b26939445', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: '9eaeaca6f4ea9d3cde5fd44e108de389c727f991', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: '2476b85e5dd7d6092d3d1d1714ee4a79b73b12d0', color: "error-dark", size: "small", marginBlock: "0" }, this.mobileCloseLabel))))));
     }
     static get is() { return "cura-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -167,6 +169,42 @@ export class CuraModal {
                 "attribute": "right",
                 "reflect": false,
                 "defaultValue": "0"
+            },
+            "mobileCloseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the label for the close button when the modal is viewed on mobile.\nDefault: Fechar"
+                },
+                "attribute": "mobile-close-label",
+                "reflect": true,
+                "defaultValue": "'Fechar'"
+            },
+            "zindex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property zindex to control the z-index value of the component.\nDefault: 100"
+                },
+                "attribute": "zindex",
+                "reflect": true,
+                "defaultValue": "'100'"
             }
         };
     }

package/dist/collection/components/cura-modal/cura-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-modal.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property top to control modal top position.\n   * Default: 0px\n   */\n  @Prop() top?: number = 0;\n  /**\n   * Property bottom to control modal bottom position.\n   * Default: 0px\n   */\n  @Prop() bottom?: number = 0;\n  /**\n   * Property left to control modal left position.\n   * Default: 0px\n   */\n  @Prop() left?: number = 0;\n  /**\n   * Property right to control modal right position.\n   * Default: 0px\n   */\n  @Prop() right?: number = 0;\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  setOffset(name: string, value: number) {\n    this.styles = {\n      ...this.styles,\n      [`--${name}-offset`]: `${value}px`,\n    };\n  }\n\n  @Watch('top')\n  setTop() {\n    this.setOffset('top', this.top);\n  }\n\n  @Watch('bottom')\n  setBottom() {\n    this.setOffset('bottom', this.bottom);\n  }\n\n  @Watch('left')\n  setLeft() {\n    this.setOffset('left', this.left);\n  }\n\n  @Watch('right')\n  setRight() {\n    this.setOffset('right', this.right);\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setTop();\n    this.setBottom();\n    this.setLeft();\n    this.setRight();\n  }\n\n  private handleClose = () => {\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\">\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            <button class=\"close desktop\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n            </button>\n            <slot></slot>\n            {/* Mobile button */}\n            <button class=\"close mobile\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n              <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n                Fechar\n              </cura-paragraph>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-modal.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO5F,MAAM,OAAO,SAAS;;QAsGZ,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC;oBApGuD,KAAK;0BAKtB,OAAO;mBAKxB,CAAC;sBAKE,CAAC;oBAKH,CAAC;qBAKA,CAAC;gCAK0B,QAAQ;sBAKlB,KAAK;sBAM7B,EAAE;;IAGpB,SAAS;QACP,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;YAChE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC;SACnE,CAAC;QAEF,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,GACvD,CAAC;IACJ,CAAC;IAED,SAAS,CAAC,IAAY,EAAE,KAAa;QACnC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,CAAC,KAAK,IAAI,SAAS,CAAC,EAAE,GAAG,KAAK,IAAI,GACnC,CAAC;IACJ,CAAC;IAGD,MAAM;QACJ,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAClC,CAAC;IAGD,SAAS;QACP,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAGD,OAAO;QACL,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAGD,QAAQ;QACN,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D,CAAC;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE;YACtE,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBACpF,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAQ;gBACnG,4DAAK,KAAK,EAAC,SAAS;oBAElB,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;wBACrD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAa,CAC7D;oBACT,8DAAa;oBAEb,+DAAQ,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;wBACpD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAa;wBACjE,uEAAgB,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,IAC5D,IAAI,CAAC,gBAAgB,CACP,CACV,CACL,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property top to control modal top position.\n   * Default: 0px\n   */\n  @Prop() top?: number = 0;\n  /**\n   * Property bottom to control modal bottom position.\n   * Default: 0px\n   */\n  @Prop() bottom?: number = 0;\n  /**\n   * Property left to control modal left position.\n   * Default: 0px\n   */\n  @Prop() left?: number = 0;\n  /**\n   * Property right to control modal right position.\n   * Default: 0px\n   */\n  @Prop() right?: number = 0;\n  /**\n   * Defines the label for the close button when the modal is viewed on mobile.\n   * Default: Fechar\n   */\n  @Prop({ reflect: true }) mobileCloseLabel: string = 'Fechar';\n  /**\n   * Property zindex to control the z-index value of the component.\n   * Default: 100\n   */\n  @Prop({ reflect: true }) zindex: string = '100';\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  setOffset(name: string, value: number) {\n    this.styles = {\n      ...this.styles,\n      [`--${name}-offset`]: `${value}px`,\n    };\n  }\n\n  @Watch('top')\n  setTop() {\n    this.setOffset('top', this.top);\n  }\n\n  @Watch('bottom')\n  setBottom() {\n    this.setOffset('bottom', this.bottom);\n  }\n\n  @Watch('left')\n  setLeft() {\n    this.setOffset('left', this.left);\n  }\n\n  @Watch('right')\n  setRight() {\n    this.setOffset('right', this.right);\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setTop();\n    this.setBottom();\n    this.setLeft();\n    this.setRight();\n  }\n\n  private handleClose = () => {\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\" style={{ '--zIndex': this.zindex }}>\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            <button class=\"close desktop\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n            </button>\n            <slot></slot>\n            {/* Mobile button */}\n            <button class=\"close mobile\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n              <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n                {this.mobileCloseLabel}\n              </cura-paragraph>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-modal/cura-modal.stories.js

@@ -14,6 +14,8 @@ const renderCuraModal = (args) => `
   <div style="height: 500px">
     <cura-modal
       open="${args.open}"
+      mobile-close-label="${args.mobileCloseLabel}"
+      zindex="${args.zindex}"
       background="${args.background}"
       top="${args.top}"
       bottom="${args.bottom}"
@@ -56,6 +58,20 @@ export default {
                 category: 'Properties',
             },
         },
+        mobileCloseLabel: {
+            control: { type: 'text' },
+            description: 'Label utilizada no botão de fechar no mobile.',
+            table: {
+                category: 'Properties',
+            },
+        },
+        zindex: {
+            control: { type: 'text' },
+            description: 'Define um valor para o z-index.',
+            table: {
+                category: 'Properties',
+            },
+        },
         top: {
             control: { type: 'number' },
             description: 'Define o deslocamento superior do modal.',
@@ -116,6 +132,8 @@ export const CuraModal = {
         bottom: 0,
         left: 0,
         right: 0,
+        mobileCloseLabel: 'Fechar',
+        zindex: '100',
     },
 };
 //# sourceMappingURL=cura-modal.stories.js.map

package/dist/collection/components/cura-modal/cura-modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-modal.stories.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC;;;cAGzB,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;aACtB,IAAI,CAAC,GAAG;gBACL,IAAI,CAAC,MAAM;cACb,IAAI,CAAC,IAAI;eACR,IAAI,CAAC,KAAK;;QAEjB,IAAI,CAAC,OAAO;;;CAGnB,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,GAAG,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,yCAAyC;YACtD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,WAAW,EAAE,4EAA4E;YACzF,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,OAAO;QACnB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE;;;;;;;;;WASF;QACP,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;KACT;CACF,CAAC","sourcesContent":["const renderCuraModal = (args: any) => `\n  <div style=\"height: 500px\">\n    <cura-modal\n      open=\"${args.open}\"\n      background=\"${args.background}\"\n      top=\"${args.top}\"\n      bottom=\"${args.bottom}\"\n      left=\"${args.left}\"\n      right=\"${args.right}\"\n    >\n      ${args.content}\n    </cura-modal>\n  </div>\n`;\n\nexport default {\n  title: 'Componentes/Feedback/Modal',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraModal(args);\n  },\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Define se o modal está aberto ou fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    background: {\n      control: { type: 'select' },\n      options: ['dark', 'light'],\n      description: 'Define a cor do background do modal.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' },\n      },\n    },\n    content: {\n      control: { type: 'text' },\n      description: 'Conteúdo do modal a ser exibido.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    top: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento superior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    bottom: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento inferior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    left: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento esquerdo do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    right: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento direito do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    close: {\n      action: 'close',\n      description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n      name: 'modalClose',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n};\n\nexport const CuraModal = {\n  args: {\n    background: 'light',\n    open: true,\n    content: `<div style=\"display:flex;\n      justify-content: center;\n      align-items: center;\n      align-self: stretch;\n      background-color:rgba(187, 107, 217, 0.4);\n      text-align: center;\n      height: 30px;\n      color: #9b51e0;\">\n      content area\n    </div>`,\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n};\n"]}
+{"version":3,"file":"cura-modal.stories.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraModal = (args: any) => `\n  <div style=\"height: 500px\">\n    <cura-modal\n      open=\"${args.open}\"\n      mobile-close-label=\"${args.mobileCloseLabel}\"\n      zindex=\"${args.zindex}\"\n      background=\"${args.background}\"\n      top=\"${args.top}\"\n      bottom=\"${args.bottom}\"\n      left=\"${args.left}\"\n      right=\"${args.right}\"\n    >\n      ${args.content}\n    </cura-modal>\n  </div>\n`;\n\nexport default {\n  title: 'Componentes/Feedback/Modal',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraModal(args);\n  },\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Define se o modal está aberto ou fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    background: {\n      control: { type: 'select' },\n      options: ['dark', 'light'],\n      description: 'Define a cor do background do modal.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' },\n      },\n    },\n    content: {\n      control: { type: 'text' },\n      description: 'Conteúdo do modal a ser exibido.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    mobileCloseLabel: {\n      control: { type: 'text' },\n      description: 'Label utilizada no botão de fechar no mobile.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    zindex: {\n      control: { type: 'text' },\n      description: 'Define um valor para o z-index.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    top: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento superior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    bottom: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento inferior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    left: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento esquerdo do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    right: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento direito do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    close: {\n      action: 'close',\n      description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n      name: 'modalClose',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n};\n\nexport const CuraModal = {\n  args: {\n    background: 'light',\n    open: true,\n    content: `<div style=\"display:flex;\n      justify-content: center;\n      align-items: center;\n      align-self: stretch;\n      background-color:rgba(187, 107, 217, 0.4);\n      text-align: center;\n      height: 30px;\n      color: #9b51e0;\">\n      content area\n    </div>`,\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    mobileCloseLabel: 'Fechar',\n    zindex: '100',\n  },\n};\n"]}

package/dist/collection/components/cura-page-template/cura-page-template.js

@@ -14,7 +14,7 @@ export class CuraPageTemplate {
         return classes;
     }
     render() {
-        return (h(Host, { key: '1e08a43c7701b7063cb652f6e040d3d5f5eb09a4' }, h("div", { key: '8aed196bdd1e4385a5cd397d531f32d5d6a34e45', style: this.styles, class: "grid-template" }, h("div", { key: '92bb8cc24ddc2a6c7cb81cca6326e3aae62fe9fb', id: "sub-header" }, h("slot", { key: 'af2542eb9aae107bb96009e1dbf234099e3fee06', name: 'sub-header' })), h("div", { key: '11ccbfe4b8f226d5f312b9db81cb10bf7aff6058', id: "header" }, h("slot", { key: 'f4cf6ce66934479b421841c0d85341ad771f8801', name: 'header' })), h("div", { key: 'b0af61b6a26cffbae8722a265bbf695984aeb192', id: "pre-content" }, h("slot", { key: '1c6e615377935f2d8bcdc0106a7f8ef46a4096c8', name: 'pre-content' })), h("div", { key: '7c9600de42ea9338571f59c7dfa07e8d83d907f3', id: "content-container", class: this.getClasses() }, h("div", { key: '8e9c4100038b1a7add298292b039098a66936fc3', id: "sidebar-left" }, h("slot", { key: '266eface0f8eb826fce97ec1c6eb8a5f2a983256', name: 'sidebar-left' })), h("div", { key: 'da2e6b2a9d72cb80f5f340e877388ce82e285d97', id: "content" }, h("slot", { key: '8e1fb56cad2e3b693fb40c87bc8b8813ac1c5cec', name: "content" }), h("slot", { key: '7fcfa41e62fbb3eb03e6350d2242119cea4a7172' })), h("div", { key: '561cdd39b2327375fbfab17b7d9ba61d3c8641e1', id: "sidebar-right" }, h("slot", { key: 'abb1a3c4b46a4e576f9720582e41237f323baedb', name: 'sidebar-right' }))), h("div", { key: '273e8172b1084ef92d125ec3c524bd0a357e740a', id: "post-body" }, h("slot", { key: '9c0ba47959028dd86b5d83fe9050e4cbd51b09f0', name: 'post-body' })), h("div", { key: 'ec53311edaed349b82cf37be5957d9a07e1e25d3', id: "footer" }, h("slot", { key: '16d56243b257ba7b3b6919c5fcd4b482d646b925', name: 'footer' })), h("div", { key: 'ed81fc5a890b564a6b437f61122259b6ea5a94f2', id: "sub-footer" }, h("slot", { key: '88c1d8297bd16ac01f7f5e81803cee6d1b13aa41', name: 'sub-footer' })))));
+        return (h(Host, { key: '9f26fb8ceb8b22ed9223bd215c07b6a19f6d78f1' }, h("div", { key: '38541ca9be4feecb9911c96cc954ba7501dc9b5e', style: this.styles, class: "grid-template" }, h("div", { key: 'daf436a589d75bb270f4b16230d1db1d7365c47e', id: "sub-header" }, h("slot", { key: '547c858a5913c600c1b745f400319d207a04c7ce', name: 'sub-header' })), h("div", { key: 'ba69ae91e87af01a8001a347f6de7d8ba7088619', id: "header" }, h("slot", { key: '6f72885d42d005f234942f2cbf8eefd98f4d0241', name: 'header' })), h("div", { key: 'd21dbb37e236b1b22e886a036a37fb2e65e538f3', id: "pre-content" }, h("slot", { key: '31b14b314d1ee2672f15883ea4bcc3c542520558', name: 'pre-content' })), h("div", { key: 'a1297f482f15b4947043401b25e2c4ecbedd31fd', id: "content-container", class: this.getClasses() }, h("div", { key: '9c0c466a46c5fc81c64663dd0aff4e073cc6cb72', id: "sidebar-left" }, h("slot", { key: '10364527d218b1c05064095a5a69a411cb23322a', name: 'sidebar-left' })), h("div", { key: '23029f84833a0959f43f30b4dcc5d8bc08a0bf05', id: "content" }, h("slot", { key: '8dbcf34f4808d0983df99c77b52f927b8f1a69d7', name: "content" }), h("slot", { key: '6a235586dfb316c6449d531a566940d8de4e4a40' })), h("div", { key: 'b88f94db774c17aaa312ca55c9e67d611cabace3', id: "sidebar-right" }, h("slot", { key: '5efbbf777d7acb28e91f4dace10558926dafef60', name: 'sidebar-right' }))), h("div", { key: 'f40b983f2266e565faba96e8906cd69073b6598c', id: "post-body" }, h("slot", { key: 'd0f047c73b5b777f1eb9d61191bf172473c100cf', name: 'post-body' })), h("div", { key: 'b54482672a8017036b060203b5426bb2897c75fa', id: "footer" }, h("slot", { key: '4c65d471dcd2dfabc32e163cb9575f3d05fb2cda', name: 'footer' })), h("div", { key: '24c5d5a19e6d3fb943a1e99a7dfcfe9ad7cbb283', id: "sub-footer" }, h("slot", { key: '6f595500cac9906db6902685f172feaa7ee9e711', name: 'sub-footer' })))));
     }
     static get is() { return "cura-page-template"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+.progress-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.progress-bar span {
+  position: absolute;
+  display: flex;
+}

package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.js

@@ -0,0 +1,121 @@
+import { Host, h } from "@stencil/core";
+export class CuraProgressBar {
+    constructor() {
+        this.progressColor = undefined;
+        this.progress = undefined;
+        this.size = 40;
+        this.strokeWidth = 3.25;
+        this.active = undefined;
+    }
+    render() {
+        const radius = (this.size - this.strokeWidth) / 2;
+        const circumference = radius * Math.PI * 2;
+        const dash = (this.progress * circumference) / 100;
+        const viewBox = `0 0 ${this.size} ${this.size}`;
+        return (h(Host, { key: 'e0da7ede087161c67c9dd0371d15030dd5107a19' }, h("div", { key: 'ebe68fb426b46e94b7d03ded4e8aaed852337f30', class: "progress-bar" }, h("svg", { key: 'ace46878d45bfbe51dae29c3020d74f43c2f5147', width: this.size, height: this.size, viewBox: viewBox }, h("circle", { key: 'dbbde61a95a7f13dc14a72fe538da43953852d7b', fill: "none", stroke: "#ccc", cx: this.size / 2, cy: this.size / 2, r: radius, "stroke-width": `${this.strokeWidth}px` }), this.active && (h("circle", { key: '272c197451a47c73cfa91d7f7578a50b26958732', fill: "none", stroke: this.progressColor, cx: this.size / 2, cy: this.size / 2, r: radius, "stroke-width": `${this.strokeWidth}px`, transform: `rotate(-90 ${this.size / 2} ${this.size / 2})`, "stroke-dasharray": `${dash}px ${circumference - dash}px`, "stroke-linecap": "round", style: { transition: 'all 0.5s' } }))), h("span", { key: 'a80f024e09fb54218fe97039459472855226c063' }, h("slot", { key: '5683f5edd5b54bd852fc1036b284656bfda066c4' })))));
+    }
+    static get is() { return "cura-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-progress-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "progressColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the progress bar"
+                },
+                "attribute": "progress-color",
+                "reflect": true
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the percentage of progress"
+                },
+                "attribute": "progress",
+                "reflect": true
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the size of the progress bar"
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "40"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the width of the stroke (outline) of the progress circle"
+                },
+                "attribute": "stroke-width",
+                "reflect": true,
+                "defaultValue": "3.25"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines whether the progress bar is active"
+                },
+                "attribute": "active",
+                "reflect": true
+            }
+        };
+    }
+}
+//# sourceMappingURL=cura-progress-bar.js.map

package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-progress-bar.js","sourceRoot":"","sources":["../../../../src/components/cura-stepper/cura-progress-bar/cura-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,eAAe;;;;oBAcc,EAAE;2BAKK,IAAI;;;IAOnD,MAAM;QACJ,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,GAAG,GAAG,CAAC;QAEnD,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QAEhD,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,cAAc;gBACvB,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO;oBACxD,+DAAQ,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,kBAAgB,GAAG,IAAI,CAAC,WAAW,IAAI,GAAI;oBAC3H,IAAI,CAAC,MAAM,IAAI,CACd,+DACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,CAAC,EAAE,MAAM,kBACK,GAAG,IAAI,CAAC,WAAW,IAAI,EACrC,SAAS,EAAE,cAAc,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,sBACxC,GAAG,IAAI,MAAM,aAAa,GAAG,IAAI,IAAI,oBACxC,OAAO,EACtB,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,GACjC,CACH,CACG;gBACN;oBACE,8DAAa,CACR,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-progress-bar',\n  styleUrl: 'cura-progress-bar.scss',\n  shadow: true,\n})\nexport class CuraProgressBar {\n  /**\n   *  Defines the color of the progress bar\n   */\n  @Prop({ reflect: true }) progressColor: string;\n\n  /**\n   *  Defines the percentage of progress\n   */\n  @Prop({ reflect: true }) progress: number;\n\n  /**\n   *  Defines the size of the progress bar\n   */\n  @Prop({ reflect: true }) size: number = 40;\n\n  /**\n   *  Defines the width of the stroke (outline) of the progress circle\n   */\n  @Prop({ reflect: true }) strokeWidth: number = 3.25;\n\n  /**\n   *  Defines whether the progress bar is active\n   */\n  @Prop({ reflect: true }) active: boolean;\n\n  render() {\n    const radius = (this.size - this.strokeWidth) / 2;\n    const circumference = radius * Math.PI * 2;\n    const dash = (this.progress * circumference) / 100;\n\n    const viewBox = `0 0 ${this.size} ${this.size}`;\n\n    return (\n      <Host>\n        <div class=\"progress-bar\">\n          <svg width={this.size} height={this.size} viewBox={viewBox}>\n            <circle fill=\"none\" stroke=\"#ccc\" cx={this.size / 2} cy={this.size / 2} r={radius} stroke-width={`${this.strokeWidth}px`} />\n            {this.active && (\n              <circle\n                fill=\"none\"\n                stroke={this.progressColor}\n                cx={this.size / 2}\n                cy={this.size / 2}\n                r={radius}\n                stroke-width={`${this.strokeWidth}px`}\n                transform={`rotate(-90 ${this.size / 2} ${this.size / 2})`}\n                stroke-dasharray={`${dash}px ${circumference - dash}px`}\n                stroke-linecap=\"round\"\n                style={{ transition: 'all 0.5s' }}\n              />\n            )}\n          </svg>\n          <span>\n            <slot></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.css

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+.item-container {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}

package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js

@@ -0,0 +1,153 @@
+import { Host, h } from "@stencil/core";
+export class CuraStepperItem {
+    constructor() {
+        this.statusMap = {
+            active: {
+                badgeColor: 'info',
+                textColor: 'info-dark',
+                icon: '',
+                iconOnly: false,
+            },
+            stop: {
+                badgeColor: 'error',
+                textColor: 'error-darker',
+                icon: 'alertCircle',
+                iconOnly: true,
+            },
+            done: {
+                badgeColor: 'success',
+                textColor: 'success-darker',
+                icon: 'checkCircle',
+                iconOnly: true,
+            },
+            default: {
+                badgeColor: 'neutral',
+                textColor: 'neutral',
+                icon: '',
+                iconOnly: false,
+            },
+        };
+        this.displayHeading = false;
+        this.heading = undefined;
+        this.label = undefined;
+        this.status = 'default';
+        this.styles = {};
+    }
+    connectedCallback() {
+        this.updateStyles();
+    }
+    getStatusProperties() {
+        return this.statusMap[this.status] || this.statusMap.default;
+    }
+    updateStyles() {
+        const { fonts, colors, spacing } = window.CuraAPI.theme;
+        const weights = fonts.getWeights();
+        this.styles = {
+            '--base-spacing': spacing.getSpacing(),
+            '--neutral-purewhite': colors.getColor('neutral-purewhite'),
+            '--neutral-lighter': colors.getColor('neutral-lighter'),
+            '--neutral-base': colors.getColor('neutral-base'),
+            '--font-size': fonts.getSize(),
+            '--font-color': fonts.getColor(),
+            '--font-family': fonts.getFamily(),
+            '--font-weight-regular': weights.regular,
+        };
+    }
+    render() {
+        const { badgeColor, textColor, icon, iconOnly } = this.getStatusProperties();
+        return (h(Host, { key: 'c226daf451d9c861d5303474ef0fc31c1602371b' }, h("div", { key: '7aece988946e4bef02c597a80ea1a505c201e188', class: "item-container", style: this.styles }, h("cura-badge-pill", { key: 'd0362b4a4ee3c047173399ea5f7c912a5a0f7810', type: "solid", color: badgeColor, "icon-name": icon, "icon-only": iconOnly, "border-radius": "50%" }, this.label), this.displayHeading && this.heading && (h("cura-paragraph", { key: '015effecdb26be22386363e77bd5a0e671701d60', marginBlock: "0", size: "xsmall", color: textColor }, this.heading)))));
+    }
+    static get is() { return "cura-stepper-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-stepper-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-stepper-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "displayHeading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the step title is displayed (default: false)"
+                },
+                "attribute": "display-heading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the step (displayed if `displayHeading` is true)"
+                },
+                "attribute": "heading",
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label displayed inside the badge"
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'done' | 'stop' | 'active' | 'default'",
+                    "resolved": "\"active\" | \"default\" | \"done\" | \"stop\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current status of the step\nCan be:\n   - 'done' for completed steps\n   - 'stop' for failed steps\n   - 'active' for the current active step\n   - 'default' for steps that are neither done, active nor stopped."
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=cura-stepper-item.js.map

package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-stepper-item.js","sourceRoot":"","sources":["../../../../src/components/cura-stepper/cura-stepper-item/cura-stepper-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,eAAe;;QAkC1B,cAAS,GAAG;YACV,MAAM,EAAE;gBACN,UAAU,EAAE,MAAM;gBAClB,SAAS,EAAE,WAAW;gBACtB,IAAI,EAAE,EAAE;gBACR,QAAQ,EAAE,KAAK;aAChB;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,OAAO;gBACnB,SAAS,EAAE,cAAc;gBACzB,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;aACf;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,SAAS;gBACrB,SAAS,EAAE,gBAAgB;gBAC3B,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;aACf;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;gBACrB,SAAS,EAAE,SAAS;gBACpB,IAAI,EAAE,EAAE;gBACR,QAAQ,EAAE,KAAK;aAChB;SACF,CAAC;8BAvDiD,KAAK;;;sBAoBkB,SAAS;sBAEjE,EAAE;;IAIpB,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IA6BD,mBAAmB;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;IAC/D,CAAC;IAED,YAAY;QACV,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QACxD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;QAEnC,IAAI,CAAC,MAAM,GAAG;YACZ,gBAAgB,EAAE,OAAO,CAAC,UAAU,EAAE;YACtC,qBAAqB,EAAE,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC;YAC3D,mBAAmB,EAAE,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAC;YACvD,gBAAgB,EAAE,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YACjD,aAAa,EAAE,KAAK,CAAC,OAAO,EAAE;YAC9B,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE;YAChC,eAAe,EAAE,KAAK,CAAC,SAAS,EAAE;YAClC,uBAAuB,EAAE,OAAO,CAAC,OAAO;SACzC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM;gBAC5C,wEACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAuG,eACnG,IAAI,eACJ,QAAQ,mBACL,KAAK,IAElB,IAAI,CAAC,KAAK,CACK;gBACjB,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,IAAI,CACtC,uEAAgB,WAAW,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,SAAS,IAC3D,IAAI,CAAC,OAAO,CACE,CAClB,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-stepper-item',\n  styleUrl: 'cura-stepper-item.scss',\n  shadow: true,\n})\nexport class CuraStepperItem {\n  /**\n   *  Determines if the step title is displayed (default: false)\n   */\n  @Prop({ reflect: true }) displayHeading: boolean = false;\n\n  /**\n   * The title of the step (displayed if `displayHeading` is true)\n   */\n  @Prop({ reflect: true }) heading: string;\n\n  /**\n   *  The label displayed inside the badge\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * The current status of the step\n   * Can be:\n   *    - 'done' for completed steps\n   *    - 'stop' for failed steps\n   *    - 'active' for the current active step\n   *    - 'default' for steps that are neither done, active nor stopped.\n   */\n  @Prop({ reflect: true }) status: 'done' | 'stop' | 'active' | 'default' = 'default';\n\n  @State() styles = {};\n\n  @Element() hostElement: HTMLElement;\n\n  connectedCallback() {\n    this.updateStyles();\n  }\n\n  statusMap = {\n    active: {\n      badgeColor: 'info',\n      textColor: 'info-dark',\n      icon: '',\n      iconOnly: false,\n    },\n    stop: {\n      badgeColor: 'error',\n      textColor: 'error-darker',\n      icon: 'alertCircle',\n      iconOnly: true,\n    },\n    done: {\n      badgeColor: 'success',\n      textColor: 'success-darker',\n      icon: 'checkCircle',\n      iconOnly: true,\n    },\n    default: {\n      badgeColor: 'neutral',\n      textColor: 'neutral',\n      icon: '',\n      iconOnly: false,\n    },\n  };\n\n  getStatusProperties() {\n    return this.statusMap[this.status] || this.statusMap.default;\n  }\n\n  updateStyles() {\n    const { fonts, colors, spacing } = window.CuraAPI.theme;\n    const weights = fonts.getWeights();\n\n    this.styles = {\n      '--base-spacing': spacing.getSpacing(),\n      '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n      '--neutral-lighter': colors.getColor('neutral-lighter'),\n      '--neutral-base': colors.getColor('neutral-base'),\n      '--font-size': fonts.getSize(),\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-weight-regular': weights.regular,\n    };\n  }\n\n  render() {\n    const { badgeColor, textColor, icon, iconOnly } = this.getStatusProperties();\n    return (\n      <Host>\n        <div class=\"item-container\" style={this.styles}>\n          <cura-badge-pill\n            type=\"solid\"\n            color={badgeColor as 'info' | 'error' | 'success' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'warning'}\n            icon-name={icon}\n            icon-only={iconOnly}\n            border-radius=\"50%\"\n          >\n            {this.label}\n          </cura-badge-pill>\n          {this.displayHeading && this.heading && (\n            <cura-paragraph marginBlock=\"0\" size=\"xsmall\" color={textColor}>\n              {this.heading}\n            </cura-paragraph>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}