@oiz/stzh-components 4.6.0-beta3 → 4.6.0

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

@@ -1 +1 @@
-{"file":"stzh-actions.stzh-cell.stzh-cspace.stzh-fieldset.stzh-row.stzh-space.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=shadow","src/components/stzh-actions/stzh-actions.tsx","src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx","src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx","src/components/stzh-fieldset/stzh-fieldset.scss?tag=stzh-fieldset&encapsulation=scoped","src/components/stzh-fieldset/stzh-fieldset.tsx","src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx","src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]),\n  ::slotted([slot=\"tertiary\"]) {\n    flex-grow: 1;\n    margin: calc(#{space(\"medium\")} / 2);\n  }\n\n  &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n    @include mq($from: small) {\n      flex-grow: inherit;\n    }\n  }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column-reverse;\n    margin: calc(#{space(\"medium\")} / -2);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions,\n  &__tertiary-actions {\n    display: flex;\n  }\n\n  &__wrapper {\n    display: contents;\n  }\n\n  // &--dialog &__actions {\n  //   justify-content: flex-end;\n  // }\n\n  &--process &__wrapper {\n    @include mq($to: small) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n  }\n\n  &--process &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__primary-actions,\n  &--process &__secondary-actions {\n    @include mq($to: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &--process &__tertiary-actions {\n    @include mq($from: small) {\n      margin-right: auto;\n    }\n  }\n\n  &--search &__actions {\n    justify-content: flex-end;\n  }\n\n  /* space between */\n  &--space-between &__actions {\n    justify-content: space-between;\n\n    @include mq($from: small) {\n      flex-direction: column;\n    }\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &--space-between &__wrapper {\n    @include mq($from: small) {\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  shadow: true,\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n  /** Whether to split tertiary and primary/secondary from each other (left and right). */\n  @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button',\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button',\n    );\n\n    secondaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"secondary\",\n      } as HTMLStzhButtonElement);\n    });\n\n    tertiaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--space-between\": this.spaceBetween,\n      [`stzh-actions--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host space-between={this.spaceBetween}>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","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\", \"small\");\n    @include spaceCurve(\"margin-bottom\", \"tiny\");\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\", \"small\");\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 {\n    // 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 {\n    // DONE\n    margin-bottom: space(\"xlarge\");\n  }\n\n  & > .section > stzh-http-error, // DONE\n  & > stzh-http-error {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"big\");\n  }\n\n  & > .section > stzh-message, // DONE\n  & > stzh-message {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-cardlist, // DONE\n  & > stzh-cardlist, // 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-vbz-ticker,\n  & > stzh-vbz-ticker {\n    @include spaceCurve(\"margin-bottom\", \"large\");\n  }\n\n  & > .section > stzh-ratio, // DONE\n  & > stzh-ratio, // DONE\n  & > .section > stzh-button, // DONE\n  & > stzh-button, // DONE\n  & > .section > stzh-space, // DONE\n  & > stzh-space, // DONE\n  & > .section > stzh-row, // DONE\n  & > stzh-row, // DONE\n  & > .section > stzh-eventinfo, // DONE\n  & > stzh-eventinfo, // DONE\n  & > .section > stzh-eventdata, // DONE\n  & > stzh-eventdata, // DONE\n  & > .section > stzh-datalist, // DONE\n  & > stzh-datalist, // DONE\n  & > .section > stzh-textandimage, // DONE\n  & > stzh-textandimage {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"medium\");\n  }\n\n  & > .section > stzh-section[variant=\"highlight\"], // DONE\n  & > stzh-section[variant=\"highlight\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-section[variant=\"contextbox\"], // DONE\n  & > stzh-section[variant=\"contextbox\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-section[variant=\"default\"], // DONE\n  & > stzh-section[variant=\"default\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-section[variant=\"greybox\"], // DONE\n  & > stzh-section[variant=\"default\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-section[variant=\"poimax\"], // DONE\n  & > stzh-section[variant=\"poimax\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    margin-bottom: space(\"xsmall\");\n  }\n\n  & > .section > stzh-pagetitle[background=\"default\"], // DONE\n  & > stzh-pagetitle[background=\"default\"] {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"section-inner\");\n  }\n\n  & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n  & > stzh-richtext[has-hidden-last-margin] {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-cta, // DONE\n  & > stzh-cta {\n    // 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 {\n    // 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 {\n    // 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-stepper,\n  & > stzh-stepper {\n    @include spaceCurve(\"margin-top\", \"big\");\n  }\n\n  & > .section > stzh-pagination, // DONE\n  & > stzh-pagination {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"large\");\n  }\n\n  & > .section > stzh-actions, // DONE\n  & > stzh-actions {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"small\");\n    @include spaceCurve(\"margin-bottom\", \"big\");\n  }\n\n  & > .section > stzh-saptcha, // DONE\n  & > stzh-saptcha {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"medium\");\n  }\n\n  & > .section > stzh-fieldset, // DONE\n  & > stzh-fieldset {\n    // 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 { Component, Element, h, Host, Prop, Watch } 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  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 ref={el => (this.rootElement = el as HTMLElement)} class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  // default spacing for form and layout elements\n  ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),\n  ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),\n  ::slotted(.layout_column > .stzh-fieldset-row),\n  ::slotted(.stzh-fieldset-row),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),\n  ::slotted(.stzh-fieldset-row > stzh-input),\n  ::slotted(stzh-input),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),\n  ::slotted(.stzh-fieldset-row > stzh-datepicker),\n  ::slotted(stzh-datepicker),\n  ::slotted(.stzh-fieldset-row > stzh-dropdown),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),\n  ::slotted(stzh-dropdown),\n  ::slotted(.stzh-fieldset-row > stzh-fieldset),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),\n  ::slotted(stzh-fieldset),\n  ::slotted(.stzh-fieldset-row > stzh-upload),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),\n  ::slotted(stzh-upload),\n  ::slotted(.stzh-fieldset-row > stzh-checkbox),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),\n  ::slotted(stzh-checkbox),\n  ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),\n  ::slotted(stzh-checkboxgroup),\n  ::slotted(.stzh-fieldset-row > stzh-radio),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),\n  ::slotted(stzh-radio),\n  ::slotted(.stzh-fieldset-row > stzh-radiogroup),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),\n  ::slotted(stzh-radiogroup),\n  ::slotted(.stzh-fieldset-row > stzh-row),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),\n  ::slotted(stzh-row),\n  ::slotted(.stzh-fieldset-row > stzh-vspace),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),\n  ::slotted(stzh-vspace),\n  ::slotted(.stzh-fieldset-row > stzh-hspace),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),\n  ::slotted(stzh-hspace),\n  ::slotted(.stzh-fieldset-row > stzh-text),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),\n  ::slotted(stzh-text) {\n    @include spaceCurve(\"margin-bottom\", \"tiny\");\n    @include mq($to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-fieldset),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),\n  ::slotted(stzh-fieldset) {\n    @include spaceCurve(\"margin-top\", \"regular\");\n\n    .stzh-fieldset__legend {\n      @include fontCurve(\"p1\", \"heading\");\n    }\n  }\n\n  & > .section > stzh-chipgroup,\n  & > stzh-chipgroup,\n  & > .section > stzh-chipselect,\n  & > stzh-chipselect {\n    margin-bottom: space(\"xlarge\");\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-daterange),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-daterange),\n  ::slotted(stzh-daterange) {\n    @include spaceCurve(\"margin-bottom\", \"tiny\");\n    @include mq($to: medium) {\n      margin-bottom: calc(\n        #{$fieldsetDescriptionMinHeight} + #{spaceCurveValue(\"tiny\")}\n      );\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-message),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),\n  ::slotted(stzh-message) {\n    @include spaceCurve(\"margin-bottom\", \"large\");\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-actions),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),\n  ::slotted(stzh-actions) {\n    @include spaceCurve(\"margin-top\", \"medium\");\n    @include spaceCurve(\"margin-bottom\", \"big\");\n  }\n\n  ::slotted(*) {\n    stzh-checkboxgroup stzh-checkbox,\n    stzh-radiogroup stzh-radio {\n      --stzh-description-min-height: none;\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > :last-child),\n  ::slotted(.layout_column > .stzh-fieldset-row > :last-child),\n  ::slotted(:last-child),\n  ::slotted(.layout_column > .stzh-fieldset-row:has(cq) > :nth-last-child(2)),\n  ::slotted(.stzh-fieldset-row:has(cq) > :nth-last-child(2)) {\n    margin-bottom: 0;\n  }\n\n  ::slotted(stzh-row) {\n    @include mq($to: small) {\n      margin-bottom: 0;\n    }\n    @include mq($from: small, $to: medium) {\n      margin-bottom: 0;\n    }\n  }\n\n  /* Slotted cells and rows */\n\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-input),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-datepicker),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-upload),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-checkbox),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-checkboxgroup),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-dropdown),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-radio),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-amount),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-radiogroup) {\n    @include mq($to: large) {\n      @include spaceCurve(\"margin-bottom\", \"tiny\");\n    }\n  }\n\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-input),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-datepicker),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-upload),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-checkbox),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-checkboxgroup),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-dropdown),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-radio),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-amount),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-radiogroup) {\n    @include mq($to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"tiny\");\n    }\n  }\n\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-input),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-datepicker),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-upload),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-checkbox),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-checkboxgroup),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-dropdown),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-radio),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-amount),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-radiogroup) {\n    @include mq($from: small, $to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-input),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-datepicker),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-upload),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-checkbox),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-checkboxgroup),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-dropdown),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-radio),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-amount),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-radiogroup) {\n    @include mq($to: small) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-input),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-datepicker),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-upload),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-checkbox),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-checkboxgroup),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-dropdown),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-radio),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-amount),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-radiogroup) {\n    @include mq($to: large) {\n      @include spaceCurve(\"margin-bottom\", \"tiny\");\n    }\n  }\n\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-input),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-datepicker),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-upload),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-checkbox),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-checkboxgroup),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-dropdown),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-radio),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-amount),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-radiogroup) {\n    @include mq($to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"tiny\");\n    }\n  }\n\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-input),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-datepicker),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-upload),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-checkbox),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-checkboxgroup),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-dropdown),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-radio),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-amount),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-radiogroup) {\n    @include mq($from: small, $to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-input),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-datepicker),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-upload),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-checkbox),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-checkboxgroup),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-dropdown),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-radio),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-amount),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-radiogroup) {\n    @include mq($to: small) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n}\n\n.stzh-fieldset {\n  //--stzh-row-row-gap: #{space('xsmall')};\n  --stzh-description-min-height: #{$fieldsetDescriptionMinHeight};\n\n  margin: 0;\n  padding: 0;\n  border: none;\n  min-inline-size: auto;\n\n  &__wrapper {\n    display: grid;\n  }\n\n  &__legend {\n    @include font(\"title\");\n    @include fontCurve(\"h4\");\n    color: $colorPrimary70;\n    padding: 0;\n    margin-bottom: space(\"large\");\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for any (mostly form) elements\n */\n@Component({\n  tag: \"stzh-fieldset\",\n  styleUrl: \"stzh-fieldset.scss\",\n  scoped: true,\n})\nexport class StzhFieldset {\n  /** Legend describing the field group inside the fieldset */\n  @Prop() legend: string = \"\";\n\n  /** Hide legend to show only for screenreaders */\n  @Prop() hideLegend: boolean = false;\n\n  /** Heading level inside legend */\n  @Prop() legendLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\n\n  /** Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop() legendCurve: Font.Curves | \"auto\" = \"auto\";\n\n  render() {\n    const classes = {\n      \"stzh-fieldset\": true,\n      \"stzh-fieldset--hide-legend\": this.hideLegend,\n    };\n\n    return (\n      <Host>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-fieldset__legend\">\n              {this.legendLevel ? (\n                <stzh-heading level={this.legendLevel} curve={this.legendCurve}>\n                  {this.legend}\n                </stzh-heading>\n              ) : (\n                this.legend\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-fieldset__wrapper\">\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n",":host {\n  width: 100%;\n\n  --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n        ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells/ $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{calc(100% / calc($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  row-gap: var(--row-gap);\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  @include mq($from: large) {\n    margin-left: calc(#{$gridGutterLarge} / -2);\n    margin-right: calc(#{$gridGutterLarge} / -2);\n  }\n\n  @include mq($from: ultra) {\n    margin-left: calc(#{$gridGutterUltra} / -2);\n    margin-right: calc(#{$gridGutterUltra} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true,\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-show) {\n    --show-display: block;\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, \"size\");\n  $breakpointSizes: map-get($value, \"sizes\");\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true,\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n  /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            \"stzh-space--is-around\": this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-actions.stzh-cell.stzh-cspace.stzh-fieldset.stzh-row.stzh-space.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,m7EAAm7E,CAAC;AAC38E,0BAAe,cAAc;;MCahB,WAAW;;;QAWd,SAAI,GAAG;YACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;YAEF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACnD,6DAA6D,CAC9D,CAAC;YAEF,gBAAgB,CAAC,OAAO,CAAC,MAAM;gBAC7B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,WAAW;iBACI,CAAC,CAAC;aAC7B,CAAC,CAAC;YAEH,eAAe,CAAC,OAAO,CAAC,MAAM;gBAC5B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,UAAU;iBACK,CAAC,CAAC;aAC7B,CAAC,CAAC;SACJ,CAAC;uBA7B2E,MAAM;4BAGlC,KAAK;;IA4BtD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,6BAA6B,EAAE,IAAI,CAAC,YAAY;YAChD,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAClD,CAAC;QAEF,QACE,EAAC,IAAI,sEAAgB,IAAI,CAAC,YAAY,IACpC,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,IAC7C,4DAAK,KAAK,EAAC,gCAAgC,IACzC,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACD,EACP;KACH;;;;;ACzFH,MAAM,WAAW,GAAG,0yNAA0yN,CAAC;AAC/zN,uBAAe,WAAW;;MCWb,QAAQ;;;;;;;;qBAaoD,MAAM;yBAGtB,MAAM;;IAE7D,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;AC1CH,MAAM,aAAa,GAAG,i8+GAAi8+G,CAAC;AACx9+G,yBAAe,aAAa;;MCUf,UAAU;;;QAoBb,SAAI,GAAG;YACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;gBACrB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;gBAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;sBAC/B,4BAA4B;sBAC5B,sKAAsK,CAC3K,CAAC;gBAEF,sBAAsB,CAAC,OAAO,CAAC,gBAAgB;oBAC7C,cAAc,CAAC,gBAAgB,EAAE;wBAC/B,iBAAiB,EAAE,KAAK;wBACxB,gBAAgB,EAAE,KAAK;qBAC2B,CAAC,CAAC;iBACvD,CAAC,CAAC;aACJ;SACF,CAAC;;;mCA/B6E,QAAQ;;IAKvF,0BAA0B;QACxB,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IA0BD,kBAAkB;QAChB,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACtC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACjD;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;SACpB,CAAC;QAEF,QACE,EAAC,IAAI,gFACsB,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,4DAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,IACpE,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;ACtFH,MAAM,eAAe,GAAG,6xvGAA6xvG,CAAC;AACtzvG,2BAAe,eAAe;;MCWjB,YAAY;;;sBAEE,EAAE;0BAGG,KAAK;2BAGe,EAAE;2BAGR,MAAM;;IAElD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI;YACrB,4BAA4B,EAAE,IAAI,CAAC,UAAU;SAC9C,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,iEAAU,KAAK,EAAE,OAAO,IACrB,IAAI,CAAC,MAAM,KACV,+DAAQ,KAAK,EAAC,uBAAuB,IAClC,IAAI,CAAC,WAAW,IACf,oBAAc,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,IAC3D,IAAI,CAAC,MAAM,CACC,KAEf,IAAI,CAAC,MAAM,CACZ,CACM,CACV,EACD,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAa,CACT,CACG,CACN,EACP;KACH;;;;ACnDH,MAAM,UAAU,GAAG,u2SAAu2S,CAAC;AAC33S,sBAAe,UAAU;;MCWZ,OAAO;;;;;;;;uBAaiC,OAAO;qBAGX,OAAO;uBAGH,OAAO;;IAE1D,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;aACtD,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;AChDH,MAAM,YAAY,GAAG,4laAA4la,CAAC;AAClna,wBAAe,YAAY;;MCWd,SAAS;;;qBAE2B,MAAM;;;;;;uBAcF,OAAO;qBAGX,OAAO;sBAGX,KAAK;sBAG8D,MAAM;;IAEpH,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACvD,CAAC,qBAAqB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;aAClD,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=shadow","src/components/stzh-actions/stzh-actions.tsx","src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx","src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx","src/components/stzh-fieldset/stzh-fieldset.scss?tag=stzh-fieldset&encapsulation=scoped","src/components/stzh-fieldset/stzh-fieldset.tsx","src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx","src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]),\n  ::slotted([slot=\"tertiary\"]) {\n    flex-grow: 1;\n    margin: calc(#{space(\"medium\")} / 2);\n  }\n\n  &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n    @include mq($from: small) {\n      flex-grow: inherit;\n    }\n  }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column-reverse;\n    margin: calc(#{space(\"medium\")} / -2);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions,\n  &__tertiary-actions {\n    display: flex;\n  }\n\n  &__wrapper {\n    display: contents;\n  }\n\n  // &--dialog &__actions {\n  //   justify-content: flex-end;\n  // }\n\n  &--process &__wrapper {\n    @include mq($to: small) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n  }\n\n  &--process &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__primary-actions,\n  &--process &__secondary-actions {\n    @include mq($to: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &--process &__tertiary-actions {\n    @include mq($from: small) {\n      margin-right: auto;\n    }\n  }\n\n  &--search &__actions {\n    justify-content: flex-end;\n  }\n\n  /* space between */\n  &--space-between &__actions {\n    justify-content: space-between;\n\n    @include mq($from: small) {\n      flex-direction: column;\n    }\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &--space-between &__wrapper {\n    @include mq($from: small) {\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  shadow: true,\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n  /** Whether to split tertiary and primary/secondary from each other (left and right). */\n  @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button',\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button',\n    );\n\n    secondaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"secondary\",\n      } as HTMLStzhButtonElement);\n    });\n\n    tertiaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--space-between\": this.spaceBetween,\n      [`stzh-actions--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host space-between={this.spaceBetween}>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","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\", \"small\");\n    @include spaceCurve(\"margin-bottom\", \"tiny\");\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\", \"small\");\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 {\n    // 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 {\n    margin-bottom: space(\"xlarge\");\n  }\n\n  & > .section > stzh-toggle,\n  & > stzh-toggle {\n      margin-bottom: space(\"medium\");\n  }\n\n  & > .section > stzh-http-error, // DONE\n  & > stzh-http-error {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"big\");\n  }\n\n  & > .section > stzh-message, // DONE\n  & > stzh-message {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-cardlist, // DONE\n  & > stzh-cardlist, // 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-vbz-ticker,\n  & > stzh-vbz-ticker {\n    @include spaceCurve(\"margin-bottom\", \"large\");\n  }\n\n  & > .section > stzh-ratio, // DONE\n  & > stzh-ratio, // DONE\n  & > .section > stzh-button, // DONE\n  & > stzh-button, // DONE\n  & > .section > stzh-space, // DONE\n  & > stzh-space, // DONE\n  & > .section > stzh-row, // DONE\n  & > stzh-row, // DONE\n  & > .section > stzh-eventinfo, // DONE\n  & > stzh-eventinfo, // DONE\n  & > .section > stzh-eventdata, // DONE\n  & > stzh-eventdata, // DONE\n  & > .section > stzh-datalist, // DONE\n  & > stzh-datalist, // DONE\n  & > .section > stzh-textandimage, // DONE\n  & > stzh-textandimage {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"medium\");\n  }\n\n  & > .section > stzh-section[variant=\"highlight\"], // DONE\n  & > stzh-section[variant=\"highlight\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-section[variant=\"contextbox\"], // DONE\n  & > stzh-section[variant=\"contextbox\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-section[variant=\"default\"], // DONE\n  & > stzh-section[variant=\"default\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-section[variant=\"greybox\"], // DONE\n  & > stzh-section[variant=\"default\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-section[variant=\"poimax\"], // DONE\n  & > stzh-section[variant=\"poimax\"] {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    margin-bottom: space(\"xsmall\");\n  }\n\n  & > .section > stzh-pagetitle[background=\"default\"], // DONE\n  & > stzh-pagetitle[background=\"default\"] {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"section-inner\");\n  }\n\n  & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n  & > stzh-richtext[has-hidden-last-margin] {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"regular\");\n  }\n\n  & > .section > stzh-cta, // DONE\n  & > stzh-cta {\n    // 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 {\n    // 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 {\n    // 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-stepper,\n  & > stzh-stepper {\n    @include spaceCurve(\"margin-top\", \"big\");\n  }\n\n  & > .section > stzh-pagination, // DONE\n  & > stzh-pagination {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"regular\");\n    @include spaceCurve(\"margin-bottom\", \"large\");\n  }\n\n  & > .section > stzh-actions, // DONE\n  & > stzh-actions {\n    // DONE\n    @include spaceCurve(\"margin-top\", \"small\");\n    @include spaceCurve(\"margin-bottom\", \"big\");\n  }\n\n  & > .section > stzh-saptcha, // DONE\n  & > stzh-saptcha {\n    // DONE\n    @include spaceCurve(\"margin-bottom\", \"medium\");\n  }\n\n  & > .section > stzh-fieldset, // DONE\n  & > stzh-fieldset {\n    // 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 { Component, Element, h, Host, Prop, Watch } 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  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 ref={el => (this.rootElement = el as HTMLElement)} class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  // default spacing for form and layout elements\n  ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),\n  ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),\n  ::slotted(.layout_column > .stzh-fieldset-row),\n  ::slotted(.stzh-fieldset-row),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),\n  ::slotted(.stzh-fieldset-row > stzh-input),\n  ::slotted(stzh-input),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),\n  ::slotted(.stzh-fieldset-row > stzh-datepicker),\n  ::slotted(stzh-datepicker),\n  ::slotted(.stzh-fieldset-row > stzh-dropdown),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),\n  ::slotted(stzh-dropdown),\n  ::slotted(.stzh-fieldset-row > stzh-fieldset),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),\n  ::slotted(stzh-fieldset),\n  ::slotted(.stzh-fieldset-row > stzh-upload),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),\n  ::slotted(stzh-upload),\n  ::slotted(.stzh-fieldset-row > stzh-checkbox),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),\n  ::slotted(stzh-checkbox),\n  ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),\n  ::slotted(stzh-checkboxgroup),\n  ::slotted(.stzh-fieldset-row > stzh-radio),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),\n  ::slotted(stzh-radio),\n  ::slotted(.stzh-fieldset-row > stzh-radiogroup),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),\n  ::slotted(stzh-radiogroup),\n  ::slotted(.stzh-fieldset-row > stzh-row),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),\n  ::slotted(stzh-row),\n  ::slotted(.stzh-fieldset-row > stzh-vspace),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),\n  ::slotted(stzh-vspace),\n  ::slotted(.stzh-fieldset-row > stzh-hspace),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),\n  ::slotted(stzh-hspace),\n  ::slotted(.stzh-fieldset-row > stzh-text),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),\n  ::slotted(stzh-text) {\n    @include spaceCurve(\"margin-bottom\", \"tiny\");\n    @include mq($to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-fieldset),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),\n  ::slotted(stzh-fieldset) {\n    @include spaceCurve(\"margin-top\", \"regular\");\n\n    .stzh-fieldset__legend {\n      @include fontCurve(\"p1\", \"heading\");\n    }\n  }\n\n  & > .section > stzh-chipgroup,\n  & > stzh-chipgroup,\n  & > .section > stzh-chipselect,\n  & > stzh-chipselect {\n    margin-bottom: space(\"xlarge\");\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-daterange),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-daterange),\n  ::slotted(stzh-daterange) {\n    @include spaceCurve(\"margin-bottom\", \"tiny\");\n    @include mq($to: medium) {\n      margin-bottom: calc(\n        #{$fieldsetDescriptionMinHeight} + #{spaceCurveValue(\"tiny\")}\n      );\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-message),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),\n  ::slotted(stzh-message) {\n    @include spaceCurve(\"margin-bottom\", \"large\");\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-actions),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),\n  ::slotted(stzh-actions) {\n    @include spaceCurve(\"margin-top\", \"medium\");\n    @include spaceCurve(\"margin-bottom\", \"big\");\n  }\n\n  ::slotted(*) {\n    stzh-checkboxgroup stzh-checkbox,\n    stzh-radiogroup stzh-radio {\n      --stzh-description-min-height: none;\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > :last-child),\n  ::slotted(.layout_column > .stzh-fieldset-row > :last-child),\n  ::slotted(:last-child),\n  ::slotted(.layout_column > .stzh-fieldset-row:has(cq) > :nth-last-child(2)),\n  ::slotted(.stzh-fieldset-row:has(cq) > :nth-last-child(2)) {\n    margin-bottom: 0;\n  }\n\n  ::slotted(stzh-row) {\n    @include mq($to: small) {\n      margin-bottom: 0;\n    }\n    @include mq($from: small, $to: medium) {\n      margin-bottom: 0;\n    }\n  }\n\n  /* Slotted cells and rows */\n\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-input),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-datepicker),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-upload),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-checkbox),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-checkboxgroup),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-dropdown),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-radio),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-amount),\n  ::slotted(stzh-row > stzh-cell[span-large] > stzh-radiogroup) {\n    @include mq($to: large) {\n      @include spaceCurve(\"margin-bottom\", \"tiny\");\n    }\n  }\n\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-input),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-datepicker),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-upload),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-checkbox),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-checkboxgroup),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-dropdown),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-radio),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-amount),\n  ::slotted(stzh-row > stzh-cell[span-medium] > stzh-radiogroup) {\n    @include mq($to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"tiny\");\n    }\n  }\n\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-input),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-datepicker),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-upload),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-checkbox),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-checkboxgroup),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-dropdown),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-radio),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-amount),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-radiogroup) {\n    @include mq($from: small, $to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-input),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-datepicker),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-upload),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-checkbox),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-checkboxgroup),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-dropdown),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-radio),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-amount),\n  ::slotted(stzh-row > stzh-cell[span-small] > stzh-radiogroup) {\n    @include mq($to: small) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-input),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-datepicker),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-upload),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-checkbox),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-checkboxgroup),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-dropdown),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-radio),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-amount),\n  ::slotted(stzh-row[span-large] > stzh-cell > stzh-radiogroup) {\n    @include mq($to: large) {\n      @include spaceCurve(\"margin-bottom\", \"tiny\");\n    }\n  }\n\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-input),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-datepicker),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-upload),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-checkbox),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-checkboxgroup),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-dropdown),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-radio),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-amount),\n  ::slotted(stzh-row[span-medium] > stzh-cell > stzh-radiogroup) {\n    @include mq($to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"tiny\");\n    }\n  }\n\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-input),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-datepicker),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-upload),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-checkbox),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-checkboxgroup),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-dropdown),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-radio),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-amount),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-radiogroup) {\n    @include mq($from: small, $to: medium) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-input),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-datepicker),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-upload),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-checkbox),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-checkboxgroup),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-dropdown),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-radio),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-amount),\n  ::slotted(stzh-row[span-small] > stzh-cell > stzh-radiogroup) {\n    @include mq($to: small) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n}\n\n.stzh-fieldset {\n  //--stzh-row-row-gap: #{space('xsmall')};\n  --stzh-description-min-height: #{$fieldsetDescriptionMinHeight};\n\n  margin: 0;\n  padding: 0;\n  border: none;\n  min-inline-size: auto;\n\n  &__wrapper {\n    display: grid;\n  }\n\n  &__legend {\n    @include font(\"title\");\n    @include fontCurve(\"h4\");\n    color: $colorPrimary70;\n    padding: 0;\n    margin-bottom: space(\"large\");\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for any (mostly form) elements\n */\n@Component({\n  tag: \"stzh-fieldset\",\n  styleUrl: \"stzh-fieldset.scss\",\n  scoped: true,\n})\nexport class StzhFieldset {\n  /** Legend describing the field group inside the fieldset */\n  @Prop() legend: string = \"\";\n\n  /** Hide legend to show only for screenreaders */\n  @Prop() hideLegend: boolean = false;\n\n  /** Heading level inside legend */\n  @Prop() legendLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\n\n  /** Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop() legendCurve: Font.Curves | \"auto\" = \"auto\";\n\n  render() {\n    const classes = {\n      \"stzh-fieldset\": true,\n      \"stzh-fieldset--hide-legend\": this.hideLegend,\n    };\n\n    return (\n      <Host>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-fieldset__legend\">\n              {this.legendLevel ? (\n                <stzh-heading level={this.legendLevel} curve={this.legendCurve}>\n                  {this.legend}\n                </stzh-heading>\n              ) : (\n                this.legend\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-fieldset__wrapper\">\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n",":host {\n  width: 100%;\n\n  --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n        ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells/ $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{calc(100% / calc($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  row-gap: var(--row-gap);\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  @include mq($from: large) {\n    margin-left: calc(#{$gridGutterLarge} / -2);\n    margin-right: calc(#{$gridGutterLarge} / -2);\n  }\n\n  @include mq($from: ultra) {\n    margin-left: calc(#{$gridGutterUltra} / -2);\n    margin-right: calc(#{$gridGutterUltra} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true,\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-show) {\n    --show-display: block;\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, \"size\");\n  $breakpointSizes: map-get($value, \"sizes\");\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true,\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n  /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            \"stzh-space--is-around\": this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -122,18 +122,18 @@ const StzhActionset = class {
             "stzh-actionset--has-collapsed-items": this.actionsCollapsed.length > 0,
             [`stzh-actionset--${this.variant}`]: !!this.variant,
         };
