@oiz/stzh-components 2.7.0 → 2.8.0-beta

package/dist/components/stzh-contact.js

@@ -1,11 +1,12 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
 import { h as hasSlot } from './utils.js';
-import { d as defineCustomElement$9 } from './stzh-badge2.js';
-import { d as defineCustomElement$8 } from './stzh-button2.js';
-import { d as defineCustomElement$7 } from './stzh-datalist2.js';
-import { d as defineCustomElement$6 } from './stzh-datalist-item2.js';
-import { d as defineCustomElement$5 } from './stzh-heading2.js';
-import { d as defineCustomElement$4 } from './stzh-icon2.js';
+import { d as defineCustomElement$a } from './stzh-badge2.js';
+import { d as defineCustomElement$9 } from './stzh-button2.js';
+import { d as defineCustomElement$8 } from './stzh-datalist2.js';
+import { d as defineCustomElement$7 } from './stzh-datalist-item2.js';
+import { d as defineCustomElement$6 } from './stzh-heading2.js';
+import { d as defineCustomElement$5 } from './stzh-icon2.js';
+import { d as defineCustomElement$4 } from './stzh-richtext2.js';
 import { d as defineCustomElement$3 } from './stzh-status2.js';
 import { d as defineCustomElement$2 } from './stzh-tooltip2.js';
 
