@oiz/stzh-components 4.6.0-beta3 → 4.6.0

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

@@ -1 +1 @@
-{"file":"stzh-skin-portal-mitwirken.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,gr6PAAgr6P,CAAC;AACpt6P,sCAAe,0BAA0B;;MCQ5B,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,OAAOA,QAACC,UAAI,sDAAQ,CAAC;KACtB;;;;;;","names":["h","Host"],"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)\n      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  &,\n  label,\n  tfoot,\n  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    @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  /* Process Header */\n\n  .process-header .process-header__inner {\n    background-color: $colorPrimary;\n  }\n\n  .card--full\n    .process-header\n    .process-header__container\n    .process-header__info\n    .card__title,\n  .process-header\n    .process-header__container\n    .process-header__info\n    .card--full\n    .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\n    .process-header__container\n    .process-header__info\n    .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  /* 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  /* Headings */\n\n  .heading1,\n  h1,\n  .heading2,\n  h2,\n  .heading3,\n  h3,\n  .heading4,\n  h4 {\n    color: $colorPrimary;\n  }\n\n  .heading1,\n  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,\n  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,\n  h3 {\n    @include font(\"title\");\n    @include fontCurve(\"h3\", \"heading\");\n    @include spaceCurve(\"margin-top\", \"medium\");\n  }\n\n  .heading4,\n  h4 {\n    @include font(\"title\");\n    @include fontCurve(\"h4\", \"heading\");\n    @include spaceCurve(\"margin-top\", \"medium\");\n  }\n\n  .heading4,\n  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  /* 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  /* 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(\n      #{space(\"xlarge\")} + #{space(\"medium\")} + #{space(\"xsmall\")}\n    );\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  /* 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  /* 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  /* 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  /* 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  /* Accountability */\n\n  .accountability .categories .categories--header span,\n  .accountability .categories .progress-figure,\n  .accountability\n    .categories\n    .categories--group\n    .category--title\n    .progress-info\n    .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\n    .categories\n    .categories--group\n    .category--title\n    .progress-info\n    .category--count {\n    margin-top: space(\"xxxsmall\");\n  }\n\n  .accountability .title-action {\n    @include spaceCurve(\"margin-bottom\", \"regular\");\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  /* 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  /* 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(\n      #{iconSize(\"medium\")} + #{space(\"small\")} + #{space(\"medium\")}\n    );\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  /* 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  /* 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  /* 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  /* 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\n    .progress__bar__subtitle\n    .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\n    > .card.extra.definition-data {\n    background-color: $colorOldGrey5;\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 .author-data__extra > span {\n    margin-right: space(\"medium\");\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 { Component, Host, h } 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 <Host></Host>;\n  }\n}\n"],"version":3}
+{"file":"stzh-skin-portal-mitwirken.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,q36PAAq36P,CAAC;AACz56P,sCAAe,0BAA0B;;MCQ5B,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,OAAOA,QAACC,UAAI,sDAAQ,CAAC;KACtB;;;;;;","names":["h","Host"],"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)\n      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  &,\n  label,\n  tfoot,\n  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    @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  /* Process Header */\n\n  .process-header .process-header__inner {\n    background-color: $colorPrimary;\n  }\n\n  .card--full\n    .process-header\n    .process-header__container\n    .process-header__info\n    .card__title,\n  .process-header\n    .process-header__container\n    .process-header__info\n    .card--full\n    .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\n    .process-header__container\n    .process-header__info\n    .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  /* 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  /* Headings */\n\n  .heading1,\n  h1,\n  .heading2,\n  h2,\n  .heading3,\n  h3,\n  .heading4,\n  h4 {\n    color: $colorPrimary;\n  }\n\n  .heading1,\n  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,\n  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,\n  h3 {\n    @include font(\"title\");\n    @include fontCurve(\"h3\", \"heading\");\n    @include spaceCurve(\"margin-top\", \"medium\");\n  }\n\n  .heading4,\n  h4 {\n    @include font(\"title\");\n    @include fontCurve(\"h4\", \"heading\");\n    @include spaceCurve(\"margin-top\", \"medium\");\n  }\n\n  .heading4,\n  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  /* 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  /* 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(\n      #{space(\"xlarge\")} + #{space(\"medium\")} + #{space(\"xsmall\")}\n    );\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  /* 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  /* 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  /* 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  /* 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  /* Accountability */\n\n  .accountability .categories .categories--header span,\n  .accountability .categories .progress-figure,\n  .accountability\n    .categories\n    .categories--group\n    .category--title\n    .progress-info\n    .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\n    .categories\n    .categories--group\n    .category--title\n    .progress-info\n    .category--count {\n    margin-top: space(\"xxxsmall\");\n  }\n\n  .accountability .title-action {\n    @include spaceCurve(\"margin-bottom\", \"regular\");\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  /* 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  /* 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(\n      #{iconSize(\"medium\")} + #{space(\"small\")} + #{space(\"medium\")}\n    );\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  /* 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  /* 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  /* 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  /* 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\n    .progress__bar__subtitle\n    .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\n    > .card.extra.definition-data {\n    background-color: $colorOldGrey5;\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 .author-data__extra > span {\n    margin-right: space(\"medium\");\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 { Component, Host, h } 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 <Host></Host>;\n  }\n}\n"],"version":3}

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

@@ -16,7 +16,7 @@ const StzhSkinStorybookPreview = class {
         console.log(this.constructor.style.replace('@charset "UTF-8";', ""));
     }
     render() {
-        return index.h(index.Host, { key: 'ec7727f498a8c1686410cbeac929e27fb621050f' });
+        return index.h(index.Host, { key: '1e2e4834ed2c8d5b6871799c307c7c9006973fcd' });
     }
 };
 StzhSkinStorybookPreview.style = StzhSkinStorybookPreviewStyle0;

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

@@ -91,7 +91,7 @@ const StzhSkiplink = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '091a7298ed30636dfcc8bc7fc0ad34465293f0ad', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, index.h("a", { key: '6ecf452fabfa3c49b8ac38c5e8b8d06a37256d00', ref: el => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("div", { key: '4443ffd049012977e1887f3340442eaeeb36b135', ref: el => (this.text = el) }, this.label ? this.label : index.h("slot", null)))));
+        return (index.h(index.Host, { key: '20df16d529408855cc20dc96a2315d913f94e443', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, index.h("a", { key: '240a7db2c8b820e5c6cea947c6450fd42412f292', ref: el => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("div", { key: 'a0b1f2d532f88b8eaf6ba31860b9a9124c05460f', ref: el => (this.text = el) }, this.label ? this.label : index.h("slot", null)))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -81,7 +81,7 @@ const StzhSocialmediastreamItem = class {
         const classes = {
             "stzh-socialmediastream-item": true,
         };
-        return (index.h(index.Host, { key: '451ffb4531182b23e3fdc6c0c784431b913907b5' }, index.h("a", { key: 'd44e214ac6a78e5f692ce6ad08638c8b5acd7c9d', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (index.h("div", { key: '6155711535ac95e0191089033e4049ff13019bf0', class: "stzh-socialmediastream-item__image" }, index.h("stzh-ratio", { key: '500fc5fb9824e7f304e0f54eda0b82a81fbf4ed9', ratio: "1:1" }), index.h("div", { key: '0aa89a95f31dad77eee8fb87a6a6b64749f0a1cd', class: "stzh-socialmediastream-item__image-inner-wrapper" }, index.h("img", { key: 'c358e286c315bb7eb083acfc67a983b4fdbf1f9e', src: this._item.image, alt: this._item.account.title })))), index.h("div", { key: 'a71b06f04bf6e6df8f41a15438a16195473b3228', class: "stzh-socialmediastream-item__content" }, index.h("div", { key: 'bc4e20c47f08d1fe010d43882d268dff1adb3643', class: "stzh-socialmediastream-item__content-head" }, index.h("stzh-text", { key: 'fc2f2d52cb3dc36ae35b028c624c418564a09aae', size: "nano", class: "stzh-socialmediastream-item__content-title" }, index.h("strong", { key: '30066db3b5ca863902140a7829e0b6bb1d4b1b14' }, this._item.account.title), index.h("br", { key: 'cd515f69421007de450ed88dffe7c4ba92ca5889' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), index.h("stzh-icon", { key: '50e23b1d0d1073e37e7b1c71fe073a5951516820', name: this.getIconName(this._item) })), index.h("div", { key: '0ff6ecf0e3fe75cc0f0b6d549b51480029d84784', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), index.h("div", { key: 'c862b9ebf610d71241ca80439df051bcd917da54', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
+        return (index.h(index.Host, { key: '4191b7b6f80d898467cd6009efc0ab2e7431e4bf' }, index.h("a", { key: 'd0091542217bea89e608c1cd8833a82159835bd1', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (index.h("div", { key: '65a86276d0dceb9c16d4d2f04836324d5cf9a64d', class: "stzh-socialmediastream-item__image" }, index.h("stzh-ratio", { key: '21bf793e2facc74065ac0056d59b2b9679b81ebe', ratio: "1:1" }), index.h("div", { key: '0f4d48d32746379f65797f2758f7abdc3208b2c0', class: "stzh-socialmediastream-item__image-inner-wrapper" }, index.h("img", { key: '733575e43e1aecd544a6bc6a46c4a82248198e14', src: this._item.image, alt: this._item.account.title })))), index.h("div", { key: '04a2debb823334b50ae839f486a9369c892f13fc', class: "stzh-socialmediastream-item__content" }, index.h("div", { key: '46a14325a016da16428b7846ebcf770981b8442d', class: "stzh-socialmediastream-item__content-head" }, index.h("stzh-text", { key: '155ede50397ed81ba7befdc4849cc42adc6c5575', size: "nano", class: "stzh-socialmediastream-item__content-title" }, index.h("strong", { key: '99813c5959ba960ecd02a6c2f28e884e9dca045b' }, this._item.account.title), index.h("br", { key: '8d63a3211fa010b01933b737faeb3d3c9d004c4e' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), index.h("stzh-icon", { key: 'c154798673d9903c938ec72a443cbc9802089bf3', name: this.getIconName(this._item) })), index.h("div", { key: '6e55256271478cbb521132b946917a4884dc84bb', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), index.h("div", { key: 'c2cf16d653f7b399af5254e301d4506566737a47', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
             this._item.actions.map(action => (index.h("a", { href: action.url, title: action.title, class: "stzh-socialmediastream-item__action", target: "_blank" }, index.h("stzh-icon", { name: this.getActionIconName(action.variant) }), action.count))))))));
     }
     get element() { return index.getElement(this); }

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

@@ -320,7 +320,7 @@ const StzhSocialmediastream = class {
             "stzh-socialmediastream": true,
             "stzh-socialmediastream--has-heading": headingSlotUsed || !!this.heading,
         };
-        return (index.h(index.Host, { key: '25e3d78f36e67179b7a479128d056887b31bcc3c' }, index.h("div", { key: '0519123771c379913f75a78385fe2f96fdabde45', class: classes }, index.h("div", { key: '657182f2f7eb9f3d4ecec771e2e2a7c6c54d03f3', class: "stzh-socialmediastream__heading" }, !!this.heading ? (index.h("stzh-heading", { level: this.headingLevel }, this.heading)) : (index.h("slot", { name: "heading" }))), index.h("div", { key: '21d37e1c527ce78a53af6268464e490823a22aaa', class: "stzh-socialmediastream__items" }, this._items &&
+        return (index.h(index.Host, { key: '37614065033faca52899dc2397bc9ddbf441dce8' }, index.h("div", { key: '3a91a20a3b9185e4ae6b7f7ea0c4176e23abf0e6', class: classes }, index.h("div", { key: '47aa03e66068a5c2d09b495a50405ab57752a8d8', class: "stzh-socialmediastream__heading" }, !!this.heading ? (index.h("stzh-heading", { level: this.headingLevel }, this.heading)) : (index.h("slot", { name: "heading" }))), index.h("div", { key: 'dacc4e9ce1230877418083123617fac1395fcc78', class: "stzh-socialmediastream__items" }, this._items &&
             this._items.length &&
             this._items.map(item => (index.h("stzh-socialmediastream-item", { class: "stzh-socialmediastream__item", item: item })))))));
     }

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

@@ -59,9 +59,9 @@ const StzhStepperItem = class {
             "stzh-stepper-item--passed": this.passed,
             "stzh-stepper-item--passed-incomplete": this.passed && this.incomplete,
         };
-        const dotted = (index.h("span", { key: '0bf9234ea09d7256821226dbfb79cf102cd5c6ce' }, !this.clickDisabled ? (index.h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, index.h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (index.h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled" }, index.h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
-        const content = (index.h("span", { key: '66350ac5cd3f8921dd36829016105f03e50d02a1' }, index.h("span", { key: '90290a7a564515870587081f03a4dd4230e8d604', class: "stzh-stepper-item__number-block" }, this.icon ? (index.h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (index.h("span", null, index.h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (index.h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), index.h("span", { key: 'f7195c8c791c923e54d8b38c392015ba00bb1173', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : index.h("slot", null))));
-        return (index.h(index.Host, { key: '406fb7aff128a46f2d95d959107d8387598c0014', role: "listitem" }, index.h("div", { key: 'c44f4023832d9fda7750ace8d3079eeed5a61442', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (index.h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (index.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 }, index.h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (index.h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (index.h(index.Fragment, null, index.h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (index.h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), index.h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : index.h("slot", null)))), this.first && this.dotted && dotted)));
+        const dotted = (index.h("span", { key: 'db5d54bfde1b949f294a33695a3832b7e29de143' }, !this.clickDisabled ? (index.h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, index.h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (index.h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled" }, index.h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
+        const content = (index.h("span", { key: 'be2ba5499107635d3ca67082e2e376fcd2dae68a' }, index.h("span", { key: 'a90c6568f01372bed84a708a954a53c4988fabc3', class: "stzh-stepper-item__number-block" }, this.icon ? (index.h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (index.h("span", null, index.h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (index.h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), index.h("span", { key: '8df1c698f60564937d6fe356b76f739cc3d52fac', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : index.h("slot", null))));
+        return (index.h(index.Host, { key: '043fa48b05e89f6d4861efc16ee401b47a612983', role: "listitem" }, index.h("div", { key: 'fedb2865259d8a95050b7b26bc882826747e7f77', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (index.h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (index.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 }, index.h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (index.h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (index.h(index.Fragment, null, index.h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (index.h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), index.h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : index.h("slot", null)))), this.first && this.dotted && dotted)));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -168,13 +168,13 @@ const StzhStepper = class {
             "stzh-stepper": true,
             [`stzh-stepper--index-${this.index}`]: !!this.index,
         };
-        return (index.h(index.Host, { key: '473ab777a6a95f31a1cb374a926cb7d7782f3223', style: {
+        return (index.h(index.Host, { key: '5ef938d68fca7a18b83222538cda0ecef2d948e0', style: {
                 "--steps": this.currentSteps ? this.currentSteps.toString() : null,
-            } }, index.h("div", { key: '4dd332ef95fe107bba4a96ceeb82bd2d7bd13f8c', class: classes }, index.h("div", { key: 'dfece9ddf0162dd1ee3c4e923b90273233d8d55a', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index$1) => (index.h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index$1), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled, onStzhClick: (e) => {
+            } }, index.h("div", { key: '8271667503e6530bf78f033580917a4e81a60067', class: classes }, index.h("div", { key: '775b68d4f7da410bde0962b0375b65e594431786', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index$1) => (index.h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index$1), { 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" })))), index.h("slot", { key: 'cdf95e09a40a83e58f652d1d3729e8b6823a50a0' })))));
+            }, class: "stzh-stepper__item" })))), index.h("slot", { key: '3b5085e0622c76ea384f615547abb30f1b00a4a5' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -63,7 +63,7 @@ const StzhStickyActions = class {
             "has-active-scrollup": this.hasActiveScrollup,
             "is-not-slotted": !this.isSlotted,
         };
-        return (index.h(index.Host, { key: '1c3e8e1f9e5a9457d92c7aa021fd5702bd4f9c76' }, index.h("div", { key: '3f642d502844e3ff37712dcd2f3dcdb66830e68b', class: classes, "data-stzh-sticky-width-container": true }, index.h("stzh-sticky", { key: '3d97d8ede163f1d8ef30a5e8c94abe5c6fe08758', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, index.h("div", { key: 'f1e0442f2acad77e7d63b06a4be6b370b0df27a2', class: "stzh-sticky-actions__container" }, index.h("div", { key: '5906232c13a31beebc4312bd1fb613145226175b', class: "stzh-sticky-actions__chat-wrapper" }, index.h("slot", { key: '3e4a30dafb3b4261a4918089c6e24b0ff39b86da', name: "chat", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { key: '4ae2ed770b028bf813a1ebcd613b685395b35363', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, index.h("slot", { key: 'fa876a9e7447aff4a27f7df16aed881811ce11d2', name: "scrollup", onSlotchange: () => index.forceUpdate(this.element) })))))));
+        return (index.h(index.Host, { key: 'f31d75f7255b737884b7e943b83d417db2e1d065' }, index.h("div", { key: '245a6df8bf6bc9abb09d36248d2755fb307121c4', class: classes, "data-stzh-sticky-width-container": true }, index.h("stzh-sticky", { key: '6b2591cca8e1cc8b43f30b1d07f96ec5e3a97e9a', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, index.h("div", { key: '4064bd01b926e272fe764719a5965e109207b9b3', class: "stzh-sticky-actions__container" }, index.h("div", { key: '15d4a428c8e1634319688d9833e88ba4a315ce52', class: "stzh-sticky-actions__chat-wrapper" }, index.h("slot", { key: 'df627cce54c13126c8632e00d396472904cd4230', name: "chat", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { key: '366fb6c417c8eb70ce981d5db8db28cc77a019f4', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, index.h("slot", { key: 'adc63bed8d080c5832e918cdb26f3193f605e46d', name: "scrollup", onSlotchange: () => index.forceUpdate(this.element) })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -295,7 +295,7 @@ const StzhSticky = class {
             [`stzh-sticky--position-${this.position}`]: !!this.position,
             [`stzh-sticky--${this.variant}`]: !!this.variant,
         };
-        return (index.h(index.Host, { key: '002461e23be34554fb5537981f26d10f88e43922', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, index.h("div", { key: '8d9fae15006c6dfcba20a600557d02f0668291f7', class: classes }, index.h("div", { key: '6454975317fba64ca5a897c5a21cf881f45d135c', ref: el => (this.spacerElement = el), class: "stzh-sticky__spacer" }), index.h("div", { key: '47832c767c9f3fee6aaa8e75abe8ccf6e31e15b5', ref: el => (this.stickyElement = el), class: "stzh-sticky__sticky" }, index.h("div", { key: '4c396a8fc77a9e9e1782b3cc49599e0821f4358d', class: "stzh-sticky__content" }, index.h("div", { key: '791776dc949e25713e5604e11b7830fcfe796adb', class: "stzh-sticky__content-inner" }, index.h("slot", { key: 'be42bc0f54a78d6eb55210d66cebfba5eeb8cf40' })))))));
+        return (index.h(index.Host, { key: '01492883beb334fda54b1931275876d27bdedd66', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, index.h("div", { key: '0606eea000f552312f5b878d7b9a178f1a905c40', class: classes }, index.h("div", { key: 'cd1f582162db1ab90df203edaf974698eaf1c174', ref: el => (this.spacerElement = el), class: "stzh-sticky__spacer" }), index.h("div", { key: '61e32982fcf9646b97590b0df6645a78fdce3e98', ref: el => (this.stickyElement = el), class: "stzh-sticky__sticky" }, index.h("div", { key: 'fbd1e9f36343848fdbb0b5a2e06e29a564417b36', class: "stzh-sticky__content" }, index.h("div", { key: '8eb4d39bfd9a0230833b19eb384afcb95661e97c', class: "stzh-sticky__content-inner" }, index.h("slot", { key: 'e730934534a68074c5c20c594e37e4a0a0c8db9a' })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -157,7 +157,7 @@ const StzhTable = class {
             "has-action-or-search": actionButtonSlotUsed || searchSlotUsed,
             "has-header": headingSlotUsed || actionButtonSlotUsed || searchSlotUsed,
         };
-        return (index.h(index.Host, { key: '1a569a03fdacc4e475c64d11670faace58c4c05c' }, index.h("div", { key: '31849e7fed8077c8e0c753a041c54ecea4918ec6', class: classes }, index.h("div", { key: '7c24640e369bb95a3af510ce385d42bc66463281', class: "stzh-table__header" }, index.h("div", { key: '1998c6a94af5ecdbd1f6ee879a91898186ecee22', class: "stzh-table__heading" }, index.h("slot", { key: '0be01aee17c703962708e278a280b2762379c41d', name: "heading" })), index.h("div", { key: 'd94f967685baf484eb7551ff1c9259dd6fba42a8', class: "stzh-table__sub-header" }, index.h("div", { key: 'db19805f9ee5fc5b70988d93e959a79ba9a8fa83', class: "stzh-table__search" }, index.h("slot", { key: 'f471fb027dc98be7a01a82b3ae38e40b8dca7133', name: "search" })), index.h("div", { key: 'b34bc17aac1c2dc2d83e2c78b279d7e7911d387b', class: "stzh-table__action-button" }, index.h("slot", { key: 'e6c19935a9a643ba9c29fd3132aa198b79970190', name: "action-button" })))), index.h("div", { key: 'ff9840fd441a5a1b620627966ec696787a0b4e44', class: "stzh-table__outer-wrapper" }, index.h("div", { key: 'a212b7e901f5ff3a498293d075694d0eef9c4b25', ref: el => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, index.h("slot", { key: '5755b8d652db0b93f818e44daa9d299264ea34e3' }))), index.h("div", { key: '403c1237e53f32ca272651f826877858bbdf7172', class: "stzh-table__list-wrapper" }, index.h("div", { key: 'bfc5da3aba6fc5b59d9c073c1a117d82aed91de7', class: "stzh-table__list-sort-wrapper" }, index.h("slot", { key: '7272730ef28585039a9a0e1c092f54e9ca974588', name: "list-sort-by-dropdown" }), index.h("slot", { key: 'e912469e94b5d29b6ab2d6e58ea803d86d62682a', name: "list-sort-direction-dropdown" })), index.h("slot", { key: '0623aa3587d5006b3ab49ce4ea32dae156185848', name: "list" })), index.h("div", { key: 'b5de8e78444df0e2a7c4543ded35e4ca0fda1dd2', class: "stzh-table__pagination-wrapper" }, index.h("slot", { key: '021157fc15ac299aec0b3f6fcd42b906ccee8dff', name: "pagination" })))));
+        return (index.h(index.Host, { key: 'd536d4aa9187dee59d10de374b981d50647de9e6' }, index.h("div", { key: '99916a8b3c85db016290d41c4aef934144248b9f', class: classes }, index.h("div", { key: '10ee4af6a827596fc4f906f6370b45bb77340227', class: "stzh-table__header" }, index.h("div", { key: '509ce30c97267bdb5def6a52e90ca440ca1ce9a9', class: "stzh-table__heading" }, index.h("slot", { key: '8f7e8b7848df8f682045be93dd3a5ed06dc1ffa7', name: "heading" })), index.h("div", { key: 'af8d49b12ebaeaf8b90ba013011580559710af2b', class: "stzh-table__sub-header" }, index.h("div", { key: 'f66275959d06a663bc6f5b4208e63727e09e4d3c', class: "stzh-table__search" }, index.h("slot", { key: '851e47ba09e57191f8dfbacd2666719939b9cb13', name: "search" })), index.h("div", { key: 'c8bf0f2e64241c69e8863e7479d5d8227c17db4a', class: "stzh-table__action-button" }, index.h("slot", { key: '07a9cb39e92464833a367024c1e309996808ebfe', name: "action-button" })))), index.h("div", { key: '852007cddcdd9087083d1223ed0b292cf986f9a5', class: "stzh-table__outer-wrapper" }, index.h("div", { key: '6c5fcddf9cac6c6b6995e3de95378049d91885d7', ref: el => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, index.h("slot", { key: '5ab8e515823b0f2d70077bd4397decc7e946c6d4' }))), index.h("div", { key: 'e930feda39aa7b16927c1694b1afdf0598924dab', class: "stzh-table__list-wrapper" }, index.h("div", { key: 'dcba14e36e2097a3c84dba7e81915b60e533f4ad', class: "stzh-table__list-sort-wrapper" }, index.h("slot", { key: 'a54149315a4b71551e5be8163a0d682782e15c00', name: "list-sort-by-dropdown" }), index.h("slot", { key: '28453bcefe09fe78b72e92d1ef3513402131155b', name: "list-sort-direction-dropdown" })), index.h("slot", { key: '6db3b154a9f504bb724edb99900c3235f8df915f', name: "list" })), index.h("div", { key: '749c96b809e6e724d6f9e223286e6e0a9f808433', class: "stzh-table__pagination-wrapper" }, index.h("slot", { key: '2cba7afc5e5725a9e678b93bb3f82bad4aa63357', name: "pagination" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -21,7 +21,7 @@ const StzhText = class {
         this.sizeUltra = "inherit";
     }
     render() {
-        return (index.h(index.Host, { key: 'db3bb9f9dc23d86145b09a28ef48d0f8c625261f' }, index.h("div", { key: '76a0496a81d606c7ed6382ed29205a51793de367', class: {
+        return (index.h(index.Host, { key: 'a4cc9b1af5bd0f4a6d0b4ab8e89848ba80692ce8' }, index.h("div", { key: 'b130502e6a051355caef3c2e4667cff27bb11d48', class: {
                 "stzh-text": true,
                 "stzh-text--is-lead": this.lead,
                 [`stzh-text--font-${this.font}`]: !!this.font,
@@ -31,7 +31,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,
-            } }, index.h("div", { key: '0597f8af5896d569b49b6bd44d3b2171e89e2515', class: "stzh-text__text" }, index.h("div", { key: '2520820453bc14c0ec144a1604028da27e4d2162', class: "stzh-text__icon" }, index.h("slot", { key: 'fcd6137f66d7132e936d87a3e010fa9967bb81e0', name: "icon" })), index.h("div", { key: '84a85ad7af77f97cf3f7b8e70f8d8b87c4b46dc9', class: "stzh-text__text-inner" }, index.h("slot", { key: '2d76f4ccf363d9476156c908209a97ef60d76f94' }))))));
+            } }, index.h("div", { key: '6b4ec592ada560be4ad5c57a91009864ea0636b1', class: "stzh-text__text" }, index.h("div", { key: 'a18493b5b83c5ca8d331b6c0350244e5ce165ed2', class: "stzh-text__icon" }, index.h("slot", { key: '4ee38edfeac20d6965643e85271ed2a519d58e87', name: "icon" })), index.h("div", { key: '3a7f5e9f5bcb711a852c97a5cd7a46a592543bcf', class: "stzh-text__text-inner" }, index.h("slot", { key: 'abfc6b658c4e1b81e6b4558304e23b1b3503e5e6' }))))));
     }
 };
 StzhText.style = StzhTextStyle0;

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

@@ -75,7 +75,7 @@ const StzhTextandimage = class {
             [`stzh-textandimage--size-${this.size}`]: !!this.size,
             [`stzh-textandimage--image-position-${this.imagePosition}`]: !!this.imagePosition,
         };
-        return (index.h(index.Host, { key: 'c068e169103e24129eba9acc112503aaab1f3d79', single: isSingle, "image-position": this.imagePosition }, index.h("div", { key: 'ae83efdd7d73ad9e7f90ecc9274f0089dda707c2', class: classes }, index.h("div", { key: 'fda59fc416acbdb489642a94e1298fe5b8583cb0', class: "stzh-textandimage__left" }, index.h("slot", { key: '8b4cb84669b96f687ae62ede0ad11ef07706039c', name: "left", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { key: 'baa443bb942d2bfe49a4fce9807047082797856b', class: "stzh-textandimage__right" }, index.h("div", { key: 'c24801ff6deb1fcec43e8ba72f50ca9337aeca18', class: this.imageMoves ? "stzh-textandimage__wrapper" : "" }, index.h("slot", { key: 'd3b2e253df5663f1f78b86e0b8c93b8e0119191b', name: "right", onSlotchange: () => index.forceUpdate(this.element) }))))));
+        return (index.h(index.Host, { key: '0fbc3abc39e86a3a7509d73999517c7ef5e3300e', single: isSingle, "image-position": this.imagePosition }, index.h("div", { key: 'e3a21b07b90af39ed9bda5c9fd7296b3b105b07d', class: classes }, index.h("div", { key: 'bfc6e159556327347a3a849fec9355b1d8cbc968', class: "stzh-textandimage__left" }, index.h("slot", { key: '41d2bb8064c87c054289ebcb5960234e94b35fa9', name: "left", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { key: 'afa09006e7fc508b271eebacb7518510ff79603f', class: "stzh-textandimage__right" }, index.h("div", { key: '9ba052e19d1cf4933ffccb14be38a1b016a27f4b', class: this.imageMoves ? "stzh-textandimage__wrapper" : "" }, index.h("slot", { key: '58be22dc8a6c8950dc27c1c36b6b79ace6646ca4', name: "right", onSlotchange: () => index.forceUpdate(this.element) }))))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -260,7 +260,7 @@ const StzhTimelineItem = class {
             "stzh-timeline-item--is-foldable": this._foldable,
             "stzh-timeline-item--is-completed": this.completed,
         };
-        return (index.h(index.Host, { key: '16a92028ad475fe4ec312a0d7ef92892e260110d', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, index.h("div", { key: '3063bf6d36bc77499bca25a4906ac6034317f850', class: classes }, index.h(Heading, { key: '7a5657883ef91865ebc8f9c556c18fbbd95bebbd', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, index.h("button", { key: '3e3deb6c1ffedb593a0250606303a6ec4f2e75d0', 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 }, index.h("span", { key: '5caa4e7c38eee51e284229c57360e71b8a8fe3b5', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed ? (index.h("span", { class: "stzh-timeline-item__bullet-icon-wrapper" }, this.icon || this.completed ? (index.h("stzh-icon", { class: "stzh-timeline-item__bullet-icon", name: this.icon ? this.icon : "checkmark" })) : (index.h("slot", { name: "icon" })))) : (index.h("span", { class: "stzh-timeline-item__bullet-text" }, this.step)), (this.badge || this.badgeEmpty) && (index.h("stzh-badge", { key: '8423cb9a152ecf3e534e7e407c249e311891f5bb', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType }))), index.h("div", { key: 'ce0ae73f81e283f2d42d27323b820a5f574b0582', class: "stzh-timeline-item__button-inner" }, index.h("span", { key: 'd582a74f1560b5e18c1f15ec5f6120151a440dd7', class: "stzh-timeline-item__button-text" }, index.h("span", { key: '562a2810abb95e38297b2170da4d151699df1123', class: "stzh-timeline-item__heading-text" }, this.heading), index.h("span", { key: '4a5b5165af7f99dd734fe317811e67691fee7975', class: "stzh-timeline-item__description" }, this.description)), this._foldable && index.h("span", { key: 'a9a6815e33e6bc0b6154c49d27f7c140924d04ac', class: "stzh-timeline-item__button-icon" })))), index.h("div", { key: 'e1885c6108e4ac00e31910a68d8f1789c9d52def', id: `${this.timelineItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-timeline-item__content", "aria-labelledby": `${this.timelineItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, index.h("div", { key: 'd404aa2c8f6431dce9174923bbf037d5d99d67f8', class: "stzh-timeline-item__content-inner" }, index.h("slot", { key: 'f50fa7d438ca933de82c4ffd16b1d7792d6ed491' }))))));
+        return (index.h(index.Host, { key: '585f576e4b0060403d8ed7ee816e38fe1254c0d7', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, index.h("div", { key: '72d6d85874e84b6e9b9b02f7bbe6dda54509fee9', class: classes }, index.h(Heading, { key: '1bf8352b5de6822daa9da6f97db72e2d3da8a776', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, index.h("button", { key: '38e5e7d70da02a2809dc56d111d90976857ec6d9', 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 }, index.h("span", { key: 'de1ac99fde3c3da9e6c451d8b05edb424dda9acf', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed ? (index.h("span", { class: "stzh-timeline-item__bullet-icon-wrapper" }, this.icon || this.completed ? (index.h("stzh-icon", { class: "stzh-timeline-item__bullet-icon", name: this.icon ? this.icon : "checkmark" })) : (index.h("slot", { name: "icon" })))) : (index.h("span", { class: "stzh-timeline-item__bullet-text" }, this.step)), (this.badge || this.badgeEmpty) && (index.h("stzh-badge", { key: 'fe474c881583b07fdac2557e130faa3aacc28dae', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType }))), index.h("div", { key: '53f1fbc02b92702eb0e828046778c0940f66bc0c', class: "stzh-timeline-item__button-inner" }, index.h("span", { key: '0002dcf2170e9affde99d43f6174f45edb2e8741', class: "stzh-timeline-item__button-text" }, index.h("span", { key: '026146d523f8d2a5c9e6e761b17eb504ced40cfc', class: "stzh-timeline-item__heading-text" }, this.heading), index.h("span", { key: 'e09e724a53cbe9c54d8ecf9e542ca9117ba8b658', class: "stzh-timeline-item__description" }, this.description)), this._foldable && index.h("span", { key: '689aa6fb5e12eba527e09b17b1c2f78d27d22f60', class: "stzh-timeline-item__button-icon" })))), index.h("div", { key: '201a0d917113671d9046df8d11fdbb15b05bded0', id: `${this.timelineItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-timeline-item__content", "aria-labelledby": `${this.timelineItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, index.h("div", { key: '3fa9050d7126197c576a840548a0a36a999d8ce7', class: "stzh-timeline-item__content-inner" }, index.h("slot", { key: '17bf7ba703093363411e68644aabda76119314b8' }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -96,7 +96,7 @@ const StzhTimeline = class {
         const classes = {
             "stzh-timeline": true,
         };
-        return (index.h(index.Host, { key: '796b6e79f9c9107a8b2eae577aa5d5f6d6c29de2' }, index.h("div", { key: 'd81c4285364f6a5667cdc1537654afc971b3d28a', class: classes, role: "list" }, index.h("slot", { key: '5e3d2b3f29a6926d78e90fc0f817f30c809e295b', onSlotchange: this.handleSlotchange }))));
+        return (index.h(index.Host, { key: '40ff3261e7b53dc4c43283e5b58e450901ae555f' }, index.h("div", { key: 'fa957fc4907e9d36d5284aeb3e724e2fe7030045', class: classes, role: "list" }, index.h("slot", { key: '19745fc3fe93ebd4c44d2b4eb1055053bc71e895', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -77,7 +77,7 @@ const StzhTimepicker = class {
         const classes = {
             "stzh-timepicker": true,
         };
-        return (index.h(index.Host, { key: '23d64c805e9176c05cc4c1e7e18083c4c725c54d', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { key: 'e350b580e98cd933874a654e79de78d870a0eac8', class: classes }, index.h("stzh-dropdown", { key: 'e149513e471b6d13720c813be759571dd4cb41ef', 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 (index.h(index.Host, { key: 'a233b838c4a2ffc4a2ce074df238ad44365d85f1', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { key: '111e663038ae95668fca73370e7e48e68bce82d0', class: classes }, index.h("stzh-dropdown", { key: '8d88a94d608531465bc0b6a3079388767c0cd3c3', 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 index.getElement(this); }
     static get watchers() { return {

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

@@ -178,10 +178,10 @@ const StzhToast = class {
             "stzh-toast--has-close-hidden": this.hideClose,
             [`stzh-toast--type-${this.type}`]: !!this.type,
         };
-        return (index.h(index.Host, { key: '4e285a7dcf497ce26a1004dd5a3e4621c77b479e' }, index.h("div", { key: '0f1c35e0ded3d6dc7c25f7cc945feb51abec78df', ref: el => (this.rootElement = el), class: classes }, index.h("div", { key: 'f069ec52a332bd0b4e6806944bf51da975bd3037', class: "stzh-toast__content" }, index.h("div", { key: 'e8710ce1b9e46156b93e243f5e9aa600357dfdd5', class: "stzh-toast__icon-wrapper" }, index.h("stzh-icon", { key: '38f2e1a6c04389c9a81ceeab0f4e8110342ea603', class: "stzh-toast__icon", name: (this.type === "info" && "info-help-filled") ||
+        return (index.h(index.Host, { key: 'c4cddcb991046c55971bad61369fe88d55cc85ec' }, index.h("div", { key: 'e9f198ca43f7bdd7ea563e22e6e630a27afddc3e', ref: el => (this.rootElement = el), class: classes }, index.h("div", { key: 'abf21ad1ec3651e9e9e52f1b2799b72b3425bd67', class: "stzh-toast__content" }, index.h("div", { key: 'fc0eadf23d03c0b1951a22bb62ba3690e5a526b2', class: "stzh-toast__icon-wrapper" }, index.h("stzh-icon", { key: 'b2040c789432f36bbbb31e24c5b8675358f00dc3', 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") })), index.h("div", { key: '0b29bf666a5248d71cd5b975f74018982fbb3288', class: "stzh-toast__text-wrapper" }, index.h("div", { key: 'ff74b2c1b20d8c482fc919c52f5b0d018ce76c9e', class: "stzh-toast__label" }, this.label), index.h("div", { key: 'c28bbec7efa63f14694e57a87c71a33892357fe1', class: "stzh-toast__link" }, index.h("slot", { key: '310c29fbe610e61787339561f33f4802d57e5d1c', name: "link", onSlotchange: this.handleLinkSlotchange })))), !this.hideClose && (index.h("div", { key: '6f2b4ff2ee5c707dcba8981dd3d7c0811390c5ec', class: "stzh-toast__close-wrapper" }, index.h("stzh-button", { key: 'c9e62c85a2a25c85a8d6074aa3a52104a5360638', 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") })), index.h("div", { key: 'b6ae1a7b96bc58a17661a5b8466ceb605e11dbed', class: "stzh-toast__text-wrapper" }, index.h("div", { key: 'cfe7ebf5a2741c556484a7cef8c5320c4fb2a8e0', class: "stzh-toast__label" }, this.label), index.h("div", { key: '604fd967e474f5eab5ba4557b77b03e11390ae80', class: "stzh-toast__link" }, index.h("slot", { key: '30b1ad692cd7f968ac86686ef45702c1b2bacea2', name: "link", onSlotchange: this.handleLinkSlotchange })))), !this.hideClose && (index.h("div", { key: '3e59560a0ffd1f7054d5fbfbdf0a9f4722ca0765', class: "stzh-toast__close-wrapper" }, index.h("stzh-button", { key: '858a808cf4570cdd7191fe34e51050aa5a94a3ed', class: "stzh-toast__close", onClick: this.onCloseButtonClick, label: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -319,7 +319,7 @@ const StzhToastbar = class {
         const classes = {
             "stzh-toastbar": true,
         };
-        return (index.h(index.Host, { key: '4866358aa55490858db9d86ecb6716c2b28d4cc1' }, index.h("div", { key: '8b5fddb39ac4c3f0ea4cc0311cc04bd68d35f490', class: classes }, index.h("slot", { key: 'b5882cb1d76b27239e7dbe68c6a07f22b37efec9', onSlotchange: this.handleSlotchange }))));
+        return (index.h(index.Host, { key: '32dd1a2f98b8799f81ce7c0c908d911f76a24da9' }, index.h("div", { key: 'ccfc286caa5b26ecafe98c65acf670d73c4d34ee', class: classes }, index.h("slot", { key: '0214733b3f0ad4af6c30eca979384f99e823314e', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -129,11 +129,11 @@ const StzhToggle = class {
             "stzh-toggle--has-description-long": descriptionLongUsed,
             [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,
         };
-        return (index.h(index.Host, { key: '2f52ff431d3962744d18c82bbc9b0de28babe4a8', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { key: 'cb4fc4b7c1bcde17fbdb6906010d3858908225ca', class: classes }, index.h("label", { key: '9e7c203c3a90a4d5f33e8dc8999e394b21de5664', class: "stzh-toggle__field-wrapper" }, index.h("input", { key: '6cf92eb95c504b6dc9143dd87a935febed3b252f', 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 }), index.h("div", { key: '8513a71a6f4b5de226dc9915942a78b2bee9c790', class: "stzh-toggle__mark" }, index.h("div", { key: 'ed61e3291d67724bc5df280ab8713a78c1bc60c6', class: "stzh-toggle__check" })), index.h("div", { key: 'ad9a926d71e4d6ace096d4d1dc52153412b02634', class: "stzh-toggle__label" }, this.label ? this.label : index.h("slot", null), !this.hideOptional && (index.h("span", { key: '8ccc288f51b0aa45abbf113dca87605f24b02cc1', class: "stzh-toggle__marker" }, index.h("span", { key: '749f6472a852e63f1e1b14d41151b75a99618a1e', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
+        return (index.h(index.Host, { key: '02aba039fd9a46d5f7e9cb43b8673333d7ae7efc', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { key: 'cfc4551a9add33319806508c9b8b0dfb485763e1', class: classes }, index.h("label", { key: '1d76ff3d2117adb9b2422921cde05be54a00b191', class: "stzh-toggle__field-wrapper" }, index.h("input", { key: '6317c472b6ed2bb6c6438865b8715a448a4804c2', 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 }), index.h("div", { key: 'bef9647f0fe9f8e0f6967a9c30bb8894c81880d4', class: "stzh-toggle__mark" }, index.h("div", { key: 'd6b3731ea0dd47ade7f8309e9df2c9410724357e', class: "stzh-toggle__check" })), index.h("div", { key: '0b27999272485a2d5f972e6f86cc9d260c6fee15', class: "stzh-toggle__label" }, this.label ? this.label : index.h("slot", null), !this.hideOptional && (index.h("span", { key: '3de8807f4eb4d99ea35807ad5591c11ff87b21ca', class: "stzh-toggle__marker" }, index.h("span", { key: '7ad87c23ad40f0d6d2440196be267d33b998d724', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), index.h("span", { key: 'b8ebf0df83f7a9efd5b78a1b5b8141d0d1d223ab', class: "stzh-toggle__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), index.h("span", { key: 'bb9de44b18c45ed9894b587f904897648bccc404', class: "stzh-toggle__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))))), index.h(stzhInputDescription.StzhInputDescription, { key: '8ab8236dd9b92b95ae185b339ea99b74bb7ef180', 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))))), index.h(stzhInputDescription.StzhInputDescription, { key: '818cf64c14ef4caa3ab19668a8922367d2b4202e', 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 index.getElement(this); }
     static get watchers() { return {

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

@@ -340,7 +340,7 @@ const StzhTooltip = class {
             [`stzh-tooltip--open`]: this.open,
             [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,
         };
-        return (index.h(index.Host, { key: '87838ae37035599b47a3f3c02c66828a0e09bf4c' }, index.h("div", { key: '4c7d24878ee2e2e3fbda8fda9c08094b3bf86112', class: classes }, index.h("div", { key: '6e0de09eba14868de4ca2cd427bea44a46a8e96c', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, index.h("slot", { key: 'df6bf753a842719e51c914c8ad077ad6da9e246b' })), this.hasTrigger("click") && (index.h("div", { key: '250e94d542ba13ec341f609042c8eeb9253c051b', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), index.h("div", { key: 'f09b34928ac656fe0b0a887e286acb3b9bd3ebbb', 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 }, index.h("div", { key: 'd2ecae763f321902927ddaa87cf8011fe1645e30', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: arrow.Arrow }), this.label && (index.h("h2", { key: 'fbbbc0885a0c0792c56fc0986b5d14ce001d3dc5', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (index.h("button", { key: 'f6e99b3033174fcde8c1350e1f5ee9044e8713ff', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, index.h("stzh-icon", { key: '45bea63efaa8deb4d78b74d1f5d332ff188b9e17', name: "close", class: "stzh-tooltip__icon" }), index.h("span", { key: '626caf1d100ad0700df70a3f7e8488ae8e5c9c90', class: "stzh-tooltip__vhidden" }, this.localization.close))), index.h("stzh-text", Object.assign({ key: '3bcf64a4055a6388db7ab4ed6dbd83baf3081a2e', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : index.h("slot", { name: "content" }))))));
+        return (index.h(index.Host, { key: '319a320b4692d056a85f4f236ab8c7d0a91471da' }, index.h("div", { key: 'e212e0c78ea90f0c1b2aefe4112e06231b40639c', class: classes }, index.h("div", { key: 'd9986f2392ee707c61ee89fa924149f107ed31e6', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, index.h("slot", { key: '835048cd5c2cc67a922150310d2b901ca9e6501e' })), this.hasTrigger("click") && (index.h("div", { key: 'd0ab075859cdbe3c2b406dc4edbfff566bd40201', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), index.h("div", { key: '115aaed58a392b29d615c606623ef9706fcadfc0', 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 }, index.h("div", { key: 'bec381430c99cfa23017786174839e0e690e9680', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: arrow.Arrow }), this.label && (index.h("h2", { key: 'b429abaf2fbc5fa2f428d18b23ef972ae7fd108d', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (index.h("button", { key: '38013ef4633638b536a8b9a5a67908a94204c671', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, index.h("stzh-icon", { key: '69f8e4e9577c578de3c5eb4a500b606d83fb7d17', name: "close", class: "stzh-tooltip__icon" }), index.h("span", { key: '155ace20c3f9db0a36071661f0532617732b4254', class: "stzh-tooltip__vhidden" }, this.localization.close))), index.h("stzh-text", Object.assign({ key: 'fd2541df397fcdaced90279b11059dd1abc3f21c', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : index.h("slot", { name: "content" }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/stzh-twocolumns.cjs.entry.js

@@ -42,7 +42,7 @@ const StzhTwocolumns = class {
             "stzh-twocolumns--has-left": leftSlotUsed,
             "stzh-twocolumns--has-right": rightSlotUsed,
         };
-        return (index.h(index.Host, { key: 'a31b89a16a09b5576f1793f35c673bf3a509a279' }, index.h("div", { key: '6cdbbb4c0c6bf7f64709e4a3d26c07998e2d8442', class: classes }, index.h("div", { key: 'f824f4fe4b9a263ea111c106399615cdb45148c4', class: "stzh-twocolumns__left" }, index.h("slot", { key: '4c4e3e7c0f2f1936a7b89b9d00f1cebd04df6f13', name: "left", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { key: '7c3080604249e6618101b9951483a6f38a6095d4', class: "stzh-twocolumns__right" }, index.h("slot", { key: '66c4bf3af8cf3ed66915693f918bacf57a1ff44b', name: "right", onSlotchange: () => index.forceUpdate(this.element) })))));
+        return (index.h(index.Host, { key: '14b4f38dd3ab3064d0a6809c15d0edc6344007b4' }, index.h("div", { key: '58f372618ec79e5870aba252a7ed95b9a905e9cb', class: classes }, index.h("div", { key: 'a31f1b2ebdab1e42b2864ab52c42c987cc7fc246', class: "stzh-twocolumns__left" }, index.h("slot", { key: '62eaf8a9dee8d89a89748ef737191c4ef81f6c3a', name: "left", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { key: '988dc8740987bfe0db122dceb689aae038401260', class: "stzh-twocolumns__right" }, index.h("slot", { key: 'ee09eeb57ba172a0027532b7f487cbab7107b436', name: "right", onSlotchange: () => index.forceUpdate(this.element) })))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-upload.cjs.entry.js

@@ -14164,9 +14164,9 @@ const StzhUpload = class {
         };
         const fileRestrictionsLocalization = this.localization.description;
         const totalFileSizeLimitLocalization = this.localization.descriptionTotalFileSizeLimit;
-        return (index.h(index.Host, { key: '0766721496688739a37a9a12f00f265484ad7237', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-invalid": (this.invalid || errorUsed) ? 'true' : 'false', "aria-describedby": ((this.invalid || errorUsed)) ? this.error : undefined, role: "group" }, index.h("stzh-toastbar", { key: 'e26cdfa239a4f3c780d8fda219f9b1444b570753' }), index.h("div", { key: '191f9f8a96371687220cf83ea98ecf32d025ba93', class: classes, ref: el => (this.dropzoneElement = el) }, index.h("div", { key: '06fc256e746e9637463cbde2a99495ff31553c34', ref: el => (this.hiddenInputContainerElement = el) }), index.h("div", { key: '1b51da72e63bb1f39ab0a111e5bca23f1e1cd146', id: `${this.uploadId}-label` }, this.label && index.h("div", { key: '580a73afe3de86bcaaf6c436559e7ccf6abf7290', class: "stzh-upload__label" }, this.label)), index.h("div", { key: '89de1b6bd329d8da6739f5b7b5714c1157df0b89', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, index.h("div", { key: '715c9bf30e01d19c6d972c3002fa33c953932f12', class: "stzh-upload__heading-wrapper" }, index.h("div", { key: 'cd8948abf27993e3c84d6da677d801eff6b760d8', class: "stzh-upload__heading-inner-wrapper" }, index.h("div", { key: '1337eac6e780afd7bdf27072abd113e45234efb8', class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), index.h("div", { key: '45c96a493e360f158f9eef7f5551a2eac3f7e2a9', class: "stzh-upload__buttons-wrapper" }, index.h("stzh-button", { key: 'ef844447555a407a035839c745ac7269f30a711e', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": (this.invalid || errorUsed) ? 'true' : 'false', disabled: this.disabled }, index.h("stzh-icon", { key: 'b5fdc2e14675154ca544eda3690a8c7508249e5c', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (index.h("stzh-button", { key: 'c4aeea8e538ae7b120970531e2a4cfd089af085a', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": (this.invalid || errorUsed) ? 'true' : 'false', disabled: this.disabled }, index.h("stzh-icon", { key: '237ecb43d240d28888dabbb3940cfa3bb8addd99', slot: "icon", name: "camera" })))), index.h("div", { key: '12103d86ef5ad96b56de199e8431f59d32db9624', class: "stzh-upload__hint-wrapper" }, index.h("span", { key: '2ecc5922b7a4459e1ae7bc0da7c797bed7dc2664' }, this.localization.buttonIntro)))), index.h("div", { key: '3d0bcf789f637fb4227718ae6c41c37699be4cec', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, index.h("p", { key: '6ae0d68f5833d351da05f7006e5760ab77fc845f' }, this.description && (index.h("span", { key: 'd9233597c2ad9650f0ba35b8b41195510fd3fbcd', class: "stzh-upload__instructions__description" }, this.description, index.h("br", { key: '5cc9acd47bf71692d264a49c8b1ecfb1a3ea8201' }))), fileRestrictionsLocalization
+        return (index.h(index.Host, { key: '8fd0d6e131fa0f4e1c1980a545e2458157d7309e', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-invalid": (this.invalid || errorUsed) ? 'true' : 'false', "aria-describedby": ((this.invalid || errorUsed)) ? this.error : undefined, role: "group" }, index.h("stzh-toastbar", { key: 'c59f2382e959b3f6693b3a5ac50f018c21d99fe9' }), index.h("div", { key: 'db9405f89abac268d864acb52d9f815656682f0e', class: classes, ref: el => (this.dropzoneElement = el) }, index.h("div", { key: '90e1d097ede950004e06e8e62b3bb1de8999a96e', ref: el => (this.hiddenInputContainerElement = el) }), index.h("div", { key: '02e231eb4ea2092be0d2035bac757dc4b70e3153', id: `${this.uploadId}-label` }, this.label && index.h("div", { key: '533aa81de372947ddde91292063d246684f5b976', class: "stzh-upload__label" }, this.label)), index.h("div", { key: '256bcf36e0f415917c913a726bcffdb0d5618b3b', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, index.h("div", { key: '939cc665dd20738cccf4dc12e61450d50d2519bd', class: "stzh-upload__heading-wrapper" }, index.h("div", { key: 'a3ad11bfa4ce7cec9e696d7f883533e4f762bd33', class: "stzh-upload__heading-inner-wrapper" }, index.h("div", { key: 'a710c3e394e12720a8807d9759b87e4bfa6b3281', class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), index.h("div", { key: '8c0004875cbb217527a2c3419328b616f003a3ca', class: "stzh-upload__buttons-wrapper" }, index.h("stzh-button", { key: '026548c04f826bc544e6b3681c4c4c222d0ec6e3', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": (this.invalid || errorUsed) ? 'true' : 'false', disabled: this.disabled }, index.h("stzh-icon", { key: 'df0095ab8ac82207ee52dd15933fb7092ad25594', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (index.h("stzh-button", { key: '201db7c288bffbce346dcf682381ae19e751fec6', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": (this.invalid || errorUsed) ? 'true' : 'false', disabled: this.disabled }, index.h("stzh-icon", { key: '215682cd5e04fe62411faad703d2091148befdd7', slot: "icon", name: "camera" })))), index.h("div", { key: 'b02e09c4c4df968cb08a8fd8e54565a8d044c2fc', class: "stzh-upload__hint-wrapper" }, index.h("span", { key: 'ad49b9e9bc643fd8e148368cff80596fcb236d22' }, this.localization.buttonIntro)))), index.h("div", { key: '8386559ae9d16ba721b8ee8fd5f04b4f67f22745', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, index.h("p", { key: 'db59219d19bcee448a52c378d0663260e6789c8f' }, this.description && (index.h("span", { key: '4732f7b9cb409f611993c5b44764a1afa94a9035', class: "stzh-upload__instructions__description" }, this.description, index.h("br", { key: '29a86d082a30393246398aa3a19866cb60dd260d' }))), fileRestrictionsLocalization
             .replace("{{fileformats}}", this.acceptedFiles)
-            .replace("{{filesize}}", `${this.maxFilesize}`), index.h("br", { key: 'b8f81b19d0efd394933e96cc1d57403ea590f5b3' }), totalFileSizeLimitLocalization.replace("{{maxFilesizeTotal}}", `${this.maxFilesizeTotal}`)))), errorUsed && (index.h("div", { key: '699afde201ccea28911ddd74d09883a2ca97aac6', class: "stzh-upload__description-wrapper" }, index.h(stzhInputDescription.StzhInputDescription, { key: '9b47713e26b1117257874fea6c7f17896f034b0e', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))), index.h("div", { key: '6eeaa333954312684ae67b0b37e9a7aecb1b514c', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, index.h("div", { key: 'ef4aaefd237c67cdfa46e7b9ba53a0b4e07b7c93', class: "stzh-upload__previews-inner-wrapper" }, index.h("div", { key: '17d82d776b9b952d11f1d4da0cf541f16a299153', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), index.h("div", { key: 'cfcab6b49e0a0aa6fcfd467052b0794a185bdf4e', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (index.h("div", { key: 'f6e63cef5ecd0470b70c1dbaa9a612a4d860dfec', class: "stzh-upload__previews-message-wrapper" }, index.h("stzh-message", { key: '0575d5ddd657a762db0495b0219628e1fdb514ec', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, index.h("stzh-text", { key: '369b5e61f927b63f027a043e732997df6902a978' }, index.h("p", { key: 'acb15918cec4cadddda4e0eeaf227065a49adba6' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), index.h("p", { key: 'fbbafbebc4ddcd74978e73fc916d4fe49e7feb24' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (index.h("div", { key: 'c985529470134f66c18b3f415ccc24e975a98cf9', class: "stzh-upload__previews-message-wrapper" }, index.h("stzh-message", { key: '2437b78461fbecac9af59d1a500e1b16c9898a78', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, index.h("stzh-text", { key: 'aeb61d001253efc79e398e98c210434b97a80561' }, index.h("p", { key: 'dd8b05e1cfb1eff8efb23bf6982d9d6e37d077f5' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), index.h("stzh-dialog", { key: '30e863ba7ce72c0e1a5e69af5c6d4cc29355497a', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, index.h("stzh-button", { key: 'c5697702bd91b3b1d0eaf15ff3da779a063e30ba', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (index.h(index.Fragment, { key: '34551fd2e9cbc19b0fe3503260f2b488c9b95a40' }, index.h("div", { key: 'e32c6dc86d0f17daadf700dd4bf23fc2bcdb2f85', class: "stzh-upload-photographing__info" }, index.h("div", { key: '365ccf523210e216e708d6b8471f5f7f5e2057e0', class: "stzh-upload-photographing__text-qrcode" }, index.h("div", { key: 'd173332b53742f5b69e41a5cd319de9a83831640', class: "stzh-upload-photographing-qrlink-container" }, index.h("stzh-text", { key: 'fd67360998eefcdec3dc69d351fc4cbe5a58676d' }, this.localization.photographingText1)), index.h("div", { key: '30330780023f898c1318ee0d6cc210e74ba9d27f', class: "stzh-upload-photographing-qrcode-container" }, index.h("canvas", { key: 'f0f86fd8dd6f35d8c19f6f2ff31dc81494a67d82', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), index.h("div", { key: 'd10a383c0ae58f75a1a6c48154b3a789dbf64635', class: "stzh-upload-photographing__info" }, index.h("stzh-heading", { key: '3b6e23a897f9fe7e4e44c4aef9d0e6653173ad86', level: "3" }, this.localization.photographingTitle2), index.h("stzh-text", { key: 'd289114a6c6e936a182dea43610adeae331ae662' }, this.localization.photographingText2)), index.h("div", { key: '6a368e531963eeb5c415f1eaecf66f2f1ec758a9', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (index.h("stzh-link", { key: '4ba8466c6b3ca0c9da73c5b74901392fffdd072d', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
+            .replace("{{filesize}}", `${this.maxFilesize}`), index.h("br", { key: 'a754be930a2397978c2ba85fb599e7345f130599' }), totalFileSizeLimitLocalization.replace("{{maxFilesizeTotal}}", `${this.maxFilesizeTotal}`)))), errorUsed && (index.h("div", { key: 'f1a3639d01adc489d118e72176a4ec9c6ebff265', class: "stzh-upload__description-wrapper" }, index.h(stzhInputDescription.StzhInputDescription, { key: 'dfa85a8c18e074759ff6b6d61df8f1f2a833f50e', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))), index.h("div", { key: 'fcebc3f00e07b7acae09bc11650cc021aacaf5e6', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, index.h("div", { key: 'fb22a546281e00c5ca02ebb6423a4a49cd9c5845', class: "stzh-upload__previews-inner-wrapper" }, index.h("div", { key: 'efa5f2358dbe82f6aec0526134b7d643d7bd2775', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), index.h("div", { key: '77a1c90395beee627ae0938ffd52b2b5f9b88cd5', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (index.h("div", { key: 'bf3646edcf70a58f40de1b06ebe284ecd3911f16', class: "stzh-upload__previews-message-wrapper" }, index.h("stzh-message", { key: '929eb4a24db19d85608e07bfc4d69968506fd126', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, index.h("stzh-text", { key: 'e319ae131132fb332042e41e3a0816c722a8518e' }, index.h("p", { key: '834eb58329c47c1242827ec74098c61632e4327d' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), index.h("p", { key: 'faa64c92c242b4f8860c110ba633eb3b3993eada' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (index.h("div", { key: 'c0eef09f970e984aedd28cf79bd15c6141af6ade', class: "stzh-upload__previews-message-wrapper" }, index.h("stzh-message", { key: '72754f9bb6e82a470ed8b31a09f649a6c0449f3b', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, index.h("stzh-text", { key: 'c1ed543c5c0f8906190e82b767a4647d9ae95602' }, index.h("p", { key: '0ad9f92e3e5b0c7bea24b73462a8776550e89d79' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), index.h("stzh-dialog", { key: '2b20ffdbb1d6f999b63b83c4154201eeb8d477c0', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, index.h("stzh-button", { key: 'f1b59876ec98c4fe3981a3b2ea9b4456f683edb0', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (index.h(index.Fragment, { key: 'b64212a799240976d7013be0f148f5aaa8c0bca8' }, index.h("div", { key: 'd007fdf97274102656e29c53cc453c7aaf026d75', class: "stzh-upload-photographing__info" }, index.h("div", { key: '70a3806f3817f63fd43e6f7db88489f601aec58c', class: "stzh-upload-photographing__text-qrcode" }, index.h("div", { key: '63cc562e8ee6ebdbad72db34df7125641734d6b9', class: "stzh-upload-photographing-qrlink-container" }, index.h("stzh-text", { key: '54233b37cbd691e85aa5cf762511b46c39cf7de6' }, this.localization.photographingText1)), index.h("div", { key: 'b86b7dbf29bfa3e4d6365f65ab23dfdaca99825e', class: "stzh-upload-photographing-qrcode-container" }, index.h("canvas", { key: 'bcc7010a7093ed54e4ebfba60d720e23beb69bd9', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), index.h("div", { key: 'c51cbd074026995b3aeb691d91b1cb43b8c6fd72', class: "stzh-upload-photographing__info" }, index.h("stzh-heading", { key: '3baf7c3894729a1bad4598a40c6ab5d846affcf5', level: "3" }, this.localization.photographingTitle2), index.h("stzh-text", { key: '69d07fab8681f54b6a04274396df26984be0401f' }, this.localization.photographingText2)), index.h("div", { key: '738375e9288b980fa5c9129d12707d93207982f0', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (index.h("stzh-link", { key: '9735296285059ee69e4b18f9ffefe40759db7b4f', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
     }
     get uploadEl() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/stzh-visuallyhidden.cjs.entry.js

@@ -12,9 +12,9 @@ const StzhVisuallyhidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5efe88b7c36147b645a0a310c4a42b7d8a3b49db' }, index.h("div", { key: '048a21d52119e1b54111001c1a3db47e56d1bfb7', class: {
+        return (index.h(index.Host, { key: '6629b465b028da51c18b78db9e5f8a22cbd205b6' }, index.h("div", { key: '48efb916ba2298ff0f3377c7b70569deb33f56cd', class: {
                 "stzh-visuallyhidden": true,
-            } }, index.h("slot", { key: '8fadc896fcae1b5413a5c8e61b4b10bd94696133' }))));
+            } }, index.h("slot", { key: '10c87f908a94be919483b4cccf972137d76986fe' }))));
     }
 };
 StzhVisuallyhidden.style = StzhVisuallyhiddenStyle0;

package/dist/cjs/stzh-vspace.cjs.entry.js

@@ -24,11 +24,11 @@ const StzhVspace = class {
         this.border = "none";
     }
     render() {
-        return (index.h(index.Host, { key: 'bab7418583bd72e9dc5723bf8d04af8ad428cd93' }, index.h("div", { key: '2e6e8ad81fa7674b903de0b895711d1fa60d2137', class: {
+        return (index.h(index.Host, { key: '2ac0b7e1bc63830132d47b1022575c0a8299796c' }, index.h("div", { key: 'd4283d3f6a82e7ed5a63d3fd5a793c8828af03d1', class: {
                 "stzh-vspace": true,
                 [`stzh-vspace--justify-${this.justify}`]: !!this.justify,
                 [`stzh-vspace--items-${this.items}`]: !!this.items,
-            } }, index.h("slot", { key: '6b7e027cfe5b6cf9b3935bd4f3ca303ff142737c' }))));
+            } }, index.h("slot", { key: 'b6bf4255d0842361a60c70dcbf0d0b5c6370578b' }))));
     }
 };
 StzhVspace.style = StzhVspaceStyle0;