@oiz/stzh-components 4.0.0-beta3 → 4.0.1-beta

package/dist/esm/stzh-skin-portal-mitwirken.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-skin-portal-mitwirken.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,yp2OAAyp2O,CAAC;AAC7r2O,sCAAe,0BAA0B;;MCY5B,uBAAuB;;;;IAClC,gBAAgB;;QAEd,OAAO,CAAC,GAAG,CAAE,IAAI,CAAC,WAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sDACE,EACP;KACH;;;;;;","names":[],"sources":["src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.scss?tag=stzh-skin-portal-mitwirken","src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.tsx"],"sourcesContent":["@import \"../../global/css/stzh-components.css\";\n\n:root {\n  --stzh-color-primary: var(--stzh-color-deepcerulean);\n  --stzh-color-primary-hover: var(--stzh-color-regalblue);\n\n  --stzh-color-primary48: rgba(5, 127, 172, 0.48);\n  --stzh-color-primary32: rgba(5, 127, 172, 0.32);\n  --stzh-color-primary16: rgba(5, 127, 172, 0.16);\n  --stzh-color-primary8: rgba(5, 127, 172, 0.08);\n\n  --stzh-font-family-heavy: var(--stzh-font-family-bold);\n  --stzh-font-family-title: var(--stzh-font-family-light);\n\n  --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);\n}\n\n$mobileBreakpoint: 40em;\n$processHeaderMaxMobileBreakpoint: 599px;\n$processHeaderMaxDesktopBreakpoint: 1023px;\n\nmain,\n.reveal-overlay,\n.mod_header {\n  --primary: var(--stzh-color-primary);\n  --secondary: var(--stzh-color-primary);\n  --success: var(--stzh-color-old-truegreen);\n  --warning: var(--stzh-color-old-warning);\n  --alert: var(--stzh-color-error60);\n  --highlight: var(--stzh-color-coral);\n  --highlight_alternative: var(--stzh-color-coral);\n}\n\n// For main and modals\nmain,\n.reveal-overlay {\n  a.muted,\n  .inline-filters button.muted[data-toggle] {\n    color: $colorWhite;\n    background-color: $colorOldGrey13;\n    border-color: $colorOldGrey13;\n\n    &:hover,\n    &:focus {\n      color: $colorWhite;\n      background-color: $colorOldGrey13;\n      border-color: $colorOldGrey13;\n    }\n  }\n}\n\n// Only modals\n.reveal-overlay {\n  background-color: rgba(5, 127, 172, 0.8);\n\n  /* Dialog */\n\n  .reveal__title {\n    margin-top: 0;\n  }\n\n  .reveal {\n    box-shadow: $boxShadowOverlay;\n  }\n\n  .close-button {\n    color: $baseLeadColor;\n  }\n}\n\n// Only header\n.mod_header {\n  .mod_header__logobar-logo img {\n    background: url(https://www.stadt-zuerich.ch/content/dam/stzh/corpdesign/wortbildmarken/logo_stzh_vbz_pos_2-1.svg) no-repeat;\n    width: 0;\n    padding-left: 208px;\n  }\n}\n\n// Main Content Modules\nmain {\n  accent-color: $colorPrimary;\n\n  /* Resets */\n  @include richtext-host;\n  @include richtext-slotted($withLists: false);\n\n  &, label, tfoot, thead {\n    color: $baseColor;\n  }\n\n  svg {\n    overflow: visible;\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n  }\n\n  .field label {\n    @include font('heavy');\n    display: block;\n  }\n\n  input[type=checkbox],\n  input[type=radio] {\n    width: 24px;\n    height: 24px;\n  }\n\n  label > [type=checkbox],\n  label > [type=radio] {\n    margin-right: space('small');\n  }\n\n  .filters__section--general label,\n  .filters__section label {\n    @include fontSize('milli');\n    display: flex;\n    line-height: 24px;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $baseColor;\n    margin-bottom: space('small');\n  }\n\n  .filters__has-subfilters {\n    align-items: center;\n\n    [data-toggle] {\n      margin-bottom: space('small');\n    }\n  }\n\n  .form-input-extra-before,\n  .form-error {\n    @include font;\n    @include fontCurve('caption');\n  }\n\n  .form-error,\n  .is-invalid-label {\n    color: $colorError60;\n  }\n\n  [type=color],\n  [type=date],\n  [type=datetime-local],\n  [type=datetime],\n  [type=email],\n  [type=month],\n  [type=number],\n  [type=password],\n  [type=search],\n  [type=tel],\n  [type=text],\n  [type=time],\n  [type=url],\n  [type=week],\n  textarea,\n  .inline-filters button[data-toggle],\n  select,\n  .data-picker .picker-prompt a,\n  .data-picker.picker-single .picker-values div a {\n    @include font;\n\t  @include fontSize('milli');\n    border: 1px solid $formBorderColor;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: $formInputBorderRadius;\n    padding: space('xsmall') space('medium');\n    width: 100%;\n    height: $formInputHeight;\n    color: $colorPrimary;\n    appearance: none;\n    margin-bottom: space('medium');\n    text-decoration-line: none;\n\n    @include placeholder {\n      color: $formInputPlaceholderColor;\n    }\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      border-color: $colorPrimaryHover;\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n  }\n\n  .data-picker .picker-prompt a,\n  .data-picker.picker-single .picker-values div a {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    &::after {\n      float: none;\n      margin-top: 0;\n    }\n  }\n\n  .inline-filters button[data-toggle],\n  select {\n    padding-right: space('xxlarge');\n  }\n\n  textarea {\n    min-height: $formInputHeight;\n    resize: vertical;\n\n    &[rows] {\n      height: auto;\n    }\n  }\n\n  .input-group .input-group-field {\n    margin-bottom: 0;\n  }\n\n  .section > p,\n  .floating-helper__content p {\n    margin-top: 0;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .add-message,\n  .card,\n  .chart-tooltip,\n  .comment-thread,\n  .conference-registration,\n  .conference-speaker .speaker-bio {\n    margin-bottom: space('xxlarge');\n    border-color: $baseBorderColor;\n    background-color: $colorWhite;\n  }\n\n  .ql-editor ol,\n  .ql-editor ul {\n    padding-left: 0;\n  }\n\n  .badge-card__content,\n  .card__content,\n  .card__text--paragraph,\n  .floating-helper__content-inner,\n  .lead,\n  .process-header + .wrapper .section,\n  .timeline__content {\n    ul li:not(.card-data__item) {\n      padding-left: space('large');\n\n      &::before {\n        content: \"–\";\n        margin-left: 0;\n        margin-right: 0;\n        text-align: left;\n        width: auto;\n      }\n    }\n  }\n\n  .badge-card__content,\n  .card__content,\n  .card__text--paragraph,\n  .floating-helper__content-inner,\n  .lead,\n  .process-header + .wrapper .section,\n  .timeline__content {\n    ul.tags li:not(.card-data__item) {\n      padding-left: 0;\n\n      &::before {\n        content: none;\n      }\n    }\n  }\n\n  .m-bottom {\n    margin-bottom: space('medium');\n  }\n\n  .mb-sm {\n    margin-bottom: space('xxlarge');\n  }\n\n  p {\n    color: $baseColor;\n  }\n\n  tfoot td,\n  tfoot th,\n  thead td,\n  thead th {\n    @include font('heavy');\n  }\n\n  tfoot td,\n  tfoot th,\n  thead td,\n  thead th,\n  tbody td,\n  tbody th {\n    padding: space('xmall');\n  }\n\n  table,\n  td,\n  tr,\n  .questionnaire-question-matrix table,\n  .questionnaire-question-matrix td,\n  .questionnaire-question-matrix tr,\n  .questionnaire-question-matrix tr:nth-child(2n) {\n    border-color: $baseBorderColor;\n  }\n\n\n  /* Process Header */\n\n  .process-header .process-header__inner {\n    background-color: $colorPrimary;\n  }\n\n  .card--full .process-header .process-header__container .process-header__info .card__title,\n  .process-header .process-header__container .process-header__info .card--full .card__title,\n  .process-header .process-header__container .process-header__info .heading2 {\n    @include font('title');\n    @include fontCurve('hero', 'heading');\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n    border-bottom: none;\n    padding-bottom: 0;\n  }\n\n  .process-header .process-header__container {\n    padding: 0 space('xxxxlarge');\n\n    @media screen and (max-width: #{$processHeaderMaxDesktopBreakpoint}) {\n      padding: space('xxxxlarge');\n      padding-bottom: space('big');\n    }\n\n    @media screen and (max-width: #{$processHeaderMaxMobileBreakpoint}) {\n      padding: space('xxlarge') $containerMargin space('xxxlarge');\n    }\n  }\n\n  .process-header__info {\n    padding: 0;\n  }\n\n  .process-header .process-header__container .process-header__info .heading-small {\n    @include fontCurve('h3', 'heading');\n    color: $baseInvertColor;\n    margin-top: 0;\n  }\n\n  .process-header__hashtag a {\n    color: $baseInvertColor;\n    text-decoration-line: none;\n\n    &:hover {\n      color: $baseInvertColor;\n    }\n\n    .external-link-indicator {\n      background: $baseInvertColor;\n      padding: space('xxsmall');\n      box-sizing: content-box;\n      border-radius: $buttonBorderRadius;\n      margin: 0;\n      margin-bottom: -4px;\n      margin-left: 4px;\n    }\n  }\n\n  .phase-subtitle--initiatives,\n  .phase-title,\n  .phase-title--initiatives {\n    @include font('title');\n    @include fontCurve('h4');\n    color: $baseLeadColor;\n  }\n\n  .process-header__progress {\n    display: flex;\n    align-items: center;\n  }\n\n  .process-header__phase {\n    padding: space('medium');\n    margin-top: space('medium');\n    margin-bottom: 0;\n  }\n\n  .phase-date {\n    @include font('regular');\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n  .phase-current {\n    @include fontCurve('caption');\n    margin-left: space('xxsmall');\n    color: $baseColor;\n  }\n\n  .process-header__progress {\n    margin-bottom: space('xsmall');\n  }\n\n  .process-header__phase .button,\n  .process-header__phase .meeting-polls__button,\n  .process-phase .button,\n  .process-phase .meeting-polls__button {\n    margin-top: space('xsmall');\n  }\n\n  /* Links */\n\n  a,\n  .link {\n    text-decoration-line: underline;\n    transition: $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n\n  /* Buttons */\n\n  .button {\n    @include fontSize('milli');\n    display: inline-flex;\n    align-items: center;\n    height: auto;\n    min-height: $formInputHeight;\n    line-height: $formInputHeight - 2px;\n    line-height: inherit;\n    margin: 0;\n    text-decoration-line: none;\n    appearance: none;\n    border: 1px solid $colorPrimary;\n    padding: space('xsmall') space('xlarge');\n    transition: all $baseTransitionAnimationSpeed;\n\n    &.small {\n      @include fontSize('micro');\n      min-height: $formInputHeightSmall;\n      line-height: $formInputHeightSmall - 2px;\n    }\n\n    &.tiny {\n      @include fontSize('micro');\n      min-height: 32px;\n    }\n\n    &.process-nav__more i {\n      background-color: currentColor;\n      margin-bottom: 0;\n    }\n\n    &.process-nav__more i:first-child {\n      margin-left: space('xsmall');\n    }\n  }\n\n  .button--icon {\n    .icon-wrap {\n      display: flex;\n      align-items: center;\n    }\n\n    .icon-wrap .icon {\n      margin-right: space('xxsmall');\n    }\n  }\n\n  .button--icon.meeting-polls__button .icon,\n  .button--icon.small .icon {\n    width: iconSize('xxsmall');\n    height: iconSize('xxsmall');\n  }\n\n  .extra .button.follow-button {\n    margin-top: 0;\n  }\n\n  .button-group.meeting-polls__button .button,\n  .button-group.meeting-polls__button .meeting-polls__button,\n  .button-group.small .button,\n  .button-group.small .meeting-polls__button,\n  .button-group.tiny .button,\n  .button-group.tiny .meeting-polls__button {\n    @include fontSize('micro');\n  }\n\n  .button.primary,\n  .button.primary.disabled,\n  .button.primary.disabled:focus,\n  .button.primary.disabled:hover,\n  .button.primary[disabled],\n  .button.primary[disabled]:focus,\n  .button.primary[disabled]:hover,\n  .primary.meeting-polls__button {\n    background-color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      background-color: $colorPrimaryHover;\n    }\n  }\n\n  .button.budget-vote-button {\n    @include font;\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    margin-bottom: space('medium');\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      background-color: $colorWhite;\n    }\n  }\n\n  .button--vote-button {\n    margin-bottom: space('large');\n  }\n\n  .view-side > .button {\n    margin-bottom: space('medium');\n  }\n\n  .button.clear,\n  .button.clear.disabled,\n  .button.clear.disabled:focus,\n  .button.clear.disabled:hover,\n  .button.clear[disabled],\n  .button.clear[disabled]:focus,\n  .button.clear[disabled]:hover,\n  .clear.meeting-polls__button {\n    color: $colorError60;\n  }\n\n\n  /* Wrapper / Layout */\n\n  .wrapper {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n\n    padding-left: $containerMargin;\n    padding-right: $containerMargin;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    .wrapper--inner {\n      background-color: $colorOldGrey5;\n    }\n\n    // .row.column {\n    //   padding-left: 0;\n    //   padding-right: 0;\n    // }\n\n    .row:not(.column) .floating-helper-container {\n      padding-right: 0.625rem;\n      padding-left: 0.625rem;\n    }\n\n    @media screen and (min-width: #{$mobileBreakpoint}) {\n      .row:not(.column) .floating-helper-container {\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n      }\n    }\n  }\n\n\n  /* Headings */\n\n  .heading1, h1,\n  .heading2, h2,\n  .heading3, h3,\n  .heading4, h4 {\n    color: $colorPrimary;\n  }\n\n  .heading1, h1 {\n    @include font('title');\n    @include fontCurve('h1', 'heading');\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n    @include spaceCurve('padding-bottom', 'tiny');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .section-heading,\n  .heading2, h2 {\n    @include font('title');\n    @include fontCurve('h2', 'heading');\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n    @include spaceCurve('padding-bottom', 'tiny');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .heading3, h3 {\n    @include font('title');\n    @include fontCurve('h3', 'heading');\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  .heading4, h4 {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  .heading4, h4,\n  .timeline__item--current .timeline__date {\n    color: $colorPrimary;\n  }\n\n  #most-commented .section-heading {\n    margin-top: 0;\n  }\n\n  #most-commented a {\n    text-decoration-line: none;\n  }\n\n\n  /* Section */\n\n  .section {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  .section-heading {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .section-heading .text-sm,\n  .section-heading .text-small {\n    @include fontCurve('h3', 'heading');\n  }\n\n\n  /* Dropdown */\n\n  .order-by__dropdown,\n  .results-per-page__dropdown {\n    display: flex;\n    align-items: center;\n  }\n\n  .order-by__text,\n  .results-per-page__text {\n    margin-right: space('xsmall');\n  }\n\n  .is-dropdown-submenu {\n    box-shadow: $boxShadowPopover;\n    border: none;\n    border-radius: var(--stzh-popover-border-radius);\n    margin-top: var(--stzh-space-xsmall);\n  }\n\n  .dropdown.menu > li.is-dropdown-submenu-parent > a {\n    @include font;\n    @include fontSize('milli');\n    display: flex;\n    align-items: center;\n    background: $colorWhite;\n    padding: space('xsmall') space('medium');\n    padding-right: calc(#{space('xlarge')} + #{space('medium')} + #{space('xsmall')});\n    min-height: $formInputHeight;\n    border: 1px solid $formBorderColor;\n    margin: 0;\n  }\n\n  .dropdown.menu > li.is-dropdown-submenu-parent > a:after {\n    border-color: $colorPrimary transparent transparent;\n    right: space('medium');\n  }\n\n  .dropdown .is-dropdown-submenu a,\n  .comment__header__context-menu__content-item {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n    justify-content: stretch;\n    appearance: none;\n    text-decoration-line: none;\n    border: none;\n    padding: space('xsmall') space('medium');\n    padding-left: space('large');\n    color: $colorOldGrey70;\n    background-color: transparent;\n    height: $menuItemHeight;\n    line-height: $menuItemHeight;\n    transition: all $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    &:hover {\n      color: $colorOldGrey70;\n      background-color: $colorOldGrey5;\n      text-decoration-line: none;\n    }\n  }\n\n  .comment__header__context-menu__content-item {\n    grid-gap: space('small');\n    gap: space('small');\n  }\n\n\n  /* Comments */\n\n  .comments {\n    padding-top: 0;\n    margin-top: space('medium');\n    margin-bottom: space('medium');\n  }\n\n  .comments .section-heading {\n    margin-top: 0;\n  }\n\n  .comment__header,\n  .comment__footer,\n  .add-comment {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .add-comment {\n    background-color: transparent;\n    padding: 0;\n  }\n\n  .add-comment .remaining-character-count {\n    color: $baseColor;\n    padding: space('xsmall') space('small');\n  }\n\n  .comment-threads {\n    margin-bottom: space('xxxlarge');\n  }\n\n  .comment__content {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n\n    p {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  .comment__footer {\n    @include fontCurve('p2');\n  }\n\n  .comment__votes {\n    margin-top: 0;\n  }\n\n  .comment__header__context-menu__content {\n    box-shadow: $boxShadowPopover;\n  }\n\n  .opinion-toggle {\n    margin: space('xlarge') 0;\n  }\n\n  .button:hover,\n  .meeting-polls__button:hover,\n  .opinion-toggle--meh.is-active,\n  .opinion-toggle--meh:focus,\n  .opinion-toggle--meh:hover {\n    background-color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n  }\n\n  .opinion-toggle--ko.is-active,\n  .opinion-toggle--ko:focus,\n  .opinion-toggle--ko:hover {\n    background-color: $colorError60;\n    border-color: $colorError60;\n  }\n\n  .opinion-toggle--ok.is-active,\n  .opinion-toggle--ok:focus,\n  .opinion-toggle--ok:hover {\n    background-color: $colorFirgreen50;\n    border-color: $colorFirgreen50;\n  }\n\n\n  /* Process Nav */\n\n  .process-nav__content {\n    border-bottom: none;\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .process-nav__content {\n      border-bottom: 1px solid $baseBorderColor;\n    }\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .process-nav li {\n      padding: space('xsmall') space('small');\n    }\n  }\n\n\n  /* Statistics */\n\n  .statistics-cell {\n    margin: space('xxlarge') 0;\n  }\n\n  .statistics-cell .statistic__number {\n    @include font('regular');\n    color: $colorPrimary;\n  }\n\n  .statistics-cell .statistic__title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    color: $baseLeadColor;\n    margin-top: 0;\n    text-transform: none;\n  }\n\n  .statistics-cell .statistic__data:after {\n    border-left: 2px solid $baseBorderColor;\n  }\n\n\n  /* Richtext */\n\n  .ql-editor {\n    @include richtext-host;\n    @include richtext-slotted($withLists: false);\n\n    *:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .help-text {\n    color: $baseColor;\n  }\n\n  .help-text .ql-editor p {\n    @include fontCurve('caption');\n  }\n\n\n  /* Accountability */\n\n  .accountability .categories .categories--header span,\n  .accountability .categories .progress-figure,\n  .accountability .categories .categories--group .category--title .progress-info .category--count {\n    color: $baseColor;\n  }\n\n  .accountability .categories .categories--header .icon--arrow-bottom {\n    fill: $baseColor;\n  }\n\n  .accountability .categories .categories--header {\n    border-color: $baseBorderColor;\n    margin-bottom: space('medium');\n    padding-bottom: space('medium');\n  }\n\n  .accountability .intro .progress-level p {\n    @include font('heavy');\n    @include spaceCurve('margin-bottom', 'small');\n    margin-top: 0;\n  }\n\n  .accountability .categories .progress-figure {\n    margin-top: 0;\n  }\n\n  .accountability .categories .categories--group .category--title .progress-info .category--count {\n    margin-top: space('xxxsmall');\n  }\n\n  .accountability .title-action {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n\n  /* Breadrumb */\n\n  .lines-breadcrumb a,\n  .muted-link {\n    @include font;\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &:hover,\n    &:focus {\n      color: $linkHoverColor;\n    }\n  }\n\n\n  /* Lead */\n\n  .lead .ql-editor p {\n    @include font('light');\n    @include fontCurve('h3');\n    @include spaceCurve('margin-bottom', 'big');\n    margin-top: space('xxlarge');\n  }\n\n\n  /* Message / Callout / Floating Helper */\n\n  .callout.secondary,\n  .callout.warning,\n  .callout.success,\n  .floating-helper__content {\n    @include spaceCurve('padding', 'regular');\n    padding: space('medium');\n    display: block;\n    box-shadow: $boxShadowMessage;\n    background-color: $colorWhite;\n    margin-bottom: space('xxxxlarge') !important;\n  }\n\n  .callout {\n    @include font('heavy');\n    border-left-width: 5px;\n\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .floating-helper__content {\n    border-top: none;\n    padding-right: calc(#{iconSize('medium')} + #{space('small')} + #{space('medium')});\n  }\n\n  .floating-helper__wrapper {\n    position: relative;\n  }\n\n  .floating-helper__content-close {\n    @include spaceCurve('top', 'regular');\n    @include spaceCurve('right', 'regular');\n    box-sizing: content-box;\n    position: absolute;\n    width: iconSize('medium');\n    height: iconSize('medium');\n    padding: var(--stzh-space-xsmall);\n    margin: calc(var(--stzh-space-xsmall) * -1);\n    background-color: transparent;\n    color: var(--stzh-base-lead-color);\n\n    .icon {\n      width: iconSize('xxsmall');\n      height: iconSize('xxsmall');\n    }\n  }\n\n  .floating-helper__icon-big {\n    width: iconSize('large');\n    height: iconSize('large');\n    background-color: $colorOldPrimary8;\n\n    .icon {\n      width: iconSize('xsmall');\n      height: iconSize('xsmall');\n    }\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .floating-helper__content-inner > * {\n      margin: 0;\n    }\n\n    .floating-helper__icon-big {\n      margin-right: space('small');\n    }\n  }\n\n  .floating-helper-block .mb-s {\n    margin: 0 !important;\n  }\n\n\n  /* Sidebar */\n\n  .extra,\n  .tech-info {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  .extra__date,\n  .extra__suport-number {\n    @include font('heavy');\n    @include fontCurve('h2');\n  }\n\n  .extra__month {\n    @include fontCurve('caption');\n  }\n\n  .extra__time,\n  .extra__suport-text {\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n\n  /* Filters */\n\n  .filters__help p:first-of-type {\n    @include fontCurve('p2');\n    margin-top: 0;\n  }\n\n  #participatory-space-filters legend {\n    margin-right: space('xsmall');\n  }\n\n\n  /* Mini Title */\n\n  .mini-title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    color: $baseColor;\n    margin-bottom: space('small');\n  }\n\n  .mini-title__strong--highlight {\n    @include font('title');\n    @include fontCurve('h4');\n  }\n\n\n  /* Tags */\n\n  .tags {\n    display: flex;\n    flex-wrap: wrap;\n\n    &:last-child {\n      margin-bottom: calc(#{space('xsmall')} * -1);\n    }\n  }\n\n  .tags li {\n    margin-right: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n\n  .tags li a {\n    @include fontSize('micro');\n    height: 32px;\n    line-height: 32px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: 16px;\n    padding: 0 space('medium');\n    color: $colorPrimary;\n    appearance: none;\n    border: 1px solid $colorOldGrey13;\n    background-color: $colorWhite;\n    transition: all $baseTransitionAnimationSpeed;\n    text-decoration-line: none;\n  }\n\n  /* Card */\n\n  .card {\n    color: $baseColor;\n  }\n\n  .card__top .badge-card__content,\n  .card__top .card__content {\n    @include fontCurve('caption');\n    padding: space('xsmall') space('large');\n    align-items: center;\n\n    span.muted {\n      font-size: inherit;\n    }\n  }\n\n  .card__top .card__content {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .card__top .card__content .card__link {\n    display: block;\n  }\n\n  .card > .card__content,\n  .card.definition-data,\n  .card .definition-data,\n  .badge-card__content,\n  .card__support,\n  .filters__section,\n  .filters__section--general,\n  .filters__section--general:first-of-type,\n  .filters__section:first-of-type {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .card-data__item,\n  .filters__section,\n  .filters__section--general,\n  .card__block ul,\n  .card__icondata ul,\n  .card__footer,\n  .card__top {\n    border-color: $baseBorderColor;\n  }\n\n  .card__link {\n    display: flex;\n    flex-direction: column;\n    text-decoration-line: none;\n    color: $baseColor;\n\n    &:hover {\n      text-decoration-line: none;\n    }\n\n    .text-small {\n      @include fontCurve('p2');\n    }\n  }\n\n  .card__header {\n    margin-bottom: space('small');\n  }\n\n  .card__text {\n    @include fontCurve('p1');\n\n    &:not(:last-child) {\n      margin-bottom: space('small');\n    }\n  }\n\n  .card .card__title,\n  .card--list__heading {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: $colorPrimary;\n    margin-top: 0;\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  .card:not(.card--secondary):hover .card__title {\n    color: $colorPrimaryHover;\n  }\n\n  .collapsible-list .card__text--paragraph {\n    color: $baseColor !important;\n  }\n\n  .card__block ul li:not(:first-child),\n  .card__icondata ul li:not(:first-child) {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .card-data__item {\n    @include fontCurve('caption');\n    color: $baseColor;\n\n    .heading1,\n    .heading2,\n    .heading3,\n    .heading4 {\n      margin-top: 0;\n    }\n\n    strong {\n      display: block;\n    }\n\n    br {\n      display: none;\n    }\n  }\n\n  .card-data__item.creation_date_status strong {\n    color: $baseColor;\n    color: inherit;\n  }\n\n  .card__status .card-data__item {\n    padding: space('xsmall');\n  }\n\n  .card--meta {\n    color: $baseColor;\n  }\n\n  .card__block ul li:not(:first-child) strong,\n  .card__icondata ul li:not(:first-child) strong {\n    font-size: inherit;\n    letter-spacing: inherit;\n  }\n\n  .add-message:not(.card--secondary),\n  .card:not(.card--secondary),\n  .chart-tooltip:not(.card--secondary),\n  .conference-registration:not(.card--secondary),\n  .conference-speaker .speaker-bio:not(.card--secondary) {\n    &:hover {\n      box-shadow: $boxShadowPopover;\n    }\n  }\n\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > p,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h1,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h2,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h3,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h4 {\n    @include font;\n    @include fontCurve('p1');\n    color: $baseColor;\n  }\n\n  // Progress bar\n\n  .progress__bar.progress__bar--vertical .progress__bar__subtitle,\n  .progress__bar .progress__bar__title {\n    @include font;\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .card__support__number,\n  .progress__bar.progress__bar--vertical .progress__bar__subtitle .progress__bar__number,\n  .progress__bar .progress__bar__title .progress__bar__number,\n  .extra__suport-text,\n  .progress__bar.progress__bar--vertical .progress__bar__text {\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n  .progress__bar.progress__bar--vertical .progress__bar__number {\n    @include font('heavy');\n    @include fontCurve('h2');\n  }\n\n  // Card list\n\n  .card--list__item {\n    padding: 0;\n  }\n\n  .card--list__text {\n    padding: 0;\n    display: block;\n  }\n\n  .card--list__icon {\n    fill: $colorPrimary;\n  }\n\n  .card--list__item .card__link {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .card--list__text .card__link:hover .card--list__heading {\n    color: $colorPrimaryHover;\n  }\n\n  .card--list__text .card__link .text-small {\n    color: $baseColor;\n  }\n\n  .card--list__data {\n    background-color: $colorOldGrey5;\n  }\n\n  .card--list__data__number {\n    @include font('heavy');\n    @include fontCurve('h3');\n    color: $colorOldGrey70;\n  }\n\n  // Side cards\n\n  .card.extra,\n  .view-side .card:not(.card--secondary),\n  .comment-thread:not(.card--secondary) {\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  // Definition Card\n\n  .definition__title {\n    color: $colorOldGrey70;\n  }\n\n  .definition-data {\n    color: $colorOldGrey55;\n  }\n\n  .definition-data__item {\n    @include fontCurve('p2');\n    padding: 0;\n    padding-bottom: space('small');\n    margin-bottom: space('small');\n    border-bottom: 1px solid $baseBorderColor;\n\n    &:last-child {\n      border-bottom: none;\n      margin-bottom: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  .definition-data__title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin-bottom: 0;\n  }\n\n  .section.columns.medium-5.mediumlarge-4.large-3 > .card.extra.definition-data {\n    background-color: $colorOldGrey5;\n  }\n\n\n  /* Blog */\n\n  .author__name {\n    @include font('regular');\n    @include fontCurve('caption');\n    color: $colorOldGrey55 !important;\n  }\n\n  .author-data {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .author-data__extra {\n    @include font('regular');\n    @include fontCurve('caption');\n\n    &::before {\n      border-color: $baseBorderColor;\n    }\n  }\n\n  .author-data__extra a {\n    white-space: nowrap;\n    text-decoration-line: none;\n  }\n\n  .author-data__extra > a,\n  .author-data__extra > button\n  .author-data__extra > span {\n    margin-right: space('medium');\n  }\n\n\n  /* Budget */\n\n  .budget-summary {\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .budget-progress {\n    min-height: $formInputHeight;\n  }\n\n  .budget-list__title {\n    margin-top: space('xsmall');\n    margin-bottom: space('medium');\n  }\n\n  .budget-list__text:not(:last-child) {\n    margin-bottom: 0;\n  }\n\n  .budget-list__data__number {\n    @include font('heavy');\n    @include fontCurve('h4');\n  }\n\n  /* Survey */\n\n  .answer-questionnaire .questionnaire-question {\n    @include font('heavy');\n    @include fontCurve('p1');\n    margin-bottom: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-skin-portal-mitwirken\",\n  styleUrl: \"stzh-skin-portal-mitwirken.scss\"\n})\nexport class StzhSkinPortalMitwirken {\n  componentDidLoad() {\n    // copy this string from console and put it in the Decidim CSS textbox to adjust theme\n    console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n  }\n\n  render() {\n    return (\n      <Host>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-skin-portal-mitwirken.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,09mPAA09mP,CAAC;AAC9/mP,sCAAe,0BAA0B;;MCY5B,uBAAuB;;;;IAClC,gBAAgB;;QAEd,OAAO,CAAC,GAAG,CAAE,IAAI,CAAC,WAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sDACE,EACP;KACH;;;;;;","names":[],"sources":["src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.scss?tag=stzh-skin-portal-mitwirken","src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.tsx"],"sourcesContent":["@import \"../../global/css/stzh-components.css\";\n\n:root {\n  --stzh-color-primary: var(--stzh-color-deepcerulean);\n  --stzh-color-primary-hover: var(--stzh-color-regalblue);\n\n  --stzh-color-primary48: rgba(5, 127, 172, 0.48);\n  --stzh-color-primary32: rgba(5, 127, 172, 0.32);\n  --stzh-color-primary16: rgba(5, 127, 172, 0.16);\n  --stzh-color-primary8: rgba(5, 127, 172, 0.08);\n\n  --stzh-font-family-heavy: var(--stzh-font-family-bold);\n  --stzh-font-family-title: var(--stzh-font-family-light);\n\n  --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);\n}\n\n$mobileBreakpoint: 40em;\n$processHeaderMaxMobileBreakpoint: 599px;\n$processHeaderMaxDesktopBreakpoint: 1023px;\n\nmain,\n.reveal-overlay,\n.mod_header {\n  --primary: var(--stzh-color-primary);\n  --secondary: var(--stzh-color-primary);\n  --success: var(--stzh-color-old-truegreen);\n  --warning: var(--stzh-color-old-warning);\n  --alert: var(--stzh-color-error60);\n  --highlight: var(--stzh-color-coral);\n  --highlight_alternative: var(--stzh-color-coral);\n}\n\n// For main and modals\nmain,\n.reveal-overlay {\n  a.muted,\n  .inline-filters button.muted[data-toggle] {\n    color: $colorWhite;\n    background-color: $colorOldGrey13;\n    border-color: $colorOldGrey13;\n\n    &:hover,\n    &:focus {\n      color: $colorWhite;\n      background-color: $colorOldGrey13;\n      border-color: $colorOldGrey13;\n    }\n  }\n}\n\n// Only modals\n.reveal-overlay {\n  background-color: rgba(5, 127, 172, 0.8);\n\n  /* Dialog */\n\n  .reveal__title {\n    margin-top: 0;\n  }\n\n  .reveal {\n    box-shadow: $boxShadowOverlay;\n  }\n\n  .close-button {\n    color: $baseLeadColor;\n  }\n}\n\n// Only header\n.mod_header {\n  .mod_header__logobar-logo img {\n    background: url(https://www.stadt-zuerich.ch/content/dam/stzh/corpdesign/wortbildmarken/logo_stzh_vbz_pos_2-1.svg) no-repeat;\n    width: 0;\n    padding-left: 208px;\n  }\n}\n\n// Main Content Modules\nmain {\n  accent-color: $colorPrimary;\n\n  /* Resets */\n  @include richtext-host;\n  @include richtext-slotted($withLists: false);\n\n  &, label, tfoot, thead {\n    color: $baseColor;\n  }\n\n  svg {\n    overflow: visible;\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n  }\n\n  .field label {\n    @include font('heavy');\n    display: block;\n  }\n\n  input[type=checkbox],\n  input[type=radio] {\n    width: 24px;\n    height: 24px;\n  }\n\n  label > [type=checkbox],\n  label > [type=radio] {\n    margin-right: space('small');\n  }\n\n  .filters__section--general label,\n  .filters__section label {\n    @include fontSize('milli');\n    display: flex;\n    line-height: 24px;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $baseColor;\n    margin-bottom: space('small');\n  }\n\n  .filters__has-subfilters {\n    align-items: center;\n\n    [data-toggle] {\n      margin-bottom: space('small');\n    }\n  }\n\n  .form-input-extra-before,\n  .form-error {\n    @include font;\n    @include fontCurve('caption');\n  }\n\n  .form-error,\n  .is-invalid-label {\n    color: $colorError60;\n  }\n\n  [type=color],\n  [type=date],\n  [type=datetime-local],\n  [type=datetime],\n  [type=email],\n  [type=month],\n  [type=number],\n  [type=password],\n  [type=search],\n  [type=tel],\n  [type=text],\n  [type=time],\n  [type=url],\n  [type=week],\n  textarea,\n  .inline-filters button[data-toggle],\n  select,\n  .data-picker .picker-prompt a,\n  .data-picker.picker-single .picker-values div a {\n    @include font;\n\t  @include fontSize('milli');\n    border: 1px solid $formBorderColor;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: $formInputBorderRadius;\n    padding: space('xsmall') space('medium');\n    width: 100%;\n    height: $formInputHeight;\n    color: $colorPrimary;\n    appearance: none;\n    margin-bottom: space('medium');\n    text-decoration-line: none;\n\n    @include placeholder {\n      color: $formInputPlaceholderColor;\n    }\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      border-color: $colorPrimaryHover;\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n  }\n\n  .data-picker .picker-prompt a,\n  .data-picker.picker-single .picker-values div a {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    &::after {\n      float: none;\n      margin-top: 0;\n    }\n  }\n\n  .inline-filters button[data-toggle],\n  select {\n    padding-right: space('xxlarge');\n  }\n\n  textarea {\n    min-height: $formInputHeight;\n    resize: vertical;\n\n    &[rows] {\n      height: auto;\n    }\n  }\n\n  .input-group .input-group-field {\n    margin-bottom: 0;\n  }\n\n  .section > p,\n  .floating-helper__content p {\n    margin-top: 0;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .add-message,\n  .card,\n  .chart-tooltip,\n  .comment-thread,\n  .conference-registration,\n  .conference-speaker .speaker-bio {\n    margin-bottom: space('xxlarge');\n    border-color: $baseBorderColor;\n    background-color: $colorWhite;\n  }\n\n  .ql-editor ol,\n  .ql-editor ul {\n    padding-left: 0;\n  }\n\n  .badge-card__content,\n  .card__content,\n  .card__text--paragraph,\n  .floating-helper__content-inner,\n  .lead,\n  .process-header + .wrapper .section,\n  .timeline__content {\n    ul li:not(.card-data__item) {\n      padding-left: space('large');\n\n      &::before {\n        content: \"–\";\n        margin-left: 0;\n        margin-right: 0;\n        text-align: left;\n        width: auto;\n      }\n    }\n  }\n\n  .badge-card__content,\n  .card__content,\n  .card__text--paragraph,\n  .floating-helper__content-inner,\n  .lead,\n  .process-header + .wrapper .section,\n  .timeline__content {\n    ul.tags li:not(.card-data__item) {\n      padding-left: 0;\n\n      &::before {\n        content: none;\n      }\n    }\n  }\n\n  .m-bottom {\n    margin-bottom: space('medium');\n  }\n\n  .mb-sm {\n    margin-bottom: space('xxlarge');\n  }\n\n  p {\n    color: $baseColor;\n  }\n\n  tfoot td,\n  tfoot th,\n  thead td,\n  thead th {\n    @include font('heavy');\n  }\n\n  tfoot td,\n  tfoot th,\n  thead td,\n  thead th,\n  tbody td,\n  tbody th {\n    padding: space('xmall');\n  }\n\n  table,\n  td,\n  tr,\n  .questionnaire-question-matrix table,\n  .questionnaire-question-matrix td,\n  .questionnaire-question-matrix tr,\n  .questionnaire-question-matrix tr:nth-child(2n) {\n    border-color: $baseBorderColor;\n  }\n\n\n  /* Process Header */\n\n  .process-header .process-header__inner {\n    background-color: $colorPrimary;\n  }\n\n  .card--full .process-header .process-header__container .process-header__info .card__title,\n  .process-header .process-header__container .process-header__info .card--full .card__title,\n  .process-header .process-header__container .process-header__info .heading2 {\n    @include font('title');\n    @include fontCurve('hero', 'heading');\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n    border-bottom: none;\n    padding-bottom: 0;\n  }\n\n  .process-header .process-header__container {\n    padding: 0 space('xxxxlarge');\n\n    @media screen and (max-width: #{$processHeaderMaxDesktopBreakpoint}) {\n      padding: space('xxxxlarge');\n      padding-bottom: space('big');\n    }\n\n    @media screen and (max-width: #{$processHeaderMaxMobileBreakpoint}) {\n      padding: space('xxlarge') $containerMargin space('xxxlarge');\n    }\n  }\n\n  .process-header__info {\n    padding: 0;\n  }\n\n  .process-header .process-header__container .process-header__info .heading-small {\n    @include fontCurve('h3', 'heading');\n    color: $baseInvertColor;\n    margin-top: 0;\n  }\n\n  .process-header__hashtag a {\n    color: $baseInvertColor;\n    text-decoration-line: none;\n\n    &:hover {\n      color: $baseInvertColor;\n    }\n\n    .external-link-indicator {\n      background: $baseInvertColor;\n      padding: space('xxsmall');\n      box-sizing: content-box;\n      border-radius: $buttonBorderRadius;\n      margin: 0;\n      margin-bottom: -4px;\n      margin-left: 4px;\n    }\n  }\n\n  .phase-subtitle--initiatives,\n  .phase-title,\n  .phase-title--initiatives {\n    @include font('title');\n    @include fontCurve('h4');\n    color: $baseLeadColor;\n  }\n\n  .process-header__progress {\n    display: flex;\n    align-items: center;\n  }\n\n  .process-header__phase {\n    padding: space('medium');\n    margin-top: space('medium');\n    margin-bottom: 0;\n  }\n\n  .phase-date {\n    @include font('regular');\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n  .phase-current {\n    @include fontCurve('caption');\n    margin-left: space('xxsmall');\n    color: $baseColor;\n  }\n\n  .process-header__progress {\n    margin-bottom: space('xsmall');\n  }\n\n  .process-header__phase .button,\n  .process-header__phase .meeting-polls__button,\n  .process-phase .button,\n  .process-phase .meeting-polls__button {\n    margin-top: space('xsmall');\n  }\n\n  /* Links */\n\n  a,\n  .link {\n    text-decoration-line: underline;\n    transition: $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n\n  /* Buttons */\n\n  .button {\n    @include fontSize('milli');\n    display: inline-flex;\n    align-items: center;\n    height: auto;\n    min-height: $formInputHeight;\n    line-height: $formInputHeight - 2px;\n    line-height: inherit;\n    margin: 0;\n    text-decoration-line: none;\n    appearance: none;\n    border: 1px solid $colorPrimary;\n    padding: space('xsmall') space('xlarge');\n    transition: all $baseTransitionAnimationSpeed;\n\n    &.small {\n      @include fontSize('micro');\n      min-height: $formInputHeightSmall;\n      line-height: $formInputHeightSmall - 2px;\n    }\n\n    &.tiny {\n      @include fontSize('micro');\n      min-height: 32px;\n    }\n\n    &.process-nav__more i {\n      background-color: currentColor;\n      margin-bottom: 0;\n    }\n\n    &.process-nav__more i:first-child {\n      margin-left: space('xsmall');\n    }\n  }\n\n  .button--icon {\n    .icon-wrap {\n      display: flex;\n      align-items: center;\n    }\n\n    .icon-wrap .icon {\n      margin-right: space('xxsmall');\n    }\n  }\n\n  .button--icon.meeting-polls__button .icon,\n  .button--icon.small .icon {\n    width: iconSize('xxsmall');\n    height: iconSize('xxsmall');\n  }\n\n  .extra .button.follow-button {\n    margin-top: 0;\n  }\n\n  .button-group.meeting-polls__button .button,\n  .button-group.meeting-polls__button .meeting-polls__button,\n  .button-group.small .button,\n  .button-group.small .meeting-polls__button,\n  .button-group.tiny .button,\n  .button-group.tiny .meeting-polls__button {\n    @include fontSize('micro');\n  }\n\n  .button.primary,\n  .button.primary.disabled,\n  .button.primary.disabled:focus,\n  .button.primary.disabled:hover,\n  .button.primary[disabled],\n  .button.primary[disabled]:focus,\n  .button.primary[disabled]:hover,\n  .primary.meeting-polls__button {\n    background-color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      background-color: $colorPrimaryHover;\n    }\n  }\n\n  .button.budget-vote-button {\n    @include font;\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    margin-bottom: space('medium');\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      background-color: $colorWhite;\n    }\n  }\n\n  .button--vote-button {\n    margin-bottom: space('large');\n  }\n\n  .view-side > .button {\n    margin-bottom: space('medium');\n  }\n\n  .button.clear,\n  .button.clear.disabled,\n  .button.clear.disabled:focus,\n  .button.clear.disabled:hover,\n  .button.clear[disabled],\n  .button.clear[disabled]:focus,\n  .button.clear[disabled]:hover,\n  .clear.meeting-polls__button {\n    color: $colorError60;\n  }\n\n\n  /* Wrapper / Layout */\n\n  .wrapper {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n\n    padding-left: $containerMargin;\n    padding-right: $containerMargin;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    .wrapper--inner {\n      background-color: $colorOldGrey5;\n    }\n\n    // .row.column {\n    //   padding-left: 0;\n    //   padding-right: 0;\n    // }\n\n    .row:not(.column) .floating-helper-container {\n      padding-right: 0.625rem;\n      padding-left: 0.625rem;\n    }\n\n    @media screen and (min-width: #{$mobileBreakpoint}) {\n      .row:not(.column) .floating-helper-container {\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n      }\n    }\n  }\n\n\n  /* Headings */\n\n  .heading1, h1,\n  .heading2, h2,\n  .heading3, h3,\n  .heading4, h4 {\n    color: $colorPrimary;\n  }\n\n  .heading1, h1 {\n    @include font('title');\n    @include fontCurve('h1', 'heading');\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n    @include spaceCurve('padding-bottom', 'tiny');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .section-heading,\n  .heading2, h2 {\n    @include font('title');\n    @include fontCurve('h2', 'heading');\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n    @include spaceCurve('padding-bottom', 'tiny');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .heading3, h3 {\n    @include font('title');\n    @include fontCurve('h3', 'heading');\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  .heading4, h4 {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  .heading4, h4,\n  .timeline__item--current .timeline__date {\n    color: $colorPrimary;\n  }\n\n  #most-commented .section-heading {\n    margin-top: 0;\n  }\n\n  #most-commented a {\n    text-decoration-line: none;\n  }\n\n\n  /* Section */\n\n  .section {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  .section-heading {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .section-heading .text-sm,\n  .section-heading .text-small {\n    @include fontCurve('h3', 'heading');\n  }\n\n\n  /* Dropdown */\n\n  .order-by__dropdown,\n  .results-per-page__dropdown {\n    display: flex;\n    align-items: center;\n  }\n\n  .order-by__text,\n  .results-per-page__text {\n    margin-right: space('xsmall');\n  }\n\n  .is-dropdown-submenu {\n    box-shadow: $boxShadowPopover;\n    border: none;\n    border-radius: var(--stzh-popover-border-radius);\n    margin-top: var(--stzh-space-xsmall);\n  }\n\n  .dropdown.menu > li.is-dropdown-submenu-parent > a {\n    @include font;\n    @include fontSize('milli');\n    display: flex;\n    align-items: center;\n    background: $colorWhite;\n    padding: space('xsmall') space('medium');\n    padding-right: calc(#{space('xlarge')} + #{space('medium')} + #{space('xsmall')});\n    min-height: $formInputHeight;\n    border: 1px solid $formBorderColor;\n    margin: 0;\n  }\n\n  .dropdown.menu > li.is-dropdown-submenu-parent > a:after {\n    border-color: $colorPrimary transparent transparent;\n    right: space('medium');\n  }\n\n  .dropdown .is-dropdown-submenu a,\n  .comment__header__context-menu__content-item {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n    justify-content: stretch;\n    appearance: none;\n    text-decoration-line: none;\n    border: none;\n    padding: space('xsmall') space('medium');\n    padding-left: space('large');\n    color: $colorOldGrey70;\n    background-color: transparent;\n    height: $menuItemHeight;\n    line-height: $menuItemHeight;\n    transition: all $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    &:hover {\n      color: $colorOldGrey70;\n      background-color: $colorOldGrey5;\n      text-decoration-line: none;\n    }\n  }\n\n  .comment__header__context-menu__content-item {\n    grid-gap: space('small');\n    gap: space('small');\n  }\n\n\n  /* Comments */\n\n  .comments {\n    padding-top: 0;\n    margin-top: space('medium');\n    margin-bottom: space('medium');\n  }\n\n  .comments .section-heading {\n    margin-top: 0;\n  }\n\n  .comment__header,\n  .comment__footer,\n  .add-comment {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .add-comment {\n    background-color: transparent;\n    padding: 0;\n  }\n\n  .add-comment .remaining-character-count {\n    color: $baseColor;\n    padding: space('xsmall') space('small');\n  }\n\n  .comment-threads {\n    margin-bottom: space('xxxlarge');\n  }\n\n  .comment__content {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n\n    p {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  .comment__footer {\n    @include fontCurve('p2');\n  }\n\n  .comment__votes {\n    margin-top: 0;\n  }\n\n  .comment__header__context-menu__content {\n    box-shadow: $boxShadowPopover;\n  }\n\n  .opinion-toggle {\n    margin: space('xlarge') 0;\n  }\n\n  .button:hover,\n  .meeting-polls__button:hover,\n  .opinion-toggle--meh.is-active,\n  .opinion-toggle--meh:focus,\n  .opinion-toggle--meh:hover {\n    background-color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n  }\n\n  .opinion-toggle--ko.is-active,\n  .opinion-toggle--ko:focus,\n  .opinion-toggle--ko:hover {\n    background-color: $colorError60;\n    border-color: $colorError60;\n  }\n\n  .opinion-toggle--ok.is-active,\n  .opinion-toggle--ok:focus,\n  .opinion-toggle--ok:hover {\n    background-color: $colorFirgreen50;\n    border-color: $colorFirgreen50;\n  }\n\n\n  /* Process Nav */\n\n  .process-nav__content {\n    border-bottom: none;\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .process-nav__content {\n      border-bottom: 1px solid $baseBorderColor;\n    }\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .process-nav li {\n      padding: space('xsmall') space('small');\n    }\n  }\n\n\n  /* Statistics */\n\n  .statistics-cell {\n    margin: space('xxlarge') 0;\n  }\n\n  .statistics-cell .statistic__number {\n    @include font('regular');\n    color: $colorPrimary;\n  }\n\n  .statistics-cell .statistic__title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    color: $baseLeadColor;\n    margin-top: 0;\n    text-transform: none;\n  }\n\n  .statistics-cell .statistic__data:after {\n    border-left: 2px solid $baseBorderColor;\n  }\n\n\n  /* Richtext */\n\n  .ql-editor {\n    @include richtext-host;\n    @include richtext-slotted($withLists: false);\n\n    *:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .help-text {\n    color: $baseColor;\n  }\n\n  .help-text .ql-editor p {\n    @include fontCurve('caption');\n  }\n\n\n  /* Accountability */\n\n  .accountability .categories .categories--header span,\n  .accountability .categories .progress-figure,\n  .accountability .categories .categories--group .category--title .progress-info .category--count {\n    color: $baseColor;\n  }\n\n  .accountability .categories .categories--header .icon--arrow-bottom {\n    fill: $baseColor;\n  }\n\n  .accountability .categories .categories--header {\n    border-color: $baseBorderColor;\n    margin-bottom: space('medium');\n    padding-bottom: space('medium');\n  }\n\n  .accountability .intro .progress-level p {\n    @include font('heavy');\n    @include spaceCurve('margin-bottom', 'small');\n    margin-top: 0;\n  }\n\n  .accountability .categories .progress-figure {\n    margin-top: 0;\n  }\n\n  .accountability .categories .categories--group .category--title .progress-info .category--count {\n    margin-top: space('xxxsmall');\n  }\n\n  .accountability .title-action {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n\n  /* Breadrumb */\n\n  .lines-breadcrumb a,\n  .muted-link {\n    @include font;\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &:hover,\n    &:focus {\n      color: $linkHoverColor;\n    }\n  }\n\n\n  /* Lead */\n\n  .lead .ql-editor p {\n    @include font('light');\n    @include fontCurve('h3');\n    @include spaceCurve('margin-bottom', 'big');\n    margin-top: space('xxlarge');\n  }\n\n\n  /* Message / Callout / Floating Helper */\n\n  .callout.secondary,\n  .callout.warning,\n  .callout.success,\n  .floating-helper__content {\n    @include spaceCurve('padding', 'regular');\n    padding: space('medium');\n    display: block;\n    box-shadow: $boxShadowMessage;\n    background-color: $colorWhite;\n    margin-bottom: space('xxxxlarge') !important;\n  }\n\n  .callout {\n    @include font('heavy');\n    border-left-width: 5px;\n\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .floating-helper__content {\n    border-top: none;\n    padding-right: calc(#{iconSize('medium')} + #{space('small')} + #{space('medium')});\n  }\n\n  .floating-helper__wrapper {\n    position: relative;\n  }\n\n  .floating-helper__content-close {\n    @include spaceCurve('top', 'regular');\n    @include spaceCurve('right', 'regular');\n    box-sizing: content-box;\n    position: absolute;\n    width: iconSize('medium');\n    height: iconSize('medium');\n    padding: var(--stzh-space-xsmall);\n    margin: calc(var(--stzh-space-xsmall) * -1);\n    background-color: transparent;\n    color: var(--stzh-base-lead-color);\n\n    .icon {\n      width: iconSize('xxsmall');\n      height: iconSize('xxsmall');\n    }\n  }\n\n  .floating-helper__icon-big {\n    width: iconSize('large');\n    height: iconSize('large');\n    background-color: $colorOldPrimary8;\n\n    .icon {\n      width: iconSize('xsmall');\n      height: iconSize('xsmall');\n    }\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .floating-helper__content-inner > * {\n      margin: 0;\n    }\n\n    .floating-helper__icon-big {\n      margin-right: space('small');\n    }\n  }\n\n  .floating-helper-block .mb-s {\n    margin: 0 !important;\n  }\n\n\n  /* Sidebar */\n\n  .extra,\n  .tech-info {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  .extra__date,\n  .extra__suport-number {\n    @include font('heavy');\n    @include fontCurve('h2');\n  }\n\n  .extra__month {\n    @include fontCurve('caption');\n  }\n\n  .extra__time,\n  .extra__suport-text {\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n\n  /* Filters */\n\n  .filters__help p:first-of-type {\n    @include fontCurve('p2');\n    margin-top: 0;\n  }\n\n  #participatory-space-filters legend {\n    margin-right: space('xsmall');\n  }\n\n\n  /* Mini Title */\n\n  .mini-title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    color: $baseColor;\n    margin-bottom: space('small');\n  }\n\n  .mini-title__strong--highlight {\n    @include font('title');\n    @include fontCurve('h4');\n  }\n\n\n  /* Tags */\n\n  .tags {\n    display: flex;\n    flex-wrap: wrap;\n\n    &:last-child {\n      margin-bottom: calc(#{space('xsmall')} * -1);\n    }\n  }\n\n  .tags li {\n    margin-right: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n\n  .tags li a {\n    @include fontSize('micro');\n    height: 32px;\n    line-height: 32px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: 16px;\n    padding: 0 space('medium');\n    color: $colorPrimary;\n    appearance: none;\n    border: 1px solid $colorOldGrey13;\n    background-color: $colorWhite;\n    transition: all $baseTransitionAnimationSpeed;\n    text-decoration-line: none;\n  }\n\n  /* Card */\n\n  .card {\n    color: $baseColor;\n  }\n\n  .card__top .badge-card__content,\n  .card__top .card__content {\n    @include fontCurve('caption');\n    padding: space('xsmall') space('large');\n    align-items: center;\n\n    span.muted {\n      font-size: inherit;\n    }\n  }\n\n  .card__top .card__content {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .card__top .card__content .card__link {\n    display: block;\n  }\n\n  .card > .card__content,\n  .card.definition-data,\n  .card .definition-data,\n  .badge-card__content,\n  .card__support,\n  .filters__section,\n  .filters__section--general,\n  .filters__section--general:first-of-type,\n  .filters__section:first-of-type {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .card-data__item,\n  .filters__section,\n  .filters__section--general,\n  .card__block ul,\n  .card__icondata ul,\n  .card__footer,\n  .card__top {\n    border-color: $baseBorderColor;\n  }\n\n  .card__link {\n    display: flex;\n    flex-direction: column;\n    text-decoration-line: none;\n    color: $baseColor;\n\n    &:hover {\n      text-decoration-line: none;\n    }\n\n    .text-small {\n      @include fontCurve('p2');\n    }\n  }\n\n  .card__header {\n    margin-bottom: space('small');\n  }\n\n  .card__text {\n    @include fontCurve('p1');\n\n    &:not(:last-child) {\n      margin-bottom: space('small');\n    }\n  }\n\n  .card .card__title,\n  .card--list__heading {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: $colorPrimary;\n    margin-top: 0;\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  .card:not(.card--secondary):hover .card__title {\n    color: $colorPrimaryHover;\n  }\n\n  .collapsible-list .card__text--paragraph {\n    color: $baseColor !important;\n  }\n\n  .card__block ul li:not(:first-child),\n  .card__icondata ul li:not(:first-child) {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .card-data__item {\n    @include fontCurve('caption');\n    color: $baseColor;\n\n    .heading1,\n    .heading2,\n    .heading3,\n    .heading4 {\n      margin-top: 0;\n    }\n\n    strong {\n      display: block;\n    }\n\n    br {\n      display: none;\n    }\n  }\n\n  .card-data__item.creation_date_status strong {\n    color: $baseColor;\n    color: inherit;\n  }\n\n  .card__status .card-data__item {\n    padding: space('xsmall');\n  }\n\n  .card--meta {\n    color: $baseColor;\n  }\n\n  .card__block ul li:not(:first-child) strong,\n  .card__icondata ul li:not(:first-child) strong {\n    font-size: inherit;\n    letter-spacing: inherit;\n  }\n\n  .add-message:not(.card--secondary),\n  .card:not(.card--secondary),\n  .chart-tooltip:not(.card--secondary),\n  .conference-registration:not(.card--secondary),\n  .conference-speaker .speaker-bio:not(.card--secondary) {\n    &:hover {\n      box-shadow: $boxShadowPopover;\n    }\n  }\n\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > p,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h1,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h2,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h3,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h4 {\n    @include font;\n    @include fontCurve('p1');\n    color: $baseColor;\n  }\n\n  // Progress bar\n\n  .progress__bar.progress__bar--vertical .progress__bar__subtitle,\n  .progress__bar .progress__bar__title {\n    @include font;\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .card__support__number,\n  .progress__bar.progress__bar--vertical .progress__bar__subtitle .progress__bar__number,\n  .progress__bar .progress__bar__title .progress__bar__number,\n  .extra__suport-text,\n  .progress__bar.progress__bar--vertical .progress__bar__text {\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n  .progress__bar.progress__bar--vertical .progress__bar__number {\n    @include font('heavy');\n    @include fontCurve('h2');\n  }\n\n  // Card list\n\n  .card--list__item {\n    padding: 0;\n  }\n\n  .card--list__text {\n    padding: 0;\n    display: block;\n  }\n\n  .card--list__icon {\n    fill: $colorPrimary;\n  }\n\n  .card--list__item .card__link {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .card--list__text .card__link:hover .card--list__heading {\n    color: $colorPrimaryHover;\n  }\n\n  .card--list__text .card__link .text-small {\n    color: $baseColor;\n  }\n\n  .card--list__data {\n    background-color: $colorOldGrey5;\n  }\n\n  .card--list__data__number {\n    @include font('heavy');\n    @include fontCurve('h3');\n    color: $colorOldGrey70;\n  }\n\n  // Side cards\n\n  .card.extra,\n  .view-side .card:not(.card--secondary),\n  .comment-thread:not(.card--secondary) {\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  // Definition Card\n\n  .definition__title {\n    color: $colorOldGrey70;\n  }\n\n  .definition-data {\n    color: $colorOldGrey55;\n  }\n\n  .definition-data__item {\n    @include fontCurve('p2');\n    padding: 0;\n    padding-bottom: space('small');\n    margin-bottom: space('small');\n    border-bottom: 1px solid $baseBorderColor;\n\n    &:last-child {\n      border-bottom: none;\n      margin-bottom: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  .definition-data__title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin-bottom: 0;\n  }\n\n  .section.columns.medium-5.mediumlarge-4.large-3 > .card.extra.definition-data {\n    background-color: $colorOldGrey5;\n  }\n\n\n  /* Blog */\n\n  .author__name {\n    @include font('regular');\n    @include fontCurve('caption');\n    color: $colorOldGrey55 !important;\n  }\n\n  .author-data {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .author-data__extra {\n    @include font('regular');\n    @include fontCurve('caption');\n\n    &::before {\n      border-color: $baseBorderColor;\n    }\n  }\n\n  .author-data__extra a {\n    white-space: nowrap;\n    text-decoration-line: none;\n  }\n\n  .author-data__extra > a,\n  .author-data__extra > button\n  .author-data__extra > span {\n    margin-right: space('medium');\n  }\n\n\n  /* Budget */\n\n  .budget-summary {\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .budget-progress {\n    min-height: $formInputHeight;\n  }\n\n  .budget-list__title {\n    margin-top: space('xsmall');\n    margin-bottom: space('medium');\n  }\n\n  .budget-list__text:not(:last-child) {\n    margin-bottom: 0;\n  }\n\n  .budget-list__data__number {\n    @include font('heavy');\n    @include fontCurve('h4');\n  }\n\n  /* Survey */\n\n  .answer-questionnaire .questionnaire-question {\n    @include font('heavy');\n    @include fontCurve('p1');\n    margin-bottom: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-skin-portal-mitwirken\",\n  styleUrl: \"stzh-skin-portal-mitwirken.scss\"\n})\nexport class StzhSkinPortalMitwirken {\n  componentDidLoad() {\n    // copy this string from console and put it in the Decidim CSS textbox to adjust theme\n    console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n  }\n\n  render() {\n    return (\n      <Host>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-skin-storybook-preview.entry.js

@@ -12,7 +12,7 @@ const StzhSkinStorybookPreview = class {
         console.log(this.constructor.style.replace('@charset "UTF-8";', ''));
     }
     render() {
-        return (h(Host, { key: '049679bb956ce0f7868286efc06e56792d8b7d1c' }));
+        return (h(Host, { key: '20b83b3099326ad2c8b1b43b65ed3561492da2c6' }));
     }
 };
 StzhSkinStorybookPreview.style = StzhSkinStorybookPreviewStyle0;

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

