@rededor/cura 1.5.0-alpha.0 → 1.5.0-alpha.2

package/dist/components/cura-loader-bar2.js

@@ -23,7 +23,7 @@ const CuraLoaderBar = /*@__PURE__*/ proxyCustomElement(class CuraLoaderBar exten
         this.setProgress();
     }
     render() {
-        return (h(Host, { key: 'ae36cc67cb0b22bf0156ee1cc41472ea74cee0a9' }, h("div", { key: 'd3cc5382d1b4967ab7622f4b71dfb51d2e913ddb', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '9a34c97d65e4cb4692371b876304175610770098', class: "progress-bar-fill" }))));
+        return (h(Host, { key: '4dc7ef7b17bfb408fa7ff9a74509637bb9045353' }, h("div", { key: 'cd2654377f0b45c5b6fa6aa57940f5d81cfd0cce', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '5d7b4a058162b840f167adb81843403f6c488c4e', class: "progress-bar-fill" }))));
     }
     setColor() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });

package/dist/components/cura-loader-circle2.js

@@ -26,7 +26,7 @@ const CuraLoaderCircle = /*@__PURE__*/ proxyCustomElement(class CuraLoaderCircle
         };
     }
     render() {
-        return (h(Host, { key: '4bbd56cb3e6ba4567a55151130434632f65ae43d', style: this.getStyles() }, h("svg", { key: 'e3bedd1366e04387303f70785d9524e45d2c05e1', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '0432c14bd08943b91d0df19ccece4b6ff689ff59' }, h("circle", { key: 'abcb2c008e0c86d5de76becb39784a765edb0c5f', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '0e46ede5d639ddcd639938ede38bd290b270e21b', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '078f23c3acf4d470be0bcf652d0fcfa032a349dd' }, h("linearGradient", { key: '15b205073cc09ecb60ec03cbbdbad1655d35419d', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'a4903782973fe126203024c4b7b9fbe01b5f673b' }), h("stop", { key: 'bb6ca25801db81e40f1d234ef89632fe175a737e', offset: "1" }))))));
+        return (h(Host, { key: '627023f3e413d6a28e802eaf011f0ca39ccc17d9', style: this.getStyles() }, h("svg", { key: '1f7dab1ef6e82d81ffacf336660c508c039e7430', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '4baeff0f8c83335be93cd067dbed2cfa5d0be88a' }, h("circle", { key: '7929b1120288af1f17976a69463bf8965f2e4fae', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '832582680715bedebca8f025d141d40785832a86', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: 'ad393945da8c664faed05c17ed1c51cae3a02edb' }, h("linearGradient", { key: 'bf42d208d369c60bbdad5adf81c4c61144ad34eb', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '445c119c6cebcfb057826ebd090b883aa479a8cd' }), h("stop", { key: '47555985163574e69556490d1d09c6283d31845c', offset: "1" }))))));
     }
     static get style() { return CuraLoaderCircleStyle0; }
 }, [1, "cura-loader-circle", {

package/dist/components/cura-modal.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './cura-icon2.js';
 import { d as defineCustomElement$2 } from './cura-paragraph2.js';
 
-const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.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:calc(var(--zIndex) - 10);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:var(--zIndex);box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.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}}";
+const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.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:calc(var(--zIndex) - 10);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);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:var(--zIndex);box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.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}}";
 const CuraModalStyle0 = curaModalCss;
 
 const CuraModal$1 = /*@__PURE__*/ proxyCustomElement(class CuraModal extends HTMLElement {

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

@@ -1 +1 @@
-{"file":"cura-modal.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,6hEAA6hE,CAAC;AACnjE,wBAAe,YAAY;;MCMdA,WAAS;;;;;;QAsGZ,gBAAW,GAAG;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;oBApGuD,KAAK;0BAKtB,OAAO;mBAKxB,CAAC;sBAKE,CAAC;oBAKH,CAAC;qBAKA,CAAC;gCAK0B,QAAQ;sBAKlB,KAAK;sBAM7B,EAAE;;IAGpB,SAAS;QACP,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;YAChE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC;SACnE,CAAC;QAEF,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,GACvD,CAAC;KACH;IAED,SAAS,CAAC,IAAY,EAAE,KAAa;QACnC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,CAAC,KAAK,IAAI,SAAS,GAAG,GAAG,KAAK,IAAI,GACnC,CAAC;KACH;IAGD,MAAM;QACJ,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACjC;IAGD,SAAS;QACP,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;IAGD,OAAO;QACL,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACnC;IAGD,QAAQ;QACN,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACrC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D,CAAC;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,IACtE,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,sBAAsB,GAAG,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IACpF,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,qBAAqB,GAAG,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAQ,EACnG,4DAAK,KAAK,EAAC,SAAS,IAElB,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACrD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAa,CAC7D,EACT,8DAAa,EAEb,+DAAQ,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAa,EACjE,uEAAgB,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,IAC5D,IAAI,CAAC,gBAAgB,CACP,CACV,CACL,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraModal"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n  display: block;\n}\n\n.modal {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: var(--top-offset);\n  bottom: var(--bottom-offset);\n  left: var(--left-offset);\n  right: var(--right-offset);\n  z-index: -1;\n  margin-top: var(--offset-top);\n\n  &.open {\n    z-index:  var(--zIndex);\n\n    .backdrop,\n    .wrapper {\n      opacity: 1;\n      visibility: visible;\n      animation: fadeIn 0.3s ease-out;\n    }\n  }\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n  background-color: var(--background-color);\n  z-index:  calc(var(--zIndex) - 10);\n  animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n  position: fixed;\n  background-color: var(--neutral-white);\n  border: 2px solid var(--neutral-light);\n  border-radius: #{$spacing-xxxs};\n  width: 700px;\n  max-width: 600px;\n  min-width: 200px;\n  padding: #{$spacing-none} #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n  z-index:  var(--zIndex);\n\n  @include shadow-level4();\n\n  transform: scale(0.95);\n  transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n  ::slotted(*) {\n    max-height: 80vh;\n    overflow: auto;\n    padding-right: #{$spacing-xs};\n  }\n}\n\n.modal.open .wrapper {\n  transform: scale(1);\n  opacity: 1;\n  visibility: visible;\n}\n\n.close {\n  justify-self: flex-end;\n  padding-top: #{$spacing-xxs};\n  background: none;\n  border: none;\n  cursor: pointer;\n\n  &.mobile {\n    display: none;\n  }\n\n  &.desktop {\n    display: flex;\n  }\n}\n\n@include mobile-only() {\n  .wrapper {\n    position: fixed;\n    bottom: #{$spacing-none};\n    width: 80%;\n    padding-top: #{$spacing-xxs};\n    padding-bottom: #{$spacing-none};\n    border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n    border-bottom: none;\n  }\n\n  .close {\n    align-items: center;\n    border-top: 1px dashed var(--neutral-light);\n    margin-top: #{$spacing-xxs};\n    padding: #{$spacing-xxs} #{$spacing-none};\n    justify-content: center;\n    width: 100%;\n\n    &.mobile {\n      display: flex;\n      gap: #{$spacing-mini};\n    }\n\n    &.desktop {\n      display: none;\n    }\n  }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property top to control modal top position.\n   * Default: 0px\n   */\n  @Prop() top?: number = 0;\n  /**\n   * Property bottom to control modal bottom position.\n   * Default: 0px\n   */\n  @Prop() bottom?: number = 0;\n  /**\n   * Property left to control modal left position.\n   * Default: 0px\n   */\n  @Prop() left?: number = 0;\n  /**\n   * Property right to control modal right position.\n   * Default: 0px\n   */\n  @Prop() right?: number = 0;\n  /**\n   * Defines the label for the close button when the modal is viewed on mobile.\n   * Default: Fechar\n   */\n  @Prop({ reflect: true }) mobileCloseLabel: string = 'Fechar';\n  /**\n   * Property zindex to control the z-index value of the component.\n   * Default: 100\n   */\n  @Prop({ reflect: true }) zindex: string = '100';\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  setOffset(name: string, value: number) {\n    this.styles = {\n      ...this.styles,\n      [`--${name}-offset`]: `${value}px`,\n    };\n  }\n\n  @Watch('top')\n  setTop() {\n    this.setOffset('top', this.top);\n  }\n\n  @Watch('bottom')\n  setBottom() {\n    this.setOffset('bottom', this.bottom);\n  }\n\n  @Watch('left')\n  setLeft() {\n    this.setOffset('left', this.left);\n  }\n\n  @Watch('right')\n  setRight() {\n    this.setOffset('right', this.right);\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setTop();\n    this.setBottom();\n    this.setLeft();\n    this.setRight();\n  }\n\n  private handleClose = () => {\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\" style={{ '--zIndex': this.zindex }}>\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            <button class=\"close desktop\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n            </button>\n            <slot></slot>\n            {/* Mobile button */}\n            <button class=\"close mobile\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n              <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n                {this.mobileCloseLabel}\n              </cura-paragraph>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-modal.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,ihEAAihE,CAAC;AACviE,wBAAe,YAAY;;MCMdA,WAAS;;;;;;QAsGZ,gBAAW,GAAG;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;oBApGuD,KAAK;0BAKtB,OAAO;mBAKxB,CAAC;sBAKE,CAAC;oBAKH,CAAC;qBAKA,CAAC;gCAK0B,QAAQ;sBAKlB,KAAK;sBAM7B,EAAE;;IAGpB,SAAS;QACP,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;YAChE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC;SACnE,CAAC;QAEF,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,GACvD,CAAC;KACH;IAED,SAAS,CAAC,IAAY,EAAE,KAAa;QACnC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,CAAC,KAAK,IAAI,SAAS,GAAG,GAAG,KAAK,IAAI,GACnC,CAAC;KACH;IAGD,MAAM;QACJ,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACjC;IAGD,SAAS;QACP,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;IAGD,OAAO;QACL,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACnC;IAGD,QAAQ;QACN,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACrC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D,CAAC;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,IACtE,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,sBAAsB,GAAG,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IACpF,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,qBAAqB,GAAG,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAQ,EACnG,4DAAK,KAAK,EAAC,SAAS,IAElB,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACrD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAa,CAC7D,EACT,8DAAa,EAEb,+DAAQ,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAa,EACjE,uEAAgB,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,IAC5D,IAAI,CAAC,gBAAgB,CACP,CACV,CACL,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraModal"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n  display: block;\n}\n\n.modal {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: var(--top-offset);\n  bottom: var(--bottom-offset);\n  left: var(--left-offset);\n  right: var(--right-offset);\n  z-index: -1;\n  margin-top: var(--offset-top);\n\n  &.open {\n    z-index:  var(--zIndex);\n\n    .backdrop,\n    .wrapper {\n      opacity: 1;\n      visibility: visible;\n      animation: fadeIn 0.3s ease-out;\n    }\n  }\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n  background-color: var(--background-color);\n  z-index:  calc(var(--zIndex) - 10);\n  animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n  position: fixed;\n  background-color: var(--neutral-white);\n  border: 2px solid var(--neutral-light);\n  border-radius: #{$spacing-xxxs};\n  max-width: 600px;\n  min-width: 200px;\n  padding: #{$spacing-none} #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n  z-index:  var(--zIndex);\n\n  @include shadow-level4();\n\n  transform: scale(0.95);\n  transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n  ::slotted(*) {\n    max-height: 80vh;\n    overflow: auto;\n    padding-right: #{$spacing-xs};\n  }\n}\n\n.modal.open .wrapper {\n  transform: scale(1);\n  opacity: 1;\n  visibility: visible;\n}\n\n.close {\n  justify-self: flex-end;\n  padding-top: #{$spacing-xxs};\n  background: none;\n  border: none;\n  cursor: pointer;\n\n  &.mobile {\n    display: none;\n  }\n\n  &.desktop {\n    display: flex;\n  }\n}\n\n@include mobile-only() {\n  .wrapper {\n    position: fixed;\n    bottom: #{$spacing-none};\n    width: 80%;\n    padding-top: #{$spacing-xxs};\n    padding-bottom: #{$spacing-none};\n    border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n    border-bottom: none;\n  }\n\n  .close {\n    align-items: center;\n    border-top: 1px dashed var(--neutral-light);\n    margin-top: #{$spacing-xxs};\n    padding: #{$spacing-xxs} #{$spacing-none};\n    justify-content: center;\n    width: 100%;\n\n    &.mobile {\n      display: flex;\n      gap: #{$spacing-mini};\n    }\n\n    &.desktop {\n      display: none;\n    }\n  }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property top to control modal top position.\n   * Default: 0px\n   */\n  @Prop() top?: number = 0;\n  /**\n   * Property bottom to control modal bottom position.\n   * Default: 0px\n   */\n  @Prop() bottom?: number = 0;\n  /**\n   * Property left to control modal left position.\n   * Default: 0px\n   */\n  @Prop() left?: number = 0;\n  /**\n   * Property right to control modal right position.\n   * Default: 0px\n   */\n  @Prop() right?: number = 0;\n  /**\n   * Defines the label for the close button when the modal is viewed on mobile.\n   * Default: Fechar\n   */\n  @Prop({ reflect: true }) mobileCloseLabel: string = 'Fechar';\n  /**\n   * Property zindex to control the z-index value of the component.\n   * Default: 100\n   */\n  @Prop({ reflect: true }) zindex: string = '100';\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  setOffset(name: string, value: number) {\n    this.styles = {\n      ...this.styles,\n      [`--${name}-offset`]: `${value}px`,\n    };\n  }\n\n  @Watch('top')\n  setTop() {\n    this.setOffset('top', this.top);\n  }\n\n  @Watch('bottom')\n  setBottom() {\n    this.setOffset('bottom', this.bottom);\n  }\n\n  @Watch('left')\n  setLeft() {\n    this.setOffset('left', this.left);\n  }\n\n  @Watch('right')\n  setRight() {\n    this.setOffset('right', this.right);\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setTop();\n    this.setBottom();\n    this.setLeft();\n    this.setRight();\n  }\n\n  private handleClose = () => {\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\" style={{ '--zIndex': this.zindex }}>\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            <button class=\"close desktop\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n            </button>\n            <slot></slot>\n            {/* Mobile button */}\n            <button class=\"close mobile\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n              <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n                {this.mobileCloseLabel}\n              </cura-paragraph>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-paragraph2.js

@@ -52,7 +52,7 @@ const CuraParagraph = /*@__PURE__*/ proxyCustomElement(class CuraParagraph exten
         };
     }
     render() {
-        return (h(Host, { key: '8363d3df5dcb93aab4452bfe67e16d5c6238bf1f', style: this.hostCSSProperties() }, h("p", { key: 'e69d42e093a182eda646c425c987d5f71f3d2041', style: this.styles, class: this.setsizeClass() }, h("slot", { key: '0402210f031bda68edee85a93043e2ae6347eee1' }))));
+        return (h(Host, { key: '2ca388b3d1c31588765768ece303decb6e421a81', style: this.hostCSSProperties() }, h("p", { key: '1f31f6b9831cceed88606754581f282a515e3598', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'f50ffaf10f933daac9e2ae901556bbfc62ac8a72' }))));
     }
     get host() { return this; }
     static get watchers() { return {

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

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

package/dist/components/cura-select2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './cura-icon2.js';
 import { d as defineCustomElement$1 } from './cura-label2.js';
 
-const curaSelectCss = ":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;user-select:none;text-align:left !important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-right:12px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field input{padding:0px 12px 0px 8px;cursor:pointer}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;max-height:80px}.wrapper.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.wrapper.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.wrapper.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.wrapper.transparent .helper-text{margin-top:0px}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black) !important}.wrapper:focus-within.selection .cura-input-field{border-radius:4px 4px 0px 0px}.wrapper.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker) !important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.wrapper.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.wrapper.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker) !important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.wrapper.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.wrapper.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.wrapper.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important}";
+const curaSelectCss = ":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;user-select:none;text-align:left !important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-right:9px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field .up-down-button{background-color:transparent;border:none}.wrapper .cura-input-field input{padding:0px 12px 0px 8px;cursor:pointer}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;max-height:80px}.wrapper.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.wrapper.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.wrapper.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.wrapper.transparent .helper-text{margin-top:0px}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black) !important}.wrapper:focus-within.selection .cura-input-field{border-radius:4px 4px 0px 0px}.wrapper.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker) !important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.wrapper.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.wrapper.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker) !important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.wrapper.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.wrapper.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.wrapper.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important}";
 const CuraSelectStyle0 = curaSelectCss;
 
 const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTMLElement {
@@ -11,6 +11,7 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
         this.__registerHost();
         this.__attachShadow();
         this.selected = createEvent(this, "selected", 7);
+        this.searchTermInput = createEvent(this, "searchTermInput", 7);
         this.internals = this.attachInternals();
         /**
          * Styles to be applied to the component.
@@ -81,10 +82,12 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
         this.value = '';
         this.mode = 'default';
         this.size = 'medium';
+        this.iconName = undefined;
         this.status = 'default';
         this.disabled = false;
         this.required = false;
         this.searchBehavior = false;
+        this.caseSensitive = true;
         this.isHovered = false;
         this.isFocused = false;
         this.isOpen = false;
@@ -93,38 +96,48 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
         this.textInput = '';
     }
     updateOptionHighlights(newActiveINdex) {
-        this.options.forEach((option, index) => option.active = index === newActiveINdex);
+        this.options.forEach((option, index) => (option.active = index === newActiveINdex));
     }
     /**
      * Filters the options based on the current input value.
      */
     filterOptions(newText) {
+        this.searchTermInput.emit(newText);
         if (!this.isOpen || !this.searchBehavior) {
             return;
         }
+        const removeAccents = (str) => {
+            return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+        };
+        let searchTerm = newText;
+        if (!this.caseSensitive) {
+            searchTerm = removeAccents(searchTerm).toLocaleLowerCase();
+        }
         this.options.forEach(option => {
-            var _a;
-            const optionValue = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
-            const isVisible = optionValue.includes(newText.toLocaleLowerCase());
+            let optionValue = option.textContent || '';
+            if (!this.caseSensitive) {
+                optionValue = removeAccents(optionValue === null || optionValue === void 0 ? void 0 : optionValue.toLowerCase());
+            }
+            const isVisible = optionValue.includes(searchTerm);
             option.style.display = isVisible ? 'block' : 'none';
         });
     }
     /**
-   * Callback for form association.
-   */
+     * Callback for form association.
+     */
     formAssociatedCallback(form) {
         form.ariaLabel = this.label;
     }
     /**
-   * Callback to restore the switch state from the form.
-   */
+     * Callback to restore the switch state from the form.
+     */
     formStateRestoreCallback(state) {
         this.textInput = state.value;
         this.updateSelectedOption();
     }
     /**
-   * Callback to reset the switch state when the form is reset.
-   */
+     * Callback to reset the switch state when the form is reset.
+     */
     formResetCallback() {
         this.textInput = '';
         this.clearSelectedAttributes();
@@ -132,8 +145,8 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
         this.internals.setValidity({});
     }
     /**
-    * Callback to update the switch's disabled state when the form's disabled state changes.
-    */
+     * Callback to update the switch's disabled state when the form's disabled state changes.
+     */
     formDisabledCallback(disabled) {
         this.disabled = disabled;
     }
@@ -188,9 +201,22 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
         const fontWeights = fonts.getWeights();
         this.styles = Object.assign(Object.assign({}, this.styles), { '--font-weight-medium': fontWeights.medium, '--font-weight-bold': fontWeights.bold, '--font-weight-regular': fontWeights.regular, '--font-color': fonts.getColor(), '--font-family': fonts.getFamily(), '--font-size': fonts.getSize() });
         const colorKeys = [
-            'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',
-            'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',
-            'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'
+            'primary-base',
+            'neutral-purewhite',
+            'neutral-white',
+            'neutral-black',
+            'neutral-medium',
+            'neutral-light',
+            'neutral-base',
+            'neutral-dark',
+            'success-dark',
+            'success-darker',
+            'success-lighter',
+            'error-lighter',
+            'error-dark',
+            'error-darker',
+            'error-base',
+            'info-base',
         ];
         colorKeys.forEach(key => {
             this.styles[`--${key}`] = colors.getColor(key);
@@ -270,19 +296,19 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
      * Renders the icon based on the component's status.
      */
     renderIcon() {
-        if (this.status === 'default')
+        if (this.status === 'default' && !this.iconName)
             return null;
-        const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
-        return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
+        const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
+        return h("cura-icon", { class: "feedback-icon", name: icon, iconset: "default", size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles });
     }
     render() {
-        return (h(Host, { key: '80cc2b0b4aa2ea8421cf2bee808b1c1d18dfd805', style: this.styles }, h("div", { key: '93d8b6c8a1c10d0ed7382349cad19713a5f9e27c', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'a7a60586c38e2f0fd746bf4b0d5b161fb506ba14', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '57903ed08819a70cd02267cccfb419fb47f3ef42', class: 'required' }, "* "))), h("div", { key: '252158e79c221c977b0015de743aa3df8843aa4b', class: {
+        return (h(Host, { key: 'c4d3b518ddf6b9498e3a038b42d96cc36ea5b9af', style: this.styles }, h("div", { key: 'b469ec6460df4faa9dbf33ae46efd25b16e8dede', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'b1e96f454e136f74a34d3fe2ad915a76b8892383', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'f6df4c9fd66179b157545354c9d7bce3a1965383', class: "required" }, "* "))), h("div", { key: '3c99013ba59cbc7520fcd9e54e4911be88e257e8', class: {
                 'cura-input-field': true,
-                'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: 'b27fb9017445068047eef3b58bfbf9d365d1e5fb', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("cura-icon", { key: 'a90e58a4e11de658595208dfd9a2797e1adca140', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: '70ed24f2b6657b41d5afc914c0ae9a9293e941ba', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'd3f8934cd5a8ad0af564559925d2e5d8cfc356f6' })), this.isOpen && (h("div", { key: 'abd2100c9a4c63c1456d19eee808c43ca0b647f2', class: {
-                'menu': true,
-                'open': this.isOpen
-            } }, h("slot", { key: 'c6c4129a91e3e5c71897e96a07533754333c4ee6', name: 'option' }))))));
+                'open': this.isOpen,
+            } }, this.renderIcon(), h("input", { key: '5c4cca3aa11ca5a43679551ef0db5d3b4a2672c1', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: '0e4ae1fc33090cb1c2a5f6616302262093c709f3', class: "up-down-button" }, h("cura-icon", { key: '7aa46c48d670725d6010e00ff74772dd76f04358', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: 'b37bbce2d092b368509778cb39e830fbfba40107', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'b8090f03acc7d34e75088cdd8b7f375b2be21aaf' })), this.isOpen && (h("div", { key: '4d279e833a3c4311972b11c259d616b7480fc5b5', class: {
+                menu: true,
+                open: this.isOpen,
+            } }, h("slot", { key: '0c20c0bbfb9ed727825bb6cc7e06ab671350d37b', name: "option" }))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -298,10 +324,12 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
         "value": [1537],
         "mode": [513],
         "size": [513],
+        "iconName": [1, "icon-name"],
         "status": [1537],
         "disabled": [516],
         "required": [516],
         "searchBehavior": [516, "search-behavior"],
+        "caseSensitive": [516, "case-sensitive"],
         "isHovered": [32],
         "isFocused": [32],
         "isOpen": [32],

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

@@ -1 +1 @@
-{"file":"cura-select2.js","mappings":"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","names":[],"sources":["src/components/forms/cura-select/cura-select.scss?tag=cura-select&encapsulation=shadow","src/components/forms/cura-select/cura-select.tsx"],"sourcesContent":["@import \"../../../scss/mixins/forms.scss\";\n\n:host {\n  display: block;\n  position: relative;\n  font-family: var(--font-family);\n}\n\n.wrapper {\n  width: 100%;\n  user-select: none;\n  text-align: left !important;\n\n  @include cura-label();\n  @include helper-text();\n\n  @include cura-input-field() {\n    .up-down-icon {\n      order: 3;\n      padding-right: 12px;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    input {\n      padding: 0px 12px 0px 8px;\n      cursor: pointer;\n    }\n\n    &.open {\n      border-radius: 4px 4px 0 0 !important;\n    }\n\n\n  }\n\n  @include cura-input-transparent();\n\n  @include cura-forms-hover();\n  @include cura-forms-focused();\n\n\n  @include cura-forms-success();\n  @include cura-forms-error();\n\n  @include cura-forms-small() {\n    &.label {.menu {top: 53px;} }\n    .menu { top: 33px; }\n  }\n\n  @include cura-forms-medium() {\n    &.label {.menu { top: 61px;} }\n    .menu { top: 40px; }\n  }\n\n  @include cura-forms-large() {\n    &.label {.menu { top: 69px } }\n    .menu {top: 47px; }\n  }\n\n  @include cura-forms-disabled();\n\n}\n\n.required {\n  color: red;\n}\n\n.menu {\n  position: absolute;\n  left: 0;\n  right: -1px;\n  background: #fff;\n  border: 2px solid var(--neutral-light);\n  border-radius: 4px;\n  z-index: 1000;\n  max-height: 285px;\n  overflow: hidden;\n  border-top: transparent;\n  align-items: center;\n\n  scrollbar-color: var(--neutral-medium) var(--neutral-black-20);\n  overflow-y: auto;\n  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n  &.open {\n    border-radius: 0 !important;\n  }\n}\n\n","import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select',\n  styleUrl: 'cura-select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraSelect {\n  /**\n   * The label text for the select component.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) label: string = '';\n\n  /**\n   * Placeholder text for the input field.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n\n  /**\n   * Current value of the select component.\n   * Reflects as an attribute in the DOM and is mutable.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Display mode of the select component.\n   * Can be 'default' or 'transparent'.\n   */\n  @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n  /**\n   * Size of the select component.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Status of the select component.\n   * Can be 'success', 'error', or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the select component is required.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Enable / Disable search at options by term.\n   * Default: false\n   */\n  @Prop({ reflect: true}) searchBehavior: boolean = false;\n\n  /**\n   * Internal state: Whether the input is hovered.\n   * Default: false\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Internal state: Whether the input is focused.\n   * Default: false\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal state: Whether the dropdown menu is open.\n   * Default: false\n   */\n  @State() isOpen: boolean = false;\n\n  /**\n   * Internal state: Collection of options for the select component.\n   */\n  @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n\n  @State() activeIndex = -1\n\n  @Watch('activeIndex')\n  updateOptionHighlights(newActiveINdex: number) {\n    this.options.forEach((option, index) => (option as any).active = index === newActiveINdex);\n  }\n\n  @State() textInput = ''\n\n  @Watch('textInput')\n  /**\n   * Filters the options based on the current input value.\n   */\n  filterOptions(newText) {\n    if (!this.isOpen || !this.searchBehavior) {\n      return\n    }\n\n    this.options.forEach(option => {\n      const optionValue = option.textContent?.toLowerCase() || '';\n      const isVisible = optionValue.includes(newText.toLocaleLowerCase())\n      option.style.display = isVisible ? 'block' : 'none';\n    });\n  }\n\n  /**\n   * Reference to the host element of the component.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Event emitted when an option is selected.\n   */\n  @Event() selected: EventEmitter;\n\n  /**\n   * MutationObserver to watch changes in the component.\n   */\n  mutationObserver: MutationObserver;\n\n  /**\n   * Styles to be applied to the component.\n   */\n  styles = {};\n\n  /**\n   * Theme object containing font and color information.\n   */\n  theme = window.CuraAPI.theme;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n * Callback for form association.\n */\n  formAssociatedCallback(form: { ariaLabel: string; }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n * Callback to restore the switch state from the form.\n */\n  formStateRestoreCallback(state: { value: string }) {\n    this.textInput = state.value;\n    this.updateSelectedOption();\n  }\n\n  /**\n * Callback to reset the switch state when the form is reset.\n */\n  formResetCallback() {\n    this.textInput = '';\n    this.clearSelectedAttributes()\n    this.internals.setFormValue('');\n    this.internals.setValidity({});\n  }\n\n  /**\n  * Callback to update the switch's disabled state when the form's disabled state changes.\n  */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Lifecycle method called before the component is rendered.\n   * Initializes the options for the select component.\n   */\n  componentWillLoad() {\n    this.initializeOptions();\n  }\n  /**\n   * Lifecycle method called after the component is rendered.\n   * Initializes select-related functionality.\n   */\n  componentDidLoad() {\n    this.setupMutationObserver();\n  }\n  /**\n   * Lifecycle method called when the component is connected to the DOM.\n   * Applies styles based on the theme.\n   */\n  connectedCallback() {\n    this.applyStyles();\n  }\n  /**\n   * Lifecycle method called when the component is disconnected from the DOM.\n   * Disconnects the MutationObserver if it exists.\n   */\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  initializeOptions() {\n    this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n    this.options.forEach(option => {\n      option.setAttribute('size', this.size);\n\n      const isSelected = this.value === option.value\n      option.setAttribute('selected', JSON.stringify(isSelected));\n\n      if (isSelected) {\n        this.value = option.value\n        this.internals.setFormValue(option.value)\n      }\n    });\n\n    this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent || this.textInput\n  }\n  /**\n   * Applies styles to the component based on the theme.\n   */\n  applyStyles() {\n    const { fonts, colors } = this.theme;\n    const fontWeights = fonts.getWeights();\n\n    this.styles = {\n      ...this.styles,\n      '--font-weight-medium': fontWeights.medium,\n      '--font-weight-bold': fontWeights.bold,\n      '--font-weight-regular': fontWeights.regular,\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-size': fonts.getSize(),\n    };\n\n    const colorKeys = [\n      'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n      'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n      'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'\n    ];\n\n    colorKeys.forEach(key => {\n      this.styles[`--${key}`] = colors.getColor(key);\n    });\n  }\n  /**\n   * Sets up a MutationObserver to watch for changes in the component.\n   */\n  setupMutationObserver() {\n    this.mutationObserver = new MutationObserver(this.handleMutations);\n    this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n  }\n  /**\n   * Handles mutations observed by the MutationObserver.\n   * Updates the selected option or filters options based on the mutation type.\n   */\n  handleMutations = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        if (mutation.attributeName === 'selected') this.updateSelectedOption();\n      }\n    });\n  };\n  /**\n   * Handles the selection of an option.\n   */\n  onOptiselected = (event: Event) => {\n    const selectedOption = event.target as HTMLElement;\n    this.clearSelectedAttributes();\n    selectedOption.setAttribute('selected', 'true');\n  };\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.clearSelectedAttributes();\n\n    const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n    if(!selectedOption) {\n      return\n    }\n\n    selectedOption.setAttribute('selected', 'true');\n  }\n\n  updateSelectedOption() {\n    const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n    if (!selectedOptionElement) {\n      return\n    }\n\n    this.value = selectedOptionElement.value\n    this.internals.setFormValue(this.value)\n\n    if (this.textInput !== selectedOptionElement.textContent) {\n      this.textInput = selectedOptionElement.textContent ;\n      this.isOpen = false;\n      this.selected.emit(selectedOptionElement.value);\n    }\n  }\n\n  /**\n   * Clears the 'selected' attribute from all options.\n   */\n  clearSelectedAttributes() {\n    this.options.forEach(option => option.removeAttribute('selected'));\n  }\n\n  handleKeyNavigation = (event: KeyboardEvent) => {\n    const { code: keyCode } = event\n\n    if (!this.isOpen && keyCode === 'ArrowDown') {\n      this.isOpen = true\n      this.activeIndex = 0\n\n      return\n    }\n\n    if (keyCode === 'ArrowDown') {\n      event.preventDefault();\n      this.updateActiveIndex(1);\n    }\n\n    if (keyCode === 'ArrowUp') {\n      event.preventDefault();\n      this.updateActiveIndex(-1);\n    }\n\n    if (keyCode === 'Enter' || keyCode === 'Space') {\n      this.options[this.activeIndex]?.click();\n    }\n\n    if (keyCode === 'Escape') {\n      this.isOpen = false\n    }\n  }\n\n  updateActiveIndex(direction: number) {\n    if (this.options.length === 0) return;\n    this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n  }\n\n  handleInputChange = (e: Event) => {\n    this.textInput = (e.target as HTMLInputElement).value;\n    this.isOpen = this.textInput.length > 0;\n    this.internals.setFormValue(this.textInput);\n  };\n\n\n  getClasses() {\n    return {\n      wrapper: true,\n      label: !!this.label,\n      disabled: this.disabled,\n      transparent: this.mode === 'transparent',\n      [this.size.toLowerCase()]: true,\n      [this.status.toLowerCase()]: true,\n    };\n  }\n\n  /**\n   * Determines the color based on the item type and component state.\n   */\n  getColor(item: 'label' | 'text' | 'icon') {\n    if (this.disabled) return 'neutral-medium';\n\n    const isStatusDefault = this.status === 'default';\n    const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n    if (item === 'label') {\n      if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n      return 'neutral-dark';\n    }\n\n    if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n    if (this.status === 'success') return 'success-dark';\n    if (this.status === 'error') return 'error-dark';\n\n    return 'neutral-dark';\n  }\n\n  /**\n   * Renders the icon based on the component's status.\n   */\n  renderIcon() {\n    if (this.status === 'default') return null;\n    const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n    return (\n      <cura-icon\n        class='feedback-icon'\n        name={icon}\n        iconset='default'\n        size={this.size === 'large' ? 20 : 16}\n        color={this.getColor('icon')}\n        style={this.styles}\n      />\n    );\n  }\n\n  handleClick = (event: MouseEvent) => {\n    if (this.disabled) return event.preventDefault();\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n    this.isOpen = !this.isOpen;\n  };\n\n\n  render() {\n    return (\n      <Host style={this.styles}>\n        <div\n          class={this.getClasses()}\n          onMouseEnter={() => (this.isHovered = true)}\n          onMouseLeave={() => (this.isHovered = false)}\n          onClick={this.handleClick}\n        >\n          {this.label && (\n            <cura-label\n              class='label'\n              weight='bold'\n              size={this.size === 'large' ? 'small' : 'xsmall'}\n              color={this.getColor('label')}\n            >\n              {this.label} {this.required && <span class='required'>* </span>}\n            </cura-label>\n          )}\n\n          <div class={{\n            'cura-input-field': true,\n            'open': this.isOpen\n          }}>\n            {this.renderIcon()}\n            <input\n              type=\"text\"\n              autocomplete='off'\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              onKeyDown={this.handleKeyNavigation}\n              aria-required={String(this.required)}\n              aria-disabled={String(this.disabled)}\n              aria-invalid={String(this.status === 'error')}\n              onInput={this.handleInputChange}\n              style={this.styles}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              value={this.textInput}\n              readonly={this.searchBehavior ? null : true}\n            />\n            <cura-icon\n              name={this.isOpen ? 'up' : 'down'}\n              class=\"up-down-icon\"\n              color={this.disabled ? 'neutral-dark' : 'primary-base'}\n              size={16}\n              iconset='default'\n            />\n          </div>\n          <cura-label\n            class=\"helper-text\"\n            size='xsmall'\n            color={this.getColor('text')}\n            weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n            <slot></slot>\n          </cura-label>\n          {this.isOpen && (\n            <div class={{\n              'menu': true,\n              'open': this.isOpen\n            }}>\n              <slot name='option'></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-select2.js","mappings":"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","names":[],"sources":["src/components/forms/cura-select/cura-select.scss?tag=cura-select&encapsulation=shadow","src/components/forms/cura-select/cura-select.tsx"],"sourcesContent":["@import '../../../scss/mixins/forms.scss';\n\n:host {\n  display: block;\n  position: relative;\n  font-family: var(--font-family);\n}\n\n.wrapper {\n  width: 100%;\n  user-select: none;\n  text-align: left !important;\n\n  @include cura-label();\n  @include helper-text();\n\n  @include cura-input-field() {\n    .up-down-icon {\n      order: 3;\n      padding-right: 9px;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    .up-down-button {\n      background-color: transparent;\n      border: none;\n    }\n\n    input {\n      padding: 0px 12px 0px 8px;\n      cursor: pointer;\n    }\n\n    &.open {\n      border-radius: 4px 4px 0 0 !important;\n    }\n  }\n\n  @include cura-input-transparent();\n\n  @include cura-forms-hover();\n  @include cura-forms-focused();\n\n  @include cura-forms-success();\n  @include cura-forms-error();\n\n  @include cura-forms-small() {\n    &.label {\n      .menu {\n        top: 53px;\n      }\n    }\n    .menu {\n      top: 33px;\n    }\n  }\n\n  @include cura-forms-medium() {\n    &.label {\n      .menu {\n        top: 61px;\n      }\n    }\n    .menu {\n      top: 40px;\n    }\n  }\n\n  @include cura-forms-large() {\n    &.label {\n      .menu {\n        top: 69px;\n      }\n    }\n    .menu {\n      top: 47px;\n    }\n  }\n\n  @include cura-forms-disabled();\n}\n\n.required {\n  color: red;\n}\n\n.menu {\n  position: absolute;\n  left: 0;\n  right: -1px;\n  background: #fff;\n  border: 2px solid var(--neutral-light);\n  border-radius: 4px;\n  z-index: 1000;\n  max-height: 285px;\n  overflow: hidden;\n  border-top: transparent;\n  align-items: center;\n\n  scrollbar-color: var(--neutral-medium) var(--neutral-black-20);\n  overflow-y: auto;\n  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n  &.open {\n    border-radius: 0 !important;\n  }\n}\n","import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select',\n  styleUrl: 'cura-select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraSelect {\n  /**\n   * The label text for the select component.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) label: string = '';\n\n  /**\n   * Placeholder text for the input field.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n\n  /**\n   * Current value of the select component.\n   * Reflects as an attribute in the DOM and is mutable.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Display mode of the select component.\n   * Can be 'default' or 'transparent'.\n   */\n  @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n  /**\n   * Size of the select component.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @Prop() iconName?: string\n\n  /**\n   * Status of the select component.\n   * Can be 'success', 'error', or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the select component is required.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Enable / Disable search at options by term.\n   * Default: false\n   */\n  @Prop({ reflect: true }) searchBehavior: boolean = false;\n\n  /**\n   * The search will be sensitive to accents.\n   * Default: true\n   */\n  @Prop({ reflect: true }) caseSensitive: boolean = true;\n\n  /**\n   * Internal state: Whether the input is hovered.\n   * Default: false\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Internal state: Whether the input is focused.\n   * Default: false\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal state: Whether the dropdown menu is open.\n   * Default: false\n   */\n  @State() isOpen: boolean = false;\n\n  /**\n   * Internal state: Collection of options for the select component.\n   */\n  @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n  @State() activeIndex = -1;\n\n  @Watch('activeIndex')\n  updateOptionHighlights(newActiveINdex: number) {\n    this.options.forEach((option, index) => ((option as any).active = index === newActiveINdex));\n  }\n\n  @State() textInput = '';\n\n  @Watch('textInput')\n  /**\n   * Filters the options based on the current input value.\n   */\n  filterOptions(newText) {\n    this.searchTermInput.emit(newText);\n\n    if (!this.isOpen || !this.searchBehavior) {\n      return;\n    }\n\n    const removeAccents = (str: string) => {\n      return str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '');\n    };\n\n    let searchTerm = newText;\n    if (!this.caseSensitive) {\n      searchTerm = removeAccents(searchTerm).toLocaleLowerCase();\n    }\n\n    this.options.forEach(option => {\n      let optionValue = option.textContent || '';\n      if (!this.caseSensitive) {\n        optionValue = removeAccents(optionValue?.toLowerCase());\n      }\n      const isVisible = optionValue.includes(searchTerm);\n      option.style.display = isVisible ? 'block' : 'none';\n    });\n  }\n\n  /**\n   * Reference to the host element of the component.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Event emitted when an option is selected.\n   */\n  @Event() selected: EventEmitter;\n\n  /**\n   * Event emitted when an option is searched.\n   */\n  @Event() searchTermInput: EventEmitter;\n\n  /**\n   * MutationObserver to watch changes in the component.\n   */\n  mutationObserver: MutationObserver;\n\n  /**\n   * Styles to be applied to the component.\n   */\n  styles = {};\n\n  /**\n   * Theme object containing font and color information.\n   */\n  theme = window.CuraAPI.theme;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Callback for form association.\n   */\n  formAssociatedCallback(form: { ariaLabel: string }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n   * Callback to restore the switch state from the form.\n   */\n  formStateRestoreCallback(state: { value: string }) {\n    this.textInput = state.value;\n    this.updateSelectedOption();\n  }\n\n  /**\n   * Callback to reset the switch state when the form is reset.\n   */\n  formResetCallback() {\n    this.textInput = '';\n    this.clearSelectedAttributes();\n    this.internals.setFormValue('');\n    this.internals.setValidity({});\n  }\n\n  /**\n   * Callback to update the switch's disabled state when the form's disabled state changes.\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Lifecycle method called before the component is rendered.\n   * Initializes the options for the select component.\n   */\n  componentWillLoad() {\n    this.initializeOptions();\n  }\n  /**\n   * Lifecycle method called after the component is rendered.\n   * Initializes select-related functionality.\n   */\n  componentDidLoad() {\n    this.setupMutationObserver();\n  }\n  /**\n   * Lifecycle method called when the component is connected to the DOM.\n   * Applies styles based on the theme.\n   */\n  connectedCallback() {\n    this.applyStyles();\n  }\n  /**\n   * Lifecycle method called when the component is disconnected from the DOM.\n   * Disconnects the MutationObserver if it exists.\n   */\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  initializeOptions() {\n    this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n    this.options.forEach(option => {\n      option.setAttribute('size', this.size);\n\n      const isSelected = this.value === option.value;\n      option.setAttribute('selected', JSON.stringify(isSelected));\n\n      if (isSelected) {\n        this.value = option.value;\n        this.internals.setFormValue(option.value);\n      }\n    });\n\n    this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent || this.textInput;\n  }\n  /**\n   * Applies styles to the component based on the theme.\n   */\n  applyStyles() {\n    const { fonts, colors } = this.theme;\n    const fontWeights = fonts.getWeights();\n\n    this.styles = {\n      ...this.styles,\n      '--font-weight-medium': fontWeights.medium,\n      '--font-weight-bold': fontWeights.bold,\n      '--font-weight-regular': fontWeights.regular,\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-size': fonts.getSize(),\n    };\n\n    const colorKeys = [\n      'primary-base',\n      'neutral-purewhite',\n      'neutral-white',\n      'neutral-black',\n      'neutral-medium',\n      'neutral-light',\n      'neutral-base',\n      'neutral-dark',\n      'success-dark',\n      'success-darker',\n      'success-lighter',\n      'error-lighter',\n      'error-dark',\n      'error-darker',\n      'error-base',\n      'info-base',\n    ];\n\n    colorKeys.forEach(key => {\n      this.styles[`--${key}`] = colors.getColor(key);\n    });\n  }\n  /**\n   * Sets up a MutationObserver to watch for changes in the component.\n   */\n  setupMutationObserver() {\n    this.mutationObserver = new MutationObserver(this.handleMutations);\n    this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n  }\n  /**\n   * Handles mutations observed by the MutationObserver.\n   * Updates the selected option or filters options based on the mutation type.\n   */\n  handleMutations = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        if (mutation.attributeName === 'selected') this.updateSelectedOption();\n      }\n    });\n  };\n  /**\n   * Handles the selection of an option.\n   */\n  onOptiselected = (event: Event) => {\n    const selectedOption = event.target as HTMLElement;\n    this.clearSelectedAttributes();\n    selectedOption.setAttribute('selected', 'true');\n  };\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.clearSelectedAttributes();\n\n    const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n    if (!selectedOption) {\n      return;\n    }\n\n    selectedOption.setAttribute('selected', 'true');\n  }\n\n  updateSelectedOption() {\n    const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n    if (!selectedOptionElement) {\n      return;\n    }\n\n    this.value = selectedOptionElement.value;\n    this.internals.setFormValue(this.value);\n\n    if (this.textInput !== selectedOptionElement.textContent) {\n      this.textInput = selectedOptionElement.textContent;\n      this.isOpen = false;\n      this.selected.emit(selectedOptionElement.value);\n    }\n  }\n\n  /**\n   * Clears the 'selected' attribute from all options.\n   */\n  clearSelectedAttributes() {\n    this.options.forEach(option => option.removeAttribute('selected'));\n  }\n\n  handleKeyNavigation = (event: KeyboardEvent) => {\n    const { code: keyCode } = event;\n\n    if (!this.isOpen && keyCode === 'ArrowDown') {\n      this.isOpen = true;\n      this.activeIndex = 0;\n\n      return;\n    }\n\n    if (keyCode === 'ArrowDown') {\n      event.preventDefault();\n      this.updateActiveIndex(1);\n    }\n\n    if (keyCode === 'ArrowUp') {\n      event.preventDefault();\n      this.updateActiveIndex(-1);\n    }\n\n    if (keyCode === 'Enter' || keyCode === 'Space') {\n      this.options[this.activeIndex]?.click();\n    }\n\n    if (keyCode === 'Escape') {\n      this.isOpen = false;\n    }\n  };\n\n  updateActiveIndex(direction: number) {\n    if (this.options.length === 0) return;\n    this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n  }\n\n  handleInputChange = (e: Event) => {\n    this.textInput = (e.target as HTMLInputElement).value;\n    this.isOpen = this.textInput.length > 0;\n    this.internals.setFormValue(this.textInput);\n  };\n\n  getClasses() {\n    return {\n      wrapper: true,\n      label: !!this.label,\n      disabled: this.disabled,\n      transparent: this.mode === 'transparent',\n      [this.size.toLowerCase()]: true,\n      [this.status.toLowerCase()]: true,\n    };\n  }\n\n  /**\n   * Determines the color based on the item type and component state.\n   */\n  getColor(item: 'label' | 'text' | 'icon') {\n    if (this.disabled) return 'neutral-medium';\n\n    const isStatusDefault = this.status === 'default';\n    const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n    if (item === 'label') {\n      if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n      return 'neutral-dark';\n    }\n\n    if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n    if (this.status === 'success') return 'success-dark';\n    if (this.status === 'error') return 'error-dark';\n\n    return 'neutral-dark';\n  }\n\n  /**\n   * Renders the icon based on the component's status.\n   */\n  renderIcon() {\n    if (this.status === 'default' && !this.iconName) return null;\n    const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];\n    return <cura-icon class=\"feedback-icon\" name={icon} iconset=\"default\" size={this.size === 'large' ? 20 : 16} color={this.getColor('icon')} style={this.styles} />;\n  }\n\n  handleClick = (event: MouseEvent) => {\n    if (this.disabled) return event.preventDefault();\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    return (\n      <Host style={this.styles}>\n        <div class={this.getClasses()} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)} onClick={this.handleClick}>\n          {this.label && (\n            <cura-label class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'small' : 'xsmall'} color={this.getColor('label')}>\n              {this.label} {this.required && <span class=\"required\">* </span>}\n            </cura-label>\n          )}\n\n          <div\n            class={{\n              'cura-input-field': true,\n              'open': this.isOpen,\n            }}\n          >\n            {this.renderIcon()}\n            <input\n              type=\"text\"\n              autocomplete=\"off\"\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              onKeyDown={this.handleKeyNavigation}\n              aria-required={String(this.required)}\n              aria-disabled={String(this.disabled)}\n              aria-invalid={String(this.status === 'error')}\n              onInput={this.handleInputChange}\n              style={this.styles}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              value={this.textInput}\n              readonly={this.searchBehavior ? null : true}\n            />\n            <button class=\"up-down-button\">\n              <cura-icon name={this.isOpen ? 'up' : 'down'} class=\"up-down-icon\" color={this.disabled ? 'neutral-dark' : 'primary-base'} size={16} iconset=\"default\" />\n            </button>\n          </div>\n          <cura-label class=\"helper-text\" size=\"xsmall\" color={this.getColor('text')} weight={this.mode === 'transparent' ? 'bold' : 'regular'}>\n            <slot></slot>\n          </cura-label>\n          {this.isOpen && (\n            <div\n              class={{\n                menu: true,\n                open: this.isOpen,\n              }}\n            >\n              <slot name=\"option\"></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-stepper.js

@@ -117,7 +117,7 @@ const CuraStepper$1 = /*@__PURE__*/ proxyCustomElement(class CuraStepper extends
         return (h("div", { class: "container", style: this.styles }, h("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
     }
     render() {
-        return h(Host, { key: 'a3c23a43dc82cba74b777a7e28ae7de1632ec95d' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
+        return h(Host, { key: 'a6562de52fefff80eb2d310555ce56956cce64d9' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
     }
     get host() { return this; }
     static get style() { return CuraStepperStyle0; }

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

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

package/dist/components/cura-switch.js

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