@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

package/dist/esm/stzh-cspace.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-cspace.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,gqkGAAgqkG;;MCkBzqkG,UAAU;;;IAoBb,SAAI,GAAG;MACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;QAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;YAC/B,4BAA4B;YAC5B,sKAAsK,CAC3K,CAAC;QAEF,sBAAsB,CAAC,OAAO,CAAC,CAAC,gBAAgB;UAC9C,cAAc,CAAC,gBAAgB,EAAE;YAC/B,iBAAiB,EAAE,KAAK;YACxB,gBAAgB,EAAE,KAAK;WAC2B,CAAC,CAAA;SACtD,CAAC,CAAC;OACJ;KACF,CAAA;;;+BA/B8E,QAAQ;;EAKvF,0BAA0B;IACxB,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EA0BD,kBAAkB;IAChB,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjD;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAGD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACE,EAAC,IAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,KAAK,EAAE,OAAO,IAEd,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;","names":[],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n  @include host;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  // Remove edge margin\n\n  &[has-hidden-first-margin] > .stzh-cspace {\n    & > :first-child {\n      margin-top: 0 !important;\n    }\n\n    & > .section:first-child > *:first-child {\n      margin-top: 0 !important;\n    }\n  }\n\n  &[has-hidden-last-margin] > .stzh-cspace {\n    & > :last-child {\n      margin-bottom: 0 !important;\n    }\n\n    & > .section:last-child > *:last-child {\n      margin-bottom: 0 !important;\n    }\n  }\n}\n\nstzh-cspace > .stzh-cspace {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  // display: flex;\n  // flex-direction: column;\n  // align-items: flex-start;\n\n  & > .section > h1,\n  & > h1,\n  & > .section > :where(stzh-heading[level=\"1\"]),\n  & > :where(stzh-heading[level=\"1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > h2,\n  & > h2,\n  & > .section > :where(stzh-heading[level=\"2\"]),\n  & > :where(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > h3,\n  & > h3,\n  & > .section > :where(stzh-heading[level=\"3\"]),\n  & > :where(stzh-heading[level=\"3\"]) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    @include mq($from: large) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  & > .section > h4,\n  & > h4,\n  & > .section > :where(stzh-heading[level=\"4\"]),\n  & > :where(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > p,\n  & > p,\n  & > .section > stzh-text,\n  & > stzh-text,\n  & > .section > ul,\n  & > ul,\n  & > .section > ol,\n  & > ol,\n  & > .section > dl,\n  & > dl,\n  & > .section > stzh-list,\n  & > stzh-list {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"hero\"]),\n  & > :where(stzh-text[curve=\"hero\"]),\n  & > .section > :where(stzh-heading[curve=\"hero\"]),\n  & > :where(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"h1\"]),\n  & > :where(stzh-text[curve=\"h1\"]),\n  & > .section > :where(stzh-heading[curve=\"h1\"]),\n  & > :where(stzh-heading[curve=\"h1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h2\"]),\n  & > :where(stzh-text[curve=\"h2\"]),\n  & > .section > :where(stzh-heading[curve=\"h2\"]),\n  & > :where(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h3\"]),\n  & > :where(stzh-text[curve=\"h3\"]),\n  & > .section > :where(stzh-heading[curve=\"h3\"]),\n  & > :where(stzh-heading[curve=\"h3\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h4\"]),\n  & > :where(stzh-text[curve=\"h4\"]),\n  & > .section > :where(stzh-heading[curve=\"h4\"]),\n  & > :where(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"p1\"]),\n  & > :where(stzh-text[curve=\"p1\"]),\n  & > .section > :where(stzh-heading[curve=\"p1\"]),\n  & > :where(stzh-heading[curve=\"p1\"]) {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"p2\"]),\n  & > :where(stzh-text[curve=\"p2\"]),\n  & > .section > :where(stzh-heading[curve=\"p2\"]),\n  & > :where(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > stzh-input, // DONE\n  & > stzh-input, // DONE\n  & > .section > stzh-datepicker, // DONE\n  & > stzh-datepicker, // DONE\n  & > .section > stzh-dropdown, // DONE\n  & > stzh-dropdown, // DONE\n  & > .section > stzh-upload, // DONE\n  & > stzh-upload, // DONE\n  & > .section > stzh-checkbox, // DONE\n  & > stzh-checkbox, // DONE\n  & > .section > stzh-checkboxgroup, // DONE\n  & > stzh-checkboxgroup, // DONE\n  & > .section > stzh-radio, // DONE\n  & > stzh-radio, // DONE\n  & > .section > stzh-radiogroup, // DONE\n  & > stzh-radiogroup { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > stzh-message, // DONE\n  & > stzh-message { // DONE\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-chipgroup, // DONE\n  & > stzh-chipgroup, // DONE\n  & > .section > stzh-contact, // DONE\n  & > stzh-contact, // DONE\n  & > .section > stzh-accordion, // DONE\n  & > stzh-accordion, // DONE\n  & > .section > stzh-anchornav, // DONE\n  & > stzh-anchornav, // DONE\n  & > .section > stzh-audio, // DONE\n  & > stzh-audio, // DONE\n  & > .section > stzh-microsite-teaserlist,\n  & > stzh-microsite-teaserlist,\n  & > .section > stzh-gallery, // DONE\n  & > stzh-gallery, // DONE\n  & > .section > stzh-panorama,\n  & > stzh-panorama,\n  & > .section > stzh-chart,\n  & > stzh-chart,\n  & > .section > stzh-sitemap,\n  & > stzh-sitemap,\n  & > .section > stzh-hr,\n  & > stzh-hr,\n  & > .section > stzh-archivelist,\n  & > stzh-archivelist,\n  & > .section > stzh-figure, // DONE\n  & > stzh-figure, // DONE\n  & > stzh-iframe, // DONE\n  & > .section > stzh-youtube, // DONE\n  & > stzh-youtube, // DONE\n  & > .section > stzh-eventinfo,\n  & > stzh-eventinfo,\n  & > .section > stzh-vbz-ticker,\n  & > stzh-vbz-ticker {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-datalist, // DONE\n  & > stzh-datalist, // DONE\n  & > .section > stzh-textandimage, // DONE\n  & > stzh-textandimage { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-section[variant=\"highlight\"], // DONE\n  & > stzh-section[variant=\"highlight\"] { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-pagetitle[background=\"default\"], // DONE\n  & > stzh-pagetitle[background=\"default\"] { // DONE\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n  & > stzh-richtext[has-hidden-last-margin] { // DONE\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-cta, // DONE\n  & > stzh-cta { // DONE\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-olmap,\n  & > stzh-olmap {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-breadcrumb, // DONE\n  & > stzh-breadcrumb { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-card,\n  & > stzh-card {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-appointments,\n  & > stzh-appointments {\n    @include spaceCurve('margin-bottom', 'big');\n\n    &[has-heading] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  & > .section > stzh-table, // DONE\n  & > stzh-table, // DONE\n  & > .section > stzh-datatable, // DONE\n  & > stzh-datatable { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-pagebottom,\n  & > stzh-pagebottom {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-progressbar,\n  & > stzh-progressbar {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  & > .section > stzh-pagination, // DONE\n  & > stzh-pagination { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-actions, // DONE\n  & > stzh-actions { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-saptcha, // DONE\n  & > stzh-saptcha { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-fieldset, // DONE\n  & > stzh-fieldset { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    &[legend] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  // & > stzh-heading[level=\"4\"] + stzh-datalist,\n  // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n  //   margin-top: 0;\n  // }\n\n  /* Utility classes for applying spacing curves */\n\n  @each $spaceCurve, $value in $spaceCurves {\n    $defaultSize: map-get($value, 'size');\n    $breakpointSizes: map-get($value, 'sizes');\n\n    & > .section > .cspace-y-curve-#{$spaceCurve},\n    & > .cspace-y-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n\n    & > .section > .cspace-t-curve-#{$spaceCurve},\n    & > .cspace-t-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n    }\n\n    & > .section > .cspace-b-curve-#{$spaceCurve},\n    & > .cspace-b-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n  }\n\n  /* Utility classes for applying spacing values */\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $space, $value in $spaceSizes {\n      @if $breakpoint {\n        & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n        & > .#{$breakpoint}\\:cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n        & > .#{$breakpoint}\\:cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n        & > .#{$breakpoint}\\:cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      } @else {\n        & > .section > .cspace-y-#{$space},\n        & > .cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .cspace-t-#{$space},\n        & > .cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .cspace-b-#{$space},\n        & > .cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      }\n    }\n  }\n\n  & > .section > .cspace-y-0,\n  & > .cspace-y-0 {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  & > .section > .cspace-t-0,\n  & > .cspace-t-0 {\n    margin-top: 0;\n  }\n\n  & > .section > .cspace-b-0,\n  & > .cspace-b-0 {\n    margin-bottom: 0;\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    & > .section > .#{$breakpoint}\\:cspace-y-0,\n    & > .#{$breakpoint}\\:cspace-y-0 {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-t-0,\n    & > .#{$breakpoint}\\:cspace-t-0 {\n      margin-top: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-b-0,\n    & > .#{$breakpoint}\\:cspace-b-0 {\n      margin-bottom: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\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})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n  @Prop({ reflect: true }) preventRemoveNested: \"direct\" | \"deep\" | \"disabled\" = \"direct\";\n\n  @Element() element: HTMLStzhCspaceElement;\n\n  @Watch(\"preventRemoveNested\")\n  preventRemoveNestedWatcher() {\n    this.init();\n  }\n\n  private observer: MutationObserver;\n  private rootElement: HTMLElement;\n\n  private init = () => {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (this.preventRemoveNested !== \"disabled\") {\n      const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n        this.preventRemoveNested === \"deep\"\n          ? \"stzh-cspace, stzh-richtext\"\n          : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\"\n      );\n\n      nestedCspaceOrRichtext.forEach((cspaceOrRichtext) => {  \n        setPropsIfNull(cspaceOrRichtext, {\n          removeFirstMargin: false,\n          removeLastMargin: false,\n        } as HTMLStzhCspaceElement | HTMLStzhRichtextElement)\n      });\n    }\n  }\n\n  componentDidRender() {\n    this.init();\n\n    this.observer.observe(this.rootElement, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  connectedCallback() {\n    this.observer = new MutationObserver(this.init);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cspace.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,23kGAA23kG;;MCkBp4kG,UAAU;;;IAoBb,SAAI,GAAG;MACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;QAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;YAC/B,4BAA4B;YAC5B,sKAAsK,CAC3K,CAAC;QAEF,sBAAsB,CAAC,OAAO,CAAC,CAAC,gBAAgB;UAC9C,cAAc,CAAC,gBAAgB,EAAE;YAC/B,iBAAiB,EAAE,KAAK;YACxB,gBAAgB,EAAE,KAAK;WAC2B,CAAC,CAAA;SACtD,CAAC,CAAC;OACJ;KACF,CAAA;;;+BA/B8E,QAAQ;;EAKvF,0BAA0B;IACxB,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EA0BD,kBAAkB;IAChB,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjD;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAGD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACE,EAAC,IAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,KAAK,EAAE,OAAO,IAEd,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;","names":[],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n  @include host;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  // Remove edge margin\n\n  &[has-hidden-first-margin] > .stzh-cspace {\n    & > :first-child {\n      margin-top: 0 !important;\n    }\n\n    & > .section:first-child > *:first-child {\n      margin-top: 0 !important;\n    }\n  }\n\n  &[has-hidden-last-margin] > .stzh-cspace {\n    & > :last-child {\n      margin-bottom: 0 !important;\n    }\n\n    & > .section:last-child > *:last-child {\n      margin-bottom: 0 !important;\n    }\n  }\n}\n\nstzh-cspace > .stzh-cspace {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  // display: flex;\n  // flex-direction: column;\n  // align-items: flex-start;\n\n  & > .section > h1,\n  & > h1,\n  & > .section > :where(stzh-heading[level=\"1\"]),\n  & > :where(stzh-heading[level=\"1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > h2,\n  & > h2,\n  & > .section > :where(stzh-heading[level=\"2\"]),\n  & > :where(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > h3,\n  & > h3,\n  & > .section > :where(stzh-heading[level=\"3\"]),\n  & > :where(stzh-heading[level=\"3\"]) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    @include mq($from: large) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  & > .section > h4,\n  & > h4,\n  & > .section > :where(stzh-heading[level=\"4\"]),\n  & > :where(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > p,\n  & > p,\n  & > .section > stzh-text,\n  & > stzh-text,\n  & > .section > ul,\n  & > ul,\n  & > .section > ol,\n  & > ol,\n  & > .section > dl,\n  & > dl,\n  & > .section > stzh-list,\n  & > stzh-list {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"hero\"]),\n  & > :where(stzh-text[curve=\"hero\"]),\n  & > .section > :where(stzh-heading[curve=\"hero\"]),\n  & > :where(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"h1\"]),\n  & > :where(stzh-text[curve=\"h1\"]),\n  & > .section > :where(stzh-heading[curve=\"h1\"]),\n  & > :where(stzh-heading[curve=\"h1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h2\"]),\n  & > :where(stzh-text[curve=\"h2\"]),\n  & > .section > :where(stzh-heading[curve=\"h2\"]),\n  & > :where(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h3\"]),\n  & > :where(stzh-text[curve=\"h3\"]),\n  & > .section > :where(stzh-heading[curve=\"h3\"]),\n  & > :where(stzh-heading[curve=\"h3\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h4\"]),\n  & > :where(stzh-text[curve=\"h4\"]),\n  & > .section > :where(stzh-heading[curve=\"h4\"]),\n  & > :where(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"p1\"]),\n  & > :where(stzh-text[curve=\"p1\"]),\n  & > .section > :where(stzh-heading[curve=\"p1\"]),\n  & > :where(stzh-heading[curve=\"p1\"]) {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"p2\"]),\n  & > :where(stzh-text[curve=\"p2\"]),\n  & > .section > :where(stzh-heading[curve=\"p2\"]),\n  & > :where(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > stzh-input, // DONE\n  & > stzh-input, // DONE\n  & > .section > stzh-datepicker, // DONE\n  & > stzh-datepicker, // DONE\n  & > .section > stzh-daterange, // DONE\n  & > stzh-daterange, // DONE\n  & > .section > stzh-dropdown, // DONE\n  & > stzh-dropdown, // DONE\n  & > .section > stzh-upload, // DONE\n  & > stzh-upload, // DONE\n  & > .section > stzh-checkbox, // DONE\n  & > stzh-checkbox, // DONE\n  & > .section > stzh-checkboxgroup, // DONE\n  & > stzh-checkboxgroup, // DONE\n  & > .section > stzh-radio, // DONE\n  & > stzh-radio, // DONE\n  & > .section > stzh-radiogroup, // DONE\n  & > stzh-radiogroup { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > stzh-chipgroup, // DONE\n  & > stzh-chipgroup, // DONE\n  & > .section > stzh-chipselect, // DONE\n  & > stzh-chipselect { // DONE\n    margin-bottom: space('xlarge');\n  }\n\n  & > .section > stzh-message, // DONE\n  & > stzh-message { // DONE\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-contact, // DONE\n  & > stzh-contact, // DONE\n  & > .section > stzh-accordion, // DONE\n  & > stzh-accordion, // DONE\n  & > .section > stzh-anchornav, // DONE\n  & > stzh-anchornav, // DONE\n  & > .section > stzh-audio, // DONE\n  & > stzh-audio, // DONE\n  & > .section > stzh-microsite-teaserlist,\n  & > stzh-microsite-teaserlist,\n  & > .section > stzh-gallery, // DONE\n  & > stzh-gallery, // DONE\n  & > .section > stzh-panorama,\n  & > stzh-panorama,\n  & > .section > stzh-chart,\n  & > stzh-chart,\n  & > .section > stzh-sitemap,\n  & > stzh-sitemap,\n  & > .section > stzh-hr,\n  & > stzh-hr,\n  & > .section > stzh-archivelist,\n  & > stzh-archivelist,\n  & > .section > stzh-figure, // DONE\n  & > stzh-figure, // DONE\n  & > stzh-iframe, // DONE\n  & > .section > stzh-youtube, // DONE\n  & > stzh-youtube, // DONE\n  & > .section > stzh-eventinfo,\n  & > stzh-eventinfo,\n  & > .section > stzh-vbz-ticker,\n  & > stzh-vbz-ticker {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-datalist, // DONE\n  & > stzh-datalist, // DONE\n  & > .section > stzh-textandimage, // DONE\n  & > stzh-textandimage { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-section[variant=\"highlight\"], // DONE\n  & > stzh-section[variant=\"highlight\"] { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-pagetitle[background=\"default\"], // DONE\n  & > stzh-pagetitle[background=\"default\"] { // DONE\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n  & > stzh-richtext[has-hidden-last-margin] { // DONE\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-cta, // DONE\n  & > stzh-cta { // DONE\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-olmap,\n  & > stzh-olmap {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-breadcrumb, // DONE\n  & > stzh-breadcrumb { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-card,\n  & > stzh-card {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-appointments,\n  & > stzh-appointments {\n    @include spaceCurve('margin-bottom', 'big');\n\n    &[has-heading] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  & > .section > stzh-table, // DONE\n  & > stzh-table, // DONE\n  & > .section > stzh-datatable, // DONE\n  & > stzh-datatable { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-pagebottom,\n  & > stzh-pagebottom {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-progressbar,\n  & > stzh-progressbar {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  & > .section > stzh-pagination, // DONE\n  & > stzh-pagination { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-actions, // DONE\n  & > stzh-actions { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-saptcha, // DONE\n  & > stzh-saptcha { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-fieldset, // DONE\n  & > stzh-fieldset { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    &[legend] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  // & > stzh-heading[level=\"4\"] + stzh-datalist,\n  // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n  //   margin-top: 0;\n  // }\n\n  /* Utility classes for applying spacing curves */\n\n  @each $spaceCurve, $value in $spaceCurves {\n    $defaultSize: map-get($value, 'size');\n    $breakpointSizes: map-get($value, 'sizes');\n\n    & > .section > .cspace-y-curve-#{$spaceCurve},\n    & > .cspace-y-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n\n    & > .section > .cspace-t-curve-#{$spaceCurve},\n    & > .cspace-t-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n    }\n\n    & > .section > .cspace-b-curve-#{$spaceCurve},\n    & > .cspace-b-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n  }\n\n  /* Utility classes for applying spacing values */\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $space, $value in $spaceSizes {\n      @if $breakpoint {\n        & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n        & > .#{$breakpoint}\\:cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n        & > .#{$breakpoint}\\:cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n        & > .#{$breakpoint}\\:cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      } @else {\n        & > .section > .cspace-y-#{$space},\n        & > .cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .cspace-t-#{$space},\n        & > .cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .cspace-b-#{$space},\n        & > .cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      }\n    }\n  }\n\n  & > .section > .cspace-y-0,\n  & > .cspace-y-0 {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  & > .section > .cspace-t-0,\n  & > .cspace-t-0 {\n    margin-top: 0;\n  }\n\n  & > .section > .cspace-b-0,\n  & > .cspace-b-0 {\n    margin-bottom: 0;\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    & > .section > .#{$breakpoint}\\:cspace-y-0,\n    & > .#{$breakpoint}\\:cspace-y-0 {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-t-0,\n    & > .#{$breakpoint}\\:cspace-t-0 {\n      margin-top: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-b-0,\n    & > .#{$breakpoint}\\:cspace-b-0 {\n      margin-bottom: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\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})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n  @Prop({ reflect: true }) preventRemoveNested: \"direct\" | \"deep\" | \"disabled\" = \"direct\";\n\n  @Element() element: HTMLStzhCspaceElement;\n\n  @Watch(\"preventRemoveNested\")\n  preventRemoveNestedWatcher() {\n    this.init();\n  }\n\n  private observer: MutationObserver;\n  private rootElement: HTMLElement;\n\n  private init = () => {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (this.preventRemoveNested !== \"disabled\") {\n      const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n        this.preventRemoveNested === \"deep\"\n          ? \"stzh-cspace, stzh-richtext\"\n          : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\"\n      );\n\n      nestedCspaceOrRichtext.forEach((cspaceOrRichtext) => {  \n        setPropsIfNull(cspaceOrRichtext, {\n          removeFirstMargin: false,\n          removeLastMargin: false,\n        } as HTMLStzhCspaceElement | HTMLStzhRichtextElement)\n      });\n    }\n  }\n\n  componentDidRender() {\n    this.init();\n\n    this.observer.observe(this.rootElement, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  connectedCallback() {\n    this.observer = new MutationObserver(this.init);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-cta.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, a as Host, g as getElement
 import { h as hasSlot } from './utils-54aead01.js';
 import './string-utils-e252977e.js';
 
-const stzhCtaCss = ".sc-stzh-cta-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-cta-h{display:none}.sc-stzh-cta-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h *.sc-stzh-cta,.sc-stzh-cta-h *.sc-stzh-cta::before,.sc-stzh-cta-h *.sc-stzh-cta::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-cta-h .has-focus.sc-stzh-cta{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta{outline-style:none !important}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta::-moz-focus-inner{border:0 !important}.sc-stzh-cta-h{--stzh-flyingfocus-color:var(--stzh-color-white);--background-color:var(--stzh-cta-background-color);--heading-color:var(--stzh-color-primary70);--lead-color:var(--stzh-color-primary70);--sticky-background-color:var(--background-color);--button-color:var(--stzh-color-white);--button-background-color:var(--stzh-color-primary70);--button-border-radius:var(--stzh-button-border-radius);--hover-button-color:var(--stzh-color-white);--hover-button-background-color:var(--stzh-color-secondary60);--stuck-background-color:var(--stzh-color-grey10);--stuck-heading-color:var(--stzh-color-primary70);--stuck-lead-color:var(--stzh-base-color);--stuck-sticky-background-color:var(--background-color);--grid-template-areas:var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );--grid-template-columns:var(\n    --stzh-cta-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}[size=small].sc-stzh-cta-h{--button-background-color:transparent;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--stuck-background-color:var(--background-color)}@media screen and (min-width: 600px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta\"\n    )}}@media screen and (min-width: 900px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    )}}@keyframes stzh-cta-effect{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-cta.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-cta__wrapper.sc-stzh-cta{grid-area:cta;background-color:var(--background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])){background-color:var(--stuck-background-color)}.stzh-cta__heading.sc-stzh-cta,.stzh-cta__lead.sc-stzh-cta{transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xlarge);margin-right:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--heading-color)}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__heading.sc-stzh-cta{color:var(--stuck-heading-color)}.stzh-cta__lead.sc-stzh-cta{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);color:var(--lead-color)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta{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-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-large)}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__lead.sc-stzh-cta{color:var(--stuck-lead-color)}.stzh-cta__button.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);width:100%;display:flex;align-items:center;justify-content:space-between;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-decoration:none;border-radius:var(--button-border-radius);color:var(--button-color);background-color:var(--button-background-color);gap:var(--stzh-space-xsmall);transition-property:width, height, min-height, color, background-color, font-size, padding;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-cta__button.sc-stzh-cta{width:auto}}.stzh-cta__button.sc-stzh-cta:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}@media screen and (min-width: 900px){.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-cta__button-text.sc-stzh-cta{display:block}.stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-medium)}.stzh-cta__button.sc-stzh-cta:hover .stzh-cta__button-icon.sc-stzh-cta{animation:stzh-cta-effect 1s}.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--background-color:var(--sticky-background-color);--stuck-background-color:var(--stuck-sticky-background-color);--stuck-padding-left:0px;--stuck-padding-right:0px;display:block}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxxlarge)}}.stzh-cta__buttons.sc-stzh-cta{display:flex;gap:var(--stzh-space-medium)}.stzh-cta--has-lead.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta{margin-bottom:0}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);min-height:var(--stzh-form-input-height)}@media screen and (max-width: 599px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{display:none}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-height)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{margin-top:calc(var(--padding-top) / -1);margin-bottom:calc(var(--padding-bottom) / -1)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{width:100%;max-width:100%;gap:var(--stzh-space-medium)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.is-placeholder.sc-stzh-cta{width:auto;max-width:none;visibility:hidden;position:absolute;pointer-events:none}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta:not(.is-placeholder){width:var(--button-width, auto)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-large)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-cta--is-not-loaded.sc-stzh-cta{visibility:hidden}.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__lead.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{transition-duration:0ms}";
+const stzhCtaCss = ".sc-stzh-cta-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-cta-h{display:none}.sc-stzh-cta-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h *.sc-stzh-cta,.sc-stzh-cta-h *.sc-stzh-cta::before,.sc-stzh-cta-h *.sc-stzh-cta::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-cta-h .has-focus.sc-stzh-cta{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta{outline-style:none !important}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta::-moz-focus-inner{border:0 !important}.sc-stzh-cta-h{--stzh-flyingfocus-color:var(--stzh-color-white);--background-color:var(--stzh-cta-background-color);--heading-color:var(--stzh-color-white);--lead-color:var(--stzh-color-white);--sticky-background-color:var(--background-color);--button-color:var(--stzh-color-white);--button-background-color:var(--stzh-color-primary70);--button-border-radius:var(--stzh-button-border-radius);--hover-button-color:var(--stzh-color-white);--hover-button-background-color:var(--stzh-color-secondary60);--stuck-background-color:var(--stzh-color-grey10);--stuck-heading-color:var(--stzh-color-primary70);--stuck-lead-color:var(--stzh-base-color);--stuck-sticky-background-color:var(--background-color);--grid-template-areas:var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );--grid-template-columns:var(\n    --stzh-cta-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}[size=small].sc-stzh-cta-h{--button-background-color:transparent;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--stuck-background-color:var(--background-color)}@media screen and (min-width: 600px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta\"\n    )}}@media screen and (min-width: 900px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    )}}@keyframes stzh-cta-effect{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-cta.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-cta__wrapper.sc-stzh-cta{grid-area:cta;background-color:var(--background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])){background-color:var(--stuck-background-color)}.stzh-cta__heading.sc-stzh-cta,.stzh-cta__lead.sc-stzh-cta{transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xlarge);margin-right:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--heading-color)}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__heading.sc-stzh-cta{color:var(--stuck-heading-color)}.stzh-cta__lead.sc-stzh-cta{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);color:var(--lead-color)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta{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-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-large)}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__lead.sc-stzh-cta{color:var(--stuck-lead-color)}.stzh-cta__button.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);width:100%;display:flex;align-items:center;justify-content:space-between;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-decoration:none;border-radius:var(--button-border-radius);color:var(--button-color);background-color:var(--button-background-color);gap:var(--stzh-space-xsmall);transition-property:width, height, min-height, color, background-color, font-size, padding;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-cta__button.sc-stzh-cta{width:auto}}.stzh-cta__button.sc-stzh-cta:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}@media screen and (min-width: 900px){.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-cta__button-text.sc-stzh-cta{display:block}.stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-medium)}.stzh-cta__button.sc-stzh-cta:hover .stzh-cta__button-icon.sc-stzh-cta{animation:stzh-cta-effect 1s}.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--background-color:var(--sticky-background-color);--stuck-background-color:var(--stuck-sticky-background-color);--stuck-padding-left:0px;--stuck-padding-right:0px;display:block}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxxlarge)}}.stzh-cta__buttons.sc-stzh-cta{display:flex;gap:var(--stzh-space-medium)}.stzh-cta--has-lead.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta{margin-bottom:0}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);min-height:var(--stzh-form-input-height)}@media screen and (max-width: 599px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{display:none}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-height)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{margin-top:calc(var(--padding-top) / -1);margin-bottom:calc(var(--padding-bottom) / -1)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{width:100%;max-width:100%;gap:var(--stzh-space-medium)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.is-placeholder.sc-stzh-cta{width:auto;max-width:none;visibility:hidden;position:absolute;pointer-events:none}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta:not(.is-placeholder){width:var(--button-width, auto)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-large)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-cta--is-not-loaded.sc-stzh-cta{visibility:hidden}.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__lead.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{transition-duration:0ms}";
 
 var counter = 0;
 const StzhCta = class {
@@ -10,6 +10,7 @@ const StzhCta = class {
     registerInstance(this, hostRef);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
+    this.stzhClick = createEvent(this, "stzhClick", 7);
     this.focusedByInput = false;
     this.onRootFocus = () => {
       if (!this.focusedByInput) {
@@ -42,6 +43,13 @@ const StzhCta = class {
         originalEvent: event
       });
     };
+    this.onClick = (event) => {
+      this.stzhClick.emit({
+        component: "stzh-cta",
+        originalEvent: event,
+        href: this.href
+      });
+    };
     this.handlePlaceholderButtonResize = () => {
       if (this.debounceResize) {
         window.cancelAnimationFrame(this.debounceResize);
@@ -96,7 +104,7 @@ const StzhCta = class {
     return (h("div", { class: "stzh-cta__buttons" }, size === "small" &&
       h("div", { class: "stzh-cta__button is-placeholder", ref: (el) => (this.placeholderButton = el) }, h("span", { class: "stzh-cta__button-text" }, this.label), h("stzh-icon", { class: "stzh-cta__button-icon", name: "arrow-right" })), this.href
       ?
-        h("a", { class: "stzh-cta__button", href: this.href, ref: (el) => (this.button = el), onFocus: this.onFocus, onBlur: this.onBlur }, h("span", { class: "stzh-cta__button-text" }, this.label), h("stzh-icon", { class: "stzh-cta__button-icon", name: "arrow-right" }))
+        h("a", { class: "stzh-cta__button", href: this.href, ref: (el) => (this.button = el), onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, h("span", { class: "stzh-cta__button-text" }, this.label), h("stzh-icon", { class: "stzh-cta__button-icon", name: "arrow-right" }))
       :
         h("button", { class: "stzh-cta__button", ref: (el) => (this.button = el), onFocus: this.onFocus, onBlur: this.onBlur }, h("span", { class: "stzh-cta__button-text" }, this.label), h("stzh-icon", { class: "stzh-cta__button-icon", name: "arrow-right" }))));
   }

package/dist/esm/stzh-cta.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-cta.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-cta/stzh-cta.scss?tag=stzh-cta&encapsulation=scoped","src/components/stzh-cta/stzh-cta.tsx"],"sourcesContent":[":host {\n  --stzh-flyingfocus-color: #{$colorWhite};\n\n  --background-color: #{$ctaBackgroundColor};\n  --heading-color: #{$colorPrimary70};\n  --lead-color: #{$colorPrimary70};\n  --sticky-background-color: var(--background-color);\n  --button-color: #{$colorWhite};\n  --button-background-color: #{$colorPrimary70};\n  --button-border-radius: #{$buttonBorderRadius};\n\n  --hover-button-color: #{$colorWhite};\n  --hover-button-background-color: #{$colorSecondary60};\n\n  --stuck-background-color: #{$colorGrey10};\n  --stuck-heading-color: #{$colorPrimary70};\n  --stuck-lead-color: #{$baseColor};\n  --stuck-sticky-background-color: var(--background-color);\n\n  --grid-template-areas: var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-cta-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    );\n  }\n\n  &[size=\"small\"] {\n    --button-background-color: transparent;\n\n    --hover-button-color: var(--button-color);\n    --hover-button-background-color: var(--button-background-color);\n\n    --stuck-background-color: var(--background-color);\n\n    @include mq($from: small) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta cta cta cta cta\"\n      );\n    }\n  }\n}\n\n@keyframes stzh-cta-effect {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-cta {\n  @include font('heavy');\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: cta;\n    background-color: var(--background-color);\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) {\n    background-color: var(--stuck-background-color);\n  }\n\n  &__heading,\n  &__lead {\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-left', 'medium');\n      @include spaceCurve('margin-right', 'medium');\n      @include spaceCurve('margin-bottom', 'medium');\n\n      @include mq($from: small) {\n        margin-bottom: space('xxlarge');\n      }\n\n      @include mq($from: medium) {\n        margin-bottom: space('xxxlarge');\n      }\n\n      @include mq($from: large) {\n        margin-bottom: space('xxxxlarge');\n      }\n    }\n  }\n\n  &__heading {\n    @include fontCurve('h2', 'heading');\n    color: var(--heading-color);\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__heading {\n    color: var(--stuck-heading-color);\n  }\n\n  &__lead {\n    @include fontCurve('p1');\n    color: var(--lead-color);\n\n    &:not(:empty) {\n      @include spaceCurve('padding-top', 'small');\n    }\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__lead {\n    color: var(--stuck-lead-color);\n  }\n\n  &__button {\n    @include font('heavy');\n    @include fontSize('centi');\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    appearance: none;\n    border: none;\n    text-decoration: none;\n    border-radius: var(--button-border-radius);\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    gap: space('xsmall');\n    transition-property: width, height, min-height, color, background-color, font-size, padding;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: auto;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    @include fontSize('milli');\n\n    @include mq($from: medium) {\n      @include fontSize('centi');\n    }\n  }\n\n  &__button-text {\n    display: block;\n  }\n\n  &__button-icon {\n    --size: #{iconSize('medium')};\n  }\n\n  &__button:hover &__button-icon {\n\t\tanimation: stzh-cta-effect 1s;\n  }\n\n  &__sticky {\n    @include spaceCurve('--padding-left', 'medium');\n    @include spaceCurve('--padding-right', 'medium');\n    --padding-top: #{space('large')};\n    --padding-bottom: #{space('large')};\n    --background-color: var(--sticky-background-color);\n    --stuck-background-color: var(--stuck-sticky-background-color);\n    --stuck-padding-left: 0px;\n    --stuck-padding-right: 0px;\n\n    display: block;\n  }\n\n  &__buttons {\n    display: flex;\n    gap: space('medium');\n  }\n\n  /* Has lead variant */\n\n  &--has-lead &__heading {\n    margin-bottom: 0;\n  }\n\n  /* Default variant; has heading, lead or multiple buttons */\n\n  &--size-default &__wrapper {\n    padding-top: space('large');\n    padding-bottom: space('large');\n\n    @include mq($from: small) {\n      @include spaceCurve('padding-top', 'large');\n      @include spaceCurve('padding-bottom', 'large');\n    }\n  }\n\n  &--size-default &__button {\n    padding: space('xsmall') space('xlarge');\n    min-height: $formInputHeight;\n  }\n\n  &--size-default &__button-icon {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n\n  &--size-default &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    min-height: $formInputHeightSmall;\n\n    @include mq($from: medium) {\n      min-height: $formInputHeight;\n    }\n  }\n\n  &--size-default &__sticky {\n    margin-top: calc(var(--padding-top) / -1);\n    margin-bottom: calc(var(--padding-bottom) / -1);\n  }\n\n  /* Small variant; has no heading, lead or multiple buttons */\n\n  &--size-small &__button {\n    width: 100%;\n    max-width: 100%;\n    gap: space('medium');\n\n    &.is-placeholder {\n      width: auto;\n      max-width: none;\n      visibility: hidden;\n      position: absolute;\n      pointer-events: none;\n    }\n  }\n\n  &--size-small &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button:not(.is-placeholder) {\n    width: var(--button-width, auto);\n  }\n\n  &--size-small &__button-icon {\n    --size: #{iconSize('large')};\n  }\n\n  &--size-small &__sticky {\n    @include spaceCurve('--padding-top', 'large');\n    @include spaceCurve('--padding-bottom', 'large');\n\n    &[is-stuck]:not([is-stuck=\"false\"]) {\n      @include spaceCurve('--padding-top', 'medium');\n      @include spaceCurve('--padding-bottom', 'medium');\n    }\n  }\n\n  /* Not loaded */\n\n  &--is-not-loaded {\n    visibility: hidden;\n  }\n\n  &--is-not-loaded &__wrapper,\n  &--is-not-loaded &__heading,\n  &--is-not-loaded &__lead,\n  &--is-not-loaded &__button {\n    transition-duration: 0ms;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhCtaFocusEvent,\n  StzhCtaBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/**\n * @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n */\n@Component({\n  tag: \"stzh-cta\",\n  styleUrl: \"stzh-cta.scss\",\n  scoped: true\n})\nexport class StzhCta {\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Lead */\n  @Prop() lead: string = \"\";\n\n  /** Button Label */\n  @Prop() label: string = \"\";\n\n  /** Button link */\n  @Prop() href: string = \"\";\n\n  /**\n   *  Whether sticky button is disabled.\n   *  Will be set to true automatically on,\n   *  when more than one cta is on the page.\n   */\n  @Prop() stickyDisabled: boolean = true;\n\n  @State() loaded: boolean = false;\n\n  @Element() element: HTMLStzhCtaElement;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement;\n  private placeholderButton: HTMLElement;\n  private debounceResize: number;\n  private focusedByInput: boolean = false;\n  private placeholderButtonResizeObserver: ResizeObserver;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-cta\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-cta\",\n      originalEvent: event\n    });\n  }\n\n  private handlePlaceholderButtonResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n  }\n\n  private updateButtonWidthByResize = () => {\n    if (!this.placeholderButton) {\n      return;\n    }\n\n    const { width } = this.placeholderButton.getBoundingClientRect();\n    this.element.style.setProperty(\"--button-width\", `${width}px`);\n  }\n\n  componentDidLoad() {\n    this.stickyDisabled = counter > 1;\n\n    this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n    if (this.placeholderButton) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateButtonWidthByResize();\n\n        window.setTimeout(() => {\n          this.loaded = true;\n        }, 250);\n      });\n    });\n  }\n\n  componentDidRender() {\n    if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n  }\n\n  connectedCallback() {\n    counter = counter + 1;\n  }\n\n  disconnectedCallback() {\n    // current no way of sending events in disconnected callback, so we just decrease the counter now,\n    // but the user has to set stickyDisabled=false by himself\n    counter = counter - 1;\n\n    this.placeholderButtonResizeObserver?.disconnect();\n  }\n\n  private renderButtons(size: \"default\" | \"small\") {\n    return (\n      <div class=\"stzh-cta__buttons\">\n        {size === \"small\" &&\n          <div\n            class=\"stzh-cta__button is-placeholder\"\n            ref={(el) => (this.placeholderButton = el as HTMLElement)}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        }\n\n        {this.href\n          ?\n          <a\n            class=\"stzh-cta__button\"\n            href={this.href}\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </a>\n          :\n          <button\n            class=\"stzh-cta__button\"\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </button>\n        }\n      </div>\n    );\n  }\n\n  render() {\n    const headingSlotUsed = hasSlot(this.element, 'heading');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n\n    const hasHeading = !!this.heading || headingSlotUsed;\n    const hasLead = !!this.lead || leadSlotUsed;\n    const hasHeadingOrLead = hasHeading || hasLead;\n\n    const size = !hasHeadingOrLead\n      ? \"small\"\n      : \"default\";\n\n    const classes = {\n      \"stzh-cta\": true,\n      \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n      \"stzh-cta--is-not-loaded\": !this.loaded,\n      \"stzh-cta--has-heading\": hasHeading,\n      \"stzh-cta--has-lead\": hasLead,\n      [`stzh-cta--size-${size}`]: !!size,\n    };\n\n    return (\n      <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <article class={classes} data-stzh-sticky-width-container>\n          <div class=\"stzh-cta__wrapper\">\n            <div class=\"stzh-cta__heading\">\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n            <div class=\"stzh-cta__lead\">\n              {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n            </div>\n            <stzh-sticky\n              name=\"cta\"\n              class=\"stzh-cta__sticky\"\n              position=\"fixed\"\n              bleeding\n              disableStickyBottom={this.stickyDisabled}\n              disableStickyTop={true}\n            >\n              {this.renderButtons(size)}\n            </stzh-sticky>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cta.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-cta/stzh-cta.scss?tag=stzh-cta&encapsulation=scoped","src/components/stzh-cta/stzh-cta.tsx"],"sourcesContent":[":host {\n  --stzh-flyingfocus-color: #{$colorWhite};\n\n  --background-color: #{$ctaBackgroundColor};\n  --heading-color: #{$colorWhite};\n  --lead-color: #{$colorWhite};\n  --sticky-background-color: var(--background-color);\n  --button-color: #{$colorWhite};\n  --button-background-color: #{$colorPrimary70};\n  --button-border-radius: #{$buttonBorderRadius};\n\n  --hover-button-color: #{$colorWhite};\n  --hover-button-background-color: #{$colorSecondary60};\n\n  --stuck-background-color: #{$colorGrey10};\n  --stuck-heading-color: #{$colorPrimary70};\n  --stuck-lead-color: #{$baseColor};\n  --stuck-sticky-background-color: var(--background-color);\n\n  --grid-template-areas: var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-cta-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    );\n  }\n\n  &[size=\"small\"] {\n    --button-background-color: transparent;\n\n    --hover-button-color: var(--button-color);\n    --hover-button-background-color: var(--button-background-color);\n\n    --stuck-background-color: var(--background-color);\n\n    @include mq($from: small) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta cta cta cta cta\"\n      );\n    }\n  }\n}\n\n@keyframes stzh-cta-effect {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-cta {\n  @include font('heavy');\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: cta;\n    background-color: var(--background-color);\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) {\n    background-color: var(--stuck-background-color);\n  }\n\n  &__heading,\n  &__lead {\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-left', 'medium');\n      @include spaceCurve('margin-right', 'medium');\n      @include spaceCurve('margin-bottom', 'medium');\n\n      @include mq($from: small) {\n        margin-bottom: space('xxlarge');\n      }\n\n      @include mq($from: medium) {\n        margin-bottom: space('xxxlarge');\n      }\n\n      @include mq($from: large) {\n        margin-bottom: space('xxxxlarge');\n      }\n    }\n  }\n\n  &__heading {\n    @include fontCurve('h2', 'heading');\n    color: var(--heading-color);\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__heading {\n    color: var(--stuck-heading-color);\n  }\n\n  &__lead {\n    @include fontCurve('p1');\n    color: var(--lead-color);\n\n    &:not(:empty) {\n      @include spaceCurve('padding-top', 'small');\n    }\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__lead {\n    color: var(--stuck-lead-color);\n  }\n\n  &__button {\n    @include font('heavy');\n    @include fontSize('centi');\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    appearance: none;\n    border: none;\n    text-decoration: none;\n    border-radius: var(--button-border-radius);\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    gap: space('xsmall');\n    transition-property: width, height, min-height, color, background-color, font-size, padding;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: auto;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    @include fontSize('milli');\n\n    @include mq($from: medium) {\n      @include fontSize('centi');\n    }\n  }\n\n  &__button-text {\n    display: block;\n  }\n\n  &__button-icon {\n    --size: #{iconSize('medium')};\n  }\n\n  &__button:hover &__button-icon {\n\t\tanimation: stzh-cta-effect 1s;\n  }\n\n  &__sticky {\n    @include spaceCurve('--padding-left', 'medium');\n    @include spaceCurve('--padding-right', 'medium');\n    --padding-top: #{space('large')};\n    --padding-bottom: #{space('large')};\n    --background-color: var(--sticky-background-color);\n    --stuck-background-color: var(--stuck-sticky-background-color);\n    --stuck-padding-left: 0px;\n    --stuck-padding-right: 0px;\n\n    display: block;\n  }\n\n  &__buttons {\n    display: flex;\n    gap: space('medium');\n  }\n\n  /* Has lead variant */\n\n  &--has-lead &__heading {\n    margin-bottom: 0;\n  }\n\n  /* Default variant; has heading, lead or multiple buttons */\n\n  &--size-default &__wrapper {\n    padding-top: space('large');\n    padding-bottom: space('large');\n\n    @include mq($from: small) {\n      @include spaceCurve('padding-top', 'large');\n      @include spaceCurve('padding-bottom', 'large');\n    }\n  }\n\n  &--size-default &__button {\n    padding: space('xsmall') space('xlarge');\n    min-height: $formInputHeight;\n  }\n\n  &--size-default &__button-icon {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n\n  &--size-default &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    min-height: $formInputHeightSmall;\n\n    @include mq($from: medium) {\n      min-height: $formInputHeight;\n    }\n  }\n\n  &--size-default &__sticky {\n    margin-top: calc(var(--padding-top) / -1);\n    margin-bottom: calc(var(--padding-bottom) / -1);\n  }\n\n  /* Small variant; has no heading, lead or multiple buttons */\n\n  &--size-small &__button {\n    width: 100%;\n    max-width: 100%;\n    gap: space('medium');\n\n    &.is-placeholder {\n      width: auto;\n      max-width: none;\n      visibility: hidden;\n      position: absolute;\n      pointer-events: none;\n    }\n  }\n\n  &--size-small &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button:not(.is-placeholder) {\n    width: var(--button-width, auto);\n  }\n\n  &--size-small &__button-icon {\n    --size: #{iconSize('large')};\n  }\n\n  &--size-small &__sticky {\n    @include spaceCurve('--padding-top', 'large');\n    @include spaceCurve('--padding-bottom', 'large');\n\n    &[is-stuck]:not([is-stuck=\"false\"]) {\n      @include spaceCurve('--padding-top', 'medium');\n      @include spaceCurve('--padding-bottom', 'medium');\n    }\n  }\n\n  /* Not loaded */\n\n  &--is-not-loaded {\n    visibility: hidden;\n  }\n\n  &--is-not-loaded &__wrapper,\n  &--is-not-loaded &__heading,\n  &--is-not-loaded &__lead,\n  &--is-not-loaded &__button {\n    transition-duration: 0ms;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhCtaFocusEvent,\n  StzhCtaBlurEvent, StzhCtaClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/**\n * @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n */\n@Component({\n  tag: \"stzh-cta\",\n  styleUrl: \"stzh-cta.scss\",\n  scoped: true\n})\nexport class StzhCta {\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Lead */\n  @Prop() lead: string = \"\";\n\n  /** Button Label */\n  @Prop() label: string = \"\";\n\n  /** Button link */\n  @Prop() href: string = \"\";\n\n  /**\n   *  Whether sticky button is disabled.\n   *  Will be set to true automatically on,\n   *  when more than one cta is on the page.\n   */\n  @Prop() stickyDisabled: boolean = true;\n\n  @State() loaded: boolean = false;\n\n  @Element() element: HTMLStzhCtaElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhCtaClickEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement;\n  private placeholderButton: HTMLElement;\n  private debounceResize: number;\n  private focusedByInput: boolean = false;\n  private placeholderButtonResizeObserver: ResizeObserver;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-cta\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-cta\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-cta\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  private handlePlaceholderButtonResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n  }\n\n  private updateButtonWidthByResize = () => {\n    if (!this.placeholderButton) {\n      return;\n    }\n\n    const { width } = this.placeholderButton.getBoundingClientRect();\n    this.element.style.setProperty(\"--button-width\", `${width}px`);\n  }\n\n  componentDidLoad() {\n    this.stickyDisabled = counter > 1;\n\n    this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n    if (this.placeholderButton) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateButtonWidthByResize();\n\n        window.setTimeout(() => {\n          this.loaded = true;\n        }, 250);\n      });\n    });\n  }\n\n  componentDidRender() {\n    if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n  }\n\n  connectedCallback() {\n    counter = counter + 1;\n  }\n\n  disconnectedCallback() {\n    // current no way of sending events in disconnected callback, so we just decrease the counter now,\n    // but the user has to set stickyDisabled=false by himself\n    counter = counter - 1;\n\n    this.placeholderButtonResizeObserver?.disconnect();\n  }\n\n  private renderButtons(size: \"default\" | \"small\") {\n    return (\n      <div class=\"stzh-cta__buttons\">\n        {size === \"small\" &&\n          <div\n            class=\"stzh-cta__button is-placeholder\"\n            ref={(el) => (this.placeholderButton = el as HTMLElement)}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        }\n\n        {this.href\n          ?\n          <a\n            class=\"stzh-cta__button\"\n            href={this.href}\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </a>\n          :\n          <button\n            class=\"stzh-cta__button\"\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </button>\n        }\n      </div>\n    );\n  }\n\n  render() {\n    const headingSlotUsed = hasSlot(this.element, 'heading');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n\n    const hasHeading = !!this.heading || headingSlotUsed;\n    const hasLead = !!this.lead || leadSlotUsed;\n    const hasHeadingOrLead = hasHeading || hasLead;\n\n    const size = !hasHeadingOrLead\n      ? \"small\"\n      : \"default\";\n\n    const classes = {\n      \"stzh-cta\": true,\n      \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n      \"stzh-cta--is-not-loaded\": !this.loaded,\n      \"stzh-cta--has-heading\": hasHeading,\n      \"stzh-cta--has-lead\": hasLead,\n      [`stzh-cta--size-${size}`]: !!size,\n    };\n\n    return (\n      <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <article class={classes} data-stzh-sticky-width-container>\n          <div class=\"stzh-cta__wrapper\">\n            <div class=\"stzh-cta__heading\">\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n            <div class=\"stzh-cta__lead\">\n              {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n            </div>\n            <stzh-sticky\n              name=\"cta\"\n              class=\"stzh-cta__sticky\"\n              position=\"fixed\"\n              bleeding\n              disableStickyBottom={this.stickyDisabled}\n              disableStickyTop={true}\n            >\n              {this.renderButtons(size)}\n            </stzh-sticky>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-datalist_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement, F as Fragment } from './index-e3050b18.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils-d80f83d2.js';
 
-const stzhDatalistCss = ".sc-stzh-datalist-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--columns:1;--columns-gap:var(--stzh-grid-gutter);--list-display:grid;--list-margin-right:calc(var(--columns-gap) / -1);--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));--full-grid-column:1 / 5;--nested-margin-left:var(--stzh-datalist-nested-margin-left, 0px);--details-content-width:var(--stzh-datalist-details-content-width, 100%);--grid-template-areas:var(\n    --stzh-datalist-grid-template-areas,\n    \"list list list list\"\n  );--grid-template-columns:var(\n    --stzh-datalist-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  );margin-left:var(--nested-margin-left)}@media screen and (min-width: 600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-small);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n    )}}@media screen and (min-width: 900px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-medium);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list list list list list\"\n    );--grid-template-columns:var(\n      --stzh-datalist-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-ultra)}}.sc-stzh-datalist-h .sc-stzh-datalist-s>*:not([class*=cq-]){display:contents}[is-direction=horizontal].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 6}[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}[variant=table].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 7}[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}.sc-stzh-datalist-h:has([class*=cq-]){--list-display:block;--list-margin-right:0}.stzh-datalist.sc-stzh-datalist{--stzh-datalist-nested-margin-left:var(--stzh-space-large);--stzh-details-content-grid-column:var(--full-grid-column);--stzh-details-content-padding-right:var(--columns-gap);--stzh-details-content-width:var(--details-content-width);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-datalist__wrapper.sc-stzh-datalist{grid-area:list;overflow:visible}.stzh-datalist__list.sc-stzh-datalist{display:var(--list-display);border-collapse:collapse;grid-template-columns:var(--list-grid-template-columns);align-items:stretch;margin-right:var(--list-margin-right)}.stzh-datalist--has-multiple-columns.sc-stzh-datalist{--stzh-datalist-item-nested-display:none}";
+const stzhDatalistCss = ".sc-stzh-datalist-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--columns:1;--columns-gap:var(--stzh-grid-gutter);--list-display:grid;--list-margin-right:calc(var(--columns-gap) / -1);--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));--full-grid-column:1 / 5;--nested-margin-left:var(--stzh-datalist-nested-margin-left, 0px);--details-content-width:var(--stzh-datalist-details-content-width, 100%);--grid-template-areas:var(\n    --stzh-datalist-grid-template-areas,\n    \"list list list list\"\n  );--grid-template-columns:var(\n    --stzh-datalist-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  );margin-left:var(--nested-margin-left)}@media screen and (min-width: 600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-small);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n    )}}@media screen and (min-width: 900px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-medium);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list list list list list\"\n    );--grid-template-columns:var(\n      --stzh-datalist-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-ultra)}}.sc-stzh-datalist-h .sc-stzh-datalist-s>.layout_column>*:not([class*=cq-]),.sc-stzh-datalist-h .sc-stzh-datalist-s>*:not([class*=cq-]){display:contents}[is-direction=horizontal].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 6}[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}[variant=table].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 7}[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}.sc-stzh-datalist-h:has([class*=cq-]){--stzh-datalist-item-wrapper-display:flex;--list-display:block;--list-margin-right:0}.stzh-datalist.sc-stzh-datalist{--stzh-datalist-nested-margin-left:var(--stzh-space-large);--stzh-details-content-grid-column:var(--full-grid-column);--stzh-details-content-padding-right:var(--columns-gap);--stzh-details-content-width:var(--details-content-width);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-datalist__wrapper.sc-stzh-datalist{grid-area:list;overflow:visible}.stzh-datalist__list.sc-stzh-datalist{display:var(--list-display);border-collapse:collapse;grid-template-columns:var(--list-grid-template-columns);align-items:stretch;margin-right:var(--list-margin-right)}.stzh-datalist--has-multiple-columns.sc-stzh-datalist{--stzh-datalist-item-nested-display:none}";
 
 const StzhDatalist = class {
   constructor(hostRef) {
@@ -133,22 +133,30 @@ const StzhDatalist = class {
 };
 StzhDatalist.style = stzhDatalistCss;
 
-const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.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{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:contents}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.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{flex-grow:1;display:grid}.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:flex;text-align:left;-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{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);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;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(--value-font-family);font-weight:var(--value-font-weight);width:auto}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.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__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: 900px){.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{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.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:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.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__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-bottom:var(--stzh-space-medium)}}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-bottom:var(--stzh-space-medium)}}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xsmall);padding-top:calc(var(--stzh-space-xsmall) + 0.75rem)}@media screen and (min-width: 900px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-small) + 0.75rem)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-medium) + 0.75rem)}}.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__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}";
+const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.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{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:var(--wrapper-display);align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.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{flex-grow:1;display:grid}.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:flex;text-align:left;-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{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);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;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(--value-font-family);font-weight:var(--value-font-weight);width:auto}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.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__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: 900px){.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{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.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:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.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__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-bottom:var(--stzh-space-medium)}}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-bottom:var(--stzh-space-medium)}}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xsmall);padding-top:calc(var(--stzh-space-xsmall) + 0.75rem)}@media screen and (min-width: 900px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-small) + 0.75rem)}}@media screen and (min-width: 1260px){.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-medium) + 0.75rem)}}.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__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}";
 
 let datalistItemCounter = 0;
 const StzhDatalistItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.stzhItemActionClick = createEvent(this, "stzhItemActionClick", 7);