@@ -113,7 +114,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-contact", "stzh-badge", "stzh-button", "stzh-datalist", "stzh-datalist-item", "stzh-heading", "stzh-icon", "stzh-status", "stzh-tooltip"];
+  const components = ["stzh-contact", "stzh-badge", "stzh-button", "stzh-datalist", "stzh-datalist-item", "stzh-heading", "stzh-icon", "stzh-richtext", "stzh-status", "stzh-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-contact":
       if (!customElements.get(tagName)) {
@@ -122,30 +123,35 @@ function defineCustomElement$1() {
       break;
     case "stzh-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "stzh-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "stzh-datalist":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "stzh-datalist-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "stzh-heading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-richtext":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/components/stzh-contact.js.map

@@ -1 +1 @@
-{"file":"stzh-contact.js","mappings":"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","names":["StzhContact"],"sources":["./src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","./src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"image\"]) {\n    width: 88px;\n    height: 88px;\n    top: 0;\n    left: 0;\n    border-radius: 50%;\n    object-fit: cover;\n    margin-bottom: space('xlarge');\n\n    @include mq($from: smallheader) {\n      @include spaceCurve('margin-right', 'medium');\n      margin-bottom: 0;\n    }\n\n    @include mq($from: large) {\n      width: 196px;\n      height: 196px;\n    }\n  }\n}\n\n.stzh-contact {\n  @include fontCurve('p1');\n\n  &,\n  &__inner-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: smallheader) {\n      flex-direction: row;\n    }\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__image {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n\t&__pobox {\n    @include spaceCurve('margin-top', 'small')\n  }\n\n  &__main-heading {\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  &__number-link {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &:hover,\n    &:focus {\n      color: $linkHoverColor;\n    }\n  }\n\n  &__info {\n    flex-grow: 1;\n\n    @include mq($from: smallheader) {\n\t\t\tflex-basis: 45%;\n\t\t}\n  }\n\n  &__availability-title {\n    margin-bottom: space('xsmall');\n  }\n\n  &__availability {\n    margin-top: space('xlarge');\n\n    @include mq($from: smallheader) {\n      @include spaceCurve('margin-left', 'medium');\n      margin-top: 0;\n\t\t\tflex-basis: 55%;\n    }\n  }\n\n  /* Has border */\n\n  &--has-border {\n    padding-bottom: space('xlarge');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Fragment,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  ContactNumber,\n  StzhContactAvailabilityItem,\n  StzhDatalistItemEntry\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g,'');\n}\n\n/**\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Street */\n  @Prop() street: string;\n\n  /** Additional street info */\n  @Prop() streetInfo: string;\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /** Post office box heading */\n  @Prop() poBoxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n  private availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n  /** Whether to display border or not */\n  @Prop() withBorder: boolean = false;\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n\n    if (this._availability) {\n      this.availabilityDataItems = this._availability.map((item) => ({\n        value: item.hours.join(' | '),\n        label: item.weekday\n      }));\n    }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.availabilityWatcher(this.availability);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-border\": this.withBorder\n    };\n\n    return (\n      <Host>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div class=\"stzh-contact__image\">\n            <slot name=\"image\"></slot>\n          </div>\n\n          <div class=\"stzh-contact__wrapper\">\n            {this.mainHeading &&\n              <stzh-heading\n                level=\"3\"\n                class=\"stzh-contact__main-heading\"\n                itemprop={(this.type === \"Organization\" && !this.heading\n                  || this.type === \"Person\" && !this.name) ? \"name\" : null}\n                innerHTML={this.mainHeading}\n              ></stzh-heading>\n            }\n\n            <div class=\"stzh-contact__inner-wrapper\">\n              <div class=\"stzh-contact__info\">\n                {this.heading &&\n                  <stzh-heading\n                    level=\"4\"\n                    class=\"stzh-contact__heading\"\n                    itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                    innerHTML={this.heading}\n                  ></stzh-heading>\n                }\n\n                {this.name &&\n                  <div\n                    class=\"stzh-contact__name\"\n                    itemprop={this.type === \"Person\" ? \"name\" : null}\n                  >\n                    {this.name}\n                  </div>\n                }\n\n                {(this.street || this.postalCode || this.location) &&\n                  <div\n                    class=\"stzh-contact__address\"\n                    itemprop=\"address\"\n                    itemscope\n                    itemtype=\"http://schema.org/PostalAddress\"\n                  >\n                    {this.street &&\n                      <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                        {this.street}\n\n                        {this.streetInfo &&\n                          <Fragment>\n                            <br /> {this.streetInfo}\n                          </Fragment>\n                        }\n                      </div>\n                    }\n\n                    {this.postalCode &&\n                      <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                        {this.postalCode}&nbsp;\n                      </span>\n                    }\n\n                    {this.location &&\n                      <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                        {this.location}\n                      </span>\n                    }\n                  </div>\n                }\n\n                {this._numbers.map((number) =>\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <span itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}>\n                      <a\n                        class=\"stzh-contact__number-link\"\n                        href={`${number.type}:${formatTel(number.number)}`}\n                        s-object-id={number.analyticsId || (`${number.label} ${number.number}`)}\n                      >\n                        {number.number}\n                      </a>\n                    </span>\n                  </div>\n                )}\n\n                {(this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&\n                  <div class=\"stzh-contact__pobox\">\n                    <div class=\"stzh-contact__pobox-heading\">{this.poBoxHeading}</div>\n                    <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                    <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n                  </div>\n                }\n              </div>\n\n              {this.availability &&\n                <div class=\"stzh-contact__availability\">\n                  {this.availabilityTitle &&\n                    <stzh-heading\n                      level=\"4\"\n                      class=\"stzh-contact__availability-title\"\n                    >\n                      {this.availabilityTitle}\n                    </stzh-heading>\n                  }\n\n                  <stzh-datalist\n                    hideBorder={true}\n                    directionSmall={\"vertical\"}\n                    items={this.availabilityDataItems}\n                  ></stzh-datalist>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-contact.js","mappings":"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","names":["StzhContact"],"sources":["./src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","./src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"image\"]) {\n    width: 88px;\n    height: 88px;\n    top: 0;\n    left: 0;\n    border-radius: 50%;\n    object-fit: cover;\n    margin-bottom: space('xlarge');\n\n    @include mq($from: smallheader) {\n      @include spaceCurve('margin-right', 'medium');\n      margin-bottom: 0;\n    }\n\n    @include mq($from: large) {\n      width: 196px;\n      height: 196px;\n    }\n  }\n}\n\n.stzh-contact {\n  @include fontCurve('p1');\n\n  &,\n  &__inner-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: smallheader) {\n      flex-direction: row;\n    }\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__image {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n\t&__pobox {\n    @include spaceCurve('margin-top', 'small')\n  }\n\n  &__main-heading {\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  &__number-link {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &:hover,\n    &:focus {\n      color: $linkHoverColor;\n    }\n  }\n\n  &__info {\n    flex-grow: 1;\n\n    @include mq($from: smallheader) {\n\t\t\tflex-basis: 45%;\n\t\t}\n  }\n\n  &__availability-title {\n    margin-bottom: space('xsmall');\n  }\n\n  &__availability {\n    margin-top: space('xlarge');\n\n    @include mq($from: smallheader) {\n      @include spaceCurve('margin-left', 'medium');\n      margin-top: 0;\n\t\t\tflex-basis: 55%;\n    }\n  }\n\n  /* Has border */\n\n  &--has-border {\n    padding-bottom: space('xlarge');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Fragment,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  ContactNumber,\n  StzhContactAvailabilityItem,\n  StzhDatalistItemEntry\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g,'');\n}\n\n/**\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Street */\n  @Prop() street: string;\n\n  /** Additional street info */\n  @Prop() streetInfo: string;\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /** Post office box heading */\n  @Prop() poBoxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n  private availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n  /** Whether to display border or not */\n  @Prop() withBorder: boolean = false;\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n\n    if (this._availability) {\n      this.availabilityDataItems = this._availability.map((item) => ({\n        value: item.hours.join(' | '),\n        label: item.weekday\n      }));\n    }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.availabilityWatcher(this.availability);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-border\": this.withBorder\n    };\n\n    return (\n      <Host>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div class=\"stzh-contact__image\">\n            <slot name=\"image\"></slot>\n          </div>\n\n          <div class=\"stzh-contact__wrapper\">\n            {this.mainHeading &&\n              <stzh-heading\n                level=\"3\"\n                class=\"stzh-contact__main-heading\"\n                itemprop={(this.type === \"Organization\" && !this.heading\n                  || this.type === \"Person\" && !this.name) ? \"name\" : null}\n                innerHTML={this.mainHeading}\n              ></stzh-heading>\n            }\n\n            <div class=\"stzh-contact__inner-wrapper\">\n              <div class=\"stzh-contact__info\">\n                {this.heading &&\n                  <stzh-heading\n                    level=\"4\"\n                    class=\"stzh-contact__heading\"\n                    itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                    innerHTML={this.heading}\n                  ></stzh-heading>\n                }\n\n                {this.name &&\n                  <div\n                    class=\"stzh-contact__name\"\n                    itemprop={this.type === \"Person\" ? \"name\" : null}\n                  >\n                    {this.name}\n                  </div>\n                }\n\n                {(this.street || this.postalCode || this.location) &&\n                  <div\n                    class=\"stzh-contact__address\"\n                    itemprop=\"address\"\n                    itemscope\n                    itemtype=\"http://schema.org/PostalAddress\"\n                  >\n                    {this.street &&\n                      <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                        {this.street}\n\n                        {this.streetInfo &&\n                          <Fragment>\n                            <br /> {this.streetInfo}\n                          </Fragment>\n                        }\n                      </div>\n                    }\n\n                    {this.postalCode &&\n                      <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                        {this.postalCode}&nbsp;\n                      </span>\n                    }\n\n                    {this.location &&\n                      <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                        {this.location}\n                      </span>\n                    }\n                  </div>\n                }\n\n                {this._numbers.map((number) =>\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <span itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}>\n                      <a\n                        class=\"stzh-contact__number-link\"\n                        href={`${number.type}:${formatTel(number.number)}`}\n                        s-object-id={number.analyticsId || (`${number.label} ${number.number}`)}\n                      >\n                        {number.number}\n                      </a>\n                    </span>\n                  </div>\n                )}\n\n                {(this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&\n                  <div class=\"stzh-contact__pobox\">\n                    <div class=\"stzh-contact__pobox-heading\">{this.poBoxHeading}</div>\n                    <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                    <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n                  </div>\n                }\n              </div>\n\n              {this.availability &&\n                <div class=\"stzh-contact__availability\">\n                  {this.availabilityTitle &&\n                    <stzh-heading\n                      level=\"4\"\n                      class=\"stzh-contact__availability-title\"\n                    >\n                      {this.availabilityTitle}\n                    </stzh-heading>\n                  }\n\n                  <stzh-datalist\n                    hideBorder={true}\n                    directionSmall={\"vertical\"}\n                    items={this.availabilityDataItems}\n                  ></stzh-datalist>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-container.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhContainerCss = ".sc-stzh-container-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-container-h{display:none}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-container-h{clear:both}.sc-stzh-container-h::after{content:\"\";display:table;clear:both}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 1024px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-5.5rem;margin-right:-5.5rem}}@media screen and (min-width: 1440px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-container{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw}.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{--highlight-horizontal-padding:1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{--highlight-horizontal-padding:2rem}}@media screen and (min-width: 1024px){.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{--highlight-horizontal-padding:2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{--highlight-horizontal-padding:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px){.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw}}.sc-stzh-container-h .sc-stzh-container-s stzh-row stzh-section[variant=highlight]{--highlight-horizontal-padding:var(--stzh-section-highlight-horizontal-padding)}@media screen and (max-width: 1259px){.sc-stzh-container-h .sc-stzh-container-s stzh-row stzh-section[variant=highlight]{left:initial;right:initial;margin-left:initial;margin-right:initial;width:initial;max-width:initial}}.stzh-container.sc-stzh-container{margin:0 1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin:0 2rem}}@media screen and (min-width: 1024px){.stzh-container.sc-stzh-container{margin:0 2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin:0 5.5rem}}@media screen and (min-width: 1440px){.stzh-container.sc-stzh-container{margin:0 auto;width:78.75rem}}";
+const stzhContainerCss = ".sc-stzh-container-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-container-h{display:none}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 1024px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-5.5rem;margin-right:-5.5rem}}@media screen and (min-width: 1440px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-container{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw}.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{--highlight-horizontal-padding:1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{--highlight-horizontal-padding:2rem}}@media screen and (min-width: 1024px){.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{--highlight-horizontal-padding:2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{--highlight-horizontal-padding:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px){.sc-stzh-container-h .sc-stzh-container-s stzh-section[variant=highlight]{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw}}.sc-stzh-container-h .sc-stzh-container-s stzh-row stzh-section[variant=highlight]{--highlight-horizontal-padding:var(--stzh-section-highlight-horizontal-padding)}@media screen and (max-width: 1259px){.sc-stzh-container-h .sc-stzh-container-s stzh-row stzh-section[variant=highlight]{left:initial;right:initial;margin-left:initial;margin-right:initial;width:initial;max-width:initial}}.stzh-container.sc-stzh-container{margin:0 1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin:0 2rem}}@media screen and (min-width: 1024px){.stzh-container.sc-stzh-container{margin:0 2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin:0 5.5rem}}@media screen and (min-width: 1440px){.stzh-container.sc-stzh-container{margin:0 auto;width:78.75rem}}";
 
 const StzhContainer$1 = /*@__PURE__*/ proxyCustomElement(class StzhContainer extends HTMLElement {
   constructor() {

package/dist/components/stzh-container.js.map

@@ -1 +1 @@
-{"file":"stzh-container.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,+mGAA+mG;;MCc3nGA,eAAa;;;;;EACxB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,gBAAgB,IACzB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContainer"],"sources":["./src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","./src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n  @include clearfix;\n  clear: both;\n\n  ::slotted(*) {\n    stzh-header {\n      margin-left: -$containerMargin;\n      margin-right: -$containerMargin;\n\n      @include mq($from: small) {\n        margin-left: -$containerMarginSmall;\n        margin-right: -$containerMarginSmall;\n      }\n\n      @include mq($from: medium) {\n        margin-left: -$containerMarginMedium;\n        margin-right: -$containerMarginMedium;\n      }\n\n      @include mq($from: large) {\n        margin-left: -$containerMarginLarge;\n        margin-right: -$containerMarginLarge;\n      }\n\n      @include mq($from: ultra) {\n        margin-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n        margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n      }\n    }\n\n    stzh-container {\n      position: relative;\n      left: 50%;\n      right: 50%;\n      margin-left: -50vw;\n      margin-right: -50vw;\n      width: 100vw;\n      max-width: 100vw;\n    }\n\n    stzh-section[variant=\"highlight\"] {\n      --highlight-horizontal-padding: #{$containerMargin};\n\n      @include mq($from: small) {\n        --highlight-horizontal-padding: #{$containerMarginSmall};\n      }\n\n      @include mq($from: medium) {\n        --highlight-horizontal-padding: #{$containerMarginMedium};\n      }\n\n      @include mq($from: large) {\n        --highlight-horizontal-padding: #{space('xlarge')};\n      }\n\n      @include mq($to: large) {\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n        width: 100vw;\n        max-width: 100vw;\n      }\n    }\n\n    stzh-row stzh-section[variant=\"highlight\"] {\n      --highlight-horizontal-padding: #{$sectionHighlightHorizontalPadding};\n\n      @include mq($to: large) {\n        left: initial;\n        right: initial;\n        margin-left: initial;\n        margin-right: initial;\n        width: initial;\n        max-width: initial;\n      }\n    }\n  }\n}\n\n.stzh-container {\n  @include container;\n}\n","import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true\n})\nexport class StzhContainer {\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-container.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,6gGAA6gG;;MCczhGA,eAAa;;;;;EACxB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,gBAAgB,IACzB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContainer"],"sources":["./src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","./src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n  ::slotted(*) {\n    stzh-header {\n      margin-left: -$containerMargin;\n      margin-right: -$containerMargin;\n\n      @include mq($from: small) {\n        margin-left: -$containerMarginSmall;\n        margin-right: -$containerMarginSmall;\n      }\n\n      @include mq($from: medium) {\n        margin-left: -$containerMarginMedium;\n        margin-right: -$containerMarginMedium;\n      }\n\n      @include mq($from: large) {\n        margin-left: -$containerMarginLarge;\n        margin-right: -$containerMarginLarge;\n      }\n\n      @include mq($from: ultra) {\n        margin-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n        margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n      }\n    }\n\n    stzh-container {\n      position: relative;\n      left: 50%;\n      right: 50%;\n      margin-left: -50vw;\n      margin-right: -50vw;\n      width: 100vw;\n      max-width: 100vw;\n    }\n\n    stzh-section[variant=\"highlight\"] {\n      --highlight-horizontal-padding: #{$containerMargin};\n\n      @include mq($from: small) {\n        --highlight-horizontal-padding: #{$containerMarginSmall};\n      }\n\n      @include mq($from: medium) {\n        --highlight-horizontal-padding: #{$containerMarginMedium};\n      }\n\n      @include mq($from: large) {\n        --highlight-horizontal-padding: #{space('xlarge')};\n      }\n\n      @include mq($to: large) {\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n        width: 100vw;\n        max-width: 100vw;\n      }\n    }\n\n    stzh-row stzh-section[variant=\"highlight\"] {\n      --highlight-horizontal-padding: #{$sectionHighlightHorizontalPadding};\n\n      @include mq($to: large) {\n        left: initial;\n        right: initial;\n        margin-left: initial;\n        margin-right: initial;\n        width: initial;\n        max-width: initial;\n      }\n    }\n  }\n}\n\n.stzh-container {\n  @include container;\n}\n","import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true\n})\nexport class StzhContainer {\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-cspace.js

@@ -1,11 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhCspaceCss = ".sc-stzh-cspace-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-cspace-h{display:none}.sc-stzh-cspace-h *.sc-stzh-cspace,.sc-stzh-cspace-h *.sc-stzh-cspace::before,.sc-stzh-cspace-h *.sc-stzh-cspace::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-cspace-h{clear:both}.sc-stzh-cspace-h::after{content:\"\";display:table;clear:both}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-input,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datepicker,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-dropdown,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-langnav,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-upload,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkbox,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkboxgroup,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radiogroup{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-contact,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-contact,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-contact,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-contact,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-contact,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-bottom:var(--stzh-space-large)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sc-stzh-cspace-h .sc-stzh-cspace-s .section,.sc-stzh-cspace-h .sc-stzh-cspace-s>.section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-audio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-microsite-teaserlist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-olmap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-textandimage,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-sitemap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section,.sc-stzh-cspace-h .sc-stzh-cspace-s>.section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-audio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-microsite-teaserlist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-olmap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-textandimage,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-sitemap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section,.sc-stzh-cspace-h .sc-stzh-cspace-s>.section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-audio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-microsite-teaserlist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-olmap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-textandimage,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-sitemap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section,.sc-stzh-cspace-h .sc-stzh-cspace-s>.section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-audio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-microsite-teaserlist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-olmap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-textandimage,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-sitemap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section,.sc-stzh-cspace-h .sc-stzh-cspace-s>.section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-audio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-microsite-teaserlist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-olmap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-textandimage,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-sitemap,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert{margin-top:var(--stzh-space-xxxlarge);margin-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert{margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert{margin-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert{margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert{margin-bottom:var(--stzh-space-xbig)}}.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert stzh-invert stzh-container{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert stzh-invert stzh-container{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert stzh-invert stzh-container{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert stzh-invert stzh-container{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-invert stzh-invert stzh-container{padding-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-sticky{display:contents}.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-datatable,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-datatable,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-datatable,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-datatable,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-pagetitle,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-datatable,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-anchornav,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-anchornav,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-anchornav,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-actions,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-actions[variant=process],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions[variant=process]{margin-top:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-fieldset,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s .section.has-fieldset[legend],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset[legend]{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]+stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]+stzh-datalist{margin-top:0}.sc-stzh-cspace-h .sc-stzh-cspace-s .section:first-child,.sc-stzh-cspace-h .sc-stzh-cspace-s .section[no-cspace-top],.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys:first-child,.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys[no-cspace-top],.sc-stzh-cspace-h .sc-stzh-cspace-s>:first-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-top]{margin-top:0 !important}.sc-stzh-cspace-h .sc-stzh-cspace-s .section:last-child,.sc-stzh-cspace-h .sc-stzh-cspace-s .section[no-cspace-bottom],.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys:last-child,.sc-stzh-cspace-h .sc-stzh-cspace-s .contextparsys[no-cspace-bottom],.sc-stzh-cspace-h .sc-stzh-cspace-s>:last-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-bottom]{margin-bottom:0 !important}";
+const stzhCspaceCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host ::slotted(stzh-input),:host ::slotted(stzh-datepicker),:host ::slotted(stzh-dropdown),:host ::slotted(stzh-langnav),:host ::slotted(stzh-fieldset),:host ::slotted(stzh-actions),:host ::slotted(stzh-upload),:host ::slotted(stzh-saptcha),:host ::slotted(stzh-checkboxgroup),:host ::slotted(stzh-radiogroup),:host ::slotted(stzh-message){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h1),:host ::slotted(stzh-heading[level=\"1\"]),:host ::slotted(h2),:host ::slotted(stzh-heading[level=\"2\"]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(h3),:host ::slotted(stzh-heading[level=\"3\"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level=\"4\"]){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(h3),:host ::slotted(stzh-heading[level=\"3\"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level=\"4\"]){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(h3),:host ::slotted(stzh-heading[level=\"3\"]),:host ::slotted(h4),:host ::slotted(stzh-heading[level=\"4\"]){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(p),:host ::slotted(stzh-text),:host ::slotted(ul),:host ::slotted(ol),:host ::slotted(dl),:host ::slotted(stzh-list){margin-bottom:var(--stzh-space-large)}}:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=hero]),:host ::slotted(stzh-heading[curve=hero]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h1]),:host ::slotted(stzh-heading[curve=h1]),:host ::slotted(stzh-text[curve=h2]),:host ::slotted(stzh-heading[curve=h2]){margin-top:var(--stzh-space-xxxxlarge)}}:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=h3]),:host ::slotted(stzh-heading[curve=h3]),:host ::slotted(stzh-text[curve=h4]),:host ::slotted(stzh-heading[curve=h4]){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-text[curve=p1]),:host ::slotted(stzh-text[curve=p2]),:host ::slotted(stzh-heading[curve=p1]),:host ::slotted(stzh-heading[curve=p2]){margin-bottom:var(--stzh-space-large)}}:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(.section),:host ::slotted(stzh-accordion),:host ::slotted(stzh-anchornav),:host ::slotted(stzh-audio),:host ::slotted(stzh-microsite-teaserlist),:host ::slotted(stzh-textandimage),:host ::slotted(stzh-figure),:host ::slotted(stzh-chart),:host ::slotted(stzh-sitemap),:host ::slotted(stzh-section),:host ::slotted(stzh-hr){margin-bottom:var(--stzh-space-xxxxlarge)}}:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-olmap),:host ::slotted(stzh-anchornav){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-contact),:host ::slotted(stzh-card){margin-bottom:var(--stzh-space-xlarge)}}:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-table),:host ::slotted(stzh-datatable){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagetitle){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagetitle){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagetitle){margin-bottom:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-pagebottom){margin-top:var(--stzh-space-xxxlarge)}}:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-progressbar){margin-top:var(--stzh-space-xbig)}}:host ::slotted(stzh-pagination){margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}:host ::slotted(stzh-actions){margin-top:var(--stzh-space-xxlarge)}:host ::slotted(stzh-actions)[variant=process]{margin-top:var(--stzh-space-large)}:host ::slotted(stzh-fieldset){margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}:host ::slotted(stzh-fieldset)[legend]{margin-top:var(--stzh-space-xxlarge)}:host ::slotted(stzh-heading[level=\"4\"]+stzh-datalist),:host ::slotted(stzh-heading[curve=h4]+stzh-datalist){margin-top:0}:host([remove-first-margin]:not([remove-first-margin=false])) ::slotted(:first-child),:host([remove-first-margin]:not([remove-first-margin=false])) ::slotted([no-cspace-top]){margin-top:0 !important}:host([remove-last-margin]:not([remove-last-margin=false])) ::slotted(:last-child),:host([remove-last-margin]:not([remove-last-margin=false])) ::slotted([no-cspace-bottom]){margin-bottom:0 !important}";
 
 const StzhCspace$1 = /*@__PURE__*/ proxyCustomElement(class StzhCspace extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
+    this.removeFirstMargin = true;
+    this.removeLastMargin = true;
   }
   render() {
     const classes = {
@@ -14,7 +17,10 @@ const StzhCspace$1 = /*@__PURE__*/ proxyCustomElement(class StzhCspace extends H
     return (h(Host, null, h("div", { class: classes }, h("slot", null))));
   }
   static get style() { return stzhCspaceCss; }
-}, [6, "stzh-cspace"]);
+}, [1, "stzh-cspace", {
+    "removeFirstMargin": [516, "remove-first-margin"],
+    "removeLastMargin": [516, "remove-last-margin"]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/stzh-cspace.js.map

@@ -1 +1 @@
-{"file":"stzh-cspace.js","mappings":";;AAAA,MAAM,aAAa,GAAG,07nBAA07nB;;MCcn8nBA,YAAU;;;;;EACrB,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCspace"],"sources":["./src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace&encapsulation=scoped","./src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":[":host {\n  @include clearfix;\n  clear: both;\n\n  ::slotted(stzh-input),\n  ::slotted(stzh-datepicker),\n  ::slotted(stzh-dropdown),\n  ::slotted(stzh-langnav),\n  ::slotted(stzh-fieldset),\n  ::slotted(stzh-actions),\n  ::slotted(stzh-upload),\n  ::slotted(stzh-checkbox),\n  ::slotted(stzh-checkboxgroup),\n  ::slotted(stzh-radio),\n  ::slotted(stzh-radiogroup) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n  }\n\n  ::slotted(h1),\n  ::slotted(stzh-heading[level=\"1\"]),\n  ::slotted(h2),\n  ::slotted(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(h3),\n  ::slotted(stzh-heading[level=\"3\"]),\n  ::slotted(h4),\n  ::slotted(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(p),\n  ::slotted(stzh-text),\n  ::slotted(stzh-contact),\n  ::slotted(ul),\n  ::slotted(ol),\n  ::slotted(dl),\n  ::slotted(stzh-list) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(stzh-text[curve=\"hero\"]),\n  ::slotted(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n  }\n\n  ::slotted(stzh-text[curve=\"h3\"]),\n  ::slotted(stzh-heading[curve=\"h3\"]),\n  ::slotted(stzh-text[curve=\"h4\"]),\n  ::slotted(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"p1\"]),\n  ::slotted(stzh-text[curve=\"p2\"]),\n  ::slotted(stzh-heading[curve=\"p1\"]),\n  ::slotted(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(*) .section,\n  ::slotted(.section),\n  ::slotted(stzh-anchornav),\n  ::slotted(stzh-audio),\n  ::slotted(stzh-microsite-teaserlist),\n  ::slotted(stzh-olmap),\n  ::slotted(stzh-textandimage),\n  ::slotted(stzh-figure),\n  ::slotted(stzh-chart),\n  ::slotted(stzh-sitemap),\n  ::slotted(stzh-datalist),\n  ::slotted(stzh-richtext),\n  ::slotted(stzh-progressbar),\n  ::slotted(stzh-section),\n  ::slotted(stzh-hr) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  ::slotted(*) .contextparsys,\n  ::slotted(*) .section.has-invert {\n    @include spaceCurve('margin-top', 'big');\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  ::slotted(*) .section.has-invert stzh-invert stzh-container {\n    @include spaceCurve('padding-top', 'large');\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  ::slotted(*) .section.has-sticky {\n    display: contents;\n  }\n\n  ::slotted(*) .section.has-pagetitle,\n  ::slotted(stzh-pagetitle),\n  ::slotted(*) .section.has-table,\n  ::slotted(stzh-table),\n  ::slotted(*) .section.has-datatable,\n  ::slotted(stzh-datatable) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(*) .section.has-anchornav,\n  ::slotted(stzh-anchornav) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(*) .section.has-actions,\n  ::slotted(stzh-actions) {\n    margin-top: space('xxlarge');\n\n    &[variant=\"process\"] {\n      margin-top: space('large');\n    }\n  }\n\n  ::slotted(*) .section.has-fieldset,\n  ::slotted(stzh-fieldset) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n\n    &[legend] {\n      margin-top: space('xxlarge');\n    }\n  }\n\n  ::slotted(stzh-heading[level=\"4\"] + stzh-datalist),\n  ::slotted(stzh-heading[curve=\"h4\"] + stzh-datalist) {\n    margin-top: 0;\n  }\n\n  // Remove edge margin\n\n  ::slotted(*) .section:first-child,\n  ::slotted(*) .section[no-cspace-top],\n  ::slotted(*) .contextparsys:first-child,\n  ::slotted(*) .contextparsys[no-cspace-top],\n  ::slotted(:first-child),\n  ::slotted([no-cspace-top]) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*) .section:last-child,\n  ::slotted(*) .section[no-cspace-bottom],\n  ::slotted(*) .contextparsys:last-child,\n  ::slotted(*) .contextparsys[no-cspace-bottom],\n  ::slotted(:last-child),\n  ::slotted([no-cspace-bottom]) {\n    margin-bottom: 0 !important;\n  }\n}\n","import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-cspace\",\n  styleUrl: \"stzh-cspace.scss\",\n  scoped: true\n})\nexport class StzhCspace {\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cspace.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ojaAAoja;;MCe7jaA,YAAU;;;;;6BAEiC,IAAI;4BAGL,IAAI;;EAEzD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCspace"],"sources":["./src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace&encapsulation=shadow","./src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-input),\n  ::slotted(stzh-datepicker),\n  ::slotted(stzh-dropdown),\n  ::slotted(stzh-langnav),\n  ::slotted(stzh-fieldset),\n  ::slotted(stzh-actions),\n  ::slotted(stzh-upload),\n  ::slotted(stzh-saptcha),\n  ::slotted(stzh-checkboxgroup),\n  ::slotted(stzh-radiogroup),\n  ::slotted(stzh-message) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n  }\n\n  ::slotted(h1),\n  ::slotted(stzh-heading[level=\"1\"]),\n  ::slotted(h2),\n  ::slotted(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(h3),\n  ::slotted(stzh-heading[level=\"3\"]),\n  ::slotted(h4),\n  ::slotted(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(p),\n  ::slotted(stzh-text),\n  ::slotted(ul),\n  ::slotted(ol),\n  ::slotted(dl),\n  ::slotted(stzh-list) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(stzh-text[curve=\"hero\"]),\n  ::slotted(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"h1\"]),\n  ::slotted(stzh-heading[curve=\"h1\"]),\n  ::slotted(stzh-text[curve=\"h2\"]),\n  ::slotted(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n  }\n\n  ::slotted(stzh-text[curve=\"h3\"]),\n  ::slotted(stzh-heading[curve=\"h3\"]),\n  ::slotted(stzh-text[curve=\"h4\"]),\n  ::slotted(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(stzh-text[curve=\"p1\"]),\n  ::slotted(stzh-text[curve=\"p2\"]),\n  ::slotted(stzh-heading[curve=\"p1\"]),\n  ::slotted(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  ::slotted(.section),\n  ::slotted(stzh-accordion), // TODO: design missing default spacing, we gonna use the most common one\n  ::slotted(stzh-anchornav),\n  ::slotted(stzh-audio), // TOOD: design is using small curve as default spacing, but large looks better\n  ::slotted(stzh-microsite-teaserlist),\n  ::slotted(stzh-textandimage),\n  ::slotted(stzh-figure),\n  ::slotted(stzh-chart),\n  ::slotted(stzh-sitemap),\n  ::slotted(stzh-section),\n  ::slotted(stzh-hr) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  ::slotted(stzh-olmap),\n  ::slotted(stzh-anchornav) {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-contact),\n  ::slotted(stzh-card) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  ::slotted(stzh-table),\n  ::slotted(stzh-datatable) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-pagetitle) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted(stzh-pagebottom) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  ::slotted(stzh-progressbar) {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  ::slotted(stzh-pagination) {\n    margin-top: space('medium');\n    margin-bottom: space('medium');\n  }\n\n  ::slotted(stzh-actions) {\n    margin-top: space('xxlarge');\n\n    &[variant=\"process\"] {\n      margin-top: space('large');\n    }\n  }\n\n  ::slotted(stzh-fieldset) {\n    margin-top: space('large');\n    margin-bottom: space('large');\n\n    &[legend] {\n      margin-top: space('xxlarge');\n    }\n  }\n\n  ::slotted(stzh-heading[level=\"4\"] + stzh-datalist),\n  ::slotted(stzh-heading[curve=\"h4\"] + stzh-datalist) {\n    margin-top: 0;\n  }\n}\n\n// Remove edge margin\n\n:host([remove-first-margin]:not([remove-first-margin=\"false\"])) {\n  ::slotted(:first-child),\n  ::slotted([no-cspace-top]) {\n    margin-top: 0 !important;\n  }\n}\n\n:host([remove-last-margin]:not([remove-last-margin=\"false\"])) {\n  ::slotted(:last-child),\n  ::slotted([no-cspace-bottom]) {\n    margin-bottom: 0 !important;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-cspace\",\n  styleUrl: \"stzh-cspace.scss\",\n  shadow: true\n})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean = true;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean = true;\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-datalist-item2.js

@@ -1,13 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { f as fetchTranslations } from './translation-utils.js';
-import { d as defineCustomElement$5 } from './stzh-badge2.js';
-import { d as defineCustomElement$4 } from './stzh-button2.js';
-import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$6 } from './stzh-badge2.js';
+import { d as defineCustomElement$5 } from './stzh-button2.js';
+import { d as defineCustomElement$4 } from './stzh-icon2.js';
+import { d as defineCustomElement$3 } from './stzh-richtext2.js';
 import { d as defineCustomElement$2 } from './stzh-status2.js';
 import { d as defineCustomElement$1 } from './stzh-tooltip2.js';
 
-const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}";
+const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}";
 
+let datalistItemCounter = 0;
 const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem extends HTMLElement {
   constructor() {
     super();
@@ -50,16 +52,16 @@ const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem
   }
   renderInner(isButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
-    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+    return (h(Fragment, null, h(Item, { "aria-hidden": this.label ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-label`, class: {
         "stzh-datalist-item__label": true,
         "is-button": isButton,
         "is-link": !!this.href
-      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: {
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { id: `${this.datalistItemId}-value`, class: {
         "stzh-datalist-item__value": true,
         "is-button": isButton,
         "is-link": !!this.href
-      }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-        ? (this.a11yExpanded ? "true" : "false") : null }, this.external && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel), this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-labelledby": Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null, "aria-controls": this.a11yControls || null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+        ? (this.a11yExpanded ? "true" : "false") : null }, this.external && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel), h("stzh-richtext", { class: "stzh-datalist-item__richtext", innerHTML: this.value }, h("slot", { name: "value" }))), h(Item, { "aria-hidden": this.statusLabel || this.meta ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-meta`, class: {
         "stzh-datalist-item__meta": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -68,7 +70,7 @@ const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem
   }
   renderLeadingIcon(isButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
-    return (h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+    return (h(Item, { role: "presentation", "aria-hidden": "true", tabindex: "-1", class: {
         "stzh-datalist-item__leading": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -92,6 +94,7 @@ const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem
     }
   }
   async componentWillLoad() {
+    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;
     this.externalWatcher();
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "datalist-item");
@@ -100,6 +103,7 @@ const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem
   render() {
     const isButton = typeof this.a11yExpanded !== "undefined"
       || typeof this.a11yControls !== "undefined";
+    const hasActionButton = !this.href && this.icon;
     const classes = {
       "stzh-datalist-item": true,
       "stzh-datalist-item--is-interactive": !!this.href || isButton,
@@ -119,7 +123,7 @@ const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem
     return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" ?
       h(Fragment, null, this.renderLeadingIcon(isButton), this.renderInner(isButton))
       :
-        h(Fragment, null, this.renderLeadingIcon(isButton), h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton))), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        h(Fragment, null, this.renderLeadingIcon(isButton), h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton))), h(Item, { role: hasActionButton ? null : "presentation", "aria-hidden": hasActionButton ? null : "true", tabindex: "-1", class: {
         "stzh-datalist-item__action-list": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -128,7 +132,7 @@ const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem
         h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" }))
         :
           h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : (this.external ? "external-link" : "arrow-right") }))), isButton &&
-      h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), (!this.href && this.icon) &&
+      h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), hasActionButton &&
       (this.iconTooltip ?
         h("stzh-tooltip", { content: this.iconTooltip }, ActionButton())
         :
@@ -164,7 +168,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-datalist-item", "stzh-badge", "stzh-button", "stzh-icon", "stzh-status", "stzh-tooltip"];
+  const components = ["stzh-datalist-item", "stzh-badge", "stzh-button", "stzh-icon", "stzh-richtext", "stzh-status", "stzh-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-datalist-item":
       if (!customElements.get(tagName)) {
@@ -173,15 +177,20 @@ function defineCustomElement() {
       break;
     case "stzh-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "stzh-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-richtext":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }