@rededor/cura 1.4.0 → 1.5.0-alpha.0

package/dist/components/cura-select-option2.js

@@ -42,7 +42,7 @@ const CuraSelectOption = /*@__PURE__*/ proxyCustomElement(class CuraSelectOption
         };
     }
     render() {
-        return (h(Host, { key: 'cf0489e6e396d60d4a4f71e306727ac12b3fbb7a', slot: "option" }, h("div", { key: 'e970f361bff2c54e0324e43a612d3fa45a83b2bd', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '7bbcc39a51c2c9e14f233c94ea2dcf20543e11eb', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: 'f5a54eaf4e2ef19239ca185b39897f98d11f05c7' })), this.selected && h("cura-icon", { key: '8a1560793da12ec6f5d3e9dc2db7e242a440267c', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (h(Host, { key: '52804251a1d97d2288a0db65db60c53f32151ff2', slot: "option" }, h("div", { key: '3203a910590d8a920109c995f9f60a5f8a01f58b', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'be6b3a56e7665ea059c0859f97a1b7884d8605f9', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '5077a345d3524e0c14c33573f1a650b4c1aeb9ff' })), this.selected && h("cura-icon", { key: '4c76229249ef35319d92d1c05321c79ea93790b3', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-select2.js

@@ -276,13 +276,13 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
         return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
     }
     render() {
-        return (h(Host, { key: 'cb2962534d4f39e83739c14396bf7ada6389f4e2', style: this.styles }, h("div", { key: '2b09c26a8f5e1dd8f11b8624c4fbc4d840cdb9fd', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'c6585f4b4024a42ce4e105acec9f1710b7c0eb71', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '4dcc4a50529b1521b43a7e8bbeee62d0bbc12dc7', class: 'required' }, "* "))), h("div", { key: '189da945bff9d9e946ef5b46d2a021b29b508214', class: {
+        return (h(Host, { key: '80cc2b0b4aa2ea8421cf2bee808b1c1d18dfd805', style: this.styles }, h("div", { key: '93d8b6c8a1c10d0ed7382349cad19713a5f9e27c', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'a7a60586c38e2f0fd746bf4b0d5b161fb506ba14', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '57903ed08819a70cd02267cccfb419fb47f3ef42', class: 'required' }, "* "))), h("div", { key: '252158e79c221c977b0015de743aa3df8843aa4b', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: '13cc7d03a4770819a84239ab934f7a73f10434db', 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("cura-icon", { key: 'c0ccb27b7de0849b0e960e69ef472463a4b9d02b', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: '5b093234b507fe6a2c350e9bee5e9a24eba2e5d6', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'c051fa93257f3d68945fa15edd2ab10e9ca75087' })), this.isOpen && (h("div", { key: '8a20447dee35780853e3560c86975ead069e9369', class: {
+            } }, this.renderIcon(), h("input", { key: 'b27fb9017445068047eef3b58bfbf9d365d1e5fb', 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("cura-icon", { key: 'a90e58a4e11de658595208dfd9a2797e1adca140', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: '70ed24f2b6657b41d5afc914c0ae9a9293e941ba', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'd3f8934cd5a8ad0af564559925d2e5d8cfc356f6' })), this.isOpen && (h("div", { key: 'abd2100c9a4c63c1456d19eee808c43ca0b647f2', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, h("slot", { key: 'dff5e6b54842ed9a6e458414977080069a0c4b5c', name: 'option' }))))));
+            } }, h("slot", { key: 'c6c4129a91e3e5c71897e96a07533754333c4ee6', name: 'option' }))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/cura-stepper-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraStepperItem extends Components.CuraStepperItem, HTMLElement {}
+export const CuraStepperItem: {
+    prototype: CuraStepperItem;
+    new (): CuraStepperItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { C as CuraStepperItem$1, d as defineCustomElement$1 } from './cura-stepper-item2.js';
+
+const CuraStepperItem = CuraStepperItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraStepperItem, defineCustomElement };
+
+//# sourceMappingURL=cura-stepper-item.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-stepper-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/cura-stepper-item2.js

@@ -0,0 +1,116 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './cura-badge-pill2.js';
+import { d as defineCustomElement$3 } from './cura-icon2.js';
+import { d as defineCustomElement$2 } from './cura-label2.js';
+import { d as defineCustomElement$1 } from './cura-paragraph2.js';
+
+const curaStepperItemCss = ":host{display:block;box-sizing:border-box}.item-container{display:flex;gap:4px;align-items:center}";
+const CuraStepperItemStyle0 = curaStepperItemCss;
+
+const CuraStepperItem = /*@__PURE__*/ proxyCustomElement(class CuraStepperItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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)))));
+    }
+    get hostElement() { return this; }
+    static get style() { return CuraStepperItemStyle0; }
+}, [1, "cura-stepper-item", {
+        "displayHeading": [516, "display-heading"],
+        "heading": [513],
+        "label": [513],
+        "status": [513],
+        "styles": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-stepper-item", "cura-badge-pill", "cura-icon", "cura-label", "cura-paragraph"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-stepper-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraStepperItem);
+            }
+            break;
+        case "cura-badge-pill":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "cura-paragraph":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { CuraStepperItem as C, defineCustomElement as d };
+
+//# sourceMappingURL=cura-stepper-item2.js.map

package/dist/components/cura-stepper-item2.js.map

@@ -0,0 +1 @@
+{"file":"cura-stepper-item2.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,oGAAoG,CAAC;AAChI,8BAAe,kBAAkB;;MCMpB,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;KACrB;IA6BD,mBAAmB;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;KAC9D;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;KACH;IAED,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7E,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAC5C,wEACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAuG,eACnG,IAAI,eACJ,QAAQ,mBACL,KAAK,IAElB,IAAI,CAAC,KAAK,CACK,EACjB,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,KAClC,uEAAgB,WAAW,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,SAAS,IAC3D,IAAI,CAAC,OAAO,CACE,CAClB,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/cura-stepper/cura-stepper-item/cura-stepper-item.scss?tag=cura-stepper-item&encapsulation=shadow","src/components/cura-stepper/cura-stepper-item/cura-stepper-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n\n.item-container{\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n","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"],"version":3}

package/dist/components/cura-stepper.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraStepper extends Components.CuraStepper, HTMLElement {}
+export const CuraStepper: {
+    prototype: CuraStepper;
+    new (): CuraStepper;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-stepper.js

@@ -0,0 +1,187 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './cura-badge-pill2.js';
+import { d as defineCustomElement$7 } from './cura-heading2.js';
+import { d as defineCustomElement$6 } from './cura-icon2.js';
+import { d as defineCustomElement$5 } from './cura-label2.js';
+import { d as defineCustomElement$4 } from './cura-paragraph2.js';
+import { d as defineCustomElement$3 } from './cura-progress-bar2.js';
+import { d as defineCustomElement$2 } from './cura-stepper-item2.js';
+
+const curaStepperCss = ":host{display:block;box-sizing:border-box;width:100%}cura-heading{--margin-block:0 !important}.container{display:flex}.compact{display:flex;padding:0px;justify-content:space-between;align-items:center}.compact .heading{text-align:right}.stepper-list{gap:4px;display:flex;flex-shrink:0;align-items:center;padding:0;flex:1;width:100%;justify-content:space-between}.step{display:flex;align-items:center;flex-direction:row;flex:1;gap:4px}.step .wrapper{flex:1;position:relative}.step .divider{background-color:var(--neutral-light);height:2px;flex:1;transition:all 1s}.step .animation{position:absolute;top:0;left:0;right:0;width:var(--progress-width)}.step .done{background-color:var(--success-light)}.step .stop{background-color:var(--error-light)}.step .active{background-color:var(--info-light)}.last{flex:0}";
+const CuraStepperStyle0 = curaStepperCss;
+
+const CuraStepper$1 = /*@__PURE__*/ proxyCustomElement(class CuraStepper extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.activeStepIndex = undefined;
+        this.errorInCurrentStep = false;
+        this.displayHeading = false;
+        this.variant = 'default';
+        this.steps = [];
+        this.styles = {};
+        this.stepList = [];
+    }
+    connectedCallback() {
+        this.initializeSteps();
+        const { fonts, colors, spacing } = window.CuraAPI.theme;
+        const weights = fonts.getWeights();
+        this.styles = this.generateStyles(colors, fonts, spacing, weights);
+    }
+    generateStyles(colors, fonts, spacing, weights) {
+        return {
+            '--base-spacing': spacing.getSpacing(),
+            '--neutral-purewhite': colors.getColor('neutral-purewhite'),
+            '--neutral-lighter': colors.getColor('neutral-lighter'),
+            '--neutral-base': colors.getColor('neutral-base'),
+            '--neutral-light': colors.getColor('neutral-light'),
+            '--success-light': colors.getColor('success-light'),
+            '--info-light': colors.getColor('info-light'),
+            '--error-light': colors.getColor('error-light'),
+            '--font-size': fonts.getSize(),
+            '--font-color': fonts.getColor(),
+            '--font-family': fonts.getFamily(),
+            '--font-weight-regular': weights.regular,
+        };
+    }
+    initializeSteps() {
+        if (typeof this.steps === 'string') {
+            this.stepList = JSON.parse(this.steps || '[]');
+        }
+        else {
+            this.stepList = this.steps;
+        }
+    }
+    getStepStatus(step) {
+        if (this.activeStepIndex === step && this.errorInCurrentStep)
+            return 'stop';
+        if (this.activeStepIndex === step && this.stepList.length !== step)
+            return 'active';
+        if (this.activeStepIndex >= step)
+            return 'done';
+        return 'default';
+    }
+    getProgressStyles() {
+        const progressStyles = {
+            default: {
+                progressColor: 'var(--info-light)',
+                activeStepTextColor: 'info-darker',
+                nextStepTextColor: 'info-dark',
+            },
+            firstStep: {
+                progressColor: 'var(--info-light)',
+                activeStepTextColor: 'neutral-dark',
+                nextStepTextColor: 'neutral-medium',
+            },
+            completed: {
+                progressColor: 'var(--success-light)',
+                activeStepTextColor: 'success-darker',
+                nextStepTextColor: 'success-dark',
+            },
+            error: {
+                progressColor: 'var(--error-light)',
+                activeStepTextColor: 'error-darker',
+                nextStepTextColor: 'error-dark',
+            },
+        };
+        if (this.errorInCurrentStep) {
+            return progressStyles.error;
+        }
+        if (this.activeStepIndex === 0) {
+            return progressStyles.firstStep;
+        }
+        if (this.activeStepIndex === this.stepList.length) {
+            return progressStyles.completed;
+        }
+        return progressStyles.default;
+    }
+    renderCompactStepper() {
+        var _a;
+        const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;
+        const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : (_a = this.stepList[this.activeStepIndex]) === null || _a === void 0 ? void 0 : _a.title;
+        const completed = this.activeStepIndex === this.stepList.length;
+        const inProgress = !(completed || this.errorInCurrentStep);
+        const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();
+        // Representa a porcentagem de progresso (step atual / quantidade de steps;)
+        const progress = (this.activeStepIndex * 100) / this.stepList.length;
+        return (h("div", { class: "container compact", style: this.styles }, h("cura-progress-bar", { progress: progress, progressColor: progressColor, active: this.activeStepIndex !== 0 }, !inProgress ? (h("cura-icon", { name: this.errorInCurrentStep ? 'alertCircle' : 'checkCircle', color: this.errorInCurrentStep ? 'error-dark' : 'success-dark', size: "16" })) : (h("cura-heading", { color: "neutral-dark", size: "xsmall" }, this.activeStepIndex, "/", this.stepList.length))), this.displayHeading && (h("div", { class: "heading" }, h("cura-heading", { size: "small", weight: "bold", color: activeStepTextColor }, title), !completed && (h("cura-heading", { size: "xsmall", weight: "regular", color: nextStepTextColor }, "Pr\u00F3ximo: ", subtitle))))));
+    }
+    renderStep(step, stepIndex) {
+        const stepStatus = this.getStepStatus(stepIndex + 1);
+        const lastStep = stepIndex === this.stepList.length - 1;
+        const progressWidth = stepStatus !== 'default' ? '100%' : '0';
+        return (h("div", { class: `step ${lastStep ? 'last' : ''}`, key: step.title }, h("cura-stepper-item", { heading: step.title, label: step.label, displayHeading: this.displayHeading, status: stepStatus }), stepIndex < this.stepList.length - 1 && (h("div", { class: "wrapper" }, h("div", { class: "divider" }), h("div", { class: `divider ${stepStatus} animation`, style: { '--progress-width': progressWidth } })))));
+    }
+    renderStepper() {
+        return (h("div", { class: "container", style: this.styles }, h("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
+    }
+    render() {
+        return h(Host, { key: 'a3c23a43dc82cba74b777a7e28ae7de1632ec95d' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
+    }
+    get host() { return this; }
+    static get style() { return CuraStepperStyle0; }
+}, [1, "cura-stepper", {
+        "activeStepIndex": [514, "active-step-index"],
+        "errorInCurrentStep": [516, "error-in-current-step"],
+        "displayHeading": [516, "display-heading"],
+        "variant": [513],
+        "steps": [1],
+        "styles": [32],
+        "stepList": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-stepper", "cura-badge-pill", "cura-heading", "cura-icon", "cura-label", "cura-paragraph", "cura-progress-bar", "cura-stepper-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-stepper":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraStepper$1);
+            }
+            break;
+        case "cura-badge-pill":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "cura-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "cura-paragraph":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cura-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cura-stepper-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraStepper = CuraStepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraStepper, defineCustomElement };
+
+//# sourceMappingURL=cura-stepper.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-stepper.js","mappings":"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","names":["CuraStepper"],"sources":["src/components/cura-stepper/cura-stepper.scss?tag=cura-stepper&encapsulation=shadow","src/components/cura-stepper/cura-stepper.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n}\n\ncura-heading { \n  --margin-block: 0 !important;\n}\n\n.container {\n  display: flex;\n}\n\n.compact {\n  display: flex;\n  padding: 0px;\n  justify-content: space-between;\n  align-items: center;\n\n  .heading{\n    text-align: right;\n  }\n}\n\n.stepper-list {\n  gap: 4px;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding: 0;\n  flex: 1;\n  width: 100%;\n  justify-content: space-between;\n}\n\n.step{\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  flex: 1;\n  gap: 4px;\n\n  .wrapper {\n    flex: 1;\n    position: relative;\n  }\n\n  .divider{\n    background-color: var(--neutral-light);\n    height: 2px;\n    flex: 1;\n\n    transition: all 1s;\n  }\n\n  .animation {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: var(--progress-width);\n  }\n\n  .done{\n    background-color: var(--success-light);\n  }\n\n  .stop{\n    background-color: var(--error-light);\n  }\n\n  .active{\n    background-color: var(--info-light);\n  }\n}\n\n.last{\n  flex: 0;\n}\n","import { Component, Host, State, h, Element, Prop } from '@stencil/core';\nimport { Step } from './stepper.type';\n\n@Component({\n  tag: 'cura-stepper',\n  styleUrl: 'cura-stepper.scss',\n  shadow: true,\n})\nexport class CuraStepper {\n  /**\n   * The current active step index\n   */\n  @Prop({ reflect: true }) activeStepIndex: number;\n\n  /**\n   * Indicates if a step has encountered an error\n   * If `true`, the current step will be marked as 'stop'\n   */\n  @Prop({ reflect: true }) errorInCurrentStep: boolean = false;\n\n  /**\n   * Whether to display the title (default: false)\n   */\n  @Prop({ reflect: true }) displayHeading: boolean = false;\n\n  /**\n   * Allows you to set the appearance of the component (default: default)\n   */\n  @Prop({ reflect: true }) variant: 'compact' | 'default' = 'default';\n\n  /**\n   * List of steps in the stepper.\n   */\n  @Prop() steps: Step[] | string = [];\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  @State() styles = {};\n\n  /**\n   * Array of steps in the stepper.\n   *\n   * @type {Date[]}\n   * @default []\n   */\n  @State() stepList: Step[] = [];\n\n  connectedCallback() {\n    this.initializeSteps();\n\n    const { fonts, colors, spacing } = window.CuraAPI.theme;\n    const weights = fonts.getWeights();\n\n    this.styles = this.generateStyles(colors, fonts, spacing, weights);\n  }\n\n  generateStyles(colors, fonts, spacing, weights) {\n    return {\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      '--neutral-light': colors.getColor('neutral-light'),\n      '--success-light': colors.getColor('success-light'),\n      '--info-light': colors.getColor('info-light'),\n      '--error-light': colors.getColor('error-light'),\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  initializeSteps() {\n    if (typeof this.steps === 'string') {\n      this.stepList = JSON.parse(this.steps || '[]');\n    } else {\n      this.stepList = this.steps;\n    }\n  }\n\n  getStepStatus(step: number): 'done' | 'stop' | 'active' | 'default' {\n    if (this.activeStepIndex === step && this.errorInCurrentStep) return 'stop';\n    if (this.activeStepIndex === step && this.stepList.length !== step) return 'active';\n    if (this.activeStepIndex >= step) return 'done';\n\n    return 'default';\n  }\n\n  getProgressStyles() {\n    const progressStyles = {\n      default: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'info-darker',\n        nextStepTextColor: 'info-dark',\n      },\n      firstStep: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'neutral-dark',\n        nextStepTextColor: 'neutral-medium',\n      },\n      completed: {\n        progressColor: 'var(--success-light)',\n        activeStepTextColor: 'success-darker',\n        nextStepTextColor: 'success-dark',\n      },\n      error: {\n        progressColor: 'var(--error-light)',\n        activeStepTextColor: 'error-darker',\n        nextStepTextColor: 'error-dark',\n      },\n    };\n\n    if (this.errorInCurrentStep) {\n      return progressStyles.error;\n    }\n\n    if (this.activeStepIndex === 0) {\n      return progressStyles.firstStep;\n    }\n\n    if (this.activeStepIndex === this.stepList.length) {\n      return progressStyles.completed;\n    }\n\n    return progressStyles.default;\n  }\n\n  renderCompactStepper() {\n    const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;\n    const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : this.stepList[this.activeStepIndex]?.title;\n    const completed = this.activeStepIndex === this.stepList.length;\n    const inProgress = !(completed || this.errorInCurrentStep);\n    const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();\n\n    // Representa a porcentagem de progresso (step atual / quantidade de steps;)\n    const progress = (this.activeStepIndex * 100) / this.stepList.length;\n\n    return (\n      <div class=\"container compact\" style={this.styles}>\n        <cura-progress-bar progress={progress} progressColor={progressColor} active={this.activeStepIndex !== 0}>\n          {!inProgress ? (\n            <cura-icon name={this.errorInCurrentStep ? 'alertCircle' : 'checkCircle'} color={this.errorInCurrentStep ? 'error-dark' : 'success-dark'} size=\"16\"></cura-icon>\n          ) : (\n            <cura-heading color=\"neutral-dark\" size=\"xsmall\">\n              {this.activeStepIndex}/{this.stepList.length}\n            </cura-heading>\n          )}\n        </cura-progress-bar>\n        {this.displayHeading && (\n          <div class=\"heading\">\n            <cura-heading size=\"small\" weight=\"bold\" color={activeStepTextColor}>\n              {title}\n            </cura-heading>\n            {!completed && (\n              <cura-heading size=\"xsmall\" weight=\"regular\" color={nextStepTextColor}>\n                Próximo: {subtitle}\n              </cura-heading>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderStep(step: Step, stepIndex: number) {\n    const stepStatus = this.getStepStatus(stepIndex + 1);\n    const lastStep = stepIndex === this.stepList.length - 1;\n    const progressWidth = stepStatus !== 'default' ? '100%' : '0';\n\n    return (\n      <div class={`step ${lastStep ? 'last' : ''}`} key={step.title}>\n        <cura-stepper-item heading={step.title} label={step.label} displayHeading={this.displayHeading} status={stepStatus} />\n        {stepIndex < this.stepList.length - 1 && (\n          <div class=\"wrapper\">\n            <div class=\"divider\" />\n            <div class={`divider ${stepStatus} animation`} style={{ '--progress-width': progressWidth }} />\n          </div>\n        )}\n      </div>\n    );\n  }\n  renderStepper() {\n    return (\n      <div class=\"container\" style={this.styles}>\n        <div class=\"stepper-list\">{this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex))}</div>\n      </div>\n    );\n  }\n\n  render() {\n    return <Host>{this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper()}</Host>;\n  }\n}\n"],"version":3}

package/dist/components/cura-switch.js

@@ -102,7 +102,7 @@ const CuraSwitch$1 = /*@__PURE__*/ proxyCustomElement(class CuraSwitch extends H
         return classes;
     }
     render() {
-        return (h(Host, { key: 'd7aee391a4604acfae345b3645543c6b27efc033' }, h("div", { key: '446f921b82386fb0f9d8d8551f6128a2891cd27e', class: this.getClasses(), style: this.styles }, h("div", { key: 'a6528ac65f396a40ea92556183d047212b4c678f', class: "info" }, h("cura-label", { key: '0d404e3d0310c985b03cc29d4b9495331ce87c2a', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '833c04b96bf358b2991b618f4089e7ce31e96e30', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '3cb25210dbc16055660d612b78940e5b53cf6f96' }))), h("div", { key: 'db87f67c29558a05704a5baae728bfaa4db217d1', onClick: this.toggleSwitch, class: "control" }, h("div", { key: 'cdafeccd3cd11f5b7bfabf73ce8e2a3476febe99', class: `track ${this.size.toLowerCase()}` }, h("div", { key: 'da8ef012bcb02afe21d22b0e6145a129a9282f25', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: '46860420ccaabb21c57129a108db5f1ae9f6d9ce' }, h("div", { key: '4a9979890a90783a546d97f73c3562c22a72ad9e', class: this.getClasses(), style: this.styles }, h("div", { key: '77c09cbe03694ad36776073cd34d7d8f06c55b85', class: "info" }, h("cura-label", { key: '34fb44a104954c8540bc2f4a87a3efd8f1db789f', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '5af93372fafedc89f32f393a45cd37416c7f092c', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '72b3bbbf88821623ffab554423aa8c2ed90c2e9c' }))), h("div", { key: '76fb47dcc44e5c59aa29dc911bbc764b63f4cc4b', onClick: this.toggleSwitch, class: "control" }, h("div", { key: 'a3155acd634dbf8cef95115ed107b975cd085b11', class: `track ${this.size.toLowerCase()}` }, h("div", { key: 'd0692eed52590930a528b339527f16870959c450', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/components/cura-toast.js

@@ -33,7 +33,7 @@ const CuraToast$1 = /*@__PURE__*/ proxyCustomElement(class CuraToast extends HTM
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '0265d288e95db1331400e60d2ca694be22397294' }, h("div", { key: '2aee45d4fd237b703846272582e8258fbabb5238', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'c75ea1c8aceaf039e8d525c1ff406bcbf25b8554', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'e4d75da71aef899ec260666095f977caec86c19f', class: "content" }, h("cura-heading", { key: '3523fb7c3674854322dad502252cda7dd3bdca9e', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'a4d639691820e4e242a178604d9b20a97da7bccb', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '4b86678d47455798a0f5455a406c02eaf8000ba8' })), h("slot", { key: '28b9088b76b7b2084cf7024eb1f35f28b344e098', name: "actions" })), this.closeButton && h("cura-icon", { key: '20a3b18030bfc418439f75795bd98ebacbb1aeca', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '82b7e205ad8c5abae481bbed409109cd17661ce1', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: '4dc290042792d96f31c2e63936d70a77bc37917d' }, h("div", { key: '668c102d3a31d0a0e39c390546fcf5422e954246', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '502b24915e1000877ccd4ae25806b152b4a72948', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'd7afe4d1a9740d3bd1bce04858f6e71e0c857da2', class: "content" }, h("cura-heading", { key: '419e0d64e12e828efa2fecebe0eb86c74ff86dda', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'bc6f5c120f0b32858cbda9ebf16c5d79366452bb', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '9cc8ba28b3e5ee5d8137351cfbb5dc07b417b7e9' })), h("slot", { key: 'f260ca44fa6cc515a1bda3ecb94dd1ac90f880d7', name: "actions" })), this.closeButton && h("cura-icon", { key: '7db6c2e5c3c66ab0b12822fc8099e17b77ed2c39', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: 'd0a6f1e838ec98f6dac5773214e1e5cf501e3e2e', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();

package/dist/components/cura-tooltip.js

@@ -39,9 +39,10 @@ const CuraTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CuraTooltip extends
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: 'a8e36ac08ca7a12c1ff893c0d7525e31bd820b32', role: "tooltip", id: this.elementId }, h("div", { key: '8d1c01e85f80b2c00846273c270d7a09d555a038', class: "container", style: this.styles }, h("div", { key: '39501b4a8dbfc71cb166ec539db8fa24d2e65db0', class: "content" }, h("cura-heading", { key: '7c9209d35ab4dd2c21af7de18e013546947b3937', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '21cef01e82c0000eaaecf4ba7351d5cc416a45f4', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'c752679de543d3d31d4b4a5a97c928c7a5cc9f1a' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '398b9a3579df7969e319c207814cdf43e0bd7b5a', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: 'dc605edcfa382bad86acb8d51510c35a6ee67b74', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
+        return (h(Host, { key: '3fe89da4d5b3a2830d4ab6a88e705b4cf2433289', role: "tooltip", id: this.elementId }, h("div", { key: '6cece3dcbf275a851e0d53cb154b9dcf50a76948', class: "container", style: this.styles }, h("div", { key: '802840b89feb6c4d89303da156f6f130e552a83b', class: "content" }, h("cura-heading", { key: 'ea98692d4fc34f05dcf8fcd5c325b8a1cd408226', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '38bb7bf9f0a837813b490062ba5645f7148ac74b', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '960b6b6d8ee4636a31c2058aa4779050973e143e' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'd0bf72702fa8d24d1f5fac6fa473747bdaadcdaf', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '2213a6353b3d326ecde2e9eefe84811bd3161727', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
     }
     componentDidLoad() {
+        var _a, _b, _c, _d, _e;
         this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);
         if (!this.interactive) {
             this.host.style.visibility = 'visible';
@@ -50,28 +51,28 @@ const CuraTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CuraTooltip extends
             this.host.style.visibility = 'hidden';
             let openTimeoutID = null;
             let closeTimeoutID = null;
-            this.targetElement.addEventListener('mouseenter', () => {
+            (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', () => {
                 clearTimeout(closeTimeoutID);
                 openTimeoutID = setTimeout(() => {
                     this.host.style.visibility = 'visible';
                 }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
             });
-            this.targetElement.addEventListener('mouseleave', () => {
+            (_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', () => {
                 clearTimeout(openTimeoutID);
                 closeTimeoutID = setTimeout(() => {
                     this.handleClose();
                 }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
             });
-            this.host.addEventListener('mouseenter', () => {
+            (_c = this.host) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseenter', () => {
                 if (window.getComputedStyle(this.host).visibility === 'visible') {
                     clearTimeout(closeTimeoutID);
                 }
             });
-            this.host.addEventListener('mouseleave', () => {
+            (_d = this.host) === null || _d === void 0 ? void 0 : _d.addEventListener('mouseleave', () => {
                 clearTimeout(openTimeoutID);
                 this.handleClose();
             });
-            this.targetElement.addEventListener('click', () => {
+            (_e = this.targetElement) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => {
                 if (window.getComputedStyle(this.host).visibility === 'hidden') {
                     openTimeoutID = setTimeout(() => {
                         this.host.style.visibility = 'visible';
@@ -82,7 +83,7 @@ const CuraTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CuraTooltip extends
                     this.handleClose();
                 }
             });
-            document.addEventListener('click', (event) => {
+            document === null || document === void 0 ? void 0 : document.addEventListener('click', (event) => {
                 if (!this.targetElement.contains(event.target) && !this.host.contains(event.target)) {
                     clearTimeout(openTimeoutID);
                     this.handleClose();
@@ -117,7 +118,7 @@ const CuraTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CuraTooltip extends
         this.host.style.bottom = this.isMobile ? '0' : 'unset';
         container.style.flexDirection = this.isMobile ? 'column' : 'row';
         if (this.isMobile) {
-            this.host.style.left = 'unset';
+            this.host.style.left = '0';
             this.host.style.top = 'unset';
             return;
         }