@rededor/cura 0.3.4-alpha.0 → 0.3.4-alpha.1

package/dist/cjs/{app-globals-a41d7f40.js → app-globals-0f70160b.js}

@@ -21,11 +21,11 @@ const ThemeDefault = {
       '900': '#292017'
     },
     accent: {
-      '100': '#FFC27B',
-      '300': '#FFA84A',
-      '500': '#FF8200',
-      '700': '#D7720A',
-      '900': '#9B5A1A'
+      '100': '#F9E8D5',
+      '300': '#E4A04F',
+      '500': '#DF8D2C',
+      '700': '#955E1D',
+      '900': '#2D1C09'
     }
   },
   /* Spacing */
@@ -70,13 +70,6 @@ const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), {
       '500': '#189AB4',
       '700': '#001C58',
       '900': '#430E31'
-    },
-    accent: {
-      '100': '#FCEFF6',
-      '300': '#FFBFE5',
-      '500': '#CD4D9A',
-      '700': '#99126C',
-      '900': '#00133B'
     }
   } });
 
@@ -88,11 +81,11 @@ const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      '100': '#AABEE1',
-      '300': '#557EC4',
-      '500': '#003DA6',
-      '700': '#00296F',
-      '900': '#000C21'
+      '100': '#99CFFF',
+      '300': '#47A9FF',
+      '500': '#0083F5',
+      '700': '#006DCC',
+      '900': '#0058A4',
     },
     secondary: {
       '100': '#CDD7E3',
@@ -101,34 +94,20 @@ const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
       '700': '#365E8F',
       '900': '#043673',
     },
-    accent: {
-      '100': '#99CFFF',
-      '300': '#47A9FF',
-      '500': '#0083F5',
-      '700': '#006DCC',
-      '900': '#0058A4',
+    aux1: {
+      '100': '#AABEE1',
+      '300': '#557EC4',
+      '500': '#003DA6',
+      '700': '#00296F',
+      '900': '#000C21',
     },
-    aux: {
+    aux2: {
       '100': '#DAF2EF',
       '300': '#84D4CA',
       '500': '#47BFB0',
       '700': '#2F7F75',
       '900': '#0E2623',
     },
-  }, font: {
-    size: '14px',
-    color: '#4A4A4A',
-    body: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
-    heading: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
-    display: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
-    weights: {
-      thin: 100,
-      light: 300,
-      regular: 400,
-      medium: 500,
-      bold: 700,
-      black: 900
-    },
   } });
 
 const ThemePresets = {
@@ -459,5 +438,3 @@ function appGlobalScript () {
 const globalScripts = appGlobalScript;
 
 exports.globalScripts = globalScripts;
-
-//# sourceMappingURL=app-globals-a41d7f40.js.map

package/dist/cjs/cura-display_4.cjs.entry.js

@@ -0,0 +1,257 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-76f95c4b.js');
+
+const curaDisplayCss = ".cura-display{display:block;font-size:var(--font-size);text-transform:uppercase}.cura-display h1,.cura-display h2,.cura-display h3,.cura-display h4,.cura-display h5,.cura-display h6{font-family:var(--font-family);font-size:4.285em;font-weight:var(--font-weight-black);color:var(--color-body);line-height:120%;letter-spacing:-4%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}.cura-display h1.large,.cura-display h2.large,.cura-display h3.large,.cura-display h4.large,.cura-display h5.large,.cura-display h6.large{font-size:6.21em}.cura-display h1.small,.cura-display h2.small,.cura-display h3.small,.cura-display h4.small,.cura-display h5.small,.cura-display h6.small{font-size:3em;font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){.cura-display h1,.cura-display h2,.cura-display h3,.cura-display h4,.cura-display h5,.cura-display h6{font-size:4.92em}.cura-display h1.large,.cura-display h2.large,.cura-display h3.large,.cura-display h4.large,.cura-display h5.large,.cura-display h6.large{font-size:7.07em}.cura-display h1.small,.cura-display h2.small,.cura-display h3.small,.cura-display h4.small,.cura-display h5.small,.cura-display h6.small{font-size:3.428em}}@media (min-width: 1366px){.cura-display h1,.cura-display h2,.cura-display h3,.cura-display h4,.cura-display h5,.cura-display h6{font-size:6.14em;line-height:125%}.cura-display h1.large,.cura-display h2.large,.cura-display h3.large,.cura-display h4.large,.cura-display h5.large,.cura-display h6.large{font-size:8.857em;letter-spacing:-6%}.cura-display h1.small,.cura-display h2.small,.cura-display h3.small,.cura-display h4.small,.cura-display h5.small,.cura-display h6.small{font-size:4.285em;letter-spacing:-2%}}.cura-display b,.cura-display strong{font-weight:var(--font-weight-bold)}.cura-display a{font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}.cura-display abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+
+const CuraDisplay = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Heading level for semantics.
+     * Values: 1(default)-6.
+     */
+    this.level = 1;
+    /**
+    * Heading style size.
+    * Values: small | regular(default) | large.
+    */
+    this.size = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '0.5em');
+  }
+  setColors() {
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '2': index.h("h2", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '3': index.h("h3", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '4': index.h("h4", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '5': index.h("h5", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '6': index.h("h6", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      'default': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (index.h(index.Host, { class: "cura-display" }, this.getHeadingTag()));
+  }
+  get host() { return index.getElement(this); }
+};
+CuraDisplay.style = curaDisplayCss;
+
+const curaHeadingCss = ".cura-heading{display:block;font-size:var(--font-size)}.cura-heading h1,.cura-heading h2,.cura-heading h3,.cura-heading h4,.cura-heading h5,.cura-heading h6{font-family:var(--font-family);font-size:1.71em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:130%;letter-spacing:0%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}.cura-heading h1.bold-weight,.cura-heading h2.bold-weight,.cura-heading h3.bold-weight,.cura-heading h4.bold-weight,.cura-heading h5.bold-weight,.cura-heading h6.bold-weight{font-weight:var(--font-weight-medium)}.cura-heading h1.large,.cura-heading h2.large,.cura-heading h3.large,.cura-heading h4.large,.cura-heading h5.large,.cura-heading h6.large{font-size:2.07em;letter-spacing:-2%}.cura-heading h1.small,.cura-heading h2.small,.cura-heading h3.small,.cura-heading h4.small,.cura-heading h5.small,.cura-heading h6.small{font-size:1.214em;line-height:150%;letter-spacing:0%}.cura-heading h1.small.bold-weight,.cura-heading h2.small.bold-weight,.cura-heading h3.small.bold-weight,.cura-heading h4.small.bold-weight,.cura-heading h5.small.bold-weight,.cura-heading h6.small.bold-weight{font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){.cura-heading h1,.cura-heading h2,.cura-heading h3,.cura-heading h4,.cura-heading h5,.cura-heading h6{font-size:2em}.cura-heading h1.large,.cura-heading h2.large,.cura-heading h3.large,.cura-heading h4.large,.cura-heading h5.large,.cura-heading h6.large{font-size:2.357em}.cura-heading h1.small,.cura-heading h2.small,.cura-heading h3.small,.cura-heading h4.small,.cura-heading h5.small,.cura-heading h6.small{font-size:1.357em}}@media (min-width: 1366px){.cura-heading h1,.cura-heading h2,.cura-heading h3,.cura-heading h4,.cura-heading h5,.cura-heading h6{font-size:2.5em;line-height:135%;letter-spacing:-2%}.cura-heading h1.large,.cura-heading h2.large,.cura-heading h3.large,.cura-heading h4.large,.cura-heading h5.large,.cura-heading h6.large{font-size:2.92em}.cura-heading h1.small,.cura-heading h2.small,.cura-heading h3.small,.cura-heading h4.small,.cura-heading h5.small,.cura-heading h6.small{font-size:1.71em;line-height:160%;letter-spacing:0%}}.cura-heading b,.cura-heading strong{font-weight:var(--font-weight-bold)}.cura-heading a{font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}.cura-heading abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+
+const CuraHeading = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Heading level for semantics.
+     * Values: 1(default)-6.
+     */
+    this.level = 1;
+    /**
+     * Heading style size.
+     * Values: small | regular(default) | large.
+     */
+    this.size = 'regular';
+    /**
+     * Heading font weight.
+     * Values: regular(default) | bold.
+     */
+    this.weight = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    classes[`${this.weight.toLowerCase()}-weight`] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-regular': this.weights.regular,
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '0.5em');
+  }
+  setColors() {
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '2': index.h("h2", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '3': index.h("h3", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '4': index.h("h4", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '5': index.h("h5", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '6': index.h("h6", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      'default': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (index.h(index.Host, { class: "cura-heading" }, this.getHeadingTag()));
+  }
+  get host() { return index.getElement(this); }
+};
+CuraHeading.style = curaHeadingCss;
+
+const curaPageTemplateCss = ".cura-template{display:block}.cura-template .grid-template{display:grid;grid-template-rows:auto;grid-template-columns:auto;grid-template-areas:\"sub-header\" \"header\" \"pre-content\" \"content-container\" \"post-body\" \"footer\" \"sub-footer\"}.cura-template .grid-template #sub-header{grid-area:sub-header}.cura-template .grid-template #header{grid-area:header}.cura-template .grid-template #pre-content{grid-area:pre-content}.cura-template .grid-template #content-container{grid-area:content-container}.cura-template .grid-template #post-body{grid-area:post-body}.cura-template .grid-template #footer{grid-area:footer}.cura-template .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 360px){.cura-template .grid-template{padding:0px}}@media (min-width: 768px) and (max-width: 1365px){.cura-template .grid-template{padding:0px}}@media (min-width: 1366px) and (max-width: 1919px){.cura-template .grid-template{padding:0px}.cura-template .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 5px)}.cura-template .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 5px)}.cura-template .grid-template #content-container{display:-ms-flexbox;display:flex}.cura-template .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}.cura-template .grid-template #content-container #sidebar-left,.cura-template .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1920px){.cura-template .grid-template{padding:0px}.cura-template .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 7px)}.cura-template .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 7px)}.cura-template .grid-template #content-container{display:-ms-flexbox;display:flex}.cura-template .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}.cura-template .grid-template #content-container #sidebar-left,.cura-template .grid-template #content-container #sidebar-right{max-width:20%}.cura-template .grid-template #content-container.centered{max-width:1920px;justify-self:center}}";
+
+const CuraPageTemplate = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.contentwidth = 'default';
+  }
+  connectedCallback() {
+    this.styles = {
+      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),
+    };
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.contentwidth.toLowerCase()] = true;
+    return classes;
+  }
+  render() {
+    return (index.h(index.Host, { class: "cura-template" }, index.h("div", { style: this.styles, class: "grid-template" }, index.h("div", { id: "sub-header" }, index.h("slot", { name: 'sub-header' })), index.h("div", { id: "header" }, index.h("slot", { name: 'header' })), index.h("div", { id: "pre-content" }, index.h("slot", { name: 'pre-content' })), index.h("div", { id: "content-container", class: this.getClasses() }, index.h("div", { id: "sidebar-left" }, index.h("slot", { name: 'sidebar-left' })), index.h("div", { id: "content" }, index.h("slot", { name: "content" }), index.h("slot", null)), index.h("div", { id: "sidebar-right" }, index.h("slot", { name: 'sidebar-right' }))), index.h("div", { id: "post-body" }, index.h("slot", { name: 'post-body' })), index.h("div", { id: "footer" }, index.h("slot", { name: 'footer' })), index.h("div", { id: "sub-footer" }, index.h("slot", { name: 'sub-footer' })))));
+  }
+  get host() { return index.getElement(this); }
+};
+CuraPageTemplate.style = curaPageTemplateCss;
+
+const curaParagraphCss = ".cura-paragraph{display:block;font-size:var(--font-size)}.cura-paragraph p{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:140%;letter-spacing:2%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}.cura-paragraph p.large{font-size:1.21em;line-height:150%;letter-spacing:0%}.cura-paragraph p.small{font-size:0.85em;line-height:135%;letter-spacing:4%}.cura-paragraph p.caption{font-size:0.71em;line-height:135%;letter-spacing:6%}@media (min-width: 768px) and (max-width: 1365px){.cura-paragraph p{font-size:1.14em;line-height:145%}.cura-paragraph p.large{font-size:1.35em;line-height:150%}.cura-paragraph p.small{font-size:1em;line-height:135%}.cura-paragraph p.caption{font-size:0.85em;line-height:135%;letter-spacing:6%}}@media (min-width: 1366px){.cura-paragraph p{font-size:1.42em;line-height:150%;letter-spacing:0%}.cura-paragraph p.large{font-size:1.71em;line-height:160%}.cura-paragraph p.small{font-size:1.21em;line-height:145%;letter-spacing:0%}.cura-paragraph p.caption{font-size:1em;line-height:145%;letter-spacing:2%}}.cura-paragraph b,.cura-paragraph strong{font-weight:var(--font-weight-bold)}.cura-paragraph a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}.cura-paragraph abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+
+const CuraParagraph = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Set size of body text.
+     * Values: regular (default) | large | small | caption.
+     */
+    this.size = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  setsizeClass() {
+    const sizeclass = {};
+    sizeclass[this.size.toLowerCase()] = true;
+    return sizeclass;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-regular': this.weights.regular,
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '1.25em');
+  }
+  setColors() {
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  render() {
+    return (index.h(index.Host, { class: "cura-paragraph" }, index.h("p", { style: this.styles, class: this.setsizeClass() }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+CuraParagraph.style = curaParagraphCss;
+
+exports.cura_display = CuraDisplay;
+exports.cura_heading = CuraHeading;
+exports.cura_page_template = CuraPageTemplate;
+exports.cura_paragraph = CuraParagraph;

package/dist/cjs/cura-icon.cjs.entry.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-76f95c4b.js');
+
+const curaIconCss = ".cura-icon{width:var(--size);height:var(--size)}.cura-icon svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
+
+const CuraIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.name = '';
+    this.color = 'neutral-base';
+    this.iconset = 'default';
+    this.disabled = false;
+    this.sizes = {
+      "128": { size: 128, stroke: 5.25 },
+      "72": { size: 72, stroke: 3.5 },
+      "64": { size: 64, stroke: 3.25 },
+      "48": { size: 48, stroke: 2.75 },
+      "40": { size: 40, stroke: 2.5 },
+      "32": { size: 32, stroke: 2.25 },
+      "24": { size: 24, stroke: 2 },
+      "20": { size: 20, stroke: 1.75 },
+      "16": { size: 16, stroke: 1.5 },
+      "default": { size: 24, stroke: 2 }
+    };
+  }
+  sizeHandler(size) {
+    const scaledStroke = (iconSize) => {
+      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;
+    };
+    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);
+    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
+  }
+  colorHandler() {
+    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));
+  }
+  connectedCallback() {
+    this.assetsPath = window.CuraAPI.localAssetsPath;
+    this.sizeHandler(this.size);
+    this.colorHandler();
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  render() {
+    return (index.h(index.Host, { class: 'cura-icon' }, index.h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, index.h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "size": ["sizeHandler"],
+    "color": ["colorHandler"],
+    "disabled": ["colorHandler"]
+  }; }
+};
+CuraIcon.style = curaIconCss;
+
+exports.cura_icon = CuraIcon;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-29633529.js');
+const index = require('./index-76f95c4b.js');
 
 const iconsetdefaulticons = ["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"];
 
@@ -13,10 +13,10 @@ const CuraIconsView = class {
     index.registerInstance(this, hostRef);
     this.sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];
     this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
+    this.selected = '360';
     this.setSelected = (icon) => {
       this.selected = icon;
     };
-    this.selected = '360';
   }
   render() {
     return (index.h(index.Host, null, index.h("div", { class: "iconDetail" }, index.h("h4", null, this.selected), index.h("div", { class: "iconSizes" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size }), index.h("span", null, size)))), index.h("div", { class: "iconSizes invert" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), index.h("span", null, size)))), index.h("div", { class: "iconSizes" }, this.colors.map(color => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, color: color }), index.h("span", null, color))), index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, disabled: true }), index.h("span", null, "Disabled")))), index.h("div", { class: "icons" }, iconsetdefaulticons.map(icon => index.h("div", { class: "icon", onClick: () => this.setSelected(icon) }, index.h("cura-icon", { name: icon }), index.h("span", null, icon))))));
