@oiz/stzh-components 2.2.0-beta → 2.3.0-alpha

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";
@@ -53,6 +54,7 @@ export class StzhChip {
     this.removeLabel = "";
     this.active = false;
     this.disabled = false;
+    this.a11yTabindex = undefined;
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
   }
@@ -64,8 +66,8 @@ 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)), this.counter &&
-      h("div", { class: "stzh-chip__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() {
     const classes = {
@@ -78,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", { class: "stzh-chip__button", href: this.disabled ? null : this.href, target: this.target, "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", { class: "stzh-chip__button", disabled: this.disabled, type: "button", "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"; }
@@ -170,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,
@@ -314,6 +344,23 @@ export class StzhChip {
         "reflect": true,
         "defaultValue": "false"
       },
+      "a11yTabindex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tabindex of link/button"
+        },
+        "attribute": "a11y-tabindex",
+        "reflect": false
+      },
       "a11yLabel": {
         "type": "string",
         "mutable": false,
@@ -343,7 +390,7 @@ export class StzhChip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Id for element which describes the button"
+          "text": "Id for element which describes the link/button"
         },
         "attribute": "a11y-describedby",
         "reflect": 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

@@ -152,6 +152,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;
@@ -174,6 +175,7 @@
   align-items: center;
   flex-wrap: wrap;
   margin: calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);