-        const Action = (action, disableTabbing) => (h("stzh-button", { key: '1f7563d9c5032e13be6575adc2be43d0f787d3a5', a11yTabindex: disableTabbing ? "-1" : null, class: {
+        const Action = (action, disableTabbing) => (h("stzh-button", { key: '79f9ec20d696fac0e26018003613fd515e6d9494', a11yTabindex: disableTabbing ? "-1" : null, class: {
                 "stzh-actionset__action": true,
                 "is-button": true,
             }, label: action.label, icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant ? action.variant : this.variant === "stack" ? "secondary" : "tertiary", size: action.size ? action.size : this.variant === "stack" ? "small" : "tiny", badgePosition: "icon", onClick: e => {
                 this.actionClick(action, e);
             } }));
-        return (h(Host, { key: '4c5dbb5e74df1c08799e6983ea7af2bce400db26', "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { key: '29d124397dd04a5761fbfc96e06210f477cd0cd8', class: classes }, h("div", { key: 'f9433d56273b3782d923d9a7299a74cb8f0246a1', class: "stzh-actionset__actions", role: "group" }, h("div", { key: '686785c397fd6376fe84bfccc2c59e8deef093b5', ref: el => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => (this.dynamicActions || (!this.dynamicActions && this.actionsCollapsed.indexOf(action) === -1)) &&
-            (action.tooltipContent ? (h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))) : (Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))))), h("div", { key: '87d949a4cc0bfb59c51b66dfa1661741b77b8be9', class: "stzh-actionset__action-popover-wrapper" }, h("stzh-popover", { key: '4c38dba537ab91510d04112a63e8480df29145ad', label: this.variant === "stack"
+        return (h(Host, { key: 'a0ec0e73c066e6f88d8fe08a77246e5882663d85', "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { key: 'aa7e8c0f2a7f20a7b5c9043ead246ce1b4f5d8d5', class: classes }, h("div", { key: '136605860b67edce1f37c0040652d69813834fb8', class: "stzh-actionset__actions", role: "group" }, h("div", { key: 'bf0f9e51cbd30669e07e21b60d4f658b3b84096a', ref: el => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => (this.dynamicActions || (!this.dynamicActions && this.actionsCollapsed.indexOf(action) === -1)) &&
+            (action.tooltipContent ? (h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))) : (Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))))), h("div", { key: '07c902e07ded2ac8cc4d1a796fd2e0fc981c8776', class: "stzh-actionset__action-popover-wrapper" }, h("stzh-popover", { key: '792acdc865f15300a26af46f8ca671536618f727', label: this.variant === "stack"
                 ? this.localization.furtherActions
                 : !this.isMedium
                     ? this.localization.actions
-                    : "", strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { key: 'debb0672bd249e8f2f8953a034947f3d46242551', fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
+                    : "", strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { key: 'd2a72b98012acf3a11dec7433e31376d313da3f7', fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
                 ? this.popoverButtonVariant
                 : this.variant === "stack"
                     ? "secondary"
@@ -141,7 +141,7 @@ const StzhActionset = class {
                 ? this.localization.furtherActions
                 : !this.isMedium
                     ? this.localization.actions
-                    : "", a11yLabel: this.variant === "overflow" && this.localization.actions }), h("stzh-menu", { key: 'c82a73a0bc80c8c9214ed9fb0814ae13a5980e9a', slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
+                    : "", a11yLabel: this.variant === "overflow" && this.localization.actions }), h("stzh-menu", { key: '71d49149cceea469ecb7171720fb5dec8405ad15', slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
             // class="hide-medium show-when-collapsed"
             icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: e => {
                 this.actionClick(action, e);

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

@@ -139,7 +139,7 @@ const StzhAmount = class {
             "stzh-amount--is-required": !!this.required,
             "stzh-amount--is-disabled": !!this.disabled,
         };
-        return (h(Host, { key: 'a881dc5c082c7305005df2df3dfc60dbdd61ae31', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '59527cb8f521545165868dc55682ce9d8882cfab', class: classes, id: this.amountId }, this._showDropdown ? this.renderDropdown() : this.renderInputStepper())));
+        return (h(Host, { key: '13b837b6184712c75e7f56e7bb5f914005710f9c', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '0c37ca6ca698ddea28dd00198799455c35030b87', class: classes, id: this.amountId }, this._showDropdown ? this.renderDropdown() : this.renderInputStepper())));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -46,7 +46,7 @@ const StzhAnchornav = class {
         const classes = {
             "stzh-anchornav": true,
         };
-        return (h(Host, { key: '82d4f917cff546ae7c0bc1de7d0458017335ff71' }, h("nav", { key: 'a5ba98e4e9f6c979c162978e695e60d397c9a8af', class: classes, role: "navigation", "aria-label": this.localization.title }, h("div", { key: '3b8a3ea14969e66a30295aa54139ff8ed1bb0bbc', class: "stzh-anchornav__list", role: "list" }, this._items.map(item => (h("a", { class: "stzh-anchornav__item", role: "listitem", href: item.href, onClick: e => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2, class: "stzh-anchornav__label" }, h("div", { innerHTML: item.label })), h("stzh-icon", { class: "stzh-anchornav__icon", name: item.icon || "arrow-down" }))))))));
+        return (h(Host, { key: 'b1af877dbff2500e43ab440a170b1811e4520989' }, h("nav", { key: 'bf14abeb8f4fe01cbe5ae2d64f0edfb13431a999', class: classes, role: "navigation", "aria-label": this.localization.title }, h("div", { key: 'e570eb008a0c917ad0e368d3b08e50645cdbb52f', class: "stzh-anchornav__list", role: "list" }, this._items.map(item => (h("a", { class: "stzh-anchornav__item", role: "listitem", href: item.href, onClick: e => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2, class: "stzh-anchornav__label" }, h("div", { innerHTML: item.label })), h("stzh-icon", { class: "stzh-anchornav__icon", name: item.icon || "arrow-down" }))))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-app-nav.entry.js

@@ -27,7 +27,7 @@ const StzhAppNav = class {
         const classes = {
             "stzh-app-nav": true,
         };
-        return (h(Host, { key: 'd705906dfa8fc79d2151d76ab800a6c73bbfdf4c' }, h("nav", { key: 'b75ac042503af6261accf0759b751f8bc7be9563', role: "navigation", class: classes, "aria-label": this.localization.title, id: this.appNavId || null, tabindex: "-1" }, h("div", { key: '4cd53761af9826865bcaf940c4a64f89157b95b6', class: "stzh-app-nav__links", role: "list" }, this.items.map(item => (h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon, "link-id": item.id, onClick: (e) => {
+        return (h(Host, { key: 'ae1db42d407b412d01a61e10e47b641c974dbeee' }, h("nav", { key: 'cc55ef669d14fc26662166ac2d08c0993f5cfbc8', role: "navigation", class: classes, "aria-label": this.localization.title, id: this.appNavId || null, tabindex: "-1" }, h("div", { key: 'b42e215ca7db6fd60d8739d11dc83aa6be1a6c02', class: "stzh-app-nav__links", role: "list" }, this.items.map(item => (h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon, "link-id": item.id, onClick: (e) => {
                 this.handleAppNavItemClick(e, item);
             } }, item.text)))))));
     }

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

@@ -255,7 +255,7 @@ const StzhAppointments = class {
             "stzh-appointments--has-appointments-title": this.showAppointmentsTitle,
             "stzh-appointments--has-sort": this.showSort,
         };
-        return (h(Host, { key: '1728e91f3166d35ed8c3c81e9d82c93fb51de5f3', "has-heading": headingUsed }, h("div", { key: 'fe4b6a5334801c2d0293085ee1f579541fa96ded', class: classes }, h("div", { key: '5546e6431292451f3214f8008f4faedc5f6cbafe', class: "stzh-appointments__heading" }, h("slot", { key: 'ad7ae815d65a27009500c5baa8b1bf3509c78760', name: "heading" })), h("div", { key: '7ac2311c272c59907466527c31e80a52ffd75d72', class: "stzh-appointments__wrapper" }, this.showCalendar && (h("div", { key: 'efcf72400a53e89c16b8ca00366c369474b674d3', class: "stzh-appointments__calendar-wrapper" }, h("div", { key: 'd31158baae7e6819f79047f9ab73b1339c7d151e', class: "stzh-appointments__calendar-title-wrapper" }, h("div", { key: '9390fee5869b94d031094fed5f68f985c1a42e5a', class: "stzh-appointments__calendar-title" }, h("stzh-icon", { key: 'f0e6b9aa9a3aa09f982fd8ac2eb6ff5468166a58', class: "stzh-appointments__calendar-icon", name: "calendar" }), h("span", { key: 'a00d58dff58de3ecdc6b4f6e7d432e7ab97c5f37', class: "stzh-appointments__calendar-title-text" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { key: '29cd37f62445669df46b7f89811797f35540cd5b', class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { key: '109453c006e4eaa7faaaecee91fa8600aaa3ec3f', "hide-optional": true, ref: el => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { key: 'f06429980ba5c3c48c78204c70e52ff41bd50a98', slot: "action", size: "inherit", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments))), h("div", { key: 'd96d65c976e7b7f0a9cdd97e0e1e2f5d6ba61aee', class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { key: '50cf47b44de9b9b05760cc130afd80b62be72ecd', "hide-optional": true, ref: el => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate && (h("stzh-link", { key: 'd5f890eff5882530c31d10083e0e5a92f55ebd8f', slot: "action", size: "inherit", onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments)))))), h("div", { key: 'dbdb4aae72f2f0ae92ce7915cfff8d86d2f6b2c7', class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle && (h("div", { key: 'a964e646b14cb7d82530ea199858b9c26b4c9186', class: "stzh-appointments__appointments-title-wrapper" }, h("div", { key: 'ae31d2f5c8552126f8c352dd388032b90991b313', class: "stzh-appointments__appointments-title" }, h("stzh-icon", { key: '428d7b016152f20849fb2088252e0b44b82301a7', class: "stzh-appointments__appointments-icon", name: "clock" }), h("span", { key: '7818a53dfaf106b0e76a5840babb51f611d7266c', class: "stzh-appointments__appointments-title-text" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort && (h("div", { key: '3aca013063a7b1aa3d2e797bafdcba2cd1f47bad', class: "stzh-appointments__sort" }, h("stzh-dropdown", { key: '1fefcb5799637b45ec1c5029b7b3098def83e261', "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))))), h("div", { key: '7ceab2672395b3a7aff85abc53f744cd37723b45', class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { key: 'e8d157ebcf8e11c766d3c71968c9e20c18cb98d1', class: "stzh-appointments__appointments-radiogroup", ref: el => (this.inputElement = el), legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map(appointment => (h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "centi" }, !this.showCalendar && (h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0")), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), h("stzh-text", { size: "milli" }, appointment.caption))))), this.showMoreLink && (h("stzh-link", { key: 'ce621d82405ee70ebf00a00a78651c11c822fa51', class: "stzh-appointments__more-link", size: "inherit", onClick: this.onMoreClick }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems ? this.stepItems : this.moreItemsLeft)))))))));
+        return (h(Host, { key: '5047a8b34d1d9b1cc0019f617bdb65e370829dfe', "has-heading": headingUsed }, h("div", { key: '5ff934ffa9f5152d86e0b8684f8efca1ca30538a', class: classes }, h("div", { key: 'bd74515020eb2953b9d18e398ff2d036b0a13be1', class: "stzh-appointments__heading" }, h("slot", { key: '98ca7d2c91adcb08d808f5ecfdea2128b66e3084', name: "heading" })), h("div", { key: '5c42d5c742084fdd8d7cc5b0a60353c1dd7b525e', class: "stzh-appointments__wrapper" }, this.showCalendar && (h("div", { key: 'ac52f511b40b90c53c844154c09b789e4158e8f5', class: "stzh-appointments__calendar-wrapper" }, h("div", { key: 'd6cc5ef7fe65de66aa7231f58ed0c72f726fc9e2', class: "stzh-appointments__calendar-title-wrapper" }, h("div", { key: 'e6b059853b1699c05f2c576daee4af9724183a48', class: "stzh-appointments__calendar-title" }, h("stzh-icon", { key: '1517008cdfffcfdbe55621ce8b5562571cfb5ac2', class: "stzh-appointments__calendar-icon", name: "calendar" }), h("span", { key: '89c7df8d3d8fd0d5fe0750c2b128f189305d3bf0', class: "stzh-appointments__calendar-title-text" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { key: '9a0a82a30f7563852c5d3abc1ecfcf9eccf60931', class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { key: '448007c90836937a5b27d24e71b81c99789485cd', "hide-optional": true, ref: el => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { key: '2b1bdc25171b55bf1b5c9e9731412d4107ed59aa', slot: "action", size: "inherit", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments))), h("div", { key: '15d930cdae9a17bff15f19de06eb164c2ec01e4c', class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { key: 'f0ff51cf025de4cbb0b53b508999645e62120704', "hide-optional": true, ref: el => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate && (h("stzh-link", { key: 'a8e7367160d14f811804c2835044da49ad0825d5', slot: "action", size: "inherit", onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments)))))), h("div", { key: '27eae77bde74e137ab830312d585852baa9e0da6', class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle && (h("div", { key: '5cd7dcca6c0c6386d2ae6bba23c58247cbfdc3bb', class: "stzh-appointments__appointments-title-wrapper" }, h("div", { key: 'a9d444ddb2b4e5d5f29c886a6f29b951dee46123', class: "stzh-appointments__appointments-title" }, h("stzh-icon", { key: 'f31f07f669a8eedbdf33695137673256f24fa87c', class: "stzh-appointments__appointments-icon", name: "clock" }), h("span", { key: 'b5990b6cd7255c02b008499fc717e2e4b29e2bb4', class: "stzh-appointments__appointments-title-text" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort && (h("div", { key: 'a790e0fe7160bc14a81508ac8a3fb11dd7566649', class: "stzh-appointments__sort" }, h("stzh-dropdown", { key: '4cc29bfb7e1eacd24b738e8d8e152b61bee719ac', "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))))), h("div", { key: '8108658e43aaaa0fc65944bd3cdf91e4519aa170', class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { key: '868392f929e999a31e26f920fe7c52799572ae15', class: "stzh-appointments__appointments-radiogroup", ref: el => (this.inputElement = el), legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map(appointment => (h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "centi" }, !this.showCalendar && (h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0")), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), h("stzh-text", { size: "milli" }, appointment.caption))))), this.showMoreLink && (h("stzh-link", { key: '6840c224cc1572a1132a2ab63f85bde1fe352d1e', class: "stzh-appointments__more-link", size: "inherit", onClick: this.onMoreClick }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems ? this.stepItems : this.moreItemsLeft)))))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -4136,7 +4136,7 @@ const StzhAudio = class {
         const classes = {
             "stzh-audio": true,
         };
-        return (h$2(Host, { key: 'adc7c38e9004abb43c53f7a6a200ff371cffa327' }, h$2("vds-media", { key: 'd4e49e3f00311782be26550c40076d905605c4a4', class: classes }, h$2("vds-audio", { key: 'fb8764bbc6a2e5184553f355b10acb54a2491f06', class: "stzh-audio__audio", ref: el => (this.vsdAudioElement = el), "onVds-play": () => {
+        return (h$2(Host, { key: '3d40486913fd3db68cdaae0a44ac3897ad0c1860' }, h$2("vds-media", { key: 'ec112a23ebed3ad1e4a421dd2af7becc7369a1c4', class: classes }, h$2("vds-audio", { key: '54668d3a8ffd91d8b95e75d37972ad5bbe4b8a59', class: "stzh-audio__audio", ref: el => (this.vsdAudioElement = el), "onVds-play": () => {
                 this.stzhPlay.emit({ component: "stzh-audio" });
             }, "onVds-playing": () => {
                 this.stzhPlaying.emit({ component: "stzh-audio" });
@@ -4148,11 +4148,11 @@ const StzhAudio = class {
                 this.stzhReplay.emit({ component: "stzh-audio" });
             }, "onVds-error": (e) => {
                 this.stzhError.emit({ component: "stzh-audio", originalEvent: e });
-            } }, h$2("audio", { key: '0b221a814271376201133ff7edba260f5ca7463f', preload: this.preload, src: this.src }, h$2("slot", { key: 'fc125dc950fab61eb4ee5ce5675b0d2a1ede821e' }))), h$2("div", { key: 'efcc542fca2fe230f4441ca9409ff2b71bf1c814', class: "stzh-audio__controls" }, h$2("div", { key: 'fc8489dfa5b1400c2375a63a53d05e1109a870c2', class: "stzh-audio__loader-overlay" }, h$2("stzh-loader", { key: '208366f97280cb38f1ced382d3ed0d674a0ddfd4', class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h$2("div", { key: '994f06627e2700625f3f344cdb622b3dfd80e994', class: "stzh-audio__controls-top" }, h$2("vds-time-slider", { key: '599fec3c58eb03334103f6353372a031ba86c24e', class: "stzh-audio__slider is-time" }, h$2("div", { key: '9027c1f04fb1ecdb29bfedf8462510cc3de8a4c9', class: "stzh-audio__slider-track" }), h$2("div", { key: 'c2bf3737c348187a9c7ccd1f774b2e61ea559cc0', class: "stzh-audio__slider-track is-fill" }), h$2("div", { key: 'a8888b1465dbc5ba770e1eb1be8a68975dcc6c2a', class: "stzh-audio__slider-thumb-container" }, h$2("div", { key: 'cd918d8bf70cd5086bad4fd7ff566f3ea24dea2d', class: "stzh-audio__slider-thumb" })), h$2("div", { key: '7727c198878168a0d21502e42e512a168c472a10', class: "stzh-audio__media-preview-container" }, h$2("vds-slider-value-text", { key: 'a179681a425f4a323dea97e3b1c0f71b23d75b95', class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h$2("div", { key: '3348ebd143b9448928d78f87ef62c7027a41eebc', class: "stzh-audio__controls-bottom" }, h$2("div", { key: '18ba37d17f119e2d808d724b11a2f8c30e4397c5', class: "stzh-audio__controls-bottom-left" }, h$2("stzh-tooltip", { key: 'fcd87ccb74cbc230025dc877ccbd04c1b2be5d46' }, h$2("vds-play-button", { key: '53fc6e83f6bff2c4082a8a24b5951abe3999af03', class: "stzh-audio__button is-play" }, h$2("stzh-icon", { key: '492b659de3453c47d4a7e9c80ae759aeb109a3bb', class: "stzh-audio__played", name: "play" }), h$2("stzh-icon", { key: 'e422ac424e34723e315d46b0f55f05c618ef5444', class: "stzh-audio__paused", name: "pause" })), h$2("span", { key: '0d6fc0648d44ee7fd2a4dd6c776ab367c4f16d56', slot: "content" }, h$2("span", { key: '3382db81b57204c2f1e3687397067102a1cddf99', class: "stzh-audio__played" }, this.localization.play), h$2("span", { key: 'b7b7994d9cc526b01da08979d458afd88f24f748', class: "stzh-audio__paused" }, this.localization.pause))), h$2("div", { key: '58c00d329f58db7b53d92a633c41c413fbb8548d', class: "stzh-audio__time" }, h$2("vds-time", { key: 'cd052f9b18dc89436bdfe4d204ee84fd466d4ac2', type: "current" }), h$2("span", { key: '4f0ca82a5aeadb62e21420824fbdb3a242d8ecbc', class: "stzh-audio__time-separator" }, "/"), h$2("vds-time", { key: '92ac5701e584129585ea52c8fc54528f0bb4ea71', type: "duration" })), h$2("stzh-tooltip", { key: '1b7fb13bf74b63ee5a63c39a5af73d1b051e209b' }, h$2("vds-mute-button", { key: '158b2b77a2b8a5c931b37cedc16399b2740d8abb', class: "stzh-audio__button is-mute" }, h$2("stzh-icon", { key: '2c7595b59335247a3db7ffb06d8ee580bee5371c', class: "stzh-audio__muted", name: "volume-medium" }), h$2("stzh-icon", { key: '50f4200533d92909a834dfcdbe866857cb2f0810', class: "stzh-audio__unmuted", name: "silent-mode" })), h$2("span", { key: 'cbe10d1bb537653fbb22cac0ad7c7a053313a379', slot: "content" }, h$2("span", { key: 'fbaf5804f0bdda0649f1354597747c761f80b04b', class: "stzh-audio__muted" }, this.localization.mute), h$2("span", { key: 'a0d23ed2d2d43a8cafde24feb24845d471236f84', class: "stzh-audio__unmuted" }, this.localization.unmute))), h$2("vds-volume-slider", { key: '75573a956988404ffaea86da114a0f97f517ee88', class: "stzh-audio__slider is-volume" }, h$2("div", { key: '3e13e4826980600295b92194f2bd7bcf583a0e57', class: "stzh-audio__slider-track" }), h$2("div", { key: '7bb8b898b4f51fe33990cc42eaa8be05156d0c0b', class: "stzh-audio__slider-track is-fill" }), h$2("div", { key: '64c7bc436408e4d7e964c310f26a703a8db46b43', class: "stzh-audio__slider-thumb-container is-shown" }, h$2("div", { key: '2a782c51dd01519edb75764d813f99fcfbd5a135', class: "stzh-audio__slider-thumb" })), h$2("div", { key: '85cfa0c27692fb9d77156d4719f147e2e2592708', class: "stzh-audio__media-preview-container" }, h$2("vds-slider-value-text", { key: '76593d9391bf40711131632d2d18654830f87aa9', class: "stzh-audio__slider-text", type: "pointer", format: "percent" })))), h$2("div", { key: 'ac714c6f89f87b22eda68e346f065a9abb84b5b2', class: "stzh-audio__controls-bottom-right" }, hasTranscript && (h$2("stzh-tooltip", { key: 'a51a57933f2ab92651456f81996550a7cf6d35f0', content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, h$2("button", { key: '0e968fcecd862b6352aded773283c31558f79072', class: {
+            } }, h$2("audio", { key: 'c94636199a8211ff5bd75bb496e68031aeeb10c4', preload: this.preload, src: this.src }, h$2("slot", { key: '86fc4510fa916bf2aec88426b66f2ba0f2df3243' }))), h$2("div", { key: 'c1fdd5c1bf08adc5a456324acd1f0b0c520d0ab2', class: "stzh-audio__controls" }, h$2("div", { key: '68835b5ea7ccfeaf7e2721b319dc666a2eab9776', class: "stzh-audio__loader-overlay" }, h$2("stzh-loader", { key: '6a5bcb4b1dc3ed89eb79a45cd27383a3589a2ca1', class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h$2("div", { key: '36068388a784a44ee0f078d4c2b2e7aec7fe9ec6', class: "stzh-audio__controls-top" }, h$2("vds-time-slider", { key: 'eec8665ca50864323657e2374f48d187ea0b18d6', class: "stzh-audio__slider is-time" }, h$2("div", { key: '130c8ec09f559a204ee96cfd71eccb7d7c3b2395', class: "stzh-audio__slider-track" }), h$2("div", { key: '3ac50a1ca64ec490fb4bfb7c211acd664caf606e', class: "stzh-audio__slider-track is-fill" }), h$2("div", { key: '2a23e42979ef03f05bb214f5a743e96a165bd627', class: "stzh-audio__slider-thumb-container" }, h$2("div", { key: 'c91ef0e535b6865136dd102fa561a1021c75fb54', class: "stzh-audio__slider-thumb" })), h$2("div", { key: '50616eb7ff226e5e29949aafad71942b763f7f47', class: "stzh-audio__media-preview-container" }, h$2("vds-slider-value-text", { key: '050222b05c938f4be7a68d7dbd93c014314af5eb', class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h$2("div", { key: 'cd6dae954f1ce7558ed18f13bf59cc4967cceb03', class: "stzh-audio__controls-bottom" }, h$2("div", { key: '1c2d78dd7981a8c335249208ff6c881d4ef10a98', class: "stzh-audio__controls-bottom-left" }, h$2("stzh-tooltip", { key: 'cbe5972295cc149c143b2001dccc6e195b67f712' }, h$2("vds-play-button", { key: '695ef0d7b6df092013c0b7db0e451ae444a6cc8b', class: "stzh-audio__button is-play" }, h$2("stzh-icon", { key: 'f00ff99cf2db18f35d36e37663ce863ce7d62d44', class: "stzh-audio__played", name: "play" }), h$2("stzh-icon", { key: 'e6f4ca3cf3cf4380c83c111a345253f109416c4e', class: "stzh-audio__paused", name: "pause" })), h$2("span", { key: '84dffcda489971f55818055bfdd5f467159a3421', slot: "content" }, h$2("span", { key: '85df5a2af24e8a0746a776593d251d08ac393cd9', class: "stzh-audio__played" }, this.localization.play), h$2("span", { key: '20e71be05fd9edee13ef0da3941ba6838ebb97c5', class: "stzh-audio__paused" }, this.localization.pause))), h$2("div", { key: 'ace4a4b0bafc60984388e357dd1e508dd43ca1c2', class: "stzh-audio__time" }, h$2("vds-time", { key: 'fa24daf3af3862b0067ae72749042dc125ca61bf', type: "current" }), h$2("span", { key: 'dad9106498b30ccfe851f250d75d0e138b439f02', class: "stzh-audio__time-separator" }, "/"), h$2("vds-time", { key: '2f5733ad580c78a1985483125d3254f430356cb0', type: "duration" })), h$2("stzh-tooltip", { key: 'd7aee440b11568d42c2e03ad8312056a606d45d8' }, h$2("vds-mute-button", { key: '7c842413fba97a286989d662fedfe43777d5401b', class: "stzh-audio__button is-mute" }, h$2("stzh-icon", { key: 'eb4b593b06d85a7bb2334625d1d7258651b1af94', class: "stzh-audio__muted", name: "volume-medium" }), h$2("stzh-icon", { key: '41238af0eeb3148416561efa0823d091a0169dc9', class: "stzh-audio__unmuted", name: "silent-mode" })), h$2("span", { key: '92c79322db2691e45dc28ed0c2b7a00768655936', slot: "content" }, h$2("span", { key: '31f89ac113c48f7e3904121b1cf8fbce001cf1b2', class: "stzh-audio__muted" }, this.localization.mute), h$2("span", { key: 'feb640737ef68e5997095eb8f9ba077e7e9aa1e5', class: "stzh-audio__unmuted" }, this.localization.unmute))), h$2("vds-volume-slider", { key: 'fae7ee452e0ac5bc24865460014a5a1380015822', class: "stzh-audio__slider is-volume" }, h$2("div", { key: '54399b7b75930da1323dbf2fa5922974edaa0287', class: "stzh-audio__slider-track" }), h$2("div", { key: 'fa45a8c1a853a53191367d88081e82d6b96feb74', class: "stzh-audio__slider-track is-fill" }), h$2("div", { key: '377958d28409aa8dd324e077346c54a5b574c704', class: "stzh-audio__slider-thumb-container is-shown" }, h$2("div", { key: '0899b146ebed8f9424ab60663dd3f443ffd2a66a', class: "stzh-audio__slider-thumb" })), h$2("div", { key: 'fed9fbe923795d5fd9a1568dad6bf7acd5bf02cf', class: "stzh-audio__media-preview-container" }, h$2("vds-slider-value-text", { key: '7f2245dd71fe904a31901bc5c9d6f39d64e63464', class: "stzh-audio__slider-text", type: "pointer", format: "percent" })))), h$2("div", { key: 'e79b2e14c9843b7d58b0e00ef417e0f16107a97d', class: "stzh-audio__controls-bottom-right" }, hasTranscript && (h$2("stzh-tooltip", { key: 'f8b9f8e104204f35a15d4a8d3928b959f253b99f', content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, h$2("button", { key: '5b406fa80c75f55973356a720dd25e6d38856cbe', class: {
                 "stzh-audio__button is-transcript": true,
                 "is-active": this.transcriptShown,
             }, onClick: () => (this.transcriptShown = !this.transcriptShown), "s-object-id": this.transcriptAnalyticsId ||
-                (this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript) }, h$2("stzh-icon", { key: 'bb1b4acca149507438f66d77bb90483fd75c9f83', name: "transcript" })))), h$2("stzh-tooltip", { key: '1c3d793229e8c3601b14fef416be878461c9d62f', content: this.localization.download }, h$2("a", { key: '9a26959304cfc32852987e2f4c25c56df19d929a', class: "stzh-audio__button is-download", href: this.src, download: "", "s-object-id": this.downloadAnalyticsId || this.localization.download }, h$2("stzh-icon", { key: 'bbf59976f0ae87bfeeb28373f10a96a8f67320c9', name: "download" })))))), h$2("div", { key: '6ca84f7d53b8634f508cc0dd67ec5ee14e4774bb', class: "stzh-audio__transcript", hidden: !this.transcriptShown }, this.transcript ? this.transcript : h$2("slot", { name: "transcript" })))));
+                (this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript) }, h$2("stzh-icon", { key: '3f80795cdca511dc2d138f56976e8fca30e4f98e', name: "transcript" })))), h$2("stzh-tooltip", { key: '45478cb8b2e8ce687844587c796f688245d5319e', content: this.localization.download }, h$2("a", { key: 'b32dc022b0bee1522cb9e32842fbeb1ab998ecdb', class: "stzh-audio__button is-download", href: this.src, download: "", "s-object-id": this.downloadAnalyticsId || this.localization.download }, h$2("stzh-icon", { key: '102db5b5548d554b8353cecc84fafd2dc4e255e8', name: "download" })))))), h$2("div", { key: '8b5b5ca69143473f56051ad54c064fa1e0c3d718', class: "stzh-audio__transcript", hidden: !this.transcriptShown }, this.transcript ? this.transcript : h$2("slot", { name: "transcript" })))));
     }
     get element() { return getElement(this); }
 };

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

@@ -16,7 +16,7 @@ const StzhBadge = class {
             "stzh-badge": true,
             [`stzh-badge--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: 'ab244b1fcd1862bbd1b913aa567a93482ed1fd58', filled: !!this.label }, h("div", { key: '54a8d091b9371f422a8c560eee21347362c3417f', class: classes }, this.label || h("slot", { key: '4ad245f23016d0645c4ea109cc0bddf40fb690ca' }))));
+        return (h(Host, { key: 'd9a44111a97f8f9b6a6fb3f8654850b8c6944df3', filled: !!this.label }, h("div", { key: 'bd1060b98f860ba77f52c0aaa1bc64c2b30193fa', class: classes }, this.label || h("slot", { key: '3a3cd91f00ba58027dc1a75ed750e0c96cbfb400' }))));
     }
 };
 StzhBadge.style = StzhBadgeStyle0;
@@ -184,7 +184,7 @@ const StzhButton = class {
             [`stzh-button--type-${this.type}`]: !!this.type,
             [`stzh-button--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'a18cb416b26eec4275810c9cd5b16bdef0d3bcdf', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : this.type === "radio" ? (h("label", { ref: el => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: el => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, defaultChecked: this.defaultChecked, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))) : (h("button", { ref: el => (this.button = el), class: classes, type: this.type, name: this.name, value: this.value, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: 'c2e4ee63e4c8a225ce7791ad7f4ae32472e1b08d', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : this.type === "radio" ? (h("label", { ref: el => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: el => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, defaultChecked: this.defaultChecked, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))) : (h("button", { ref: el => (this.button = el), class: classes, type: this.type, name: this.name, value: this.value, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
     }
     get element() { return getElement(this); }
 };
@@ -269,7 +269,7 @@ const StzhIcon = class {
         }, 0);
     }
     render() {
-        return (h(Host, { key: '3632f281961b04c9603091a7f9db711a6123793f' }, h("div", { key: '70ca189751061be8bdbaac7bbb1c04b13c2ca881', class: "stzh-icon", style: { display: this.iconDisplay }, innerHTML: this.svgHtml })));
+        return (h(Host, { key: '48bec2666774f99ae81c11a48beb8138b9b107ac' }, h("div", { key: '65b8489b21a64236e6964fca027a2f7f3c963b88', class: "stzh-icon", style: { display: this.iconDisplay }, innerHTML: this.svgHtml })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -151,7 +151,7 @@ const StzhBreadcrumb = class {
             [`stzh-breadcrumb--${this.variant}`]: !!this.variant,
             rs_skip: true, // will prevent component being read by readspeaker
         };
-        return (h(Host, { key: 'ed1c7468acd17e85c9b2a4b9a751e7d3ac819405' }, h("div", { key: '4076813c39b6af2cf5d7f68f6483707bc5a36a06', class: classes }, h("nav", { key: '9280811b687f8162e9c17c856299fd34747ad05b', ref: el => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, h("ol", { key: '505ad815ab804d4579832e8ed77236fdcbf705e4', class: "stzh-breadcrumb__list" }, this._items.map((item, index) => (h(Fragment, null, h("li", { class: {
+        return (h(Host, { key: 'ce1552e4612985eed6a7c6e071cd30a836fba0ad' }, h("div", { key: 'b921fb04eb278ad1531ef792f1e4d246c5df6066', class: classes }, h("nav", { key: 'e9653b97c7f172161704b1125cf7a0b08f3c6ffe', ref: el => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, h("ol", { key: 'ea3261be43b39081deab6b5f402e8b31b539d733', class: "stzh-breadcrumb__list" }, this._items.map((item, index) => (h(Fragment, null, h("li", { class: {
                 "stzh-breadcrumb__item": true,
                 "is-last": index + 1 === this._items.length,
                 "is-first": index === 0,
@@ -248,7 +248,7 @@ const StzhTag = class {
             [`stzh-tag--${this.type}`]: !!this.type,
         };
         const Tag = this.nonInteractive ? "div" : this.href ? "a" : "button";
-        return (h(Host, { key: '0553f6dd210cfecacef0ffc11921372478dc2b36', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '5f1538ace3621e8007739f53aadd9cd7d49eb54c', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
+        return (h(Host, { key: '6593610553fe48a4eed6120f02983937e141780f', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'c3b67aeb280a94253427e31e3ce721d5c2ba7bdb', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
                 "stzh-tag__button": true,
                 "is-button": !this.nonInteractive && !this.href,
                 "is-link": !this.nonInteractive && !!this.href,

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

@@ -102,7 +102,7 @@ const StzhButtongroup = class {
         const classes = {
             "stzh-buttongroup": true,
         };
-        return (h(Host, { key: '9501867b5b621c393a605e5b06dfb5cdcc1fe012' }, h("div", { key: '7243ae784e70f49f6441656f579e1ae583ca608f', class: classes }, h("slot", { key: 'd8853459525ba37f2792005f0e9f91acf8fde8e4', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: '165b0be231882e0333c166b49e52ef2519165f30' }, h("div", { key: '62e0f8c17082cd8dfd7934cf878cc6e01670e43f', class: classes }, h("slot", { key: 'f2a4b181d925eadb56f3cc04713a13e17a312dd2', onSlotchange: this.onSlotChange }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-card-navigation.entry.js

@@ -42,7 +42,7 @@ const StzhCardNavigation = class {
         };
         const Heading = `h${this.headingLevel}`;
         const TitleLink = this.href ? "a" : "button";
-        return (h(Host, { key: '126238eacbee51894478325827183eb25d07ae1c', "has-lead": hasLead }, h("article", { key: '58564a2b5e5d15d17ce0194657b1a3c44305c58c', class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { key: '92569a606c10d0ff218144d34e125891881a89b2', class: "stzh-card-navigation__wrapper" }, h(Heading, { key: 'de17979df832b89b5c69930179bb23d27f365dd9', class: "stzh-card-navigation__title" }, h(TitleLink, { key: 'c62ce84e0727bfb5f5dd3e4c38cf12b04029a45f', ref: el => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, this.heading ? (h("div", { ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" }))))), h("div", { key: 'da2992e3f27517aedc2a56c390076093bcf78945', class: "stzh-card-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" }))), h("div", { key: '5b550f74204099775b53ed12cf40252c81abc955', class: "stzh-card-navigation__arrow" }, h("stzh-icon", { key: 'fb3b980cb1f5ad314ca592acaced9fe8ef89781b', class: "stzh-card-navigation__arrow-icon", name: "arrow-right" })))));
+        return (h(Host, { key: 'ff7822e226f8be71748941b195a1a603c1c56245', "has-lead": hasLead }, h("article", { key: '09adf9d0d76646d1b18ce9037b34692e5a7fe75e', class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { key: '9506cbcb86ffc1e5a4c8a39c1e67c28c9b4805ec', class: "stzh-card-navigation__wrapper" }, h(Heading, { key: 'e4c99f354b832767b968a8ed84c50b5a62bfbf65', class: "stzh-card-navigation__title" }, h(TitleLink, { key: '4cac9dddd6d67269bc64be5f75451494079aff96', ref: el => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, this.heading ? (h("div", { ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" }))))), h("div", { key: '231bd8ab3718a66129165f9c316b428d06f77a94', class: "stzh-card-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" }))), h("div", { key: 'be998d149971b1ac8a4ee37988cfe1fecc2580bd', class: "stzh-card-navigation__arrow" }, h("stzh-icon", { key: 'd4e532c4725e941d86f9140c5470071ab1e25a76', class: "stzh-card-navigation__arrow-icon", name: "arrow-right" })))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-card-searchresult.entry.js

@@ -129,7 +129,7 @@ const StzhCardSearchresult = class {
         };
         const Heading = `h${this.headingLevel}`;
         const HeadingLink = this.href ? "a" : "div";
-        return (h(Host, { key: '257b6fcf95d0434504f155ef180aeb68e71d44a1', "has-image": hasImage }, h("article", { key: 'b53d03d99b9def93efb7c157546f24b7fb100119', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && h("stzh-tag", { key: '7990b36edadf79d91225debb31fcebf04b46c465', class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), h("div", { key: '181b898fc2d64a7951268bc68a8b9b9df258de95', class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems && (h("stzh-breadcrumb", { key: '110b908e7736976aecca796098bae3021a905fae', class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && h("div", { key: 'e2bf802dffc433a9cc5ef27dfbe67cbf31bbd843', class: "stzh-card-searchresult__dateline" }, this.dateline), h(Heading, { key: 'e629e9c3a303ad1e073dd0eb1f085c7fc2de5ab5', class: "stzh-card-searchresult__heading" }, h(HeadingLink, { key: '1f3f5df84d1eab7e08b490e23ec53dbc2e4acc79', ref: el => (this.headingLinkElement = el), class: "stzh-card-searchresult__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, this.heading ? (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" })))))), h("div", { key: '43e3d3e81629a1e9337907d22d79e3cf7cb81799', class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) && (h("div", { key: '79776893713db4e5b8cd0929dd7243f0b9726fbb', class: "stzh-card-searchresult__event-infos" }, eventDateStart && (h("div", { key: 'b448fdcf09171c9a27ca83464d5947dc4b4f6099', class: "stzh-card-searchresult__event-date" }, h("span", { key: '206dc26c966d4c25ca9b2b5d2cc3eac08b77388a' }, this.dateAdapter.format(eventDateStart, "dateLong")), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (h("span", { key: '1374dc07fcbd41352bd5776fff87b099a817eb29' }, ",\u00A0", this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, "time"))))), this.eventLocation && h("div", { key: '0de1eadafece104ace8ff26e747be5dd94da61f3', class: "stzh-card-searchresult__event-location" }, this.eventLocation))), h("div", { key: '4b59a46ab104a1682ee91f727cb201e131452968', class: "stzh-card-searchresult__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { key: '04bfddd13391e29c5efef90b528d201abfb20565', class: "stzh-card-searchresult__image" }, eventDateStart && (h("div", { key: '8301d8f74ec8b8abd0f7df06dea53250584b1a0b', class: "stzh-card-searchresult__event-date-teaser" }, h("div", { key: 'ce8dd4abe7c1bd2632bd7de39acf0ccc7d8196df', class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { key: 'af7ada23d8cc14882dc7503b10c3fcec12e03b9f', class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && "0", eventDateStart.getDate()), h("div", { key: '4e12626e5a4affd1e249559ac42fb27c6612a7c5', class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.topic && h("div", { key: '44b4450170f51c7cf0239ff412b581f7d1162fe1', class: "stzh-card-searchresult__topic" }, this.topic), this.service && h("div", { key: 'a81ca254a177f8d3c60381cb609522762c681afa', class: "stzh-card-searchresult__service" }, this.service), h("slot", { key: '6c82e999d779af2ba03126ea5a21be2121aae304', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (h("stzh-ratio", { key: '08ee1fc6495875a37d0c115c4d41cdafb7c104c4', ratio: "21:9", "ratio-small": "1:1" }, h("div", { key: '70d95e85c5e8c075b76254da93368403e81040f0', class: "stzh-card-searchresult__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: '07f46a5a979592aaafe9b55f04813f8f7d4b0c57', class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems && (h("stzh-datalist", { key: 'b9105a376424e6ed71a4a4b4441d347a8615de97', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (h("div", { key: '547ea6ef7d7b8462c853a8239a99eea4ec4b7368', class: "stzh-card-searchresult__meta" }, h("div", { key: '181a4b7d1a460355dd6d04bf5b0dea29f90585b0', class: "stzh-card-searchresult__meta-list" }, this._meta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))))), (!!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: '5137dd35c04e300bb784b2c88cac57118d1af4c2', class: "stzh-card-searchresult__download" }, h("div", { key: '416b67c41af0066f00dec182e1b2717f2259aa96', class: "stzh-card-searchresult__download-data" }, this.downloadHeading && (h("div", { key: '2acc05a484c75c94e63f1a365cfe4783e38891e1', class: "stzh-card-searchresult__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (h("div", { key: '1264dd5b5028a1fcd74f65c730060e1584f15aa4', class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))))), h("div", { key: 'd9611d38e906a616220a53e7bed08e22fae09cb9', class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { key: 'a6241e06cef95f1714183247e6242c82a04a78da', class: "stzh-card-searchresult__download-icon", name: "download" })))))))));
+        return (h(Host, { key: 'cbafbc560aff47f8c539c5899f990eecff46ce66', "has-image": hasImage }, h("article", { key: 'ca5c014f1faad73453122bb2e0614671c9a1d88a', class: classes, "aria-label": this.heading, role: "listitem" }, this.tag && h("stzh-tag", { key: 'eb48cde2b51b06ec33d5cf55bf76fa94e0178e05', class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), h("div", { key: 'd782ffa94323710d23ecd1356efb1093d44fd577', class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems && (h("stzh-breadcrumb", { key: 'f13a96703bd24b99d8804db440246a71192203b5', class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" })), this.dateline && h("div", { key: '38dc876bbe902e80de6ea1a441e6062a6951b2ef', class: "stzh-card-searchresult__dateline" }, this.dateline), h(Heading, { key: '15e975053ce5e387f584ccecb786ca254b155bf5', class: "stzh-card-searchresult__heading" }, h(HeadingLink, { key: 'c4c1e0b4e85e4ab3b909e10019578cb4ab348bd6', ref: el => (this.headingLinkElement = el), class: "stzh-card-searchresult__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, this.heading ? (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el), innerHTML: this.heading })) : (h("div", { class: "stzh-card-searchresult__heading-link-text", ref: el => (this.headingTextElement = el) }, h("slot", { name: "heading" })))))), h("div", { key: 'a71a5adbbab561465b58dc24345cb4c1e6115f4e', class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) && (h("div", { key: '66cbdcd4e7e528d984b7df77b3353f55f8e72171', class: "stzh-card-searchresult__event-infos" }, eventDateStart && (h("div", { key: '8cf8334fd492b58d7516b910a21c3674ace419d4', class: "stzh-card-searchresult__event-date" }, h("span", { key: '5b76cabe5faa55b40ec73acc59412e1042e9b74d' }, this.dateAdapter.format(eventDateStart, "dateLong")), this.hasProperStartAndOrEndDate(eventDateStart, eventDateEnd) && (h("span", { key: '8961bb3f1af9afe989eebcb4cde7668b12b247f6' }, ",\u00A0", this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, "time"))))), this.eventLocation && h("div", { key: 'acd7b08ca6a727c0a1743c6f729149056626d33c', class: "stzh-card-searchresult__event-location" }, this.eventLocation))), h("div", { key: '883100a1018a404c466051bb959aaf8592020e7a', class: "stzh-card-searchresult__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { key: 'fd61fe010cb55e80d506b15bd50b3c51a7a6db1c', class: "stzh-card-searchresult__image" }, eventDateStart && (h("div", { key: '9e334768f9719d98b63695ef271e201b8b6053ca', class: "stzh-card-searchresult__event-date-teaser" }, h("div", { key: '71fc984b1adf4700c4804e50a2ccda241a52dec2', class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { key: '87260077c3f71e0cb8d9c8cc6ef2d241cf3864d7', class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && "0", eventDateStart.getDate()), h("div", { key: 'aa5e3e7ef9e7ec0d0d8a890e20be356b59a224d7', class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]))), this.topic && h("div", { key: 'c73ae5a2946cf50346f704c938a61ec611457ae0', class: "stzh-card-searchresult__topic" }, this.topic), this.service && h("div", { key: 'ef630978c11ddfae650d39049e6472936ff6b26f', class: "stzh-card-searchresult__service" }, this.service), h("slot", { key: '5195c6070c2d6e848c16026bdd0daac7ef7ca3ca', name: "image" }), this.placeholderImageEnabled && !hasImageSlot && (h("stzh-ratio", { key: '5c3386e308fc95d993c599de274ad484ac610076', ratio: "21:9", "ratio-small": "1:1" }, h("div", { key: '6b5cacd8e8e414e20cbb18f4e535a1e1b6e52694', class: "stzh-card-searchresult__image-placeholder", innerHTML: PlaceholderImage })))), (this._meta.length > 0 || this.datalistItems || !!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: '89dbb2ca7ea9f45621a294ef86e92b8303e111fe', class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems && (h("stzh-datalist", { key: '7d604a4b050131cf83f6d2a9a6fdd093eea7634f', class: "stzh-card-searchresult__datalist", items: this.datalistItems })), this._meta.length > 0 && (h("div", { key: '5b8f99dbba495ad96d0123861932d5ad9d4eda27', class: "stzh-card-searchresult__meta" }, h("div", { key: '2d9e15984f0de40a5b2ed5a8220fa1b764daff47', class: "stzh-card-searchresult__meta-list" }, this._meta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))))), (!!this.downloadHeading || this._downloadMeta.length > 0) && (h("div", { key: '40baa9baa20eccb6d88e5c53b992e88a3fb62a09', class: "stzh-card-searchresult__download" }, h("div", { key: 'bdfa86f496058489c700886fe05c54ee901664e7', class: "stzh-card-searchresult__download-data" }, this.downloadHeading && (h("div", { key: '64b4512bfab0e9bcf42f692b1d7a096e6eca7ed8', class: "stzh-card-searchresult__download-heading" }, this.downloadHeading)), this._downloadMeta.length > 0 && (h("div", { key: 'a53829afeb68e4435c988ec73db26319ea55c9f2', class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map(meta => (h(Fragment, null, h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))))), h("div", { key: '5bfc817779e65c3637ad6d462e44babe9d6095ae', class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { key: '771853052149b54db3ef905c78867ece287db837', class: "stzh-card-searchresult__download-icon", name: "download" })))))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {