@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/components/stzh-search.js

@@ -1,19 +1,25 @@
-import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { a as axios } from './axios.js';
 import { r as raf, h as hasSlot } from './utils.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils.js';
 import { d as debounce_1 } from './debounce.js';
-import { d as defineCustomElement$a } from './stzh-badge2.js';
-import { d as defineCustomElement$9 } from './stzh-button2.js';
-import { d as defineCustomElement$8 } from './stzh-details2.js';
-import { d as defineCustomElement$7 } from './stzh-heading2.js';
-import { d as defineCustomElement$6 } from './stzh-icon2.js';
-import { d as defineCustomElement$5 } from './stzh-link2.js';
-import { d as defineCustomElement$4 } from './stzh-loader2.js';
-import { d as defineCustomElement$3 } from './stzh-message2.js';
+import { d as defineCustomElement$g } from './stzh-badge2.js';
+import { d as defineCustomElement$f } from './stzh-button2.js';
+import { d as defineCustomElement$e } from './stzh-chip2.js';
+import { d as defineCustomElement$d } from './stzh-chipgroup2.js';
+import { d as defineCustomElement$c } from './stzh-chipselect2.js';
+import { d as defineCustomElement$b } from './stzh-clamp2.js';
+import { d as defineCustomElement$a } from './stzh-details2.js';
+import { d as defineCustomElement$9 } from './stzh-dropdown2.js';
+import { d as defineCustomElement$8 } from './stzh-heading2.js';
+import { d as defineCustomElement$7 } from './stzh-icon2.js';
+import { d as defineCustomElement$6 } from './stzh-link2.js';
+import { d as defineCustomElement$5 } from './stzh-loader2.js';
+import { d as defineCustomElement$4 } from './stzh-message2.js';
+import { d as defineCustomElement$3 } from './stzh-popover2.js';
 import { d as defineCustomElement$2 } from './stzh-text2.js';
 