+  border-radius: var(--stzh-button-border-radius);
 }
 @media screen and (max-width: 1023px) {
   .stzh-chip-select__chips {
@@ -183,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

@@ -9,20 +9,48 @@ export class StzhChipSelect {
   constructor() {
     this._data = [];
     this._dataDropdown = [];
-    this.chipClick = (data) => {
+    this.handleChipClick = (data) => {
       this.value = data.value;
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
       });
     };
-    this.onDropdownChange = (event) => {
+    this.handleDropdownChange = (event) => {
       this.value = event.detail.value;
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
       });
     };
+    this.handleKeydown = (event) => {
+      let newActiveIndex = null;
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        const activeOptionIndex = this.activeFocusOptionIndex;
+        if (activeOptionIndex > 0) {
+          newActiveIndex = activeOptionIndex - 1;
+        }
+      }
+      else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const activeOptionIndex = this.activeFocusOptionIndex;
+        if (activeOptionIndex < this._data.length - 1) {
+          newActiveIndex = activeOptionIndex + 1;
+        }
+      }
+      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 = [];
     this.name = undefined;
@@ -35,6 +63,7 @@ export class StzhChipSelect {
     this.required = false;
     this.disabled = false;
     this.a11yDescribedby = "";
+    this.activeFocusOptionIndex = 0;
   }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -73,7 +102,7 @@ export class StzhChipSelect {
     this.invalid = this._error.length > 0;
   }
   async componentWillLoad() {
-    this.inputId = `stzh-chip-select-${chipSelectCounter++}`;
+    this.id = `stzh-chip-select-${chipSelectCounter++}`;
     this.dataWatcher(this.data);
     this.errorWatcher(this.error);
     if (!this.localization) {
@@ -93,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" }, this._data.map((data) => (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 ? "true" : null, a11yDescribedby: `${this.inputId}-description ${this.a11yDescribedby}`, onClick: () => this.chipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.inputId}-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.onDropdownChange }))));
+    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"; }
@@ -330,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);
 }

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

@@ -5,7 +5,7 @@ function formatTel(tel) {
 }
 /**
  */
-export class StzhContactaddress {
+export class StzhContact {
   constructor() {
     this._numbers = [];
     this._availability = [];
@@ -56,34 +56,34 @@ export class StzhContactaddress {
   render() {
     const hasImage = hasSlot(this.element, "image");
     const classes = {
-      "stzh-contactaddress": true,
-      "stzh-contactaddress--has-image": hasImage,
-      "stzh-contactaddress--has-border": this.withBorder
+      "stzh-contact": true,
+      "stzh-contact--has-image": hasImage,
+      "stzh-contact--has-border": this.withBorder
     };
-    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contactaddress__image" }, h("slot", { name: "image" })), h("div", { class: "stzh-contactaddress__wrapper" }, this.mainHeading &&
-      h("stzh-heading", { level: "3", class: "stzh-contactaddress__main-heading", itemprop: (this.type === "Organization" && !this.heading
-          || this.type === "Person" && !this.name) ? "name" : null, innerHTML: this.mainHeading }), h("div", { class: "stzh-contactaddress__inner-wrapper" }, h("div", { class: "stzh-contactaddress__info" }, this.heading &&
-      h("stzh-heading", { level: "4", class: "stzh-contactaddress__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
-      h("div", { class: "stzh-contactaddress__name", itemprop: this.type === "Person" ? "name" : null }, this.name), (this.street || this.postalCode || this.location) &&
-      h("div", { class: "stzh-contactaddress__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress" }, this.street &&
-        h("div", { class: "stzh-contactaddress__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
+    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contact__image" }, h("slot", { name: "image" })), h("div", { class: "stzh-contact__wrapper" }, this.mainHeading &&
+      h("stzh-heading", { level: "3", class: "stzh-contact__main-heading", itemprop: (this.type === "Organization" && !this.heading
+          || this.type === "Person" && !this.name) ? "name" : null, innerHTML: this.mainHeading }), h("div", { class: "stzh-contact__inner-wrapper" }, h("div", { class: "stzh-contact__info" }, this.heading &&
+      h("stzh-heading", { level: "4", class: "stzh-contact__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
+      h("div", { class: "stzh-contact__name", itemprop: this.type === "Person" ? "name" : null }, this.name), (this.street || this.postalCode || this.location) &&
+      h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress" }, this.street &&
+        h("div", { class: "stzh-contact__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
           h(Fragment, null, h("br", null), " ", this.streetInfo)), this.postalCode &&
-        h("span", { class: "stzh-contactaddress__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0"), this.location &&
-        h("span", { class: "stzh-contactaddress__locality", itemprop: "addressLocality" }, this.location)), this._numbers.map((number) => h("div", { class: "stzh-contactaddress__number" }, h("span", null, number.label, "\u00A0"), h("span", { itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, h("a", { class: "stzh-contactaddress__number-link", href: `${number.type}:${formatTel(number.number)}` }, number.number)))), (this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&
-      h("div", { class: "stzh-contactaddress__pobox" }, h("div", { class: "stzh-contactaddress__pobox-heading" }, this.poBoxHeading), h("div", { class: "stzh-contactaddress__pobox-title" }, this.poboxTitle), h("span", { class: "stzh-contactaddress__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), h("span", { class: "stzh-contactaddress__pobox-locality" }, this.poboxLocation))), this.availability &&
-      h("div", { class: "stzh-contactaddress__availability" }, this.availabilityTitle &&
-        h("stzh-heading", { level: "4", class: "stzh-contactaddress__availability-title" }, this.availabilityTitle), h("stzh-datalist", { hideBorder: true, directionSmall: "vertical", items: this.availabilityDataItems })))))));
+        h("span", { class: "stzh-contact__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0"), this.location &&
+        h("span", { class: "stzh-contact__locality", itemprop: "addressLocality" }, this.location)), this._numbers.map((number) => h("div", { class: "stzh-contact__number" }, h("span", null, number.label, "\u00A0"), h("span", { itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, h("a", { class: "stzh-contact__number-link", href: `${number.type}:${formatTel(number.number)}` }, number.number)))), (this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&
+      h("div", { class: "stzh-contact__pobox" }, h("div", { class: "stzh-contact__pobox-heading" }, this.poBoxHeading), h("div", { class: "stzh-contact__pobox-title" }, this.poboxTitle), h("span", { class: "stzh-contact__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), h("span", { class: "stzh-contact__pobox-locality" }, this.poboxLocation))), this.availability &&
+      h("div", { class: "stzh-contact__availability" }, this.availabilityTitle &&
+        h("stzh-heading", { level: "4", class: "stzh-contact__availability-title" }, this.availabilityTitle), h("stzh-datalist", { hideBorder: true, directionSmall: "vertical", items: this.availabilityDataItems })))))));
   }
-  static get is() { return "stzh-contactaddress"; }
+  static get is() { return "stzh-contact"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["stzh-contactaddress.scss"]
+      "$": ["stzh-contact.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["stzh-contactaddress.css"]
+      "$": ["stzh-contact.css"]
     };
   }
   static get properties() {
@@ -229,10 +229,10 @@ export class StzhContactaddress {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ContactaddressNumber[] | string",
-          "resolved": "ContactaddressNumber[] | string",
+          "original": "ContactNumber[] | string",
+          "resolved": "ContactNumber[] | string",
           "references": {
-            "ContactaddressNumber": {
+            "ContactNumber": {
               "location": "import",
               "path": "../../index"
             }
@@ -337,10 +337,10 @@ export class StzhContactaddress {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | StzhContactaddressAvailabilityItem[]",
-          "resolved": "StzhContactaddressAvailabilityItem[] | string",
+          "original": "string | StzhContactAvailabilityItem[]",
+          "resolved": "StzhContactAvailabilityItem[] | string",
           "references": {
-            "StzhContactaddressAvailabilityItem": {
+            "StzhContactAvailabilityItem": {
               "location": "import",
               "path": "../../index"
             }

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

@@ -4,8 +4,8 @@ import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../../figma';
 
 export default {
-  title: 'Components/Contactaddress',
-  component: 'stzh-contactaddress',
+  title: 'Components/Contact',
+  component: 'stzh-contact',
   parameters: {
     docs: {
       description: {
@@ -14,7 +14,7 @@ export default {
     },
     design: {
       type: 'figma',
-      url: getFigmaLink('contactaddress'),
+      url: getFigmaLink('contact'),
       allowFullscreen: true
     }
   },
@@ -24,13 +24,13 @@ export default {
 };
 
 const Template = (args) => (
-  <stzh-contactaddress {...args}></stzh-contactaddress>
+  <stzh-contact {...args}></stzh-contact>
 );
 
-const TemplateWithImageAndAvailability = (args) => (
-  <stzh-contactaddress {...args}>
+const TemplateContactPersonWithImageAndAvailability = (args) => (
+  <stzh-contact {...args}>
     <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
-  </stzh-contactaddress>
+  </stzh-contact>
 );
 
 const numbers = `[
@@ -85,6 +85,7 @@ const availability = `[
 ]`;
 
 export const OrganizationWithPobox = Template.bind({});
+OrganizationWithPobox.storyName = 'Organization With P.O. Box';
 OrganizationWithPobox.args = {
   'with-border': true,
   type: 'Organization',
@@ -137,8 +138,8 @@ MinimalOrganization.args = {
   ]`
 }
 
-export const WithImageAndAvailability = TemplateWithImageAndAvailability.bind({});
-WithImageAndAvailability.args = {
+export const ContactPersonWithImageAndAvailability = TemplateContactPersonWithImageAndAvailability.bind({});
+ContactPersonWithImageAndAvailability.args = {
   type: 'Organization',
   'main-heading': 'City Zürich Organisation',
   street: 'Musterstrasse 1',

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

@@ -125,6 +125,15 @@
     margin-right: calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / -2);
   }
 }
+:host ::slotted(*) stzh-container {
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  width: 100vw;
+  max-width: 100vw;
+}
 :host ::slotted(*) stzh-section[variant=highlight] {
   --highlight-horizontal-padding: 1.25rem;
 }
@@ -161,7 +170,8 @@
   :host ::slotted(*) stzh-row stzh-section[variant=highlight] {
     left: initial;
     right: initial;
-    margin: initial;
+    margin-left: initial;
+    margin-right: initial;
     width: initial;
     max-width: initial;
   }

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

@@ -1,8 +1,11 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * @slot - Slot for any content
  */
 export class StzhContainer {
+  constructor() {
+    this.inverted = false;
+  }
   render() {
     return (h(Host, null, h("div", { class: "stzh-container" }, h("slot", null))));
   }
@@ -18,4 +21,26 @@ export class StzhContainer {
       "$": ["stzh-container.css"]
     };
   }
+  static get properties() {
+    return {
+      "inverted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether color should be inverted"
+        },
+        "attribute": "inverted",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
 }

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

@@ -25,7 +25,7 @@ export default {
 };
 
 const Template = (args) => (
-  <stzh-container>
+  <stzh-container {...args}>
     <stzh-text>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</stzh-text>
   </stzh-container>
 );
@@ -33,3 +33,8 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
 };
+
+export const Inverted = Template.bind({});
+Inverted.args = {
+  inverted: true
+};