@rededor/cura 0.3.4-alpha.0 → 0.3.4-alpha.1

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

@@ -1,10 +1,30 @@
 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() {
@@ -55,10 +75,9 @@ export class CuraHeading {
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, null, this.getHeadingTag()));
+    return (h(Host, { class: "cura-heading" }, this.getHeadingTag()));
   }
   static get is() { return "cura-heading"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-heading.scss"]
@@ -165,4 +184,3 @@ export class CuraHeading {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=cura-heading.js.map

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

@@ -19,11 +19,11 @@
  * Responsive media for xlarge only.
  * Use: @include xlarge-only() { ... }
  */
-:host {
+.cura-paragraph {
   display: block;
   font-size: var(--font-size);
 }
-:host p {
+.cura-paragraph p {
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight-regular);
@@ -33,70 +33,71 @@
   margin-block-start: var(--block-margin);
   margin-block-end: var(--block-margin);
 }
-:host p.large {
+.cura-paragraph p.large {
   font-size: 1.21em;
   line-height: 150%;
   letter-spacing: 0%;
 }
-:host p.small {
+.cura-paragraph p.small {
   font-size: 0.85em;
   line-height: 135%;
   letter-spacing: 4%;
 }
-:host p.caption {
+.cura-paragraph p.caption {
   font-size: 0.71em;
   line-height: 135%;
   letter-spacing: 6%;
 }
 @media (min-width: 768px) and (max-width: 1365px) {
-  :host p {
+  .cura-paragraph p {
     font-size: 1.14em;
     line-height: 145%;
   }
-  :host p.large {
+  .cura-paragraph p.large {
     font-size: 1.35em;
     line-height: 150%;
   }
-  :host p.small {
+  .cura-paragraph p.small {
     font-size: 1em;
     line-height: 135%;
   }
-  :host p.caption {
+  .cura-paragraph p.caption {
     font-size: 0.85em;
     line-height: 135%;
     letter-spacing: 6%;
   }
 }
 @media (min-width: 1366px) {
-  :host p {
+  .cura-paragraph p {
     font-size: 1.42em;
     line-height: 150%;
     letter-spacing: 0%;
   }
-  :host p.large {
+  .cura-paragraph p.large {
     font-size: 1.71em;
     line-height: 160%;
   }
-  :host p.small {
+  .cura-paragraph p.small {
     font-size: 1.21em;
     line-height: 145%;
     letter-spacing: 0%;
   }
-  :host p.caption {
+  .cura-paragraph p.caption {
     font-size: 1em;
     line-height: 145%;
     letter-spacing: 2%;
   }
 }
-:host ::slotted(b), :host ::slotted(strong) {
+.cura-paragraph b,
+.cura-paragraph strong {
   font-weight: var(--font-weight-bold);
 }
-:host ::slotted(a) {
+.cura-paragraph a {
   font-weight: var(--font-weight-medium);
   color: var(--color-link);
   text-underline-offset: 10%;
 }
-:host ::slotted(abbr) {
+.cura-paragraph 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,8 +1,20 @@
 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() {
@@ -39,10 +51,9 @@ export class CuraParagraph {
     this.host.style.setProperty(prop, value);
   }
   render() {
-    return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
+    return (h(Host, { class: "cura-paragraph" }, 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"]
@@ -113,4 +124,3 @@ export class CuraParagraph {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=cura-paragraph.js.map

package/dist/collection/index.js

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

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

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

package/dist/collection/utils/utils.js

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

package/dist/components/cura-display.js

@@ -1,15 +1,30 @@
 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 = ".cura-display{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{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)}.cura-display h1.large,.cura-display h2.large,.cura-display h3.large,.cura-display h4.large,.cura-display h5.large,.cura-display 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{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{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{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{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{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{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{font-size:4.285em;letter-spacing:-2%}}.cura-display b,.cura-display strong{font-weight:var(--font-weight-bold)}.cura-display a{font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}.cura-display 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 {
+const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
+    /**
+     * 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() {
@@ -57,11 +72,11 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, null, this.getHeadingTag()));
+    return (h(Host, { class: "cura-display" }, this.getHeadingTag()));
   }
   get host() { return this; }
   static get style() { return curaDisplayCss; }
-}, [1, "cura-display", {
+}, [4, "cura-display", {
     "level": [514],
     "size": [513],
     "inverted": [516],
@@ -85,5 +100,3 @@ const CuraDisplay = CuraDisplay$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraDisplay, defineCustomElement };
-
-//# sourceMappingURL=cura-display.js.map

package/dist/components/cura-heading.js

@@ -1,16 +1,35 @@
 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 = ".cura-heading{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{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)}.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{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{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{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{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{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{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{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{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{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{font-size:1.71em;line-height:160%;letter-spacing:0%}}.cura-heading b,.cura-heading strong{font-weight:var(--font-weight-bold)}.cura-heading a{font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}.cura-heading 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 CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends HTMLElement {
+const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
+    /**
+     * 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() {
@@ -61,11 +80,11 @@ const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, null, this.getHeadingTag()));
+    return (h(Host, { class: "cura-heading" }, this.getHeadingTag()));
   }
   get host() { return this; }
   static get style() { return curaHeadingCss; }
-}, [1, "cura-heading", {
+}, [4, "cura-heading", {
     "level": [514],
     "size": [513],
     "weight": [513],
@@ -90,5 +109,3 @@ const CuraHeading = CuraHeading$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraHeading, defineCustomElement };
-
-//# sourceMappingURL=cura-heading.js.map

package/dist/components/cura-icon.js

@@ -4,5 +4,3 @@ const CuraIcon = CuraIcon$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraIcon, defineCustomElement };
-
-//# sourceMappingURL=cura-icon.js.map

package/dist/components/cura-icon2.js

@@ -1,12 +1,15 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaIconCss = ":host{width:var(--size);height:var(--size)}:host svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
+const curaIconCss = ".cura-icon{width:var(--size);height:var(--size)}.cura-icon svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
 
-const CuraIcon = /*@__PURE__*/ proxyCustomElement(class CuraIcon extends HTMLElement {
+const CuraIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
+    this.name = '';
+    this.color = 'neutral-base';
+    this.iconset = 'default';
+    this.disabled = false;
     this.sizes = {
       "128": { size: 128, stroke: 5.25 },
       "72": { size: 72, stroke: 3.5 },
@@ -19,11 +22,6 @@ const CuraIcon = /*@__PURE__*/ proxyCustomElement(class CuraIcon extends HTMLEle
       "16": { size: 16, stroke: 1.5 },
       "default": { size: 24, stroke: 2 }
     };
-    this.name = '';
-    this.color = 'neutral-base';
-    this.size = undefined;
-    this.iconset = 'default';
-    this.disabled = false;
   }
   sizeHandler(size) {
     const scaledStroke = (iconSize) => {
@@ -44,7 +42,7 @@ const CuraIcon = /*@__PURE__*/ proxyCustomElement(class CuraIcon extends HTMLEle
     this.host.style.setProperty(prop, value);
   }
   render() {
-    return (h(Host, null, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+    return (h(Host, { class: 'cura-icon' }, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -53,7 +51,7 @@ const CuraIcon = /*@__PURE__*/ proxyCustomElement(class CuraIcon extends HTMLEle
     "disabled": ["colorHandler"]
   }; }
   static get style() { return curaIconCss; }
-}, [1, "cura-icon", {
+}, [0, "cura-icon", {
     "name": [513],
     "color": [1],
     "size": [8],
@@ -75,5 +73,3 @@ function defineCustomElement() {
 }
 
 export { CuraIcon as C, defineCustomElement as d };
-
-//# sourceMappingURL=cura-icon2.js.map

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

@@ -5,23 +5,22 @@ const iconsetdefaulticons = ["360", "accessibility", "alertCircle", "alertTriang
 
 const curaIconsViewCss = ":host{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#262626;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.icons .icon span{font-size:12px;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;color:#FFF;border-radius:2px;position:absolute;top:-2px;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);display:none}.icons .icon:hover{opacity:1}.icons .icon:hover span{display:block}";
 
-const CuraIconsView$1 = /*@__PURE__*/ proxyCustomElement(class CuraIconsView extends HTMLElement {
+const CuraIconsView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
     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 style() { return curaIconsViewCss; }
-}, [1, "cura-icons-view", {
+}, [0, "cura-icons-view", {
     "selected": [32]
   }]);
 function defineCustomElement$1() {
@@ -47,5 +46,3 @@ const CuraIconsView = CuraIconsView$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraIconsView, defineCustomElement };
-
-//# sourceMappingURL=cura-icons-view.js.map

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

@@ -1,12 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaPageTemplateCss = ":host{display:block}:host .grid-template{display:grid;grid-template-rows:auto;grid-template-columns:auto;grid-template-areas:\"sub-header\" \"header\" \"pre-content\" \"content-container\" \"post-body\" \"footer\" \"sub-footer\"}:host .grid-template #sub-header{grid-area:sub-header}:host .grid-template #header{grid-area:header}:host .grid-template #pre-content{grid-area:pre-content}:host .grid-template #content-container{grid-area:content-container}:host .grid-template #post-body{grid-area:post-body}:host .grid-template #footer{grid-area:footer}:host .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 360px){:host .grid-template{padding:0px}}@media (min-width: 768px) and (max-width: 1365px){:host .grid-template{padding:0px}}@media (min-width: 1366px) and (max-width: 1919px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 5px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 5px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1920px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 7px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 7px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}:host .grid-template #content-container.centered{max-width:1920px;justify-self:center}}";
+const curaPageTemplateCss = ".cura-template{display:block}.cura-template .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{grid-area:sub-header}.cura-template .grid-template #header{grid-area:header}.cura-template .grid-template #pre-content{grid-area:pre-content}.cura-template .grid-template #content-container{grid-area:content-container}.cura-template .grid-template #post-body{grid-area:post-body}.cura-template .grid-template #footer{grid-area:footer}.cura-template .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 360px){.cura-template .grid-template{padding:0px}}@media (min-width: 768px) and (max-width: 1365px){.cura-template .grid-template{padding:0px}}@media (min-width: 1366px) and (max-width: 1919px){.cura-template .grid-template{padding:0px}.cura-template .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]){margin-left:calc(var(--spacing) * 5px)}.cura-template .grid-template #content-container{display:-ms-flexbox;display:flex}.cura-template .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}.cura-template .grid-template #content-container #sidebar-left,.cura-template .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1920px){.cura-template .grid-template{padding:0px}.cura-template .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]){margin-left:calc(var(--spacing) * 7px)}.cura-template .grid-template #content-container{display:-ms-flexbox;display:flex}.cura-template .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}.cura-template .grid-template #content-container #sidebar-left,.cura-template .grid-template #content-container #sidebar-right{max-width:20%}.cura-template .grid-template #content-container.centered{max-width:1920px;justify-self:center}}";
 
-const CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class CuraPageTemplate extends HTMLElement {
+const CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
     this.contentwidth = 'default';
   }
   connectedCallback() {
@@ -20,11 +19,11 @@ const CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class CuraPageTempla
     return classes;
   }
   render() {
-    return (h(Host, null, h("div", { style: this.styles, class: "grid-template" }, h("div", { id: "sub-header" }, h("slot", { name: 'sub-header' })), h("div", { id: "header" }, h("slot", { name: 'header' })), h("div", { id: "pre-content" }, h("slot", { name: 'pre-content' })), h("div", { id: "content-container", class: this.getClasses() }, h("div", { id: "sidebar-left" }, h("slot", { name: 'sidebar-left' })), h("div", { id: "content" }, h("slot", { name: "content" }), h("slot", null)), h("div", { id: "sidebar-right" }, h("slot", { name: 'sidebar-right' }))), h("div", { id: "post-body" }, h("slot", { name: 'post-body' })), h("div", { id: "footer" }, h("slot", { name: 'footer' })), h("div", { id: "sub-footer" }, h("slot", { name: 'sub-footer' })))));
+    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' })))));
   }
   get host() { return this; }
   static get style() { return curaPageTemplateCss; }
-}, [1, "cura-page-template", {
+}, [4, "cura-page-template", {
     "contentwidth": [513]
   }]);
 function defineCustomElement$1() {
@@ -45,5 +44,3 @@ const CuraPageTemplate = CuraPageTemplate$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraPageTemplate, defineCustomElement };
-
-//# sourceMappingURL=cura-page-template.js.map

package/dist/components/cura-paragraph.js

@@ -1,14 +1,25 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaParagraphCss = ":host{display:block;font-size:var(--font-size)}:host p{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:140%;letter-spacing:2%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host p.large{font-size:1.21em;line-height:150%;letter-spacing:0%}:host p.small{font-size:0.85em;line-height:135%;letter-spacing:4%}:host p.caption{font-size:0.71em;line-height:135%;letter-spacing:6%}@media (min-width: 768px) and (max-width: 1365px){:host p{font-size:1.14em;line-height:145%}:host p.large{font-size:1.35em;line-height:150%}:host p.small{font-size:1em;line-height:135%}:host p.caption{font-size:0.85em;line-height:135%;letter-spacing:6%}}@media (min-width: 1366px){:host p{font-size:1.42em;line-height:150%;letter-spacing:0%}:host p.large{font-size:1.71em;line-height:160%}:host p.small{font-size:1.21em;line-height:145%;letter-spacing:0%}:host p.caption{font-size:1em;line-height:145%;letter-spacing:2%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+const curaParagraphCss = ".cura-paragraph{display:block;font-size:var(--font-size)}.cura-paragraph p{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:140%;letter-spacing:2%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}.cura-paragraph p.large{font-size:1.21em;line-height:150%;letter-spacing:0%}.cura-paragraph p.small{font-size:0.85em;line-height:135%;letter-spacing:4%}.cura-paragraph p.caption{font-size:0.71em;line-height:135%;letter-spacing:6%}@media (min-width: 768px) and (max-width: 1365px){.cura-paragraph p{font-size:1.14em;line-height:145%}.cura-paragraph p.large{font-size:1.35em;line-height:150%}.cura-paragraph p.small{font-size:1em;line-height:135%}.cura-paragraph p.caption{font-size:0.85em;line-height:135%;letter-spacing:6%}}@media (min-width: 1366px){.cura-paragraph p{font-size:1.42em;line-height:150%;letter-spacing:0%}.cura-paragraph p.large{font-size:1.71em;line-height:160%}.cura-paragraph p.small{font-size:1.21em;line-height:145%;letter-spacing:0%}.cura-paragraph p.caption{font-size:1em;line-height:145%;letter-spacing:2%}}.cura-paragraph b,.cura-paragraph strong{font-weight:var(--font-weight-bold)}.cura-paragraph a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}.cura-paragraph abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
 
-const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class CuraParagraph extends HTMLElement {
+const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
+    /**
+     * 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() {
@@ -45,11 +56,11 @@ const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class CuraParagraph ext
     this.host.style.setProperty(prop, value);
   }
   render() {
-    return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
+    return (h(Host, { class: "cura-paragraph" }, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
   }
   get host() { return this; }
   static get style() { return curaParagraphCss; }
-}, [1, "cura-paragraph", {
+}, [4, "cura-paragraph", {
     "size": [513],
     "inverted": [516],
     "spotColor": [513, "spot-color"]
@@ -72,5 +83,3 @@ const CuraParagraph = CuraParagraph$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraParagraph, defineCustomElement };
-
-//# sourceMappingURL=cura-paragraph.js.map

package/dist/components/index.d.ts

@@ -1,3 +1,11 @@
+/* cura custom elements */
+export { CuraDisplay as CuraDisplay } from '../types/components/text/cura-display/cura-display';
+export { CuraHeading as CuraHeading } from '../types/components/text/cura-heading/cura-heading';
+export { CuraIcon as CuraIcon } from '../types/components/cura-icon/cura-icon';
+export { CuraIconsView as CuraIconsView } from '../types/components/cura-icons-view/cura-icons-view';
+export { CuraPageTemplate as CuraPageTemplate } from '../types/components/cura-page-template/cura-page-template';
+export { CuraParagraph as CuraParagraph } from '../types/components/text/cura-paragraph/cura-paragraph';
+
 /**
  * Used to manually set the base path where assets can be found.
  * If the script is used as "module", it's recommended to use "import.meta.url",
@@ -10,30 +18,10 @@
  */
 export declare const setAssetPath: (path: string) => void;
 
-/**
- * Used to specify a nonce value that corresponds with an application's CSP.
- * When set, the nonce will be added to all dynamically created script and style tags at runtime.
- * Alternatively, the nonce value can be set on a meta tag in the DOM head
- * (<meta name="csp-nonce" content="{ nonce value here }" />) which
- * will result in the same behavior.
- */
-export declare const setNonce: (nonce: string) => void
-
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-
-/**
- * Utility to define all custom elements within this package using the tag name provided in the component's source.
- * When defining each custom element, it will also check it's safe to define by:
- *
- * 1. Ensuring the "customElements" registry is available in the global context (window).
- * 2. Ensuring that the component tag name is not already defined.
- *
- * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
- * method instead to define custom elements individually, or to provide a different tag name.
- */
-export declare const defineCustomElements: (opts?: any) => void;
+export * from '../types';