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

package/dist/cjs/index.cjs.js

@@ -1,4 +1,2 @@
 'use strict';
 
-
-//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/loader.cjs.js

@@ -2,29 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-29633529.js');
-const appGlobals = require('./app-globals-a41d7f40.js');
+const index = require('./index-76f95c4b.js');
+const appGlobals = require('./app-globals-0f70160b.js');
 
 /*
- Stencil Client Patch Esm v3.3.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.18.1 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
-    // NOTE!! This fn cannot use async/await!
-    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-    // @ts-ignore
-    if (!(index.CSS && index.CSS.supports && index.CSS.supports('color', 'var(--c)'))) {
-        // @ts-ignore
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-83cf0349.js'); }).then(() => {
-            if ((index.plt.$cssShim$ = index.win.__cssshim)) {
-                // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-                return index.plt.$cssShim$.i();
-            }
-            else {
-                // for better minification
-                return 0;
-            }
-        });
-    }
     return index.promiseResolve();
 };
 
@@ -32,11 +16,8 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["cura-button_6.cjs",[[1,"cura-button",{"type":[513],"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"href":[513],"target":[1],"color":[1],"styles":[32]}],[1,"cura-display",{"level":[514],"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[1,"cura-heading",{"level":[514],"size":[513],"weight":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[1,"cura-page-template",{"contentwidth":[513]}],[1,"cura-paragraph",{"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]],["cura-icons-view.cjs",[[1,"cura-icons-view",{"selected":[32]}]]]], options);
+  return index.bootstrapLazy([["cura-icon.cjs",[[0,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]],["cura-icons-view.cjs",[[0,"cura-icons-view",{"selected":[32]}]]],["cura-display_4.cjs",[[4,"cura-display",{"level":[514],"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[4,"cura-heading",{"level":[514],"size":[513],"weight":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[4,"cura-page-template",{"contentwidth":[513]}],[4,"cura-paragraph",{"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}]]]], options);
   });
 };
 
-exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;
-
-//# sourceMappingURL=loader.cjs.js.map

package/dist/collection/api/cura-api.js

@@ -28,4 +28,3 @@ export default class CuraAPI {
     }
   }
 }
-//# sourceMappingURL=cura-api.js.map

package/dist/collection/api/cura-api.type.js

@@ -4,4 +4,3 @@ export var InterfaceModes;
   InterfaceModes["LIGHT"] = "light";
   InterfaceModes["DARK"] = "dark";
 })(InterfaceModes || (InterfaceModes = {}));
-//# sourceMappingURL=cura-api.type.js.map

package/dist/collection/api/modules/cura-theme-colors-module.js

@@ -67,4 +67,3 @@ export default class CuraThemeColorsModule {
     return { color: color !== null && color !== void 0 ? color : "primary", depth: depth !== null && depth !== void 0 ? depth : "base" };
   }
 }
-//# sourceMappingURL=cura-theme-colors-module.js.map

package/dist/collection/api/modules/cura-theme-fonts-module.js

@@ -33,4 +33,3 @@ export default class CuraThemeFontsModule {
     return weights;
   }
 }
-//# sourceMappingURL=cura-theme-fonts-module.js.map

package/dist/collection/api/modules/cura-theme-module.js

@@ -73,4 +73,3 @@ export default class CuraThemeModule {
     }
   }
 }
-//# sourceMappingURL=cura-theme-module.js.map

package/dist/collection/api/modules/cura-theme-spacing-module.js

@@ -10,4 +10,3 @@ export default class CuraThemeSpacingModule {
     return '4';
   }
 }
-//# sourceMappingURL=cura-theme-spacing-module.js.map

package/dist/collection/api/theme-presets/static.js

@@ -88,4 +88,3 @@ export const Static = {
     },
   },
 };
-//# sourceMappingURL=static.js.map

package/dist/collection/api/theme-presets/theme-default.js

@@ -19,11 +19,11 @@ export const ThemeDefault = {
       '900': '#292017'
     },
     accent: {
-      '100': '#FFC27B',
-      '300': '#FFA84A',
-      '500': '#FF8200',
-      '700': '#D7720A',
-      '900': '#9B5A1A'
+      '100': '#F9E8D5',
+      '300': '#E4A04F',
+      '500': '#DF8D2C',
+      '700': '#955E1D',
+      '900': '#2D1C09'
     }
   },
   /* Spacing */
@@ -47,4 +47,3 @@ export const ThemeDefault = {
     },
   }
 };
-//# sourceMappingURL=theme-default.js.map

package/dist/collection/api/theme-presets/theme-maternity.js

@@ -19,14 +19,6 @@ export const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), {
       '500': '#189AB4',
       '700': '#001C58',
       '900': '#430E31'
-    },
-    accent: {
-      '100': '#FCEFF6',
-      '300': '#FFBFE5',
-      '500': '#CD4D9A',
-      '700': '#99126C',
-      '900': '#00133B'
     }
   }
 });
-//# sourceMappingURL=theme-maternity.js.map

package/dist/collection/api/theme-presets/theme-oncology.js

@@ -7,11 +7,11 @@ export const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      '100': '#AABEE1',
-      '300': '#557EC4',
-      '500': '#003DA6',
-      '700': '#00296F',
-      '900': '#000C21'
+      '100': '#99CFFF',
+      '300': '#47A9FF',
+      '500': '#0083F5',
+      '700': '#006DCC',
+      '900': '#0058A4',
     },
     secondary: {
       '100': '#CDD7E3',
@@ -20,34 +20,19 @@ export const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
       '700': '#365E8F',
       '900': '#043673',
     },
