@oiz/stzh-components 4.6.0-beta3 → 4.6.0

package/dist/components/stzh-skin-portal-mitwirken.js.map

@@ -1 +1 @@
-{"file":"stzh-skin-portal-mitwirken.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,gr6PAAgr6P,CAAC;AACpt6P,sCAAe,0BAA0B;;MCQ5BA,yBAAuB;;;;;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,OAAO,EAAC,IAAI,sDAAQ,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSkinPortalMitwirken"],"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.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,q36PAAq36P,CAAC;AACz56P,sCAAe,0BAA0B;;MCQ5BA,yBAAuB;;;;;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,OAAO,EAAC,IAAI,sDAAQ,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSkinPortalMitwirken"],"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/components/stzh-skin-storybook-preview.js

@@ -13,7 +13,7 @@ const StzhSkinStorybookPreview$1 = /*@__PURE__*/ proxyCustomElement(class StzhSk
         console.log(this.constructor.style.replace('@charset "UTF-8";', ""));
     }
     render() {
-        return h(Host, { key: 'ec7727f498a8c1686410cbeac929e27fb621050f' });
+        return h(Host, { key: '1e2e4834ed2c8d5b6871799c307c7c9006973fcd' });
     }
     static get style() { return StzhSkinStorybookPreviewStyle0; }
 }, [0, "stzh-skin-storybook-preview"]);

package/dist/components/stzh-skiplink.js

@@ -88,7 +88,7 @@ const StzhSkiplink$1 = /*@__PURE__*/ proxyCustomElement(class StzhSkiplink exten
         }
     }
     render() {
-        return (h(Host, { key: '091a7298ed30636dfcc8bc7fc0ad34465293f0ad', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, 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 }, h("div", { key: '4443ffd049012977e1887f3340442eaeeb36b135', ref: el => (this.text = el) }, this.label ? this.label : h("slot", null)))));
+        return (h(Host, { key: '20df16d529408855cc20dc96a2315d913f94e443', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, 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 }, h("div", { key: 'a0b1f2d532f88b8eaf6ba31860b9a9124c05460f', ref: el => (this.text = el) }, this.label ? this.label : h("slot", null)))));
     }
     get element() { return this; }
     static get style() { return StzhSkiplinkStyle0; }

package/dist/components/stzh-socialmediastream-item.js