+    this.stzhClick = createEvent(this, "stzhClick", 7);
     this._meta = [];
     this.external = false;
     this.isPhone = false;
-    this.actionClick = (originalEvent) => {
+    this.onActionClick = (originalEvent) => {
       this.stzhItemActionClick.emit({
         component: "stzh-datalist-item",
         originalEvent
       });
     };
+    this.onClick = (event) => {
+      this.stzhClick.emit({
+        component: "stzh-datalist-item",
+        originalEvent: event,
+        href: this.href
+      });
+    };
     this.handleDirectionChange = (event) => {
       this.direction = event.detail.value;
     };
@@ -162,6 +170,7 @@ const StzhDatalistItem = class {
     this.download = undefined;
     this.leadingIcon = undefined;
     this.icon = undefined;
+    this.iconPosition = "right";
     this.iconLabel = undefined;
     this.iconTooltip = undefined;
     this.iconHref = undefined;
@@ -196,32 +205,33 @@ const StzhDatalistItem = class {
   }
   renderInner(isButton, hasActionButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
+    const Icon = () => (h(Fragment, null, (this.href || this.icon) && !hasActionButton && !isButton &&
+      h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon
+          ? this.icon
+          : (this.isPhone
+            ? "phone"
+            : (this.external && "external-link")) })), isButton &&
+      h("div", { class: "stzh-datalist-item__label-icon" }, 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" }))));
     return (h(Fragment, null, this.variant === "table" &&
       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, { id: `${this.datalistItemId}-value`, class: {
+        }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, 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-labelledby": Item !== 'div' ? `${this.variant === "table" ? `${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.variant === "default" &&
-      h("div", { class: "stzh-datalist-item__label" }, this.label), 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("div", { class: "stzh-datalist-item__value-wrapper" }, this.value
+        ? (this.a11yExpanded ? "true" : "false") : null, onClick: this.onClick }, this.variant === "default" &&
+      h("div", { class: "stzh-datalist-item__label" }, this.label), 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("div", { class: "stzh-datalist-item__value-wrapper" }, this.iconPosition === "left" && h(Icon, null), this.value
       ?
         h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text", innerHTML: this.value })
       :
-        h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text" }, h("slot", { name: "value" })), (this.href || this.icon) && !hasActionButton && !isButton &&
-      h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon
-          ? this.icon
-          : (this.isPhone
-            ? "phone"
-            : (this.external && "external-link")) })), isButton &&
-      h("div", { class: "stzh-datalist-item__label-icon" }, 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" })))), h(Item, { "aria-hidden": this.statusLabel || this._meta.length > 0 ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-meta`, class: {
+        h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text" }, h("slot", { name: "value" })), this.iconPosition === "right" && h(Icon, null))), h(Item, { "aria-hidden": this.statusLabel || this._meta.length > 0 ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-meta`, class: {
         "stzh-datalist-item__meta": true,
         "is-button": isButton,
         "is-link": !!this.href
-      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.statusLabel &&
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.statusLabel &&
       h("stzh-status", { class: "stzh-datalist-item__meta-status", label: this.statusLabel, type: this.statusType }), this._meta.length > 0 &&
       h("span", { class: "stzh-datalist-item__meta-text" }, this._meta.map((meta, index) => h(Fragment, null, h("span", { class: "stzh-datalist-item__meta-text-inner" }, meta), index + 1 !== this._meta.length &&
         h("span", { class: "stzh-datalist-item__meta-separator" }, "|")))))));
@@ -232,7 +242,7 @@ const StzhDatalistItem = class {
         "stzh-datalist-item__leading": true,
         "is-button": isButton,
         "is-link": !!this.href
-      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.leadingIcon &&
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.leadingIcon &&
       h("div", { class: "stzh-datalist-item__leading-icon-container" }, h("stzh-icon", { class: "stzh-datalist-item__leading-icon", name: this.leadingIcon }))));
   }
   async componentDidLoad() {
@@ -288,7 +298,7 @@ const StzhDatalistItem = class {
       return (h("stzh-button", { class: {
           "stzh-datalist-item__action": true,
           "is-button": true
-        }, variant: "tertiary", size: "small", "aria-label": this.iconLabel, iconOnly: true, href: this.iconHref, icon: this.icon, onClick: this.actionClick }));
+        }, variant: "tertiary", size: "small", "aria-label": this.iconLabel, iconOnly: true, href: this.iconHref, icon: this.icon, onClick: this.onActionClick }));
     };
     return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" || this.variant === "table" ?
       h(Fragment, null, this.renderLeadingIcon(isButton), this.renderInner(isButton, hasActionButton))