@rededor/cura 0.3.4-alpha.1 → 0.3.4

package/dist/collection/components/cura-icons-view/cura-icons-view.js

@@ -4,15 +4,16 @@ export class CuraIconsView {
   constructor() {
     this.sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];
     this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
-    this.selected = '360';
     this.setSelected = (icon) => {
       this.selected = icon;
     };
+    this.selected = '360';
   }
   render() {
     return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
   }
   static get is() { return "cura-icons-view"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-icons-view.scss"]
@@ -29,3 +30,4 @@ export class CuraIconsView {
     };
   }
 }
+//# sourceMappingURL=cura-icons-view.js.map

package/dist/collection/components/cura-icons-view/cura-icons-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-icons-view.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAO1E,MAAM,OAAO,aAAa;;IAExB,UAAK,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAC9C,WAAM,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IAG9F,gBAAW,GAAG,CAAC,IAAI,EAAE,EAAE;MACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC,CAAA;oBAJmB,KAAK;;EAMzB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,YAAY;QACrB,cAAM,IAAI,CAAC,QAAQ,CAAO;QAC1B,WAAK,KAAK,EAAC,WAAW,IAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CAEvB,WAAK,KAAK,EAAC,MAAM;UACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAc;UACxD,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;QACN,WAAK,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CAEvB,WAAK,KAAK,EAAC,MAAM;UACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,eAAe,GAAa;UAC9E,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;QACN,WAAK,KAAK,EAAC,WAAW;UAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAE,KAAK,CAAC,EAAE,CACzB,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAc;YAC1D,gBAAQ,KAAK,CAAS,CAClB,CACP;UACD,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,SAAa;YACrD,2BAAqB,CACjB,CACF,CACF;MACN,WAAK,KAAK,EAAC,OAAO,IACd,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC/B,WAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACrD,iBAAW,IAAI,EAAE,IAAI,GAAc;QACnC,gBAAO,IAAI,CAAQ,CACf,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = '360';\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <h4>{ this.selected }</h4>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes\">\n            { this.colors.map( color =>\n              <div class=\"size\">\n                <cura-icon name={this.selected} color={color}></cura-icon>\n                <span>{ color }</span>\n              </div>\n            )}\n            <div class=\"size\">\n              <cura-icon name={this.selected} disabled></cura-icon>\n              <span>Disabled</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class=\"icon\" onClick={() => this.setSelected(icon)}>\n              <cura-icon name={icon}></cura-icon>\n              <span>{icon}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-page-template/cura-page-template.css

@@ -19,86 +19,86 @@
  * Responsive media for xlarge only.
  * Use: @include xlarge-only() { ... }
  */
-.cura-template {
+:host {
   display: block;
 }
-.cura-template .grid-template {
+:host .grid-template {
   display: grid;
   grid-template-rows: auto;
   grid-template-columns: auto;
   grid-template-areas: "sub-header" "header" "pre-content" "content-container" "post-body" "footer" "sub-footer";
 }
-.cura-template .grid-template #sub-header {
+:host .grid-template #sub-header {
   grid-area: sub-header;
 }
-.cura-template .grid-template #header {
+:host .grid-template #header {
   grid-area: header;
 }
-.cura-template .grid-template #pre-content {
+:host .grid-template #pre-content {
   grid-area: pre-content;
 }
-.cura-template .grid-template #content-container {
+:host .grid-template #content-container {
   grid-area: content-container;
 }
-.cura-template .grid-template #post-body {
+:host .grid-template #post-body {
   grid-area: post-body;
 }
-.cura-template .grid-template #footer {
+:host .grid-template #footer {
   grid-area: footer;
 }
-.cura-template .grid-template #sub-footer {
+:host .grid-template #sub-footer {
   grid-area: sub-footer;
 }
 @media (max-width: 360px) {
-  .cura-template .grid-template {
+  :host .grid-template {
     padding: 0px;
   }
 }
 @media (min-width: 768px) and (max-width: 1365px) {
-  .cura-template .grid-template {
+  :host .grid-template {
     padding: 0px;
   }
 }
 @media (min-width: 1366px) and (max-width: 1919px) {
-  .cura-template .grid-template {
+  :host .grid-template {
     padding: 0px;
   }
-  .cura-template .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
+  :host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
     margin-right: calc(var(--spacing) * 5px);
   }
-  .cura-template .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
+  :host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
     margin-left: calc(var(--spacing) * 5px);
   }
-  .cura-template .grid-template #content-container {
+  :host .grid-template #content-container {
     display: flex;
   }
-  .cura-template .grid-template #content-container #content {
+  :host .grid-template #content-container #content {
     flex-grow: 1;
   }
-  .cura-template .grid-template #content-container #sidebar-left, .cura-template .grid-template #content-container #sidebar-right {
+  :host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right {
     max-width: 20%;
   }
 }
 @media (min-width: 1920px) {
-  .cura-template .grid-template {
+  :host .grid-template {
     padding: 0px;
   }
-  .cura-template .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
+  :host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
     margin-right: calc(var(--spacing) * 7px);
   }
-  .cura-template .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
+  :host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
     margin-left: calc(var(--spacing) * 7px);
   }
-  .cura-template .grid-template #content-container {
+  :host .grid-template #content-container {
     display: flex;
   }
-  .cura-template .grid-template #content-container #content {
+  :host .grid-template #content-container #content {
     flex-grow: 1;
   }
-  .cura-template .grid-template #content-container #sidebar-left, .cura-template .grid-template #content-container #sidebar-right {
+  :host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right {
     max-width: 20%;
   }
-  .cura-template .grid-template #content-container.centered {
+  :host .grid-template #content-container.centered {
     max-width: 1920px;
     justify-self: center;
   }

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

@@ -14,9 +14,10 @@ export class CuraPageTemplate {
     return classes;
   }
   render() {
-    return (h(Host, { class: "cura-template" }, h("div", { style: this.styles, class: "grid-template" }, h("div", { id: "sub-header" }, h("slot", { name: 'sub-header' })), h("div", { id: "header" }, h("slot", { name: 'header' })), h("div", { id: "pre-content" }, h("slot", { name: 'pre-content' })), h("div", { id: "content-container", class: this.getClasses() }, h("div", { id: "sidebar-left" }, h("slot", { name: 'sidebar-left' })), h("div", { id: "content" }, h("slot", { name: "content" }), h("slot", null)), h("div", { id: "sidebar-right" }, h("slot", { name: 'sidebar-right' }))), h("div", { id: "post-body" }, h("slot", { name: 'post-body' })), h("div", { id: "footer" }, h("slot", { name: 'footer' })), h("div", { id: "sub-footer" }, h("slot", { name: 'sub-footer' })))));
+    return (h(Host, null, h("div", { style: this.styles, class: "grid-template" }, h("div", { id: "sub-header" }, h("slot", { name: 'sub-header' })), h("div", { id: "header" }, h("slot", { name: 'header' })), h("div", { id: "pre-content" }, h("slot", { name: 'pre-content' })), h("div", { id: "content-container", class: this.getClasses() }, h("div", { id: "sidebar-left" }, h("slot", { name: 'sidebar-left' })), h("div", { id: "content" }, h("slot", { name: "content" }), h("slot", null)), h("div", { id: "sidebar-right" }, h("slot", { name: 'sidebar-right' }))), h("div", { id: "post-body" }, h("slot", { name: 'post-body' })), h("div", { id: "footer" }, h("slot", { name: 'footer' })), h("div", { id: "sub-footer" }, h("slot", { name: 'sub-footer' })))));
   }
   static get is() { return "cura-page-template"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-page-template.scss"]
@@ -51,3 +52,4 @@ export class CuraPageTemplate {
   }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=cura-page-template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-page-template.js","sourceRoot":"","sources":["../../../src/components/cura-page-template/cura-page-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,gBAAgB;;wBAEmC,SAAS;;EAMvE,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;KACvD,CAAA;EACH,CAAC;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAChD,OAAO,OAAO,CAAC;EACjB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,eAAe;QAC5C,WAAK,EAAE,EAAC,YAAY;UAClB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B;QACN,WAAK,EAAE,EAAC,QAAQ;UACd,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;QACN,WAAK,EAAE,EAAC,aAAa;UACnB,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B;QACN,WAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;UAClD,WAAK,EAAE,EAAC,cAAc;YACpB,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;UACN,WAAK,EAAE,EAAC,SAAS;YACf,YAAM,IAAI,EAAC,SAAS,GAAQ;YAC5B,eAAa,CACT;UACN,WAAK,EAAE,EAAC,eAAe;YACrB,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF;QACN,WAAK,EAAE,EAAC,WAAW;UACjB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;QACN,WAAK,EAAE,EAAC,QAAQ;UACd,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;QACN,WAAK,EAAE,EAAC,YAAY;UAClB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-page-template',\n  styleUrl: 'cura-page-template.scss',\n  shadow: true,\n})\nexport class CuraPageTemplate {\n\n  @Prop({reflect: true}) contentwidth: 'default' | 'centered' = 'default';\n\n  @Element() host: HTMLElement;\n\n  styles: any;\n\n  connectedCallback() {\n    this.styles = {\n      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    }\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.contentwidth.toLowerCase()] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div style={this.styles} class=\"grid-template\">\n          <div id=\"sub-header\">\n            <slot name='sub-header'></slot>\n          </div>\n          <div id=\"header\">\n            <slot name='header'></slot>\n          </div>\n          <div id=\"pre-content\">\n            <slot name='pre-content'></slot>\n          </div>\n          <div id=\"content-container\" class={this.getClasses()}>\n            <div id=\"sidebar-left\">\n              <slot name='sidebar-left'></slot>\n            </div>\n            <div id=\"content\">\n              <slot name=\"content\"></slot>\n              <slot></slot>\n            </div>\n            <div id=\"sidebar-right\">\n              <slot name='sidebar-right'></slot>\n            </div>\n          </div>\n          <div id=\"post-body\">\n            <slot name='post-body'></slot>\n          </div>\n          <div id=\"footer\">\n            <slot name='footer'></slot>\n          </div>\n          <div id=\"sub-footer\">\n            <slot name='sub-footer'></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/text/cura-display/cura-display.css

@@ -19,12 +19,12 @@
  * Responsive media for xlarge only.
  * Use: @include xlarge-only() { ... }
  */
-.cura-display {
+:host {
   display: block;
   font-size: var(--font-size);
   text-transform: uppercase;
 }
-.cura-display h1, .cura-display h2, .cura-display h3, .cura-display h4, .cura-display h5, .cura-display h6 {
+: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);
@@ -34,50 +34,49 @@
   margin-block-start: var(--block-margin);
   margin-block-end: var(--block-margin);
 }
-.cura-display h1.large, .cura-display h2.large, .cura-display h3.large, .cura-display h4.large, .cura-display h5.large, .cura-display h6.large {
+:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
   font-size: 6.21em;
 }
-.cura-display h1.small, .cura-display h2.small, .cura-display h3.small, .cura-display h4.small, .cura-display h5.small, .cura-display h6.small {
+: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) {
-  .cura-display h1, .cura-display h2, .cura-display h3, .cura-display h4, .cura-display h5, .cura-display h6 {
+  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 4.92em;
   }
-  .cura-display h1.large, .cura-display h2.large, .cura-display h3.large, .cura-display h4.large, .cura-display h5.large, .cura-display h6.large {
+  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
     font-size: 7.07em;
   }
-  .cura-display h1.small, .cura-display h2.small, .cura-display h3.small, .cura-display h4.small, .cura-display h5.small, .cura-display h6.small {
+  :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) {
-  .cura-display h1, .cura-display h2, .cura-display h3, .cura-display h4, .cura-display h5, .cura-display h6 {
+  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 6.14em;
     line-height: 125%;
   }
-  .cura-display h1.large, .cura-display h2.large, .cura-display h3.large, .cura-display h4.large, .cura-display h5.large, .cura-display h6.large {
+  :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%;
   }
-  .cura-display h1.small, .cura-display h2.small, .cura-display h3.small, .cura-display h4.small, .cura-display h5.small, .cura-display h6.small {
+  :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%;
   }
 }
-.cura-display b,
-.cura-display strong {
+:host ::slotted(b), :host ::slotted(strong) {
   font-weight: var(--font-weight-bold);
 }
-.cura-display a {
+:host ::slotted(a) {
   font-weight: var(--font-weight-bold);
   color: var(--color-link);
   text-decoration: none;
   text-underline-offset: 10%;
   cursor: pointer;
 }
-.cura-display abbr {
+:host ::slotted(abbr) {
   color: var(--color-link);
   text-decoration: underline dashed 1px var(--color-link);
   text-underline-offset: 10%;

package/dist/collection/components/text/cura-display/cura-display.js

@@ -1,25 +1,9 @@
 import { Host, h } from '@stencil/core';
 export class CuraDisplay {
   constructor() {
-    /**
-     * Heading level for semantics.
-     * Values: 1(default)-6.
-     */
     this.level = 1;
-    /**
-    * Heading style size.
-    * Values: small | regular(default) | large.
-    */
     this.size = 'regular';
-    /**
-    * Apply light color to text in dark background.
-    * Values: boolean.
-    */
     this.inverted = false;
-    /**
-    * Apply base system color to elements like <a> and <abbr>.
-    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
-    */
     this.spotColor = 'primary';
   }
   connectedCallback() {
@@ -67,9 +51,10 @@ export class CuraDisplay {
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, { class: "cura-display" }, this.getHeadingTag()));
+    return (h(Host, null, this.getHeadingTag()));
   }
   static get is() { return "cura-display"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-display.scss"]
@@ -158,3 +143,4 @@ export class CuraDisplay {
   }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=cura-display.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-display.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,WAAW;;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;EACnB,CAAC;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;EACjB,CAAC;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;EAClD,CAAC;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;MAC7B,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC;MACrD,CAAC,CAAC,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;MACzC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,MAAM,CAAC;MAC/D,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,MAAM,CAAC,CAAC;EACpE,CAAC;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;EAC3C,CAAC;EAED,aAAa;IACX,MAAM,IAAI,GAAG;MACX,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,SAAS,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;KAChF,CAAC;IACF,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;EAClD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,QACD,IAAI,CAAC,aAAa,EAAE,CACjB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["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-100') \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}-100`)\n      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);\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"]}

package/dist/collection/components/text/cura-heading/cura-heading.css

@@ -19,11 +19,11 @@
  * Responsive media for xlarge only.
  * Use: @include xlarge-only() { ... }
  */
-.cura-heading {
+:host {
   display: block;
   font-size: var(--font-size);
 }
-.cura-heading h1, .cura-heading h2, .cura-heading h3, .cura-heading h4, .cura-heading h5, .cura-heading h6 {
+: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);
@@ -33,58 +33,58 @@
   margin-block-start: var(--block-margin);
   margin-block-end: var(--block-margin);
 }
-.cura-heading h1.bold-weight, .cura-heading h2.bold-weight, .cura-heading h3.bold-weight, .cura-heading h4.bold-weight, .cura-heading h5.bold-weight, .cura-heading h6.bold-weight {
+: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);
 }
-.cura-heading h1.large, .cura-heading h2.large, .cura-heading h3.large, .cura-heading h4.large, .cura-heading h5.large, .cura-heading h6.large {
+: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%;
 }
-.cura-heading h1.small, .cura-heading h2.small, .cura-heading h3.small, .cura-heading h4.small, .cura-heading h5.small, .cura-heading h6.small {
+: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%;
 }
-.cura-heading h1.small.bold-weight, .cura-heading h2.small.bold-weight, .cura-heading h3.small.bold-weight, .cura-heading h4.small.bold-weight, .cura-heading h5.small.bold-weight, .cura-heading h6.small.bold-weight {
+: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) {
-  .cura-heading h1, .cura-heading h2, .cura-heading h3, .cura-heading h4, .cura-heading h5, .cura-heading h6 {
+  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 2em;
   }
-  .cura-heading h1.large, .cura-heading h2.large, .cura-heading h3.large, .cura-heading h4.large, .cura-heading h5.large, .cura-heading h6.large {
+  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
     font-size: 2.357em;
   }
-  .cura-heading h1.small, .cura-heading h2.small, .cura-heading h3.small, .cura-heading h4.small, .cura-heading h5.small, .cura-heading h6.small {
+  :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) {
-  .cura-heading h1, .cura-heading h2, .cura-heading h3, .cura-heading h4, .cura-heading h5, .cura-heading h6 {
+  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 2.5em;
     line-height: 135%;
     letter-spacing: -2%;
   }
-  .cura-heading h1.large, .cura-heading h2.large, .cura-heading h3.large, .cura-heading h4.large, .cura-heading h5.large, .cura-heading h6.large {
+  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
     font-size: 2.92em;
   }
-  .cura-heading h1.small, .cura-heading h2.small, .cura-heading h3.small, .cura-heading h4.small, .cura-heading h5.small, .cura-heading h6.small {
+  :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%;
   }
 }
-.cura-heading b, .cura-heading strong {
+:host ::slotted(b), :host ::slotted(strong) {
   font-weight: var(--font-weight-bold);
 }
-.cura-heading a {
+:host ::slotted(a) {
   font-weight: var(--font-weight-bold);
   color: var(--color-link);
   text-decoration: none;
   text-underline-offset: 10%;
   cursor: pointer;
 }
-.cura-heading abbr {
+:host ::slotted(abbr) {
   color: var(--color-link);
   text-decoration: underline dashed 1px var(--color-link);
   text-underline-offset: 10%;

package/dist/collection/components/text/cura-heading/cura-heading.js

@@ -1,30 +1,10 @@
 import { Host, h } from '@stencil/core';
 export class CuraHeading {
   constructor() {
-    /**
-     * Heading level for semantics.
-     * Values: 1(default)-6.
-     */
     this.level = 1;
-    /**
-     * Heading style size.
-     * Values: small | regular(default) | large.
-     */
     this.size = 'regular';
-    /**
-     * Heading font weight.
-     * Values: regular(default) | bold.
-     */
     this.weight = 'regular';
-    /**
-    * Apply light color to text in dark background.
-    * Values: boolean.
-    */
     this.inverted = false;
-    /**
-    * Apply base system color to elements like <a> and <abbr>.
-    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
-    */
     this.spotColor = 'primary';
   }
   connectedCallback() {
@@ -75,9 +55,10 @@ export class CuraHeading {
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, { class: "cura-heading" }, this.getHeadingTag()));
+    return (h(Host, null, this.getHeadingTag()));
   }
   static get is() { return "cura-heading"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-heading.scss"]
@@ -184,3 +165,4 @@ export class CuraHeading {
   }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=cura-heading.js.map

package/dist/collection/components/text/cura-heading/cura-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-heading.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cura-heading',\n  styleUrl: 'cura-heading.scss',\n  shadow: true,\n})\nexport class CuraHeading {\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   * Heading font weight.\n   * Values: regular(default) | bold.\n   */\n  @Prop({reflect: true}) weight = '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    classes[`${this.weight.toLowerCase()}-weight`] = true;\n    return classes;\n  }\n\n  setFontProperties() {\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold,\n      '--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-100') \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}-100`)\n      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);\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"]}

package/dist/collection/components/text/cura-paragraph/cura-paragraph.css

@@ -19,11 +19,11 @@
  * Responsive media for xlarge only.
  * Use: @include xlarge-only() { ... }
  */
-.cura-paragraph {
+:host {
   display: block;
   font-size: var(--font-size);
 }
-.cura-paragraph p {
+:host p {
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight-regular);
@@ -33,71 +33,70 @@
   margin-block-start: var(--block-margin);
   margin-block-end: var(--block-margin);
 }
-.cura-paragraph p.large {
+:host p.large {
   font-size: 1.21em;
   line-height: 150%;
   letter-spacing: 0%;
 }
-.cura-paragraph p.small {
+:host p.small {
   font-size: 0.85em;
   line-height: 135%;
   letter-spacing: 4%;
 }
-.cura-paragraph p.caption {
+:host p.caption {
   font-size: 0.71em;
   line-height: 135%;
   letter-spacing: 6%;
 }
 @media (min-width: 768px) and (max-width: 1365px) {
-  .cura-paragraph p {
+  :host p {
     font-size: 1.14em;
     line-height: 145%;
   }
-  .cura-paragraph p.large {
+  :host p.large {
     font-size: 1.35em;
     line-height: 150%;
   }
-  .cura-paragraph p.small {
+  :host p.small {
     font-size: 1em;
     line-height: 135%;
   }
-  .cura-paragraph p.caption {
+  :host p.caption {
     font-size: 0.85em;
     line-height: 135%;
     letter-spacing: 6%;
   }
 }
 @media (min-width: 1366px) {
-  .cura-paragraph p {
+  :host p {
     font-size: 1.42em;
     line-height: 150%;
     letter-spacing: 0%;
   }
-  .cura-paragraph p.large {
+  :host p.large {
     font-size: 1.71em;
     line-height: 160%;
   }
-  .cura-paragraph p.small {
+  :host p.small {
     font-size: 1.21em;
     line-height: 145%;
     letter-spacing: 0%;
   }
-  .cura-paragraph p.caption {
+  :host p.caption {
     font-size: 1em;
     line-height: 145%;
     letter-spacing: 2%;
   }
 }
-.cura-paragraph b,
-.cura-paragraph strong {
+:host ::slotted(b), :host ::slotted(strong) {
   font-weight: var(--font-weight-bold);
 }
-.cura-paragraph a {
+:host ::slotted(a) {
   font-weight: var(--font-weight-medium);
   color: var(--color-link);
   text-underline-offset: 10%;
 }
-.cura-paragraph abbr {
+:host ::slotted(abbr) {
   color: var(--color-link);
   text-decoration: underline dashed 1px var(--color-link);
   text-underline-offset: 10%;

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

@@ -1,20 +1,8 @@
 import { Host, h } from '@stencil/core';
 export class CuraParagraph {
   constructor() {
-    /**
-     * Set size of body text.
-     * Values: regular (default) | large | small | caption.
-     */
     this.size = 'regular';
-    /**
-    * Apply light color to text in dark background.
-    * Values: boolean.
-    */
     this.inverted = false;
-    /**
-    * Apply base system color to elements like <a> and <abbr>.
-    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
-    */
     this.spotColor = 'primary';
   }
   connectedCallback() {
@@ -51,9 +39,10 @@ export class CuraParagraph {
     this.host.style.setProperty(prop, value);
   }
   render() {
-    return (h(Host, { class: "cura-paragraph" }, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
+    return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
   }
   static get is() { return "cura-paragraph"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-paragraph.scss"]
@@ -124,3 +113,4 @@ export class CuraParagraph {
   }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=cura-paragraph.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-paragraph.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,aAAa;;gBAMM,SAAS;oBAKL,KAAK;qBAKJ,SAAS;;EAa5C,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IACvD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;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;EACnB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;MAC7D,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;MAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;EACnD,CAAC;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;MAC7B,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC;MACrD,CAAC,CAAC,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;MACzC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,MAAM,CAAC;MAC/D,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,MAAM,CAAC,CAAC;EACpE,CAAC;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;EAC3C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,SAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;QAC/C,eAAa,CACX,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cura-paragraph',\n  styleUrl: 'cura-paragraph.scss',\n  shadow: true,\n})\nexport class CuraParagraph {\n\n  /**\n   * Set size of body text.\n   * Values: regular (default) | large | small | caption.\n   */\n  @Prop({reflect: true}) size = 'regular';\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-paragraph>\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  setsizeClass() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = true;\n    return sizeclass;\n  }\n\n  setFontProperties() {\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    }\n    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n    this.setHostProperty('--block-margin', '1.25em');\n  }\n\n  setColors() {\n    const fontColor = this.inverted \n      ? window.CuraAPI.theme.colors.getColor('neutral-100') \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}-100`)\n      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <p style={this.styles} class={this.setsizeClass()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/index.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"","sourcesContent":["export { Components, JSX } from './components';\n"]}

package/dist/collection/rededor-cura-start.js

@@ -7,3 +7,4 @@ export default function () {
   if (config && typeof config.onReady === 'function')
     config.onReady(api);
 }
+//# sourceMappingURL=rededor-cura-start.js.map

package/dist/collection/rededor-cura-start.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rededor-cura-start.js","sourceRoot":"","sources":["../src/rededor-cura-start.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAYrC,MAAM,CAAC,OAAO;EACZ,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;EAC/B,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC;EAC9D,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;EAC3B,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC,CAAC;EACzE,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU;IAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AAC1E,CAAC","sourcesContent":["import CuraAPI from './api/cura-api';\nimport { CuraConfig } from './api/cura-api.type';\n// import { setAssetPath } from '@stencil/core';\n\n// setAssetPath(import.meta.url);\ndeclare global {\n  interface Window {\n    CuraAPI?: CuraAPI,\n    CuraInit?: CuraConfig\n  }\n}\n\nexport default function() {\n  const config = window.CuraInit;\n  window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();\n  const api = window.CuraAPI;\n  window.dispatchEvent(new CustomEvent(\"CuraAPIReady\", { detail: {api} }));\n  if (config && typeof config.onReady === 'function') config.onReady(api);\n}\n"]}

package/dist/collection/utils/utils.js

@@ -1,3 +1,4 @@
 export function format(first, middle, last) {
   return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
+//# sourceMappingURL=utils.js.map