-    accent: {
-      '100': '#99CFFF',
-      '300': '#47A9FF',
-      '500': '#0083F5',
-      '700': '#006DCC',
-      '900': '#0058A4',
+    aux1: {
+      '100': '#AABEE1',
+      '300': '#557EC4',
+      '500': '#003DA6',
+      '700': '#00296F',
+      '900': '#000C21',
     },
-    aux: {
+    aux2: {
       '100': '#DAF2EF',
       '300': '#84D4CA',
       '500': '#47BFB0',
       '700': '#2F7F75',
       '900': '#0E2623',
     },
-  }, font: {
-    size: '14px',
-    color: '#4A4A4A',
-    body: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
-    heading: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
-    display: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
-    weights: {
-      thin: 100,
-      light: 300,
-      regular: 400,
-      medium: 500,
-      bold: 700,
-      black: 900
-    },
   }
 });
-//# sourceMappingURL=theme-oncology.js.map

package/dist/collection/api/theme-presets/theme-presets.js

@@ -6,4 +6,3 @@ export const ThemePresets = {
   'maternidade': ThemeMaternity,
   'oncologia': ThemeOncology,
 };
-//# sourceMappingURL=theme-presets.js.map

package/dist/collection/assets/icons/iconset-default-list.js

@@ -1,2 +1 @@
 export default ["360", "accessibility", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "deslike", "download", "duplicate", "edit", "exam", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "google", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "instagram", "key", "language", "language2", "languageEN", "languagePT", "lattes", "like", "likeHand", "link", "linkExternal", "linkedin", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "twitter", "unLink", "unSecure", "unlikeHand", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "youtube", "zoomIn", "zoomOut"];
-//# sourceMappingURL=iconset-default-list.js.map

package/dist/collection/collection-manifest.json

@@ -1,6 +1,5 @@
 {
   "entries": [
-    "./components/buttons/cura-button/cura-button.js",
     "./components/cura-icon/cura-icon.js",
     "./components/cura-icons-view/cura-icons-view.js",
     "./components/cura-page-template/cura-page-template.js",
@@ -10,8 +9,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.3.0",
-    "typescriptVersion": "5.0.4"
+    "version": "2.18.1",
+    "typescriptVersion": "4.7.4"
   },
   "collections": [],
   "bundles": [],

package/dist/collection/components/cura-icon/cura-icon.css

@@ -1,8 +1,8 @@
-:host {
+.cura-icon {
   width: var(--size);
   height: var(--size);
 }
-:host svg {
+.cura-icon svg {
   display: inline-block;
   stroke: var(--color);
   width: var(--size);

package/dist/collection/components/cura-icon/cura-icon.js

@@ -1,6 +1,10 @@
 import { Host, h } from '@stencil/core';
 export class CuraIcon {
   constructor() {
+    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 },
@@ -13,11 +17,6 @@ export class CuraIcon {
       "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) => {
@@ -38,10 +37,9 @@ export class CuraIcon {
     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}` }))));
   }
   static get is() { return "cura-icon"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-icon.scss"]
@@ -159,4 +157,3 @@ export class CuraIcon {
       }];
   }
 }
-//# sourceMappingURL=cura-icon.js.map

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

@@ -4,16 +4,15 @@ 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"]
@@ -30,4 +29,3 @@ export class CuraIconsView {
     };
   }
 }
-//# sourceMappingURL=cura-icons-view.js.map

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

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

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

@@ -14,10 +14,9 @@ export class CuraPageTemplate {
     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' })))));
   }
   static get is() { return "cura-page-template"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-page-template.scss"]
@@ -52,4 +51,3 @@ export class CuraPageTemplate {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=cura-page-template.js.map

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

@@ -19,12 +19,12 @@
  * Responsive media for xlarge only.
  * Use: @include xlarge-only() { ... }
  */
-:host {
+.cura-display {
   display: block;
   font-size: var(--font-size);
   text-transform: uppercase;
 }
-:host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
+.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);
@@ -34,49 +34,50 @@
   margin-block-start: 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 {
+.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;
 }
-:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+.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) {
-  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
+  .cura-display h1, .cura-display h2, .cura-display h3, .cura-display h4, .cura-display h5, .cura-display h6 {
     font-size: 4.92em;
   }
-  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
+  .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;
   }
-  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+  .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) {
-  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
+  .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%;
   }
-  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
+  .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%;
   }
-  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+  .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%;
   }
 }
-:host ::slotted(b), :host ::slotted(strong) {
+.cura-display b,
+.cura-display strong {
   font-weight: var(--font-weight-bold);
 }
-:host ::slotted(a) {
+.cura-display a {
   font-weight: var(--font-weight-bold);
   color: var(--color-link);
   text-decoration: none;
   text-underline-offset: 10%;
   cursor: pointer;
 }
-:host ::slotted(abbr) {
+.cura-display 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,9 +1,25 @@
 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() {
@@ -51,10 +67,9 @@ export class CuraDisplay {
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, null, this.getHeadingTag()));
+    return (h(Host, { class: "cura-display" }, this.getHeadingTag()));
   }
   static get is() { return "cura-display"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["cura-display.scss"]
@@ -143,4 +158,3 @@ export class CuraDisplay {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=cura-display.js.map

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

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