@rededor/cura 0.5.1 → 0.5.2

package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js

@@ -10,85 +10,117 @@ var __rest = (this && this.__rest) || function (s, e) {
     }
   return t;
 };
+import { getColorsWithDepths } from "../../../utils/utils";
+const colors = getColorsWithDepths();
+const renderCuraParagraph = (label, args) => {
+  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>
+  cura-paragraph { ${args.cssMarginBlock ? `
+    --margin-block: ${args.cssMarginBlock} !important;` : ``}${args.cssLineHeight ? `
+    --line-height: ${args.cssLineHeight} !important;` : ``}
+  }
+</style>
+
+` : '';
+  const block = `<cura-paragraph${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `
+  size="${args.size}"` : ``}${args.color ? `
+  color="${args.color}"` : ''}${args.spotColor ? `
+  spot-color="${args.spotColor}"` : ''}${args.marginBlock ? `
+  margin-block="${args.marginBlock}"` : ''}${args.lineHeight ? `
+  line-height="${args.lineHeight}"` : ''}>
+  ${label}
+</cura-paragraph>
+`;
+  return `${styles}${block}${block}${block}`;
+};
 export default {
   title: 'Componentes/Text/Paragraph',
   tags: ['autodocs'],
   render: (_a) => {
     var { label } = _a, args = __rest(_a, ["label"]);
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    return `<cura-paragraph
-  spot-color="${args.spotColor}"
-  size="${args.size}"
-  inverted="${args.inverted}"
-  color="${args.color}">
-  ${label}
-</cura-paragraph>
-<cura-paragraph
-  spot-color="${args.spotColor}"
-  size="${args.size}"
-  inverted="${args.inverted}"
-  color="${args.color}">
-  ${label}
-</cura-paragraph>
-<cura-paragraph
-  spot-color="${args.spotColor}"
-  size="${args.size}"
-  inverted="${args.inverted}"
-  color="${args.color}">
-  ${label}
-</cura-paragraph>`;
+    return renderCuraParagraph(label, args);
   },
   argTypes: {
     label: {
       control: 'text',
-      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      description: 'Define o texto do componente diretamente. São válidas todas as tags HTML pertinentes ao `<p>`.',
       name: 'Content'
     },
-    inverted: {
-      control: 'boolean',
-      description: 'Inverte cores do texto para aplicação em fundo escuro.',
+    size: {
+      control: { type: 'select' },
+      options: ['xsmall', 'small', 'medium', 'large'],
+      description: 'Define o tamanho do bloco de texto considerando `caption` (depreciado, use xsmall), `xsmall`, `small`, `regular` (depreciado, use medium), `medium` e `large` como valores válidos.',
       table: {
         category: 'Properties',
-        defaultValue: { summary: 'false' }
+        defaultValue: { summary: 'medium' }
       }
     },
-    size: {
+    color: {
       control: { type: 'select' },
-      options: ['caption', 'small', 'regular', 'large'],
-      description: 'Tamanhos disponíveis.',
+      options: ['', ...colors],
+      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',
       table: {
         category: 'Properties',
-        defaultValue: { summary: 'regular' }
+        defaultValue: { summary: 'Cor de texto padrão do tema' }
       }
     },
     spotColor: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
-      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      options: ['', ...colors],
+      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',
+      name: 'spot-color',
       table: {
         category: 'Properties',
-        defaultValue: { summary: 'primary' }
+        defaultValue: { summary: 'accent-dark' }
       }
     },
-    color: {
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
-      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+    marginBlock: {
+      control: 'text',
+      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',
+      name: 'margin-block',
       table: {
         category: 'Properties',
-        defaultValue: { summary: 'Theme font color.' }
+        defaultValue: { summary: '1.25em' }
       }
-    }
+    },
+    lineHeight: {
+      control: 'text',
+      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',
+      name: 'line-height',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '140%' }
+      }
+    },
+    cssMarginBlock: {
+      control: 'text',
+      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
+      name: '--margin-block',
+      table: {
+        category: 'CSS Properties',
+        defaultValue: { summary: '1.25em' }
+      }
+    },
+    cssLineHeight: {
+      control: 'text',
+      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
+      name: '--line-height',
+      table: {
+        category: 'CSS Properties',
+        defaultValue: { summary: '140%' }
+      }
+    },
   },
 };
 export const Paragraph = {
   args: {
-    label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non dapibus urna. Sed <a href="https://www.rededorsaoluiz.com.br" target="_blank">luctus tincidunt nibh</a>, eu tincidunt justo. <abbr title="Não faço idéia de que porra é essa">Curabitur</abbr> at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',
-    size: 'regular',
-    spotColor: 'primary',
-    inverted: false,
-    color: ''
+    label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non dapibus urna. Sed <a href="https://www.rededorsaoluiz.com.br" target="_blank">luctus tincidunt nibh</a>, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. <u>Quisque sed nibh in odio blandit mollis at quis dolor</u>. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',
+    size: 'medium',
+    color: '',
+    spotColor: '',
+    marginBlock: '',
+    lineHeight: '',
+    cssMarginBlock: '',
+    cssLineHeight: ''
   },
 };
 //# sourceMappingURL=cura-paragraph.stories.js.map

package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-paragraph.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;gBACK,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;WAChB,IAAI,CAAC,KAAK;IACjB,KAAK;;;gBAGO,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;WAChB,IAAI,CAAC,KAAK;IACjB,KAAK;;;gBAGO,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;WAChB,IAAI,CAAC,KAAK;IACjB,KAAK;kBACS,CAAC;EACjB,CAAC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,qFAAqF;MAClG,IAAI,EAAE,SAAS;KAChB;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;MACjD,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MAC7F,WAAW,EAAE,kEAAkE;MAC/E,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MAC7F,WAAW,EAAE,kEAAkE;MAC/E,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAC;OAC9C;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;EACvB,IAAI,EAAE;IACJ,KAAK,EAAE,qoBAAqoB;IAC5oB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;GACV;CACF,CAAC","sourcesContent":["\nexport default {\n  title: 'Componentes/Text/Paragraph',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-paragraph\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\"\n  color=\"${args.color}\">\n  ${label}\n</cura-paragraph>\n<cura-paragraph\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\"\n  color=\"${args.color}\">\n  ${label}\n</cura-paragraph>\n<cura-paragraph\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\"\n  color=\"${args.color}\">\n  ${label}\n</cura-paragraph>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Content'\n    },\n    inverted: {\n      control: 'boolean',\n      description: 'Inverte cores do texto para aplicação em fundo escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['caption', 'small', 'regular', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'Theme font color.'}\n      }\n    }\n  },\n};\n\nexport const Paragraph = {\n  args: {\n    label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non dapibus urna. Sed <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">luctus tincidunt nibh</a>, eu tincidunt justo. <abbr title=\"Não faço idéia de que porra é essa\">Curabitur</abbr> at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',\n    size: 'regular',\n    spotColor: 'primary',\n    inverted: false,\n    color: ''\n  },\n};\n"]}
+{"version":3,"file":"cura-paragraph.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraParagraph = (label: string, args: any) => {\n  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>\n  cura-paragraph { ${args.cssMarginBlock ? `\n    --margin-block: ${args.cssMarginBlock} !important;` : ``}${ args.cssLineHeight ? `\n    --line-height: ${args.cssLineHeight} !important;` : ``}\n  }\n</style>\n\n` : '';\n  const block = `<cura-paragraph${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `\n  size=\"${args.size}\"` : ``}${args.color ? `\n  color=\"${args.color}\"` : ''}${args.spotColor ? `\n  spot-color=\"${args.spotColor}\"` : ''}${args.marginBlock ? `\n  margin-block=\"${args.marginBlock}\"` : ''}${args.lineHeight ? `\n  line-height=\"${args.lineHeight}\"` : ''}>\n  ${label}\n</cura-paragraph>\n`;\n  return `${styles}${block}${block}${block}`;\n}\n\nexport default {\n  title: 'Componentes/Text/Paragraph',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraParagraph(label, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Define o texto do componente diretamente. São válidas todas as tags HTML pertinentes ao `<p>`.',\n      name: 'Content'\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['xsmall', 'small', 'medium', 'large'],\n      description: 'Define o tamanho do bloco de texto considerando `caption` (depreciado, use xsmall), `xsmall`, `small`, `regular` (depreciado, use medium), `medium` e `large` como valores válidos.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'Cor de texto padrão do tema'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',\n      name: 'spot-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent-dark'}\n      }\n    },\n    marginBlock: {\n      control: 'text',\n      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',\n      name: 'margin-block',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    lineHeight: {\n      control: 'text',\n      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',\n      name: 'line-height',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '140%'}\n      }\n    },\n    cssMarginBlock: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--margin-block',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    cssLineHeight: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--line-height',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '140%'}\n      }\n    },\n  },\n};\n\nexport const Paragraph = {\n  args: {\n    label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non dapibus urna. Sed <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">luctus tincidunt nibh</a>, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. <u>Quisque sed nibh in odio blandit mollis at quis dolor</u>. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',\n    size: 'medium',\n    color: '',\n    spotColor: '',\n    marginBlock: '',\n    lineHeight: '',\n    cssMarginBlock: '',\n    cssLineHeight: ''\n  },\n};\n"]}

package/dist/collection/index.js

@@ -1,2 +1,4 @@
-export {};
+export function CuraInit(options, w = window) {
+  w.CuraInit = options;
+}
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"","sourcesContent":["export { Components, JSX } from './components';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,MAAM,UAAU,QAAQ,CAAC,OAAmB,EAAE,CAAC,GAAG,MAAM;EACtD,CAAC,CAAC,QAAQ,GAAG,OAAO,CAAC;AACvB,CAAC","sourcesContent":["export { Components, JSX } from './components';\nimport CuraAPI from './api/cura-api';\nimport { CuraConfig } from './api/cura-api.type';\n\ndeclare global {\n  export interface Window {\n    CuraAPI?: CuraAPI,\n    CuraInit?: CuraConfig\n  }\n}\n\nexport function CuraInit(options: CuraConfig, w = window) {\n  w.CuraInit = options;\n}\n"]}

package/dist/components/cura-accordion-item.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './cura-icon2.js';
 
-const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item .label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .accordion-item .label::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item .label .label-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}:host .accordion-item .label .label-container cura-icon{margin-right:4px}:host .accordion-item .label .label-container:hover{color:var(--color-light)}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item .label .label-container:active{color:var(--color-dark)}:host .accordion-item .label .label-container:active cura-icon{--color:var(--icon-color-dark) !important}:host .accordion-item .content{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}:host .accordion-item .content .content-wrapper{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}:host .accordion-item.active .label .label-container{color:var(--color-active-base)}:host .accordion-item.active .label .label-container:hover{color:var(--color-active-light)}:host .accordion-item.active .label .label-container:hover cura-icon{--color:var(--icon-color-active-light) !important}:host .accordion-item.active .label .label-container:active{color:var(--color-active-dark)}:host .accordion-item.active .label .label-container:active cura-icon{--color:var(--icon-color-active-dark) !important}:host .accordion-item.active .content{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}:host .accordion-item.inverted .label .label-container{color:var(--neutral-lighter)}:host .accordion-item.inverted .label .label-container:hover{color:var(--color-lighter)}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-lighter) !important}:host .accordion-item.inverted .label .label-container:active{color:var(--color-light)}:host .accordion-item.inverted .label .label-container:active cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item.active.inverted .label .label-container{color:var(--neutral-purewhite)}:host .accordion-item.active.inverted .label .label-container:hover{color:var(--color-active-lighter)}:host .accordion-item.active.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-active-lighter) !important}:host .accordion-item.active.inverted .label .label-container:active{color:var(--color-active-light)}:host .accordion-item.active.inverted .label .label-container:active cura-icon{--color:var(--icon-color-active-light) !important}@media (min-width: 768px) and (max-width: 1365px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 1366px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
+const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item .label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .accordion-item .label::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item .label .label-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}:host .accordion-item .label .label-container cura-icon{margin-right:4px}:host .accordion-item .label .label-container:hover{color:var(--color-light)}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item .label .label-container:active{color:var(--color-dark)}:host .accordion-item .label .label-container:active cura-icon{--color:var(--icon-color-dark) !important}:host .accordion-item .content{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}:host .accordion-item .content .content-wrapper{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}:host .accordion-item.active .label .label-container{color:var(--color-active-base)}:host .accordion-item.active .label .label-container:hover{color:var(--color-active-light)}:host .accordion-item.active .label .label-container:hover cura-icon{--color:var(--icon-color-active-light) !important}:host .accordion-item.active .label .label-container:active{color:var(--color-active-dark)}:host .accordion-item.active .label .label-container:active cura-icon{--color:var(--icon-color-active-dark) !important}:host .accordion-item.active .content{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}:host .accordion-item.inverted .label .label-container{color:var(--neutral-lighter)}:host .accordion-item.inverted .label .label-container:hover{color:var(--color-lighter)}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-lighter) !important}:host .accordion-item.inverted .label .label-container:active{color:var(--color-light)}:host .accordion-item.inverted .label .label-container:active cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item.active.inverted .label .label-container{color:var(--neutral-purewhite)}:host .accordion-item.active.inverted .label .label-container:hover{color:var(--color-active-lighter)}:host .accordion-item.active.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-active-lighter) !important}:host .accordion-item.active.inverted .label .label-container:active{color:var(--color-active-light)}:host .accordion-item.active.inverted .label .label-container:active cura-icon{--color:var(--icon-color-active-light) !important}@media (min-width: 769px) and (max-width: 992px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 993px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
 
 const CuraAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordionItem extends HTMLElement {
   constructor() {

package/dist/components/cura-accordion-item.js.map

@@ -1 +1 @@
-{"file":"cura-accordion-item.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6zGAA6zG;;MCO70GA,mBAAiB;;;;;iBAKW,EAAE;oBAMP,EAAE;oBACF,MAAM;qBACL,IAAI;qBAMJ,EAAE;2BACI,EAAE;qBAKL,MAAM;kBAEc,KAAK;kBAE7C,EAAE;;EAEpB,YAAY;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,GAAG,iBAAiB,GAAG,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;IAC1E,MAAM,eAAe,GAAG,QAAQ,GAAG,mBAAmB,GAAG,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;IACxF,OAAO,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,SAAS,CAAC;GAClD;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACjD,OAAO,OAAO,CAAC;GAChB;EAED,kBAAkB,CAAC,CAAQ;IACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IACzD,WAAK,KAAK,EAAC,iBAAiB,IAC1B,gBAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,iBAAW,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,eAAa,CACT,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAccordionItem"],"sources":["./src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","./src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n\n  .accordion-item {\n    width: 100%;\n\n    .label {\n      display: flex;\n      flex-direction: column;\n      &::before {\n        content: \"\";\n        display: block;\n        border-top: solid 1px var(--neutral-base);\n        width: 100%;\n      }\n      .label-container {\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        align-items: center;\n        gap: calc(var(--base-spacing) * 2px);\n        min-height: 40px;\n        word-break: break-word;\n        cursor: pointer;\n        font-size: 1.14em;\n        font-weight: var(--font-weight-regular);\n        color: var(--color-base);\n        padding: 0px;\n\n        cura-icon {\n          margin-right: 4px;\n        }\n\n        &:hover {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-dark);\n          cura-icon {\n            --color: var(--icon-color-dark) !important;\n          }\n        }\n      }\n    }\n\n    .content {\n      font-size: 1em;\n      overflow: hidden;\n      max-height: 0;\n      transition: max-height .25s ease;\n      .content-wrapper {\n        padding: calc(var(--base-spacing) * 2px) 0px;\n        border-top: solid 1px var(--neutral-base);\n      }\n    }\n\n    &.active {\n      .label .label-container {\n        color: var(--color-active-base);\n        &:hover {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-dark);\n          cura-icon {\n            --color: var(--icon-color-active-dark) !important;\n          }\n        }\n      }\n\n      .content {\n        max-height: 200vh;\n        overflow-y: auto;\n        transition: max-height .5s ease .14s;\n      }\n    }\n\n    &.inverted {\n      .label .label-container {\n        color: var(--neutral-lighter);\n        &:hover {\n          color: var(--color-lighter);\n          cura-icon {\n            --color: var(--icon-color-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n      }\n    }\n\n    &.active.inverted {\n      .label .label-container {\n        color: var(--neutral-purewhite);\n        &:hover {\n          color: var(--color-active-lighter);\n          cura-icon {\n            --color: var(--icon-color-active-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n      }\n    }\n  }\n\n  @include medium-only() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n\n  @include large-up() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n}\n","import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-accordion-item.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,2zGAA2zG;;MCO30GA,mBAAiB;;;;;iBAKW,EAAE;oBAMP,EAAE;oBACF,MAAM;qBACL,IAAI;qBAMJ,EAAE;2BACI,EAAE;qBAKL,MAAM;kBAEc,KAAK;kBAE7C,EAAE;;EAEpB,YAAY;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,GAAG,iBAAiB,GAAG,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;IAC1E,MAAM,eAAe,GAAG,QAAQ,GAAG,mBAAmB,GAAG,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;IACxF,OAAO,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,SAAS,CAAC;GAClD;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACjD,OAAO,OAAO,CAAC;GAChB;EAED,kBAAkB,CAAC,CAAQ;IACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IACzD,WAAK,KAAK,EAAC,iBAAiB,IAC1B,gBAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,iBAAW,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,eAAa,CACT,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAccordionItem"],"sources":["./src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","./src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n\n  .accordion-item {\n    width: 100%;\n\n    .label {\n      display: flex;\n      flex-direction: column;\n      &::before {\n        content: \"\";\n        display: block;\n        border-top: solid 1px var(--neutral-base);\n        width: 100%;\n      }\n      .label-container {\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        align-items: center;\n        gap: calc(var(--base-spacing) * 2px);\n        min-height: 40px;\n        word-break: break-word;\n        cursor: pointer;\n        font-size: 1.14em;\n        font-weight: var(--font-weight-regular);\n        color: var(--color-base);\n        padding: 0px;\n\n        cura-icon {\n          margin-right: 4px;\n        }\n\n        &:hover {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-dark);\n          cura-icon {\n            --color: var(--icon-color-dark) !important;\n          }\n        }\n      }\n    }\n\n    .content {\n      font-size: 1em;\n      overflow: hidden;\n      max-height: 0;\n      transition: max-height .25s ease;\n      .content-wrapper {\n        padding: calc(var(--base-spacing) * 2px) 0px;\n        border-top: solid 1px var(--neutral-base);\n      }\n    }\n\n    &.active {\n      .label .label-container {\n        color: var(--color-active-base);\n        &:hover {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-dark);\n          cura-icon {\n            --color: var(--icon-color-active-dark) !important;\n          }\n        }\n      }\n\n      .content {\n        max-height: 200vh;\n        overflow-y: auto;\n        transition: max-height .5s ease .14s;\n      }\n    }\n\n    &.inverted {\n      .label .label-container {\n        color: var(--neutral-lighter);\n        &:hover {\n          color: var(--color-lighter);\n          cura-icon {\n            --color: var(--icon-color-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n      }\n    }\n\n    &.active.inverted {\n      .label .label-container {\n        color: var(--neutral-purewhite);\n        &:hover {\n          color: var(--color-active-lighter);\n          cura-icon {\n            --color: var(--icon-color-active-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n      }\n    }\n  }\n\n  @include medium-only() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n\n  @include large-up() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n}\n","import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-display.js

@@ -1,71 +1,77 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaDisplayCss = ":host{display:block;font-size:var(--font-size);text-transform:uppercase}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:4.285em;font-weight:var(--font-weight-black);color:var(--color-body);line-height:120%;letter-spacing:-4%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:6.21em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3em;font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.92em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:7.07em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.428em}}@media (min-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:6.14em;line-height:125%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:8.857em;letter-spacing:-6%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:4.285em;letter-spacing:-2%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}: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 curaDisplayCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:3.429em}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;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-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}: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 CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.theme = window.CuraAPI.theme;
     this.level = 1;
-    this.size = 'regular';
-    this.inverted = false;
-    this.spotColor = 'primary';
+    this.spotColor = 'accent-dark';
+    this.color = undefined;
+    this.marginBlock = '1.25em';
+    this.lineHeight = '120%';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
   }
   connectedCallback() {
-    this.weights = window.CuraAPI.theme.fonts.getWeights();
     this.setFontProperties();
     this.setColors();
   }
-  getClasses() {
-    const classes = {};
-    classes[this.size.toLowerCase()] = true;
-    return classes;
-  }
   setFontProperties() {
+    this.weights = this.theme.fonts.getWeights();
+    this.fontSizeBase = this.theme.fonts.getSize();
     this.styles = {
       '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
       '--font-size': window.CuraAPI.theme.fonts.getSize(),
-      '--font-weight-bold': this.weights.bold,
-      '--font-weight-black': this.weights.black
+      '--font-weight-bold': this.weights.bold
     };
-    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
-    this.setHostProperty('--block-margin', '0.5em');
   }
-  setColors() {
-    const fontColor = this.inverted
-      ? window.CuraAPI.theme.colors.getColor('neutral-white')
-      : window.CuraAPI.theme.fonts.getColor();
-    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = this.inverted
-      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
+  hostCSSProperties() {
+    return {
+      '--margin-block': this.marginBlock,
+      '--font-size-base': this.fontSizeBase,
+      '--line-height': this.lineHeight
+    };
   }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
+  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}`) });
   }
   getHeadingTag() {
     const tags = {
-      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
+      '1': h("h1", { style: this.styles }, h("slot", null)),
+      '2': h("h2", { style: this.styles }, h("slot", null)),
+      '3': h("h3", { style: this.styles }, h("slot", null)),
+      '4': h("h4", { style: this.styles }, h("slot", null)),
+      '5': h("h5", { style: this.styles }, h("slot", null)),
+      '6': h("h6", { style: this.styles }, h("slot", null)),
+      'default': h("h1", { style: this.styles }, h("slot", null))
     };
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, null, this.getHeadingTag()));
+    return (h(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
   }
   get host() { return this; }
+  static get watchers() { return {
+    "color": ["handleChangeColor"],
+    "spotColor": ["handleChangeColor"]
+  }; }
   static get style() { return curaDisplayCss; }
 }, [1, "cura-display", {
     "level": [514],
-    "size": [513],
-    "inverted": [516],
-    "spotColor": [513, "spot-color"]
+    "spotColor": [513, "spot-color"],
+    "color": [1],
+    "marginBlock": [513, "margin-block"],
+    "lineHeight": [513, "line-height"],
+    "styles": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"cura-display.js","mappings":";;AAAA,MAAM,cAAc,GAAG,oxDAAoxD;;MCO9xDA,aAAW;;;;;iBAMS,CAAC;gBAKF,SAAS;oBAKL,KAAK;qBAKJ,SAAS;;EAa3C,iBAAiB;IAChB,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,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAI,IAAI,CAAC;IACzC,OAAO,OAAO,CAAC;GAChB;EAED,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;MAChE,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;MACvC,qBAAqB,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;KAC1C,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,OAAO,CAAC,CAAC;GACjD;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;QAC3B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;QACrD,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC1C,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAClG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,QAAQ;QACvC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,UAAU,CAAC;QACjE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC;GACpE;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC1C;EAED,aAAa;IACX,MAAM,IAAI,GAAG;MACX,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;MACzE,SAAS,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;KAChF,CAAC;IACF,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;GACjD;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACD,IAAI,CAAC,aAAa,EAAE,CACjB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDisplay"],"sources":["./src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","./src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n  font-size: var(--font-size);\n  text-transform: uppercase;\n\n  h1, h2, h3, h4, h5, h6 {\n    font-family: var(--font-family);\n    font-size: 4.285em;\n    font-weight: var(--font-weight-black);\n    color: var(--color-body);\n    line-height: 120%;\n    letter-spacing: -4%;\n    margin-block-start: var(--block-margin);\n    margin-block-end: var(--block-margin);\n\n    &.large {\n      font-size:6.21em;\n    }\n\n    &.small {\n      font-size: 3em;\n      font-weight: var(--font-weight-bold);\n    }\n\n  }\n\n  @include medium-only() {\n    h1, h2, h3, h4, h5, h6 { \n      font-size: 4.92em;\n\n      &.large {\n        font-size: 7.07em;\n      }\n\n      &.small {\n        font-size: 3.428em;\n      }\n\n    }\n  }\n\n  @include large-up() {\n    h1, h2, h3, h4, h5, h6 { \n      font-size: 6.14em;\n      line-height: 125%;\n\n      &.large {\n        font-size: 8.857em;\n        letter-spacing: -6%;\n      }\n\n      &.small {\n        font-size: 4.285em;\n        letter-spacing: -2%;\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-bold);\n    color: var(--color-link);\n    text-decoration: none;\n    text-underline-offset: 10%;\n    cursor: pointer;\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","import { Component, Host, h, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'cura-display',\n  styleUrl: 'cura-display.scss',\n  shadow: true,\n})\nexport class CuraDisplay {\n\n  /**\n   * Heading level for semantics.\n   * Values: 1(default)-6.\n   */\n  @Prop({reflect: true}) level = 1;\n  /**\n  * Heading style size.\n  * Values: small | regular(default) | large.\n  */\n  @Prop({reflect: true}) size = '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   /**\n    * Host element <cura-heading>\n    */\n   @Element() host: HTMLElement;\n \n   /**\n    * Internal Props\n    */\n   weights: any;\n   styles: any;\n\n   connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.size.toLowerCase()] =  true;\n    return classes;\n  }\n\n  setFontProperties() {\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-bold': this.weights.bold,\n      '--font-weight-black': this.weights.black\n    }\n    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n    this.setHostProperty('--block-margin', '0.5em');\n  }\n\n  setColors() {\n    const fontColor = this.inverted \n      ? window.CuraAPI.theme.colors.getColor('neutral-white') \n      : window.CuraAPI.theme.fonts.getColor();\n    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');\n    this.styles['--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  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n      '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n      '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n      '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n      '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n      '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n      'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-display.js","mappings":";;AAAA,MAAM,cAAc,GAAG,k/BAAk/B;;MCO5/BA,aAAW;;;;;IA+CtB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;iBAzCyB,CAAC;qBAMpB,aAAa;;uBAiBX,QAAQ;sBAMT,MAAM;kBAaxB,EAAE;;EA3BpB,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EA2BD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,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,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;MAChE,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,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,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,aAAa;IACX,MAAM,IAAI,GAAG;MACX,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,SAAS,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;KACtD,CAAC;IACF,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;GACjD;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,IACjC,IAAI,CAAC,aAAa,EAAE,CACjB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDisplay"],"sources":["./src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","./src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n  font-size: var(--font-size-base);\n\n  h1, h2, h3, h4, h5, h6 {\n    font-family: var(--font-family);\n    font-size: 3em;\n    font-weight: var(--font-weight-bold);\n    color: var(--color-body);\n    line-height: var(--line-height);\n    margin-block: var(--margin-block);\n    letter-spacing: 0px;\n  }\n\n  @include medium-large() {\n    h1, h2, h3, h4, h5, h6 {\n      font-size: 3.429em;\n    }\n  }\n\n  @include xlarge-only() {\n    h1, h2, h3, h4, h5, h6 {\n      font-size: 4.286em;\n      line-height: calc(var(--line-height) + 5%);\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-bold);\n    color: var(--color-link);\n    text-underline-offset: 10%;\n    cursor: pointer;\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","import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-display',\n  styleUrl: 'cura-display.scss',\n  shadow: true,\n})\nexport class CuraDisplay {\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1(default) to 6.\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\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 = '120%';\n\n  /**\n   * Host element <cura-display>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  theme = window.CuraAPI.theme;\n  @State() styles = {};\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-bold': this.weights.bold\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  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  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles}><slot></slot></h1>,\n      '2': <h2 style={this.styles}><slot></slot></h2>,\n      '3': <h3 style={this.styles}><slot></slot></h3>,\n      '4': <h4 style={this.styles}><slot></slot></h4>,\n      '5': <h5 style={this.styles}><slot></slot></h5>,\n      '6': <h6 style={this.styles}><slot></slot></h6>,\n      'default': <h1 style={this.styles}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-heading.js

@@ -1,20 +1,26 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaHeadingCss = ":host{display:block;font-size:var(--font-size)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.71em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:130%;letter-spacing:0%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.07em;letter-spacing:-2%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:150%;letter-spacing:0%}:host h1.small.bold-weight,:host h2.small.bold-weight,:host h3.small.bold-weight,:host h4.small.bold-weight,:host h5.small.bold-weight,:host h6.small.bold-weight{font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}}@media (min-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:135%;letter-spacing:-2%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.92em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.71em;line-height:160%;letter-spacing:0%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}: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 curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.714em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.857em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-medium)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}: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}:host ::slotted(i),:host ::slotted(em){font-weight:var(--font-weight-medium)}";
 
 const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.theme = window.CuraAPI.theme;
     this.level = 1;
-    this.size = 'regular';
+    this.size = 'medium';
     this.weight = 'regular';
-    this.inverted = false;
-    this.spotColor = 'primary';
+    this.spotColor = 'accent-dark';
+    this.color = undefined;
+    this.marginBlock = '1.25em';
+    this.lineHeight = '130%';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
   }
   connectedCallback() {
-    this.weights = window.CuraAPI.theme.fonts.getWeights();
     this.setFontProperties();
     this.setColors();
   }
@@ -25,28 +31,28 @@ const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends
     return classes;
   }
   setFontProperties() {
+    this.weights = this.theme.fonts.getWeights();
+    this.fontSizeBase = this.theme.fonts.getSize();
     this.styles = {
       '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
-      '--font-size': window.CuraAPI.theme.fonts.getSize(),
       '--font-weight-regular': this.weights.regular,
       '--font-weight-medium': this.weights.medium,
       '--font-weight-bold': this.weights.bold,
       '--font-weight-black': this.weights.black
     };
-    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
-    this.setHostProperty('--block-margin', '0.5em');
   }
-  setColors() {
-    const fontColor = this.inverted
-      ? window.CuraAPI.theme.colors.getColor('neutral-white')
-      : window.CuraAPI.theme.fonts.getColor();
-    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = this.inverted
-      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
+  hostCSSProperties() {
+    return {
+      '--margin-block': this.marginBlock,
+      '--font-size-base': this.fontSizeBase,
+      '--line-height': this.lineHeight
+    };
   }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
+  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}`) });
   }
   getHeadingTag() {
     const tags = {
@@ -61,16 +67,23 @@ const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, null, this.getHeadingTag()));
+    return (h(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
   }
   get host() { return this; }
+  static get watchers() { return {
+    "color": ["handleChangeColor"],
+    "spotColor": ["handleChangeColor"]
+  }; }
   static get style() { return curaHeadingCss; }
 }, [1, "cura-heading", {
     "level": [514],
     "size": [513],
     "weight": [513],
-    "inverted": [516],
-    "spotColor": [513, "spot-color"]
+    "spotColor": [513, "spot-color"],
+    "color": [1],
+    "marginBlock": [513, "margin-block"],
+    "lineHeight": [513, "line-height"],
+    "styles": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {