@oiz/stzh-components 2.4.0 → 2.5.0-alpha

package/dist/collection/components/stzh-dropdown/stzh-dropdown.js

@@ -31,6 +31,13 @@ let dropdownCounter = 0;
  */
 export class StzhDropdown {
   constructor() {
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.options = undefined;
     this.optgroups = undefined;
     this.items = undefined;
@@ -352,6 +359,7 @@ export class StzhDropdown {
         });
       },
       onFocus: () => {
+        this.focusedByInput = true;
         if (this.tomSelect.load && this.preload === "focus") {
           // to be able to execute load function again, we reset loaded searches
           this.resetLoadedSearches();
@@ -370,7 +378,10 @@ export class StzhDropdown {
         });
         this.element.dispatchEvent(focusEvent);
         this.stzhFocus.emit({
-          component: "stzh-dropdown"
+          component: "stzh-dropdown",
+          originalEvent: {
+            target: this.tomSelect.control
+          }
         });
       },
       onBlur: () => {
@@ -440,7 +451,7 @@ export class StzhDropdown {
       [`stzh-dropdown--size-${this.size}`]: !!this.size,
       [`stzh-dropdown--${this.variant}`]: !!this.variant
     };
-    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, h("slot", null)), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, h("slot", null)), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })
       :
         h("slot", { name: "icon" })), h("label", { class: "stzh-dropdown__label", htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), this.showMarker &&
@@ -1299,7 +1310,7 @@ export class StzhDropdown {
         },
         "complexType": {
           "original": "StzhDropdownFocusEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; }",
+          "resolved": "{ component: \"stzh-dropdown\"; originalEvent: { target: Element; }; }",
           "references": {
             "StzhDropdownFocusEvent": {
               "location": "import",

package/dist/collection/components/stzh-fieldset/stzh-fieldset.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 :host ::slotted(stzh-input),

package/dist/collection/components/stzh-figure/stzh-figure.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 :host ::slotted(*) {

package/dist/collection/components/stzh-flyingfocus/stzh-flyingfocus.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 .stzh-flyingfocus {

package/dist/collection/components/stzh-flyingfocus/stzh-flyingfocus.js

@@ -55,7 +55,9 @@ export class StzhFlyingfocus {
     this.disableFloatingFocus();
   }
   handleFocus(e) {
-    let target = e.target;
+    var _a;
+    const detail = e.detail;
+    let target = (((_a = detail === null || detail === void 0 ? void 0 : detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target) || e.target);
     if (!this.container) {
       return;
     }
@@ -230,6 +232,12 @@ export class StzhFlyingfocus {
         "target": "document",
         "capture": true,
         "passive": false
+      }, {
+        "name": "stzhFocus",
+        "method": "handleFocus",
+        "target": "document",
+        "capture": true,
+        "passive": false
       }, {
         "name": "blur",
         "method": "handleBlur",

package/dist/collection/components/stzh-footer/stzh-footer.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 .stzh-footer {
@@ -118,6 +120,8 @@
 .stzh-footer *::before,
 .stzh-footer *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 .stzh-footer [slot=logo],
 .stzh-footer [slot=logo] img {
@@ -132,7 +136,7 @@
 .stzh-footer stzh-link[slot=social-link],
 .stzh-footer stzh-link.stzh-footer__link {
   --color: var(--stzh-base-color);
-  --text-decoration: none;
+  --text-decoration-line: none;
   --icon-wrapper-height: auto;
   --icon-size: var(--stzh-icon-size-large);
 }

package/dist/collection/components/stzh-footer/stzh-footer.js

@@ -46,7 +46,9 @@ export class StzhFooter {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const logoSlotUsed = hasSlot(this.element, "logo");

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 :host {
@@ -107,29 +109,62 @@
   --stzh-link-hover-color: var(--stzh-base-invert-color);
   --background-color: var(--stzh-color-error);
   --color: var(--stzh-base-invert-color);
-  --close-color: var(--stzh-base-invert-color);
   --richtext-color: var(--color);
+  --close-color: var(--stzh-base-invert-color);
   --button-color: var(--color);
-  --button-hover-color: var(--background-color);
+  --hover-button-color: var(--background-color);
+  --hover-close-color: var(--background-color);
 }
 :host ::slotted(stzh-richtext) {
   --stzh-base-color: var(--richtext-color);
 }
 :host ::slotted(stzh-button[slot=button]) {
-  --stzh-base-invert-color: var(--button-color);
+  /* Active */
+  /* Disabled */
 }
-:host ::slotted(stzh-button[slot=button])[variant=default]:not([disabled]) {
-  --color: var(--button-hover-color);
+:host ::slotted(stzh-button[slot=button])[variant=default] {
+  --color: var(--hover-button-color);
   --background-color: var(--stzh-base-invert-color);
   --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--hover-button-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
 }
-:host ::slotted(stzh-button[slot=button])[variant=secondary]:not([disabled]) {
+:host ::slotted(stzh-button[slot=button])[variant=secondary] {
   --color: var(--stzh-base-invert-color);
   --background-color: transparent;
   --border-color: var(--stzh-base-invert-color);
-  --hover-color: var(--button-hover-color);
-  --hover-background-color: var(--stzh-base-invert-color);
-  --hover-border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--hover-button-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
+}
+:host ::slotted(stzh-button[slot=button])[variant=tertiary] {
+  --color: var(--stzh-base-invert-color);
+  --background-color: transparent;
+  --hover-color: var(--stzh-base-invert-color);
+  --hover-background-color: var(--stzh-color-white16);
+}
+:host ::slotted(stzh-button[slot=button])[active]:not([active=false]) {
+  --color: var(--hover-button-color);
+  --background-color: var(--stzh-color-white72);
+  --border-color: transparent;
+  --hover-color: var(--hover-button-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
+}
+:host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false]) {
+  --border-color: transparent;
+  --background-color: var(--stzh-color-white32);
+  --hover-border-color: transparent;
+  --hover-background-color: var(--stzh-color-white32);
+}
+:host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=secondary], :host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=input], :host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=tertiary] {
+  --color: var(--stzh-color-white32);
+  --border-color: var(--stzh-color-white32);
+  --background-color: transparent;
+  --hover-color: var(--stzh-color-white32);
+  --hover-border-color: var(--stzh-color-white32);
+  --hover-background-color: transparent;
 }
 
 .stzh-ghettobox {
@@ -142,6 +177,7 @@
   background-color: var(--background-color);
   color: var(--color);
   box-shadow: var(--stzh-box-shadow-message);
+  border-radius: var(--stzh-button-border-radius);
   /* Has close button */
 }
 @media screen and (min-width: 1024px) {
@@ -278,52 +314,56 @@
     margin-left: var(--stzh-space-small);
   }
 }
-.stzh-ghettobox__close-button {
-  top: var(--stzh-space-medium);
-  right: var(--stzh-space-medium);
+.stzh-ghettobox__close {
+  /* Active */
+  /* Disabled */
   position: absolute;
-  display: flex;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font-family: inherit;
-  border: none;
-  background: none;
-  padding: var(--stzh-space-xsmall);
-  margin: calc(var(--stzh-space-xsmall) * -1);
-  border-radius: var(--stzh-button-border-radius);
-  cursor: pointer;
-}
-@media screen and (min-width: 1024px) {
-  .stzh-ghettobox__close-button {
-    top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-ghettobox__close-button {
-    top: var(--stzh-space-xlarge);
-  }
+  top: 0;
+  right: 0;
 }
-@media screen and (min-width: 1024px) {
-  .stzh-ghettobox__close-button {
-    right: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-ghettobox__close-button {
-    right: var(--stzh-space-xlarge);
-  }
+.stzh-ghettobox__close[variant=default] {
+  --color: var(--hover-close-color);
+  --background-color: var(--stzh-base-invert-color);
+  --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--hover-close-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
 }
-@media screen and (min-width: 600px) {
-  .stzh-ghettobox__close-button {
-    position: initial;
-    top: initial;
-    right: initial;
-  }
+.stzh-ghettobox__close[variant=secondary] {
+  --color: var(--stzh-base-invert-color);
+  --background-color: transparent;
+  --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--hover-close-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
 }
-.stzh-ghettobox__close-icon {
-  --size: var(--stzh-icon-size-medium);
-  color: var(--close-color);
+.stzh-ghettobox__close[variant=tertiary] {
+  --color: var(--stzh-base-invert-color);
+  --background-color: transparent;
+  --hover-color: var(--stzh-base-invert-color);
+  --hover-background-color: var(--stzh-color-white16);
+}
+.stzh-ghettobox__close[active]:not([active=false]) {
+  --color: var(--hover-close-color);
+  --background-color: var(--stzh-color-white72);
+  --border-color: transparent;
+  --hover-color: var(--hover-close-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
+}
+.stzh-ghettobox__close[disabled]:not([disabled=false]) {
+  --border-color: transparent;
+  --background-color: var(--stzh-color-white32);
+  --hover-border-color: transparent;
+  --hover-background-color: var(--stzh-color-white32);
+}
+.stzh-ghettobox__close[disabled]:not([disabled=false])[variant=secondary], .stzh-ghettobox__close[disabled]:not([disabled=false])[variant=input], .stzh-ghettobox__close[disabled]:not([disabled=false])[variant=tertiary] {
+  --color: var(--stzh-color-white32);
+  --border-color: var(--stzh-color-white32);
+  --background-color: transparent;
+  --hover-color: var(--stzh-color-white32);
+  --hover-border-color: var(--stzh-color-white32);
+  --hover-background-color: transparent;
 }
 .stzh-ghettobox--has-close-button {
   padding-right: var(--stzh-space-xxxlarge);

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.js

@@ -77,7 +77,9 @@ export class StzhGhettobox {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const classes = {
@@ -85,7 +87,7 @@ export class StzhGhettobox {
       "stzh-ghettobox--has-close-button": !this.hideClose
     };
     return (h(Host, { hidden: !this.open }, h("div", { class: classes }, h("h1", { class: "stzh-ghettobox__hidden-title" }, this.hiddenTitle || this.localization.hiddenTitle), h("div", { class: "stzh-ghettobox__message" }, h("h2", { class: "stzh-ghettobox__main-title" }, this.mainTitle), h("div", { class: "stzh-ghettobox__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-ghettobox__button" }, h("slot", { name: "button" }))), !this.hideClose &&
-      h("div", { class: "stzh-ghettobox__close" }, h("button", { class: "stzh-ghettobox__close-button", onClick: this.onCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-ghettobox__close-icon", name: "close" }))))));
+      h("stzh-button", { class: "stzh-ghettobox__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close" }))));
   }
   static get is() { return "stzh-ghettobox"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-header/stzh-header.css

@@ -95,6 +95,8 @@
 :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-keyframes stzh-header-open {

package/dist/collection/components/stzh-header/stzh-header.js

@@ -9,6 +9,33 @@ import { media } from "../../utils/media-utils";
  */
 export class StzhHeader {
   constructor() {
+    this.handleResize = () => {
+      if (this.stickyDisabled) {
+        return;
+      }
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(() => {
+        readTask(() => {
+          this.isSmall = media("small").matches;
+          this.isSmallheader = media("smallheader").matches;
+          this.headerTop = this.element.offsetTop;
+          this.headerHeight = this.element.offsetHeight;
+          this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;
+          this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;
+        });
+        writeTask(() => {
+          if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {
+            this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;
+          }
+          else {
+            this.appnavPlaceholderElement.style.height = "0px";
+          }
+        });
+        this.scrollListener();
+      });
+    };
     this.href = "https://www.stadt-zuerich.ch";
     this.metabarStay = false;
     this.stickyDisabled = false;
@@ -54,33 +81,6 @@ export class StzhHeader {
       }
     }
   }
-  resizeListener() {
-    if (this.stickyDisabled) {
-      return;
-    }
-    if (this.debounceResize) {
-      window.cancelAnimationFrame(this.debounceResize);
-    }
-    this.debounceResize = requestAnimationFrame(() => {
-      readTask(() => {
-        this.isSmall = media("small").matches;
-        this.isSmallheader = media("smallheader").matches;
-        this.headerTop = this.element.offsetTop;
-        this.headerHeight = this.element.offsetHeight;
-        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;
-        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;
-      });
-      writeTask(() => {
-        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {
-          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;
-        }
-        else {
-          this.appnavPlaceholderElement.style.height = "0px";
-        }
-      });
-      this.scrollListener();
-    });
-  }
   scrollListener() {
     if (this.stickyDisabled) {
       return;
@@ -138,9 +138,14 @@ export class StzhHeader {
   connectedCallback() {
     this.appnavPlaceholderElement = document.createElement("div");
     this.element.parentElement.appendChild(this.appnavPlaceholderElement);
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
   }
   disconnectedCallback() {
     this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   }
   render() {
     const navSlotUsed = hasSlot(this.element, "nav");
@@ -284,24 +289,6 @@ export class StzhHeader {
   static get elementRef() { return "element"; }
   static get listeners() {
     return [{
-        "name": "resize",
-        "method": "resizeListener",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "DOMContentLoaded",
-        "method": "resizeListener",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "load",
-        "method": "resizeListener",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
         "name": "scroll",
         "method": "scrollListener",
         "target": "window",

package/dist/collection/components/stzh-heading/stzh-heading.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 :host {

package/dist/collection/components/stzh-hr/stzh-hr.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 :host {

package/dist/collection/components/stzh-hspace/stzh-hspace.css

@@ -95,11 +95,14 @@
 :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);
 }
 
 :host {
   --h-space: var(--stzh-space-default);
   --h-around: 0;
+  display: flex;
   clear: both;
 }
 :host::after {
@@ -799,6 +802,9 @@
 }
 
 .stzh-hspace {
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;

package/dist/collection/components/stzh-icon/stzh-icon.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 :host {

package/dist/collection/components/stzh-icon-sprite/assets/svgsprites/symbol/sprite.symbol.html

@@ -235,7 +235,7 @@ for further details on how to create this embeddable sprite variant.
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-list-expanded" xmlns="http://www.w3.org/2000/svg"><path d="M2 4a1 1 0 011-1h18a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1V4zm0 7a1 1 0 011-1h18a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1v-2zM2 18a1 1 0 011-1h18a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1v-2z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-list-shrinked" xmlns="http://www.w3.org/2000/svg"><path d="M2 4h20M2 8h20M2 12h20M2 16h20M2 20h20" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-lock" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#cdclip0_7292_54411)"><path d="M7.125 11.25V5.625a4.875 4.875 0 119.75 0v5.625M12 15.375v3.75M3.75 11.25h16.5v12H3.75v-12z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="cdclip0_7292_54411"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
-		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-mail" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#ceclip0_1638_23276)"><path d="M.75 4.5V4a.5.5 0 00-.5.5h.5zM12 14.775l-.337.37a.5.5 0 00.674 0l-.337-.37zM23.25 4.5h.5a.5.5 0 00-.5-.5v.5zm0 15v.5a.5.5 0 00.5-.5h-.5zm-22.5 0h-.5a.5.5 0 00.5.5v-.5zM.413 4.87l11.25 10.274.674-.738L1.087 4.13l-.674.738zm11.924 10.274L23.587 4.87l-.674-.738-11.25 10.275.674.738zM.75 5h22.5V4H.75v1zm22-.5v15h1v-15h-1zm.5 14.5H.75v1h22.5v-1zm-22 .5v-15h-1v15h1z" fill="currentColor"/></g><defs><clipPath id="ceclip0_1638_23276"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
+		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-mail" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#ceclip0_1638_23276)"><path d="M.75 4.5L12 15.375 23.25 4.5m-22.5 0h22.5m-22.5 0v15m22.5-15v15m-7.5-7.65l7.5 7.65m0 0H.75m0 0l7.5-7.65" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="ceclip0_1638_23276"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-mail-filled" xmlns="http://www.w3.org/2000/svg"><path d="M.75 5.195v13.59l6.84-6.977L.75 5.195zM1.45 19.5h21.1l-6.86-6.997-3.342 3.232a.5.5 0 01-.696 0L8.31 12.503 1.45 19.5zM23.25 18.786V5.196l-6.84 6.612 6.84 6.978z" fill="currentColor"/><path d="M22.53 4.5H1.47L12 14.68 22.53 4.5z" fill="currentColor"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-map" xmlns="http://www.w3.org/2000/svg"><path d="M8.667 6v15m0-15L2 3v15l6.667 3m0-15l6.666-3M8.667 21l6.666-3m0-15v15m0-15L22 6v15l-6.667-3" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-mental-illness" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#chclip0_128_76104)" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"><path d="M11.25 12.375a4.5 4.5 0 100-9 4.5 4.5 0 000 9z"/><path d="M13.5 7.125H12v-1.5h-1.5v1.5H9v1.5h1.5v1.5H12v-1.5h1.5v-1.5z"/><path d="M12.28 23.186a.094.094 0 00.14-.04c.275-.642 1.746-4.02 2.205-4.02.75 0 2.227.75 3.375.75 1.148 0 .933-2.657 1.292-3.74.359-1.085.583-1.72.583-2.26 1.436-.145 1.175-.594.996-1.027-.18-.434-1.746-2.399-1.746-2.724 0-.375.375-1.528.375-2.25C19.5 4.59 17.625.75 11.253.75 5.01.75 3 5.347 3 7.875c0 2.528.71 4.42 1.5 5.25.79.83 1.5 1.592 1.5 3a3.577 3.577 0 01-.75 2.25l7.03 4.81z"/></g><defs><clipPath id="chclip0_128_76104"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>