@@ -1,4 +1,4 @@
-import { S as StzhSocialmediastreamItem$1, d as defineCustomElement$1 } from './p-06fdd62d.js';
+import { S as StzhSocialmediastreamItem$1, d as defineCustomElement$1 } from './p-79436c88.js';
 
 const StzhSocialmediastreamItem = StzhSocialmediastreamItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-socialmediastream.js

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-f4adb3cd.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$6 } from './p-700a2919.js';
-import { d as defineCustomElement$5 } from './p-a2659715.js';
-import { d as defineCustomElement$4 } from './p-ae5316c9.js';
-import { d as defineCustomElement$3 } from './p-06fdd62d.js';
-import { d as defineCustomElement$2 } from './p-8faab692.js';
+import { d as defineCustomElement$6 } from './p-694da289.js';
+import { d as defineCustomElement$5 } from './p-60d4ef07.js';
+import { d as defineCustomElement$4 } from './p-955f381a.js';
+import { d as defineCustomElement$3 } from './p-79436c88.js';
+import { d as defineCustomElement$2 } from './p-519479b8.js';
 
 var MiniMasonry = function(conf) {
     this._sizes             = [];
@@ -321,7 +321,7 @@ const StzhSocialmediastream$1 = /*@__PURE__*/ proxyCustomElement(class StzhSocia
             "stzh-socialmediastream": true,
             "stzh-socialmediastream--has-heading": headingSlotUsed || !!this.heading,
         };
-        return (h(Host, { key: '25e3d78f36e67179b7a479128d056887b31bcc3c' }, h("div", { key: '0519123771c379913f75a78385fe2f96fdabde45', class: classes }, h("div", { key: '657182f2f7eb9f3d4ecec771e2e2a7c6c54d03f3', class: "stzh-socialmediastream__heading" }, !!this.heading ? (h("stzh-heading", { level: this.headingLevel }, this.heading)) : (h("slot", { name: "heading" }))), h("div", { key: '21d37e1c527ce78a53af6268464e490823a22aaa', class: "stzh-socialmediastream__items" }, this._items &&
+        return (h(Host, { key: '37614065033faca52899dc2397bc9ddbf441dce8' }, h("div", { key: '3a91a20a3b9185e4ae6b7f7ea0c4176e23abf0e6', class: classes }, h("div", { key: '47aa03e66068a5c2d09b495a50405ab57752a8d8', class: "stzh-socialmediastream__heading" }, !!this.heading ? (h("stzh-heading", { level: this.headingLevel }, this.heading)) : (h("slot", { name: "heading" }))), h("div", { key: 'dacc4e9ce1230877418083123617fac1395fcc78', class: "stzh-socialmediastream__items" }, this._items &&
             this._items.length &&
             this._items.map(item => (h("stzh-socialmediastream-item", { class: "stzh-socialmediastream__item", item: item })))))));
     }

package/dist/components/stzh-sortable.js

@@ -1,4 +1,4 @@
-import { S as StzhSortable$1, d as defineCustomElement$1 } from './p-5c9d22b6.js';
+import { S as StzhSortable$1, d as defineCustomElement$1 } from './p-c032bedc.js';
 
 const StzhSortable = StzhSortable$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-space.js

@@ -1,4 +1,4 @@
-import { S as StzhSpace$1, d as defineCustomElement$1 } from './p-2035f3fc.js';
+import { S as StzhSpace$1, d as defineCustomElement$1 } from './p-6d08555b.js';
 
 const StzhSpace = StzhSpace$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-status.js

@@ -1,4 +1,4 @@
-import { S as StzhStatus$1, d as defineCustomElement$1 } from './p-b6a6ff54.js';
+import { S as StzhStatus$1, d as defineCustomElement$1 } from './p-49d51921.js';
 
 const StzhStatus = StzhStatus$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-stepper-item.js

@@ -1,4 +1,4 @@
-import { S as StzhStepperItem$1, d as defineCustomElement$1 } from './p-69f3b8e3.js';
+import { S as StzhStepperItem$1, d as defineCustomElement$1 } from './p-99c93f51.js';
 
 const StzhStepperItem = StzhStepperItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-stepper.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-8f01554b.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-f4adb3cd.js';
-import { d as defineCustomElement$3 } from './p-a2659715.js';
-import { d as defineCustomElement$2 } from './p-69f3b8e3.js';
+import { d as defineCustomElement$3 } from './p-60d4ef07.js';
+import { d as defineCustomElement$2 } from './p-99c93f51.js';
 
 const stzhStepperCss = ".sc-stzh-stepper-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-stepper-h,[stzh-hidden].sc-stzh-stepper-h{display:none}.sc-stzh-stepper-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-stepper-h *.sc-stzh-stepper,.sc-stzh-stepper-h *.sc-stzh-stepper::before,.sc-stzh-stepper-h *.sc-stzh-stepper::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-stepper-h .has-focus.sc-stzh-stepper{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-stepper-h .stzh-fylingfocus-focused.sc-stzh-stepper{outline-style:none !important}.sc-stzh-stepper-h .stzh-fylingfocus-focused.sc-stzh-stepper::-moz-focus-inner{border:0 !important}.sc-stzh-stepper-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-stepper-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-stepper.sc-stzh-stepper{position:relative;z-index:0;overflow:hidden}.stzh-stepper__items.sc-stzh-stepper{display:flex;flex-wrap:nowrap}.stzh-stepper__item.sc-stzh-stepper{flex-grow:1;flex-shrink:1;flex-basis:0}";
 const StzhStepperStyle0 = stzhStepperCss;
@@ -167,13 +167,13 @@ const StzhStepper$1 = /*@__PURE__*/ proxyCustomElement(class StzhStepper extends
             "stzh-stepper": true,
             [`stzh-stepper--index-${this.index}`]: !!this.index,
         };
-        return (h(Host, { key: '473ab777a6a95f31a1cb374a926cb7d7782f3223', style: {
+        return (h(Host, { key: '5ef938d68fca7a18b83222538cda0ecef2d948e0', style: {
                 "--steps": this.currentSteps ? this.currentSteps.toString() : null,
-            } }, h("div", { key: '4dd332ef95fe107bba4a96ceeb82bd2d7bd13f8c', class: classes }, h("div", { key: 'dfece9ddf0162dd1ee3c4e923b90273233d8d55a', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => (h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled, onStzhClick: (e) => {
+            } }, h("div", { key: '8271667503e6530bf78f033580917a4e81a60067', class: classes }, h("div", { key: '775b68d4f7da410bde0962b0375b65e594431786', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => (h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled, onStzhClick: (e) => {
                 this.handleStepClick(e);
             }, onStzhDottedClick: (e) => {
                 this.handleStepClick(e);
-            }, class: "stzh-stepper__item" })))), h("slot", { key: 'cdf95e09a40a83e58f652d1d3729e8b6823a50a0' })))));
+            }, class: "stzh-stepper__item" })))), h("slot", { key: '3b5085e0622c76ea384f615547abb30f1b00a4a5' })))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/stzh-sticky-actions.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, f as forceUpdate, d as Host } from './p-8f01554b.js';
-import { t as throttle_1, d as defineCustomElement$2 } from './p-2c788dcd.js';
+import { t as throttle_1, d as defineCustomElement$2 } from './p-38c15f74.js';
 import { h as hasSlot } from './p-289f5de2.js';
 
 const stzhStickyActionsCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--gap:var(--stzh-space-small);--sticky-padding-bottom:var(\n    --stzh-sticky-actions-sticky-padding-bottom,\n    var(--stzh-space-small)\n  );--stuck-offset:calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px) +\n      var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  )}@media screen and (min-width: 900px){:host{--sticky-padding-bottom:var(\n      --stzh-sticky-actions-sticky-padding-bottom,\n      var(--stzh-space-medium)\n    )}}@media print{:host{display:none}}.stzh-sticky-actions{}.stzh-sticky-actions__container{display:flex;justify-content:flex-end;transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky-actions__sticky{--padding-top:0px;--padding-bottom:var(--sticky-padding-bottom)}.stzh-sticky-actions__sticky[is-stuck-bottom] .stzh-sticky-actions__container{transform:translateY(calc(var(--stuck-offset) / -1))}.stzh-sticky-actions__scrollup-wrapper{transition-property:transform, opacity, visibility;transition-duration:var(--stzh-base-transition-animation-speed);opacity:0;visibility:hidden;transform:translateX(var(--stzh-sticky-actions-scrollup-width, 44px))}.stzh-sticky-actions.has-chat .stzh-sticky-actions__scrollup-wrapper{transform:translateX(calc(var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap)))}.stzh-sticky-actions.has-scrollup .stzh-sticky-actions__chat-wrapper{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))))}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__scrollup-wrapper{opacity:1;visibility:visible;transform:translateX(0px)}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__chat-wrapper{transform:translateX(calc(var(--gap) / -1))}.stzh-sticky-actions.is-not-slotted{height:0}";