-const stzhSearchCss = ":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-search{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;--filter-background-color:var(--stzh-search-filter-background-color, var(--stzh-color-grey10));--grid-template-areas:\"filters-main filters-main filters-main filters-main\"\n  \"results results results results\"}stzh-search[hidden]{display:none}stzh-search::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::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-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \". . results results results results results results results results . .\"}}stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=\"false\"]))){--grid-template-areas:\"filters-main filters-main filters-main filters-main\"\n  \"filters-aside filters-aside filters-aside filters-aside\"\n  \"results results results results\"}@media screen and (min-width: 900px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=\"false\"]))){--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside\"\n      \"results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=\"false\"]))){--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"filters-aside filters-aside filters-aside filters-aside results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search:where([variant=\"teaser\"]){--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"results results results results results results results results results results results results\"}}.stzh-search{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--filter-background-color)}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--filter-background-color)}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}.stzh-search__filters-aside-heading{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-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);padding-bottom:var(--stzh-space-xsmall);color:var(--stzh-color-primary70);display:none}@media screen and (min-width: 600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{display:block}}@media screen and (min-width: 1260px){.stzh-search stzh-button.stzh-search__filters-aside-details-trigger{display:none}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:-webkit-sticky;position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__empty-text{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}.stzh-search--teaser .stzh-search__filters-main:not(:empty){padding:0;background-color:transparent}.stzh-search--teaser .stzh-search__filters-aside:not(:empty){padding:0;background-color:transparent}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0px}.stzh-search--has-hidden-main-filters .stzh-search__filters-main{display:none}.stzh-search--has-hidden-aside-filters .stzh-search__filters-aside{display:none}.stzh-search--has-hidden-main-filters .stzh-search__results-wrapper,.stzh-search--has-hidden-main-filters.stzh-search--teaser .stzh-search__results-wrapper{margin-top:0px}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}";
+const stzhSearchCss = ":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-search{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;--filter-background-color:var(--stzh-search-filter-background-color, var(--stzh-color-grey10));--grid-template-areas:\"filters-main filters-main filters-main filters-main\" \"results results results results\"}stzh-search[hidden]{display:none}stzh-search::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::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-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\" \"results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\" \". . results results results results results results results results . .\"}}stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=\"false\"]))){--grid-template-areas:\"filters-main filters-main filters-main filters-main\" \"filters-aside filters-aside filters-aside filters-aside\" \"results results results results\"}@media screen and (min-width: 900px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=\"false\"]))){--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\" \"filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside\" \"results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=\"false\"]))){--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\" \"filters-aside filters-aside filters-aside filters-aside results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search:where([variant=\"teaser\"]){--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\" \"results results results results results results results results results results results results\"}}.stzh-search{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--filter-background-color)}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--filter-background-color)}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}.stzh-search__filters-aside-heading{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-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);padding-bottom:var(--stzh-space-xsmall);color:var(--stzh-color-primary70);display:none}@media screen and (min-width: 600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{display:block}}@media screen and (min-width: 1260px){.stzh-search stzh-button.stzh-search__filters-aside-details-trigger{display:none}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:-webkit-sticky;position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__empty-text{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}.stzh-search--teaser .stzh-search__filters-main:not(:empty){padding:0;background-color:transparent}.stzh-search--teaser .stzh-search__filters-aside:not(:empty){padding:0;background-color:transparent}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0px}.stzh-search--has-hidden-main-filters .stzh-search__filters-main{display:none}.stzh-search--has-hidden-aside-filters .stzh-search__filters-aside{display:none}.stzh-search--has-hidden-main-filters .stzh-search__results-wrapper,.stzh-search--has-hidden-main-filters.stzh-search--teaser .stzh-search__results-wrapper{margin-top:0px}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}.stzh-search--is-breakout{--filter-background-color:var(--stzh-color-cobaltblue20);background-color:var(--stzh-color-white)}.stzh-search--is-breakout .stzh-search{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header-wrapper{background-color:var(--stzh-color-cobaltblue20)}.stzh-search--is-breakout .stzh-search__filters-main{padding-left:1.25rem;padding-right:1.25rem;position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-xlarge);background-color:var(--stzh-color-cobaltblue20);display:flex;justify-content:space-between}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__header{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxxlarge)}}";
 
 function defaultTemplateResult(search, item) {
   return `
@@ -24,6 +30,8 @@ function defaultTemplateResult(search, item) {
       topic="{topic}"
       service="{service}"
       event-location="{eventLocation}"
+      ${item.eventDateStart && 'event-date-start="{eventDateStart}"'}
+      ${item.eventDateEnd && 'event-date-end="{eventDateEnd}"'}
       download-heading="{downloadHeading}"
       meta='{meta}'
       breadcrumb-items='{breadcrumbItems}'
@@ -32,36 +40,33 @@ function defaultTemplateResult(search, item) {
       ${item.imagePosition && 'image-position="{imagePosition}"'}
       ${item.download && 'download="{download}"'}
       style="
-        ${item.serviceBackgroundColor ? '--service-background-color: {serviceBackgroundColor};' : ''}
-        ${item.serviceColor ? '--service-color: {serviceColor};' : ''}
+        ${item.serviceBackgroundColor ? "--service-background-color: {serviceBackgroundColor};" : ""}
+        ${item.serviceColor ? "--service-color: {serviceColor};" : ""}
       "
     >
       <div slot="heading">{heading}</div>
       <div slot="description">{description}</div>
       ${item.image
-    ?
-      (item.imagePosition === "right"
-        ?
-          `<img src="${item.image}" slot="image" />`
-        :
-          `<stzh-ratio ${search.variant === "teaser" ? 'ratio="2:1"' : 'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${item.image}" /></stzh-ratio>`)
-    :
-      ''}
+    ? item.imagePosition === "right"
+      ? `<img src="${item.image}" slot="image" />`
+      : `<stzh-ratio ${search.variant === "teaser" ? 'ratio="2:1"' : 'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${item.image}" /></stzh-ratio>`
+    : ""}
     </stzh-card-${search.variant === "teaser" ? "superteaser" : "searchresult"}>
   `;
 }
 function defaultResultWrapperProps(search) {
   return {
-    layout: search.variant === "teaser" ? "teasers" : "searchresults"
+    layout: search.variant === "teaser" ? "teasers" : "searchresults",
   };
 }
 const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.stzhOverlayCloseClick = createEvent(this, "stzhOverlayCloseClick", 7);
     this._showMoreLink = false;
     this.fetch = async (append = false, initial = false) => {
-      var _a;
+      var _a, _b;
       if (this.currentController) {
         this.currentController.abort();
       }
@@ -73,7 +78,7 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
       this.error = "";
       let apiUrl = this.api.replace(/\{lang\}/gi, this.localization.$locale);
       let limit = this.limit.toString();
-      this.params.set('offset', append ? this.results.length.toString() : '0');
+      this.params.set("offset", append ? this.results.length.toString() : "0");
       if (initial) {
         const search = new URLSearchParams(location.search).get("search");
         if (search) {
@@ -83,14 +88,14 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
           }
         }
       }
-      this.params.set('limit', limit);
+      this.params.set("limit", limit);
       this.currentController = new AbortController();
       let data = {};
       try {
         // load data from API
         const response = await axios(apiUrl, {
           params: this.params,
-          signal: this.currentController.signal
+          signal: this.currentController.signal,
         });
         data = response.data;
       }
@@ -102,12 +107,23 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
       if (data.error) {
         this.error = data.message || this.localization.error;
       }
+      if (data.chipResults && data.chipResults.length) {
+        this.chipResultsHeading = (_b = data.chipResultsHeading) !== null && _b !== void 0 ? _b : "";
+        this.chipResults = data.chipResults;
+      }
+      else {
+        this.chipResultsHeading = "";
+        this.chipResults = [];
+      }
       if (data.results) {
         if (append) {
-          this.results = [...this.results, ...data.results.map(item => {
+          this.results = [
+            ...this.results,
+            ...data.results.map(item => {
               var _a;
               return (Object.assign(Object.assign({}, item), { html: this.renderResultTemplate(item.html || ((_a = data.templates) === null || _a === void 0 ? void 0 : _a.result), item) }));
-            })];
+            }),
+          ];
         }
         else {
           this.results = data.results.map(item => {
@@ -167,8 +183,15 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
         });
       });
     };
+    this.handleOverlayCloseClick = (event) => {
+      this.stzhOverlayCloseClick.emit({
+        component: "stzh-search",
+        originalEvent: event,
+      });
+    };
     this.localization = undefined;
     this.variant = "default";
+    this.breakout = false;
     this.autofetchMainFilters = false;
     this.autofetchAsideFilters = false;
     this.hideMainFilters = false;
@@ -180,17 +203,20 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
     this.preventUpdateUrl = false;
     this.templateResult = defaultTemplateResult;
     this.templateResultWrapperElement = function () {
-      return 'stzh-cardlist';
+      return "stzh-cardlist";
     };
     this.templateResultWrapperProps = defaultResultWrapperProps;
     this.resultHeadingLevel = "3";
     this.emptyText = undefined;
+    this.heading = undefined;
     this.emptyLinkHref = undefined;
     this.emptyLinkLabel = undefined;
     this.totalCount = 0;
     this.loading = false;
     this.error = "";
     this.results = [];
+    this.chipResultsHeading = undefined;
+    this.chipResults = [];
     this.resultsHeading = undefined;
     this.hasRequiredParams = false;
     this.firstFetched = false;
@@ -204,10 +230,8 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
     this.updateParams();
   }
   renderResultTemplate(html, item) {
-    let template = html
-      || (typeof this.templateResult === "function"
-        ? this.templateResult(this.element, item)
-        : this.templateResult);
+    let template = html ||
+      (typeof this.templateResult === "function" ? this.templateResult(this.element, item) : this.templateResult);
     [
       "href",
       "heading",
@@ -223,11 +247,13 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
       "meta",
       "breadcrumbItems",
       "eventLocation",
+      "eventDateStart",
+      "eventDateEnd",
       "download",
       "downloadHeading",
       "downloadMeta",
       "datalistItems",
-    ].forEach((property) => {
+    ].forEach(property => {
       const regex = new RegExp(`\{${property}\}`, "gi");
       let value = item[property] || "";
       if (["meta", "breadcrumbItems", "downloadMeta", "datalistItems"].includes(property) && value) {
@@ -242,7 +268,7 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
       const formData = new FormData(this.formElement);
       // @ts-ignore
       this.params = new URLSearchParams(formData);
-      this.params.set('variant', this.variant);
+      this.params.set("variant", this.variant);
     };
     if (initial) {
       const initialParams = new URLSearchParams(location.search);
@@ -250,7 +276,7 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
       if (search) {
         this.initialFetch = true;
         const currentSearchParams = new URLSearchParams(search);
-        [...new Set(currentSearchParams.keys())].forEach((key) => {
+        [...new Set(currentSearchParams.keys())].forEach(key => {
           const values = currentSearchParams.getAll(key);
           // value as string/number: input, ... / pagination
           const valueInputs = Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name="${key}"]`));
