@rededor/cura 1.3.0 → 1.4.0-alpha.0

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

@@ -0,0 +1,211 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties:
+ * --base-spacing
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+/**
+ * Global Shadow Level Definitions.
+ * Required CSS Properties with respective opacities:
+ * --neutral-black,
+ * --neutral-purewhite,
+ * --accent-base
+ * --primary-base
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-purewhite opacity: 0.2
+ * Use: @include shadow-level1(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level2(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level3(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.12
+ * Use: @include shadow-level4(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.8
+ * Use: @include shadow-level5(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --accent-base opacity: 0.2
+ * Use: @include shadow-level5-accent(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --primary-base opacity: 0.16
+ * Use: @include shadow-level3-primary(){ ... }
+ */
+/* Breakpoints variables */
+/**
+ * Responsive media for mobile (small) only.
+ * Use: @include mobile-only() { ... }
+ */
+/**
+ * Responsive media for medium only.
+ * Use: @include medium-only() { ... }
+ */
+/**
+ * Responsive media for large only.
+ * Use: @include large-only() { ... }
+ */
+/**
+ * Responsive media for xlarge only.
+ * Use: @include xlarge-only() { ... }
+ */
+/**
+ * Responsive media for medium to large.
+ * Use: @include medium-large() { ... }
+ */
+/**
+ * Responsive media for large and up.
+ * Use: @include large-up() { ... }
+ */
+:host {
+  display: block;
+}
+
+.modal {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0px;
+  bottom: 0px;
+  z-index: -1;
+  margin-top: var(--offset-top);
+}
+.modal.open {
+  z-index: 100;
+}
+.modal.open .backdrop,
+.modal.open .wrapper {
+  opacity: 1;
+  visibility: visible;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.backdrop,
+.wrapper {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.backdrop {
+  background-color: var(--background-color);
+  z-index: 90;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.wrapper {
+  position: fixed;
+  background-color: var(--neutral-white);
+  border: 2px solid var(--neutral-light);
+  border-radius: calc(var(--base-spacing) * 3px);
+  width: 700px;
+  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;
+  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;
+}
+.wrapper ::slotted(*) {
+  max-height: 80vh;
+  overflow: auto;
+  padding-right: calc(var(--base-spacing) * 5px);
+}
+
+.modal.open .wrapper {
+  transform: scale(1);
+  opacity: 1;
+  visibility: visible;
+}
+
+.close {
+  justify-self: flex-end;
+  padding-top: calc(var(--base-spacing) * 4px);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.close.mobile {
+  display: none;
+}
+.close.desktop {
+  display: flex;
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    position: fixed;
+    bottom: 0px;
+    width: 80%;
+    padding-top: calc(var(--base-spacing) * 4px);
+    padding-bottom: 0px;
+    border-radius: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;
+    border-bottom: none;
+  }
+
+  .close {
+    align-items: center;
+    border-top: 1px dashed var(--neutral-light);
+    margin-top: calc(var(--base-spacing) * 4px);
+    padding: calc(var(--base-spacing) * 4px) 0px;
+    justify-content: center;
+    width: 100%;
+  }
+  .close.mobile {
+    display: flex;
+    gap: calc(var(--base-spacing) * 2px);
+  }
+  .close.desktop {
+    display: none;
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,134 @@
+import { Host, h } from "@stencil/core";
+export class CuraModal {
+    constructor() {
+        this.handleClose = () => {
+            this.modalClose.emit();
+            this.open = false;
+        };
+        this.open = false;
+        this.background = 'light';
+        this.topOffset = 0;
+        this.styles = {};
+    }
+    setColors() {
+        const backgroundTheme = {
+            dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),
+            light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),
+        };
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': backgroundTheme[this.background] });
+    }
+    setOffsetTop() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--offset-top': `${this.topOffset}px` });
+    }
+    connectedCallback() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'), '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
+        this.setColors();
+        this.setOffsetTop();
+    }
+    render() {
+        return (h(Host, { key: '002525d3ad03f3271b11b0dacfd748ccfbfbaf1c', role: "dialog", "aria-modal": "true" }, h("div", { key: 'a684163919124acc33469b38cffeb6826dd2dd8d', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: 'bff07303351e5f7a75870b9c0f2b4a16736110bc', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: '4e8ac2fd00c10abf24060c644bbdcd6a5275bacb', class: "wrapper" }, h("button", { key: '6a0ab79a39181216882559f115107edf1c20a2c7', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: '3be3e5ee04fc5caa8786efaac0e03c946d0bdd14', name: "close", color: "error-dark", size: "small" })), h("slot", { key: '90fbd8951a449d41e2409ba10445a61e296c45e5' }), h("button", { key: '3075523254d90f7f7f4ca75f28a5724b2402f7d5', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: '9bfd171b87d0f1ff625b17f043ff90fa9dbad6e7', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: 'c17191a5570c08400cfb1409fa1ebf3f0e03a270', color: "error-dark", size: "small", marginBlock: "0" }, "Fechar"))))));
+    }
+    static get is() { return "cura-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Property open to control modal visibility.\nDefault: false"
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Property background to control modal backdrop color.\nDefault: light"
+                },
+                "attribute": "background",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "topOffset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Property offsetTop to control modal top position.\nDefault: 0px"
+                },
+                "attribute": "top-offset",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "modalClose",
+                "name": "modalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event close to handle modal close."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "background",
+                "methodName": "setColors"
+            }, {
+                "propName": "topOffset",
+                "methodName": "setOffsetTop"
+            }];
+    }
+}
+//# sourceMappingURL=cura-modal.js.map

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

@@ -0,0 +1 @@
+{"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;;QAuDZ,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC;oBArDuD,KAAK;0BAKtB,OAAO;yBAKlB,CAAC;sBAMZ,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;IAGD,YAAY;QACV,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,GACtC,CAAC;IACJ,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,YAAY,EAAE,CAAC;IACtB,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM;YACnC,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,aAE9C,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 offsetTop to control modal top position.\n   * Default: 0px\n   */\n  @Prop() topOffset?: 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  @Watch('topOffset')\n  setOffsetTop() {\n    this.styles = {\n      ...this.styles,\n      '--offset-top': `${this.topOffset}px`,\n    };\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.setOffsetTop();\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"]}

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

@@ -0,0 +1,85 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const renderCuraModal = (args) => `
+  <div style="height: 500px">
+    <cura-modal open="${args.open}" background="${args.background}" top-offset="${args.topOffset}">${args.content}</cura-modal>
+  </div>
+`;
+export default {
+    title: 'Componentes/Feedback/Modal',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return renderCuraModal(args);
+    },
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Define se o modal está aberto ou fechado',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false },
+            },
+        },
+        background: {
+            control: { type: 'select' },
+            options: ['dark', 'light'],
+            description: 'Define a cor do background do modal.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'light' },
+            },
+        },
+        topOffset: {
+            control: { type: 'number' },
+            description: 'Define o deslocamento superior do modal.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '0px' },
+            },
+        },
+        content: {
+            control: { type: 'text' },
+            description: 'Conteúdo do modal a ser exibido.',
+            table: {
+                category: 'Properties',
+            },
+        },
+        close: {
+            action: 'close',
+            description: 'Evento customizado (via listener) disparado quando o componente é fechado.',
+            name: 'modalClose',
+            table: {
+                category: 'Events',
+            },
+        },
+    },
+};
+export const CuraModal = {
+    args: {
+        background: 'light',
+        open: true,
+        content: `<div style="display:flex;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    background-color:rgba(187, 107, 217, 0.4);
+    text-align: center;
+    height: 30px;
+    color: #9b51e0;">
+    content area
+  </div>`,
+        topOffset: 0,
+    },
+};
+//# sourceMappingURL=cura-modal.stories.js.map

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

@@ -0,0 +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;;wBAEf,IAAI,CAAC,IAAI,iBAAiB,IAAI,CAAC,UAAU,iBAAiB,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO;;CAEhH,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,0CAA0C;YACvD,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,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;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,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;;;;;;;;;SASJ;QACL,SAAS,EAAE,CAAC;KACb;CACF,CAAC","sourcesContent":["const renderCuraModal = (args: any) => `\n  <div style=\"height: 500px\">\n    <cura-modal open=\"${args.open}\" background=\"${args.background}\" top-offset=\"${args.topOffset}\">${args.content}</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    topOffset: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento superior do modal.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '0px' },\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    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    topOffset: 0,\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: 'cc20723aa41b91ea1dc91ea638988b1758295194' }, h("div", { key: '77a47c8042fde17042614e9dfa451418f5599203', style: this.styles, class: "grid-template" }, h("div", { key: 'b6364534caa10c454c88cb0bee0cb15d5f5b3290', id: "sub-header" }, h("slot", { key: 'e9e8232ea90df3a7a9b41077c11b7471958b31ea', name: 'sub-header' })), h("div", { key: 'b5407cdf0d167f65a41c27b3056dffb8963f9494', id: "header" }, h("slot", { key: '75ca70a52852ba84507d836e20c3cd6e49b5ed7e', name: 'header' })), h("div", { key: 'b1a18551c7c91f0356a909d0187654af7cacfd9c', id: "pre-content" }, h("slot", { key: '46c5d27c42f0082115ed56b00ee5d9537a16b351', name: 'pre-content' })), h("div", { key: '9f9c30b4057d00cc026509eba99b8b066285f518', id: "content-container", class: this.getClasses() }, h("div", { key: '74c71d693d351e38183b501ab1ed955b1120bd13', id: "sidebar-left" }, h("slot", { key: 'f09fd413d695cb57cbdeba49192d0230dddb51ca', name: 'sidebar-left' })), h("div", { key: '60d8785cf429bbdc94132517707d672afa7cfca3', id: "content" }, h("slot", { key: 'd440f897831ff64fb3bed669728bf6d8c557037c', name: "content" }), h("slot", { key: '0e7fbe336f24608d80e7eda07869f58faf98c121' })), h("div", { key: 'e92ffc7632e10b98c25ea8f3dbe854bbdbd225a8', id: "sidebar-right" }, h("slot", { key: '9c9a8887643a1967df21c1d6625266ea119e828b', name: 'sidebar-right' }))), h("div", { key: '9ee23371a9d003db9ebb8b2f2d1803e71da01bd7', id: "post-body" }, h("slot", { key: '449fdc120956fd36f1fe71a7a5f2855a09baa9b3', name: 'post-body' })), h("div", { key: '31bc1a11a0152628a6bff3fee1b2cf739ef7cd82', id: "footer" }, h("slot", { key: '680ac49ea86a4945c13e52e8236e384d20a2867c', name: 'footer' })), h("div", { key: '1aebe595604aadc3b31e467d71532dd9d93301bf', id: "sub-footer" }, h("slot", { key: '58a2d0cebc85f73d09980b6daf8a04e7fceac133', name: 'sub-footer' })))));
+        return (h(Host, { key: 'd79c3d22ccbd93d8a56c700e3016507d18720464' }, h("div", { key: 'a717f44d6b5df9f00ffe61fff816721705748040', style: this.styles, class: "grid-template" }, h("div", { key: '7a3d585d4213799b32e2043327442b21833fd4fc', id: "sub-header" }, h("slot", { key: 'dbab9738fe221a426642e5d63e88130e1f351591', name: 'sub-header' })), h("div", { key: '39f2878cac260b70b8e53b57b6b9b5b07f658251', id: "header" }, h("slot", { key: '511af91f30dfcfde3ced7bce4c341a2802c88db8', name: 'header' })), h("div", { key: 'ed8d1b1e0d5ffca939c525ee8320da7f2afde95d', id: "pre-content" }, h("slot", { key: 'dd8c722ddd113f49965a6397625980aace8b78e8', name: 'pre-content' })), h("div", { key: '64a5767bbc858f18e44a3339b6bb567b3e5a8c0d', id: "content-container", class: this.getClasses() }, h("div", { key: '919e9d54e10f1469264f193545e80b680b63c801', id: "sidebar-left" }, h("slot", { key: '8ddeb7358bd9f6d0e08b1e3f323219b8980eec9c', name: 'sidebar-left' })), h("div", { key: '48e3860c1674658c386124c80a35b85bdb085e3e', id: "content" }, h("slot", { key: '8bc21a187897a5e9cd2e922285364a02425cefa6', name: "content" }), h("slot", { key: '587d13eed3fedcbf9e33dc4084cb2554ba70125d' })), h("div", { key: '7f620fd04b4cf4a051954dca8a95293c2a7c1d9a', id: "sidebar-right" }, h("slot", { key: '3499275e67a00fcaab4f044535dbeb19c1040569', name: 'sidebar-right' }))), h("div", { key: '59b9e4a5fe541f2ad6dac53a40588482b33e0cad', id: "post-body" }, h("slot", { key: '7493b3b330cabf263990a149c1b526501260de95', name: 'post-body' })), h("div", { key: '4a35c95f7ad04f04bb8673babc06d243e1b8f931', id: "footer" }, h("slot", { key: 'f69ffbd9c9cabe72e1ee4f147f7a1448311a7f0c', name: 'footer' })), h("div", { key: 'd53b60b2d9170797e7dc12b3179c24b7f76ac41d', id: "sub-footer" }, h("slot", { key: '75dcebb2f223ed1d0b1181ea3773fbb6bf096e33', name: 'sub-footer' })))));
     }
     static get is() { return "cura-page-template"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class CuraToast {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: 'eb867953a8c56ae385b1226686cbe1b1e9df4318' }, h("div", { key: 'c901632a6fb414c981b5c149fdd7081306ae1130', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '98c9a49501c71ee60c6ae1d783bba11d5bdce999', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: '19b2e0bd0d816e94f3b9d1f113f4b833e770cee3', class: "content" }, h("cura-heading", { key: '17ed67e5b531b45b94f8dbc7d65675f7a57308f9', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'dd90e612d924dff9b3e9896dc29cef2541ae51af', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '33cd9c1dd10ae6d3ebd857fab5c70ca7151f8a1b' })), h("slot", { key: '12d18bd482b957cdc5ee7a4fab20bdffe6bc647d', name: "actions" })), this.closeButton && h("cura-icon", { key: '3a83cdd43c6c11587013111c29673f916509b165', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '13ec00fd7146119e9eab81ed6d52b1020d1eb1e8', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: '467952f8386d659d44090163f3e14c0231dfcafd' }, h("div", { key: 'f510e12d309c79842d30cc24409b61433a6fe58e', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'acd2a9d52ad91565c7bd36bc205753bdfe6e3e59', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'dced39ca17901673360dacbf27764b1387eff20d', class: "content" }, h("cura-heading", { key: '6ac55c8ae757f654c808b72b4f44b54dc822107c', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'e8e83b891e0b7e02901999f1622a183afc94c28e', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '080891767b1b552520d7d3ed59002a9478eb0288' })), h("slot", { key: '0a43f99bbaf2e4cdd2fd7dc1d5a0431602b76361', name: "actions" })), this.closeButton && h("cura-icon", { key: '1ec27e6d6d44b82ed26a59cb6ba967858b4c8809', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '6457bb003e4706d3f60b85aa3faa3e0b6b276869', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();

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

@@ -25,7 +25,7 @@ export class CuraTooltip {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '228558663e00355ca59429d70a129e4b0e426dc1', role: "tooltip", id: this.elementId }, h("div", { key: 'd8fa27a56dd894a4cfb335fc9de348402590aa93', class: "container", style: this.styles }, h("div", { key: '974114d04252a106deb2174bfe8ecf204e689d26', class: "content" }, h("cura-heading", { key: '14be9154283064e48d2435bc4bb6af6469b18e04', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'db64a96112781640be945502b995dc07392977bd', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'b3a9a3f7a5f227ddc92ac9498c3aee93f9196f77' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '66c113fe2c3b4c67b1b9e98408b8ca1736d4eb86', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '059b4e579bebc92b5082d98ce8ae3cce9f4da95d', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
+        return (h(Host, { key: '732345360f527ffc69743818657643616b2ee611', role: "tooltip", id: this.elementId }, h("div", { key: '166aa0dd54c933f8b3b8ecc5c5c76824ef180d71', class: "container", style: this.styles }, h("div", { key: '7b54ec53f3b454979c45415ddcd164a71a9ab2b0', class: "content" }, h("cura-heading", { key: '71bf328ed2f9e5d704e6d06989a4bef6d7c4993d', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'a427a4b9df7bfae50300c9947db9df825a2f7da0', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '65875debf5bd3eec9f3070ab96cf644460897c3b' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'dac8229dc0f348b45ea3af9392c2001f638a0efb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '6c90921145206d47ab84eaee972a08b9dcad7cf0', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
     }
     componentDidLoad() {
         this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);

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

@@ -147,7 +147,7 @@ export class CuraCheckbox {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: '00334ec058edf0849cf30c65d2f9e2e2e051de96' }, h("div", { key: 'd7c7857afa27a033f0642369717eb3be406f9f27', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'aed0ec8155b2a5c0e3000b416afd6c5455c55f0e', class: "info" }, h("div", { key: 'd90166401c6946c508d2cace62976c2e7374689f', class: "label-wrapper" }, h("cura-label", { key: '7c0c5cc650db37f09127050333f49c5f4b4c7dc6', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '3c1cd2dcad221f4d93bde959ca33273270f0fe45', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '3fd01d993596f36da00b3acfeef02f2a28340eae', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '2c106bd163a1b330a18061c0e99eb21c911d7da9' }))), h("div", { key: '2286927b31856a224049693295caa9e037695749', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '9bb8a436f1500d046a9b57972307cf5feff183d3', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: '876fa0a7aa0fc7110cbf0ffeb2d95d529fa78e64' }, h("div", { key: '3e6d730765590ee75d7e045cadc7d03e5fc035e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '0f7f6f3bc61a80e899d940d76fee266af1914f5a', class: "info" }, h("div", { key: 'a836cb0d7751a1a812364fe93a30403b02ec5c95', class: "label-wrapper" }, h("cura-label", { key: '5d180552ec71e22ddd8822727bd32d4167215f33', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '047413aa21a28bc33984d19ad4dc10a38289c205', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '68c9dd6f228ec3204647795f1cae32a8f8797bc2', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '3a35a1219f135002f1b9ae64c0eb4227529bc904' }))), h("div", { key: 'fe969ee332b3c64a259ec552f411b5d2d4bc81e4', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '2cbcbe56130bddb5853cfcc3a8ef1b421f39bc7b', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get is() { return "cura-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js

@@ -36,12 +36,12 @@ export class CuraDropdownSearchOption {
         }
     }
     render() {
-        return (h(Host, { key: 'a084adaf6f89be71c8d5dc141705e7a71af353bb', slot: "dropdown-search-option" }, h("div", { key: '58ac361d8f16fdab8ef07d3be3f9c12a8c4b85ef', style: this.styles, class: {
+        return (h(Host, { key: '0dfb8d67f1aee692af5abdad170f2fc3e6c5ffc6', slot: "dropdown-search-option" }, h("div", { key: '6596c224bbfc0e9b5c3d2a39d064852019af5b74', style: this.styles, class: {
                 "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 disabled: !this.selectable
-            } }, h("div", { key: '0a7f959582b45df5c30fbbd225fccfc93aa937f4', class: "content-container" }, h("div", { key: '74b8a9626430847bf9dfb32d5188303427d2fd28', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '1dba6e28939841569f290c9fb18d3b7595bac06a', name: "image" }), h("cura-heading", { key: 'f7722edfd7ab87f7d9bacf475d988a1e80af41ef', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'db0385e5e3d2c450ba9a96d75e7913d2fe913d98' }))), h("slot", { key: '734b467cfce5ce114b06a10e3a153723da7ad41d', name: "action" })))));
+            } }, h("div", { key: 'b73badabbcde37615c58707d8a62832363deb694', class: "content-container" }, h("div", { key: '6ea1e5cfa3aa5f7bb7d0a4a2c9c8aff6e076304c', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '9e6272b220a723fbc1b52a23f59873cb4eea0986', name: "image" }), h("cura-heading", { key: '4bec4f91fd5ef5759373d846c0876678e67b1b48', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'c485bfd68ddf4b5bcfa0c590c11344352939fe87' }))), h("slot", { key: '0ce8978f72401af3580c72919b6079ef222dcc0d', name: "action" })))));
     }
     static get is() { return "cura-dropdown-search-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CuraDropdownSearchOptionTitle {
     render() {
-        return (h(Host, { key: 'e4929a8c5c1c1f11b3e51dc088b2dd506e1bdfa0', slot: "dropdown-search-option" }, h("cura-label", { key: '5bb5406c11a39a6a587737cf99eb1d2deb2ea0da', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'c781e560b512d5362370e9855551b3e088ffbec1' }))));
+        return (h(Host, { key: 'ed1d2aeeba08c3c53f04f434fa46cb178271f405', slot: "dropdown-search-option" }, h("cura-label", { key: '910b1ada8d333ace0171a3180ba6320e813e4fce', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '20816c3a0c9805a88074f36e060ad850157427e2' }))));
     }
     static get is() { return "cura-dropdown-search-option-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js

@@ -237,9 +237,9 @@ export class CuraDropdownSearch {
     }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: '36a0df3dfbe9f164ccb41541fb5373b0e94c86bd', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'e17cf1eec89b0346f49f497ffc6e5ea272fcd3eb', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: 'eb33cc0c6abd4792cb18a4e55eaed913e4f75761', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'd837a3a15a89a9bd14260a32e3e218a3f53a18b1', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: 'c8a02959ee1d637fde64fbcd8be238b7562f0790', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
+        return (h(Host, { key: 'fb9a745e5ae24c5abbf9c3c6ce8f0df2d5fcf01f', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'efc455c59f27bb254a10bbe4c62eec3e627eebb7', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '4542af0eede7676c2a4ce7e4e88fa8983c0eec15', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: '2100335a869d32e7d4f6820bc64e02e308ab29e1', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: 'fe1c21c892226c704c36107d250aac5f5b3cf0e0', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
                 this.handleOnBlur();
-            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '9cc22d4cf269fee171456169b787be54a814189e', name: "helperText" }))), h("div", { key: '4a9ce1710312984d2af67ac3a04df504183caaf6', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'afdeb4b938c3d6767e440f4b32316c45b2a5e86f', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: 'b03a633b3e9e45fc4539d4e7a2282ae388bb2e96', name: "helperText" }))), h("div", { key: 'e8e88a4f884e386de33cea7f3bcf175a7e78b168', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'f3aa2664cd496ccdd984a58c25f84fd9f616d157', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "cura-dropdown-search"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-input-date/cura-input-date.js

@@ -162,7 +162,7 @@ export class CuraInputDate {
         }
     }
     render() {
-        return (h(Host, { key: 'a85d8edd29146ca4068bb0fb5f718a5b6426638e' }, h("div", { key: '99a69b37f9370bdf242d0dc698f707f28cf0325a', class: "container", style: this.styles }, h("cura-input-text", { key: '5f5450f7390792c1188e17f48a9d04f4339fc156', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
+        return (h(Host, { key: 'bcda0a8a2601f24d445775e40535d1c8a80be5c0' }, h("div", { key: '3a3e11f1bd7082d563537a8679f69f976f242a4a', class: "container", style: this.styles }, h("cura-input-text", { key: '86ce4be158090c4ad4bfaa1e5196548fa5e1c105', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
     }
     static get is() { return "cura-input-date"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@ export class CuraLabel {
         };
     }
     render() {
-        return (h(Host, { key: 'ae255523f9f465d4e9f76dccf24e127a73d35b46', style: this.hostCSSProperties() }, h("p", { key: 'b517371dcedfcd256dff4fcaddfe40c946541513', style: this.styles, class: this.getClasses() }, h("slot", { key: '38ed6316d7882ba14a1e1710091be8d12158cd74' }))));
+        return (h(Host, { key: '8d691e1d4c38c30d1e50bc981b9e6de89b3506e0', style: this.hostCSSProperties() }, h("p", { key: 'b68944f4fe1e65aecf6a627f3bba547418bc125b', style: this.styles, class: this.getClasses() }, h("slot", { key: 'f8ac467674d94fe94adc075743b12111d1e32469' }))));
     }
     static get is() { return "cura-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -120,7 +120,7 @@ export class CuraRadio {
         return statusColors[this.status][type];
     }
     render() {
-        return (h(Host, { key: 'a0d89eeaf13690af56498ab584c22082b071b851' }, h("div", { key: '17a7ffae366d1942cdf8daccb0693434468040f8', class: this.getClasses(), style: this.styles }, h("div", { key: '2a03b1cc6eb6c26227bff90ec40f1f739e543613', class: "info" }, h("div", { key: '63a3f9a9f99504fc5f0e824a6398d502c2d7bec7', class: "label-wrapper" }, h("cura-label", { key: 'cddaf7347318cba1cd480352cde13321b44cc244', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'b2f5f549427841feb97ba43e26930e62e7d8f432', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '7d32540fd194b86224189d2ba3da8da4cae9d2a9', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c4e8fa9a1fb18040da0038aa5ea7e6bcb0ee17bc' }))), h("input", { key: 'eaebe407c25af0bc72df251451a652fc6376ef9a', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+        return (h(Host, { key: '07ed893348b28a188a67ee6b5e8eedb0598d2309' }, h("div", { key: 'b80a2b0e3db1f5dcac77617ecb9629b219460dbe', class: this.getClasses(), style: this.styles }, h("div", { key: '945ceedc874bf7b8ecb48683d26fa626449fb377', class: "info" }, h("div", { key: '3257b5a46d040d0177e8a791a2d810bf278f7517', class: "label-wrapper" }, h("cura-label", { key: '8c68882b6e2f852a2d1929449b3c82469474fab3', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'e9adfe5998b2c5f705589461bff38705f0ddbbc7', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '50063f682a67c74a0ce2292cc823c21e6db90bcd', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c746a61b3e7ea6d4a63143b794fd8c482829e834' }))), h("input", { key: '078275db7eb3a4878d93d77b120c3caaa0b5e0b7', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
     }
     static get is() { return "cura-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -265,13 +265,13 @@ export class CuraSelect {
         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: '1f9549c90dbc1c5a958488fdaa7e6b320730691a', style: this.styles }, h("div", { key: '52f93a983269e95bf4e19b590c47a8de472f9cb1', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '1fbbdb175324020e975e515c07a7eb85e593eb19', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'b76d8b6fc6399af17f8345d097f70e29ef9a549e', class: 'required' }, "* "))), h("div", { key: '0f1484f9debd047eb99760adb2c2da6d124c39f0', class: {
+        return (h(Host, { key: 'f01b52d0da1c417723c9da0ce7002155b3cbb07d', style: this.styles }, h("div", { key: '2798e5cd7f16e8679520900374e569cca1e5bee8', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '5f9f645c3199e6299f000f5ab167139f536442b8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '2bca7ed64c1d44152161c2d71173f70b8b2fbacc', class: 'required' }, "* "))), h("div", { key: 'c1e77ccc2d1853b8749fea57e5ca3554363ef168', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: '2b10751ad085669523eeaba20a9d8736b4332dc0', 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: '965687e4884ab2da4de009ccee8a2607a80ca0d3', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'ec844637fe1b96ac3719a53fc4753a66dde5710f', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'fdc615752aad7bc80ba97a380c4086a3e81fad48' })), this.isOpen && (h("div", { key: 'cac6207d71dabbf2ad7d6dd0f5a152d23f64e554', class: {
+            } }, this.renderIcon(), h("input", { key: '66e99e0a7c3b00516cc2f1240d08511c9434201b', 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: '4efde985b30016b633818f9fafe6c1f538b4776e', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'ead6b6a9f95acc7f2cf2e7474f72c1627e0bd8cd', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'e01c6c99fecb78822d092a41db0b969ca160cea1' })), this.isOpen && (h("div", { key: '0fedad3cac056457810c984eb471bd9a703f2ff4', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, h("slot", { key: '3414977f685fd5f7692e1b5fbcf8b8af11992fba', name: 'option' }))))));
+            } }, h("slot", { key: '1330a45037f002b5fd20a356f1fe5b982999e512', name: 'option' }))))));
     }
     static get is() { return "cura-select"; }
     static get encapsulation() { return "shadow"; }