npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta4 → 3.0.0-beta5 - Mend

@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (590) hide show

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

	@@ -1 +1 @@
1	- {"file":"stzh-skin-portal-mitwirken.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,q4hLAAq4hL;;MCa35hLA,yBAAuB;;;;;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,QACE,EAAC,IAAI,OACE,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSkinPortalMitwirken"],"sources":["src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.scss?tag=stzh-skin-portal-mitwirken","src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.tsx"],"sourcesContent":["@import \"../../global/css/stzh-components.css\";\n\n:root {\n --stzh-color-primary: var(--stzh-color-deepcerulean);\n --stzh-color-primary-hover: var(--stzh-color-regalblue);\n\n --stzh-color-primary48: rgba(5, 127, 172, 0.48);\n --stzh-color-primary32: rgba(5, 127, 172, 0.32);\n --stzh-color-primary16: rgba(5, 127, 172, 0.16);\n --stzh-color-primary8: rgba(5, 127, 172, 0.08);\n\n --stzh-font-family-heavy: var(--stzh-font-family-bold);\n --stzh-font-family-title: var(--stzh-font-family-light);\n\n --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);\n}\n\n$mobileBreakpoint: 40em;\n$processHeaderMaxMobileBreakpoint: 599px;\n$processHeaderMaxDesktopBreakpoint: 1023px;\n\nmain,\n.reveal-overlay,\n.mod_header {\n --primary: var(--stzh-color-primary);\n --secondary: var(--stzh-color-primary);\n --success: var(--stzh-color-old-truegreen);\n --warning: var(--stzh-color-old-warning);\n --alert: var(--stzh-color-error60);\n --highlight: var(--stzh-color-coral);\n --highlight_alternative: var(--stzh-color-coral);\n}\n\n// For main and modals\nmain,\n.reveal-overlay {\n a.muted,\n .inline-filters button.muted[data-toggle] {\n color: $colorWhite;\n background-color: $colorOldGrey13;\n border-color: $colorOldGrey13;\n\n &:hover,\n &:focus {\n color: $colorWhite;\n background-color: $colorOldGrey13;\n border-color: $colorOldGrey13;\n }\n }\n}\n\n// Only modals\n.reveal-overlay {\n background-color: rgba(5, 127, 172, 0.8);\n\n /* Dialog /\n\n .reveal__title {\n margin-top: 0;\n }\n\n .reveal {\n box-shadow: $boxShadowOverlay;\n }\n\n .close-button {\n color: $baseLeadColor;\n }\n}\n\n// Only header\n.mod_header {\n .mod_header__logobar-logo img {\n background: url(https://www.stadt-zuerich.ch/content/dam/stzh/corpdesign/wortbildmarken/logo_stzh_vbz_pos_2-1.svg) 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}
1	+ {"file":"stzh-skin-portal-mitwirken.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,ysiLAAysiL;;MCa/tiLA,yBAAuB;;;;;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,QACE,EAAC,IAAI,OACE,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSkinPortalMitwirken"],"sources":["src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.scss?tag=stzh-skin-portal-mitwirken","src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.tsx"],"sourcesContent":["@import \"../../global/css/stzh-components.css\";\n\n:root {\n --stzh-color-primary: var(--stzh-color-deepcerulean);\n --stzh-color-primary-hover: var(--stzh-color-regalblue);\n\n --stzh-color-primary48: rgba(5, 127, 172, 0.48);\n --stzh-color-primary32: rgba(5, 127, 172, 0.32);\n --stzh-color-primary16: rgba(5, 127, 172, 0.16);\n --stzh-color-primary8: rgba(5, 127, 172, 0.08);\n\n --stzh-font-family-heavy: var(--stzh-font-family-bold);\n --stzh-font-family-title: var(--stzh-font-family-light);\n\n --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);\n}\n\n$mobileBreakpoint: 40em;\n$processHeaderMaxMobileBreakpoint: 599px;\n$processHeaderMaxDesktopBreakpoint: 1023px;\n\nmain,\n.reveal-overlay,\n.mod_header {\n --primary: var(--stzh-color-primary);\n --secondary: var(--stzh-color-primary);\n --success: var(--stzh-color-old-truegreen);\n --warning: var(--stzh-color-old-warning);\n --alert: var(--stzh-color-error60);\n --highlight: var(--stzh-color-coral);\n --highlight_alternative: var(--stzh-color-coral);\n}\n\n// For main and modals\nmain,\n.reveal-overlay {\n a.muted,\n .inline-filters button.muted[data-toggle] {\n color: $colorWhite;\n background-color: $colorOldGrey13;\n border-color: $colorOldGrey13;\n\n &:hover,\n &:focus {\n color: $colorWhite;\n background-color: $colorOldGrey13;\n border-color: $colorOldGrey13;\n }\n }\n}\n\n// Only modals\n.reveal-overlay {\n background-color: rgba(5, 127, 172, 0.8);\n\n /* Dialog /\n\n .reveal__title {\n margin-top: 0;\n }\n\n .reveal {\n box-shadow: $boxShadowOverlay;\n }\n\n .close-button {\n color: $baseLeadColor;\n }\n}\n\n// Only header\n.mod_header {\n .mod_header__logobar-logo img {\n background: url(https://www.stadt-zuerich.ch/content/dam/stzh/corpdesign/wortbildmarken/logo_stzh_vbz_pos_2-1.svg) 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/components/stzh-skin-storybook-preview.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const stzhSkinStorybookPreviewCss = "@charset \"UTF-8\";: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}.sbdocs-content>,.sbdocs-content>div>{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);}.sbdocs-content>.float-left,.sbdocs-content>div>.float-left{float:left}.sbdocs-content>.float-right,.sbdocs-content>div>.float-right{float:right}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>h3,.sbdocs-content>h4,.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>h3,.sbdocs-content>div>h4{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color);margin:0}.sbdocs-content>b,.sbdocs-content>strong,.sbdocs-content>div>b,.sbdocs-content>div>strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>i,.sbdocs-content>em,.sbdocs-content>div>i,.sbdocs-content>div>em{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-xsmall)}}.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-medium);margin-top:0}@media screen and (min-width: 600px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-xxlarge)}}.sbdocs-content>ul ul,.sbdocs-content>ul ol,.sbdocs-content>ul dl,.sbdocs-content>ul stzh-list,.sbdocs-content>ol ul,.sbdocs-content>ol ol,.sbdocs-content>ol dl,.sbdocs-content>ol stzh-list,.sbdocs-content>dl ul,.sbdocs-content>dl ol,.sbdocs-content>dl dl,.sbdocs-content>dl stzh-list,.sbdocs-content>stzh-list ul,.sbdocs-content>stzh-list ol,.sbdocs-content>stzh-list dl,.sbdocs-content>stzh-list stzh-list,.sbdocs-content>div>ul ul,.sbdocs-content>div>ul ol,.sbdocs-content>div>ul dl,.sbdocs-content>div>ul stzh-list,.sbdocs-content>div>ol ul,.sbdocs-content>div>ol ol,.sbdocs-content>div>ol dl,.sbdocs-content>div>ol stzh-list,.sbdocs-content>div>dl ul,.sbdocs-content>div>dl ol,.sbdocs-content>div>dl dl,.sbdocs-content>div>dl stzh-list,.sbdocs-content>div>stzh-list ul,.sbdocs-content>div>stzh-list ol,.sbdocs-content>div>stzh-list dl,.sbdocs-content>div>stzh-list stzh-list{margin-top:0;margin-bottom:0}.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge);margin-top:0}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xsmall)}}.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-medium);margin-top:0}@media screen and (min-width: 600px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-xxlarge)}}.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>ol,.sbdocs-content>div>ol{counter-reset:li-counter}.sbdocs-content>ul li,.sbdocs-content>ol li,.sbdocs-content>div>ul li,.sbdocs-content>div>ol li{position:relative}.sbdocs-content>ul li::before,.sbdocs-content>ol li::before,.sbdocs-content>div>ul li::before,.sbdocs-content>div>ol li::before{display:inline-block;position:absolute;left:0;top:0}.sbdocs-content>ul li,.sbdocs-content>div>ul li{padding-left:calc(var(--stzh-space-xsmall) + var(--stzh-space-small))}.sbdocs-content>ul li::before,.sbdocs-content>div>ul li::before{content:\"–\"}.sbdocs-content>ol li,.sbdocs-content>div>ol li{counter-increment:li-counter;padding-left:calc(var(--stzh-space-large) + var(--stzh-space-small))}.sbdocs-content>ol li::before,.sbdocs-content>div>ol li::before{content:counter(li-counter) \". \"}.sbdocs-content>stzh-figure,.sbdocs-content>div>stzh-figure{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{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-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);margin:var(--stzh-space-xxlarge);color:var(--richtext-blockquote-color);position:relative;overflow:hidden}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxxlarge)}}@media print{.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}.sbdocs-content>blockquote:before,.sbdocs-content>div>blockquote:before{background:var(--richtext-blockquote-line-color);height:calc(100% - var(--stzh-space-xsmall) * 2);width:0.1875rem;content:\" \";display:block;position:absolute;left:0;top:var(--stzh-space-xsmall)}.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-top:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>blockquote p::before,.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::before,.sbdocs-content>div>blockquote p::after{display:inline-block}.sbdocs-content>blockquote p::before,.sbdocs-content>div>blockquote p::before{content:\"«\"}.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::after{content:\"»\"}.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));color:var(--richtext-blockquote-footer-color)}@media screen and (min-width: 900px){.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.sbdocs-content>blockquote footer::before,.sbdocs-content>div>blockquote footer::before{content:\"–\";display:inline-block;margin-right:var(--stzh-space-xxxsmall)}.sbdocs-content>table,.sbdocs-content>div>table{--min-width:none;--cell-padding:var(--stzh-table-cell-padding);width:100%;border-spacing:0;min-width:var(--min-width);}.sbdocs-content>table.has-layout-fixed,.sbdocs-content>div>table.has-layout-fixed{table-layout:fixed}.sbdocs-content>thead,.sbdocs-content>div>thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.sbdocs-content>tbody tr:nth-child(even) td,.sbdocs-content>tbody tr:nth-child(even) th,.sbdocs-content>div>tbody tr:nth-child(even) td,.sbdocs-content>div>tbody tr:nth-child(even) th{background-color:var(--stzh-color-grey10)}.sbdocs-content>td,.sbdocs-content>th,.sbdocs-content>div>td,.sbdocs-content>div>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);}.sbdocs-content>td a,.sbdocs-content>th a,.sbdocs-content>div>td a,.sbdocs-content>div>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)}.sbdocs-content>td a:hover,.sbdocs-content>th a:hover,.sbdocs-content>div>td a:hover,.sbdocs-content>div>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)}.sbdocs-content>td b,.sbdocs-content>td strong,.sbdocs-content>th b,.sbdocs-content>th strong,.sbdocs-content>div>td b,.sbdocs-content>div>td strong,.sbdocs-content>div>th b,.sbdocs-content>div>th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>td i,.sbdocs-content>td em,.sbdocs-content>th i,.sbdocs-content>th em,.sbdocs-content>div>td i,.sbdocs-content>div>td em,.sbdocs-content>div>th i,.sbdocs-content>div>th em{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.sbdocs-content>td.align-left,.sbdocs-content>th.align-left,.sbdocs-content>div>td.align-left,.sbdocs-content>div>th.align-left{text-align:left}.sbdocs-content>td.align-right,.sbdocs-content>th.align-right,.sbdocs-content>div>td.align-right,.sbdocs-content>div>th.align-right{text-align:right}.sbdocs-content>td.align-center,.sbdocs-content>th.align-center,.sbdocs-content>div>td.align-center,.sbdocs-content>div>th.align-center{text-align:center}.sbdocs-content>td.valign-auto,.sbdocs-content>th.valign-auto,.sbdocs-content>div>td.valign-auto,.sbdocs-content>div>th.valign-auto{vertical-align:auto}.sbdocs-content>td.valign-middle,.sbdocs-content>th.valign-middle,.sbdocs-content>div>td.valign-middle,.sbdocs-content>div>th.valign-middle{vertical-align:middle}.sbdocs-content>td.valign-bottom,.sbdocs-content>th.valign-bottom,.sbdocs-content>div>td.valign-bottom,.sbdocs-content>div>th.valign-bottom{vertical-align:bottom}.sbdocs-content>td.valign-top,.sbdocs-content>th.valign-top,.sbdocs-content>div>td.valign-top,.sbdocs-content>div>th.valign-top{vertical-align:top}.sbdocs-content>td.nowrap,.sbdocs-content>th.nowrap,.sbdocs-content>div>td.nowrap,.sbdocs-content>div>th.nowrap{white-space:nowrap}.sbdocs-content>td.is-head,.sbdocs-content>th.is-head,.sbdocs-content>div>td.is-head,.sbdocs-content>div>th.is-head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>td.is-sticky-left,.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-left,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-left,.sbdocs-content>div>th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.sbdocs-content>td.has-sticked,.sbdocs-content>th.has-sticked,.sbdocs-content>div>td.has-sticked,.sbdocs-content>div>th.has-sticked{z-index:2}.sbdocs-content>td.is-sticky-left,.sbdocs-content>th.is-sticky-left,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>th.is-sticky-left{left:0}.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-right{right:0}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-left::after,.sbdocs-content>div>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)}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>th.is-sticky-left::after{right:0}.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-right::after{left:0;transform:rotate(-180deg) translate(100%)}.sbdocs-content>td.has-sticked.is-sticky-left::after,.sbdocs-content>td.has-sticked.is-sticky-right::after,.sbdocs-content>th.has-sticked.is-sticky-left::after,.sbdocs-content>th.has-sticked.is-sticky-right::after,.sbdocs-content>div>td.has-sticked.is-sticky-left::after,.sbdocs-content>div>td.has-sticked.is-sticky-right::after,.sbdocs-content>div>th.has-sticked.is-sticky-left::after,.sbdocs-content>div>th.has-sticked.is-sticky-right::after{opacity:1}.sbdocs-content>th,.sbdocs-content>div>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)}.sbdocs-content>th.is-sortable,.sbdocs-content>div>th.is-sortable{padding:0}.sbdocs-content>a,.sbdocs-content>div>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)}.sbdocs-content>a:hover,.sbdocs-content>div>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)}.sbdocs-content>.stzh-richtext__external-link,.sbdocs-content>div>.stzh-richtext__external-link{position:relative}.sbdocs-content>.stzh-richtext__external-vhidden,.sbdocs-content>div>.stzh-richtext__external-vhidden{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}.sbdocs-content>.stzh-richtext__external-icon-wrapper,.sbdocs-content>div>.stzh-richtext__external-icon-wrapper{position:relative;display:inline-block;width:var(--stzh-icon-size);height:var(--stzh-link-icon-wrapper-height);margin-left:var(--stzh-space-xxsmall)}.sbdocs-content>.stzh-richtext__external-icon,.sbdocs-content>div>.stzh-richtext__external-icon{--icon:var(--stzh-icon-size);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin-top:0.0625rem;width:var(--stzh-icon-size);height:var(--stzh-icon-size)}.sbdocs-content>.sbdocs-title,.sbdocs-content>.sbdocs-h2,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>.sbdocs-h2{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color)}.sbdocs-content>.sbdocs-title,.sbdocs-content>h1:first-of-type,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>h1:first-of-type{margin-top:0}.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxxlarge)}}.sbdocs-content>h2,.sbdocs-content>div>h2{padding-bottom:0;border-bottom:none}.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>table,.sbdocs-content>div>table{width:auto;min-width:auto}.sbdocs-content>ul li ul,.sbdocs-content>ul li ol,.sbdocs-content>ul li dl,.sbdocs-content>div>ul li ul,.sbdocs-content>div>ul li ol,.sbdocs-content>div>ul li dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.sbdocs-content>p b,.sbdocs-content>p strong,.sbdocs-content>ul li b,.sbdocs-content>ul li strong,.sbdocs-content>stzh-text b,.sbdocs-content>stzh-text strong,.sbdocs-content>div>p b,.sbdocs-content>div>p strong,.sbdocs-content>div>ul li b,.sbdocs-content>div>ul li strong,.sbdocs-content>div>stzh-text b,.sbdocs-content>div>stzh-text strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>p i,.sbdocs-content>p em,.sbdocs-content>ul li i,.sbdocs-content>ul li em,.sbdocs-content>stzh-text i,.sbdocs-content>stzh-text em,.sbdocs-content>div>p i,.sbdocs-content>div>p em,.sbdocs-content>div>ul li i,.sbdocs-content>div>ul li em,.sbdocs-content>div>stzh-text i,.sbdocs-content>div>stzh-text em{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}";
+const stzhSkinStorybookPreviewCss = "@charset \"UTF-8\";: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}.sbdocs-content>,.sbdocs-content>div>{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);}.sbdocs-content>.float-left,.sbdocs-content>div>.float-left{float:left}.sbdocs-content>.float-right,.sbdocs-content>div>.float-right{float:right}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>h3,.sbdocs-content>h4,.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>h3,.sbdocs-content>div>h4{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color);margin:0}.sbdocs-content>b,.sbdocs-content>strong,.sbdocs-content>div>b,.sbdocs-content>div>strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>i,.sbdocs-content>em,.sbdocs-content>div>i,.sbdocs-content>div>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)}.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level=\"1\"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level=\"1\"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level=\"2\"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level=\"3\"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-xsmall)}}.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level=\"4\"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level=\"4\"]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-medium);margin-top:0}@media screen and (min-width: 600px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-xxlarge)}}.sbdocs-content>ul ul,.sbdocs-content>ul ol,.sbdocs-content>ul dl,.sbdocs-content>ul stzh-list,.sbdocs-content>ol ul,.sbdocs-content>ol ol,.sbdocs-content>ol dl,.sbdocs-content>ol stzh-list,.sbdocs-content>dl ul,.sbdocs-content>dl ol,.sbdocs-content>dl dl,.sbdocs-content>dl stzh-list,.sbdocs-content>stzh-list ul,.sbdocs-content>stzh-list ol,.sbdocs-content>stzh-list dl,.sbdocs-content>stzh-list stzh-list,.sbdocs-content>div>ul ul,.sbdocs-content>div>ul ol,.sbdocs-content>div>ul dl,.sbdocs-content>div>ul stzh-list,.sbdocs-content>div>ol ul,.sbdocs-content>div>ol ol,.sbdocs-content>div>ol dl,.sbdocs-content>div>ol stzh-list,.sbdocs-content>div>dl ul,.sbdocs-content>div>dl ol,.sbdocs-content>div>dl dl,.sbdocs-content>div>dl stzh-list,.sbdocs-content>div>stzh-list ul,.sbdocs-content>div>stzh-list ol,.sbdocs-content>div>stzh-list dl,.sbdocs-content>div>stzh-list stzh-list{margin-top:0;margin-bottom:0}.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge);margin-top:0}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xsmall)}}.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-medium);margin-top:0}@media screen and (min-width: 600px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-xxlarge)}}.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>ol,.sbdocs-content>div>ol{counter-reset:li-counter}.sbdocs-content>ul li,.sbdocs-content>ol li,.sbdocs-content>div>ul li,.sbdocs-content>div>ol li{position:relative}.sbdocs-content>ul li::before,.sbdocs-content>ol li::before,.sbdocs-content>div>ul li::before,.sbdocs-content>div>ol li::before{display:inline-block;position:absolute;left:0;top:0}.sbdocs-content>ul li,.sbdocs-content>div>ul li{padding-left:calc(var(--stzh-space-xsmall) + var(--stzh-space-small))}.sbdocs-content>ul li::before,.sbdocs-content>div>ul li::before{content:\"–\"}.sbdocs-content>ol li,.sbdocs-content>div>ol li{counter-increment:li-counter;padding-left:calc(var(--stzh-space-large) + var(--stzh-space-small))}.sbdocs-content>ol li::before,.sbdocs-content>div>ol li::before{content:counter(li-counter) \". \"}.sbdocs-content>stzh-figure,.sbdocs-content>div>stzh-figure{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{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-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);margin:var(--stzh-space-xxlarge);color:var(--richtext-blockquote-color);position:relative;overflow:hidden}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxxlarge)}}@media print{.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}.sbdocs-content>blockquote:before,.sbdocs-content>div>blockquote:before{background:var(--richtext-blockquote-line-color);height:calc(100% - var(--stzh-space-xsmall) * 2);width:0.1875rem;content:\" \";display:block;position:absolute;left:0;top:var(--stzh-space-xsmall)}.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-top:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>blockquote p::before,.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::before,.sbdocs-content>div>blockquote p::after{display:inline-block}.sbdocs-content>blockquote p::before,.sbdocs-content>div>blockquote p::before{content:\"«\"}.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::after{content:\"»\"}.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));color:var(--richtext-blockquote-footer-color)}@media screen and (min-width: 900px){.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.sbdocs-content>blockquote footer::before,.sbdocs-content>div>blockquote footer::before{content:\"–\";display:inline-block;margin-right:var(--stzh-space-xxxsmall)}.sbdocs-content>table,.sbdocs-content>div>table{--min-width:none;--cell-padding:var(--stzh-table-cell-padding);width:100%;border-spacing:0;min-width:var(--min-width);}.sbdocs-content>table.has-layout-fixed,.sbdocs-content>div>table.has-layout-fixed{table-layout:fixed}.sbdocs-content>thead,.sbdocs-content>div>thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.sbdocs-content>tbody tr:nth-child(even) td,.sbdocs-content>tbody tr:nth-child(even) th,.sbdocs-content>div>tbody tr:nth-child(even) td,.sbdocs-content>div>tbody tr:nth-child(even) th{background-color:var(--stzh-color-grey10)}.sbdocs-content>td,.sbdocs-content>th,.sbdocs-content>div>td,.sbdocs-content>div>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);}.sbdocs-content>td a,.sbdocs-content>th a,.sbdocs-content>div>td a,.sbdocs-content>div>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)}.sbdocs-content>td a:hover,.sbdocs-content>th a:hover,.sbdocs-content>div>td a:hover,.sbdocs-content>div>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)}.sbdocs-content>td b,.sbdocs-content>td strong,.sbdocs-content>th b,.sbdocs-content>th strong,.sbdocs-content>div>td b,.sbdocs-content>div>td strong,.sbdocs-content>div>th b,.sbdocs-content>div>th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>td i,.sbdocs-content>td em,.sbdocs-content>th i,.sbdocs-content>th em,.sbdocs-content>div>td i,.sbdocs-content>div>td em,.sbdocs-content>div>th i,.sbdocs-content>div>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)}.sbdocs-content>td.align-left,.sbdocs-content>th.align-left,.sbdocs-content>div>td.align-left,.sbdocs-content>div>th.align-left{text-align:left}.sbdocs-content>td.align-right,.sbdocs-content>th.align-right,.sbdocs-content>div>td.align-right,.sbdocs-content>div>th.align-right{text-align:right}.sbdocs-content>td.align-center,.sbdocs-content>th.align-center,.sbdocs-content>div>td.align-center,.sbdocs-content>div>th.align-center{text-align:center}.sbdocs-content>td.valign-auto,.sbdocs-content>th.valign-auto,.sbdocs-content>div>td.valign-auto,.sbdocs-content>div>th.valign-auto{vertical-align:auto}.sbdocs-content>td.valign-middle,.sbdocs-content>th.valign-middle,.sbdocs-content>div>td.valign-middle,.sbdocs-content>div>th.valign-middle{vertical-align:middle}.sbdocs-content>td.valign-bottom,.sbdocs-content>th.valign-bottom,.sbdocs-content>div>td.valign-bottom,.sbdocs-content>div>th.valign-bottom{vertical-align:bottom}.sbdocs-content>td.valign-top,.sbdocs-content>th.valign-top,.sbdocs-content>div>td.valign-top,.sbdocs-content>div>th.valign-top{vertical-align:top}.sbdocs-content>td.nowrap,.sbdocs-content>th.nowrap,.sbdocs-content>div>td.nowrap,.sbdocs-content>div>th.nowrap{white-space:nowrap}.sbdocs-content>td.is-head,.sbdocs-content>th.is-head,.sbdocs-content>div>td.is-head,.sbdocs-content>div>th.is-head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>td.is-sticky-left,.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-left,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-left,.sbdocs-content>div>th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.sbdocs-content>td.has-sticked,.sbdocs-content>th.has-sticked,.sbdocs-content>div>td.has-sticked,.sbdocs-content>div>th.has-sticked{z-index:2}.sbdocs-content>td.is-sticky-left,.sbdocs-content>th.is-sticky-left,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>th.is-sticky-left{left:0}.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-right{right:0}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-left::after,.sbdocs-content>div>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)}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>th.is-sticky-left::after{right:0}.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-right::after{left:0;transform:rotate(-180deg) translate(100%)}.sbdocs-content>td.has-sticked.is-sticky-left::after,.sbdocs-content>td.has-sticked.is-sticky-right::after,.sbdocs-content>th.has-sticked.is-sticky-left::after,.sbdocs-content>th.has-sticked.is-sticky-right::after,.sbdocs-content>div>td.has-sticked.is-sticky-left::after,.sbdocs-content>div>td.has-sticked.is-sticky-right::after,.sbdocs-content>div>th.has-sticked.is-sticky-left::after,.sbdocs-content>div>th.has-sticked.is-sticky-right::after{opacity:1}.sbdocs-content>th,.sbdocs-content>div>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)}.sbdocs-content>th.is-sortable,.sbdocs-content>div>th.is-sortable{padding:0}.sbdocs-content>a,.sbdocs-content>div>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)}.sbdocs-content>a:hover,.sbdocs-content>div>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)}.sbdocs-content>.stzh-richtext__external-link,.sbdocs-content>div>.stzh-richtext__external-link{position:relative}.sbdocs-content>.stzh-richtext__external-vhidden,.sbdocs-content>div>.stzh-richtext__external-vhidden{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}.sbdocs-content>.stzh-richtext__external-icon-wrapper,.sbdocs-content>div>.stzh-richtext__external-icon-wrapper{position:relative;display:inline-block;width:var(--stzh-icon-size);height:var(--stzh-link-icon-wrapper-height);margin-left:var(--stzh-space-xxsmall)}.sbdocs-content>.stzh-richtext__external-icon,.sbdocs-content>div>.stzh-richtext__external-icon{--icon:var(--stzh-icon-size);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin-top:0.0625rem;width:var(--stzh-icon-size);height:var(--stzh-icon-size)}.sbdocs-content>.sbdocs-title,.sbdocs-content>.sbdocs-h2,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>.sbdocs-h2{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color)}.sbdocs-content>.sbdocs-title,.sbdocs-content>h1:first-of-type,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>h1:first-of-type{margin-top:0}.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxxlarge)}}.sbdocs-content>h2,.sbdocs-content>div>h2{padding-bottom:0;border-bottom:none}.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>table,.sbdocs-content>div>table{width:auto;min-width:auto}.sbdocs-content>ul li ul,.sbdocs-content>ul li ol,.sbdocs-content>ul li dl,.sbdocs-content>div>ul li ul,.sbdocs-content>div>ul li ol,.sbdocs-content>div>ul li dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.sbdocs-content>p b,.sbdocs-content>p strong,.sbdocs-content>ul li b,.sbdocs-content>ul li strong,.sbdocs-content>stzh-text b,.sbdocs-content>stzh-text strong,.sbdocs-content>div>p b,.sbdocs-content>div>p strong,.sbdocs-content>div>ul li b,.sbdocs-content>div>ul li strong,.sbdocs-content>div>stzh-text b,.sbdocs-content>div>stzh-text strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>p i,.sbdocs-content>p em,.sbdocs-content>ul li i,.sbdocs-content>ul li em,.sbdocs-content>stzh-text i,.sbdocs-content>stzh-text em,.sbdocs-content>div>p i,.sbdocs-content>div>p em,.sbdocs-content>div>ul li i,.sbdocs-content>div>ul li em,.sbdocs-content>div>stzh-text i,.sbdocs-content>div>stzh-text 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)}";
 const StzhSkinStorybookPreview$1 = /*@__PURE__*/ proxyCustomElement(class StzhSkinStorybookPreview extends HTMLElement {
   constructor() {

package/dist/components/stzh-skin-storybook-preview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-skin-storybook-preview.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,~~0+xCAA0+xC~~;;~~MCajgyCA~~,0BAAwB;;;;;EACnC,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,QACE,EAAC,IAAI,OACE,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSkinStorybookPreview"],"sources":["src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.scss?tag=stzh-skin-storybook-preview","src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.tsx"],"sourcesContent":["\n.sbdocs-content >,\n.sbdocs-content > div > {\n @include font;\n @include richtext-slotted;\n\n .sbdocs-title, .sbdocs-h2 {\n @include font('title');\n color: $headingColor;\n }\n\n .sbdocs-title,\n h1:first-of-type {\n margin-top: 0;\n }\n\n h2:first-of-type {\n @include spaceCurve('margin-top', 'large');\n }\n\n h2 {\n padding-bottom: 0;\n border-bottom: none;\n }\n\n pre > .docblock-source {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n table {\n width: auto;\n min-width: auto;\n }\n\n ul li {\n ul, ol, dl {\n list-style: none;\n padding-left: 0;\n overflow: hidden;\n }\n }\n\n p,\n ul li,\n stzh-text {\n @include font;\n @include fontCurve($textFontCurveDefault);\n\n b, strong {\n @include font('heavy');\n }\n\n i, em {\n @include font;\n }\n }\n}\n","import {\n Component,\n Host,\n h\n} from \"@stencil/core\";\n\n/*\n \n */\n@Component({\n tag: \"stzh-skin-storybook-preview\",\n styleUrl: \"stzh-skin-storybook-preview.scss\"\n})\nexport class StzhSkinStorybookPreview {\n componentDidLoad() {\n // copy this string from console and put it in preview.css\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}
1	+ {"file":"stzh-skin-storybook-preview.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,yiyCAAyiyC;;MCahkyCA,0BAAwB;;;;;EACnC,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,QACE,EAAC,IAAI,OACE,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSkinStorybookPreview"],"sources":["src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.scss?tag=stzh-skin-storybook-preview","src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.tsx"],"sourcesContent":["\n.sbdocs-content >,\n.sbdocs-content > div > {\n @include font;\n @include richtext-slotted;\n\n .sbdocs-title, .sbdocs-h2 {\n @include font('title');\n color: $headingColor;\n }\n\n .sbdocs-title,\n h1:first-of-type {\n margin-top: 0;\n }\n\n h2:first-of-type {\n @include spaceCurve('margin-top', 'large');\n }\n\n h2 {\n padding-bottom: 0;\n border-bottom: none;\n }\n\n pre > .docblock-source {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n table {\n width: auto;\n min-width: auto;\n }\n\n ul li {\n ul, ol, dl {\n list-style: none;\n padding-left: 0;\n overflow: hidden;\n }\n }\n\n p,\n ul li,\n stzh-text {\n @include font;\n @include fontCurve($textFontCurveDefault);\n\n b, strong {\n @include font('heavy');\n }\n\n i, em {\n @include font('medium-italic');\n }\n }\n}\n","import {\n Component,\n Host,\n h\n} from \"@stencil/core\";\n\n/*\n \n */\n@Component({\n tag: \"stzh-skin-storybook-preview\",\n styleUrl: \"stzh-skin-storybook-preview.scss\"\n})\nexport class StzhSkinStorybookPreview {\n componentDidLoad() {\n // copy this string from console and put it in preview.css\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/components/stzh-table.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as setPropsIfNull, h as hasSlot } from './utils.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);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.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}}";
+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}}";
 const CLASS_HAS_STICKED = "has-sticked";
 const CLASS_IS_STICKY_LEFT = "is-sticky-left";

package/dist/components/stzh-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-table.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,u0SAAu0S;;ACY51S,MAAM,iBAAiB,GAAG,aAAa,CAAC;AACxC,MAAM,oBAAoB,GAAG,gBAAgB,CAAC;AAC9C,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;MAcnCA,WAAS;;;;IAuCZ,sBAAiB,GAAG;MAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO;OACR;MAED,MAAM,IAAI,GAA0B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;MACzF,IAAI,CAAC,OAAO,CAAC,CAAC,GAAwB;QACpC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACvC,KAAK,CAAC,OAAO,CAAC,CAAC,IAA0B,EAAE,KAAK;UAC9C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;UAC5C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;UAE7C,IAAI,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE;YAC5B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;WAC1C;UAED,IAAI,KAAK,KAAK,IAAI,CAAC,UAAU,EAAE;YAC7B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;WAC3C;SACF,CAAC,CAAC;OACJ,CAAC,CAAC;KACJ,CAAA;IAEO,uBAAkB,GAAG;MAC3B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO;OACR;MAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;MACvD,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;MACzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;MAEzD,IAAI,CAAC,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;MAC5D,IAAI,CAAC,aAAa,GAAG,iBAAiB,GAAG,CAAC,CAAC;MAC3C,IAAI,CAAC,cAAc,GAAG,iBAAiB,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;MAElF,MAAM,IAAI,GAA0B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;MACzF,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;MAEzB,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO;OACR;MAED,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;MAC1B,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;MAC3B,MAAM,KAAK,GAAc,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;MAEvD,KAAK,CAAC,OAAO,CAAC,CAAC,IAA0B,EAAE,KAAa;QACtD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QACnC,MAAM,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;QAElD,IACE,IAAI,CAAC,aAAa;aACf,KAAK,KAAK,IAAI,CAAC,SAAS;aACxB,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,UAAU,EAC7C;UACA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClC;QAED,IACE,IAAI,CAAC,cAAc;aAChB,KAAK,KAAK,IAAI,CAAC,UAAU;aACzB,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,kBAAkB,IAAI,WAAW,EACnE;UACA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;OACF,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,CAAC,GAAwB;QACpC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACvC,KAAK,CAAC,OAAO,CAAC,CAAC,IAA0B,EAAE,KAAa;UACtD,IACE,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;eACrC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAC5C;YACA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;WACvC;eAAM;YACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;WAC1C;SACF,CAAC,CAAC;OACJ,CAAC,CAAC;KACJ,CAAA;IAEO,SAAI,GAAG;MACb,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAC5C,uDAAuD,CACxD,CAAC;MAEF,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACrD,oMAAoM,CACrM,CAAC;MAEF,IAAI,WAAW,EAAE;QACf,cAAc,CAAC,WAAW,EAAE;UAC1B,IAAI,EAAE,QAAQ;UACd,IAAI,EAAE,OAAO;UACb,YAAY,EAAE,IAAI;SACK,CAAC,CAAC;OAC5B;MAED,iBAAiB,CAAC,OAAO,CAAC,YAAY;QACpC,cAAc,CAAC,YAAY,EAAE;UAC3B,MAAM,EAAE,IAAI;UACZ,QAAQ,EAAE,IAAI;UACd,OAAO,EAAE,OAAO;UAChB,IAAI,EAAE,OAAO;SACa,CAAC,CAAA;OAC9B,CAAC,CAAC;MAEH,IAAI,CAAC,iBAAiB,EAAE,CAAC;MACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B,CAAA;IAED,iBAAY,GAAG;MACb,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;OAClD;MAED,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACtE,CAAA;IAEO,iBAAY,GAAG;MACrB,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;OAClD;MAED,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACtE,CAAA;qBApK2B,IAAI;sBAGH,IAAI;2BAUmB,KAAK;yBAEvB,KAAK;0BACJ,KAAK;wBACP,KAAK;2BACD,EAAE;4BACD,EAAE;;EAMxC,gBAAgB;IACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EA0ID,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GAC3C;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACpE,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE9C,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;MAClB,eAAe,EAAE,IAAI,CAAC,YAAY;MAClC,iBAAiB,EAAE,IAAI,CAAC,aAAa;MACrC,kBAAkB,EAAE,IAAI,CAAC,cAAc;MACvC,wBAAwB,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC;MACjF,yBAAyB,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC;MACpF,UAAU,EAAE,OAAO;MACnB,aAAa,EAAE,eAAe;MAC9B,sBAAsB,EAAE,oBAAoB,IAAI,cAAc;MAC9D,YAAY,EAAE,eAAe,IAAI,oBAAoB,IAAI,cAAc;KACxE,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,wBAAwB,IACjC,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACN,WAAK,KAAK,EAAC,2BAA2B,IACpC,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,CACF,EACN,WAAK,KAAK,EAAC,2BAA2B,IACpC,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAoB,CAAC,EACvD,KAAK,EAAC,qBAAqB,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,IAE3B,eAAa,CACT,CACF,EACN,WAAK,KAAK,EAAC,0BAA0B,IACnC,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,uBAAuB,GAAQ,EAC1C,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC7C,EACN,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,gCAAgC,IACzC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhTable"],"sources":["src/components/stzh-table/stzh-table.scss?tag=stzh-table","src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["/*\n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n * @prop --search-input-width: Search input width from small breakpoint\n\n * @prop --stzh-table-max-width: Global: Maximum height of table\n * @prop --stzh-table-min-width: Global: Minium width of table\n * @prop --stzh-table-cell-padding: Global: Cells padding\n * @prop --stzh-table-search-input-width: Global: Search input width from small breakpoint\n /\n\nstzh-table {\n @include host;\n @include table-host();\n}\n\n.stzh-table {\n @include table(\"table\");\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull, hasSlot } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n * @slot list - Slot for list element showing on mobile\n * @slot pagination - Slot for action `stzh-pagination` element\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n const listSortDropdowns = this.element.querySelectorAll(\n 'stzh-dropdown[slot=\"list-sort-by-dropdown\"], [slot=\"list-sort-by-dropdown\"] stzh-dropdown, stzh-dropdown[slot=\"list-sort-direction-dropdown\"], [slot=\"list-sort-direction-dropdown\"] stzh-dropdown'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n type: \"search\",\n size: \"small\",\n hideOptional: true\n } as HTMLStzhInputElement);\n }\n\n listSortDropdowns.forEach(sortDropdown => {\n setPropsIfNull(sortDropdown, {\n inline: true,\n noSearch: true,\n variant: \"plain\",\n size: \"small\"\n } as HTMLStzhDropdownElement)\n });\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\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 this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const headingSlotUsed = hasSlot(this.element, \"heading\");\n const actionButtonSlotUsed = hasSlot(this.element, \"action-button\");\n const searchSlotUsed = hasSlot(this.element, \"search\");\n const hasList = hasSlot(this.element, \"list\");\n\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n \"has-list\": hasList,\n \"has-heading\": headingSlotUsed,\n \"has-action-or-search\": actionButtonSlotUsed \|\| searchSlotUsed,\n \"has-header\": headingSlotUsed \|\| actionButtonSlotUsed \|\| searchSlotUsed\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-table__sub-header\">\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"stzh-table__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n <div class=\"stzh-table__list-wrapper\">\n <div class=\"stzh-table__list-sort-wrapper\">\n <slot name=\"list-sort-by-dropdown\"></slot>\n <slot name=\"list-sort-direction-dropdown\"></slot>\n </div>\n <slot name=\"list\"></slot>\n </div>\n <div class=\"stzh-table__pagination-wrapper\">\n <slot name=\"pagination\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-table.js","mappings":"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","names":["StzhTable"],"sources":["src/components/stzh-table/stzh-table.scss?tag=stzh-table","src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["/*\n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n * @prop --search-input-width: Search input width from small breakpoint\n\n * @prop --stzh-table-max-width: Global: Maximum height of table\n * @prop --stzh-table-min-width: Global: Minium width of table\n * @prop --stzh-table-cell-padding: Global: Cells padding\n * @prop --stzh-table-search-input-width: Global: Search input width from small breakpoint\n /\n\nstzh-table {\n @include host;\n @include table-host();\n}\n\n.stzh-table {\n @include table(\"table\");\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull, hasSlot } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n * @slot list - Slot for list element showing on mobile\n * @slot pagination - Slot for action `stzh-pagination` element\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n const listSortDropdowns = this.element.querySelectorAll(\n 'stzh-dropdown[slot=\"list-sort-by-dropdown\"], [slot=\"list-sort-by-dropdown\"] stzh-dropdown, stzh-dropdown[slot=\"list-sort-direction-dropdown\"], [slot=\"list-sort-direction-dropdown\"] stzh-dropdown'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n type: \"search\",\n size: \"small\",\n hideOptional: true\n } as HTMLStzhInputElement);\n }\n\n listSortDropdowns.forEach(sortDropdown => {\n setPropsIfNull(sortDropdown, {\n inline: true,\n noSearch: true,\n variant: \"plain\",\n size: \"small\"\n } as HTMLStzhDropdownElement)\n });\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\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 this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const headingSlotUsed = hasSlot(this.element, \"heading\");\n const actionButtonSlotUsed = hasSlot(this.element, \"action-button\");\n const searchSlotUsed = hasSlot(this.element, \"search\");\n const hasList = hasSlot(this.element, \"list\");\n\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n \"has-list\": hasList,\n \"has-heading\": headingSlotUsed,\n \"has-action-or-search\": actionButtonSlotUsed \|\| searchSlotUsed,\n \"has-header\": headingSlotUsed \|\| actionButtonSlotUsed \|\| searchSlotUsed\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-table__sub-header\">\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"stzh-table__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n <div class=\"stzh-table__list-wrapper\">\n <div class=\"stzh-table__list-sort-wrapper\">\n <slot name=\"list-sort-by-dropdown\"></slot>\n <slot name=\"list-sort-direction-dropdown\"></slot>\n </div>\n <slot name=\"list\"></slot>\n </div>\n <div class=\"stzh-table__pagination-wrapper\">\n <slot name=\"pagination\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-tag2.js CHANGED Viewed

@@ -48,7 +48,8 @@ const StzhTag = /*@__PURE__*/ proxyCustomElement(class StzhTag extends HTMLEleme
     this.onClick = (event) => {
       this.stzhClick.emit({
         component: "stzh-tag",
-        originalEvent: event
+        originalEvent: event,
+        href: this.href
       });
     };
     this.label = "";