@@ -58,7 +58,7 @@ const StzhStickyActions$1 = /*@__PURE__*/ proxyCustomElement(class StzhStickyAct
             "has-active-scrollup": this.hasActiveScrollup,
             "is-not-slotted": !this.isSlotted,
         };
-        return (h(Host, { key: '1c3e8e1f9e5a9457d92c7aa021fd5702bd4f9c76' }, h("div", { key: '3f642d502844e3ff37712dcd2f3dcdb66830e68b', class: classes, "data-stzh-sticky-width-container": true }, h("stzh-sticky", { key: '3d97d8ede163f1d8ef30a5e8c94abe5c6fe08758', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, h("div", { key: 'f1e0442f2acad77e7d63b06a4be6b370b0df27a2', class: "stzh-sticky-actions__container" }, h("div", { key: '5906232c13a31beebc4312bd1fb613145226175b', class: "stzh-sticky-actions__chat-wrapper" }, h("slot", { key: '3e4a30dafb3b4261a4918089c6e24b0ff39b86da', name: "chat", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '4ae2ed770b028bf813a1ebcd613b685395b35363', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, h("slot", { key: 'fa876a9e7447aff4a27f7df16aed881811ce11d2', name: "scrollup", onSlotchange: () => forceUpdate(this.element) })))))));
+        return (h(Host, { key: 'f31d75f7255b737884b7e943b83d417db2e1d065' }, h("div", { key: '245a6df8bf6bc9abb09d36248d2755fb307121c4', class: classes, "data-stzh-sticky-width-container": true }, h("stzh-sticky", { key: '6b2591cca8e1cc8b43f30b1d07f96ec5e3a97e9a', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, h("div", { key: '4064bd01b926e272fe764719a5965e109207b9b3', class: "stzh-sticky-actions__container" }, h("div", { key: '15d4a428c8e1634319688d9833e88ba4a315ce52', class: "stzh-sticky-actions__chat-wrapper" }, h("slot", { key: 'df627cce54c13126c8632e00d396472904cd4230', name: "chat", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '366fb6c417c8eb70ce981d5db8db28cc77a019f4', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, h("slot", { key: 'adc63bed8d080c5832e918cdb26f3193f605e46d', name: "scrollup", onSlotchange: () => forceUpdate(this.element) })))))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/stzh-sticky.js

@@ -1,4 +1,4 @@
-import { S as StzhSticky$1, d as defineCustomElement$1 } from './p-2c788dcd.js';
+import { S as StzhSticky$1, d as defineCustomElement$1 } from './p-38c15f74.js';
 
 const StzhSticky = StzhSticky$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-table.js

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

package/dist/components/stzh-tag.js

@@ -1,4 +1,4 @@
-import { S as StzhTag$1, d as defineCustomElement$1 } from './p-593ca1a7.js';
+import { S as StzhTag$1, d as defineCustomElement$1 } from './p-04567f95.js';
 
 const StzhTag = StzhTag$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-text.js

@@ -1,4 +1,4 @@
-import { S as StzhText$1, d as defineCustomElement$1 } from './p-8faab692.js';
+import { S as StzhText$1, d as defineCustomElement$1 } from './p-519479b8.js';
 
 const StzhText = StzhText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-textandimage.js

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

package/dist/components/stzh-timeline-item.js

@@ -2,8 +2,8 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { w as waitForEvent } from './p-70ec7e79.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-2c0bec3e.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$3 } from './p-42e86bbd.js';
-import { d as defineCustomElement$2 } from './p-a2659715.js';
+import { d as defineCustomElement$3 } from './p-b8fda153.js';
+import { d as defineCustomElement$2 } from './p-60d4ef07.js';
 
 const stzhTimelineItemCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--content-padding-bottom:var(--stzh-space-medium);--trigger-size:1.125rem;--icon-size:var(--stzh-icon-size);--description-color:var(--stzh-color-black);--heading-margin-bottom:var(--stzh-space-medium);--button-color:var(--stzh-color-primary70);--button-background-color:transparent;--button-font-size:var(\n    --stzh-timeline-nested-button-font-size,\n    var(--stzh-font-milli-font-size)\n  );--button-line-height:var(\n    --stzh-timeline-nested-button-line-height,\n    var(--stzh-font-milli-heading-line-height)\n  );--button-letter-spacing:var(\n    --stzh-timeline-nested-button-line-height,\n    normal\n  );--bullet-color:var(--stzh-color-primary70);--bullet-background-color:var(--stzh-color-grey20);--content-padding-top:var(--stzh-timeline-content-padding-top);--content-padding-right:0px;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}@media screen and (min-width: 600px){:host{--content-padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--content-padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--content-padding-bottom:var(--stzh-space-xxlarge)}}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media screen and (min-width: 600px){:host{--button-font-size:var(\n      --stzh-timeline-nested-button-font-size,\n      var(--stzh-font-centi-font-size)\n    );--button-line-height:var(\n      --stzh-timeline-nested-button-line-height,\n      var(--stzh-font-centi-heading-line-height)\n    )}}:host(:where([is-foldable])){--button-background-color:var(--stzh-color-grey10);--bullet-color:var(--stzh-color-black);--bullet-background-color:var(--stzh-color-secondary20);--hover-button-background-color:var(--stzh-color-grey20);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable])){--button-color:Highlight;--hover-button-color:Highlight}}:host(:where([open]:not([open=false]))){--heading-margin-bottom:0px}:host(:where([is-foldable][open]:not([open=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-primary70);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable][open]:not([open=false]))){--button-color:SelectedItem;--bullet-color:SelectedItem;--hover-button-color:SelectedItem;--hover-bullet-color:SelectedItem}}:host(:where([completed]:not([completed=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-secondary60);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}:host(:where([is-foldable][open]:not([open=false]))){--hover-bullet-background-color:var(--stzh-color-secondary70)}:host(:where([disabled]:not([disabled=false]))){--button-color:var(--stzh-color-grey80);--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-grey60);--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}.stzh-timeline-item{display:flex;flex-direction:column;}.stzh-timeline-item__heading{position:relative;margin:0}.stzh-timeline-item__button{font-size:var(--button-font-size);line-height:var(--button-line-height);letter-spacing:var(--button-letter-spacing);font-family:inherit;width:100%;appearance:none;background-color:transparent;padding:0;border:none;display:flex;color:var(--button-color);text-align:left;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:default}.stzh-timeline-item__button:hover{color:var(--hover-button-color)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button{transition:none}}.stzh-timeline-item__button-inner{display:flex;flex-grow:1;align-items:center;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall);background-color:var(--button-background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);min-height:var(--stzh-timeline-bullet-size);padding-left:var(--stzh-space-xsmall);padding-right:var(--stzh-space-small)}.stzh-timeline-item__button:hover .stzh-timeline-item__button-inner{background-color:var(--hover-button-background-color)}.stzh-timeline-item__button,.stzh-timeline-item__content-inner{padding-left:var(--stzh-timeline-bullet-size)}.stzh-timeline-item__button-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);flex-grow:1}.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xsmall);align-self:flex-start;position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xlarge)}}.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--trigger-size);height:0.15625rem;transition-property:transform;transition-duration:500ms;transform-origin:top left;background-color:currentColor}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{background-color:CanvasText}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{transition:none}}.stzh-timeline-item__button-icon::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-timeline-item__button-icon::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-timeline-item__bullet{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:absolute;top:0;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--stzh-timeline-bullet-size);height:var(--stzh-timeline-bullet-size);color:var(--bullet-color);background-color:var(--bullet-background-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__bullet{transition:none}}.stzh-timeline-item__button:hover .stzh-timeline-item__bullet{color:var(--hover-bullet-color);background-color:var(--hover-bullet-background-color)}.stzh-timeline-item__bullet-icon-wrapper{--stzh-icon-size:var(--icon-size);display:flex}.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xxsmall);--stzh-timeline-nested-button-font-size:var(--stzh-font-micro-font-size);--stzh-timeline-nested-button-line-height:var(\n    --stzh-font-micro-heading-line-height\n  );overflow:hidden}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-nested-button-font-size:var(--stzh-font-milli-font-size);--stzh-timeline-nested-button-line-height:var(\n      --stzh-font-milli-heading-line-height\n    )}}@media print{.stzh-timeline-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-timeline-item__content-inner{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-right:var(--content-padding-right)}.stzh-timeline-item__badge{position:absolute;right:-0.3125rem;top:-0.375rem}.stzh-timeline-item__description{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));color:var(--description-color);transition:color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-timeline-item__description{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__description{transition:none}}.stzh-timeline-item__heading{margin-bottom:var(--heading-margin-bottom);transition:margin-bottom var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__heading{transition:none}}.stzh-timeline-item__heading-text,.stzh-timeline-item__description{display:block}.stzh-timeline-item--is-foldable .stzh-timeline-item__button{cursor:pointer}.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::before,.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::after{transform:rotate(0) translate(-50%, -50%)}.stzh-timeline-item--is-disabled .stzh-timeline-item__button{cursor:not-allowed}";
 const StzhTimelineItemStyle0 = stzhTimelineItemCss;
@@ -259,7 +259,7 @@ const StzhTimelineItem$1 = /*@__PURE__*/ proxyCustomElement(class StzhTimelineIt
             "stzh-timeline-item--is-foldable": this._foldable,
             "stzh-timeline-item--is-completed": this.completed,
         };
-        return (h(Host, { key: '16a92028ad475fe4ec312a0d7ef92892e260110d', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: '3063bf6d36bc77499bca25a4906ac6034317f850', class: classes }, h(Heading, { key: '7a5657883ef91865ebc8f9c556c18fbbd95bebbd', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, 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 }, h("span", { key: '5caa4e7c38eee51e284229c57360e71b8a8fe3b5', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed ? (h("span", { class: "stzh-timeline-item__bullet-icon-wrapper" }, this.icon || this.completed ? (h("stzh-icon", { class: "stzh-timeline-item__bullet-icon", name: this.icon ? this.icon : "checkmark" })) : (h("slot", { name: "icon" })))) : (h("span", { class: "stzh-timeline-item__bullet-text" }, this.step)), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '8423cb9a152ecf3e534e7e407c249e311891f5bb', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType }))), h("div", { key: 'ce0ae73f81e283f2d42d27323b820a5f574b0582', class: "stzh-timeline-item__button-inner" }, h("span", { key: 'd582a74f1560b5e18c1f15ec5f6120151a440dd7', class: "stzh-timeline-item__button-text" }, h("span", { key: '562a2810abb95e38297b2170da4d151699df1123', class: "stzh-timeline-item__heading-text" }, this.heading), h("span", { key: '4a5b5165af7f99dd734fe317811e67691fee7975', class: "stzh-timeline-item__description" }, this.description)), this._foldable && h("span", { key: 'a9a6815e33e6bc0b6154c49d27f7c140924d04ac', class: "stzh-timeline-item__button-icon" })))), 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 }, h("div", { key: 'd404aa2c8f6431dce9174923bbf037d5d99d67f8', class: "stzh-timeline-item__content-inner" }, h("slot", { key: 'f50fa7d438ca933de82c4ffd16b1d7792d6ed491' }))))));
+        return (h(Host, { key: '585f576e4b0060403d8ed7ee816e38fe1254c0d7', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: '72d6d85874e84b6e9b9b02f7bbe6dda54509fee9', class: classes }, h(Heading, { key: '1bf8352b5de6822daa9da6f97db72e2d3da8a776', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, 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 }, h("span", { key: 'de1ac99fde3c3da9e6c451d8b05edb424dda9acf', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed ? (h("span", { class: "stzh-timeline-item__bullet-icon-wrapper" }, this.icon || this.completed ? (h("stzh-icon", { class: "stzh-timeline-item__bullet-icon", name: this.icon ? this.icon : "checkmark" })) : (h("slot", { name: "icon" })))) : (h("span", { class: "stzh-timeline-item__bullet-text" }, this.step)), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: 'fe474c881583b07fdac2557e130faa3aacc28dae', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType }))), h("div", { key: '53f1fbc02b92702eb0e828046778c0940f66bc0c', class: "stzh-timeline-item__button-inner" }, h("span", { key: '0002dcf2170e9affde99d43f6174f45edb2e8741', class: "stzh-timeline-item__button-text" }, h("span", { key: '026146d523f8d2a5c9e6e761b17eb504ced40cfc', class: "stzh-timeline-item__heading-text" }, this.heading), h("span", { key: 'e09e724a53cbe9c54d8ecf9e542ca9117ba8b658', class: "stzh-timeline-item__description" }, this.description)), this._foldable && h("span", { key: '689aa6fb5e12eba527e09b17b1c2f78d27d22f60', class: "stzh-timeline-item__button-icon" })))), 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 }, h("div", { key: '3fa9050d7126197c576a840548a0a36a999d8ce7', class: "stzh-timeline-item__content-inner" }, h("slot", { key: '17bf7ba703093363411e68644aabda76119314b8' }))))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/stzh-timeline.js

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

package/dist/components/stzh-timepicker.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$5 } from './p-bfccc4ba.js';
-import { d as defineCustomElement$4 } from './p-a2659715.js';
-import { d as defineCustomElement$3 } from './p-7121e1bf.js';
-import { d as defineCustomElement$2 } from './p-8faab692.js';
+import { d as defineCustomElement$5 } from './p-3d9ce94f.js';
+import { d as defineCustomElement$4 } from './p-60d4ef07.js';
+import { d as defineCustomElement$3 } from './p-472ab25f.js';
+import { d as defineCustomElement$2 } from './p-519479b8.js';
 
 const stzhTimepickerCss = ".sc-stzh-timepicker-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-timepicker-h,[stzh-hidden].sc-stzh-timepicker-h{display:none}.sc-stzh-timepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-timepicker-h *.sc-stzh-timepicker,.sc-stzh-timepicker-h *.sc-stzh-timepicker::before,.sc-stzh-timepicker-h *.sc-stzh-timepicker::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-timepicker-h .has-focus.sc-stzh-timepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-timepicker-h .stzh-fylingfocus-focused.sc-stzh-timepicker{outline-style:none !important}.sc-stzh-timepicker-h .stzh-fylingfocus-focused.sc-stzh-timepicker::-moz-focus-inner{border:0 !important}.sc-stzh-timepicker-h{width:100%}.stzh-timepicker__dropdown.sc-stzh-timepicker{--icon-angle-size:var(--stzh-icon-size-small);--active-icon-angle-transform:rotate(0deg) translateY(-50%)}";
 const StzhTimepickerStyle0 = stzhTimepickerCss;
@@ -78,7 +78,7 @@ const StzhTimepicker$1 = /*@__PURE__*/ proxyCustomElement(class StzhTimepicker e
         const classes = {
             "stzh-timepicker": true,
         };
-        return (h(Host, { key: '23d64c805e9176c05cc4c1e7e18083c4c725c54d', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'e350b580e98cd933874a654e79de78d870a0eac8', class: classes }, 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 (h(Host, { key: 'a233b838c4a2ffc4a2ce074df238ad44365d85f1', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '111e663038ae95668fca73370e7e48e68bce82d0', class: classes }, 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 this; }
     static get watchers() { return {

package/dist/components/stzh-toast.js

@@ -1,4 +1,4 @@
-import { S as StzhToast$1, d as defineCustomElement$1 } from './p-b1c3189a.js';
+import { S as StzhToast$1, d as defineCustomElement$1 } from './p-258d7bde.js';
 
 const StzhToast = StzhToast$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-toastbar.js

@@ -1,4 +1,4 @@
-import { S as StzhToastbar$1, d as defineCustomElement$1 } from './p-72a74fcf.js';
+import { S as StzhToastbar$1, d as defineCustomElement$1 } from './p-cb0898ca.js';
 
 const StzhToastbar = StzhToastbar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-toggle.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$4 } from './p-a2659715.js';
-import { d as defineCustomElement$3 } from './p-7121e1bf.js';
-import { d as defineCustomElement$2 } from './p-8faab692.js';
+import { d as defineCustomElement$4 } from './p-60d4ef07.js';
+import { d as defineCustomElement$3 } from './p-472ab25f.js';
+import { d as defineCustomElement$2 } from './p-519479b8.js';
 
 const stzhToggleCss = ".sc-stzh-toggle-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-toggle-h,[stzh-hidden].sc-stzh-toggle-h{display:none}.sc-stzh-toggle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-toggle-h *.sc-stzh-toggle,.sc-stzh-toggle-h *.sc-stzh-toggle::before,.sc-stzh-toggle-h *.sc-stzh-toggle::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-toggle-h .has-focus.sc-stzh-toggle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-toggle-h .stzh-fylingfocus-focused.sc-stzh-toggle{outline-style:none !important}.sc-stzh-toggle-h .stzh-fylingfocus-focused.sc-stzh-toggle::-moz-focus-inner{border:0 !important}.sc-stzh-toggle-h{display:inline-block}[disabled].sc-stzh-toggle-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-toggle__marker-symbol.sc-stzh-toggle{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-toggle__marker-text.sc-stzh-toggle{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-toggle__description-wrapper.sc-stzh-toggle{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-toggle__error.sc-stzh-toggle,.stzh-toggle__description.sc-stzh-toggle{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-toggle__error.sc-stzh-toggle{color:var(--stzh-color-error60)}.stzh-toggle__error-list.sc-stzh-toggle{list-style:none;margin:0;padding:0}.stzh-toggle__description.sc-stzh-toggle{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-toggle__description-long.sc-stzh-toggle{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-toggle__description-long.sc-stzh-toggle{margin-top:0}}.stzh-toggle__description-long-popover.sc-stzh-toggle{--width:auto;--max-width:27.3125rem}.stzh-toggle__description-long-button.sc-stzh-toggle{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-toggle.sc-stzh-toggle stzh-icon.stzh-toggle__description-long-icon.sc-stzh-toggle{--size:var(--stzh-icon-size-xsmall)}.stzh-toggle--has-error.sc-stzh-toggle .stzh-toggle__error.sc-stzh-toggle,.stzh-toggle--has-description.sc-stzh-toggle .stzh-toggle__description.sc-stzh-toggle{margin-top:var(--stzh-space-xxxsmall)}.stzh-toggle__field-wrapper.sc-stzh-toggle{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:flex;-webkit-user-select:none;user-select:none;cursor:pointer}.stzh-toggle__input.sc-stzh-toggle{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-toggle__mark.sc-stzh-toggle{position:relative;background-color:var(--stzh-color-black10op);width:2.75rem;height:1rem;flex-shrink:0;border-radius:0.75rem;display:inline-flex;justify-content:center;align-items:center;transition:background-color var(--stzh-base-transition-animation-speed);margin-top:0.25rem}.stzh-toggle__check.sc-stzh-toggle{position:absolute;border:0.125rem solid var(--stzh-base-color);width:1.5rem;height:1.5rem;border-radius:50%;background-color:var(--stzh-color-white);top:50%;left:0;transform:translate(0, -50%);transition-property:border-color, background-color, transform;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-toggle__label.sc-stzh-toggle{--stzh-base-color:initial;display:inline-block;color:var(--stzh-base-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-toggle__label.sc-stzh-toggle:empty{display:none}.stzh-toggle__marker.sc-stzh-toggle{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-old-primary48)}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary);background-color:var(--stzh-color-primary);transform:translate(100%, -50%)}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__label.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary-hover)}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary)}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary-hover)}.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-primary-hover)}.stzh-toggle--has-label-right.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-left:var(--stzh-space-xsmall)}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{flex-direction:row-reverse}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-right:var(--stzh-space-xsmall)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-error60)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-error60)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-black10op)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-error60)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{cursor:not-allowed}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-grey70)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-old-grey13)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-grey10)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-old-grey25);border-color:var(--stzh-color-old-grey25)}";
 const StzhToggleStyle0 = stzhToggleCss;
@@ -128,11 +128,11 @@ const StzhToggle$1 = /*@__PURE__*/ proxyCustomElement(class StzhToggle extends H
             "stzh-toggle--has-description-long": descriptionLongUsed,
             [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,
         };
-        return (h(Host, { key: '2f52ff431d3962744d18c82bbc9b0de28babe4a8', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'cb4fc4b7c1bcde17fbdb6906010d3858908225ca', class: classes }, h("label", { key: '9e7c203c3a90a4d5f33e8dc8999e394b21de5664', class: "stzh-toggle__field-wrapper" }, 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 }), h("div", { key: '8513a71a6f4b5de226dc9915942a78b2bee9c790', class: "stzh-toggle__mark" }, h("div", { key: 'ed61e3291d67724bc5df280ab8713a78c1bc60c6', class: "stzh-toggle__check" })), h("div", { key: 'ad9a926d71e4d6ace096d4d1dc52153412b02634', class: "stzh-toggle__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '8ccc288f51b0aa45abbf113dca87605f24b02cc1', class: "stzh-toggle__marker" }, h("span", { key: '749f6472a852e63f1e1b14d41151b75a99618a1e', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '02aba039fd9a46d5f7e9cb43b8673333d7ae7efc', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'cfc4551a9add33319806508c9b8b0dfb485763e1', class: classes }, h("label", { key: '1d76ff3d2117adb9b2422921cde05be54a00b191', class: "stzh-toggle__field-wrapper" }, 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 }), h("div", { key: 'bef9647f0fe9f8e0f6967a9c30bb8894c81880d4', class: "stzh-toggle__mark" }, h("div", { key: 'd6b3731ea0dd47ade7f8309e9df2c9410724357e', class: "stzh-toggle__check" })), h("div", { key: '0b27999272485a2d5f972e6f86cc9d260c6fee15', class: "stzh-toggle__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '3de8807f4eb4d99ea35807ad5591c11ff87b21ca', class: "stzh-toggle__marker" }, h("span", { key: '7ad87c23ad40f0d6d2440196be267d33b998d724', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'b8ebf0df83f7a9efd5b78a1b5b8141d0d1d223ab', class: "stzh-toggle__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'bb9de44b18c45ed9894b587f904897648bccc404', class: "stzh-toggle__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))))), h(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))))), h(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 this; }
     static get watchers() { return {

package/dist/components/stzh-tooltip.js

@@ -1,4 +1,4 @@
-import { S as StzhTooltip$1, d as defineCustomElement$1 } from './p-905447b5.js';
+import { S as StzhTooltip$1, d as defineCustomElement$1 } from './p-ef7cf99a.js';
 
 const StzhTooltip = StzhTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-twocolumns.js

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