@rededor/cura 0.3.4-alpha.2 → 0.3.4

package/dist/collection/components/buttons/cura-button/cura-button.css

@@ -3,6 +3,8 @@
   vertical-align: middle;
 }
 :host button, :host a {
+  --shadown-color: 38, 38, 38;
+  --shadow-opacity: 0.16;
   outline: none;
   box-shadow: none;
   box-sizing: border-box;
@@ -11,22 +13,24 @@
   display: flex;
   width: 100%;
   align-items: center;
-  background-color: var(--color-base);
-  border-width: 1px;
-  border-color: var(--color-dark);
-  border-style: solid;
   border-radius: 4px;
-  transition: background-color 0.12s linear, box-shadow 0.12s linear, border-color 0.12s linear;
+  transition: background-color 0.1s linear, box-shadow 0.1s linear, border-color 0.1s linear;
+  font-size: var(--font-size);
   cursor: pointer;
 }
 :host button:hover, :host a:hover {
-  background-color: var(--color-light);
-  border-color: var(--color-base);
-  box-shadow: 0 4px 8px 0 var(--neutral-light);
+  box-shadow: 0 4px 8px 0 RGBA(var(--shadown-color), var(--shadow-opacity));
+}
+:host button:active, :host a:active {
+  box-shadow: none;
 }
 :host button .label, :host a .label {
   flex: 1;
   color: var(--neutral-black);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 1.43em;
+  line-height: 1.1em;
 }
 :host button.icon-left cura-icon, :host a.icon-left cura-icon {
   margin-right: calc(var(--base-spacing) * 3px);
@@ -42,14 +46,24 @@
   min-height: calc(var(--base-spacing) * 11px);
 }
 :host button.medium:hover, :host a.medium:hover {
-  box-shadow: 0 3px 6px 0 var(--neutral-light);
+  box-shadow: 0 3px 6px 0 RGBA(var(--shadown-color), var(--shadow-opacity));
+}
+:host button.medium:active, :host a.medium:active {
+  box-shadow: none;
+}
+:host button.medium .label, :host a.medium .label {
+  font-size: 1.14em;
+  letter-spacing: 2%;
 }
 :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);
 }
 :host button.small:hover, :host a.small:hover {
-  box-shadow: 0 2px 5px 0 var(--neutral-light);
+  box-shadow: 0 2px 5px 0 RGBA(var(--shadown-color), var(--shadow-opacity));
+}
+:host button.small:active, :host a.small:active {
+  box-shadow: none;
 }
 :host button.small.icon-left cura-icon, :host a.small.icon-left cura-icon {
   margin-right: calc(var(--base-spacing) * 2.5px);
@@ -57,14 +71,91 @@
 :host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon {
   margin-left: calc(var(--base-spacing) * 2.5px);
 }
+:host button.small .label, :host a.small .label {
+  font-size: 1em;
+  letter-spacing: 2%;
+}
 :host button.disabled, :host a.disabled {
   cursor: not-allowed;
+}
+:host button.disabled:hover, :host a.disabled:hover {
+  box-shadow: none;
+}
+:host button.button-solid, :host a.button-solid {
+  background-color: var(--color-base);
+  border-width: 1px;
+  border-color: var(--color-dark);
+  border-style: solid;
+}
+:host button.button-solid:hover, :host a.button-solid:hover {
+  background-color: var(--color-light);
+  border-color: var(--color-base);
+}
+:host button.button-solid:active, :host a.button-solid:active {
+  background-color: var(--color-dark);
+}
+:host button.button-solid .label, :host a.button-solid .label {
+  color: var(--neutral-black);
+}
+:host button.button-solid .label.inverted, :host a.button-solid .label.inverted {
+  color: var(--neutral-white);
+}
+:host button.button-solid.disabled, :host a.button-solid.disabled {
   background-color: var(--neutral-light);
   border-color: var(--neutral-base);
 }
-:host button.disabled:hover, :host a.disabled:hover {
+:host button.button-solid.disabled .label, :host button.button-solid.disabled .label.inverted, :host a.button-solid.disabled .label, :host a.button-solid.disabled .label.inverted {
+  color: var(--neutral-dark);
+}
+:host button.button-outline, :host a.button-outline {
+  background-color: transparent;
+  border-width: 2px;
+  border-color: var(--color-base);
+  border-style: solid;
+}
+:host button.button-outline:hover, :host a.button-outline:hover {
+  border-color: var(--color-light);
+}
+:host button.button-outline:not(.disabled):hover .label, :host a.button-outline:not(.disabled):hover .label {
+  color: var(--color-light);
+}
+:host button.button-outline:not(.disabled):hover cura-icon, :host a.button-outline:not(.disabled):hover cura-icon {
+  --color: var(--color-light) !important;
+}
+:host button.button-outline .label, :host a.button-outline .label {
+  color: var(--color-base);
+}
+:host button.button-outline .label.inverted, :host a.button-outline .label.inverted {
+  color: var(--neutral-white);
+}
+:host button.button-outline:not(.disabled):not(.inverted):active, :host a.button-outline:not(.disabled):not(.inverted):active {
+  border-color: var(--color-dark);
+}
+:host button.button-outline:not(.disabled):not(.inverted):active .label, :host a.button-outline:not(.disabled):not(.inverted):active .label {
+  color: var(--color-dark);
+}
+:host button.button-outline:not(.disabled):not(.inverted):active cura-icon, :host a.button-outline:not(.disabled):not(.inverted):active cura-icon {
+  --color: var(--color-dark) !important;
+}
+:host button.button-outline.inverted, :host a.button-outline.inverted {
+  border-color: var(--neutral-white);
+}
+:host button.button-outline.inverted:hover, :host a.button-outline.inverted:hover {
+  border-color: var(--color-light);
   box-shadow: none;
 }
-:host button.disabled .label, :host a.disabled .label {
+:host button.button-outline.inverted:not(.disabled):active, :host a.button-outline.inverted:not(.disabled):active {
+  border-color: var(--neutral-white);
+}
+:host button.button-outline.inverted:not(.disabled):active .label, :host a.button-outline.inverted:not(.disabled):active .label {
+  color: var(--neutral-white);
+}
+:host button.button-outline.inverted:not(.disabled):active cura-icon, :host a.button-outline.inverted:not(.disabled):active cura-icon {
+  --color: var(--neutral-white) !important;
+}
+:host button.button-outline.disabled, :host a.button-outline.disabled {
+  border-color: var(--neutral-base);
+}
+:host button.button-outline.disabled .label, :host button.button-outline.disabled .label.inverted, :host a.button-outline.disabled .label, :host a.button-outline.disabled .label.inverted {
   color: var(--neutral-dark);
 }

package/dist/collection/components/buttons/cura-button/cura-button.js

@@ -1,7 +1,7 @@
 import { Host, h } from '@stencil/core';
 export class CuraButton {
   constructor() {
-    this.type = 'primary';
+    this.type = 'solid';
     this.size = 'large';
     this.disabled = false;
     this.isLoading = false;
@@ -11,18 +11,23 @@ export class CuraButton {
     this.href = undefined;
     this.target = "_self";
     this.color = 'accent';
+    this.fontColor = 'dark';
     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-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
     this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
     this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
     this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
+    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.setColors();
   }
   getClasses() {
@@ -30,6 +35,7 @@ export class CuraButton {
     classes[`button-${this.type.toLowerCase()}`] = true;
     classes[`${this.size.toLowerCase()}`] = true;
     classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes['inverted'] = this.fontColor === 'light';
     classes['disabled'] = this.disabled;
     return classes;
   }
@@ -40,11 +46,17 @@ export class CuraButton {
     if (!this.iconName)
       return '';
     const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
-    const color = this.disabled ? 'neutral-dark' : `neutral-black`;
+    const color = this.disabled
+      ? 'neutral-dark'
+      : this.fontColor === 'light'
+        ? 'neutral-white'
+        : this.type === 'solid'
+          ? 'neutral-black'
+          : `${this.color}-base`;
     return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
   }
   render() {
-    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles }, this.getIcon(), h("span", { class: "label" }, h("slot", null)))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null }, this.getIcon(), h("span", { class: "label" }, h("slot", null))))));
+    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null)))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))))));
   }
   static get is() { return "cura-button"; }
   static get encapsulation() { return "shadow"; }
@@ -64,26 +76,26 @@ export class CuraButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'solid' | 'outline' | 'transparent' | 'icon'",
+          "resolved": "\"icon\" | \"outline\" | \"solid\" | \"transparent\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button type: primary (default) | outline | transparent | icon."
+          "text": "Button type: solid (default) | outline | transparent | icon."
         },
         "attribute": "type",
         "reflect": true,
-        "defaultValue": "'primary'"
+        "defaultValue": "'solid'"
       },
       "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {}
         },
         "required": false,
@@ -171,8 +183,8 @@ export class CuraButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
           "references": {}
         },
         "required": false,
@@ -232,11 +244,29 @@ export class CuraButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Color base from color scheme. Default: accent"
+          "text": "Color base from color scheme. Default: accent."
         },
         "attribute": "color",
         "reflect": false,
         "defaultValue": "'accent'"
+      },
+      "fontColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the font color to dark or light."
+        },
+        "attribute": "font-color",
+        "reflect": false,
+        "defaultValue": "'dark'"
       }
     };
   }

package/dist/collection/components/buttons/cura-button/cura-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n})\nexport class CuraButton {\n\n  /**\n   * Button type: primary (default) | outline | transparent | icon.\n   */\n  @Prop({reflect: true}) type = 'primary';\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({reflect: true}) size = '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';\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() 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  @State() styles = {};\n\n  connectedCallback() {\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-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\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['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\n    this.setColors();\n  }\n  \n  getClasses() {\n    const classes = {};\n    classes[`button-${this.type.toLowerCase()}`] = true;\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\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.disabled ? 'neutral-dark' : `neutral-black`;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host>\n      { this.href ? (\n        <a href={this.disabled ? '' : this.href} target={this.target} class={this.getClasses()} style={this.styles}>\n          { this.getIcon() }\n          <span class=\"label\"><slot></slot></span>\n        </a>\n      ) : (\n        <button class={this.getClasses()} style={this.styles} disabled={this.disabled || null}>\n          { this.getIcon() }\n          <span class=\"label\"><slot></slot></span>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n})\nexport class CuraButton {\n\n  /**\n   * Button type: solid (default) | outline | transparent | icon.\n   */\n  @Prop({reflect: true}) type: 'solid' | 'outline' | 'transparent' | 'icon' = 'solid';\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  /**\n   * Property href switch button to link.\n   */\n  @Prop({reflect: true}) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop() 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() fontColor: 'dark' | 'light' = 'dark';\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-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\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['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\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.setColors();\n  }\n  \n  getClasses() {\n    const classes = {};\n    classes[`button-${this.type.toLowerCase()}`] = true;\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['inverted'] = this.fontColor === 'light';\n    classes['disabled'] = this.disabled;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\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.disabled \n      ? 'neutral-dark' \n      : this.fontColor === 'light' \n        ? 'neutral-white' \n        : this.type === 'solid'\n          ? 'neutral-black'\n          : `${this.color}-base`;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host>\n      { this.href ? (\n        <a href={this.disabled ? '' : this.href} target={this.target} class={this.getClasses()} style={this.styles}>\n          { this.getIcon() }\n          <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n        </a>\n      ) : (\n        <button class={this.getClasses()} style={this.styles} disabled={this.disabled || null}>\n          { this.getIcon() }\n          <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/components/cura-button.js

@@ -1,14 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './cura-icon2.js';
 
-const curaButtonCss = ":host{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;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;background-color:var(--color-base);border-width:1px;border-color:var(--color-dark);border-style:solid;border-radius:4px;-webkit-transition:background-color 0.12s linear, border-color 0.12s linear, -webkit-box-shadow 0.12s linear;transition:background-color 0.12s linear, border-color 0.12s linear, -webkit-box-shadow 0.12s linear;transition:background-color 0.12s linear, box-shadow 0.12s linear, border-color 0.12s linear;transition:background-color 0.12s linear, box-shadow 0.12s linear, border-color 0.12s linear, -webkit-box-shadow 0.12s linear;cursor:pointer}:host button:hover,:host a:hover{background-color:var(--color-light);border-color:var(--color-base);-webkit-box-shadow:0 4px 8px 0 var(--neutral-light);box-shadow:0 4px 8px 0 var(--neutral-light)}:host button .label,:host a .label{-ms-flex:1;flex:1;color:var(--neutral-black)}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right,:host a.icon-right{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}: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)}:host button.medium:hover,:host a.medium:hover{-webkit-box-shadow:0 3px 6px 0 var(--neutral-light);box-shadow:0 3px 6px 0 var(--neutral-light)}: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)}:host button.small:hover,:host a.small:hover{-webkit-box-shadow:0 2px 5px 0 var(--neutral-light);box-shadow:0 2px 5px 0 var(--neutral-light)}: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);border-color:var(--neutral-base)}:host button.disabled:hover,:host a.disabled:hover{-webkit-box-shadow:none;box-shadow:none}:host button.disabled .label,:host a.disabled .label{color:var(--neutral-dark)}";
+const curaButtonCss = ":host{display:inline-block;vertical-align:middle}:host button,:host a{--shadown-color:38, 38, 38;--shadow-opacity:0.16;outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;border-radius:4px;-webkit-transition:background-color 0.1s linear, border-color 0.1s linear, -webkit-box-shadow 0.1s linear;transition:background-color 0.1s linear, border-color 0.1s linear, -webkit-box-shadow 0.1s linear;transition:background-color 0.1s linear, box-shadow 0.1s linear, border-color 0.1s linear;transition:background-color 0.1s linear, box-shadow 0.1s linear, border-color 0.1s linear, -webkit-box-shadow 0.1s linear;font-size:var(--font-size);cursor:pointer}:host button:hover,:host a:hover{-webkit-box-shadow:0 4px 8px 0 RGBA(var(--shadown-color), var(--shadow-opacity));box-shadow:0 4px 8px 0 RGBA(var(--shadown-color), var(--shadow-opacity))}:host button:active,:host a:active{-webkit-box-shadow:none;box-shadow:none}:host button .label,:host a .label{-ms-flex:1;flex:1;color:var(--neutral-black);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right,:host a.icon-right{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}: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)}:host button.medium:hover,:host a.medium:hover{-webkit-box-shadow:0 3px 6px 0 RGBA(var(--shadown-color), var(--shadow-opacity));box-shadow:0 3px 6px 0 RGBA(var(--shadown-color), var(--shadow-opacity))}:host button.medium:active,:host a.medium:active{-webkit-box-shadow:none;box-shadow:none}:host button.medium .label,:host a.medium .label{font-size:1.14em;letter-spacing:2%}: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)}:host button.small:hover,:host a.small:hover{-webkit-box-shadow:0 2px 5px 0 RGBA(var(--shadown-color), var(--shadow-opacity));box-shadow:0 2px 5px 0 RGBA(var(--shadown-color), var(--shadow-opacity))}:host button.small:active,:host a.small:active{-webkit-box-shadow:none;box-shadow:none}: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.small .label,:host a.small .label{font-size:1em;letter-spacing:2%}:host button.disabled,:host a.disabled{cursor:not-allowed}:host button.disabled:hover,:host a.disabled:hover{-webkit-box-shadow:none;box-shadow:none}:host button.button-solid,:host a.button-solid{background-color:var(--color-base);border-width:1px;border-color:var(--color-dark);border-style:solid}:host button.button-solid:hover,:host a.button-solid:hover{background-color:var(--color-light);border-color:var(--color-base)}:host button.button-solid:active,:host a.button-solid:active{background-color:var(--color-dark)}:host button.button-solid .label,:host a.button-solid .label{color:var(--neutral-black)}:host button.button-solid .label.inverted,:host a.button-solid .label.inverted{color:var(--neutral-white)}:host button.button-solid.disabled,:host a.button-solid.disabled{background-color:var(--neutral-light);border-color:var(--neutral-base)}:host button.button-solid.disabled .label,:host button.button-solid.disabled .label.inverted,:host a.button-solid.disabled .label,:host a.button-solid.disabled .label.inverted{color:var(--neutral-dark)}:host button.button-outline,:host a.button-outline{background-color:transparent;border-width:2px;border-color:var(--color-base);border-style:solid}:host button.button-outline:hover,:host a.button-outline:hover{border-color:var(--color-light)}:host button.button-outline:not(.disabled):hover .label,:host a.button-outline:not(.disabled):hover .label{color:var(--color-light)}:host button.button-outline:not(.disabled):hover cura-icon,:host a.button-outline:not(.disabled):hover cura-icon{--color:var(--color-light) !important}:host button.button-outline .label,:host a.button-outline .label{color:var(--color-base)}:host button.button-outline .label.inverted,:host a.button-outline .label.inverted{color:var(--neutral-white)}:host button.button-outline:not(.disabled):not(.inverted):active,:host a.button-outline:not(.disabled):not(.inverted):active{border-color:var(--color-dark)}:host button.button-outline:not(.disabled):not(.inverted):active .label,:host a.button-outline:not(.disabled):not(.inverted):active .label{color:var(--color-dark)}:host button.button-outline:not(.disabled):not(.inverted):active cura-icon,:host a.button-outline:not(.disabled):not(.inverted):active cura-icon{--color:var(--color-dark) !important}:host button.button-outline.inverted,:host a.button-outline.inverted{border-color:var(--neutral-white)}:host button.button-outline.inverted:hover,:host a.button-outline.inverted:hover{border-color:var(--color-light);-webkit-box-shadow:none;box-shadow:none}:host button.button-outline.inverted:not(.disabled):active,:host a.button-outline.inverted:not(.disabled):active{border-color:var(--neutral-white)}:host button.button-outline.inverted:not(.disabled):active .label,:host a.button-outline.inverted:not(.disabled):active .label{color:var(--neutral-white)}:host button.button-outline.inverted:not(.disabled):active cura-icon,:host a.button-outline.inverted:not(.disabled):active cura-icon{--color:var(--neutral-white) !important}:host button.button-outline.disabled,:host a.button-outline.disabled{border-color:var(--neutral-base)}:host button.button-outline.disabled .label,:host button.button-outline.disabled .label.inverted,:host a.button-outline.disabled .label,:host a.button-outline.disabled .label.inverted{color:var(--neutral-dark)}";
 
 const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.type = 'primary';
+    this.type = 'solid';
     this.size = 'large';
     this.disabled = false;
     this.isLoading = false;
@@ -18,18 +18,23 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
     this.href = undefined;
     this.target = "_self";
     this.color = 'accent';
+    this.fontColor = 'dark';
     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-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
     this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
     this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
     this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
+    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.setColors();
   }
   getClasses() {
@@ -37,6 +42,7 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
     classes[`button-${this.type.toLowerCase()}`] = true;
     classes[`${this.size.toLowerCase()}`] = true;
     classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes['inverted'] = this.fontColor === 'light';
     classes['disabled'] = this.disabled;
     return classes;
   }
@@ -47,11 +53,17 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
     if (!this.iconName)
       return '';
     const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
-    const color = this.disabled ? 'neutral-dark' : `neutral-black`;
+    const color = this.disabled
+      ? 'neutral-dark'
+      : this.fontColor === 'light'
+        ? 'neutral-white'
+        : this.type === 'solid'
+          ? 'neutral-black'
+          : `${this.color}-base`;
     return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
   }
   render() {
-    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles }, this.getIcon(), h("span", { class: "label" }, h("slot", null)))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null }, this.getIcon(), h("span", { class: "label" }, h("slot", null))))));
+    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null)))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))))));
   }
   static get watchers() { return {
     "color": ["handleChangeColor"]
@@ -68,6 +80,7 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
     "href": [513],
     "target": [1],
     "color": [1],
+    "fontColor": [1, "font-color"],
     "styles": [32]
   }]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"cura-button.js","mappings":"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","names":["CuraButton"],"sources":["./src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","./src/components/buttons/cura-button/cura-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  vertical-align: middle;\n\n  button, a {\n    outline: none;\n    box-shadow: none;\n    box-sizing: border-box;\n    padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);\n    min-height: calc(var(--base-spacing) * 13px);\n    display: flex;\n    width: 100%;\n    align-items: center;\n    background-color: var(--color-base);\n    border-width: 1px;\n    border-color: var(--color-dark);\n    border-style: solid;\n    border-radius: 4px;\n    transition: background-color .12s linear, box-shadow .12s linear, border-color .12s linear;\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--color-light);\n      border-color: var(--color-base);\n      box-shadow: 0 4px 8px 0 var(--neutral-light);\n    }\n\n    .label { \n      flex: 1;\n      color: var(--neutral-black);\n    }\n\n    &.icon-left cura-icon {\n      margin-right: calc(var(--base-spacing) * 3px);\n    }\n\n    &.icon-right {\n      flex-direction: row-reverse;\n      cura-icon {\n        margin-left: calc(var(--base-spacing) * 3px);\n      }\n    }\n\n    &.medium {\n      padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);\n      min-height: calc(var(--base-spacing) * 11px);\n\n      &:hover { box-shadow: 0 3px 6px 0 var(--neutral-light); }\n    }\n\n    &.small {\n      padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);\n      min-height: calc(var(--base-spacing) * 8px);\n\n      &:hover { box-shadow: 0 2px 5px 0 var(--neutral-light); }\n\n      &.icon-left cura-icon { margin-right: calc(var(--base-spacing) * 2.5px); }\n\n      &.icon-right cura-icon { margin-left: calc(var(--base-spacing) * 2.5px); }\n    }\n\n    &.disabled {\n      cursor: not-allowed;\n      background-color: var(--neutral-light);\n      border-color: var(--neutral-base);\n      \n      &:hover { box-shadow: none; }\n\n      .label { color: var(--neutral-dark); }\n\n    }\n\n  }\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n})\nexport class CuraButton {\n\n  /**\n   * Button type: primary (default) | outline | transparent | icon.\n   */\n  @Prop({reflect: true}) type = 'primary';\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({reflect: true}) size = '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';\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() 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  @State() styles = {};\n\n  connectedCallback() {\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-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\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['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\n    this.setColors();\n  }\n  \n  getClasses() {\n    const classes = {};\n    classes[`button-${this.type.toLowerCase()}`] = true;\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\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.disabled ? 'neutral-dark' : `neutral-black`;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host>\n      { this.href ? (\n        <a href={this.disabled ? '' : this.href} target={this.target} class={this.getClasses()} style={this.styles}>\n          { this.getIcon() }\n          <span class=\"label\"><slot></slot></span>\n        </a>\n      ) : (\n        <button class={this.getClasses()} style={this.styles} disabled={this.disabled || null}>\n          { this.getIcon() }\n          <span class=\"label\"><slot></slot></span>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-button.js","mappings":"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","names":["CuraButton"],"sources":["./src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","./src/components/buttons/cura-button/cura-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  vertical-align: middle;\n\n  button, a {\n    --shadown-color: 38, 38, 38;\n    --shadow-opacity: 0.16;\n\n    outline: none;\n    box-shadow: none;\n    box-sizing: border-box;\n    padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);\n    min-height: calc(var(--base-spacing) * 13px);\n    display: flex;\n    width: 100%;\n    align-items: center;\n    border-radius: 4px;\n    transition: background-color .1s linear, box-shadow .1s linear, border-color .1s linear;\n    font-size: var(--font-size);\n    cursor: pointer;\n\n    &:hover   { box-shadow: 0 4px 8px 0 RGBA(var(--shadown-color), var(--shadow-opacity)); }\n    &:active  { box-shadow: none; }\n\n    .label { \n      flex: 1;\n      color: var(--neutral-black);\n      font-family: var(--font-family);\n      font-weight: var(--font-weight-medium);\n      font-size: 1.43em;\n      line-height: 1.1em;\n    }\n\n    &.icon-left cura-icon {\n      margin-right: calc(var(--base-spacing) * 3px);\n    }\n\n    &.icon-right {\n      flex-direction: row-reverse;\n      cura-icon {\n        margin-left: calc(var(--base-spacing) * 3px);\n      }\n    }\n\n    // Sizes\n  \n    &.medium {\n      padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);\n      min-height: calc(var(--base-spacing) * 11px);\n\n      &:hover   { box-shadow: 0 3px 6px 0 RGBA(var(--shadown-color), var(--shadow-opacity)); }\n      &:active  { box-shadow: none; }\n\n      .label    { font-size: 1.14em; letter-spacing: 2%; }\n    }\n\n    &.small {\n      padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);\n      min-height: calc(var(--base-spacing) * 8px);\n\n      &:hover   { box-shadow: 0 2px 5px 0 RGBA(var(--shadown-color), var(--shadow-opacity)); }\n      &:active  { box-shadow: none; }\n\n      &.icon-left cura-icon { margin-right: calc(var(--base-spacing) * 2.5px); }\n\n      &.icon-right cura-icon { margin-left: calc(var(--base-spacing) * 2.5px); }\n\n      .label { font-size: 1em; letter-spacing: 2%; }\n    }\n\n    // Disabled general\n\n    &.disabled {\n      cursor: not-allowed;\n      &:hover { box-shadow: none; }\n    }\n\n    // Types\n\n    &.button-solid {\n      background-color: var(--color-base);\n      border-width: 1px;\n      border-color: var(--color-dark);\n      border-style: solid;\n\n      &:hover {\n        background-color: var(--color-light);\n        border-color: var(--color-base);\n      }\n\n      &:active { background-color: var(--color-dark); }\n\n      .label { \n        color: var(--neutral-black);\n        &.inverted { color: var(--neutral-white); }\n      }\n\n      &.disabled {\n        background-color: var(--neutral-light);\n        border-color: var(--neutral-base);\n  \n        .label, .label.inverted { color: var(--neutral-dark); }\n      }\n    }\n\n    &.button-outline {\n      background-color: transparent;\n      border-width: 2px;\n      border-color: var(--color-base);\n      border-style: solid;\n\n      &:hover { border-color: var(--color-light); }\n\n      &:not(.disabled):hover {\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n\n      .label { \n        color: var(--color-base);\n        &.inverted { color: var(--neutral-white); }\n      }\n\n      &:not(.disabled):not(.inverted):active { \n        border-color: var(--color-dark);\n        .label { color: var(--color-dark); }\n        cura-icon { --color: var(--color-dark) !important; }\n      }\n\n      &.inverted {\n        border-color: var(--neutral-white);\n        &:hover { border-color: var(--color-light); box-shadow: none; }\n        &:not(.disabled):active {\n          border-color: var(--neutral-white);\n          .label { color: var(--neutral-white); }\n          cura-icon { --color: var(--neutral-white) !important; }\n        }\n      }\n\n      &.disabled {\n        border-color: var(--neutral-base);\n        .label, .label.inverted { color: var(--neutral-dark); }\n      }\n    }\n\n  }\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n})\nexport class CuraButton {\n\n  /**\n   * Button type: solid (default) | outline | transparent | icon.\n   */\n  @Prop({reflect: true}) type: 'solid' | 'outline' | 'transparent' | 'icon' = 'solid';\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  /**\n   * Property href switch button to link.\n   */\n  @Prop({reflect: true}) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop() 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() fontColor: 'dark' | 'light' = 'dark';\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-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\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['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\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.setColors();\n  }\n  \n  getClasses() {\n    const classes = {};\n    classes[`button-${this.type.toLowerCase()}`] = true;\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['inverted'] = this.fontColor === 'light';\n    classes['disabled'] = this.disabled;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\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.disabled \n      ? 'neutral-dark' \n      : this.fontColor === 'light' \n        ? 'neutral-white' \n        : this.type === 'solid'\n          ? 'neutral-black'\n          : `${this.color}-base`;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host>\n      { this.href ? (\n        <a href={this.disabled ? '' : this.href} target={this.target} class={this.getClasses()} style={this.styles}>\n          { this.getIcon() }\n          <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n        </a>\n      ) : (\n        <button class={this.getClasses()} style={this.styles} disabled={this.disabled || null}>\n          { this.getIcon() }\n          <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/cura/cura.esm.js

@@ -1,2 +1,2 @@
-import{p as o,w as e,a as t,b as i}from"./p-d5990392.js";export{s as setNonce}from"./p-d5990392.js";import{g as a}from"./p-bac0b4ab.js";const r=()=>{{o.o=e.__cssshim}const s=import.meta.url;const i={};if(s!==""){i.resourcesUrl=new URL(".",s).href}return t(i)};r().then((o=>{a();return i([["p-731abb13",[[1,"cura-button",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],href:[513],target:[1],color:[1],styles:[32]}],[1,"cura-display",{level:[514],size:[513],inverted:[516],spotColor:[513,"spot-color"]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],inverted:[516],spotColor:[513,"spot-color"]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-paragraph",{size:[513],inverted:[516],spotColor:[513,"spot-color"]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]}]]],["p-4c60d085",[[1,"cura-icons-view",{selected:[32]}]]]],o)}));
+import{p as o,w as e,a as t,b as a}from"./p-cbc91ac5.js";export{s as setNonce}from"./p-cbc91ac5.js";import{g as i}from"./p-bac0b4ab.js";const r=()=>{{o.o=e.__cssshim}const s=import.meta.url;const a={};if(s!==""){a.resourcesUrl=new URL(".",s).href}return t(a)};r().then((o=>{i();return a([["p-e7785610",[[1,"cura-button",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],href:[513],target:[1],color:[1],fontColor:[1,"font-color"],styles:[32]}],[1,"cura-display",{level:[514],size:[513],inverted:[516],spotColor:[513,"spot-color"]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],inverted:[516],spotColor:[513,"spot-color"]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-paragraph",{size:[513],inverted:[516],spotColor:[513,"spot-color"]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]}]]],["p-e32ae366",[[1,"cura-icons-view",{selected:[32]}]]]],o)}));
 //# sourceMappingURL=cura.esm.js.map

package/dist/cura/cura.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","plt","$cssShim$","win","__cssshim","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","globalScripts","bootstrapLazy","type","size","disabled","isLoading","iconName","iconset","iconPosition","target","color","styles","level","inverted","spotColor","weight","contentwidth","name","selected"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"wIAmBA,MAAMA,EAAe,KAMK,CAGlBC,EAAIC,EAAYC,EAAIC,SAC5B,CAwBI,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BP,IAAeY,MAAKC,IAClBC,IACA,OAAOC,EAAc,iCAA8B,CAAAC,KAAS,MAAAC,KAAA,MAAAC,SAAA,MAAAC,UAAA,mBAAAC,SAAA,kBAAAC,QAAA,MAAAC,aAAA,sBAAAZ,KAAA,MAAAa,OAAA,IAAAC,MAAA,IAAAC,OAAA,0BAAAC,MAAA,MAAAT,KAAA,MAAAU,SAAA,MAAAC,UAAA,wCAAAF,MAAA,MAAAT,KAAA,MAAAY,OAAA,MAAAF,SAAA,MAAAC,UAAA,8CAAAE,aAAA,6BAAAb,KAAA,MAAAU,SAAA,MAAAC,UAAA,qCAAAG,KAAA,MAAAP,MAAA,IAAAP,KAAA,IAAAI,QAAA,MAAAH,SAAA,6CAAAc,SAAA,UAAAnB,EAAA"}
+{"version":3,"names":["patchBrowser","plt","$cssShim$","win","__cssshim","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","globalScripts","bootstrapLazy","type","size","disabled","isLoading","iconName","iconset","iconPosition","target","color","fontColor","styles","level","inverted","spotColor","weight","contentwidth","name","selected"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"wIAmBA,MAAMA,EAAe,KAMK,CAGlBC,EAAIC,EAAYC,EAAIC,SAC5B,CAwBI,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BP,IAAeY,MAAKC,IAClBC,IACA,OAAOC,EAAc,iCAA8B,CAAAC,KAAS,MAAAC,KAAA,MAAAC,SAAA,MAAAC,UAAA,mBAAAC,SAAA,kBAAAC,QAAA,MAAAC,aAAA,sBAAAZ,KAAA,MAAAa,OAAA,IAAAC,MAAA,IAAAC,UAAA,iBAAAC,OAAA,0BAAAC,MAAA,MAAAV,KAAA,MAAAW,SAAA,MAAAC,UAAA,wCAAAF,MAAA,MAAAV,KAAA,MAAAa,OAAA,MAAAF,SAAA,MAAAC,UAAA,8CAAAE,aAAA,6BAAAd,KAAA,MAAAW,SAAA,MAAAC,UAAA,qCAAAG,KAAA,MAAAR,MAAA,IAAAP,KAAA,IAAAI,QAAA,MAAAH,SAAA,6CAAAe,SAAA,UAAApB,EAAA"}

package/dist/cura/cura.js

@@ -117,7 +117,7 @@ var __assign=this&&this.__assign||function(){return __assign=Object.assign||func
   var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
   var start = function() {
     // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
-    var url = new URL('./p-61953b75.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
+    var url = new URL('./p-36c8b693.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
     System.import(url.href);
   };
 

package/dist/cura/p-36c8b693.system.js

@@ -0,0 +1,2 @@
+System.register(["./p-a84ae34f.system.js","./p-4fc49972.system.js"],(function(e,o){"use strict";var t,s,r,i,n;return{setters:[function(o){t=o.p;s=o.w;r=o.a;i=o.b;e("setNonce",o.s)},function(e){n=e.g}],execute:function(){var e=function(){{t.$cssShim$=s.__cssshim}var e=o.meta.url;var i={};if(e!==""){i.resourcesUrl=new URL(".",e).href}return r(i)};e().then((function(e){n();return i([["p-e5fd4452.system",[[1,"cura-button",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],href:[513],target:[1],color:[1],fontColor:[1,"font-color"],styles:[32]}],[1,"cura-display",{level:[514],size:[513],inverted:[516],spotColor:[513,"spot-color"]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],inverted:[516],spotColor:[513,"spot-color"]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-paragraph",{size:[513],inverted:[516],spotColor:[513,"spot-color"]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]}]]],["p-825028d1.system",[[1,"cura-icons-view",{selected:[32]}]]]],e)}))}}}));
+//# sourceMappingURL=p-36c8b693.system.js.map

package/dist/cura/p-36c8b693.system.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["patchBrowser","plt","$cssShim$","win","__cssshim","importMeta","module","meta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","globalScripts","bootstrapLazy","type","size","disabled","isLoading","iconName","iconset","iconPosition","target","color","fontColor","styles","level","inverted","spotColor","weight","contentwidth","name","selected"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"4NAmBA,IAAMA,EAAe,WAMK,CAGlBC,EAAIC,UAAYC,EAAIC,S,CAyBxB,IAAMC,EAAaC,EAAAC,KAAAC,IACnB,IAAMC,EAAqE,GAiB3E,GAAuBJ,IAAe,GAAI,CACtCI,EAAKC,aAAe,IAAIC,IAAI,IAAKN,GAAYO,I,CAiBjD,OAAOC,EAAeJ,EAC1B,ECtFAT,IAAec,MAAK,SAAAC,GAClBC,IACA,OAAOC,EAAc,wCAAuC,CAAAC,KAAA,MAAAC,KAAA,MAAAC,SAAA,MAAAC,UAAA,mBAAAC,SAAA,kBAAAC,QAAA,MAAAC,aAAA,sBAAAZ,KAAA,MAAAa,OAAA,IAAAC,MAAA,IAAAC,UAAA,iBAAAC,OAAA,0BAAAC,MAAA,MAAAV,KAAA,MAAAW,SAAA,MAAAC,UAAA,wCAAAF,MAAA,MAAAV,KAAA,MAAAa,OAAA,MAAAF,SAAA,MAAAC,UAAA,8CAAAE,aAAA,6BAAAd,KAAA,MAAAW,SAAA,MAAAC,UAAA,qCAAAG,KAAA,MAAAR,MAAA,IAAAP,KAAA,IAAAI,QAAA,MAAAH,SAAA,oDAAAe,SAAA,UAAApB,EAC9D,G"}

package/dist/cura/{p-958c8695.system.entry.js → p-825028d1.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-c30e14d5.system.js"],(function(e){"use strict";var i,n,a;return{setters:[function(e){i=e.r;n=e.h;a=e.H}],execute:function(){var l=["360","accessibility","alertCircle","alertTriangle","arrowDown","arrowDownCircle","arrowLeft","arrowLeftCircle","arrowRight","arrowRightCircle","arrowUp","arrowUpCircle","attach","avatarF","avatarM","biometry","bloodGroup","calendar","cam","camOff","central","chatCircle","check","checkBadge","checkCircle","checkDouble","clock","close","closeCircle","collapse","config","delete","desktop","deslike","download","duplicate","edit","exam","expand","facebook","fileBmp","fileJpg","filePdf","filePng","fileUpload","fileXls","filter","fullscreen","gallery","geotag","google","hate","healthPlan","height","height2","home","horizontalList","imageUp","info2","infoCircle","instagram","key","language","language2","languageEN","languagePT","lattes","like","likeHand","link","linkExternal","linkedin","list","login","logout","love","mail","mail2","medical","menuHamburguer","menuKebab","menuMeatballs","mic","micOff","minus","minusCircle","minusSquare","mobile","neutral","news","notification","order","partner","phone","play","plus","plusCircle","plusSquare","print","profile","profile2","pulldownG","pulldownP","pullupG","pullupP","questionCircle","questionSquare","range","reload","schedule","search","secure","share","share2","sound","soundOff","subItem","target","team","twitter","unLink","unSecure","unlikeHand","upload","verticalList","viewFalse","viewTrue","weight","whatsapp","wifi","youtube","zoomIn","zoomOut"];var s=':host{display:block;padding:24px;font-family:"Roboto", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#262626;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.icons .icon span{font-size:12px;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;color:#FFF;border-radius:2px;position:absolute;top:-2px;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);display:none}.icons .icon:hover{opacity:1}.icons .icon:hover span{display:block}';var r=e("cura_icons_view",function(){function e(e){var n=this;i(this,e);this.sizes=[16,20,24,32,40,48,64,72,128];this.colors=["primary","secondary","accent","info","warning","error","success","neutral"];this.setSelected=function(e){n.selected=e};this.selected="360"}e.prototype.render=function(){var e=this;return n(a,null,n("div",{class:"iconDetail"},n("h4",null,this.selected),n("div",{class:"iconSizes"},this.sizes.map((function(i){return n("div",{class:"size"},n("cura-icon",{name:e.selected,size:i}),n("span",null,i))}))),n("div",{class:"iconSizes invert"},this.sizes.map((function(i){return n("div",{class:"size"},n("cura-icon",{name:e.selected,size:i,color:"neutral-white"}),n("span",null,i))}))),n("div",{class:"iconSizes"},this.colors.map((function(i){return n("div",{class:"size"},n("cura-icon",{name:e.selected,color:i}),n("span",null,i))})),n("div",{class:"size"},n("cura-icon",{name:this.selected,disabled:true}),n("span",null,"Disabled")))),n("div",{class:"icons"},l.map((function(i){return n("div",{class:"icon",onClick:function(){return e.setSelected(i)}},n("cura-icon",{name:i}),n("span",null,i))}))))};return e}());r.style=s}}}));
-//# sourceMappingURL=p-958c8695.system.entry.js.map
+System.register(["./p-a84ae34f.system.js"],(function(e){"use strict";var i,n,a;return{setters:[function(e){i=e.r;n=e.h;a=e.H}],execute:function(){var l=["360","accessibility","alertCircle","alertTriangle","arrowDown","arrowDownCircle","arrowLeft","arrowLeftCircle","arrowRight","arrowRightCircle","arrowUp","arrowUpCircle","attach","avatarF","avatarM","biometry","bloodGroup","calendar","cam","camOff","central","chatCircle","check","checkBadge","checkCircle","checkDouble","clock","close","closeCircle","collapse","config","delete","desktop","deslike","download","duplicate","edit","exam","expand","facebook","fileBmp","fileJpg","filePdf","filePng","fileUpload","fileXls","filter","fullscreen","gallery","geotag","google","hate","healthPlan","height","height2","home","horizontalList","imageUp","info2","infoCircle","instagram","key","language","language2","languageEN","languagePT","lattes","like","likeHand","link","linkExternal","linkedin","list","login","logout","love","mail","mail2","medical","menuHamburguer","menuKebab","menuMeatballs","mic","micOff","minus","minusCircle","minusSquare","mobile","neutral","news","notification","order","partner","phone","play","plus","plusCircle","plusSquare","print","profile","profile2","pulldownG","pulldownP","pullupG","pullupP","questionCircle","questionSquare","range","reload","schedule","search","secure","share","share2","sound","soundOff","subItem","target","team","twitter","unLink","unSecure","unlikeHand","upload","verticalList","viewFalse","viewTrue","weight","whatsapp","wifi","youtube","zoomIn","zoomOut"];var s=':host{display:block;padding:24px;font-family:"Roboto", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#262626;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.icons .icon span{font-size:12px;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;color:#FFF;border-radius:2px;position:absolute;top:-2px;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);display:none}.icons .icon:hover{opacity:1}.icons .icon:hover span{display:block}';var r=e("cura_icons_view",function(){function e(e){var n=this;i(this,e);this.sizes=[16,20,24,32,40,48,64,72,128];this.colors=["primary","secondary","accent","info","warning","error","success","neutral"];this.setSelected=function(e){n.selected=e};this.selected="360"}e.prototype.render=function(){var e=this;return n(a,null,n("div",{class:"iconDetail"},n("h4",null,this.selected),n("div",{class:"iconSizes"},this.sizes.map((function(i){return n("div",{class:"size"},n("cura-icon",{name:e.selected,size:i}),n("span",null,i))}))),n("div",{class:"iconSizes invert"},this.sizes.map((function(i){return n("div",{class:"size"},n("cura-icon",{name:e.selected,size:i,color:"neutral-white"}),n("span",null,i))}))),n("div",{class:"iconSizes"},this.colors.map((function(i){return n("div",{class:"size"},n("cura-icon",{name:e.selected,color:i}),n("span",null,i))})),n("div",{class:"size"},n("cura-icon",{name:this.selected,disabled:true}),n("span",null,"Disabled")))),n("div",{class:"icons"},l.map((function(i){return n("div",{class:"icon",onClick:function(){return e.setSelected(i)}},n("cura-icon",{name:i}),n("span",null,i))}))))};return e}());r.style=s}}}));
+//# sourceMappingURL=p-825028d1.system.entry.js.map