@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/esm/cura-icons-view.entry.js

@@ -1,31 +1,32 @@
-import { r as registerInstance, h, H as Host } from './index-81f1a268.js';
-import { i as iconSizes, m as microIcons } from './cura-icon.definitions-a63d1862.js';
+import { r as registerInstance, h, H as Host } from './index-b6c443d5.js';
+import { i as iconSizes, m as microIcons } from './cura-icon.definitions-aaa4e80f.js';
 
-const iconsetdefaulticons = ["360", "accessibility", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "currency", "delete", "desktop", "doc", "down", "download", "duplicate", "edit", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "swap", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
+const iconsetdefaulticons = ["360", "accessibility", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "contacts", "currency", "delete", "desktop", "doc", "down", "download", "duplicate", "edit", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCancel", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "swap", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
 
-const curaIconsViewCss = ":host{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;-ms-flex-align:center;align-items:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px;margin:8px 0}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#2d2d2d;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;width:105px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;-ms-flex-align:center;align-items:center;margin-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;}.icons .icon cura-label{margin-top:8px}.icons .icon cura-paragraph{margin-top:4px}";
+const curaIconsViewCss = ":host{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:flex;align-items:center}.iconSizes .size{display:flex;flex-direction:column;text-align:center;align-items:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px;margin:8px 0}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#2d2d2d;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:flex;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;transition:opacity 0.2s linear;width:105px;display:flex;flex-direction:column;text-align:center;align-items:center;margin-bottom:16px;box-sizing:border-box;}.icons .icon cura-label{margin-top:8px}.icons .icon cura-paragraph{margin-top:4px}";
+const CuraIconsViewStyle0 = curaIconsViewCss;
 
 const CuraIconsView = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sizes = Object.keys(iconSizes).filter(key => key !== 'default');
-    this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
-    this.setSelected = (icon) => {
-      this.selected = icon;
-    };
-    this.selected = iconsetdefaulticons[0];
-  }
-  connectedCallback() {
-    this.sizes.unshift(this.sizes.pop());
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "iconDetail" }, h("cura-heading", { size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", null, this.selected)), h("div", { class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-      h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-      h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
-      h("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sizes = Object.keys(iconSizes).filter(key => key !== 'default');
+        this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
+        this.setSelected = (icon) => {
+            this.selected = icon;
+        };
+        this.selected = iconsetdefaulticons[0];
+    }
+    connectedCallback() {
+        this.sizes.unshift(this.sizes.pop());
+    }
+    render() {
+        return (h(Host, { key: '57820e2608c03f54b58656602ca329c7166e142e' }, h("div", { key: '47fb932e5b2c0876f58fde68b88e30193e14b590', class: "iconDetail" }, h("cura-heading", { key: 'b4ad008b60026ac7ceccee16c68276e9bef114cb', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '6634d3ae9cf33df1942563e44e72f470199725e5' }, this.selected)), h("div", { key: '8c565d1b3714dc5b1aad971e408cab340a4aca46', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: 'd979d1169689f583900d85d592c29bb2869ff62a', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: '0ed5c55f057bcdea8de3bdaa1d2f45a516763d95', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
+            h("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
+    }
 };
-CuraIconsView.style = curaIconsViewCss;
+CuraIconsView.style = CuraIconsViewStyle0;
 
 export { CuraIconsView as cura_icons_view };
 

package/dist/esm/cura-icons-view.entry.js.map

@@ -1 +1 @@
-{"file":"cura-icons-view.entry.js","mappings":"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","names":[],"sources":["./src/assets/icons/iconset-default-list.ts","./src/components/cura-icons-view/cura-icons-view.scss?tag=cura-icons-view&encapsulation=shadow","./src/components/cura-icons-view/cura-icons-view.tsx"],"sourcesContent":["export default [\"360\",\"accessibility\",\"addUser\",\"airdrop\",\"alertCircle\",\"alertTriangle\",\"arrowDown\",\"arrowDownCircle\",\"arrowLeft\",\"arrowLeftCircle\",\"arrowRight\",\"arrowRightCircle\",\"arrowUp\",\"arrowUpCircle\",\"attach\",\"avatarF\",\"avatarM\",\"biometry\",\"bloodGroup\",\"calendar\",\"cam\",\"camOff\",\"central\",\"chatCircle\",\"check\",\"checkBadge\",\"checkCircle\",\"checkDouble\",\"clock\",\"close\",\"closeCircle\",\"collapse\",\"config\",\"currency\",\"delete\",\"desktop\",\"doc\",\"down\",\"download\",\"duplicate\",\"edit\",\"exam\",\"examDoc\",\"expand\",\"facebook\",\"fileBmp\",\"fileJpg\",\"filePdf\",\"filePng\",\"fileUpload\",\"fileXls\",\"filter\",\"fullscreen\",\"gallery\",\"geotag\",\"geotagUnity\",\"geotagUnityGroup\",\"google\",\"graph\",\"healthPlan\",\"heart\",\"height\",\"height2\",\"home\",\"horizontalList\",\"imageUp\",\"infoCircle\",\"instagram\",\"key\",\"lamp\",\"language\",\"language2\",\"languageEN\",\"languagePT\",\"lattes\",\"left\",\"like\",\"link\",\"linkExternal\",\"linkedin\",\"list\",\"login\",\"logout\",\"mail\",\"maintenance\",\"medDoc\",\"medEspec\",\"medImg\",\"medUser\",\"medical\",\"menuHamburguer\",\"menuKebab\",\"menuMeatballs\",\"mic\",\"micOff\",\"minus\",\"minusCircle\",\"minusSquare\",\"mobile\",\"news\",\"notification\",\"npsDeslike\",\"npsHate\",\"npsLike\",\"npsLove\",\"npsNeutral\",\"order\",\"partner\",\"phone\",\"play\",\"plus\",\"plusCircle\",\"plusSquare\",\"print\",\"profile\",\"profileCircle\",\"questionCircle\",\"questionSquare\",\"range\",\"reload\",\"ribbon\",\"right\",\"schedule\",\"scheduleCheck\",\"scheduleHistorico\",\"search\",\"secure\",\"share\",\"siren\",\"sound\",\"soundOff\",\"subItem\",\"swap\",\"target\",\"team\",\"telegram\",\"twitter\",\"unLink\",\"unSecure\",\"unity\",\"unlike\",\"up\",\"upload\",\"verticalList\",\"viewFalse\",\"viewTrue\",\"weight\",\"whatsapp\",\"wifi\",\"wifiOff\",\"youtube\",\"zoomIn\",\"zoomOut\"];",":host {\n  display: block;\n  padding: 24px;\n  font-family: 'Roboto', Arial, Helvetica, sans-serif;\n}\n\n.iconDetail {\n  display: block;\n}\n\n.iconSizes {\n  display: flex;\n  align-items: center;\n\n\n  .size {\n    display: flex;\n    flex-direction: column;\n    text-align: center;\n    align-items: center;\n    margin-right: 9px;\n    padding: 8px;\n\n    &:last-child { margin-right: 0; }\n    span {\n      font-size: 10px;\n      margin: 8px 0;\n    }\n  }\n\n  &.invert {\n    margin-top: 12px;\n\n    .size {\n      background-color: #2d2d2d;\n      color: #F6F6F6;\n      border-radius: 3px;\n    }\n  }\n}\n\n.icons {\n  margin-top: 28px;\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  .icon {\n    position: relative;\n    padding: 4px;\n    cursor: pointer;\n    opacity: .6;\n    transition: opacity .2s linear;\n    width: 105px;\n    display: flex;\n    flex-direction: column;\n    text-align: center;\n    align-items: center;\n    margin-bottom: 16px;\n    box-sizing: border-box;\n    cura-label {\n      margin-top: 8px;\n    }\n    cura-paragraph {\n      margin-top: 4px;\n    }\n    /* &.selected {\n      transform: scale(1.2);\n    } */\n  }\n}\n\n","import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { microIcons, iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = iconsetdefaulticons[0];\n\n  connectedCallback() {\n    this.sizes.unshift(this.sizes.pop());\n  }\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n              <cura-icon\n                name={icon}\n                size=\"32\"\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n              <cura-label\n                size=\"xsmall\"\n                weight={icon === this.selected ? 'bold' : 'regular'}\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n              { !microIcons.includes(icon) ? '' :\n                <cura-paragraph\n                  color='success-dark'\n                  size=\"xsmall\"\n                  margin-block=\"0px\"\n                  line-height='100%'>MICRO</cura-paragraph>\n              }\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-icons-view.entry.js","mappings":"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","names":[],"sources":["src/assets/icons/iconset-default-list.ts","src/components/cura-icons-view/cura-icons-view.scss?tag=cura-icons-view&encapsulation=shadow","src/components/cura-icons-view/cura-icons-view.tsx"],"sourcesContent":["export default [\"360\",\"accessibility\",\"addUser\",\"airdrop\",\"alertCircle\",\"alertTriangle\",\"arrowDown\",\"arrowDownCircle\",\"arrowLeft\",\"arrowLeftCircle\",\"arrowRight\",\"arrowRightCircle\",\"arrowUp\",\"arrowUpCircle\",\"attach\",\"avatarF\",\"avatarM\",\"biometry\",\"bloodGroup\",\"calendar\",\"cam\",\"camOff\",\"central\",\"chatCircle\",\"check\",\"checkBadge\",\"checkCircle\",\"checkDouble\",\"clock\",\"close\",\"closeCircle\",\"collapse\",\"config\",\"contacts\",\"currency\",\"delete\",\"desktop\",\"doc\",\"down\",\"download\",\"duplicate\",\"edit\",\"exam\",\"examDoc\",\"expand\",\"facebook\",\"fileBmp\",\"fileJpg\",\"filePdf\",\"filePng\",\"fileUpload\",\"fileXls\",\"filter\",\"fullscreen\",\"gallery\",\"geotag\",\"geotagUnity\",\"geotagUnityGroup\",\"google\",\"graph\",\"healthPlan\",\"heart\",\"height\",\"height2\",\"home\",\"horizontalList\",\"imageUp\",\"infoCircle\",\"instagram\",\"key\",\"lamp\",\"language\",\"language2\",\"languageEN\",\"languagePT\",\"lattes\",\"left\",\"like\",\"link\",\"linkExternal\",\"linkedin\",\"list\",\"login\",\"logout\",\"mail\",\"maintenance\",\"medDoc\",\"medEspec\",\"medImg\",\"medUser\",\"medical\",\"menuHamburguer\",\"menuKebab\",\"menuMeatballs\",\"mic\",\"micOff\",\"minus\",\"minusCircle\",\"minusSquare\",\"mobile\",\"news\",\"notification\",\"npsDeslike\",\"npsHate\",\"npsLike\",\"npsLove\",\"npsNeutral\",\"order\",\"partner\",\"phone\",\"play\",\"plus\",\"plusCircle\",\"plusSquare\",\"print\",\"profile\",\"profileCircle\",\"questionCircle\",\"questionSquare\",\"range\",\"reload\",\"ribbon\",\"right\",\"schedule\",\"scheduleCancel\",\"scheduleCheck\",\"scheduleHistorico\",\"search\",\"secure\",\"share\",\"siren\",\"sound\",\"soundOff\",\"subItem\",\"swap\",\"target\",\"team\",\"telegram\",\"twitter\",\"unLink\",\"unSecure\",\"unity\",\"unlike\",\"up\",\"upload\",\"verticalList\",\"viewFalse\",\"viewTrue\",\"weight\",\"whatsapp\",\"wifi\",\"wifiOff\",\"youtube\",\"zoomIn\",\"zoomOut\"];",":host {\n  display: block;\n  padding: 24px;\n  font-family: 'Roboto', Arial, Helvetica, sans-serif;\n}\n\n.iconDetail {\n  display: block;\n}\n\n.iconSizes {\n  display: flex;\n  align-items: center;\n\n\n  .size {\n    display: flex;\n    flex-direction: column;\n    text-align: center;\n    align-items: center;\n    margin-right: 9px;\n    padding: 8px;\n\n    &:last-child { margin-right: 0; }\n    span {\n      font-size: 10px;\n      margin: 8px 0;\n    }\n  }\n\n  &.invert {\n    margin-top: 12px;\n\n    .size {\n      background-color: #2d2d2d;\n      color: #F6F6F6;\n      border-radius: 3px;\n    }\n  }\n}\n\n.icons {\n  margin-top: 28px;\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  .icon {\n    position: relative;\n    padding: 4px;\n    cursor: pointer;\n    opacity: .6;\n    transition: opacity .2s linear;\n    width: 105px;\n    display: flex;\n    flex-direction: column;\n    text-align: center;\n    align-items: center;\n    margin-bottom: 16px;\n    box-sizing: border-box;\n    cura-label {\n      margin-top: 8px;\n    }\n    cura-paragraph {\n      margin-top: 4px;\n    }\n    /* &.selected {\n      transform: scale(1.2);\n    } */\n  }\n}\n\n","import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { microIcons, iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = iconsetdefaulticons[0];\n\n  connectedCallback() {\n    this.sizes.unshift(this.sizes.pop());\n  }\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n              <cura-icon\n                name={icon}\n                size=\"32\"\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n              <cura-label\n                size=\"xsmall\"\n                weight={icon === this.selected ? 'bold' : 'regular'}\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n              { !microIcons.includes(icon) ? '' :\n                <cura-paragraph\n                  color='success-dark'\n                  size=\"xsmall\"\n                  margin-block=\"0px\"\n                  line-height='100%'>MICRO</cura-paragraph>\n              }\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/cura-radio.entry.js

@@ -1,110 +1,149 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-81f1a268.js';
-import { f as formsSizes } from './cura-forms.definitions-0f774253.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6c443d5.js';
+import { f as formsSizes } from './cura-forms.definitions-2f963167.js';
 
-const curaRadioCss = "@charset \"UTF-8\";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box;}:host .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}:host .position.container{-ms-flex-direction:row;flex-direction:row}:host .position .label-wrapper{-ms-flex-pack:end;justify-content:end}:host .position .message{text-align:right}:host .position .label{-ms-flex-order:1;order:1}:host .info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}:host .control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}:host .radio{margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:50%;border:2px solid var(--primary-base-neutral-medium);background:var(--neutral-purewhite);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color 0.3s;transition:border-color 0.3s;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}:host .radio::after{content:\"\";background:var(--color-base-light);border-radius:50%;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;width:var(--size-after);height:var(--size-after)}:host .radio:focus{border-color:var(--info-base) !important}:host .success .radio{border-color:var(--success-base);background:var(--success-lighter)}:host .success .radio:hover{border-color:var(--success-base) !important}:host .success.checked .radio{border-color:var(--success-base)}:host .success.checked .radio::after{background:var(--success-base)}:host .success.checked .radio:hover{background:var(--success-lighter) !important;border-color:var(--success-base) !important}:host .success.checked .radio:hover::after{background:var(--success-base) !important}:host .error .radio{border-color:var(--error-base);background:var(--error-lighter)}:host .error .radio:hover{border-color:var(--error-base) !important}:host .error.checked .radio{border-color:var(--error-base)}:host .error.checked .radio::after{background:var(--error-base)}:host .error.checked .radio:hover{background:var(--error-lighter) !important;border-color:var(--error-base) !important}:host .error.checked .radio:hover::after{background:var(--error-base) !important}:host .checked .radio::after{opacity:1;background:var(--color-base)}:host .checked .radio{border-color:var(--color-dark)}:host .checked .radio:hover{border-color:var(--color-light) !important}:host .checked .radio:hover::after{background:var(--color-light)}:host .disabled .radio{background:var(--primary-base-neutral-white);border-color:var(--primary-darker-neutral-base);cursor:not-allowed}:host .disabled .radio::after{background:var(--neutral-lighter)}:host .disabled.checked .radio{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-darker-neutral-white) !important}:host .disabled.checked .radio::after{background:var(--primary-base-neutral-base) !important}:host :not(.disabled):not(.checked) .radio:hover{border-color:var(--primary-base-neutral-dark)}";
+const curaRadioCss = "@charset \"UTF-8\";:host{display:block;width:fit-content;box-sizing:border-box;}:host .container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}:host .position.container{flex-direction:row}:host .position .label-wrapper{justify-content:end}:host .position .message{text-align:right}:host .position .label{order:1}:host .info{display:flex;flex-direction:column}:host .label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}:host .control{width:fit-content;cursor:pointer;position:relative}:host .radio{margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:50%;border:2px solid var(--primary-base-neutral-medium);background:var(--neutral-purewhite);box-sizing:border-box;transition:border-color 0.3s;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;width:var(--size);height:var(--size);flex:0 0 var(--size)}:host .radio::after{content:\"\";background:var(--color-base-light);border-radius:50%;opacity:0;transition:opacity 0.3s;width:var(--size-after);height:var(--size-after)}:host .radio:focus{border-color:var(--info-base) !important}:host .success .radio{border-color:var(--success-base);background:var(--success-lighter)}:host .success .radio:hover{border-color:var(--success-base) !important}:host .success.checked .radio{border-color:var(--success-base)}:host .success.checked .radio::after{background:var(--success-base)}:host .success.checked .radio:hover{background:var(--success-lighter) !important;border-color:var(--success-base) !important}:host .success.checked .radio:hover::after{background:var(--success-base) !important}:host .error .radio{border-color:var(--error-base);background:var(--error-lighter)}:host .error .radio:hover{border-color:var(--error-base) !important}:host .error.checked .radio{border-color:var(--error-base)}:host .error.checked .radio::after{background:var(--error-base)}:host .error.checked .radio:hover{background:var(--error-lighter) !important;border-color:var(--error-base) !important}:host .error.checked .radio:hover::after{background:var(--error-base) !important}:host .checked .radio::after{opacity:1;background:var(--color-base)}:host .checked .radio{border-color:var(--color-dark)}:host .checked .radio:hover{border-color:var(--color-light) !important}:host .checked .radio:hover::after{background:var(--color-light)}:host .disabled .radio{background:var(--primary-base-neutral-white);border-color:var(--primary-darker-neutral-base);cursor:not-allowed}:host .disabled .radio::after{background:var(--neutral-lighter)}:host .disabled.checked .radio{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-darker-neutral-white) !important}:host .disabled.checked .radio::after{background:var(--primary-base-neutral-base) !important}:host :not(.disabled):not(.checked) .radio:hover{border-color:var(--primary-base-neutral-dark)}";
+const CuraRadioStyle0 = curaRadioCss;
 
 const CuraRadio = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onchange = createEvent(this, "onchange", 7);
-    this.sizes = {
-      "large": { size: 20 },
-      "medium": { size: 14 },
-      "small": { size: 10 },
-    };
-    this.isDarkbackground = () => this.background === 'dark';
-    this.handleClick = () => {
-      if (this.disabled)
-        return;
-      this.checked = !this.checked;
-      this.onchange.emit({ value: this.value, checked: this.checked });
-    };
-    this.checked = false;
-    this.status = 'default';
-    this.disabled = false;
-    this.required = false;
-    this.label = '';
-    this.ontabindex = undefined;
-    this.position = 'left';
-    this.value = '';
-    this.name = '';
-    this.background = 'light';
-    this.size = 'medium';
-    this.color = 'accent';
-    this.styles = {};
-  }
-  sizeHandler() {
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--size-after': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
-  }
-  setColors() {
-    const colors = [
-      { name: '--info-base', background: 'info-base' },
-      { name: '--color-light', background: `${this.color}-light` },
-      { name: '--color-base', background: `${this.color}-base` },
-      { name: '--color-dark', background: `${this.color}-dark` },
-      { name: '--neutral-purewhite', background: 'neutral-purewhite' },
-      { name: '--success-lighter', background: 'success-lighter' },
-      { name: '--success-base', background: 'success-base' },
-      { name: '--error-lighter', background: 'error-lighter' },
-      { name: '--error-base', background: 'error-base' },
-      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
-      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },
-      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },
-      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },
-      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },
-      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },
-      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
-      { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },
-      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },
-    ];
-    colors.forEach(color => {
-      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);
-    });
-    this.styles = Object.assign({}, this.styles);
-  }
-  connectedCallback() {
-    this.sizeHandler();
-    this.setColors();
-  }
-  getClasses() {
-    const classes = {};
-    classes['container'] = true;
-    classes['checked'] = this.checked;
-    classes['disabled'] = this.disabled;
-    classes['position'] = this.position === 'right';
-    classes[this.status] = true;
-    return classes;
-  }
-  assignColor(type) {
-    if (this.disabled)
-      return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';
-    const statusColors = {
-      success: {
-        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
-        message: this.isDarkbackground() ? 'success-base' : 'success-dark'
-      },
-      error: {
-        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
-        message: this.isDarkbackground() ? 'error-base' : 'error-dark'
-      },
-      default: {
-        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
-        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
-      }
-    };
-    return statusColors[this.status][type];
-  }
-  render() {
-    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "info" }, h("div", { class: "label-wrapper" }, h("cura-label", { class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", null))), h("input", { type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "size": ["sizeHandler"],
-    "color": ["setColors"],
-    "background": ["setColors", "assignColor"]
-  }; }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onchange = createEvent(this, "onchange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.sizes = {
+            "large": { size: 20 },
+            "medium": { size: 14 },
+            "small": { size: 10 },
+        };
+        this.isDarkbackground = () => this.background === 'dark';
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            this.internals.setFormValue(this.value);
+            this.onchange.emit({ value: this.value, checked: this.checked });
+        };
+        this.checked = false;
+        this.status = 'default';
+        this.disabled = false;
+        this.required = false;
+        this.label = '';
+        this.ontabindex = undefined;
+        this.position = 'left';
+        this.value = '';
+        this.name = '';
+        this.background = 'light';
+        this.size = 'medium';
+        this.color = 'accent';
+        this.styles = {};
+    }
+    sizeHandler() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--size-after': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
+    }
+    setColors() {
+        const colors = [
+            { name: '--info-base', background: 'info-base' },
+            { name: '--color-light', background: `${this.color}-light` },
+            { name: '--color-base', background: `${this.color}-base` },
+            { name: '--color-dark', background: `${this.color}-dark` },
+            { name: '--neutral-purewhite', background: 'neutral-purewhite' },
+            { name: '--success-lighter', background: 'success-lighter' },
+            { name: '--success-base', background: 'success-base' },
+            { name: '--error-lighter', background: 'error-lighter' },
+            { name: '--error-base', background: 'error-base' },
+            { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+            { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },
+            { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },
+            { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },
+            { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },
+            { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },
+            { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+            { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },
+            { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },
+        ];
+        colors.forEach(color => {
+            this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    /**
+   * Callback for form association.
+   */
+    formAssociatedCallback(form) {
+        form.ariaLabel = this.label;
+    }
+    /**
+   * Callback to restore the switch state from the form.
+   */
+    formStateRestoreCallback(state) {
+        this.value = state.value;
+        this.checked = state.checked;
+        this.internals.setFormValue(this.value);
+    }
+    /**
+   * Callback to reset the switch state when the form is reset.
+   */
+    formResetCallback() {
+        this.value = '';
+        this.checked = false;
+        this.internals.setValidity({});
+        this.internals.setFormValue(this.value);
+    }
+    /**
+    * Callback to update the switch's disabled state when the form's disabled state changes.
+    */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    connectedCallback() {
+        this.sizeHandler();
+        this.setColors();
+    }
+    getClasses() {
+        const classes = {};
+        classes['container'] = true;
+        classes['checked'] = this.checked;
+        classes['disabled'] = this.disabled;
+        classes['position'] = this.position === 'right';
+        classes[this.status] = true;
+        return classes;
+    }
+    assignColor(type) {
+        if (this.disabled)
+            return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';
+        const statusColors = {
+            success: {
+                label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
+                message: this.isDarkbackground() ? 'success-base' : 'success-dark'
+            },
+            error: {
+                label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
+                message: this.isDarkbackground() ? 'error-base' : 'error-dark'
+            },
+            default: {
+                label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
+                message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
+            }
+        };
+        return statusColors[this.status][type];
+    }
+    render() {
+        return (h(Host, { key: '8f28f0ad3ec32f97cd39f5c574f7c779b326c3c0' }, h("div", { key: 'd94d37293c9165c13e082bbc7f78e7b35606147d', class: this.getClasses(), style: this.styles }, h("div", { key: 'fd743a9a24a22e59d0f9066d65dbe3c5b21c57b7', class: "info" }, h("div", { key: '080b345ff308b6cb0fbf1913aa6a1c872e3c325c', class: "label-wrapper" }, h("cura-label", { key: '9c0f0d376470b12273a359c65a91954cfa96b1a9', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '117eaafe86a8c2f6b190a7cefaaf2d882d658940', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '162ba073fc2722b4f1c2a3e8cfa42ae1940b4c99', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '453713a040379257a9be7c9cd327ffbd8ad3affb' }))), h("input", { key: '19ad607763975886902d6e88fd44bf3e1da75c8a', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+    }
+    static get formAssociated() { return true; }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "size": ["sizeHandler"],
+        "color": ["setColors"],
+        "background": ["setColors", "assignColor"]
+    }; }
 };
-CuraRadio.style = curaRadioCss;
+CuraRadio.style = CuraRadioStyle0;
 
 export { CuraRadio as cura_radio };
 

package/dist/esm/cura-radio.entry.js.map

@@ -1 +1 @@
-{"file":"cura-radio.entry.js","mappings":"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","names":[],"sources":["./src/components/forms/cura-radio/cura-radio.scss?tag=cura-radio&encapsulation=shadow","./src/components/forms/cura-radio/cura-radio.tsx"],"sourcesContent":["\n\n:host {\n  display: block;\n  width: fit-content;\n  box-sizing: border-box;\n\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--gap);\n}\n\n.position {\n\n  &.container {\n    flex-direction: row;\n  }\n\n  .label-wrapper {\n    justify-content: end;\n  }\n\n  .message {\n    text-align: right;\n  }\n\n  .label {\n    order:1\n  }\n\n}\n\n.info {\n  display: flex;\n  flex-direction: column;\n}\n\n.label-wrapper {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  gap: 5px;\n}\n\n\n.control {\n  width: fit-content;\n  cursor: pointer;\n  position: relative;\n}\n\n\n.radio {\n  margin: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 50%;\n  border: 2px solid var(--primary-base-neutral-medium);\n  background: var(--neutral-purewhite);\n  box-sizing: border-box;\n  transition: border-color 0.3s;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: var(--size);\n  height: var(--size);\n  flex: 0 0 var(--size);\n\n  &::after {\n    content: '';\n    background: var(--color-base-light);\n    border-radius: 50%;\n    opacity: 0;\n    transition: opacity 0.3s;\n    width: var(--size-after);\n    height: var(--size-after);\n  }\n\n  &:focus {\n    border-color: var(--info-base) !important;\n  }\n\n}\n\n\n/* Estado Success */\n.success .radio {\n  border-color: var(--success-base);\n  background: var(--success-lighter);\n\n  &:hover{\n  border-color: var(--success-base) !important;\n  }\n}\n\n.success.checked .radio {\n  border-color: var(--success-base);\n\n  &::after {\n    background: var(--success-base);\n  }\n\n  &:hover {\n    background: var(--success-lighter) !important;\n    border-color: var(--success-base)  !important;\n\n    &::after {\n      background: var(--success-base) !important;\n    }\n  }\n}\n\n\n/* Estado Error */\n.error .radio {\n  border-color: var(--error-base);\n  background: var(--error-lighter);\n\n  &:hover{\n    border-color: var(--error-base) !important;\n  }\n}\n\n.error.checked .radio {\n  border-color: var(--error-base);\n\n  &::after {\n    background: var(--error-base);\n  }\n\n  &:hover {\n    background: var(--error-lighter) !important;\n    border-color: var(--error-base)  !important;\n\n    &::after {\n      background: var(--error-base) !important;\n    }\n  }\n}\n\n\n/* Estado checked */\n.checked .radio::after {\n  opacity: 1;\n  background: var(--color-base);\n}\n\n.checked .radio {\n  border-color: var(--color-dark)  ;\n}\n\n.checked .radio:hover {\n  border-color: var(--color-light)  !important;\n}\n\n.checked .radio:hover::after {\n  background: var(--color-light);\n}\n\n/* Estado disabled */\n.disabled .radio {\n  background: var(--primary-base-neutral-white);\n  border-color: var(--primary-darker-neutral-base) ;\n  cursor: not-allowed;\n}\n\n.disabled .radio::after {\n  background: var(--neutral-lighter);\n}\n\n.disabled.checked .radio {\n  border-color: var(--primary-base-neutral-base)  !important;\n  background: var(--primary-darker-neutral-white) !important;\n}\n\n.disabled.checked .radio::after {\n  background: var(--primary-base-neutral-base) !important;\n}\n\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .radio:hover {\n  border-color: var(--primary-base-neutral-dark);\n}\n\n\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-radio',\n  styleUrl: 'cura-radio.scss',\n  shadow: true,\n})\nexport class CuraRadio {\n  /**\n   * Reflects the checked state of the radio button.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Status of the radio button.\n   * Can be 'error', 'success', or 'default'.\n  */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n  /**\n   * Reflects the disabled state of the radio button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n * Reflects the required state of the radio button.\n */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the radio button.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Specifies the tabindex of the radio button.\n   */\n  @Prop({ reflect: true }) ontabindex: number;\n  /**\n   * Position of the label relative to the radio button.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n  /**\n   * Value associated with the radio button.\n   */\n  @Prop({ reflect: true }) value: string = '';\n  /**\n   * Name attribute of the radio button.\n   */\n  @Prop({ reflect: true }) name: string = '';\n  /**\n   * Background theme of the radio button.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Size of the radio button.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Color theme of the radio button.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {}\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string, checked: boolean }>;\n\n  sizes = {\n    \"large\": { size: 20 },\n    \"medium\": { size: 14 },\n    \"small\": { size: 10 },\n  };\n\n\n  isDarkbackground = () => this.background === 'dark';\n\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size-after': `${this.sizes[this.size].size}px`,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`\n    };\n  }\n\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\n      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n    });\n    this.styles = { ...this.styles };\n\n  }\n\n  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.onchange.emit({ value: this.value, checked: this.checked });\n  };\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  @Watch('background')\n  assignColor(type: 'label' | 'message',) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n      },\n      error: {\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n      },\n      default: {\n        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'\n      }\n    };\n\n    return statusColors[this.status][type];\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label\n                class=\"label\"\n                size={this.size === 'large' ? 'medium' : 'xsmall'}\n                color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n            </div>\n            <cura-label\n              color={this.assignColor('message')}\n              size=\"xsmall\"\n              class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <input\n            type=\"radio\"\n            class={`radio ${this.size.toLocaleLowerCase()}`}\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            tabIndex={this.ontabindex}\n            disabled={this.disabled}\n            checked={this.checked}\n            onClick={this.handleClick}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-radio.entry.js","mappings":"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","names":[],"sources":["src/components/forms/cura-radio/cura-radio.scss?tag=cura-radio&encapsulation=shadow","src/components/forms/cura-radio/cura-radio.tsx"],"sourcesContent":["\n\n:host {\n  display: block;\n  width: fit-content;\n  box-sizing: border-box;\n\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--gap);\n}\n\n.position {\n\n  &.container {\n    flex-direction: row;\n  }\n\n  .label-wrapper {\n    justify-content: end;\n  }\n\n  .message {\n    text-align: right;\n  }\n\n  .label {\n    order:1\n  }\n\n}\n\n.info {\n  display: flex;\n  flex-direction: column;\n}\n\n.label-wrapper {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  gap: 5px;\n}\n\n\n.control {\n  width: fit-content;\n  cursor: pointer;\n  position: relative;\n}\n\n\n.radio {\n  margin: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 50%;\n  border: 2px solid var(--primary-base-neutral-medium);\n  background: var(--neutral-purewhite);\n  box-sizing: border-box;\n  transition: border-color 0.3s;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: var(--size);\n  height: var(--size);\n  flex: 0 0 var(--size);\n\n  &::after {\n    content: '';\n    background: var(--color-base-light);\n    border-radius: 50%;\n    opacity: 0;\n    transition: opacity 0.3s;\n    width: var(--size-after);\n    height: var(--size-after);\n  }\n\n  &:focus {\n    border-color: var(--info-base) !important;\n  }\n\n}\n\n\n/* Estado Success */\n.success .radio {\n  border-color: var(--success-base);\n  background: var(--success-lighter);\n\n  &:hover{\n  border-color: var(--success-base) !important;\n  }\n}\n\n.success.checked .radio {\n  border-color: var(--success-base);\n\n  &::after {\n    background: var(--success-base);\n  }\n\n  &:hover {\n    background: var(--success-lighter) !important;\n    border-color: var(--success-base)  !important;\n\n    &::after {\n      background: var(--success-base) !important;\n    }\n  }\n}\n\n\n/* Estado Error */\n.error .radio {\n  border-color: var(--error-base);\n  background: var(--error-lighter);\n\n  &:hover{\n    border-color: var(--error-base) !important;\n  }\n}\n\n.error.checked .radio {\n  border-color: var(--error-base);\n\n  &::after {\n    background: var(--error-base);\n  }\n\n  &:hover {\n    background: var(--error-lighter) !important;\n    border-color: var(--error-base)  !important;\n\n    &::after {\n      background: var(--error-base) !important;\n    }\n  }\n}\n\n\n/* Estado checked */\n.checked .radio::after {\n  opacity: 1;\n  background: var(--color-base);\n}\n\n.checked .radio {\n  border-color: var(--color-dark)  ;\n}\n\n.checked .radio:hover {\n  border-color: var(--color-light)  !important;\n}\n\n.checked .radio:hover::after {\n  background: var(--color-light);\n}\n\n/* Estado disabled */\n.disabled .radio {\n  background: var(--primary-base-neutral-white);\n  border-color: var(--primary-darker-neutral-base) ;\n  cursor: not-allowed;\n}\n\n.disabled .radio::after {\n  background: var(--neutral-lighter);\n}\n\n.disabled.checked .radio {\n  border-color: var(--primary-base-neutral-base)  !important;\n  background: var(--primary-darker-neutral-white) !important;\n}\n\n.disabled.checked .radio::after {\n  background: var(--primary-base-neutral-base) !important;\n}\n\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .radio:hover {\n  border-color: var(--primary-base-neutral-dark);\n}\n\n\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-radio',\n  styleUrl: 'cura-radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraRadio {\n  /**\n   * Reflects the checked state of the radio button.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Status of the radio button.\n   * Can be 'error', 'success', or 'default'.\n  */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n  /**\n   * Reflects the disabled state of the radio button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n * Reflects the required state of the radio button.\n */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the radio button.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Specifies the tabindex of the radio button.\n   */\n  @Prop({ reflect: true }) ontabindex: number;\n  /**\n   * Position of the label relative to the radio button.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n  /**\n   * Value associated with the radio button.\n   */\n  @Prop({ reflect: true }) value: string = '';\n  /**\n   * Name attribute of the radio button.\n   */\n  @Prop({ reflect: true }) name: string = '';\n  /**\n   * Background theme of the radio button.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Size of the radio button.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Color theme of the radio button.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {}\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string, checked: boolean }>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  sizes = {\n    \"large\": { size: 20 },\n    \"medium\": { size: 14 },\n    \"small\": { size: 10 },\n  };\n\n\n  isDarkbackground = () => this.background === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size-after': `${this.sizes[this.size].size}px`,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`\n    };\n  }\n\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\n      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n    });\n    this.styles = { ...this.styles };\n\n  }\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, checked: boolean }) {\n    this.value = state.value;\n    this.checked = state.checked;\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n * Callback to reset the switch state when the form is reset.\n */\n  formResetCallback() {\n    this.value = '';\n    this.checked = false;\n    this.internals.setValidity({});\n    this.internals.setFormValue(this.value);\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  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.value);\n    this.onchange.emit({ value: this.value, checked: this.checked });\n  };\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  @Watch('background')\n  assignColor(type: 'label' | 'message',) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n      },\n      error: {\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n      },\n      default: {\n        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'\n      }\n    };\n\n    return statusColors[this.status][type];\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label\n                class=\"label\"\n                size={this.size === 'large' ? 'medium' : 'xsmall'}\n                color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n            </div>\n            <cura-label\n              color={this.assignColor('message')}\n              size=\"xsmall\"\n              class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <input\n            type=\"radio\"\n            class={`radio ${this.size.toLocaleLowerCase()}`}\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            tabIndex={this.ontabindex}\n            disabled={this.disabled}\n            checked={this.checked}\n            onClick={this.handleClick}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}