@oiz/stzh-components 3.1.0 → 3.2.0-beta1

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

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

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
 const throttle = require('./throttle-d4877897.js');
-const utils = require('./utils-d0fff87f.js');
+const utils = require('./utils-d091c010.js');
 require('./debounce-c8f1f58a.js');
 require('./_commonjsHelpers-dcc4cf71.js');
 require('./string-utils-5dd70320.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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-small));--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(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-medium))}}@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))}";
+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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-small));--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(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-medium))}}@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}";
 
 const StzhStickyActions = class {
   constructor(hostRef) {
@@ -24,19 +24,19 @@ const StzhStickyActions = class {
       }
     };
     this.handleScrollupResize = throttle.throttle_1(this.updateScrollupWidth, 100);
-    this.pagetitleQuery = 'stzh-pagetitle, stzh-pagetitle-hero';
+    this.pagetitleQuery = "stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights";
     this.hasActiveScrollup = false;
+    this.isSlotted = true;
   }
   hasActiveScrollupWatcher(newValue) {
     document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-active", newValue ? "1" : "0");
     document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-not-active", newValue ? "0" : "1");
   }
   componentDidLoad() {
-    const pagetitle = typeof this.pagetitleQuery === "string"
-      ? document.querySelector(this.pagetitleQuery)
-      : this.pagetitleQuery();
+    this.isSlotted = !!this.element.assignedSlot;
+    const pagetitle = typeof this.pagetitleQuery === "string" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();
     if (pagetitle) {
-      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: "0px", });
+      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: "0px" });
       this.observer.observe(pagetitle);
     }
     requestAnimationFrame(() => {
@@ -60,8 +60,9 @@ const StzhStickyActions = class {
       "has-chat": chatSlotUsed,
       "has-scrollup": scrollupSlotUsed,
       "has-active-scrollup": this.hasActiveScrollup,
+      "is-not-slotted": !this.isSlotted,
     };
-    return (index.h(index.Host, null, index.h("div", { class: classes, "data-stzh-sticky-width-container": true }, index.h("stzh-sticky", { name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, index.h("div", { class: "stzh-sticky-actions__container" }, index.h("div", { class: "stzh-sticky-actions__chat-wrapper" }, index.h("slot", { name: "chat", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { ref: (el) => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, index.h("slot", { name: "scrollup", onSlotchange: () => index.forceUpdate(this.element) })))))));
+    return (index.h(index.Host, null, index.h("div", { class: classes, "data-stzh-sticky-width-container": true }, index.h("stzh-sticky", { name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, index.h("div", { class: "stzh-sticky-actions__container" }, index.h("div", { class: "stzh-sticky-actions__chat-wrapper" }, index.h("slot", { name: "chat", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, index.h("slot", { name: "scrollup", onSlotchange: () => index.forceUpdate(this.element) })))))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"stzh-sticky-actions.entry.cjs.js","mappings":"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","names":["throttle","hasSlot","h","Host","forceUpdate"],"sources":["src/components/stzh-sticky-actions/stzh-sticky-actions.scss?tag=stzh-sticky-actions&encapsulation=shadow","src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"sourcesContent":[":host {\n  --gap: #{space('small')};\n  --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('small')});\n\n  --stuck-offset: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: medium) {\n    --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('medium')});\n  }\n\n  // z-index: $zIndexSticky;\n  // position: fixed;\n  // right: $containerMargin;\n  // bottom: space('small');\n  // transition: transform $baseTransitionAnimationSpeed;\n  // transform:\n  //   translateY(calc((\n  //     var(--stzh-pagetitle-disturber-stuck-height, 0px)\n  //     + var(--stzh-cta-stuck-bottom-height, 0px)\n  //   ) / -1))\n  //   translateX(0);\n\n  // @include mq($from: small) {\n  //   right: $containerMarginSmall;\n  // }\n\n  // @include mq($from: medium) {\n  //   right: $containerMarginMedium;\n  // }\n\n  // @include mq($from: large) {\n  //   right: $containerMarginLarge;\n  // }\n\n  // @include mq($from: ultra) {\n  //   right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n  // }\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-sticky-actions {\n  &__container {\n    display: flex;\n    justify-content: flex-end;\n    transition-property: transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__sticky {\n    --padding-top: 0px;\n    --padding-bottom: var(--sticky-padding-bottom);\n  }\n\n  &__sticky[is-stuck-bottom] &__container {\n    transform: translateY(calc(var(--stuck-offset) / -1))\n  }\n\n  &__scrollup-wrapper {\n    transition-property: transform, opacity, visibility;\n    transition-duration: $baseTransitionAnimationSpeed;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(var(--stzh-sticky-actions-scrollup-width, 44px));\n  }\n\n  &.has-chat &__scrollup-wrapper {\n    transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))));\n  }\n\n  &.has-scrollup &__chat-wrapper {\n    transition-property: transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n    transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))));\n  }\n\n  /* Active scrollup variant */\n\n  &.has-active-scrollup &__scrollup-wrapper {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0px);\n  }\n\n  &.has-active-scrollup &__chat-wrapper {\n    transform: translateX(calc(var(--gap) / -1));\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  forceUpdate,\n  State,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for content that should stick to chat place\n */\n@Component({\n  tag: \"stzh-sticky-actions\",\n  styleUrl: \"stzh-sticky-actions.scss\",\n  shadow: true\n})\nexport class StzhStickyActions {\n  /** Query used to get pagetitle element (will show scrollup when passed). */\n  @Prop() pagetitleQuery: string | (() => HTMLElement) = 'stzh-pagetitle, stzh-pagetitle-hero';\n\n  @State() hasActiveScrollup = false;\n\n  @Element() element: HTMLStzhStickyActionsElement;\n\n  @Watch(\"hasActiveScrollup\")\n  hasActiveScrollupWatcher(newValue: boolean) {\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n  }\n\n  private observer: IntersectionObserver;\n  private resizeObserver: ResizeObserver;\n  private scrollupElement: HTMLElement;\n\n  private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n    this.hasActiveScrollup = !entries[0].isIntersecting;\n  }\n\n  private updateScrollupWidth = () => {\n    if (this.scrollupElement && this.element.isConnected) {\n      const { width } = this.scrollupElement.getBoundingClientRect();\n      document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n    }\n  }\n\n  private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n  componentDidLoad() {\n    const pagetitle = typeof this.pagetitleQuery === \"string\"\n      ? document.querySelector(this.pagetitleQuery)\n      : this.pagetitleQuery();\n\n    if (pagetitle) {\n      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\", });\n      this.observer.observe(pagetitle);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateScrollupWidth();\n\n        this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n        this.resizeObserver.observe(this.scrollupElement);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  render() {\n    const chatSlotUsed = hasSlot(this.element, \"chat\");\n    const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n    const classes = {\n      \"stzh-sticky-actions\": true,\n      \"has-chat\": chatSlotUsed,\n      \"has-scrollup\": scrollupSlotUsed,\n      \"has-active-scrollup\": this.hasActiveScrollup,\n    };\n\n    return (\n      <Host>\n        <div class={classes} data-stzh-sticky-width-container>\n          <stzh-sticky\n            name=\"actions\"\n            class=\"stzh-sticky-actions__sticky\"\n            position=\"fixed\"\n            variant=\"transparent\"\n            disableStickyTop={true}\n          >\n            <div class=\"stzh-sticky-actions__container\">\n              <div class=\"stzh-sticky-actions__chat-wrapper\">\n                <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n              <div\n                ref={(el) => (this.scrollupElement = el as HTMLElement)}\n                class=\"stzh-sticky-actions__scrollup-wrapper\"\n              >\n                <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n            </div>\n          </stzh-sticky>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-sticky-actions.entry.cjs.js","mappings":"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","names":["throttle","hasSlot","h","Host","forceUpdate"],"sources":["src/components/stzh-sticky-actions/stzh-sticky-actions.scss?tag=stzh-sticky-actions&encapsulation=shadow","src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"sourcesContent":[":host {\n  --gap: #{space('small')};\n  --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('small')});\n\n  --stuck-offset: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: medium) {\n    --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('medium')});\n  }\n\n  // z-index: $zIndexSticky;\n  // position: fixed;\n  // right: $containerMargin;\n  // bottom: space('small');\n  // transition: transform $baseTransitionAnimationSpeed;\n  // transform:\n  //   translateY(calc((\n  //     var(--stzh-pagetitle-disturber-stuck-height, 0px)\n  //     + var(--stzh-cta-stuck-bottom-height, 0px)\n  //   ) / -1))\n  //   translateX(0);\n\n  // @include mq($from: small) {\n  //   right: $containerMarginSmall;\n  // }\n\n  // @include mq($from: medium) {\n  //   right: $containerMarginMedium;\n  // }\n\n  // @include mq($from: large) {\n  //   right: $containerMarginLarge;\n  // }\n\n  // @include mq($from: ultra) {\n  //   right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n  // }\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-sticky-actions {\n  &__container {\n    display: flex;\n    justify-content: flex-end;\n    transition-property: transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__sticky {\n    --padding-top: 0px;\n    --padding-bottom: var(--sticky-padding-bottom);\n  }\n\n  &__sticky[is-stuck-bottom] &__container {\n    transform: translateY(calc(var(--stuck-offset) / -1))\n  }\n\n  &__scrollup-wrapper {\n    transition-property: transform, opacity, visibility;\n    transition-duration: $baseTransitionAnimationSpeed;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(var(--stzh-sticky-actions-scrollup-width, 44px));\n  }\n\n  &.has-chat &__scrollup-wrapper {\n    transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))));\n  }\n\n  &.has-scrollup &__chat-wrapper {\n    transition-property: transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n    transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))));\n  }\n\n  /* Active scrollup variant */\n\n  &.has-active-scrollup &__scrollup-wrapper {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0px);\n  }\n\n  &.has-active-scrollup &__chat-wrapper {\n    transform: translateX(calc(var(--gap) / -1));\n  }\n\n  /* Is not slotted */\n  &.is-not-slotted {\n    height: 0;\n  }\n}\n","import { Component, Element, forceUpdate, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for content that should stick to chat place\n */\n@Component({\n  tag: \"stzh-sticky-actions\",\n  styleUrl: \"stzh-sticky-actions.scss\",\n  shadow: true,\n})\nexport class StzhStickyActions {\n  /** Query used to get pagetitle element (will show scrollup when passed). */\n  @Prop() pagetitleQuery: string | (() => HTMLElement) =\n    \"stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights\";\n\n  @State() hasActiveScrollup = false;\n  @State() isSlotted = true;\n\n  @Element() element: HTMLStzhStickyActionsElement;\n\n  @Watch(\"hasActiveScrollup\")\n  hasActiveScrollupWatcher(newValue: boolean) {\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n  }\n\n  private observer: IntersectionObserver;\n  private resizeObserver: ResizeObserver;\n  private scrollupElement: HTMLElement;\n\n  private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n    this.hasActiveScrollup = !entries[0].isIntersecting;\n  };\n\n  private updateScrollupWidth = () => {\n    if (this.scrollupElement && this.element.isConnected) {\n      const { width } = this.scrollupElement.getBoundingClientRect();\n      document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n    }\n  };\n\n  private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n  componentDidLoad() {\n    this.isSlotted = !!this.element.assignedSlot;\n    const pagetitle =\n      typeof this.pagetitleQuery === \"string\" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();\n\n    if (pagetitle) {\n      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\" });\n      this.observer.observe(pagetitle);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateScrollupWidth();\n\n        this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n        this.resizeObserver.observe(this.scrollupElement);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  render() {\n    const chatSlotUsed = hasSlot(this.element, \"chat\");\n    const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n    const classes = {\n      \"stzh-sticky-actions\": true,\n      \"has-chat\": chatSlotUsed,\n      \"has-scrollup\": scrollupSlotUsed,\n      \"has-active-scrollup\": this.hasActiveScrollup,\n      \"is-not-slotted\": !this.isSlotted,\n    };\n\n    return (\n      <Host>\n        <div class={classes} data-stzh-sticky-width-container>\n          <stzh-sticky\n            name=\"actions\"\n            class=\"stzh-sticky-actions__sticky\"\n            position=\"fixed\"\n            variant=\"transparent\"\n            disableStickyTop={true}\n          >\n            <div class=\"stzh-sticky-actions__container\">\n              <div class=\"stzh-sticky-actions__chat-wrapper\">\n                <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n              <div ref={el => (this.scrollupElement = el as HTMLElement)} class=\"stzh-sticky-actions__scrollup-wrapper\">\n                <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n            </div>\n          </stzh-sticky>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
-const utils = require('./utils-d0fff87f.js');
+const utils = require('./utils-d091c010.js');
 const throttle = require('./throttle-d4877897.js');
 require('./string-utils-5dd70320.js');
 require('./debounce-c8f1f58a.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
-const utils = require('./utils-d0fff87f.js');
+const utils = require('./utils-d091c010.js');
 require('./string-utils-5dd70320.js');
 
 const stzhTableCss = ":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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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}stzh-table{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;--stzh-list-font-size:\"\";--stzh-list-line-height:\"\";--stzh-list-letter-spacing:\"\";--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--search-input-width:var(--stzh-table-search-input-width)}stzh-table[hidden]{display:none}stzh-table::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-table::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-table *,stzh-table *::before,stzh-table *::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)}stzh-table .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-table .stzh-fylingfocus-focused{outline-style:none !important}stzh-table .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-table[disable-min-width]:not([disable-min-width=false]){--min-width:none}.stzh-table{}.stzh-table__sub-header{display:flex;align-items:flex-end;justify-content:space-between}.stzh-table__header .stzh-table__search{flex-grow:1;margin-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-table__header .stzh-table__search{width:var(--search-input-width);flex-grow:0}}.stzh-table__action-button{flex-shrink:0;margin-left:auto}.stzh-table__outer-wrapper{position:relative}.stzh-table__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-table__pagination-wrapper{display:flex;justify-content:flex-end}.stzh-table__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-table__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-table__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-table__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-table__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:inline-flex;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding);gap:var(--stzh-space-xxsmall)}.stzh-table__sort-button:hover,.stzh-table__sort-button:focus{color:var(--stzh-color-primary-hover)}.stzh-table__list-sort-wrapper{display:flex;flex-direction:column;align-items:flex-start}.stzh-table__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-table__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-table__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-table__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}.stzh-table__list-sort-wrapper stzh-dropdown+stzh-dropdown{margin-top:calc(var(--stzh-space-xsmall) / -1)}.stzh-table stzh-icon.stzh-table__sort-icon{display:none}.stzh-table table{width:100%;border-spacing:0;min-width:var(--min-width);}.stzh-table table.has-layout-fixed{table-layout:fixed}.stzh-table thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-table tbody tr:nth-child(even) td,.stzh-table tbody tr:nth-child(even) th{background-color:var(--stzh-color-grey10)}.stzh-table td,.stzh-table th{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);text-align:left;border:none;vertical-align:top;border:none;background-color:var(--stzh-color-white);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-table td a,.stzh-table th a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);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)}.stzh-table td a:hover,.stzh-table th a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}.stzh-table td b,.stzh-table td strong,.stzh-table th b,.stzh-table th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-table td i,.stzh-table td em,.stzh-table th i,.stzh-table th em{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.stzh-table td.align-left,.stzh-table th.align-left{text-align:left}.stzh-table td.align-right,.stzh-table th.align-right{text-align:right}.stzh-table td.align-center,.stzh-table th.align-center{text-align:center}.stzh-table td.valign-auto,.stzh-table th.valign-auto{vertical-align:auto}.stzh-table td.valign-middle,.stzh-table th.valign-middle{vertical-align:middle}.stzh-table td.valign-bottom,.stzh-table th.valign-bottom{vertical-align:bottom}.stzh-table td.valign-top,.stzh-table th.valign-top{vertical-align:top}.stzh-table td.nowrap,.stzh-table th.nowrap{white-space:nowrap}.stzh-table td.is-head,.stzh-table th.is-head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-table td.is-sticky-left,.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-left,.stzh-table th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-table td.has-sticked,.stzh-table th.has-sticked{z-index:2}.stzh-table td.is-sticky-left,.stzh-table th.is-sticky-left{left:0}.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-right{right:0}.stzh-table td.is-sticky-left::after,.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-left::after,.stzh-table th.is-sticky-right::after{background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;transform:translate(100%);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-table td.is-sticky-left::after,.stzh-table th.is-sticky-left::after{right:0}.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-right::after{left:0;transform:rotate(-180deg) translate(100%)}.stzh-table td.has-sticked.is-sticky-left::after,.stzh-table td.has-sticked.is-sticky-right::after,.stzh-table th.has-sticked.is-sticky-left::after,.stzh-table th.has-sticked.is-sticky-right::after{opacity:1}.stzh-table th{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}.stzh-table th.is-sortable{padding:0}td.has-sorted .stzh-table__sort-icon,th.has-sorted .stzh-table__sort-icon{display:inline-flex}td.has-sorted-desc .stzh-table__sort-icon,th.has-sorted-desc .stzh-table__sort-icon{transform:rotate(180deg)}.stzh-table.has-header .stzh-table__header{margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-table.has-header .stzh-table__header{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-table.has-header .stzh-table__header{margin-bottom:var(--stzh-space-large)}}.stzh-table.has-action-or-search .stzh-table__heading:not(:empty){margin-bottom:var(--stzh-space-xlarge)}.stzh-table.has-list .stzh-table__outer-wrapper{display:none}@media screen and (min-width: 1260px){.stzh-table.has-list .stzh-table__outer-wrapper{display:block}}@media screen and (min-width: 1260px){.stzh-table.has-list .stzh-table__list-wrapper{display:none}}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
-const utils = require('./utils-d0fff87f.js');
+const utils = require('./utils-d091c010.js');
 require('./string-utils-5dd70320.js');
 
 const stzhTextandimageCss = ":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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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{--row-gap:var(--stzh-space-medium);--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text\" \"image image image image\"\n  );--grid-template-columns:var(\n      --stzh-textandimage-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 600px){:host{--row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{--grid-template-areas:var(\n        --stzh-textandimage-grid-template-areas,\n        \"text text text text\" \"image image image .\"\n    )}}@media screen and (min-width: 900px){:host{--grid-template-areas:var(\n        --stzh-textandimage-grid-template-areas,\n        \"text text text image image image image image\"\n    );--grid-template-columns:var(\n        --stzh-textandimage-grid-template-columns,\n        repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){:host{--grid-template-areas:var(\n        --stzh-textandimage-grid-template-areas,\n        \"text text text text image image image image\"\n    )}}:host([image-position=left]){--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas-image-left,\n      \"text text text text\" \"image image image image\"\n  )}@media screen and (min-width: 600px){:host([image-position=left]){--grid-template-areas:var(\n        --stzh-textandimage-grid-template-areas-image-left,\n        \"text text text text\" \"image image image .\"\n    )}}@media screen and (min-width: 900px){:host([image-position=left]){--grid-template-areas:var(\n        --stzh-textandimage-grid-template-areas-image-left,\n        \"text text text image image image image image\"\n    )}}@media screen and (min-width: 1260px){:host([image-position=left]){--grid-template-areas:var(\n        --stzh-textandimage-grid-template-areas-image-left,\n        \"text text text text image image image image\"\n    )}}@media screen and (min-width: 600px){:host([size=small]){--grid-template-areas:var(\n        --stzh-textandimage-small-grid-template-areas,\n        \"text text image image\"\n    )}}@media screen and (min-width: 900px){:host([size=small]){--grid-template-areas:var(\n        --stzh-textandimage-small-grid-template-areas,\n        \"text text text text image image image image\"\n    )}}@media screen and (min-width: 1260px){:host([size=small]){--grid-template-areas:var(\n        --stzh-textandimage-small-grid-template-areas,\n        \"text text text text text image image image\"\n    )}}@media screen and (min-width: 600px){:host([size=large]){--grid-template-areas:var(\n        --stzh-textandimage-large-grid-template-areas,\n        \"text text text .\" \"image image image image\"\n    )}}@media screen and (min-width: 900px){:host([size=large]){--grid-template-areas:var(\n        --stzh-textandimage-large-grid-template-areas,\n        \"text text text text text . . .\" \"image image image image image image image image\"\n    )}}@media screen and (min-width: 1260px){:host([size=large]){--grid-template-areas:var(\n        --stzh-textandimage-large-grid-template-areas,\n        \"text text text text text text . .\" \"image image image image image image image image\"\n    )}}:host([single]:not([single=false])){--grid-template-areas:var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text text\"\n  )}@media screen and (min-width: 600px){:host([single]:not([single=false])){--grid-template-areas:var(\n        --stzh-textandimage-single-grid-template-areas,\n        \"text text text .\"\n    )}}@media screen and (min-width: 900px){:host([single]:not([single=false])){--grid-template-areas:var(\n        --stzh-textandimage-single-grid-template-areas,\n        \"text text text text text text . .\"\n    )}}.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;row-gap:var(--row-gap);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);}@media screen and (min-width: 600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-textandimage__left{grid-area:text}.stzh-textandimage__right{grid-area:image}.stzh-textandimage--is-single .stzh-textandimage__right{grid-area:text}.stzh-textandimage--is-single-left .stzh-textandimage__right{display:none}.stzh-textandimage--is-single-right .stzh-textandimage__left{display:none}.stzh-textandimage--image-position-left .stzh-textandimage__left{grid-area:image}.stzh-textandimage--image-position-left .stzh-textandimage__right{grid-area:text}";

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-92254d32.js');
 const eventUtils = require('./event-utils-20e7b8b1.js');
 const animationUtils = require('./animation-utils-925ee0e0.js');
-const utils = require('./utils-d0fff87f.js');
+const utils = require('./utils-d091c010.js');
 require('./string-utils-5dd70320.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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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(--stzh-timeline-nested-button-font-size, var(--stzh-font-milli-font-size));--button-line-height:var(--stzh-timeline-nested-button-line-height, var(--stzh-font-milli-heading-line-height));--button-letter-spacing:var(--stzh-timeline-nested-button-line-height, normal);--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;-moz-column-break-inside:avoid;break-inside:avoid}}@media screen and (min-width: 600px){:host{--button-font-size:var(--stzh-timeline-nested-button-font-size, var(--stzh-font-centi-font-size));--button-line-height:var(--stzh-timeline-nested-button-line-height, var(--stzh-font-centi-heading-line-height))}}@media screen and (min-width: 1600px){:host{--button-font-size:var(--stzh-timeline-nested-button-font-size, var(--stzh-font-deca-font-size));--button-line-height:var(--stzh-timeline-nested-button-line-height, var(--stzh-font-deca-heading-line-height));--button-line-height:var(--stzh-timeline-nested-button-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}: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%;-webkit-appearance:none;-moz-appearance:none;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-small);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: 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-large)}}.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-xsmall);--stzh-timeline-nested-button-font-size:var(--stzh-font-micro-font-size);--stzh-timeline-nested-button-line-height:var(--stzh-font-micro-heading-line-height);overflow:hidden}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-medium)}}@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(--stzh-font-milli-heading-line-height)}}@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}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
-const utils = require('./utils-d0fff87f.js');
+const utils = require('./utils-d091c010.js');
 const eventUtils = require('./event-utils-20e7b8b1.js');
 const animationUtils = require('./animation-utils-925ee0e0.js');
 require('./string-utils-5dd70320.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
-const utils = require('./utils-d0fff87f.js');
+const utils = require('./utils-d091c010.js');
 const stzhInputDescription = require('./stzh-input-description-36e6c258.js');
 require('./string-utils-5dd70320.js');
 

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

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-92254d32.js');
 const arrow = require('./arrow-16638ece.js');
 const focusTrap_esm = require('./focus-trap.esm-46ebbbcb.js');
-const utils = require('./utils-d0fff87f.js');
+const utils = require('./utils-d091c010.js');
 const eventUtils = require('./event-utils-20e7b8b1.js');
 const animationUtils = require('./animation-utils-925ee0e0.js');
 require('./string-utils-5dd70320.js');
 
-const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-color-white);--background-color:var(--stzh-color-coolgrey60);--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op)}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}[type=button].sc-stzh-tooltip-h{--color:var(--stzh-color-midnightblue70);--background-color:var(--stzh-color-coolgrey10);--link-color:var(--stzh-color-midnightblue70);--hover-link-color:var(--stzh-color-midnightblue80)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
+const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-tooltip-color, var(--stzh-color-white));--background-color:var(--stzh-tooltip-background-color, var(--stzh-color-coolgrey60));--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-tooltip-link-color, var(--stzh-color-white));--hover-link-color:var(--stzh-tooltip-hover-link-color, var(--stzh-color-white70op))}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}[type=button].sc-stzh-tooltip-h{--color:var(--stzh-color-midnightblue70);--background-color:var(--stzh-color-coolgrey10);--link-color:var(--stzh-color-midnightblue70);--hover-link-color:var(--stzh-color-midnightblue80)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
 
 const ANIMATION_SHOW = {
   keyframes: [{ opacity: "0" }, { opacity: "1" }],

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

@@ -1 +1 @@
-{"file":"stzh-tooltip.entry.cjs.js","mappings":"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","names":["computePosition","offset","flip","shift","arrow","waitForEvent","stopAnimations","animateTo","isStzhElement","autoUpdate","createFocusTrap","h","Host","Arrow"],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorWhite};\n  --background-color: #{$colorCoolgrey60};\n  --width: #{$tooltipWidth};\n  --min-width: #{$tooltipMinWidth};\n  --max-width: #{$tooltipMaxWidth};\n  --padding: #{$tooltipPadding};\n  --border-radius: #{$tooltipBorderRadius};\n  --link-color: #{$colorWhite};\n\n  --hover-link-color: #{$colorWhite70op};\n\n  &[size=\"small\"] {\n    --padding: #{$tooltipSmallPadding};\n  }\n\n  &[type=\"button\"] {\n    --color: #{$colorMidnightblue70};\n    --background-color: #{$colorCoolgrey10};\n    --link-color: #{$colorMidnightblue70};\n    --hover-link-color: #{$colorMidnightblue80};\n  }\n}\n\n.stzh-tooltip {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    @include tooltip-fontsize;\n    @include tooltip-dropshadow;\n    position: absolute;\n    z-index: $zIndexPopover;\n    border-radius: var(--border-radius);\n    background-color: var(--background-color);\n    color: var(--color);\n    width: var(--width);\n    min-width: var(--min-width);\n    max-width: var(--max-width);\n    display: flex;\n    flex-direction: row-reverse;\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer which color it should be for hover\n    --stzh-link-hover-color: var(--hover-link-color);\n  }\n\n  &__content-slot {\n    padding: var(--padding);\n  }\n\n  &__close {\n    @include tooltip__close;\n  }\n\n  &__icon {\n    @include tooltip__icon;\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhTooltipClosedEvent,\n  StzhTooltipCloseEvent,\n  StzhTooltipOpenedEvent,\n  StzhTooltipOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, MiddlewareData, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n  options: { duration: 100, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n  options: { duration: 200, easing: \"linear\" },\n};\n\nconst keyCode = {\n  ESC: 27,\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n  tag: \"stzh-tooltip\",\n  styleUrl: \"stzh-tooltip.scss\",\n  scoped: true,\n})\nexport class StzhTooltip {\n  /** Whether tooltip should be open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Label of tooltip (used for screenreaders) */\n  @Prop() label: string = \"\";\n\n  /** Content of tooltip (use instead of content slot) */\n  @Prop() content: string = \"\";\n\n  /** Default placement of tooltip relative to trigger element */\n  @Prop() placement: Placement = \"bottom\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Visual type */\n  @Prop({ reflect: true }) type: \"overlay\" | \"button\" = \"overlay\";\n\n  /** Shifting of tooltip content */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Shifting of tooltip content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n  @Prop() distance: number = 12;\n\n  /** Whether tooltip is interactive */\n  @Prop() interactive: boolean = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = \"hover focus\";\n  private _trigger: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhTooltipLocalizedText;\n\n  @Element() element: HTMLStzhTooltipElement;\n\n  /** Tooltip open event */\n  @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n  /** Tooltip opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n  /** Tooltip close event */\n  @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n  /** Tooltip closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n  /** Show tooltip content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide tooltip content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle tooltip content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.contentElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentElement.hidden = false;\n\n      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);\n\n      this.contentElement.hidden = true;\n      this.contentElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"trigger\")\n  triggerWatcher(newValue: string) {\n    this._trigger = newValue.split(\" \");\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.contentElement && this.contentElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n      this.hide();\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private toggledByMethod: boolean = false;\n  private middlewareData: MiddlewareData;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n  private id: string;\n  private trap: FocusTrap;\n  private isHovering: boolean = false;\n\n  private hasTrigger(trigger: string) {\n    return this._trigger.indexOf(trigger) > -1;\n  }\n\n  private onEscKey = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private computePosition = async () => {\n    if (!this.open) {\n      return;\n    }\n\n    const {\n      x = 0,\n      y = 0,\n      strategy = \"absolute\",\n      placement,\n      middlewareData,\n    } = await computePosition(this.triggerFirstElement, this.contentElement, {\n      strategy: this.strategy,\n      placement: this.placement,\n      middleware: [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding,\n        }),\n        flip({\n          padding: 5,\n        }),\n        shift({\n          padding: 5,\n        }),\n        arrow({\n          element: this.arrowElement,\n          padding: 5,\n        }),\n      ],\n    });\n\n    this.middlewareData = middlewareData;\n    this.computedPlacement = placement;\n\n    Object.assign(this.contentElement.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    Object.assign(this.arrowElement.style, {\n      left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n      top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n    });\n  };\n\n  private onClickTrigger = () => {\n    if (this.hasTrigger(\"click\")) {\n      this.toggle();\n    }\n  };\n\n  private onMouseEnterTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = true;\n      this.show();\n    }\n  };\n\n  private onMouseLeaveTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = false;\n      document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n    }\n  };\n\n  private onFocusTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.show();\n    }\n  };\n\n  private onBlurTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.hide();\n    }\n  };\n\n  private onMouseMoveDocument = (event: MouseEvent) => {\n    const { clientX, clientY } = event;\n\n    if (!this.computedPlacement) {\n      return true;\n    }\n\n    const basePlacement = this.computedPlacement.split(\"-\")[0];\n    const offsetData = this.middlewareData.offset;\n    const popperRect = this.contentElement.getBoundingClientRect();\n\n    if (!offsetData) {\n      return true;\n    }\n\n    const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n    const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n    const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n    const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n    const exceedsTop = popperRect.top - clientY > topDistance;\n    const exceedsBottom = clientY - popperRect.bottom > bottomDistance;\n    const exceedsLeft = popperRect.left - clientX > leftDistance;\n    const exceedsRight = clientX - popperRect.right > rightDistance;\n\n    if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n      document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n      if (!this.isHovering) {\n        this.hide();\n      }\n    }\n  };\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n      trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n      trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n    this.triggerWatcher(this.trigger);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n    }\n  }\n\n  componentDidRender() {\n    this.computePosition();\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (this.hasTrigger(\"click\")) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(\n          isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n          `${this.id}-trigger-description`\n        );\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n      }\n    } else {\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n      }\n    }\n\n    if (this.trap) {\n      this.open ? this.trap.activate() : this.trap.deactivate();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.trap) {\n      this.trap.updateContainerElements(this.contentElement);\n    }\n  }\n\n  componentDidLoad() {\n    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);\n\n    if (this.interactive) {\n      this.trap = createFocusTrap(this.contentElement, {\n        fallbackFocus: this.contentElement,\n        clickOutsideDeactivates: true,\n        returnFocusOnDeactivate: true,\n      });\n\n      if (this.open) {\n        this.trap.activate();\n      }\n    }\n\n    this.contentElement.hidden = !this.open;\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tooltip\": true,\n      [`stzh-tooltip--type-${this.type}`]: true,\n      [`stzh-tooltip--open`]: this.open,\n      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-tooltip__trigger\" ref={el => (this.triggerElement = el as HTMLDivElement)}>\n            <slot></slot>\n          </div>\n          {this.hasTrigger(\"click\") && (\n            <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n              {this.localization.open}\n            </div>\n          )}\n          <div\n            class=\"stzh-tooltip__content\"\n            id={`${this.id}-content`}\n            ref={el => (this.contentElement = el as HTMLDivElement)}\n            tabindex=\"-1\"\n            aria-labelledby={this.label ? `${this.id}-label` : null}\n            aria-hidden={this.open ? \"false\" : \"true\"}\n            onKeyDown={this.onEscKey}\n            onMouseEnter={this.onMouseEnterTrigger}\n            onMouseLeave={this.onMouseLeaveTrigger}\n            onFocusin={this.onFocusTrigger}\n            onFocusout={this.onBlurTrigger}\n          >\n            <div\n              class=\"stzh-tooltip__arrow\"\n              ref={el => (this.arrowElement = el as HTMLDivElement)}\n              innerHTML={Arrow}\n            ></div>\n            {this.label && (\n              <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n                {this.label}\n              </h2>\n            )}\n            {this.hasTrigger(\"click\") && (\n              <button class=\"stzh-tooltip__close\" onClick={() => this.hide()} type=\"button\">\n                <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n                <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n              </button>\n            )}\n            <stzh-text\n              curve={this.type === \"overlay\" ? \"none\" : \"caption\"}\n              {...(this.type === \"button\" ? { font: \"heavy\" } : {})}\n              class=\"stzh-tooltip__content-slot\"\n            >\n              {this.content ? this.content : <slot name=\"content\"></slot>}\n            </stzh-text>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-tooltip.entry.cjs.js","mappings":"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","names":["computePosition","offset","flip","shift","arrow","waitForEvent","stopAnimations","animateTo","isStzhElement","autoUpdate","createFocusTrap","h","Host","Arrow"],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n * @prop --stzh-tooltip-color: **Global**: Color of tooltip text\n * @prop --stzh-tooltip-background-color: **Global**: Background color of tooltip\n * @prop --stzh-tooltip-link-color: **Global**: Color for link within tooltip\n * @prop --stzh-tooltip-hover-link-color: **Global**: Hover color for link within tooltip\n */\n\n:host {\n  display: contents;\n\n  --color: var(--stzh-tooltip-color, #{$colorWhite});\n  --background-color: var(--stzh-tooltip-background-color, #{$colorCoolgrey60});\n  --width: #{$tooltipWidth};\n  --min-width: #{$tooltipMinWidth};\n  --max-width: #{$tooltipMaxWidth};\n  --padding: #{$tooltipPadding};\n  --border-radius: #{$tooltipBorderRadius};\n  --link-color: var(--stzh-tooltip-link-color, #{$colorWhite});\n  --hover-link-color: var(--stzh-tooltip-hover-link-color, #{$colorWhite70op});\n\n  &[size=\"small\"] {\n    --padding: #{$tooltipSmallPadding};\n  }\n\n  &[type=\"button\"] {\n    --color: #{$colorMidnightblue70};\n    --background-color: #{$colorCoolgrey10};\n    --link-color: #{$colorMidnightblue70};\n    --hover-link-color: #{$colorMidnightblue80};\n  }\n}\n\n.stzh-tooltip {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    @include tooltip-fontsize;\n    @include tooltip-dropshadow;\n    position: absolute;\n    z-index: $zIndexPopover;\n    border-radius: var(--border-radius);\n    background-color: var(--background-color);\n    color: var(--color);\n    width: var(--width);\n    min-width: var(--min-width);\n    max-width: var(--max-width);\n    display: flex;\n    flex-direction: row-reverse;\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    --stzh-link-hover-color: var(--hover-link-color);\n  }\n\n  &__content-slot {\n    padding: var(--padding);\n  }\n\n  &__close {\n    @include tooltip__close;\n  }\n\n  &__icon {\n    @include tooltip__icon;\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhTooltipClosedEvent,\n  StzhTooltipCloseEvent,\n  StzhTooltipOpenedEvent,\n  StzhTooltipOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, MiddlewareData, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n  options: { duration: 100, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n  options: { duration: 200, easing: \"linear\" },\n};\n\nconst keyCode = {\n  ESC: 27,\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n  tag: \"stzh-tooltip\",\n  styleUrl: \"stzh-tooltip.scss\",\n  scoped: true,\n})\nexport class StzhTooltip {\n  /** Whether tooltip should be open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Label of tooltip (used for screenreaders) */\n  @Prop() label: string = \"\";\n\n  /** Content of tooltip (use instead of content slot) */\n  @Prop() content: string = \"\";\n\n  /** Default placement of tooltip relative to trigger element */\n  @Prop() placement: Placement = \"bottom\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Visual type */\n  @Prop({ reflect: true }) type: \"overlay\" | \"button\" = \"overlay\";\n\n  /** Shifting of tooltip content */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Shifting of tooltip content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n  @Prop() distance: number = 12;\n\n  /** Whether tooltip is interactive */\n  @Prop() interactive: boolean = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = \"hover focus\";\n  private _trigger: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhTooltipLocalizedText;\n\n  @Element() element: HTMLStzhTooltipElement;\n\n  /** Tooltip open event */\n  @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n  /** Tooltip opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n  /** Tooltip close event */\n  @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n  /** Tooltip closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n  /** Show tooltip content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide tooltip content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle tooltip content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.contentElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentElement.hidden = false;\n\n      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);\n\n      this.contentElement.hidden = true;\n      this.contentElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"trigger\")\n  triggerWatcher(newValue: string) {\n    this._trigger = newValue.split(\" \");\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.contentElement && this.contentElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n      this.hide();\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private toggledByMethod: boolean = false;\n  private middlewareData: MiddlewareData;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n  private id: string;\n  private trap: FocusTrap;\n  private isHovering: boolean = false;\n\n  private hasTrigger(trigger: string) {\n    return this._trigger.indexOf(trigger) > -1;\n  }\n\n  private onEscKey = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private computePosition = async () => {\n    if (!this.open) {\n      return;\n    }\n\n    const {\n      x = 0,\n      y = 0,\n      strategy = \"absolute\",\n      placement,\n      middlewareData,\n    } = await computePosition(this.triggerFirstElement, this.contentElement, {\n      strategy: this.strategy,\n      placement: this.placement,\n      middleware: [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding,\n        }),\n        flip({\n          padding: 5,\n        }),\n        shift({\n          padding: 5,\n        }),\n        arrow({\n          element: this.arrowElement,\n          padding: 5,\n        }),\n      ],\n    });\n\n    this.middlewareData = middlewareData;\n    this.computedPlacement = placement;\n\n    Object.assign(this.contentElement.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    Object.assign(this.arrowElement.style, {\n      left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n      top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n    });\n  };\n\n  private onClickTrigger = () => {\n    if (this.hasTrigger(\"click\")) {\n      this.toggle();\n    }\n  };\n\n  private onMouseEnterTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = true;\n      this.show();\n    }\n  };\n\n  private onMouseLeaveTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = false;\n      document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n    }\n  };\n\n  private onFocusTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.show();\n    }\n  };\n\n  private onBlurTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.hide();\n    }\n  };\n\n  private onMouseMoveDocument = (event: MouseEvent) => {\n    const { clientX, clientY } = event;\n\n    if (!this.computedPlacement) {\n      return true;\n    }\n\n    const basePlacement = this.computedPlacement.split(\"-\")[0];\n    const offsetData = this.middlewareData.offset;\n    const popperRect = this.contentElement.getBoundingClientRect();\n\n    if (!offsetData) {\n      return true;\n    }\n\n    const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n    const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n    const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n    const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n    const exceedsTop = popperRect.top - clientY > topDistance;\n    const exceedsBottom = clientY - popperRect.bottom > bottomDistance;\n    const exceedsLeft = popperRect.left - clientX > leftDistance;\n    const exceedsRight = clientX - popperRect.right > rightDistance;\n\n    if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n      document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n      if (!this.isHovering) {\n        this.hide();\n      }\n    }\n  };\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n      trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n      trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n    this.triggerWatcher(this.trigger);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n    }\n  }\n\n  componentDidRender() {\n    this.computePosition();\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (this.hasTrigger(\"click\")) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(\n          isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n          `${this.id}-trigger-description`\n        );\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n      }\n    } else {\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n      }\n    }\n\n    if (this.trap) {\n      this.open ? this.trap.activate() : this.trap.deactivate();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.trap) {\n      this.trap.updateContainerElements(this.contentElement);\n    }\n  }\n\n  componentDidLoad() {\n    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);\n\n    if (this.interactive) {\n      this.trap = createFocusTrap(this.contentElement, {\n        fallbackFocus: this.contentElement,\n        clickOutsideDeactivates: true,\n        returnFocusOnDeactivate: true,\n      });\n\n      if (this.open) {\n        this.trap.activate();\n      }\n    }\n\n    this.contentElement.hidden = !this.open;\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tooltip\": true,\n      [`stzh-tooltip--type-${this.type}`]: true,\n      [`stzh-tooltip--open`]: this.open,\n      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-tooltip__trigger\" ref={el => (this.triggerElement = el as HTMLDivElement)}>\n            <slot></slot>\n          </div>\n          {this.hasTrigger(\"click\") && (\n            <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n              {this.localization.open}\n            </div>\n          )}\n          <div\n            class=\"stzh-tooltip__content\"\n            id={`${this.id}-content`}\n            ref={el => (this.contentElement = el as HTMLDivElement)}\n            tabindex=\"-1\"\n            aria-labelledby={this.label ? `${this.id}-label` : null}\n            aria-hidden={this.open ? \"false\" : \"true\"}\n            onKeyDown={this.onEscKey}\n            onMouseEnter={this.onMouseEnterTrigger}\n            onMouseLeave={this.onMouseLeaveTrigger}\n            onFocusin={this.onFocusTrigger}\n            onFocusout={this.onBlurTrigger}\n          >\n            <div\n              class=\"stzh-tooltip__arrow\"\n              ref={el => (this.arrowElement = el as HTMLDivElement)}\n              innerHTML={Arrow}\n            ></div>\n            {this.label && (\n              <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n                {this.label}\n              </h2>\n            )}\n            {this.hasTrigger(\"click\") && (\n              <button class=\"stzh-tooltip__close\" onClick={() => this.hide()} type=\"button\">\n                <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n                <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n              </button>\n            )}\n            <stzh-text\n              curve={this.type === \"overlay\" ? \"none\" : \"caption\"}\n              {...(this.type === \"button\" ? { font: \"heavy\" } : {})}\n              class=\"stzh-tooltip__content-slot\"\n            >\n              {this.content ? this.content : <slot name=\"content\"></slot>}\n            </stzh-text>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}