@rededor/cura 0.3.3 → 0.3.4-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/cjs/cura-display_4.cjs.entry.js +9 -9
  2. package/dist/cjs/cura-icon.cjs.entry.js +3 -3
  3. package/dist/cjs/cura-icons-view.cjs.entry.js +1 -1
  4. package/dist/cjs/cura.cjs.js +2 -2
  5. package/dist/cjs/{index-8686299e.js → index-76f95c4b.js} +377 -40
  6. package/dist/cjs/loader.cjs.js +2 -2
  7. package/dist/collection/components/cura-icon/cura-icon.css +2 -2
  8. package/dist/collection/components/cura-icon/cura-icon.js +1 -2
  9. package/dist/collection/components/cura-icons-view/cura-icons-view.js +0 -1
  10. package/dist/collection/components/cura-page-template/cura-page-template.css +24 -24
  11. package/dist/collection/components/cura-page-template/cura-page-template.js +1 -2
  12. package/dist/collection/components/text/cura-display/cura-display.css +14 -13
  13. package/dist/collection/components/text/cura-display/cura-display.js +1 -2
  14. package/dist/collection/components/text/cura-heading/cura-heading.css +15 -15
  15. package/dist/collection/components/text/cura-heading/cura-heading.js +1 -2
  16. package/dist/collection/components/text/cura-paragraph/cura-paragraph.css +17 -16
  17. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -2
  18. package/dist/components/cura-display.js +3 -4
  19. package/dist/components/cura-heading.js +3 -4
  20. package/dist/components/cura-icon2.js +3 -4
  21. package/dist/components/cura-icons-view.js +1 -2
  22. package/dist/components/cura-page-template.js +3 -4
  23. package/dist/components/cura-paragraph.js +3 -4
  24. package/dist/cura/cura.esm.js +1 -1
  25. package/dist/cura/cura.js +1 -1
  26. package/dist/cura/p-0b79032f.system.js +2 -0
  27. package/dist/cura/p-11002b56.system.js +1 -0
  28. package/dist/cura/{p-5b5cf2e4.system.entry.js → p-54c09404.system.entry.js} +1 -1
  29. package/dist/cura/p-57c5329e.js +2 -0
  30. package/dist/cura/p-5a6643e1.entry.js +1 -0
  31. package/dist/cura/p-a2ad5637.system.entry.js +1 -0
  32. package/dist/cura/p-bd91ecb9.system.entry.js +1 -0
  33. package/dist/cura/{p-22290742.entry.js → p-d69916ee.entry.js} +1 -1
  34. package/dist/cura/{p-fbcea891.entry.js → p-f8a5b97d.entry.js} +1 -1
  35. package/dist/esm/cura-display_4.entry.js +9 -9
  36. package/dist/esm/cura-icon.entry.js +3 -3
  37. package/dist/esm/cura-icons-view.entry.js +1 -1
  38. package/dist/esm/cura.js +2 -2
  39. package/dist/esm/{index-c3d31886.js → index-7e8c969d.js} +377 -40
  40. package/dist/esm/loader.js +2 -2
  41. package/dist/esm-es5/cura-display_4.entry.js +1 -1
  42. package/dist/esm-es5/cura-icon.entry.js +1 -1
  43. package/dist/esm-es5/cura-icons-view.entry.js +1 -1
  44. package/dist/esm-es5/cura.js +1 -1
  45. package/dist/esm-es5/index-7e8c969d.js +2 -0
  46. package/dist/esm-es5/loader.js +1 -1
  47. package/package.json +2 -2
  48. package/dist/cura/p-092f3490.system.entry.js +0 -1
  49. package/dist/cura/p-12023453.entry.js +0 -1
  50. package/dist/cura/p-8b416bc6.system.js +0 -1
  51. package/dist/cura/p-a50716bc.js +0 -2
  52. package/dist/cura/p-e447016d.system.js +0 -2
  53. package/dist/cura/p-e8fadcfa.system.entry.js +0 -1
  54. package/dist/esm-es5/index-c3d31886.js +0 -2
  55. package/dist/loader/index.d.ts +0 -12