@@ -289,9 +315,9 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
       }
     });
     requiredInputFields.forEach((field) => {
-      const invalid = field.value === ""
-        || (field.minlength && field.minlength > field.value.length)
-        || (field.maxlength && field.maxlength < field.value.length);
+      const invalid = field.value === "" ||
+        (field.minlength && field.minlength > field.value.length) ||
+        (field.maxlength && field.maxlength < field.value.length);
       if (!initial) {
         field.invalid = invalid;
       }
@@ -354,8 +380,19 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
     removeMediaChangeListener(this.handleMediaChange);
   }
   render() {
-    const filtersMainUsed = hasSlot(this.element, 'filters-main');
-    const filtersAsideUsed = hasSlot(this.element, 'filters-aside');
+    const filtersMainUsed = hasSlot(this.element, "filters-main");
+    const filtersAsideUsed = hasSlot(this.element, "filters-aside");
+    let chipsProvided = true;
+    if (filtersMainUsed) {
+      const providedChipselect = this.element.querySelector("[slot='filters-main'] stzh-chipselect");
+      const providedChipgroup = this.element.querySelector("[slot='filters-main'] stzh-chipgroup");
+      if (!providedChipselect && !providedChipgroup) {
+        chipsProvided = false;
+      }
+    }
+    else {
+      chipsProvided = false;
+    }
     const resultsShown = (this.hasRequiredParams || this.firstFetched) && this.firstFetched && this.initiallyFetched;
     const classes = {
       "stzh-search": true,
@@ -374,19 +411,13 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
     const wrapperProps = typeof this.templateResultWrapperProps === "function"
       ? this.templateResultWrapperProps(this.element)
       : this.templateResultWrapperProps;
-    return (h(Host, { "has-aside-filters": filtersAsideUsed }, h("form", { ref: (el) => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, h("div", { class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, h("slot", { name: "filters-main" })), filtersAsideUsed &&
-      h(Fragment, null, h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, h("div", { class: "stzh-search__filters-aside-inner" }, h("div", { class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), h("stzh-details", { open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, h("stzh-button", { class: "stzh-search__filters-aside-details-trigger", variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), h("div", { slot: "content" }, h("slot", { name: "filters-aside" })))))), h("div", { class: "stzh-search__results-wrapper" }, resultsShown &&
-      h(Fragment, null, this.results.length === 0
-        ?
-          h(Fragment, null, this.variant !== "teaser" && this.resultsHeading &&
-            h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading }), this.emptyText &&
-            h("stzh-text", { class: "stzh-search__empty-text", innerHTML: this.emptyText }), this.emptyLinkLabel && this.emptyLinkHref &&
-            h("div", { class: "stzh-search__empty-link-wrapper" }, h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel })))
-        :
-          h(Fragment, null, this.variant !== "teaser" && this.resultsHeading &&
-            h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading }), h(WrapperElement, Object.assign({ class: "stzh-search__results" }, wrapperProps), this.results.map((result) => h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" }))), h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink &&
-            h("stzh-button", { variant: "secondary", class: "stzh-search__action-more", label: this.localization.showMore, onClick: this.handleMoreClick, a11yDisabled: this.loading })))), this.error &&
-      h("div", { class: "stzh-search__error" }, h("stzh-message", { type: "error", label: this.error })), this.loading && h("stzh-loader", { class: "stzh-search__loader" })), h("slot", null))));
+    return (h(Host, { "has-aside-filters": filtersAsideUsed, class: this.breakout ? "stzh-search--is-breakout" : "" }, this.breakout && (h("div", { class: "stzh-search__header-wrapper" }, h("div", { class: "stzh-search__header" }, h("stzh-heading", { class: "stzh-search__header-heading", curve: "h2" }, this.heading), h("stzh-button", { class: "stzh-search__overlay-close", icon: "close", iconOnly: true, size: "small", variant: "tertiary", onClick: this.handleOverlayCloseClick })))), h("form", { ref: el => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, h("div", { class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, h("slot", { name: "filters-main" }), !chipsProvided && this.chipResults.length > 0 && (h("div", { class: "stzh-search__filters-main-chips" }, this.chipResultsHeading && (h("stzh-text", { font: "heavy", size: "milli", color: "primary" }, this.chipResultsHeading)), this.chipResults[0].options ? (h("stzh-chipgroup", null, this.chipResults.map(chipResult => (h("stzh-dropdown", { label: chipResult.label, name: chipResult.value, variant: "filter", "no-search": true, "hide-optional": true, inline: true, options: chipResult.options }))))) : (h("stzh-chipselect", { multiple: true, name: "subject", label: this.chipResultsHeading, "label-hidden": true, data: this.chipResults.map(chipResult => ({
+        label: chipResult.label,
+        value: chipResult.value,
+        counter: `${chipResult.amount}`,
+        variant: "filter",
+        size: "small",
+      })) }))))), filtersAsideUsed && (h(Fragment, null, h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, h("div", { class: "stzh-search__filters-aside-inner" }, h("div", { class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), h("stzh-details", { open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, h("stzh-button", { class: "stzh-search__filters-aside-details-trigger", variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), h("div", { slot: "content" }, h("slot", { name: "filters-aside" }))))))), h("div", { class: "stzh-search__results-wrapper" }, resultsShown && (h(Fragment, null, this.results.length === 0 ? (h(Fragment, null, this.variant !== "teaser" && this.resultsHeading && (h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), this.emptyText && (h("stzh-text", { class: "stzh-search__empty-text", innerHTML: this.emptyText })), this.emptyLinkLabel && this.emptyLinkHref && (h("div", { class: "stzh-search__empty-link-wrapper" }, h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel }))))) : (h(Fragment, null, this.variant !== "teaser" && this.resultsHeading && (h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), h(WrapperElement, Object.assign({ class: "stzh-search__results" }, wrapperProps), this.results.map(result => (h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" })))), h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink && (h("stzh-button", { variant: "secondary", class: "stzh-search__action-more", label: this.localization.showMore, onClick: this.handleMoreClick, a11yDisabled: this.loading }))))))), this.error && (h("div", { class: "stzh-search__error" }, h("stzh-message", { type: "error", label: this.error }))), this.loading && h("stzh-loader", { class: "stzh-search__loader" })), h("slot", null))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -398,6 +429,7 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
 }, [4, "stzh-search", {
     "localization": [16],
     "variant": [1],
+    "breakout": [4],
     "autofetchMainFilters": [4, "autofetch-main-filters"],
     "autofetchAsideFilters": [4, "autofetch-aside-filters"],
     "hideMainFilters": [516, "hide-main-filters"],
@@ -412,12 +444,15 @@ const StzhSearch$1 = /*@__PURE__*/ proxyCustomElement(class StzhSearch extends H
     "templateResultWrapperProps": [16],
     "resultHeadingLevel": [1, "result-heading-level"],
     "emptyText": [1, "empty-text"],
+    "heading": [1],
     "emptyLinkHref": [1, "empty-link-href"],
     "emptyLinkLabel": [1, "empty-link-label"],
     "totalCount": [32],
     "loading": [32],
     "error": [32],
     "results": [32],
+    "chipResultsHeading": [32],
+    "chipResults": [32],
     "resultsHeading": [32],
     "hasRequiredParams": [32],
     "firstFetched": [32],
@@ -432,7 +467,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-search", "stzh-badge", "stzh-button", "stzh-details", "stzh-heading", "stzh-icon", "stzh-link", "stzh-loader", "stzh-message", "stzh-text"];
+  const components = ["stzh-search", "stzh-badge", "stzh-button", "stzh-chip", "stzh-chipgroup", "stzh-chipselect", "stzh-clamp", "stzh-details", "stzh-dropdown", "stzh-heading", "stzh-icon", "stzh-link", "stzh-loader", "stzh-message", "stzh-popover", "stzh-text"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-search":
       if (!customElements.get(tagName)) {
@@ -441,40 +476,70 @@ function defineCustomElement$1() {
       break;
     case "stzh-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$g();
       }
       break;
     case "stzh-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$f();
+      }
+      break;
+    case "stzh-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "stzh-chipgroup":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "stzh-chipselect":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "stzh-clamp":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
       }
       break;
     case "stzh-details":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
+      }
+      break;
+    case "stzh-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
       }
       break;
     case "stzh-heading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "stzh-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "stzh-link":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "stzh-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "stzh-message":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-popover":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }