@rededor/cura 0.5.1 → 0.5.3

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

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

package/dist/components/cura-label.js

@@ -0,0 +1,8 @@
+import { C as CuraLabel$1, d as defineCustomElement$1 } from './cura-label2.js';
+
+const CuraLabel = CuraLabel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraLabel, defineCustomElement };
+
+//# sourceMappingURL=cura-label.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-label.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/cura-label2.js

@@ -0,0 +1,88 @@
+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 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; }
+}, [1, "cura-label", {
+    "size": [513],
+    "weight": [513],
+    "spotColor": [513, "spot-color"],
+    "color": [1],
+    "marginBlock": [513, "margin-block"],
+    "lineHeight": [513, "line-height"],
+    "styles": [32]
+  }]);
+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;
+  } });
+}
+
+export { CuraLabel as C, defineCustomElement as d };
+
+//# sourceMappingURL=cura-label2.js.map

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

@@ -0,0 +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}

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

@@ -1,6 +1,6 @@
 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: 360px){:host .grid-template{padding:0px}}@media (min-width: 768px) and (max-width: 1365px){:host .grid-template{padding:0px}}@media (min-width: 1366px) and (max-width: 1919px){: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: 1920px){: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:1920px;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:-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 CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class CuraPageTemplate extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"cura-page-template.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,mgEAAmgE;;MCOlhEA,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;\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,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}

package/dist/components/cura-paragraph.js

@@ -1,83 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const curaParagraphCss = ":host{display:block;font-size:var(--font-size)}:host p{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host p.large{font-size:1.21em;line-height:calc(var(--line-height) + 10%);}:host p.small{font-size:0.85em;line-height:calc(var(--line-height) - 5%);}:host p.caption{font-size:0.71em;line-height:calc(var(--line-height) - 5%);}@media (min-width: 768px) and (max-width: 1365px){:host p{font-size:1.14em;line-height:calc(var(--line-height) + 5%);}:host p.large{font-size:1.35em;line-height:calc(var(--line-height) + 10%);}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 5%);}:host p.caption{font-size:0.85em;line-height:calc(var(--line-height) - 5%);}}@media (min-width: 1366px){:host p{font-size:1.42em;line-height:calc(var(--line-height) + 10%);}:host p.large{font-size:1.71em;line-height:calc(var(--line-height) + 20%);}:host p.small{font-size:1.21em;line-height:calc(var(--line-height) + 5%);}:host p.caption{font-size:1em;line-height:calc(var(--line-height) + 5%);}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-medium);color:var(--color-link);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 CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class CuraParagraph extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = 'regular';
-    this.inverted = false;
-    this.spotColor = 'primary';
-    this.color = undefined;
-    this.styles = {};
-  }
-  handleChangeColor() {
-    this.setColors();
-  }
-  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');
-    this.setHostProperty('--line-height', '140%');
-  }
-  setColors() {
-    const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :
-      this.inverted
-        ? window.CuraAPI.theme.colors.getColor('neutral-white')
-        : window.CuraAPI.theme.fonts.getColor();
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'), '--color-link': this.inverted
-        ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
-        : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`) });
-  }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
-  }
-  render() {
-    return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "color": ["handleChangeColor"]
-  }; }
-  static get style() { return curaParagraphCss; }
-}, [1, "cura-paragraph", {
-    "size": [513],
-    "inverted": [516],
-    "spotColor": [513, "spot-color"],
-    "color": [8],
-    "styles": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cura-paragraph"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cura-paragraph":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CuraParagraph$1);
-      }
-      break;
-  } });
-}
+import { C as CuraParagraph$1, d as defineCustomElement$1 } from './cura-paragraph2.js';
 
 const CuraParagraph = CuraParagraph$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"cura-paragraph.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,4mDAA4mD;;MCOxnDA,eAAa;;;;;gBAMiD,SAAS;oBAKhD,KAAK;qBAKJ,SAAS;;kBAmB1B,EAAE;;EAbpB,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAaD,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IACvD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,YAAY;IACV,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,OAAO,SAAS,CAAC;GAClB;EAED,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;MAC7D,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;MAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;IACjD,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;GAC/C;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;MAC7E,IAAI,CAAC,QAAQ;UACX,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;UACrD,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC1C,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACnF,cAAc,EAAE,IAAI,CAAC,QAAQ;UACzB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,UAAU,CAAC;UACjE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC,GACnE,CAAC;GACH;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC1C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,SAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAC/C,eAAa,CACX,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraParagraph"],"sources":["./src/components/text/cura-paragraph/cura-paragraph.scss?tag=cura-paragraph&encapsulation=shadow","./src/components/text/cura-paragraph/cura-paragraph.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n  font-size: var(--font-size);\n\n  p {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n    font-weight: var(--font-weight-regular);\n    color: var(--color-body);\n    line-height: var(--line-height);\n    /* letter-spacing: 0.02em; */\n    margin-block-start: var(--block-margin);\n    margin-block-end: var(--block-margin);\n\n    &.large {\n      font-size: 1.21em;\n      line-height: calc(var(--line-height) + 10%);\n      /* line-height: 150%; */\n      /* letter-spacing: normal; */\n    }\n\n    &.small {\n      font-size: 0.85em;\n      line-height: calc(var(--line-height) - 5%);\n      /* line-height: 135%; */\n      /* letter-spacing: 0.04em; */\n    }\n\n    &.caption {\n      font-size: 0.71em;\n      line-height: calc(var(--line-height) - 5%);\n      /* line-height: 135%; */\n      /* letter-spacing: 0.06em; */\n    }\n  }\n\n  @include medium-only() {\n    p {\n      font-size: 1.14em;\n      line-height: calc(var(--line-height) + 5%);\n      /* line-height: 145%; */\n\n      &.large {\n        font-size: 1.35em;\n        line-height: calc(var(--line-height) + 10%);\n        /* line-height: 150%; */\n      }\n\n      &.small {\n        font-size: 1em;\n        line-height: calc(var(--line-height) - 5%);\n        /* line-height: 135%; */\n      }\n\n      &.caption {\n        font-size: 0.85em;\n        line-height: calc(var(--line-height) - 5%);\n        /* line-height: 135%; */\n        /* letter-spacing: 0.06em; */\n      }\n    }\n  }\n\n  @include large-up() {\n    p {\n      font-size: 1.42em;\n      line-height: calc(var(--line-height) + 10%);\n      /* line-height: 150%; */\n      /* letter-spacing: normal; */\n\n      &.large {\n        font-size: 1.71em;\n        line-height: calc(var(--line-height) + 20%);\n        /* line-height: 160%; */\n      }\n\n      &.small {\n        font-size: 1.21em;\n        line-height: calc(var(--line-height) + 5%);\n        /* line-height: 145%; */\n        /* letter-spacing: normal; */\n      }\n\n      &.caption {\n        font-size: 1em;\n        line-height: calc(var(--line-height) + 5%);\n        /* line-height: 145%; */\n        /* letter-spacing: 0.02em; */\n      }\n    }\n  }\n\n  ::slotted(b), ::slotted(strong) {\n    font-weight: var(--font-weight-bold);\n  }\n\n  ::slotted(a) {\n    font-weight: var(--font-weight-medium);\n    color: var(--color-link);\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-paragraph',\n  styleUrl: 'cura-paragraph.scss',\n  shadow: true,\n})\nexport class CuraParagraph {\n\n  /**\n   * Set size of body text.\n   * Values: regular (default) | large | small | caption.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'large' | 'small' | 'caption' = 'regular';\n  /**\n  * Apply light color to text in dark background.\n  * Values: boolean.\n  */\n  @Prop({reflect: true}) inverted = false;\n  /**\n  * Apply base system color to elements like <a> and <abbr>.\n  * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n  */\n  @Prop({reflect: true}) spotColor = 'primary';\n  /**\n   * Color base from color scheme. Default: theme font color.\n   */\n  @Prop() color;\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * Host element <cura-paragraph>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  @State() styles = {};\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  setsizeClass() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = true;\n    return sizeclass;\n  }\n\n  setFontProperties() {\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    }\n    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n    this.setHostProperty('--block-margin', '1.25em');\n    this.setHostProperty('--line-height', '140%');\n  }\n\n  setColors() {\n    const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :\n      this.inverted\n      ? window.CuraAPI.theme.colors.getColor('neutral-white')\n      : window.CuraAPI.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.inverted\n        ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n        : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`)\n    };\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <p style={this.styles} class={this.setsizeClass()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-paragraph.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/cura-paragraph2.js

@@ -0,0 +1,86 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const curaParagraphCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.28px}:host p.large{font-size:1.214em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.48px}:host p.caption,:host p.xsmall{font-size:0.714em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.6px}@media (min-width: 769px) and (max-width: 1920px){:host p{font-size:1.143em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.32px}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.56px}:host p.caption,:host p.xsmall{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.72px}}@media (min-width: 1921px){:host p{font-size:1.429em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.large{font-size:1.714em;line-height:calc(var(--line-height) + 20%)}:host p.small{font-size:1.21em;line-height:calc(var(--line-height) + 5%);letter-spacing:0px}:host p.caption,:host p.xsmall{font-size:1em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){font-weight:var(--font-weight-medium);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 CuraParagraph = /*@__PURE__*/ proxyCustomElement(class CuraParagraph extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.theme = window.CuraAPI.theme;
+    this.size = 'medium';
+    this.spotColor = 'accent-dark';
+    this.color = undefined;
+    this.marginBlock = '1.25em';
+    this.lineHeight = '140%';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.setFontProperties();
+    this.setColors();
+  }
+  setsizeClass() {
+    const sizeclass = {};
+    sizeclass[this.size.toLowerCase()] = 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-regular': this.weights.regular,
+      '--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.setsizeClass() }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "color": ["handleChangeColor"],
+    "spotColor": ["handleChangeColor"]
+  }; }
+  static get style() { return curaParagraphCss; }
+}, [1, "cura-paragraph", {
+    "size": [513],
+    "spotColor": [513, "spot-color"],
+    "color": [1],
+    "marginBlock": [513, "margin-block"],
+    "lineHeight": [513, "line-height"],
+    "styles": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-paragraph":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraParagraph);
+      }
+      break;
+  } });
+}
+
+export { CuraParagraph as C, defineCustomElement as d };
+
+//# sourceMappingURL=cura-paragraph2.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-paragraph2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,w1DAAw1D;;MCOp2D,aAAa;;;;;IAgDxB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;gBA1CkE,QAAQ;qBAMpE,aAAa;;uBAiBX,QAAQ;sBAMT,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,YAAY;IACV,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,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,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;MAC7C,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,YAAY,EAAE,IAC/C,eAAa,CACX,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/text/cura-paragraph/cura-paragraph.scss?tag=cura-paragraph&encapsulation=shadow","./src/components/text/cura-paragraph/cura-paragraph.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: var(--font-size-base);\n    font-weight: var(--font-weight-regular);\n    color: var(--color-body);\n    line-height: var(--line-height);\n    margin-block: var(--margin-block);\n    letter-spacing: 0.28px;\n\n    &.large {\n      font-size: 1.214em;\n      line-height: calc(var(--line-height) + 10%);\n      letter-spacing: 0px;\n    }\n\n    &.small {\n      font-size: 0.85em;\n      line-height: calc(var(--line-height) - 5%);\n      letter-spacing: 0.48px;\n    }\n\n    &.caption, &.xsmall {\n      font-size: 0.714em;\n      line-height: calc(var(--line-height) - 5%);\n      letter-spacing: 0.6px;\n    }\n  }\n\n  @include medium-large() {\n    p {\n      font-size: 1.143em;\n      line-height: calc(var(--line-height) + 5%);\n      letter-spacing: 0.32px;\n\n      &.large {\n        font-size: 1.357em;\n        line-height: calc(var(--line-height) + 10%);\n        letter-spacing: 0px;\n      }\n\n      &.small {\n        font-size: 1em;\n        line-height: calc(var(--line-height) - 5%);\n        letter-spacing: 0.56px;\n      }\n\n      &.caption, &.xsmall {\n        font-size: 0.85em;\n        line-height: calc(var(--line-height) - 5%);\n        letter-spacing: 0.72px;\n      }\n    }\n  }\n\n  @include xlarge-only() {\n    p {\n      font-size: 1.429em;\n      line-height: calc(var(--line-height) + 10%);\n      letter-spacing: 0px;\n\n      &.large {\n        font-size: 1.714em;\n        line-height: calc(var(--line-height) + 20%);\n      }\n\n      &.small {\n        font-size: 1.21em;\n        line-height: calc(var(--line-height) + 5%);\n        letter-spacing: 0px;\n      }\n\n      &.caption, &.xsmall {\n        font-size: 1em;\n        line-height: calc(var(--line-height) + 5%);\n        letter-spacing: 0.28px;\n      }\n    }\n  }\n\n  ::slotted(b), ::slotted(strong) {\n    font-weight: var(--font-weight-bold);\n  }\n\n  ::slotted(a) {\n    font-weight: var(--font-weight-medium);\n    color: var(--color-link);\n    text-underline-offset: 10%;\n  }\n\n  ::slotted(u) {\n    font-weight: var(--font-weight-medium);\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-paragraph',\n  styleUrl: 'cura-paragraph.scss',\n  shadow: true,\n})\nexport class CuraParagraph {\n\n  /**\n   * Set size of body text.\n   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\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 = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '140%';\n\n  /**\n   * Host element <cura-paragraph>\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  setsizeClass() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = 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-regular': this.weights.regular,\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.setsizeClass()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraRadio extends Components.CuraRadio, HTMLElement {}
+export const CuraRadio: {
+  prototype: CuraRadio;
+  new (): CuraRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-radio.js

@@ -0,0 +1,154 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as formsSizes } from './cura-forms.definitions.js';
+import { d as defineCustomElement$3 } from './cura-label2.js';
+import { d as defineCustomElement$2 } from './cura-paragraph2.js';
+
+const curaRadioCss = "@charset \"UTF-8\";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box;}:host .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}:host .position.container{-ms-flex-direction:row;flex-direction:row}:host .position .label-wrapper{-ms-flex-pack:end;justify-content:end}:host .position .message{text-align:right}:host .position .label{-ms-flex-order:1;order:1}:host .info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}:host .control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}:host .radio{margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:50%;border:2px solid var(--primary-base-neutral-medium);background:var(--neutral-purewhite);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color 0.3s;transition:border-color 0.3s;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}:host .radio::after{content:\"\";background:var(--color-base-light);border-radius:50%;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;width:var(--size-after);height:var(--size-after)}:host .radio:focus{border-color:var(--info-base) !important}:host .success .radio{border-color:var(--success-base);background:var(--success-lighter)}:host .success .radio:hover{border-color:var(--success-base) !important}:host .success.checked .radio{border-color:var(--success-base)}:host .success.checked .radio::after{background:var(--success-base)}:host .success.checked .radio:hover{background:var(--success-lighter) !important;border-color:var(--success-base) !important}:host .success.checked .radio:hover::after{background:var(--success-base) !important}:host .error .radio{border-color:var(--error-base);background:var(--error-lighter)}:host .error .radio:hover{border-color:var(--error-base) !important}:host .error.checked .radio{border-color:var(--error-base)}:host .error.checked .radio::after{background:var(--error-base)}:host .error.checked .radio:hover{background:var(--error-lighter) !important;border-color:var(--error-base) !important}:host .error.checked .radio:hover::after{background:var(--error-base) !important}:host .checked .radio::after{opacity:1;background:var(--color-base)}:host .checked .radio{border-color:var(--color-dark)}:host .checked .radio:hover{border-color:var(--color-light) !important}:host .checked .radio:hover::after{background:var(--color-light)}:host .disabled .radio{background:var(--primary-base-neutral-white);border-color:var(--primary-darker-neutral-base);cursor:not-allowed}:host .disabled .radio::after{background:var(--neutral-lighter)}:host .disabled.checked .radio{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-darker-neutral-white) !important}:host .disabled.checked .radio::after{background:var(--primary-base-neutral-base) !important}:host :not(.disabled):not(.checked) .radio:hover{border-color:var(--primary-base-neutral-dark)}";
+
+const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.onchange = createEvent(this, "onchange", 7);
+    this.sizes = {
+      "large": { size: 20 },
+      "medium": { size: 14 },
+      "small": { size: 10 },
+    };
+    this.isDarkbackground = () => this.background === 'dark';
+    this.handleClick = () => {
+      if (this.disabled)
+        return;
+      this.checked = !this.checked;
+      this.onchange.emit({ value: this.value, checked: this.checked });
+    };
+    this.checked = false;
+    this.status = 'default';
+    this.disabled = false;
+    this.required = false;
+    this.label = '';
+    this.ontabindex = undefined;
+    this.position = 'left';
+    this.value = '';
+    this.name = '';
+    this.background = 'light';
+    this.size = 'medium';
+    this.color = 'accent';
+    this.styles = {};
+  }
+  sizeHandler() {
+    this.styles['--size-after'] = `${this.sizes[this.size].size}px`;
+    this.styles['--size'] = `${formsSizes[this.size].size}px`;
+    this.styles['--gap'] = `${formsSizes[this.size].gap}px`;
+  }
+  setColors() {
+    const colors = [
+      { name: '--info-base', background: 'info-base' },
+      { name: '--color-light', background: `${this.color}-light` },
+      { name: '--color-base', background: `${this.color}-base` },
+      { name: '--color-dark', background: `${this.color}-dark` },
+      { name: '--neutral-purewhite', background: 'neutral-purewhite' },
+      { name: '--success-lighter', background: 'success-lighter' },
+      { name: '--success-base', background: 'success-base' },
+      { name: '--error-lighter', background: 'error-lighter' },
+      { name: '--error-base', background: 'error-base' },
+      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },
+      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },
+      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },
+      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },
+      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },
+      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+      { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },
+      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },
+    ];
+    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background));
+  }
+  connectedCallback() {
+    this.sizeHandler();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes['container'] = true;
+    classes['checked'] = this.checked;
+    classes['disabled'] = this.disabled;
+    classes['position'] = this.position === 'right';
+    classes[this.status] = true;
+    return classes;
+  }
+  assignColor(type) {
+    if (this.disabled)
+      return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';
+    const statusColors = {
+      success: {
+        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
+        message: this.isDarkbackground() ? 'success-base' : 'success-dark'
+      },
+      error: {
+        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
+        message: this.isDarkbackground() ? 'error-base' : 'error-dark'
+      },
+      default: {
+        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
+        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
+      }
+    };
+    return statusColors[this.status][type];
+  }
+  render() {
+    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "info" }, h("div", { class: "label-wrapper" }, h("cura-label", { class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", null))), h("input", { type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "size": ["sizeHandler"],
+    "color": ["setColors"],
+    "background": ["setColors", "assignColor"]
+  }; }
+  static get style() { return curaRadioCss; }
+}, [1, "cura-radio", {
+    "checked": [1540],
+    "status": [1537],
+    "disabled": [516],
+    "required": [516],
+    "label": [513],
+    "ontabindex": [514],
+    "position": [513],
+    "value": [513],
+    "name": [513],
+    "background": [1],
+    "size": [1],
+    "color": [1],
+    "styles": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-radio", "cura-label", "cura-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-radio":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraRadio$1);
+      }
+      break;
+    case "cura-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "cura-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const CuraRadio = CuraRadio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraRadio, defineCustomElement };
+
+//# sourceMappingURL=cura-radio.js.map

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

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

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraSwitch extends Components.CuraSwitch, HTMLElement {}
+export const CuraSwitch: {
+  prototype: CuraSwitch;
+  new (): CuraSwitch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;