@@ -25,5 +25,3 @@ const CuraIconsView = class {
 CuraIconsView.style = curaIconsViewCss;
 
 exports.cura_icons_view = CuraIconsView;
-
-//# sourceMappingURL=cura-icons-view.cjs.entry.js.map

package/dist/cjs/cura.cjs.js

@@ -1,36 +1,21 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-29633529.js');
-const appGlobals = require('./app-globals-a41d7f40.js');
+const index = require('./index-76f95c4b.js');
+const appGlobals = require('./app-globals-0f70160b.js');
 
 /*
- Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.18.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
-    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-    {
-        // shim css vars
-        // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-        index.plt.$cssShim$ = index.win.__cssshim;
-    }
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('cura.cjs.js', document.baseURI).href));
     const opts = {};
-    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     if (importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
-        // TODO(STENCIL-661): Remove code related to the dynamic import shim
-        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     }
     return index.promiseResolve(opts);
 };
 
 patchBrowser().then(options => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["cura-button_6.cjs",[[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]}]]],["cura-icons-view.cjs",[[1,"cura-icons-view",{"selected":[32]}]]]], options);
+  return index.bootstrapLazy([["cura-icon.cjs",[[0,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]],["cura-icons-view.cjs",[[0,"cura-icons-view",{"selected":[32]}]]],["cura-display_4.cjs",[[4,"cura-display",{"level":[514],"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[4,"cura-heading",{"level":[514],"size":[513],"weight":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[4,"cura-page-template",{"contentwidth":[513]}],[4,"cura-paragraph",{"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}]]]], options);
 });
-
-exports.setNonce = index.setNonce;
-
-//# sourceMappingURL=cura.cjs.js.map