@oiz/stzh-components 2.2.0 → 2.3.0-alpha

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

@@ -147,6 +147,10 @@
   cursor: -webkit-grabbing;
 }
 
+:root {
+  --stzh-font: var(--stzh-font-family-regular, "Helvetica Neue", Helvetica, Arial, sans-serif);
+}
+
 /**
  * Axis component based on the d3.axis interface
  * Changed color to match stzh website (original #B8B8B8)
@@ -154,7 +158,8 @@
  */
 .sszvis-axis text {
   fill: #767676;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.625rem;
   font-style: normal;
   font-weight: normal;
@@ -166,7 +171,7 @@
 .sszvis-axis path,
 .sszvis-axis line {
   fill: none;
-  stroke: #B8B8B8;
+  stroke: #b8b8b8;
   shape-rendering: crispEdges;
 }
 
@@ -197,9 +202,9 @@
 }
 
 .sszvis-axis__label-contour {
-  fill: #FFFFFF;
+  fill: #ffffff;
   opacity: 0.8;
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   stroke-width: 3;
 }
 
@@ -214,7 +219,7 @@
  * @module sszvis/component/groupedBars
  */
 .sszvis-bar--missing {
-  stroke: #A4A4A4;
+  stroke: #a4a4a4;
 }
 
 /**
@@ -248,7 +253,8 @@
   alignment-baseline: central;
   /* Maybe at least one of these will work? */
   dominant-baseline: central;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.625rem;
   font-style: normal;
   font-weight: normal;