@@ -87,7 +87,7 @@ const StzhSkiplink = class {
         }
     }
     render() {
-        return (h(Host, { key: '0d51b24110459507db7d94b099eed85c65481521', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, h("a", { key: '45fbd420bb0ea38fd51a892e614853d73b309461', ref: (el) => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle, onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '8dd42e47ef1180641946e4903c7d5bf451acd3cf', ref: (el) => (this.text = el) }, this.label ? this.label : h("slot", null)))));
+        return (h(Host, { key: 'c3940a5145c3d6318843dc09cfbe2055a9b3deda', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, h("a", { key: 'eff1a3b462bcd1dc01740d779dd629e9b6908a23', ref: (el) => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle, onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '679afbbe8aa2d52bdb6c90d6e2fcb59aa7d2fc89', ref: (el) => (this.text = el) }, this.label ? this.label : h("slot", null)))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-socialmediastream-item.entry.js

@@ -77,7 +77,7 @@ const StzhSocialmediastreamItem = class {
         const classes = {
             "stzh-socialmediastream-item": true,
         };
-        return (h(Host, { key: 'd0d38e82f0566ad1e5d7b1047337be0afc09ebf6' }, h("a", { key: 'bb3791833ad0e743227a9b6d80e478429e2c2198', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (h("div", { key: 'dfbe111151965ee75e29fbaf2f421635ad8af625', class: "stzh-socialmediastream-item__image" }, h("stzh-ratio", { key: '440d44f48a10091b3a03d08b7c36f83dd0fa41e2', ratio: "1:1" }), h("div", { key: 'b76f8dce5ade82b505d7785aa8f3e2ef148d7f58', class: "stzh-socialmediastream-item__image-inner-wrapper" }, h("img", { key: '40b90b2e5f9eb29bb2945b2ce6c51459a9c94323', src: this._item.image, alt: this._item.account.title })))), h("div", { key: '4f7288d877bfa62853a4622f54bbe73dd7480773', class: "stzh-socialmediastream-item__content" }, h("div", { key: '387eef5ffe7e6f730d56af3dc37ec5dd71343ea8', class: "stzh-socialmediastream-item__content-head" }, h("stzh-text", { key: '1e6cf71e83e3d11531e4394359a1ac7eb96c3570', size: "nano", class: "stzh-socialmediastream-item__content-title" }, h("strong", { key: '595260b9ab1b2d5fd3ffa5e4438a4707af791066' }, this._item.account.title), h("br", { key: '25270462d3b3fd4753d739d14ffc8fd9da3cf162' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), h("stzh-icon", { key: 'e8c9d3fa0469977581205be5cfc9df0a45fa3fec', name: this.getIconName(this._item) })), h("div", { key: 'ac7fe169099d966c7e38887a0cc5b63bdba9c33c', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), h("div", { key: '40e91fb81d0b50cd2475e6f6cf6c9d987aeba809', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
+        return (h(Host, { key: 'e7f3fb9d2144bef2d5286859074f362f9fd69f80' }, h("a", { key: 'b25d73abbf4980e0d128a04512b0bf69f533b684', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (h("div", { key: '82d1444277d3e2400a46b9a04a7515f68b5d0d29', class: "stzh-socialmediastream-item__image" }, h("stzh-ratio", { key: 'ef5f6241799c23e04401536d8f6cf205cc4ff464', ratio: "1:1" }), h("div", { key: '5ded83cee583fd0c68eaad813a6b9133acd58a79', class: "stzh-socialmediastream-item__image-inner-wrapper" }, h("img", { key: 'c825fc5d0c2fc32ae8310e09b115a5d66c38f52b', src: this._item.image, alt: this._item.account.title })))), h("div", { key: '325bbbec6db81cd162c202e1db3d081a0a9bc90a', class: "stzh-socialmediastream-item__content" }, h("div", { key: 'bb430c5d0d6da2b71ed5683c4ec95dff3a9afddb', class: "stzh-socialmediastream-item__content-head" }, h("stzh-text", { key: '7aa2374ae540a323a58a3e2981c77ea9f4d1953b', size: "nano", class: "stzh-socialmediastream-item__content-title" }, h("strong", { key: 'd6f8340db17ae3b8c5bb5eb694db94aac767b791' }, this._item.account.title), h("br", { key: 'b6f7af663bcda2f17bec69e016c0ef8568c19e88' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), h("stzh-icon", { key: 'c3aad8d18ca03df7ce5944d5f70e54826415cfbf', name: this.getIconName(this._item) })), h("div", { key: '326a2cc358d734650d8f0b868b4cceff2f6de79a', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), h("div", { key: '4b15cf37d4255fd2a5b2a0b65ac29b8376936f24', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
             this._item.actions.map(action => (h("a", { href: action.url, title: action.title, class: "stzh-socialmediastream-item__action", target: "_blank" }, h("stzh-icon", { name: this.getActionIconName(action.variant) }), action.count))))))));
     }
     get element() { return getElement(this); }

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

@@ -316,7 +316,7 @@ const StzhSocialmediastream = class {
             "stzh-socialmediastream": true,
             "stzh-socialmediastream--has-heading": headingSlotUsed || !!this.heading,
         };
-        return (h(Host, { key: 'cbe805f3b1d20284878332954e72c86051d9b8c7' }, h("div", { key: '2a6913220174ed90ad4ac0f418fa08a9d06a533d', class: classes }, h("div", { key: '70d79a351ba25f880671e9fa3f64dfe4f84d59c7', class: "stzh-socialmediastream__heading" }, !!this.heading ? (h("stzh-heading", { level: this.headingLevel }, this.heading)) : (h("slot", { name: "heading" }))), h("div", { key: 'f5be98ccd30ee1a18376b478c8d857685eef10fa', class: "stzh-socialmediastream__items" }, this._items &&
+        return (h(Host, { key: '428fc7da1ddc6ac970287f802648de5adf2d1948' }, h("div", { key: '2e7bf07f0c095a0f9a60e3c72375f6bbd1a9d9e9', class: classes }, h("div", { key: 'ef11cfede1b015d49707360c32b1aa869f8fcf32', class: "stzh-socialmediastream__heading" }, !!this.heading ? (h("stzh-heading", { level: this.headingLevel }, this.heading)) : (h("slot", { name: "heading" }))), h("div", { key: 'bd460662448b95faabf5ba4cb6e49cf0724a3f8e', class: "stzh-socialmediastream__items" }, this._items &&
             this._items.length &&
             this._items.map(item => (h("stzh-socialmediastream-item", { class: "stzh-socialmediastream__item", item: item })))))));
     }

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

@@ -18,12 +18,12 @@ const StzhSpace = class {
         this.border = "none";
     }
     render() {
-        return (h(Host, { key: '13a3552622b44a79977cd535d5a6cc8f1290d7c4' }, h("div", { key: '9cf6cd96f698035b64932a17d94838e36f063be0', class: {
+        return (h(Host, { key: 'b313899448238cdd47e286781dcbad79fd1e81a6' }, h("div", { key: 'a6336b880038c3a9904dd38b13049793a5c87c0f', class: {
                 "stzh-space": true,
                 'stzh-space--is-around': this.around,
                 [`stzh-space--justify-${this.justify}`]: !!this.justify,
                 [`stzh-space--items-${this.items}`]: !!this.items
-            } }, h("slot", { key: '9727050938f74532064f5f5525e24488244ae95c' }))));
+            } }, h("slot", { key: 'e6e0cba2c9a0e89fd7aab9db5d67e45f724828d6' }))));
     }
 };
 StzhSpace.style = StzhSpaceStyle0;

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

@@ -16,10 +16,10 @@ const StzhStatus = class {
             "stzh-status": true,
             [`stzh-status--type-${this.type}`]: !!this.type
         };
-        return (h(Host, { key: '50b8ebcafac0353478ad710601c6b245a822bc02' }, h("div", { key: '536514ec1f4377b2876af7d01834cb7a9856b1cc', class: classes }, h("div", { key: 'ac90e1f13405a63cee6cb09b8f6e534523025e44', class: "stzh-status__text" }, !this.withLoadingbar &&
-            h("div", { key: 'e8e04657f149c56ee66b171f87b2a3aca1fae7db', class: "stzh-status__dot" }), this.label &&
-            h("div", { key: '49485cbee9d1d694695cdd30db362b2fd721252e', class: "stzh-status__label" }, this.label)), this.withLoadingbar &&
-            h("div", { key: '5c98a346049515ff1e50dab4917831f4c5d54fbe', class: "stzh-status__bar" }, h("div", { key: 'd8ba608e926684c7f07461b9a7493528776f2db7', class: "stzh-status__bar-inner", style: {
+        return (h(Host, { key: 'cf5368c8c348b78771d193de7c0b64aac920d495' }, h("div", { key: 'ca0e3f6db139c39447131b3a6c4e673c742a0891', class: classes }, h("div", { key: 'a060a40864cf6570c0b3db1e9b003333b12e472d', class: "stzh-status__text" }, !this.withLoadingbar &&
+            h("div", { key: '2abce5b919e30cbc59f573a31d16b830afc250f1', class: "stzh-status__dot" }), this.label &&
+            h("div", { key: 'f541a5149b55560e2c83609e52deabcab107eadd', class: "stzh-status__label" }, this.label)), this.withLoadingbar &&
+            h("div", { key: 'bd7c530d66b7c15725292e76fd1e9560758170d0', class: "stzh-status__bar" }, h("div", { key: 'e80665749ededad6767c4d76a626fbc0296bdda9', class: "stzh-status__bar-inner", style: {
                     width: `${this.percent}%`
                 } })))));
     }

package/dist/esm/stzh-stepper-item.entry.js

@@ -55,11 +55,11 @@ const StzhStepperItem = class {
             "stzh-stepper-item--passed": this.passed,
             "stzh-stepper-item--passed-incomplete": this.passed && this.incomplete
         };
-        const dotted = (h("span", { key: '68f87db5d84c53adc85e250d6849e05a35637963' }, !this.clickDisabled ? (h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled" }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
-        const content = (h("span", { key: '35b17422b511e52f4eb31157651b6a7fd77ddd70' }, h("span", { key: 'b2cdd6251bd67609fc42b1bbf55b9b90b1d5c01e', class: "stzh-stepper-item__number-block" }, this.icon
+        const dotted = (h("span", { key: 'bec4fc0fc7a2e4ff36077b0ea4fcbab4547124b6' }, !this.clickDisabled ? (h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled" }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
+        const content = (h("span", { key: 'c55480eb153827d56915b21097b2bc175c3bedb5' }, h("span", { key: 'fb1e48fa298ae59bc5cf88a1bf2c156e165514a5', class: "stzh-stepper-item__number-block" }, this.icon
             ? h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })
-            : (h("span", null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { key: '87b4c82329d5a679ed6f16598313a0d4a9485c7a', ref: (el) => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
-        return (h(Host, { key: 'c2fef2f363d22e55ee6885c9a2d91f5864c4452b', role: "listitem" }, h("div", { key: '6c56cb2b34ffc7a2c396b430c16e39bb8aeb4e7e', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: (el) => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-stepper-item__number-block" }, this.icon
+            : (h("span", null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { key: 'b698342975678c9ec862d532c52697b4ef8b24c4', ref: (el) => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
+        return (h(Host, { key: '9b03bf33bfe90ca4a9be7454d60b2e1ab7c376cb', role: "listitem" }, h("div", { key: '2dd2ed128f32b65e41a9de6799a337c91cf03b6b', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: (el) => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-stepper-item__number-block" }, this.icon
             ?
                 h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })
             :

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

@@ -163,9 +163,9 @@ const StzhStepper = class {
             "stzh-stepper": true,
             [`stzh-stepper--index-${this.index}`]: !!this.index
         };
-        return (h(Host, { key: '5d764a14fd6483a5a1d3d6453ed081b18c19d43d', style: {
+        return (h(Host, { key: 'a1c376bd2d799a727a4d5cd3620a302e660f2f2b', style: {
                 '--steps': this.currentSteps ? this.currentSteps.toString() : null,
-            } }, h("div", { key: '77e6a0b85ae86b7e751f5afb6a3e17b95509cbcc', class: classes }, h("div", { key: '5fff3da6ada91f6d09e437b28d6d0986ffc261eb', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled, onStzhClick: (e) => { this.handleStepClick(e); }, onStzhDottedClick: (e) => { this.handleStepClick(e); }, class: "stzh-stepper__item" }))), h("slot", { key: 'c564fd218eabdeaf7835143aac0ce1c03d04bc2c' })))));
+            } }, h("div", { key: '2ff860e2f0a86f73a8ebc6a211efd408fa2ddf82', class: classes }, h("div", { key: '11bf19b3ab6863a30fe48cba547d86ed3ca8fb13', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled, onStzhClick: (e) => { this.handleStepClick(e); }, onStzhDottedClick: (e) => { this.handleStepClick(e); }, class: "stzh-stepper__item" }))), h("slot", { key: '3e18ebc7f0e0d07e6225f7e2ab8853d430dff7a4' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-sticky-actions.entry.js

@@ -59,7 +59,7 @@ const StzhStickyActions = class {
             "has-active-scrollup": this.hasActiveScrollup,
             "is-not-slotted": !this.isSlotted,
         };
-        return (h(Host, { key: 'e78344af8e4d573eec23c6f1b09ff74640787f18' }, h("div", { key: '3a275256038a10e14c6e878cff3bc049954fad34', class: classes, "data-stzh-sticky-width-container": true }, h("stzh-sticky", { key: '4790e7176aa6297c5f320cbf50ce4e1e3b7db8f1', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, h("div", { key: 'a1f14c782234c7fda3606ca9bfc788366f934eb5', class: "stzh-sticky-actions__container" }, h("div", { key: '12c97ce10504c544828de9c8aedcfdeed9be30fb', class: "stzh-sticky-actions__chat-wrapper" }, h("slot", { key: '592e541ef68324f49c2a7c36b2124cfb476e52d1', name: "chat", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: 'cb91b480db827e9e5e2101373b101032e7384014', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, h("slot", { key: 'bbf23c72f6b8ba5fb00674daf3d244422726d5ae', name: "scrollup", onSlotchange: () => forceUpdate(this.element) })))))));
+        return (h(Host, { key: '3bb569599c460fb415ec4e8de737f4b8f0b15c8d' }, h("div", { key: 'aadaf7b150451a3f302476fafa7c5041e0f3c846', class: classes, "data-stzh-sticky-width-container": true }, h("stzh-sticky", { key: '17b8456cd65852e7dd777bf7699e32240c4ceac3', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, h("div", { key: '2e8b62471ff4c76e7e4f53a967954e84781951f2', class: "stzh-sticky-actions__container" }, h("div", { key: '5e92336adbb32afbd7e06945964b3e6442271652', class: "stzh-sticky-actions__chat-wrapper" }, h("slot", { key: '7341da4c94cbfff2f62d023f3fb58625b4a024f5', name: "chat", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '309f54b3081724680d763309c8fc35d823276cd5', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, h("slot", { key: '4f70ea727bba2387e78de789483d60c95019621b', name: "scrollup", onSlotchange: () => forceUpdate(this.element) })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -296,7 +296,7 @@ const StzhSticky = class {
             [`stzh-sticky--position-${this.position}`]: !!this.position,
             [`stzh-sticky--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'eb8c69f0514535e2ba72732ed82207f54bca3c55', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { key: 'e07a27360cb64dc63b10066869a848a7152c23d0', class: classes }, h("div", { key: '3b1d10acae38285a9117d6ad6749b0cc1ee93c0c', ref: (el) => (this.spacerElement = el), class: "stzh-sticky__spacer" }), h("div", { key: 'fd9040dab3d3df93e4b003a06cffe349ced4c073', ref: (el) => (this.stickyElement = el), class: "stzh-sticky__sticky" }, h("div", { key: '60cf78af87bc9d2d84195d593956fe4887a04278', class: "stzh-sticky__content" }, h("div", { key: '543f3b66fb50939f434156c36476b81ed0f99a53', class: "stzh-sticky__content-inner" }, h("slot", { key: 'cd5bc66328690754ac2bf09b0b3557b396d25d30' })))))));
+        return (h(Host, { key: 'a09a2ecc5b0ac9114b969f65cde3571c099ceee4', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { key: 'faa201091823ba7bbef07fd601015dacf96444b3', class: classes }, h("div", { key: '719d53284e253d2028d94ff54d482628370cb469', ref: (el) => (this.spacerElement = el), class: "stzh-sticky__spacer" }), h("div", { key: '1932643dc47f819340c6b16c82b987a29ddfef77', ref: (el) => (this.stickyElement = el), class: "stzh-sticky__sticky" }, h("div", { key: '02d0ac599179d85b31cd72fec66e86101e664d77', class: "stzh-sticky__content" }, h("div", { key: 'd2ddf3f76afa4c79508ed5e478df89c185bcbce2', class: "stzh-sticky__content-inner" }, h("slot", { key: '16629f5429772b8c2cb1d017c914572576965759' })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -156,7 +156,7 @@ const StzhTable = class {
             "has-action-or-search": actionButtonSlotUsed || searchSlotUsed,
             "has-header": headingSlotUsed || actionButtonSlotUsed || searchSlotUsed
         };
-        return (h(Host, { key: '4b9f0643aaba56a2a436985453d5953ce3568f84' }, h("div", { key: 'b002fad029c51d137a5ee13c166bf2992787b852', class: classes }, h("div", { key: 'fd37aa5a6d342dad05a4b2380cb99d1b7388a8ef', class: "stzh-table__header" }, h("div", { key: '8759746153ba6bd22b28c6ae9593a83918cf06bc', class: "stzh-table__heading" }, h("slot", { key: '2205789be3d49531473034c69c16f2a826b11cde', name: "heading" })), h("div", { key: '7d83d21a949498f39dfbf9afe249d0b3ced1e278', class: "stzh-table__sub-header" }, h("div", { key: '38a2878ea9059803fb32f8717fe3e24d7881dc40', class: "stzh-table__search" }, h("slot", { key: '44ad006388f9aa14f6cb96f13f52225f6bdd8fe6', name: "search" })), h("div", { key: 'b52d5a378be24f1e9135f511993216b0d3557db0', class: "stzh-table__action-button" }, h("slot", { key: '15a26db77a74dad145c6ade85649a52de9d52853', name: "action-button" })))), h("div", { key: '923a56b590b0f8f3e3cfb301c36f2fdf4b497840', class: "stzh-table__outer-wrapper" }, h("div", { key: 'a1a60054d5a72529109229908aba52581c635123', ref: (el) => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, h("slot", { key: '5c30c0b7146b47674a920e3547ef0e4446535c47' }))), h("div", { key: '4902299d2cfdb086b394eecd497c9d053c85a46d', class: "stzh-table__list-wrapper" }, h("div", { key: 'c833b592e340b230e87a4737c57d7c21b5fc74cf', class: "stzh-table__list-sort-wrapper" }, h("slot", { key: 'f16e1ec6a0e3c9270ac5ad7cf69171ae5e9339ad', name: "list-sort-by-dropdown" }), h("slot", { key: '493dc225befc5f081d8f15b1267105666126a910', name: "list-sort-direction-dropdown" })), h("slot", { key: '2cd88128c77e8e631b5d54a2606bb5399691bd6c', name: "list" })), h("div", { key: '1958683b8f18ad0f5585f59a92fbca5fa22e0a90', class: "stzh-table__pagination-wrapper" }, h("slot", { key: '7088392ad0921e1c59e14bbffe6a801c97450baf', name: "pagination" })))));
+        return (h(Host, { key: 'cb8894fcbc5b82598e9cdfa83d72b5417bda76b1' }, h("div", { key: 'e8a72af2b07d1821801f1aacd69fd4ef2deb17a3', class: classes }, h("div", { key: 'eaff34a727bf66bf20d84e71b83361b52395a0ad', class: "stzh-table__header" }, h("div", { key: 'b431bcc42a7346b543768e718cbe51d9afbd266f', class: "stzh-table__heading" }, h("slot", { key: '557a502afa0c5e0e50f0db49541631bb8b044bc9', name: "heading" })), h("div", { key: '8bceefd0f2e0284d00e53cfbbc56751fde9d9496', class: "stzh-table__sub-header" }, h("div", { key: '06784d227257262feb9abe0ad71ba9e964f38a2a', class: "stzh-table__search" }, h("slot", { key: '04a3974a4fc3c8264d621462445333cbe12ecd8b', name: "search" })), h("div", { key: '03812e791ec51a784ebed17e3b456f0e629bdc79', class: "stzh-table__action-button" }, h("slot", { key: '55a36104c676d084c9a2dc061dcc60458cb9b5ea', name: "action-button" })))), h("div", { key: '80139616ce8c798e00610591d3429bb0443f54f3', class: "stzh-table__outer-wrapper" }, h("div", { key: '762c9948b7431a83bd2929ef6fd35b684e70ef82', ref: (el) => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, h("slot", { key: '870a41d4226e3495d35237ed8966aac611cda2eb' }))), h("div", { key: '920741f50b0179fb0c910f942e8de0c379b3e3fb', class: "stzh-table__list-wrapper" }, h("div", { key: '235e3d1e185c0a7659a475eae2542587b7c60b1d', class: "stzh-table__list-sort-wrapper" }, h("slot", { key: 'c5eea4fd60e2bf0c1b3c8d6dfe4014f9bf9e3d67', name: "list-sort-by-dropdown" }), h("slot", { key: 'e769c14127dd26a2355f86cc35a38a290ca10068', name: "list-sort-direction-dropdown" })), h("slot", { key: '4e7b6c82f0a80c1032d5aabb68faa902e20d0d9e', name: "list" })), h("div", { key: 'b7ccba64317ba4382cfddfe02cfd02dd99428283', class: "stzh-table__pagination-wrapper" }, h("slot", { key: 'efea73d1be1a295bbb0164afadbc8908eb6ab86e', name: "pagination" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -17,7 +17,7 @@ const StzhText = class {
         this.sizeUltra = "inherit";
     }
     render() {
-        return (h(Host, { key: '61c5c6a5f53f75776c9dac1afd98b8f4f7174102' }, h("div", { key: '789c5cd13bf06d4773cf9124d4b7b29dcc52679b', class: {
+        return (h(Host, { key: 'a55b760c2ecea8d11303ba01de4c7a43c4962825' }, h("div", { key: '23986e04a637d528f3ce41bd996b8269a323b74e', class: {
                 "stzh-text": true,
                 "stzh-text--is-lead": this.lead,
                 [`stzh-text--font-${this.font}`]: !!this.font,
@@ -27,7 +27,7 @@ const StzhText = class {
                 [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,
                 [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,
                 [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,
-            } }, h("div", { key: '320e3f9cf3d9e202c7ca7e9588ffcf66bb62a3c4', class: "stzh-text__text" }, h("div", { key: 'a8f63afbe37274200b61c33f9ccef976c2fcc252', class: "stzh-text__icon" }, h("slot", { key: 'af3a5a42889bafbbb7964c06b0ecab52d45ccdd7', name: "icon" })), h("div", { key: '830b9489e16ff331a87e480ebce32683a52b7fb8', class: "stzh-text__text-inner" }, h("slot", { key: 'd3b1eab9fc95af842efa1dce25f3df2d942df929' }))))));
+            } }, h("div", { key: 'f55974cde6b8322fd85c53fb6c01d8c9f6a751ad', class: "stzh-text__text" }, h("div", { key: '502dd43d10239fb7acdd51aca63f96190d7a1ed4', class: "stzh-text__icon" }, h("slot", { key: '573b0cefe0cb21a2c411761cbc6cc4bf3b5c5b23', name: "icon" })), h("div", { key: '58f2bf38ed27bc40133c6bd7b86ada47921b1d72', class: "stzh-text__text-inner" }, h("slot", { key: '56eb73492152a96905c3cf594a773529ce7efc13' }))))));
     }
 };
 StzhText.style = StzhTextStyle0;

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

@@ -56,7 +56,7 @@ const StzhTextandimage = class {
             [`stzh-textandimage--size-${this.size}`]: !!this.size,
             [`stzh-textandimage--image-position-${this.imagePosition}`]: !!this.imagePosition,
         };
-        return (h(Host, { key: '381925e8daae0a1072d2228bd4635e913c214964', single: isSingle, "image-position": this.imagePosition }, h("div", { key: 'a0acf2c2bc4c1d006f9e5b1983ac59a374619508', class: classes }, h("div", { key: '4cc3284a44923044d7b129ce000422b5168bd521', class: "stzh-textandimage__left" }, h("slot", { key: '1bcd1beecfd7b97947644a8b558754fcf3fb9bc1', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: 'b5e8e8a7006978f52295bbea0f3a07a1be1306ad', class: "stzh-textandimage__right" }, h("slot", { key: '266458ff30b6783105363e76eb542bbe53e6f9b9', name: "right", onSlotchange: () => forceUpdate(this.element) })))));
+        return (h(Host, { key: '7cf2cd4e0fcb03c25c2dcbc2668afb43c96cbefb', single: isSingle, "image-position": this.imagePosition }, h("div", { key: '6307efa458b930b1fd2aa897907f9fadd2a0f9a3', class: classes }, h("div", { key: '150c430f506b977aced8f3f632c0469170aaf65c', class: "stzh-textandimage__left" }, h("slot", { key: '55ec076aaf4f839f733c206c6c98d39a41092aa6', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: 'b53804b5774bb4e9ec7b5243a520050843ea855a', class: "stzh-textandimage__right" }, h("slot", { key: 'ec8984fbb2559872e8e07fc91ab95c969fe1de7c', name: "right", onSlotchange: () => forceUpdate(this.element) })))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-timeline-item.entry.js

@@ -261,7 +261,7 @@ const StzhTimelineItem = class {
             "stzh-timeline-item--is-foldable": this._foldable,
             "stzh-timeline-item--is-completed": this.completed,
         };
-        return (h(Host, { key: '247395ef82052a07eb0632e0d693bbb392995a83', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: '62b8638dead4e02d8fb59e6e8de4be27880b686a', class: classes }, h(Heading, { key: '2ae84a7e2cf957b82eb2d7745227ad0e55eba72b', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, h("button", { key: '7839668b767bad3790de2e48a0a0425ab502442b', ref: (el) => (this.buttonElement = el), class: "stzh-timeline-item__button", "aria-controls": `${this.timelineItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, "aria-disabled": !this._foldable ? "true" : "false", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: 'ff5f068fa079565ea0f080b2be39edbdc9f9d162', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed
+        return (h(Host, { key: '70787bd88b596b5c4736893f39e5cc9ccbc64795', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: 'f3a72bf983fdc9d9fbf1b6840499a2b483477aca', class: classes }, h(Heading, { key: '5887636ef7ec9ab71d5412901d4a2ebda7957c2d', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, h("button", { key: '3c867676abb0eb2bf70ef7779414ed1a66a767f5', ref: (el) => (this.buttonElement = el), class: "stzh-timeline-item__button", "aria-controls": `${this.timelineItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, "aria-disabled": !this._foldable ? "true" : "false", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '7aa2788ddced447876028a1685a81887fbf51dc8', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed
             ?
                 h("span", { class: "stzh-timeline-item__bullet-icon-wrapper" }, this.icon || this.completed ?
                     h("stzh-icon", { class: "stzh-timeline-item__bullet-icon", name: this.icon ? this.icon : "checkmark" })
@@ -269,8 +269,8 @@ const StzhTimelineItem = class {
                         h("slot", { name: "icon" }))
             :
                 h("span", { class: "stzh-timeline-item__bullet-text" }, this.step), (this.badge || this.badgeEmpty) &&
-            h("stzh-badge", { key: '97624fe086f7d0aec027bb95e1b5dd5ed863e72e', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType })), h("div", { key: '9991dc23a473d0ab01936fcb2d877e1f053f31f7', class: "stzh-timeline-item__button-inner" }, h("span", { key: '35cd249fdc76c29dd7ccc7da801da50873ccef65', class: "stzh-timeline-item__button-text" }, h("span", { key: 'f81a7074f078b0bc00f5878fa6bd2388d26a0319', class: "stzh-timeline-item__heading-text" }, this.heading), h("span", { key: '9cc6c2c45fa4f38e54478bf8b75ac8cca1fa64c6', class: "stzh-timeline-item__description" }, this.description)), this._foldable &&
-            h("span", { key: '578d41f980c65aff71d1583b38b4ab9771fba8b1', class: "stzh-timeline-item__button-icon" })))), h("div", { key: '194b8bdac5c6af5d5ff1d480c62a035ec00bad2b', id: `${this.timelineItemId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-timeline-item__content", "aria-labelledby": `${this.timelineItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: 'a05a3859f08237d86411d890b8b1733334f70d08', class: "stzh-timeline-item__content-inner" }, h("slot", { key: 'f12e1bfdad3406473268547397795a99ae2f4cbf' }))))));
+            h("stzh-badge", { key: 'e86c10326af0de8833404b45017520689284218d', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType })), h("div", { key: 'b549a15d35f6dbd8f4be0d17965361e602a81ce4', class: "stzh-timeline-item__button-inner" }, h("span", { key: 'c880c5e1a1928e703591c24979e774732487e266', class: "stzh-timeline-item__button-text" }, h("span", { key: '26f8b525e57179bddffa7ea6ff925d124169570c', class: "stzh-timeline-item__heading-text" }, this.heading), h("span", { key: 'ff3be11d26e696ddf5a0b6b67666730033e97e71', class: "stzh-timeline-item__description" }, this.description)), this._foldable &&
+            h("span", { key: 'edd3a46e0926faf5a64dbb212a4b37a6a1a161d3', class: "stzh-timeline-item__button-icon" })))), h("div", { key: 'd360107b3b187bbc72be2e62c2a496d1c98d94c0', id: `${this.timelineItemId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-timeline-item__content", "aria-labelledby": `${this.timelineItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: 'd40302ba0fec96c10e4e4aa64184f9195c26dce4', class: "stzh-timeline-item__content-inner" }, h("slot", { key: 'eb7de65dbc64bec4ae0d46e595ad706b4de85a6f' }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -96,7 +96,7 @@ const StzhTimeline = class {
         const classes = {
             "stzh-timeline": true,
         };
-        return (h(Host, { key: '441d72956ed0c7a89d12dc578c2fce6b4233b4c9' }, h("div", { key: '74b4e2de0c9813672f94c77f841f6285c45672bb', class: classes, role: "list" }, h("slot", { key: 'b6ca019642d7fab07fdd6bcb3a4a14594f799c3e', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: 'a30909fe821bdf5509bd8ffbe9b42a73c1137ecd' }, h("div", { key: '6028a7ea13f67247542b79843dea021b7ba41e53', class: classes, role: "list" }, h("slot", { key: 'b0f535352203a26f9c103836c22e31a306cbd1a8', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -73,7 +73,7 @@ const StzhTimepicker = class {
         const classes = {
             "stzh-timepicker": true
         };
-        return (h(Host, { key: '320b994b9166354a51ebba4de7049a8f8f222691', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '3a6fd2ecb51ac586d7a7966163e9c5270501a12f', class: classes }, h("stzh-dropdown", { key: 'c7cf0e9c396b280401833325f6bd1ea75d8c945e', open: this.open, class: "stzh-timepicker__dropdown", iconAngle: "clock", label: this.label, ref: (el) => (this.input = el), onStzhChange: this.onDropdownChange, options: this._dropdownOptions, items: [this.value], required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: this.hideOptional }))));
+        return (h(Host, { key: '10abbb98d9f066a32720142c64454ae30bbb940b', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'a5c3a9eb284e4aadcdb94bef2032cef866f5144f', class: classes }, h("stzh-dropdown", { key: '3e336f525c188943bb497fd829896881444a734f', open: this.open, class: "stzh-timepicker__dropdown", iconAngle: "clock", label: this.label, ref: (el) => (this.input = el), onStzhChange: this.onDropdownChange, options: this._dropdownOptions, items: [this.value], required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: this.hideOptional }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -174,11 +174,11 @@ const StzhToast = class {
             "stzh-toast--has-close-hidden": this.hideClose,
             [`stzh-toast--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: 'd7048fb43e64a4c4908f3610d4b043410b3b9080' }, h("div", { key: 'b876cadbc5f00f2b5061b6ca8e9d98bc7298ce49', ref: (el) => (this.rootElement = el), class: classes }, h("div", { key: '339f1f0fe4d203e72e0fb3b517c68dd103131c36', class: "stzh-toast__content" }, h("div", { key: 'ea18bfbbc415b3c4d62b6c8f3cebd05fb46ec8f8', class: "stzh-toast__icon-wrapper" }, h("stzh-icon", { key: '75f50cc1fd5af6d09d968979bf0028070b50d0ba', class: "stzh-toast__icon", name: this.type === 'info' && "info-help-filled"
+        return (h(Host, { key: 'ebd451b3ea37c67151df03e8dd32d3c8d40724cf' }, h("div", { key: '3dbe98e3f38b89223f188bd3827c81141bb4ff26', ref: (el) => (this.rootElement = el), class: classes }, h("div", { key: 'a37965aaa1385d8ea582f44c97ab49550b6b3c83', class: "stzh-toast__content" }, h("div", { key: '82b31c1f2ae0ac7a33ca78c96a4959478103223e', class: "stzh-toast__icon-wrapper" }, h("stzh-icon", { key: 'afb7fe63977fa29080d59277aeda85d10ea1640d', class: "stzh-toast__icon", name: this.type === 'info' && "info-help-filled"
                 || this.type === 'success' && "checkmark-circle-filled"
                 || this.type === 'warning' && "important-warning-filled"
-                || this.type === 'error' && "warning-filled" })), h("div", { key: '87bc4e08e42764e879724ad17f421c9b8b5ea9b0', class: "stzh-toast__text-wrapper" }, h("div", { key: '202c99a66f15451b783f875182075cc9d9722845', class: "stzh-toast__label" }, this.label), h("div", { key: '6d586a58474402315f39e889a97578818938ddb3', class: "stzh-toast__link" }, h("slot", { key: '7862a09bb223c5dd99a135946e71514bad641a99', name: "link", onSlotchange: this.handleLinkSlotchange })))), !this.hideClose &&
-            h("div", { key: '4e69ed009561532b682e26636648a6fb64018c0a', class: "stzh-toast__close-wrapper" }, h("stzh-button", { key: '4973fab02cc7c8c7db0ea8035941ee81e140a97e', class: "stzh-toast__close", onClick: this.onCloseButtonClick, label: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
+                || this.type === 'error' && "warning-filled" })), h("div", { key: 'd01335303e89a00c4690e2dd334b5dde98c145a4', class: "stzh-toast__text-wrapper" }, h("div", { key: '9281cee6185b7b86dce6a2439e2527403ffb2f98', class: "stzh-toast__label" }, this.label), h("div", { key: 'f468bc792d8b87f29aecafc6412f3f3747b1b274', class: "stzh-toast__link" }, h("slot", { key: '398bb83622018e50215dad11a23fee71555d55b9', name: "link", onSlotchange: this.handleLinkSlotchange })))), !this.hideClose &&
+            h("div", { key: '8fd55bdac0a83bb14ab38d978267d90657129160', class: "stzh-toast__close-wrapper" }, h("stzh-button", { key: '73cdc6a035e12f2406640c1774321916bd5fd40e', class: "stzh-toast__close", onClick: this.onCloseButtonClick, label: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -316,7 +316,7 @@ const StzhToastbar = class {
         const classes = {
             "stzh-toastbar": true,
         };
-        return (h(Host, { key: '61474f23d193f01a9ac2e0f952db3f1384f68c61' }, h("div", { key: 'b0986bc204ffd8a54ed5d4c904fc56e301bb958f', class: classes }, h("slot", { key: 'c91fcaf716675d3e823d799d352348ce5b570413', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: 'b9e5edb980024fe6e80d4a7a5128f34c6accf678' }, h("div", { key: 'fb9f475c57e772fad3d64d50ee04131125fe370c', class: classes }, h("slot", { key: '9b812139373255f3f1a4220cca3f7dfcbb550b8b', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -125,12 +125,12 @@ const StzhToggle = class {
             "stzh-toggle--has-description-long": descriptionLongUsed,
             [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition
         };
-        return (h(Host, { key: '6a445311e0276178949362fa37ec5d96a2582089', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '2acb9cf129344a14f050cce9f283f2b4016cc70c', class: classes }, h("label", { key: '53f28ab3902157f490347701ce0e0c9fb0dc8115', class: "stzh-toggle__field-wrapper" }, h("input", { key: '0dec7c6b64f8f2ccd93d54f99fe263ebd18fa11c', class: "stzh-toggle__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '66474da0fa35ccaf35d5ed857cd1eda3aa06cb4e', class: "stzh-toggle__mark" }, h("div", { key: '7c070aafe727ec2bfa392fe7fdab28e691f37b0c', class: "stzh-toggle__check" })), h("div", { key: '49ab65d03bf47500e49a5ad5348938cde031ef64', class: "stzh-toggle__label" }, this.label ? this.label : h("slot", null), !this.hideOptional &&
-            h("span", { key: 'b362406f6686c7490c607b8df656deb585d59a3f', class: "stzh-toggle__marker" }, h("span", { key: '3d7aa662d2aa0d5b06324d81e8910182eb027f48', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '522cb0dd7bf3e4e3863ebea96c695fa96cb4a2db', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '19a868acb84f919ec5b84c2b76fa95c7620ceaf4', class: classes }, h("label", { key: '5fc8da5cf84b88244625767edb505e3cbcc43c87', class: "stzh-toggle__field-wrapper" }, h("input", { key: '15d8d339385268f86857b112ab42f910484b0f6d', class: "stzh-toggle__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '0674be89368f682c097eb148554da1de1ef206fe', class: "stzh-toggle__mark" }, h("div", { key: 'f5565d09b1b73c1e0c9ae42df39e62a95ea50adb', class: "stzh-toggle__check" })), h("div", { key: '593754dee4021ce5877b04640fce166c106038ca', class: "stzh-toggle__label" }, this.label ? this.label : h("slot", null), !this.hideOptional &&
+            h("span", { key: '5cb468b701cfe2503213d49016c6a911f3a7bd90', class: "stzh-toggle__marker" }, h("span", { key: 'cdabaf0507493e2f2cfc1b167958fe9069e35678', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
                 ? this.localization.$globals.requiredFieldMarker
-                : this.localization.$globals.optionalFieldMarker), h("span", { key: 'df4ba0ca70a5b481154c00e04a5740ba988a2550', class: "stzh-toggle__marker-text" }, this.required
+                : this.localization.$globals.optionalFieldMarker), h("span", { key: '5a083ad74d625fc89edaa9f6cb904f23ea5d1f41', class: "stzh-toggle__marker-text" }, this.required
                 ? this.localization.$globals.requiredFieldText
-                : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { key: '4645689dca83a822281f0a484cf9b419fafa60e3', classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+                : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { key: '5f27b8dbbf49c15f81ab6e621e525e1cd8c117bd', classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -6,7 +6,7 @@ import { w as waitForEvent } from './event-utils-fb80c909.js';
 import { s as stopAnimations, a as animateTo } from './animation-utils-d9f9cf5f.js';
 import './string-utils-a9af5463.js';
 
-const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h,[stzh-hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-tooltip-color, var(--stzh-color-white));--background-color:var(--stzh-tooltip-background-color, var(--stzh-color-coolgrey60));--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-tooltip-link-color, var(--stzh-color-white));--hover-link-color:var(--stzh-tooltip-hover-link-color, var(--stzh-color-white70op))}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}[type=button].sc-stzh-tooltip-h{--color:var(--stzh-color-midnightblue70);--background-color:var(--stzh-color-coolgrey10);--link-color:var(--stzh-color-midnightblue70);--hover-link-color:var(--stzh-color-midnightblue80)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
+const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h,[stzh-hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-tooltip-color, var(--stzh-color-white));--background-color:var(--stzh-tooltip-background-color, var(--stzh-color-coolgrey60));--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-tooltip-link-color, var(--stzh-color-white));--hover-link-color:var(--stzh-tooltip-hover-link-color, var(--stzh-color-white70op))}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}[type=button].sc-stzh-tooltip-h{--color:var(--stzh-color-midnightblue70);--background-color:var(--stzh-color-coolgrey10);--link-color:var(--stzh-color-midnightblue70);--hover-link-color:var(--stzh-color-midnightblue80)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
 const StzhTooltipStyle0 = stzhTooltipCss;
 
 const ANIMATION_SHOW = {
@@ -336,7 +336,7 @@ const StzhTooltip = class {
             [`stzh-tooltip--open`]: this.open,
             [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,
         };
-        return (h(Host, { key: 'f7bc0ee1a2580e4877136ce134dce5c06ee5fb18' }, h("div", { key: '6df27549c14b066188b92d0cb8f2c59d64ece003', class: classes }, h("div", { key: 'aefc38a04a7217225a2e4b5b855145e75676aa3d', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: '5f971fa802f80093944565149fc84b9e64224a5a' })), this.hasTrigger("click") && (h("div", { key: 'f944502cce410496d9a86bd648ecf638daeea9d8', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: 'f1a11064ce994f02883e749b9bd44687f95c3aad', class: "stzh-tooltip__content", id: `${this.id}-content`, ref: el => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { key: 'fe78b9b2d67f9ed46a24902bd6506c4fd2a24ac5', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: '6e3405de3df1680e032f2dd9be80b6ee865532f3', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: 'b77ab38bbbe03b31ca6578a4ab9229e4f582afbc', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: '791371d0e3ab8399ff43702a560233edf20122ca', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: '556a211146fc54b03feddf7ad27a3b568d8f07f1', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: '279965952347bb5be2a0d5d67e59efa8b533ae4d', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : h("slot", { name: "content" }))))));
+        return (h(Host, { key: '643020f926b7a270c1b28b2ff04f84a6385247bc' }, h("div", { key: '47ae92f9211f5f9de8d9f1c5391dfde00324c7ef', class: classes }, h("div", { key: '5797e2432348e1245501217fc510d33dfb244ffa', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: '6e7da97f24731b73d392ae8daa3bff9dbfca59cc' })), this.hasTrigger("click") && (h("div", { key: '4f5e722b5388aac4d117fed7eaab2b0268c2b6a4', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: 'bbd9b3cb967de023e83191a5a344ab2693d24b3e', class: "stzh-tooltip__content", id: `${this.id}-content`, ref: el => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { key: 'd1a15390f33e08c879df1bf16ee847bc9a0ee6fd', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: '95aa3b5722cdf73e415fc9b88d87204c0fd54144', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: '8778173fef3ebda630ffcc6d6363c38262391837', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: '4a14fb731ad939fbbe551893e71433f52a476d2c', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: '997d8699ea4a24e9e7e117c64554d97359b151d0', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: 'bcc3c0a104d3aac9e697533c21b35e7a4a199e81', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : h("slot", { name: "content" }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {