@rededor/cura 0.5.2 → 0.5.3

package/dist/components/cura-label.js

@@ -1,87 +1,4 @@
-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$1 = /*@__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$1() {
-  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$1);
-      }
-      break;
-  } });
-}
+import { C as CuraLabel$1, d as defineCustomElement$1 } from './cura-label2.js';
 
 const CuraLabel = CuraLabel$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"cura-label.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6/BAA6/B;;MCOrgCA,WAAS;;;;;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":["CuraLabel"],"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-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-paragraph.js

@@ -1,85 +1,4 @@
-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$1 = /*@__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$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,w1DAAw1D;;MCOp2DA,eAAa;;;;;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":["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-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}
+{"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":";;;;;AAAA,MAAM,YAAY,GAAG,i5GAAi5G;;MCQz5GA,WAAS;;;;;;IA6DpB,UAAK,GAAG;MACN,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACrB,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtB,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;KACtB,CAAC;IAGF,qBAAgB,GAAG,MAAM,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC;IA2CpD,gBAAW,GAAG;MACZ,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO;MAE1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KAClE,CAAC;mBA/GyD,KAAK;kBAKkB,SAAS;oBAI9C,KAAK;oBAIL,KAAK;iBAIT,EAAE;;oBASW,MAAM;iBAInB,EAAE;gBAIH,EAAE;sBAKH,OAAO;gBAKD,QAAQ;iBAIrC,QAAQ;kBAEN,EAAE;;EAgBpB,WAAW;IACT,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAA;IAC/D,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAA;IACzD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAA;GACxD;EAKD,SAAS;IAEP,MAAM,MAAM,GAAG;MACb,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE;MAChD,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,QAAQ,EAAE;MAC5D,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE;MAC1D,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE;MAC1D,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE,mBAAmB,EAAE;MAChE,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE;MAC5D,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,EAAE;MACtD,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,eAAe,EAAE;MACxD,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE;MAClD,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,gBAAgB,EAAE;MAClH,EAAE,IAAI,EAAE,8BAA8B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,eAAe,EAAE;MAChH,EAAE,IAAI,EAAE,gCAAgC,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,gBAAgB,GAAG,eAAe,EAAE;MACpH,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,gBAAgB,GAAG,cAAc,EAAE;MAClH,EAAE,IAAI,EAAE,6BAA6B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,cAAc,EAAE;MAC9G,EAAE,IAAI,EAAE,6BAA6B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,cAAc,EAAE;MAC9G,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,gBAAgB,EAAE;MAClH,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,cAAc,EAAE;MACtG,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,YAAY,GAAG,YAAY,EAAE;KACjG,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAA;GAC1G;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAA;IAClB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EASD,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;IAClC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;IACpC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;IAChD,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAE5B,OAAO,OAAO,CAAC;GAChB;EAGD,WAAW,CAAC,IAAyB;IACnC,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO,IAAI,CAAC,gBAAgB,EAAE,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;IAExF,MAAM,YAAY,GAAG;MACnB,OAAO,EAAE;QACP,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,iBAAiB,GAAG,gBAAgB;QACrE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,cAAc;OACnE;MACD,KAAK,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,eAAe,GAAG,gBAAgB;QACnE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,YAAY,GAAG,YAAY;OAC/D;MACD,OAAO,EAAE;QACP,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,eAAe,GAAG,eAAe;QAClE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,iBAAiB,GAAG,cAAc;OACtE;KACF,CAAC;IAEF,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;GACxC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,eAAe,IACxB,kBACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,QAAQ,EACjD,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAC/B,IAAI,CAAC,KAAK,CACA,EACZ,IAAI,CAAC,QAAQ,IAAI,sBAAgB,UAAU,EAAC,IAAI,EAAC,WAAW,EAAC,GAAG,EAAC,KAAK,EAAC,YAAY,SAAqB,CACrG,EACN,kBACE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,EAClC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,IACf,eAAa,CACF,CACT,EACN,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,EAC/C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACE,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}