@@ -267,7 +273,7 @@
 }
 
 .sszvis-sankey-column-label-tick {
-  stroke: #B8B8B8;
+  stroke: #b8b8b8;
 }
 
 .sszvis-sankey-link-source-label {
@@ -374,14 +380,15 @@
 }
 
 .sszvis-control-buttonGroup__item {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   border: 0.0625rem solid #767676;
   border-left: none;
   box-sizing: border-box;
   color: #767676;
   cursor: pointer;
   display: table-cell;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.75rem;
   line-height: normal;
   padding: 0.5625rem 0.75rem;
@@ -394,7 +401,7 @@
 */
 .sszvis-control-buttonGroup__item.selected {
   background-color: #767676;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .sszvis-control-buttonGroup__item:first-child {
@@ -416,7 +423,7 @@
 .sszvis-control-select {
   border: 0.0625rem solid #767676;
   border-radius: 0.1875rem;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABQElEQVR4nO3TzW2DUBDEcZdACSnBpe1lVhzdCSXZnaQE55JJSOJgMO9rH/OTOK70/iNxOomIiIiIiMi3cRzfar8hlc0tAM4A3gFMeZ5UDoDps+W86sDMBgBXd7+7+z3yCACmWcfVzIbFg9/xkUeYx68a4b/4iCM8in86wlJ8pBGW4ucj/Dhy98uzowgjrImffZevQzMb3P0WeYSN8bc/v0HkEXbHU8QRksVTpBGSx1OEEbLFU8sjZI+nFkcoFk8tjVA8nloYoVo81RyhejzVGKGZeCo5QnPxVGKEZuMp5wjNx1OOEcLEU8oRwsVTihHCxtOeEcLH0ysjdBNPW0foKp4yjBAnnhKOEC+eEowQN552jBA/nl4YoZ942jBCf/G0YoR+42lhhP7j6cEIx4mn2QjHiyczGw4bLyIiIiIiUtMHjJmBk7uXEiAAAAAASUVORK5CYII=");
   background-position: 96% 51%;
   background-repeat: no-repeat;
@@ -429,9 +436,10 @@
 
 .sszvis-control-select__element {
   background: transparent;
-  border: 0.0625rem solid #FFFFFF;
+  border: 0.0625rem solid #ffffff;
   color: #767676;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 1rem;
   /* Minimum of 16px to prevent iOS to zoom page */
   height: 2.125rem;
@@ -445,7 +453,8 @@
 }
 
 .sszvis-control-select__metrics {
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.75rem;
   height: auto;
   position: absolute;
@@ -465,7 +474,8 @@
 
 .sszvis-control-slider--label {
   fill: #545454;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.625rem;
   text-anchor: middle;
 }
@@ -485,12 +495,12 @@
  * @module sszvis/control/handleRuler
  */
 .sszvis-handleRuler__handle {
-  fill: #FFFFFF;
+  fill: #ffffff;
   stroke: #808184;
 }
 
 .sszvis-handleRuler__handle-mark {
-  stroke: #A6A8AB;
+  stroke: #a6a8ab;
 }
 
 /**
@@ -500,17 +510,18 @@
  */
 .sszvis-ruler__rule {
   shape-rendering: crispEdges;
-  stroke: #CCCCCC;
+  stroke: #cccccc;
 }
 
 .sszvis-ruler__dot {
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   stroke-width: 1.5;
 }
 
 .sszvis-ruler__label,
 .sszvis-ruler__label-outline {
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.75rem;
   font-style: normal;
   font-weight: normal;
@@ -521,7 +532,7 @@
 }
 
 .sszvis-ruler__label-outline {
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   stroke-width: 3;
 }
 
@@ -531,8 +542,8 @@
  * @module sszvis/annotation/rangeFlag
  */
 .sszvis-rangeFlag__mark {
-  fill: #EFEFEF;
-  stroke: #7C7C7C;
+  fill: #efefef;
+  stroke: #7c7c7c;
   stroke-width: 1.5;
 }
 
@@ -553,10 +564,12 @@
   opacity: 0.25;
 }
 
-.sszvis-rangeRuler__label, .sszvis-rangeRuler__total {
+.sszvis-rangeRuler__label,
+.sszvis-rangeRuler__total {
   font-size: 0.625rem;
   fill: #545454;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-style: normal;
 }
 
@@ -607,7 +620,7 @@
 }
 
 .sszvis-tooltip__body {
-  color: #7C7C7C;
+  color: #7c7c7c;
   font-size: 0.6875rem;
   line-height: 1.4545;
   vertical-align: middle;
@@ -639,7 +652,7 @@
 }
 
 .sszvis-tooltip__body__table tr {
-  border-top: 0.0625rem solid #E5E6E7;
+  border-top: 0.0625rem solid #e5e6e7;
 }
 
 .sszvis-tooltip__body__table td {
@@ -687,8 +700,9 @@
 }
 
 .sszvis-referenceline__caption {
-  fill: #7C7C7C;
-  font-family: Arial, sans-serif;
+  fill: #7c7c7c;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.6875rem;
   text-anchor: middle;
   /*
@@ -703,8 +717,9 @@
  * @module sszvis/annotation/circle
  */
 .sszvis-dataareacircle__caption {
-  fill: #7C7C7C;
-  font-family: Arial, sans-serif;
+  fill: #7c7c7c;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.6875rem;
   text-anchor: middle;
 }
@@ -715,8 +730,9 @@
  * @module sszvis/annotation/rectangle
  */
 .sszvis-dataarearectangle__caption {
-  fill: #7C7C7C;
-  font-family: Arial, sans-serif;
+  fill: #7c7c7c;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.6875rem;
   text-anchor: middle;
 }
@@ -731,7 +747,8 @@
  */
 .sszvis-legend__label {
   fill: #767676;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.75rem;
   font-style: normal;
   font-weight: normal;
@@ -745,7 +762,8 @@
 
 .sszvis-legend__axislabel {
   fill: #767676;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.625rem;
   font-style: normal;
   font-weight: normal;
@@ -757,12 +775,12 @@
 
 .sszvis-legend__greyline {
   fill: none;
-  stroke: #B8B8B8;
+  stroke: #b8b8b8;
   stroke-width: 1.1;
 }
 
 .sszvis-legend__dashedline {
-  stroke: #CCCCCC;
+  stroke: #cccccc;
   stroke-dasharray: 2 3;
   stroke-width: 1;
 }

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

@@ -107,7 +107,7 @@
   --background-color: var(--stzh-color-white);
   --icon-size: var(--stzh-icon-size-small);
   --icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  --counter-color: var(--stzh-color-primary48);
+  --counter-color: var(--stzh-color-primary60op);
   --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-border: var(--border);
   --hover-background-color: var(--stzh-color-primary8);
@@ -202,6 +202,13 @@
     --hover-counter-color: Highlight;
   }
 }
+:host[non-interactive]:not([non-interactive=false]) {
+  --hover-color: var(--color);
+  --hover-border: var(--border);
+  --hover-background-color: var(--background-color);
+  --hover-icon-color: var(--icon-color);
+  --hover-counter-color: var(--counter-color);
+}
 :host[disabled]:not([disabled=false]) {
   --color: var(--stzh-color-grey25);
   --border: 0.0625rem solid var(--stzh-base-border-color);
@@ -225,7 +232,6 @@
 
 .stzh-chip {
   position: relative;
-  white-space: nowrap;
   /* Size */
   /* Removeable */
   /* Disabled */
@@ -260,10 +266,17 @@
   transition: all var(--stzh-base-transition-animation-speed);
   text-decoration: none;
 }
+.stzh-chip__button.is-button, .stzh-chip__button.is-link {
+  cursor: pointer;
+}
+.stzh-chip__label {
+  text-align: left;
+}
 .stzh-chip__icon-wrapper {
   display: flex;
   color: var(--icon-color);
   transition: color var(--stzh-base-transition-animation-speed);
+  flex-shrink: 0;
 }
 .stzh-chip__icon-wrapper:not(:empty) {
   margin-right: var(--stzh-space-xsmall);
@@ -295,6 +308,7 @@
   margin-left: var(--stzh-space-xxsmall);
   color: var(--remove-color);
   transition: all var(--stzh-base-transition-animation-speed);
+  cursor: pointer;
 }
 .stzh-chip__remove:hover {
   color: var(--hover-remove-color);

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

@@ -45,6 +45,7 @@ export class StzhChip {
     this.icon = "";
     this.href = "";
     this.target = "";
+    this.nonInteractive = false;
     this.removable = false;
     this.variant = "tag";
     this.size = "default";
@@ -65,7 +66,7 @@ export class StzhChip {
     return (h(Fragment, null, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
       :
-        h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
+        h("slot", { name: "icon" })), h("stzh-clamp", { lines: 1, class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
       h("div", { class: "stzh-chip__counter", "aria-hidden": "true" }, this.counter)));
   }
   render() {
@@ -79,11 +80,21 @@ export class StzhChip {
       [`stzh-chip--size-${this.size}`]: !!this.size,
       [`stzh-chip--${this.variant}`]: !!this.variant
     };
+    const Chip = this.nonInteractive ? "div" :
+      this.href ? "a" : "button";
     return (h(Host, null, h("div", { class: classes }, this.removable &&
       h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), this.href ?
-      h("a", { ref: (el) => (this.chip = el), class: "stzh-chip__button", href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
+      h(Chip, { ref: (el) => (this.chip = el), class: {
+          "stzh-chip__button": true,
+          "is-button": !this.nonInteractive && !this.href,
+          "is-link": !this.nonInteractive && !!this.href
+        }, href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
       :
-        h("button", { ref: (el) => (this.chip = el), class: "stzh-chip__button", disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
+        h(Chip, { ref: (el) => (this.chip = el), class: {
+            "stzh-chip__button": true,
+            "is-button": !this.nonInteractive && !this.href,
+            "is-link": !this.nonInteractive && !!this.href
+          }, disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
   }
   static get is() { return "stzh-chip"; }
   static get encapsulation() { return "scoped"; }
@@ -171,6 +182,24 @@ export class StzhChip {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "nonInteractive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether chip is not interactive"
+        },
+        "attribute": "non-interactive",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "removable": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stzh-chip/stzh-chip.stories.js

@@ -53,3 +53,10 @@ Input.args = {
   size: 'small',
   'remove-label': 'Remove chip'
 };
+
+export const LongText = Template.bind({});
+LongText.args = {
+  label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit',
+  icon: 'paper-clip',
+  variant: 'input'
+};

package/dist/collection/components/stzh-chip-select/stzh-chip-select.css

@@ -185,6 +185,12 @@
 .stzh-chip-select__chip {
   margin: calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2);
 }
+.stzh-chip-select__chip.is-focused, .stzh-chip-select__chip.is-focused[active]:not([active=false]) {
+  --border: 0.0625rem solid var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-chip-select__chip.is-focused[active]:not([active=false]) {
+  --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
 @media screen and (min-width: 1024px) {
   .stzh-chip-select__dropdown {
     display: none;

package/dist/collection/components/stzh-chip-select/stzh-chip-select.js

@@ -24,28 +24,32 @@ export class StzhChipSelect {
       });
     };
     this.handleKeydown = (event) => {
-      let newIndex = null;
+      let newActiveIndex = null;
       if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
         event.preventDefault();
-        const activeOptionIndex = this.getActiveOptionIndex();
+        const activeOptionIndex = this.activeFocusOptionIndex;
         if (activeOptionIndex > 0) {
-          newIndex = activeOptionIndex - 1;
+          newActiveIndex = activeOptionIndex - 1;
         }
       }
       else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
         event.preventDefault();
-        const activeOptionIndex = this.getActiveOptionIndex();
+        const activeOptionIndex = this.activeFocusOptionIndex;
         if (activeOptionIndex < this._data.length - 1) {
-          newIndex = activeOptionIndex + 1;
+          newActiveIndex = activeOptionIndex + 1;
         }
       }
-      if (newIndex !== null) {
-        this.value = this._data[newIndex].value;
+      else if (event.key === " " || event.key === "Enter") {
+        const activeOptionIndex = this.activeFocusOptionIndex;
+        this.value = this._data[activeOptionIndex].value;
         this.stzhChange.emit({
           component: "stzh-chip-select",
           value: this.value
         });
       }
+      if (newActiveIndex !== null) {
+        this.activeFocusOptionIndex = newActiveIndex;
+      }
     };
     this.localization = undefined;
     this.data = [];
@@ -59,6 +63,7 @@ export class StzhChipSelect {
     this.required = false;
     this.disabled = false;
     this.a11yDescribedby = "";
+    this.activeFocusOptionIndex = 0;
   }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -96,9 +101,6 @@ export class StzhChipSelect {
     }
     this.invalid = this._error.length > 0;
   }
-  getActiveOptionIndex() {
-    return this._data.findIndex(data => this.value === data.value);
-  }
   async componentWillLoad() {
     this.id = `stzh-chip-select-${chipSelectCounter++}`;
     this.dataWatcher(this.data);
@@ -120,7 +122,10 @@ export class StzhChipSelect {
       "stzh-chip-select--is-disabled": this.disabled,
       "stzh-chip-select--is-required": this.required
     };
-    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.getActiveOptionIndex()}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, i) => (h("stzh-chip", { role: "option", class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value, id: `${this.id}-option-${i}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.handleDropdownChange }))));
+    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, i) => (h("stzh-chip", { role: "option", class: {
+        "stzh-chip-select__chip": true,
+        "is-focused": this.activeFocusOptionIndex === i
+      }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : "false", id: `${this.id}-option-${i}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.handleDropdownChange }))));
   }
   static get is() { return "stzh-chip-select"; }
   static get encapsulation() { return "scoped"; }
@@ -357,6 +362,11 @@ export class StzhChipSelect {
       }
     };
   }
+  static get states() {
+    return {
+      "activeFocusOptionIndex": {}
+    };
+  }
   static get events() {
     return [{
         "method": "stzhChange",

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

@@ -279,6 +279,11 @@
 }
 
 .stzh-clamp {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--lines);

package/dist/collection/components/{stzh-contactaddress/stzh-contactaddress.css → stzh-contact/stzh-contact.css}

@@ -130,103 +130,103 @@
   }
 }
 
-.stzh-contactaddress {
+.stzh-contact {
   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);
   /* Has border */
 }
 @media screen and (min-width: 1024px) {
-  .stzh-contactaddress {
+  .stzh-contact {
     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);
   }
 }
-.stzh-contactaddress, .stzh-contactaddress__inner-wrapper {
+.stzh-contact, .stzh-contact__inner-wrapper {
   display: flex;
   flex-direction: column;
 }
 @media screen and (min-width: 800px) {
-  .stzh-contactaddress, .stzh-contactaddress__inner-wrapper {
+  .stzh-contact, .stzh-contact__inner-wrapper {
     flex-direction: row;
   }
 }
-.stzh-contactaddress__wrapper {
+.stzh-contact__wrapper {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
-.stzh-contactaddress__image {
+.stzh-contact__image {
   display: flex;
   flex-shrink: 0;
 }
-.stzh-contactaddress__pobox {
+.stzh-contact__pobox {
   margin-top: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-contactaddress__pobox {
+  .stzh-contact__pobox {
     margin-top: var(--stzh-space-medium);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-contactaddress__pobox {
+  .stzh-contact__pobox {
     margin-top: var(--stzh-space-large);
   }
 }
-.stzh-contactaddress__main-heading {
+.stzh-contact__main-heading {
   margin-bottom: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-contactaddress__main-heading {
+  .stzh-contact__main-heading {
     margin-bottom: var(--stzh-space-medium);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-contactaddress__main-heading {
+  .stzh-contact__main-heading {
     margin-bottom: var(--stzh-space-large);
   }
 }
-.stzh-contactaddress__number-link {
+.stzh-contact__number-link {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
 }
-.stzh-contactaddress__number-link:hover, .stzh-contactaddress__number-link:focus {
+.stzh-contact__number-link:hover, .stzh-contact__number-link:focus {
   color: var(--stzh-link-hover-color);
 }
-.stzh-contactaddress__info {
+.stzh-contact__info {
   flex-grow: 1;
 }
 @media screen and (min-width: 800px) {
-  .stzh-contactaddress__info {
+  .stzh-contact__info {
     flex-basis: 45%;
   }
 }
-.stzh-contactaddress__availability-title {
+.stzh-contact__availability-title {
   margin-bottom: var(--stzh-space-xsmall);
 }
-.stzh-contactaddress__availability {
+.stzh-contact__availability {
   margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 800px) {
-  .stzh-contactaddress__availability {
+  .stzh-contact__availability {
     margin-left: var(--stzh-space-xlarge);
     margin-top: 0;
     flex-basis: 55%;
   }
 }
 @media screen and (min-width: 800px) and (min-width: 1024px) {
-  .stzh-contactaddress__availability {
+  .stzh-contact__availability {
     margin-left: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 800px) and (min-width: 1260px) {
-  .stzh-contactaddress__availability {
+  .stzh-contact__availability {
     margin-left: var(--stzh-space-xxxlarge);
   }
 }
-.stzh-contactaddress--has-border {
+.stzh-contact--has-border {
   padding-bottom: var(--stzh-space-xlarge);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }