@rededor/cura 1.5.1 → 1.6.0-alpha.1

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

@@ -1 +1 @@
-{"version":3,"file":"cura-toast.stories.js","sourceRoot":"","sources":["../../../src/components/cura-toast/cura-toast.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAEhE,MAAM,eAAe,GAAG,CAAC,IAAS,EAAE,EAAE;IACpC,OAAO;;MAEH,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;MACzC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MAC9D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;MACnF,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE;MACrE,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE;MACrD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MACtC,IAAI,CAAC,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,EAAE;IAClF,IAAI,CAAC,OAAO;IACZ,IAAI,CAAC,OAAO;;WAEL,CAAC;AACZ,CAAC,CAAA;AAED,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,KAAK,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;YAC/B,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;YACD,IAAI,EAAE,OAAO;SACX;QACD,IAAI,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACpD,WAAW,EAAE,0FAA0F;YACvG,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;aAClC;YACD,IAAI,EAAE,MAAM;SACV;QACH,QAAQ,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAC;YACpG,WAAW,EAAE,0BAA0B;YACvC,KAAK,EAAE;gBACN,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACtC;YACD,IAAI,EAAE,UAAU;SAChB;QACC,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAChC;YACD,IAAI,EAAE,cAAc;SACrB;QACH,MAAM,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAChC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;YAC1B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;YAC3B,WAAW,EAAE,8BAA8B;YAC3C,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,gCAAgC,EAAE;aAC5D;YACD,IAAI,EAAE,MAAM;SACb;QACH,cAAc,EAAE;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,2EAA2E;YACxF,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;YACD,IAAI,EAAE,kBAAkB;SACzB;QACH,OAAO,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0FAA0F;YACvG,YAAY,EAAE,EAAE;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;aACjB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qCAAqC;YAClD,YAAY,EAAE,EAAE;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;aACjB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4EAA4E;YACzF,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,MAAM;QACd,QAAQ,EAAE,WAAW;QACnB,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI;QACZ,IAAI,EAAE,EAAE;QACV,cAAc,EAAE,KAAK;QACnB,OAAO,EAAE,iCAAiC;QAC1C,OAAO,EAAE;;;;;;;;;;;;;;;;;;;qBAmBQ;KAClB;IACD,UAAU,EAAE,GAAG;CAChB,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\n\nconst renderCuraToast = (args: any) => {\n  return `<div style=\"width: 100%; height: 250px;\">\n    <cura-toast\n    ${args.label ? `label=\"${args.label}\"` : ''}\n    ${args.type && args.type !== 'info' ? `type=\"${args.type}\"` : ''}\n    ${args.position && args.position !== 'top-right' ? `position=\"${args.position}\"` : ''}\n    ${args.closeButton !== true ? `close-button=\"${args.closeButton}\"` : ''}\n    ${args.loader !== true ? `loader=\"${args.loader}\"` : ''}\n    ${args.icon ? `icon=\"${args.icon}\"` : ''}\n    ${args.autoCloseDelay !== 10000 ? `auto-close-delay=\"${args.autoCloseDelay}\"` : ''}>\n\t\t${args.content}\n\t\t${args.actions}\n    </cura-toast>\n    </div>`;\n}\n\nexport default {\n  title: 'Componentes/Feedback/Toast',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraToast(args);\n  },\n  argTypes: {\n    label: {\n\t\t\tcontrol: 'text',\n\t\t\tdescription: 'Título do toast.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t},\n\t\t\tname: 'label',\n    },\n    type: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'info', 'success', 'warning', 'error'],\n\t\t\tdescription: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t\t\tdefaultValue: { summary: 'info' },\n\t\t\t},\n\t\t\tname: 'type',\n    },\n\t\tposition: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],\n\t\t\tdescription: 'Posição do Toast na tela',\n\t\t\ttable: {\n\t\t\t\tcategory: 'Properties',\n\t\t\t\tdefaultValue: { summary: 'top-right' },\n\t\t\t},\n\t\t\tname: 'position',\n\t\t},\n    closeButton: {\n      control: 'boolean',\n      description: 'Define se o alerta pode ser fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n      name: 'close-button'\n    },\n\t\tloader: {\n      control: 'boolean',\n      description: 'Define se mostra ou não a barra de progresso',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n    },\n    icon: {\n      control: {type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone personalizado.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'De acordo com o tipo de alert.' },\n      },\n      name: 'icon'\n    },\n\t\tautoCloseDelay: {\n      control: 'number',\n      description: 'Define a quantidade de tempo, em milisegundos, que o toast ficará aberto.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 10000 },\n      },\n      name: 'auto-close-delay'\n    },\n\t\tcontent: {\n      control: 'text',\n      description: 'Conteúdo do texto principal do toast. É projetado automaticamente dentro do slot padrão.',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n    actions: {\n      control: 'text',\n      description: 'Conteúdo da ações de links e botões',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n    closeEvent: {\n      control: 'text',\n      description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n      name: 'toastClosed',\n      table: {\n        category: 'Events',\n      },\n    }\n  },\n};\n\nexport const Toast = {\n  args: {\n    label: 'Título do toast',\n    type: 'info',\n\t\tposition: 'top-right',\n    closeButton: true,\n    loader: true,\n    icon: '',\n\t\tautoCloseDelay: 10000,\n    content: 'Texto explicativo para o toast.',\n    actions: `<div slot=\"actions\">\n                <cura-paragraph spot-color=\"primary\" size=\"xsmall\" margin-block=\"8px 0\">\n                  <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\">Link</a>\n                  <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"margin-left: 8px\">Link</a>\n                </cura-paragraph>\n                <div style=\"display: flex; justify-content: space-between; gap: 8px; margin-top: 12px;\">\n                  <cura-button-outline\n                    size=\"small\"\n                    color=\"primary\"\n                    style=\"width: 100%;\">\n                    Button\n                  </cura-button-outline>\n                  <cura-button\n                    size=\"small\"\n                    color=\"accent\"\n                    style=\"width: 100%;\">\n                    Button\n                  </cura-button>\n                </div>\n              </div>`\n  },\n  closeEvent: '-',\n};\n"]}
+{"version":3,"file":"cura-toast.stories.js","sourceRoot":"","sources":["../../../src/components/cura-toast/cura-toast.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\n\nconst renderCuraToast = (args: any) => {\n  return `<div style=\"width: 100%; height: 250px;\">\n    <cura-toast\n    ${args.label ? `label=\"${args.label}\"` : ''}\n    ${args.type && args.type !== 'info' ? `type=\"${args.type}\"` : ''}\n    ${args.position && args.position !== 'top-right' ? `position=\"${args.position}\"` : ''}\n    ${args.closeButton !== true ? `close-button=\"${args.closeButton}\"` : ''}\n    ${args.loader !== true ? `loader=\"${args.loader}\"` : ''}\n    ${args.icon ? `icon=\"${args.icon}\"` : ''}\n    ${args.autoCloseDelay !== 10000 ? `auto-close-delay=\"${args.autoCloseDelay}\"` : ''}>\n\t\t${args.content}\n\t\t${args.actions}\n    </cura-toast>\n    </div>`;\n}\n\nexport default {\n  title: 'Componentes/Feedback/Toast',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraToast(args);\n  },\n  argTypes: {\n    label: {\n\t\t\tcontrol: 'text',\n\t\t\tdescription: 'Título do toast.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t},\n\t\t\tname: 'label',\n    },\n    type: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'info', 'success', 'warning', 'error'],\n\t\t\tdescription: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t\t\tdefaultValue: { summary: 'info' },\n\t\t\t},\n\t\t\tname: 'type',\n    },\n\t\tposition: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],\n\t\t\tdescription: 'Posição do Toast na tela',\n\t\t\ttable: {\n\t\t\t\tcategory: 'Properties',\n\t\t\t\tdefaultValue: { summary: 'top-right' },\n\t\t\t},\n\t\t\tname: 'position',\n\t\t},\n    closeButton: {\n      control: 'boolean',\n      description: 'Define se o alerta pode ser fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n      name: 'close-button'\n    },\n\t\tloader: {\n      control: 'boolean',\n      description: 'Define se mostra ou não a barra de progresso',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n    },\n    icon: {\n      control: {type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone personalizado.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'De acordo com o tipo de alert.' },\n      },\n      name: 'icon'\n    },\n\t\tautoCloseDelay: {\n      control: 'number',\n      description: 'Define a quantidade de tempo, em milisegundos, que o toast ficará aberto.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 10000 },\n      },\n      name: 'auto-close-delay'\n    },\n\t\tcontent: {\n      control: 'text',\n      description: 'Conteúdo do texto principal do toast. É projetado automaticamente dentro do slot padrão.',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n    actions: {\n      control: 'text',\n      description: 'Conteúdo da ações de links e botões',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n    closeEvent: {\n      control: 'text',\n      description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n      name: 'toastClosed',\n      table: {\n        category: 'Events',\n      },\n    },\n    close: {\n      control: 'none',\n      description: 'Método disponibilizado pelo componente para fechar e remover o toast.',\n      table: {\n        category: 'Methods',\n      },\n    }\n  },\n};\n\nexport const Toast = {\n  args: {\n    label: 'Título do toast',\n    type: 'info',\n\t\tposition: 'top-right',\n    closeButton: true,\n    loader: true,\n    icon: '',\n\t\tautoCloseDelay: 10000,\n    content: 'Texto explicativo para o toast.',\n    actions: `<div slot=\"actions\">\n                <cura-paragraph spot-color=\"primary\" size=\"xsmall\" margin-block=\"8px 0\">\n                  <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\">Link</a>\n                  <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"margin-left: 8px\">Link</a>\n                </cura-paragraph>\n                <div style=\"display: flex; justify-content: space-between; gap: 8px; margin-top: 12px;\">\n                  <cura-button-outline\n                    size=\"small\"\n                    color=\"primary\"\n                    style=\"width: 100%;\">\n                    Button\n                  </cura-button-outline>\n                  <cura-button\n                    size=\"small\"\n                    color=\"accent\"\n                    style=\"width: 100%;\">\n                    Button\n                  </cura-button>\n                </div>\n              </div>`\n  },\n  closeEvent: '-',\n};\n"]}

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

@@ -68,8 +68,8 @@
  */
 /**
  * Global Spacing Definitions.
- * Required CSS Properties:
- * --base-spacing
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
  */
 /* None: 0px */
 /* Tiny default: 4px */
@@ -86,7 +86,7 @@
 /* Huge default: 96px */
 :host {
   position: absolute;
-  z-index: 99999;
+  z-index: 99998;
   display: block;
   width: fit-content;
   height: fit-content;
@@ -102,9 +102,9 @@
   box-sizing: border-box;
   max-width: var(--max-width);
   height: auto;
-  padding: calc(var(--base-spacing) * 2px);
+  padding: calc(var(--cura-spacing-base) * 2px);
   border: 1px solid var(--neutral-light);
-  border-radius: calc(var(--base-spacing) * 1px);
+  border-radius: calc(var(--cura-spacing-base) * 1px);
   background-color: var(--neutral-purewhite);
   box-shadow: 0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));
 }
@@ -112,10 +112,10 @@
   :host .container {
     max-width: 90%;
     height: fit-content;
-    padding: calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) 0 calc(var(--base-spacing) * 4px);
+    padding: calc(var(--cura-spacing-base) * 4px) calc(var(--cura-spacing-base) * 4px) 0 calc(var(--cura-spacing-base) * 4px);
     margin: 0 auto;
     border: 2px solid;
-    border-radius: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0 0;
+    border-radius: calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px) 0 0;
     border-color: var(--neutral-light) var(--neutral-light) transparent var(--neutral-light);
   }
 }
@@ -123,8 +123,8 @@
   content: "";
   position: absolute;
   z-index: 99999;
-  width: calc(var(--base-spacing) * 2.5px);
-  height: calc(var(--base-spacing) * 2.5px);
+  width: calc(var(--cura-spacing-base) * 2.5px);
+  height: calc(var(--cura-spacing-base) * 2.5px);
   border: 1px solid;
   border-radius: 2px;
   background-color: var(--neutral-purewhite);
@@ -142,18 +142,18 @@
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
-  gap: calc(var(--base-spacing) * 1px);
+  gap: calc(var(--cura-spacing-base) * 1px);
 }
 @media (max-width: 768px) {
   :host .container .content {
-    padding-bottom: calc(var(--base-spacing) * 4px);
+    padding-bottom: calc(var(--cura-spacing-base) * 4px);
     border-bottom: 1px dashed var(--neutral-light);
   }
 }
 :host .container .close-icon {
-  margin-left: calc(var(--base-spacing) * 3px);
+  margin-left: calc(var(--cura-spacing-base) * 3px);
   cursor: pointer;
 }
 :host .container .close-button {
-  padding: calc(var(--base-spacing) * 2px) 0;
+  padding: calc(var(--cura-spacing-base) * 2px) 0;
 }

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

@@ -25,7 +25,7 @@ export class CuraTooltip {
         this.setStyle();
     }
     render() {
-        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."))));
+        return (h(Host, { key: '8d60e1300b236087fdb740e018c1c0537cae8d14', role: "tooltip", id: this.elementId }, h("div", { key: '1ee4abd823d291a62a0890f15e6dcf7de93d27ce', class: "container", style: this.styles }, h("div", { key: '5b77522f5bfa31f0c57d1461c4fe74bb28056853', class: "content" }, h("cura-heading", { key: '1829def9107ea1a6d4c26a7529f6342b9d1c3a4e', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'd7ef9857d141ef5aea60b1d9d1d79f47ebe1f6f8', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f2dc8c8e8142205d0553af200875131a0cc09111' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'e7666bb54a3366f8c2ab3b0429237f7b5307b36a', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: 'cc64d822bf10b1d7788fd2df85a6b97287b7f7ee', 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;

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: 'c589b642a730e09b8d5ba60b69b45f131560ffda' }, h("div", { key: '85ee55dc52042e513e070d68af348dc78d1990e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '59e78d3b717b0bbd77d98da09ab7f1da30d02f14', class: "info" }, h("div", { key: '64d683966633a625e7e477fcf1b00364d5fd3fa7', class: "label-wrapper" }, h("cura-label", { key: '76d34006ffd837285cb899278f759d95862097c5', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '01394587736d7402d5c6729e9f7e93f7b08ad742', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'fcbbea9a05b9299a814111ea36d7412df6f54e92', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '99c46ed2eb8492cbebb114d828935f1ec0bf7796' }))), h("div", { key: '6291780f613af4e320c486b46697df6f19bdce0e', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'b922e6498ecfd28391843cdfa45c850f045f3ab6', 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: '8c4fdab5276ff9eb200299a5584ac8e96ef11974' }, h("div", { key: '3074370b481f50e7c3b8183e1aa643a37992f05b', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'adb656d2d5dc3212735c427e08c7d03d8c94f83e', class: "info" }, h("div", { key: '55747701dd4ed57a6ed3132d996639219ba950e1', class: "label-wrapper" }, h("cura-label", { key: 'b5224ec0a274789c03f6b8e0a5c5ed7fda911c58', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '188a2ed6c915cec53d495edd77ec2dd88fafe714', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '6b63e628f4aeb066dc73feaca720edb12dc207f1', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '880c28c63878169f84a14c96d12c925edc3611bb' }))), h("div", { key: '01dd5e638a5043c4349193c97dd7acfe57dc4498', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '5ff82da2b58e7bd88f2866a2677151fb49814b3c', 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.css

@@ -1,7 +1,7 @@
 /**
  * Global Spacing Definitions.
- * Required CSS Properties:
- * --base-spacing
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
  */
 /* None: 0px */
 /* Tiny default: 4px */
@@ -44,7 +44,7 @@
   display: flex;
   width: 100%;
   box-sizing: border-box;
-  padding: calc(var(--base-spacing) * 2px) calc(var(--base-spacing) * 1px);
+  padding: calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 1px);
   background-color: var(--neutral-purewhite);
   border-bottom: 1px solid var(--neutral-light);
 }
@@ -59,7 +59,7 @@
   align-items: center;
   align-content: center;
   justify-content: center;
-  gap: calc(var(--base-spacing) * 2px);
+  gap: calc(var(--cura-spacing-base) * 2px);
   flex-direction: row;
   box-sizing: border-box;
   cursor: pointer;
@@ -69,7 +69,7 @@
   margin-block: 0px;
 }
 .option-info ::slotted(div[slot=image]) {
-  min-width: calc(var(--base-spacing) * 8px);
+  min-width: calc(var(--cura-spacing-base) * 8px);
   display: flex;
   justify-content: center;
   align-items: center;

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: '515f662d5fb08cd77e7ad24de425ec34497e5e6e', slot: "dropdown-search-option" }, h("div", { key: '8decccf2416ae3ea135bba38845da2a63c9cfdce', style: this.styles, class: {
+        return (h(Host, { key: '81c4404d784d2038823d84bf2b4beef53a874644', slot: "dropdown-search-option" }, h("div", { key: '476757ab00466607c2ab01a2b5a82da4c45087af', style: this.styles, class: {
                 "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 disabled: !this.selectable
-            } }, h("div", { key: '8c3cce88d40c764ae87cf8c54e3fb9fe9651f62d', class: "content-container" }, h("div", { key: '1c674ff6a3721c42e034b994bf903d8608100cb8', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '7a6545a242da0774b74a403b2dc26ce378d146fd', name: "image" }), h("cura-heading", { key: '860fede2f20748b5e15ddf3222cd0c6ce3ff1f8c', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'e9a7610e2d561cb399d58c44f98fb9ea0e6cf5c6' }))), h("slot", { key: 'c784f7cddd4d5e246126ef43ab08e82db51fc2be', name: "action" })))));
+            } }, h("div", { key: '2a35edbe88ed99587972e0e657250867cb6ba814', class: "content-container" }, h("div", { key: '5bb136c9c5386d6c40985a86bc7e2e85c239110e', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: 'f5ad44434728cb3879819f6016fcf9927354c05f', name: "image" }), h("cura-heading", { key: '43fa2a1c1a206f6bd1b0f52f5bc536cbb98bbe56', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: '197963392c5cef12d29dfbe312f4359b950de9f3' }))), h("slot", { key: '146144af1e1a5d1a18eb2aceaa71b749a4c61ba6', 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: 'b378a877e6a90727e3216c284c2a064992f2dfc9', slot: "dropdown-search-option" }, h("cura-label", { key: 'e2d457a7d42bcacae09012322b19a54e44fb109f', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'e889fa1839988a0f138e14ad15b0e250100ba38c' }))));
+        return (h(Host, { key: '4782e0381a903b7b71851e7ccee12ef94a3343ab', slot: "dropdown-search-option" }, h("cura-label", { key: '4f287507290fc374eef609a3c18e1fc9ba970ae7', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'a5d129e76e15613b8983acd2034808803cbf1f38' }))));
     }
     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

