@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/components/cura-label.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CuraLabel extends Components.CuraLabel, HTMLElement {}
 export const CuraLabel: {
-  prototype: CuraLabel;
-  new (): CuraLabel;
+    prototype: CuraLabel;
+    new (): CuraLabel;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cura-label2.js

@@ -1,86 +1,90 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaLabelCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}:host p.bold-weight,:host p ::slotted(b),:host p ::slotted(strong),:host p ::slotted(u){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(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 curaLabelCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}:host p.bold-weight,:host p ::slotted(b),:host p ::slotted(strong),:host p ::slotted(u){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+const CuraLabelStyle0 = curaLabelCss;
 
 const CuraLabel = /*@__PURE__*/ proxyCustomElement(class CuraLabel extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.theme = window.CuraAPI.theme;
-    this.size = 'medium';
-    this.weight = 'regular';
-    this.spotColor = 'accent-dark';
-    this.color = undefined;
-    this.marginBlock = '0';
-    this.lineHeight = '125%';
-    this.styles = {};
-  }
-  handleChangeColor() {
-    this.setColors();
-  }
-  connectedCallback() {
-    this.setFontProperties();
-    this.setColors();
-  }
-  getClasses() {
-    const sizeclass = {};
-    sizeclass[this.size.toLowerCase()] = true;
-    sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
-    return sizeclass;
-  }
-  setFontProperties() {
-    this.weights = this.theme.fonts.getWeights();
-    this.fontSizeBase = this.theme.fonts.getSize();
-    this.styles = {
-      '--font-family': this.theme.fonts.getFamily('body'),
-      '--font-weight-medium': this.weights.medium,
-      '--font-weight-bold': this.weights.bold
-    };
-  }
-  setColors() {
-    const fontColor = this.color
-      ? this.theme.colors.getColor(this.color)
-      : this.theme.fonts.getColor();
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
-  }
-  hostCSSProperties() {
-    return {
-      '--margin-block': this.marginBlock,
-      '--font-size-base': this.fontSizeBase,
-      '--line-height': this.lineHeight
-    };
-  }
-  render() {
-    return (h(Host, { style: this.hostCSSProperties() }, h("p", { style: this.styles, class: this.getClasses() }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "color": ["handleChangeColor"],
-    "spotColor": ["handleChangeColor"]
-  }; }
-  static get style() { return curaLabelCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.theme = window.CuraAPI.theme;
+        this.size = 'medium';
+        this.weight = 'regular';
+        this.spotColor = 'accent-dark';
+        this.color = undefined;
+        this.marginBlock = '0';
+        this.lineHeight = '125%';
+        this.styles = {};
+    }
+    handleChangeColor() {
+        this.setColors();
+    }
+    connectedCallback() {
+        this.setFontProperties();
+        this.setColors();
+    }
+    getClasses() {
+        const sizeclass = {};
+        sizeclass[this.size.toLowerCase()] = true;
+        sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
+        return sizeclass;
+    }
+    setFontProperties() {
+        this.weights = this.theme.fonts.getWeights();
+        this.fontSizeBase = this.theme.fonts.getSize();
+        this.styles = {
+            '--font-family': this.theme.fonts.getFamily('body'),
+            '--font-weight-medium': this.weights.medium,
+            '--font-weight-bold': this.weights.bold
+        };
+    }
+    setColors() {
+        const fontColor = this.color
+            ? this.theme.colors.getColor(this.color)
+            : this.theme.fonts.getColor();
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
+    }
+    hostCSSProperties() {
+        return {
+            '--margin-block': this.marginBlock,
+            '--font-size-base': this.fontSizeBase,
+            '--line-height': this.lineHeight
+        };
+    }
+    render() {
+        return (h(Host, { key: '42662869e7cc4cd7cc8ff29ef37209514eaea0ac', style: this.hostCSSProperties() }, h("p", { key: 'cf6be4faf13ab24e0ae65edea48b528763072a7b', style: this.styles, class: this.getClasses() }, h("slot", { key: '45ee41cdc15f0c73672e4b3047df4508dbb870e3' }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "color": ["handleChangeColor"],
+        "spotColor": ["handleChangeColor"]
+    }; }
+    static get style() { return CuraLabelStyle0; }
 }, [1, "cura-label", {
-    "size": [513],
-    "weight": [513],
-    "spotColor": [513, "spot-color"],
-    "color": [1],
-    "marginBlock": [513, "margin-block"],
-    "lineHeight": [513, "line-height"],
-    "styles": [32]
-  }]);
+        "size": [513],
+        "weight": [513],
+        "spotColor": [513, "spot-color"],
+        "color": [1],
+        "marginBlock": [513, "margin-block"],
+        "lineHeight": [513, "line-height"],
+        "styles": [32]
+    }, undefined, {
+        "color": ["handleChangeColor"],
+        "spotColor": ["handleChangeColor"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cura-label"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cura-label":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CuraLabel);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraLabel);
+            }
+            break;
+    } });
 }
 
 export { CuraLabel as C, defineCustomElement as d };

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

@@ -1 +1 @@
-{"file":"cura-label2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6/BAA6/B;;MCOrgC,SAAS;;;;;IAsDpB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;gBAhD0C,QAAQ;kBAM3B,SAAS;qBAM1B,aAAa;;uBAiBX,GAAG;sBAMJ,MAAM;kBAYxB,EAAE;;EA1BpB,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EA2BD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,UAAU;IACR,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;IACxD,OAAO,SAAS,CAAC;GAClB;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC/C,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;MACnD,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAC;GACH;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;QACxB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAChC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAChE,CAAC;GACH;EAED,iBAAiB;IACf,OAAO;MACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;MAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;MACrC,eAAe,EAAE,IAAI,CAAC,UAAU;KACjC,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,IACnC,SAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC7C,eAAa,CACX,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/forms/cura-label/cura-label.scss?tag=cura-label&encapsulation=shadow","./src/components/forms/cura-label/cura-label.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n  font-size: var(--font-size-base);\n\n  p {\n    font-family: var(--font-family);\n    font-size: 1.143em;\n    font-weight: var(--font-weight-medium);\n    color: var(--color-body);\n    line-height: var(--line-height);\n    margin-block: var(--margin-block);\n    letter-spacing: 0.32px;\n\n    &.bold-weight, ::slotted(b), ::slotted(strong), ::slotted(u) {\n      font-weight: var(--font-weight-bold);\n    }\n\n    &.large {\n      font-size: 1.357em;\n      line-height: calc(var(--line-height) - 4%);\n      letter-spacing: 0px;\n    }\n\n    &.small {\n      font-size: 1em;\n      line-height: calc(var(--line-height) - 4%);\n      letter-spacing: 0.56px;\n    }\n\n    &.xsmall {\n      font-size: 0.857em;\n      line-height: calc(var(--line-height) - 17%);\n      letter-spacing: 0.72px;\n    }\n  }\n\n  ::slotted(a) {\n    font-weight: var(--font-weight-bold);\n    color: var(--color-link);\n    text-underline-offset: 10%;\n  }\n\n  ::slotted(u) {\n    text-underline-offset: 10%;\n  }\n\n  ::slotted(abbr) {\n    color: var(--color-link);\n    text-decoration: underline dashed 1px var(--color-link);\n    text-underline-offset: 10%;\n    cursor: default;\n  }\n\n}\n\n","import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-label',\n  styleUrl: 'cura-label.scss',\n  shadow: true,\n})\nexport class CuraLabel {\n\n  /**\n   * Set size of body text.\n   * Values: medium (default) | large | small | xsmall.\n   */\n  @Prop({reflect: true}) size: 'medium' | 'large' | 'small' | 'xsmall' = 'medium';\n\n  /**\n   * Label font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n   * Values: regular (default) | bold.\n   */\n  @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '0';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '125%';\n\n  /**\n   * Host element <cura-label>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  getClasses() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = true;\n    sizeclass[`${this.weight.toLowerCase()}-weight`] = true;\n    return sizeclass;\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': this.theme.fonts.getFamily('body'),\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <p style={this.styles} class={this.getClasses()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-label2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,87BAA87B,CAAC;AACp9B,wBAAe,YAAY;;MCMd,SAAS;;;;;QAsDpB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;oBAhD0C,QAAQ;sBAM3B,SAAS;yBAM1B,aAAa;;2BAiBX,GAAG;0BAMJ,MAAM;sBAYxB,EAAE;;IA1BpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IA2BD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,UAAU;QACR,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QAC1C,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;QACxD,OAAO,SAAS,CAAC;KAClB;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAC/C,IAAI,CAAC,MAAM,GAAG;YACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;YACnD,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;YAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;SACxC,CAAC;KACH;IAED,SAAS;QACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;cACxB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;cACtC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAChC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAChE,CAAC;KACH;IAED,iBAAiB;QACf,OAAO;YACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;YAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;YACrC,eAAe,EAAE,IAAI,CAAC,UAAU;SACjC,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,IACnC,0DAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC7C,8DAAa,CACX,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/forms/cura-label/cura-label.scss?tag=cura-label&encapsulation=shadow","src/components/forms/cura-label/cura-label.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n  font-size: var(--font-size-base);\n\n\n  p {\n    font-family: var(--font-family);\n    font-size: 1.143em;\n    font-weight: var(--font-weight-medium);\n    color: var(--color-body);\n    line-height: var(--line-height);\n    margin-block: var(--margin-block);\n    letter-spacing: 0.32px;\n\n    &.bold-weight, ::slotted(b), ::slotted(strong), ::slotted(u) {\n      font-weight: var(--font-weight-bold);\n    }\n\n    &.large {\n      font-size: 1.357em;\n      line-height: calc(var(--line-height) - 4%);\n      letter-spacing: 0px;\n    }\n\n    &.small {\n      font-size: 1em;\n      line-height: calc(var(--line-height) - 4%);\n      letter-spacing: 0.56px;\n    }\n\n    &.xsmall {\n      font-size: 0.857em;\n      line-height: calc(var(--line-height) - 17%);\n      letter-spacing: 0.72px;\n    }\n  }\n\n  ::slotted(a) {\n    font-weight: var(--font-weight-bold);\n    color: var(--color-link);\n    text-underline-offset: 10%;\n  }\n\n  ::slotted(u) {\n    text-underline-offset: 10%;\n  }\n\n  ::slotted(abbr) {\n    color: var(--color-link);\n    text-decoration: underline dashed 1px var(--color-link);\n    text-underline-offset: 10%;\n    cursor: default;\n  }\n\n}\n\n","import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-label',\n  styleUrl: 'cura-label.scss',\n  shadow: true,\n})\nexport class CuraLabel {\n\n  /**\n   * Set size of body text.\n   * Values: medium (default) | large | small | xsmall.\n   */\n  @Prop({reflect: true}) size: 'medium' | 'large' | 'small' | 'xsmall' = 'medium';\n\n  /**\n   * Label font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n   * Values: regular (default) | bold.\n   */\n  @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '0';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '125%';\n\n  /**\n   * Host element <cura-label>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  getClasses() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = true;\n    sizeclass[`${this.weight.toLowerCase()}-weight`] = true;\n    return sizeclass;\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': this.theme.fonts.getFamily('body'),\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <p style={this.styles} class={this.getClasses()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-loader-circle.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CuraLoaderCircle extends Components.CuraLoaderCircle, HTMLElement {}
 export const CuraLoaderCircle: {
-  prototype: CuraLoaderCircle;
-  new (): CuraLoaderCircle;
+    prototype: CuraLoaderCircle;
+    new (): CuraLoaderCircle;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -1,49 +1,50 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaLoaderCircleCss = ":host{display:inline-block;width:var(--size);height:var(--size)}:host svg{width:var(--size);height:var(--size);-webkit-animation:rotate 0.7s linear infinite;animation:rotate 0.7s linear infinite}:host circle,:host path{stroke-miterlimit:10;stroke-linecap:round;stroke-linejoin:round}:host path{stroke:var(--color)}:host stop{stop-color:var(--color)}:host linearGradient stop:first-child{stop-opacity:0.14}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
+const curaLoaderCircleCss = ":host{display:inline-block;width:var(--size);height:var(--size)}:host svg{width:var(--size);height:var(--size);animation:rotate 0.7s linear infinite}:host circle,:host path{stroke-miterlimit:10;stroke-linecap:round;stroke-linejoin:round}:host path{stroke:var(--color)}:host stop{stop-color:var(--color)}:host linearGradient stop:first-child{stop-opacity:0.14}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}";
+const CuraLoaderCircleStyle0 = curaLoaderCircleCss;
 
 const CuraLoaderCircle = /*@__PURE__*/ proxyCustomElement(class CuraLoaderCircle extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sizes = {
-      xlarge: 32,
-      large: 24,
-      medium: 20,
-      small: 16,
-      default: 16,
-    };
-    this.getPxSize = () => this.sizes[this.size] || this.sizes['default'];
-    this.size = 'medium';
-    this.color = 'neutral-white';
-  }
-  getStyles() {
-    return {
-      '--size': `${this.getPxSize()}px`,
-      '--color': window.CuraAPI.theme.colors.getColor(this.color)
-    };
-  }
-  render() {
-    return (h(Host, { style: this.getStyles() }, h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", null, h("circle", { cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", null, h("linearGradient", { id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", null), h("stop", { offset: "1" }))))));
-  }
-  static get style() { return curaLoaderCircleCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sizes = {
+            xlarge: 32,
+            large: 24,
+            medium: 20,
+            small: 16,
+            default: 16,
+        };
+        this.getPxSize = () => this.sizes[this.size] || this.sizes['default'];
+        this.size = 'medium';
+        this.color = 'neutral-white';
+    }
+    getStyles() {
+        return {
+            '--size': `${this.getPxSize()}px`,
+            '--color': window.CuraAPI.theme.colors.getColor(this.color)
+        };
+    }
+    render() {
+        return (h(Host, { key: '8b2b73c6aefffd1a4350618ed52038a414cebb48', style: this.getStyles() }, h("svg", { key: '4478c39440bc66adcb3bcf1d947ae12cd5c3c721', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '3c01be9c541a634c504a2b8f72296426b8cebe28' }, h("circle", { key: '153102890325235a989b91badcadd00f852ccc3e', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '5fd7be471c351a46154fa96b459a99be297dfb5e', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '89ce06231240879c222d93fc4efc44d963bbd167' }, h("linearGradient", { key: '0999b93ff91ef7d31b9bfc70cfb08190838197e9', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd7adf5104e03f40f4c757d218c0fc786e9f8ef2c' }), h("stop", { key: '8aaddbffb82d660aa8d62b2147efb74409218f41', offset: "1" }))))));
+    }
+    static get style() { return CuraLoaderCircleStyle0; }
 }, [1, "cura-loader-circle", {
-    "size": [513],
-    "color": [513]
-  }]);
+        "size": [513],
+        "color": [513]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cura-loader-circle"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cura-loader-circle":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CuraLoaderCircle);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-loader-circle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-loader-circle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraLoaderCircle);
+            }
+            break;
+    } });
 }
 
 export { CuraLoaderCircle as C, defineCustomElement as d };

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

@@ -1 +1 @@
-{"file":"cura-loader-circle2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,yqBAAyqB;;MCOxrB,gBAAgB;;;;;IAW3B,UAAK,GAAG;MACN,MAAM,EAAE,EAAE;MACV,KAAK,EAAE,EAAE;MACT,MAAM,EAAE,EAAE;MACV,KAAK,EAAE,EAAE;MACT,OAAO,EAAE,EAAE;KACZ,CAAC;IAEF,cAAS,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;gBAdM,QAAQ;iBAIhD,eAAe;;EAY9C,SAAS;IACP,OAAO;MACL,QAAQ,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI;MACjC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;KAC5D,CAAA;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAC3B,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IACrE,aACE,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,iCAAiC,kBAAc,GAAG,GAAE,EACvF,YAAM,CAAC,EAAC,iHAAiH,kBAAc,GAAG,GAAE,CAC1I,EACJ,gBACE,sBAAgB,EAAE,EAAC,2BAA2B,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,aAAa,EAAC,gBAAgB,IAClH,eAAO,EACP,YAAM,MAAM,EAAC,GAAG,GAAE,CACH,CACZ,CACH,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/loaders/cura-loader-circle/cura-loader-circle.scss?tag=cura-loader-circle&encapsulation=shadow","./src/components/loaders/cura-loader-circle/cura-loader-circle.tsx"],"sourcesContent":["@import '../../../scss/mixins/animations.scss';\n\n:host {\n  display: inline-block;\n  width: var(--size);\n  height: var(--size);\n  \n  svg {\n    width: var(--size);\n    height: var(--size);\n    animation: rotate .7s linear infinite;\n  }\n\n  circle, path {\n    stroke-miterlimit: 10;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  path { stroke: var(--color); }\n\n  stop { stop-color: var(--color); }\n  linearGradient stop:first-child {\n    stop-opacity: 0.14;\n  }\n}\n\n@include rotate();\n\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'cura-loader-circle',\n  styleUrl: 'cura-loader-circle.scss',\n  shadow: true,\n})\nexport class CuraLoaderCircle {\n\n  /**\n   * Loader size. Values: small, medium or large.\n   */\n  @Prop({reflect: true}) size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';\n  /**\n   * One from color scheme. Default: neutral-white.\n   */\n  @Prop({reflect: true}) color = 'neutral-white';\n\n  sizes = {\n    xlarge: 32,\n    large: 24,\n    medium: 20,\n    small: 16,\n    default: 16,\n  };\n\n  getPxSize = () => this.sizes[this.size] || this.sizes['default'];\n\n  getStyles() {\n    return {\n      '--size': `${this.getPxSize()}px`,\n      '--color': window.CuraAPI.theme.colors.getColor(this.color)\n    }\n  }\n\n  render() {\n    return (\n      <Host style={this.getStyles()}>\n        <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g>\n            <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"url(#paint0_linear_13485_11488)\" stroke-width=\"2\"/>\n            <path d=\"M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5\" stroke-width=\"2\"/>\n          </g>\n          <defs>\n            <linearGradient id=\"paint0_linear_13485_11488\" x1=\"15.7\" y1=\"4.5\" x2=\"4.15\" y2=\"11.5\" gradientUnits=\"userSpaceOnUse\">\n              <stop/>\n              <stop offset=\"1\"/>\n            </linearGradient>\n          </defs>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-loader-circle2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,ibAAib,CAAC;AAC9c,+BAAe,mBAAmB;;MCMrB,gBAAgB;;;;;QAW3B,UAAK,GAAG;YACN,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,OAAO,EAAE,EAAE;SACZ,CAAC;QAEF,cAAS,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;oBAdM,QAAQ;qBAIhD,eAAe;;IAY9C,SAAS;QACP,OAAO;YACL,QAAQ,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI;YACjC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;SAC5D,CAAA;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAC3B,4DAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IACrE,4DACE,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,iCAAiC,kBAAc,GAAG,GAAE,EACvF,6DAAM,CAAC,EAAC,iHAAiH,kBAAc,GAAG,GAAE,CAC1I,EACJ,+DACE,uEAAgB,EAAE,EAAC,2BAA2B,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,aAAa,EAAC,gBAAgB,IAClH,8DAAO,EACP,6DAAM,MAAM,EAAC,GAAG,GAAE,CACH,CACZ,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/loaders/cura-loader-circle/cura-loader-circle.scss?tag=cura-loader-circle&encapsulation=shadow","src/components/loaders/cura-loader-circle/cura-loader-circle.tsx"],"sourcesContent":["@import '../../../scss/mixins/animations.scss';\n\n:host {\n  display: inline-block;\n  width: var(--size);\n  height: var(--size);\n  \n  svg {\n    width: var(--size);\n    height: var(--size);\n    animation: rotate .7s linear infinite;\n  }\n\n  circle, path {\n    stroke-miterlimit: 10;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  path { stroke: var(--color); }\n\n  stop { stop-color: var(--color); }\n  linearGradient stop:first-child {\n    stop-opacity: 0.14;\n  }\n}\n\n@include rotate();\n\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'cura-loader-circle',\n  styleUrl: 'cura-loader-circle.scss',\n  shadow: true,\n})\nexport class CuraLoaderCircle {\n\n  /**\n   * Loader size. Values: small, medium or large.\n   */\n  @Prop({reflect: true}) size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';\n  /**\n   * One from color scheme. Default: neutral-white.\n   */\n  @Prop({reflect: true}) color = 'neutral-white';\n\n  sizes = {\n    xlarge: 32,\n    large: 24,\n    medium: 20,\n    small: 16,\n    default: 16,\n  };\n\n  getPxSize = () => this.sizes[this.size] || this.sizes['default'];\n\n  getStyles() {\n    return {\n      '--size': `${this.getPxSize()}px`,\n      '--color': window.CuraAPI.theme.colors.getColor(this.color)\n    }\n  }\n\n  render() {\n    return (\n      <Host style={this.getStyles()}>\n        <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g>\n            <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"url(#paint0_linear_13485_11488)\" stroke-width=\"2\"/>\n            <path d=\"M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5\" stroke-width=\"2\"/>\n          </g>\n          <defs>\n            <linearGradient id=\"paint0_linear_13485_11488\" x1=\"15.7\" y1=\"4.5\" x2=\"4.15\" y2=\"11.5\" gradientUnits=\"userSpaceOnUse\">\n              <stop/>\n              <stop offset=\"1\"/>\n            </linearGradient>\n          </defs>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-page-template.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CuraPageTemplate extends Components.CuraPageTemplate, HTMLElement {}
 export const CuraPageTemplate: {
-  prototype: CuraPageTemplate;
-  new (): CuraPageTemplate;
+    prototype: CuraPageTemplate;
+    new (): CuraPageTemplate;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cura-page-template.js

@@ -1,44 +1,45 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaPageTemplateCss = ":host{display:block}:host .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\"}:host .grid-template #sub-header{grid-area:sub-header}:host .grid-template #header{grid-area:header}:host .grid-template #pre-content{grid-area:pre-content}:host .grid-template #content-container{grid-area:content-container}:host .grid-template #post-body{grid-area:post-body}:host .grid-template #footer{grid-area:footer}:host .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 768px){:host .grid-template{padding:0px}}@media (min-width: 769px) and (max-width: 992px){:host .grid-template{padding:0px}}@media (min-width: 993px) and (max-width: 1920px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 5px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 5px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1921px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 7px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 7px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}:host .grid-template #content-container.centered{max-width:1921px;justify-self:center}}";
+const curaPageTemplateCss = ":host{display:block}:host .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\"}:host .grid-template #sub-header{grid-area:sub-header}:host .grid-template #header{grid-area:header}:host .grid-template #pre-content{grid-area:pre-content}:host .grid-template #content-container{grid-area:content-container}:host .grid-template #post-body{grid-area:post-body}:host .grid-template #footer{grid-area:footer}:host .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 768px){:host .grid-template{padding:0px}}@media (min-width: 769px) and (max-width: 992px){:host .grid-template{padding:0px}}@media (min-width: 993px) and (max-width: 1920px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 5px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 5px)}:host .grid-template #content-container{display:flex}:host .grid-template #content-container #content{flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1921px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 7px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 7px)}:host .grid-template #content-container{display:flex}:host .grid-template #content-container #content{flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}:host .grid-template #content-container.centered{max-width:1921px;justify-self:center}}";
+const CuraPageTemplateStyle0 = curaPageTemplateCss;
 
 const CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class CuraPageTemplate extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.contentwidth = 'default';
-  }
-  connectedCallback() {
-    this.styles = {
-      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),
-    };
-  }
-  getClasses() {
-    const classes = {};
-    classes[this.contentwidth.toLowerCase()] = true;
-    return classes;
-  }
-  render() {
-    return (h(Host, null, h("div", { style: this.styles, class: "grid-template" }, h("div", { id: "sub-header" }, h("slot", { name: 'sub-header' })), h("div", { id: "header" }, h("slot", { name: 'header' })), h("div", { id: "pre-content" }, h("slot", { name: 'pre-content' })), h("div", { id: "content-container", class: this.getClasses() }, h("div", { id: "sidebar-left" }, h("slot", { name: 'sidebar-left' })), h("div", { id: "content" }, h("slot", { name: "content" }), h("slot", null)), h("div", { id: "sidebar-right" }, h("slot", { name: 'sidebar-right' }))), h("div", { id: "post-body" }, h("slot", { name: 'post-body' })), h("div", { id: "footer" }, h("slot", { name: 'footer' })), h("div", { id: "sub-footer" }, h("slot", { name: 'sub-footer' })))));
-  }
-  get host() { return this; }
-  static get style() { return curaPageTemplateCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.contentwidth = 'default';
+    }
+    connectedCallback() {
+        this.styles = {
+            '--spacing': window.CuraAPI.theme.spacing.getSpacing(),
+        };
+    }
+    getClasses() {
+        const classes = {};
+        classes[this.contentwidth.toLowerCase()] = true;
+        return classes;
+    }
+    render() {
+        return (h(Host, { key: 'b420fd773b337fbf64107124c3a65b7d543aa0f9' }, h("div", { key: '00e031bf40ed01904107f07367ee5b3042c1871f', style: this.styles, class: "grid-template" }, h("div", { key: '4c5c8112fe739d2b330a5a71bfdd6f6339206b15', id: "sub-header" }, h("slot", { key: '8b9896a17e6016bc791da8fd01f562a41d7f5bb1', name: 'sub-header' })), h("div", { key: '9d45f7a18ce35ae550521b281cfc0d9ea5009343', id: "header" }, h("slot", { key: '79ecbfb33b818b41c98f8a1f09243f6c2082b7bd', name: 'header' })), h("div", { key: '129b9928ddd3c0f0c357fa71494b3b77876ecd49', id: "pre-content" }, h("slot", { key: '71b6fbe0755848ac8df0a800e65b8ebc6909aff3', name: 'pre-content' })), h("div", { key: '80389bc85c71768906aa2ab564a80b84a045705d', id: "content-container", class: this.getClasses() }, h("div", { key: '438eb89b07be453c1a7caf31eb78879a6b000fc3', id: "sidebar-left" }, h("slot", { key: '8e0dd99e31be8d03d767acdee8bd18f4f6fe80bd', name: 'sidebar-left' })), h("div", { key: '21edd321d65ff1a685c699314a2d4617a14b6d09', id: "content" }, h("slot", { key: '125f790bc5d5ecade8946c154b00fdb7591ec26f', name: "content" }), h("slot", { key: 'e52dfd04c751d893335037f6dc970902a37a7d4f' })), h("div", { key: '3d35da8b265ca7a96fe36d8f037c6db0e0857537', id: "sidebar-right" }, h("slot", { key: '1d812f29d7cc068b0c4f6e705a60defc91da7145', name: 'sidebar-right' }))), h("div", { key: '10f23a4d4e837bbb11e140a5fd09be05836a27ba', id: "post-body" }, h("slot", { key: '8f3bd8fea091a0b025e69f1a0916016f1354aeb8', name: 'post-body' })), h("div", { key: '474062139aa0dd1ed49bc9c8594820fa2ff0ba83', id: "footer" }, h("slot", { key: 'ad46b1122b0875390822df6db770413980090f5e', name: 'footer' })), h("div", { key: 'c3de6dd778e675e38099d85d248e7923e276a25c', id: "sub-footer" }, h("slot", { key: '81a48964dc8912a225ea9ea49478d674d8d7271b', name: 'sub-footer' })))));
+    }
+    get host() { return this; }
+    static get style() { return CuraPageTemplateStyle0; }
 }, [1, "cura-page-template", {
-    "contentwidth": [513]
-  }]);
+        "contentwidth": [513]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cura-page-template"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cura-page-template":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CuraPageTemplate$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-page-template"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-page-template":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraPageTemplate$1);
+            }
+            break;
+    } });
 }
 
 const CuraPageTemplate = CuraPageTemplate$1;

package/dist/components/cura-page-template.js.map

@@ -1 +1 @@
-{"file":"cura-page-template.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,igEAAigE;;MCOhhEA,kBAAgB;;;;;wBAEmC,SAAS;;EAMvE,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;KACvD,CAAA;GACF;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAChD,OAAO,OAAO,CAAC;GAChB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,eAAe,IAC5C,WAAK,EAAE,EAAC,YAAY,IAClB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EACN,WAAK,EAAE,EAAC,QAAQ,IACd,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACN,WAAK,EAAE,EAAC,aAAa,IACnB,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,EACN,WAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAClD,WAAK,EAAE,EAAC,cAAc,IACpB,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,WAAK,EAAE,EAAC,SAAS,IACf,YAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,eAAa,CACT,EACN,WAAK,EAAE,EAAC,eAAe,IACrB,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,EACN,WAAK,EAAE,EAAC,WAAW,IACjB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,EAAE,EAAC,QAAQ,IACd,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACN,WAAK,EAAE,EAAC,YAAY,IAClB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraPageTemplate"],"sources":["./src/components/cura-page-template/cura-page-template.scss?tag=cura-page-template&encapsulation=shadow","./src/components/cura-page-template/cura-page-template.tsx"],"sourcesContent":["@import '../../scss/mixins/responsive.scss';\n\n@mixin template-spacing($spacing-scale: 0px, $large-device: false) {\n  $spacing-px: calc(var(--spacing) * $spacing-scale);\n  padding: 0px;\n  @if $large-device {\n    #content-container {\n      #sidebar-left ::slotted(div[slot=\"sidebar-left\"]) {\n        margin-right: $spacing-px;\n      }\n      #sidebar-right ::slotted(div[slot=\"sidebar-right\"]) {\n        margin-left: $spacing-px;\n      }\n    }\n  }\n}\n\n:host {\n  display: block;\n\n  .grid-template {\n    display: grid;\n    grid-template-rows: auto;\n    grid-template-columns: auto;\n    grid-template-areas:\n      'sub-header'\n      'header'\n      'pre-content'\n      'content-container'\n      'post-body'\n      'footer'\n      'sub-footer';\n\n    #sub-header {\n      grid-area: sub-header;\n    }\n\n    #header {\n      grid-area: header;\n    }\n\n    #pre-content {\n      grid-area: pre-content;\n    }\n\n    #content-container {\n      grid-area: content-container;\n    }\n\n    #post-body {\n      grid-area: post-body;\n    }\n\n    #footer {\n      grid-area: footer;\n    }\n\n    #sub-footer {\n      grid-area: sub-footer;\n    }\n\n    @include mobile-only() {\n      $spacing-scale: 4px;\n      @include template-spacing($spacing-scale);\n    }\n\n    @include medium-only() {\n      $spacing-scale: 5px;\n      @include template-spacing($spacing-scale);\n    }\n\n    @include large-only() {\n      $spacing-scale: 5px;\n      @include template-spacing($spacing-scale, true);\n      #content-container {\n        display: flex;\n        #content {\n          flex-grow: 1;\n        }\n        #sidebar-left, #sidebar-right {\n          max-width: 20%;\n        }\n      }\n    }\n\n    @include xlarge-only() {\n      $spacing-scale: 7px;\n      @include template-spacing($spacing-scale, true);\n      #content-container {\n        display: flex;\n        #content {\n          flex-grow: 1;\n        }\n        #sidebar-left, #sidebar-right {\n          max-width: 20%;\n        }\n        &.centered {\n          max-width: $breakpoint-xlarge-min;\n          justify-self: center;\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-page-template',\n  styleUrl: 'cura-page-template.scss',\n  shadow: true,\n})\nexport class CuraPageTemplate {\n\n  @Prop({reflect: true}) contentwidth: 'default' | 'centered' = 'default';\n\n  @Element() host: HTMLElement;\n\n  styles: any;\n\n  connectedCallback() {\n    this.styles = {\n      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    }\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.contentwidth.toLowerCase()] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div style={this.styles} class=\"grid-template\">\n          <div id=\"sub-header\">\n            <slot name='sub-header'></slot>\n          </div>\n          <div id=\"header\">\n            <slot name='header'></slot>\n          </div>\n          <div id=\"pre-content\">\n            <slot name='pre-content'></slot>\n          </div>\n          <div id=\"content-container\" class={this.getClasses()}>\n            <div id=\"sidebar-left\">\n              <slot name='sidebar-left'></slot>\n            </div>\n            <div id=\"content\">\n              <slot name=\"content\"></slot>\n              <slot></slot>\n            </div>\n            <div id=\"sidebar-right\">\n              <slot name='sidebar-right'></slot>\n            </div>\n          </div>\n          <div id=\"post-body\">\n            <slot name='post-body'></slot>\n          </div>\n          <div id=\"footer\">\n            <slot name='footer'></slot>\n          </div>\n          <div id=\"sub-footer\">\n            <slot name='sub-footer'></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-page-template.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,i7DAAi7D,CAAC;AAC98D,+BAAe,mBAAmB;;MCMrBA,kBAAgB;;;;;4BAEmC,SAAS;;IAMvE,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;SACvD,CAAA;KACF;IAED,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QAChD,OAAO,OAAO,CAAC;KAChB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,eAAe,IAC5C,4DAAK,EAAE,EAAC,YAAY,IAClB,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EACN,4DAAK,EAAE,EAAC,QAAQ,IACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACN,4DAAK,EAAE,EAAC,aAAa,IACnB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,EACN,4DAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAClD,4DAAK,EAAE,EAAC,cAAc,IACpB,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,4DAAK,EAAE,EAAC,SAAS,IACf,6DAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,8DAAa,CACT,EACN,4DAAK,EAAE,EAAC,eAAe,IACrB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,EACN,4DAAK,EAAE,EAAC,WAAW,IACjB,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,4DAAK,EAAE,EAAC,QAAQ,IACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACN,4DAAK,EAAE,EAAC,YAAY,IAClB,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraPageTemplate"],"sources":["src/components/cura-page-template/cura-page-template.scss?tag=cura-page-template&encapsulation=shadow","src/components/cura-page-template/cura-page-template.tsx"],"sourcesContent":["@import '../../scss/mixins/responsive.scss';\n\n@mixin template-spacing($spacing-scale: 0px, $large-device: false) {\n  $spacing-px: calc(var(--spacing) * $spacing-scale);\n  padding: 0px;\n  @if $large-device {\n    #content-container {\n      #sidebar-left ::slotted(div[slot=\"sidebar-left\"]) {\n        margin-right: $spacing-px;\n      }\n      #sidebar-right ::slotted(div[slot=\"sidebar-right\"]) {\n        margin-left: $spacing-px;\n      }\n    }\n  }\n}\n\n:host {\n  display: block;\n\n  .grid-template {\n    display: grid;\n    grid-template-rows: auto;\n    grid-template-columns: auto;\n    grid-template-areas:\n      'sub-header'\n      'header'\n      'pre-content'\n      'content-container'\n      'post-body'\n      'footer'\n      'sub-footer';\n\n    #sub-header {\n      grid-area: sub-header;\n    }\n\n    #header {\n      grid-area: header;\n    }\n\n    #pre-content {\n      grid-area: pre-content;\n    }\n\n    #content-container {\n      grid-area: content-container;\n    }\n\n    #post-body {\n      grid-area: post-body;\n    }\n\n    #footer {\n      grid-area: footer;\n    }\n\n    #sub-footer {\n      grid-area: sub-footer;\n    }\n\n    @include mobile-only() {\n      $spacing-scale: 4px;\n      @include template-spacing($spacing-scale);\n    }\n\n    @include medium-only() {\n      $spacing-scale: 5px;\n      @include template-spacing($spacing-scale);\n    }\n\n    @include large-only() {\n      $spacing-scale: 5px;\n      @include template-spacing($spacing-scale, true);\n      #content-container {\n        display: flex;\n        #content {\n          flex-grow: 1;\n        }\n        #sidebar-left, #sidebar-right {\n          max-width: 20%;\n        }\n      }\n    }\n\n    @include xlarge-only() {\n      $spacing-scale: 7px;\n      @include template-spacing($spacing-scale, true);\n      #content-container {\n        display: flex;\n        #content {\n          flex-grow: 1;\n        }\n        #sidebar-left, #sidebar-right {\n          max-width: 20%;\n        }\n        &.centered {\n          max-width: $breakpoint-xlarge-min;\n          justify-self: center;\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-page-template',\n  styleUrl: 'cura-page-template.scss',\n  shadow: true,\n})\nexport class CuraPageTemplate {\n\n  @Prop({reflect: true}) contentwidth: 'default' | 'centered' = 'default';\n\n  @Element() host: HTMLElement;\n\n  styles: any;\n\n  connectedCallback() {\n    this.styles = {\n      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    }\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.contentwidth.toLowerCase()] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div style={this.styles} class=\"grid-template\">\n          <div id=\"sub-header\">\n            <slot name='sub-header'></slot>\n          </div>\n          <div id=\"header\">\n            <slot name='header'></slot>\n          </div>\n          <div id=\"pre-content\">\n            <slot name='pre-content'></slot>\n          </div>\n          <div id=\"content-container\" class={this.getClasses()}>\n            <div id=\"sidebar-left\">\n              <slot name='sidebar-left'></slot>\n            </div>\n            <div id=\"content\">\n              <slot name=\"content\"></slot>\n              <slot></slot>\n            </div>\n            <div id=\"sidebar-right\">\n              <slot name='sidebar-right'></slot>\n            </div>\n          </div>\n          <div id=\"post-body\">\n            <slot name='post-body'></slot>\n          </div>\n          <div id=\"footer\">\n            <slot name='footer'></slot>\n          </div>\n          <div id=\"sub-footer\">\n            <slot name='sub-footer'></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-paragraph.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CuraParagraph extends Components.CuraParagraph, HTMLElement {}
 export const CuraParagraph: {
-  prototype: CuraParagraph;
-  new (): CuraParagraph;
+    prototype: CuraParagraph;
+    new (): CuraParagraph;
 };
 /**
  * Used to define this component and all nested components recursively.