package/dist/collection/components/cura-page-template/cura-page-template.css CHANGED
@@ -19,86 +19,86 @@
19
19
  * Responsive media for xlarge only.
20
20
  * Use: @include xlarge-only() { ... }
21
21
  */
22
- :host {
22
+ .cura-template {
23
23
  display: block;
24
24
  }
25
- :host .grid-template {
25
+ .cura-template .grid-template {
26
26
  display: grid;
27
27
  grid-template-rows: auto;
28
28
  grid-template-columns: auto;
29
29
  grid-template-areas: "sub-header" "header" "pre-content" "content-container" "post-body" "footer" "sub-footer";
30
30
  }
31
- :host .grid-template #sub-header {
31
+ .cura-template .grid-template #sub-header {
32
32
  grid-area: sub-header;
33
33
  }
34
- :host .grid-template #header {
34
+ .cura-template .grid-template #header {
35
35
  grid-area: header;
36
36
  }
37
- :host .grid-template #pre-content {
37
+ .cura-template .grid-template #pre-content {
38
38
  grid-area: pre-content;
39
39
  }
40
- :host .grid-template #content-container {
40
+ .cura-template .grid-template #content-container {
41
41
  grid-area: content-container;
42
42
  }
43
- :host .grid-template #post-body {
43
+ .cura-template .grid-template #post-body {
44
44
  grid-area: post-body;
45
45
  }
46
- :host .grid-template #footer {
46
+ .cura-template .grid-template #footer {
47
47
  grid-area: footer;
48
48
  }
49
- :host .grid-template #sub-footer {
49
+ .cura-template .grid-template #sub-footer {
50
50
  grid-area: sub-footer;
51
51
  }
52
52
  @media (max-width: 360px) {
53
- :host .grid-template {
53
+ .cura-template .grid-template {
54
54
  padding: 0px;
55
55
  }
56
56
  }
57
57
  @media (min-width: 768px) and (max-width: 1365px) {
58
- :host .grid-template {
58
+ .cura-template .grid-template {
59
59
  padding: 0px;
60
60
  }
61
61
  }
62
62
  @media (min-width: 1366px) and (max-width: 1919px) {
63
- :host .grid-template {
63
+ .cura-template .grid-template {
64
64
  padding: 0px;
65
65
  }
66
- :host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
66
+ .cura-template .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
67
67
  margin-right: calc(var(--spacing) * 5px);
68
68
  }
69
- :host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
69
+ .cura-template .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
70
70
  margin-left: calc(var(--spacing) * 5px);
71
71
  }
72
- :host .grid-template #content-container {
72
+ .cura-template .grid-template #content-container {
73
73
  display: flex;
74
74
  }
75
- :host .grid-template #content-container #content {
75
+ .cura-template .grid-template #content-container #content {
76
76
  flex-grow: 1;
77
77
  }
78
- :host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right {
78
+ .cura-template .grid-template #content-container #sidebar-left, .cura-template .grid-template #content-container #sidebar-right {
79
79
  max-width: 20%;
80
80
  }
81
81
  }
82
82
  @media (min-width: 1920px) {
83
- :host .grid-template {
83
+ .cura-template .grid-template {
84
84
  padding: 0px;
85
85
  }
86
- :host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
86
+ .cura-template .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
87
87
  margin-right: calc(var(--spacing) * 7px);
88
88
  }
89
- :host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
89
+ .cura-template .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
90
90
  margin-left: calc(var(--spacing) * 7px);
91
91
  }
92
- :host .grid-template #content-container {
92
+ .cura-template .grid-template #content-container {
93
93
  display: flex;
94
94
  }
95
- :host .grid-template #content-container #content {
95
+ .cura-template .grid-template #content-container #content {
96
96
  flex-grow: 1;
97
97
  }
98
- :host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right {
98
+ .cura-template .grid-template #content-container #sidebar-left, .cura-template .grid-template #content-container #sidebar-right {
99
99
  max-width: 20%;
100
100
  }
101
- :host .grid-template #content-container.centered {
101
+ .cura-template .grid-template #content-container.centered {
102
102
  max-width: 1920px;
103
103
  justify-self: center;
104
104
  }
package/dist/collection/components/cura-page-template/cura-page-template.js CHANGED
@@ -14,10 +14,9 @@ export class CuraPageTemplate {
14
14
  return classes;
15
15
  }
16
16
  render() {
17
- 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' })))));
17
+ 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' })))));
18
18
  }
19
19
  static get is() { return "cura-page-template"; }
20
- static get encapsulation() { return "shadow"; }
21
20
  static get originalStyleUrls() {
22
21
  return {
23
22
  "$": ["cura-page-template.scss"]
package/dist/collection/components/text/cura-display/cura-display.css CHANGED
@@ -19,12 +19,12 @@
19
19
  * Responsive media for xlarge only.
20
20
  * Use: @include xlarge-only() { ... }
21
21
  */
22
- :host {
22
+ .cura-display {
23
23
  display: block;
24
24
  font-size: var(--font-size);
25
25
  text-transform: uppercase;
26
26
  }
27
- :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
27
+ .cura-display h1, .cura-display h2, .cura-display h3, .cura-display h4, .cura-display h5, .cura-display h6 {
28
28
  font-family: var(--font-family);
29
29
  font-size: 4.285em;
30
30
  font-weight: var(--font-weight-black);
@@ -34,49 +34,50 @@
34
34
  margin-block-start: var(--block-margin);
35
35
  margin-block-end: var(--block-margin);
36
36
  }
37
- :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
37
+ .cura-display h1.large, .cura-display h2.large, .cura-display h3.large, .cura-display h4.large, .cura-display h5.large, .cura-display h6.large {
38
38
  font-size: 6.21em;
39
39
  }
40
- :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
40
+ .cura-display h1.small, .cura-display h2.small, .cura-display h3.small, .cura-display h4.small, .cura-display h5.small, .cura-display h6.small {
41
41
  font-size: 3em;
42
42
  font-weight: var(--font-weight-bold);
43
43
  }
44
44
  @media (min-width: 768px) and (max-width: 1365px) {
45
- :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
45
+ .cura-display h1, .cura-display h2, .cura-display h3, .cura-display h4, .cura-display h5, .cura-display h6 {
46
46
  font-size: 4.92em;
47
47
  }
48
- :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
48
+ .cura-display h1.large, .cura-display h2.large, .cura-display h3.large, .cura-display h4.large, .cura-display h5.large, .cura-display h6.large {
49
49
  font-size: 7.07em;
50
50
  }
51
- :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
51
+ .cura-display h1.small, .cura-display h2.small, .cura-display h3.small, .cura-display h4.small, .cura-display h5.small, .cura-display h6.small {
52
52
  font-size: 3.428em;
53
53
  }
54
54
  }
55
55
  @media (min-width: 1366px) {
56
- :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
56
+ .cura-display h1, .cura-display h2, .cura-display h3, .cura-display h4, .cura-display h5, .cura-display h6 {
57
57
  font-size: 6.14em;
58
58
  line-height: 125%;
59
59
  }
60
- :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
60
+ .cura-display h1.large, .cura-display h2.large, .cura-display h3.large, .cura-display h4.large, .cura-display h5.large, .cura-display h6.large {
61
61
  font-size: 8.857em;
62
62
  letter-spacing: -6%;
63
63
  }
64
- :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
64
+ .cura-display h1.small, .cura-display h2.small, .cura-display h3.small, .cura-display h4.small, .cura-display h5.small, .cura-display h6.small {
65
65
  font-size: 4.285em;
66
66
  letter-spacing: -2%;
67
67
  }
68
68
  }
69
- :host ::slotted(b), :host ::slotted(strong) {
69
+ .cura-display b,
70
+ .cura-display strong {
70
71
  font-weight: var(--font-weight-bold);
71
72
  }
72
- :host ::slotted(a) {
73
+ .cura-display a {
73
74
  font-weight: var(--font-weight-bold);
74
75
  color: var(--color-link);
75
76
  text-decoration: none;
76
77
  text-underline-offset: 10%;
77
78
  cursor: pointer;
78
79
  }
79
- :host ::slotted(abbr) {
80
+ .cura-display abbr {
80
81
  color: var(--color-link);
81
82
  text-decoration: underline dashed 1px var(--color-link);
82
83
  text-underline-offset: 10%;
package/dist/collection/components/text/cura-display/cura-display.js CHANGED
@@ -67,10 +67,9 @@ export class CuraDisplay {
67
67
  return tags[`${this.level}`] || tags['default'];
68
68
  }
69
69
  render() {
70
- return (h(Host, null, this.getHeadingTag()));
70
+ return (h(Host, { class: "cura-display" }, this.getHeadingTag()));
71
71
  }
72
72
  static get is() { return "cura-display"; }
73
- static get encapsulation() { return "shadow"; }
74
73
  static get originalStyleUrls() {
75
74
  return {
76
75
  "$": ["cura-display.scss"]
package/dist/collection/components/text/cura-heading/cura-heading.css CHANGED
@@ -19,11 +19,11 @@
19
19
  * Responsive media for xlarge only.
20
20
  * Use: @include xlarge-only() { ... }
21
21
  */
22
- :host {
22
+ .cura-heading {
23
23
  display: block;
24
24
  font-size: var(--font-size);
25
25
  }
26
- :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
26
+ .cura-heading h1, .cura-heading h2, .cura-heading h3, .cura-heading h4, .cura-heading h5, .cura-heading h6 {
27
27
  font-family: var(--font-family);
28
28
  font-size: 1.71em;
29
29
  font-weight: var(--font-weight-regular);
@@ -33,58 +33,58 @@
33
33
  margin-block-start: var(--block-margin);
34
34
  margin-block-end: var(--block-margin);
35
35
  }
36
- :host h1.bold-weight, :host h2.bold-weight, :host h3.bold-weight, :host h4.bold-weight, :host h5.bold-weight, :host h6.bold-weight {
36
+ .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 {
37
37
  font-weight: var(--font-weight-medium);
38
38
  }
39
- :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
39
+ .cura-heading h1.large, .cura-heading h2.large, .cura-heading h3.large, .cura-heading h4.large, .cura-heading h5.large, .cura-heading h6.large {
40
40
  font-size: 2.07em;
41
41
  letter-spacing: -2%;
42
42
  }
43
- :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
43
+ .cura-heading h1.small, .cura-heading h2.small, .cura-heading h3.small, .cura-heading h4.small, .cura-heading h5.small, .cura-heading h6.small {
44
44
  font-size: 1.214em;
45
45
  line-height: 150%;
46
46
  letter-spacing: 0%;
47
47
  }
48
- :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 {
48
+ .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 {
49
49
  font-weight: var(--font-weight-bold);
50
50
  }
51
51
  @media (min-width: 768px) and (max-width: 1365px) {
52
- :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
52
+ .cura-heading h1, .cura-heading h2, .cura-heading h3, .cura-heading h4, .cura-heading h5, .cura-heading h6 {
53
53
  font-size: 2em;
54
54
  }
55
- :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
55
+ .cura-heading h1.large, .cura-heading h2.large, .cura-heading h3.large, .cura-heading h4.large, .cura-heading h5.large, .cura-heading h6.large {
56
56
  font-size: 2.357em;
57
57
  }
58
- :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
58
+ .cura-heading h1.small, .cura-heading h2.small, .cura-heading h3.small, .cura-heading h4.small, .cura-heading h5.small, .cura-heading h6.small {
59
59
  font-size: 1.357em;
60
60
  }
61
61
  }
62
62
  @media (min-width: 1366px) {
63
- :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
63
+ .cura-heading h1, .cura-heading h2, .cura-heading h3, .cura-heading h4, .cura-heading h5, .cura-heading h6 {
64
64
  font-size: 2.5em;
65
65
  line-height: 135%;
66
66
  letter-spacing: -2%;
67
67
  }
68
- :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
68
+ .cura-heading h1.large, .cura-heading h2.large, .cura-heading h3.large, .cura-heading h4.large, .cura-heading h5.large, .cura-heading h6.large {
69
69
  font-size: 2.92em;
70
70
  }
71
- :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
71
+ .cura-heading h1.small, .cura-heading h2.small, .cura-heading h3.small, .cura-heading h4.small, .cura-heading h5.small, .cura-heading h6.small {
72
72
  font-size: 1.71em;
73
73
  line-height: 160%;
74
74
  letter-spacing: 0%;
75
75
  }
76
76
  }
77
- :host ::slotted(b), :host ::slotted(strong) {
77
+ .cura-heading b, .cura-heading strong {
78
78
  font-weight: var(--font-weight-bold);
79
79
  }
80
- :host ::slotted(a) {
80
+ .cura-heading a {
81
81
  font-weight: var(--font-weight-bold);
82
82
  color: var(--color-link);
83
83
  text-decoration: none;
84
84
  text-underline-offset: 10%;
85
85
  cursor: pointer;
86
86
  }
87
- :host ::slotted(abbr) {
87
+ .cura-heading abbr {
88
88
  color: var(--color-link);
89
89
  text-decoration: underline dashed 1px var(--color-link);
90
90
  text-underline-offset: 10%;
package/dist/collection/components/text/cura-heading/cura-heading.js CHANGED
@@ -75,10 +75,9 @@ export class CuraHeading {
75
75
  return tags[`${this.level}`] || tags['default'];
76
76
  }
77
77
  render() {
78
- return (h(Host, null, this.getHeadingTag()));
78
+ return (h(Host, { class: "cura-heading" }, this.getHeadingTag()));
79
79
  }
80
80
  static get is() { return "cura-heading"; }
81
- static get encapsulation() { return "shadow"; }
82
81
  static get originalStyleUrls() {
83
82
  return {
84
83
  "$": ["cura-heading.scss"]
package/dist/collection/components/text/cura-paragraph/cura-paragraph.css CHANGED
@@ -19,11 +19,11 @@
19
19
  * Responsive media for xlarge only.
20
20
  * Use: @include xlarge-only() { ... }
21
21
  */
22
- :host {
22
+ .cura-paragraph {
23
23
  display: block;
24
24
  font-size: var(--font-size);
25
25
  }
26
- :host p {
26
+ .cura-paragraph p {
27
27
  font-family: var(--font-family);
28
28
  font-size: var(--font-size);
29
29
  font-weight: var(--font-weight-regular);
@@ -33,70 +33,71 @@
33
33
  margin-block-start: var(--block-margin);
34
34
  margin-block-end: var(--block-margin);
35
35
  }
36
- :host p.large {
36
+ .cura-paragraph p.large {
37
37
  font-size: 1.21em;
38
38
  line-height: 150%;
39
39
  letter-spacing: 0%;
40
40
  }
41
- :host p.small {
41
+ .cura-paragraph p.small {
42
42
  font-size: 0.85em;
43
43
  line-height: 135%;
44
44
  letter-spacing: 4%;
45
45
  }
46
- :host p.caption {
46
+ .cura-paragraph p.caption {
47
47
  font-size: 0.71em;
48
48
  line-height: 135%;
49
49
  letter-spacing: 6%;
50
50
  }
51
51
  @media (min-width: 768px) and (max-width: 1365px) {
52
- :host p {
52
+ .cura-paragraph p {
53
53
  font-size: 1.14em;
54
54
  line-height: 145%;
55
55
  }
56
- :host p.large {
56
+ .cura-paragraph p.large {
57
57
  font-size: 1.35em;
58
58
  line-height: 150%;
59
59
  }
60
- :host p.small {
60
+ .cura-paragraph p.small {
61
61
  font-size: 1em;
62
62
  line-height: 135%;
63
63
  }
64
- :host p.caption {
64
+ .cura-paragraph p.caption {
65
65
  font-size: 0.85em;
66
66
  line-height: 135%;
67
67
  letter-spacing: 6%;
68
68
  }
69
69
  }
70
70
  @media (min-width: 1366px) {
71
- :host p {
71
+ .cura-paragraph p {
72
72
  font-size: 1.42em;
73
73
  line-height: 150%;
74
74
  letter-spacing: 0%;
75
75
  }
76
- :host p.large {
76
+ .cura-paragraph p.large {
77
77
  font-size: 1.71em;
78
78
  line-height: 160%;
79
79
  }
80
- :host p.small {
80
+ .cura-paragraph p.small {
81
81
  font-size: 1.21em;
82
82
  line-height: 145%;
83
83
  letter-spacing: 0%;
84
84
  }
85
- :host p.caption {
85
+ .cura-paragraph p.caption {
86
86
  font-size: 1em;
87
87
  line-height: 145%;
88
88
  letter-spacing: 2%;
89
89
  }
90
90
  }
91
- :host ::slotted(b), :host ::slotted(strong) {
91
+ .cura-paragraph b,
92
+ .cura-paragraph strong {
92
93
  font-weight: var(--font-weight-bold);
93
94
  }
94
- :host ::slotted(a) {
95
+ .cura-paragraph a {
95
96
  font-weight: var(--font-weight-medium);
96
97
  color: var(--color-link);
97
98
  text-underline-offset: 10%;
98
99
  }
99
- :host ::slotted(abbr) {
100
+ .cura-paragraph abbr {
100
101
  color: var(--color-link);
101
102
  text-decoration: underline dashed 1px var(--color-link);
102
103
  text-underline-offset: 10%;
package/dist/collection/components/text/cura-paragraph/cura-paragraph.js CHANGED
@@ -51,10 +51,9 @@ export class CuraParagraph {
51
51
  this.host.style.setProperty(prop, value);
52
52
  }
53
53
  render() {
54
- return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
54
+ return (h(Host, { class: "cura-paragraph" }, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
55
55
  }
56
56
  static get is() { return "cura-paragraph"; }
57
- static get encapsulation() { return "shadow"; }
58
57
  static get originalStyleUrls() {
59
58
  return {
60
59
  "$": ["cura-paragraph.scss"]
package/dist/components/cura-display.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- 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}";
3
+ 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}";
4
4
 
5
5
  const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
7
7
  super();
8
8
  this.__registerHost();
9
- this.__attachShadow();
10
9
  /**
11
10
  * Heading level for semantics.
12
11
  * Values: 1(default)-6.
@@ -73,11 +72,11 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
73
72
  return tags[`${this.level}`] || tags['default'];
74
73
  }
75
74
  render() {
76
- return (h(Host, null, this.getHeadingTag()));
75
+ return (h(Host, { class: "cura-display" }, this.getHeadingTag()));
77
76
  }
78
77
  get host() { return this; }
79
78
  static get style() { return curaDisplayCss; }
80
- }, [1, "cura-display", {
79
+ }, [4, "cura-display", {
81
80
  "level": [514],
82
81
  "size": [513],
83
82
  "inverted": [516],
package/dist/components/cura-heading.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- 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}";
3
+ 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}";
4
4
 
5
5
  const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
7
7
  super();
8
8
  this.__registerHost();
9
- this.__attachShadow();
10
9
  /**
11
10
  * Heading level for semantics.
12
11
  * Values: 1(default)-6.
@@ -81,11 +80,11 @@ const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
81
80
  return tags[`${this.level}`] || tags['default'];
82
81
  }
83
82
  render() {
84
- return (h(Host, null, this.getHeadingTag()));
83
+ return (h(Host, { class: "cura-heading" }, this.getHeadingTag()));
85
84
  }
86
85
  get host() { return this; }
87
86
  static get style() { return curaHeadingCss; }
88
- }, [1, "cura-heading", {
87
+ }, [4, "cura-heading", {
89
88
  "level": [514],
90
89
  "size": [513],
91
90
  "weight": [513],
package/dist/components/cura-icon2.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- 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}";
3
+ 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}";
4
4
 
5
5
  const CuraIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
7
7
  super();
8
8
  this.__registerHost();
9
- this.__attachShadow();
10
9
  this.name = '';
11
10
  this.color = 'neutral-base';
12
11
  this.iconset = 'default';
@@ -43,7 +42,7 @@ const CuraIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
43
42
  this.host.style.setProperty(prop, value);
44
43
  }
45
44
  render() {
46
- 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}` }))));
45
+ 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}` }))));
47
46
  }
48
47
  get host() { return this; }
49
48
  static get watchers() { return {
@@ -52,7 +51,7 @@ const CuraIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
52
51
  "disabled": ["colorHandler"]
53
52
  }; }
54
53
  static get style() { return curaIconCss; }
55
- }, [1, "cura-icon", {
54
+ }, [0, "cura-icon", {
56
55
  "name": [513],
57
56
  "color": [1],
58
57
  "size": [8],
package/dist/components/cura-icons-view.js CHANGED
@@ -9,7 +9,6 @@ const CuraIconsView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
9
9
  constructor() {
10
10
  super();
11
11
  this.__registerHost();
12
- this.__attachShadow();
13
12
  this.sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];
14
13
  this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
15
14
  this.selected = '360';
@@ -21,7 +20,7 @@ const CuraIconsView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
21
20
  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))))));
22
21
  }
23
22
  static get style() { return curaIconsViewCss; }
24
- }, [1, "cura-icons-view", {
23
+ }, [0, "cura-icons-view", {
25
24
  "selected": [32]
26
25
  }]);
27
26
  function defineCustomElement$1() {
package/dist/components/cura-page-template.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- 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}}";
3
+ 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}}";
4
4
 
5
5
  const CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
7
7
  super();
8
8
  this.__registerHost();
9
- this.__attachShadow();
10
9
  this.contentwidth = 'default';
11
10
  }
12
11
  connectedCallback() {
@@ -20,11 +19,11 @@ const CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
20
19
  return classes;
21
20
  }
22
21
  render() {
23
- 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' })))));
22
+ 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' })))));
24
23
  }
25
24
  get host() { return this; }
26
25
  static get style() { return curaPageTemplateCss; }
27
- }, [1, "cura-page-template", {
26
+ }, [4, "cura-page-template", {
28
27
  "contentwidth": [513]
29
28
  }]);
30
29
  function defineCustomElement$1() {
package/dist/components/cura-paragraph.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- 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}";
3
+ 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}";
4
4
 
5
5
  const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
7
7
  super();
8
8
  this.__registerHost();
9
- this.__attachShadow();
10
9
  /**
11
10
  * Set size of body text.
12
11
  * Values: regular (default) | large | small | caption.
@@ -57,11 +56,11 @@ const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
57
56
  this.host.style.setProperty(prop, value);
58
57
  }
59
58
  render() {
60
- return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
59
+ return (h(Host, { class: "cura-paragraph" }, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
61
60
  }
62
61
  get host() { return this; }
63
62
  static get style() { return curaParagraphCss; }
64
- }, [1, "cura-paragraph", {
63
+ }, [4, "cura-paragraph", {
65
64
  "size": [513],
66
65
  "inverted": [516],
67
66
  "spotColor": [513, "spot-color"]