@@ -258,9 +258,9 @@ export class CuraDropdownSearch {
     }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: '29caf35386c324e85a5b68caa280193e8f1a3aae', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: '879dc628c89920323a97f5b29aeadf6e774615ef', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '31c2df66c5311abedfd1661fb9d8b135dde4ea8a', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: '418fa19788b7dd8374d4c9c78837ad89c9f11f9e', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '78dfa84f63f4a5a3b72f94e589b9c362d8e78e19', 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: '8e47b4652a5f7143b9f9d8704105624debd5ab86', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'a5c9a6878be61268fb2a6fe5f42c3811aaa25e92', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: 'c10d5a2793e7961370f63b124eb8538c0fe161a2', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'a5d8233857277aa56c7d4d8048c8d8199635f117', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '1f780e794a2e42fa4771f9f6f5cb04f44d5d17d3', 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: 'e7f13fc467083f08b4666f4323b8734fb734fe1c', name: "helperText" }))), h("div", { key: '9a39a16c1dfefd6481593ce062036e19cd1b65fa', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '36af7eb7212ea066af0edb68b5e12bf9f931fae1', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '87882a490816c64d8780ce4a02b975034e111473', name: "helperText" }))), h("div", { key: 'b0120ab7c2db1a5dcc071e4b79f9aac7d50ae998', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'b780c4b317c6aa557a6be5fe3d4c957d943b92c8', 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.css

@@ -43,8 +43,8 @@
  */
 /**
  * Global Spacing Definitions.
- * Required CSS Properties:
- * --base-spacing
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
  */
 /* None: 0px */
 /* Tiny default: 4px */
@@ -69,7 +69,7 @@
   position: relative;
 }
 .container .calendar {
-  padding: 0px calc(var(--base-spacing) * 3px);
+  padding: 0px calc(var(--cura-spacing-base) * 3px);
   margin-top: -8px;
   border-radius: 0px 0px 4px 4px;
   border-top: 0px;

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

@@ -162,7 +162,7 @@ export class CuraInputDate {
         }
     }
     render() {
-        return (h(Host, { key: '1395108764c1957abb9371b82ab983d076aaf61e' }, h("div", { key: 'e3134a1cfbf6f07b83f148b3e1b9c699e273a098', class: "container", style: this.styles }, h("cura-input-text", { key: '507ce8cedd5a169832579ae3ea313d3b3d6813d2', 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: '6561926408fe00e541e6e7932a448f5a46cb5909' }, h("div", { key: '23e9db15f773d76e01c1dd0d7b71d6765a9a6c26', class: "container", style: this.styles }, h("cura-input-text", { key: '040e257cfaf01fbf0bd087d3abf0d159e7d1ac7a', 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-input-text/cura-input-text.css

@@ -522,6 +522,10 @@
 }
 .cura-input-group.transparent.transparent cura-label {
   margin-bottom: 4px;
+  --color-body: var(--neutral-dark) !important;
+}
+.cura-input-group.transparent.transparent.error cura-label {
+  --color-body: var(--neutral-black) !important;
 }
 .cura-input-group.transparent.transparent .cura-input-field {
   width: 100%;

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import IMask from "imask";
 import { maskOptions } from "./mask-presets/input-mask-presets";
+import { checkMobile, checkIOS, fakeInputIOSHack } from "../../../utils/utils";
 export class CuraInputText {
     constructor() {
         this.mode = 'default';
@@ -30,6 +31,17 @@ export class CuraInputText {
         this.hideErrorIcon = false;
         this.autocomplete = 'on';
     }
+    async setFocus() {
+        // IOS needs large timeout value to work
+        const timeoutMs = checkMobile() && checkIOS() ? 1000 : 200;
+        // IOS fake input hack
+        let fakeInput = fakeInputIOSHack(this.host);
+        setTimeout(() => {
+            this.inputRef.focus();
+            if (fakeInput)
+                fakeInput.remove();
+        }, timeoutMs);
+    }
     /**
      * Callback to restore the switch state from the form.
      */
@@ -78,6 +90,7 @@ export class CuraInputText {
         this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
         this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
         this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.breakpoints = window.CuraAPI.theme.breakpoints.get();
         this.styles['--font-weight-medium'] = this.weights.medium;
         this.styles['--font-weight-bold'] = this.weights.bold;
         this.styles['--font-weight-regular'] = this.weights.regular;
@@ -132,7 +145,6 @@ export class CuraInputText {
         const isSuccess = this.status === 'success';
         const isDefault = this.status === 'default';
         const helperTextSize = this.size === 'large' ? 'small' : 'xsmall';
-        const helperTextWeight = this.mode === 'transparent' ? 'bold' : 'regular';
         const colorText = (() => {
             if (this.disabled)
                 return 'neutral-medium';
@@ -142,7 +154,7 @@ export class CuraInputText {
                 return 'neutral-black';
             return 'neutral-dark';
         })();
-        return (h("div", { style: this.styles, class: "helper-text" }, isDefault && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: colorText, weight: helperTextWeight }, h("slot", null))), isError && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "error-dark", weight: helperTextWeight }, h("slot", null))), isSuccess && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "success-dark", weight: helperTextWeight }, h("slot", null)))));
+        return (h("div", { style: this.styles, class: "helper-text", part: "cura-input-text-helper" }, isDefault && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: colorText }, h("slot", null))), isError && this.mode === "default" && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "error-dark" }, h("slot", null))), isError && this.mode === "transparent" && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "neutral-black" }, h("slot", null))), isSuccess && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "success-dark" }, h("slot", null)))));
     }
     handleMouseEnter() {
         this.isHovered = true;
@@ -166,7 +178,9 @@ export class CuraInputText {
         this.value = '';
         this.inputRef.value = '';
         this.valueChange.emit(this.value);
+        this.inputClear.emit(this.value);
         this.handleMaskUpdate();
+        this.setFocus();
     }
     handleInputFocus() {
         this.handleMaskUpdate();
@@ -288,7 +302,7 @@ export class CuraInputText {
             e.preventDefault();
     }
     render() {
-        return (h(Host, { key: '0aebf7d545af0e2eec1f542e5545ef34d0356e33' }, h("div", { key: '22e428a2706273d1613e39f860a721a73cab6d03', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, h("div", { key: '8ef0bc3f5bf3427abdbd247a8c78b722eaaca541', class: "input-wrapper" }, this.label && (h("cura-label", { key: '4aef20d0c2880ed38c1821e2690829a31fe7fea8', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && h("span", { key: 'a3bb15165ae1ffedae59a32a1e299c9a36ad9b2c', class: "required" }, "* "))), h("div", { key: '0b12a41f21a4c26273390dd15f362a5baccb0f2d', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), h("input", { key: 'da03ef422267592fa3c732cb553e16fd1209bdf0', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref), autocomplete: this.autocomplete }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (h("cura-icon", { key: '7d46e420487a37b6fa90d93b25ba8d84d9197e43', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && h("cura-loader-circle", { key: '2ecef2f802b1807f214a9ca72099b690189898fd', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
+        return (h(Host, { key: '6c14493558642a993e4fa541b2a932e6cf9308a1' }, h("div", { key: '0084cfcd8ba41736f0cd2ca56a5183b1921c9c52', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, h("div", { key: '27998cb277338c329ee0c4afefd7dbf2a7621990', class: "input-wrapper" }, this.label && (h("cura-label", { key: '2f57bdcff2b1bdbfcfb9bd01faedec5f372dfe5d', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && h("span", { key: 'da05203184e4772fd25853407640de241382f050', class: "required" }, "* "))), h("div", { key: '03cbae962e628e3ea3bb7ba0d8cfd0f89f37b758', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), h("input", { key: 'e89fdaf2fc20169474afc960b320d64fcc8579bd', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref), autocomplete: this.autocomplete }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (h("cura-icon", { key: 'ea541b239b97920ab02fd88aafec39169c20c5a0', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && h("cura-loader-circle", { key: 'ecb67fbc7e3796009f30bd16b0a1c2ce82052666', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
     }
     static get is() { return "cura-input-text"; }
     static get encapsulation() { return "shadow"; }
@@ -309,8 +323,8 @@ export class CuraInputText {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "'default' | 'transparent'",
-                    "resolved": "\"default\" | \"transparent\"",
+                    "original": "'default' | 'transparent' | string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -327,8 +341,8 @@ export class CuraInputText {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "'error' | 'success' | 'default'",
-                    "resolved": "\"default\" | \"error\" | \"success\"",
+                    "original": "'error' | 'success' | 'default' | string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -345,8 +359,8 @@ export class CuraInputText {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "original": "'small' | 'medium' | 'large' | string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -458,13 +472,13 @@ export class CuraInputText {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Value of the input field"
                 },
                 "attribute": "value",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "iconName": {
@@ -757,8 +771,48 @@ export class CuraInputText {
                     "resolved": "number | string",
                     "references": {}
                 }
+            }, {
+                "method": "inputClear",
+                "name": "inputClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{EventEmitter<string | number>}"
+                        }],
+                    "text": "Emitted when the clear button is clicked"
+                },
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                }
             }];
     }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "styles",