@rededor/cura-hydrate 0.5.0 → 0.5.2

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 (2) hide show
  1. package/index.js +189 -91
  2. package/package.json +2 -2
package/index.js CHANGED
@@ -5194,10 +5194,10 @@ const Static = {
5194
5194
  },
5195
5195
  large: {
5196
5196
  min: 993,
5197
- max: 1919
5197
+ max: 1920
5198
5198
  },
5199
5199
  xlarge: {
5200
- min: 1920,
5200
+ min: 1921,
5201
5201
  max: 4096
5202
5202
  }
5203
5203
  }
@@ -5232,7 +5232,7 @@ class CuraThemeColorsModule {
5232
5232
  */
5233
5233
  getColor(colorWithDepth = "primary-base", opacity = 1) {
5234
5234
  const { color, depth } = this.splitColorDepth(colorWithDepth);
5235
- const staticColor = this.getStatic(color, depth);
5235
+ const staticColor = this.getStatic(color, depth, opacity);
5236
5236
  if (staticColor)
5237
5237
  return staticColor;
5238
5238
  return this.getDynamic(color, depth, opacity);
@@ -5332,7 +5332,7 @@ class CuraThemeBreakpointsModule {
5332
5332
  get(size = null, position = null) {
5333
5333
  if (size) {
5334
5334
  const breakpoint = position ? Static.breakpoints[size][position] : Static.breakpoints[size];
5335
- if (breakpoint)
5335
+ if (breakpoint || breakpoint === 0)
5336
5336
  return breakpoint;
5337
5337
  }
5338
5338
  return Static.breakpoints;
@@ -6319,7 +6319,7 @@ class CuraAccordion {
6319
6319
  }; }
6320
6320
  }
6321
6321
 
6322
- const curaAccordionItemCss = "/*!@:host*/.sc-cura-accordion-item-h{display:block}/*!@:host .accordion-item*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item{width:100%}/*!@:host .accordion-item .label*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}/*!@:host .accordion-item .label::before*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}/*!@:host .accordion-item .label .label-container cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item cura-icon.sc-cura-accordion-item{margin-right:4px}/*!@:host .accordion-item .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-light)}/*!@:host .accordion-item .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-light) !important}/*!@:host .accordion-item .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-dark)}/*!@:host .accordion-item .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-dark) !important}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}/*!@:host .accordion-item .content .content-wrapper*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item .content-wrapper.sc-cura-accordion-item{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}/*!@:host .accordion-item.active .label .label-container*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--color-active-base)}/*!@:host .accordion-item.active .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-active-light)}/*!@:host .accordion-item.active .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-light) !important}/*!@:host .accordion-item.active .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-active-dark)}/*!@:host .accordion-item.active .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-dark) !important}/*!@:host .accordion-item.active .content*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .content.sc-cura-accordion-item{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}/*!@:host .accordion-item.inverted .label .label-container*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--neutral-lighter)}/*!@:host .accordion-item.inverted .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-lighter)}/*!@:host .accordion-item.inverted .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-lighter) !important}/*!@:host .accordion-item.inverted .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-light)}/*!@:host .accordion-item.inverted .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-light) !important}/*!@:host .accordion-item.active.inverted .label .label-container*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--neutral-purewhite)}/*!@:host .accordion-item.active.inverted .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-active-lighter)}/*!@:host .accordion-item.active.inverted .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-lighter) !important}/*!@:host .accordion-item.active.inverted .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-active-light)}/*!@:host .accordion-item.active.inverted .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-light) !important}@media (min-width: 768px) and (max-width: 1365px){/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{font-size:1.29em}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1.14em}}@media (min-width: 1366px){/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{font-size:1.29em}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1.14em}}";
6322
+ const curaAccordionItemCss = "/*!@:host*/.sc-cura-accordion-item-h{display:block}/*!@:host .accordion-item*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item{width:100%}/*!@:host .accordion-item .label*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}/*!@:host .accordion-item .label::before*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}/*!@:host .accordion-item .label .label-container cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item cura-icon.sc-cura-accordion-item{margin-right:4px}/*!@:host .accordion-item .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-light)}/*!@:host .accordion-item .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-light) !important}/*!@:host .accordion-item .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-dark)}/*!@:host .accordion-item .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-dark) !important}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}/*!@:host .accordion-item .content .content-wrapper*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item .content-wrapper.sc-cura-accordion-item{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}/*!@:host .accordion-item.active .label .label-container*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--color-active-base)}/*!@:host .accordion-item.active .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-active-light)}/*!@:host .accordion-item.active .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-light) !important}/*!@:host .accordion-item.active .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-active-dark)}/*!@:host .accordion-item.active .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-dark) !important}/*!@:host .accordion-item.active .content*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .content.sc-cura-accordion-item{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}/*!@:host .accordion-item.inverted .label .label-container*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--neutral-lighter)}/*!@:host .accordion-item.inverted .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-lighter)}/*!@:host .accordion-item.inverted .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-lighter) !important}/*!@:host .accordion-item.inverted .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-light)}/*!@:host .accordion-item.inverted .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-light) !important}/*!@:host .accordion-item.active.inverted .label .label-container*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--neutral-purewhite)}/*!@:host .accordion-item.active.inverted .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-active-lighter)}/*!@:host .accordion-item.active.inverted .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-lighter) !important}/*!@:host .accordion-item.active.inverted .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-active-light)}/*!@:host .accordion-item.active.inverted .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-light) !important}@media (min-width: 769px) and (max-width: 992px){/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{font-size:1.29em}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1.14em}}@media (min-width: 993px){/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{font-size:1.29em}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1.14em}}";
6323
6323
 
6324
6324
  class CuraAccordionItem {
6325
6325
  constructor(hostRef) {
@@ -6385,7 +6385,7 @@ class CuraButton {
6385
6385
  this.iconName = undefined;
6386
6386
  this.iconset = 'default';
6387
6387
  this.iconPosition = 'left';
6388
- this.iconOnly = undefined;
6388
+ this.iconOnly = false;
6389
6389
  this.href = undefined;
6390
6390
  this.target = "_self";
6391
6391
  this.color = 'accent';
@@ -6481,7 +6481,7 @@ class CuraButtonOutline {
6481
6481
  this.iconName = undefined;
6482
6482
  this.iconset = 'default';
6483
6483
  this.iconPosition = 'left';
6484
- this.iconOnly = undefined;
6484
+ this.iconOnly = false;
6485
6485
  this.href = undefined;
6486
6486
  this.target = "_self";
6487
6487
  this.color = 'accent';
@@ -6577,7 +6577,7 @@ class CuraButtonTransparent {
6577
6577
  this.iconName = undefined;
6578
6578
  this.iconset = 'default';
6579
6579
  this.iconPosition = 'left';
6580
- this.iconOnly = undefined;
6580
+ this.iconOnly = false;
6581
6581
  this.href = undefined;
6582
6582
  this.target = "_self";
6583
6583
  this.color = 'accent';
@@ -6662,93 +6662,105 @@ class CuraButtonTransparent {
6662
6662
  }; }
6663
6663
  }
6664
6664
 
6665
- const curaDisplayCss = "/*!@:host*/.sc-cura-display-h{display:block;font-size:var(--font-size);text-transform:uppercase}/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-display-h h1.sc-cura-display,.sc-cura-display-h h2.sc-cura-display,.sc-cura-display-h h3.sc-cura-display,.sc-cura-display-h h4.sc-cura-display,.sc-cura-display-h h5.sc-cura-display,.sc-cura-display-h h6.sc-cura-display{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*/.sc-cura-display-h h1.large.sc-cura-display,.sc-cura-display-h h2.large.sc-cura-display,.sc-cura-display-h h3.large.sc-cura-display,.sc-cura-display-h h4.large.sc-cura-display,.sc-cura-display-h h5.large.sc-cura-display,.sc-cura-display-h h6.large.sc-cura-display{font-size:6.21em}/*!@:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small*/.sc-cura-display-h h1.small.sc-cura-display,.sc-cura-display-h h2.small.sc-cura-display,.sc-cura-display-h h3.small.sc-cura-display,.sc-cura-display-h h4.small.sc-cura-display,.sc-cura-display-h h5.small.sc-cura-display,.sc-cura-display-h h6.small.sc-cura-display{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*/.sc-cura-display-h h1.sc-cura-display,.sc-cura-display-h h2.sc-cura-display,.sc-cura-display-h h3.sc-cura-display,.sc-cura-display-h h4.sc-cura-display,.sc-cura-display-h h5.sc-cura-display,.sc-cura-display-h h6.sc-cura-display{font-size:4.92em}/*!@:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large*/.sc-cura-display-h h1.large.sc-cura-display,.sc-cura-display-h h2.large.sc-cura-display,.sc-cura-display-h h3.large.sc-cura-display,.sc-cura-display-h h4.large.sc-cura-display,.sc-cura-display-h h5.large.sc-cura-display,.sc-cura-display-h h6.large.sc-cura-display{font-size:7.07em}/*!@:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small*/.sc-cura-display-h h1.small.sc-cura-display,.sc-cura-display-h h2.small.sc-cura-display,.sc-cura-display-h h3.small.sc-cura-display,.sc-cura-display-h h4.small.sc-cura-display,.sc-cura-display-h h5.small.sc-cura-display,.sc-cura-display-h h6.small.sc-cura-display{font-size:3.428em}}@media (min-width: 1366px){/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-display-h h1.sc-cura-display,.sc-cura-display-h h2.sc-cura-display,.sc-cura-display-h h3.sc-cura-display,.sc-cura-display-h h4.sc-cura-display,.sc-cura-display-h h5.sc-cura-display,.sc-cura-display-h h6.sc-cura-display{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*/.sc-cura-display-h h1.large.sc-cura-display,.sc-cura-display-h h2.large.sc-cura-display,.sc-cura-display-h h3.large.sc-cura-display,.sc-cura-display-h h4.large.sc-cura-display,.sc-cura-display-h h5.large.sc-cura-display,.sc-cura-display-h h6.large.sc-cura-display{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*/.sc-cura-display-h h1.small.sc-cura-display,.sc-cura-display-h h2.small.sc-cura-display,.sc-cura-display-h h3.small.sc-cura-display,.sc-cura-display-h h4.small.sc-cura-display,.sc-cura-display-h h5.small.sc-cura-display,.sc-cura-display-h h6.small.sc-cura-display{font-size:4.285em;letter-spacing:-2%}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-display-h .sc-cura-display-s>b,.sc-cura-display-h .sc-cura-display-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-display-h .sc-cura-display-s>a{font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}/*!@:host ::slotted(abbr)*/.sc-cura-display-h .sc-cura-display-s>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}";
6665
+ const curaDisplayCss = "/*!@:host*/.sc-cura-display-h{display:block;font-size:var(--font-size-base)}/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-display-h h1.sc-cura-display,.sc-cura-display-h h2.sc-cura-display,.sc-cura-display-h h3.sc-cura-display,.sc-cura-display-h h4.sc-cura-display,.sc-cura-display-h h5.sc-cura-display,.sc-cura-display-h h6.sc-cura-display{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}@media (min-width: 769px) and (max-width: 1920px){/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-display-h h1.sc-cura-display,.sc-cura-display-h h2.sc-cura-display,.sc-cura-display-h h3.sc-cura-display,.sc-cura-display-h h4.sc-cura-display,.sc-cura-display-h h5.sc-cura-display,.sc-cura-display-h h6.sc-cura-display{font-size:3.429em}}@media (min-width: 1921px){/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-display-h h1.sc-cura-display,.sc-cura-display-h h2.sc-cura-display,.sc-cura-display-h h3.sc-cura-display,.sc-cura-display-h h4.sc-cura-display,.sc-cura-display-h h5.sc-cura-display,.sc-cura-display-h h6.sc-cura-display{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-display-h .sc-cura-display-s>b,.sc-cura-display-h .sc-cura-display-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-display-h .sc-cura-display-s>a{font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}/*!@:host ::slotted(u)*/.sc-cura-display-h .sc-cura-display-s>u{text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-display-h .sc-cura-display-s>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}";
6666
6666
 
6667
6667
  class CuraDisplay {
6668
6668
  constructor(hostRef) {
6669
6669
  registerInstance(this, hostRef);
6670
+ this.theme = window.CuraAPI.theme;
6670
6671
  this.level = 1;
6671
- this.size = 'regular';
6672
- this.inverted = false;
6673
- this.spotColor = 'primary';
6672
+ this.spotColor = 'accent-dark';
6673
+ this.color = undefined;
6674
+ this.marginBlock = '1.25em';
6675
+ this.lineHeight = '120%';
6676
+ this.styles = {};
6677
+ }
6678
+ handleChangeColor() {
6679
+ this.setColors();
6674
6680
  }
6675
6681
  connectedCallback() {
6676
- this.weights = window.CuraAPI.theme.fonts.getWeights();
6677
6682
  this.setFontProperties();
6678
6683
  this.setColors();
6679
6684
  }
6680
- getClasses() {
6681
- const classes = {};
6682
- classes[this.size.toLowerCase()] = true;
6683
- return classes;
6684
- }
6685
6685
  setFontProperties() {
6686
+ this.weights = this.theme.fonts.getWeights();
6687
+ this.fontSizeBase = this.theme.fonts.getSize();
6686
6688
  this.styles = {
6687
6689
  '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
6688
6690
  '--font-size': window.CuraAPI.theme.fonts.getSize(),
6689
- '--font-weight-bold': this.weights.bold,
6690
- '--font-weight-black': this.weights.black
6691
+ '--font-weight-bold': this.weights.bold
6691
6692
  };
6692
- this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
6693
- this.setHostProperty('--block-margin', '0.5em');
6694
6693
  }
6695
- setColors() {
6696
- const fontColor = this.inverted
6697
- ? window.CuraAPI.theme.colors.getColor('neutral-white')
6698
- : window.CuraAPI.theme.fonts.getColor();
6699
- this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
6700
- this.styles['--color-link'] = this.inverted
6701
- ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
6702
- : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
6694
+ hostCSSProperties() {
6695
+ return {
6696
+ '--margin-block': this.marginBlock,
6697
+ '--font-size-base': this.fontSizeBase,
6698
+ '--line-height': this.lineHeight
6699
+ };
6703
6700
  }
6704
- setHostProperty(prop, value) {
6705
- this.host.style.setProperty(prop, value);
6701
+ setColors() {
6702
+ const fontColor = this.color
6703
+ ? this.theme.colors.getColor(this.color)
6704
+ : this.theme.fonts.getColor();
6705
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
6706
6706
  }
6707
6707
  getHeadingTag() {
6708
6708
  const tags = {
6709
- '1': hAsync("h1", { style: this.styles, class: this.getClasses() }, hAsync("slot", null)),
6710
- '2': hAsync("h2", { style: this.styles, class: this.getClasses() }, hAsync("slot", null)),
6711
- '3': hAsync("h3", { style: this.styles, class: this.getClasses() }, hAsync("slot", null)),
6712
- '4': hAsync("h4", { style: this.styles, class: this.getClasses() }, hAsync("slot", null)),
6713
- '5': hAsync("h5", { style: this.styles, class: this.getClasses() }, hAsync("slot", null)),
6714
- '6': hAsync("h6", { style: this.styles, class: this.getClasses() }, hAsync("slot", null)),
6715
- 'default': hAsync("h1", { style: this.styles, class: this.getClasses() }, hAsync("slot", null))
6709
+ '1': hAsync("h1", { style: this.styles }, hAsync("slot", null)),
6710
+ '2': hAsync("h2", { style: this.styles }, hAsync("slot", null)),
6711
+ '3': hAsync("h3", { style: this.styles }, hAsync("slot", null)),
6712
+ '4': hAsync("h4", { style: this.styles }, hAsync("slot", null)),
6713
+ '5': hAsync("h5", { style: this.styles }, hAsync("slot", null)),
6714
+ '6': hAsync("h6", { style: this.styles }, hAsync("slot", null)),
6715
+ 'default': hAsync("h1", { style: this.styles }, hAsync("slot", null))
6716
6716
  };
6717
6717
  return tags[`${this.level}`] || tags['default'];
6718
6718
  }
6719
6719
  render() {
6720
- return (hAsync(Host, null, this.getHeadingTag()));
6720
+ return (hAsync(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
6721
6721
  }
6722
6722
  get host() { return getElement(this); }
6723
+ static get watchers() { return {
6724
+ "color": ["handleChangeColor"],
6725
+ "spotColor": ["handleChangeColor"]
6726
+ }; }
6723
6727
  static get style() { return curaDisplayCss; }
6724
6728
  static get cmpMeta() { return {
6725
6729
  "$flags$": 9,
6726
6730
  "$tagName$": "cura-display",
6727
6731
  "$members$": {
6728
6732
  "level": [514],
6729
- "size": [513],
6730
- "inverted": [516],
6731
- "spotColor": [513, "spot-color"]
6733
+ "spotColor": [513, "spot-color"],
6734
+ "color": [1],
6735
+ "marginBlock": [513, "margin-block"],
6736
+ "lineHeight": [513, "line-height"],
6737
+ "styles": [32]
6732
6738
  },
6733
6739
  "$listeners$": undefined,
6734
6740
  "$lazyBundleId$": "-",
6735
- "$attrsToReflect$": [["level", "level"], ["size", "size"], ["inverted", "inverted"], ["spotColor", "spot-color"]]
6741
+ "$attrsToReflect$": [["level", "level"], ["spotColor", "spot-color"], ["marginBlock", "margin-block"], ["lineHeight", "line-height"]]
6736
6742
  }; }
6737
6743
  }
6738
6744
 
6739
- const curaHeadingCss = "/*!@:host*/.sc-cura-heading-h{display:block;font-size:var(--font-size)}/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{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*/.sc-cura-heading-h h1.bold-weight.sc-cura-heading,.sc-cura-heading-h h2.bold-weight.sc-cura-heading,.sc-cura-heading-h h3.bold-weight.sc-cura-heading,.sc-cura-heading-h h4.bold-weight.sc-cura-heading,.sc-cura-heading-h h5.bold-weight.sc-cura-heading,.sc-cura-heading-h h6.bold-weight.sc-cura-heading{font-weight:var(--font-weight-medium)}/*!@:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large*/.sc-cura-heading-h h1.large.sc-cura-heading,.sc-cura-heading-h h2.large.sc-cura-heading,.sc-cura-heading-h h3.large.sc-cura-heading,.sc-cura-heading-h h4.large.sc-cura-heading,.sc-cura-heading-h h5.large.sc-cura-heading,.sc-cura-heading-h h6.large.sc-cura-heading{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*/.sc-cura-heading-h h1.small.sc-cura-heading,.sc-cura-heading-h h2.small.sc-cura-heading,.sc-cura-heading-h h3.small.sc-cura-heading,.sc-cura-heading-h h4.small.sc-cura-heading,.sc-cura-heading-h h5.small.sc-cura-heading,.sc-cura-heading-h h6.small.sc-cura-heading{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*/.sc-cura-heading-h h1.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h2.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h3.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h4.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h5.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h6.small.bold-weight.sc-cura-heading{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*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{font-size:2em}/*!@:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large*/.sc-cura-heading-h h1.large.sc-cura-heading,.sc-cura-heading-h h2.large.sc-cura-heading,.sc-cura-heading-h h3.large.sc-cura-heading,.sc-cura-heading-h h4.large.sc-cura-heading,.sc-cura-heading-h h5.large.sc-cura-heading,.sc-cura-heading-h h6.large.sc-cura-heading{font-size:2.357em}/*!@:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small*/.sc-cura-heading-h h1.small.sc-cura-heading,.sc-cura-heading-h h2.small.sc-cura-heading,.sc-cura-heading-h h3.small.sc-cura-heading,.sc-cura-heading-h h4.small.sc-cura-heading,.sc-cura-heading-h h5.small.sc-cura-heading,.sc-cura-heading-h h6.small.sc-cura-heading{font-size:1.357em}}@media (min-width: 1366px){/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{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*/.sc-cura-heading-h h1.large.sc-cura-heading,.sc-cura-heading-h h2.large.sc-cura-heading,.sc-cura-heading-h h3.large.sc-cura-heading,.sc-cura-heading-h h4.large.sc-cura-heading,.sc-cura-heading-h h5.large.sc-cura-heading,.sc-cura-heading-h h6.large.sc-cura-heading{font-size:2.92em}/*!@:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small*/.sc-cura-heading-h h1.small.sc-cura-heading,.sc-cura-heading-h h2.small.sc-cura-heading,.sc-cura-heading-h h3.small.sc-cura-heading,.sc-cura-heading-h h4.small.sc-cura-heading,.sc-cura-heading-h h5.small.sc-cura-heading,.sc-cura-heading-h h6.small.sc-cura-heading{font-size:1.71em;line-height:160%;letter-spacing:0%}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-heading-h .sc-cura-heading-s>b,.sc-cura-heading-h .sc-cura-heading-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-heading-h .sc-cura-heading-s>a{font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}/*!@:host ::slotted(abbr)*/.sc-cura-heading-h .sc-cura-heading-s>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}";
6745
+ const curaHeadingCss = "/*!@:host*/.sc-cura-heading-h{display:block;font-size:var(--font-size-base)}/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}/*!@:host h1.bold-weight, :host h2.bold-weight, :host h3.bold-weight, :host h4.bold-weight, :host h5.bold-weight, :host h6.bold-weight*/.sc-cura-heading-h h1.bold-weight.sc-cura-heading,.sc-cura-heading-h h2.bold-weight.sc-cura-heading,.sc-cura-heading-h h3.bold-weight.sc-cura-heading,.sc-cura-heading-h h4.bold-weight.sc-cura-heading,.sc-cura-heading-h h5.bold-weight.sc-cura-heading,.sc-cura-heading-h h6.bold-weight.sc-cura-heading{font-weight:var(--font-weight-medium)}/*!@:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large*/.sc-cura-heading-h h1.large.sc-cura-heading,.sc-cura-heading-h h2.large.sc-cura-heading,.sc-cura-heading-h h3.large.sc-cura-heading,.sc-cura-heading-h h4.large.sc-cura-heading,.sc-cura-heading-h h5.large.sc-cura-heading,.sc-cura-heading-h h6.large.sc-cura-heading{font-size:2.071em;letter-spacing:-0.58px}/*!@:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small*/.sc-cura-heading-h h1.small.sc-cura-heading,.sc-cura-heading-h h2.small.sc-cura-heading,.sc-cura-heading-h h3.small.sc-cura-heading,.sc-cura-heading-h h4.small.sc-cura-heading,.sc-cura-heading-h h5.small.sc-cura-heading,.sc-cura-heading-h h6.small.sc-cura-heading{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}/*!@:host h1.small.bold-weight, :host h1.small ::slotted(b), :host h1.small ::slotted(strong), :host h2.small.bold-weight, :host h2.small ::slotted(b), :host h2.small ::slotted(strong), :host h3.small.bold-weight, :host h3.small ::slotted(b), :host h3.small ::slotted(strong), :host h4.small.bold-weight, :host h4.small ::slotted(b), :host h4.small ::slotted(strong), :host h5.small.bold-weight, :host h5.small ::slotted(b), :host h5.small ::slotted(strong), :host h6.small.bold-weight, :host h6.small ::slotted(b), :host h6.small ::slotted(strong)*/.sc-cura-heading-h h1.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h1.small .sc-cura-heading-s>b,.sc-cura-heading-h h1.small .sc-cura-heading-s>strong,.sc-cura-heading-h h2.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h2.small .sc-cura-heading-s>b,.sc-cura-heading-h h2.small .sc-cura-heading-s>strong,.sc-cura-heading-h h3.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h3.small .sc-cura-heading-s>b,.sc-cura-heading-h h3.small .sc-cura-heading-s>strong,.sc-cura-heading-h h4.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h4.small .sc-cura-heading-s>b,.sc-cura-heading-h h4.small .sc-cura-heading-s>strong,.sc-cura-heading-h h5.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h5.small .sc-cura-heading-s>b,.sc-cura-heading-h h5.small .sc-cura-heading-s>strong,.sc-cura-heading-h h6.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h6.small .sc-cura-heading-s>b,.sc-cura-heading-h h6.small .sc-cura-heading-s>strong{font-weight:var(--font-weight-bold)}/*!@:host h1.xsmall, :host h2.xsmall, :host h3.xsmall, :host h4.xsmall, :host h5.xsmall, :host h6.xsmall*/.sc-cura-heading-h h1.xsmall.sc-cura-heading,.sc-cura-heading-h h2.xsmall.sc-cura-heading,.sc-cura-heading-h h3.xsmall.sc-cura-heading,.sc-cura-heading-h h4.xsmall.sc-cura-heading,.sc-cura-heading-h h5.xsmall.sc-cura-heading,.sc-cura-heading-h h6.xsmall.sc-cura-heading{font-size:0.714em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}/*!@:host h1.xsmall.bold-weight, :host h1.xsmall ::slotted(b), :host h1.xsmall ::slotted(strong), :host h2.xsmall.bold-weight, :host h2.xsmall ::slotted(b), :host h2.xsmall ::slotted(strong), :host h3.xsmall.bold-weight, :host h3.xsmall ::slotted(b), :host h3.xsmall ::slotted(strong), :host h4.xsmall.bold-weight, :host h4.xsmall ::slotted(b), :host h4.xsmall ::slotted(strong), :host h5.xsmall.bold-weight, :host h5.xsmall ::slotted(b), :host h5.xsmall ::slotted(strong), :host h6.xsmall.bold-weight, :host h6.xsmall ::slotted(b), :host h6.xsmall ::slotted(strong)*/.sc-cura-heading-h h1.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h1.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h1.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h2.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h2.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h2.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h3.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h3.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h3.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h4.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h4.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h4.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h5.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h5.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h5.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h6.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h6.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h6.xsmall .sc-cura-heading-s>strong{font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{font-size:2em}/*!@:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large*/.sc-cura-heading-h h1.large.sc-cura-heading,.sc-cura-heading-h h2.large.sc-cura-heading,.sc-cura-heading-h h3.large.sc-cura-heading,.sc-cura-heading-h h4.large.sc-cura-heading,.sc-cura-heading-h h5.large.sc-cura-heading,.sc-cura-heading-h h6.large.sc-cura-heading{font-size:2.357em;letter-spacing:-0.66px}/*!@:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small*/.sc-cura-heading-h h1.small.sc-cura-heading,.sc-cura-heading-h h2.small.sc-cura-heading,.sc-cura-heading-h h3.small.sc-cura-heading,.sc-cura-heading-h h4.small.sc-cura-heading,.sc-cura-heading-h h5.small.sc-cura-heading,.sc-cura-heading-h h6.small.sc-cura-heading{font-size:1.357em}/*!@:host h1.xsmall, :host h2.xsmall, :host h3.xsmall, :host h4.xsmall, :host h5.xsmall, :host h6.xsmall*/.sc-cura-heading-h h1.xsmall.sc-cura-heading,.sc-cura-heading-h h2.xsmall.sc-cura-heading,.sc-cura-heading-h h3.xsmall.sc-cura-heading,.sc-cura-heading-h h4.xsmall.sc-cura-heading,.sc-cura-heading-h h5.xsmall.sc-cura-heading,.sc-cura-heading-h h6.xsmall.sc-cura-heading{font-size:0.857em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}/*!@:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large*/.sc-cura-heading-h h1.large.sc-cura-heading,.sc-cura-heading-h h2.large.sc-cura-heading,.sc-cura-heading-h h3.large.sc-cura-heading,.sc-cura-heading-h h4.large.sc-cura-heading,.sc-cura-heading-h h5.large.sc-cura-heading,.sc-cura-heading-h h6.large.sc-cura-heading{font-size:2.929em}/*!@:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small*/.sc-cura-heading-h h1.small.sc-cura-heading,.sc-cura-heading-h h2.small.sc-cura-heading,.sc-cura-heading-h h3.small.sc-cura-heading,.sc-cura-heading-h h4.small.sc-cura-heading,.sc-cura-heading-h h5.small.sc-cura-heading,.sc-cura-heading-h h6.small.sc-cura-heading{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}/*!@:host h1.xsmall, :host h2.xsmall, :host h3.xsmall, :host h4.xsmall, :host h5.xsmall, :host h6.xsmall*/.sc-cura-heading-h h1.xsmall.sc-cura-heading,.sc-cura-heading-h h2.xsmall.sc-cura-heading,.sc-cura-heading-h h3.xsmall.sc-cura-heading,.sc-cura-heading-h h4.xsmall.sc-cura-heading,.sc-cura-heading-h h5.xsmall.sc-cura-heading,.sc-cura-heading-h h6.xsmall.sc-cura-heading{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-heading-h .sc-cura-heading-s>b,.sc-cura-heading-h .sc-cura-heading-s>strong{font-weight:var(--font-weight-medium)}/*!@:host ::slotted(a)*/.sc-cura-heading-h .sc-cura-heading-s>a{font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}/*!@:host ::slotted(u)*/.sc-cura-heading-h .sc-cura-heading-s>u{text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-heading-h .sc-cura-heading-s>abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}/*!@:host ::slotted(i), :host ::slotted(em)*/.sc-cura-heading-h .sc-cura-heading-s>i,.sc-cura-heading-h .sc-cura-heading-s>em{font-weight:var(--font-weight-medium)}";
6740
6746
 
6741
6747
  class CuraHeading {
6742
6748
  constructor(hostRef) {
6743
6749
  registerInstance(this, hostRef);
6750
+ this.theme = window.CuraAPI.theme;
6744
6751
  this.level = 1;
6745
- this.size = 'regular';
6752
+ this.size = 'medium';
6746
6753
  this.weight = 'regular';
6747
- this.inverted = false;
6748
- this.spotColor = 'primary';
6754
+ this.spotColor = 'accent-dark';
6755
+ this.color = undefined;
6756
+ this.marginBlock = '1.25em';
6757
+ this.lineHeight = '130%';
6758
+ this.styles = {};
6759
+ }
6760
+ handleChangeColor() {
6761
+ this.setColors();
6749
6762
  }
6750
6763
  connectedCallback() {
6751
- this.weights = window.CuraAPI.theme.fonts.getWeights();
6752
6764
  this.setFontProperties();
6753
6765
  this.setColors();
6754
6766
  }
@@ -6759,28 +6771,28 @@ class CuraHeading {
6759
6771
  return classes;
6760
6772
  }
6761
6773
  setFontProperties() {
6774
+ this.weights = this.theme.fonts.getWeights();
6775
+ this.fontSizeBase = this.theme.fonts.getSize();
6762
6776
  this.styles = {
6763
6777
  '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
6764
- '--font-size': window.CuraAPI.theme.fonts.getSize(),
6765
6778
  '--font-weight-regular': this.weights.regular,
6766
6779
  '--font-weight-medium': this.weights.medium,
6767
6780
  '--font-weight-bold': this.weights.bold,
6768
6781
  '--font-weight-black': this.weights.black
6769
6782
  };
6770
- this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
6771
- this.setHostProperty('--block-margin', '0.5em');
6772
6783
  }
6773
- setColors() {
6774
- const fontColor = this.inverted
6775
- ? window.CuraAPI.theme.colors.getColor('neutral-white')
6776
- : window.CuraAPI.theme.fonts.getColor();
6777
- this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
6778
- this.styles['--color-link'] = this.inverted
6779
- ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
6780
- : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
6784
+ hostCSSProperties() {
6785
+ return {
6786
+ '--margin-block': this.marginBlock,
6787
+ '--font-size-base': this.fontSizeBase,
6788
+ '--line-height': this.lineHeight
6789
+ };
6781
6790
  }
6782
- setHostProperty(prop, value) {
6783
- this.host.style.setProperty(prop, value);
6791
+ setColors() {
6792
+ const fontColor = this.color
6793
+ ? this.theme.colors.getColor(this.color)
6794
+ : this.theme.fonts.getColor();
6795
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
6784
6796
  }
6785
6797
  getHeadingTag() {
6786
6798
  const tags = {
@@ -6795,9 +6807,13 @@ class CuraHeading {
6795
6807
  return tags[`${this.level}`] || tags['default'];
6796
6808
  }
6797
6809
  render() {
6798
- return (hAsync(Host, null, this.getHeadingTag()));
6810
+ return (hAsync(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
6799
6811
  }
6800
6812
  get host() { return getElement(this); }
6813
+ static get watchers() { return {
6814
+ "color": ["handleChangeColor"],
6815
+ "spotColor": ["handleChangeColor"]
6816
+ }; }
6801
6817
  static get style() { return curaHeadingCss; }
6802
6818
  static get cmpMeta() { return {
6803
6819
  "$flags$": 9,
@@ -6806,12 +6822,15 @@ class CuraHeading {
6806
6822
  "level": [514],
6807
6823
  "size": [513],
6808
6824
  "weight": [513],
6809
- "inverted": [516],
6810
- "spotColor": [513, "spot-color"]
6825
+ "spotColor": [513, "spot-color"],
6826
+ "color": [1],
6827
+ "marginBlock": [513, "margin-block"],
6828
+ "lineHeight": [513, "line-height"],
6829
+ "styles": [32]
6811
6830
  },
6812
6831
  "$listeners$": undefined,
6813
6832
  "$lazyBundleId$": "-",
6814
- "$attrsToReflect$": [["level", "level"], ["size", "size"], ["weight", "weight"], ["inverted", "inverted"], ["spotColor", "spot-color"]]
6833
+ "$attrsToReflect$": [["level", "level"], ["size", "size"], ["weight", "weight"], ["spotColor", "spot-color"], ["marginBlock", "margin-block"], ["lineHeight", "line-height"]]
6815
6834
  }; }
6816
6835
  }
6817
6836
 
@@ -6912,6 +6931,82 @@ class CuraIconsView {
6912
6931
  }; }
6913
6932
  }
6914
6933
 
6934
+ const curaLabelCss = "/*!@:host*/.sc-cura-label-h{display:block;font-size:var(--font-size-base)}/*!@:host p*/.sc-cura-label-h p.sc-cura-label{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}/*!@:host p.bold-weight, :host p ::slotted(b), :host p ::slotted(strong), :host p ::slotted(u)*/.sc-cura-label-h p.bold-weight.sc-cura-label,.sc-cura-label-h p .sc-cura-label-s>b,.sc-cura-label-h p .sc-cura-label-s>strong,.sc-cura-label-h p .sc-cura-label-s>u{font-weight:var(--font-weight-bold)}/*!@:host p.large*/.sc-cura-label-h p.large.sc-cura-label{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}/*!@:host p.small*/.sc-cura-label-h p.small.sc-cura-label{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}/*!@:host p.xsmall*/.sc-cura-label-h p.xsmall.sc-cura-label{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}/*!@:host ::slotted(a)*/.sc-cura-label-h .sc-cura-label-s>a{font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}/*!@:host ::slotted(u)*/.sc-cura-label-h .sc-cura-label-s>u{text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-label-h .sc-cura-label-s>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}";
6935
+
6936
+ class CuraLabel {
6937
+ constructor(hostRef) {
6938
+ registerInstance(this, hostRef);
6939
+ this.theme = window.CuraAPI.theme;
6940
+ this.size = 'medium';
6941
+ this.weight = 'regular';
6942
+ this.spotColor = 'accent-dark';
6943
+ this.color = undefined;
6944
+ this.marginBlock = '0';
6945
+ this.lineHeight = '125%';
6946
+ this.styles = {};
6947
+ }
6948
+ handleChangeColor() {
6949
+ this.setColors();
6950
+ }
6951
+ connectedCallback() {
6952
+ this.setFontProperties();
6953
+ this.setColors();
6954
+ }
6955
+ getClasses() {
6956
+ const sizeclass = {};
6957
+ sizeclass[this.size.toLowerCase()] = true;
6958
+ sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
6959
+ return sizeclass;
6960
+ }
6961
+ setFontProperties() {
6962
+ this.weights = this.theme.fonts.getWeights();
6963
+ this.fontSizeBase = this.theme.fonts.getSize();
6964
+ this.styles = {
6965
+ '--font-family': this.theme.fonts.getFamily('body'),
6966
+ '--font-weight-medium': this.weights.medium,
6967
+ '--font-weight-bold': this.weights.bold
6968
+ };
6969
+ }
6970
+ setColors() {
6971
+ const fontColor = this.color
6972
+ ? this.theme.colors.getColor(this.color)
6973
+ : this.theme.fonts.getColor();
6974
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
6975
+ }
6976
+ hostCSSProperties() {
6977
+ return {
6978
+ '--margin-block': this.marginBlock,
6979
+ '--font-size-base': this.fontSizeBase,
6980
+ '--line-height': this.lineHeight
6981
+ };
6982
+ }
6983
+ render() {
6984
+ return (hAsync(Host, { style: this.hostCSSProperties() }, hAsync("p", { style: this.styles, class: this.getClasses() }, hAsync("slot", null))));
6985
+ }
6986
+ get host() { return getElement(this); }
6987
+ static get watchers() { return {
6988
+ "color": ["handleChangeColor"],
6989
+ "spotColor": ["handleChangeColor"]
6990
+ }; }
6991
+ static get style() { return curaLabelCss; }
6992
+ static get cmpMeta() { return {
6993
+ "$flags$": 9,
6994
+ "$tagName$": "cura-label",
6995
+ "$members$": {
6996
+ "size": [513],
6997
+ "weight": [513],
6998
+ "spotColor": [513, "spot-color"],
6999
+ "color": [1],
7000
+ "marginBlock": [513, "margin-block"],
7001
+ "lineHeight": [513, "line-height"],
7002
+ "styles": [32]
7003
+ },
7004
+ "$listeners$": undefined,
7005
+ "$lazyBundleId$": "-",
7006
+ "$attrsToReflect$": [["size", "size"], ["weight", "weight"], ["spotColor", "spot-color"], ["marginBlock", "margin-block"], ["lineHeight", "line-height"]]
7007
+ }; }
7008
+ }
7009
+
6915
7010
  const curaLoaderCircleCss = "/*!@:host*/.sc-cura-loader-circle-h{display:inline-block;width:var(--size);height:var(--size)}/*!@:host svg*/.sc-cura-loader-circle-h svg.sc-cura-loader-circle{width:var(--size);height:var(--size);-webkit-animation:rotate 0.7s linear infinite;animation:rotate 0.7s linear infinite}/*!@:host circle, :host path*/.sc-cura-loader-circle-h circle.sc-cura-loader-circle,.sc-cura-loader-circle-h path.sc-cura-loader-circle{stroke-miterlimit:10;stroke-linecap:round;stroke-linejoin:round}/*!@:host path*/.sc-cura-loader-circle-h path.sc-cura-loader-circle{stroke:var(--color)}/*!@:host stop*/.sc-cura-loader-circle-h stop.sc-cura-loader-circle{stop-color:var(--color)}/*!@:host linearGradient stop:first-child*/.sc-cura-loader-circle-h linearGradient.sc-cura-loader-circle stop.sc-cura-loader-circle:first-child{stop-opacity:0.14}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
6916
7011
 
6917
7012
  class CuraLoaderCircle {
@@ -6951,7 +7046,7 @@ class CuraLoaderCircle {
6951
7046
  }; }
6952
7047
  }
6953
7048
 
6954
- const curaPageTemplateCss = "/*!@:host*/.sc-cura-page-template-h{display:block}/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-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*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-header.sc-cura-page-template{grid-area:sub-header}/*!@:host .grid-template #header*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #header.sc-cura-page-template{grid-area:header}/*!@:host .grid-template #pre-content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #pre-content.sc-cura-page-template{grid-area:pre-content}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{grid-area:content-container}/*!@:host .grid-template #post-body*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #post-body.sc-cura-page-template{grid-area:post-body}/*!@:host .grid-template #footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #footer.sc-cura-page-template{grid-area:footer}/*!@:host .grid-template #sub-footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-footer.sc-cura-page-template{grid-area:sub-footer}@media (max-width: 360px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}}@media (min-width: 768px) and (max-width: 1365px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}}@media (min-width: 1366px) and (max-width: 1919px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}/*!@:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-left .sc-cura-page-template-s>div[slot=sidebar-left]{margin-right:calc(var(--spacing) * 5px)}/*!@:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-right .sc-cura-page-template-s>div[slot=sidebar-right]{margin-left:calc(var(--spacing) * 5px)}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{display:-ms-flexbox;display:flex}/*!@:host .grid-template #content-container #content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #content.sc-cura-page-template{-ms-flex-positive:1;flex-grow:1}/*!@:host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-left.sc-cura-page-template,.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-right.sc-cura-page-template{max-width:20%}}@media (min-width: 1920px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}/*!@:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-left .sc-cura-page-template-s>div[slot=sidebar-left]{margin-right:calc(var(--spacing) * 7px)}/*!@:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-right .sc-cura-page-template-s>div[slot=sidebar-right]{margin-left:calc(var(--spacing) * 7px)}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{display:-ms-flexbox;display:flex}/*!@:host .grid-template #content-container #content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #content.sc-cura-page-template{-ms-flex-positive:1;flex-grow:1}/*!@:host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-left.sc-cura-page-template,.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-right.sc-cura-page-template{max-width:20%}/*!@:host .grid-template #content-container.centered*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.centered.sc-cura-page-template{max-width:1920px;justify-self:center}}";
7049
+ const curaPageTemplateCss = "/*!@:host*/.sc-cura-page-template-h{display:block}/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-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*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-header.sc-cura-page-template{grid-area:sub-header}/*!@:host .grid-template #header*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #header.sc-cura-page-template{grid-area:header}/*!@:host .grid-template #pre-content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #pre-content.sc-cura-page-template{grid-area:pre-content}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{grid-area:content-container}/*!@:host .grid-template #post-body*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #post-body.sc-cura-page-template{grid-area:post-body}/*!@:host .grid-template #footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #footer.sc-cura-page-template{grid-area:footer}/*!@:host .grid-template #sub-footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-footer.sc-cura-page-template{grid-area:sub-footer}@media (max-width: 768px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}}@media (min-width: 769px) and (max-width: 992px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}}@media (min-width: 993px) and (max-width: 1920px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}/*!@:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-left .sc-cura-page-template-s>div[slot=sidebar-left]{margin-right:calc(var(--spacing) * 5px)}/*!@:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-right .sc-cura-page-template-s>div[slot=sidebar-right]{margin-left:calc(var(--spacing) * 5px)}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{display:-ms-flexbox;display:flex}/*!@:host .grid-template #content-container #content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #content.sc-cura-page-template{-ms-flex-positive:1;flex-grow:1}/*!@:host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-left.sc-cura-page-template,.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-right.sc-cura-page-template{max-width:20%}}@media (min-width: 1921px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}/*!@:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-left .sc-cura-page-template-s>div[slot=sidebar-left]{margin-right:calc(var(--spacing) * 7px)}/*!@:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-right .sc-cura-page-template-s>div[slot=sidebar-right]{margin-left:calc(var(--spacing) * 7px)}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{display:-ms-flexbox;display:flex}/*!@:host .grid-template #content-container #content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #content.sc-cura-page-template{-ms-flex-positive:1;flex-grow:1}/*!@:host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-left.sc-cura-page-template,.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-right.sc-cura-page-template{max-width:20%}/*!@:host .grid-template #content-container.centered*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.centered.sc-cura-page-template{max-width:1921px;justify-self:center}}";
6955
7050
 
6956
7051
  class CuraPageTemplate {
6957
7052
  constructor(hostRef) {
@@ -6985,22 +7080,23 @@ class CuraPageTemplate {
6985
7080
  }; }
6986
7081
  }
6987
7082
 
6988
- const curaParagraphCss = "/*!@:host*/.sc-cura-paragraph-h{display:block;font-size:var(--font-size)}/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);-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*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.21em;line-height:calc(var(--line-height) + 10%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%)}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.71em;line-height:calc(var(--line-height) - 5%)}@media (min-width: 768px) and (max-width: 1365px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.14em;line-height:calc(var(--line-height) + 5%)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.35em;line-height:calc(var(--line-height) + 10%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) - 5%)}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%)}}@media (min-width: 1366px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.42em;line-height:calc(var(--line-height) + 10%)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.71em;line-height:calc(var(--line-height) + 20%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1.21em;line-height:calc(var(--line-height) + 5%)}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) + 5%)}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>b,.sc-cura-paragraph-h .sc-cura-paragraph-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>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}";
7083
+ const curaParagraphCss = "/*!@:host*/.sc-cura-paragraph-h{display:block;font-size:var(--font-size-base)}/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.28px}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.214em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.48px}/*!@:host p.caption, :host p.xsmall*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph,.sc-cura-paragraph-h p.xsmall.sc-cura-paragraph{font-size:0.714em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.6px}@media (min-width: 769px) and (max-width: 1920px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.143em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.32px}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.357em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.56px}/*!@:host p.caption, :host p.xsmall*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph,.sc-cura-paragraph-h p.xsmall.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.72px}}@media (min-width: 1921px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.429em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.714em;line-height:calc(var(--line-height) + 20%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1.21em;line-height:calc(var(--line-height) + 5%);letter-spacing:0px}/*!@:host p.caption, :host p.xsmall*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph,.sc-cura-paragraph-h p.xsmall.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.28px}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>b,.sc-cura-paragraph-h .sc-cura-paragraph-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}/*!@:host ::slotted(u)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>u{font-weight:var(--font-weight-medium);text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>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}";
6989
7084
 
6990
7085
  class CuraParagraph {
6991
7086
  constructor(hostRef) {
6992
7087
  registerInstance(this, hostRef);
6993
- this.size = 'regular';
6994
- this.inverted = false;
6995
- this.spotColor = 'primary';
7088
+ this.theme = window.CuraAPI.theme;
7089
+ this.size = 'medium';
7090
+ this.spotColor = 'accent-dark';
6996
7091
  this.color = undefined;
7092
+ this.marginBlock = '1.25em';
7093
+ this.lineHeight = '140%';
6997
7094
  this.styles = {};
6998
7095
  }
6999
7096
  handleChangeColor() {
7000
7097
  this.setColors();
7001
7098
  }
7002
7099
  connectedCallback() {
7003
- this.weights = window.CuraAPI.theme.fonts.getWeights();
7004
7100
  this.setFontProperties();
7005
7101
  this.setColors();
7006
7102
  }
@@ -7010,35 +7106,35 @@ class CuraParagraph {
7010
7106
  return sizeclass;
7011
7107
  }
7012
7108
  setFontProperties() {
7109
+ this.weights = this.theme.fonts.getWeights();
7110
+ this.fontSizeBase = this.theme.fonts.getSize();
7013
7111
  this.styles = {
7014
- '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),
7015
- '--font-size': window.CuraAPI.theme.fonts.getSize(),
7112
+ '--font-family': this.theme.fonts.getFamily('body'),
7016
7113
  '--font-weight-regular': this.weights.regular,
7017
7114
  '--font-weight-medium': this.weights.medium,
7018
7115
  '--font-weight-bold': this.weights.bold
7019
7116
  };
7020
- this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
7021
- this.setHostProperty('--block-margin', '1.25em');
7022
- this.setHostProperty('--line-height', '140%');
7023
7117
  }
7024
7118
  setColors() {
7025
- const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :
7026
- this.inverted
7027
- ? window.CuraAPI.theme.colors.getColor('neutral-white')
7028
- : window.CuraAPI.theme.fonts.getColor();
7029
- this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'), '--color-link': this.inverted
7030
- ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
7031
- : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`) });
7119
+ const fontColor = this.color
7120
+ ? this.theme.colors.getColor(this.color)
7121
+ : this.theme.fonts.getColor();
7122
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
7032
7123
  }
7033
- setHostProperty(prop, value) {
7034
- this.host.style.setProperty(prop, value);
7124
+ hostCSSProperties() {
7125
+ return {
7126
+ '--margin-block': this.marginBlock,
7127
+ '--font-size-base': this.fontSizeBase,
7128
+ '--line-height': this.lineHeight
7129
+ };
7035
7130
  }
7036
7131
  render() {
7037
- return (hAsync(Host, null, hAsync("p", { style: this.styles, class: this.setsizeClass() }, hAsync("slot", null))));
7132
+ return (hAsync(Host, { style: this.hostCSSProperties() }, hAsync("p", { style: this.styles, class: this.setsizeClass() }, hAsync("slot", null))));
7038
7133
  }
7039
7134
  get host() { return getElement(this); }
7040
7135
  static get watchers() { return {
7041
- "color": ["handleChangeColor"]
7136
+ "color": ["handleChangeColor"],
7137
+ "spotColor": ["handleChangeColor"]
7042
7138
  }; }
7043
7139
  static get style() { return curaParagraphCss; }
7044
7140
  static get cmpMeta() { return {
@@ -7046,14 +7142,15 @@ class CuraParagraph {
7046
7142
  "$tagName$": "cura-paragraph",
7047
7143
  "$members$": {
7048
7144
  "size": [513],
7049
- "inverted": [516],
7050
7145
  "spotColor": [513, "spot-color"],
7051
- "color": [8],
7146
+ "color": [1],
7147
+ "marginBlock": [513, "margin-block"],
7148
+ "lineHeight": [513, "line-height"],
7052
7149
  "styles": [32]
7053
7150
  },
7054
7151
  "$listeners$": undefined,
7055
7152
  "$lazyBundleId$": "-",
7056
- "$attrsToReflect$": [["size", "size"], ["inverted", "inverted"], ["spotColor", "spot-color"]]
7153
+ "$attrsToReflect$": [["size", "size"], ["spotColor", "spot-color"], ["marginBlock", "margin-block"], ["lineHeight", "line-height"]]
7057
7154
  }; }
7058
7155
  }
7059
7156
 
@@ -7067,6 +7164,7 @@ registerComponents([
7067
7164
  CuraHeading,
7068
7165
  CuraIcon,
7069
7166
  CuraIconsView,
7167
+ CuraLabel,
7070
7168
  CuraLoaderCircle,
7071
7169
  CuraPageTemplate,
7072
7170
  CuraParagraph,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rededor/cura-hydrate",
3
3
  "description": "cura component hydration app.",
4
- "version": "0.5.0",
5
4
  "main": "index.js",
6
- "types": "index.d.ts"
5
+ "types": "index.d.ts",
6
+ "version": "0.5.2"
7
7
  }