@rededor/cura 0.5.3 → 0.5.5

package/dist/cura/p-a719b444.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-36a83bc7.system.js","./p-d3f9c888.system.js"],(function(e){"use strict";var t,r,a,i,s;return{setters:[function(e){t=e.r;r=e.c;a=e.h;i=e.H},function(e){s=e.f}],execute:function(){var o='@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}.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);text-align:left}.position{-ms-flex-direction:row;flex-direction:row}.label,.message{text-align:left}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.track{background:var(--neutral-base-black-40);border-radius:16px;-webkit-transition:background-color 0.3s;transition:background-color 0.3s;-ms-flex-align:start;align-items:flex-start;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size-track);height:var(--size);position:relative}.thumb{background-color:var(--neutral-white-purewhite);border:2px solid var(--neutral-medium);border-radius:50%;position:absolute;-webkit-transition:outline 0.3s, -webkit-transform 0.3s;transition:outline 0.3s, -webkit-transform 0.3s;transition:transform 0.3s, outline 0.3s;transition:transform 0.3s, outline 0.3s, -webkit-transform 0.3s;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.checked .thumb{border-color:var(--color-dark-light);background:var(--color-lighter);-webkit-transform:translateX(var(--size)) translateY(-50%);transform:translateX(var(--size)) translateY(-50%)}.checked .thumb:hover{background:var(--neutral-white-purewhite) !important}.checked .track{background:var(--color-base-lighter-50)}.disabled .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base);cursor:not-allowed}.disabled.checked .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb:hover{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark-light);background:var(--color-lighter)}:not(.disabled) .thumb:focus{border-color:var(--info-base) !important;z-index:1}';var n=e("cura_switch",function(){function e(e){var a=this;t(this,e);this.onchange=r(this,"onchange",7);this.sizes={large:{size:64},medium:{size:48},small:{size:40}};this.isDarkbackground=function(){return a.background==="dark"};this.toggleSwitch=function(){if(a.disabled)return null;a.checked=!a.checked;a.onchange.emit({checked:a.checked})};this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.styles={}}e.prototype.sizeHandler=function(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-track":"".concat(this.sizes[this.size].size,"px"),"--size":"".concat(s[this.size].size,"px"),"--gap":"".concat(s[this.size].gap,"px")})};e.prototype.setColors=function(){var e=this;var t=[{name:"--info-base",background:"info-base"},{name:"--neutral-medium",background:"neutral-medium"},{name:"--color-lighter",background:"".concat(this.color,"-lighter")},{name:"--color-base-lighter-50",background:"".concat(this.color,"-").concat(this.isDarkbackground()?"base":"lighter"),opacity:.5},{name:"--color-base-light",background:"".concat(this.color,"-").concat(this.isDarkbackground()?"base":"light")},{name:"--color-dark-light",background:"".concat(this.color,"-").concat(this.isDarkbackground()?"dark":"light")},{name:"--primary-lighter-neutral-dark",background:this.isDarkbackground()?"primary-lighter":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--neutral-white-purewhite",background:"neutral-".concat(this.isDarkbackground()?"white":"purewhite")},{name:"--primary-base-neutral-black-20",background:"".concat(this.isDarkbackground()?"primary-base":"neutral-black"),opacity:.2},{name:"--neutral-base-black-40",background:"neutral-".concat(this.isDarkbackground()?"base":"black"),opacity:.4},{name:"--primary-dark-neutral-base",background:"".concat(this.isDarkbackground()?"primary-dark":"neutral-base")},{name:"--neutral-lighter",background:"".concat(this.isDarkbackground()?"primary-base":"neutral-lighter")}];t.forEach((function(t){e.styles[t.name]=window.CuraAPI.theme.colors.getColor(t.background,t===null||t===void 0?void 0:t.opacity)}));this.styles=Object.assign({},this.styles)};e.prototype.connectedCallback=function(){this.sizeHandler();this.setColors()};e.prototype.assignColor=function(e,t){if(this.disabled)return this.isDarkbackground()?"primary-base":"neutral-medium";return this.isDarkbackground()?e:t};e.prototype.getClasses=function(){var e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e["position"]=this.position==="right";return e};e.prototype.render=function(){return a(i,null,a("div",{class:this.getClasses(),style:this.styles},a("div",{class:"info"},a("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",lineHeight:"125%",color:this.assignColor("neutral-white","neutral-black")},this.label),a("cura-label",{color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},a("slot",null))),a("div",{onClick:this.toggleSwitch,class:"control"},a("div",{class:"track ".concat(this.size.toLowerCase())},a("div",{class:"thumb ".concat(this.size.toLowerCase()),tabIndex:this.ontabindex})))))};Object.defineProperty(e,"watchers",{get:function(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}},enumerable:false,configurable:true});return e}());n.style=o}}}));
+//# sourceMappingURL=p-a719b444.system.entry.js.map

package/dist/cura/p-a719b444.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["curaSwitchCss","CuraSwitch","exports","this","sizes","large","size","medium","small","isDarkbackground","_this","background","toggleSwitch","disabled","checked","onchange","emit","class_1","prototype","sizeHandler","styles","Object","assign","concat","formsSizes","gap","setColors","colors","name","color","opacity","forEach","window","CuraAPI","theme","getColor","connectedCallback","assignColor","colorDark","colorLight","getClasses","classes","position","render","h","Host","class","style","lineHeight","label","onClick","toLowerCase","tabIndex","ontabindex"],"sources":["src/components/forms/cura-switch/cura-switch.scss?tag=cura-switch&encapsulation=shadow","src/components/forms/cura-switch/cura-switch.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n  box-sizing: border-box;\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--gap);\n  text-align: left;\n}\n\n.position {\n  flex-direction: row;\n}\n\n.label, .message {\n  text-align: left;\n}\n\n.control {\n  width: fit-content;\n}\n\n/* Estilos para o controle de switch */\n.track {\n  background: var(--neutral-base-black-40);\n  border-radius: 16px;\n  transition: background-color 0.3s;\n  align-items: flex-start;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: var(--size-track);\n  height: var(--size);\n  position: relative;\n}\n\n.thumb {\n  background-color: var(--neutral-white-purewhite);\n  border: 2px solid var(--neutral-medium);\n  border-radius: 50%;\n  position: absolute;\n  transition: transform 0.3s, outline 0.3s;\n  display: inline-block;\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n  width: var(--size);\n  height: var(--size);\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* Estado \"checked\" */\n.checked .thumb {\n  border-color: var(--color-dark-light);\n  background: var(--color-lighter);\n  transform: translateX(var(--size)) translateY(-50%);\n}\n\n.checked .thumb:hover {\n  background: var(--neutral-white-purewhite) !important;\n}\n\n.checked .track {\n  background: var(--color-base-lighter-50);\n}\n\n/* Estado \"disabled\" */\n.disabled .track {\n  background: var(--primary-base-neutral-black-20);\n}\n\n.disabled .thumb {\n  background: var(--neutral-lighter) !important;\n  border-color: var(--primary-dark-neutral-base);\n  cursor: not-allowed;\n}\n\n.disabled.checked .track {\n  background: var(--primary-base-neutral-black-20);\n}\n\n.disabled .thumb:hover {\n  background: var(--neutral-lighter) !important;\n  border-color: var(--primary-dark-neutral-base) !important;\n}\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .thumb:hover {\n  border-color: var(--color-dark-light);\n  background: var(--color-lighter);\n}\n\n/* Estado hover para não disabled */\n:not(.disabled) .thumb:focus {\n  border-color: var(--info-base) !important;\n  z-index: 1;\n}\n","import { Component, Prop, Event, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-switch',\n  styleUrl: 'cura-switch.scss',\n  shadow: true,\n})\n\nexport class CuraSwitch {\n  /**\n   * Indicates whether the switch is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Indicates whether the switch is disabled or not.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * The label text to display next to the switch.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Tab index for the switch element.\n   * Reflects as an HTML attribute.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the switch.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n  /**\n   * Size of the switch.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background style of the switch.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Accent color of the switch.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {};\n\n  @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n  sizes = {\n    \"large\": { size: 64 },\n    \"medium\": { size: 48 },\n    \"small\": { size: 40 },\n  };\n\n\n  isDarkbackground = () => this.background === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size-track': `${this.sizes[this.size].size}px`,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`\n    };\n  }\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--neutral-medium', background: 'neutral-medium' },\n      { name: '--color-lighter', background: `${this.color}-lighter` },\n      { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },\n      { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },\n      { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },\n      { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },\n      { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },\n      { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },\n      { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },\n      { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n    });\n    this.styles = { ...this.styles };\n\n  }\n\n  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  toggleSwitch = () => {\n    if (this.disabled) return null;\n\n    this.checked = !this.checked;\n    this.onchange.emit({ checked: this.checked })\n  };\n\n  assignColor(colorDark: string, colorLight: string) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';\n    return this.isDarkbackground() ? colorDark : colorLight\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\n    return classes;\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"info\">\n            <cura-label class=\"label\"\n              size={this.size === 'large' ? 'medium' : 'xsmall'}\n              lineHeight=\"125%\"\n              color={this.assignColor('neutral-white', 'neutral-black')}>\n              {this.label}\n            </cura-label>\n            <cura-label\n              color={this.assignColor('primary-lighter', 'neutral-dark')}\n              size=\"xsmall\"\n              class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n\n          <div onClick={this.toggleSwitch} class=\"control\">\n            <div class={`track ${this.size.toLowerCase()}`}>\n              <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/cura/p-ba20f1b6.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as a,H as s}from"./p-ba66d7be.js";const i=':host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:var(--neutral-purewhite);border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--primary-base);box-shadow:inset 0px 0px 0px 2px var(--primary-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):hover,:host a:not(.disabled):hover{background-color:var(--color-lighter);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base)}:host button:not(.disabled):hover .label,:host a:not(.disabled):hover .label{color:var(--neutral-purewhite-black)}:host button:focus,:host a:focus{-webkit-box-shadow:inset 0px 0px 0px 2px var(--info-base) !important;box-shadow:inset 0px 0px 0px 2px var(--info-base) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--primary-base)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;position:relative;gap:5px}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--color-base);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-darker);box-shadow:inset 0px 0px 0px 2px var(--color-darker)}:host button.selected .label,:host a.selected .label{color:var(--neutral-purewhite-black)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base)}:host button.disabled .label,:host a.disabled .label{color:var(--neutral-medium-primary-base)}';const o=class{constructor(a){t(this,a);this.onclick=e(this,"onclick",7);this.theme=window.CuraAPI.theme;this.size="medium";this.disabled=false;this.selected=false;this.iconPosition="right";this.color="accent";this.background="light";this.fontcolor="dark";this.hovered=false;this.styles={}}setColors(){const t=[{name:"--color-base",theme:`${this.color}-base`},{name:"--color-darker",theme:`${this.color}-darker`},{name:"--color-lighter",theme:`${this.color}-lighter`},{name:"--neutral-purewhite-black",theme:this.fontcolor==="light"?"neutral-purewhite":"neutral-black"},{name:"--neutral-white-primary-darker",theme:this.background==="light"?"neutral-white":"primary-darker"},{name:"--neutral-medium-primary-base",theme:this.background==="light"?"neutral-medium":"primary-base"}];t.forEach((t=>{this.styles=Object.assign(Object.assign({},this.styles),{[t.name]:this.theme.colors.getColor(t.theme)})}))}setStyles(){this.weights=this.theme.fonts.getWeights();this.styles["--base-spacing"]=this.theme.spacing.getSpacing();this.styles["--font-size"]=this.theme.fonts.getSize();this.styles["--font-family"]=this.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--neutral-purewhite"]=this.theme.colors.getColor("neutral-purewhite");this.styles["--neutral-black"]=this.theme.colors.getColor("neutral-black");this.styles["--primary-base"]=this.theme.colors.getColor("primary-base");this.styles["--info-base"]=this.theme.colors.getColor("info-base")}connectedCallback(){this.setStyles();this.setColors()}handleMouseEnter(){if(this.disabled)return;this.hovered=true}handleMouseLeave(){this.hovered=false}getIcon(){if(!this.selected)return"";const t=this.size==="small"?16:this.size==="medium"?20:24;const e=this.hovered?"closeCircle":"checkCircle";const s=this.disabled?this.background==="light"?"neutral-medium":"primary-base":this.selected&&this.fontcolor==="dark"?"neutral-black":"neutral-purewhite";return a("cura-icon",{class:"button-icon",name:e,size:t,color:s})}handleClick(t){if(this.disabled)t.preventDefault();this.selected=!this.selected;this.onclick.emit({selected:this.selected})}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t["disabled"]=this.disabled;t["selected"]=this.selected;return t}render(){return a(s,null,a("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled,onClick:t=>this.handleClick(t),onMouseEnter:()=>this.handleMouseEnter(),onMouseLeave:()=>this.handleMouseLeave()},a("div",{class:"button-container"},this.getIcon(),a("span",{class:"label"},a("slot",null)))))}static get watchers(){return{background:["setColors","getIcon"],color:["setColors"],fontcolor:["setColors","getIcon"]}}};o.style=i;export{o as cura_button_select};
+//# sourceMappingURL=p-ba20f1b6.entry.js.map

package/dist/cura/{p-98014544.entry.js.map → p-ba20f1b6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["curaButtonSelectCss","CuraButtonOutline","this","theme","window","CuraAPI","setColors","colors","name","color","fontcolor","background","forEach","styles","Object","assign","getColor","setStyles","weights","fonts","getWeights","spacing","getSpacing","getSize","getFamily","medium","connectedCallback","handleMouseEnter","disabled","hovered","handleMouseLeave","getIcon","selected","iconSize","size","iconName","h","class","handleClick","e","preventDefault","onclick","emit","getClasses","classes","toLowerCase","iconPosition","render","Host","style","onClick","onMouseEnter","onMouseLeave"],"sources":["./src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","./src/components/buttons/cura-button-select/cura-button-select.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      border: none;\n      box-shadow: inset 0px 0px 0px 2px var(--primary-base);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-lighter);\n        box-shadow: inset 0px 0px 0px 2px var(--color-base);\n        .label {\n          color: var(--neutral-purewhite-black);\n        }\n      }\n\n      &:focus {\n        box-shadow: inset 0px 0px 0px 2px var(--info-base) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label() {\n      color: var(--primary-base);\n    }\n\n    // Children Elements\n    @include button-container() {\n      gap: 5px;\n    }\n\n    @mixin button-icon() {\n      margin: 0;\n    }\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-base);\n      box-shadow: inset 0px 0px 0px 2px var(--color-darker);\n      .label {\n        color: var(--neutral-purewhite-black);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-medium-primary-base);\n      .label {\n        color: var(--neutral-medium-primary-base);\n      }\n    }\n\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\n\nexport class CuraButtonOutline {\n  /**\n  * Button size: small | medium (default) | large  = medium\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * selected state. Boolean.\n  */\n  @Prop({ reflect: true }) selected = false;\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'right';\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * fontcolor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() fontcolor: 'dark' | 'light' = 'dark';\n  /**\n  * hovered state. Boolean.\n  */\n  @State() hovered = false;\n\n  @State() styles = {};\n\n  @Event({ eventName: \"onclick\" }) onclick: EventEmitter<{ selected: boolean; }>;\n\n  theme = window.CuraAPI.theme\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  @Watch('fontcolor')\n  setColors() {\n    const colors = [\n      { name: '--color-base', theme: `${this.color}-base` },\n      { name: '--color-darker', theme: `${this.color}-darker` },\n      { name: '--color-lighter', theme: `${this.color}-lighter` },\n      { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n      { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n      { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles = {\n        ...this.styles,\n        [color.name]: this.theme.colors.getColor(color.theme)\n      };\n    });\n  }\n\n  setStyles() {\n    this.weights = this.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n    this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n    this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n    this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n  }\n\n  connectedCallback() {\n    this.setStyles()\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('background')\n  @Watch('fontcolor')\n  getIcon() {\n    if (!this.selected) return '';\n\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n    const fontcolor =\n      this.disabled\n        ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n        : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n    return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={fontcolor}></cura-icon>;\n  }\n\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={(e) => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}>\n          <div class=\"button-container\">\n            {this.getIcon()}\n            <span class=\"label\"><slot></slot></span>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,w1G,MCQfC,EAAiB,M,0DAuC5BC,KAAAC,MAAQC,OAAOC,QAAQF,M,UAnCuC,S,cAI1B,M,cAIA,M,kBAIsB,Q,WAI1C,S,gBAIuB,Q,eAKD,O,aAInB,M,YAED,E,CAWlBG,YACE,MAAMC,EAAS,CACb,CAAEC,KAAM,eAAgBL,MAAO,GAAGD,KAAKO,cACvC,CAAED,KAAM,iBAAkBL,MAAO,GAAGD,KAAKO,gBACzC,CAAED,KAAM,kBAAmBL,MAAO,GAAGD,KAAKO,iBAC1C,CAAED,KAAM,4BAA6BL,MAAOD,KAAKQ,YAAc,QAAU,oBAAsB,iBAC/F,CAAEF,KAAM,iCAAkCL,MAAOD,KAAKS,aAAe,QAAU,gBAAkB,kBACjG,CAAEH,KAAM,gCAAiCL,MAAOD,KAAKS,aAAe,QAAU,iBAAmB,iBAGnGJ,EAAOK,SAAQH,IACbP,KAAKW,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNb,KAAKW,QAAM,CACd,CAACJ,EAAMD,MAAON,KAAKC,MAAMI,OAAOS,SAASP,EAAMN,QAChD,G,CAILc,YACEf,KAAKgB,QAAUhB,KAAKC,MAAMgB,MAAMC,aAChClB,KAAKW,OAAO,kBAAoBX,KAAKC,MAAMkB,QAAQC,aACnDpB,KAAKW,OAAO,eAAiBX,KAAKC,MAAMgB,MAAMI,UAC9CrB,KAAKW,OAAO,iBAAmBX,KAAKC,MAAMgB,MAAMK,YAChDtB,KAAKW,OAAO,wBAA0BX,KAAKgB,QAAQO,OACnDvB,KAAKW,OAAO,uBAAyBX,KAAKC,MAAMI,OAAOS,SAAS,qBAChEd,KAAKW,OAAO,mBAAqBX,KAAKC,MAAMI,OAAOS,SAAS,iBAC5Dd,KAAKW,OAAO,kBAAoBX,KAAKC,MAAMI,OAAOS,SAAS,gBAC3Dd,KAAKW,OAAO,eAAiBX,KAAKC,MAAMI,OAAOS,SAAS,Y,CAG1DU,oBACExB,KAAKe,YACLf,KAAKI,W,CAGPqB,mBACE,GAAIzB,KAAK0B,SAAU,OACnB1B,KAAK2B,QAAU,I,CAGjBC,mBACE5B,KAAK2B,QAAU,K,CAKjBE,UACE,IAAK7B,KAAK8B,SAAU,MAAO,GAE3B,MAAMC,EAAW/B,KAAKgC,OAAS,QAAU,GAAKhC,KAAKgC,OAAS,SAAW,GAAK,GAC5E,MAAMC,EAAWjC,KAAK2B,QAAU,cAAgB,cAChD,MAAMnB,EACJR,KAAK0B,SACA1B,KAAKS,aAAe,QAAU,iBAAmB,eAClDT,KAAK8B,UAAY9B,KAAKQ,YAAc,OAAS,gBAAkB,oBAErE,OAAO0B,EAAA,aAAWC,MAAM,cAAc7B,KAAM2B,EAAUD,KAAMD,EAAUxB,MAAOC,G,CAI/E4B,YAAYC,GACV,GAAIrC,KAAK0B,SAAUW,EAAEC,iBACrBtC,KAAK8B,UAAY9B,KAAK8B,SACtB9B,KAAKuC,QAAQC,KAAK,CAAEV,SAAU9B,KAAK8B,U,CAIrCW,aACE,MAAMC,EAAU,GAChBA,EAAQ,GAAG1C,KAAKgC,KAAKW,iBAAmB,KACxCD,EAAQ,QAAQ1C,KAAK4C,aAAaD,iBAAmB,KACrDD,EAAQ,YAAc1C,KAAK0B,SAC3BgB,EAAQ,YAAc1C,KAAK8B,SAC3B,OAAOY,C,CAGTG,SACE,OACEX,EAACY,EAAI,KACHZ,EAAA,UAAQC,MAAOnC,KAAKyC,aAClBM,MAAO/C,KAAKW,OACZe,SAAU1B,KAAK0B,SACfsB,QAAUX,GAAMrC,KAAKoC,YAAYC,GACjCY,aAAc,IAAMjD,KAAKyB,mBACzByB,aAAc,IAAMlD,KAAK4B,oBACzBM,EAAA,OAAKC,MAAM,oBACRnC,KAAK6B,UACNK,EAAA,QAAMC,MAAM,SAAQD,EAAA,gB"}
+{"version":3,"names":["curaButtonSelectCss","CuraButtonOutline","this","theme","window","CuraAPI","setColors","colors","name","color","fontcolor","background","forEach","styles","Object","assign","getColor","setStyles","weights","fonts","getWeights","spacing","getSpacing","getSize","getFamily","medium","connectedCallback","handleMouseEnter","disabled","hovered","handleMouseLeave","getIcon","selected","iconSize","size","iconName","h","class","handleClick","e","preventDefault","onclick","emit","getClasses","classes","toLowerCase","iconPosition","render","Host","style","onClick","onMouseEnter","onMouseLeave"],"sources":["./src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","./src/components/buttons/cura-button-select/cura-button-select.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      border: none;\n      box-shadow: inset 0px 0px 0px 2px var(--primary-base);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-lighter);\n        box-shadow: inset 0px 0px 0px 2px var(--color-base);\n        .label {\n          color: var(--neutral-purewhite-black);\n        }\n      }\n\n      &:focus {\n        box-shadow: inset 0px 0px 0px 2px var(--info-base) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label() {\n      color: var(--primary-base);\n    }\n\n    // Children Elements\n    @include button-container() {\n      gap: 5px;\n    }\n\n    @mixin button-icon() {\n      margin: 0;\n    }\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-base);\n      box-shadow: inset 0px 0px 0px 2px var(--color-darker);\n      .label {\n        color: var(--neutral-purewhite-black);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-medium-primary-base);\n      .label {\n        color: var(--neutral-medium-primary-base);\n      }\n    }\n\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\n\nexport class CuraButtonOutline {\n  /**\n  * Button size: small | medium (default) | large  = medium\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * selected state. Boolean.\n  */\n  @Prop({ reflect: true }) selected = false;\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'right';\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * fontcolor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() fontcolor: 'dark' | 'light' = 'dark';\n  /**\n  * hovered state. Boolean.\n  */\n  @State() hovered = false;\n\n  @State() styles = {};\n\n  @Event({ eventName: \"onclick\" }) onclick: EventEmitter<{ selected: boolean; }>;\n\n  theme = window.CuraAPI.theme\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  @Watch('fontcolor')\n  setColors() {\n    const colors = [\n      { name: '--color-base', theme: `${this.color}-base` },\n      { name: '--color-darker', theme: `${this.color}-darker` },\n      { name: '--color-lighter', theme: `${this.color}-lighter` },\n      { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n      { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n      { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles = {\n        ...this.styles,\n        [color.name]: this.theme.colors.getColor(color.theme)\n      };\n    });\n  }\n\n  setStyles() {\n    this.weights = this.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n    this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n    this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n    this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n  }\n\n  connectedCallback() {\n    this.setStyles()\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('background')\n  @Watch('fontcolor')\n  getIcon() {\n    if (!this.selected) return '';\n\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n    const fontcolor =\n      this.disabled\n        ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n        : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n    return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={fontcolor}></cura-icon>;\n  }\n\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={(e) => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}>\n          <div class=\"button-container\">\n            {this.getIcon()}\n            <span class=\"label\"><slot></slot></span>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,84G,MCQfC,EAAiB,M,0DAuC5BC,KAAAC,MAAQC,OAAOC,QAAQF,M,UAnCuC,S,cAI1B,M,cAIA,M,kBAIsB,Q,WAI1C,S,gBAIuB,Q,eAKD,O,aAInB,M,YAED,E,CAWlBG,YACE,MAAMC,EAAS,CACb,CAAEC,KAAM,eAAgBL,MAAO,GAAGD,KAAKO,cACvC,CAAED,KAAM,iBAAkBL,MAAO,GAAGD,KAAKO,gBACzC,CAAED,KAAM,kBAAmBL,MAAO,GAAGD,KAAKO,iBAC1C,CAAED,KAAM,4BAA6BL,MAAOD,KAAKQ,YAAc,QAAU,oBAAsB,iBAC/F,CAAEF,KAAM,iCAAkCL,MAAOD,KAAKS,aAAe,QAAU,gBAAkB,kBACjG,CAAEH,KAAM,gCAAiCL,MAAOD,KAAKS,aAAe,QAAU,iBAAmB,iBAGnGJ,EAAOK,SAAQH,IACbP,KAAKW,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNb,KAAKW,QAAM,CACd,CAACJ,EAAMD,MAAON,KAAKC,MAAMI,OAAOS,SAASP,EAAMN,QAChD,G,CAILc,YACEf,KAAKgB,QAAUhB,KAAKC,MAAMgB,MAAMC,aAChClB,KAAKW,OAAO,kBAAoBX,KAAKC,MAAMkB,QAAQC,aACnDpB,KAAKW,OAAO,eAAiBX,KAAKC,MAAMgB,MAAMI,UAC9CrB,KAAKW,OAAO,iBAAmBX,KAAKC,MAAMgB,MAAMK,YAChDtB,KAAKW,OAAO,wBAA0BX,KAAKgB,QAAQO,OACnDvB,KAAKW,OAAO,uBAAyBX,KAAKC,MAAMI,OAAOS,SAAS,qBAChEd,KAAKW,OAAO,mBAAqBX,KAAKC,MAAMI,OAAOS,SAAS,iBAC5Dd,KAAKW,OAAO,kBAAoBX,KAAKC,MAAMI,OAAOS,SAAS,gBAC3Dd,KAAKW,OAAO,eAAiBX,KAAKC,MAAMI,OAAOS,SAAS,Y,CAG1DU,oBACExB,KAAKe,YACLf,KAAKI,W,CAGPqB,mBACE,GAAIzB,KAAK0B,SAAU,OACnB1B,KAAK2B,QAAU,I,CAGjBC,mBACE5B,KAAK2B,QAAU,K,CAKjBE,UACE,IAAK7B,KAAK8B,SAAU,MAAO,GAE3B,MAAMC,EAAW/B,KAAKgC,OAAS,QAAU,GAAKhC,KAAKgC,OAAS,SAAW,GAAK,GAC5E,MAAMC,EAAWjC,KAAK2B,QAAU,cAAgB,cAChD,MAAMnB,EACJR,KAAK0B,SACA1B,KAAKS,aAAe,QAAU,iBAAmB,eAClDT,KAAK8B,UAAY9B,KAAKQ,YAAc,OAAS,gBAAkB,oBAErE,OAAO0B,EAAA,aAAWC,MAAM,cAAc7B,KAAM2B,EAAUD,KAAMD,EAAUxB,MAAOC,G,CAI/E4B,YAAYC,GACV,GAAIrC,KAAK0B,SAAUW,EAAEC,iBACrBtC,KAAK8B,UAAY9B,KAAK8B,SACtB9B,KAAKuC,QAAQC,KAAK,CAAEV,SAAU9B,KAAK8B,U,CAIrCW,aACE,MAAMC,EAAU,GAChBA,EAAQ,GAAG1C,KAAKgC,KAAKW,iBAAmB,KACxCD,EAAQ,QAAQ1C,KAAK4C,aAAaD,iBAAmB,KACrDD,EAAQ,YAAc1C,KAAK0B,SAC3BgB,EAAQ,YAAc1C,KAAK8B,SAC3B,OAAOY,C,CAGTG,SACE,OACEX,EAACY,EAAI,KACHZ,EAAA,UAAQC,MAAOnC,KAAKyC,aAClBM,MAAO/C,KAAKW,OACZe,SAAU1B,KAAK0B,SACfsB,QAAUX,GAAMrC,KAAKoC,YAAYC,GACjCY,aAAc,IAAMjD,KAAKyB,mBACzByB,aAAc,IAAMlD,KAAK4B,oBACzBM,EAAA,OAAKC,MAAM,oBACRnC,KAAK6B,UACNK,EAAA,QAAMC,MAAM,SAAQD,EAAA,gB"}

package/dist/cura/p-bfe9a9e2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as i}from"./p-ba66d7be.js";const a=':host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-dark);box-shadow:inset 0px 0px 0px 2px var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;position:relative}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted,:host a.inverted{-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.inverted:not(.disabled):not(.isLoading):hover,:host a.inverted:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-lighter);box-shadow:inset 0px 0px 0px 2px var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover .label,:host a.inverted:not(.disabled):not(.isLoading):hover .label{color:var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon,:host a.inverted:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.disabled):not(.isLoading):active,:host a.inverted:not(.disabled):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active .label,:host a.inverted:not(.disabled):not(.isLoading):active .label{color:var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active cura-icon,:host a.inverted:not(.disabled):not(.isLoading):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';const n=class{constructor(o){t(this,o);this.size="large";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor(`neutral-white`);this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor(`neutral-base`);this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor(`neutral-dark`);this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t[`icon-only`]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t}setColors(){this.styles=Object.assign(Object.assign({},this.styles),{"--color-lighter":window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),"--color-light":window.CuraAPI.theme.colors.getColor(`${this.color}-light`),"--color-base":window.CuraAPI.theme.colors.getColor(`${this.color}-base`),"--color-dark":window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)})}getIcon(){if(!this.iconName)return"";const t=this.size==="small"?16:this.size==="medium"?20:24;const i=this.getSymbolColor();return o("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:i})}getSymbolColor(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":`${this.color}-base`}handleClick(t){if(this.disabled||this.isLoading)t.preventDefault()}render(){return o(i,null,this.href?o("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):o("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))}static get watchers(){return{color:["handleChangeColor"]}}};n.style=a;export{n as cura_button_outline};
+//# sourceMappingURL=p-bfe9a9e2.entry.js.map

package/dist/cura/{p-72a9ed55.entry.js.map → p-bfe9a9e2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["curaButtonOutlineCss","CuraButtonOutline","handleChangeColor","this","setColors","connectedCallback","weights","window","CuraAPI","theme","fonts","getWeights","styles","spacing","getSpacing","colors","getColor","getSize","getFamily","medium","textAlign","getClasses","classes","size","toLowerCase","iconPosition","iconOnly","fontColor","disabled","isLoading","Object","assign","color","getIcon","iconName","iconSize","getSymbolColor","h","name","iconset","handleClick","e","preventDefault","render","Host","href","target","class","style","onClick","label","inverted"],"sources":["./src/components/buttons/cura-button-outline/cura-button-outline.scss?tag=cura-button-outline&encapsulation=shadow","./src/components/buttons/cura-button-outline/cura-button-outline.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      border: none;\n      box-shadow: inset 0px 0px 0px 2px var(--color-base);\n\n      &:not(.disabled):not(.isLoading):hover {\n        box-shadow: inset 0px 0px 0px 2px var(--color-light);\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active { \n        box-shadow: inset 0px 0px 0px 2px var(--color-dark);\n        .label { color: var(--color-dark); }\n        cura-icon { --color: var(--color-dark) !important; }\n      }\n    };\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label() {\n      color: var(--color-base);\n      &.inverted { color: var(--neutral-white); }\n    }\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-base);\n      .label, .label.inverted { color: var(--neutral-dark); }\n      &.inverted {\n        opacity: 0.6;\n        box-shadow: inset 0px 0px 0px 2px var(--neutral-white);\n        .label, .label.inverted { color: var(--neutral-white); }\n        cura-icon { --color: var(--neutral-white) !important; }\n        cura-loader-circle { --color: var(--neutral-white) !important; }\n      }\n    };\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Light version, inverted.\n    &.inverted {\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-white);\n      &:not(.disabled):not(.isLoading):hover { \n        box-shadow: inset 0px 0px 0px 2px var(--color-lighter);\n        .label { color: var(--color-lighter); }\n        cura-icon { --color: var(--color-lighter) !important; }\n      }\n      &:not(.disabled):not(.isLoading):active {\n        box-shadow: inset 0px 0px 0px 2px var(--color-light);\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n    }\n\n    // Loading State\n    @include button-loading();\n\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-outline',\n  styleUrl: 'cura-button-outline.scss',\n  shadow: true,\n})\nexport class CuraButtonOutline {\n\n  /**\n  * Button size: small | medium | large (default)\n  */\n  @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({reflect: true}) disabled = false;\n  /**\n  * Loading state. Boolean.\n  */\n  @Prop({reflect: true}) isLoading = false;\n\n  /**\n  * Name of the icon to be used from iconset.\n  */\n  @Prop({reflect: true}) iconName: string;\n  /**\n  * Custom iconset if needed.\n  */\n  @Prop({reflect: true}) iconset = 'default';\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n  /**\n  * Set button to FAB/icon only.\n  */\n  @Prop({reflect: true}) iconOnly = false;\n\n  /**\n  * Property href switch button to link.\n  */\n  @Prop({reflect: true}) href: string;\n  /**\n  * Set target if link.\n  */\n  @Prop({reflect: true}) target = \"_self\";\n\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n  /**\n  * Set text aligment for the button label.\n  * Vales: left (default) | center | right.\n  */\n  @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n  @State() styles = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['inverted'] = this.fontColor === 'light';\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n      '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n    };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const color = this.getSymbolColor();\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  getSymbolColor() {\n    return this.disabled\n      ? 'neutral-dark'\n      : this.fontColor === 'light'\n        ? 'neutral-white'\n        : `${this.color}-base`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) e.preventDefault();\n  }\n\n  render() {\n    return (\n      <Host>\n       { this.href ? (\n        <a href={this.disabled ? '' : this.href}\n          target={this.target}\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={(e) => this.handleClick(e)}>\n          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n        </a>\n      ) : (\n        <button class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled || null}\n          onClick={(e) => this.handleClick(e)}>\n          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}
+{"version":3,"names":["curaButtonOutlineCss","CuraButtonOutline","handleChangeColor","this","setColors","connectedCallback","weights","window","CuraAPI","theme","fonts","getWeights","styles","spacing","getSpacing","colors","getColor","getSize","getFamily","medium","textAlign","getClasses","classes","size","toLowerCase","iconPosition","iconOnly","fontColor","disabled","isLoading","Object","assign","color","getIcon","iconName","iconSize","getSymbolColor","h","name","iconset","handleClick","e","preventDefault","render","Host","href","target","class","style","onClick","label","inverted"],"sources":["./src/components/buttons/cura-button-outline/cura-button-outline.scss?tag=cura-button-outline&encapsulation=shadow","./src/components/buttons/cura-button-outline/cura-button-outline.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      border: none;\n      box-shadow: inset 0px 0px 0px 2px var(--color-base);\n\n      &:not(.disabled):not(.isLoading):hover {\n        box-shadow: inset 0px 0px 0px 2px var(--color-light);\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active { \n        box-shadow: inset 0px 0px 0px 2px var(--color-dark);\n        .label { color: var(--color-dark); }\n        cura-icon { --color: var(--color-dark) !important; }\n      }\n    };\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label() {\n      color: var(--color-base);\n      &.inverted { color: var(--neutral-white); }\n    }\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-base);\n      .label, .label.inverted { color: var(--neutral-dark); }\n      &.inverted {\n        opacity: 0.6;\n        box-shadow: inset 0px 0px 0px 2px var(--neutral-white);\n        .label, .label.inverted { color: var(--neutral-white); }\n        cura-icon { --color: var(--neutral-white) !important; }\n        cura-loader-circle { --color: var(--neutral-white) !important; }\n      }\n    };\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Light version, inverted.\n    &.inverted {\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-white);\n      &:not(.disabled):not(.isLoading):hover { \n        box-shadow: inset 0px 0px 0px 2px var(--color-lighter);\n        .label { color: var(--color-lighter); }\n        cura-icon { --color: var(--color-lighter) !important; }\n      }\n      &:not(.disabled):not(.isLoading):active {\n        box-shadow: inset 0px 0px 0px 2px var(--color-light);\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n    }\n\n    // Loading State\n    @include button-loading();\n\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-outline',\n  styleUrl: 'cura-button-outline.scss',\n  shadow: true,\n})\nexport class CuraButtonOutline {\n\n  /**\n  * Button size: small | medium | large (default)\n  */\n  @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({reflect: true}) disabled = false;\n  /**\n  * Loading state. Boolean.\n  */\n  @Prop({reflect: true}) isLoading = false;\n\n  /**\n  * Name of the icon to be used from iconset.\n  */\n  @Prop({reflect: true}) iconName: string;\n  /**\n  * Custom iconset if needed.\n  */\n  @Prop({reflect: true}) iconset = 'default';\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n  /**\n  * Set button to FAB/icon only.\n  */\n  @Prop({reflect: true}) iconOnly = false;\n\n  /**\n  * Property href switch button to link.\n  */\n  @Prop({reflect: true}) href: string;\n  /**\n  * Set target if link.\n  */\n  @Prop({reflect: true}) target = \"_self\";\n\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n  /**\n  * Set text aligment for the button label.\n  * Vales: left (default) | center | right.\n  */\n  @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n  @State() styles = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['inverted'] = this.fontColor === 'light';\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n      '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n    };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const color = this.getSymbolColor();\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  getSymbolColor() {\n    return this.disabled\n      ? 'neutral-dark'\n      : this.fontColor === 'light'\n        ? 'neutral-white'\n        : `${this.color}-base`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) e.preventDefault();\n  }\n\n  render() {\n    return (\n      <Host>\n       { this.href ? (\n        <a href={this.disabled ? '' : this.href}\n          target={this.target}\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={(e) => this.handleClick(e)}>\n          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n        </a>\n      ) : (\n        <button class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled || null}\n          onClick={(e) => this.handleClick(e)}>\n          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}

package/dist/cura/p-c0ff425e.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as i}from"./p-ba66d7be.js";const a=':host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;border-width:0px;border-color:transparent;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;position:relative}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;border-color:var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted:not(.isLoading):not(.disabled):hover .label,:host a.inverted:not(.isLoading):not(.disabled):hover .label{color:var(--color-lighter)}:host button.inverted:not(.isLoading):not(.disabled):hover cura-icon,:host a.inverted:not(.isLoading):not(.disabled):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.isLoading):not(.disabled):active .label,:host a.inverted:not(.isLoading):not(.disabled):active .label{color:var(--color-light)}:host button.inverted:not(.isLoading):not(.disabled):active cura-icon,:host a.inverted:not(.isLoading):not(.disabled):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';const n=class{constructor(o){t(this,o);this.size="large";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor(`neutral-white`);this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor(`neutral-base`);this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor(`neutral-dark`);this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t[`icon-only`]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t}setColors(){this.styles=Object.assign(Object.assign({},this.styles),{"--color-lighter":window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),"--color-light":window.CuraAPI.theme.colors.getColor(`${this.color}-light`),"--color-base":window.CuraAPI.theme.colors.getColor(`${this.color}-base`),"--color-dark":window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)})}getIcon(){if(!this.iconName)return"";const t=this.size==="small"?16:this.size==="medium"?20:24;const i=this.getSymbolColor();return o("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:i})}getSymbolColor(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":`${this.color}-base`}handleClick(t){if(this.disabled||this.isLoading)t.preventDefault()}render(){return o(i,null,this.href?o("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):o("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))}static get watchers(){return{color:["handleChangeColor"]}}};n.style=a;export{n as cura_button_transparent};
+//# sourceMappingURL=p-c0ff425e.entry.js.map

package/dist/cura/{p-880917c1.entry.js.map → p-c0ff425e.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["curaButtonTransparentCss","CuraButtonTransparent","handleChangeColor","this","setColors","connectedCallback","weights","window","CuraAPI","theme","fonts","getWeights","styles","spacing","getSpacing","colors","getColor","getSize","getFamily","medium","textAlign","getClasses","classes","size","toLowerCase","iconPosition","iconOnly","fontColor","disabled","isLoading","Object","assign","color","getIcon","iconName","iconSize","getSymbolColor","h","name","iconset","handleClick","e","preventDefault","render","Host","href","target","class","style","onClick","label","inverted"],"sources":["./src/components/buttons/cura-button-transparent/cura-button-transparent.scss?tag=cura-button-transparent&encapsulation=shadow","./src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      border-width: 0px;\n      border-color: transparent;\n\n      &:not(.disabled):not(.isLoading):hover {\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active { \n        .label { color: var(--color-dark); }\n        cura-icon { --color: var(--color-dark) !important; }\n      }\n    }\n    \n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label() {\n      color: var(--color-base);\n      &.inverted { color: var(--neutral-white); }\n    }\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n      border-color: var(--neutral-base);\n      .label, .label.inverted { color: var(--neutral-dark); }\n      &.inverted {\n        opacity: 0.6;\n        .label, .label.inverted { color: var(--neutral-white); }\n        cura-icon { --color: var(--neutral-white) !important; }\n        cura-loader-circle { --color: var(--neutral-white) !important; }\n      }\n    }\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    &.inverted {\n      &:not(.isLoading):not(.disabled):hover { \n        .label { color: var(--color-lighter); }\n        cura-icon { --color: var(--color-lighter) !important; }\n      }\n      &:not(.isLoading):not(.disabled):active {\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n    }\n\n    // Loading State\n    @include button-loading();\n\n  }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-transparent',\n  styleUrl: 'cura-button-transparent.scss',\n  shadow: true,\n})\nexport class CuraButtonTransparent {\n\n   /**\n    * Button size: small | medium | large (default)\n    */\n   @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n\n   /**\n    * Disabled state. Boolean.\n    */\n   @Prop({reflect: true}) disabled = false;\n   /**\n    * Loading state. Boolean.\n    */\n   @Prop({reflect: true}) isLoading = false;\n\n   /**\n    * Name of the icon to be used from iconset.\n    */\n   @Prop({reflect: true}) iconName: string;\n   /**\n    * Custom iconset if needed.\n    */\n   @Prop({reflect: true}) iconset = 'default';\n   /**\n    * Icon position: left (default) | right.\n    */\n   @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n   /**\n    * Set button to FAB/icon only.\n    */\n   @Prop({reflect: true}) iconOnly = false;\n\n   /**\n    * Property href switch button to link.\n    */\n   @Prop({reflect: true}) href: string;\n   /**\n    * Set target if link.\n    */\n   @Prop({reflect: true}) target = \"_self\";\n\n   /**\n    * Color base from color scheme. Default: accent.\n    */\n   @Prop() color = 'accent';\n   @Watch('color')\n   handleChangeColor() {\n     this.setColors();\n   }\n   /**\n    * Set the font color to dark or light.\n    */\n   @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n   /**\n    * Set text aligment for the button label.\n    * Vales: left (default) | center | right.\n    */\n   @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n   @State() styles = {};\n\n   weights;\n\n   connectedCallback() {\n     this.weights = window.CuraAPI.theme.fonts.getWeights();\n     this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n     this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n     this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n     this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n     this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n     this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n     this.styles['--font-weight-medium'] = this.weights.medium;\n     this.styles['--text-align'] = this.textAlign;\n     this.setColors();\n   }\n\n   getClasses() {\n     const classes = {};\n     classes[`${this.size.toLowerCase()}`] = true;\n     classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n     classes[`icon-only`] = this.iconOnly;\n     classes['inverted'] = this.fontColor === 'light';\n     classes['disabled'] = this.disabled;\n     classes['isLoading'] = this.isLoading;\n     return classes;\n   }\n\n   setColors() {\n     this.styles = {\n       ...this.styles,\n       '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n       '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n       '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n       '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n     };\n   }\n\n   getIcon() {\n     if (!this.iconName) return '';\n     const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n     const color = this.getSymbolColor();\n     return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n   }\n\n   getSymbolColor() {\n     return this.disabled\n       ? 'neutral-dark'\n       : this.fontColor === 'light'\n         ? 'neutral-white'\n         : `${this.color}-base`;\n   }\n\n   handleClick(e: Event) {\n     if (this.disabled || this.isLoading) e.preventDefault();\n   }\n\n   render() {\n     return (\n       <Host>\n       { this.href ? (\n         <a href={this.disabled ? '' : this.href}\n           target={this.target}\n           class={this.getClasses()}\n           style={this.styles}\n           onClick={(e) => this.handleClick(e)}>\n           <span class=\"button-container\">\n             { this.getIcon() }\n             <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n           </span>\n           <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n         </a>\n       ) : (\n         <button class={this.getClasses()}\n           style={this.styles}\n           disabled={this.disabled || null}\n           onClick={(e) => this.handleClick(e)}>\n           <span class=\"button-container\">\n             { this.getIcon() }\n             <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n           </span>\n           <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n         </button>\n       )}\n       </Host>\n     );\n   }\n\n}\n"],"mappings":"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"}
+{"version":3,"names":["curaButtonTransparentCss","CuraButtonTransparent","handleChangeColor","this","setColors","connectedCallback","weights","window","CuraAPI","theme","fonts","getWeights","styles","spacing","getSpacing","colors","getColor","getSize","getFamily","medium","textAlign","getClasses","classes","size","toLowerCase","iconPosition","iconOnly","fontColor","disabled","isLoading","Object","assign","color","getIcon","iconName","iconSize","getSymbolColor","h","name","iconset","handleClick","e","preventDefault","render","Host","href","target","class","style","onClick","label","inverted"],"sources":["./src/components/buttons/cura-button-transparent/cura-button-transparent.scss?tag=cura-button-transparent&encapsulation=shadow","./src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      border-width: 0px;\n      border-color: transparent;\n\n      &:not(.disabled):not(.isLoading):hover {\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active { \n        .label { color: var(--color-dark); }\n        cura-icon { --color: var(--color-dark) !important; }\n      }\n    }\n    \n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label() {\n      color: var(--color-base);\n      &.inverted { color: var(--neutral-white); }\n    }\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n      border-color: var(--neutral-base);\n      .label, .label.inverted { color: var(--neutral-dark); }\n      &.inverted {\n        opacity: 0.6;\n        .label, .label.inverted { color: var(--neutral-white); }\n        cura-icon { --color: var(--neutral-white) !important; }\n        cura-loader-circle { --color: var(--neutral-white) !important; }\n      }\n    }\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    &.inverted {\n      &:not(.isLoading):not(.disabled):hover { \n        .label { color: var(--color-lighter); }\n        cura-icon { --color: var(--color-lighter) !important; }\n      }\n      &:not(.isLoading):not(.disabled):active {\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n    }\n\n    // Loading State\n    @include button-loading();\n\n  }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-transparent',\n  styleUrl: 'cura-button-transparent.scss',\n  shadow: true,\n})\nexport class CuraButtonTransparent {\n\n   /**\n    * Button size: small | medium | large (default)\n    */\n   @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n\n   /**\n    * Disabled state. Boolean.\n    */\n   @Prop({reflect: true}) disabled = false;\n   /**\n    * Loading state. Boolean.\n    */\n   @Prop({reflect: true}) isLoading = false;\n\n   /**\n    * Name of the icon to be used from iconset.\n    */\n   @Prop({reflect: true}) iconName: string;\n   /**\n    * Custom iconset if needed.\n    */\n   @Prop({reflect: true}) iconset = 'default';\n   /**\n    * Icon position: left (default) | right.\n    */\n   @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n   /**\n    * Set button to FAB/icon only.\n    */\n   @Prop({reflect: true}) iconOnly = false;\n\n   /**\n    * Property href switch button to link.\n    */\n   @Prop({reflect: true}) href: string;\n   /**\n    * Set target if link.\n    */\n   @Prop({reflect: true}) target = \"_self\";\n\n   /**\n    * Color base from color scheme. Default: accent.\n    */\n   @Prop() color = 'accent';\n   @Watch('color')\n   handleChangeColor() {\n     this.setColors();\n   }\n   /**\n    * Set the font color to dark or light.\n    */\n   @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n   /**\n    * Set text aligment for the button label.\n    * Vales: left (default) | center | right.\n    */\n   @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n   @State() styles = {};\n\n   weights;\n\n   connectedCallback() {\n     this.weights = window.CuraAPI.theme.fonts.getWeights();\n     this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n     this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n     this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n     this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n     this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n     this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n     this.styles['--font-weight-medium'] = this.weights.medium;\n     this.styles['--text-align'] = this.textAlign;\n     this.setColors();\n   }\n\n   getClasses() {\n     const classes = {};\n     classes[`${this.size.toLowerCase()}`] = true;\n     classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n     classes[`icon-only`] = this.iconOnly;\n     classes['inverted'] = this.fontColor === 'light';\n     classes['disabled'] = this.disabled;\n     classes['isLoading'] = this.isLoading;\n     return classes;\n   }\n\n   setColors() {\n     this.styles = {\n       ...this.styles,\n       '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n       '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n       '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n       '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n     };\n   }\n\n   getIcon() {\n     if (!this.iconName) return '';\n     const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n     const color = this.getSymbolColor();\n     return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n   }\n\n   getSymbolColor() {\n     return this.disabled\n       ? 'neutral-dark'\n       : this.fontColor === 'light'\n         ? 'neutral-white'\n         : `${this.color}-base`;\n   }\n\n   handleClick(e: Event) {\n     if (this.disabled || this.isLoading) e.preventDefault();\n   }\n\n   render() {\n     return (\n       <Host>\n       { this.href ? (\n         <a href={this.disabled ? '' : this.href}\n           target={this.target}\n           class={this.getClasses()}\n           style={this.styles}\n           onClick={(e) => this.handleClick(e)}>\n           <span class=\"button-container\">\n             { this.getIcon() }\n             <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n           </span>\n           <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n         </a>\n       ) : (\n         <button class={this.getClasses()}\n           style={this.styles}\n           disabled={this.disabled || null}\n           onClick={(e) => this.handleClick(e)}>\n           <span class=\"button-container\">\n             { this.getIcon() }\n             <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n           </span>\n           <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n         </button>\n       )}\n       </Host>\n     );\n   }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAA2B,mzL,MCOpBC,EAAqB,M,mCAK6B,Q,cAK1B,M,eAIC,M,qCASF,U,kBAIuB,O,cAItB,M,gCASF,Q,WAKhB,S,eAQqC,O,eAKW,O,YAG9C,E,CAdlBC,oBACEC,KAAKC,W,CAiBPC,oBACEF,KAAKG,QAAUC,OAAOC,QAAQC,MAAMC,MAAMC,aAC1CR,KAAKS,OAAO,kBAAoBL,OAAOC,QAAQC,MAAMI,QAAQC,aAC7DX,KAAKS,OAAO,mBAAqBL,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,iBACtEb,KAAKS,OAAO,kBAAoBL,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,gBACrEb,KAAKS,OAAO,kBAAoBL,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,gBACrEb,KAAKS,OAAO,eAAiBL,OAAOC,QAAQC,MAAMC,MAAMO,UACxDd,KAAKS,OAAO,iBAAmBL,OAAOC,QAAQC,MAAMC,MAAMQ,YAC1Df,KAAKS,OAAO,wBAA0BT,KAAKG,QAAQa,OACnDhB,KAAKS,OAAO,gBAAkBT,KAAKiB,UACnCjB,KAAKC,W,CAGPiB,aACE,MAAMC,EAAU,GAChBA,EAAQ,GAAGnB,KAAKoB,KAAKC,iBAAmB,KACxCF,EAAQ,QAAQnB,KAAKsB,aAAaD,iBAAmB,KACrDF,EAAQ,aAAenB,KAAKuB,SAC5BJ,EAAQ,YAAcnB,KAAKwB,YAAc,QACzCL,EAAQ,YAAcnB,KAAKyB,SAC3BN,EAAQ,aAAenB,KAAK0B,UAC5B,OAAOP,C,CAGTlB,YACED,KAAKS,OAAMkB,OAAAC,OAAAD,OAAAC,OAAA,GACN5B,KAAKS,QAAM,CACd,kBAAmBL,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,GAAGb,KAAK6B,iBAChE,gBAAiBzB,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,GAAGb,KAAK6B,eAC9D,eAAgBzB,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,GAAGb,KAAK6B,cAC7D,eAAgBzB,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,GAAGb,KAAK6B,e,CAIjEC,UACE,IAAK9B,KAAK+B,SAAU,MAAO,GAC3B,MAAMC,EAAWhC,KAAKoB,OAAS,QAAU,GAAKpB,KAAKoB,OAAS,SAAW,GAAK,GAC5E,MAAMS,EAAQ7B,KAAKiC,iBACnB,OAAOC,EAAA,aAAWC,KAAMnC,KAAK+B,SAAUK,QAASpC,KAAKoC,QAAShB,KAAMY,EAAUH,MAAOA,G,CAGvFI,iBACE,OAAOjC,KAAKyB,SACR,eACAzB,KAAKwB,YAAc,QACjB,gBACA,GAAGxB,KAAK6B,Y,CAGhBQ,YAAYC,GACV,GAAItC,KAAKyB,UAAYzB,KAAK0B,UAAWY,EAAEC,gB,CAGzCC,SACE,OACEN,EAACO,EAAI,KACHzC,KAAK0C,KACLR,EAAA,KAAGQ,KAAM1C,KAAKyB,SAAW,GAAKzB,KAAK0C,KACjCC,OAAQ3C,KAAK2C,OACbC,MAAO5C,KAAKkB,aACZ2B,MAAO7C,KAAKS,OACZqC,QAAUR,GAAMtC,KAAKqC,YAAYC,IACjCJ,EAAA,QAAMU,MAAM,oBACR5C,KAAK8B,UACPI,EAAA,QAAMU,MAAO,CAACG,MAAO,KAAMC,SAAUhD,KAAKwB,YAAc,UAAUU,EAAA,eAEpEA,EAAA,sBAAoBd,KAAMpB,KAAKoB,KAAMS,MAAO7B,KAAKiC,oBAGnDC,EAAA,UAAQU,MAAO5C,KAAKkB,aAClB2B,MAAO7C,KAAKS,OACZgB,SAAUzB,KAAKyB,UAAY,KAC3BqB,QAAUR,GAAMtC,KAAKqC,YAAYC,IACjCJ,EAAA,QAAMU,MAAM,oBACR5C,KAAK8B,UACPI,EAAA,QAAMU,MAAO,CAACG,MAAO,KAAMC,SAAUhD,KAAKwB,YAAc,UAAUU,EAAA,eAEpEA,EAAA,sBAAoBd,KAAMpB,KAAKoB,KAAMS,MAAO7B,KAAKiC,oB"}

package/dist/cura/{p-a6d20c12.system.entry.js → p-cb4e2a0c.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-36a83bc7.system.js","./p-d3f9c888.system.js"],(function(r){"use strict";var e,a,s,o,t,i;return{setters:[function(r){e=r.r;a=r.c;s=r.h;o=r.H;t=r.g},function(r){i=r.f}],execute:function(){var n='@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)}';var c=r("cura_radio",function(){function r(r){var s=this;e(this,r);this.onchange=a(this,"onchange",7);this.sizes={large:{size:20},medium:{size:14},small:{size:10}};this.isDarkbackground=function(){return s.background==="dark"};this.handleClick=function(){if(s.disabled)return;s.checked=!s.checked;s.onchange.emit({value:s.value,checked:s.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={}}r.prototype.sizeHandler=function(){this.styles["--size-after"]="".concat(this.sizes[this.size].size,"px");this.styles["--size"]="".concat(i[this.size].size,"px");this.styles["--gap"]="".concat(i[this.size].gap,"px")};r.prototype.setColors=function(){var r=this;var e=[{name:"--info-base",background:"info-base"},{name:"--color-light",background:"".concat(this.color,"-light")},{name:"--color-base",background:"".concat(this.color,"-base")},{name:"--color-dark",background:"".concat(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"}];e.forEach((function(e){return r.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background)}))};r.prototype.connectedCallback=function(){this.sizeHandler();this.setColors()};r.prototype.getClasses=function(){var r={};r["container"]=true;r["checked"]=this.checked;r["disabled"]=this.disabled;r["position"]=this.position==="right";r[this.status]=true;return r};r.prototype.assignColor=function(r){if(this.disabled)return this.isDarkbackground()?"primary-darker":"neutral-medium";var e={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 e[this.status][r]};r.prototype.render=function(){return s(o,null,s("div",{class:this.getClasses(),style:this.styles},s("div",{class:"info"},s("div",{class:"label-wrapper"},s("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&s("cura-paragraph",{lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),s("cura-label",{color:this.assignColor("message"),size:"xsmall",class:"message"},s("slot",null))),s("input",{type:"radio",class:"radio ".concat(this.size.toLocaleLowerCase()),name:this.name,value:this.value,required:this.required,tabIndex:this.ontabindex,disabled:this.disabled,checked:this.checked,onClick:this.handleClick})))};Object.defineProperty(r.prototype,"host",{get:function(){return t(this)},enumerable:false,configurable:true});Object.defineProperty(r,"watchers",{get:function(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}},enumerable:false,configurable:true});return r}());c.style=n}}}));
-//# sourceMappingURL=p-a6d20c12.system.entry.js.map
+System.register(["./p-36a83bc7.system.js","./p-d3f9c888.system.js"],(function(r){"use strict";var e,a,s,o,t,i;return{setters:[function(r){e=r.r;a=r.c;s=r.h;o=r.H;t=r.g},function(r){i=r.f}],execute:function(){var n='@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)}';var c=r("cura_radio",function(){function r(r){var s=this;e(this,r);this.onchange=a(this,"onchange",7);this.sizes={large:{size:20},medium:{size:14},small:{size:10}};this.isDarkbackground=function(){return s.background==="dark"};this.handleClick=function(){if(s.disabled)return;s.checked=!s.checked;s.onchange.emit({value:s.value,checked:s.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={}}r.prototype.sizeHandler=function(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-after":"".concat(this.sizes[this.size].size,"px"),"--size":"".concat(i[this.size].size,"px"),"--gap":"".concat(i[this.size].gap,"px")})};r.prototype.setColors=function(){var r=this;var e=[{name:"--info-base",background:"info-base"},{name:"--color-light",background:"".concat(this.color,"-light")},{name:"--color-base",background:"".concat(this.color,"-base")},{name:"--color-dark",background:"".concat(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"}];e.forEach((function(e){r.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background)}));this.styles=Object.assign({},this.styles)};r.prototype.connectedCallback=function(){this.sizeHandler();this.setColors()};r.prototype.getClasses=function(){var r={};r["container"]=true;r["checked"]=this.checked;r["disabled"]=this.disabled;r["position"]=this.position==="right";r[this.status]=true;return r};r.prototype.assignColor=function(r){if(this.disabled)return this.isDarkbackground()?"primary-darker":"neutral-medium";var e={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 e[this.status][r]};r.prototype.render=function(){return s(o,null,s("div",{class:this.getClasses(),style:this.styles},s("div",{class:"info"},s("div",{class:"label-wrapper"},s("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&s("cura-paragraph",{lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),s("cura-label",{color:this.assignColor("message"),size:"xsmall",class:"message"},s("slot",null))),s("input",{type:"radio",class:"radio ".concat(this.size.toLocaleLowerCase()),name:this.name,value:this.value,required:this.required,tabIndex:this.ontabindex,disabled:this.disabled,checked:this.checked,onClick:this.handleClick})))};Object.defineProperty(r.prototype,"host",{get:function(){return t(this)},enumerable:false,configurable:true});Object.defineProperty(r,"watchers",{get:function(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}},enumerable:false,configurable:true});return r}());c.style=n}}}));
+//# sourceMappingURL=p-cb4e2a0c.system.entry.js.map

package/dist/cura/p-cb4e2a0c.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["curaRadioCss","CuraRadio","exports","this","sizes","large","size","medium","small","isDarkbackground","_this","background","handleClick","disabled","checked","onchange","emit","value","class_1","prototype","sizeHandler","styles","Object","assign","concat","formsSizes","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","label","message","error","default","render","h","Host","class","style","required","lineHeight","marginBlock","toLocaleLowerCase","tabIndex","ontabindex","onClick"],"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"],"mappings":"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"}

package/dist/cura/p-f51705c2.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-36a83bc7.system.js","./p-d3f9c888.system.js"],(function(e){"use strict";var r,a,s,i,o,t;return{setters:[function(e){r=e.r;a=e.c;s=e.h;i=e.H;o=e.g},function(e){t=e.f}],execute:function(){var c='@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}.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)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label-wrapper{-ms-flex-pack:end;justify-content:end}.position .message{text-align:right}.position .label{-ms-flex-order:1;order:1}.info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--primary-base-neutral-medium);border-radius:4px;background:var(--neutral-lighter-neutral-purewhite);-ms-flex:1 0;flex:1 0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:-ms-flexbox;display:flex;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--primary-darker-neutral-white);border-color:var(--primary-base-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--primary-base-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--primary-base-neutral-white);border-color:var(--primary-base-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--primary-base-neutral-base)}.checked .checkbox,.indeterminate .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover,.indeterminate .checkbox:hover{border-color:var(--color-light) !important;background:var(--color-lighter)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--primary-base-neutral-dark)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}';var n=e("cura_checkbox",function(){function e(e){var s=this;r(this,e);this.onchange=a(this,"onchange",7);this.isDarkbackground=function(){return s.background==="dark"};this.isDarkIconColor=function(){return s.iconColor==="dark"};this.handleClick=function(){if(s.disabled)return;s.indeterminate=false;s.checked=!s.checked;s.onchange.emit({value:s.value,checked:s.checked,indeterminate:s.indeterminate})};this.checked=false;this.indeterminate=false;this.status="default";this.disabled=false;this.required=false;this.label=undefined;this.ontabindex=0;this.position="left";this.value=undefined;this.name=undefined;this.size="medium";this.background="light";this.iconColor="dark";this.color="accent";this.styles={}}e.prototype.sizeHandler=function(){this.styles=Object.assign(Object.assign({},this.styles),{"--size":"".concat(t[this.size].size,"px"),"--gap":"".concat(t[this.size].gap,"px")})};e.prototype.setColors=function(){var e=this;var r=[{name:"--color-base",background:"".concat(this.color,"-base")},{name:"--color-lighter",background:"".concat(this.color,"-lighter")},{name:"--color-light",background:"".concat(this.color,"-light")},{name:"--color-dark",background:"".concat(this.color,"-dark")},{name:"--info-base",background:"info-base"},{name:"--error-base",background:"error-base"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--success-dark",background:"success-dark"},{name:"--error-lighter",background:"error-lighter"},{name:"--primary-base-neutral-white",background:this.isDarkbackground()?"primary-base":"neutral-white"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--neutral-lighter-neutral-purewhite",background:this.isDarkbackground()?"neutral-lighter":"neutral-purewhite"},{name:"--primary-darker-neutral-white",background:this.isDarkbackground()?"primary-darker":"neutral-white"},{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-lighter",background:this.isDarkbackground()?"success-base":"success-lighter"},{name:"--success-dark-base",background:this.isDarkbackground()?"success-dark":"success-base"},{name:"--error-base-lighter",background:this.isDarkbackground()?"error-base":"error-lighter"},{name:"--error-dark-base",background:this.isDarkbackground()?"error-dark":"error-base"}];r.forEach((function(r){e.styles[r.name]=window.CuraAPI.theme.colors.getColor(r.background)}));this.styles=Object.assign({},this.styles)};e.prototype.connectedCallback=function(){this.sizeHandler();this.setColors()};e.prototype.getClasses=function(){var e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e["indeterminate"]=this.indeterminate;e["position"]=this.position==="right";e[this.status]=true;return e};e.prototype.assignColor=function(e){if(this.disabled)return this.isDarkbackground()?"primary-darker":"neutral-medium";var r={success:{icon:"success-dark",label:this.isDarkbackground()?"success-lighter":"success-darker",message:this.isDarkbackground()?"success-base":"success-dark"},error:{icon:"error-dark",label:this.isDarkbackground()?"error-lighter":"neutral-darker",message:this.isDarkbackground()?"error-base":"error-dark"},default:{icon:this.isDarkIconColor()?"neutral-black":"neutral-purewhite",label:this.isDarkbackground()?"neutral-white":"neutral-black",message:this.isDarkbackground()?"primary-lighter":"neutral-dark"}};return r[this.status][e]};e.prototype.getIcon=function(){var e=this.indeterminate?"minus":"check";var r=this.assignColor("icon");var a=this.size==="large"?20:"micro";return s("cura-icon",{class:"icon",name:e,size:a,color:r})};e.prototype.render=function(){return s(i,null,s("div",{class:this.getClasses(),style:this.styles},s("div",{class:"info"},s("div",{class:"label-wrapper"},s("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&s("cura-paragraph",{lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),s("cura-label",{color:this.assignColor("message"),size:"xsmall",class:"message"},s("slot",null))),s("div",{class:"checkbox",onClick:this.handleClick,tabIndex:this.ontabindex},s("input",{type:"checkbox",name:this.name,value:this.value,disabled:this.disabled,required:this.required,checked:this.checked,indeterminate:this.indeterminate}),this.getIcon())))};Object.defineProperty(e.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}},enumerable:false,configurable:true});return e}());n.style=c}}}));
+//# sourceMappingURL=p-f51705c2.system.entry.js.map

package/dist/cura/p-f51705c2.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["curaCheckboxCss","CuraCheckbox","exports","this","isDarkbackground","_this","background","isDarkIconColor","iconColor","handleClick","disabled","indeterminate","checked","onchange","emit","value","class_1","prototype","sizeHandler","styles","Object","assign","concat","formsSizes","size","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","icon","label","message","error","default","getIcon","iconName","iconSize","h","class","render","Host","style","required","lineHeight","marginBlock","onClick","tabIndex","ontabindex"],"sources":["src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n  box-sizing: border-box;\n}\n\n/* Container e Layout */\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--gap);\n\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/* Control e Checkbox */\n.control {\n  width: fit-content;\n  cursor: pointer;\n  position: relative;\n}\n\n.checkbox {\n  appearance: none;\n  border: 2px solid var(--primary-base-neutral-medium);\n  border-radius: 4px;\n  background: var(--neutral-lighter-neutral-purewhite);\n  flex: 1 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  box-sizing: border-box;\n  width: var(--size);\n  height: var(--size);\n  flex: 0 0 var(--size);\n}\n\n.icon {\n  position: absolute;\n  display: flex;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n\n/* Estados de Foco */\n.checkbox:focus {\n  border-color: var(--info-base) !important;\n}\n\n/* Estado Disabled */\n.disabled .checkbox {\n  background: var(--primary-darker-neutral-white);\n  border-color: var(--primary-base-neutral-base);\n  cursor: not-allowed;\n\n  &:hover {\n    border-color: var(--primary-base-neutral-base) !important;\n  }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n  background: var(--primary-base-neutral-white);\n  border-color: var(--primary-base-neutral-base);\n\n  &:hover {\n    border-color: var(--primary-base-neutral-base) !important;\n    background: var(--primary-base-neutral-white);\n\n  }\n}\n\n.disabled .checkbox:focus {\n  border-color: var(--primary-base-neutral-base);\n}\n\n/* Estado Checked */\n.checked .checkbox,\n.indeterminate .checkbox {\n  border-color: var(--color-dark);\n  background: var(--color-base);\n\n  &:hover {\n    border-color: var(--color-light) !important;\n    background: var(--color-lighter);\n  }\n}\n\n.checked .icon,\n.indeterminate .icon {\n  opacity: 1;\n}\n\n/* Hover para não disabled, checked, indeterminate */\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n  border-color: var(--primary-base-neutral-dark);\n}\n\n/* Estado Success */\n.success .checkbox {\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 .checkbox {\n  border-color: var(--success-dark-base);\n  background: var(--success-base-lighter);\n\n  &:hover {\n    border-color: var(--success-dark-base);\n  }\n}\n\n/* Estado Error */\n.error .checkbox {\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 .checkbox {\n  border-color: var(--error-dark-base);\n  background: var(--error-base-lighter);\n\n  &:hover {\n    border-color: var(--error-dark-base);\n  }\n}\n\n/* Input */\ninput {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\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-checkbox',\n  styleUrl: 'cura-checkbox.scss',\n  shadow: true,\n})\n\nexport class CuraCheckbox {\n  /**\n   * Reflects the checked state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Reflects the indeterminate state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n  /**\n  * Status of the checkbox.\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 checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n  * Reflects the required state of the checkbox.\n  */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the checkbox.\n   */\n  @Prop({ reflect: true }) label: string;\n  /**\n   * Specifies the tabindex of the checkbox.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the checkbox.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Value associated with the checkbox.\n   */\n  @Prop({ reflect: true }) value: string;\n  /**\n   * Name attribute of the checkbox.\n   */\n  @Prop({ reflect: true }) name: string;\n  /**\n   * Size of the checkbox.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background theme of the checkbox.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * iconColor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() iconColor: 'dark' | 'light' = 'dark';\n  /**\n   * Color theme of the checkbox.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string, checked: boolean, indeterminate: boolean }>;\n\n  isDarkbackground = () => this.background === 'dark';\n\n  isDarkIconColor = () => this.iconColor === 'dark';\n\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`\n    };\n  }\n\n\n  /**\n   * Watches changes in color and background properties to update styles.\n   */\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-lighter', background: `${this.color}-lighter` },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--info-base', background: 'info-base' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--success-dark', background: 'success-dark' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\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-lighter', background: this.isDarkbackground() ? 'success-base' : 'success-lighter' },\n      { name: '--success-dark-base', background: this.isDarkbackground() ? 'success-dark' : 'success-base' },\n      { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },\n      { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },\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  /**\n   * Handles click event on the checkbox.\n   * Emits onchange event with value, checked, and indeterminate states.\n   */\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n    this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n  };\n\n  /**\n   * Retrieves classes based on component state for conditional styling.\n   */\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['indeterminate'] = this.indeterminate;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  /**\n * Assigns color based on status and background theme.\n * @param defaultColor Default color.\n */\n\n  @Watch('background')\n  @Watch('iconColor')\n  assignColor(type: 'icon' | 'label' | 'message',) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        icon: 'success-dark',\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n      },\n      error: {\n        icon: 'error-dark',\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n      },\n      default: {\n        icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\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  /**\n   * Retrieves icon element based on checkbox state.\n   */\n  getIcon() {\n    const iconName = this.indeterminate ? 'minus' : \"check\"\n    const iconColor = this.assignColor('icon');\n    const iconSize = this.size === 'large' ? 20 : \"micro\"\n\n    return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>\n  }\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          <div class={\"checkbox\"} onClick={this.handleClick} tabIndex={this.ontabindex}>\n            <input\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              required={this.required}\n              checked={this.checked}\n              indeterminate={this.indeterminate}\n            />\n            {this.getIcon()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/cura/p-fc4ba4ce.system.js

@@ -1,2 +1,2 @@
-System.register(["./p-36a83bc7.system.js","./p-48426f60.system.js"],(function(o,e){"use strict";var i,c,n,s,t;return{setters:[function(e){i=e.p;c=e.w;n=e.a;s=e.b;o("setNonce",e.s)},function(o){t=o.g}],execute:function(){var o=function(){{i.$cssShim$=c.__cssshim}var o=e.meta.url;var s={};if(o!==""){s.resourcesUrl=new URL(".",o).href}return n(s)};o().then((function(o){t();return s([["p-b0e13882.system",[[1,"cura-button",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}],[1,"cura-accordion-item",{label:[513],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],colorMode:[1,"color-mode"],opened:[1540],styles:[32]}],[1,"cura-accordion",{color:[513],activeColor:[513,"active-color"],colorMode:[513,"color-mode"],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],behavior:[513],styles:[32]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-loader-circle",{size:[513],color:[513]}],[1,"cura-paragraph",{size:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]}]]],["p-ab8c9a8f.system",[[1,"cura-icons-view",{selected:[32]}]]],["p-ffd41520.system",[[1,"cura-alert",{type:[1],floating:[516],label:[513],closeable:[516],styles:[32]}]]],["p-eea5ca70.system",[[1,"cura-checkbox",{checked:[1540],indeterminate:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],size:[513],background:[1],iconColor:[1,"icon-color"],color:[1],styles:[32]}]]],["p-f89f2ecc.system",[[1,"cura-input-text",{mode:[1537],status:[1537],size:[1537],type:[513],label:[513],placeholder:[513],value:[1032],iconName:[1537,"icon-name"],helperText:[1537,"helper-text"],disabled:[516],required:[516],maskPreset:[8,"mask-preset"],maskRegex:[1537,"mask-regex"],maskAdvanced:[1537,"mask-advanced"],maxlength:[1538],readOnly:[516,"read-only"],isLoading:[1540,"is-loading"],clearIcon:[1540,"clear-icon"],isHovered:[32],isFocused:[32],styles:[32]}]]],["p-75b2e4d1.system",[[1,"cura-button-outline",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-98352c92.system",[[1,"cura-button-transparent",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-a6d20c12.system",[[1,"cura-radio",{checked:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],background:[1],size:[1],color:[1],styles:[32]}]]],["p-3f3355f3.system",[[1,"cura-button-select",{size:[513],disabled:[516],selected:[516],iconPosition:[513,"icon-position"],color:[1],background:[1],fontcolor:[1],hovered:[32],styles:[32]}]]],["p-f6e61abf.system",[[1,"cura-switch",{checked:[1540],disabled:[516],label:[513],ontabindex:[514],position:[513],size:[513],background:[1],color:[1],styles:[32]}]]],["p-e5e259fd.system",[[1,"cura-display",{level:[514],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]],["p-9471c93e.system",[[1,"cura-label",{size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]]],o)}))}}}));
+System.register(["./p-36a83bc7.system.js","./p-48426f60.system.js"],(function(o,e){"use strict";var i,c,n,s,t;return{setters:[function(e){i=e.p;c=e.w;n=e.a;s=e.b;o("setNonce",e.s)},function(o){t=o.g}],execute:function(){var o=function(){{i.$cssShim$=c.__cssshim}var o=e.meta.url;var s={};if(o!==""){s.resourcesUrl=new URL(".",o).href}return n(s)};o().then((function(o){t();return s([["p-5a6c2cd2.system",[[1,"cura-button",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}],[1,"cura-accordion-item",{label:[513],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],colorMode:[1,"color-mode"],opened:[1540],styles:[32]}],[1,"cura-accordion",{color:[513],activeColor:[513,"active-color"],colorMode:[513,"color-mode"],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],behavior:[513],styles:[32]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-loader-circle",{size:[513],color:[513]}],[1,"cura-paragraph",{size:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]}]]],["p-ab8c9a8f.system",[[1,"cura-icons-view",{selected:[32]}]]],["p-ffd41520.system",[[1,"cura-alert",{type:[1],floating:[516],label:[513],closeable:[516],styles:[32]}]]],["p-f51705c2.system",[[1,"cura-checkbox",{checked:[1540],indeterminate:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],size:[513],background:[1],iconColor:[1,"icon-color"],color:[1],styles:[32]}]]],["p-f89f2ecc.system",[[1,"cura-input-text",{mode:[1537],status:[1537],size:[1537],type:[513],label:[513],placeholder:[513],value:[1032],iconName:[1537,"icon-name"],helperText:[1537,"helper-text"],disabled:[516],required:[516],maskPreset:[8,"mask-preset"],maskRegex:[1537,"mask-regex"],maskAdvanced:[1537,"mask-advanced"],maxlength:[1538],readOnly:[516,"read-only"],isLoading:[1540,"is-loading"],clearIcon:[1540,"clear-icon"],isHovered:[32],isFocused:[32],styles:[32]}]]],["p-a56f9357.system",[[1,"cura-button-outline",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-7c744ff0.system",[[1,"cura-button-transparent",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-cb4e2a0c.system",[[1,"cura-radio",{checked:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],background:[1],size:[1],color:[1],styles:[32]}]]],["p-0c2644aa.system",[[1,"cura-button-select",{size:[513],disabled:[516],selected:[516],iconPosition:[513,"icon-position"],color:[1],background:[1],fontcolor:[1],hovered:[32],styles:[32]}]]],["p-a719b444.system",[[1,"cura-switch",{checked:[1540],disabled:[516],label:[513],ontabindex:[514],position:[513],size:[513],background:[1],color:[1],styles:[32]}]]],["p-e5e259fd.system",[[1,"cura-display",{level:[514],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]],["p-9471c93e.system",[[1,"cura-label",{size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]]],o)}))}}}));
 //# sourceMappingURL=p-fc4ba4ce.system.js.map

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

@@ -124,7 +124,7 @@ const CuraAccordionItem = class {
 };
 CuraAccordionItem.style = curaAccordionItemCss;
 
-const curaButtonCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:var(--color-base);border:none;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.isLoading):not(.disabled):hover,:host a:not(.isLoading):not(.disabled):hover{background-color:var(--color-light)}:host button:not(.isLoading):not(.disabled):active,:host a:not(.isLoading):not(.disabled):active{background-color:var(--color-dark)}:host button:hover,:host a:hover{-webkit-box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16);box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16)}:host button.medium:hover,:host a.medium:hover{-webkit-box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16);box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16)}:host button.small:hover,:host a.small:hover{-webkit-box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16);box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16)}:host button:active,:host button.disabled:hover,:host button.isLoading:hover,:host a:active,:host a.disabled:hover,:host a.isLoading:hover{-webkit-box-shadow:none !important;box-shadow:none !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--neutral-black)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-light)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
+const curaButtonCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:var(--color-base);border:none;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.isLoading):not(.disabled):hover,:host a:not(.isLoading):not(.disabled):hover{background-color:var(--color-light)}:host button:not(.isLoading):not(.disabled):active,:host a:not(.isLoading):not(.disabled):active{background-color:var(--color-dark)}:host button:hover,:host a:hover{-webkit-box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16);box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16)}:host button.medium:hover,:host a.medium:hover{-webkit-box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16);box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16)}:host button.small:hover,:host a.small:hover{-webkit-box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16);box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16)}:host button:active,:host button.disabled:hover,:host button.isLoading:hover,:host a:active,:host a.disabled:hover,:host a.isLoading:hover{-webkit-box-shadow:none !important;box-shadow:none !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;position:relative}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--neutral-black)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-light)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
 
 const CuraButton = class {
   constructor(hostRef) {